1 files changed, 145 insertions, 0 deletions
diff --git a/devtools/client/shared/test/browser_theme.js b/devtools/client/shared/test/browser_theme.js
new file mode 100644
index 0000000000..b70bafafa1
--- /dev/null
+++ b/devtools/client/shared/test/browser_theme.js
@@ -0,0 +1,145 @@
+/* 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`);
+  }
+}