Bug 864562 - Move remaining LWT inline styles to CSS variables. r?mikedeboer
MozReview-Commit-ID: 9ETddCw9w14
--- a/browser/base/content/browser-addons.js
+++ b/browser/base/content/browser-addons.js
@@ -793,17 +793,17 @@ var LightWeightThemeWebInstaller = {
/*
* Listen for Lightweight Theme styling changes and update the browser's theme accordingly.
*/
var LightweightThemeListener = {
init() {
Services.obs.addObserver(this, "lightweight-theme-styling-update", false);
Services.obs.addObserver(this, "lightweight-theme-optimized", false);
if (document.documentElement.hasAttribute("lwtheme"))
- this.updateStyleSheet(document.documentElement.style.backgroundImage);
+ this.updateStyleSheet(document.documentElement.style.getPropertyValue("--lwt-header-image"));
},
uninit() {
Services.obs.removeObserver(this, "lightweight-theme-styling-update");
Services.obs.removeObserver(this, "lightweight-theme-optimized");
},
/**
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -39,16 +39,22 @@
--arrowpanel-dimmed-further: hsla(0,0%,80%,.45);
--arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
--urlbar-separator-color: ThreeDShadow;
--lwt-header-image: none;
}
+:root {
+ color: var(--lwt-textcolor);
+ background-color: var(--lwt-accentcolor);
+ background-image: var(--lwt-header-image);
+}
+
#menubar-items {
-moz-box-orient: vertical; /* for flex hack */
}
#main-menubar {
-moz-box-flex: 1; /* make menu items expand to fill toolbar height */
}
@@ -124,16 +130,21 @@
min-height: 30px;
}
#browser-bottombox {
/* opaque for layers optimization */
background-color: -moz-Dialog;
}
+#browser-bottombox:-moz-lwtheme {
+ background-color: var(--lwt-accentcolor);
+ background-image: var(--lwt-header-image);
+}
+
/* Places toolbar */
toolbarbutton.bookmark-item:not(.subviewbutton),
#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
margin: 0;
padding: 2px 3px;
}
toolbarbutton.bookmark-item:not(.subviewbutton):not(:hover):not(:active):not([open]) {
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -50,16 +50,22 @@
--arrowpanel-dimmed-further: hsla(210,4%,10%,.12);
--arrowpanel-dimmed-even-further: hsla(210,4%,10%,.17);
--urlbar-separator-color: hsla(0,0%,16%,.2);
--lwt-header-image: none;
}
+:root {
+ color: var(--lwt-textcolor);
+ background-color: var(--lwt-accentcolor);
+ background-image: var(--lwt-header-image);
+}
+
#urlbar:-moz-lwtheme:not([focused="true"]),
.searchbar-textbox:-moz-lwtheme:not([focused="true"]) {
opacity: .9;
}
#navigator-toolbox::after {
-moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
content: "";
@@ -3324,16 +3330,21 @@ menulist.translate-infobar-element > .me
position and padding for the private browsing indicator. */
display: -moz-box;
}
#TabsToolbar > .private-browsing-indicator:-moz-locale-dir(rtl) {
-moz-box-ordinal-group: 0;
}
+#browser-bottombox:-moz-lwtheme {
+ background-color: var(--lwt-accentcolor);
+ background-image: var(--lwt-footer-image);
+}
+
%include ../shared/UITour.inc.css
#UITourTooltipDescription {
font-size: 1.18rem;
line-height: 2rem;
}
#UITourTooltipClose {
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -80,16 +80,22 @@ toolbar:-moz-lwtheme {
--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);
}
+:root {
+ color: var(--lwt-textcolor);
+ background-color: var(--lwt-accentcolor);
+ background-image: var(--lwt-header-image);
+}
+
#menubar-items {
-moz-box-orient: vertical; /* for flex hack */
}
#main-menubar {
-moz-box-flex: 1; /* make menu items expand to fill toolbar height */
}
@@ -335,16 +341,21 @@ toolbar:-moz-lwtheme {
#personal-bookmarks {
min-height: 24px;
}
#print-preview-toolbar:not(:-moz-lwtheme) {
-moz-appearance: toolbox;
}
+#browser-bottombox:-moz-lwtheme {
+ background-color: var(--lwt-accentcolor);
+ background-image: var(--lwt-footer-image);
+}
+
#browser-bottombox:not(:-moz-lwtheme) {
background-color: -moz-dialog;
}
/* ::::: titlebar ::::: */
#main-window[sizemode="normal"] > #titlebar {
-moz-appearance: -moz-window-titlebar;
--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -99,37 +99,36 @@ LightweightThemeConsumer.prototype = {
let root = this._doc.documentElement;
let active = !!aData.headerURL;
let stateChanging = (active != this._active);
// We need to clear these either way: either because the theme is being removed,
// or because we are applying a new theme and the data might be bogus CSS,
// so if we don't reset first, it'll keep the old value.
- root.style.removeProperty("color");
- root.style.removeProperty("background-color");
+ root.style.removeProperty("--lwt-textcolor");
+ root.style.removeProperty("--lwt-accentcolor");
if (active) {
- root.style.color = aData.textcolor || "black";
- root.style.backgroundColor = aData.accentcolor || "white";
+ root.style.setProperty("--lwt-textcolor", aData.textcolor || "black");
+ root.style.setProperty("--lwt-accentcolor", aData.accentcolor || "white");
let [r, g, b] = _parseRGB(this._doc.defaultView.getComputedStyle(root).color);
let luminance = 0.2125 * r + 0.7154 * g + 0.0721 * b;
root.setAttribute("lwthemetextcolor", luminance <= 110 ? "dark" : "bright");
root.setAttribute("lwtheme", "true");
} else {
root.removeAttribute("lwthemetextcolor");
root.removeAttribute("lwtheme");
}
this._active = active;
- _setImage(root, active, aData.headerURL);
+ _setImage(root, active, aData.headerURL, "--lwt-header-image");
if (this._footerId) {
let footer = this._doc.getElementById(this._footerId);
- footer.style.backgroundColor = active ? aData.accentcolor || "white" : "";
- _setImage(footer, active, aData.footerURL);
+ _setImage(footer, active, aData.footerURL, "--lwt-footer-image");
if (active && aData.footerURL)
footer.setAttribute("lwthemefooter", "true");
else
footer.removeAttribute("lwthemefooter");
}
// On OS X, we extend the lightweight theme into the titlebar, which means setting
// the chromemargin attribute. Some XUL applications already draw in the titlebar,
@@ -152,18 +151,21 @@ LightweightThemeConsumer.prototype = {
}
}
}
Services.obs.notifyObservers(this._win, "lightweight-theme-window-updated",
JSON.stringify(aData));
}
}
-function _setImage(aElement, aActive, aURL) {
- aElement.style.backgroundImage =
- (aActive && aURL) ? 'url("' + aURL.replace(/"/g, '\\"') + '")' : "";
+function _setImage(aElement, aActive, aURL, aVariableName) {
+ if (aActive && aURL) {
+ aElement.style.setProperty(aVariableName, `url("${aURL.replace(/"/g, '\\"')}")`);
+ } else {
+ aElement.style.removeProperty(aVariableName);
+ }
}
function _parseRGB(aColorString) {
var rgb = aColorString.match(/^rgba?\((\d+), (\d+), (\d+)/);
rgb.shift();
return rgb.map(x => parseInt(x));
}