Firebug theme breaks integrated DevTools themes #49 (part I.)

lib/chrome/chrome.js

@@ -17,6 +17,7 @@ const { TransportHooks } = require("../debug/transportHooks.js");
 const { Reps } = require("../reps/reps.js");
 const { Events } = require("../core/events.js");
 const { Theme } = require("./theme.js");
+const { customizeSearchBox } = require("./searchBox.js");
 
 /**
  * This object represents a wrapper for native developer tools {@Toolbox}.
@@ -38,7 +39,6 @@ const Chrome = Class(
     Trace.sysout("chrome.initialize;");
 
     this.tabMenus = new Map();
-
     this.toolbox = toolbox;
     this.watcher = new TargetWatcher(toolbox.target);
 
@@ -55,9 +55,11 @@ const Chrome = Class(
     let unapply = this.onUnapplyTheme.bind(this);
     Theme.addThemeListeners(apply, unapply);
 
-    // xxxHonza: should be done in theme listeners
-    Theme.customizePanelTabs(toolbox);
-    Theme.customizeSearch(toolbox);
+    // Execute theme callback for toolbox.xul since it's been already
+    // fired and we need to make sure the toolbox itself is also styled.
+    if (Theme.getCurrentTheme() == "firebug") {
+      this.onApplyTheme(this.toolbox.frame.contentWindow);
+    }
 
     // The 'select' event isn't fired when the first panel is selected
     // by default, so do it now.
@@ -129,34 +131,56 @@ const Chrome = Class(
     }
   },
 
-  // Theme listeners
+  // Theme API
+
   onApplyTheme: function(iframeWin, oldTheme) {
     if (iframeWin.location.href.indexOf("toolbox.xul") == -1)
       return;
 
-    /*let panels = this.toolbox.getToolPanels();
-    for (let id in panels)
-      TabMenu.initialize(toolbox, id);
-
-    let doc = toolbox.doc;
-    let tabs = doc.querySelectorAll(".devtools-tab");
-    for (let tab of tabs)
-      tab.removeAttribute("flex");
-
-    let doc = toolbox.doc;
-    let tabBar = doc.querySelector(".devtools-tabbar");
-    let searchBox = new SearchBox({
-      parentNode: tabBar,
-      reference: doc.querySelector("#toolbox-controls-separator")
-    });
-  */
+    Trace.sysout("chrome.onApplyTheme;");
 
+    this.customizePanelTabs(true);
+    customizeSearchBox(this.toolbox, true);
   },
 
   onUnapplyTheme: function(iframeWin, newTheme) {
     if (iframeWin.location.href.indexOf("toolbox.xul") == -1)
       return;
+
+    Trace.sysout("chrome.onUnapplyTheme;");
+
+    this.customizePanelTabs(false);
+    customizeSearchBox(this.toolbox, false);
   },
+
+  /**
+   * Apply/unapply 'firebug' theme on the panel tabs (toolbox)
+   *
+   * @param apply {Boolean} Set to true if the theme should be applied
+   * otherwise false.
+   */
+  customizePanelTabs: function(apply) {
+    let doc = this.toolbox.doc;
+    let tabs = doc.querySelectorAll(".devtools-tab");
+
+    if (apply) {
+      // Disable flexible tabs.
+      for (let tab of tabs) {
+        tab.removeAttribute("flex");
+      }
+    }
+    else {
+      // Put back the 'flex' attribute.
+      for (let tab of tabs) {
+        tab.setAttribute("flex", "1");
+      }
+
+      for (let menu of this.tabMenus.values())
+        menu.destroy();
+
+      this.tabMenus = new Map();
+    }
+  }
 });
 
 // Helper methods (private in this module, for now)

lib/chrome/searchBox.js

@@ -10,6 +10,9 @@ const { Xul } = require("../core/xul.js");
 // XUL Builder
 const { TEXTBOX, SPLITTER } = Xul;
 
+// The only instance of the SearchBox.
+let searchBox;
+
 /**
  * This object represents SearchBox located at the right side of
  * the main {@Toolbox} toolbar.
@@ -37,11 +40,44 @@ const SearchBox = Class(
       "resizeafter": "flex"
     });
 
-    // Build search box XUL structure
-    box = box.build(options.parentNode, {insertBefore: options.reference});
-    splitter.build(options.parentNode, {insertBefore: box});
+    // Build search box.
+    this.box = box.build(options.parentNode, {
+      insertBefore: options.reference
+    });
+
+    // Build toolbar splitter.
+    this.splitter = splitter.build(options.parentNode, {
+      insertBefore: this.box
+    });
   },
+
+  destroy: function() {
+    this.box.remove();
+    this.splitter.remove();
+  }
 });
 
+// Apply/unapply Search Box theme
+function customizeSearchBox(toolbox, apply) {
+  if (apply) {
+    if (searchBox)
+      return;
+
+    let doc = toolbox.doc;
+    let tabBar = doc.querySelector(".devtools-tabbar");
+
+    searchBox = new SearchBox({
+      parentNode: tabBar,
+      reference: doc.querySelector("#toolbox-controls-separator")
+    });
+  }
+  else {
+    if (searchBox) {
+      searchBox.destroy();
+      searchBox = null;
+    }
+  }
+}
+
 // Exports
-exports.SearchBox = SearchBox;
+exports.customizeSearchBox = customizeSearchBox;

lib/chrome/theme.js

@@ -9,7 +9,6 @@ const { Trace, TraceError } = require("../core/trace.js").get(module.id);
 const { Locale } = require("../core/locale.js");
 const { loadSheet } = require("sdk/stylesheet/utils");
 const { TabMenu } = require("./tabMenu.js");
-const { SearchBox } = require("./searchBox.js");
 const { emit, on } = require("sdk/event/core");
 const { Win } = require("../core/window.js");
 const { Xul } = require("../core/xul.js");
@@ -89,34 +88,16 @@ Theme.addThemeListeners = function(apply, unapply) {
   on(this, "onThemeUnapply", unapply);
 }
 
-// Customize Search Box theme
-// xxxHonza: belongs to the searchBox module
-Theme.customizeSearch = function(toolbox) {
-  let doc = toolbox.doc;
-  let tabBar = doc.querySelector(".devtools-tabbar");
-  let searchBox = new SearchBox({
-    parentNode: tabBar,
-    reference: doc.querySelector("#toolbox-controls-separator")
-  });
-}
-
-// xxxHonza: should be part of theme load/unload
-Theme.customizePanelTabs = function(toolbox) {
-  let panels = toolbox.getToolPanels();
-  for (let id in panels)
-    TabMenu.initialize(toolbox, id);
-
-  let doc = toolbox.doc;
-  let tabs = doc.querySelectorAll(".devtools-tab");
-  for (let tab of tabs)
-    tab.removeAttribute("flex");
+Theme.getCurrentTheme = function() {
+  return Services.prefs.getCharPref("devtools.theme");
 }
 
 Theme.customizeSideBarSplitter = function(iframeWin, apply) {
   if (apply) {
-    // Create a little box in the splitter, so we can theme it's top
-    // part between the main and side panel toolbars. Note that the
-    // splitter element is available when the document is loaded.
+    // Create a little box in the splitter, so we can theme its top
+    // part located between the main and side panel toolbars.
+    // Note that the splitter element is available as soon as
+    // the document is loaded.
     Win.loaded(iframeWin).then(doc => {
       var splitter = doc.querySelector(".devtools-side-splitter");
       splitter.setAttribute("valign", "top");

lib/console/consoleOverlay.js

@@ -117,6 +117,11 @@ const ConsoleOverlay = Class(
   onVariablesViewOpen: function(eventId, view, options) {
     Trace.sysout("consoleOverlay.onVariablesViewOpen; ", arguments);
 
+    let theme = Theme.getCurrentTheme();
+    if (theme != "firebug") {
+      return;
+    }
+
     // Render object structure at custom position in the UI (e.g. inside
     // the Console panel when console.dir() is used).
     let targetElement = options.targetElement;