Bug 1388180 - Update the overflow panel styling in Customize Mode and show the overflow button as in the opened state, but with a disabled looking icon. r=Gijs
authorMike de Boer <mdeboer@mozilla.com>
Wed, 13 Sep 2017 19:28:45 +0200
changeset 430229 c55dbc386e21e056c0990a0821ea5951971c876d
parent 430228 26606cf1e39b8bf750807239d5b265de5e0a46d6
child 430230 9ac8940da5c3bdc417a057c8e424c6655a1c9e88
push id7761
push userjlund@mozilla.com
push dateFri, 15 Sep 2017 00:19:52 +0000
treeherdermozilla-beta@c38455951db4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1388180
milestone57.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 1388180 - Update the overflow panel styling in Customize Mode and show the overflow button as in the opened state, but with a disabled looking icon. r=Gijs MozReview-Commit-ID: 387PZ2jp1SS
browser/components/customizableui/CustomizableUI.jsm
browser/themes/shared/customizableui/customizeMode.inc.css
--- a/browser/components/customizableui/CustomizableUI.jsm
+++ b/browser/components/customizableui/CustomizableUI.jsm
@@ -4334,17 +4334,17 @@ OverflowableToolbar.prototype = {
       }, {once: true});
     });
   },
 
   _onClickChevron(aEvent) {
     if (this._chevron.open) {
       this._panel.hidePopup();
       this._chevron.open = false;
-    } else if (this._panel.state != "hiding") {
+    } else if (this._panel.state != "hiding" && !this._chevron.disabled) {
       this.show();
     }
   },
 
   _onPanelHiding(aEvent) {
     if (aEvent.target != this._panel) {
       // Ignore context menus, <select> popups, etc.
       return;
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -25,17 +25,17 @@
 }
 
 #customization-palette,
 #customization-empty {
   padding: 5px 20px 20px;
 }
 
 #customization-header {
-  font-weight: 600;
+  font-weight: 500;
   font-size: 1.2em;
   margin: 20px 20px 15px;
 }
 
 #customization-header:-moz-lwtheme {
   text-shadow: 0 0 1em var(--toolbar-non-lwt-bgcolor),
                0 0 1em var(--toolbar-non-lwt-bgcolor),
                0 0 .5em var(--toolbar-non-lwt-bgcolor);
@@ -414,30 +414,46 @@ toolbarpaletteitem[place=toolbar] > tool
 .customization-lwtheme-menu-footeritem:first-child {
   border-inline-end: 1px solid var(--panel-separator-color);
 }
 
 #customization-panelWrapper > .panel-arrowcontent {
   color: var(--arrowpanel-color);
   background: var(--arrowpanel-background);
   background-clip: padding-box;
-  border: 1px solid var(--arrowpanel-border-color);
-  box-shadow: 0 0 10px hsla(0,0%,0%,.2);
 %ifdef XP_MACOSX
+  /* Native styling adds more 'oompf' to the popup box-shadow, so simulate that
+   * as best as we can here: */
+  border: 1px solid var(--arrowpanel-dimmed-even-further);
+  box-shadow: 0 4px 10px hsla(0,0%,0%,.3);
   -moz-appearance: none;
   border-radius: var(--arrowpanel-border-radius);
+%else
+  border: 1px solid var(--arrowpanel-border-color);
+  box-shadow: 0 0 4px hsla(0,0%,0%,.2);
 %endif
 }
 
 #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);
+}
+
+#nav-bar[customizing] > .overflow-button > .toolbarbutton-icon {
+  background-color: var(--toolbarbutton-active-background);
+  opacity: 1;
+}
+
 #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: */
   padding: 0 1px;
   /* specify width for hidpi image to fit correctly */
@@ -449,24 +465,24 @@ toolbarpaletteitem[place=toolbar] > tool
   /* The arrow needs to point to the overflow button. The numbers involved
    * are:
    * overflow button width: (16px + 2 * 2px padding
    * + 2 * toolbarbutton-inner-padding)
    * hamburger button width: (16px + 2 * 5px padding
    * + 2 * toolbarbutton-inner-padding)
    * hamburger button border + margin: 1px + 2px
    * The total desired offset from the right edge of the window is thus:
-   * 10px + toolbarbutton-inner-padding (center of overflow button) +
+   * 10px + 1 * toolbarbutton-inner-padding (center of overflow button) +
    * 29px + 2 * toolbarbutton-inner-padding
-   * The #customization-panel-container has a 25px margin, so that leaves:
-   * 14px + 3 * toolbarbutton-inner-padding
+   * The #customization-panel-container has a 20px margin, so that leaves:
+   * 19px + 3 * toolbarbutton-inner-padding
    * Finally, we need to center the arrow, which is 20px wide, so subtract
    * 10px.
    */
-  margin-inline-end: calc(4px + 3 * var(--toolbarbutton-inner-padding));
+  margin-inline-end: calc(9px + 3 * var(--toolbarbutton-inner-padding));
   vertical-align: top;
 }
 
 %ifdef XP_MACOSX
 @media (min-resolution: 2dppx) {
   #customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] {
     list-style-image: var(--panel-arrow-image-vertical,
                           url("chrome://global/skin/arrow/panelarrow-vertical@2x.png"));