Backed out changeset d146eb93b6d0 (bug 1693374) for causing failures at browser_interaction_telemetry.js. CLOSED TREE

browser/components/preferences/preferences.xhtml

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

toolkit/mozapps/extensions/content/aboutaddons.js

@@ -1954,77 +1954,59 @@ 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();
-    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",
-          value: "about:preferences",
-          extra: {
-            view: getTelemetryViewName(this),
-          },
-        });
-        windowRoot.ownerGlobal.switchToTabHavingURI("about:preferences", true, {
-          ignoreFragment: "whenComparing",
-          triggeringPrincipal: systemPrincipal,
-        });
-      },
+    prefsLink.addEventListener("click", e => {
+      e.preventDefault();
+      AMTelemetry.recordLinkEvent({
+        object: "aboutAddons",
+        value: "about:preferences",
+        extra: {
+          view: getTelemetryViewName(this),
+        },
+      });
+      windowRoot.ownerGlobal.switchToTabHavingURI("about:preferences", true, {
+        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 = 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",
-          extra: {
-            view: getTelemetryViewName(this),
-          },
-        });
-      },
+    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 => {
+      AMTelemetry.recordLinkEvent({
+        object: "aboutAddons",
+        value: "support",
+        extra: {
+          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,8 +1097,6 @@ 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. */
@@ -1125,8 +1123,6 @@ input[type="text"][warning]:enabled:not(:focus) {
   transform: scaleX(-1);
 }
 
-/* Sidebar footer links */
-
 .sidebar-footer-list {
   list-style-type: none;
   margin-block: 0 36px;
@@ -1134,32 +1130,61 @@ input[type="text"][warning]:enabled:not(:focus) {
   padding: 0;
 }
 
-.sidebar-footer-link {
+.sidebar-footer-link,
+.sidebar-footer-button > .text-link {
+  -moz-box-flex: 1;
+  margin-inline: 34px 0;
+  text-decoration: none;
+  color: currentColor;
+  width: 36px;
   height: 36px;
   cursor: default;
-  border-radius: 2px;
+}
+
+.sidebar-footer-link {
   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;
 
-  /* Override link style for :hover and :hover:active states */
-  text-decoration: none !important;
-  color: inherit !important;
+  /* These override the common styles. */
+  margin: 0;
+  font-size: .9em;
+  width: auto;
 }
 
-xul|*.sidebar-footer-link {
-  display: -moz-box;
-  -moz-box-align: center;
+.sidebar-footer-link:dir(rtl) {
+  background-position-x: right 13px;
 }
 
-.sidebar-footer-link:hover {
+.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 {
   background-color: var(--in-content-category-background-hover);
+  border-radius: 2px;
 }
 
-.sidebar-footer-link:hover:active:not([disabled]) {
+.sidebar-footer-link:hover:active:not([disabled]),
+.sidebar-footer-button > .text-link:hover:active:not([disabled]) {
   background-color: var(--in-content-category-background-active);
+  color: currentColor;
 }
 
-.sidebar-footer-link:-moz-focusring {
+.sidebar-footer-link:-moz-focusring,
+.sidebar-footer-button > .text-link:-moz-focusring {
   outline: var(--in-content-category-outline-focus);
   outline-offset: -1px;
 }
@@ -1171,18 +1196,61 @@ xul|*.sidebar-footer-link {
   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 {
-  font-size: .9em;
   margin: 0 4px;
+  font-size: .9em;
   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 {
@@ -1192,30 +1260,17 @@ xul|*.sidebar-footer-link {
     margin-inline-start: 1px;
   }
 
-  .sidebar-footer-icon {
-    margin-inline-start: 10px;
+  .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-label {
+  .sidebar-footer-link-text {
     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;