Bug 1173734 - Make the separator for the menu / hamburger button more solid. r=jaws, a=lmandel
authorDão Gottwald <dao@mozilla.com>
Mon, 27 Jul 2015 10:43:00 -0400
changeset 273946 7474768be865fc363250b3e4cc8edc56df14c565
parent 273945 d086a62eb08c1e68a240d499e0f7dc1e7a50435d
child 273947 ca0e11da35da9c610da09e8f75556fbe16a6bd0f
push id4913
push userryanvm@gmail.com
push dateMon, 27 Jul 2015 20:50:12 +0000
treeherdermozilla-beta@535b6bb28d80 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws, lmandel
bugs1173734
milestone40.0
Bug 1173734 - Make the separator for the menu / hamburger button more solid. r=jaws, a=lmandel
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/shared/customizableui/panelUIOverlay.inc.css
browser/themes/shared/devedition.inc.css
browser/themes/windows/browser.css
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -607,17 +607,17 @@ toolbarbutton[constrain-size="true"][cui
 }
 
 :-moz-any(#TabsToolbar, #nav-bar) toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
   /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
   width: 32px;
 }
 
 #nav-bar #PanelUI-menu-button {
-  -moz-padding-start: 7px;
+  -moz-padding-start: 5px;
   -moz-padding-end: 5px;
 }
 
 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open]:not([disabled=true]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-container,
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -712,17 +712,17 @@ toolbar .toolbarbutton-1 > .toolbarbutto
   -moz-box-align: center;
 }
 
 #nav-bar #PanelUI-menu-button {
   margin-top: 0;
   margin-bottom: 0;
   padding-top: 1px;
   padding-bottom: 1px;
-  -moz-margin-start: 9px;
+  -moz-margin-start: 7px;
   -moz-margin-end: 7px;
 }
 
 %include ../shared/toolbarbuttons.inc.css
 %include ../shared/menupanel.inc.css
 
 @media not all and (min-resolution: 1.1dppx) {
   #back-button:hover:active:not([disabled="true"]) {
--- a/browser/themes/shared/customizableui/panelUIOverlay.inc.css
+++ b/browser/themes/shared/customizableui/panelUIOverlay.inc.css
@@ -16,25 +16,16 @@
 %define buttonStateHover :not(:-moz-any([disabled],[open],:active)):hover
 %define menuStateHover :not(:-moz-any([disabled],:active))[_moz-menuactive]
 %define buttonStateActive :not([disabled]):-moz-any([open],:hover:active)
 %define menuStateActive :not([disabled])[_moz-menuactive]:active
 %define menuStateMenuActive :not([disabled])[_moz-menuactive]
 
 %include ../browser.inc
 
-:root {
-  --panel-ui-button-background-image: linear-gradient(to bottom, transparent, hsla(0,0%,100%,.3) 30%, hsla(0,0%,100%,.3) 70%, transparent),
-                    linear-gradient(to bottom, transparent, hsla(210,54%,20%,.3) 30%, hsla(210,54%,20%,.3) 70%, transparent),
-                    linear-gradient(to bottom, transparent, hsla(0,0%,100%,.3) 30%, hsla(0,0%,100%,.3) 70%, transparent);
-  --panel-ui-button-background-size: 1px calc(100% - 1px), 1px calc(100% - 1px), 1px  calc(100% - 1px) !important;
-  --panel-ui-button-background-position: 0px 0px, 1px 0px, 2px 0px;
-  --panel-ui-button-background-repeat: no-repeat;
-}
-
 #PanelUI-popup #PanelUI-contents:empty {
   height: 128px;
 }
 
 #PanelUI-popup #PanelUI-contents:empty::before {
   content: "";
   background-image: url(chrome://browser/skin/customizableui/whimsy-bw.png);
   display: block;
@@ -92,24 +83,24 @@
   from { margin-top: -.5em; } to { margin-top: calc(64px - .5em); }
 }
 
 @keyframes whimsyRotate {
   to { transform: perspective(5000px) rotateY(360deg); }
 }
 
 #PanelUI-button {
-  background-image: var(--panel-ui-button-background-image);
-  background-size: var(--panel-ui-button-background-size);
-  background-position: var(--panel-ui-button-background-position);
-  background-repeat: var(--panel-ui-button-background-repeat);
+  -moz-margin-start: 2px;
+  -moz-border-start: 1px solid;
+  border-image: linear-gradient(transparent, rgba(0,0,0,.1) 20%, rgba(0,0,0,.1) 80%, transparent);
+  border-image-slice: 1;
 }
 
-#PanelUI-button:-moz-locale-dir(rtl) {
-  background-position: 100% 0, calc(100% - 1px) 0, calc(100% - 2px) 0;
+#nav-bar[brighttext] > #PanelUI-button {
+  border-image-source: linear-gradient(transparent, rgba(100%,100%,100%,.2) 20%, rgba(100%,100%,100%,.2) 80%, transparent);
 }
 
 #PanelUI-menu-button[update-status="succeeded"] .toolbarbutton-badge::after {
   content: url(chrome://browser/skin/update-badge.svg);
   background-color: #74BF43;
   height: 10px;
 }
 
--- a/browser/themes/shared/devedition.inc.css
+++ b/browser/themes/shared/devedition.inc.css
@@ -5,18 +5,16 @@
 /* devedition.css is loaded in browser.xul after browser.css when it is
    preffed on.  The bulk of the styling is here in the shared file, but
    there are overrides for each platform in their devedition.css files. */
 
 :root {
   --tab-toolbar-navbar-overlap: 0px;
   --space-above-tabbar: 0px;
   --toolbarbutton-text-shadow: none;
-  --panel-ui-button-background-size: 1px calc(100% - 1px);
-  --panel-ui-button-background-position: 1px 0px;
 }
 
 :root[devtoolstheme="dark"] {
   /* Chrome */
   --chrome-background-color: #1C2126;
   --chrome-color: #F5F7FA;
   --chrome-secondary-background-color: #39424D;
   --chrome-navigator-toolbox-separator-color: rgba(0,0,0,.2);
@@ -61,19 +59,16 @@
   --url-and-searchbar-color: #fff;
   --urlbar-dropmarker-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg");
   --urlbar-dropmarker-region: rect(0px, 11px, 14px, 0px);
   --urlbar-dropmarker-active-region: rect(0px, 22px, 14px, 11px);
   --urlbar-dropmarker-2x-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg");
   --urlbar-dropmarker-2x-region: rect(0px, 11px, 14px, 0px);
   --urlbar-dropmarker-active-2x-region: rect(0px, 22px, 14px, 11px);
   --search-button-image: url("chrome://browser/skin/devedition/search.svg#search-icon-inverted");
-
-  /* Menu button separator */
-  --panel-ui-button-background-image: linear-gradient(to bottom, transparent, #5F6670 30%, #5F6670 70%, transparent);
 }
 
 :root[devtoolstheme="dark"] .searchbar-dropmarker-image {
   --searchbar-dropmarker-url: url("chrome://browser/skin/devtools/dropmarker.svg");
   --searchbar-dropmarker-2x-url: url("chrome://browser/skin/devtools/dropmarker.svg");
 }
 
 :root[devtoolstheme="light"] {
@@ -109,19 +104,16 @@
   --toolbarbutton-active-boxshadow: none;
   --toolbarbutton-active-bordercolor: rgba(0,0,0,0.15);
   --toolbarbutton-checkedhover-backgroundcolor: #d7d7d8;
   --toolbarbutton-combined-boxshadow: none;
   --toolbarbutton-combined-backgroundimage: linear-gradient(rgba(0,0,0,0.1) 0, rgba(0,0,0,0.1) 18px);
 
   /* Url and search bars */
   --search-button-image: url("chrome://browser/skin/devedition/search.svg#search-icon");
-
-  /* Menu button separator */
-  --panel-ui-button-background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.1) 70%, transparent);
 }
 
 /* Give some space to drag the window around while customizing
    (normal space to left and right of tabs doesn't work in this case) */
 #main-window[tabsintitlebar][customizing] {
   --space-above-tabbar: 9px;
 }
 
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -643,17 +643,17 @@ toolbar[brighttext] .toolbarbutton-1 > .
 #nav-bar .toolbarbutton-1:not([type=menu-button]),
 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
   padding: var(--toolbarbutton-vertical-outer-padding) 2px;
   -moz-box-pack: center;
 }
 
 #nav-bar #PanelUI-menu-button {
-  -moz-padding-start: 7px;
+  -moz-padding-start: 5px;
   -moz-padding-end: 5px;
 }
 
 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
   padding-left: 5px;
   padding-right: 5px;
 }