Bug 1718038 - [devtools] Pass the correct target to scriptCommand#execute when a specific thread is selected in the debugger. r=bomsy.

A test is added to ensure this works as expected.
We take this opportunity to create a `getWatchExpressionValue` test helper and
use it in the different test that were having a similar function.

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

devtools/client/debugger/src/actions/expressions.js

@@ -117,6 +117,7 @@ export function evaluateExpressions(cx) {
     const frameId = getSelectedFrameId(getState(), cx.thread);
     const results = await client.evaluateExpressions(inputs, {
       frameId,
+      threadId: cx.thread,
     });
     dispatch({ type: "EVALUATE_EXPRESSIONS", cx, inputs, results });
   };

devtools/client/debugger/src/client/firefox/commands.js

@@ -249,12 +249,17 @@ async function evaluateExpressions(scripts, options) {
   return Promise.all(scripts.map(script => evaluate(script, options)));
 }
 
-async function evaluate(script, { frameId } = {}) {
+async function evaluate(script, { frameId, threadId } = {}) {
   if (!currentTarget() || !script) {
     return { result: null };
   }
 
-  return commands.scriptCommand.execute(script, { frameActor: frameId });
+  const selectedTargetFront = threadId ? lookupTarget(threadId) : null;
+
+  return commands.scriptCommand.execute(script, {
+    frameActor: frameId,
+    selectedTargetFront,
+  });
 }
 
 async function autocomplete(input, cursor, frameId) {

devtools/client/debugger/test/mochitest/browser.ini

@@ -85,6 +85,8 @@ skip-if = debug # Window leaks: bug 1575332
 [browser_dbg-expressions.js]
 [browser_dbg-expressions-error.js]
 [browser_dbg-expressions-focus.js]
+[browser_dbg-expressions-thread.js]
+skip-if = !fission # threads panel only shows remote frame when fission is enabled.
 [browser_dbg-expressions-watch.js]
 [browser_dbg-fission-frame-breakpoint.js]
 [browser_dbg-fission-frame-pause-exceptions.js]

devtools/client/debugger/test/mochitest/browser_dbg-expressions-error.js

@@ -12,7 +12,7 @@
 
 const EXPRESSION_SELECTORS = {
   plusIcon: ".watch-expressions-pane button.plus",
-  input: "input.input-expression"
+  input: "input.input-expression",
 };
 
 add_task(async function() {
@@ -27,9 +27,9 @@ add_task(async function() {
   await addExpression(dbg, "foo.batt");
   await addExpression(dbg, "2");
   // check the value of
-  is(getValue(dbg, 2), "(unavailable)");
-  is(getValue(dbg, 3), "(unavailable)");
-  is(getValue(dbg, 4), "2");
+  is(getWatchExpressionValue(dbg, 2), "(unavailable)");
+  is(getWatchExpressionValue(dbg, 3), "(unavailable)");
+  is(getWatchExpressionValue(dbg, 4), "2");
 
   await toggleExpressionNode(dbg, 1);
   is(findAllElements(dbg, "expressionNodes").length, 37);
@@ -39,10 +39,6 @@ function getLabel(dbg, index) {
   return findElement(dbg, "expressionNode", index).innerText;
 }
 
-function getValue(dbg, index) {
-  return findElement(dbg, "expressionValue", index).innerText;
-}
-
 async function addExpression(dbg, input) {
   const plusIcon = findElementWithSelector(dbg, EXPRESSION_SELECTORS.plusIcon);
   if (plusIcon) {

devtools/client/debugger/test/mochitest/browser_dbg-expressions-thread.js

@@ -0,0 +1,82 @@
+/* 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/>. */
+
+/**
+ * Test the watch expressions update when selecting a different thread in the thread panel.
+ */
+
+"use strict";
+
+const TEST_COM_URI =
+  URL_ROOT_COM + "examples/doc_dbg-fission-frame-sources.html";
+
+add_task(async function() {
+  // Load a test page with a remote frame and wait for both sources to be visible.
+  // simple1.js is imported by the main page. simple2.js comes from the frame.
+  const dbg = await initDebuggerWithAbsoluteURL(
+    TEST_COM_URI,
+    "simple1.js",
+    "simple2.js"
+  );
+
+  // expand threads pane
+  const threadsPaneEl = await waitForElementWithSelector(
+    dbg,
+    ".threads-pane .header-label"
+  );
+  threadsPaneEl.click();
+
+  await waitForElement(dbg, "threadsPaneItems");
+  const threadsEl = findAllElements(dbg, "threadsPaneItems");
+  is(threadsEl.length, 2, "There are two threads in the thread panel");
+  const [mainThreadEl, remoteThreadEl] = threadsEl;
+  is(
+    mainThreadEl.textContent,
+    "Main Thread",
+    "first thread displayed is the main thread"
+  );
+  is(
+    remoteThreadEl.textContent,
+    "Test remote frame sources",
+    "second thread displayed is the remote thread"
+  );
+
+  await addExpression(dbg, "document.location.host");
+
+  is(
+    getWatchExpressionValue(dbg, 1),
+    `"example.com"`,
+    "expression is evaluated on the expected thread"
+  );
+
+  info(
+    "Select the remote frame thread and check that the expression is updated"
+  );
+  let onExpressionsEvaluated = waitForDispatch(
+    dbg.store,
+    "EVALUATE_EXPRESSIONS"
+  );
+  remoteThreadEl.click();
+  await onExpressionsEvaluated;
+
+  is(
+    getWatchExpressionValue(dbg, 1),
+    `"example.org"`,
+    "expression is evaluated on the remote origin thread"
+  );
+
+  info("Select the main thread again and check that the expression is updated");
+  onExpressionsEvaluated = waitForDispatch(dbg.store, "EVALUATE_EXPRESSIONS");
+  mainThreadEl.click();
+  await onExpressionsEvaluated;
+
+  is(
+    getWatchExpressionValue(dbg, 1),
+    `"example.com"`,
+    "expression is evaluated on the main thread again"
+  );
+
+  // close the threads pane so following test don't have it open
+  threadsPaneEl.click();
+});

devtools/client/debugger/test/mochitest/browser_dbg-expressions-watch.js

@@ -29,7 +29,11 @@ add_task(async function() {
   );
 
   is(getLabel(dbg, 1), "someVariable", "Watch expression was added");
-  is(getValue(dbg, 1), "(unavailable)", "Watch expression has no value");
+  is(
+    getWatchExpressionValue(dbg, 1),
+    "(unavailable)",
+    "Watch expression has no value"
+  );
 
   info("Switch to the console and update the value of the watched variable");
   const { hud } = await dbg.toolbox.selectTool("webconsole");
@@ -39,7 +43,11 @@ add_task(async function() {
   await dbg.toolbox.selectTool("jsdebugger");
 
   is(getLabel(dbg, 1), "someVariable", "Watch expression is still available");
-  is(getValue(dbg, 1), "(unavailable)", "Watch expression still has no value");
+  is(
+    getWatchExpressionValue(dbg, 1),
+    "(unavailable)",
+    "Watch expression still has no value"
+  );
 
   info(
     "Click on the watch expression refresh button and wait for the " +
@@ -50,7 +58,11 @@ add_task(async function() {
   await refreshed;
 
   is(getLabel(dbg, 1), "someVariable", "Watch expression is still available");
-  is(getValue(dbg, 1), "1", "Watch expression value has been updated");
+  is(
+    getWatchExpressionValue(dbg, 1),
+    "1",
+    "Watch expression value has been updated"
+  );
 
   await deleteExpression(dbg, "someVariable");
 
@@ -64,10 +76,6 @@ function getLabel(dbg, index) {
   return findElement(dbg, "expressionNode", index).innerText;
 }
 
-function getValue(dbg, index) {
-  return findElement(dbg, "expressionValue", index).innerText;
-}
-
 function getRefreshExpressionsElement(dbg) {
   return findElement(dbg, "expressionRefresh", 1);
 }

devtools/client/debugger/test/mochitest/browser_dbg-expressions.js

@@ -18,7 +18,7 @@ add_task(async function() {
 
   await addExpression(dbg, "f");
   is(getLabel(dbg, 1), "f");
-  is(getValue(dbg, 1), "(unavailable)");
+  is(getWatchExpressionValue(dbg, 1), "(unavailable)");
 
   await editExpression(dbg, "oo");
   is(getLabel(dbg, 1), "foo()");
@@ -28,7 +28,7 @@ add_task(async function() {
 
   await addExpression(dbg, "location");
   is(getLabel(dbg, 2), "location");
-  ok(getValue(dbg, 2).includes("Location"), "has a value");
+  ok(getWatchExpressionValue(dbg, 2).includes("Location"), "has a value");
 
   // can expand an expression
   await toggleExpressionNode(dbg, 2);
@@ -64,10 +64,6 @@ function getLabel(dbg, index) {
   return findElement(dbg, "expressionNode", index).innerText;
 }
 
-function getValue(dbg, index) {
-  return findElement(dbg, "expressionValue", index).innerText;
-}
-
 function assertEmptyValue(dbg, index) {
   const value = findElement(dbg, "expressionValue", index);
   if (value) {

devtools/client/debugger/test/mochitest/browser_dbg-windowless-workers.js

@@ -41,7 +41,7 @@ add_task(async function() {
   info("Add a watch expression and view the value");
   await addExpression(dbg, "count");
   is(getLabel(dbg, 1), "count");
-  const v = getValue(dbg, 1);
+  const v = getWatchExpressionValue(dbg, 1);
   ok(v == `${+v}`, "Value of count should be a number");
 
   info("StepOver in the first worker");
@@ -50,7 +50,7 @@ add_task(async function() {
 
   info("Ensure that the watch expression has updated");
   await waitUntil(() => {
-    const v2 = getValue(dbg, 1);
+    const v2 = getWatchExpressionValue(dbg, 1);
     return +v2 == +v + 1;
   });
 
@@ -116,7 +116,3 @@ function threadIsSelected(dbg, index) {
 function getLabel(dbg, index) {
   return findElement(dbg, "expressionNode", index).innerText;
 }
-
-function getValue(dbg, index) {
-  return findElement(dbg, "expressionValue", index).innerText;
-}

devtools/client/debugger/test/mochitest/helpers.js

@@ -1964,6 +1964,17 @@ async function editExpression(dbg, input) {
   await evaluated;
 }
 
+/**
+ * Get the text representation of a watch expression value given its position in the panel
+ *
+ * @param {Object} dbg
+ * @param {Number} index: Position in the panel of the expression we want the value of
+ * @returns {String}
+ */
+function getWatchExpressionValue(dbg, index) {
+  return findElement(dbg, "expressionValue", index).innerText;
+}
+
 async function waitUntilPredicate(predicate) {
   let result;
   await waitUntil(() => {