Add a button to jump to a function definition.

Fixes #640.

The Function rep would accept an onViewSourceInDebugger prop, and the
icon would be shown when we do have this props as well as a location with
a non-null url (so we don't show it on prototypes for example).
Clicking on the button would call the prop with the location object.
A test is added to make sure we handle the different possible cases.

Author: nchevobbe

packages/devtools-reps/src/launchpad/components/Result.js

@@ -81,6 +81,8 @@ class Result extends Component {
         releaseActor,
         mode: MODE[modeKey],
         onInspectIconClick: nodeFront => console.log("inspectIcon click", nodeFront),
+        onViewSourceInDebugger: location =>
+          console.log("onViewSourceInDebugger", {location}),
       })
     );
   }

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

@@ -13,6 +13,7 @@ const {
   wrapRender,
 } = require("./rep-utils");
 const { MODE } = require("./constants");
+const Svg = require("../shared/images/Svg");
 
 const dom = require("react-dom-factories");
 const { span } = dom;
@@ -23,10 +24,28 @@ const { span } = dom;
 FunctionRep.propTypes = {
   object: PropTypes.object.isRequired,
   parameterNames: PropTypes.array,
+  onViewSourceInDebugger: PropTypes.func,
 };
 
 function FunctionRep(props) {
-  let grip = props.object;
+  let {
+    object: grip,
+    onViewSourceInDebugger,
+  } = props;
+
+  let jumpToDefinitionButton;
+  if (onViewSourceInDebugger && grip.location && grip.location.url) {
+    jumpToDefinitionButton = Svg("jump-definition", {
+      element: "a",
+      draggable: false,
+      title: "Jump to definition",
+      onClick: e => {
+        // Stop the event propagation so we don't trigger ObjectInspector expand/collapse.
+        e.stopPropagation();
+        onViewSourceInDebugger(grip.location);
+      }
+    });
+  }
 
   return (
     span({
@@ -40,7 +59,8 @@ function FunctionRep(props) {
       getFunctionName(grip, props),
       "(",
       ...renderParams(props),
-      ")"
+      ")",
+      jumpToDefinitionButton,
     )
   );
 }

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

@@ -212,6 +212,22 @@
   fill: var(--theme-highlight-blue);
 }
 
+/******************************************************************************/
+/* Jump to definition button */
+
+.jump-definition svg {
+  stroke: var(--comment-node-color);
+  height: 16px;
+  width: 16px;
+  margin-left: .25em;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.jump-definition svg:hover {
+  stroke: var(--theme-highlight-blue);
+}
+
 /******************************************************************************/
 /* "more…" ellipsis */
 .more-ellipsis {

packages/devtools-reps/src/reps/tests/function.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 } = require("../rep");
 const { MODE } = require("../constants");
@@ -233,3 +234,53 @@ describe("Function - Anonymous generator function", () => {
     }).text()).toBe("* (a, b, c)");
   });
 });
+
+describe("Function - Jump to definition", () => {
+  it("renders an icon when onViewSourceInDebugger props is provided", () => {
+    const onViewSourceInDebugger = jest.fn();
+    const object = stubs.get("Named");
+    const renderedComponent = renderRep(object, {
+      onViewSourceInDebugger
+    });
+
+    const node = renderedComponent.find(".jump-definition");
+    node.simulate("click", {
+      type: "click",
+      stopPropagation: () => {},
+    });
+
+    expect(node.exists()).toBeTruthy();
+    expect(onViewSourceInDebugger.mock.calls.length).toEqual(1);
+    expect(onViewSourceInDebugger.mock.calls[0][0]).toEqual(object.location);
+  });
+
+  it("does not render an icon when onViewSourceInDebugger props is not provided", () => {
+    const object = stubs.get("Named");
+    const renderedComponent = renderRep(object);
+
+    const node = renderedComponent.find(".jump-definition");
+    expect(node.exists()).toBeFalsy();
+  });
+
+  it("does not render an icon when the object has no location", () => {
+    const object = Object.assign({}, stubs.get("Named"));
+    delete object.location;
+    const renderedComponent = renderRep(object, {
+      onViewSourceInDebugger: () => {}
+    });
+
+    const node = renderedComponent.find(".jump-definition");
+    expect(node.exists()).toBeFalsy();
+  });
+
+  it("does not render an icon when the object has no url location", () => {
+    const object = Object.assign({}, stubs.get("Named"));
+    object.location.url = null;
+    const renderedComponent = renderRep(object, {
+      onViewSourceInDebugger: () => {}
+    });
+
+    const node = renderedComponent.find(".jump-definition");
+    expect(node.exists()).toBeFalsy();
+  });
+});

packages/devtools-reps/src/shared/images/Svg.js

@@ -8,6 +8,7 @@ import InlineSVG from "svg-inline-react";
 
 const svg = {
   "open-inspector": require("./open-inspector.svg"),
+  "jump-definition": require("./jump-definition.svg"),
 };
 
 Svg.propTypes = {