Bug 1543791 - Ensure breakpoints in sidebar are always syntax highlighted r=jlast

Differential Revision: https://phabricator.services.mozilla.com/D27151

--HG--
extra : moz-landing-system : lando

devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoint.js

@@ -21,7 +21,6 @@ import {
 } from "../../../utils/breakpoint";
 import { getSelectedLocation } from "../../../utils/source-maps";
 import { features } from "../../../utils/prefs";
-import { getEditor } from "../../../utils/editor";
 
 import type {
   Breakpoint as BreakpointType,
@@ -30,6 +29,7 @@ import type {
   SourceLocation,
   Context
 } from "../../../types";
+import type SourceEditor from "../../../utils/editor/source-editor";
 
 type FormattedFrame = Frame & {
   selectedLocation: SourceLocation
@@ -50,6 +50,7 @@ type Props = {
   selectedSource: Source,
   source: Source,
   frame: FormattedFrame,
+  editor: SourceEditor,
   enableBreakpoint: typeof actions.enableBreakpoint,
   removeBreakpoint: typeof actions.removeBreakpoint,
   removeBreakpoints: typeof actions.removeBreakpoints,
@@ -137,22 +138,16 @@ class Breakpoint extends PureComponent<Props> {
 
   highlightText = memoize(
     (text = "", editor) => {
-      if (!editor.CodeMirror) {
-        return { __html: text };
-      }
-
       const node = document.createElement("div");
       editor.CodeMirror.runMode(text, "application/javascript", node);
       return { __html: node.innerHTML };
     },
-    (text, editor) => `${text} - ${editor.CodeMirror ? "editor" : ""}`
+    text => text
   );
 
-  /* eslint-disable react/no-danger */
   render() {
-    const { breakpoint } = this.props;
+    const { breakpoint, editor } = this.props;
     const text = this.getBreakpointText();
-    const editor = getEditor();
     const labelId = `${breakpoint.id}-label`;
 
     return (

devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js

@@ -16,6 +16,7 @@ import BreakpointHeading from "./BreakpointHeading";
 import actions from "../../../actions";
 import { getDisplayPath } from "../../../utils/source";
 import { getSelectedLocation } from "../../../utils/source-maps";
+import { createHeadlessEditor } from "../../../utils/editor/create-editor";
 
 import {
   makeBreakpointId,
@@ -30,6 +31,7 @@ import {
 
 import type { Source } from "../../../types";
 import type { BreakpointSources } from "../../../selectors/breakpointSources";
+import type SourceEditor from "../../../utils/editor/source-editor";
 
 import "./Breakpoints.css";
 
@@ -43,6 +45,27 @@ type Props = {
 };
 
 class Breakpoints extends Component<Props> {
+  headlessEditor: ?SourceEditor;
+
+  componentWillUnmount() {
+    this.removeEditor();
+  }
+
+  getEditor(): SourceEditor {
+    if (!this.headlessEditor) {
+      this.headlessEditor = createHeadlessEditor();
+    }
+    return this.headlessEditor;
+  }
+
+  removeEditor() {
+    if (!this.headlessEditor) {
+      return;
+    }
+    this.headlessEditor.destroy();
+    this.headlessEditor = (null: any);
+  }
+
   renderExceptionsOptions() {
     const {
       breakpointSources,
@@ -111,6 +134,7 @@ class Breakpoints extends Component<Props> {
                 breakpoint={breakpoint}
                 source={source}
                 selectedSource={selectedSource}
+                editor={this.getEditor()}
                 key={makeBreakpointId(
                   getSelectedLocation(breakpoint, selectedSource)
                 )}

devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/Breakpoint.spec.js

@@ -87,6 +87,13 @@ function generateDefaults(overrides = {}, breakpointOverrides = {}) {
     breakpoint,
     selectedSource,
     frame: (null: any),
+    editor: {
+      CodeMirror: {
+        runMode: function() {
+          return "";
+        }
+      }
+    },
     ...overrides
   };
 }

devtools/client/debugger/src/utils/editor/create-editor.js

@@ -37,3 +37,9 @@ export function createEditor() {
     }
   });
 }
+
+export function createHeadlessEditor() {
+  const editor = createEditor();
+  editor.appendToLocalElement(document.createElement("div"));
+  return editor;
+}