Bug 1693374 - Make common.css sidebar footer styles re-usable. r=desktop-theme-reviewers,harry,robwu

Differential Revision: https://phabricator.services.mozilla.com/D106300

browser/components/preferences/preferences.xhtml

@@ -155,23 +155,16 @@
 
       <spacer flex="1"/>
 
-      <hbox class="sidebar-footer-button" pack="center">
-        <label id="addonsButton" is="text-link">
-          <hbox align="center">
+      <vbox class="sidebar-footer-list">
+        <label id="addonsButton" class="sidebar-footer-link" is="text-link">
           <image class="sidebar-footer-icon addons-icon"/>
           <label class="sidebar-footer-label" flex="1" data-l10n-id="addons-button-label"></label>
-          </hbox>
         </label>
-      </hbox>
-
-      <hbox class="sidebar-footer-button help-button" pack="center">
-        <label id="helpButton" is="text-link">
-          <hbox align="center">
+        <label id="helpButton" class="sidebar-footer-link" is="text-link">
           <image class="sidebar-footer-icon help-icon"/>
           <label class="sidebar-footer-label" flex="1" data-l10n-id="help-button-label"></label>
-          </hbox>
         </label>
-      </hbox>
+      </vbox>
     </vbox>
 
     <keyset>

toolkit/mozapps/extensions/content/aboutaddons.js

@@ -1954,15 +1954,17 @@ class SidebarFooter extends HTMLElement {
     let list = document.createElement("ul");
     list.classList.add("sidebar-footer-list");
 
-    let prefsItem = document.createElement("li");
-    prefsItem.classList.add("sidebar-footer-item");
-    let prefsLink = document.createElement("a");
-    prefsLink.classList.add("sidebar-footer-link", "preferences-icon");
-    prefsLink.id = "preferencesButton";
-    prefsLink.href = "about:preferences";
-    document.l10n.setAttributes(prefsLink, "sidebar-preferences-button-title");
     let systemPrincipal = Services.scriptSecurityManager.getSystemPrincipal();
-    prefsLink.addEventListener("click", e => {
+    let prefsItem = this.createItem({
+      icon: "chrome://global/skin/icons/settings.svg",
+      createLinkElement: () => {
+        let link = document.createElement("a");
+        link.href = "about:preferences";
+        return link;
+      },
+      titleL10nId: "sidebar-preferences-button-title",
+      labelL10nId: "preferences",
+      onClick: e => {
         e.preventDefault();
         AMTelemetry.recordLinkEvent({
           object: "aboutAddons",
@@ -1975,21 +1977,20 @@ class SidebarFooter extends HTMLElement {
           ignoreFragment: "whenComparing",
           triggeringPrincipal: systemPrincipal,
         });
+      },
     });
-    let prefsText = document.createElement("span");
-    prefsText.classList.add("sidebar-footer-link-text");
-    document.l10n.setAttributes(prefsText, "preferences");
-    prefsLink.append(prefsText);
-    prefsItem.append(prefsLink);
 
-    let supportItem = document.createElement("li");
-    supportItem.classList.add("sidebar-footer-item");
-    let supportLink = document.createElement("a", { is: "support-link" });
-    document.l10n.setAttributes(supportLink, "sidebar-help-button-title");
-    supportLink.classList.add("sidebar-footer-link", "help-icon");
-    supportLink.id = "help-button";
-    supportLink.setAttribute("support-page", "addons-help");
-    supportLink.addEventListener("click", e => {
+    let supportItem = this.createItem({
+      icon: "chrome://global/skin/icons/help.svg",
+      createLinkElement: () => {
+        let link = document.createElement("a", { is: "support-link" });
+        link.setAttribute("support-page", "addons-help");
+        link.id = "help-button";
+        return link;
+      },
+      titleL10nId: "sidebar-help-button-title",
+      labelL10nId: "help-button",
+      onClick: e => {
         AMTelemetry.recordLinkEvent({
           object: "aboutAddons",
           value: "support",
@@ -1997,16 +1998,33 @@ class SidebarFooter extends HTMLElement {
             view: getTelemetryViewName(this),
           },
         });
+      },
     });
-    let supportText = document.createElement("span");
-    supportText.classList.add("sidebar-footer-link-text");
-    document.l10n.setAttributes(supportText, "help-button");
-    supportLink.append(supportText);
-    supportItem.append(supportLink);
 
     list.append(prefsItem, supportItem);
     this.append(list);
   }
+
+  createItem({ onClick, titleL10nId, labelL10nId, icon, createLinkElement }) {
+    let listItem = document.createElement("li");
+
+    let link = createLinkElement();
+    link.classList.add("sidebar-footer-link");
+    link.addEventListener("click", onClick);
+    document.l10n.setAttributes(link, titleL10nId);
+
+    let img = document.createElement("img");
+    img.src = icon;
+    img.className = "sidebar-footer-icon";
+
+    let label = document.createElement("span");
+    label.className = "sidebar-footer-label";
+    document.l10n.setAttributes(label, labelL10nId);
+
+    link.append(img, label);
+    listItem.append(link);
+    return listItem;
+  }
 }
 customElements.define("sidebar-footer", SidebarFooter, { extends: "footer" });
 

toolkit/themes/shared/in-content/common.inc.css

@@ -1097,6 +1097,8 @@ input[type="text"][warning]:enabled:not(:focus) {
   box-shadow: 0 0 0 1px var(--yellow-60), 0 0 0 4px var(--yellow-60-a30);
 }
 
+/* Cards */
+
 .card {
   background: var(--in-content-box-background);
   /* Needed for high-contrast where the border will appear. */
@@ -1123,6 +1125,8 @@ input[type="text"][warning]:enabled:not(:focus) {
   transform: scaleX(-1);
 }
 
+/* Sidebar footer links */
+
 .sidebar-footer-list {
   list-style-type: none;
   margin-block: 0 36px;
@@ -1130,61 +1134,32 @@ input[type="text"][warning]:enabled:not(:focus) {
   padding: 0;
 }
 
-.sidebar-footer-link,
-.sidebar-footer-button > .text-link {
-  -moz-box-flex: 1;
-  margin-inline: 34px 0;
-  text-decoration: none;
-  color: currentColor;
-  width: 36px;
+.sidebar-footer-link {
   height: 36px;
   cursor: default;
-}
-
-.sidebar-footer-link {
+  border-radius: 2px;
   display: flex;
   align-items: center;
-  background-size: 16px;
-  background-repeat: no-repeat;
-  background-position-x: 13px;
-  background-position-y: 10px;
-  cursor: default;
-  -moz-context-properties: fill, fill-opacity;
-  fill: currentColor;
-  padding-inline-start: 43px;
 
-  /* These override the common styles. */
-  margin: 0;
-  font-size: .9em;
-  width: auto;
+  /* Override link style for :hover and :hover:active states */
+  text-decoration: none !important;
+  color: inherit !important;
 }
 
-.sidebar-footer-link:dir(rtl) {
-  background-position-x: right 13px;
+xul|*.sidebar-footer-link {
+  display: -moz-box;
+  -moz-box-align: center;
 }
 
-.sidebar-footer-link,
-.sidebar-footer-link:hover,
-.sidebar-footer-link:hover:active,
-.sidebar-footer-link:visited {
-  text-decoration: none;
-  color: currentColor;
-}
-
-.sidebar-footer-link:hover,
-.sidebar-footer-button > .text-link:hover {
+.sidebar-footer-link:hover {
   background-color: var(--in-content-category-background-hover);
-  border-radius: 2px;
 }
 
-.sidebar-footer-link:hover:active:not([disabled]),
-.sidebar-footer-button > .text-link:hover:active:not([disabled]) {
+.sidebar-footer-link:hover:active:not([disabled]) {
   background-color: var(--in-content-category-background-active);
-  color: currentColor;
 }
 
-.sidebar-footer-link:-moz-focusring,
-.sidebar-footer-button > .text-link:-moz-focusring {
+.sidebar-footer-link:-moz-focusring {
   outline: var(--in-content-category-outline-focus);
   outline-offset: -1px;
 }
@@ -1196,61 +1171,18 @@ input[type="text"][warning]:enabled:not(:focus) {
   height: 16px;
   margin: 10px;
   margin-inline-start: 13px;
-  vertical-align: middle;
-}
-
-.sidebar-footer-icon:hover {
-  fill: currentColor !important;
-}
-
-.sidebar-footer-button:last-of-type {
-  margin-bottom: 36px;
-}
-
-xul|*.help-icon {
-  list-style-image: url("chrome://global/skin/icons/help.svg");
-}
-
-html|*.help-icon {
-  background-image: url("chrome://global/skin/icons/help.svg");
-}
-
-.preferences-icon {
-  background-image: url("chrome://global/skin/icons/settings.svg");
-}
-
-.addons-icon {
-  list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
-  /* The add-ons icon doesn't have much (any?) margin, so make it a bit smaller. */
-  width: 14px;
-  height: 14px;
-  margin-inline-start: 15px;
 }
 
 .sidebar-footer-label {
-  margin: 0 4px;
   font-size: .9em;
+  margin: 0 4px;
   user-select: none;
 }
 
 @media (max-width: 830px) {
-  .sidebar-footer-button > .text-link {
-    -moz-box-flex: 0;
-    width: 36px;
-    height: 36px;
-    margin-inline-start: 0;
-  }
-
-  .sidebar-footer-icon {
-    margin: 10px;
-  }
-
-  .sidebar-footer-label {
-    display: none;
-  }
-
   .sidebar-footer-list {
     margin-inline-start: 40px;
+    -moz-box-align: start;
   }
 
   .sidebar-footer-link {
@@ -1260,17 +1192,30 @@ html|*.help-icon {
     margin-inline-start: 1px;
   }
 
-  .sidebar-footer-link,
-  /* We need to override the full-width RTL rule, so explicitly specify RTL. */
-  .sidebar-footer-link:dir(rtl) {
-    background-position: center;
+  .sidebar-footer-icon {
+    margin-inline-start: 10px;
   }
 
-  .sidebar-footer-link-text {
+  .sidebar-footer-label {
     display: none;
   }
 }
 
+/* Icon helper classes */
+
+xul|*.help-icon {
+  list-style-image: url("chrome://global/skin/icons/help.svg");
+}
+
+xul|*.addons-icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
+  /* The add-ons icon doesn't have much (any?) margin, so make it a bit smaller. */
+  scale: 87.5%;
+  translate: 6.25%;
+}
+
+/* Back button */
+
 .back-button {
   -moz-context-properties: fill;
   fill: currentColor;