/* Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ */ "use strict"; // Tests that theme utilities work const { getColor, getTheme, setTheme, } = require("resource://devtools/client/shared/theme.js"); const { PrefObserver } = require("resource://devtools/client/shared/prefs.js"); add_task(async function () { testGetTheme(); testSetTheme(); testGetColor(); testColorExistence(); }); 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 testGetColor() { const BLUE_DARK = "#75bfff"; const BLUE_LIGHT = "#0074e8"; const 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("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", "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); } function testColorExistence() { const vars = [ "body-background", "sidebar-background", "contrast-background", "tab-toolbar-background", "toolbar-background", "selection-background", "selection-color", "selection-background-hover", "splitter-color", "comment", "body-color", "text-color-alt", "text-color-inactive", "text-color-strong", "highlight-green", "highlight-blue", "highlight-bluegrey", "highlight-purple", "highlight-lightorange", "highlight-orange", "highlight-red", "highlight-pink", ]; for (const type of vars) { ok(getColor(type, "light"), `${type} is a valid color in light theme`); ok(getColor(type, "dark"), `${type} is a valid color in dark theme`); } }