Bug 1605162 - Test that context selector is updated when pausing in a remote frame. r=Honza.

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

devtools/client/webconsole/test/browser/_jsterm.ini

@@ -108,6 +108,8 @@ skip-if = os != 'mac' # The tested ctrl+key shortcuts are OSX only
 [browser_jsterm_editor_toolbar.js]
 [browser_jsterm_error_docs.js]
 [browser_jsterm_error_outside_valid_range.js]
+[browser_jsterm_evaluation_context_selector_pause_in_debugger.js]
+skip-if = !fission # context selector is only visible when fission is enabled.
 [browser_jsterm_evaluation_context_selector_targets_update.js]
 skip-if = !fission # context selector is only visible when fission is enabled.
 [browser_jsterm_evaluation_context_selector_inspector.js]

devtools/client/webconsole/test/browser/browser_jsterm_evaluation_context_selector_pause_in_debugger.js

@@ -0,0 +1,119 @@
+/* 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/. */
+
+"use strict";
+
+// Check that when the debugger pauses in a frame which is in a different target, the
+// context selector is updated, and evaluating in the console is done in the paused
+// frame context.
+
+const TEST_URI = `${URL_ROOT_COM}test-console-evaluation-context-selector.html`;
+const IFRAME_FILE = `test-console-evaluation-context-selector-child.html`;
+
+add_task(async function() {
+  await pushPref("devtools.contenttoolbox.fission", true);
+  await pushPref("devtools.contenttoolbox.webconsole.input.context", true);
+
+  const tab = await addTab(TEST_URI);
+
+  info("Create new iframes and add them to the page.");
+  await addIFrameAndWaitForLoad(`${URL_ROOT_ORG}${IFRAME_FILE}?id=iframe_org`);
+  await addIFrameAndWaitForLoad(
+    `${URL_ROOT_MOCHI_8888}${IFRAME_FILE}?id=iframe_mochi8888`
+  );
+
+  const toolbox = await openToolboxForTab(tab, "webconsole");
+
+  info("Open Debugger");
+  await openDebugger();
+  const dbg = createDebuggerContext(toolbox);
+
+  info("Hit the debugger statement on first iframe");
+  clickOnIframeStopMeButton(".iframe-1");
+
+  info("Wait for the debugger to pause");
+  await waitForPaused(dbg);
+
+  info("Open the split Console");
+  await toolbox.openSplitConsole();
+  const { hud } = toolbox.getPanel("webconsole");
+
+  const evaluationContextSelectorButton = hud.ui.outputNode.querySelector(
+    ".webconsole-evaluation-selector-button"
+  );
+  await waitFor(
+    () => evaluationContextSelectorButton.innerText.includes("example.org"),
+    "The context selector wasn't updated"
+  );
+  ok(true, "The context was set to the first iframe document");
+
+  // localVar is defined in the event listener, and was assigned the `document` value.
+  setInputValue(hud, "localVar");
+  await waitForEagerEvaluationResult(hud, /example\.org/);
+  ok(true, "Instant evaluation has the expected result");
+
+  await keyboardExecuteAndWaitForMessage(
+    hud,
+    `localVar`,
+    "example.org",
+    ".result"
+  );
+  ok(true, "Evaluation result is the expected one");
+
+  info("Resume the debugger");
+  await resume(dbg);
+
+  info("Hit the debugger statement on second iframe");
+  clickOnIframeStopMeButton(".iframe-2");
+
+  info("Wait for the debugger to pause");
+  await waitForPaused(dbg);
+
+  await waitFor(
+    () => evaluationContextSelectorButton.innerText.includes("mochi.test"),
+    "The context selector wasn't updated"
+  );
+  ok(true, "The context was set to the second iframe document");
+
+  // localVar is defined in the event listener, and was assigned the `document` value.
+  setInputValue(hud, "localVar");
+  await waitForEagerEvaluationResult(hud, /mochi\.test/);
+  ok(true, "Instant evaluation has the expected result");
+
+  await keyboardExecuteAndWaitForMessage(
+    hud,
+    `localVar`,
+    "mochi.test",
+    ".result"
+  );
+  ok(true, "Evaluation result is the expected one");
+
+  info("Resume the debugger");
+  await resume(dbg);
+});
+
+async function addIFrameAndWaitForLoad(url) {
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [url], async innerUrl => {
+    const iframe = content.document.createElement("iframe");
+    const iframeCount = content.document.querySelectorAll("iframe").length;
+    iframe.classList.add(`iframe-${iframeCount + 1}`);
+    content.document.body.append(iframe);
+
+    const onLoadIframe = new Promise(resolve => {
+      iframe.addEventListener("load", resolve, { once: true });
+    });
+
+    iframe.src = innerUrl;
+    await onLoadIframe;
+  });
+}
+
+function clickOnIframeStopMeButton(iframeClassName) {
+  SpecialPowers.spawn(gBrowser.selectedBrowser, [iframeClassName], cls => {
+    const iframe = content.document.querySelector(cls);
+    SpecialPowers.spawn(iframe, [], () => {
+      content.document.querySelector(".stop-me").click();
+    });
+  });
+}

devtools/client/webconsole/test/browser/test-console-evaluation-context-selector-child.html

@@ -5,12 +5,19 @@
   </head>
   <body>
     <h2>iframe</h2>
+    <button class="stop-me">Stop Me!</button>
     <script>
       "use strict";
       console.log("iframe", document);
       var id = new URLSearchParams(document.location.search).get("id");
       document.querySelector("h2").id = id;
       document.title = `${id}|${document.location.host}`;
+      document.addEventListener("click", function(e) {
+        // eslint-disable-next-line no-unused-vars
+        const localVar = document;
+        // eslint-disable-next-line no-debugger
+        debugger;
+      });
     </script>
   </body>
 </html>