function testGetTheme() {
const originalTheme = getTheme();
ok(originalTheme, "has some theme to start with.");
Services.prefs.setCharPref("devtools.theme", "light");
is(getTheme(), "light", "getTheme() correctly returns light theme");
Services.prefs.setCharPref("devtools.theme", "dark");
is(getTheme(), "dark", "getTheme() correctly returns dark theme");
Services.prefs.setCharPref("devtools.theme", "unknown");
is(getTheme(), "unknown", "getTheme() correctly returns an unknown theme");
Services.prefs.setCharPref("devtools.theme", originalTheme);
}
function testSetTheme() {
const originalTheme = getTheme();
// Put this in a variable rather than hardcoding it because the default
// changes between aurora and nightly
const otherTheme = originalTheme == "dark" ? "light" : "dark";
const prefObserver = new PrefObserver("devtools.");
prefObserver.once("devtools.theme", () => {
const newValue = Services.prefs.getCharPref("devtools.theme");
is(newValue, otherTheme,
"A preference event triggered by setTheme comes after the value is set.");
});
setTheme(otherTheme);
is(Services.prefs.getCharPref("devtools.theme"), otherTheme,
"setTheme() correctly sets another theme.");
setTheme(originalTheme);
is(Services.prefs.getCharPref("devtools.theme"), originalTheme,
"setTheme() correctly sets the original theme.");
setTheme("unknown");
is(Services.prefs.getCharPref("devtools.theme"), "unknown",
"setTheme() correctly sets an unknown theme.");
Services.prefs.setCharPref("devtools.theme", originalTheme);
prefObserver.destroy();
}
function onFileChanged(_, relativePath) {
if (relativePath.match(/\.css$/)) {
if (relativePath.startsWith("client/themes")) {
let path = relativePath.replace(/^client\/themes\//, "");
// Special-case a few files that get imported from other CSS
// files. We just manually hot reload the parent CSS file.
if (path === "variables.css" || path === "toolbars.css" ||
path === "common.css" || path === "splitters.css") {
replaceCSS(window, "chrome://devtools/skin/" + getTheme() + "-theme.css");
} else {
replaceCSS(window, "chrome://devtools/skin/" + path);
}
return;
}
replaceCSS(
window,
"chrome://devtools/content/" + relativePath.replace(/^client\//, "")
);
replaceCSS(window, "resource://devtools/" + relativePath);
} else if (relativePath.match(/\.(svg|png)$/)) {
relativePath = relativePath.replace(/^client\/themes\//, "");
replaceCSSResource(window, "chrome://devtools/skin/" + relativePath);
}
}
function testGetColor() {
let BLUE_DARK = "#75BFFF";
let BLUE_LIGHT = "#0074e8";
let BLUE_FIREBUG = "#3455db";
let originalTheme = getTheme();
setTheme("dark");
is(getColor("highlight-blue"), BLUE_DARK, "correctly gets color for enabled theme.");
setTheme("light");
is(getColor("highlight-blue"), BLUE_LIGHT, "correctly gets color for enabled theme.");
setTheme("firebug");
is(getColor("highlight-blue"), BLUE_FIREBUG, "correctly gets color for enabled theme.");
setTheme("metal");
is(getColor("highlight-blue"), BLUE_LIGHT,
"correctly uses light for default theme if enabled theme not found");
is(getColor("highlight-blue", "dark"), BLUE_DARK,
"if provided and found, uses the provided theme.");
is(getColor("highlight-blue", "firebug"), BLUE_FIREBUG,
"if provided and found, uses the provided theme.");
is(getColor("highlight-blue", "metal"), BLUE_LIGHT,
"if provided and not found, defaults to light theme.");
is(getColor("somecomponents"), null, "if a type cannot be found, should return null.");
setTheme(originalTheme);
}
drawBackground() {
// The background component is theme dependent, so add the current theme to the props.
let props = Object.assign({}, this.props, {
theme: getTheme()
});
this.background.draw(props);
}
function testSetTheme () {
let originalTheme = getTheme();
gDevTools.once("pref-changed", (_, { pref, oldValue, newValue }) => {
is(pref, "devtools.theme",
"The 'pref-changed' event triggered by setTheme has correct pref.");
is(oldValue, originalTheme,
"The 'pref-changed' event triggered by setTheme has correct oldValue.");
is(newValue, "dark",
"The 'pref-changed' event triggered by setTheme has correct newValue.");
});
setTheme("dark");
is(Services.prefs.getCharPref("devtools.theme"), "dark", "setTheme() correctly sets dark theme.");
setTheme("light");
is(Services.prefs.getCharPref("devtools.theme"), "light", "setTheme() correctly sets light theme.");
setTheme("unknown");
is(Services.prefs.getCharPref("devtools.theme"), "unknown", "setTheme() correctly sets an unknown theme.");
Services.prefs.setCharPref("devtools.theme", originalTheme);
}
/* vim: set ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the preview images are updated when the theme changes.
const { getTheme, setTheme } = require("devtools/client/shared/theme");
const TEST_URI = BASE_URI + "browser_fontinspector.html";
const originalTheme = getTheme();
registerCleanupFunction(() => {
info(`Restoring theme to '${originalTheme}.`);
setTheme(originalTheme);
});
add_task(function* () {
let { inspector, fontInspector } = yield openFontInspectorForURL(TEST_URI);
let { chromeDoc: doc } = fontInspector;
yield selectNode(".normal-text", inspector);
// Store the original preview URI for later comparison.
let originalURI = doc.querySelector("#all-fonts .font-preview").src;
let newTheme = originalTheme === "light" ? "dark" : "light";
info(`Original theme was '${originalTheme}'.`);
yield setThemeAndWaitForUpdate(newTheme, inspector);
isnot(doc.querySelector("#all-fonts .font-preview").src, originalURI,
if (this.getToolDefinition(id)) {
definitions.push(definition);
}
}
return definitions.sort(this.ordinalSort);
},
/**
* Returns the name of the current theme for devtools.
*
* @return {string} theme
* The name of the current devtools theme.
*/
getTheme() {
return getTheme();
},
/**
* Called when the developer tools theme changes.
*/
_onThemeChanged() {
this.emit("theme-changed", getTheme());
},
/**
* Register a new theme for developer tools toolbox.
*
* A definition is a light object that holds various information about a
* theme.
*