From 4ea6d798057299cd218c1070826db31e1daa9e55 Mon Sep 17 00:00:00 2001
From: Julian Descottes <jdescottes@mozilla.com>
Date: Wed, 30 Mar 2016 12:11:35 +0200
Subject: [PATCH] Bug 1260053 - prevent sidebar resize when panel is
 collapsed;r=bgrins

The collapsible sidebar has min-height:35vh and max-height:75vh
when viewport-width < 700px (ie vertical layout).

These bounds should not apply when the panel is collapsed. The
collapsing relies on negative margins to hide the panel, which
can only work if the computed height remains constant once the
panel has been collapsed.

Added a new mochitest checking that the height and margin-bottom
are constant through a layout switch.

MozReview-Commit-ID: K6EGiBtJ11S

--HG--
extra : rebase_source : 5141f4610b586c32158d0b3ee2f50fda230f3c05
---
 devtools/client/inspector/test/browser.ini    |  1 +
 .../test/browser_inspector_pane-toggle-04.js  | 65 +++++++++++++++++++
 devtools/client/themes/widgets.css            |  4 +-
 3 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 devtools/client/inspector/test/browser_inspector_pane-toggle-04.js

diff --git a/devtools/client/inspector/test/browser.ini b/devtools/client/inspector/test/browser.ini
index b7433aef5de7..9002643d7dac 100644
--- a/devtools/client/inspector/test/browser.ini
+++ b/devtools/client/inspector/test/browser.ini
@@ -106,6 +106,7 @@ skip-if = (e10s && debug) # Bug 1250058 - Docshell leak on debug e10s
 [browser_inspector_pane-toggle-01.js]
 [browser_inspector_pane-toggle-02.js]
 [browser_inspector_pane-toggle-03.js]
+[browser_inspector_pane-toggle-04.js]
 [browser_inspector_picker-stop-on-destroy.js]
 [browser_inspector_picker-stop-on-tool-change.js]
 [browser_inspector_pseudoclass-lock.js]
diff --git a/devtools/client/inspector/test/browser_inspector_pane-toggle-04.js b/devtools/client/inspector/test/browser_inspector_pane-toggle-04.js
new file mode 100644
index 000000000000..520569c144ca
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_pane-toggle-04.js
@@ -0,0 +1,65 @@
+/* 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";
+
+let { Toolbox } = require("devtools/client/framework/toolbox");
+
+// Test that the dimensions of the collapsed inspector panel are not modified
+// when switching from horizontal to vertical layout, which is mandatory to make
+// sure the panel remains visually hidden (using negative margins).
+
+add_task(function* () {
+  info("Set temporary preferences to ensure a small sidebar width.");
+  yield new Promise(resolve => {
+    let options = {"set": [
+      ["devtools.toolsidebar-width.inspector", 200]
+    ]};
+    SpecialPowers.pushPrefEnv(options, resolve);
+  });
+
+  let { inspector, toolbox } = yield openInspectorForURL("about:blank");
+  let button = inspector.panelDoc.getElementById("inspector-pane-toggle");
+  let panel = inspector.panelDoc.querySelector("#inspector-sidebar");
+
+  info("Changing toolbox host to a window.");
+  yield toolbox.switchHost(Toolbox.HostType.WINDOW);
+
+  let hostWindow = toolbox._host._window;
+  let originalWidth = hostWindow.outerWidth;
+  let originalHeight = hostWindow.outerHeight;
+
+  info("Resizing window to switch to the horizontal layout.");
+  hostWindow.resizeTo(800, 300);
+
+  // Check the sidebar is expanded when the test starts.
+  ok(!panel.hasAttribute("pane-collapsed"), "The panel is in expanded state");
+
+  info("Collapse the inspector sidebar.");
+  let onTransitionEnd = once(panel, "transitionend");
+  EventUtils.synthesizeMouseAtCenter(button, {type: "mousedown"},
+    inspector.panelDoc.defaultView);
+  yield onTransitionEnd;
+
+  ok(panel.hasAttribute("pane-collapsed"), "The panel is in collapsed state");
+  let currentPanelHeight = panel.getBoundingClientRect().height;
+  let currentPanelMarginBottom = panel.style.marginBottom;
+
+  info("Resizing window to switch to the vertical layout.");
+  hostWindow.resizeTo(300, 800);
+
+  // Check the panel is collapsed, and still has the same dimensions.
+  ok(panel.hasAttribute("pane-collapsed"), "The panel is still collapsed");
+  is(panel.getBoundingClientRect().height, currentPanelHeight,
+    "The panel height has not been modified when changing the layout.");
+  is(panel.style.marginBottom, currentPanelMarginBottom,
+    "The panel margin-bottom has not been modified when changing the layout.");
+
+  info("Restoring window original size.");
+  hostWindow.resizeTo(originalWidth, originalHeight);
+});
+
+registerCleanupFunction(function() {
+  // Restore the host type for other tests.
+  Services.prefs.clearUserPref("devtools.toolbox.host");
+});
diff --git a/devtools/client/themes/widgets.css b/devtools/client/themes/widgets.css
index 7c7a394f86e9..94ae2a10c6bc 100644
--- a/devtools/client/themes/widgets.css
+++ b/devtools/client/themes/widgets.css
@@ -80,7 +80,9 @@
     cursor: n-resize;
   }
 
-  .devtools-responsive-container > .devtools-sidebar-tabs {
+  .devtools-responsive-container > .devtools-sidebar-tabs:not([pane-collapsed]) {
+    /* When the panel is collapsed min/max height should not be applied because
+       collapsing relies on negative margins, which implies constant height. */
     min-height: 35vh;
     max-height: 75vh;
   }