fune/browser/base/content/browser-compacttheme.js
Brian Grinstead 9defa5cedc Bug 1314091 - Remove devtools-specific logic out of browser-devedition and into devtools-browser;r=ochameau
The devtools theme is no longer relevant when dealing with compact themes, since it doesn't
affect the theme colors. But we still need it for styling other things related to devtools
in browser.xul, like the splitter between the toolbox and page and gcli.

MozReview-Commit-ID: 2CXDuwQY19x
2017-01-13 11:53:58 -08:00

105 lines
3.3 KiB
JavaScript

/* 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/. */
/**
* Listeners for the compact theme. This adds an extra stylesheet
* to browser.xul if a pref is set and no other themes are applied.
*/
var CompactTheme = {
styleSheetLocation: "chrome://browser/skin/compacttheme.css",
styleSheet: null,
initialized: false,
get isStyleSheetEnabled() {
return this.styleSheet && !this.styleSheet.sheet.disabled;
},
get isThemeCurrentlyApplied() {
let theme = LightweightThemeManager.currentTheme;
return theme && (
theme.id == "firefox-compact-dark@mozilla.org" ||
theme.id == "firefox-compact-light@mozilla.org");
},
init() {
this.initialized = true;
Services.obs.addObserver(this, "lightweight-theme-styling-update", false);
if (this.isThemeCurrentlyApplied) {
this._toggleStyleSheet(true);
}
},
createStyleSheet() {
let styleSheetAttr = `href="${this.styleSheetLocation}" type="text/css"`;
this.styleSheet = document.createProcessingInstruction(
"xml-stylesheet", styleSheetAttr);
this.styleSheet.addEventListener("load", this);
document.insertBefore(this.styleSheet, document.documentElement);
this.styleSheet.sheet.disabled = true;
},
observe(subject, topic, data) {
if (topic == "lightweight-theme-styling-update") {
let newTheme = JSON.parse(data);
if (newTheme && (
newTheme.id == "firefox-compact-light@mozilla.org" ||
newTheme.id == "firefox-compact-dark@mozilla.org")) {
// We are using the theme ID on this object instead of always referencing
// LightweightThemeManager.currentTheme in case this is a preview
this._toggleStyleSheet(true);
} else {
this._toggleStyleSheet(false);
}
}
},
handleEvent(e) {
if (e.type === "load") {
this.styleSheet.removeEventListener("load", this);
this.refreshBrowserDisplay();
}
},
refreshBrowserDisplay() {
// Don't touch things on the browser if gBrowserInit.onLoad hasn't
// yet fired.
if (this.initialized) {
gBrowser.tabContainer._positionPinnedTabs();
}
},
_toggleStyleSheet(enabled) {
let wasEnabled = this.isStyleSheetEnabled;
if (enabled) {
// The stylesheet may not have been created yet if it wasn't
// needed on initial load. Make it now.
if (!this.styleSheet) {
this.createStyleSheet();
}
this.styleSheet.sheet.disabled = false;
this.refreshBrowserDisplay();
} else if (!enabled && wasEnabled) {
this.styleSheet.sheet.disabled = true;
this.refreshBrowserDisplay();
}
},
uninit() {
Services.obs.removeObserver(this, "lightweight-theme-styling-update");
if (this.styleSheet) {
this.styleSheet.removeEventListener("load", this);
}
this.styleSheet = null;
}
};
// If the compact theme is going to be applied in gBrowserInit.onLoad,
// then preload it now. This prevents a flash of unstyled content where the
// normal theme is applied while the compact theme stylesheet is loading.
if (AppConstants.INSTALL_COMPACT_THEMES &&
this != Services.appShell.hiddenDOMWindow && CompactTheme.isThemeCurrentlyApplied) {
CompactTheme.createStyleSheet();
}