Use onViewSourceInDebugger prop when clicking on the Error rep stacktrace location.

Fixes #942.

Author: nchevobbe

packages/devtools-reps/src/reps/error.js

@@ -15,6 +15,7 @@ const { MODE } = require("./constants");
 
 const dom = require("react-dom-factories");
 const { span } = dom;
+const IGNORED_SOURCE_URLS = ["debugger eval code"];
 
 /**
  * Renders Error objects.
@@ -54,7 +55,7 @@ function ErrorRep(props) {
   }
 
   if (preview.stack && props.mode !== MODE.TINY) {
-    content.push("\n", getStacktraceElements(preview));
+    content.push("\n", getStacktraceElements(props, preview));
   }
 
   return span({
@@ -79,12 +80,12 @@ function ErrorRep(props) {
  * asdf       (<anonymous>:2:10)
  *            (<anonymous>:11:1)
  */
-function getStacktraceElements(preview) {
+function getStacktraceElements(props, preview) {
   const stack = [];
   preview.stack
     .split("\n")
-    .forEach((line, index) => {
-      if (!line) {
+    .forEach((frame, index) => {
+      if (!frame) {
         // Skip any blank lines
         return;
       }
@@ -95,7 +96,7 @@ function getStacktraceElements(preview) {
       // Given the input: "functionName@scriptLocation:2:100"
       // Result:
       // ["functionName@scriptLocation:2:100", "functionName", "scriptLocation:2:100"]
-      const result = line.match(/^(.*)@(.*)$/);
+      const result = frame.match(/^(.*)@(.*)$/);
       if (result && result.length === 3) {
         functionName = result[1];
 
@@ -109,13 +110,40 @@ function getStacktraceElements(preview) {
         functionName = "<anonymous>";
       }
 
+      let onLocationClick;
+      // Given the input: "scriptLocation:2:100"
+      // Result:
+      // ["scriptLocation:2:100", "scriptLocation", "2", "100"]
+      const locationParts = location.match(/^(.*):(\d+):(\d+)$/);
+      if (
+        props.onViewSourceInDebugger &&
+        location &&
+        !IGNORED_SOURCE_URLS.includes(locationParts[1]) &&
+        locationParts
+      ) {
+        let [, url, line, column] = locationParts;
+        onLocationClick = e => {
+          // Don't trigger ObjectInspector expand/collapse.
+          e.stopPropagation();
+          props.onViewSourceInDebugger({
+            url,
+            line: Number(line),
+            column: Number(column),
+          });
+        };
+      }
+
       stack.push(span({
         key: "fn" + index,
         className: "objectBox-stackTrace-fn"
       }, cleanFunctionName(functionName)),
       span({
         key: "location" + index,
-        className: "objectBox-stackTrace-location"
+        className: "objectBox-stackTrace-location",
+        onClick: onLocationClick,
+        title: onLocationClick
+          ? "View source in debugger"
+          : undefined,
       }, ` (${location})`));
     });
 

packages/devtools-reps/src/reps/reps.css

@@ -100,6 +100,10 @@
   padding-inline-start: 17px;
 }
 
+.objectBox-stackTrace-location {
+  cursor: pointer;
+}
+
 .objectBox-Location,
 .location {
   color: var(--location-color);

packages/devtools-reps/src/reps/tests/error.js

@@ -2,6 +2,7 @@
  * 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/. */
 
+/* global jest */
 const { shallow } = require("enzyme");
 const {
   REPS,
@@ -332,3 +333,80 @@ describe("Error - base-loader.js", () => {
     expect(renderedComponent).toMatchSnapshot();
   });
 });
+
+describe("Error - stacktrace location click", () => {
+  it("Calls onViewSourceInDebugger with the expected arguments", () => {
+    const onViewSourceInDebugger = jest.fn();
+    const object = stubs.get("base-loader Error");
+
+    const renderedComponent = shallow(ErrorRep.rep({
+      object,
+      onViewSourceInDebugger
+    }));
+
+    const locations = renderedComponent.find(".objectBox-stackTrace-location");
+    expect(locations.exists()).toBeTruthy();
+
+    expect(locations.first().prop("title")).toBe("View source in debugger");
+    locations.first().simulate("click", {
+      type: "click",
+      stopPropagation: () => {},
+    });
+
+    expect(onViewSourceInDebugger.mock.calls.length).toEqual(1);
+    let mockCall = onViewSourceInDebugger.mock.calls[0][0];
+    expect(mockCall.url).toEqual("resource://devtools/shared/client/debugger-client.js");
+    expect(mockCall.line).toEqual(856);
+    expect(mockCall.column).toEqual(9);
+
+    expect(locations.last().prop("title")).toBe("View source in debugger");
+    locations.last().simulate("click", {
+      type: "click",
+      stopPropagation: () => {},
+    });
+
+    expect(onViewSourceInDebugger.mock.calls.length).toEqual(2);
+    mockCall = onViewSourceInDebugger.mock.calls[1][0];
+    expect(mockCall.url).toEqual("resource://devtools/shared/ThreadSafeDevToolsUtils.js");
+    expect(mockCall.line).toEqual(109);
+    expect(mockCall.column).toEqual(14);
+  });
+
+  it("Does not call onViewSourceInDebugger on excluded urls", () => {
+    const onViewSourceInDebugger = jest.fn();
+    const object = stubs.get("URIError");
+
+    const renderedComponent = shallow(ErrorRep.rep({
+      object,
+      onViewSourceInDebugger
+    }));
+
+    const locations = renderedComponent.find(".objectBox-stackTrace-location");
+    expect(locations.exists()).toBeTruthy();
+    expect(locations.first().prop("title")).toBe(undefined);
+
+    locations.first().simulate("click", {
+      type: "click",
+      stopPropagation: () => {},
+    });
+
+    expect(onViewSourceInDebugger.mock.calls.length).toEqual(0);
+  });
+
+  it("Does not throw when onViewSourceInDebugger props is not provided", () => {
+    const object = stubs.get("base-loader Error");
+
+    const renderedComponent = shallow(ErrorRep.rep({
+      object,
+    }));
+
+    const locations = renderedComponent.find(".objectBox-stackTrace-location");
+    expect(locations.exists()).toBeTruthy();
+    expect(locations.first().prop("title")).toBe(undefined);
+
+    locations.first().simulate("click", {
+      type: "click",
+      stopPropagation: () => {},
+    });
+  });
+});