diff options
Diffstat (limited to 'devtools/client/inspector/test/browser_inspector_pane-toggle-02.js')
-rw-r--r-- | devtools/client/inspector/test/browser_inspector_pane-toggle-02.js | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_pane-toggle-02.js b/devtools/client/inspector/test/browser_inspector_pane-toggle-02.js new file mode 100644 index 0000000000..132f0feb7f --- /dev/null +++ b/devtools/client/inspector/test/browser_inspector_pane-toggle-02.js @@ -0,0 +1,85 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the 3 pane toggle button can toggle on and off the inspector's 3 pane mode, +// and the 3 panes rendered are all of equal widths in the BOTTOM host. + +add_task(async function () { + info("Switch to 2 pane inspector to test the 3 pane toggle button behavior"); + await pushPref("devtools.inspector.three-pane-enabled", false); + + const { inspector } = await openInspectorForURL("about:blank"); + const { panelDoc: doc } = inspector; + const button = doc.querySelector(".sidebar-toggle"); + const ruleViewSidebar = + inspector.sidebarSplitBoxRef.current.startPanelContainer; + const toolboxWidth = doc.getElementById("inspector-splitter-box").clientWidth; + + ok( + button.classList.contains("pane-collapsed"), + "The button is in collapsed state" + ); + + info("Click on the toggle button to toggle ON 3 pane inspector"); + let onRuleViewAdded = inspector.once("ruleview-added"); + EventUtils.synthesizeMouseAtCenter( + button, + {}, + inspector.panelDoc.defaultView + ); + await onRuleViewAdded; + + info("Checking the state of the 3 pane inspector"); + let sidebarWidth = inspector.splitBox.state.width; + const sidebarSplitBoxWidth = inspector.sidebarSplitBoxRef.current.state.width; + ok( + !button.classList.contains("pane-collapsed"), + "The button is in expanded state" + ); + ok(doc.getElementById("ruleview-panel"), "The rule view panel exist"); + is( + inspector.sidebar.getCurrentTabID(), + "layoutview", + "Layout view is shown in the sidebar" + ); + is( + ruleViewSidebar.style.display, + "block", + "The split rule view sidebar is displayed" + ); + is(sidebarWidth, (toolboxWidth * 2) / 3, "Got correct main split box width"); + is( + sidebarSplitBoxWidth, + toolboxWidth / 3, + "Got correct sidebar split box width" + ); + + info("Click on the toggle button to toggle OFF the 3 pane inspector"); + onRuleViewAdded = inspector.once("ruleview-added"); + EventUtils.synthesizeMouseAtCenter( + button, + {}, + inspector.panelDoc.defaultView + ); + await onRuleViewAdded; + + info("Checking the state of the 2 pane inspector"); + sidebarWidth = inspector.splitBox.state.width; + ok( + button.classList.contains("pane-collapsed"), + "The button is in collapsed state" + ); + is( + inspector.sidebar.getCurrentTabID(), + "ruleview", + "Rule view is shown in the sidebar" + ); + is( + ruleViewSidebar.style.display, + "none", + "The split rule view sidebar is hidden" + ); + is(sidebarWidth, sidebarSplitBoxWidth, "Got correct sidebar width"); +}); |