From 520223e466de4257c5c6ccea1089e9cd88bb56dc Mon Sep 17 00:00:00 2001 From: Gareth Date: Tue, 26 Sep 2017 17:11:35 -0400 Subject: [PATCH] Shortcut to jump to mapped location (#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 | 20 +++++++--------- src/components/Editor/index.js | 23 ++++++++++++++----- .../mochitest/browser_dbg-breakpoints-cond.js | 6 ++--- src/utils/editor/index.js | 16 ++++++++++++- 4 files changed, 43 insertions(+), 22 deletions(-) diff --git a/src/components/Editor/EditorMenu.js b/src/components/Editor/EditorMenu.js index 43f7c9b726..c1100d642d 100644 --- a/src/components/Editor/EditorMenu.js +++ b/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", diff --git a/src/components/Editor/index.js b/src/components/Editor/index.js index 47714d32c4..114a4f6f8e 100644 --- a/src/components/Editor/index.js +++ b/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(); diff --git a/src/test/mochitest/browser_dbg-breakpoints-cond.js b/src/test/mochitest/browser_dbg-breakpoints-cond.js index 1adcf1d3f2..7b124f613c 100644 --- a/src/test/mochitest/browser_dbg-breakpoints-cond.js +++ b/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); diff --git a/src/utils/editor/index.js b/src/utils/editor/index.js index 7ccb2704a1..66e27de0b0 100644 --- a/src/utils/editor/index.js +++ b/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 } );