зеркало из 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:
Родитель
50f849ca2b
Коммит
29dd67b0f0
|
@ -794,18 +794,7 @@ var LightWeightThemeWebInstaller = {
|
||||||
* Listen for Lightweight Theme styling changes and update the browser's theme accordingly.
|
* Listen for Lightweight Theme styling changes and update the browser's theme accordingly.
|
||||||
*/
|
*/
|
||||||
var LightweightThemeListener = {
|
var LightweightThemeListener = {
|
||||||
_modifiedStyles: [],
|
|
||||||
|
|
||||||
init() {
|
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-styling-update", false);
|
||||||
Services.obs.addObserver(this, "lightweight-theme-optimized", false);
|
Services.obs.addObserver(this, "lightweight-theme-optimized", false);
|
||||||
if (document.documentElement.hasAttribute("lwtheme"))
|
if (document.documentElement.hasAttribute("lwtheme"))
|
||||||
|
@ -818,44 +807,18 @@ var LightweightThemeListener = {
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Append the headerImage to the background-image property of all rulesets in
|
* Set the headerImage to a CSS variable which is used to apply the background-image
|
||||||
* browser-lightweightTheme.css.
|
* property of all rulesets in browser-lightweightTheme.css.
|
||||||
*
|
*
|
||||||
* @param headerImage - a string containing a CSS image for the lightweight theme header.
|
* @param headerImage - a string containing a CSS image for the lightweight theme header.
|
||||||
*/
|
*/
|
||||||
updateStyleSheet(headerImage) {
|
updateStyleSheet(headerImage) {
|
||||||
if (!this.styleSheet)
|
document.documentElement.style.setProperty("--lwt-header-image", headerImage);
|
||||||
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;
|
|
||||||
},
|
|
||||||
|
|
||||||
// nsIObserver
|
// nsIObserver
|
||||||
observe(aSubject, aTopic, aData) {
|
observe(aSubject, aTopic, aData) {
|
||||||
if ((aTopic != "lightweight-theme-styling-update" && aTopic != "lightweight-theme-optimized") ||
|
if (aTopic != "lightweight-theme-styling-update" &&
|
||||||
!this.styleSheet)
|
aTopic != "lightweight-theme-optimized")
|
||||||
return;
|
return;
|
||||||
|
|
||||||
if (aTopic == "lightweight-theme-optimized" && aSubject != window)
|
if (aTopic == "lightweight-theme-optimized" && aSubject != window)
|
||||||
|
|
|
@ -6,8 +6,8 @@
|
||||||
%filter substitution
|
%filter substitution
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* LightweightThemeListener will append the current lightweight theme's header
|
* LightweightThemeListener will set the current lightweight theme's header
|
||||||
* image to the background-image for each of the following rulesets.
|
* image to the lwt-header-image variable, used in each of the following rulesets.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* Lightweight theme on tabs */
|
/* 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 {
|
#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-end[selected=true]:-moz-lwtheme::before {
|
||||||
background-attachment: scroll, fixed;
|
background-attachment: scroll, fixed;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: @fgTabTextureLWT@;/*, lwtHeader;*/
|
background-image: @fgTabTextureLWT@, var(--lwt-header-image);
|
||||||
background-position: 0 0, right top;
|
background-position: 0 0, right top;
|
||||||
background-repeat: repeat-x, no-repeat;
|
background-repeat: repeat-x, no-repeat;
|
||||||
}
|
}
|
||||||
|
@ -24,8 +24,8 @@
|
||||||
background-attachment: scroll, scroll, fixed;
|
background-attachment: scroll, scroll, fixed;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
|
background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
|
||||||
@fgTabTextureLWT@;/*,
|
@fgTabTextureLWT@,
|
||||||
lwtHeader;*/
|
var(--lwt-header-image);
|
||||||
background-position: 0 0, 0 0, right top;
|
background-position: 0 0, 0 0, right top;
|
||||||
background-repeat: repeat-x, repeat-x, no-repeat;
|
background-repeat: repeat-x, repeat-x, no-repeat;
|
||||||
}
|
}
|
||||||
|
|
|
@ -38,6 +38,8 @@
|
||||||
--arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
|
--arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
|
||||||
|
|
||||||
--urlbar-separator-color: ThreeDShadow;
|
--urlbar-separator-color: ThreeDShadow;
|
||||||
|
|
||||||
|
--lwt-header-image: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#menubar-items {
|
#menubar-items {
|
||||||
|
|
|
@ -5,8 +5,8 @@
|
||||||
%include shared.inc
|
%include shared.inc
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* LightweightThemeListener will append the current lightweight theme's header
|
* LightweightThemeListener will set the current lightweight theme's header
|
||||||
* image to the background-image for each of the following rulesets.
|
* image to the lwt-header-image variable, used in each of the following rulesets.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* Lightweight theme on tabs */
|
/* 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 {
|
#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-end[selected=true]:-moz-lwtheme::before {
|
||||||
background-attachment: scroll, fixed;
|
background-attachment: scroll, fixed;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: @fgTabTextureLWT@;/*, lwtHeader;*/
|
background-image: @fgTabTextureLWT@, var(--lwt-header-image);
|
||||||
background-position: 0 0, right top;
|
background-position: 0 0, right top;
|
||||||
background-repeat: repeat-x, no-repeat;
|
background-repeat: repeat-x, no-repeat;
|
||||||
}
|
}
|
||||||
|
@ -23,8 +23,8 @@
|
||||||
background-attachment: scroll, scroll, fixed;
|
background-attachment: scroll, scroll, fixed;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
|
background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
|
||||||
@fgTabTextureLWT@;/*,
|
@fgTabTextureLWT@,
|
||||||
lwtHeader;*/
|
var(--lwt-header-image);
|
||||||
background-position: 0 0, 0 0, right top;
|
background-position: 0 0, 0 0, right top;
|
||||||
background-repeat: repeat-x, repeat-x, no-repeat;
|
background-repeat: repeat-x, repeat-x, no-repeat;
|
||||||
}
|
}
|
||||||
|
@ -32,7 +32,7 @@
|
||||||
@media (min-resolution: 2dppx) {
|
@media (min-resolution: 2dppx) {
|
||||||
#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-middle[selected=true]:-moz-lwtheme {
|
#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),
|
background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle@2x.png),
|
||||||
@fgTabTextureLWT@;/*,
|
@fgTabTextureLWT@,
|
||||||
lwtHeader;*/
|
var(--lwt-header-image);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -49,6 +49,8 @@
|
||||||
--arrowpanel-dimmed-even-further: hsla(210,4%,10%,.17);
|
--arrowpanel-dimmed-even-further: hsla(210,4%,10%,.17);
|
||||||
|
|
||||||
--urlbar-separator-color: hsla(0,0%,16%,.2);
|
--urlbar-separator-color: hsla(0,0%,16%,.2);
|
||||||
|
|
||||||
|
--lwt-header-image: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#urlbar:-moz-lwtheme:not([focused="true"]),
|
#urlbar:-moz-lwtheme:not([focused="true"]),
|
||||||
|
|
|
@ -6,8 +6,8 @@
|
||||||
%filter substitution
|
%filter substitution
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* LightweightThemeListener will append the current lightweight theme's header
|
* LightweightThemeListener will set the current lightweight theme's header
|
||||||
* image to the background-image for each of the following rulesets.
|
* image to the lwt-header-image variable, used in each of the following rulesets.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* Lightweight theme on tabs */
|
/* 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 {
|
#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-end[selected=true]:-moz-lwtheme::before {
|
||||||
background-attachment: scroll, fixed;
|
background-attachment: scroll, fixed;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: @fgTabTextureLWT@;/*, lwtHeader;*/
|
background-image: @fgTabTextureLWT@, var(--lwt-header-image);
|
||||||
background-position: 0 0, right top;
|
background-position: 0 0, right top;
|
||||||
background-repeat: repeat-x, no-repeat;
|
background-repeat: repeat-x, no-repeat;
|
||||||
}
|
}
|
||||||
|
@ -24,8 +24,8 @@
|
||||||
background-attachment: scroll, scroll, fixed;
|
background-attachment: scroll, scroll, fixed;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
|
background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
|
||||||
@fgTabTextureLWT@;/*,
|
@fgTabTextureLWT@,
|
||||||
lwtHeader;*/
|
var(--lwt-header-image);
|
||||||
background-position: 0 0, 0 0, right top;
|
background-position: 0 0, 0 0, right top;
|
||||||
background-repeat: repeat-x, repeat-x, no-repeat;
|
background-repeat: repeat-x, repeat-x, no-repeat;
|
||||||
}
|
}
|
||||||
|
@ -33,7 +33,7 @@
|
||||||
@media (min-resolution: 1.25dppx) {
|
@media (min-resolution: 1.25dppx) {
|
||||||
#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-middle[selected=true]:-moz-lwtheme {
|
#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),
|
background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle@2x.png),
|
||||||
@fgTabTextureLWT@;/*,
|
@fgTabTextureLWT@,
|
||||||
lwtHeader;*/
|
var(--lwt-header-image);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -51,6 +51,8 @@
|
||||||
--arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
|
--arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
|
||||||
|
|
||||||
--urlbar-separator-color: ThreeDLightShadow;
|
--urlbar-separator-color: ThreeDLightShadow;
|
||||||
|
|
||||||
|
--lwt-header-image: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (-moz-windows-default-theme) {
|
@media (-moz-windows-default-theme) {
|
||||||
|
|
Загрузка…
Ссылка в новой задаче