1097156-devedition-theme-toggle.patch

From d0fb76fe4158fd2d0f6076b8a4506e0449474286 Mon Sep 17 00:00:00 2001
From: Jordan Santell <jsantell@gmail.com>
Date: Mon, 17 Nov 2014 17:35:01 -0800
Subject: Bug 1097156 - Add dev edition theme toggle in toolbox,
 r=gijs,bgrins

---
 .../components/customizableui/CustomizeMode.jsm    |  8 +--
 .../customizableui/content/customizeMode.inc.xul   |  4 +-
 browser/devtools/framework/options-panel.css       |  5 ++
 browser/devtools/framework/test/browser.ini        |  1 +
 .../test/browser_toolbox_options_devedition.js     | 59 ++++++++++++++++
 browser/devtools/framework/toolbox-options.js      | 81 ++++++++++++++++++++++
 browser/devtools/framework/toolbox-options.xul     | 17 +++--
 .../devtools/framework/toolbox-process-window.js   |  1 +
 browser/locales/en-US/chrome/browser/browser.dtd   |  2 +-
 .../en-US/chrome/browser/devtools/toolbox.dtd      | 10 ++-
 10 files changed, 173 insertions(+), 15 deletions(-)
 create mode 100644 browser/devtools/framework/test/browser_toolbox_options_devedition.js

diff --git a/browser/components/customizableui/CustomizeMode.jsm b/browser/components/customizableui/CustomizeMode.jsm
index 09fb355..65ea816 100644
--- a/browser/components/customizableui/CustomizeMode.jsm
+++ b/browser/components/customizableui/CustomizeMode.jsm
@@ -1540,29 +1540,29 @@ CustomizeMode.prototype = {
 
     let buttonVisible = Services.prefs.getBoolPref(kDeveditionButtonPref);
     if (buttonVisible) {
       button.removeAttribute("hidden");
     } else {
       button.setAttribute("hidden", "true");
     }
   },
-  toggleDevEditionTheme: function() {
+
+  toggleDevEditionTheme: function(shouldEnable) {
     const DEFAULT_THEME_ID = "{972ce4c6-7e08-4474-a285-3208198ce6fd}";
-    let button = this.document.getElementById("customization-devedition-theme-button");
-    let shouldEnable = button.hasAttribute("checked");
 
     Services.prefs.setBoolPref(kDeveditionThemePref, shouldEnable);
+
     let currentLWT = LightweightThemeManager.currentTheme;
     if (currentLWT && shouldEnable) {
       this._lastLightweightTheme = currentLWT;
       AddonManager.getAddonByID(DEFAULT_THEME_ID, function(aDefaultTheme) {
         // Theoretically, this could race if people are /very/ quick in switching
         // something else here, so doublecheck:
-        if (button.hasAttribute("checked")) {
+        if (Services.prefs.getBoolPref(kDeveditionThemePref)) {
           aDefaultTheme.userDisabled = false;
         }
       });
     } else if (!currentLWT && !shouldEnable && this._lastLightweightTheme) {
       LightweightThemeManager.currentTheme = this._lastLightweightTheme;
     }
   },
 
diff --git a/browser/components/customizableui/content/customizeMode.inc.xul b/browser/components/customizableui/content/customizeMode.inc.xul
index 28033e8..aa3f8ea 100644
--- a/browser/components/customizableui/content/customizeMode.inc.xul
+++ b/browser/components/customizableui/content/customizeMode.inc.xul
@@ -51,18 +51,18 @@
                            oncommand="gCustomizeMode.getMoreThemes(event);"/>
           </hbox>
         </panel>
       </button>
 
       <button id="customization-devedition-theme-button"
               class="customizationmode-button"
               hidden="true"
-              label="&customizeMode.deveditionTheme.label;"
-              oncommand="gCustomizeMode.toggleDevEditionTheme()"
+              label="&customizeMode.deveditionTheme.label2;"
+              oncommand="gCustomizeMode.toggleDevEditionTheme(this.hasAttribute('checked'))"
               type="checkbox" />
 
       <spacer id="customization-footer-spacer"/>
       <button id="customization-undo-reset-button"
               class="customizationmode-button"
               hidden="true"
               oncommand="gCustomizeMode.undoReset();"
               label="&undoCmd.label;"/>
diff --git a/browser/devtools/framework/options-panel.css b/browser/devtools/framework/options-panel.css
index 98e1dee..df8d128 100644
--- a/browser/devtools/framework/options-panel.css
+++ b/browser/devtools/framework/options-panel.css
@@ -21,16 +21,21 @@
 
 .options-vertical-pane {
   margin: 5px;
   width: calc(100%/3 - 30px);
   min-width: 320px;
   -moz-padding-start: 5px;
 }
 
+#devtools-theme-box {
+  margin-left: 0px;
+  padding-left: 0px;
+}
+
 /* Snap to 50% width once there is not room for 3 columns anymore.
    This prevents having 2 columns showing in a row, but taking up
    only ~66% of the available space. */
 @media (max-width: 1000px) {
   .options-vertical-pane {
     width: calc(100%/2 - 30px);
   }
 }
diff --git a/browser/devtools/framework/test/browser.ini b/browser/devtools/framework/test/browser.ini
index b3ddd6e..1a77ab5 100644
--- a/browser/devtools/framework/test/browser.ini
+++ b/browser/devtools/framework/test/browser.ini
@@ -17,16 +17,17 @@ skip-if = e10s # Bug 1070837 - devtools/framework/toolbox.js |doc| getter not e1
 [browser_target_events.js]
 [browser_target_remote.js]
 [browser_target_support.js]
 [browser_two_tabs.js]
 [browser_toolbox_dynamic_registration.js]
 [browser_toolbox_highlight.js]
 [browser_toolbox_hosts.js]
 [browser_toolbox_options.js]
+[browser_toolbox_options_devedition.js]
 [browser_toolbox_options_disable_buttons.js]
 [browser_toolbox_options_disable_cache.js]
 skip-if = e10s # Bug 1030318
 [browser_toolbox_options_disable_js.js]
 skip-if = e10s # Bug 1070837 - devtools/framework/toolbox.js |doc| getter not e10s friendly
 # [browser_toolbox_raise.js] # Bug 962258
 # skip-if = os == "win"
 [browser_toolbox_ready.js]
diff --git a/browser/devtools/framework/test/browser_toolbox_options_devedition.js b/browser/devtools/framework/test/browser_toolbox_options_devedition.js
new file mode 100644
index 0000000..a8b9868
--- /dev/null
+++ b/browser/devtools/framework/test/browser_toolbox_options_devedition.js
@@ -0,0 +1,59 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Tests that changing preferences in the options panel updates the prefs
+// and toggles appropriate things in the toolbox.
+
+let doc = null, toolbox = null, panelWin = null;
+
+const PREF_ENABLED = "browser.devedition.theme.enabled";
+const PREF_SHOW = "browser.devedition.theme.showCustomizeButton";
+
+const URL = "data:text/html;charset=utf8,test for toggling dev edition browser theme toggling";
+
+let test = asyncTest(function*() {
+  // Set preference to false by default so this could
+  // run in Developer Edition which has it on by default.
+  Services.prefs.setBoolPref(PREF_ENABLED, false);
+  Services.prefs.setBoolPref(PREF_SHOW, true);
+
+  let tab = yield addTab(URL);
+  let target = TargetFactory.forTab(tab);
+  toolbox = yield gDevTools.showToolbox(target);
+  let tool = yield toolbox.selectTool("options");
+  panelWin = tool.panelWin;
+
+  let checkbox = tool.panelDoc.getElementById("devtools-browser-theme");
+
+  ise(Services.prefs.getBoolPref(PREF_ENABLED), false, "Dev Theme pref off on start");
+
+  let themeStatus = yield clickAndWaitForThemeChange(checkbox, panelWin);
+  ise(themeStatus, true, "Theme has been toggled on.");
+
+  themeStatus = yield clickAndWaitForThemeChange(checkbox, panelWin);
+  ise(themeStatus, false, "Theme has been toggled off.");
+
+  yield cleanup();
+});
+
+function clickAndWaitForThemeChange (el, win) {
+  let deferred = promise.defer();
+  gDevTools.on("pref-changed", function handler (event, {pref}) {
+    if (pref === PREF_ENABLED) {
+      gDevTools.off("pref-changed", handler);
+      deferred.resolve(Services.prefs.getBoolPref(PREF_ENABLED));
+    }
+  });
+
+  EventUtils.synthesizeMouseAtCenter(el, {}, win);
+
+  return deferred.promise;
+}
+
+function* cleanup() {
+  yield toolbox.destroy();
+  gBrowser.removeCurrentTab();
+  Services.prefs.clearUserPref(PREF_ENABLED);
+  Services.prefs.clearUserPref(PREF_SHOW);
+  toolbox = doc = panelWin = null;
+}
diff --git a/browser/devtools/framework/toolbox-options.js b/browser/devtools/framework/toolbox-options.js
index afaeb52..800cd38 100644
--- a/browser/devtools/framework/toolbox-options.js
+++ b/browser/devtools/framework/toolbox-options.js
@@ -4,16 +4,19 @@
 
 "use strict";
 
 const {Cu, Cc, Ci} = require("chrome");
 const Services = require("Services");
 const promise = require("promise");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 XPCOMUtils.defineLazyModuleGetter(this, "gDevTools", "resource:///modules/devtools/gDevTools.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "CustomizeMode", "resource:///modules/CustomizeMode.jsm");
+const kDeveditionChangedNotification = "devedition-theme-state-changed";
+const DEVEDITION_THEME_PREF = "browser.devedition.theme.enabled";
 
 exports.OptionsPanel = OptionsPanel;
 
 XPCOMUtils.defineLazyGetter(this, "l10n", function() {
   let bundle = Services.strings.createBundle("chrome://browser/locale/devtools/toolbox.properties");
   let l10n = function(aName, ...aArgs) {
     try {
       if (aArgs.length == 0) {
@@ -66,25 +69,27 @@ function InfallibleGetBoolPref(key) {
 
 
 /**
  * Represents the Options Panel in the Toolbox.
  */
 function OptionsPanel(iframeWindow, toolbox) {
   this.panelDoc = iframeWindow.document;
   this.panelWin = iframeWindow;
+
   this.toolbox = toolbox;
   this.isReady = false;
 
   this._prefChanged = this._prefChanged.bind(this);
   this._themeRegistered = this._themeRegistered.bind(this);
   this._themeUnregistered = this._themeUnregistered.bind(this);
 
   this._addListeners();
 
+  Services.obs.addObserver(this, kDeveditionChangedNotification, false);
   const EventEmitter = require("devtools/toolkit/event-emitter");
   EventEmitter.decorate(this);
 }
 
 OptionsPanel.prototype = {
 
   get target() {
     return this.toolbox.target;
@@ -99,16 +104,17 @@ OptionsPanel.prototype = {
     } else {
       targetPromise = promise.resolve(this.target);
     }
 
     return targetPromise.then(() => {
       this.setupToolsList();
       this.setupToolbarButtonsList();
       this.setupThemeList();
+      this.setupBrowserThemeButton();
       this.populatePreferences();
       this.updateDefaultTheme();
 
       this._disableJSClicked = this._disableJSClicked.bind(this);
 
       let disableJSNode = this.panelDoc.getElementById("devtools-disable-javascript");
       disableJSNode.addEventListener("click", this._disableJSClicked, false);
     }).then(() => {
@@ -137,16 +143,18 @@ OptionsPanel.prototype = {
     if (data.pref === "devtools.cache.disabled") {
       let cacheDisabled = data.newValue;
       let cbx = this.panelDoc.getElementById("devtools-disable-cache");
 
       cbx.checked = cacheDisabled;
     }
     else if (data.pref === "devtools.theme") {
       this.updateCurrentTheme();
+    } else if (data.pref === "browser.devedition.theme.enabled") {
+      this.updateBrowserTheme();
     }
   },
 
   _themeRegistered: function(event, themeId) {
     this.setupThemeList();
   },
 
   _themeUnregistered: function(event, theme) {
@@ -272,16 +280,68 @@ OptionsPanel.prototype = {
     let themes = gDevTools.getThemeDefinitionArray();
     for (let theme of themes) {
       themeBox.appendChild(createThemeOption(theme));
     }
 
     this.updateCurrentTheme();
   },
 
+  /**
+   * Similar to `populatePrefs`, except we want more
+   * special rules for the browser theme button.
+   */
+  setupBrowserThemeButton: function() {
+    let checkbox = this.panelDoc.getElementById("devtools-browser-theme");
+
+    checkbox.addEventListener("command", function() {
+      let data = {
+        pref: DEVEDITION_THEME_PREF,
+        newValue: this.checked
+      };
+      data.oldValue = GetPref(data.pref);
+      SetPref(data.pref, data.newValue);
+      gDevTools.emit("pref-changed", data);
+    }.bind(checkbox));
+
+    this.updateBrowserThemeButton();
+  },
+
+  /**
+   * Called on theme changed via observer of "devedition-theme-state-changed".
+   */
+  updateBrowserThemeButton: function() {
+    let checkbox = this.panelDoc.getElementById("devtools-browser-theme");
+
+    // Check if the dev edition style sheet is applied -- will not
+    // be applied when dev edition theme is disabled, or when there's
+    // a LWT applied.
+    if (this._isDevEditionThemeOn()) {
+      checkbox.setAttribute("checked", "true");
+    } else {
+      checkbox.removeAttribute("checked");
+    }
+
+    // Should the button be shown
+    if (GetPref("browser.devedition.theme.showCustomizeButton")) {
+      checkbox.removeAttribute("hidden");
+    } else {
+      checkbox.setAttribute("hidden", "true");
+    }
+  },
+
+  /**
+   * Called when clicking the browser theme button to enable/disable
+   * the dev edition browser theme.
+   */
+  updateBrowserTheme: function() {
+    let enabled = GetPref("browser.devedition.theme.enabled");
+    CustomizeMode.prototype.toggleDevEditionTheme.call(this, enabled);
+  },
+
   populatePreferences: function() {
     let prefCheckboxes = this.panelDoc.querySelectorAll("checkbox[data-pref]");
     for (let checkbox of prefCheckboxes) {
       checkbox.checked = GetPref(checkbox.getAttribute("data-pref"));
       checkbox.addEventListener("command", function() {
         let data = {
           pref: this.getAttribute("data-pref"),
           newValue: this.checked
@@ -383,16 +443,35 @@ OptionsPanel.prototype = {
 
     let options = {
       "javascriptEnabled": !checked
     };
 
     this.target.activeTab.reconfigure(options);
   },
 
+  /**
+   * Returns a boolean indicating whether or not the dev edition
+   * browser theme is applied.
+   */
+  _isDevEditionThemeOn: function() {
+    let win = Services.wm.getMostRecentWindow("navigator:browser");
+    return !!(win && win.DevEdition.styleSheet);
+  },
+
+  /**
+   * Called on observer notification for "devedition-theme-state-changed"
+   * to possibly change the state of the dev edition button
+   */
+  observe: function(aSubject, aTopic, aData) {
+    if (aTopic === kDeveditionChangedNotification) {
+      this.updateBrowserThemeButton();
+    }
+  },
+
   destroy: function() {
     if (this.destroyPromise) {
       return this.destroyPromise;
     }
 
     let deferred = promise.defer();
 
     this.destroyPromise = deferred.promise;
@@ -409,11 +488,13 @@ OptionsPanel.prototype = {
     let options = {
       "javascriptEnabled": this._origJavascriptEnabled
     };
     this.target.activeTab.reconfigure(options, () => {
       this.toolbox = null;
       deferred.resolve();
     }, true);
 
+    Services.obs.removeObserver(this, kDeveditionChangedNotification);
+
     return deferred.promise;
   }
 };
diff --git a/browser/devtools/framework/toolbox-options.xul b/browser/devtools/framework/toolbox-options.xul
index 950205e..665a575 100644
--- a/browser/devtools/framework/toolbox-options.xul
+++ b/browser/devtools/framework/toolbox-options.xul
@@ -23,22 +23,27 @@
         <label>&options.selectEnabledToolboxButtons.label;</label>
         <vbox id="enabled-toolbox-buttons-box" class="options-groupbox"/>
         <label id="tools-not-supported-label"
                class="options-citation-label theme-comment"
         >&options.toolNotSupported.label;</label>
 
       </vbox>
       <vbox class="options-vertical-pane" flex="1">
-        <label>&options.selectDevToolsTheme.label;</label>
-        <radiogroup id="devtools-theme-box"
-                    class="options-groupbox"
-                    data-pref="devtools.theme"
-                    orient="horizontal">
-        </radiogroup>
+        <label>&options.selectDevToolsTheme.label2;</label>
+        <vbox id="theme-options" class="options-groupbox">
+          <radiogroup id="devtools-theme-box"
+                      class="options-groupbox"
+                      data-pref="devtools.theme"
+                      orient="horizontal">
+          </radiogroup>
+          <checkbox id="devtools-browser-theme"
+                    label="&options.usedeveditiontheme.label;"
+                    tooltiptext="&options.usedeveditiontheme.tooltip;"/>
+        </vbox>
         <label>&options.commonPrefs.label;</label>
         <vbox id="commonprefs-options" class="options-groupbox">
           <checkbox label="&options.enablePersistentLogs.label;"
                     tooltiptext="&options.enablePersistentLogs.tooltip;"
                     data-pref="devtools.webconsole.persistlog"/>
         </vbox>
         <label>&options.context.inspector;</label>
         <vbox id="inspector-options" class="options-groupbox">
diff --git a/browser/devtools/framework/toolbox-process-window.js b/browser/devtools/framework/toolbox-process-window.js
index 10f9628..5a28dc0 100644
--- a/browser/devtools/framework/toolbox-process-window.js
+++ b/browser/devtools/framework/toolbox-process-window.js
@@ -48,16 +48,17 @@ function connect() {
     }
   });
 }
 
 // Certain options should be toggled since we can assume chrome debugging here
 function setPrefDefaults() {
   Services.prefs.setBoolPref("devtools.inspector.showUserAgentStyles", true);
   Services.prefs.setBoolPref("devtools.profiler.ui.show-platform-data", true);
+  Services.prefs.setBoolPref("browser.devedition.theme.showCustomizeButton", false);
 }
 
 window.addEventListener("load", function() {
   let cmdClose = document.getElementById("toolbox-cmd-close");
   cmdClose.addEventListener("command", onCloseCommand);
   setPrefDefaults();
   connect();
 });
diff --git a/browser/locales/en-US/chrome/browser/browser.dtd b/browser/locales/en-US/chrome/browser/browser.dtd
index ea33bbb..c1ee2ec 100644
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@@ -719,17 +719,17 @@ just addresses the organization to follow, e.g. "This site is run by " -->
 <!ENTITY customizeMode.titlebar "Title Bar">
 <!ENTITY customizeMode.lwthemes "Themes">
 <!ENTITY customizeMode.lwthemes.myThemes "My Themes">
 <!ENTITY customizeMode.lwthemes.recommended "Recommended">
 <!ENTITY customizeMode.lwthemes.menuManage "Manage">
 <!ENTITY customizeMode.lwthemes.menuManage.accessKey "M">
 <!ENTITY customizeMode.lwthemes.menuGetMore "Get More Themes">
 <!ENTITY customizeMode.lwthemes.menuGetMore.accessKey "G">
-<!ENTITY customizeMode.deveditionTheme.label "Use &brandShortName; Theme">
+<!ENTITY customizeMode.deveditionTheme.label2 "Use Developer Edition Theme">
 
 <!ENTITY social.chatBar.commandkey "c">
 <!ENTITY social.chatBar.label "Focus chats">
 <!ENTITY social.chatBar.accesskey "c">
 
 <!ENTITY social.markpageMenu.accesskey "P">
 <!ENTITY social.markpageMenu.label "Save Page To…">
 <!ENTITY social.marklinkMenu.accesskey "L">
diff --git a/browser/locales/en-US/chrome/browser/devtools/toolbox.dtd b/browser/locales/en-US/chrome/browser/devtools/toolbox.dtd
index 7abd9d3..445f80e 100644
--- a/browser/locales/en-US/chrome/browser/devtools/toolbox.dtd
+++ b/browser/locales/en-US/chrome/browser/devtools/toolbox.dtd
@@ -109,20 +109,25 @@
   -  tool buttons. -->
 <!ENTITY options.selectEnabledToolboxButtons.label     "Available Toolbox Buttons">
 
 <!-- LOCALIZATION NOTE (options.toolNotSupported.label): This is the label for
   -  the explanation of the * marker on a tool which is currently not supported
   -  for the target of the toolbox. -->
 <!ENTITY options.toolNotSupported.label  "* Not supported for current toolbox target">
 
-<!-- LOCALIZATION NOTE (options.selectDevToolsTheme.label): This is the label for
+<!-- LOCALIZATION NOTE (options.selectDevToolsTheme.label2): This is the label for
   -  the heading of the radiobox corresponding to the theme of the developer
   -  tools. -->
-<!ENTITY options.selectDevToolsTheme.label   "Choose DevTools theme:">
+<!ENTITY options.selectDevToolsTheme.label2   "Themes">
+
+<!-- LOCALIZATION NOTE (options.usedeveditiontheme.*) Options under the
+  -  toolbox for enabling and disabling the Developer Edition browser theme. -->
+<!ENTITY options.usedeveditiontheme.label   "Use Developer Edition browser theme">
+<!ENTITY options.usedeveditiontheme.tooltip "Toggles the Developer Edition browser theme.">
 
 <!-- LOCALIZATION NOTE (options.webconsole.label): This is the label for the
   -  heading of the group of Web Console preferences in the options panel. -->
 <!ENTITY options.webconsole.label            "Web Console">
 
 <!-- LOCALIZATION NOTE (options.timestampMessages.label): This is the
    - label for the checkbox that toggles timestamps in the Web Console -->
 <!ENTITY options.timestampMessages.label      "Enable timestamps">
@@ -178,8 +183,9 @@ Gecko platform symbols">
 <!ENTITY options.sourceeditor.autoclosebrackets.tooltip "Automatically insert closing brackets">
 <!ENTITY options.sourceeditor.expandtab.label           "Indent using spaces">
 <!ENTITY options.sourceeditor.expandtab.tooltip         "Use spaces instead of the tab character">
 <!ENTITY options.sourceeditor.tabsize.label             "Tab size">
 <!ENTITY options.sourceeditor.tabsize.accesskey         "T">
 <!ENTITY options.sourceeditor.keybinding.label          "Keybindings">
 <!ENTITY options.sourceeditor.keybinding.accesskey      "K">
 <!ENTITY options.sourceeditor.keybinding.default.label  "Default">
+
-- 
1.8.4.2