Bug 1057346 - Devtools styling API (2)

examples/theme/lib/main.js

@@ -14,14 +14,13 @@ const { Theme, LightTheme } = require("dev/theme");
 /**
  * This object represents a new theme registered within the Toolbox
  * You can activate it by clicking on "My Light Theme" in the Options
- * panel.
+ * panel. The theme derives styles from built-in Light theme.
  */
-const MyTheme = Class({
-  extends: LightTheme,
+const MyTheme = Theme({
+  name: "mytheme",
   label: "My Light Theme",
-  styles: Style({
-    uri: self.data.url("theme.css")
-  }),
+  styles: [LightTheme, self.data.url("theme.css")],
+
   onEnable: function(window, oldTheme) {
     console.log("myTheme.onEnable; method override " +
       window.location.href);
@@ -32,18 +31,6 @@ const MyTheme = Class({
   },
 });
 
-/* Example of functional API
-onEnable.define(MyTheme, (theme, {window, oldTheme}) => {
-  console.log("myTheme.onEnable; functional override " +
-    window.location.href);
-});
-
-onDisable.define(MyTheme, (theme, {window, newTheme}) => {
-  console.log("myTheme.onDisable; functional override " +
-    window.location.href);
-});
-*/
-
 // Registration
 
 const mytheme = new Tool({

lib/dev/theme.js

@@ -16,21 +16,65 @@ const { contract, validate } = require("../sdk/util/contract");
 const { id: addonID } = require("../sdk/self");
 const { onEnable, onDisable } = require("dev/theme/hooks");
 const { Style } = require("sdk/stylesheet/style");
+const { isString, instanceOf, isFunction } = require("sdk/lang/type");
+const { add } = require("sdk/util/array");
 
 const makeID = name =>
-  ("dev-theme-" + addonID + "-" + name).
-  split("/").join("-").
-  split(".").join("-").
-  split(" ").join("-").
+  ("dev-theme-" + addonID + (name ? "-" + name : "")).
+  split(/[ . /]/).join("-").
   replace(/[^A-Za-z0-9_\-]/g, "");
 
 const Theme = Class({
   extends: Disposable,
   implements: [EventTarget],
+
+  initialize: function(options) {
+    this.name = options.name;
+    this.label = options.label;
+    this.styles = options.styles;
+
+    // Event handlers
+    this.onEnable = options.onEnable;
+    this.onDisable = options.onDisable;
+  },
   get id() {
     return makeID(this.name || this.label);
   },
   setup: function() {
+    // Any initialization steps done at the registration time.
+  },
+  getStyles: function() {
+    if (!this.styles) {
+      return [];
+    }
+
+    if (isString(this.styles)) {
+      return [this.styles];
+    }
+
+    let result = [];
+    for (let style of this.styles) {
+      if (isString(style)) {
+        add(result, style);
+      } else if (instanceOf(style, Theme)) {
+        result = result.concat(style.getStyles())
+      }
+    }
+    return result;
+  },
+  getClassList: function() {
+    let result = [];
+    for (let style of this.styles) {
+      if (instanceOf(style, Theme)) {
+        result = result.concat(style.getClassList())
+      }
+    }
+
+    if (this.name) {
+      add(result, this.name);
+    }
+
+    return result;
   }
 });
 
@@ -56,35 +100,30 @@ validate.define(Theme, contract({
   },
 }));
 
-// Support for standard object method override (to handle theme events).
+// Support theme events: apply and unapply the theme.
 
 onEnable.define(Theme, (theme, {window, oldTheme}) => {
-  theme.onEnable(window, oldTheme);
+  if (isFunction(theme.onEnable)) {
+    theme.onEnable(window, oldTheme);
+  }
 });
 
 onDisable.define(Theme, (theme, {window, newTheme}) => {
-  theme.onDisable(window, newTheme);
+  if (isFunction(theme.onDisable)) {
+    theme.onDisable(window, newTheme);
+  }
 });
 
 // Support for built-in themes
 
-const lightStyleUri = "chrome://browser/skin/devtools/light-theme.css";
-const darkStyleUri = "chrome://browser/skin/devtools/dark-theme.css";
-
-const LightTheme = Class({
-  extends: Theme,
-  setup: function() {
-    this.styles = Style({uri: [lightStyleUri].concat(this.styles.uri)});
-    this.classList.push("theme-light");
-  }
+const LightTheme = Theme({
+  name: "theme-light",
+  styles: "chrome://browser/skin/devtools/light-theme.css",
 });
 
-const DarkTheme = Class({
-  extends: Theme,
-  setup: function() {
-    this.styles.uri.unshift("chrome://browser/skin/devtools/dark-theme.css");
-    this.classList.push("theme-dark");
-  }
+const DarkTheme = Theme({
+  name: "theme-dark",
+  styles: "chrome://browser/skin/devtools/dark-theme.css",
 });
 
 exports.LightTheme = LightTheme;

lib/dev/toolbox.js

@@ -32,7 +32,6 @@ const registerSDKURI = () => {
 
 registerSDKURI();
 
-
 const Tool = Class({
   extends: Disposable,
   setup: function(params={}) {
@@ -64,18 +63,15 @@ const Tool = Class({
       });
     }, pairs(panels));
 
-    each(([key, Theme]) => {
-      const { label } = validate(Theme.prototype);
-      const { id } = Theme.prototype;
-
-      let theme = new Theme();
+    each(([key, theme]) => {
+      validate(theme);
       setup(theme);
 
       gDevTools.registerTheme({
-        id: id,
-        label: label,
-        stylesheets: theme.styles.uri,
-        classList: theme.classList,
+        id: theme.id,
+        label: theme.label,
+        stylesheets: theme.getStyles(),
+        classList: theme.getClassList(),
         onApply: (window, oldTheme) => {
           onEnable(theme, { window: window,
                             oldTheme: oldTheme });