From f0b75982e1a720c71a3750d18d73f762ee92dfb5 Mon Sep 17 00:00:00 2001
From: Rob Campbell <rcampbell@mozilla.com>
Date: Thu, 3 Nov 2011 10:37:14 -0300
Subject: [PATCH] Bug 695440 - Create sidebar for Highlighter tools; f=zpao;
 r=dcamp,dao

---
 browser/base/content/browser-sets.inc         |   8 +-
 browser/base/content/browser.xul              |  10 +
 browser/devtools/highlighter/inspector.jsm    | 257 +++++++++++++++---
 .../test/browser_inspector_initialization.js  |   6 +-
 .../styleinspector/StyleInspector.jsm         | 167 +++++++-----
 .../locales/en-US/chrome/browser/browser.dtd  |   2 +
 .../devtools/styleinspector.properties        |   6 +-
 .../themes/gnomestripe/browser/browser.css    |  34 ++-
 browser/themes/pinstripe/browser/browser.css  |  34 ++-
 browser/themes/winstripe/browser/browser.css  |  33 ++-
 10 files changed, 430 insertions(+), 127 deletions(-)

diff --git a/browser/base/content/browser-sets.inc b/browser/base/content/browser-sets.inc
index e4b785d1345e..7cb689e57152 100644
--- a/browser/base/content/browser-sets.inc
+++ b/browser/base/content/browser-sets.inc
@@ -145,12 +145,8 @@
   <commandset id="inspectorCommands">
     <command id="Inspector:Inspect"
              oncommand="InspectorUI.toggleInspection();"/>
-    <command id="Inspector:Previous"
-             oncommand="InspectorUI.inspectPrevious();"
-             disabled="true"/>
-    <command id="Inspector:Next"
-             oncommand="InspectorUI.inspectNext();"
-             disabled="true"/>
+    <command id="Inspector:Sidebar"
+             oncommand="InspectorUI.toggleSidebar();"/>
   </commandset>
 
   <broadcasterset id="mainBroadcasterSet">
diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul
index eaa222c1b642..d078c39b64ee 100644
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -966,6 +966,12 @@
                   onclick="return contentAreaClick(event, false);"/>
       <statuspanel id="statusbar-display" inactive="true"/>
     </vbox>
+    <splitter id="devtools-side-splitter" hidden="true"/>
+    <vbox id="devtools-sidebar-box" hidden="true" flex="1"
+          style="min-width: 18em; width: 22em; max-width: 42em;" persist="width">
+      <toolbar id="devtools-sidebar-toolbar" nowindowdrag="true"/>
+      <deck id="devtools-sidebar-deck" flex="1"/>
+    </vbox>
     <vbox id="browser-border-end" hidden="true" layer="true"/>
   </hbox>
 
@@ -1000,6 +1006,10 @@
                           flex="1" orient="horizontal"
                           clicktoscroll="true"/>
           <hbox id="inspector-tools">
+            <toolbarbutton id="inspector-style-button"
+                           label="&inspectStyleButton.label;"
+                           accesskey="&inspectStyleButton.accesskey;"
+                           command="Inspector:Sidebar"/>
             <!-- registered tools go here -->
           </hbox>
 #ifndef XP_MACOSX
diff --git a/browser/devtools/highlighter/inspector.jsm b/browser/devtools/highlighter/inspector.jsm
index 9590085e00ea..a6021ea8e4b3 100644
--- a/browser/devtools/highlighter/inspector.jsm
+++ b/browser/devtools/highlighter/inspector.jsm
@@ -758,6 +758,57 @@ InspectorUI.prototype = {
     }
   },
 
+  /**
+   * Show the Sidebar.
+   */
+  showSidebar: function IUI_showSidebar()
+  {
+    this.sidebarBox.removeAttribute("hidden");
+    this.sidebarSplitter.removeAttribute("hidden");
+    this.stylingButton.checked = true;
+
+    // Activate the first tool in the sidebar, only if none previously-
+    // selected. We'll want to do a followup to remember selected tool-states.
+    if (!Array.some(this.sidebarToolbar.children,
+      function(btn) btn.hasAttribute("checked"))) {
+        let firstButtonId = this.getToolbarButtonId(this.sidebarTools[0].id);
+        this.chromeDoc.getElementById(firstButtonId).click();
+    }
+  },
+
+  /**
+   * Hide the Sidebar.
+   */
+  hideSidebar: function IUI_hideSidebar()
+  {
+    this.sidebarBox.setAttribute("hidden", "true");
+    this.sidebarSplitter.setAttribute("hidden", "true");
+    this.stylingButton.checked = false;
+  },
+
+  /**
+   * Show or hide the sidebar. Called from the Styling button on the
+   * highlighter toolbar.
+   */
+  toggleSidebar: function IUI_toggleSidebar()
+  {
+    if (!this.isSidebarOpen) {
+      this.showSidebar();
+    } else {
+      this.hideSidebar();
+    }
+  },
+
+  /**
+   * Getter to test if the Sidebar is open or not.
+   */
+  get isSidebarOpen()
+  {
+    return this.stylingButton.checked &&
+          !this.sidebarBox.hidden &&
+          !this.sidebarSplitter.hidden;
+  },
+
   /**
    * Toggle the status of the inspector, starting or stopping it. Invoked
    * from the toolbar's Inspect button.
@@ -955,6 +1006,9 @@ InspectorUI.prototype = {
       this.unregisterTool(aTool);
     }.bind(this));
 
+    // close the sidebar
+    this.hideSidebar();
+
     if (this.highlighter) {
       this.highlighter.highlighterContainer.removeEventListener("keypress",
                                                                 this,
@@ -1366,13 +1420,25 @@ InspectorUI.prototype = {
     return "inspector-" + anId + "-toolbutton";
   },
 
+  /**
+   * Save a registered tool's callback for a specified event.
+   * @param aWidget xul:widget
+   * @param aEvent a DOM event name
+   * @param aCallback Function the click event handler for the button
+   */
+  bindToolEvent: function IUI_bindToolEvent(aWidget, aEvent, aCallback)
+  {
+    this.toolEvents[aWidget.id + "_" + aEvent] = aCallback;
+    aWidget.addEventListener(aEvent, aCallback, false);
+  },
+
   /**
    * Register an external tool with the inspector.
    *
    * aRegObj = {
    *   id: "toolname",
    *   context: myTool,
-   *   label: "Button label",
+   *   label: "Button or tab label",
    *   icon: "chrome://somepath.png",
    *   tooltiptext: "Button tooltip",
    *   accesskey: "S",
@@ -1382,7 +1448,8 @@ InspectorUI.prototype = {
    *   hide: object.method, called to hide the tool when button is pressed.
    *   dim: object.method, called to disable a tool during highlighting.
    *   unregister: object.method, called when tool should be destroyed.
-   *   panel: myTool.panel
+   *   panel: myTool.panel, set if tool is in a separate panel, null otherwise.
+   *   sidebar: boolean, true if tool lives in sidebar tab.
    * }
    *
    * @param aRegObj Object
@@ -1398,28 +1465,24 @@ InspectorUI.prototype = {
     this.tools[aRegObj.id] = aRegObj;
 
     let buttonContainer = this.chromeDoc.getElementById("inspector-tools");
-    let btn = this.chromeDoc.createElement("toolbarbutton");
+    let btn;
+
+    // if this is a sidebar tool, create the sidebar features for it and bail.
+    if (aRegObj.sidebar) {
+      this.createSidebarTool(aRegObj);
+      return;
+    }
+
+    btn = this.chromeDoc.createElement("toolbarbutton");
     let buttonId = this.getToolbarButtonId(aRegObj.id);
     btn.setAttribute("id", buttonId);
     btn.setAttribute("label", aRegObj.label);
     btn.setAttribute("tooltiptext", aRegObj.tooltiptext);
     btn.setAttribute("accesskey", aRegObj.accesskey);
     btn.setAttribute("image", aRegObj.icon || "");
-    buttonContainer.appendChild(btn);
+    buttonContainer.insertBefore(btn, this.stylingButton);
 
-    /**
-     * Save a registered tool's callback for a specified event.
-     * @param aWidget xul:widget
-     * @param aEvent a DOM event name
-     * @param aCallback Function the click event handler for the button
-     */
-    let toolEvents = this.toolEvents;
-    function bindToolEvent(aWidget, aEvent, aCallback) {
-      toolEvents[aWidget.id + "_" + aEvent] = aCallback;
-      aWidget.addEventListener(aEvent, aCallback, false);
-    }
-
-    bindToolEvent(btn, "click",
+    this.bindToolEvent(btn, "click",
       function IUI_toolButtonClick(aEvent) {
         if (btn.checked) {
           this.toolHide(aRegObj);
@@ -1428,14 +1491,85 @@ InspectorUI.prototype = {
         }
       }.bind(this));
 
+    // if the tool has a panel, register the popuphiding event
     if (aRegObj.panel) {
-      bindToolEvent(aRegObj.panel, "popuphiding",
+      this.bindToolEvent(aRegObj.panel, "popuphiding",
         function IUI_toolPanelHiding() {
           btn.checked = false;
         });
     }
   },
 
+  get sidebarBox()
+  {
+    return this.chromeDoc.getElementById("devtools-sidebar-box");
+  },
+
+  get sidebarToolbar()
+  {
+    return this.chromeDoc.getElementById("devtools-sidebar-toolbar");
+  },
+
+  get sidebarDeck()
+  {
+    return this.chromeDoc.getElementById("devtools-sidebar-deck");
+  },
+
+  get sidebarSplitter()
+  {
+    return this.chromeDoc.getElementById("devtools-side-splitter");
+  },
+
+  get stylingButton()
+  {
+    return this.chromeDoc.getElementById("inspector-style-button");
+  },
+
+  /**
+   * Creates a tab and tabpanel for our tool to reside in.
+   * @param {Object} aRegObj the Registration Object for our tool.
+   */
+  createSidebarTool: function IUI_createSidebarTab(aRegObj)
+  {
+    // toolbutton elements
+    let btn = this.chromeDoc.createElement("toolbarbutton");
+    let buttonId = this.getToolbarButtonId(aRegObj.id);
+
+    btn.id = buttonId;
+    btn.setAttribute("label", aRegObj.label);
+    btn.setAttribute("tooltiptext", aRegObj.tooltiptext);
+    btn.setAttribute("accesskey", aRegObj.accesskey);
+    btn.setAttribute("image", aRegObj.icon || "");
+    btn.setAttribute("type", "radio");
+    btn.setAttribute("group", "sidebar-tools");
+    this.sidebarToolbar.appendChild(btn);
+
+    // create tool iframe
+    let iframe = this.chromeDoc.createElement("iframe");
+    iframe.id = "devtools-sidebar-iframe-" + aRegObj.id;
+    iframe.setAttribute("flex", "1");
+    this.sidebarDeck.appendChild(iframe);
+
+    // wire up button to show the iframe
+    this.bindToolEvent(btn, "click", function showIframe() {
+      let visible = this.sidebarDeck.selectedPanel == iframe;
+      if (!visible) {
+        sidebarDeck.selectedPanel = iframe;
+      }
+      this.toolShow(aRegObj);
+    }.bind(this));
+  },
+
+  /**
+   * Return the registered object's iframe.
+   * @param aRegObj see registerTool function.
+   * @return iframe or null
+   */
+  getToolIframe: function IUI_getToolIFrame(aRegObj)
+  {
+    return this.chromeDoc.getElementById("devtools-sidebar-iframe-" + aRegObj.id);
+  },
+
   /**
    * Show the specified tool.
    * @param aTool Object (see comment for IUI_registerTool)
@@ -1443,7 +1577,9 @@ InspectorUI.prototype = {
   toolShow: function IUI_toolShow(aTool)
   {
     aTool.show.call(aTool.context, this.selection);
-    this.chromeDoc.getElementById(this.getToolbarButtonId(aTool.id)).checked = true;
+
+    let btn = this.chromeDoc.getElementById(this.getToolbarButtonId(aTool.id));
+    btn.setAttribute("checked", "true");
   },
 
   /**
@@ -1453,7 +1589,21 @@ InspectorUI.prototype = {
   toolHide: function IUI_toolHide(aTool)
   {
     aTool.hide.call(aTool.context);
-    this.chromeDoc.getElementById(this.getToolbarButtonId(aTool.id)).checked = false;
+
+    let btn = this.chromeDoc.getElementById(this.getToolbarButtonId(aTool.id));
+    btn.removeAttribute("checked");
+  },
+
+  /**
+   * Unregister the events associated with the registered tool's widget.
+   * @param aWidget XUL:widget (toolbarbutton|panel).
+   * @param aEvent a DOM event.
+   */
+  unbindToolEvent: function IUI_unbindToolEvent(aWidget, aEvent)
+  {
+    let toolEvent = aWidget.id + "_" + aEvent;
+    aWidget.removeEventListener(aEvent, this.toolEvents[toolEvent], false);
+    delete this.toolEvents[toolEvent]
   },
 
   /**
@@ -1464,28 +1614,50 @@ InspectorUI.prototype = {
    */
   unregisterTool: function IUI_unregisterTool(aRegObj)
   {
+    // if this is a sidebar tool, use the sidebar unregistration method
+    if (aRegObj.sidebar) {
+      this.unregisterSidebarTool(aRegObj);
+      return;
+    }
+
     let button = this.chromeDoc.getElementById(this.getToolbarButtonId(aRegObj.id));
-
-    /**
-     * Unregister the events associated with the registered tool's widget.
-     * @param aWidget XUL:widget (toolbarbutton|panel).
-     * @param aEvent a DOM event.
-     */
-    let toolEvents = this.toolEvents;
-    function unbindToolEvent(aWidget, aEvent) {
-      let toolEvent = aWidget.id + "_" + aEvent;
-      aWidget.removeEventListener(aEvent, toolEvents[toolEvent], false);
-      delete toolEvents[toolEvent]
-    };
-
     let buttonContainer = this.chromeDoc.getElementById("inspector-tools");
-    unbindToolEvent(button, "click");
 
+    // unbind click events on button
+    this.unbindToolEvent(button, "click");
+
+    // unbind panel popuphiding events if present.
     if (aRegObj.panel)
-      unbindToolEvent(aRegObj.panel, "popuphiding");
+      this.unbindToolEvent(aRegObj.panel, "popuphiding");
 
+    // remove the button from its container
     buttonContainer.removeChild(button);
 
+    // call unregister callback and remove from collection
+    if (aRegObj.unregister)
+      aRegObj.unregister.call(aRegObj.context);
+
+    delete this.tools[aRegObj.id];
+  },
+
+  /**
+   * Unregister the registered sidebar tool, unbinding click events for the
+   * button.
+   * @param aRegObj Object
+   *        The registration object used to register the tool.
+   */
+  unregisterSidebarTool: function IUI_unregisterSidebarTool(aRegObj)
+  {
+    // unbind tool button click event
+    let buttonId = this.getToolbarButtonId(aRegObj.id);
+    let btn = this.chromeDoc.getElementById(buttonId);
+    this.unbindToolEvent(btn, "click");
+
+    // remove sidebar buttons and tools
+    this.sidebarToolbar.removeChild(btn);
+
+    // call unregister callback and remove from collection, this also removes
+    // the iframe.
     if (aRegObj.unregister)
       aRegObj.unregister.call(aRegObj.context);
 
@@ -1520,6 +1692,9 @@ InspectorUI.prototype = {
     if (openTools) {
       this.toolsDo(function IUI_toolsOnShow(aTool) {
         if (aTool.id in openTools) {
+          if (aTool.sidebar && !this.isSidebarOpen) {
+            this.showSidebar();
+          }
           this.toolShow(aTool);
         }
       }.bind(this));
@@ -1566,6 +1741,18 @@ InspectorUI.prototype = {
     }
   },
 
+  /**
+   * Convenience getter to retrieve only the sidebar tools.
+   */
+  get sidebarTools()
+  {
+    let sidebarTools = [];
+    for each (let tool in this.tools)
+      if (tool.sidebar)
+        sidebarTools.push(tool);
+    return sidebarTools;
+  },
+
   /**
    * Check if a tool is registered?
    * @param aId The id of the tool to check
diff --git a/browser/devtools/highlighter/test/browser_inspector_initialization.js b/browser/devtools/highlighter/test/browser_inspector_initialization.js
index c2ff03e1d1f8..4bffe770c277 100644
--- a/browser/devtools/highlighter/test/browser_inspector_initialization.js
+++ b/browser/devtools/highlighter/test/browser_inspector_initialization.js
@@ -76,6 +76,7 @@ function runInspectorTests()
   ok(!InspectorUI.toolbar.hidden, "toolbar is visible");
   ok(InspectorUI.inspecting, "Inspector is inspecting");
   ok(!InspectorUI.treePanel.isOpen(), "Inspector Tree Panel is not open");
+  ok(!InspectorUI.isSidebarOpen, "Inspector Sidebar is not open");
   ok(InspectorUI.highlighter, "Highlighter is up");
   InspectorUI.inspectNode(doc.body);
   InspectorUI.stopInspecting();
@@ -93,7 +94,7 @@ function treePanelTests()
   ok(InspectorUI.treePanel.isOpen(), "Inspector Tree Panel is open");
 
   executeSoon(function() {
-    InspectorUI.stylePanel.open(doc.body);
+    InspectorUI.showSidebar();
   });
 }
 
@@ -103,7 +104,7 @@ function stylePanelTests()
   Services.obs.addObserver(runContextMenuTest,
     InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
 
-  ok(InspectorUI.stylePanel.isOpen(), "Style Panel is Open");
+  ok(InspectorUI.isSidebarOpen, "Inspector Sidebar is open");
   ok(InspectorUI.stylePanel.cssHtmlTree, "Style Panel has a cssHtmlTree");
 
   executeSoon(function() {
@@ -191,6 +192,7 @@ function finishInspectorTests()
   ok(!InspectorUI.highlighter, "Highlighter is gone");
   ok(!InspectorUI.treePanel, "Inspector Tree Panel is closed");
   ok(!InspectorUI.inspecting, "Inspector is not inspecting");
+  ok(!InspectorUI.isSidebarOpen, "Inspector Sidebar is closed");
   ok(!InspectorUI.toolbar, "toolbar is hidden");
 
   gBrowser.removeCurrentTab();
diff --git a/browser/devtools/styleinspector/StyleInspector.jsm b/browser/devtools/styleinspector/StyleInspector.jsm
index e007dbe504b3..bf8958d23db0 100644
--- a/browser/devtools/styleinspector/StyleInspector.jsm
+++ b/browser/devtools/styleinspector/StyleInspector.jsm
@@ -76,30 +76,58 @@ StyleInspector.prototype = {
 
     // Were we invoked from the Highlighter?
     if (this.IUI) {
-      this.createPanel(true);
-
+      this.openDocked = true;
       let isOpen = this.isOpen.bind(this);
 
       this.registrationObject = {
         id: "styleinspector",
-        label: this.l10n("style.highlighter.button.label"),
+        label: this.l10n("style.highlighter.button.label1"),
         tooltiptext: this.l10n("style.highlighter.button.tooltip"),
-        accesskey: this.l10n("style.highlighter.accesskey"),
+        accesskey: this.l10n("style.highlighter.accesskey1"),
         context: this,
         get isOpen() isOpen(),
         onSelect: this.selectNode,
         show: this.open,
         hide: this.close,
         dim: this.dimTool,
-        panel: this.panel,
-        unregister: this.destroy
+        panel: null,
+        unregister: this.destroy,
+        sidebar: true,
       };
 
       // Register the registrationObject with the Highlighter
       this.IUI.registerTool(this.registrationObject);
+      this.createSidebarContent(true);
     }
   },
 
+  /**
+   * Create the iframe in the IUI sidebar's tab panel.
+   * @param {Boolean} aPreserveOnHide Prevents destroy from being called.
+   */
+  createSidebarContent: function SI_createSidebarContent(aPreserveOnHide)
+  {
+    this.preserveOnHide = !!aPreserveOnHide;
+
+    let boundIframeOnLoad = function loadedInitializeIframe() {
+      if (this.iframe &&
+          this.iframe.getAttribute("src") ==
+          "chrome://browser/content/csshtmltree.xhtml") {
+        let selectedNode = this.selectedNode || null;
+        this.cssHtmlTree = new CssHtmlTree(this);
+        this.cssLogic.highlight(selectedNode);
+        this.cssHtmlTree.highlight(selectedNode);
+        this.iframe.removeEventListener("load", boundIframeOnLoad, true);
+        this.iframeReady = true;
+        Services.obs.notifyObservers(null, "StyleInspector-opened", null);
+      }
+    }.bind(this);
+
+    this.iframe = this.IUI.getToolIframe(this.registrationObject);
+
+    this.iframe.addEventListener("load", boundIframeOnLoad, true);
+  },
+
   /**
    * Factory method to create the actual style panel
    * @param {Boolean} aPreserveOnHide Prevents destroy from being called
@@ -202,7 +230,9 @@ StyleInspector.prototype = {
    */
   isOpen: function SI_isOpen()
   {
-    return this.panel && this.panel.state && this.panel.state == "open";
+    return this.openDocked ? this.iframeReady && this.IUI.isSidebarOpen &&
+            (this.IUI.sidebarDeck.selectedPanel == this.iframe) :
+           this.panel && this.panel.state && this.panel.state == "open";
   },
 
   /**
@@ -227,12 +257,66 @@ StyleInspector.prototype = {
   selectNode: function SI_selectNode(aNode)
   {
     this.selectedNode = aNode;
-    if (this.isOpen() && !this.panel.hasAttribute("dimmed")) {
+    if (this.isOpen() && !this.dimmed) {
       this.cssLogic.highlight(aNode);
       this.cssHtmlTree.highlight(aNode);
     }
   },
 
+  /**
+   * Dim or undim a panel by setting or removing a dimmed attribute.
+   * @param aState
+   *        true = dim, false = undim
+   */
+  dimTool: function SI_dimTool(aState)
+  {
+    this.dimmed = aState;
+  },
+
+  /**
+   * Open the panel.
+   * @param {DOMNode} aSelection the (optional) DOM node to select.
+   */
+  open: function SI_open(aSelection)
+  {
+    this.selectNode(aSelection);
+    if (this.openDocked) {
+      if (!this.iframeReady) {
+        this.iframe.setAttribute("src", "chrome://browser/content/csshtmltree.xhtml");
+      }
+    } else {
+      this.panel.openPopup(this.window.gBrowser.selectedBrowser, "end_before", 0, 0,
+        false, false);
+    }
+  },
+
+  /**
+   * Close the panel.
+   */
+  close: function SI_close()
+  {
+    if (this.openDocked) {
+      Services.obs.notifyObservers(null, "StyleInspector-closed", null);
+    } else {
+      this.panel.hidePopup();
+    }
+  },
+
+  /**
+   * Memoized lookup of a l10n string from a string bundle.
+   * @param {string} aName The key to lookup.
+   * @returns A localized version of the given key.
+   */
+  l10n: function SI_l10n(aName)
+  {
+    try {
+      return _strings.GetStringFromName(aName);
+    } catch (ex) {
+      Services.console.logStringMessage("Error reading '" + aName + "'");
+      throw new Error("l10n error with " + aName);
+    }
+  },
+
   /**
    * Destroy the style panel, remove listeners etc.
    */
@@ -249,72 +333,23 @@ StyleInspector.prototype = {
 
     delete this.cssLogic;
     delete this.cssHtmlTree;
-    this.panel.removeEventListener("popupshown", this._boundPopupShown, false);
-    this.panel.removeEventListener("popuphidden", this._boundPopupHidden, false);
-    delete this._boundPopupShown;
-    delete this._boundPopupHidden;
-    this.panel.parentNode.removeChild(this.panel);
-    delete this.panel;
+    if (this.panel) {
+      this.panel.removeEventListener("popupshown", this._boundPopupShown, false);
+      this.panel.removeEventListener("popuphidden", this._boundPopupHidden, false);
+      delete this._boundPopupShown;
+      delete this._boundPopupHidden;
+      this.panel.parentNode.removeChild(this.panel);
+      delete this.panel;
+    }
     delete this.doc;
     delete this.win;
     delete CssHtmlTree.win;
     Services.obs.notifyObservers(null, "StyleInspector-closed", null);
   },
-
-  /**
-   * Dim or undim a panel by setting or removing a dimmed attribute.
-   * @param aState
-   *        true = dim, false = undim
-   */
-  dimTool: function SI_dimTool(aState)
-  {
-    if (!this.isOpen())
-      return;
-
-    if (aState) {
-      this.panel.setAttribute("dimmed", "true");
-    } else if (this.panel.hasAttribute("dimmed")) {
-      this.panel.removeAttribute("dimmed");
-    }
-  },
-
-  /**
-   * Open the panel.
-   * @param {DOMNode} aSelection the (optional) DOM node to select.
-   */
-  open: function SI_open(aSelection)
-  {
-    this.selectNode(aSelection);
-    this.panel.openPopup(this.window.gBrowser.selectedBrowser, "end_before", 0, 0,
-      false, false);
-  },
-
-  /**
-   * Close the panel.
-   */
-  close: function SI_close()
-  {
-    this.panel.hidePopup();
-  },
-
-  /**
-   * Memonized lookup of a l10n string from a string bundle.
-   * @param {string} aName The key to lookup.
-   * @returns A localized version of the given key.
-   */
-  l10n: function SI_l10n(aName)
-  {
-    try {
-      return _strings.GetStringFromName(aName);
-    } catch (ex) {
-      Services.console.logStringMessage("Error reading '" + aName + "'");
-      throw new Error("l10n error with " + aName);
-    }
-  },
 };
 
 XPCOMUtils.defineLazyGetter(this, "_strings", function() Services.strings
-        .createBundle("chrome://browser/locale/devtools/styleinspector.properties"));
+  .createBundle("chrome://browser/locale/devtools/styleinspector.properties"));
 
 XPCOMUtils.defineLazyGetter(this, "CssLogic", function() {
   let tmp = {};
diff --git a/browser/locales/en-US/chrome/browser/browser.dtd b/browser/locales/en-US/chrome/browser/browser.dtd
index 5c893c10d46c..e21494d37e5b 100644
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@@ -217,6 +217,8 @@ can reach it easily. -->
 <!ENTITY inspectButton.label            "Inspect">
 <!ENTITY inspectButton.accesskey        "I">
 <!ENTITY inspectCloseButton.tooltiptext "Close Inspector">
+<!ENTITY inspectStyleButton.label     "Style">
+<!ENTITY inspectStyleButton.accesskey "S">
 
 <!ENTITY getMoreDevtoolsCmd.label        "Get More Tools">
 <!ENTITY getMoreDevtoolsCmd.accesskey    "M">
diff --git a/browser/locales/en-US/chrome/browser/devtools/styleinspector.properties b/browser/locales/en-US/chrome/browser/devtools/styleinspector.properties
index 5d913306a27c..f04eb2b15fd0 100644
--- a/browser/locales/en-US/chrome/browser/devtools/styleinspector.properties
+++ b/browser/locales/en-US/chrome/browser/devtools/styleinspector.properties
@@ -30,7 +30,7 @@ group.Lists=Lists
 group.Effects_and_Other=Effects and Other
 
 # LOCALIZATION NOTE (style.highlighter.button): These strings are used inside
-# html tree of the highlighter for the style inspector button
-style.highlighter.button.label=Style
-style.highlighter.accesskey=S
+# sidebar of the Highlighter for the style inspector button
+style.highlighter.button.label1=Properties
+style.highlighter.accesskey1=P
 style.highlighter.button.tooltip=Inspect element styles
diff --git a/browser/themes/gnomestripe/browser/browser.css b/browser/themes/gnomestripe/browser/browser.css
index 54d484e8b3bd..65ff556485d7 100644
--- a/browser/themes/gnomestripe/browser/browser.css
+++ b/browser/themes/gnomestripe/browser/browser.css
@@ -29,6 +29,7 @@
  *   Dão Gottwald (dao@mozilla.com)
  *   Drew Willcoxon (adw@mozilla.com)
  *   Paul Rouget (paul@mozilla.com)
+ *   Rob Campbell (rcampbell@mozilla.com)
  *
  * Alternatively, the contents of this file may be used under the terms of
  * either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -1989,8 +1990,27 @@ panel[dimmed="true"] {
   -moz-padding-end: 0;
 }
 
+#devtools-sidebar-toolbar {
+  -moz-appearance: none;
+  padding: 4px 3px;
+  box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
+  background-image: -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
+}
+
+#devtools-side-splitter {
+  -moz-appearance: none;
+  border: 0;
+  -moz-border-start: 1px solid #242b33;
+  min-width: 0;
+  width: 3px;
+  background-color: transparent;
+  -moz-margin-end: -3px;
+  position: relative;
+}
+
 #inspector-inspect-toolbutton,
-#inspector-tools > toolbarbutton {
+#inspector-tools > toolbarbutton,
+#devtools-sidebar-toolbar > toolbarbutton {
   -moz-appearance: none;
   min-width: 78px;
   min-height: 22px;
@@ -2003,14 +2023,16 @@ panel[dimmed="true"] {
 }
 
 #inspector-inspect-toolbutton:not([checked]):hover:active,
-#inspector-tools > toolbarbutton:not([checked]):hover:active {
+#inspector-tools > toolbarbutton:not([checked]):hover:active,
+#devtools-sidebar-toolbar > toolbarbutton:not([checked]):hover:active {
   border-color: hsla(210,8%,5%,.6);
   background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
   box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
 }
 
 #inspector-inspect-toolbutton[checked],
-#inspector-tools > toolbarbutton[checked] {
+#inspector-tools > toolbarbutton[checked],
+#devtools-sidebar-toolbar > toolbarbutton[checked] {
   color: hsl(208,100%,60%) !important;
   border-color: hsla(210,8%,5%,.6) !important;
   background: -moz-linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
@@ -2018,12 +2040,14 @@ panel[dimmed="true"] {
 }
 
 #inspector-inspect-toolbutton[checked]:hover,
-#inspector-tools > toolbarbutton[checked]:hover {
+#inspector-tools > toolbarbutton[checked]:hover,
+#devtools-sidebar-toolbar > toolbarbutton[checked]:hover {
   background-color: transparent !important;
 }
 
 #inspector-inspect-toolbutton[checked]:hover:active,
-#inspector-tools > toolbarbutton[checked]:hover:active {
+#inspector-tools > toolbarbutton[checked]:hover:active,
+#devtools-sidebar-toolbar > toolbarbutton[checked]:hover:active {
   background-color: hsla(210,8%,5%,.2) !important;
 }
 
diff --git a/browser/themes/pinstripe/browser/browser.css b/browser/themes/pinstripe/browser/browser.css
index 474aa3cb6f52..bdb98e1e525d 100644
--- a/browser/themes/pinstripe/browser/browser.css
+++ b/browser/themes/pinstripe/browser/browser.css
@@ -28,6 +28,7 @@
  *   Stephen Horlander (stephen@noved.org)
  *   Drew Willcoxon (adw@mozilla.com)
  *   Paul Rouget (paul@mozilla.com)
+ *   Rob Campbell (rcampbell@mozilla.com)
  *
  * Alternatively, the contents of this file may be used under the terms of
  * either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -2567,8 +2568,27 @@ panel[dimmed="true"] {
   padding: 0 0 4px;
 }
 
+#devtools-sidebar-toolbar {
+  -moz-appearance: none;
+  padding: 4px 3px;
+  box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
+  background-image: -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
+}
+
+#devtools-side-splitter {
+  background-image: none !important;
+  border: 0;
+  -moz-border-start: 1px solid #242b33;
+  min-width: 0;
+  width: 3px;
+  background-color: transparent;
+  -moz-margin-end: -3px;
+  position: relative;
+}
+
 #inspector-inspect-toolbutton,
-#inspector-tools > toolbarbutton {
+#inspector-tools > toolbarbutton,
+#devtools-sidebar-toolbar > toolbarbutton {
   -moz-appearance: none;
   min-width: 78px;
   min-height: 22px;
@@ -2581,19 +2601,22 @@ panel[dimmed="true"] {
 }
 
 #inspector-inspect-toolbutton > .toolbarbutton-text ,
-#inspector-tools > toolbarbutton  > .toolbarbutton-text {
+#inspector-tools > toolbarbutton  > .toolbarbutton-text,
+#devtools-sidebar-toolbar > toolbarbutton > .toolbarbutton-text {
   margin: 1px 6px;
 }
 
 #inspector-inspect-toolbutton:not([checked]):hover:active,
-#inspector-tools > toolbarbutton:not([checked]):hover:active {
+#inspector-tools > toolbarbutton:not([checked]):hover:active,
+#devtools-sidebar-toolbar > toolbarbutton:not([checked]):hover:active {
   border-color: hsla(210,8%,5%,.6);
   background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
   box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
 }
 
 #inspector-inspect-toolbutton[checked],
-#inspector-tools > toolbarbutton[checked] {
+#inspector-tools > toolbarbutton[checked],
+#devtools-sidebar-toolbar > toolbarbutton[checked] {
   color: hsl(208,100%,60%) !important;
   border-color: hsla(210,8%,5%,.6);
   background: -moz-linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
@@ -2601,7 +2624,8 @@ panel[dimmed="true"] {
 }
 
 #inspector-inspect-toolbutton[checked]:hover:active,
-#inspector-tools > toolbarbutton[checked]:hover:active {
+#inspector-tools > toolbarbutton[checked]:hover:active,
+#devtools-sidebar-toolbar > toolbarbutton[checked]:hover:active {
   background-color: hsla(210,8%,5%,.2);
 }
 
diff --git a/browser/themes/winstripe/browser/browser.css b/browser/themes/winstripe/browser/browser.css
index 62c1a0ad44ed..9092fed5a0c4 100644
--- a/browser/themes/winstripe/browser/browser.css
+++ b/browser/themes/winstripe/browser/browser.css
@@ -29,6 +29,7 @@
  *   Jim Mathies (jmathies@mozilla.com)
  *   Drew Willcoxon (adw@mozilla.com)
  *   Paul Rouget (paul@mozilla.com)
+ *   Rob Campbell (rcampbell@mozilla.com)
  *
  * Alternatively, the contents of this file may be used under the terms of
  * either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -2661,8 +2662,26 @@ panel[dimmed="true"] {
   -moz-padding-end: 0;
 }
 
+#devtools-sidebar-toolbar {
+  -moz-appearance: none;
+  padding: 4px 3px;
+  box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
+  background-image: -moz-linear-gradient(top, hsl(209,18%,34%), hsl(210,24%,16%));
+}
+
+#devtools-side-splitter {
+  border: 0;
+  -moz-border-start: 1px solid #242b33;
+  min-width: 0;
+  width: 3px;
+  background-color: transparent;
+  -moz-margin-end: -3px;
+  position: relative;
+}
+
 #inspector-inspect-toolbutton,
-#inspector-tools > toolbarbutton {
+#inspector-tools > toolbarbutton,
+#devtools-sidebar-toolbar > toolbarbutton {
   -moz-appearance: none;
   min-width: 78px;
   min-height: 22px;
@@ -2675,19 +2694,22 @@ panel[dimmed="true"] {
 }
 
 #inspector-inspect-toolbutton > .toolbarbutton-icon,
-#inspector-tools > toolbarbutton  > .toolbarbutton-icon {
+#inspector-tools > toolbarbutton  > .toolbarbutton-icon,
+#devtools-sidebar-toolbar > toolbarbutton > .toolbarbutton-icon {
   margin: 0;
 }
 
 #inspector-inspect-toolbutton:not([checked]):hover:active,
-#inspector-tools > toolbarbutton:not([checked]):hover:active {
+#inspector-tools > toolbarbutton:not([checked]):hover:active,
+#devtools-sidebar-toolbar > toolbarbutton:not([checked]):hover:active {
   background-color: hsla(210,18%,9%,.1);
   background-image: -moz-linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2));
   box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
 }
 
 #inspector-inspect-toolbutton[checked],
-#inspector-tools > toolbarbutton[checked] {
+#inspector-tools > toolbarbutton[checked],
+#devtools-sidebar-toolbar > toolbarbutton[checked] {
   border-color: hsla(211,68%,6%,.6);
   background: -moz-linear-gradient(hsla(211,68%,6%,.1), hsla(211,68%,6%,.2));
   box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
@@ -2695,7 +2717,8 @@ panel[dimmed="true"] {
 }
 
 #inspector-inspect-toolbutton[checked]:hover:active,
-#inspector-tools > toolbarbutton[checked]:hover:active {
+#inspector-tools > toolbarbutton[checked]:hover:active,
+#devtools-sidebar-toolbar > toolbarbutton[checked]:hover:active {
   background-color: hsla(211,68%,6%,.2);
 }