Bug 1500165 - Include gear on each page of about:addons r=jaws a=jcristau
authorMark Striemer <mstriemer@mozilla.com>
Thu, 18 Oct 2018 16:14:06 -0500
changeset 501097 bf39f03ec712889ea35b15b7652b1dcb44560783
parent 501096 5de8f089b3a5f3a19c90d98227bdfd77701ad003
child 501098 7d82ccbdff8cf957cc9d50074c7f922f545689e3
push id1864
push userffxbld-merge
push dateMon, 03 Dec 2018 15:51:40 +0000
treeherdermozilla-release@f040763d99ad [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws, jcristau
bugs1500165
milestone64.0
Bug 1500165 - Include gear on each page of about:addons r=jaws a=jcristau Differential Revision: https://phabricator.services.mozilla.com/D9155
toolkit/mozapps/extensions/content/extensions.css
toolkit/mozapps/extensions/content/extensions.js
toolkit/mozapps/extensions/content/extensions.xul
toolkit/themes/shared/extensions/extensions.inc.css
--- a/toolkit/mozapps/extensions/content/extensions.css
+++ b/toolkit/mozapps/extensions/content/extensions.css
@@ -140,17 +140,18 @@ row[unsupported="true"] {
 #addons-page[warning="safemode"] #detail-view[loading="true"] .global-warning {
   display: none;
 }
 #addons-page .view-pane:not([type="plugin"]) #plugindeprecation-notice {
   display: none;
 }
 
 .list-view-notice {
-  margin-inline-start: 32px;
+  margin-inline-start: 28px;
+  margin-bottom: 16px;
 }
 
 .list-view-notice > .message-bar {
   width: 664px;
 }
 
 .addon .relnotes {
   -moz-user-select: text;
--- a/toolkit/mozapps/extensions/content/extensions.js
+++ b/toolkit/mozapps/extensions/content/extensions.js
@@ -861,16 +861,26 @@ var gViewController = {
 
     this.currentViewId = aViewId;
     this.currentViewObj = viewObj;
 
     this.displayedView = this.currentViewObj;
     this.currentViewObj.node.setAttribute("loading", "true");
     this.currentViewObj.node.focus();
 
+    let headingName = document.getElementById("heading-name");
+    try {
+      headingName.textContent = gStrings.ext.GetStringFromName(`listHeading.${view.param}`);
+      setSearchLabel(view.param);
+    } catch (e) {
+      // In tests we sometimes render this view with a type we don't support, that's fine.
+      headingName.textContent = "";
+    }
+
+
     if (aViewId == aPreviousView)
       this.currentViewObj.refresh(view.param, ++this.currentViewRequest, aState);
     else
       this.currentViewObj.show(view.param, ++this.currentViewRequest, aState);
   },
 
   // Moves back in the document history and removes the current history entry
   popState(aCallback) {
@@ -2394,24 +2404,16 @@ var gListView = {
 
     if (!(aType in AddonManager.addonTypes))
       throw Components.Exception("Attempting to show unknown type " + aType, Cr.NS_ERROR_INVALID_ARG);
 
     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);
     }
 
     getAddonsAndInstalls(aType, (aAddonsList, aInstallsList) => {
       if (gViewController && aRequest != gViewController.currentViewRequest)
--- a/toolkit/mozapps/extensions/content/extensions.xul
+++ b/toolkit/mozapps/extensions/content/extensions.xul
@@ -227,80 +227,80 @@
                       command="cmd_showUnsignedExtensions"/>
               <label id="search-label" control="header-search"/>
               <textbox id="header-search" type="search" searchbutton="true"
                        searchbuttonlabel="&search.buttonlabel;"
                        placeholder="&search.placeholder3;" maxlength="100"/>
             </hbox>
           </hbox>
 
+          <hbox id="heading">
+            <hbox class="heading-inner" align="start">
+              <label id="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>
+
           <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">
-                <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>
                 <hbox pack="start"><label class="text-link" id="signing-learn-more">&disabledUnsigned.learnMore;</label></hbox>
                 <description id="signing-dev-info">
--- a/toolkit/themes/shared/extensions/extensions.inc.css
+++ b/toolkit/themes/shared/extensions/extensions.inc.css
@@ -244,34 +244,29 @@ button.warning {
 }
 
 @media (max-width: 600px) {
   #header-search {
     width: 12em;
   }
 }
 
-.list-view-heading-inner {
-  width: 664px;
-}
-
 #header-utils-btn {
   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;
+  margin-inline-end: 0;
 }
 
 #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);
 }
 
 .header-button {
   -moz-appearance: none;
   border: 1px solid;
   border-radius: 2px;
 }
@@ -285,19 +280,23 @@ button.warning {
   background-color: #ebebeb;
   cursor: pointer;
 }
 
 .header-button > .toolbarbutton-text {
   display: none;
 }
 
-#list-view-heading {
-  margin-top: 24px;
+#heading {
+  margin-top: 26px;
   margin-bottom: 16px;
+}
+
+.heading-inner {
+  width: 664px;
   margin-inline-start: 28px;
 }
 
 /*** discover view ***/
 
 .discover-spacer-before,
 .discover-spacer-after {
   -moz-box-flex: 1;
@@ -334,21 +333,16 @@ button.warning {
 
 .list {
   -moz-appearance: none;
   margin: 0;
   border-width: 0 !important;
   background-color: transparent;
 }
 
-richlistbox.list > richlistitem.addon {
-  color: var(--in-content-text-color);
-  background-origin: border-box;
-}
-
 .icon {
   list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.svg");
   max-width: 24px;
   max-height: 24px;
   margin-inline-end: 16px;
 }
 
 .content-inner-container {
@@ -554,20 +548,17 @@ richlistbox.list > richlistitem.addon {
 }
 
 .list > .addon[selected] {
   background-color: var(--in-content-box-background);
 }
 
 .list:focus > .addon[selected] {
   box-shadow: var(--card-shadow-focus);
-}
-
-.list > .addon {
-  margin: 8px;
+  color: var(--in-content-text-color);
 }
 
 #addon-list .addon[active="false"] > .content-container > .content-inner-container {
   color: #999;
 }
 
 #addon-list .addon[active="false"][selected] > .content-container > .content-inner-container {
   color: #777;
@@ -591,17 +582,17 @@ richlistbox.list > richlistitem.addon {
 .addon[status="uninstalled"][selected] {
   background-color: transparent;
 }
 
 
 /*** detail view ***/
 
 #detail-view > .scrollbox-innerbox {
-  margin: 32px;
+  margin: 8px 28px;
 }
 
 #detail-view .loading {
   opacity: 0;
 }
 
 #detail-view[loading-extended] .loading {
   opacity: 1;
@@ -684,24 +675,27 @@ richlistbox.list > richlistitem.addon {
   margin: 1em 0;
 }
 
 #detail-controls > button {
   margin-bottom: 0;
 }
 
 .addon.card {
+  background-origin: border-box;
+  color: var(--in-content-text-color);
+  margin: 8px 4px;
   max-width: 664px;
   /* The .addon-control element on the end has 4px of margin, remove it
    * from the padding to stay balanced. */
   padding-inline-end: 12px;
 }
 
 .addon-detail.card:hover {
-  box-shadow: none;
+  box-shadow: var(--card-shadow);
 }
 
 .addon.card > .card-heading-image {
   margin-inline-end: -12px;
 }
 
 #detail-desc, #detail-fulldesc {
   margin-inline-start: 0;