Bug 1260053 - prevent sidebar resize when panel is collapsed; r=bgrins, a=ritu
authorJulian Descottes <jdescottes@mozilla.com>
Wed, 30 Mar 2016 12:11:35 +0200
changeset 325810 aa68d889de64381a0d3741656c584ed36755167b
parent 325809 f92ec72e8b75b2f701b0f7a6e0c46d7c4dbfe907
child 325811 0066805fc2693643158737389d120851b3601cbb
push id1128
push userjlund@mozilla.com
push dateWed, 01 Jun 2016 01:31:59 +0000
treeherdermozilla-release@fe0d30de989d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins, ritu
bugs1260053
milestone47.0a2
Bug 1260053 - prevent sidebar resize when panel is collapsed; r=bgrins, a=ritu 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
devtools/client/inspector/test/browser.ini
devtools/client/inspector/test/browser_inspector_pane-toggle-04.js
devtools/client/themes/widgets.css
--- a/devtools/client/inspector/test/browser.ini
+++ b/devtools/client/inspector/test/browser.ini
@@ -91,16 +91,17 @@ skip-if = (e10s && debug) # Bug 1250058 
 [browser_inspector_menu-03-paste-items.js]
 [browser_inspector_menu-04-use-in-console.js]
 [browser_inspector_menu-05-attribute-items.js]
 [browser_inspector_menu-06-other.js]
 [browser_inspector_navigation.js]
 [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]
 [browser_inspector_pseudoclass-menu.js]
 [browser_inspector_reload-01.js]
 [browser_inspector_reload-02.js]
 [browser_inspector_remove-iframe-during-load.js]
 [browser_inspector_search-01.js]
new file mode 100644
--- /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");
+});
--- a/devtools/client/themes/widgets.css
+++ b/devtools/client/themes/widgets.css
@@ -75,17 +75,19 @@
     -moz-margin-start: 0;
     width: auto;
     min-width: 0;
 
     /* In some edge case the cursor is not changed to n-resize */
     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;
   }
 
   .devtools-responsive-container .generic-toggled-pane {
     /* To hide generic-toggled-pane, negative margins are applied dynamically.
      * If a vertical layout, the pane is on the bottom and should be hidden
      * using negative bottom margin only.