Bug 1488730 - Add label to search and move utilities menu in about:addons r=jaws
authorMark Striemer <mstriemer@mozilla.com>
Sun, 14 Oct 2018 19:24:31 +0000
changeset 489524 aa4cdd603e44a5035074927038fa37bc44c68525
parent 489523 4420c564868c8e9e9e7b0330d96430a7901192e0
child 489525 8ad79784d883bbb2457ab066f4775ccb11377655
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewersjaws
bugs1488730
milestone64.0a1
Bug 1488730 - Add label to search and move utilities menu in about:addons r=jaws Differential Revision: https://phabricator.services.mozilla.com/D8104
toolkit/locales/en-US/chrome/mozapps/extensions/extensions.dtd
toolkit/locales/en-US/chrome/mozapps/extensions/extensions.properties
toolkit/mozapps/extensions/content/extensions.js
toolkit/mozapps/extensions/content/extensions.xul
toolkit/themes/osx/mozapps/extensions/extensions.css
toolkit/themes/shared/extensions/extensions.inc.css
toolkit/themes/windows/mozapps/extensions/extensions.css
--- a/toolkit/locales/en-US/chrome/mozapps/extensions/extensions.dtd
+++ b/toolkit/locales/en-US/chrome/mozapps/extensions/extensions.dtd
@@ -1,14 +1,14 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <!ENTITY addons.windowTitle                   "Add-ons Manager">
 
-<!ENTITY search.placeholder2                  "Search on addons.mozilla.org">
+<!ENTITY search.placeholder3                  "Search addons.mozilla.org">
 <!ENTITY search.buttonlabel                   "Search">
 <!-- LOCALIZATION NOTE (search.commandkey):
      The search command key should match findOnCmd.commandkey from browser.dtd -->
 <!ENTITY search.commandkey                    "f">
 
 <!ENTITY loading.label                        "Loading…">
 <!ENTITY listEmpty.installed.label            "You don’t have any add-ons of this type installed">
 <!ENTITY listEmpty.availableUpdates.label     "No updates found">
--- a/toolkit/locales/en-US/chrome/mozapps/extensions/extensions.properties
+++ b/toolkit/locales/en-US/chrome/mozapps/extensions/extensions.properties
@@ -108,8 +108,11 @@ legacyWarning.description=Missing someth
 #LOCALIZATION NOTE(legacyThemeWarning.description) %S is the brandShortName
 legacyThemeWarning.description=Missing something? Some themes are no longer supported by %S.
 
 listHeading.extension=Manage your extensions
 listHeading.theme=Manage your themes
 listHeading.plugin=Manage your plugins
 listHeading.locale=Manage your languages
 listHeading.dictionary=Manage your dictionaries
+
+searchLabel.extension=Find more extensions
+searchLabel.theme=Find more themes
--- a/toolkit/mozapps/extensions/content/extensions.js
+++ b/toolkit/mozapps/extensions/content/extensions.js
@@ -273,16 +273,28 @@ function isDiscoverEnabled() {
 
   if (!XPINSTALL_ENABLED) {
     return false;
   }
 
   return true;
 }
 
+function setSearchLabel(type) {
+  let searchLabel = document.getElementById("search-label");
+  if (type == "extension" || type == "theme") {
+    searchLabel
+      .textContent = gStrings.ext.GetStringFromName(`searchLabel.${type}`);
+    searchLabel.hidden = false;
+  } else {
+    searchLabel.textContent = "";
+    searchLabel.hidden = true;
+  }
+}
+
 /**
  * Obtain the main DOMWindow for the current context.
  */
 function getMainWindow() {
   return window.docShell.rootTreeItem.domWindow;
 }
 
 function getBrowserElement() {
@@ -2378,16 +2390,17 @@ var gListView = {
 
     this._type = aType;
     this.node.setAttribute("type", aType);
     this.showEmptyNotice(false);
 
     try {
       document.getElementById("list-view-heading-name")
         .textContent = gStrings.ext.GetStringFromName(`listHeading.${aType}`);
+      setSearchLabel(aType);
     } catch (e) {
       // In tests we sometimes render this view with a type we don't support, that's fine.
     }
 
     this._listBox.textContent = "";
 
     if (aType == "plugin") {
       navigator.plugins.refresh(false);
@@ -2580,16 +2593,18 @@ var gDetailView = {
     AddonManager.removeManagerListener(this);
   },
 
   onUpdateModeChanged() {
     this.onPropertyChanged(["applyBackgroundUpdates"]);
   },
 
   _updateView(aAddon, aIsRemote, aScrollToPreferences) {
+    setSearchLabel(aAddon.type);
+
     AddonManager.addManagerListener(this);
     this.clearLoading();
 
     this._addon = aAddon;
     gEventManager.registerAddonListener(this, aAddon.id);
     gEventManager.registerInstallListener(this);
 
     this.node.setAttribute("type", aAddon.type);
--- a/toolkit/mozapps/extensions/content/extensions.xul
+++ b/toolkit/mozapps/extensions/content/extensions.xul
@@ -210,90 +210,95 @@
           </vbox>
           <browser id="discover-browser" type="content" flex="1"
                    disablehistory="true"/>
         </deck>
 
         <!-- container for views with the search/tools header -->
         <vbox id="headered-views" flex="1">
           <!-- main header -->
-          <hbox id="header" align="center">
-            <hbox id="header-inner">
+          <hbox id="header">
+            <hbox id="header-inner" align="center">
               <button id="show-all-extensions" hidden="true"
                       label="&showAllExtensions.button.label;"
                       command="cmd_showAllExtensions"/>
               <spacer flex="1"/>
-              <hbox id="updates-container" align="center">
-                <image class="spinner"/>
-                <label id="updates-noneFound" hidden="true"
-                       value="&updates.noneFound.label;"/>
-                <button id="updates-manualUpdatesFound-btn" class="button-link"
-                        hidden="true" label="&updates.manualUpdatesFound.label;"
-                        command="cmd_goToAvailableUpdates"/>
-                <label id="updates-progress" hidden="true"
-                       value="&updates.updating.label;"/>
-                <label id="updates-installed" hidden="true"
-                       value="&updates.installed.label;"/>
-                <label id="updates-downloaded" hidden="true"
-                       value="&updates.downloaded.label;"/>
-                <button id="updates-restart-btn" class="button-link" hidden="true"
-                        label="&updates.restart.label;"
-                        command="cmd_restartApp"/>
-              </hbox>
               <button id="show-disabled-unsigned-extensions" hidden="true"
                       class="warning"
                       label="&showUnsignedExtensions.button.label;"
                       command="cmd_showUnsignedExtensions"/>
-              <toolbarbutton id="header-utils-btn" class="header-button" type="menu"
-                             tooltiptext="&toolsMenu.tooltip;">
-                <menupopup id="utils-menu">
-                  <menuitem id="utils-updateNow"
-                            label="&updates.checkForUpdates.label;"
-                            accesskey="&updates.checkForUpdates.accesskey;"
-                            command="cmd_findAllUpdates"/>
-                  <menuitem id="utils-viewUpdates"
-                            label="&updates.viewUpdates.label;"
-                            accesskey="&updates.viewUpdates.accesskey;"
-                            command="cmd_goToRecentUpdates"/>
-                  <menuseparator id="utils-installFromFile-separator"/>
-                  <menuitem id="utils-installFromFile"
-                            label="&installAddonFromFile.label;"
-                            accesskey="&installAddonFromFile.accesskey;"
-                            command="cmd_installFromFile"/>
-                  <menuitem id="utils-debugAddons"
-                            label="&debugAddons.label;"
-                            accesskey="&debugAddons.accesskey;"
-                            command="cmd_debugAddons"/>
-                  <menuseparator/>
-                  <menuitem id="utils-autoUpdateDefault"
-                            label="&updates.updateAddonsAutomatically.label;"
-                            accesskey="&updates.updateAddonsAutomatically.accesskey;"
-                            type="checkbox" autocheck="false"
-                            command="cmd_toggleAutoUpdateDefault"/>
-                  <menuitem id="utils-resetAddonUpdatesToAutomatic"
-                            label="&updates.resetUpdatesToAutomatic.label;"
-                            accesskey="&updates.resetUpdatesToAutomatic.accesskey;"
-                            command="cmd_resetAddonAutoUpdate"/>
-                  <menuitem id="utils-resetAddonUpdatesToManual"
-                            label="&updates.resetUpdatesToManual.label;"
-                            accesskey="&updates.resetUpdatesToManual.accesskey;"
-                            command="cmd_resetAddonAutoUpdate"/>
-                </menupopup>
-              </toolbarbutton>
+              <label id="search-label" control="header-search"/>
               <textbox id="header-search" type="search" searchbutton="true"
                        searchbuttonlabel="&search.buttonlabel;"
-                       placeholder="&search.placeholder2;" maxlength="100"/>
+                       placeholder="&search.placeholder3;" maxlength="100"/>
             </hbox>
           </hbox>
 
           <deck id="headered-views-content" flex="1" selectedIndex="0">
             <!-- list view -->
             <vbox id="list-view" flex="1" class="view-pane" align="stretch" tabindex="0">
               <hbox id="list-view-heading">
-                <label id="list-view-heading-name" class="header-name" flex="1"/>
+                <hbox class="list-view-heading-inner">
+                  <label id="list-view-heading-name" class="header-name" flex="1"/>
+
+                  <hbox id="updates-container" align="center">
+                    <image class="spinner"/>
+                    <label id="updates-noneFound" hidden="true"
+                           value="&updates.noneFound.label;"/>
+                    <button id="updates-manualUpdatesFound-btn" class="button-link"
+                            hidden="true" label="&updates.manualUpdatesFound.label;"
+                            command="cmd_goToAvailableUpdates"/>
+                    <label id="updates-progress" hidden="true"
+                           value="&updates.updating.label;"/>
+                    <label id="updates-installed" hidden="true"
+                           value="&updates.installed.label;"/>
+                    <label id="updates-downloaded" hidden="true"
+                           value="&updates.downloaded.label;"/>
+                    <button id="updates-restart-btn" class="button-link" hidden="true"
+                            label="&updates.restart.label;"
+                            command="cmd_restartApp"/>
+                  </hbox>
+
+                  <toolbarbutton id="header-utils-btn" class="header-button" type="menu"
+                                 tooltiptext="&toolsMenu.tooltip;">
+                    <menupopup id="utils-menu">
+                      <menuitem id="utils-updateNow"
+                                label="&updates.checkForUpdates.label;"
+                                accesskey="&updates.checkForUpdates.accesskey;"
+                                command="cmd_findAllUpdates"/>
+                      <menuitem id="utils-viewUpdates"
+                                label="&updates.viewUpdates.label;"
+                                accesskey="&updates.viewUpdates.accesskey;"
+                                command="cmd_goToRecentUpdates"/>
+                      <menuseparator id="utils-installFromFile-separator"/>
+                      <menuitem id="utils-installFromFile"
+                                label="&installAddonFromFile.label;"
+                                accesskey="&installAddonFromFile.accesskey;"
+                                command="cmd_installFromFile"/>
+                      <menuitem id="utils-debugAddons"
+                                label="&debugAddons.label;"
+                                accesskey="&debugAddons.accesskey;"
+                                command="cmd_debugAddons"/>
+                      <menuseparator/>
+                      <menuitem id="utils-autoUpdateDefault"
+                                label="&updates.updateAddonsAutomatically.label;"
+                                accesskey="&updates.updateAddonsAutomatically.accesskey;"
+                                type="checkbox" autocheck="false"
+                                command="cmd_toggleAutoUpdateDefault"/>
+                      <menuitem id="utils-resetAddonUpdatesToAutomatic"
+                                label="&updates.resetUpdatesToAutomatic.label;"
+                                accesskey="&updates.resetUpdatesToAutomatic.accesskey;"
+                                command="cmd_resetAddonAutoUpdate"/>
+                      <menuitem id="utils-resetAddonUpdatesToManual"
+                                label="&updates.resetUpdatesToManual.label;"
+                                accesskey="&updates.resetUpdatesToManual.accesskey;"
+                                command="cmd_resetAddonAutoUpdate"/>
+                    </menupopup>
+                  </toolbarbutton>
+                </hbox>
               </hbox>
 
               <!-- info UI for add-ons that have been disabled for being unsigned -->
               <vbox id="disabled-unsigned-addons-info" hidden="true">
                 <label id="disabled-unsigned-addons-heading" value="&disabledUnsigned.heading;"/>
                 <description>
                   &disabledUnsigned.description.start;<label class="text-link plain" id="find-alternative-addons">&disabledUnsigned.description.findAddonsLink;</label>&disabledUnsigned.description.end;
                 </description>
--- a/toolkit/themes/osx/mozapps/extensions/extensions.css
+++ b/toolkit/themes/osx/mozapps/extensions/extensions.css
@@ -11,17 +11,16 @@
 .no-auto-hide > .menulist-dropmarker {
   padding-inline-start: 0px !important;
 }
 
 #header-utils-btn {
   list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg");
   -moz-context-properties: fill;
   fill: #424f5a;
-  margin-inline-end: 18px;
 }
 
 #header-utils-btn > .toolbarbutton-menu-dropmarker {
   list-style-image: url("chrome://mozapps/skin/extensions/toolbarbutton-dropmarker.png");
   padding: 0;
   margin-inline-start: 2px;
 }
 
--- a/toolkit/themes/shared/extensions/extensions.inc.css
+++ b/toolkit/themes/shared/extensions/extensions.inc.css
@@ -222,37 +222,55 @@ button.warning {
 #category-recentUpdates > .category-icon {
   list-style-image: url("chrome://mozapps/skin/extensions/category-recent.svg");
 }
 
 
 /*** header ***/
 
 #header-inner {
-  margin: 20px 4px 30px;
+  margin: 20px 4px 4px;
   width: 692px;
 }
 
 #header-search {
   margin-top: 0;
-}:
+  margin-bottom: 0;
+  min-height: 32px;
+}
+
+#header-search > moz-input-box > .textbox-search-sign {
+  list-style-image: url(chrome://global/skin/icons/search-textbox.svg);
+  margin-inline-end: 5px;
+}
+
+#search-label {
+  margin: 0;
+  margin-inline-end: 4px;
+  margin-bottom: 2px;
+}
 
 @media (max-width: 600px) {
   #header-search {
     width: 12em;
   }
 }
 
+.list-view-heading-inner {
+  width: 664px;
+}
+
 #header-utils-btn {
-  height: 30px;
   line-height: 20px;
   border-color: var(--in-content-box-border-color);
   background-color: var(--in-content-page-background);
   padding-right: 10px;
   padding-left: 10px;
+  /* This button is too tall, adding margin-bottom shrinks it. */
+  margin-bottom: 2px;
 }
 
 #header-utils-btn:not([disabled="true"]):active:hover,
 #header-utils-btn[open="true"] {
   padding-bottom: 0px;
   padding-top: 0px;
   background-color: var(--in-content-box-background-active);
 }
--- a/toolkit/themes/windows/mozapps/extensions/extensions.css
+++ b/toolkit/themes/windows/mozapps/extensions/extensions.css
@@ -7,17 +7,16 @@
 :root > * {
   font-size: 1.25em;
 }
 
 #header-utils-btn {
   list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg");
   -moz-context-properties: fill;
   fill: #424f5a;
-  margin-inline-end: 16px;
 }
 
 @media (-moz-windows-default-theme: 0) {
   #header-utils-btn {
     fill: GrayText;
   }
 }