diff -r 000000000000 -r 6474c204b198 browser/devtools/webconsole/test/browser_webconsole_split.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/browser/devtools/webconsole/test/browser_webconsole_split.js	Wed Dec 31 06:09:35 2014 +0100
@@ -0,0 +1,249 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+function test()
+{
+  // Test is slow on Linux EC2 instances - Bug 962931
+  requestLongerTimeout(2);
+
+  let {devtools} = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
+  let {Task} = Cu.import("resource://gre/modules/Task.jsm", {});
+  let Toolbox = devtools.Toolbox;
+  let toolbox;
+
+  addTab("data:text/html;charset=utf-8,Web Console test for splitting");
+  browser.addEventListener("load", function onLoad() {
+    browser.removeEventListener("load", onLoad, true);
+    testConsoleLoadOnDifferentPanel()
+  }, true);
+
+  function testConsoleLoadOnDifferentPanel()
+  {
+    info("About to check console loads even when non-webconsole panel is open");
+
+    openPanel("inspector").then(() => {
+      toolbox.on("webconsole-ready", () => {
+        ok(true, "Webconsole has been triggered as loaded while another tool is active");
+        testKeyboardShortcuts();
+      });
+
+      // Opens split console.
+      toolbox.toggleSplitConsole();
+    });
+  }
+
+  function testKeyboardShortcuts()
+  {
+    info("About to check that panel responds to ESCAPE keyboard shortcut");
+
+    toolbox.once("split-console", () => {
+      ok(true, "Split console has been triggered via ESCAPE keypress");
+      checkAllTools();
+    });
+
+    // Closes split console.
+    EventUtils.sendKey("ESCAPE", toolbox.frame.contentWindow);
+  }
+
+  function checkAllTools()
+  {
+    info("About to check split console with each panel individually.");
+
+    Task.spawn(function() {
+      yield openAndCheckPanel("jsdebugger");
+      yield openAndCheckPanel("inspector");
+      yield openAndCheckPanel("styleeditor");
+      yield openAndCheckPanel("jsprofiler");
+      yield openAndCheckPanel("netmonitor");
+
+      yield checkWebconsolePanelOpened();
+      testBottomHost();
+    });
+  }
+
+  function getCurrentUIState()
+  {
+    let win = toolbox.doc.defaultView;
+    let deck = toolbox.doc.querySelector("#toolbox-deck");
+    let webconsolePanel = toolbox.doc.querySelector("#toolbox-panel-webconsole");
+    let splitter = toolbox.doc.querySelector("#toolbox-console-splitter");
+
+    let containerHeight = parseFloat(win.getComputedStyle(deck.parentNode).getPropertyValue("height"));
+    let deckHeight = parseFloat(win.getComputedStyle(deck).getPropertyValue("height"));
+    let webconsoleHeight = parseFloat(win.getComputedStyle(webconsolePanel).getPropertyValue("height"));
+    let splitterVisibility = !splitter.getAttribute("hidden");
+    let openedConsolePanel = toolbox.currentToolId === "webconsole";
+    let cmdButton = toolbox.doc.querySelector("#command-button-splitconsole");
+
+    return {
+      deckHeight: deckHeight,
+      containerHeight: containerHeight,
+      webconsoleHeight: webconsoleHeight,
+      splitterVisibility: splitterVisibility,
+      openedConsolePanel: openedConsolePanel,
+      buttonSelected: cmdButton.hasAttribute("checked")
+    };
+  }
+
+  function checkWebconsolePanelOpened()
+  {
+    info("About to check special cases when webconsole panel is open.");
+
+    let deferred = promise.defer();
+
+    // Start with console split, so we can test for transition to main panel.
+    toolbox.toggleSplitConsole();
+
+    let currentUIState = 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");
+    ok (currentUIState.buttonSelected, "The command button is selected");
+
+    openPanel("webconsole").then(() => {
+
+      let currentUIState = 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");
+      ok (currentUIState.buttonSelected, "The command button is still selected.");
+
+      // Make sure splitting console does nothing while webconsole is opened
+      toolbox.toggleSplitConsole();
+
+      let currentUIState = 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");
+      ok (currentUIState.buttonSelected, "The command button is still selected.");
+
+      // Make sure that split state is saved after opening another panel
+      openPanel("inspector").then(() => {
+        let currentUIState = 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");
+        ok (currentUIState.buttonSelected, "The command button is still selected.");
+
+        toolbox.toggleSplitConsole();
+        deferred.resolve();
+
+      });
+    });
+    return deferred.promise;
+  }
+
+  function openPanel(toolId, callback)
+  {
+    let deferred = promise.defer();
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    gDevTools.showToolbox(target, toolId).then(function(box) {
+      toolbox = box;
+      deferred.resolve();
+    }).then(null, console.error);
+    return deferred.promise;
+  }
+
+  function openAndCheckPanel(toolId)
+  {
+    let deferred = promise.defer();
+    openPanel(toolId).then(() => {
+      info ("Checking toolbox for " + toolId);
+      checkToolboxUI(toolbox.getCurrentPanel());
+      deferred.resolve();
+    });
+    return deferred.promise;
+  }
+
+  function checkToolboxUI()
+  {
+    let currentUIState = 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");
+    ok (!currentUIState.buttonSelected, "The command button is not selected.");
+
+    toolbox.toggleSplitConsole();
+
+    let currentUIState = 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 (currentUIState.deckHeight + currentUIState.webconsoleHeight,
+          currentUIState.containerHeight,
+        "Everything adds up to container height");
+    ok (!currentUIState.openedConsolePanel, "The console panel is not the current tool");
+    ok (currentUIState.buttonSelected, "The command button is selected.");
+
+    toolbox.toggleSplitConsole();
+
+    let currentUIState = 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");
+    ok (!currentUIState.buttonSelected, "The command button is not selected.");
+  }
+
+  function testBottomHost()
+  {
+    checkHostType(Toolbox.HostType.BOTTOM);
+
+    checkToolboxUI();
+
+    toolbox.switchHost(Toolbox.HostType.SIDE).then(testSidebarHost);
+  }
+
+  function testSidebarHost()
+  {
+    checkHostType(Toolbox.HostType.SIDE);
+
+    checkToolboxUI();
+
+    toolbox.switchHost(Toolbox.HostType.WINDOW).then(testWindowHost);
+  }
+
+  function testWindowHost()
+  {
+    checkHostType(Toolbox.HostType.WINDOW);
+
+    checkToolboxUI();
+
+    toolbox.switchHost(Toolbox.HostType.BOTTOM).then(testDestroy);
+  }
+
+  function checkHostType(hostType)
+  {
+    is(toolbox.hostType, hostType, "host type is " + hostType);
+
+    let pref = Services.prefs.getCharPref("devtools.toolbox.host");
+    is(pref, hostType, "host pref is " + hostType);
+  }
+
+  function testDestroy()
+  {
+    toolbox.destroy().then(function() {
+      let target = TargetFactory.forTab(gBrowser.selectedTab);
+      gDevTools.showToolbox(target).then(finish);
+    });
+  }
+
+  function finish()
+  {
+    toolbox = null;
+    finishTest();
+  }
+}