--- a/devtools/client/inspector/inspector-panel.js
+++ b/devtools/client/inspector/inspector-panel.js
@@ -85,17 +85,16 @@ function InspectorPanel(iframeWindow, to
   this._onBeforeNavigate = this._onBeforeNavigate.bind(this);
   this.onNewRoot = this.onNewRoot.bind(this);
   this._setupNodeMenu = this._setupNodeMenu.bind(this);
   this._resetNodeMenu = this._resetNodeMenu.bind(this);
   this._updateSearchResultsLabel = this._updateSearchResultsLabel.bind(this);
   this.onNewSelection = this.onNewSelection.bind(this);
   this.onBeforeNewSelection = this.onBeforeNewSelection.bind(this);
   this.onDetached = this.onDetached.bind(this);
-  this.onToolboxHostChanged = this.onToolboxHostChanged.bind(this);
   this.onPaneToggleButtonClicked = this.onPaneToggleButtonClicked.bind(this);
   this._onMarkupFrameLoad = this._onMarkupFrameLoad.bind(this);
 
   this._target.on("will-navigate", this._onBeforeNavigate);
 
   EventEmitter.decorate(this);
 }
 
@@ -162,18 +161,16 @@ InspectorPanel.prototype = {
     this.nodemenu.addEventListener("popuphiding", this._resetNodeMenu, true);
 
     this.selection.on("new-node-front", this.onNewSelection);
     this.selection.on("before-new-node-front", this.onBeforeNewSelection);
     this.selection.on("detached-front", this.onDetached);
 
     this.breadcrumbs = new HTMLBreadcrumbs(this);
 
-    this._toolbox.on("host-changed", this.onToolboxHostChanged);
-
     if (this.target.isLocalTab) {
       // Show a warning when the debugger is paused.
       // We show the warning only when the inspector
       // is selected.
       this.updateDebuggerPausedWarning = () => {
         let notificationBox = this._toolbox.getNotificationBox();
         let notification = notificationBox.getNotificationWithValue("inspector-script-paused");
         if (!notification && this._toolbox.currentToolId == "inspector" &&
@@ -381,17 +378,16 @@ InspectorPanel.prototype = {
 
   /**
    * Add the expand/collapse behavior for the sidebar panel.
    */
   setupSidebarToggle: function() {
     this._paneToggleButton = this.panelDoc.getElementById("inspector-pane-toggle");
     this._paneToggleButton.addEventListener("mousedown",
       this.onPaneToggleButtonClicked);
-    this.updatePaneToggleButton();
   },
 
   /**
    * Reset the inspector on new root mutation.
    */
   onNewRoot: function() {
     this._defaultNode = null;
     this.selection.setNodeFront(null);
@@ -577,17 +573,16 @@ InspectorPanel.prototype = {
 
     this.cancelUpdate();
 
     this.target.off("will-navigate", this._onBeforeNavigate);
 
     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);
 
     if (this.ruleview) {
       this.ruleview.destroy();
     }
 
     if (this.computedview) {
       this.computedview.destroy();
     }
@@ -975,23 +970,16 @@ InspectorPanel.prototype = {
     }
 
     this._markupBox = null;
 
     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");
 
@@ -1018,24 +1006,16 @@ InspectorPanel.prototype = {
       button.setAttribute("tooltiptext", strings.GetStringFromName("inspector.expandPane"));
     } else {
       button.removeAttribute("pane-collapsed");
       button.setAttribute("tooltiptext", 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.
    */
   togglePseudoClass: function(aPseudo) {
     if (this.selection.isElementNode()) {
       let node = this.selection.nodeFront;
       if (node.hasPseudoClassLock(aPseudo)) {
         return this.walker.removePseudoClassLock(node, aPseudo, {parents: true});
       }

--- a/devtools/client/inspector/test/browser_inspector_pane-toggle-01.js
+++ b/devtools/client/inspector/test/browser_inspector_pane-toggle-01.js
@@ -1,23 +1,25 @@
 /* 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/ */
 "use strict";
 
 // Test that the inspector panel has a sidebar pane toggle button, and that
-// this button is hidden when the toolbox is in SIDE mode.
+// this button is visible both in BOTTOM and SIDE hosts.
 
 add_task(function* () {
   info("Open the inspector in a bottom toolbox host");
   let {toolbox, inspector} = yield openInspectorForURL("about:blank", "bottom");
 
   let button = inspector.panelDoc.getElementById("inspector-pane-toggle");
   ok(button, "The toggle button exists in the DOM");
   is(button.parentNode.id, "inspector-toolbar", "The toggle button is in the toolbar");
   ok(!button.hasAttribute("pane-collapsed"), "The button is in expanded state");
   ok(!!button.getClientRects().length, "The button is visible");
 
   info("Switch the host to side type");
   yield toolbox.switchHost("side");
 
-  ok(!button.getClientRects().length, "The button is hidden");
+  ok(!!button.getClientRects().length, "The button is still visible");
+  ok(!button.hasAttribute("pane-collapsed"),
+     "The button is still in expanded state");
 });

--- a/devtools/client/inspector/test/browser_inspector_pane-toggle-02.js
+++ b/devtools/client/inspector/test/browser_inspector_pane-toggle-02.js
@@ -1,24 +1,42 @@
 /* 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/ */
 "use strict";
 
-// Test that the inspector panel has its toggle pane button hidden by default
-// when it is opened in a "side" host, and that the button becomes visible when
-// the toolbox is switched to a "bottom" host.
+// Test that the inspector toggled panel is visible by default, is hidden after
+// clicking on the toggle button and remains expanded/collapsed when switching
+// hosts.
 
 add_task(function* () {
   info("Open the inspector in a side toolbox host");
   let {toolbox, inspector} = yield openInspectorForURL("about:blank", "side");
 
+  let panel = inspector.panelDoc.querySelector("#inspector-sidebar");
   let button = inspector.panelDoc.getElementById("inspector-pane-toggle");
-  ok(button, "The toggle button exists in the DOM");
-  is(button.parentNode.id, "inspector-toolbar", "The toggle button is in the toolbar");
-  ok(!button.hasAttribute("pane-collapsed"), "The button is in expanded state");
-  ok(!button.getClientRects().length, "The button is hidden");
+  ok(!panel.hasAttribute("pane-collapsed"), "The panel is in expanded state");
+
+  info("Listen to the end of the animation on the sidebar panel");
+  let onTransitionEnd = once(panel, "transitionend");
+
+  info("Click on the toggle button");
+  EventUtils.synthesizeMouseAtCenter(button, {type: "mousedown"},
+    inspector.panelDoc.defaultView);
+
+  yield onTransitionEnd;
+  ok(panel.hasAttribute("pane-collapsed"), "The panel is in collapsed state");
+  ok(!panel.hasAttribute("animated"),
+    "The collapsed panel will not perform unwanted animations");
 
   info("Switch the host to bottom type");
   yield toolbox.switchHost("bottom");
+  ok(panel.hasAttribute("pane-collapsed"), "The panel is in collapsed state");
 
-  ok(!!button.getClientRects().length, "The button is visible");
+  info("Click on the toggle button to expand the panel again");
+
+  onTransitionEnd = once(panel, "transitionend");
+  EventUtils.synthesizeMouseAtCenter(button, {type: "mousedown"},
+    inspector.panelDoc.defaultView);
+  yield onTransitionEnd;
+
+  ok(!panel.hasAttribute("pane-collapsed"), "The panel is in expanded state");
 });

--- a/devtools/client/inspector/test/browser_inspector_pane-toggle-03.js
+++ b/devtools/client/inspector/test/browser_inspector_pane-toggle-03.js
@@ -1,14 +1,15 @@
 /* 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/ */
 "use strict";
 
-// Test that the sidebar panel toggle button actually works.
+// Test that the toggle button can collapse and expand the inspector side/bottom
+// panel, and that the appropriate attributes are updated in the process.
 
 add_task(function* () {
   let {inspector} = yield openInspectorForURL("about:blank");
 
   let button = inspector.panelDoc.getElementById("inspector-pane-toggle");
   let panel = inspector.panelDoc.querySelector("#inspector-sidebar");
 
   ok(!button.hasAttribute("pane-collapsed"), "The button is in expanded state");