From 38267f73c2ed89085f64ebdb8f2ed2251d5dc8fb Mon Sep 17 00:00:00 2001 From: Julian Descottes Date: Tue, 30 Apr 2019 13:34:29 +0000 Subject: [PATCH] Bug 1544692 - Enable devtools shortcuts and menu items in about:devtools-toolbox r=Ola Depends on D29028 Differential Revision: https://phabricator.services.mozilla.com/D29029 --HG-- extra : moz-landing-system : lando --- ..._aboutdebugging_devtoolstoolbox_menubar.js | 21 ++++++- ...boutdebugging_devtoolstoolbox_shortcuts.js | 15 ++++- devtools/client/framework/browser-menus.js | 50 +--------------- devtools/client/framework/devtools-browser.js | 60 +++++++++++++------ 4 files changed, 76 insertions(+), 70 deletions(-) diff --git a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtoolstoolbox_menubar.js b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtoolstoolbox_menubar.js index f5dd1f0235b3..7645b164890b 100644 --- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtoolstoolbox_menubar.js +++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtoolstoolbox_menubar.js @@ -15,12 +15,25 @@ add_task(async function() { const { document, tab, window } = await openAboutDebugging(); await selectThisFirefoxPage(document, window.AboutDebugging.store); - const { devtoolsTab } = await openAboutDevtoolsToolbox(document, tab, window); + const { devtoolsTab, devtoolsWindow } = + await openAboutDevtoolsToolbox(document, tab, window); info("Check whether the menu items are disabled"); const rootDocument = devtoolsTab.ownerDocument; await assertMenusItems(rootDocument, false); + info("Select the inspector"); + const toolbox = getToolbox(devtoolsWindow); + await toolbox.selectTool("inspector"); + + info("Click on the console item"); + const onConsoleLoaded = toolbox.once("webconsole-ready"); + const webconsoleMenuItem = rootDocument.getElementById("menuitem_webconsole"); + webconsoleMenuItem.click(); + + info("Wait until about:devtools-toolbox switches to the console"); + await onConsoleLoaded; + info("Force to select about:debugging page"); gBrowser.selectedTab = tab; info("Check whether the menu items are enabled"); @@ -31,18 +44,20 @@ add_task(async function() { }); async function assertMenusItems(rootDocument, shouldBeEnabled) { + info("Wait for the Toggle Tools menu-item hidden attribute to change"); const menuItem = rootDocument.getElementById("menu_devToolbox"); - // Wait for hidden attribute changed since the menu items will update asynchronously. await waitUntil(() => menuItem.hidden === !shouldBeEnabled); + info("Check that the state of the Toggle Tools menu-item depends on the page"); assertMenuItem(rootDocument, "menu_devToolbox", shouldBeEnabled); + info("Check that the tools menu-items are always enabled regardless of the page"); for (const toolDefinition of gDevTools.getToolDefinitionArray()) { if (!toolDefinition.inMenu) { continue; } - assertMenuItem(rootDocument, "menuitem_" + toolDefinition.id, shouldBeEnabled); + assertMenuItem(rootDocument, "menuitem_" + toolDefinition.id, true); } } diff --git a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtoolstoolbox_shortcuts.js b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtoolstoolbox_shortcuts.js index 052459c5189d..c3f1fe5f1740 100644 --- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtoolstoolbox_shortcuts.js +++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtoolstoolbox_shortcuts.js @@ -15,12 +15,25 @@ add_task(async function() { const { document, tab, window } = await openAboutDebugging(); await selectThisFirefoxPage(document, window.AboutDebugging.store); - const { devtoolsBrowser, devtoolsTab } = + const { devtoolsBrowser, devtoolsTab, devtoolsWindow } = await openAboutDevtoolsToolbox(document, tab, window); info("Check whether the shortcut keys which opens devtools is disabled"); await assertShortcutKeys(devtoolsBrowser, false); + info("Switch to the inspector programmatically"); + const toolbox = getToolbox(devtoolsWindow); + await toolbox.selectTool("inspector"); + + info("Use the Webconsole keyboard shortcut and wait for the panel to be selected"); + const onToolReady = toolbox.once("webconsole-ready"); + EventUtils.synthesizeKey("K", { + accelKey: true, + shiftKey: !navigator.userAgent.match(/Mac/), + altKey: navigator.userAgent.match(/Mac/), + }, devtoolsWindow); + await onToolReady; + info("Force to select about:debugging page"); gBrowser.selectedTab = tab; info("Check whether the shortcut keys which opens devtools is enabled"); diff --git a/devtools/client/framework/browser-menus.js b/devtools/client/framework/browser-menus.js index a86c2d546a27..7d0b0cdde7f3 100644 --- a/devtools/client/framework/browser-menus.js +++ b/devtools/client/framework/browser-menus.js @@ -81,7 +81,7 @@ function createToolMenuElements(toolDefinition, doc) { const oncommand = (async function(id, event) { try { const window = event.target.ownerDocument.defaultView; - await gDevToolsBrowser.selectToolCommand(window.gBrowser, id, Cu.now()); + await gDevToolsBrowser.selectToolCommand(window, id, Cu.now()); sendEntryPointTelemetry(window); } catch (e) { console.error(`Exception while opening ${id}: ${e}\n${e.stack}`); @@ -299,51 +299,3 @@ exports.removeMenus = function(doc) { // unregistering each tool. removeTopLevelItems(doc); }; - -/** - * This is used for about:devtools-toolbox and that we are hiding the main toolbox toggle - * menu item, as well as all the tool items displayed on the menu. But we keep the - * non-toolbox menu items such as Scratchpad, Browser Console etc. - * - * @param {XULDocument} doc - * @param {boolean} isEnabled - */ -function setDevtoolsMenuItemsEnabled(doc, isEnabled) { - setMenuItemEnabled(doc, "menu_devToolbox", isEnabled); - - for (const toolDefinition of gDevTools.getToolDefinitionArray()) { - if (!toolDefinition.inMenu) { - continue; - } - setMenuItemEnabled(doc, "menuitem_" + toolDefinition.id, isEnabled); - } -} - -function setMenuItemEnabled(doc, menuItemId, isEnabled) { - const menuItem = doc.getElementById(menuItemId); - if (menuItem) { - if (isEnabled) { - menuItem.removeAttribute("hidden"); - } else { - menuItem.setAttribute("hidden", true); - } - } -} - -/** - * Enable all devtools menu items. - * - * @param {XULDocument} doc - */ -exports.enableDevtoolsMenuItems = function(doc) { - setDevtoolsMenuItemsEnabled(doc, true); -}; - -/** - * Disable all devtools menu items. - * - * @param {XULDocument} doc - */ -exports.disableDevtoolsMenuItems = function(doc) { - setDevtoolsMenuItemsEnabled(doc, false); -}; diff --git a/devtools/client/framework/devtools-browser.js b/devtools/client/framework/devtools-browser.js index 06749073d8e3..6e77e17e6e81 100644 --- a/devtools/client/framework/devtools-browser.js +++ b/devtools/client/framework/devtools-browser.js @@ -189,6 +189,8 @@ var gDevToolsBrowser = exports.gDevToolsBrowser = { * triggered from the WebDeveloper menu and keyboard shortcuts. * * selectToolCommand's behavior: + * - if the current page is about:devtools-toolbox + * we select the targeted tool * - if the toolbox is closed, * we open the toolbox and select the tool * - if the toolbox is open, and the targeted tool is not selected, @@ -197,11 +199,18 @@ var gDevToolsBrowser = exports.gDevToolsBrowser = { * and the host is NOT a window, we close the toolbox * - if the toolbox is open, and the targeted tool is selected, * and the host is a window, we raise the toolbox window + * + * Used when: - registering a new tool + * - new xul window, to add menu items */ - // Used when: - registering a new tool - // - new xul window, to add menu items - async selectToolCommand(gBrowser, toolId, startTime) { - const target = await TargetFactory.forTab(gBrowser.selectedTab); + async selectToolCommand(win, toolId, startTime) { + if (gDevToolsBrowser._isAboutDevtoolsToolbox(win)) { + const toolbox = gDevToolsBrowser._getAboutDevtoolsToolbox(win); + toolbox.selectTool(toolId, "key_shortcut"); + return; + } + + const target = await TargetFactory.forTab(win.gBrowser.selectedTab); const toolbox = gDevTools.getToolbox(target); const toolDefinition = gDevTools.getToolDefinition(toolId); @@ -245,16 +254,14 @@ var gDevToolsBrowser = exports.gDevToolsBrowser = { // Avoid to open devtools when the about:devtools-toolbox page is showing // on the window now. if (gDevToolsBrowser._isAboutDevtoolsToolbox(window) && - (key.toolId || - key.id === "toggleToolbox" || - key.id === "toggleToolboxF12" || - key.id === "inspectorMac")) { + (key.id === "toggleToolbox" || + key.id === "toggleToolboxF12")) { return; } // If this is a toolbox's panel key shortcut, delegate to selectToolCommand if (key.toolId) { - await gDevToolsBrowser.selectToolCommand(window.gBrowser, key.toolId, startTime); + await gDevToolsBrowser.selectToolCommand(window, key.toolId, startTime); return; } // Otherwise implement all other key shortcuts individually here @@ -282,7 +289,7 @@ var gDevToolsBrowser = exports.gDevToolsBrowser = { ScratchpadManager.openScratchpad(); break; case "inspectorMac": - await gDevToolsBrowser.selectToolCommand(window.gBrowser, "inspector", startTime); + await gDevToolsBrowser.selectToolCommand(window, "inspector", startTime); break; } }, @@ -628,16 +635,18 @@ var gDevToolsBrowser = exports.gDevToolsBrowser = { * @param {XULWindow} win */ _updateMenuItems(win) { - if (gDevToolsBrowser._isAboutDevtoolsToolbox(win)) { - BrowserMenus.disableDevtoolsMenuItems(win.document); - return; + const menu = win.document.getElementById("menu_devToolbox"); + + // Hide the "Toggle Tools" menu item if we are on about:devtools-toolbox. + const isAboutDevtoolsToolbox = gDevToolsBrowser._isAboutDevtoolsToolbox(win); + if (isAboutDevtoolsToolbox) { + menu.setAttribute("hidden", "true"); + } else { + menu.removeAttribute("hidden"); } - BrowserMenus.enableDevtoolsMenuItems(win.document); - + // Add a checkmark for the "Toggle Tools" menu item if a toolbox is already opened. const hasToolbox = gDevToolsBrowser.hasToolboxOpened(win); - - const menu = win.document.getElementById("menu_devToolbox"); if (hasToolbox) { menu.setAttribute("checked", "true"); } else { @@ -657,6 +666,23 @@ var gDevToolsBrowser = exports.gDevToolsBrowser = { return currentURI.scheme === "about" && currentURI.filePath === "devtools-toolbox"; }, + /** + * Retrieve the Toolbox instance loaded in the current page if the page is + * about:devtools-toolbox, null otherwise. + * + * @param {XULWindow} win + * The chrome window containing about:devtools-toolbox. Will match + * toolbox.topWindow. + * @return {Toolbox} The toolbox instance loaded in about:devtools-toolbox + * + */ + _getAboutDevtoolsToolbox(win) { + if (!gDevToolsBrowser._isAboutDevtoolsToolbox(win)) { + return null; + } + return gDevTools.getToolboxes().find(toolbox => toolbox.topWindow === win); + }, + /** * Remove the menuitem for a tool to all open browser windows. *