Bug 1483335 - Link between preferences and add-on manager r=flod,jaws
authorMark Striemer <mstriemer@mozilla.com>
Sat, 13 Oct 2018 04:59:59 +0000
changeset 496846 661d9ca2bed9ec587170e2ec697844b444874a02
parent 496845 94a62c1aad526dc24dc9186a6ccebb0db276ee87
child 496847 40d620c9c6ee52bc3e3b5181c4336a74044af7c1
push id9984
push userffxbld-merge
push dateMon, 15 Oct 2018 21:07:35 +0000
treeherdermozilla-beta@183d27ea8570 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersflod, jaws
bugs1483335
milestone64.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1483335 - Link between preferences and add-on manager r=flod,jaws Differential Revision: https://phabricator.services.mozilla.com/D8099
browser/components/preferences/in-content/preferences.js
browser/components/preferences/in-content/preferences.xul
browser/locales/en-US/browser/preferences/preferences.ftl
browser/themes/shared/incontentprefs/preferences.inc.css
toolkit/locales/en-US/chrome/mozapps/extensions/extensions.dtd
toolkit/mozapps/extensions/content/extensions.css
toolkit/mozapps/extensions/content/extensions.js
toolkit/mozapps/extensions/content/extensions.xul
toolkit/themes/shared/in-content/common.inc.css
--- a/browser/components/preferences/in-content/preferences.js
+++ b/browser/components/preferences/in-content/preferences.js
@@ -78,20 +78,26 @@ function init_all() {
     this.removeAttribute("keyboard-navigation");
   });
 
   maybeDisplayPoliciesNotice();
 
   window.addEventListener("hashchange", onHashChange);
   gotoPref();
 
-  let helpButton = document.querySelector(".help-button > .text-link");
+  let helpButton = document.getElementById("helpButton");
   let helpUrl = Services.urlFormatter.formatURLPref("app.support.baseURL") + "preferences";
   helpButton.setAttribute("href", helpUrl);
 
+  document.getElementById("addonsButton")
+    .addEventListener("click", () => {
+      let mainWindow = window.docShell.rootTreeItem.domWindow;
+      mainWindow.BrowserOpenAddonsMgr();
+    });
+
   document.dispatchEvent(new CustomEvent("Initialized", {
     "bubbles": true,
     "cancelable": true,
   }));
 }
 
 function telemetryBucketForCategory(category) {
   category = category.toLowerCase();
--- a/browser/components/preferences/in-content/preferences.xul
+++ b/browser/components/preferences/in-content/preferences.xul
@@ -145,21 +145,30 @@
                       align="center">
           <image class="category-icon"/>
           <label class="category-name" flex="1" data-l10n-id="pane-sync-title"></label>
         </richlistitem>
       </richlistbox>
 
       <spacer flex="1"/>
 
-      <hbox class="help-button" pack="center">
-        <label class="text-link">
+      <hbox class="sidebar-footer-button" pack="center">
+        <label id="addonsButton" class="text-link">
           <hbox align="center">
-            <image class="help-icon"/>
-              <label class="help-label" flex="1" data-l10n-id="help-button-label"></label>
+            <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" class="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>
       </hbox>
     </vbox>
 
     <keyset>
       <key data-l10n-id="focus-search" key="" modifiers="accel" id="focusSearch1" oncommand="gSearchResultsPane.searchInput.focus();"/>
     </keyset>
--- a/browser/locales/en-US/browser/preferences/preferences.ftl
+++ b/browser/locales/en-US/browser/preferences/preferences.ftl
@@ -57,16 +57,17 @@ category-privacy =
     .tooltiptext = { pane-privacy-title }
 
 # The word "account" can be translated, do not translate or transliterate "Firefox".
 pane-sync-title = Firefox Account
 category-sync =
     .tooltiptext = { pane-sync-title }
 
 help-button-label = { -brand-short-name } Support
+addons-button-label = Extensions & Themes
 
 focus-search =
     .key = f
 
 close-button =
     .aria-label = Close
 
 ## Browser Restart Dialog
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -698,83 +698,16 @@ button > hbox > label {
   }
 }
 
 .navigation {
   overflow-x: hidden;
   overflow-y: auto;
 }
 
-.navigation > .help-button {
-  margin-bottom: 36px;
-  padding: 1px; /* Adding padding around help label in order to make entire keyboard focusing outline visible */
-}
-
-.help-button > .text-link {
-  -moz-box-flex: 1;
-  margin-inline-start: 34px;
-  margin-inline-end: 0;
-  text-decoration: none;
-  color: currentColor;
-  width: 36px;
-  height: 36px;
-  cursor: default;
-}
-
-.help-button > .text-link:hover {
-  background-color: var(--in-content-category-background-hover);
-  border-radius: 2px;
-}
-
-.help-button > .text-link:hover:active:not([disabled]) {
-  background-color: var(--in-content-category-background-active);
-}
-
-.help-button > .text-link:-moz-focusring {
-  outline: var(--in-content-category-outline-focus);
-}
-
-.help-icon {
-  list-style-image: url("chrome://global/skin/icons/help.svg");
-  -moz-context-properties: fill, fill-opacity;
-  fill: currentColor;
-  width: 16px;
-  height: 16px;
-  margin: 10px;
-  margin-inline-start: 13px;
-  vertical-align: middle;
-}
-
-.help-icon:hover {
-  fill: currentColor !important;
-}
-
-.help-label {
-  margin: 0 4px;
-  font-size: .9em;
-  -moz-user-select: none;
-}
-
-@media (max-width: 830px) {
-  .help-button > .text-link {
-    -moz-box-flex: 0;
-    width: 36px;
-    height: 36px;
-    margin-inline-start: 0;
-  }
-
-  .help-icon {
-    margin: 10px;
-  }
-
-  .help-label {
-    display: none;
-  }
-}
-
 .face-sad {
   list-style-image: url("chrome://browser/skin/preferences/in-content/face-sad.svg");
   width: 20px;
   height: 20px;
   margin-inline-end: 8px;
   margin-top: 5px;
   margin-bottom: 5px;
 }
--- a/toolkit/locales/en-US/chrome/mozapps/extensions/extensions.dtd
+++ b/toolkit/locales/en-US/chrome/mozapps/extensions/extensions.dtd
@@ -37,16 +37,19 @@
 <!ENTITY warning.updatesecurity.enable.label       "Enable">
 <!ENTITY warning.updatesecurity.enable.tooltip     "Enable add-on update security checking">
 
 <!-- categories / views -->
 <!ENTITY view.discover.label                  "Get Add-ons">
 <!ENTITY view.recentUpdates.label             "Recent Updates">
 <!ENTITY view.availableUpdates.label          "Available Updates">
 
+<!ENTITY preferencesWin.label                  "&brandShortName; Options">
+<!ENTITY preferencesUnix.label                 "&brandShortName; Preferences">
+
 <!-- addon updates -->
 <!ENTITY updates.checkForUpdates.label        "Check for Updates">
 <!ENTITY updates.checkForUpdates.accesskey    "C">
 <!ENTITY updates.viewUpdates.label            "View Recent Updates">
 <!ENTITY updates.viewUpdates.accesskey        "V">
 <!-- LOCALIZATION NOTE (updates.updateAddonsAutomatically.label): This menu item
      is a checkbox that toggles the default global behavior for add-on update
      checking. -->
--- a/toolkit/mozapps/extensions/content/extensions.css
+++ b/toolkit/mozapps/extensions/content/extensions.css
@@ -12,16 +12,21 @@ xhtml|link {
 #categories {
   -moz-binding: url("chrome://mozapps/content/extensions/extensions.xml#categories-list");
 }
 
 .category {
   -moz-binding: url("chrome://mozapps/content/extensions/extensions.xml#category");
 }
 
+.sidebar-footer-button > .text-link {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 .addon[status="installed"] {
   -moz-box-orient: vertical;
   -moz-binding: url("chrome://mozapps/content/extensions/extensions.xml#addon-generic");
 }
 
 .addon[status="installing"] {
   -moz-box-orient: vertical;
   -moz-binding: url("chrome://mozapps/content/extensions/extensions.xml#addon-installing");
--- a/toolkit/mozapps/extensions/content/extensions.js
+++ b/toolkit/mozapps/extensions/content/extensions.js
@@ -145,16 +145,26 @@ function initialize(event) {
   });
   addonPage.addEventListener("keypress", function(event) {
     gHeader.onKeyPress(event);
   });
   if (!isDiscoverEnabled()) {
     gViewDefault = "addons://list/extension";
   }
 
+  document.getElementById("preferencesButton")
+    .addEventListener("click", () => {
+      let mainWindow = getMainWindow();
+      if ("switchToTabHavingURI" in mainWindow) {
+        mainWindow.switchToTabHavingURI("about:preferences", true, {
+          triggeringPrincipal: Services.scriptSecurityManager.getSystemPrincipal(),
+        });
+      }
+    });
+
   gViewController.initialize();
   gCategories.initialize();
   gHeader.initialize();
   gEventManager.initialize();
   Services.obs.addObserver(sendEMPong, "EM-ping");
   Services.obs.notifyObservers(window, "EM-loaded");
 
   if (!XPINSTALL_ENABLED) {
--- a/toolkit/mozapps/extensions/content/extensions.xul
+++ b/toolkit/mozapps/extensions/content/extensions.xul
@@ -146,16 +146,33 @@
                       name="&view.availableUpdates.label;" priority="100000"
                       tooltiptext="&view.availableUpdates.label;"
                       disabled="true"/>
         <richlistitem id="category-recentUpdates" value="addons://updates/recent"
                       class="category"
                       name="&view.recentUpdates.label;" priority="101000"
                       tooltiptext="&view.recentUpdates.label;" disabled="true"/>
       </richlistbox>
+
+      <spacer flex="1"/>
+
+      <hbox class="sidebar-footer-button" pack="center">
+        <label id="preferencesButton" class="text-link">
+          <hbox align="center">
+            <image class="sidebar-footer-icon preferences-icon"/>
+            <label class="sidebar-footer-label" flex="1">
+#ifdef XP_WIN
+                &preferencesWin.label;
+#else
+                &preferencesUnix.label;
+#endif
+            </label>
+          </hbox>
+        </label>
+      </hbox>
     </vbox>
     <vbox class="main-content" flex="1">
       <!-- view port -->
       <deck id="view-port" flex="1" selectedIndex="0">
         <!-- discover view -->
         <deck id="discover-view" flex="1" class="view-pane" selectedIndex="0" tabindex="0">
           <vbox id="discover-loading" align="center" pack="stretch" flex="1" class="alert-container">
             <spacer class="alert-spacer-before"/>
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -840,8 +840,93 @@ xul|treechildren::-moz-tree-image(select
 .message-bar-warning {
   background-color: var(--yellow-50);
   color: var(--yellow-90);
 }
 
 .message-bar-warning > .message-bar-icon {
   list-style-image: url("chrome://browser/skin/warning.svg");
 }
+
+.sidebar-footer-button {
+  padding: 1px; /* Adding padding around help label in order to make entire keyboard focusing outline visible */
+}
+
+.sidebar-footer-button > .text-link {
+  -moz-box-flex: 1;
+  margin-inline-start: 34px;
+  margin-inline-end: 0;
+  text-decoration: none;
+  color: currentColor;
+  width: 36px;
+  height: 36px;
+  cursor: default;
+}
+
+.sidebar-footer-button > .text-link:hover {
+  background-color: var(--in-content-category-background-hover);
+  border-radius: 2px;
+}
+
+.sidebar-footer-button > .text-link:hover:active:not([disabled]) {
+  background-color: var(--in-content-category-background-active);
+}
+
+.sidebar-footer-button > .text-link:-moz-focusring {
+  outline: var(--in-content-category-outline-focus);
+}
+
+.sidebar-footer-icon {
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  width: 16px;
+  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;
+}
+
+.help-icon {
+  list-style-image: url("chrome://global/skin/icons/help.svg");
+}
+
+.preferences-icon {
+  list-style-image: url("chrome://browser/skin/preferences/in-content/general.svg");
+}
+
+.addons-icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/category-extensions.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;
+  -moz-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;
+  }
+}