summaryrefslogtreecommitdiffstats
path: root/devtools/client/webconsole/test/browser/browser_webconsole_split.js
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/webconsole/test/browser/browser_webconsole_split.js')
-rw-r--r--devtools/client/webconsole/test/browser/browser_webconsole_split.js365
1 files changed, 365 insertions, 0 deletions
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_split.js b/devtools/client/webconsole/test/browser/browser_webconsole_split.js
new file mode 100644
index 0000000000..3d39cb74d0
--- /dev/null
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_split.js
@@ -0,0 +1,365 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URI =
+ "data:text/html;charset=utf-8,<!DOCTYPE html>Web Console test for splitting";
+
+// Test is slow on Linux EC2 instances - Bug 962931
+requestLongerTimeout(4);
+
+add_task(async function () {
+ let toolbox;
+ const getFluentString = await getFluentStringHelper([
+ "devtools/client/toolbox.ftl",
+ ]);
+ const hideSplitConsoleLabel = getFluentString(
+ "toolbox-meatball-menu-hideconsole-label"
+ );
+
+ await addTab(TEST_URI);
+ await testConsoleLoadOnDifferentPanel();
+ await testKeyboardShortcuts();
+ await checkAllTools();
+
+ info("Testing host types");
+ checkHostType(Toolbox.HostType.BOTTOM);
+ await checkToolboxUI();
+ await toolbox.switchHost(Toolbox.HostType.RIGHT);
+ checkHostType(Toolbox.HostType.RIGHT);
+ await checkToolboxUI();
+ await toolbox.switchHost(Toolbox.HostType.WINDOW);
+
+ // checkHostType, below, will open the meatball menu to read the "Split
+ // console" menu item label. However, if we've just opened a new window then
+ // on some platforms when we switch focus to the new window we might end up
+ // triggering the auto-close behavior on the menu popup. To avoid that, wait
+ // a moment before querying the menu.
+ await new Promise(resolve => requestIdleCallback(resolve));
+
+ checkHostType(Toolbox.HostType.WINDOW);
+ await checkToolboxUI();
+ await toolbox.switchHost(Toolbox.HostType.BOTTOM);
+
+ async function testConsoleLoadOnDifferentPanel() {
+ info("About to check console loads even when non-webconsole panel is open");
+
+ await openPanel("inspector");
+ const webconsoleReady = toolbox.once("webconsole-ready");
+ await toolbox.toggleSplitConsole();
+ await webconsoleReady;
+ ok(
+ true,
+ "Webconsole has been triggered as loaded while another tool is active"
+ );
+ }
+
+ async function testKeyboardShortcuts() {
+ info("About to check that panel responds to ESCAPE keyboard shortcut");
+
+ const splitConsoleReady = toolbox.once("split-console");
+ EventUtils.sendKey("ESCAPE", toolbox.win);
+ await splitConsoleReady;
+ ok(true, "Split console has been triggered via ESCAPE keypress");
+ }
+
+ async function checkAllTools() {
+ info("About to check split console with each panel individually.");
+ await openAndCheckPanel("jsdebugger");
+ await openAndCheckPanel("inspector");
+ await openAndCheckPanel("styleeditor");
+ await openAndCheckPanel("performance");
+ await openAndCheckPanel("netmonitor");
+
+ await checkWebconsolePanelOpened();
+ }
+
+ async function getCurrentUIState() {
+ const deck = toolbox.doc.querySelector("#toolbox-deck");
+ const webconsolePanel = toolbox.webconsolePanel;
+ const splitter = toolbox.doc.querySelector("#toolbox-console-splitter");
+
+ const containerHeight = deck.parentNode.getBoundingClientRect().height;
+ const deckHeight = deck.getBoundingClientRect().height;
+ const webconsoleHeight = webconsolePanel.getBoundingClientRect().height;
+ const splitterVisibility = !splitter.hidden;
+ // Splitter height will be 1px since the margin is negative.
+ const splitterHeight = splitterVisibility ? 1 : 0;
+ const openedConsolePanel = toolbox.currentToolId === "webconsole";
+ const menuLabel = await getMenuLabel(toolbox);
+
+ return {
+ deckHeight,
+ containerHeight,
+ webconsoleHeight,
+ splitterVisibility,
+ splitterHeight,
+ openedConsolePanel,
+ menuLabel,
+ };
+ }
+
+ async function getMenuLabel() {
+ const button = toolbox.doc.getElementById("toolbox-meatball-menu-button");
+ const onPopupShown = new Promise(
+ resolve => {
+ toolbox.doc.addEventListener("popupshown", () => resolve());
+ },
+ { once: true }
+ );
+ info("Click on menu and wait for the popup to be visible");
+ AccessibilityUtils.setEnv({
+ // Toobox toolbar buttons are handled with arrow keys.
+ nonNegativeTabIndexRule: false,
+ });
+ EventUtils.sendMouseEvent({ type: "click" }, button);
+ AccessibilityUtils.resetEnv();
+ await onPopupShown;
+
+ const menuItem = toolbox.doc.getElementById(
+ "toolbox-meatball-menu-splitconsole"
+ );
+
+ // Return undefined if the menu item is not available
+ let label;
+ if (menuItem && menuItem.querySelector(".label")) {
+ label =
+ menuItem.querySelector(".label").textContent === hideSplitConsoleLabel
+ ? "hide"
+ : "split";
+ }
+
+ // Wait for menu to close
+ const onPopupHide = new Promise(resolve => {
+ toolbox.doc.addEventListener(
+ "popuphidden",
+ () => {
+ resolve(label);
+ },
+ { once: true }
+ );
+ });
+ info("Hit escape and wait for the popup to be closed");
+ EventUtils.sendKey("ESCAPE", toolbox.win);
+ await onPopupHide;
+
+ return label;
+ }
+
+ async function checkWebconsolePanelOpened() {
+ info("About to check special cases when webconsole panel is open.");
+
+ // Start with console split, so we can test for transition to main panel.
+ await toolbox.toggleSplitConsole();
+
+ let currentUIState = await getCurrentUIState();
+
+ ok(
+ currentUIState.splitterVisibility,
+ "Splitter is visible when console is split"
+ );
+ ok(
+ currentUIState.deckHeight > 0,
+ "Deck has a height > 0 when console is split"
+ );
+ ok(
+ currentUIState.webconsoleHeight > 0,
+ "Web console has a height > 0 when console is split"
+ );
+ ok(
+ !currentUIState.openedConsolePanel,
+ "The console panel is not the current tool"
+ );
+ is(
+ currentUIState.menuLabel,
+ "hide",
+ "The menu item indicates the console is split"
+ );
+
+ await openPanel("webconsole");
+ currentUIState = await getCurrentUIState();
+
+ ok(
+ !currentUIState.splitterVisibility,
+ "Splitter is hidden when console is opened."
+ );
+ is(
+ currentUIState.deckHeight,
+ 0,
+ "Deck has a height == 0 when console is opened."
+ );
+ is(
+ currentUIState.webconsoleHeight,
+ currentUIState.containerHeight,
+ "Web console is full height."
+ );
+ ok(
+ currentUIState.openedConsolePanel,
+ "The console panel is the current tool"
+ );
+ is(
+ currentUIState.menuLabel,
+ undefined,
+ "The menu item is hidden when console is opened"
+ );
+
+ // Make sure splitting console does nothing while webconsole is opened
+ await toolbox.toggleSplitConsole();
+
+ currentUIState = await getCurrentUIState();
+
+ ok(
+ !currentUIState.splitterVisibility,
+ "Splitter is hidden when console is opened."
+ );
+ is(
+ currentUIState.deckHeight,
+ 0,
+ "Deck has a height == 0 when console is opened."
+ );
+ is(
+ currentUIState.webconsoleHeight,
+ currentUIState.containerHeight,
+ "Web console is full height."
+ );
+ ok(
+ currentUIState.openedConsolePanel,
+ "The console panel is the current tool"
+ );
+ is(
+ currentUIState.menuLabel,
+ undefined,
+ "The menu item is hidden when console is opened"
+ );
+
+ // Make sure that split state is saved after opening another panel
+ await openPanel("inspector");
+ currentUIState = await getCurrentUIState();
+ ok(
+ currentUIState.splitterVisibility,
+ "Splitter is visible when console is split"
+ );
+ ok(
+ currentUIState.deckHeight > 0,
+ "Deck has a height > 0 when console is split"
+ );
+ ok(
+ currentUIState.webconsoleHeight > 0,
+ "Web console has a height > 0 when console is split"
+ );
+ ok(
+ !currentUIState.openedConsolePanel,
+ "The console panel is not the current tool"
+ );
+ is(
+ currentUIState.menuLabel,
+ "hide",
+ "The menu item still indicates the console is split"
+ );
+
+ await toolbox.toggleSplitConsole();
+ }
+
+ async function checkToolboxUI() {
+ let currentUIState = await getCurrentUIState();
+
+ ok(!currentUIState.splitterVisibility, "Splitter is hidden by default");
+ is(
+ currentUIState.deckHeight,
+ currentUIState.containerHeight,
+ "Deck has a height > 0 by default"
+ );
+ is(
+ currentUIState.webconsoleHeight,
+ 0,
+ "Web console is collapsed by default"
+ );
+ ok(
+ !currentUIState.openedConsolePanel,
+ "The console panel is not the current tool"
+ );
+ is(
+ currentUIState.menuLabel,
+ "split",
+ "The menu item indicates the console is not split"
+ );
+
+ await toolbox.toggleSplitConsole();
+
+ currentUIState = await getCurrentUIState();
+
+ ok(
+ currentUIState.splitterVisibility,
+ "Splitter is visible when console is split"
+ );
+ ok(
+ currentUIState.deckHeight > 0,
+ "Deck has a height > 0 when console is split"
+ );
+ ok(
+ currentUIState.webconsoleHeight > 0,
+ "Web console has a height > 0 when console is split"
+ );
+ is(
+ Math.round(
+ currentUIState.deckHeight +
+ currentUIState.webconsoleHeight +
+ currentUIState.splitterHeight
+ ),
+ Math.round(currentUIState.containerHeight),
+ "Everything adds up to container height"
+ );
+ ok(
+ !currentUIState.openedConsolePanel,
+ "The console panel is not the current tool"
+ );
+ is(
+ currentUIState.menuLabel,
+ "hide",
+ "The menu item indicates the console is split"
+ );
+
+ await toolbox.toggleSplitConsole();
+
+ currentUIState = await getCurrentUIState();
+
+ ok(!currentUIState.splitterVisibility, "Splitter is hidden after toggling");
+ is(
+ currentUIState.deckHeight,
+ currentUIState.containerHeight,
+ "Deck has a height > 0 after toggling"
+ );
+ is(
+ currentUIState.webconsoleHeight,
+ 0,
+ "Web console is collapsed after toggling"
+ );
+ ok(
+ !currentUIState.openedConsolePanel,
+ "The console panel is not the current tool"
+ );
+ is(
+ currentUIState.menuLabel,
+ "split",
+ "The menu item indicates the console is not split"
+ );
+ }
+
+ async function openPanel(toolId) {
+ const tab = gBrowser.selectedTab;
+ toolbox = await gDevTools.showToolboxForTab(tab, { toolId });
+ }
+
+ async function openAndCheckPanel(toolId) {
+ await openPanel(toolId);
+ await checkToolboxUI(toolbox.getCurrentPanel());
+ }
+
+ function checkHostType(hostType) {
+ is(toolbox.hostType, hostType, "host type is " + hostType);
+
+ const pref = Services.prefs.getCharPref("devtools.toolbox.host");
+ is(pref, hostType, "host pref is " + hostType);
+ }
+});