Bug 1402311 - use fill-opacity instead of hardcoded fill colour for disabled overflow button in customize mode, r=dao

MozReview-Commit-ID: JKeA5ZNAh5J

--HG--
extra : rebase_source : 1fc144cd243b5686afb9fcb736f678656355a27d

browser/themes/shared/customizableui/customizeMode.inc.css

@@ -446,15 +446,12 @@ toolbarpaletteitem[place=toolbar] > toolbarspring {
   margin-bottom: -1px;
 }
 
-/* The overflow button icon _looks_ disabled, but is also shown as [open]. */
+/* In customize mode, the overflow button should look both 'disabled' and 'open'.
-#nav-bar[customizing] > .overflow-button {
+ * So we make the button fully opaque but fill the icon semi-transparent. */
-  /* This color is the hard-coded #4c4c4c at 40% opacity as found in toolbarbutton-icons.inc.css */
-  fill: hsla(0,0%,30%,.4);
-}
-
 #nav-bar[customizing] > .overflow-button > .toolbarbutton-icon {
   background-color: var(--toolbarbutton-active-background);
   opacity: 1;
+  fill-opacity: 0.4;
 }
 
 #customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] {