Bug 1435122 - move custom properties from :root to tabbrowser where possible, r?johannh,mikedeboer
MozReview-Commit-ID: CRKhBnMaBun
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -5916,18 +5916,17 @@
<body><![CDATA[
this.onAreaNodeRegistered(aArea, aContainer);
]]></body>
</method>
<field name="_tabMinWidthLimit">50</field>
<property name="tabMinWidth">
<setter><![CDATA[
- let root = document.documentElement;
- root.style.setProperty("--tab-min-width", val + "px");
+ this.tabContainer.style.setProperty("--tab-min-width", val + "px");
return val;
]]></setter>
</property>
<constructor>
<![CDATA[
this.mCurrentBrowser = document.getAnonymousElementByAttribute(this, "anonid", "initialBrowser");
this.mCurrentBrowser.permanentKey = {};
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -7,19 +7,16 @@
@import url("chrome://global/skin/");
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
%include ../shared/browser.inc.css
:root {
- --tabs-border-color: rgba(0,0,0,.3);
- --tab-line-color: highlight;
-
--toolbar-non-lwt-bgcolor: -moz-dialog;
--toolbar-non-lwt-textcolor: -moz-dialogtext;
--toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));
--toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
--toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
--toolbarbutton-border-radius: 4px;
--toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) - 1px);
@@ -30,16 +27,24 @@
--arrowpanel-dimmed-further: hsla(0,0%,80%,.45);
--arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
--urlbar-separator-color: ThreeDShadow;
--toolbox-border-bottom-color: ThreeDShadow;
}
+#navigator-toolbox {
+ --tabs-border-color: rgba(0,0,0,.3);
+}
+
+#tabbrowser-tabs {
+ --tab-line-color: highlight;
+}
+
:root:-moz-lwtheme {
--toolbar-bgcolor: rgba(255,255,255,.4);
--toolbar-bgimage: none;
--toolbox-border-bottom-color: rgba(0,0,0,.3);
}
#menubar-items {
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -8,19 +8,16 @@
%define toolbarButtonPressed :hover:active:not([disabled="true"]):not([cui-areatype="menu-panel"])
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
%include ../shared/browser.inc.css
:root {
- --tabs-border-color: rgba(0,0,0,.3);
- --tab-line-color: #0a84ff;
-
--toolbar-non-lwt-bgcolor: #f9f9fa;
--toolbar-non-lwt-textcolor: #0c0c0d;
--toolbar-non-lwt-bgimage: none;
--toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
--toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
--toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) + 1px);
--toolbarbutton-border-radius: 4px;
@@ -38,16 +35,24 @@
:root:-moz-lwtheme {
--toolbar-bgcolor: rgba(255,255,255,.4);
--toolbar-bgimage: none;
--toolbox-border-bottom-color: rgba(0,0,0,.3);
}
+#navigator-toolbox {
+ --tabs-border-color: rgba(0,0,0,.3);
+}
+
+#tabbrowser-tabs {
+ --tab-line-color: #0a84ff;
+}
+
#navigator-toolbox toolbarbutton:-moz-lwtheme {
color: inherit;
text-shadow: inherit;
}
#main-window {
-moz-appearance: none;
background-color: #eeeeee;
@@ -127,20 +132,20 @@
#main-window:not([tabsintitlebar]) #TabsToolbar:not([collapsed="true"]) + #nav-bar,
#TabsToolbar:not([collapsed="true"]) + #nav-bar:-moz-lwtheme {
box-shadow: 0 -@navbarTabsShadowSize@ 0 var(--tabs-border-color);
}
/* Always draw a border on Yosemite to ensure the border is well-defined there
* (the default border is too light). */
@media (-moz-mac-yosemite-theme) {
- :root:not(:-moz-lwtheme) {
+ #navigator-toolbox:not(:-moz-lwtheme) {
--tabs-border-color: rgba(0,0,0,.2);
}
- :root:not(:-moz-lwtheme):-moz-window-inactive {
+ #navigator-toolbox:not(:-moz-lwtheme):-moz-window-inactive {
--tabs-border-color: rgba(0,0,0,.05);
}
#main-window[tabsintitlebar] #TabsToolbar:not([collapsed="true"]) + #nav-bar:not(:-moz-lwtheme) {
box-shadow: 0 -@navbarTabsShadowSize@ 0 var(--tabs-border-color);
}
}
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -11,18 +11,16 @@
--toolbar-bgcolor: var(--chrome-secondary-background-color);
--toolbar-gbimage: none;
--toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor);
--toolbar-non-lwt-textcolor: var(--chrome-color);
--toolbar-non-lwt-bgimage: none;
--toolbarbutton-icon-fill-opacity: .7;
-
- --tab-line-color: #0a84ff;
}
:root:-moz-lwtheme-brighttext {
/* Chrome */
--chrome-background-color: hsl(240, 5%, 5%);
--chrome-color: rgb(249, 249, 250);
--chrome-secondary-background-color: hsl(240, 1%, 20%);
--toolbox-border-bottom-color: hsla(240, 5%, 5%, .1);
@@ -49,16 +47,20 @@
--chrome-nav-bar-separator-color: #B6B6B8;
--chrome-nav-buttons-background: #ffffff; /* --theme-body-background */
--chrome-nav-buttons-hover-background: #DADBDB;
--chrome-nav-bar-controls-border-color: #ccc;
--chrome-selection-color: #f5f7fa;
--chrome-selection-background-color: #4c9ed9;
}
+#tabbrowser-tabs:-moz-lwtheme {
+ --tab-line-color: #0a84ff;
+}
+
.toolbarbutton-animatable-box[brighttext],
toolbar[brighttext] .toolbarbutton-animatable-box,
toolbar[brighttext] .toolbarbutton-1 {
fill: rgb(249, 249, 250);
}
#urlbar ::-moz-selection,
#navigator-toolbox .searchbar-textbox ::-moz-selection,
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -1,32 +1,36 @@
%if 0
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
%endif
%filter substitution
%define horizontalTabPadding 9px
+/* This can't live on the tabbrowser because it's used for the titlebar height, too. */
:root {
+ --tab-min-height: 33px;
+}
+
+#tabbrowser-tabs {
--tabs-top-border-width: 0px;
- --tab-min-height: 33px;
--tab-min-width: 76px;
--tab-loading-fill: #0A84FF;
}
:root[uidensity=compact] {
--tab-min-height: 29px;
}
:root[uidensity=touch] {
--tab-min-height: 41px;
}
-:root:-moz-lwtheme {
+#tabbrowser-tabs:-moz-lwtheme {
--tab-line-color: var(--lwt-accent-color);
}
tabbrowser {
/* Value for --in-content-page-background in in-content/common.inc.css */
background-color: #f9f9fa;
}
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -9,19 +9,16 @@
%include ../shared/browser.inc.css
%filter substitution
%define glassShadowColor hsla(240,5%,5%,0.3)
:root {
--titlebar-text-color: currentColor;
- --tabs-border-color: threedshadow;
- --tab-line-color: highlight;
-
--toolbar-non-lwt-bgcolor: -moz-dialog;
--toolbar-non-lwt-textcolor: -moz-dialogtext;
--toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));
--toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
--toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
--toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) - 1px);
--toolbarbutton-border-radius: 2px;
@@ -32,42 +29,57 @@
--arrowpanel-dimmed-further: hsla(0,0%,80%,.45);
--arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
--urlbar-separator-color: ThreeDLightShadow;
--toolbox-border-bottom-color: ThreeDShadow;
}
+#navigator-toolbox {
+ --tabs-border-color: threedshadow;
+}
+
+#tabbrowser-tabs {
+ --tab-line-color: highlight;
+}
+
@media (-moz-windows-default-theme) {
:root {
- --tabs-border-color: rgba(0,0,0,.3);
- --tab-line-color: #0a84ff;
-
--toolbar-non-lwt-bgcolor: #f9f9fa;
--toolbar-non-lwt-textcolor: #0c0c0d;
--toolbar-non-lwt-bgimage: none;
--toolbarbutton-icon-fill-opacity: .7;
--panel-separator-color: hsla(210,4%,10%,.14);
--toolbox-border-bottom-color: #e1e1e2;
}
+
+ #navigator-toolbox {
+ --tabs-border-color: rgba(0,0,0,.3);
+ }
+
+ #tabbrowser-tabs {
+ --tab-line-color: #0a84ff;
+ }
}
:root:-moz-lwtheme {
- --tabs-border-color: rgba(0,0,0,.3);
-
--toolbar-bgcolor: rgba(255,255,255,.4);
--toolbar-bgimage: none;
--toolbox-border-bottom-color: rgba(0,0,0,.3);
}
+#navigator-toolbox:-moz-lwtheme {
+ --tabs-border-color: rgba(0,0,0,.3);
+}
+
#menubar-items {
-moz-box-orient: vertical; /* for flex hack */
}
#main-menubar {
-moz-box-flex: 1; /* make menu items expand to fill toolbar height */
}
@@ -108,17 +120,17 @@
}
/*
* Windows 7 draws the chrome background color as the tab background
* instead of in the tabs toolbar.
*/
@media (-moz-os-version: windows-win7) {
@media (-moz-windows-default-theme) {
- :root:not(:-moz-lwtheme) {
+ #navigator-toolbox:not(:-moz-lwtheme) {
--tabs-border-color: @glassShadowColor@;
}
#TabsToolbar:not(:-moz-lwtheme) {
color: hsl(240,9%,98%);
}
/* Always show full-height tab separators on tabs with borders. */
--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -8,37 +8,37 @@ const {utils: Cu, interfaces: Ci, classe
ChromeUtils.import("resource://gre/modules/XPCOMUtils.jsm");
ChromeUtils.import("resource://gre/modules/Services.jsm");
ChromeUtils.import("resource://gre/modules/AppConstants.jsm");
ChromeUtils.defineModuleGetter(this, "LightweightThemeImageOptimizer",
"resource://gre/modules/addons/LightweightThemeImageOptimizer.jsm");
-const kCSSVarsMap = new Map([
+const kCSSVarsMap = [
["--lwt-accent-color-inactive", "accentcolorInactive"],
["--lwt-background-alignment", "backgroundsAlignment"],
["--lwt-background-tiling", "backgroundsTiling"],
- ["--tab-loading-fill", "tab_loading"],
+ ["--tab-loading-fill", "tab_loading", "tabbrowser-tabs"],
["--lwt-tab-text", "tab_text"],
["--toolbar-bgcolor", "toolbarColor"],
["--toolbar-color", "toolbar_text"],
["--url-and-searchbar-background-color", "toolbar_field"],
["--url-and-searchbar-color", "toolbar_field_text"],
["--lwt-toolbar-field-border-color", "toolbar_field_border"],
["--urlbar-separator-color", "toolbar_field_separator"],
- ["--tabs-border-color", "toolbar_top_separator"],
+ ["--tabs-border-color", "toolbar_top_separator", "navigator-toolbox"],
["--lwt-toolbar-vertical-separator", "toolbar_vertical_separator"],
["--toolbox-border-bottom-color", "toolbar_bottom_separator"],
["--lwt-toolbarbutton-icon-fill", "icon_color"],
["--lwt-toolbarbutton-icon-fill-attention", "icon_attention_color"],
["--lwt-toolbarbutton-background", "button_background"],
["--lwt-toolbarbutton-hover-background", "button_background_hover"],
["--lwt-toolbarbutton-active-background", "button_background_active"],
-]);
+];
this.LightweightThemeConsumer =
function LightweightThemeConsumer(aDocument) {
this._doc = aDocument;
this._win = aDocument.defaultView;
let screen = this._win.screen;
this._lastScreenWidth = screen.width;
@@ -194,27 +194,29 @@ LightweightThemeConsumer.prototype = {
function _setImage(aRoot, aActive, aVariableName, aURLs) {
if (aURLs && !Array.isArray(aURLs)) {
aURLs = [aURLs];
}
_setProperty(aRoot, aActive, aVariableName, aURLs && aURLs.map(v => `url("${v.replace(/"/g, '\\"')}")`).join(","));
}
-function _setProperty(root, active, variableName, value) {
+function _setProperty(elem, active, variableName, value) {
if (active && value) {
- root.style.setProperty(variableName, value);
+ elem.style.setProperty(variableName, value);
} else {
- root.style.removeProperty(variableName);
+ elem.style.removeProperty(variableName);
}
}
function _setProperties(root, active, vars) {
- for (let [cssVarName, varsKey] of kCSSVarsMap) {
- _setProperty(root, active, cssVarName, vars[varsKey]);
+ for (let [cssVarName, varsKey, optionalElementID] of kCSSVarsMap) {
+ let elem = optionalElementID ? root.ownerDocument.getElementById(optionalElementID)
+ : root;
+ _setProperty(elem, active, cssVarName, vars[varsKey]);
}
}
function _parseRGB(aColorString) {
var rgb = aColorString.match(/^rgba?\((\d+), (\d+), (\d+)/);
rgb.shift();
return rgb.map(x => parseInt(x));
}