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

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

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

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

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