Shortcut to jump to mapped location (firefox-devtools#4144)

* Shortcut to jump to mapped location

* Get source location from mouse event util added

* Simplyfy EditorMenu with new function

* Clean-up

* temp

* Correct function argument

* Nuke unused variable

* fix

src/components/Editor/EditorMenu.js

@@ -1,11 +1,12 @@
 import { showMenu } from "devtools-launchpad";
 import { isOriginalId } from "devtools-source-map";
 import { copyToTheClipboard } from "../../utils/clipboard";
+import { getSourceLocationFromMouseEvent } from "../../utils/editor";
 
 function getMenuItems(
   event,
   {
-    codeMirror,
+    editor,
     selectedLocation,
     selectedSource,
     showSource,
@@ -39,7 +40,7 @@ function getMenuItems(
     click: () => copyToTheClipboard(selectedSource.get("url"))
   };
 
-  const selectionText = codeMirror.getSelection().trim();
+  const selectionText = editor.codeMirror.getSelection().trim();
   const copySource = {
     id: "node-menu-copy-source",
     label: copySourceLabel,
@@ -48,16 +49,11 @@ function getMenuItems(
     click: () => copyToTheClipboard(selectionText)
   };
 
-  const { line, ch } = codeMirror.coordsChar({
-    left: event.clientX,
-    top: event.clientY
+  const { line } = editor.codeMirror.coordsChar({
+    left: event.clientX
   });
 
-  const sourceLocation = {
-    sourceId: selectedLocation.sourceId,
-    line: line + 1,
-    column: ch + 1
-  };
+  const sourceLocation = getSourceLocationFromMouseEvent(editor, selectedLocation, event)
 
   const pairedType = isOriginalId(selectedLocation.sourceId)
     ? L10N.getStr("generated")
@@ -73,7 +69,7 @@ function getMenuItems(
   const watchExpressionLabel = {
     accesskey: "E",
     label: L10N.getStr("expressions.placeholder"),
-    click: () => addExpression(codeMirror.getSelection())
+    click: () => addExpression(editor.codeMirror.getSelection())
   };
 
   const blackBoxMenuItem = {
@@ -85,7 +81,7 @@ function getMenuItems(
   };
 
   // TODO: Find a new way to only add this for mapped sources?
-  const textSelected = codeMirror.somethingSelected();
+  const textSelected = editor.codeMirror.somethingSelected();
 
   const showSourceMenuItem = {
     id: "node-menu-show-source",

src/components/Editor/index.js

@@ -56,7 +56,8 @@ import {
   lineAtHeight,
   toSourceLine,
   toEditorLine,
-  resetLineNumberFormat
+  resetLineNumberFormat,
+  getSourceLocationFromMouseEvent
 } from "../../utils/editor";
 
 import { isFirefox } from "devtools-config";
@@ -133,6 +134,7 @@ class Editor extends PureComponent {
     // Set code editor wrapper to be focusable
     codeMirrorWrapper.tabIndex = 0;
     codeMirrorWrapper.addEventListener("keydown", e => this.onKeyDown(e));
+    codeMirrorWrapper.addEventListener("click", e => this.onClick(e));
 
     const toggleFoldMarkerVisibility = e => {
       if (node instanceof HTMLElement) {
@@ -152,11 +154,11 @@ class Editor extends PureComponent {
       codeMirror.on("gutterContextMenu", (cm, line, eventName, event) =>
         this.onGutterContextMenu(event)
       );
-      
-      codeMirror.on("contextmenu", (cm, event) => this.openMenu(event, cm));
+
+      codeMirror.on("contextmenu", (cm, event) => this.openMenu(event, editor));
     } else {
       codeMirrorWrapper.addEventListener("contextmenu", event =>
-        this.openMenu(event, codeMirror)
+        this.openMenu(event, editor)
       );
     }
 
@@ -310,7 +312,7 @@ class Editor extends PureComponent {
     );
   }
 
-  openMenu(event, codeMirror) {
+  openMenu(event, editor) {
     const {
       selectedSource,
       selectedLocation,
@@ -322,7 +324,7 @@ class Editor extends PureComponent {
     } = this.props;
 
     return EditorMenu({
-      codeMirror,
+      editor,
       event,
       selectedLocation,
       selectedSource,
@@ -417,6 +419,15 @@ class Editor extends PureComponent {
     });
   }
 
+  onClick(e: MouseEvent) {
+    const { selectedLocation, jumpToMappedLocation } = this.props;
+
+    if (e.metaKey && e.altKey) {
+      const sourceLocation = getSourceLocationFromMouseEvent(this.state.editor, selectedLocation, e);
+      jumpToMappedLocation(sourceLocation);
+   }
+  }
+
   toggleConditionalPanel(line) {
     if (this.isCbPanelOpen()) {
       return this.closeConditionalPanel();

src/test/mochitest/browser_dbg-breakpoints-cond.js

@@ -39,21 +39,21 @@ add_task(async function() {
   const dbg = await initDebugger("doc-scripts.html");
   await selectSource(dbg, "simple2");
 
-  // Adding a conditional Breakpoint
+  dump('Adding a conditional Breakpoint\n')
   await setConditionalBreakpoint(dbg, 5, "1");
   await waitForDispatch(dbg, "ADD_BREAKPOINT");
   let bp = findBreakpoint(dbg, "simple2", 5);
   is(bp.condition, "1", "breakpoint is created with the condition");
   assertEditorBreakpoint(dbg, 5, true);
 
-  // Editing a conditional Breakpoint
+  dump('Editing a conditional breakpoint\n')
   await setConditionalBreakpoint(dbg, 5, "2");
   await waitForDispatch(dbg, "SET_BREAKPOINT_CONDITION");
   bp = findBreakpoint(dbg, "simple2", 5);
   is(bp.condition, "12", "breakpoint is created with the condition");
   assertEditorBreakpoint(dbg, 5, true);
 
-  // Removing a conditional breakpoint
+  dump("Removing a conditional breakpoint\n")
   clickElement(dbg, "gutter", 5);
   await waitForDispatch(dbg, "REMOVE_BREAKPOINT");
   bp = findBreakpoint(dbg, "simple2", 5);

src/utils/editor/index.js

@@ -126,6 +126,19 @@ function lineAtHeight(editor, sourceId, event) {
   return toSourceLine(sourceId, editorLine);
 }
 
+function getSourceLocationFromMouseEvent(editor, selectedLocation, e) {
+  const { line, ch } = editor.codeMirror.coordsChar({
+     left: e.clientX,
+     top: e.clientY
+  });
+
+  return {
+     sourceId: selectedLocation.sourceId,
+     line: line + 1,
+     column: ch + 1
+  };
+}
+
 module.exports = Object.assign(
   {},
   expressionUtils,
@@ -144,6 +157,7 @@ module.exports = Object.assign(
     shouldShowFooter,
     traverseResults,
     markText,
-    lineAtHeight
+    lineAtHeight,
+    getSourceLocationFromMouseEvent
   }
 );