diff options
Diffstat (limited to 'devtools/client/debugger/src/components')
9 files changed, 362 insertions, 109 deletions
diff --git a/devtools/client/debugger/src/components/Editor/Breakpoints.css b/devtools/client/debugger/src/components/Editor/Breakpoints.css index 92121e0f46..4983688031 100644 --- a/devtools/client/debugger/src/components/Editor/Breakpoints.css +++ b/devtools/client/debugger/src/components/Editor/Breakpoints.css @@ -95,12 +95,16 @@ right: -16px; } -.new-breakpoint.has-condition .CodeMirror-gutter-wrapper svg { +.new-breakpoint.has-condition .CodeMirror-gutter-wrapper svg, +/* Codemirror 6*/ +.cm6-gutter-breakpoint .breakpoint-marker.has-condition svg { fill: var(--breakpoint-condition-fill); stroke: var(--breakpoint-condition-stroke); } -.new-breakpoint.has-log .CodeMirror-gutter-wrapper svg { +.new-breakpoint.has-log .CodeMirror-gutter-wrapper svg, +/* Codemirror 6*/ +.cm6-gutter-breakpoint .breakpoint-marker.has-log svg { fill: var(--logpoint-fill); stroke: var(--logpoint-stroke); } diff --git a/devtools/client/debugger/src/components/Editor/ConditionalPanel.css b/devtools/client/debugger/src/components/Editor/ConditionalPanel.css index 4ce8dbcd8c..1aeac91604 100644 --- a/devtools/client/debugger/src/components/Editor/ConditionalPanel.css +++ b/devtools/client/debugger/src/components/Editor/ConditionalPanel.css @@ -37,3 +37,8 @@ /* Match the color of the placeholder text to existing inputs in the Debugger */ color: var(--theme-text-color-alt); } + +/* Removing the line padding for Codemirror 6 */ +.cm-line:has(div.conditional-breakpoint-panel) { + padding: 0; +} diff --git a/devtools/client/debugger/src/components/Editor/ConditionalPanel.js b/devtools/client/debugger/src/components/Editor/ConditionalPanel.js index 97876f2f00..4e6f0b58ea 100644 --- a/devtools/client/debugger/src/components/Editor/ConditionalPanel.js +++ b/devtools/client/debugger/src/components/Editor/ConditionalPanel.js @@ -11,7 +11,8 @@ import ReactDOM from "devtools/client/shared/vendor/react-dom"; import PropTypes from "devtools/client/shared/vendor/react-prop-types"; import { connect } from "devtools/client/shared/vendor/react-redux"; import { toEditorLine } from "../../utils/editor/index"; -import { prefs } from "../../utils/prefs"; +import { createEditor } from "../../utils/editor/create-editor"; +import { prefs, features } from "../../utils/prefs"; import actions from "../../actions/index"; import { @@ -21,6 +22,7 @@ import { } from "../../selectors/index"; const classnames = require("resource://devtools/client/shared/classnames.js"); +const CONDITIONAL_BP_MARKER = "conditional-breakpoint-panel-marker"; function addNewLine(doc) { const cursor = doc.getCursor(); @@ -49,6 +51,7 @@ export class ConditionalPanel extends PureComponent { log: PropTypes.bool.isRequired, openConditionalPanel: PropTypes.func.isRequired, setBreakpointOptions: PropTypes.func.isRequired, + selectedSource: PropTypes.object.isRequired, }; } @@ -111,17 +114,53 @@ export class ConditionalPanel extends PureComponent { } }; + showConditionalPanel(prevProps) { + const { location, editor, breakpoint, selectedSource } = this.props; + // When breakpoint is removed + if (prevProps?.breakpoint && !breakpoint) { + editor.removeLineContentMarker(CONDITIONAL_BP_MARKER); + return; + } + if (selectedSource.id !== location.source.id) { + editor.removeLineContentMarker(CONDITIONAL_BP_MARKER); + return; + } + const editorLine = toEditorLine(location.source.id, location.line || 0); + editor.setLineContentMarker({ + id: CONDITIONAL_BP_MARKER, + condition: line => line == editorLine, + createLineElementNode: () => { + // Create a Codemirror 5 editor for the breakpoint panel + // TODO: Switch to use Codemirror 6 version Bug 1890205 + const breakpointPanelEditor = createEditor(); + breakpointPanelEditor.appendToLocalElement( + document.createElement("div") + ); + return this.renderConditionalPanel(this.props, breakpointPanelEditor); + }, + }); + } + // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507 UNSAFE_componentWillMount() { - return this.renderToWidget(this.props); + if (features.codemirrorNext) { + this.showConditionalPanel(); + } else { + this.renderToWidget(this.props); + } } // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507 UNSAFE_componentWillUpdate() { - return this.clearConditionalPanel(); + if (!features.codemirrorNext) { + this.clearConditionalPanel(); + } } - componentDidUpdate() { + componentDidUpdate(prevProps) { + if (features.codemirrorNext) { + this.showConditionalPanel(prevProps); + } this.keepFocusOnInput(); } @@ -129,7 +168,12 @@ export class ConditionalPanel extends PureComponent { // This is called if CodeMirror is re-initializing itself before the // user closes the conditional panel. Clear the widget, and re-render it // as soon as this component gets remounted - return this.clearConditionalPanel(); + const { editor } = this.props; + if (features.codemirrorNext) { + editor.removeLineContentMarker(CONDITIONAL_BP_MARKER); + } else { + this.clearConditionalPanel(); + } } renderToWidget(props) { @@ -141,7 +185,7 @@ export class ConditionalPanel extends PureComponent { const editorLine = toEditorLine(location.source.id, location.line || 0); this.cbPanel = editor.codeMirror.addLineWidget( editorLine, - this.renderConditionalPanel(props), + this.renderConditionalPanel(props, editor), { coverGutter: true, noHScroll: true, @@ -168,8 +212,8 @@ export class ConditionalPanel extends PureComponent { } } - createEditor = input => { - const { log, editor, closeConditionalPanel } = this.props; + createEditor = (input, editor) => { + const { log, closeConditionalPanel } = this.props; const codeMirror = editor.CodeMirror.fromTextArea(input, { mode: "javascript", theme: "mozilla", @@ -189,8 +233,12 @@ export class ConditionalPanel extends PureComponent { codeMirror.on("blur", (cm, e) => { if ( - e?.relatedTarget && - e.relatedTarget.closest(".conditional-breakpoint-panel") + // if there is no event + // or if the focus is the conditional panel + // do not close the conditional panel + !e || + (e?.relatedTarget && + e.relatedTarget.closest(".conditional-breakpoint-panel")) ) { return; } @@ -217,7 +265,7 @@ export class ConditionalPanel extends PureComponent { return log ? options.logValue : options.condition; } - renderConditionalPanel(props) { + renderConditionalPanel(props, editor) { const { log } = props; const defaultValue = this.getDefaultValue(); @@ -239,7 +287,7 @@ export class ConditionalPanel extends PureComponent { ), textarea({ defaultValue, - ref: input => this.createEditor(input), + ref: input => this.createEditor(input, editor), }) ), panel diff --git a/devtools/client/debugger/src/components/Editor/Editor.css b/devtools/client/debugger/src/components/Editor/Editor.css index f28833747d..d2f55ed6db 100644 --- a/devtools/client/debugger/src/components/Editor/Editor.css +++ b/devtools/client/debugger/src/components/Editor/Editor.css @@ -146,7 +146,9 @@ html[dir="rtl"] .editor-mount { .new-debug-line-error .CodeMirror-activeline-background { display: none; } -.highlight-line .CodeMirror-line { +.highlight-line .CodeMirror-line, +/* For CM6 */ +.cm-editor .cm-line.highlight-line { animation-name: fade-highlight-out; animation-duration: var(--highlight-line-duration); animation-timing-function: ease-out; diff --git a/devtools/client/debugger/src/components/Editor/Footer.js b/devtools/client/debugger/src/components/Editor/Footer.js index 69c7b52b68..278bc1dad7 100644 --- a/devtools/client/debugger/src/components/Editor/Footer.js +++ b/devtools/client/debugger/src/components/Editor/Footer.js @@ -459,8 +459,6 @@ const mapStateToProps = state => { : null, isSourceActorWithSourceMap: isSourceActorWithSourceMapProp, - sourceMapURL: selectedLocation?.sourceActor.sourceMapURL, - areSourceMapsEnabled: areSourceMapsEnabledProp, shouldSelectOriginalLocation: getShouldSelectOriginalLocation(state), }; diff --git a/devtools/client/debugger/src/components/Editor/HighlightLine.js b/devtools/client/debugger/src/components/Editor/HighlightLine.js index 8639128905..0df0fa482e 100644 --- a/devtools/client/debugger/src/components/Editor/HighlightLine.js +++ b/devtools/client/debugger/src/components/Editor/HighlightLine.js @@ -2,10 +2,20 @@ * 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/>. */ +/** + * Uses of this panel are:- + * - Highlight line when source is opened using view source links from other panels + * - Highlight line with function or class from an Outline search result selection + * - Highlight line from a Quick open panel search result selection + * - Highlight the last selected line when a source is selected + * - Highlight the breakpoint line when the breakpoint is selected + */ + import { Component } from "devtools/client/shared/vendor/react"; import PropTypes from "devtools/client/shared/vendor/react-prop-types"; import { toEditorLine, + fromEditorLine, endOperation, startOperation, } from "../../utils/editor/index"; @@ -20,6 +30,7 @@ import { getCurrentThread, getShouldHighlightSelectedLocation, } from "../../selectors/index"; +import { features } from "../../utils/prefs"; function isDebugLine(selectedFrame, selectedLocation) { if (!selectedFrame) { @@ -32,14 +43,6 @@ function isDebugLine(selectedFrame, selectedLocation) { ); } -function isDocumentReady(selectedLocation, selectedSourceTextContent) { - return ( - selectedLocation && - selectedSourceTextContent && - hasDocument(selectedLocation.source.id) - ); -} - export class HighlightLine extends Component { isStepping = false; previousEditorLine = null; @@ -56,30 +59,34 @@ export class HighlightLine extends Component { selectedFrame: PropTypes.object, selectedLocation: PropTypes.object.isRequired, selectedSourceTextContent: PropTypes.object.isRequired, + shouldHighlightSelectedLocation: PropTypes.func.isRequired, + editor: PropTypes.object, }; } shouldComponentUpdate(nextProps) { - const { selectedLocation, selectedSourceTextContent } = nextProps; - return this.shouldSetHighlightLine( - selectedLocation, - selectedSourceTextContent - ); + return this.shouldSetHighlightLine(nextProps); } componentDidUpdate(prevProps) { - this.completeHighlightLine(prevProps); + this.highlightLine(prevProps); } componentDidMount() { - this.completeHighlightLine(null); + this.highlightLine(null); } - shouldSetHighlightLine(selectedLocation, selectedSourceTextContent) { - const { line } = selectedLocation; - const editorLine = toEditorLine(selectedLocation.source.id, line); + shouldSetHighlightLine({ selectedLocation, selectedSourceTextContent }) { + const editorLine = toEditorLine( + selectedLocation.source.id, + selectedLocation.line + ); - if (!isDocumentReady(selectedLocation, selectedSourceTextContent)) { + if ( + !selectedLocation || + !selectedSourceTextContent || + (!features.codemirrorNext && !hasDocument(selectedLocation.source.id)) + ) { return false; } @@ -90,58 +97,61 @@ export class HighlightLine extends Component { return true; } - completeHighlightLine(prevProps) { - const { - pauseCommand, - selectedLocation, - selectedFrame, - selectedSourceTextContent, - shouldHighlightSelectedLocation, - } = this.props; + highlightLine(prevProps) { + const { pauseCommand, shouldHighlightSelectedLocation } = this.props; if (pauseCommand) { this.isStepping = true; } - startOperation(); + if (!features.codemirrorNext) { + startOperation(); + } if (prevProps) { - this.clearHighlightLine( - prevProps.selectedLocation, - prevProps.selectedSourceTextContent - ); + this.clearHighlightLine(prevProps); } if (shouldHighlightSelectedLocation) { - this.setHighlightLine( - selectedLocation, - selectedFrame, - selectedSourceTextContent - ); + this.setHighlightLine(); + } + if (!features.codemirrorNext) { + endOperation(); } - endOperation(); } - setHighlightLine(selectedLocation, selectedFrame, selectedSourceTextContent) { - const { line } = selectedLocation; - if ( - !this.shouldSetHighlightLine(selectedLocation, selectedSourceTextContent) - ) { + setHighlightLine() { + const { selectedLocation, selectedFrame, editor } = this.props; + if (!this.shouldSetHighlightLine(this.props)) { return; } this.isStepping = false; const sourceId = selectedLocation.source.id; - const editorLine = toEditorLine(sourceId, line); + const editorLine = toEditorLine(sourceId, selectedLocation.line); this.previousEditorLine = editorLine; - if (!line || isDebugLine(selectedFrame, selectedLocation)) { + if ( + !selectedLocation.line || + isDebugLine(selectedFrame, selectedLocation) + ) { return; } - const doc = getDocument(sourceId); - doc.addLineClass(editorLine, "wrap", "highlight-line"); - this.resetHighlightLine(doc, editorLine); + if (features.codemirrorNext) { + editor.setLineContentMarker({ + id: "highlight-line-marker", + lineClassName: "highlight-line", + condition(line) { + const lineNumber = fromEditorLine(sourceId, line); + return selectedLocation.line == lineNumber; + }, + }); + } else { + const doc = getDocument(sourceId); + doc.addLineClass(editorLine, "wrap", "highlight-line"); + } + this.clearHighlightLineAfterDuration(); } - resetHighlightLine(doc, editorLine) { + clearHighlightLineAfterDuration() { const editorWrapper = document.querySelector(".editor-wrapper"); if (editorWrapper === null) { @@ -155,20 +165,28 @@ export class HighlightLine extends Component { 10 ); - setTimeout( - () => doc && doc.removeLineClass(editorLine, "wrap", "highlight-line"), - duration - ); + setTimeout(() => this.clearHighlightLine(this.props), duration); } - clearHighlightLine(selectedLocation, selectedSourceTextContent) { - if (!isDocumentReady(selectedLocation, selectedSourceTextContent)) { + clearHighlightLine({ selectedLocation, selectedSourceTextContent }) { + if (!selectedLocation || !selectedSourceTextContent) { + return; + } + + if (features.codemirrorNext) { + const { editor } = this.props; + if (editor) { + editor.removeLineContentMarker("highlight-line-marker"); + } + return; + } + + if (!hasDocument(selectedLocation.source.id)) { return; } - const { line } = selectedLocation; const sourceId = selectedLocation.source.id; - const editorLine = toEditorLine(sourceId, line); + const editorLine = toEditorLine(sourceId, selectedLocation.line); const doc = getDocument(sourceId); doc.removeLineClass(editorLine, "wrap", "highlight-line"); } diff --git a/devtools/client/debugger/src/components/Editor/HighlightLines.js b/devtools/client/debugger/src/components/Editor/HighlightLines.js index e34a86aba9..e62125e5f8 100644 --- a/devtools/client/debugger/src/components/Editor/HighlightLines.js +++ b/devtools/client/debugger/src/components/Editor/HighlightLines.js @@ -2,8 +2,15 @@ * 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/>. */ +/** + * Uses of this panel are:- + * - Highlighting lines of a function selected to be copied using the "Copy function" context menu in the Outline panel + */ + import { Component } from "devtools/client/shared/vendor/react"; import PropTypes from "devtools/client/shared/vendor/react-prop-types"; +import { fromEditorLine } from "../../utils/editor/index"; +import { features } from "../../utils/prefs"; class HighlightLines extends Component { static get propTypes() { @@ -33,9 +40,19 @@ class HighlightLines extends Component { clearHighlightRange() { const { range, editor } = this.props; - const { codeMirror } = editor; + if (!range) { + return; + } - if (!range || !codeMirror) { + if (features.codemirrorNext) { + if (editor) { + editor.removeLineContentMarker("multi-highlight-line-marker"); + } + return; + } + + const { codeMirror } = editor; + if (!codeMirror) { return; } @@ -50,14 +67,31 @@ class HighlightLines extends Component { highlightLineRange = () => { const { range, editor } = this.props; - const { codeMirror } = editor; + if (!range) { + return; + } - if (!range || !codeMirror) { + if (features.codemirrorNext) { + // TODO: Fix scrolling into view if its out Bug 1894725 + if (editor) { + editor.setLineContentMarker({ + id: "multi-highlight-line-marker", + lineClassName: "highlight-lines", + condition(line) { + const lineNumber = fromEditorLine(null, line); + return lineNumber >= range.start && lineNumber <= range.end; + }, + }); + } return; } - const { start, end } = range; + const { codeMirror } = editor; + if (!codeMirror) { + return; + } + const { start, end } = range; codeMirror.operation(() => { editor.alignLine(start); for (let line = start - 1; line < end; line++) { diff --git a/devtools/client/debugger/src/components/Editor/InlinePreviews.js b/devtools/client/debugger/src/components/Editor/InlinePreviews.js index ba8b08669a..56c5f5021f 100644 --- a/devtools/client/debugger/src/components/Editor/InlinePreviews.js +++ b/devtools/client/debugger/src/components/Editor/InlinePreviews.js @@ -3,9 +3,13 @@ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */ import React, { Component } from "devtools/client/shared/vendor/react"; +import ReactDOM from "devtools/client/shared/vendor/react-dom"; + +import actions from "../../actions/index"; import { div } from "devtools/client/shared/vendor/react-dom-factories"; import PropTypes from "devtools/client/shared/vendor/react-prop-types"; import InlinePreviewRow from "./InlinePreviewRow"; +import InlinePreview from "./InlinePreview"; import { connect } from "devtools/client/shared/vendor/react-redux"; import { getSelectedFrame, @@ -13,6 +17,8 @@ import { getInlinePreviews, } from "../../selectors/index"; +import { features } from "../../utils/prefs"; + function hasPreviews(previews) { return !!previews && !!Object.keys(previews).length; } @@ -31,9 +37,85 @@ class InlinePreviews extends Component { return hasPreviews(previews); } + componentDidMount() { + this.renderInlinePreviewMarker(); + } + + componentDidUpdate() { + this.renderInlinePreviewMarker(); + } + + renderInlinePreviewMarker() { + const { + editor, + selectedFrame, + selectedSource, + previews, + openElementInInspector, + highlightDomElement, + unHighlightDomElement, + } = this.props; + + if (!features.codemirrorNext) { + return; + } + + if ( + !editor || + !selectedFrame || + selectedFrame.location.source.id !== selectedSource.id || + !hasPreviews(previews) + ) { + editor.removeLineContentMarker("inline-preview-marker"); + return; + } + editor.setLineContentMarker({ + id: "inline-preview-marker", + condition: line => { + // CM6 line is 1-based unlike CM5 which is 0-based. + return !!previews[line - 1]; + }, + createLineElementNode: line => { + const widgetNode = document.createElement("div"); + widgetNode.className = "inline-preview"; + + ReactDOM.render( + React.createElement( + React.Fragment, + null, + previews[line - 1].map(preview => + React.createElement(InlinePreview, { + line, + key: `${line}-${preview.name}`, + variable: preview.name, + value: preview.value, + openElementInInspector, + highlightDomElement, + unHighlightDomElement, + }) + ) + ), + widgetNode + ); + return widgetNode; + }, + }); + } + + componentWillUnmount() { + if (!features.codemirrorNext) { + return; + } + this.props.editor.removeLineContentMarker("inline-preview-marker"); + } + render() { const { editor, selectedFrame, selectedSource, previews } = this.props; + if (features.codemirrorNext) { + return null; + } + // Render only if currently open file is the one where debugger is paused if ( !selectedFrame || @@ -77,4 +159,8 @@ const mapStateToProps = state => { }; }; -export default connect(mapStateToProps)(InlinePreviews); +export default connect(mapStateToProps, { + openElementInInspector: actions.openElementInInspectorCommand, + highlightDomElement: actions.highlightDomElement, + unHighlightDomElement: actions.unHighlightDomElement, +})(InlinePreviews); diff --git a/devtools/client/debugger/src/components/Editor/index.js b/devtools/client/debugger/src/components/Editor/index.js index e21e05c11a..38040e3314 100644 --- a/devtools/client/debugger/src/components/Editor/index.js +++ b/devtools/client/debugger/src/components/Editor/index.js @@ -61,7 +61,6 @@ import { lineAtHeight, toSourceLine, getDocument, - scrollToPosition, toEditorPosition, getSourceLocationFromMouseEvent, hasDocument, @@ -149,15 +148,15 @@ class Editor extends PureComponent { this.props.selectedSourceTextContent?.value || nextProps.symbols !== this.props.symbols; + const shouldScroll = + nextProps.selectedLocation && + this.shouldScrollToLocation(nextProps, editor); + if (!features.codemirrorNext) { const shouldUpdateSize = nextProps.startPanelSize !== this.props.startPanelSize || nextProps.endPanelSize !== this.props.endPanelSize; - const shouldScroll = - nextProps.selectedLocation && - this.shouldScrollToLocation(nextProps, editor); - if (shouldUpdateText || shouldUpdateSize || shouldScroll) { startOperation(); if (shouldUpdateText) { @@ -183,6 +182,10 @@ class Editor extends PureComponent { if (shouldUpdateText) { this.setText(nextProps, editor); } + + if (shouldScroll) { + this.scrollToLocation(nextProps, editor); + } } } @@ -238,7 +241,12 @@ class Editor extends PureComponent { editor.setUpdateListener(this.onEditorUpdated); editor.setGutterEventListeners({ click: (event, cm, line) => this.onGutterClick(cm, line, null, event), - contextmenu: (event, cm, line) => this.openMenu(event, line, true), + contextmenu: (event, cm, line) => this.openMenu(event, line), + }); + editor.setContentEventListeners({ + click: (event, cm, line, column) => this.onClick(event, line, column), + contextmenu: (event, cm, line, column) => + this.openMenu(event, line, column), }); } this.setState({ editor }); @@ -278,7 +286,7 @@ class Editor extends PureComponent { } }; - componentDidUpdate(prevProps) { + componentDidUpdate(prevProps, prevState) { const { selectedSource, blackboxedRanges, @@ -295,7 +303,9 @@ class Editor extends PureComponent { if (features.codemirrorNext) { const shouldUpdateBreakableLines = prevProps.breakableLines.size !== this.props.breakableLines.size || - prevProps.selectedSource?.id !== selectedSource.id; + prevProps.selectedSource?.id !== selectedSource.id || + // Make sure we update after the editor has loaded + (!prevState.editor && !!editor); const isSourceWasm = isWasm(selectedSource.id); @@ -459,7 +469,7 @@ class Editor extends PureComponent { }; // Note: The line is optional, if not passed (as is likely for codemirror 6) // it fallsback to lineAtHeight. - openMenu(event, line) { + openMenu(event, line, ch) { event.stopPropagation(); event.preventDefault(); @@ -508,7 +518,7 @@ class Editor extends PureComponent { line ).trim(); - const lineObject = { from: { line }, to: { line } }; + const lineObject = { from: { line, ch }, to: { line, ch } }; this.props.showEditorGutterContextMenu( event, @@ -523,13 +533,23 @@ class Editor extends PureComponent { return; } - const location = getSourceLocationFromMouseEvent( - editor, - selectedSource, - event - ); + let location; + if (features.codemirrorNext) { + location = createLocation({ + source: selectedSource, + line: fromEditorLine( + selectedSource.id, + line, + isWasm(selectedSource.id) + ), + column: isWasm(selectedSource.id) ? 0 : ch + 1, + }); + } else { + location = getSourceLocationFromMouseEvent(editor, selectedSource, event); + } - this.props.showEditorContextMenu(event, editor, location); + const lineObject = editor.getSelectionCursor(); + this.props.showEditorContextMenu(event, editor, lineObject, location); } /** @@ -617,16 +637,29 @@ class Editor extends PureComponent { ); }; - onClick(e) { + onClick(e, line, ch) { const { selectedSource, updateCursorPosition, jumpToMappedLocation } = this.props; if (selectedSource) { - const sourceLocation = getSourceLocationFromMouseEvent( - this.state.editor, - selectedSource, - e - ); + let sourceLocation; + if (features.codemirrorNext) { + sourceLocation = createLocation({ + source: selectedSource, + line: fromEditorLine( + selectedSource.id, + line, + isWasm(selectedSource.id) + ), + column: isWasm(selectedSource.id) ? 0 : ch + 1, + }); + } else { + sourceLocation = getSourceLocationFromMouseEvent( + this.state.editor, + selectedSource, + e + ); + } if (e.metaKey && e.altKey) { jumpToMappedLocation(sourceLocation); @@ -664,8 +697,7 @@ class Editor extends PureComponent { const lineText = doc.getLine(line); column = Math.max(column, getIndentation(lineText)); } - - scrollToPosition(editor.codeMirror, line, column); + editor.scrollTo(line, column); } setText(props, editor) { @@ -774,6 +806,7 @@ class Editor extends PureComponent { }; } + // eslint-disable-next-line complexity renderItems() { const { selectedSource, @@ -788,19 +821,44 @@ class Editor extends PureComponent { } = this.props; const { editor } = this.state; + if (!selectedSource || !editor) { + return null; + } + if (features.codemirrorNext) { return React.createElement( React.Fragment, null, - React.createElement(Breakpoints, { - editor, - }), + React.createElement(Breakpoints, { editor }), React.createElement(DebugLine, { editor, selectedSource }), - React.createElement(Exceptions, { editor }) + React.createElement(HighlightLine, { editor }), + React.createElement(Exceptions, { editor }), + conditionalPanelLocation + ? React.createElement(ConditionalPanel, { + editor, + selectedSource, + }) + : null, + isPaused && + inlinePreviewEnabled && + (!selectedSource.isOriginal || + selectedSource.isPrettyPrinted || + mapScopesEnabled) + ? React.createElement(InlinePreviews, { + editor, + selectedSource, + }) + : null, + highlightedLineRange + ? React.createElement(HighlightLines, { + editor, + range: highlightedLineRange, + }) + : null ); } - if (!selectedSource || !editor || !getDocument(selectedSource.id)) { + if (!getDocument(selectedSource.id)) { return null; } return div( |