Bug 866138 - Refactor disabling logic for a tool and convert options panel to a tool too, r=jwalker

browser/app/profile/firefox.js

@@ -1032,7 +1032,6 @@ pref("devtools.toolbox.host", "bottom");
 pref("devtools.toolbox.selectedTool", "webconsole");
 pref("devtools.toolbox.toolbarSpec", '["paintflashing toggle","tilt toggle","scratchpad","resize toggle"]');
 pref("devtools.toolbox.sideEnabled", true);
-pref("devtools.toolbox.disabledTools", "[]");
 
 // Enable the Inspector
 pref("devtools.inspector.enabled", true);

browser/devtools/framework/gDevTools.jsm

@@ -222,8 +222,8 @@ DevTools.prototype = {
    *
    * Each toolDefinition has the following properties:
    * - id: Unique identifier for this tool (string|required)
-   * - killswitch: Property name to allow us to turn this tool on/off globally
-   *               (string|required) (TODO: default to devtools.{id}.enabled?)
+   * - visibilityswitch: Property name to allow us to hide this tool from the
+   *                     DevTools Toolbox.
    * - icon: URL pointing to a graphic which will be used as the src for an
    *         16x16 img tag (string|required)
    * - url: URL pointing to a XUL/XHTML document containing the user interface
@@ -241,7 +241,7 @@ DevTools.prototype = {
       throw new Error("Invalid definition.id");
     }
 
-    toolDefinition.killswitch = toolDefinition.killswitch ||
+    toolDefinition.visibilityswitch = toolDefinition.visibilityswitch ||
         "devtools." + toolId + ".enabled";
     this._tools.set(toolId, toolDefinition);
 
@@ -307,21 +307,17 @@ DevTools.prototype = {
    */
   getToolDefinitionMap: function DT_getToolDefinitionMap() {
     let tools = new Map();
-    let disabledTools = [];
-    try {
-      disabledTools = JSON.parse(Services.prefs.getCharPref("devtools.toolbox.disabledTools"));
-    } catch(ex) {}
 
     for (let [key, value] of this._tools) {
       let enabled;
 
       try {
-        enabled = Services.prefs.getBoolPref(value.killswitch);
+        enabled = Services.prefs.getBoolPref(value.visibilityswitch);
       } catch(e) {
         enabled = true;
       }
 
-      if (enabled && disabledTools.indexOf(key) == -1) {
+      if (enabled || value.id == "options") {
         tools.set(key, value);
       }
     }
@@ -454,7 +450,7 @@ DevTools.prototype = {
   destroy: function() {
     Services.obs.removeObserver(this.destroy, "quit-application");
 
-    for (let [key, tool] of this._tools) {
+    for (let [key, tool] of this.getToolDefinitionMap()) {
       this.unregisterTool(key, true);
     }
 
@@ -578,15 +574,23 @@ let gDevToolsBrowser = {
   },
 
   /**
-   * Add the menuitem for a tool to all open browser windows. Also toggles the
-   * kill switch preference of the tool.
+   * Add the menuitem for a tool to all open browser windows.
    *
    * @param {object} toolDefinition
    *        properties of the tool to add
    */
   _addToolToWindows: function DT_addToolToWindows(toolDefinition) {
-    // Set the kill switch pref boolean to true
-    Services.prefs.setBoolPref(toolDefinition.killswitch, true);
+    // No menu item or global shortcut is required for options panel.
+    if (toolDefinition.id == "options") {
+      return;
+    }
+
+    // Skip if the tool is disabled.
+    try {
+      if (!Services.prefs.getBoolPref(toolDefinition.visibilityswitch)) {
+        return;
+      }
+    } catch(e) {}
 
     // We need to insert the new tool in the right place, which means knowing
     // the tool that comes before the tool that we're trying to add
@@ -642,6 +646,17 @@ let gDevToolsBrowser = {
     let fragMenuItems = doc.createDocumentFragment();
 
     for (let toolDefinition of gDevTools.getToolDefinitionArray()) {
+      if (toolDefinition.id == "options") {
+        continue;
+      }
+
+      // Skip if the tool is disabled.
+      try {
+        if (!Services.prefs.getBoolPref(toolDefinition.visibilityswitch)) {
+          continue;
+        }
+      } catch(e) {}
+
       let elements = gDevToolsBrowser._createToolMenuElements(toolDefinition, doc);
 
       if (!elements) {
@@ -767,16 +782,12 @@ let gDevToolsBrowser = {
   },
 
   /**
-   * Remove the menuitem for a tool to all open browser windows. Also sets the
-   * kill switch boolean pref to false.
+   * Remove the menuitem for a tool to all open browser windows.
    *
-   * @param {object} toolId
+   * @param {string} toolId
    *        id of the tool to remove
-   * @param {string} killswitch
-   *        The kill switch preference string of the tool
    */
-  _removeToolFromWindows: function DT_removeToolFromWindows(toolId, killswitch) {
-    Services.prefs.setBoolPref(killswitch, false);
+  _removeToolFromWindows: function DT_removeToolFromWindows(toolId) {
     for (let win of gDevToolsBrowser._trackedBrowserWindows) {
       gDevToolsBrowser._removeToolFromMenu(toolId, win.document);
     }
@@ -854,15 +865,10 @@ gDevTools.on("tool-registered", function(ev, toolId) {
 });
 
 gDevTools.on("tool-unregistered", function(ev, toolId) {
-  let killswitch;
-  if (typeof toolId == "string") {
-    killswitch = "devtools." + toolId + ".enabled";
-  }
-  else {
-    killswitch = toolId.killswitch;
+  if (typeof toolId != "string") {
     toolId = toolId.id;
   }
-  gDevToolsBrowser._removeToolFromWindows(toolId, killswitch);
+  gDevToolsBrowser._removeToolFromWindows(toolId);
 });
 
 gDevTools.on("toolbox-ready", gDevToolsBrowser._updateMenuCheckbox);

browser/devtools/framework/test/browser_devtools_api.js

@@ -20,7 +20,7 @@ function runTests(aTab) {
   let toolDefinition = {
     id: toolId,
     isTargetSupported: function() true,
-    killswitch: "devtools.test-tool.enabled",
+    visibilityswitch: "devtools.test-tool.enabled",
     url: "about:blank",
     label: "someLabel",
     build: function(iframeWindow, toolbox) {

browser/devtools/framework/test/browser_toolbox_options.js

@@ -26,24 +26,16 @@ function testSelectTool(aToolbox) {
 
 function testOptionsShortcut() {
   ok(true, "Toolbox selected via selectTool method");
-  toolbox.once("options-selected", testOptionsButtonClick);
+  toolbox.once("options-selected", testOptions);
   toolbox.selectTool("webconsole")
          .then(() => synthesizeKeyFromKeyTag("toolbox-options-key", doc));
 }
 
-function testOptionsButtonClick() {
-  ok(true, "Toolbox selected via shortcut");
-  toolbox.once("options-selected", testOptions);
-  toolbox.selectTool("webconsole")
-         .then(() => doc.getElementById("toolbox-tab-options").click());
-}
-
-function testOptions(event, iframe) {
+function testOptions(event, tool) {
   ok(true, "Toolbox selected via button click");
-  panelWin = iframe.contentWindow;
-  let panelDoc = iframe.contentDocument;
+  panelWin = tool.panelWin;
   // Testing pref changes
-  let prefCheckboxes = panelDoc.querySelectorAll("checkbox[data-pref]");
+  let prefCheckboxes = tool.panelDoc.querySelectorAll("checkbox[data-pref]");
   for (let checkbox of prefCheckboxes) {
     prefNodes.push(checkbox);
     prefValues.push(Services.prefs.getBoolPref(checkbox.getAttribute("data-pref")));

browser/devtools/framework/test/browser_toolbox_sidebar.js

@@ -24,7 +24,7 @@ function test() {
 
   let toolDefinition = {
     id: "fakeTool4242",
-    killswitch: "devtools.fakeTool4242.enabled",
+    visibilityswitch: "devtools.fakeTool4242.enabled",
     url: toolURL,
     label: "FAKE TOOL!!!",
     isTargetSupported: function() true,

browser/devtools/framework/toolbox-options.js

@@ -1,110 +1,142 @@
-/* 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/. */
-
-"use strict";
-
-const { utils: Cu } = Components;
-const DISABLED_TOOLS = "devtools.toolbox.disabledTools";
-Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource:///modules/devtools/gDevTools.jsm");
-
-window.addEventListener("load", function onLoad() {
-  window.removeEventListener("load", onLoad);
-  setupToolsList();
-  populatePreferences();
-});
-
-function setupToolsList() {
-  let disabledTools = [];
-  try {
-    disabledTools = JSON.parse(Services.prefs.getCharPref(DISABLED_TOOLS));
-  } catch(ex) {
-    Cu.reportError("Error parsing pref " + DISABLED_TOOLS + " as JSON.");
-  }
-  let defaultToolsBox = document.getElementById("default-tools-box");
-  let additionalToolsBox = document.getElementById("additional-tools-box");
-
-  defaultToolsBox.textContent = "";
-  additionalToolsBox.textContent = "";
-
-  let onCheckboxClick = function(id) {
-    if (disabledTools.indexOf(id) > -1) {
-      disabledTools.splice(disabledTools.indexOf(id), 1);
-      Services.prefs.setCharPref(DISABLED_TOOLS, JSON.stringify(disabledTools));
-      gDevTools.emit("tool-registered", id);
-    }
-    else {
-      disabledTools.push(id);
-      Services.prefs.setCharPref(DISABLED_TOOLS, JSON.stringify(disabledTools));
-      gDevTools.emit("tool-unregistered", gDevTools._tools.get(id));
-    }
-  };
-
-  // Populating the default tools lists
-  for (let tool of gDevTools.getDefaultTools()) {
-    let checkbox = document.createElement("checkbox");
-    checkbox.setAttribute("id", tool.id);
-    checkbox.setAttribute("label", tool.label);
-    checkbox.setAttribute("tooltiptext", tool.tooltip || "");
-    checkbox.setAttribute("checked", disabledTools.indexOf(tool.id) == -1);
-    checkbox.addEventListener("command", onCheckboxClick.bind(null, tool.id));
-    defaultToolsBox.appendChild(checkbox);
-  }
-
-  // Populating the additional tools list that came from add-ons.
-  let atleastOneAddon = false;
-  for (let tool of gDevTools.getAdditionalTools()) {
-    atleastOneAddon = true;
-    let checkbox = document.createElement("checkbox");
-    checkbox.setAttribute("id", tool.id);
-    checkbox.setAttribute("label", tool.label);
-    checkbox.setAttribute("tooltiptext", tool.tooltip || "");
-    checkbox.setAttribute("checked", disabledTools.indexOf(tool.id) == -1);
-    checkbox.addEventListener("command", onCheckboxClick.bind(null, tool.id));
-    additionalToolsBox.appendChild(checkbox);
-  }
-
-  if (!atleastOneAddon) {
-    additionalToolsBox.style.display = "none";
-    additionalToolsBox.previousSibling.style.display = "none";
-  }
-
-  window.focus();
-}
-
-function populatePreferences() {
-  let prefCheckboxes = document.querySelectorAll("checkbox[data-pref]");
-  for (let checkbox of prefCheckboxes) {
-    checkbox.checked = Services.prefs.getBoolPref(checkbox.getAttribute("data-pref"));
-    checkbox.addEventListener("command", function() {
-      let data = {
-        pref: this.getAttribute("data-pref"),
-        newValue: this.checked
-      };
-      data.oldValue = Services.prefs.getBoolPref(data.pref);
-      Services.prefs.setBoolPref(data.pref, data.newValue);
-      gDevTools.emit("pref-changed", data);
-    }.bind(checkbox));
-  }
-  let prefRadiogroups = document.querySelectorAll("radiogroup[data-pref]");
-  for (let radiogroup of prefRadiogroups) {
-    let selectedValue = Services.prefs.getCharPref(radiogroup.getAttribute("data-pref"));
-    for (let radio of radiogroup.childNodes) {
-      radiogroup.selectedIndex = -1;
-      if (radio.getAttribute("value") == selectedValue) {
-        radiogroup.selectedItem = radio;
-        break;
-      }
-    }
-    radiogroup.addEventListener("select", function() {
-      let data = {
-        pref: this.getAttribute("data-pref"),
-        newValue: this.selectedItem.getAttribute("value")
-      };
-      data.oldValue = Services.prefs.getCharPref(data.pref);
-      Services.prefs.setCharPref(data.pref, data.newValue);
-      gDevTools.emit("pref-changed", data);
-    }.bind(radiogroup));
-  }
-}
+/* 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/. */
+
+"use strict";
+
+const {Cu} = require("chrome");
+
+let Promise = require("sdk/core/promise");
+let EventEmitter = require("devtools/shared/event-emitter");
+
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource:///modules/devtools/gDevTools.jsm");
+
+exports.OptionsPanel = OptionsPanel;
+
+/**
+ * Represents the Options Panel in the Toolbox.
+ */
+function OptionsPanel(iframeWindow, toolbox) {
+  this.panelDoc = iframeWindow.document;
+  this.panelWin = iframeWindow;
+
+  EventEmitter.decorate(this);
+};
+
+OptionsPanel.prototype = {
+
+  open: function OP_open() {
+    let deferred = Promise.defer();
+
+    this.setupToolsList();
+    this.populatePreferences();
+
+    this.emit("ready");
+    deferred.resolve(this);
+    return deferred.promise;
+  },
+
+  setupToolsList: function OP_setupToolsList() {
+    let defaultToolsBox = this.panelDoc.getElementById("default-tools-box");
+    let additionalToolsBox = this.panelDoc.getElementById("additional-tools-box");
+
+    defaultToolsBox.textContent = "";
+    additionalToolsBox.textContent = "";
+
+    let pref = function(key) {
+      try {
+        return Services.prefs.getBoolPref(key);
+      }
+      catch (ex) {
+        return true;
+      }
+    };
+
+    let onCheckboxClick = function(id) {
+      let toolDefinition = gDevTools._tools.get(id);
+      // Set the kill switch pref boolean to true
+      Services.prefs.setBoolPref(toolDefinition.visibilityswitch, this.checked);
+      if (this.checked) {
+        gDevTools.emit("tool-registered", id);
+      }
+      else {
+        gDevTools.emit("tool-unregistered", toolDefinition);
+      }
+    };
+
+    // Populating the default tools lists
+    for (let tool of gDevTools.getDefaultTools()) {
+      if (tool.id == "options") {
+        continue;
+      }
+      let checkbox = this.panelDoc.createElement("checkbox");
+      checkbox.setAttribute("id", tool.id);
+      checkbox.setAttribute("label", tool.label);
+      checkbox.setAttribute("tooltiptext", tool.tooltip || "");
+      checkbox.setAttribute("checked", pref(tool.visibilityswitch));
+      checkbox.addEventListener("command", onCheckboxClick.bind(checkbox, tool.id));
+      defaultToolsBox.appendChild(checkbox);
+    }
+
+    // Populating the additional tools list that came from add-ons.
+    let atleastOneAddon = false;
+    for (let tool of gDevTools.getAdditionalTools()) {
+      atleastOneAddon = true;
+      let checkbox = this.panelDoc.createElement("checkbox");
+      checkbox.setAttribute("id", tool.id);
+      checkbox.setAttribute("label", tool.label);
+      checkbox.setAttribute("tooltiptext", tool.tooltip || "");
+      checkbox.setAttribute("checked", pref(tool.visibilityswitch));
+      checkbox.addEventListener("command", onCheckboxClick.bind(checkbox, tool.id));
+      additionalToolsBox.appendChild(checkbox);
+    }
+
+    if (!atleastOneAddon) {
+      additionalToolsBox.style.display = "none";
+      additionalToolsBox.previousSibling.style.display = "none";
+    }
+
+    this.panelWin.focus();
+  },
+
+  populatePreferences: function OP_populatePreferences() {
+    let prefCheckboxes = this.panelDoc.querySelectorAll("checkbox[data-pref]");
+    for (let checkbox of prefCheckboxes) {
+      checkbox.checked = Services.prefs.getBoolPref(checkbox.getAttribute("data-pref"));
+      checkbox.addEventListener("command", function() {
+        let data = {
+          pref: this.getAttribute("data-pref"),
+          newValue: this.checked
+        };
+        data.oldValue = Services.prefs.getBoolPref(data.pref);
+        Services.prefs.setBoolPref(data.pref, data.newValue);
+        gDevTools.emit("pref-changed", data);
+      }.bind(checkbox));
+    }
+    let prefRadiogroups = this.panelDoc.querySelectorAll("radiogroup[data-pref]");
+    for (let radiogroup of prefRadiogroups) {
+      let selectedValue = Services.prefs.getCharPref(radiogroup.getAttribute("data-pref"));
+      for (let radio of radiogroup.childNodes) {
+        radiogroup.selectedIndex = -1;
+        if (radio.getAttribute("value") == selectedValue) {
+          radiogroup.selectedItem = radio;
+          break;
+        }
+      }
+      radiogroup.addEventListener("select", function() {
+        let data = {
+          pref: this.getAttribute("data-pref"),
+          newValue: this.selectedItem.getAttribute("value")
+        };
+        data.oldValue = Services.prefs.getCharPref(data.pref);
+        Services.prefs.setCharPref(data.pref, data.newValue);
+        gDevTools.emit("pref-changed", data);
+      }.bind(radiogroup));
+    }
+  },
+
+  destroy: function OP_destroy() {
+    this.panelWin = this.panelDoc = null;
+  }
+};

browser/devtools/framework/toolbox-options.xul

@@ -11,7 +11,6 @@
 <?xml-stylesheet rel="stylesheet" href="chrome://browser/skin/devtools/toolbox.css" type="text/css"?>
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-  <script type="application/javascript;version=1.8" src="toolbox-options.js"></script>
   <hbox id="options-panel-container" flex="1">
     <hbox id="options-panel" flex="1">
       <vbox id="tools-box" class="options-vertical-pane" flex="1">

browser/devtools/framework/toolbox.js

@@ -220,14 +220,6 @@ Toolbox.prototype = {
   },
 
   _buildOptions: function TBOX__buildOptions() {
-    this.optionsButton = this.doc.getElementById("toolbox-tab-options");
-    this.optionsButton.addEventListener("command", function() {
-      this.selectTool("options");
-    }.bind(this), false);
-
-    let iframe = this.doc.getElementById("toolbox-panel-iframe-options");
-    this._toolPanels.set("options", iframe);
-
     let key = this.doc.getElementById("toolbox-options-key");
     key.addEventListener("command", function(toolId) {
       this.selectTool(toolId);
@@ -358,7 +350,6 @@ Toolbox.prototype = {
     let radio = this.doc.createElement("radio");
     radio.className = "toolbox-tab devtools-tab";
     radio.id = "toolbox-tab-" + id;
-    radio.setAttribute("flex", "1");
     radio.setAttribute("toolid", id);
     if (toolDefinition.ordinal == undefined || toolDefinition.ordinal < 0) {
       toolDefinition.ordinal = MAX_ORDINAL;
@@ -376,16 +367,19 @@ Toolbox.prototype = {
       radio.appendChild(image);
     }
 
-    let label = this.doc.createElement("label");
-    label.setAttribute("value", toolDefinition.label)
-    label.setAttribute("crop", "end");
-    label.setAttribute("flex", "1");
+    if (toolDefinition.label) {
+      let label = this.doc.createElement("label");
+      label.setAttribute("value", toolDefinition.label)
+      label.setAttribute("crop", "end");
+      label.setAttribute("flex", "1");
+      radio.appendChild(label);
+      radio.setAttribute("flex", "1");
+    }
 
     let vbox = this.doc.createElement("vbox");
     vbox.className = "toolbox-panel";
     vbox.id = "toolbox-panel-" + id;
 
-    radio.appendChild(label);
 
     // If there is no tab yet, or the ordinal to be added is the largest one.
     if (tabs.childNodes.length == 0 ||
@@ -398,8 +392,7 @@ Toolbox.prototype = {
       Array.some(tabs.childNodes, (node, i) => {
         if (+node.getAttribute("ordinal") > toolDefinition.ordinal) {
           tabs.insertBefore(radio, node);
-          deck.insertBefore(vbox, deck.childNodes[i + 1]);
-          // + 1 because of options panel.
+          deck.insertBefore(vbox, deck.childNodes[i]);
           return true;
         }
       });
@@ -440,8 +433,9 @@ Toolbox.prototype = {
 
     let tabstrip = this.doc.getElementById("toolbox-tabs");
 
-    // select the right tab
-    let index = -1;
+    // select the right tab, making 0th index the default tab if right tab not
+    // found
+    let index = 0;
     let tabs = tabstrip.childNodes;
     for (let i = 0; i < tabs.length; i++) {
       if (tabs[i] === tab) {
@@ -453,15 +447,7 @@ Toolbox.prototype = {
 
     // and select the right iframe
     let deck = this.doc.getElementById("toolbox-deck");
-    // offset by 1 due to options panel
-    if (id == "options") {
-      deck.selectedIndex = 0;
-      this.optionsButton.setAttribute("checked", true);
-    }
-    else {
-      deck.selectedIndex = index != -1 ? index + 1: -1;
-      this.optionsButton.removeAttribute("checked");
-    }
+    deck.selectedIndex = index;
 
     let definition = gDevTools.getToolDefinitionMap().get(id);
 
@@ -668,7 +654,7 @@ Toolbox.prototype = {
 
     if (this.hostType == Toolbox.HostType.WINDOW) {
       let doc = this.doc.defaultView.parent.document;
-      let key = doc.getElementById("key_" + id);
+      let key = doc.getElementById("key_" + toolId);
       if (key) {
         key.parentNode.removeChild(key);
       }
@@ -709,7 +695,6 @@ Toolbox.prototype = {
 
     let outstanding = [];
 
-    this._toolPanels.delete("options");
     for (let [id, panel] of this._toolPanels) {
       outstanding.push(panel.destroy());
     }

browser/devtools/framework/toolbox.xul

@@ -34,10 +34,6 @@
         <hbox id="toolbox-dock-buttons"/>
       </hbox>
 #endif
-      <toolbarbutton id="toolbox-tab-options"
-                     autocheck="false"
-                     class="command-button toolbox-tab devtools-tab"
-                     tooltiptext="&toolboxOptionsButton.tooltip;"/>
       <hbox id="toolbox-tabs" flex="1">
       </hbox>
       <hbox id="toolbox-buttons" pack="end"/>
@@ -51,14 +47,6 @@
 #endif
     </toolbar>
     <deck id="toolbox-deck" flex="1">
-      <vbox id="toolbox-panel-options"
-            class="toolbox-panel">
-        <iframe id="toolbox-panel-iframe-options"
-                class="toolbox-panel-iframe"
-                flex="1" forceOwnRefreshDriver=""
-                src="chrome://browser/content/devtools/framework/toolbox-options.xul">
-        </iframe>
-      </vbox>
     </deck>
   </notificationbox>
 </window>

browser/devtools/main.js

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "TargetFactory", {
 loader.lazyGetter(this, "osString", () => Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS);
 
 // Panels
+loader.lazyGetter(this, "OptionsPanel", function() require("devtools/framework/toolbox-options").OptionsPanel);
 loader.lazyGetter(this, "InspectorPanel", function() require("devtools/inspector/inspector-panel").InspectorPanel);
 loader.lazyImporter(this, "WebConsolePanel", "resource:///modules/WebConsolePanel.jsm");
 loader.lazyImporter(this, "DebuggerPanel", "resource:///modules/devtools/DebuggerPanel.jsm");
@@ -37,12 +38,14 @@ loader.lazyImporter(this, "ProfilerPanel", "resource:///modules/devtools/Profile
 loader.lazyImporter(this, "NetMonitorPanel", "resource:///modules/devtools/NetMonitorPanel.jsm");
 
 // Strings
+const toolboxProps = "chrome://browser/locale/devtools/toolbox.properties";
 const inspectorProps = "chrome://browser/locale/devtools/inspector.properties";
 const debuggerProps = "chrome://browser/locale/devtools/debugger.properties";
 const styleEditorProps = "chrome://browser/locale/devtools/styleeditor.properties";
 const webConsoleProps = "chrome://browser/locale/devtools/webconsole.properties";
 const profilerProps = "chrome://browser/locale/devtools/profiler.properties";
 const netMonitorProps = "chrome://browser/locale/devtools/netmonitor.properties";
+loader.lazyGetter(this, "toolboxStrings", () => Services.strings.createBundle(toolboxProps));
 loader.lazyGetter(this, "webConsoleStrings", () => Services.strings.createBundle(webConsoleProps));
 loader.lazyGetter(this, "debuggerStrings", () => Services.strings.createBundle(debuggerProps));
 loader.lazyGetter(this, "styleEditorStrings", () => Services.strings.createBundle(styleEditorProps));
@@ -54,12 +57,27 @@ let Tools = {};
 exports.Tools = Tools;
 
 // Definitions
+Tools.options = {
+  id: "options",
+  ordinal: 0,
+  url: "chrome://browser/content/devtools/framework/toolbox-options.xul",
+  icon: "chrome://browser/skin/devtools/tool-options.png",
+  tooltip: l10n("optionsButton.tooltip", toolboxStrings),
+  isTargetSupported: function(target) {
+    return true;
+  },
+  build: function(iframeWindow, toolbox) {
+    let panel = new OptionsPanel(iframeWindow, toolbox);
+    return panel.open();
+  }
+}
+
 Tools.webConsole = {
   id: "webconsole",
   key: l10n("cmd.commandkey", webConsoleStrings),
   accesskey: l10n("webConsoleCmd.accesskey", webConsoleStrings),
   modifiers: Services.appinfo.OS == "Darwin" ? "accel,alt" : "accel,shift",
-  ordinal: 0,
+  ordinal: 1,
   icon: "chrome://browser/skin/devtools/tool-webconsole.png",
   url: "chrome://browser/content/devtools/webconsole.xul",
   label: l10n("ToolboxWebconsole.label", webConsoleStrings),
@@ -74,33 +92,11 @@ Tools.webConsole = {
   }
 };
 
-Tools.jsdebugger = {
-  id: "jsdebugger",
-  key: l10n("open.commandkey", debuggerStrings),
-  accesskey: l10n("debuggerMenu.accesskey", debuggerStrings),
-  modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
-  ordinal: 2,
-  killswitch: "devtools.debugger.enabled",
-  icon: "chrome://browser/skin/devtools/tool-debugger.png",
-  url: "chrome://browser/content/devtools/debugger.xul",
-  label: l10n("ToolboxDebugger.label", debuggerStrings),
-  tooltip: l10n("ToolboxDebugger.tooltip", debuggerStrings),
-
-  isTargetSupported: function(target) {
-    return true;
-  },
-
-  build: function(iframeWindow, toolbox) {
-    let panel = new DebuggerPanel(iframeWindow, toolbox);
-    return panel.open();
-  }
-};
-
 Tools.inspector = {
   id: "inspector",
   accesskey: l10n("inspector.accesskey", inspectorStrings),
   key: l10n("inspector.commandkey", inspectorStrings),
-  ordinal: 1,
+  ordinal: 2,
   modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
   icon: "chrome://browser/skin/devtools/tool-inspector.png",
   url: "chrome://browser/content/devtools/inspector/inspector.xul",
@@ -117,10 +113,32 @@ Tools.inspector = {
   }
 };
 
+Tools.jsdebugger = {
+  id: "jsdebugger",
+  key: l10n("open.commandkey", debuggerStrings),
+  accesskey: l10n("debuggerMenu.accesskey", debuggerStrings),
+  modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
+  ordinal: 3,
+  visibilityswitch: "devtools.debugger.enabled",
+  icon: "chrome://browser/skin/devtools/tool-debugger.png",
+  url: "chrome://browser/content/devtools/debugger.xul",
+  label: l10n("ToolboxDebugger.label", debuggerStrings),
+  tooltip: l10n("ToolboxDebugger.tooltip", debuggerStrings),
+
+  isTargetSupported: function(target) {
+    return true;
+  },
+
+  build: function(iframeWindow, toolbox) {
+    let panel = new DebuggerPanel(iframeWindow, toolbox);
+    return panel.open();
+  }
+};
+
 Tools.styleEditor = {
   id: "styleeditor",
   key: l10n("open.commandkey", styleEditorStrings),
-  ordinal: 3,
+  ordinal: 4,
   accesskey: l10n("open.accesskey", styleEditorStrings),
   modifiers: "shift",
   icon: "chrome://browser/skin/devtools/tool-styleeditor.png",
@@ -142,9 +160,9 @@ Tools.jsprofiler = {
   id: "jsprofiler",
   accesskey: l10n("profiler.accesskey", profilerStrings),
   key: l10n("profiler2.commandkey", profilerStrings),
-  ordinal: 4,
+  ordinal: 5,
   modifiers: "shift",
-  killswitch: "devtools.profiler.enabled",
+  visibilityswitch: "devtools.profiler.enabled",
   icon: "chrome://browser/skin/devtools/tool-profiler.png",
   url: "chrome://browser/content/devtools/profiler.xul",
   label: l10n("profiler.label", profilerStrings),
@@ -164,9 +182,9 @@ Tools.netMonitor = {
   id: "netmonitor",
   accesskey: l10n("netmonitor.accesskey", netMonitorStrings),
   key: l10n("netmonitor.commandkey", netMonitorStrings),
-  ordinal: 5,
+  ordinal: 6,
   modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
-  killswitch: "devtools.netmonitor.enabled",
+  visibilityswitch: "devtools.netmonitor.enabled",
   icon: "chrome://browser/skin/devtools/tool-profiler.png",
   url: "chrome://browser/content/devtools/netmonitor.xul",
   label: l10n("netmonitor.label", netMonitorStrings),
@@ -183,6 +201,7 @@ Tools.netMonitor = {
 };
 
 let defaultTools = [
+  Tools.options,
   Tools.styleEditor,
   Tools.webConsole,
   Tools.jsdebugger,
@@ -201,7 +220,7 @@ var unloadObserver = {
   observe: function(subject, topic, data) {
     if (subject.wrappedJSObject === require("@loader/unload")) {
       Services.obs.removeObserver(unloadObserver, "sdk:loader:destroy");
-      for (let definition of defaultTools) {
+      for (let definition of gDevTools.getToolDefinitionArray()) {
         gDevTools.unregisterTool(definition.id);
       }
     }

browser/locales/en-US/chrome/browser/devtools/toolbox.dtd

@@ -8,7 +8,6 @@
 <!ENTITY closeCmd.key  "W">
 
 <!ENTITY toolboxCloseButton.tooltip    "Close Developer Tools">
-<!ENTITY toolboxOptionsButton.tooltip  "Toggle Options Panel">
 <!ENTITY toolboxOptionsButton.key      "O">
 
 <!-- LOCALIZATION NOTE (options.context.label): This is the label for the

browser/locales/en-US/chrome/browser/devtools/toolbox.properties

@@ -34,3 +34,7 @@ toolbox.titleTemplate=%1$S - %2$S
 # LOCALIZATION NOTE (toolbox.defaultTitle): This is used as the tool
 # name when no tool is selected.
 toolbox.defaultTitle=Developer Tools
+
+# LOCALIZATION NOTE (optionsButton.tooltip): This is used as the tooltip
+# for the optiosn panel tab.
+optionsButton.tooltip=Toolbox Options

browser/themes/linux/devtools/toolbox.css

@@ -128,20 +128,6 @@
   -moz-image-region: rect(0px, 48px, 16px, 32px);
 }
 
-#toolbox-tab-options {
-  list-style-image: url("chrome://browser/skin/devtools/option-icon.png");
-  -moz-image-region: rect(0px 16px 16px 0px);
-}
-
-#toolbox-tab-options[checked=true] {
-  -moz-image-region: rect(0px 32px 16px 16px);
-}
-
-#toolbox-tab-options > image {
-  opacity: 1;
-  -moz-margin-start: 0;
-}
-
 /* Tabs */
 
 .devtools-tabbar {

browser/themes/linux/jar.mn

@@ -201,6 +201,7 @@ browser.jar:
   skin/classic/browser/devtools/floating-scrollbars-light.css (devtools/floating-scrollbars-light.css)
   skin/classic/browser/devtools/inspector.css             (devtools/inspector.css)
   skin/classic/browser/devtools/toolbox.css               (devtools/toolbox.css)
+  skin/classic/browser/devtools/tool-options.png          (devtools/tool-options.png)
   skin/classic/browser/devtools/tool-webconsole.png       (devtools/tool-webconsole.png)
   skin/classic/browser/devtools/tool-debugger.png         (devtools/tool-debugger.png)
   skin/classic/browser/devtools/tool-inspector.png        (devtools/tool-inspector.png)

browser/themes/osx/devtools/toolbox.css

@@ -116,21 +116,6 @@
   -moz-image-region: rect(0px, 48px, 16px, 32px);
 }
 
-#toolbox-tab-options {
-  list-style-image: url("chrome://browser/skin/devtools/option-icon.png");
-  -moz-image-region: rect(0px 16px 16px 0px);
-  border-left: 1px solid hsla(206,37%,4%,.45);
-}
-
-#toolbox-tab-options[checked=true] {
-  -moz-image-region: rect(0px 32px 16px 16px);
-}
-
-#toolbox-tab-options > image {
-  opacity: 1;
-  -moz-margin-start: 0;
-}
-
 /* Tabs */
 
 .devtools-tabbar {
@@ -148,6 +133,7 @@
 
 #toolbox-tabs {
   margin: 0;
+  border-left: 1px solid hsla(206,37%,4%,.45);
 }
 
 .devtools-tab {

browser/themes/osx/jar.mn

@@ -292,6 +292,7 @@ browser.jar:
   skin/classic/browser/devtools/floating-scrollbars-light.css (devtools/floating-scrollbars-light.css)
 * skin/classic/browser/devtools/inspector.css               (devtools/inspector.css)
   skin/classic/browser/devtools/toolbox.css                 (devtools/toolbox.css)
+  skin/classic/browser/devtools/tool-options.png            (devtools/tool-options.png)
   skin/classic/browser/devtools/tool-webconsole.png         (devtools/tool-webconsole.png)
   skin/classic/browser/devtools/tool-debugger.png           (devtools/tool-debugger.png)
   skin/classic/browser/devtools/tool-inspector.png          (devtools/tool-inspector.png)

browser/themes/windows/devtools/toolbox.css

@@ -131,20 +131,6 @@
   -moz-image-region: rect(0px, 48px, 16px, 32px);
 }
 
-#toolbox-tab-options {
-  list-style-image: url("chrome://browser/skin/devtools/option-icon.png");
-  -moz-image-region: rect(0px 16px 16px 0px);
-}
-
-#toolbox-tab-options[checked=true] {
-  -moz-image-region: rect(0px 32px 16px 16px);
-}
-
-#toolbox-tab-options > image {
-  opacity: 1;
-  -moz-margin-start: 0;
-}
-
 /* Tabs */
 
 .devtools-tabbar {

browser/themes/windows/jar.mn

@@ -229,6 +229,7 @@ browser.jar:
         skin/classic/browser/devtools/floating-scrollbars-light.css (devtools/floating-scrollbars-light.css)
         skin/classic/browser/devtools/inspector.css                 (devtools/inspector.css)
         skin/classic/browser/devtools/toolbox.css                   (devtools/toolbox.css)
+        skin/classic/browser/devtools/tool-options.png              (devtools/tool-options.png)
         skin/classic/browser/devtools/tool-webconsole.png           (devtools/tool-webconsole.png)
         skin/classic/browser/devtools/tool-debugger.png             (devtools/tool-debugger.png)
         skin/classic/browser/devtools/tool-inspector.png            (devtools/tool-inspector.png)
@@ -479,6 +480,7 @@ browser.jar:
         skin/classic/aero/browser/devtools/floating-scrollbars-light.css (devtools/floating-scrollbars-light.css)
         skin/classic/aero/browser/devtools/inspector.css             (devtools/inspector.css)
         skin/classic/aero/browser/devtools/toolbox.css               (devtools/toolbox.css)
+        skin/classic/aero/browser/devtools/tool-options.png          (devtools/tool-options.png)
         skin/classic/aero/browser/devtools/tool-webconsole.png       (devtools/tool-webconsole.png)
         skin/classic/aero/browser/devtools/tool-debugger.png         (devtools/tool-debugger.png)
         skin/classic/aero/browser/devtools/tool-inspector.png        (devtools/tool-inspector.png)