зеркало из https://github.com/mozilla/gecko-dev.git
Bug 864562 - Use CSS variables for lightweight theme styling. r=MattN
Original patch written by Raj Meghpara <meghpararajkumar@gmail.com> MozReview-Commit-ID: 8z6tmUG0gdN --HG-- extra : rebase_source : 55ed5125ce7ed3de660490a91ab23885eaf49351
This commit is contained in:
Jared Wein
Родитель
50f849ca2b
Коммит
29dd67b0f0
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,6 +38,8 @@
|
|||
--arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
|
||||
|
||||
--urlbar-separator-color: ThreeDShadow;
|
||||
|
||||
--lwt-header-image: none;
|
||||
}
|
||||
|
||||
#menubar-items {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"]),
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче