diff options
Diffstat (limited to '')
-rw-r--r-- | devtools/client/debugger/src/components/Editor/Breakpoints.js | 114 |
1 files changed, 114 insertions, 0 deletions
diff --git a/devtools/client/debugger/src/components/Editor/Breakpoints.js b/devtools/client/debugger/src/components/Editor/Breakpoints.js index 6d1d088f11..ac3fe0890c 100644 --- a/devtools/client/debugger/src/components/Editor/Breakpoints.js +++ b/devtools/client/debugger/src/components/Editor/Breakpoints.js @@ -11,9 +11,31 @@ import { getSelectedSource, getFirstVisibleBreakpoints, } from "../../selectors/index"; +import { getSelectedLocation } from "../../utils/selected-location"; import { makeBreakpointId } from "../../utils/breakpoint/index"; import { connect } from "devtools/client/shared/vendor/react-redux"; +import { fromEditorLine } from "../../utils/editor/index"; import actions from "../../actions/index"; +import { features } from "../../utils/prefs"; +const classnames = require("resource://devtools/client/shared/classnames.js"); + +const isMacOS = Services.appinfo.OS === "Darwin"; + +const breakpointSvg = document.createElement("div"); +const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); +svg.setAttribute("viewBox", "0 0 60 15"); +svg.setAttribute("width", 60); +svg.setAttribute("height", 15); + +const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); +path.setAttributeNS( + null, + "d", + "M53.07.5H1.5c-.54 0-1 .46-1 1v12c0 .54.46 1 1 1h51.57c.58 0 1.15-.26 1.53-.7l4.7-6.3-4.7-6.3c-.38-.44-.95-.7-1.53-.7z" +); + +svg.appendChild(path); +breakpointSvg.appendChild(svg); class Breakpoints extends Component { static get propTypes() { @@ -27,6 +49,93 @@ class Breakpoints extends Component { showEditorEditBreakpointContextMenu: PropTypes.func, }; } + + constructor(props) { + super(props); + } + + componentDidUpdate() { + const { selectedSource, breakpoints, editor } = this.props; + + // Only for codemirror 6 + if (!features.codemirrorNext) { + return; + } + + if (!selectedSource || !breakpoints || !editor) { + return; + } + + const markers = [ + { + id: "gutter-breakpoint-marker", + lineClassName: "cm6-gutter-breakpoint", + condition: line => { + const lineNumber = fromEditorLine(selectedSource.id, line); + return breakpoints.some(bp => bp.location.line === lineNumber); + }, + createLineElementNode: line => { + const lineNumber = fromEditorLine(selectedSource.id, line); + const breakpoint = breakpoints.find( + bp => bp.location.line === lineNumber + ); + + const breakpointNode = breakpointSvg.cloneNode(true); + breakpointNode.appendChild(document.createTextNode(lineNumber)); + breakpointNode.className = classnames("breakpoint-marker", { + "breakpoint-disabled": breakpoint.disabled, + "has-condition": breakpoint?.options.condition, + "has-log": breakpoint?.options.logValue, + }); + breakpointNode.onclick = event => this.onClick(event, breakpoint); + breakpointNode.oncontextmenu = event => + this.onContextMenu(event, breakpoint); + return breakpointNode; + }, + }, + ]; + editor.setLineGutterMarkers(markers); + } + + onClick = (event, breakpoint) => { + const { + continueToHere, + toggleBreakpointsAtLine, + removeBreakpointsAtLine, + selectedSource, + } = this.props; + + event.stopPropagation(); + event.preventDefault(); + + // ignore right clicks when clicking on the breakpoint + if (event.button === 2) { + return; + } + + const selectedLocation = getSelectedLocation(breakpoint, selectedSource); + const ctrlOrCmd = isMacOS ? event.metaKey : event.ctrlKey; + + if (ctrlOrCmd) { + continueToHere(selectedLocation); + return; + } + + if (event.shiftKey) { + toggleBreakpointsAtLine(!breakpoint.disabled, selectedLocation.line); + return; + } + + removeBreakpointsAtLine(selectedLocation.source, selectedLocation.line); + }; + + onContextMenu = (event, breakpoint) => { + event.stopPropagation(); + event.preventDefault(); + + this.props.showEditorEditBreakpointContextMenu(event, breakpoint); + }; + render() { const { breakpoints, @@ -41,6 +150,11 @@ class Breakpoints extends Component { if (!selectedSource || !breakpoints) { return null; } + + if (features.codemirrorNext) { + return null; + } + return div( null, breakpoints.map(breakpoint => { |