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

This commit is contained in:
Brian Grinstead 2015-06-09 14:59:27 -07:00
parent 7cdabcd68e
commit 112cdb689a
10 changed files with 192 additions and 81 deletions

View File

@ -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);

View File

@ -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]

View File

@ -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();
});

View File

@ -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();
});
}

View File

@ -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++;
}

View File

@ -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");
}
}

View File

@ -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() {

View File

@ -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();

View File

@ -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>

View File

@ -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. -->