diff --git a/devtools/client/debugger/src/components/Editor/DebugLine.js b/devtools/client/debugger/src/components/Editor/DebugLine.js index 26dcb5497bc9..eaa5b9f23187 100644 --- a/devtools/client/debugger/src/components/Editor/DebugLine.js +++ b/devtools/client/debugger/src/components/Editor/DebugLine.js @@ -4,16 +4,8 @@ import { PureComponent } from "devtools/client/shared/vendor/react"; import PropTypes from "devtools/client/shared/vendor/react-prop-types"; -import { - toEditorPosition, - getDocument, - hasDocument, - startOperation, - endOperation, - getTokenEnd, -} from "../../utils/editor/index"; +import { toEditorPosition } from "../../utils/editor/index"; import { isException } from "../../utils/pause/index"; -import { getIndentation } from "../../utils/indentation"; import { connect } from "devtools/client/shared/vendor/react-redux"; import { markerTypes } from "../../constants"; import { @@ -24,7 +16,6 @@ import { getViewport, getSelectedTraceLocation, } from "../../selectors/index"; -import { features } from "../../utils/prefs"; export class DebugLine extends PureComponent { debugExpression; @@ -48,14 +39,8 @@ export class DebugLine extends PureComponent { } componentDidUpdate(prevProps) { - if (!features.codemirrorNext) { - startOperation(); - } this.clearDebugLine(prevProps); this.setDebugLine(); - if (!features.codemirrorNext) { - endOperation(); - } } setDebugLine() { @@ -64,108 +49,65 @@ export class DebugLine extends PureComponent { return; } - if (features.codemirrorNext) { - if (!selectedSource || location.source.id !== selectedSource.id) { - return; - } - - const { lineClass, markTextClass } = this.getTextClasses(why); - const editorLocation = toEditorPosition(location); - - // Show the paused "caret", to highlight on which particular line **and column** we are paused. - // - // Using only a `positionClassName` wouldn't only be applied to the immediate - // token after the position and force to use ::before to show the paused location. - // Using ::before prevents using :hover to be able to hide the icon on mouse hovering. - // - // So we have to use `createPositionElementNode`, similarly to column breakpoints - // to have a new dedicated DOM element for the paused location. - editor.setPositionContentMarker({ - id: markerTypes.PAUSED_LOCATION_MARKER, - - // Ensure displaying the marker after all the other markers and especially the column breakpoint markers - displayLast: true, - - positions: [editorLocation], - createPositionElementNode(_line, _column, isFirstNonSpaceColumn) { - const pausedLocation = document.createElement("span"); - pausedLocation.className = `paused-location${isFirstNonSpaceColumn ? " first-column" : ""}`; - - const bar = document.createElement("span"); - bar.className = `vertical-bar`; - pausedLocation.appendChild(bar); - - return pausedLocation; - }, - }); - - editor.setLineContentMarker({ - id: markerTypes.DEBUG_LINE_MARKER, - lineClassName: lineClass, - lines: [{ line: editorLocation.line }], - }); - editor.setPositionContentMarker({ - id: markerTypes.DEBUG_POSITION_MARKER, - positionClassName: markTextClass, - positions: [editorLocation], - }); - } else { - const doc = getDocument(location.source.id); - - let { line, column } = toEditorPosition(location); - let { markTextClass, lineClass } = this.getTextClasses(why); - doc.addLineClass(line, "wrap", lineClass); - - const lineText = doc.getLine(line); - column = Math.max(column, getIndentation(lineText)); - - // If component updates because user clicks on - // another source tab, codeMirror will be null. - const columnEnd = doc.cm ? getTokenEnd(doc.cm, line, column) : null; - - if (columnEnd === null) { - markTextClass += " to-line-end"; - } - - this.debugExpression = doc.markText( - { ch: column, line }, - { ch: columnEnd, line }, - { className: markTextClass } - ); + if (!selectedSource || location.source.id !== selectedSource.id) { + return; } + + const { lineClass, markTextClass } = this.getTextClasses(why); + const editorLocation = toEditorPosition(location); + + // Show the paused "caret", to highlight on which particular line **and column** we are paused. + // + // Using only a `positionClassName` wouldn't only be applied to the immediate + // token after the position and force to use ::before to show the paused location. + // Using ::before prevents using :hover to be able to hide the icon on mouse hovering. + // + // So we have to use `createPositionElementNode`, similarly to column breakpoints + // to have a new dedicated DOM element for the paused location. + editor.setPositionContentMarker({ + id: markerTypes.PAUSED_LOCATION_MARKER, + + // Ensure displaying the marker after all the other markers and especially the column breakpoint markers + displayLast: true, + + positions: [editorLocation], + createPositionElementNode(_line, _column, isFirstNonSpaceColumn) { + const pausedLocation = document.createElement("span"); + pausedLocation.className = `paused-location${isFirstNonSpaceColumn ? " first-column" : ""}`; + + const bar = document.createElement("span"); + bar.className = `vertical-bar`; + pausedLocation.appendChild(bar); + + return pausedLocation; + }, + }); + + editor.setLineContentMarker({ + id: markerTypes.DEBUG_LINE_MARKER, + lineClassName: lineClass, + lines: [{ line: editorLocation.line }], + }); + editor.setPositionContentMarker({ + id: markerTypes.DEBUG_POSITION_MARKER, + positionClassName: markTextClass, + positions: [editorLocation], + }); } clearDebugLine(otherProps = {}) { - if (features.codemirrorNext) { - const { location, editor, selectedSource } = this.props; - // Remove the debug line marker when no longer paused, or the selected source - // is no longer the source where the pause occured. - if ( - !location || - location.source.id !== selectedSource.id || - otherProps?.location !== location || - otherProps?.selectedSource?.id !== selectedSource.id - ) { - editor.removeLineContentMarker(markerTypes.DEBUG_LINE_MARKER); - editor.removePositionContentMarker(markerTypes.DEBUG_POSITION_MARKER); - editor.removePositionContentMarker(markerTypes.PAUSED_LOCATION_MARKER); - } - } else { - const { why, location } = otherProps; - // Avoid clearing the line if we didn't set a debug line before, - // or, if the document is no longer available - if (!location || !hasDocument(location.source.id)) { - return; - } - - if (this.debugExpression) { - this.debugExpression.clear(); - } - - const { line } = toEditorPosition(location); - const doc = getDocument(location.source.id); - const { lineClass } = this.getTextClasses(why); - doc.removeLineClass(line, "wrap", lineClass); + const { location, editor, selectedSource } = this.props; + // Remove the debug line marker when no longer paused, or the selected source + // is no longer the source where the pause occured. + if ( + !location || + location.source.id !== selectedSource.id || + otherProps?.location !== location || + otherProps?.selectedSource?.id !== selectedSource.id + ) { + editor.removeLineContentMarker(markerTypes.DEBUG_LINE_MARKER); + editor.removePositionContentMarker(markerTypes.DEBUG_POSITION_MARKER); + editor.removePositionContentMarker(markerTypes.PAUSED_LOCATION_MARKER); } } @@ -177,10 +119,10 @@ export class DebugLine extends PureComponent { }; } - // In CM6, we no longer highlight the next token via debug-expression + // We no longer highlight the next token via debug-expression // and only highlight the line via paused-line. return { - markTextClass: features.codemirrorNext ? null : "debug-expression", + markTextClass: null, lineClass: why == "tracer" ? "traced-line" : "paused-line", }; } @@ -191,13 +133,7 @@ export class DebugLine extends PureComponent { } function isDocumentReady(location, sourceTextContent) { - const contentAvailable = location && sourceTextContent; - // With CM6, the codemirror document is no longer cached - // so no need to check if its available - if (features.codemirrorNext) { - return contentAvailable; - } - return contentAvailable && hasDocument(location.source.id); + return location && sourceTextContent; } const mapStateToProps = state => { @@ -223,14 +159,11 @@ const mapStateToProps = state => { why = getPauseReason(state, getCurrentThread(state)); } - // For CM6, also check if we have a valid viewport. + // if we have a valid viewport. // This is a way to know if the actual source is displayed // and we are no longer on the "loading..." message - if (features.codemirrorNext) { - const viewport = getViewport(state); - if (!viewport) { - return {}; - } + if (!getViewport(state)) { + return {}; } const sourceTextContent = getSourceTextContent(state, location);