/* 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/. */
let os; const platform = navigator.platform; if (platform.startsWith("Win")) {
os = "win";
} elseif (platform.startsWith("Mac")) {
os = "mac";
} else {
os = "linux";
}
documentElement.setAttribute("platform", os);
// no-theme attributes allows to just est the platform attribute // to have per-platform CSS working correctly. if (documentElement.getAttribute("no-theme") === "true") { return;
}
const devtoolsStyleSheets = new WeakMap();
let gOldTheme = "";
/* * Notify the window that a theme switch finished so tests can check the DOM
*/ function notifyWindow() {
window.dispatchEvent(new CustomEvent("theme-switch-complete", {}));
}
/* * Apply all the sheets from `newTheme` and remove all of the sheets * from `oldTheme`
*/ function switchTheme(newTheme) { // handle forced colors attribute even if newTheme === gOldTheme, as the user can switch from light to auto, // and we'd get a newTheme of "light" here (see getTheme).
handleForcedColorsActiveAttribute();
const oldThemeDef = gDevTools.getThemeDefinition(oldTheme);
let newThemeDef = gDevTools.getThemeDefinition(newTheme);
// The theme might not be available anymore (e.g. uninstalled) // Use the default one. if (!newThemeDef) {
newThemeDef = gDevTools.getThemeDefinition(getAutoTheme());
}
// Store the sheets in a WeakMap for access later when the theme gets // unapplied. It's hard to query for processing instructions so this // is an easy way to access them later without storing a property on // the window
devtoolsStyleSheets.set(newThemeDef, []);
Promise.all(loadEvents).then(() => { // Unload all stylesheets and classes from the old theme. if (oldThemeDef) { for (const name of oldThemeDef.classList) {
documentElement.classList.remove(name);
}
for (const sheet of devtoolsStyleSheets.get(oldThemeDef) || []) {
sheet.remove();
}
if (oldThemeDef.onUnapply) {
oldThemeDef.onUnapply(window, newTheme);
}
}
// Load all stylesheets and classes from the new theme. for (const name of newThemeDef.classList) {
documentElement.classList.add(name);
}
if (newThemeDef.onApply) {
newThemeDef.onApply(window, oldTheme);
}
// Final notification for further theme-switching related logic.
gDevTools.emit("theme-switched", window, newTheme, oldTheme);
notifyWindow();
}, console.error);
}
function handleThemeChange() {
switchTheme(getTheme());
}
const FORCED_COLORS_ACTIVE_ATTRIBUTE = "forced-colors-active"; const FORCE_COLORS_ACTIVE_MEDIA_QUERY_STRING = "(forced-colors: active)"; /** * Sets or remove the "forced-colors-active" attribute. The toolbox onlys support high contrast mode * if the user didn't explicitly set a light/dark theme
*/ function handleForcedColorsActiveAttribute() { const themePrefValue = getThemePrefValue(); const forcedColorsActive =
Services.prefs.getBoolPref( "devtools.high-contrast-mode-support", false
) &&
themePrefValue == "auto" &&
window.matchMedia(FORCE_COLORS_ACTIVE_MEDIA_QUERY_STRING).matches; if (forcedColorsActive) {
documentElement.setAttribute(FORCED_COLORS_ACTIVE_ATTRIBUTE, "");
} else {
documentElement.removeAttribute(FORCED_COLORS_ACTIVE_ATTRIBUTE);
}
}
// Add/Remove forced-colors-active attribute when the user toggles high contrast mode. const mql = window.matchMedia(FORCE_COLORS_ACTIVE_MEDIA_QUERY_STRING);
mql.addEventListener("change", handleForcedColorsActiveAttribute);
// Check if the current document or the embedder of the document enforces a // theme. const forcedTheme =
documentElement.getAttribute("force-theme") ||
window.top.document.documentElement.getAttribute("force-theme");
if (forcedTheme) {
switchTheme(forcedTheme);
} else {
switchTheme(getTheme());
Die Informationen auf dieser Webseite wurden
nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit,
noch Qualität der bereit gestellten Informationen zugesichert.
Bemerkung:
Die farbliche Syntaxdarstellung ist noch experimentell.