Bug 1609671 - Inspect binding should try to get the sourcemapped location while inspecting a function. r=jdescottes,vporof

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

--HG--
extra : moz-landing-system : lando

.prettierignore

@@ -55,3 +55,6 @@ devtools/client/debugger/src/test/mochitest/examples/babel/fixtures/*/input.js
 devtools/client/debugger/src/test/mochitest/examples/babel/fixtures/*/output.js
 devtools/client/debugger/src/test/mochitest/examples/babel/fixtures/*/output.js.map
 devtools/client/debugger/src/test/mochitest/examples/ember/quickstart
+
+# These are source mapped and the locations are asserted in the test case.
+devtools/client/webconsole/test/browser/test-mangled-function.*

devtools/client/framework/toolbox.js

@@ -3509,8 +3509,13 @@ Toolbox.prototype = {
     }
 
     if (objectGrip.class == "Function") {
-      const { url, line } = objectGrip.location;
-      return this.viewSourceInDebugger(url, line);
+      if (!objectGrip.location) {
+        console.error("Missing location in Function objectGrip", objectGrip);
+        return;
+      }
+
+      const { url, line, column } = objectGrip.location;
+      return this.viewSourceInDebugger(url, line, column);
     }
 
     if (objectGrip.type !== "null" && objectGrip.type !== "undefined") {
@@ -3903,16 +3908,39 @@ Toolbox.prototype = {
   },
 
   /**
-   * Opens source in debugger. Falls back to plain "view-source:".
+   * Opens source in debugger, the sourcemapped location will be selected in
+   * the debugger panel, if the given location resolves to a know sourcemapped one.
+   *
+   * Falls back to plain "view-source:".
+   *
    * @see devtools/client/shared/source-utils.js
    */
-  viewSourceInDebugger: function(
+  viewSourceInDebugger: async function(
     sourceURL,
     sourceLine,
     sourceColumn,
     sourceId,
     reason
   ) {
+    try {
+      const sourceMappedLoc = await this.sourceMapURLService.originalPositionFor(
+        sourceURL,
+        sourceLine,
+        sourceColumn
+      );
+      if (sourceMappedLoc) {
+        sourceURL = sourceMappedLoc.sourceUrl;
+        sourceLine = sourceMappedLoc.line;
+        sourceColumn = sourceMappedLoc.column;
+      }
+    } catch (err) {
+      console.error(
+        "Failed to resolve sourcemapped location for the given source location",
+        { sourceURL, sourceLine, sourceColumn, sourceId, reason },
+        err
+      );
+    }
+
     return viewSource.viewSourceInDebugger(
       this,
       sourceURL,

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

@@ -10,6 +10,9 @@ support-files =
   test-iframe-child.html
   test-iframe-parent.html
   test_jsterm_screenshot_command.html
+  test-mangled-function.js
+  test-mangled-function.js.map
+  test-mangled-function.src.js
   test-simple-function.html
   test-simple-function.js
   !/devtools/client/shared/test/shared-head.js

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

@@ -37,28 +37,37 @@ async function testInspectingElement(hud) {
 async function testInspectingFunction(hud) {
   info("Test `inspect(test)`");
   execute(hud, "inspect(test)");
-
-  await waitFor(() => {
-    const dbg = hud.toolbox.getPanel("jsdebugger");
-    if (!dbg) {
-      return false;
-    }
-
-    const selectedLocation = dbg._selectors.getSelectedLocation(
-      dbg._getState()
-    );
-
-    if (!selectedLocation) {
-      return false;
-    }
-
-    return (
-      selectedLocation.sourceId.includes("test-simple-function.js") &&
-      selectedLocation.line == 3
-    );
-  });
-
+  await waitFor(expectedSourceSelected("test-simple-function.js", 3));
   ok(true, "inspected function is now selected in the debugger");
+
+  info("Test `inspect(test_mangled)`");
+  execute(hud, "inspect(test_mangled)");
+  await waitFor(
+    expectedSourceSelected("test-mangled-function.js/originalSource-", 3)
+  );
+  ok(true, "inspected source-mapped function is now selected in the debugger");
+
+  function expectedSourceSelected(sourceFilename, sourceLine) {
+    return () => {
+      const dbg = hud.toolbox.getPanel("jsdebugger");
+      if (!dbg) {
+        return false;
+      }
+
+      const selectedLocation = dbg._selectors.getSelectedLocation(
+        dbg._getState()
+      );
+
+      if (!selectedLocation) {
+        return false;
+      }
+
+      return (
+        selectedLocation.sourceId.includes(sourceFilename) &&
+        selectedLocation.line == sourceLine
+      );
+    };
+  }
 }
 
 async function waitForSelectedElementInInspector(toolbox, displayName) {

devtools/client/webconsole/test/browser/test-mangled-function.js

@@ -0,0 +1,2 @@
+"use strict";window.test_mangled = function() {console.log("simple mangled function");};
+//# sourceMappingURL=test-mangled-function.js.map

devtools/client/webconsole/test/browser/test-mangled-function.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["test-mangled-function.src.js"],"names":["window","test_mangled","console","log"],"mappings":"AAAA,aAEAA,OAAOC,aAAe,WACpBC,QAAQC,IAAI"}

devtools/client/webconsole/test/browser/test-mangled-function.src.js

@@ -0,0 +1,5 @@
+"use strict";
+
+window.test_mangled = function() {
+  console.log("simple mangled function");
+};

devtools/client/webconsole/test/browser/test-simple-function.html

@@ -2,6 +2,7 @@
 <html dir="ltr" xml:lang="en-US" lang="en-US">
   <head>
     <script src="test-simple-function.js"></script>
+    <script src="test-mangled-function.js"></script>
   </head>
   <body>
     <p>Test inspecting an element</p>