Bug 1119133 - Add a keyboard shortcut to toggle devtools docking mode between last two positions;r=pbrosset

browser/app/profile/firefox.js

@@ -1378,6 +1378,7 @@ pref("devtools.webide.enabled", true);
 pref("devtools.toolbox.footer.height", 250);
 pref("devtools.toolbox.sidebar.width", 500);
 pref("devtools.toolbox.host", "bottom");
+pref("devtools.toolbox.previousHost", "side");
 pref("devtools.toolbox.selectedTool", "webconsole");
 pref("devtools.toolbox.toolbarSpec", '["splitconsole", "paintflashing toggle","tilt toggle","scratchpad","resize toggle","eyedropper","screenshot --fullpage", "rulers"]');
 pref("devtools.toolbox.sideEnabled", true);

browser/devtools/framework/test/browser.ini

@@ -22,6 +22,7 @@ support-files =
 [browser_ignore_toolbox_network_requests.js]
 [browser_keybindings_01.js]
 [browser_keybindings_02.js]
+[browser_keybindings_03.js]
 [browser_new_activation_workflow.js]
 [browser_target_events.js]
 [browser_target_remote.js]

browser/devtools/framework/test/browser_keybindings_03.js

@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the toolbox 'switch to previous host' feature works.
+// Pressing ctrl/cmd+shift+d should switch to the last used host.
+
+const URL = "data:text/html;charset=utf8,test page for toolbox switching";
+
+add_task(function*() {
+  info("Create a test tab and open the toolbox");
+  let tab = yield addTab(URL);
+  let target = TargetFactory.forTab(tab);
+  let toolbox = yield gDevTools.showToolbox(target, "webconsole");
+
+  let keyElement = toolbox.doc.getElementById("toolbox-toggle-host-key");
+
+  let {SIDE, BOTTOM, WINDOW} = devtools.Toolbox.HostType;
+  checkHostType(toolbox, BOTTOM, SIDE);
+
+  info ("Switching from bottom to side");
+  synthesizeKeyElement(keyElement);
+  yield toolbox.once("host-changed");
+  checkHostType(toolbox, SIDE, BOTTOM);
+
+  info ("Switching from side to bottom");
+  synthesizeKeyElement(keyElement);
+  yield toolbox.once("host-changed");
+  checkHostType(toolbox, BOTTOM, SIDE);
+
+  info ("Switching to window");
+  yield toolbox.switchHost(WINDOW);
+  checkHostType(toolbox, WINDOW, BOTTOM);
+
+  info ("Switching from window to bottom");
+  synthesizeKeyElement(keyElement);
+  yield toolbox.once("host-changed");
+  checkHostType(toolbox, BOTTOM, WINDOW);
+
+  yield toolbox.destroy();
+  gBrowser.removeCurrentTab();
+});

browser/devtools/framework/test/browser_toolbox_hosts.js

@@ -2,37 +2,35 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-let temp = {}
-Cu.import("resource:///modules/devtools/gDevTools.jsm", temp);
-let DevTools = temp.DevTools;
-
-Cu.import("resource://gre/modules/devtools/Loader.jsm", temp);
-let devtools = temp.devtools;
-
-let Toolbox = devtools.Toolbox;
+"use strict";
 
+let {SIDE, BOTTOM, WINDOW} = devtools.Toolbox.HostType;
 let toolbox, target;
 
-function test()
-{
-  gBrowser.selectedTab = gBrowser.addTab();
-  target = TargetFactory.forTab(gBrowser.selectedTab);
+const URL = "data:text/html;charset=utf8,test for opening toolbox in different hosts";
 
-  gBrowser.selectedBrowser.addEventListener("load", function onLoad(evt) {
-    gBrowser.selectedBrowser.removeEventListener(evt.type, onLoad, true);
-    gDevTools.showToolbox(target)
-             .then(testBottomHost, console.error)
-             .then(null, console.error);
-  }, true);
+add_task(function* runTest() {
+  info("Create a test tab and open the toolbox");
+  let tab = yield addTab(URL);
+  target = TargetFactory.forTab(tab);
+  toolbox = yield gDevTools.showToolbox(target, "webconsole");
 
-  content.location = "data:text/html,test for opening toolbox in different hosts";
-}
+  yield testBottomHost();
+  yield testSidebarHost();
+  yield testWindowHost();
+  yield testToolSelect();
+  yield testDestroy();
+  yield testRememberHost();
+  yield testPreviousHost();
 
-function testBottomHost(aToolbox)
-{
-  toolbox = aToolbox;
+  yield toolbox.destroy();
 
-  checkHostType(Toolbox.HostType.BOTTOM);
+  toolbox = target = null;
+  gBrowser.removeCurrentTab();
+});
+
+function* testBottomHost() {
+  checkHostType(toolbox, BOTTOM);
 
   // test UI presence
   let nbox = gBrowser.getNotificationBox();
@@ -40,13 +38,11 @@ function testBottomHost(aToolbox)
   ok(iframe, "toolbox bottom iframe exists");
 
   checkToolboxLoaded(iframe);
-
-  toolbox.switchHost(Toolbox.HostType.SIDE).then(testSidebarHost);
 }
 
-function testSidebarHost()
-{
-  checkHostType(Toolbox.HostType.SIDE);
+function* testSidebarHost() {
+  yield toolbox.switchHost(SIDE);
+  checkHostType(toolbox, SIDE);
 
   // test UI presence
   let nbox = gBrowser.getNotificationBox();
@@ -57,13 +53,11 @@ function testSidebarHost()
   ok(iframe, "toolbox side iframe exists");
 
   checkToolboxLoaded(iframe);
-
-  toolbox.switchHost(Toolbox.HostType.WINDOW).then(testWindowHost);
 }
 
-function testWindowHost()
-{
-  checkHostType(Toolbox.HostType.WINDOW);
+function* testWindowHost() {
+  yield toolbox.switchHost(WINDOW);
+  checkHostType(toolbox, WINDOW);
 
   let nbox = gBrowser.getNotificationBox();
   let sidebar = document.getAnonymousElementByAttribute(nbox, "class", "devtools-toolbox-side-iframe");
@@ -74,57 +68,70 @@ function testWindowHost()
 
   let iframe = win.document.getElementById("toolbox-iframe");
   checkToolboxLoaded(iframe);
-
-  testToolSelect();
 }
 
-function testToolSelect()
-{
+function* testToolSelect() {
   // make sure we can load a tool after switching hosts
-  toolbox.selectTool("inspector").then(testDestroy);
+  yield toolbox.selectTool("inspector");
 }
 
-function testDestroy()
-{
-  toolbox.destroy().then(function() {
-    target = TargetFactory.forTab(gBrowser.selectedTab);
-    gDevTools.showToolbox(target).then(testRememberHost);
-  });
+function* testDestroy() {
+  yield toolbox.destroy();
+  target = TargetFactory.forTab(gBrowser.selectedTab);
+  toolbox = yield gDevTools.showToolbox(target);
 }
 
-function testRememberHost(aToolbox)
-{
-  toolbox = aToolbox;
+function* testRememberHost() {
   // last host was the window - make sure it's the same when re-opening
-  is(toolbox.hostType, Toolbox.HostType.WINDOW, "host remembered");
+  is(toolbox.hostType, WINDOW, "host remembered");
 
   let win = Services.wm.getMostRecentWindow("devtools:toolbox");
   ok(win, "toolbox separate window exists");
-
-  cleanup();
 }
 
-function checkHostType(hostType)
-{
-  is(toolbox.hostType, hostType, "host type is " + hostType);
+function* testPreviousHost() {
+  // last host was the window - make sure it's the same when re-opening
+  is(toolbox.hostType, WINDOW, "host remembered");
 
-  let pref = Services.prefs.getCharPref("devtools.toolbox.host");
-  is(pref, hostType, "host pref is " + hostType);
+  info("Switching to side");
+  yield toolbox.switchHost(SIDE);
+  checkHostType(toolbox, SIDE, WINDOW);
+
+  info("Switching to bottom");
+  yield toolbox.switchHost(BOTTOM);
+  checkHostType(toolbox, BOTTOM, SIDE);
+
+  info("Switching from bottom to side");
+  yield toolbox.switchToPreviousHost();
+  checkHostType(toolbox, SIDE, BOTTOM);
+
+  info("Switching from side to bottom");
+  yield toolbox.switchToPreviousHost();
+  checkHostType(toolbox, BOTTOM, SIDE);
+
+  info("Switching to window");
+  yield toolbox.switchHost(WINDOW);
+  checkHostType(toolbox, WINDOW, BOTTOM);
+
+  info("Switching from window to bottom");
+  yield toolbox.switchToPreviousHost();
+  checkHostType(toolbox, BOTTOM, WINDOW);
+
+  info("Forcing the previous host to match the current (bottom)")
+  Services.prefs.setCharPref("devtools.toolbox.previousHost", BOTTOM);
+
+  info("Switching from bottom to side (since previous=current=bottom");
+  yield toolbox.switchToPreviousHost();
+  checkHostType(toolbox, SIDE, BOTTOM);
+
+  info("Forcing the previous host to match the current (side)")
+  Services.prefs.setCharPref("devtools.toolbox.previousHost", SIDE);
+  info("Switching from side to bottom (since previous=current=side");
+  yield toolbox.switchToPreviousHost();
+  checkHostType(toolbox, BOTTOM, SIDE);
 }
 
-function checkToolboxLoaded(iframe)
-{
+function checkToolboxLoaded(iframe) {
   let tabs = iframe.contentDocument.getElementById("toolbox-tabs");
   ok(tabs, "toolbox UI has been loaded into iframe");
 }
-
-function cleanup()
-{
-  Services.prefs.setCharPref("devtools.toolbox.host", Toolbox.HostType.BOTTOM);
-
-  toolbox.destroy().then(function() {
-    DevTools = Toolbox = toolbox = target = null;
-    gBrowser.removeCurrentTab();
-    finish();
-  });
- }

browser/devtools/framework/test/browser_toolbox_window_reload_target.js

@@ -68,15 +68,6 @@ function testAllTheTools(docked, callback, toolNum=0) {
   });
 }
 
-function synthesizeKeyForToolbox(keyId) {
-  let el = toolbox.doc.getElementById(keyId);
-  let key = el.getAttribute("key") || el.getAttribute("keycode");
-  let mod = {};
-  el.getAttribute("modifiers").split(" ").forEach((m) => mod[m+"Key"] = true);
-  info("Synthesizing: key="+key+", mod="+JSON.stringify(mod));
-  EventUtils.synthesizeKey(key, mod, toolbox.doc.defaultView);
-}
-
 function testReload(key, docked, toolID, callback) {
   let complete = () => {
     gBrowser.selectedBrowser.messageManager.removeMessageListener("devtools:test:load", complete);
@@ -86,7 +77,8 @@ function testReload(key, docked, toolID, callback) {
 
   description = docked+" devtools with tool "+toolID+", key #" + key;
   info("Testing reload in "+description);
-  synthesizeKeyForToolbox(key);
+  let el = toolbox.doc.getElementById(key);
+  synthesizeKeyElement(el);
   reloadsSent++;
 }
 

browser/devtools/framework/test/head.js

@@ -109,3 +109,36 @@ function executeInContent(name, data={}, objects={}, expectResponse=true) {
     return promise.resolve();
   }
 }
+
+/**
+ * Synthesize a keypress from a <key> element, taking into account
+ * any modifiers.
+ * @param {Element} el the <key> element to synthesize
+ */
+function synthesizeKeyElement(el) {
+  let key = el.getAttribute("key") || el.getAttribute("keycode");
+  let mod = {};
+  el.getAttribute("modifiers").split(" ").forEach((m) => mod[m+"Key"] = true);
+  info(`Synthesizing: key=${key}, mod=${JSON.stringify(mod)}`);
+  EventUtils.synthesizeKey(key, mod, el.ownerDocument.defaultView);
+}
+
+/* Check the toolbox host type and prefs to make sure they match the
+ * expected values
+ * @param {Toolbox}
+ * @param {HostType} hostType
+ *        One of {SIDE, BOTTOM, WINDOW} from devtools.Toolbox.HostType
+ * @param {HostType} Optional previousHostType
+ *        The host that will be switched to when calling switchToPreviousHost
+ */
+function checkHostType(toolbox, hostType, previousHostType) {
+  is(toolbox.hostType, hostType, "host type is " + hostType);
+
+  let pref = Services.prefs.getCharPref("devtools.toolbox.host");
+  is(pref, hostType, "host pref is " + hostType);
+
+  if (previousHostType) {
+    is (Services.prefs.getCharPref("devtools.toolbox.previousHost"),
+      previousHostType, "The previous host is correct");
+  }
+}

browser/devtools/framework/test/shared-head.js

@@ -30,9 +30,11 @@ function getFrameScript() {
 }
 
 gDevTools.testing = true;
-SimpleTest.registerCleanupFunction(() => {
+registerCleanupFunction(() => {
   gDevTools.testing = false;
   Services.prefs.clearUserPref("devtools.dump.emit");
+  Services.prefs.clearUserPref("devtools.toolbox.host");
+  Services.prefs.clearUserPref("devtools.toolbox.previousHost");
 });
 
 registerCleanupFunction(function cleanup() {

browser/devtools/framework/toolbox.js

@@ -188,7 +188,8 @@ Toolbox.prototype = {
   _prefs: {
     LAST_HOST: "devtools.toolbox.host",
     LAST_TOOL: "devtools.toolbox.selectedTool",
-    SIDE_ENABLED: "devtools.toolbox.sideEnabled"
+    SIDE_ENABLED: "devtools.toolbox.sideEnabled",
+    PREVIOUS_HOST: "devtools.toolbox.previousHost"
   },
 
   currentToolId: null,
@@ -497,12 +498,16 @@ Toolbox.prototype = {
   _addHostListeners: function() {
     let nextKey = this.doc.getElementById("toolbox-next-tool-key");
     nextKey.addEventListener("command", this.selectNextTool.bind(this), true);
+
     let prevKey = this.doc.getElementById("toolbox-previous-tool-key");
     prevKey.addEventListener("command", this.selectPreviousTool.bind(this), true);
 
     let minimizeKey = this.doc.getElementById("toolbox-minimize-key");
     minimizeKey.addEventListener("command", this._toggleMinimizeMode, true);
 
+    let toggleKey = this.doc.getElementById("toolbox-toggle-host-key");
+    toggleKey.addEventListener("command", this.switchToPreviousHost.bind(this), true);
+
     // Split console uses keypress instead of command so the event can be
     // cancelled with stopPropagation on the keypress, and not preventDefault.
     this.doc.addEventListener("keypress", this._splitConsoleOnKeypress, false);
@@ -1579,6 +1584,26 @@ Toolbox.prototype = {
     return newHost;
   },
 
+  /**
+   * Switch to the last used host for the toolbox UI.
+   * This is determined by the devtools.toolbox.previousHost pref.
+   */
+  switchToPreviousHost: function() {
+    let hostType = Services.prefs.getCharPref(this._prefs.PREVIOUS_HOST);
+
+    // Handle the case where the previous host happens to match the current
+    // host. If so, switch to bottom if it's not already used, and side if not.
+    if (hostType === this._host.type) {
+      if (hostType === Toolbox.HostType.BOTTOM) {
+        hostType = Toolbox.HostType.SIDE;
+      } else {
+        hostType = Toolbox.HostType.BOTTOM;
+      }
+    }
+
+    return this.switchHost(hostType);
+  },
+
   /**
    * Switch to a new host for the toolbox UI. E.g. bottom, sidebar, window,
    * and focus the window when done.
@@ -1607,10 +1632,12 @@ Toolbox.prototype = {
       this._host.off("window-closed", this.destroy);
       this.destroyHost();
 
+      let prevHostType = this._host.type;
       this._host = newHost;
 
       if (this.hostType != Toolbox.HostType.CUSTOM) {
         Services.prefs.setCharPref(this._prefs.LAST_HOST, this._host.type);
+        Services.prefs.setCharPref(this._prefs.PREVIOUS_HOST, prevHostType);
       }
 
       this._buildDockButtons();

browser/devtools/framework/toolbox.xul

@@ -74,6 +74,10 @@
          key="&toolboxToggleMinimize.key;"
          oncommand="void(0);"
          modifiers="shift, accel"/>
+    <key id="toolbox-toggle-host-key"
+         key="&toolboxToggle.key;"
+         oncommand="void(0);"
+         modifiers="accel shift"/>
   </keyset>
 
   <popupset>

browser/locales/en-US/chrome/browser/devtools/toolbox.dtd

@@ -24,6 +24,7 @@
 <!-- This key is used with the accel+shift modifiers to minimize the toolbox -->
 <!ENTITY toolboxToggleMinimize.key     "U">
 
+<!ENTITY toolboxToggle.key             "d">
 <!-- LOCALIZATION NOTE (toolboxFramesButton): This is the label for
   -  the iframes menu list that appears only when the document has some.
   -  It allows you to switch the context of the whole toolbox. -->