1110952-devtools-color-module.patch

From 7d463d4891a7a4f57652cb962e3113eb28dea876 Mon Sep 17 00:00:00 2001
From: Jordan Santell <jsantell@gmail.com>
Date: Fri, 12 Dec 2014 11:28:24 -0800
Subject: Bug 1110952 - Add module for managing devtools colors and
 themes. r=bgrins

diff --git a/browser/devtools/shared/moz.build b/browser/devtools/shared/moz.build
index f2f3983..00d09cb 100644
--- a/browser/devtools/shared/moz.build
+++ b/browser/devtools/shared/moz.build
@@ -35,16 +35,17 @@ EXTRA_JS_MODULES.devtools.shared += [
     'autocomplete-popup.js',
     'd3.js',
     'doorhanger.js',
     'frame-script-utils.js',
     'inplace-editor.js',
     'observable-object.js',
     'telemetry.js',
     'theme-switching.js',
+    'theme.js',
     'undo.js',
 ]
 
 EXTRA_JS_MODULES.devtools.shared.widgets += [
     'widgets/CubicBezierWidget.js',
     'widgets/FastListWidget.js',
     'widgets/Spectrum.js',
     'widgets/TableWidget.js',
diff --git a/browser/devtools/shared/test/browser.ini b/browser/devtools/shared/test/browser.ini
index dd4dba0..5d9e49a 100644
--- a/browser/devtools/shared/test/browser.ini
+++ b/browser/devtools/shared/test/browser.ini
@@ -40,16 +40,17 @@ support-files =
 [browser_layoutHelpers.js]
 [browser_layoutHelpers-getBoxQuads.js]
 [browser_num-l10n.js]
 [browser_observableobject.js]
 [browser_outputparser.js]
 [browser_prefs.js]
 [browser_require_basic.js]
 [browser_spectrum.js]
+[browser_theme.js]
 [browser_tableWidget_basic.js]
 [browser_tableWidget_keyboard_interaction.js]
 [browser_tableWidget_mouse_interaction.js]
 skip-if = buildapp == 'mulet'
 [browser_telemetry_button_paintflashing.js]
 [browser_telemetry_button_responsive.js]
 [browser_telemetry_button_scratchpad.js]
 [browser_telemetry_button_tilt.js]
diff --git a/browser/devtools/shared/test/browser_theme.js b/browser/devtools/shared/test/browser_theme.js
new file mode 100644
index 0000000..9fca5fe
--- /dev/null
+++ b/browser/devtools/shared/test/browser_theme.js
@@ -0,0 +1,91 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Tests that theme utilities work
+
+let { Cu } = devtools.require("chrome");
+let { Services } = Cu.import("resource://gre/modules/Services.jsm", {});
+let { gDevTools } = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
+let { getColor, getTheme, setTheme } = devtools.require("devtools/shared/theme");
+
+function test() {
+  waitForExplicitFinish();
+  testGetTheme();
+  testSetTheme();
+  testGetColor();
+  testColorExistence();
+  endTests();
+}
+
+function endTests() {
+  gDevTools = Services = null;
+  finish();
+}
+
+function testGetTheme () {
+  let 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 () {
+  let originalTheme = getTheme();
+  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);
+}
+
+function testGetColor () {
+  let BLUE_DARK = "#3689b2";
+  let BLUE_LIGHT = "hsl(208,56%,40%)";
+  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("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 () {
+  var vars = ["body-background", "sidebar-background", "contrast-background", "tab-toolbar-background",
+   "toolbar-background", "selection-background", "selection-color",
+   "selection-background-semitransparent", "splitter-color", "comment", "body-color",
+   "body-color-alt", "content-color1", "content-color2", "content-color3",
+   "highlight-green", "highlight-blue", "highlight-bluegrey", "highlight-purple",
+   "highlight-lightorange", "highlight-orange", "highlight-red", "highlight-pink"
+  ];
+
+  for (let 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 light theme`);
+  }
+}
+
+function isColor (s) {
+  // Regexes from Heather Arthur's `color-string`
+  // https://github.com/harthur/color-string
+  // MIT License
+  return /^#([a-fA-F0-9]{3})$/.test(s) ||
+         /^#([a-fA-F0-9]{6})$/.test(s) ||
+         /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d\.]+)\s*)?\)$/.test(s) ||
+         /^rgba?\(\s*([\d\.]+)\%\s*,\s*([\d\.]+)\%\s*,\s*([\d\.]+)\%\s*(?:,\s*([\d\.]+)\s*)?\)$/.test(s);
+}
diff --git a/browser/devtools/shared/theme.js b/browser/devtools/shared/theme.js
new file mode 100644
index 0000000..a65b75b
--- /dev/null
+++ b/browser/devtools/shared/theme.js
@@ -0,0 +1,90 @@
+/* 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/. */
+
+"use strict";
+
+/**
+ * Colors for themes taken from:
+ * https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors
+ */
+
+const { Cu } = require("chrome");
+const { NetUtil } = Cu.import("resource://gre/modules/NetUtil.jsm", {});
+loader.lazyRequireGetter(this, "Services");
+loader.lazyImporter(this, "gDevTools", "resource:///modules/devtools/gDevTools.jsm");
+
+const themeURIs = {
+  light: "chrome://browser/skin/devtools/light-theme.css",
+  dark: "chrome://browser/skin/devtools/dark-theme.css"
+}
+
+const cachedThemes = {};
+
+/**
+ * Returns a string of the file found at URI
+ */
+function readURI (uri) {
+  let stream = NetUtil.newChannel(uri, "UTF-8", null).open();
+  let count = stream.available();
+  let data = NetUtil.readInputStreamToString(stream, count, { charset: "UTF-8" });
+  stream.close();
+  return data;
+}
+
+/**
+ * Takes a theme name and either returns it from the cache,
+ * or fetches the theme CSS file and caches it.
+ */
+function getThemeFile (name) {
+  // Use the cached theme, or generate it
+  let themeFile = cachedThemes[name] || readURI(themeURIs[name]).match(/--theme-.*: .*;/g).join("\n");
+
+  // Cache if not already cached
+  if (!cachedThemes[name]) {
+    cachedThemes[name] = themeFile;
+  }
+
+  return themeFile;
+}
+
+/**
+ * Returns the string value of the current theme,
+ * like "dark" or "light".
+ */
+const getTheme = exports.getTheme = () => Services.prefs.getCharPref("devtools.theme");
+
+/**
+ * Returns a color indicated by `type` (like "toolbar-background", or "highlight-red"),
+ * with the ability to specify a theme, or use whatever the current theme is
+ * if left unset. If theme not found, falls back to "light" theme. Returns null
+ * if the type cannot be found for the theme given.
+ */
+const getColor = exports.getColor = (type, theme) => {
+  let themeName = theme || getTheme();
+
+  // If there's no theme URIs for this theme, use `light` as default.
+  if (!themeURIs[themeName]) {
+    themeName = "light";
+  }
+
+  let themeFile = getThemeFile(themeName);
+  let match;
+
+  // Return the appropriate variable in the theme, or otherwise, null.
+  return (match = themeFile.match(new RegExp("--theme-" + type + ": (.*);"))) ? match[1] : null;
+};
+
+/**
+ * Mimics selecting the theme selector in the toolbox;
+ * sets the preference and emits an event on gDevTools to trigger
+ * the themeing.
+ */
+const setTheme = exports.setTheme = (newTheme) => {
+  Services.prefs.setCharPref("devtools.theme", newTheme);
+  gDevTools.emit("pref-changed", {
+    pref: "devtools.theme",
+    newValue: newTheme,
+    oldValue: getTheme()
+  });
+};
-- 
1.8.4.2