Bug 1515685 - Part 2: Convert about:addons gear menu to <button> r=dao
authorMark Striemer <mstriemer@mozilla.com>
Fri, 18 Jan 2019 10:44:50 +0000
changeset 511524 0eae1c157b3e3642b4cabe1424923d761675c39b
parent 511523 1a6794b81d48aedc53efab7d9dd40a1bc468413d
child 511525 96880bb35099158e47b4add1dade4f483ba5a4b0
push id10547
push userffxbld-merge
push dateMon, 21 Jan 2019 13:03:58 +0000
treeherdermozilla-beta@24ec1916bffe [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1515685
milestone66.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 1515685 - Part 2: Convert about:addons gear menu to <button> r=dao Differential Revision: https://phabricator.services.mozilla.com/D15121
toolkit/mozapps/extensions/content/extensions.css
toolkit/mozapps/extensions/content/extensions.xul
toolkit/themes/linux/mozapps/extensions/extensions.css
toolkit/themes/osx/mozapps/extensions/extensions.css
toolkit/themes/shared/extensions/extensions.inc.css
toolkit/themes/shared/in-content/common.inc.css
toolkit/themes/windows/mozapps/extensions/extensions.css
--- a/toolkit/mozapps/extensions/content/extensions.css
+++ b/toolkit/mozapps/extensions/content/extensions.css
@@ -171,20 +171,16 @@ row[unsupported="true"] {
 richlistitem:not([selected]) * {
   -moz-user-focus: ignore;
 }
 
 #header-search {
   width: 22em;
 }
 
-#header-utils-btn {
-  -moz-user-focus: normal;
-}
-
 .discover-button[disabled="true"] {
   display: none;
 }
 
 .view-pane:not(#legacy-view) .addon-control.replacement {
   display: none;
 }
 
--- a/toolkit/mozapps/extensions/content/extensions.xul
+++ b/toolkit/mozapps/extensions/content/extensions.xul
@@ -225,17 +225,17 @@
               <label id="search-label" control="header-search"/>
               <textbox id="header-search" type="search" searchbutton="true"
                        data-l10n-id="search-header"
                        data-l10n-attrs="searchbuttonlabel" maxlength="100"/>
             </hbox>
           </hbox>
 
           <hbox id="heading">
-            <hbox class="heading-inner" align="start">
+            <hbox class="heading-inner" align="stretch">
               <label id="heading-name" class="header-name" flex="1"/>
 
               <hbox id="updates-container" align="center">
                 <image class="spinner"/>
                 <label id="updates-noneFound" hidden="true"
                         data-l10n-id="extensions-updates-none-found"/>
                 <button id="updates-manualUpdatesFound-btn" class="button-link"
                         hidden="true"
@@ -249,18 +249,17 @@
                        data-l10n-id="extensions-updates-downloaded"/>
                 <button id="updates-restart-btn" class="button-link" hidden="true"
                         data-l10n-id="extensions-updates-restart"
                         command="cmd_restartApp"/>
               </hbox>
 
               <button id="manage-shortcuts" data-l10n-id="shortcuts-manage" command="cmd_showShortcuts" hidden="true"/>
 
-              <toolbarbutton id="header-utils-btn" type="menu"
-                        data-l10n-id="tools-menu">
+              <button id="header-utils-btn" type="menu" data-l10n-id="tools-menu">
                 <menupopup id="utils-menu">
                   <menuitem id="utils-updateNow"
                             data-l10n-id="extensions-updates-check-for-updates"
                             command="cmd_findAllUpdates"/>
                   <menuitem id="utils-viewUpdates"
                             data-l10n-id="extensions-updates-view-updates"
                             command="cmd_goToRecentUpdates"/>
                   <menuseparator id="utils-installFromFile-separator"/>
@@ -277,17 +276,17 @@
                             command="cmd_toggleAutoUpdateDefault"/>
                   <menuitem id="utils-resetAddonUpdatesToAutomatic"
                             data-l10n-id="extensions-updates-reset-updates-to-automatic"
                             command="cmd_resetAddonAutoUpdate"/>
                   <menuitem id="utils-resetAddonUpdatesToManual"
                             data-l10n-id="extensions-updates-reset-updates-to-manual"
                             command="cmd_resetAddonAutoUpdate"/>
                 </menupopup>
-              </toolbarbutton>
+              </button>
             </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">
               <!-- info UI for add-ons that have been disabled for being unsigned -->
               <vbox id="disabled-unsigned-addons-info" hidden="true">
--- a/toolkit/themes/linux/mozapps/extensions/extensions.css
+++ b/toolkit/themes/linux/mozapps/extensions/extensions.css
@@ -3,27 +3,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 %include ../../../shared/extensions/extensions.inc.css
 
 :root > * {
   font-size: 1.11em;
 }
 
-#header-utils-btn:-moz-focusring {
-  outline: 1px dotted;
-  outline-offset: -2px;
-}
-
-#header-utils-btn .toolbarbutton-icon {
-  list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg");
-  -moz-context-properties: fill;
-  fill: GrayText;
-}
-
 .sorter[checkState="1"] .button-icon {
   display: -moz-box;
   list-style-image: url("moz-icon://stock/gtk-sort-descending?size=16");
 }
 
 .sorter[checkState="2"] .button-icon {
   display: -moz-box;
   list-style-image: url("moz-icon://stock/gtk-sort-ascending?size=16");
--- a/toolkit/themes/osx/mozapps/extensions/extensions.css
+++ b/toolkit/themes/osx/mozapps/extensions/extensions.css
@@ -7,28 +7,16 @@
 :root > * {
   font-size: 1.36em;
 }
 
 .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;
-}
-
-#header-utils-btn > .toolbarbutton-menu-dropmarker {
-  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
-  padding: 0;
-  margin-inline-start: 2px;
-}
-
 .sorter[checkState="1"] {
   list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
 }
 
 .sorter[checkState="2"] {
   list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
 }
 
--- a/toolkit/themes/shared/extensions/extensions.inc.css
+++ b/toolkit/themes/shared/extensions/extensions.inc.css
@@ -245,46 +245,35 @@ button.warning {
 }
 
 @media (max-width: 600px) {
   #header-search {
     width: 12em;
   }
 }
 
-#manage-shortcuts {
-  margin: 0 4px;
-  min-height: 30px;
+#header-utils-btn {
+  -moz-context-properties: fill;
+  fill: currentColor;
+  min-width: auto;
+}
+
+#header-utils-btn > .button-box > hbox > .button-icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg");
 }
 
-#header-utils-btn {
-  -moz-appearance: none;
-  border: 1px solid var(--in-content-box-border-color);
-  border-radius: 2px;
-  line-height: 20px;
-  min-height: 30px;
-  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 > .button-box > .button-menu-dropmarker {
+  display: block;
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
+  width: 12px;
+  margin-inline-start: 5px;
+  margin-inline-end: 1px; /* Match the 1px margin-inline-start on the icon. */
 }
 
-#header-utils-btn:hover {
-  background-color: var(--in-content-box-background-hover);
-  cursor: pointer;
-}
-
-#header-utils-btn:active:hover,
-#header-utils-btn[open="true"] {
-  background-color: var(--in-content-box-background-active);
-}
-
-#header-utils-btn > .toolbarbutton-text {
+#header-utils-btn > .button-box > hbox > .button-text {
   display: none;
 }
 
 #heading {
   margin-top: 26px;
   margin-bottom: 16px;
 }
 
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -230,16 +230,18 @@ xul|button:not([disabled="true"]):hover,
 xul|menulist:not([disabled="true"]):hover {
   background-color: var(--in-content-button-background-hover);
 }
 
 html|button:enabled:hover:active,
 html|select:not([size]):not([multiple]):enabled:hover:active,
 html|input[type="color"]:enabled:hover:active,
 xul|button:not([disabled="true"]):hover:active,
+xul|button[open],
+xul|button[open]:hover,
 xul|menulist[open="true"]:not([disabled="true"]) {
   background-color: var(--in-content-button-background-active);
 }
 
 html|button:disabled,
 html|select:disabled,
 html|input[type="color"]:disabled,
 xul|button[disabled="true"],
--- a/toolkit/themes/windows/mozapps/extensions/extensions.css
+++ b/toolkit/themes/windows/mozapps/extensions/extensions.css
@@ -3,28 +3,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 %include ../../../shared/extensions/extensions.inc.css
 
 :root > * {
   font-size: 1.25em;
 }
 
-#header-utils-btn {
-  list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg");
-  -moz-context-properties: fill;
-  fill: #424f5a;
-}
-
-@media (-moz-windows-default-theme: 0) {
-  #header-utils-btn {
-    fill: GrayText;
-  }
-}
-
 .sorter[checkState="1"] {
   list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
 }
 
 .sorter[checkState="2"] {
   list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
 }