Bug 1515685 - Part 2: Convert about:addons gear menu to <button> r=dao

Differential Revision: https://phabricator.services.mozilla.com/D15121

--HG--
extra : moz-landing-system : lando

toolkit/mozapps/extensions/content/extensions.css

@@ -176,10 +176,6 @@ richlistitem:not([selected]) * {
   width: 22em;
 }
 
-#header-utils-btn {
-  -moz-user-focus: normal;
-}
-
 .discover-button[disabled="true"] {
   display: none;
 }

toolkit/mozapps/extensions/content/extensions.xul

@@ -230,7 +230,7 @@
           </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">
@@ -254,8 +254,7 @@
 
               <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"
@@ -282,7 +281,7 @@
                             data-l10n-id="extensions-updates-reset-updates-to-manual"
                             command="cmd_resetAddonAutoUpdate"/>
                 </menupopup>
-              </toolbarbutton>
+              </button>
             </hbox>
           </hbox>
 

toolkit/themes/linux/mozapps/extensions/extensions.css

@@ -8,17 +8,6 @@
   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");

toolkit/themes/osx/mozapps/extensions/extensions.css

@@ -12,18 +12,6 @@
   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");
 }

toolkit/themes/shared/extensions/extensions.inc.css

@@ -250,36 +250,25 @@ button.warning {
   }
 }
 
-#manage-shortcuts {
-  margin: 0 4px;
-  min-height: 30px;
-}
-
 #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;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  min-width: auto;
 }
 
-#header-utils-btn:hover {
-  background-color: var(--in-content-box-background-hover);
-  cursor: pointer;
+#header-utils-btn > .button-box > hbox > .button-icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg");
 }
 
-#header-utils-btn:active:hover,
-#header-utils-btn[open="true"] {
-  background-color: var(--in-content-box-background-active);
+#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 > .toolbarbutton-text {
+#header-utils-btn > .button-box > hbox > .button-text {
   display: none;
 }
 

toolkit/themes/shared/in-content/common.inc.css

@@ -235,6 +235,8 @@ 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);
 }

toolkit/themes/windows/mozapps/extensions/extensions.css

@@ -8,18 +8,6 @@
   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");
 }