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 => {