From 29dd67b0f03ab543d5d8ac6ba67ab0aafb3b24cc Mon Sep 17 00:00:00 2001 From: Jared Wein Date: Tue, 21 Feb 2017 11:33:21 -0500 Subject: [PATCH] Bug 864562 - Use CSS variables for lightweight theme styling. r=MattN Original patch written by Raj Meghpara MozReview-Commit-ID: 8z6tmUG0gdN --HG-- extra : rebase_source : 55ed5125ce7ed3de660490a91ab23885eaf49351 --- browser/base/content/browser-addons.js | 49 +++---------------- .../themes/linux/browser-lightweightTheme.css | 10 ++-- browser/themes/linux/browser.css | 2 + .../themes/osx/browser-lightweightTheme.css | 14 +++--- browser/themes/osx/browser.css | 2 + .../windows/browser-lightweightTheme.css | 14 +++--- browser/themes/windows/browser.css | 2 + 7 files changed, 31 insertions(+), 62 deletions(-) diff --git a/browser/base/content/browser-addons.js b/browser/base/content/browser-addons.js index 378437b2be7b..9f993da70169 100644 --- a/browser/base/content/browser-addons.js +++ b/browser/base/content/browser-addons.js @@ -794,18 +794,7 @@ var LightWeightThemeWebInstaller = { * Listen for Lightweight Theme styling changes and update the browser's theme accordingly. */ var LightweightThemeListener = { - _modifiedStyles: [], - init() { - XPCOMUtils.defineLazyGetter(this, "styleSheet", function() { - for (let i = document.styleSheets.length - 1; i >= 0; i--) { - let sheet = document.styleSheets[i]; - if (sheet.href == "chrome://browser/skin/browser-lightweightTheme.css") - return sheet; - } - return undefined; - }); - Services.obs.addObserver(this, "lightweight-theme-styling-update", false); Services.obs.addObserver(this, "lightweight-theme-optimized", false); if (document.documentElement.hasAttribute("lwtheme")) @@ -818,44 +807,18 @@ var LightweightThemeListener = { }, /** - * Append the headerImage to the background-image property of all rulesets in - * browser-lightweightTheme.css. + * Set the headerImage to a CSS variable which is used to apply the background-image + * property of all rulesets in browser-lightweightTheme.css. * * @param headerImage - a string containing a CSS image for the lightweight theme header. */ updateStyleSheet(headerImage) { - if (!this.styleSheet) - return; - this.substituteRules(this.styleSheet.cssRules, headerImage); - }, - - substituteRules(ruleList, headerImage, existingStyleRulesModified = 0) { - let styleRulesModified = 0; - for (let i = 0; i < ruleList.length; i++) { - let rule = ruleList[i]; - if (rule instanceof Ci.nsIDOMCSSGroupingRule) { - // Add the number of modified sub-rules to the modified count - styleRulesModified += this.substituteRules(rule.cssRules, headerImage, existingStyleRulesModified + styleRulesModified); - } else if (rule instanceof Ci.nsIDOMCSSStyleRule) { - if (!rule.style.backgroundImage) - continue; - let modifiedIndex = existingStyleRulesModified + styleRulesModified; - if (!this._modifiedStyles[modifiedIndex]) - this._modifiedStyles[modifiedIndex] = { backgroundImage: rule.style.backgroundImage }; - - rule.style.backgroundImage = this._modifiedStyles[modifiedIndex].backgroundImage + ", " + headerImage; - styleRulesModified++; - } else { - Cu.reportError("Unsupported rule encountered"); - } - } - return styleRulesModified; - }, - + document.documentElement.style.setProperty("--lwt-header-image", headerImage); +}, // nsIObserver observe(aSubject, aTopic, aData) { - if ((aTopic != "lightweight-theme-styling-update" && aTopic != "lightweight-theme-optimized") || - !this.styleSheet) + if (aTopic != "lightweight-theme-styling-update" && + aTopic != "lightweight-theme-optimized") return; if (aTopic == "lightweight-theme-optimized" && aSubject != window) diff --git a/browser/themes/linux/browser-lightweightTheme.css b/browser/themes/linux/browser-lightweightTheme.css index d3109bec319d..27ac66c739e4 100644 --- a/browser/themes/linux/browser-lightweightTheme.css +++ b/browser/themes/linux/browser-lightweightTheme.css @@ -6,8 +6,8 @@ %filter substitution /* - * LightweightThemeListener will append the current lightweight theme's header - * image to the background-image for each of the following rulesets. + * LightweightThemeListener will set the current lightweight theme's header + * image to the lwt-header-image variable, used in each of the following rulesets. */ /* Lightweight theme on tabs */ @@ -15,7 +15,7 @@ #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-end[selected=true]:-moz-lwtheme::before { background-attachment: scroll, fixed; background-color: transparent; - background-image: @fgTabTextureLWT@;/*, lwtHeader;*/ + background-image: @fgTabTextureLWT@, var(--lwt-header-image); background-position: 0 0, right top; background-repeat: repeat-x, no-repeat; } @@ -24,8 +24,8 @@ background-attachment: scroll, scroll, fixed; background-color: transparent; background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png), - @fgTabTextureLWT@;/*, - lwtHeader;*/ + @fgTabTextureLWT@, + var(--lwt-header-image); background-position: 0 0, 0 0, right top; background-repeat: repeat-x, repeat-x, no-repeat; } diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css index 391c296d3251..0b3c043e9378 100644 --- a/browser/themes/linux/browser.css +++ b/browser/themes/linux/browser.css @@ -38,6 +38,8 @@ --arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8); --urlbar-separator-color: ThreeDShadow; + + --lwt-header-image: none; } #menubar-items { diff --git a/browser/themes/osx/browser-lightweightTheme.css b/browser/themes/osx/browser-lightweightTheme.css index aeae9d9250f7..7b9587e1c9c3 100644 --- a/browser/themes/osx/browser-lightweightTheme.css +++ b/browser/themes/osx/browser-lightweightTheme.css @@ -5,8 +5,8 @@ %include shared.inc /* - * LightweightThemeListener will append the current lightweight theme's header - * image to the background-image for each of the following rulesets. + * LightweightThemeListener will set the current lightweight theme's header + * image to the lwt-header-image variable, used in each of the following rulesets. */ /* Lightweight theme on tabs */ @@ -14,7 +14,7 @@ #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-end[selected=true]:-moz-lwtheme::before { background-attachment: scroll, fixed; background-color: transparent; - background-image: @fgTabTextureLWT@;/*, lwtHeader;*/ + background-image: @fgTabTextureLWT@, var(--lwt-header-image); background-position: 0 0, right top; background-repeat: repeat-x, no-repeat; } @@ -23,8 +23,8 @@ background-attachment: scroll, scroll, fixed; background-color: transparent; background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png), - @fgTabTextureLWT@;/*, - lwtHeader;*/ + @fgTabTextureLWT@, + var(--lwt-header-image); background-position: 0 0, 0 0, right top; background-repeat: repeat-x, repeat-x, no-repeat; } @@ -32,7 +32,7 @@ @media (min-resolution: 2dppx) { #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-middle[selected=true]:-moz-lwtheme { background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle@2x.png), - @fgTabTextureLWT@;/*, - lwtHeader;*/ + @fgTabTextureLWT@, + var(--lwt-header-image); } } diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css index a1161185a327..bc8eee0fb7ca 100644 --- a/browser/themes/osx/browser.css +++ b/browser/themes/osx/browser.css @@ -49,6 +49,8 @@ --arrowpanel-dimmed-even-further: hsla(210,4%,10%,.17); --urlbar-separator-color: hsla(0,0%,16%,.2); + + --lwt-header-image: none; } #urlbar:-moz-lwtheme:not([focused="true"]), diff --git a/browser/themes/windows/browser-lightweightTheme.css b/browser/themes/windows/browser-lightweightTheme.css index d2a1b840c003..b6c518d4a604 100644 --- a/browser/themes/windows/browser-lightweightTheme.css +++ b/browser/themes/windows/browser-lightweightTheme.css @@ -6,8 +6,8 @@ %filter substitution /* - * LightweightThemeListener will append the current lightweight theme's header - * image to the background-image for each of the following rulesets. + * LightweightThemeListener will set the current lightweight theme's header + * image to the lwt-header-image variable, used in each of the following rulesets. */ /* Lightweight theme on tabs */ @@ -15,7 +15,7 @@ #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-end[selected=true]:-moz-lwtheme::before { background-attachment: scroll, fixed; background-color: transparent; - background-image: @fgTabTextureLWT@;/*, lwtHeader;*/ + background-image: @fgTabTextureLWT@, var(--lwt-header-image); background-position: 0 0, right top; background-repeat: repeat-x, no-repeat; } @@ -24,8 +24,8 @@ background-attachment: scroll, scroll, fixed; background-color: transparent; background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png), - @fgTabTextureLWT@;/*, - lwtHeader;*/ + @fgTabTextureLWT@, + var(--lwt-header-image); background-position: 0 0, 0 0, right top; background-repeat: repeat-x, repeat-x, no-repeat; } @@ -33,7 +33,7 @@ @media (min-resolution: 1.25dppx) { #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-middle[selected=true]:-moz-lwtheme { background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle@2x.png), - @fgTabTextureLWT@;/*, - lwtHeader;*/ + @fgTabTextureLWT@, + var(--lwt-header-image); } } diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css index ca3710b8bf21..8551636eefa4 100644 --- a/browser/themes/windows/browser.css +++ b/browser/themes/windows/browser.css @@ -51,6 +51,8 @@ --arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8); --urlbar-separator-color: ThreeDLightShadow; + + --lwt-header-image: none; } @media (-moz-windows-default-theme) {