Bug 1878647 - [devtools] Fix debugger editor line wrapping for codemirror 6 r=devtools-reviewers,nchevobbe

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

devtools/client/debugger/src/actions/ui.js

@@ -16,7 +16,7 @@ import { selectSource } from "../actions/sources/select";
 import {
   getEditor,
   getLocationsInViewport,
-  updateLineWrappingForAllDocuments,
+  updateEditorLineWrapping,
 } from "../utils/editor/index";
 import { blackboxSourceActorsForSource } from "./sources/blackbox";
 import { toggleBreakpoints } from "./breakpoints/index";
@@ -85,7 +85,7 @@ export function toggleInlinePreview(toggleValue) {
 
 export function toggleEditorWrapping(toggleValue) {
   return ({ dispatch, getState }) => {
-    updateLineWrappingForAllDocuments(toggleValue);
+    updateEditorLineWrapping(toggleValue);
 
     dispatch({
       type: "TOGGLE_EDITOR_WRAPPING",

devtools/client/debugger/src/utils/editor/index.js

@@ -27,6 +27,16 @@ export function removeEditor() {
   editor = null;
 }
 
+/**
+ *  Update line wrapping for the codemirror editor.
+ */
+export function updateEditorLineWrapping(value) {
+  if (!editor) {
+    return;
+  }
+  editor.setLineWrapping(value);
+}
+
 function getCodeMirror() {
   return editor && editor.hasCodeMirror ? editor.codeMirror : null;
 }

devtools/client/debugger/src/utils/editor/source-documents.js

@@ -54,18 +54,6 @@ function updateLineNumberFormat(editor, sourceId) {
   resizeToggleButton(cm);
 }
 
-/**
- *  Update the line wrapping state of all the documents
- */
-export function updateLineWrappingForAllDocuments(value) {
-  for (const doc of sourceDocs.values()) {
-    if (doc.cm == null) {
-      continue;
-    }
-    doc.cm.setOption("lineWrapping", value);
-  }
-}
-
 const contentTypeModeMap = new Map([
   ["text/javascript", { name: "javascript" }],
   ["text/typescript", { name: "javascript", typescript: true }],

devtools/client/shared/sourceeditor/editor.js

@@ -611,9 +611,12 @@ class Editor extends EventEmitter {
 
     const tabSizeCompartment = new Compartment();
     const indentCompartment = new Compartment();
+    const lineWrapCompartment = new Compartment();
+
     this.#compartments = {
       tabSizeCompartment,
       indentCompartment,
+      lineWrapCompartment,
     };
 
     const indentStr = (this.config.indentWithTabs ? "\t" : " ").repeat(
@@ -650,7 +653,7 @@ class Editor extends EventEmitter {
     }
 
     if (this.config.lineWrapping) {
-      extensions.push(EditorView.lineWrapping);
+      extensions.push(lineWrapCompartment.of(EditorView.lineWrapping));
     }
 
     const cm = new EditorView({
@@ -1490,6 +1493,23 @@ class Editor extends EventEmitter {
     cm.refresh();
   }
 
+  setLineWrapping(value) {
+    const cm = editors.get(this);
+    if (this.config.cm6) {
+      const {
+        codemirrorView: { EditorView },
+      } = this.#win.CodeMirror;
+      cm.dispatch({
+        effects: this.#compartments.lineWrapCompartment.reconfigure(
+          value ? EditorView.lineWrapping : []
+        ),
+      });
+    } else {
+      cm.setOption("lineWrapping", value);
+    }
+    this.config.lineWrapping = value;
+  }
+
   /**
    * Sets an option for the editor.  For most options it just defers to
    * CodeMirror.setOption, but certain ones are maintained within the editor