1 files changed, 48 insertions, 1 deletions
diff --git a/devtools/client/debugger/src/components/Editor/Exceptions.js b/devtools/client/debugger/src/components/Editor/Exceptions.js
index 2fb183f135..217ec40be6 100644
--- a/devtools/client/debugger/src/components/Editor/Exceptions.js
+++ b/devtools/client/debugger/src/components/Editor/Exceptions.js
@@ -6,25 +6,72 @@ import React, { Component } from "devtools/client/shared/vendor/react";
 import PropTypes from "devtools/client/shared/vendor/react-prop-types";
 import { connect } from "devtools/client/shared/vendor/react-redux";
 
+import {
+  toEditorPosition,
+  fromEditorLine,
+  getDocument,
+} from "../../utils/editor/index";
+import { createLocation } from "../../utils/location";
+
+import { features } from "../../utils/prefs";
+
 import Exception from "./Exception";
 
 import {
   getSelectedSource,
   getSelectedSourceExceptions,
 } from "../../selectors/index";
-import { getDocument } from "../../utils/editor/index";
 
 class Exceptions extends Component {
   static get propTypes() {
     return {
       exceptions: PropTypes.array,
       selectedSource: PropTypes.object,
+      editor: PropTypes.object,
     };
   }
 
+  componentDidUpdate() {
+    const { exceptions, selectedSource, editor } = this.props;
+
+    if (!features.codemirrorNext) {
+      return;
+    }
+
+    if (!selectedSource || !editor || !exceptions.length) {
+      return;
+    }
+
+    editor.setLineContentMarker({
+      id: "line-exception-marker",
+      lineClassName: "line-exception",
+      condition: line => {
+        const lineNumber = fromEditorLine(selectedSource.id, line);
+
+        const exception = exceptions.find(e => e.lineNumber == lineNumber);
+        if (!exception) {
+          return false;
+        }
+        const exceptionLocation = createLocation({
+          source: selectedSource,
+          line: exception.lineNumber,
+          // Exceptions are reported with column being 1-based
+          // while the frontend uses 0-based column.
+          column: exception.columnNumber - 1,
+        });
+        const editorLocation = toEditorPosition(exceptionLocation);
+        return editorLocation.line == lineNumber;
+      },
+    });
+  }
+
   render() {
     const { exceptions, selectedSource } = this.props;
 
+    if (features.codemirrorNext) {
+      return null;
+    }
+
     if (!selectedSource || !exceptions.length) {
       return null;
     }