Bug 1302086 - fix devedition issues with toolbar colours, improve styling of bookmarks toolbar items, r=dao a=ritu
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Fri, 07 Oct 2016 15:42:50 +0100
changeset 350654 b6ac1708ef020e29d3f15030bdc295e57f05fa4a
parent 350653 a7e12adf2ee01578ba31c928a2e0084c4286bc45
child 350655 0f52ce15647e2aed06cc6f451aee237eddca057d
push id1230
push userjlund@mozilla.com
push dateMon, 31 Oct 2016 18:13:35 +0000
treeherdermozilla-release@5e06e3766db2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao, ritu
bugs1302086
milestone50.0
Bug 1302086 - fix devedition issues with toolbar colours, improve styling of bookmarks toolbar items, r=dao a=ritu This patch fixes several issues: 1. the styling of the bookmarks toolbar items was missing background-origin/clip: padding-box when not hovered 2. the devedition colours for toolbar buttons were not applying on Windows in the nav-bar because we set different ones on #nav-bar:-moz-lwtheme and on #nav-bar[brighttext]. Variables function like inherited CSS properties and so the ones set on the #nav-bar take precedence for items inside the #nav-bar over other ones set on :root, even if those are set later. 3. The lwtheme and [brighttext] styling should apply to all toolbars now, because the bookmarks toolbar items can be moved to other toolbars and they use these CSS variables as well. For (2) I moved the devedition definitions of toolbar color variables into their own block that is set on both :root and on toolbar:-moz-lwtheme. I'm not sure if having it set on :root affects e.g. devtools styling, so I kept that rather than only setting the custom properties on the toolbars. MozReview-Commit-ID: Jzdb8OWmC3c
browser/themes/shared/devedition.inc.css
browser/themes/windows/browser.css
--- a/browser/themes/shared/devedition.inc.css
+++ b/browser/themes/shared/devedition.inc.css
@@ -31,25 +31,16 @@
   --tabs-toolbar-color: #F5F7FA;
   --tab-background-color: #272b35;
   --tab-hover-background-color: #07090a;
   --tab-selection-color: #f5f7fa;
   --tab-selection-background-color: #5675B9;
   --tab-selection-box-shadow: none;
   --pinned-tab-glow: radial-gradient(22px at center calc(100% - 2px), rgba(76,158,217,0.9) 13%, rgba(0,0,0,0.4) 16%, transparent 70%);
 
-  /* Toolbar buttons */
-  --toolbarbutton-hover-background: rgba(25,33, 38,.6) linear-gradient(rgba(25,33,38,.6), rgba(25,33,38,.6)) padding-box;
-  --toolbarbutton-hover-boxshadow: none;
-  --toolbarbutton-hover-bordercolor: rgba(25,33,38,.6);
-  --toolbarbutton-active-background: rgba(25,33,38,1) linear-gradient(rgba(25,33,38,1), rgba(25,33,38,1)) border-box;
-  --toolbarbutton-active-boxshadow: none;
-  --toolbarbutton-active-bordercolor: rgba(25,33,38,.8);
-  --toolbarbutton-checkedhover-backgroundcolor: #3C5283;
-
   /* Url and search bars */
   --url-and-searchbar-background-color: #171B1F;
   --urlbar-separator-color: #5F6670;
   --urlbar-dropmarker-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg");
   --urlbar-dropmarker-region: rect(0px, 11px, 14px, 0px);
   --urlbar-dropmarker-hover-region: rect(0, 22px, 14px, 11px);
   --urlbar-dropmarker-active-region: rect(0px, 33px, 14px, 22px);
   --urlbar-dropmarker-2x-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg");
@@ -58,16 +49,28 @@
   --urlbar-dropmarker-active-2x-region: rect(0px, 33px, 14px, 22px);
 }
 
 :root[devtoolstheme="dark"] #identity-box {
   --identity-box-chrome-color: #46afe3;
   --identity-box-verified-background-color: transparent;
 }
 
+/* Override the lwtheme-specific styling for toolbar buttons */
+:root[devtoolstheme="dark"],
+:root[devtoolstheme="dark"] toolbar:-moz-lwtheme {
+  --toolbarbutton-hover-background: rgba(25,33, 38,.6) linear-gradient(rgba(25,33,38,.6), rgba(25,33,38,.6)) padding-box;
+  --toolbarbutton-hover-boxshadow: none;
+  --toolbarbutton-hover-bordercolor: rgba(25,33,38,.6);
+  --toolbarbutton-active-background: rgba(25,33,38,1) linear-gradient(rgba(25,33,38,1), rgba(25,33,38,1)) border-box;
+  --toolbarbutton-active-boxshadow: none;
+  --toolbarbutton-active-bordercolor: rgba(25,33,38,.8);
+  --toolbarbutton-checkedhover-backgroundcolor: #3C5283;
+}
+
 :root[devtoolstheme="light"] {
   --url-and-searchbar-background-color: #fff;
 
   --chrome-background-color: #E3E4E6;
   --chrome-color: #18191a;
   --chrome-secondary-background-color: #f5f6f7;
   --chrome-navigator-toolbox-separator-color: #cccccc;
   --chrome-nav-bar-separator-color: #B6B6B8;
@@ -78,19 +81,21 @@
   --chrome-selection-background-color: #4c9ed9;
 
   --tab-background-color: #E3E4E6;
   --tab-hover-background-color: #D7D8DA;
   --tab-selection-color: #f5f7fa;
   --tab-selection-background-color: #4c9ed9;
   --tab-selection-box-shadow: none;
   --pinned-tab-glow: radial-gradient(22px at center calc(100% - 2px), rgba(76,158,217,0.9) 13%, transparent 16%);
-
+}
 
-  /* Toolbar buttons */
+/* Override the lwtheme-specific styling for toolbar buttons */
+:root[devtoolstheme="light"],
+:root[devtoolstheme="light"] toolbar:-moz-lwtheme {
   --toolbarbutton-hover-background: #eaeaea;
   --toolbarbutton-hover-boxshadow: none;
   --toolbarbutton-hover-bordercolor: rgba(0,0,0,0.1);
   --toolbarbutton-active-background: #d7d7d8 border-box;
   --toolbarbutton-active-boxshadow: none;
   --toolbarbutton-active-bordercolor: rgba(0,0,0,0.15);
   --toolbarbutton-checkedhover-backgroundcolor: #d7d7d8;
 }
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -47,28 +47,28 @@
   --urlbar-dropmarker-hover-2x-region: rect(0, 44px, 28px, 22px);
   --urlbar-dropmarker-active-2x-region: rect(0, 66px, 28px, 44px);
 
   --panel-separator-color: ThreeDLightShadow;
 
   --urlbar-separator-color: hsla(0,0%,16%,.2);
 }
 
-#nav-bar[brighttext] {
+toolbar[brighttext] {
   --toolbarbutton-hover-background: rgba(255,255,255,.25);
   --toolbarbutton-hover-bordercolor: rgba(255,255,255,.5);
 
   --toolbarbutton-active-background: rgba(255,255,255,.4);
   --toolbarbutton-active-bordercolor: rgba(255,255,255,.7);
   --toolbarbutton-active-boxshadow: 0 0 0 1px rgba(255,255,255,.4) inset;
 
   --toolbarbutton-checkedhover-backgroundcolor: rgba(255,255,255,.3);
 }
 
-#nav-bar:-moz-lwtheme {
+toolbar:-moz-lwtheme {
   --toolbarbutton-hover-background: rgba(255,255,255,.25);
   --toolbarbutton-hover-bordercolor: rgba(0,0,0,.2);
 
   --toolbarbutton-active-background: rgba(70%,70%,70%,.25);
   --toolbarbutton-active-bordercolor: rgba(0,0,0,.3);
   --toolbarbutton-active-boxshadow: 0 0 2px rgba(0,0,0,.6) inset;
 
   --toolbarbutton-checkedhover-backgroundcolor: rgba(85%,85%,85%,.25);
@@ -464,38 +464,34 @@
 
 toolbarbutton.bookmark-item:not(.subviewbutton),
 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
   margin: 0;
   padding: 2px 3px;
   -moz-appearance: none;
   border: 1px solid transparent;
   border-radius: 1px;
+  background-origin: padding-box !important;
+  background-clip: padding-box !important;
   transition-property: background-color, border-color, box-shadow;
   transition-duration: 150ms;
 }
 
 toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]) {
   border-color: var(--toolbarbutton-hover-bordercolor);
   background: var(--toolbarbutton-hover-background);
 }
 
 toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),
 toolbarbutton.bookmark-item[open="true"] {
   border-color: var(--toolbarbutton-active-bordercolor);
   box-shadow: var(--toolbarbutton-active-boxshadow);
   background: var(--toolbarbutton-active-background);
 }
 
-toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):-moz-lwtheme {
-  background-color: rgba(255,255,255,.25);
-  background-origin: padding-box;
-  background-clip: padding-box;
-}
-
 .bookmark-item > .toolbarbutton-icon,
 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
   width: 16px;
   height: 16px;
 }
 
 /* Force the display of the label for bookmarks */
 .bookmark-item > .toolbarbutton-text,