Bug 1436100 - Let the apps use their own ThemeVariableMap.jsm constan…

…t. r=gijs

browser/modules/ThemeVariableMap.jsm

@@ -0,0 +1,26 @@
+/* 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/. */
+
+var EXPORTED_SYMBOLS = ["ThemeVariableMap"];
+
+const ThemeVariableMap = [
+  ["--lwt-accent-color-inactive", "accentcolorInactive"],
+  ["--lwt-background-alignment", "backgroundsAlignment"],
+  ["--lwt-background-tiling", "backgroundsTiling"],
+  ["--tab-loading-fill", "tab_loading", "tabbrowser-tabs"],
+  ["--lwt-tab-text", "tab_text"],
+  ["--toolbar-bgcolor", "toolbarColor"],
+  ["--toolbar-color", "toolbar_text"],
+  ["--url-and-searchbar-background-color", "toolbar_field"],
+  ["--url-and-searchbar-color", "toolbar_field_text"],
+  ["--lwt-toolbar-field-border-color", "toolbar_field_border"],
+  ["--urlbar-separator-color", "toolbar_field_separator"],
+  ["--tabs-border-color", "toolbar_top_separator", "navigator-toolbox"],
+  ["--lwt-toolbar-vertical-separator", "toolbar_vertical_separator"],
+  ["--toolbox-border-bottom-color", "toolbar_bottom_separator"],
+  ["--lwt-toolbarbutton-icon-fill", "icon_color"],
+  ["--lwt-toolbarbutton-icon-fill-attention", "icon_attention_color"],
+  ["--lwt-toolbarbutton-hover-background", "button_background_hover"],
+  ["--lwt-toolbarbutton-active-background", "button_background_active"],
+];

browser/modules/moz.build

@@ -88,6 +88,9 @@ with Files("Sanitizer.jsm"):
 with Files("SitePermissions.jsm"):
     BUG_COMPONENT = ("Firefox", "Site Identity and Permission Panels")
 
+with Files("ThemeVariableMap.jsm"):
+    BUG_COMPONENT = ("Toolkit", "WebExtensions: Themes")
+
 with Files("TransientPrefs.jsm"):
     BUG_COMPONENT = ("Firefox", "Preferences")
 
@@ -152,6 +155,7 @@ EXTRA_JS_MODULES += [
     'Sanitizer.jsm',
     'SchedulePressure.jsm',
     'SitePermissions.jsm',
+    'ThemeVariableMap.jsm',
     'TransientPrefs.jsm',
     'UpdateTopLevelContentWindowIDHelper.jsm',
     'webrtcUI.jsm',

toolkit/modules/LightweightThemeConsumer.jsm

@@ -8,30 +8,13 @@ ChromeUtils.import("resource://gre/modules/XPCOMUtils.jsm");
 ChromeUtils.import("resource://gre/modules/Services.jsm");
 ChromeUtils.import("resource://gre/modules/AppConstants.jsm");
 
+// Get the theme variables from the app resource directory.
+// This allows per-app variables.
+ChromeUtils.import("resource:///modules/ThemeVariableMap.jsm");
+
 ChromeUtils.defineModuleGetter(this, "LightweightThemeImageOptimizer",
   "resource://gre/modules/addons/LightweightThemeImageOptimizer.jsm");
 
-const kCSSVarsMap = [
-  ["--lwt-accent-color-inactive", "accentcolorInactive"],
-  ["--lwt-background-alignment", "backgroundsAlignment"],
-  ["--lwt-background-tiling", "backgroundsTiling"],
-  ["--tab-loading-fill", "tab_loading", "tabbrowser-tabs"],
-  ["--lwt-tab-text", "tab_text"],
-  ["--toolbar-bgcolor", "toolbarColor"],
-  ["--toolbar-color", "toolbar_text"],
-  ["--url-and-searchbar-background-color", "toolbar_field"],
-  ["--url-and-searchbar-color", "toolbar_field_text"],
-  ["--lwt-toolbar-field-border-color", "toolbar_field_border"],
-  ["--urlbar-separator-color", "toolbar_field_separator"],
-  ["--tabs-border-color", "toolbar_top_separator", "navigator-toolbox"],
-  ["--lwt-toolbar-vertical-separator", "toolbar_vertical_separator"],
-  ["--toolbox-border-bottom-color", "toolbar_bottom_separator"],
-  ["--lwt-toolbarbutton-icon-fill", "icon_color"],
-  ["--lwt-toolbarbutton-icon-fill-attention", "icon_attention_color"],
-  ["--lwt-toolbarbutton-hover-background", "button_background_hover"],
-  ["--lwt-toolbarbutton-active-background", "button_background_active"],
-];
-
 this.LightweightThemeConsumer =
  function LightweightThemeConsumer(aDocument) {
   this._doc = aDocument;
@@ -205,7 +188,7 @@ function _setProperty(elem, active, variableName, value) {
 }
 
 function _setProperties(root, active, vars) {
-  for (let [cssVarName, varsKey, optionalElementID] of kCSSVarsMap) {
+  for (let [cssVarName, varsKey, optionalElementID] of ThemeVariableMap) {
     let elem = optionalElementID ? root.ownerDocument.getElementById(optionalElementID)
                                  : root;
     _setProperty(elem, active, cssVarName, vars[varsKey]);