Bug 999568 - Bring devtools window to front on F12. r=pbrosset
authorjuliandescottes<julian.descottes@gmail.com>
Thu, 30 Apr 2015 22:51:07 +0200
changeset 273582 b4ad268f693877c4dc4d59f0b7ac4eff6ceaa079
parent 273581 7ea0e4207486fdc78f0b40fb4345aad81bd78d70
child 273583 de4547be239c18eec6bb2488d0ab6be31ce59e7b
push id863
push userraliiev@mozilla.com
push dateMon, 03 Aug 2015 13:22:43 +0000
treeherdermozilla-release@f6321b14228d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbrosset
bugs999568
milestone40.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 999568 - Bring devtools window to front on F12. r=pbrosset Two keyboard shortcuts can toggle the devtools : F12 and CTRL+SHIFT+I/CMD+ALT+I. Currently, with detached devtools, pressing a toggle key from the main window closes the devtools window. Pressing a toggle key from the devtools window itself has no effect. The goal of this changeset is to : - focus devtools window when pressing a toggle key in the main window - close devtools window when pressing a toggle key in the devtools window Modified toggleToolboxCommand in browser/devtools/framework/gDevTools.jsm to destroy the toolbox only if it is "docked" (exists and the hostType is not WINDOW). Modified browser/devtools/framework/toolbox-window.xul and browser/locales/en-US/chrome/browser/devtools/toolbox.dtd so that F12 and CTRL+SHIFT+I/CMD+SHIFT+I also close the devtools window when used inside the devtools window Added mochitest browser_toolbox_toggle.js
browser/devtools/framework/gDevTools.jsm
browser/devtools/framework/test/browser.ini
browser/devtools/framework/test/browser_toolbox_toggle.js
browser/devtools/framework/toolbox-window.xul
browser/devtools/jar.mn
browser/locales/en-US/chrome/browser/devtools/toolbox.dtd
--- a/browser/devtools/framework/gDevTools.jsm
+++ b/browser/devtools/framework/gDevTools.jsm
@@ -567,17 +567,21 @@ let gDevToolsBrowser = {
    * This function is for the benefit of Tools:DevToolbox in
    * browser/base/content/browser-sets.inc and should not be used outside
    * of there
    */
   toggleToolboxCommand: function(gBrowser) {
     let target = devtools.TargetFactory.forTab(gBrowser.selectedTab);
     let toolbox = gDevTools.getToolbox(target);
 
-    toolbox ? toolbox.destroy() : gDevTools.showToolbox(target);
+    // If a toolbox exists, using toggle from the Main window :
+    // - should close a docked toolbox
+    // - should focus a windowed toolbox
+    let isDocked = toolbox && toolbox.hostType != devtools.Toolbox.HostType.WINDOW;
+    isDocked ? toolbox.destroy() : gDevTools.showToolbox(target);
   },
 
   toggleBrowserToolboxCommand: function(gBrowser) {
     let target = devtools.TargetFactory.forWindow(gBrowser.ownerDocument.defaultView);
     let toolbox = gDevTools.getToolbox(target);
 
     toolbox ? toolbox.destroy()
      : gDevTools.showToolbox(target, "inspector", Toolbox.HostType.WINDOW);
--- a/browser/devtools/framework/test/browser.ini
+++ b/browser/devtools/framework/test/browser.ini
@@ -42,16 +42,17 @@ skip-if = e10s # Bug 1030318
 [browser_toolbox_select_event.js]
 skip-if = e10s # Bug 1069044 - destroyInspector may hang during shutdown
 [browser_toolbox_sidebar.js]
 [browser_toolbox_sidebar_events.js]
 [browser_toolbox_sidebar_existing_tabs.js]
 [browser_toolbox_sidebar_overflow_menu.js]
 [browser_toolbox_tabsswitch_shortcuts.js]
 [browser_toolbox_textbox_context_menu.js]
+[browser_toolbox_toggle.js]
 [browser_toolbox_tool_ready.js]
 [browser_toolbox_tool_remote_reopen.js]
 [browser_toolbox_transport_events.js]
 [browser_toolbox_view_source_01.js]
 [browser_toolbox_view_source_02.js]
 [browser_toolbox_view_source_03.js]
 [browser_toolbox_view_source_04.js]
 [browser_toolbox_window_reload_target.js]
new file mode 100644
--- /dev/null
+++ b/browser/devtools/framework/test/browser_toolbox_toggle.js
@@ -0,0 +1,86 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+const URL = "data:text/html;charset=utf-8,Test toggling devtools using keyboard shortcuts";
+
+add_task(function*() {
+  // Test with ACCEL+SHIFT+I / ACCEL+ALT+I (MacOSX) ; modifiers should match :
+  // - toolbox-key-toggle in browser/devtools/framework/toolbox-window.xul
+  // - key_devToolboxMenuItem in browser/base/content/browser.xul
+  info('Test toggle using CTRL+SHIFT+I/CMD+ALT+I');
+  yield testToggle('I', {
+    accelKey : true,
+    shiftKey : !navigator.userAgent.match(/Mac/),
+    altKey : navigator.userAgent.match(/Mac/),
+  });
+  // Test with F12 ; no modifiers
+  info('Test toggle using F12');
+  yield testToggle('VK_F12', {});
+});
+
+function* testToggle(key, modifiers) {
+  let tab = yield addTab(URL + " ; key : '" + key + "'");
+  yield gDevTools.showToolbox(TargetFactory.forTab(tab));
+
+  yield testToggleDockedToolbox(tab, key, modifiers);
+
+  yield testToggleDetachedToolbox(tab, key, modifiers);
+
+  yield cleanup();
+}
+
+function* testToggleDockedToolbox (tab, key, modifiers) {
+  let toolbox = getToolboxForTab(tab);
+
+  isnot(toolbox.hostType, devtools.Toolbox.HostType.WINDOW, "Toolbox is docked in the main window");
+
+  info('verify docked toolbox is destroyed when using toggle key');
+  let onToolboxDestroyed = once(gDevTools, "toolbox-destroyed");
+  EventUtils.synthesizeKey(key, modifiers);
+  yield onToolboxDestroyed;
+  ok(true, "Docked toolbox is destroyed when using a toggle key");
+
+  info('verify new toolbox is created when using toggle key');
+  let onToolboxReady = once(gDevTools, "toolbox-ready");
+  EventUtils.synthesizeKey(key, modifiers);
+  yield onToolboxReady;
+  ok(true, "Toolbox is created by using when toggle key");
+}
+
+function* testToggleDetachedToolbox (tab, key, modifiers) {
+  let toolbox = getToolboxForTab(tab);
+
+  info('change the toolbox hostType to WINDOW');
+  yield toolbox.switchHost(devtools.Toolbox.HostType.WINDOW);
+  is(toolbox.hostType, devtools.Toolbox.HostType.WINDOW, "Toolbox opened on separate window");
+
+  let toolboxWindow = toolbox._host._window;
+  info('Wait for focus on the toolbox window')
+  yield new Promise(resolve => waitForFocus(resolve, toolboxWindow));
+
+  info('Focus main window')
+  let onMainWindowFocus = once(window, "focus");
+  window.focus();
+  yield onMainWindowFocus;
+  ok(true, "Main window focused");
+
+  info('verify windowed toolbox is focused when using toggle key from the main window')
+  let onToolboxWindowFocus = once(toolboxWindow, "focus");
+  EventUtils.synthesizeKey(key, modifiers);
+  yield onToolboxWindowFocus;
+  ok(true, "Toolbox focused and not destroyed");
+
+  info('verify windowed toolbox is destroyed when using toggle key from its own window')
+  let onToolboxDestroyed = once(gDevTools, "toolbox-destroyed");
+  EventUtils.synthesizeKey(key, modifiers, toolboxWindow);
+  yield onToolboxDestroyed;
+  ok(true, "Toolbox destroyed");
+}
+
+function getToolboxForTab(tab) {
+  return gDevTools.getToolbox(TargetFactory.forTab(tab));
+}
+
+function* cleanup(toolbox) {
+  Services.prefs.setCharPref("devtools.toolbox.host", devtools.Toolbox.HostType.BOTTOM);
+  gBrowser.removeCurrentTab();
+}
--- a/browser/devtools/framework/toolbox-window.xul
+++ b/browser/devtools/framework/toolbox-window.xul
@@ -21,12 +21,25 @@
     <command id="toolbox-cmd-close" oncommand="window.close();"/>
   </commandset>
 
   <keyset id="toolbox-keyset">
     <key id="toolbox-key-close"
          key="&closeCmd.key;"
          command="toolbox-cmd-close"
          modifiers="accel"/>
+    <key id="toolbox-key-toggle"
+         key="&toggleToolbox.key;"
+         command="toolbox-cmd-close"
+#ifdef XP_MACOSX
+         modifiers="accel,alt"
+#else
+         modifiers="accel,shift"
+#endif
+        />
+    <key id="toolbox-key-toggle-F12"
+         keycode="&toggleToolboxF12.keycode;"
+         keytext="&toggleToolboxF12.keytext;"
+         command="toolbox-cmd-close"/>
   </keyset>
 
   <iframe id="toolbox-iframe" flex="1" forceOwnRefreshDriver=""></iframe>
 </window>
--- a/browser/devtools/jar.mn
+++ b/browser/devtools/jar.mn
@@ -113,17 +113,17 @@ browser.jar:
     content/browser/devtools/performance/views/details-memory-flamegraph.js (performance/views/details-memory-flamegraph.js)
     content/browser/devtools/performance/views/recordings.js           (performance/views/recordings.js)
     content/browser/devtools/performance/views/jit-optimizations.js    (performance/views/jit-optimizations.js)
     content/browser/devtools/responsivedesign/resize-commands.js       (responsivedesign/resize-commands.js)
     content/browser/devtools/commandline.css                           (commandline/commandline.css)
     content/browser/devtools/commandlineoutput.xhtml                   (commandline/commandlineoutput.xhtml)
     content/browser/devtools/commandlinetooltip.xhtml                  (commandline/commandlinetooltip.xhtml)
     content/browser/devtools/commandline/commands-index.js             (commandline/commands-index.js)
-    content/browser/devtools/framework/toolbox-window.xul              (framework/toolbox-window.xul)
+*   content/browser/devtools/framework/toolbox-window.xul              (framework/toolbox-window.xul)
     content/browser/devtools/framework/toolbox-options.xul             (framework/toolbox-options.xul)
     content/browser/devtools/framework/toolbox-options.js              (framework/toolbox-options.js)
     content/browser/devtools/framework/toolbox.xul                     (framework/toolbox.xul)
     content/browser/devtools/framework/options-panel.css               (framework/options-panel.css)
     content/browser/devtools/framework/toolbox-process-window.xul      (framework/toolbox-process-window.xul)
 *   content/browser/devtools/framework/toolbox-process-window.js       (framework/toolbox-process-window.js)
     content/browser/devtools/framework/dev-edition-promo.xul           (framework/dev-edition-promo/dev-edition-promo.xul)
 *   content/browser/devtools/framework/dev-edition-promo.css           (framework/dev-edition-promo/dev-edition-promo.css)
--- a/browser/locales/en-US/chrome/browser/devtools/toolbox.dtd
+++ b/browser/locales/en-US/chrome/browser/devtools/toolbox.dtd
@@ -1,16 +1,19 @@
 <!-- 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/. -->
 
 <!-- LOCALIZATION NOTE : FILE This file contains the Toolbox strings -->
 <!-- LOCALIZATION NOTE : FILE Do not translate key -->
 
 <!ENTITY closeCmd.key  "W">
+<!ENTITY toggleToolbox.key  "I">
+<!ENTITY toggleToolboxF12.keycode          "VK_F12">
+<!ENTITY toggleToolboxF12.keytext          "F12">
 
 <!ENTITY toolboxCloseButton.tooltip    "Close Developer Tools">
 <!ENTITY toolboxOptionsButton.key      "O">
 <!ENTITY toolboxNextTool.key           "]">
 <!ENTITY toolboxPreviousTool.key       "[">
 
 <!ENTITY toolboxZoomIn.key             "+">
 <!ENTITY toolboxZoomIn.key2            "="> <!-- + is above this key on many keyboards -->