Bug 1751207 - [devtools] Allow debugging popups when a toolbox is opened for its opener tab. r=nchevobbe

This is only an issue when devtools.popups.debug is false,
when it is true, the toolbox is move and a warning message is printed
if we request to open a new toolbox.

Differential Revision: https://phabricator.services.mozilla.com/D136498

devtools/client/framework/devtools.js

@@ -57,6 +57,7 @@ const {
 
 const FORBIDDEN_IDS = new Set(["toolbox", ""]);
 const MAX_ORDINAL = 99;
+const POPUP_DEBUG_PREF = "devtools.popups.debug";
 
 /**
  * DevTools is a class that represents a set of developer tools, it holds a
@@ -585,7 +586,10 @@ DevTools.prototype = {
   ) {
     // Popups are debugged via the toolbox of their opener document/tab.
     // So avoid opening dedicated toolbox for them.
-    if (tab.linkedBrowser.browsingContext.opener) {
+    if (
+      tab.linkedBrowser.browsingContext.opener &&
+      Services.prefs.getBoolPref(POPUP_DEBUG_PREF)
+    ) {
       const openerTab = tab.ownerGlobal.gBrowser.getTabForBrowser(
         tab.linkedBrowser.browsingContext.opener.embedderElement
       );

devtools/client/framework/test/browser.ini

@@ -124,6 +124,7 @@ skip-if =
 [browser_toolbox_options_enable_serviceworkers_testing.js]
 [browser_toolbox_options_frames_button.js]
 [browser_toolbox_options_panel_toggle.js]
+[browser_toolbox_popups_debugging.js]
 [browser_toolbox_raise.js]
 disabled=Bug 962258
 [browser_toolbox_races.js]

devtools/client/framework/test/browser_toolbox_popups_debugging.js

@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test opening toolboxes against a tab and its popup
+
+const TEST_URL = "data:text/html,test for debugging popups";
+const POPUP_URL = "data:text/html,popup";
+
+const POPUP_DEBUG_PREF = "devtools.popups.debug";
+
+add_task(async function() {
+  const isPopupDebuggingEnabled = Services.prefs.getBoolPref(POPUP_DEBUG_PREF);
+
+  info("Open a tab and debug it");
+  const tab = await addTab(TEST_URL);
+  const toolbox = await gDevTools.showToolboxForTab(tab, {
+    toolId: "webconsole",
+  });
+
+  info("Open a popup");
+  const onTabOpened = once(gBrowser.tabContainer, "TabOpen");
+  const onToolboxSwitchedToTab = toolbox.once("switched-host-to-tab");
+  await SpecialPowers.spawn(tab.linkedBrowser, [POPUP_URL], url => {
+    content.open(url);
+  });
+  const tabOpenEvent = await onTabOpened;
+  const popupTab = tabOpenEvent.target;
+
+  const popupToolbox = await gDevTools.showToolboxForTab(popupTab);
+  if (isPopupDebuggingEnabled) {
+    ok(
+      !popupToolbox,
+      "When popup debugging is enabled, the popup should be debugged via the same toolbox as the original tab"
+    );
+    info("Wait for internal event notifying about the toolbox being moved");
+    await onToolboxSwitchedToTab;
+    const browserContainer = gBrowser.getBrowserContainer(
+      popupTab.linkedBrowser
+    );
+    const iframe = browserContainer.querySelector(
+      ".devtools-toolbox-bottom-iframe"
+    );
+    ok(iframe, "The original tab's toolbox moved to the popup tab");
+  } else {
+    ok(popupToolbox, "We were able to spawn a toolbox for the popup");
+    info("Close the popup toolbox and its tab");
+    await popupToolbox.destroy();
+  }
+
+  info("Close the popup tab");
+  gBrowser.removeCurrentTab();
+
+  info("Close the original tab toolbox and itself");
+  await toolbox.destroy();
+  gBrowser.removeCurrentTab();
+});

devtools/client/framework/toolbox.js

@@ -3639,6 +3639,8 @@ Toolbox.prototype = {
     );
 
     this.commands.targetCommand.selectTarget(target);
+
+    this.emit("switched-host-to-tab");
   },
 
   /**