Bug 1314091 - Sync the applied devtools toolbox theme and compact themes;r=ochameau

MozReview-Commit-ID: 38OLFmF3ALk

devtools/client/framework/devtools-browser.js

@@ -29,6 +29,7 @@ loader.lazyRequireGetter(this, "findCssSelector", "devtools/shared/inspector/css
 
 loader.lazyImporter(this, "CustomizableUI", "resource:///modules/CustomizableUI.jsm");
 loader.lazyImporter(this, "AppConstants", "resource://gre/modules/AppConstants.jsm");
+loader.lazyImporter(this, "LightweightThemeManager", "resource://gre/modules/LightweightThemeManager.jsm");
 
 const {LocalizationHelper} = require("devtools/shared/l10n");
 const L10N = new LocalizationHelper("devtools/client/locales/toolbox.properties");
@@ -38,6 +39,9 @@ const TABS_OPEN_AVG_HISTOGRAM = "DEVTOOLS_TABS_OPEN_AVERAGE_LINEAR";
 const TABS_PINNED_PEAK_HISTOGRAM = "DEVTOOLS_TABS_PINNED_PEAK_LINEAR";
 const TABS_PINNED_AVG_HISTOGRAM = "DEVTOOLS_TABS_PINNED_AVERAGE_LINEAR";
 
+const COMPACT_LIGHT_ID = "firefox-compact-light@mozilla.org";
+const COMPACT_DARK_ID = "firefox-compact-dark@mozilla.org";
+
 /**
  * gDevToolsBrowser exposes functions to connect the gDevTools instance with a
  * Firefox instance.
@@ -143,6 +147,22 @@ var gDevToolsBrowser = exports.gDevToolsBrowser = {
     }
 
     win.document.documentElement.setAttribute("devtoolstheme", devtoolsTheme);
+
+    // If the toolbox color changes and we have the opposite compact theme applied,
+    // change it to match.  For example:
+    // 1) toolbox changes to dark, and the light compact theme was applied.
+    //    Switch to the dark compact theme.
+    // 2) toolbox changes to light or firebug, and the dark compact theme was applied.
+    //    Switch to the light compact theme.
+    // 3) No compact theme was applied. Do nothing.
+    let currentTheme = LightweightThemeManager.currentTheme;
+    let currentThemeID = currentTheme && currentTheme.id;
+    if (currentThemeID == COMPACT_LIGHT_ID && devtoolsTheme == "dark") {
+      LightweightThemeManager.currentTheme = LightweightThemeManager.getUsedTheme(COMPACT_DARK_ID);
+    }
+    if (currentThemeID == COMPACT_DARK_ID && devtoolsTheme == "light") {
+      LightweightThemeManager.currentTheme = LightweightThemeManager.getUsedTheme(COMPACT_LIGHT_ID);
+    }
   },
 
   observe: function (subject, topic, prefName) {
@@ -172,6 +192,20 @@ var gDevToolsBrowser = exports.gDevToolsBrowser = {
           gDevToolsBrowser.destroy({ shuttingDown: false });
         }
         break;
+      case "lightweight-theme-changed":
+        let currentTheme = LightweightThemeManager.currentTheme;
+        let currentThemeID = currentTheme && currentTheme.id;
+        let devtoolsTheme = Services.prefs.getCharPref("devtools.theme");
+
+        // If the current lightweight theme changes to one of the compact themes, then
+        // keep the devtools color in sync.
+        if (currentThemeID == COMPACT_LIGHT_ID && devtoolsTheme == "dark") {
+          Services.prefs.setCharPref("devtools.theme", "light");
+        }
+        if (currentThemeID == COMPACT_DARK_ID && devtoolsTheme == "light") {
+            Services.prefs.setCharPref("devtools.theme", "dark");
+        }
+        break;
     }
   },
 
@@ -771,6 +805,7 @@ var gDevToolsBrowser = exports.gDevToolsBrowser = {
    */
   destroy: function ({ shuttingDown }) {
     Services.prefs.removeObserver("devtools.", gDevToolsBrowser);
+    Services.obs.removeObserver(gDevToolsBrowser, "lightweight-theme-changed", false);
     Services.obs.removeObserver(gDevToolsBrowser, "browser-delayed-startup-finished");
     Services.obs.removeObserver(gDevToolsBrowser, "quit-application");
     Services.obs.removeObserver(gDevToolsBrowser, "sdk:loader:destroy");
@@ -810,6 +845,7 @@ Services.obs.addObserver(gDevToolsBrowser, "quit-application", false);
 Services.obs.addObserver(gDevToolsBrowser, "browser-delayed-startup-finished", false);
 // Watch for module loader unload. Fires when the tools are reloaded.
 Services.obs.addObserver(gDevToolsBrowser, "sdk:loader:destroy", false);
+Services.obs.addObserver(gDevToolsBrowser, "lightweight-theme-changed", false);
 
 // Fake end of browser window load event for all already opened windows
 // that is already fully loaded.

devtools/client/framework/test/browser.ini

@@ -75,6 +75,7 @@ skip-if = e10s # Bug 1069044 - destroyInspector may hang during shutdown
 [browser_toolbox_target.js]
 [browser_toolbox_tabsswitch_shortcuts.js]
 [browser_toolbox_textbox_context_menu.js]
+[browser_toolbox_theme.js]
 [browser_toolbox_theme_registration.js]
 [browser_toolbox_toggle.js]
 [browser_toolbox_tool_ready.js]

devtools/client/framework/test/browser_toolbox_theme.js

@@ -0,0 +1,76 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const COMPACT_LIGHT_ID = "firefox-compact-light@mozilla.org";
+const COMPACT_DARK_ID = "firefox-compact-dark@mozilla.org";
+const PREF_DEVTOOLS_THEME = "devtools.theme";
+const {LightweightThemeManager} = Components.utils.import("resource://gre/modules/LightweightThemeManager.jsm", {});
+
+registerCleanupFunction(() => {
+  // Set preferences back to their original values
+  Services.prefs.clearUserPref(PREF_DEVTOOLS_THEME);
+  LightweightThemeManager.currentTheme = null;
+});
+
+add_task(function* testDevtoolsTheme() {
+  info("Checking stylesheet and :root attributes based on devtools theme.");
+  Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "light");
+  is(document.documentElement.getAttribute("devtoolstheme"), "light",
+    "The documentElement has an attribute based on devtools theme.");
+
+  Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "dark");
+  is(document.documentElement.getAttribute("devtoolstheme"), "dark",
+    "The documentElement has an attribute based on devtools theme.");
+
+  Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "firebug");
+  is(document.documentElement.getAttribute("devtoolstheme"), "light",
+    "The documentElement has 'light' as a default for the devtoolstheme attribute");
+});
+
+add_task(function* testDevtoolsAndCompactThemeSyncing() {
+  if (!AppConstants.INSTALL_COMPACT_THEMES) {
+    ok(true, "No need to run this test since themes aren't installed");
+    return;
+  }
+
+  info("Devtools theme light -> dark when dark compact applied");
+  Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "light");
+  LightweightThemeManager.currentTheme = LightweightThemeManager.getUsedTheme(COMPACT_DARK_ID);
+  is(Services.prefs.getCharPref(PREF_DEVTOOLS_THEME), "dark");
+
+  info("Devtools theme dark -> light when light compact applied");
+  Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "dark");
+  LightweightThemeManager.currentTheme = LightweightThemeManager.getUsedTheme(COMPACT_LIGHT_ID);
+  is(Services.prefs.getCharPref(PREF_DEVTOOLS_THEME), "light");
+
+  info("Devtools theme shouldn't change if it wasn't light or dark during lwt change");
+  Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "firebug");
+  LightweightThemeManager.currentTheme = LightweightThemeManager.getUsedTheme(COMPACT_DARK_ID);
+  is(Services.prefs.getCharPref(PREF_DEVTOOLS_THEME), "firebug");
+
+  info("Compact theme dark -> light when devtools changes dark -> light");
+  LightweightThemeManager.currentTheme = LightweightThemeManager.getUsedTheme(COMPACT_DARK_ID);
+  Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "dark");
+  Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "light");
+  is(LightweightThemeManager.currentTheme, LightweightThemeManager.getUsedTheme(COMPACT_LIGHT_ID));
+
+  info("Compact theme dark -> light when devtools changes dark -> firebug");
+  LightweightThemeManager.currentTheme = LightweightThemeManager.getUsedTheme(COMPACT_DARK_ID);
+  Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "dark");
+  Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "firebug");
+  is(LightweightThemeManager.currentTheme, LightweightThemeManager.getUsedTheme(COMPACT_LIGHT_ID));
+
+  info("Compact theme light -> dark when devtools changes light -> dark");
+  LightweightThemeManager.currentTheme = LightweightThemeManager.getUsedTheme(COMPACT_LIGHT_ID);
+  Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "light");
+  Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "dark");
+  is(LightweightThemeManager.currentTheme, LightweightThemeManager.getUsedTheme(COMPACT_DARK_ID));
+
+  info("Compact theme shouldn't change if it wasn't set during devtools change");
+  LightweightThemeManager.currentTheme = null;
+  Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "light");
+  Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "dark");
+  is(LightweightThemeManager.currentTheme, null);
+});