1 files changed, 371 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..7253e3f7a5
--- /dev/null
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_split.js
@@ -0,0 +1,371 @@
+/* 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"
+    );
+    Assert.greater(
+      currentUIState.deckHeight,
+      0,
+      "Deck has a height > 0 when console is split"
+    );
+    Assert.greater(
+      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"
+    );
+    Assert.greater(
+      currentUIState.deckHeight,
+      0,
+      "Deck has a height > 0 when console is split"
+    );
+    Assert.greater(
+      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"
+    );
+    Assert.greater(
+      currentUIState.deckHeight,
+      0,
+      "Deck has a height > 0 when console is split"
+    );
+    Assert.greater(
+      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);
+  }
+});