Bug 1402311 - use fill-opacity instead of hardcoded fill colour for disabled overflow button in customize mode, r=dao
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Tue, 26 Sep 2017 15:17:26 +0100
changeset 383262 69dfc35d912dfaa096f9e9d66cda13ef60babe38
parent 383261 3f05e4bf0fac5e97e76d8e15fb7c67b06e83d92b
child 383263 542962171efc7cee55ede146e8adf36e85c7001e
push id95539
push userkwierso@gmail.com
push dateThu, 28 Sep 2017 00:01:12 +0000
treeherdermozilla-inbound@72de90e66155 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1402311
milestone58.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 1402311 - use fill-opacity instead of hardcoded fill colour for disabled overflow button in customize mode, r=dao MozReview-Commit-ID: JKeA5ZNAh5J
browser/themes/shared/customizableui/customizeMode.inc.css
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -441,25 +441,22 @@ toolbarpaletteitem[place=toolbar] > tool
 }
 
 #customization-panelWrapper > .panel-arrowbox {
   position: relative;
   height: 10px;
   margin-bottom: -1px;
 }
 
-/* The overflow button icon _looks_ disabled, but is also shown as [open]. */
-#nav-bar[customizing] > .overflow-button {
-  /* This color is the hard-coded #4c4c4c at 40% opacity as found in toolbarbutton-icons.inc.css */
-  fill: hsla(0,0%,30%,.4);
-}
-
+/* In customize mode, the overflow button should look both 'disabled' and 'open'.
+ * So we make the button fully opaque but fill the icon semi-transparent. */
 #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"] {
 %ifdef XP_MACOSX
   list-style-image: var(--panel-arrow-image-vertical,
                         url("chrome://global/skin/arrow/panelarrow-vertical.png"));
   /* The OS X image is 2px narrower than the windows/linux one.
    * Add padding to compensate: */