Bug 1402311 - Use fill-opacity instead of hardcoded fill colour for disabled overflow button in customize mode. r=dao, a=sledru DEVEDITION_57_0b4_RELEASE FENNEC_57_0b4_BUILD1 FENNEC_57_0b4_RELEASE FIREFOX_57_0b4_BUILD1 FIREFOX_57_0b4_RELEASE
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Tue, 26 Sep 2017 15:17:26 +0100
changeset 434385 1c3b6791f9433c7cf8d6ecb453c9277fd99a5b4a
parent 434384 81bcbd6fa446f6f38fb567a942ac496f919fe7c2
child 434386 89f5cd1bdbfe3647956dcf853e5062a1e812c7a7
push id1567
push userjlorenzo@mozilla.com
push dateThu, 02 Nov 2017 12:36:05 +0000
treeherdermozilla-release@e512c14a0406 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao, sledru
bugs1402311
milestone57.0
Bug 1402311 - Use fill-opacity instead of hardcoded fill colour for disabled overflow button in customize mode. r=dao, a=sledru 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: */