Bug 994055 - Part 1: Add a toggle sidebar panel button to the inspector. r=miker

This adds a new icon, next to the searchbox (like in the debugger) to expand
or collapse the sidebar panel in the inspector.
The state is *not* persisted yet when the toolbox is closed.
The button is hidden when the toolbox host switches to 'side'.

browser/devtools/inspector/inspector-panel.js

@@ -11,6 +11,7 @@ Cu.import("resource://gre/modules/Services.jsm");
 let promise = require("resource://gre/modules/Promise.jsm").Promise;
 let EventEmitter = require("devtools/toolkit/event-emitter");
 let clipboard = require("sdk/clipboard");
+let {HostType} = require("devtools/framework/toolbox").Toolbox;
 
 loader.lazyGetter(this, "MarkupView", () => require("devtools/markupview/markup-view").MarkupView);
 loader.lazyGetter(this, "HTMLBreadcrumbs", () => require("devtools/inspector/breadcrumbs").HTMLBreadcrumbs);
@@ -144,6 +145,9 @@ InspectorPanel.prototype = {
 
     this.breadcrumbs = new HTMLBreadcrumbs(this);
 
+    this.onToolboxHostChanged = this.onToolboxHostChanged.bind(this);
+    this._toolbox.on("host-changed", this.onToolboxHostChanged);
+
     if (this.target.isLocalTab) {
       this.browser = this.target.tab.linkedBrowser;
       this.scheduleLayoutChange = this.scheduleLayoutChange.bind(this);
@@ -350,6 +354,19 @@ InspectorPanel.prototype = {
     }
 
     this.sidebar.show();
+
+    this.setupSidebarToggle();
+  },
+
+  /**
+   * Add the expand/collapse behavior for the sidebar panel.
+   */
+  setupSidebarToggle: function() {
+    this._paneToggleButton = this.panelDoc.getElementById("inspector-pane-toggle");
+    this.onPaneToggleButtonClicked = this.onPaneToggleButtonClicked.bind(this);
+    this._paneToggleButton.addEventListener("mousedown",
+      this.onPaneToggleButtonClicked);
+    this.updatePaneToggleButton();
   },
 
   /**
@@ -553,6 +570,7 @@ InspectorPanel.prototype = {
     this.target.off("thread-paused", this.updateDebuggerPausedWarning);
     this.target.off("thread-resumed", this.updateDebuggerPausedWarning);
     this._toolbox.off("select", this.updateDebuggerPausedWarning);
+    this._toolbox.off("host-changed", this.onToolboxHostChanged);
 
     this.sidebar.off("select", this._setDefaultSidebar);
     let sidebarDestroyer = this.sidebar.destroy();
@@ -561,6 +579,9 @@ InspectorPanel.prototype = {
     this.nodemenu.removeEventListener("popupshowing", this._setupNodeMenu, true);
     this.nodemenu.removeEventListener("popuphiding", this._resetNodeMenu, true);
     this.breadcrumbs.destroy();
+    this._paneToggleButton.removeEventListener("mousedown",
+      this.onPaneToggleButtonClicked);
+    this._paneToggleButton = null;
     this.searchSuggestions.destroy();
     this.searchBox = null;
     this.selection.off("new-node-front", this.onNewSelection);
@@ -784,6 +805,47 @@ InspectorPanel.prototype = {
     return destroyPromise;
   },
 
+  /**
+   * When the type of toolbox host changes.
+   */
+  onToolboxHostChanged: function() {
+    this.updatePaneToggleButton();
+  },
+
+  /**
+   * When the pane toggle button is clicked, toggle the pane, change the button
+   * state and tooltip.
+   */
+  onPaneToggleButtonClicked: function(e) {
+    let sidePane = this.panelDoc.querySelector("#inspector-sidebar");
+    let button = this._paneToggleButton;
+    let isVisible = !button.hasAttribute("pane-collapsed");
+
+    ViewHelpers.togglePane({
+      visible: !isVisible,
+      animated: true,
+      delayed: true
+    }, sidePane);
+
+    if (isVisible) {
+      button.setAttribute("pane-collapsed", "");
+      button.setAttribute("tooltiptext",
+        this.strings.GetStringFromName("inspector.expandPane"));
+    } else {
+      button.removeAttribute("pane-collapsed");
+      button.setAttribute("tooltiptext",
+        this.strings.GetStringFromName("inspector.collapsePane"));
+    }
+  },
+
+  /**
+   * Update the pane toggle button visibility depending on the toolbox host type.
+   */
+  updatePaneToggleButton: function() {
+    this._paneToggleButton.setAttribute("hidden",
+      this._toolbox.hostType === HostType.SIDE);
+  },
+
   /**
    * Toggle a pseudo class.
    */

browser/devtools/inspector/inspector.xul

@@ -121,6 +121,9 @@
           timeout="50"
           class="devtools-searchinput"
           placeholder="&inspectorSearchHTML.label2;"/>
+        <toolbarbutton id="inspector-pane-toggle"
+          class="devtools-toolbarbutton"
+          tabindex="0" />
       </toolbar>
       <vbox flex="1" id="markup-box">
       </vbox>

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

@@ -54,3 +54,13 @@ previewTooltip.image.brokenImage=Could not load the image
 
 #LOCALIZATION NOTE: Used in the image preview tooltip when the image could not be loaded
 eventsTooltip.openInDebugger=Open in Debugger
+
+# LOCALIZATION NOTE (inspector.collapsePane): This is the tooltip for the button
+# that collapses the right panel (rules, computed, box-model, etc...) in the
+# inspector UI.
+inspector.collapsePane=Collapse pane
+
+# LOCALIZATION NOTE (inspector.expandPane): This is the tooltip for the button
+# that expands the right panel (rules, computed, box-model, etc...) in the
+# inspector UI.
+inspector.expandPane=Expand pane

browser/themes/shared/devtools/inspector.css

@@ -39,6 +39,44 @@
   max-width: 200px !important;
 }
 
+/* Expand/collapse panel toolbar button */
+
+#inspector-pane-toggle {
+  background: none;
+  box-shadow: none;
+  border: none;
+  list-style-image: url(debugger-collapse.png);
+  -moz-image-region: rect(0px,16px,16px,0px);
+}
+
+#inspector-pane-toggle > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+}
+
+#inspector-pane-toggle[pane-collapsed] {
+  list-style-image: url(debugger-expand.png);
+}
+
+#inspector-pane-toggle:active {
+  -moz-image-region: rect(0px,32px,16px,16px);
+}
+
+@media (min-resolution: 2dppx) {
+  #inspector-pane-toggle {
+    list-style-image: url(debugger-collapse@2x.png);
+    -moz-image-region: rect(0px,32px,32px,0px);
+  }
+
+  #inspector-pane-toggle[pane-collapsed] {
+    list-style-image: url(debugger-expand@2x.png);
+  }
+
+  #inspector-pane-toggle:active {
+    -moz-image-region: rect(0px,64px,32px,32px);
+  }
+}
+
 /* Tooltip: Events */
 
 #devtools-tooltip-events-container {