Bug 1302086 - fix devedition issues with toolbar colours, improve styling of bookmarks toolbar items, r?dao
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
--- a/browser/themes/shared/devedition.inc.css
+++ b/browser/themes/shared/devedition.inc.css
@@ -31,38 +31,42 @@
--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");
--urlbar-dropmarker-2x-region: rect(0px, 11px, 14px, 0px);
--urlbar-dropmarker-hover-2x-region: rect(0, 22px, 14px, 11px);
--urlbar-dropmarker-active-2x-region: rect(0px, 33px, 14px, 22px);
}
+/* 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;
@@ -73,19 +77,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
@@ -54,28 +54,28 @@
}
@media (-moz-windows-default-theme) {
:root {
--panel-separator-color: hsla(210,4%,10%,.14);
}
}
-#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);
@@ -471,38 +471,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,