chrome-devtools-frontend 1.0.941208 → 1.0.943182

package/front_end/ui/legacy/components/source_frame/SourceFrame.ts

@@ -33,12 +33,11 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as Formatter from '../../../../models/formatter/formatter.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
-import type * as Workspace from '../../../../models/workspace/workspace.js';
+import * as CodeMirror from '../../../../third_party/codemirror.next/codemirror.next.js';
+import * as CodeHighlighter from '../../../components/code_highlighter/code_highlighter.js';
+import * as TextEditor from '../../../components/text_editor/text_editor.js';
 import * as UI from '../../legacy.js';
 
-import type {SourcesTextEditorDelegate} from './SourcesTextEditor.js';
-import {Events, SourcesTextEditor} from './SourcesTextEditor.js';
-
 const UIStrings = {
   /**
   *@description Text for the source of something
@@ -85,9 +84,25 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/source_frame/SourceFrame.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class SourceFrameImpl extends UI.View.SimpleView implements UI.SearchableView.Searchable,
-                                                                   UI.SearchableView.Replaceable,
-                                                                   SourcesTextEditorDelegate, Transformer {
+export interface SourceFrameOptions {
+  // Whether to show line numbers. Defaults to true.
+  lineNumbers?: boolean;
+  // Whether to wrap lines. Defaults to false.
+  lineWrapping?: boolean;
+}
+
+export const enum Events {
+  EditorUpdate = 'EditorUpdate',
+  EditorScroll = 'EditorScroll',
+}
+
+export type EventTypes = {
+  [Events.EditorUpdate]: CodeMirror.ViewUpdate,
+  [Events.EditorScroll]: void,
+};
+
+export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.View.SimpleView>(
+    UI.View.SimpleView) implements UI.SearchableView.Searchable, UI.SearchableView.Replaceable, Transformer {
   private readonly lazyContent: () => Promise<TextUtils.ContentProvider.DeferredContent>;
   private prettyInternal: boolean;
   private rawContent: string|null;
@@ -96,13 +111,14 @@ export class SourceFrameImpl extends UI.View.SimpleView implements UI.Searchable
   private readonly prettyToggle: UI.Toolbar.ToolbarToggle;
   private shouldAutoPrettyPrint: boolean;
   private readonly progressToolbarItem: UI.Toolbar.ToolbarItem;
-  private textEditorInternal: SourcesTextEditor;
-  private prettyCleanGeneration: number|null;
-  private cleanGeneration: number;
+  private textEditorInternal: TextEditor.TextEditor.TextEditor;
+  private prettyBaseDoc: CodeMirror.Text|null = null;
+  private baseDoc: CodeMirror.Text;
+  private displayedSelection: CodeMirror.EditorSelection|null = null;
   private searchConfig: UI.SearchableView.SearchConfig|null;
   private delayedFindSearchMatches: (() => void)|null;
   private currentSearchResultIndex: number;
-  private searchResults: TextUtils.TextRange.TextRange[];
+  private searchResults: SearchMatch[];
   private searchRegex: RegExp|null;
   private loadError: boolean;
   private muteChangeEventsForSetContent: boolean;
@@ -118,12 +134,11 @@ export class SourceFrameImpl extends UI.View.SimpleView implements UI.Searchable
   private selectionToSet: TextUtils.TextRange.TextRange|null;
   private loadedInternal: boolean;
   private contentRequested: boolean;
-  private highlighterTypeInternal: string;
   private wasmDisassemblyInternal: Common.WasmDisassembly.WasmDisassembly|null;
   contentSet: boolean;
   constructor(
       lazyContent: () => Promise<TextUtils.ContentProvider.DeferredContent>,
-      codeMirrorOptions?: UI.TextEditor.Options) {
+      private readonly options: SourceFrameOptions = {}) {
     super(i18nString(UIStrings.source));
 
     this.lazyContent = lazyContent;
@@ -141,11 +156,11 @@ export class SourceFrameImpl extends UI.View.SimpleView implements UI.Searchable
 
     this.progressToolbarItem = new UI.Toolbar.ToolbarItem(document.createElement('div'));
 
-    this.textEditorInternal = new SourcesTextEditor(this, codeMirrorOptions);
-    this.textEditorInternal.show(this.element);
+    this.textEditorInternal = new TextEditor.TextEditor.TextEditor(this.placeholderEditorState(''));
+    this.textEditorInternal.style.flexGrow = '1';
+    this.element.appendChild(this.textEditorInternal);
 
-    this.prettyCleanGeneration = null;
-    this.cleanGeneration = 0;
+    this.baseDoc = this.textEditorInternal.state.doc;
 
     this.searchConfig = null;
     this.delayedFindSearchMatches = null;
@@ -154,36 +169,109 @@ export class SourceFrameImpl extends UI.View.SimpleView implements UI.Searchable
     this.searchRegex = null;
     this.loadError = false;
 
-    this.textEditorInternal.addEventListener(Events.EditorFocused, this.resetCurrentSearchResultIndex, this);
-    this.textEditorInternal.addEventListener(Events.SelectionChanged, this.updateSourcePosition, this);
-    this.textEditorInternal.addEventListener(UI.TextEditor.Events.TextChanged, event => {
-      if (!this.muteChangeEventsForSetContent) {
-        this.onTextChanged(event.data.oldRange, event.data.newRange);
-      }
-    });
     this.muteChangeEventsForSetContent = false;
 
     this.sourcePosition = new UI.Toolbar.ToolbarText();
 
     this.searchableView = null;
     this.editable = false;
-    this.textEditorInternal.setReadOnly(true);
 
     this.positionToReveal = null;
     this.lineToScrollTo = null;
     this.selectionToSet = null;
     this.loadedInternal = false;
     this.contentRequested = false;
-    this.highlighterTypeInternal = '';
 
     this.wasmDisassemblyInternal = null;
     this.contentSet = false;
   }
 
+  private placeholderEditorState(content: string): CodeMirror.EditorState {
+    return CodeMirror.EditorState.create({
+      doc: content,
+      extensions: [
+        CodeMirror.EditorState.readOnly.of(true),
+        this.options.lineNumbers !== false ? CodeMirror.lineNumbers() : [],
+        TextEditor.Config.theme(),
+      ],
+    });
+  }
+
+  protected editorConfiguration(doc: string): CodeMirror.Extension {
+    return [
+      CodeMirror.EditorView.updateListener.of(update => this.dispatchEventToListeners(Events.EditorUpdate, update)),
+      TextEditor.Config.baseConfiguration(doc),
+      TextEditor.Config.sourcesAutocompletion.instance(),
+      TextEditor.Config.showWhitespace.instance(),
+      TextEditor.Config.allowScrollPastEof.instance(),
+      TextEditor.Config.codeFolding.instance(),
+      TextEditor.Config.autoDetectIndent.instance(),
+      CodeMirror.EditorView.theme({
+        '&.cm-editor': {height: '100%'},
+        '.cm-scroller': {overflow: 'auto'},
+        '.cm-lineNumbers .cm-gutterElement.cm-nonBreakableLine': {color: 'var(--color-non-breakable-line)'},
+        '.cm-searchMatch': {
+          border: '1px solid var(--color-search-match-border)',
+          borderRadius: '3px',
+          margin: '0 -1px',
+          '&.cm-searchMatch-selected': {
+            borderRadius: '1px',
+            backgroundColor: 'var(--color-selected-search-match-background)',
+            borderColor: 'var(--color-selected-search-match-background)',
+            '&, & *': {
+              color: 'var(--color-selected-search-match) !important',
+            },
+          },
+        },
+      }),
+      CodeMirror.EditorView.domEventHandlers({
+        focus: () => this.onFocus(),
+        blur: () => this.onBlur(),
+        scroll: () => this.dispatchEventToListeners(Events.EditorScroll),
+        contextmenu: event => this.onContextMenu(event),
+      }),
+      CodeMirror.lineNumbers({
+        domEventHandlers:
+            {contextmenu: (_view, block, event) => this.onLineGutterContextMenu(block.from, event as MouseEvent)},
+      }),
+      CodeMirror.EditorView.updateListener.of(
+          (update):
+              void => {
+                if (update.selectionSet || update.docChanged) {
+                  this.updateSourcePosition();
+                }
+                if (update.docChanged) {
+                  this.onTextChanged();
+                }
+              }),
+      activeSearchState,
+      CodeMirror.Prec.lowest(searchHighlighter),
+      config.language.of([]),
+      this.wasmDisassemblyInternal ? markNonBreakableLines(this.wasmDisassemblyInternal) : nonBreakableLines,
+      this.options.lineWrapping ? CodeMirror.EditorView.lineWrapping : [],
+      this.options.lineNumbers !== false ? CodeMirror.lineNumbers() : [],
+    ];
+  }
+
+  protected onBlur(): void {
+  }
+
+  protected onFocus(): void {
+    this.resetCurrentSearchResultIndex();
+  }
+
   get wasmDisassembly(): Common.WasmDisassembly.WasmDisassembly|null {
     return this.wasmDisassemblyInternal;
   }
 
+  editorLocationToUILocation(lineNumber: number, columnNumber: number): {
+    lineNumber: number,
+    columnNumber: number,
+  };
+  editorLocationToUILocation(lineNumber: number): {
+    lineNumber: number,
+    columnNumber: number|undefined,
+  };
   editorLocationToUILocation(lineNumber: number, columnNumber?: number): {
     lineNumber: number,
     columnNumber?: number|undefined,
@@ -215,47 +303,62 @@ export class SourceFrameImpl extends UI.View.SimpleView implements UI.Searchable
     this.prettyToggle.setVisible(canPrettyPrint);
   }
 
+  setEditable(editable: boolean): void {
+    this.editable = editable;
+    if (this.loaded && editable !== !this.textEditor.state.readOnly) {
+      this.textEditor.dispatch({effects: config.editable.reconfigure(CodeMirror.EditorState.readOnly.of(!editable))});
+    }
+  }
+
   private async setPretty(value: boolean): Promise<void> {
     this.prettyInternal = value;
     this.prettyToggle.setEnabled(false);
 
     const wasLoaded = this.loaded;
-    const selection = this.selection();
+    const {textEditor} = this;
+    const selection = textEditor.state.selection.main;
+    const startPos = textEditor.toLineColumn(selection.from), endPos = textEditor.toLineColumn(selection.to);
     let newSelection;
     if (this.prettyInternal) {
       const formatInfo = await this.requestFormattedContent();
       this.formattedMap = formatInfo.formattedMapping;
-      this.setContent(formatInfo.formattedContent, null);
-      this.prettyCleanGeneration = this.textEditorInternal.markClean();
-      const start = this.rawToPrettyLocation(selection.startLine, selection.startColumn);
-      const end = this.rawToPrettyLocation(selection.endLine, selection.endColumn);
-      newSelection = new TextUtils.TextRange.TextRange(start[0], start[1], end[0], end[1]);
+      await this.setContent(formatInfo.formattedContent);
+      this.prettyBaseDoc = textEditor.state.doc;
+      const start = this.rawToPrettyLocation(startPos.lineNumber, startPos.columnNumber);
+      const end = this.rawToPrettyLocation(endPos.lineNumber, endPos.columnNumber);
+      newSelection = textEditor.createSelection(
+          {lineNumber: start[0], columnNumber: start[1]}, {lineNumber: end[0], columnNumber: end[1]});
     } else {
-      this.setContent(this.rawContent, null);
-      this.cleanGeneration = this.textEditorInternal.markClean();
-      const start = this.prettyToRawLocation(selection.startLine, selection.startColumn);
-      const end = this.prettyToRawLocation(selection.endLine, selection.endColumn);
-      newSelection = new TextUtils.TextRange.TextRange(start[0], start[1], end[0], end[1]);
+      await this.setContent(this.rawContent || '');
+      this.baseDoc = textEditor.state.doc;
+      const start = this.prettyToRawLocation(startPos.lineNumber, startPos.columnNumber);
+      const end = this.prettyToRawLocation(endPos.lineNumber, endPos.columnNumber);
+      newSelection = textEditor.createSelection(
+          {lineNumber: start[0], columnNumber: start[1]}, {lineNumber: end[0], columnNumber: end[1]});
     }
     if (wasLoaded) {
-      this.textEditor.revealPosition(newSelection.endLine, newSelection.endColumn, this.editable);
-      this.textEditor.setSelection(newSelection);
+      textEditor.revealPosition(newSelection, false);
     }
     this.prettyToggle.setEnabled(true);
     this.updatePrettyPrintState();
   }
 
-  private updateLineNumberFormatter(): void {
+  private getLineNumberFormatter(): CodeMirror.Extension {
+    if (this.options.lineNumbers === false) {
+      return [];
+    }
+    let formatNumber = null;
     if (this.wasmDisassemblyInternal) {
       const disassembly = this.wasmDisassemblyInternal;
       const lastBytecodeOffset = disassembly.lineNumberToBytecodeOffset(disassembly.lineNumbers - 1);
       const bytecodeOffsetDigits = lastBytecodeOffset.toString(16).length + 1;
-      this.textEditorInternal.setLineNumberFormatter(lineNumber => {
-        const bytecodeOffset = disassembly.lineNumberToBytecodeOffset(lineNumber - 1);
+      formatNumber = (lineNumber: number): string => {
+        const bytecodeOffset =
+            disassembly.lineNumberToBytecodeOffset(Math.min(disassembly.lineNumbers, lineNumber) - 1);
         return `0x${bytecodeOffset.toString(16).padStart(bytecodeOffsetDigits, '0')}`;
-      });
+      };
     } else if (this.prettyInternal) {
-      this.textEditorInternal.setLineNumberFormatter(lineNumber => {
+      formatNumber = (lineNumber: number): string => {
         const line = this.prettyToRawLocation(lineNumber - 1, 0)[0] + 1;
         if (lineNumber === 1) {
           return String(line);
@@ -264,17 +367,18 @@ export class SourceFrameImpl extends UI.View.SimpleView implements UI.Searchable
           return String(line);
         }
         return '-';
-      });
-    } else {
-      this.textEditorInternal.setLineNumberFormatter(lineNumber => {
-        return String(lineNumber);
-      });
+      };
     }
+    return formatNumber ? CodeMirror.lineNumbers({formatNumber}) : [];
+  }
+
+  private updateLineNumberFormatter(): void {
+    this.textEditor.dispatch({effects: config.lineNumbers.reconfigure(this.getLineNumberFormatter())});
   }
 
   private updatePrettyPrintState(): void {
     this.prettyToggle.setToggled(this.prettyInternal);
-    this.textEditorInternal.element.classList.toggle('pretty-printed', this.prettyInternal);
+    this.textEditorInternal.classList.toggle('pretty-printed', this.prettyInternal);
     this.updateLineNumberFormatter();
   }
 
@@ -292,13 +396,6 @@ export class SourceFrameImpl extends UI.View.SimpleView implements UI.Searchable
     return this.formattedMap.originalToFormatted(line, column);
   }
 
-  setEditable(editable: boolean): void {
-    this.editable = editable;
-    if (this.loadedInternal) {
-      this.textEditorInternal.setReadOnly(!editable);
-    }
-  }
-
   hasLoadError(): boolean {
     return this.loadError;
   }
@@ -322,7 +419,7 @@ export class SourceFrameImpl extends UI.View.SimpleView implements UI.Searchable
     return this.loadedInternal;
   }
 
-  get textEditor(): SourcesTextEditor {
+  get textEditor(): TextEditor.TextEditor.TextEditor {
     return this.textEditorInternal;
   }
 
@@ -330,6 +427,14 @@ export class SourceFrameImpl extends UI.View.SimpleView implements UI.Searchable
     return this.prettyInternal;
   }
 
+  get contentType(): string {
+    return this.loadError ? '' : this.getContentType();
+  }
+
+  protected getContentType(): string {
+    return '';
+  }
+
   private async ensureContentLoaded(): Promise<void> {
     if (!this.contentRequested) {
       this.contentRequested = true;
@@ -351,7 +456,7 @@ export class SourceFrameImpl extends UI.View.SimpleView implements UI.Searchable
 
       progressIndicator.setWorked(1);
 
-      if (!error && this.highlighterTypeInternal === 'application/wasm') {
+      if (!error && this.contentType === 'application/wasm') {
         const worker = Common.Worker.WorkerWrapper.fromURL(
             new URL('../../../../entrypoints/wasmparser_worker/wasmparser_worker-entrypoint.js', import.meta.url));
         const promise = new Promise<{
@@ -407,24 +512,14 @@ export class SourceFrameImpl extends UI.View.SimpleView implements UI.Searchable
       this.prettyToggle.setEnabled(true);
 
       if (error) {
-        this.setContent(null, error);
+        this.loadError = true;
+        this.textEditor.editor.setState(this.placeholderEditorState(error));
         this.prettyToggle.setEnabled(false);
-
-        // Occasionally on load, there can be a race in which it appears the CodeMirror plugin
-        // runs the highlighter type assignment out of order. In case of an error then, set
-        // the highlighter type after a short delay. This appears to only occur the first
-        // time that CodeMirror is initialized, likely because the highlighter type was first
-        // initialized based on the file type, and the syntax highlighting is in a race
-        // with the new highlighter assignment. As the option is just an option and is not
-        // observable, we can't handle waiting for it here.
-        // https://github.com/codemirror/CodeMirror/issues/6019
-        // CRBug 1011445
-        setTimeout(() => this.setHighlighterType('text/plain'), 50);
       } else {
         if (this.shouldAutoPrettyPrint && TextUtils.TextUtils.isMinified(content)) {
           await this.setPretty(true);
         } else {
-          this.setContent(this.rawContent, null);
+          await this.setContent(this.rawContent || '');
         }
       }
       this.contentSet = true;
@@ -436,14 +531,28 @@ export class SourceFrameImpl extends UI.View.SimpleView implements UI.Searchable
       return this.formattedContentPromise;
     }
     this.formattedContentPromise =
-        Formatter.ScriptFormatter.formatScriptContent(this.highlighterTypeInternal, this.rawContent || '');
+        Formatter.ScriptFormatter.formatScriptContent(this.contentType, this.rawContent || '');
     return this.formattedContentPromise;
   }
 
-  revealPosition(line: number, column?: number, shouldHighlight?: boolean): void {
+  revealPosition(position: {lineNumber: number, columnNumber?: number}|number, shouldHighlight?: boolean): void {
     this.lineToScrollTo = null;
     this.selectionToSet = null;
-    this.positionToReveal = {line: line, column: column, shouldHighlight: shouldHighlight};
+    let line = 0, column = 0;
+    if (typeof position === 'number') {
+      const {doc} = this.textEditor.state;
+      if (position > doc.length) {
+        line = doc.lines - 1;
+      } else if (position >= 0) {
+        const lineObj = doc.lineAt(position);
+        line = lineObj.number - 1;
+        column = position - lineObj.from;
+      }
+    } else {
+      line = position.lineNumber;
+      column = position.columnNumber ?? 0;
+    }
+    this.positionToReveal = {line, column, shouldHighlight: shouldHighlight};
     this.innerRevealPositionIfNeeded();
   }
 
@@ -456,15 +565,14 @@ export class SourceFrameImpl extends UI.View.SimpleView implements UI.Searchable
       return;
     }
 
-    const {lineNumber, columnNumber} =
-        this.uiLocationToEditorLocation(this.positionToReveal.line, this.positionToReveal.column);
+    const location = this.uiLocationToEditorLocation(this.positionToReveal.line, this.positionToReveal.column);
 
-    this.textEditorInternal.revealPosition(lineNumber, columnNumber, this.positionToReveal.shouldHighlight);
+    const {textEditor} = this;
+    textEditor.revealPosition(textEditor.createSelection(location), this.positionToReveal.shouldHighlight);
     this.positionToReveal = null;
   }
 
   private clearPositionToReveal(): void {
-    this.textEditorInternal.clearPositionHighlight();
     this.positionToReveal = null;
   }
 
@@ -477,24 +585,28 @@ export class SourceFrameImpl extends UI.View.SimpleView implements UI.Searchable
   private innerScrollToLineIfNeeded(): void {
     if (this.lineToScrollTo !== null) {
       if (this.loaded && this.isShowing()) {
-        this.textEditorInternal.scrollToLine(this.lineToScrollTo);
+        const {textEditor} = this;
+        const position = textEditor.toOffset({lineNumber: this.lineToScrollTo, columnNumber: 0});
+        textEditor.dispatch({effects: CodeMirror.EditorView.scrollTo.of(CodeMirror.EditorSelection.cursor(position))});
         this.lineToScrollTo = null;
       }
     }
   }
 
-  selection(): TextUtils.TextRange.TextRange {
-    return this.textEditor.selection();
-  }
-
   setSelection(textRange: TextUtils.TextRange.TextRange): void {
     this.selectionToSet = textRange;
     this.innerSetSelectionIfNeeded();
   }
 
   private innerSetSelectionIfNeeded(): void {
-    if (this.selectionToSet && this.loaded && this.isShowing()) {
-      this.textEditorInternal.setSelection(this.selectionToSet, true);
+    const sel = this.selectionToSet;
+    if (sel && this.loaded && this.isShowing()) {
+      const {textEditor} = this;
+      textEditor.dispatch({
+        selection: textEditor.createSelection(
+            {lineNumber: sel.startLine, columnNumber: sel.startColumn},
+            {lineNumber: sel.endLine, columnNumber: sel.endColumn}),
+      });
       this.selectionToSet = null;
     }
   }
@@ -505,9 +617,9 @@ export class SourceFrameImpl extends UI.View.SimpleView implements UI.Searchable
     this.innerScrollToLineIfNeeded();
   }
 
-  onTextChanged(_oldRange: TextUtils.TextRange.TextRange, _newRange: TextUtils.TextRange.TextRange): void {
+  onTextChanged(): void {
     const wasPretty = this.pretty;
-    this.prettyInternal = this.prettyCleanGeneration !== null && this.textEditor.isClean(this.prettyCleanGeneration);
+    this.prettyInternal = Boolean(this.prettyBaseDoc && this.textEditor.state.doc.eq(this.prettyBaseDoc));
     if (this.prettyInternal !== wasPretty) {
       this.updatePrettyPrintState();
     }
@@ -519,14 +631,14 @@ export class SourceFrameImpl extends UI.View.SimpleView implements UI.Searchable
   }
 
   isClean(): boolean {
-    return this.textEditor.isClean(this.cleanGeneration) ||
-        (this.prettyCleanGeneration !== null && this.textEditor.isClean(this.prettyCleanGeneration));
+    return this.textEditor.state.doc.eq(this.baseDoc) ||
+        (this.prettyBaseDoc !== null && this.textEditor.state.doc.eq(this.prettyBaseDoc));
   }
 
   contentCommitted(): void {
-    this.cleanGeneration = this.textEditorInternal.markClean();
-    this.prettyCleanGeneration = null;
-    this.rawContent = this.textEditor.text();
+    this.baseDoc = this.textEditorInternal.state.doc;
+    this.prettyBaseDoc = null;
+    this.rawContent = this.textEditor.state.doc.toString();
     this.formattedMap = null;
     this.formattedContentPromise = null;
     if (this.prettyInternal) {
@@ -562,52 +674,49 @@ export class SourceFrameImpl extends UI.View.SimpleView implements UI.Searchable
     return mimeType;
   }
 
-  setHighlighterType(highlighterType: string): void {
-    this.highlighterTypeInternal = highlighterType;
-    this.updateHighlighterType('');
-  }
-
-  highlighterType(): string {
-    return this.highlighterTypeInternal;
+  protected async getLanguageSupport(content: string): Promise<CodeMirror.Extension> {
+    const mimeType = this.simplifyMimeType(content, this.contentType) || '';
+    const languageDesc = await CodeHighlighter.CodeHighlighter.languageFromMIME(mimeType);
+    if (!languageDesc) {
+      return [];
+    }
+    if (mimeType === 'text/jsx') {
+      return [
+        languageDesc,
+        CodeMirror.javascript.javascriptLanguage.data.of({autocomplete: CodeMirror.completeAnyWord}),
+      ];
+    }
+    return languageDesc;
   }
 
-  private updateHighlighterType(content: string): void {
-    this.textEditorInternal.setMimeType(this.simplifyMimeType(content, this.highlighterTypeInternal));
+  async updateLanguageMode(content: string): Promise<void> {
+    const langExtension = await this.getLanguageSupport(content);
+    this.textEditor.dispatch({effects: config.language.reconfigure(langExtension)});
   }
 
-  setContent(content: string|null, loadError: string|null): void {
+  async setContent(content: string): Promise<void> {
     this.muteChangeEventsForSetContent = true;
-    if (!this.loadedInternal) {
-      this.loadedInternal = true;
-      if (!loadError) {
-        this.textEditorInternal.setText(content || '');
-        this.cleanGeneration = this.textEditorInternal.markClean();
-        this.textEditorInternal.setReadOnly(!this.editable);
-        this.loadError = false;
-      } else {
-        this.textEditorInternal.setText(loadError || '');
-        this.highlighterTypeInternal = 'text/plain';
-        this.textEditorInternal.setReadOnly(true);
-        this.loadError = true;
-      }
-    } else {
-      const scrollTop = this.textEditorInternal.scrollTop();
-      const selection = this.textEditorInternal.selection();
-      this.textEditorInternal.setText(content || '');
-      this.textEditorInternal.setScrollTop(scrollTop);
-      this.textEditorInternal.setSelection(selection);
-    }
-
-    // Mark non-breakable lines in the Wasm disassembly after setting
-    // up the content for the text editor (which creates the gutter).
-    if (this.wasmDisassemblyInternal) {
-      for (const lineNumber of this.wasmDisassemblyInternal.nonBreakableLineNumbers()) {
-        this.textEditorInternal.toggleLineClass(lineNumber, 'cm-non-breakable-line', true);
-      }
+    const {textEditor} = this;
+    const wasLoaded = this.loadedInternal;
+    const scrollTop = textEditor.editor.scrollDOM.scrollTop;
+    this.loadedInternal = true;
+
+    const languageSupport = await this.getLanguageSupport(content);
+    const editorState = CodeMirror.EditorState.create({
+      doc: content,
+      extensions: [
+        this.editorConfiguration(content),
+        languageSupport,
+        config.lineNumbers.of(this.getLineNumberFormatter()),
+        config.editable.of(this.editable ? [] : CodeMirror.EditorState.readOnly.of(true)),
+      ],
+    });
+    this.baseDoc = editorState.doc;
+    textEditor.editor.setState(editorState);
+    if (wasLoaded) {
+      textEditor.editor.scrollDOM.scrollTop = scrollTop;
     }
-
-    this.updateLineNumberFormatter();
-    this.updateHighlighterType(content || '');
+    this.editorInitialized();
     this.wasShownOrLoaded();
 
     if (this.delayedFindSearchMatches) {
@@ -617,6 +726,9 @@ export class SourceFrameImpl extends UI.View.SimpleView implements UI.Searchable
     this.muteChangeEventsForSetContent = false;
   }
 
+  protected editorInitialized(): void {
+  }
+
   setSearchableView(view: UI.SearchableView.SearchableView|null): void {
     this.searchableView = view;
   }
@@ -624,24 +736,25 @@ export class SourceFrameImpl extends UI.View.SimpleView implements UI.Searchable
   private doFindSearchMatches(
       searchConfig: UI.SearchableView.SearchConfig, shouldJump: boolean, jumpBackwards: boolean): void {
     this.currentSearchResultIndex = -1;
-    this.searchResults = [];
 
-    const regex = searchConfig.toSearchRegex();
-    this.searchRegex = regex;
-    this.searchResults = this.collectRegexMatches(regex);
+    this.searchRegex = searchConfig.toSearchRegex(true);
+    this.searchResults = this.collectRegexMatches(this.searchRegex);
 
     if (this.searchableView) {
       this.searchableView.updateSearchMatchesCount(this.searchResults.length);
     }
 
+    const editor = this.textEditor;
     if (!this.searchResults.length) {
-      this.textEditorInternal.cancelSearchResultsHighlight();
+      if (editor.state.field(activeSearchState)) {
+        editor.dispatch({effects: setActiveSearch.of(null)});
+      }
     } else if (shouldJump && jumpBackwards) {
       this.jumpToPreviousSearchResult();
     } else if (shouldJump) {
       this.jumpToNextSearchResult();
     } else {
-      this.textEditorInternal.highlightSearchResults(regex, null);
+      editor.dispatch({effects: setActiveSearch.of(new ActiveSearch(this.searchRegex, null))});
     }
   }
 
@@ -670,7 +783,11 @@ export class SourceFrameImpl extends UI.View.SimpleView implements UI.Searchable
     if (this.searchableView) {
       this.searchableView.updateCurrentMatchIndex(this.currentSearchResultIndex);
     }
-    this.textEditorInternal.highlightSearchResults((this.searchRegex as RegExp), null);
+    const editor = this.textEditor;
+    const currentActiveSearch = editor.state.field(activeSearchState);
+    if (currentActiveSearch && currentActiveSearch.currentRange) {
+      editor.dispatch({effects: setActiveSearch.of(new ActiveSearch(currentActiveSearch.regexp, null))});
+    }
   }
 
   private resetSearch(): void {
@@ -687,10 +804,13 @@ export class SourceFrameImpl extends UI.View.SimpleView implements UI.Searchable
     if (!this.loaded) {
       return;
     }
-    this.textEditorInternal.cancelSearchResultsHighlight();
-    if (range) {
-      this.setSelection(range);
-    }
+    const editor = this.textEditor;
+    editor.dispatch({
+      effects: setActiveSearch.of(null),
+      selection: range ? {anchor: range.from, head: range.to} : undefined,
+      scrollIntoView: true,
+      userEvent: 'select.search.cancel',
+    });
   }
 
   jumpToLastSearchResult(): void {
@@ -699,8 +819,7 @@ export class SourceFrameImpl extends UI.View.SimpleView implements UI.Searchable
 
   private searchResultIndexForCurrentSelection(): number {
     return Platform.ArrayUtilities.lowerBound(
-        this.searchResults, this.textEditorInternal.selection().collapseToEnd(),
-        TextUtils.TextRange.TextRange.comparator);
+        this.searchResults, this.textEditor.state.selection.main, (a, b): number => a.to - b.to);
   }
 
   jumpToNextSearchResult(): void {
@@ -730,8 +849,14 @@ export class SourceFrameImpl extends UI.View.SimpleView implements UI.Searchable
     if (this.searchableView) {
       this.searchableView.updateCurrentMatchIndex(this.currentSearchResultIndex);
     }
-    this.textEditorInternal.highlightSearchResults(
-        (this.searchRegex as RegExp), this.searchResults[this.currentSearchResultIndex]);
+    const editor = this.textEditor;
+    const range = this.searchResults[this.currentSearchResultIndex];
+    editor.dispatch({
+      effects: setActiveSearch.of(new ActiveSearch(this.searchRegex as RegExp, range)),
+      selection: {anchor: range.from, head: range.to},
+      scrollIntoView: true,
+      userEvent: 'select.search',
+    });
   }
 
   replaceSelectionWith(searchConfig: UI.SearchableView.SearchConfig, replacement: string): void {
@@ -739,146 +864,153 @@ export class SourceFrameImpl extends UI.View.SimpleView implements UI.Searchable
     if (!range) {
       return;
     }
-    this.textEditorInternal.highlightSearchResults((this.searchRegex as RegExp), null);
-
-    const oldText = this.textEditorInternal.text(range);
-    const regex = searchConfig.toSearchRegex();
-    let text;
-    if (regex.__fromRegExpQuery) {
-      text = oldText.replace(regex, replacement);
-    } else {
-      text = oldText.replace(regex, function() {
-        return replacement;
-      });
-    }
 
-    const newRange = this.textEditorInternal.editRange(range, text);
-    this.textEditorInternal.setSelection(newRange.collapseToEnd());
+    const insert = (this.searchRegex as RegExp).__fromRegExpQuery ? range.insertPlaceholders(replacement) : replacement;
+    const editor = this.textEditor;
+    const changes = editor.state.changes({from: range.from, to: range.to, insert});
+    editor.dispatch(
+        {changes, selection: {anchor: changes.mapPos(editor.state.selection.main.to, 1)}, userEvent: 'input.replace'});
   }
 
   replaceAllWith(searchConfig: UI.SearchableView.SearchConfig, replacement: string): void {
     this.resetCurrentSearchResultIndex();
 
-    let text = this.textEditorInternal.text();
-    const range = this.textEditorInternal.fullRange();
-
     const regex = searchConfig.toSearchRegex(true);
-    if (regex.__fromRegExpQuery) {
-      text = text.replace(regex, replacement);
-    } else {
-      text = text.replace(regex, function() {
-        return replacement;
-      });
-    }
-
     const ranges = this.collectRegexMatches(regex);
     if (!ranges.length) {
       return;
     }
 
-    // Calculate the position of the end of the last range to be edited.
-    const currentRangeIndex = Platform.ArrayUtilities.lowerBound(
-        ranges, this.textEditorInternal.selection(), TextUtils.TextRange.TextRange.comparator);
-    const lastRangeIndex = Platform.NumberUtilities.mod(currentRangeIndex - 1, ranges.length);
-    const lastRange = ranges[lastRangeIndex];
-    const replacementLineEndings = Platform.StringUtilities.findLineEndingIndexes(replacement);
-    const replacementLineCount = replacementLineEndings.length;
-    const lastLineNumber = lastRange.startLine + replacementLineEndings.length - 1;
-    let lastColumnNumber: number = lastRange.startColumn;
-    if (replacementLineEndings.length > 1) {
-      lastColumnNumber =
-          replacementLineEndings[replacementLineCount - 1] - replacementLineEndings[replacementLineCount - 2] - 1;
-    }
+    const isRegExp = regex.__fromRegExpQuery;
+    const changes = ranges.map(
+        match =>
+            ({from: match.from, to: match.to, insert: isRegExp ? match.insertPlaceholders(replacement) : replacement}));
 
-    this.textEditorInternal.editRange(range, text);
-    this.textEditorInternal.revealPosition(lastLineNumber, lastColumnNumber);
-    this.textEditorInternal.setSelection(
-        TextUtils.TextRange.TextRange.createFromLocation(lastLineNumber, lastColumnNumber));
+    this.textEditor.dispatch({changes, scrollIntoView: true, userEvent: 'input.replace.all'});
   }
 
-  private collectRegexMatches(regexObject: RegExp): TextUtils.TextRange.TextRange[] {
+  private collectRegexMatches(regexObject: RegExp): SearchMatch[] {
     const ranges = [];
-    for (let i = 0; i < this.textEditorInternal.linesCount; ++i) {
-      let line = this.textEditorInternal.line(i);
-      let offset = 0;
-      let match;
-      do {
-        match = regexObject.exec(line);
-        if (match) {
-          const matchEndIndex = match.index + Math.max(match[0].length, 1);
-          if (match[0].length) {
-            ranges.push(new TextUtils.TextRange.TextRange(i, offset + match.index, i, offset + matchEndIndex));
-          }
-          offset += matchEndIndex;
-          line = line.substring(matchEndIndex);
+    let pos = 0;
+    for (const line of this.textEditor.state.doc.iterLines()) {
+      regexObject.lastIndex = 0;
+      for (;;) {
+        const match = regexObject.exec(line);
+        if (!match) {
+          break;
         }
-      } while (match && line);
+        if (match[0].length) {
+          const from = pos + match.index;
+          ranges.push(new SearchMatch(from, from + match[0].length, match));
+        }
+      }
+      pos += line.length + 1;
     }
     return ranges;
   }
 
-  populateLineGutterContextMenu(_contextMenu: UI.ContextMenu.ContextMenu, _editorLineNumber: number): Promise<void> {
-    return Promise.resolve();
-  }
-
-  populateTextAreaContextMenu(
-      _contextMenu: UI.ContextMenu.ContextMenu, _editorLineNumber: number, _editorColumnNumber: number): Promise<void> {
-    return Promise.resolve();
-  }
-
   canEditSource(): boolean {
     return this.editable;
   }
 
   private updateSourcePosition(): void {
-    const selections = this.textEditorInternal.selections();
-    if (!selections.length) {
+    const {textEditor} = this, {state} = textEditor, {selection} = state;
+    if (this.displayedSelection?.eq(selection)) {
       return;
     }
-    if (selections.length > 1) {
-      this.sourcePosition.setText(i18nString(UIStrings.dSelectionRegions, {PH1: selections.length}));
+    this.displayedSelection = selection;
+
+    if (selection.ranges.length > 1) {
+      this.sourcePosition.setText(i18nString(UIStrings.dSelectionRegions, {PH1: selection.ranges.length}));
       return;
     }
-    let textRange: TextUtils.TextRange.TextRange = selections[0];
-    if (textRange.isEmpty()) {
-      const location = this.prettyToRawLocation(textRange.endLine, textRange.endColumn);
+    const {main} = state.selection;
+    if (main.empty) {
+      const {lineNumber, columnNumber} = textEditor.toLineColumn(main.head);
+      const location = this.prettyToRawLocation(lineNumber, columnNumber);
       if (this.wasmDisassemblyInternal) {
         const disassembly = this.wasmDisassemblyInternal;
         const lastBytecodeOffset = disassembly.lineNumberToBytecodeOffset(disassembly.lineNumbers - 1);
         const bytecodeOffsetDigits = lastBytecodeOffset.toString(16).length;
         const bytecodeOffset = disassembly.lineNumberToBytecodeOffset(location[0]);
-
         this.sourcePosition.setText(i18nString(
             UIStrings.bytecodePositionXs, {PH1: bytecodeOffset.toString(16).padStart(bytecodeOffsetDigits, '0')}));
       } else {
-        if (!this.canEditSource()) {
-          this.textEditorInternal.revealPosition(textRange.endLine, textRange.endColumn, true);
-        }
         this.sourcePosition.setText(i18nString(UIStrings.lineSColumnS, {PH1: location[0] + 1, PH2: location[1] + 1}));
       }
-      return;
-    }
-    textRange = textRange.normalize();
-
-    const selectedText = this.textEditorInternal.text(textRange);
-    if (textRange.startLine === textRange.endLine) {
-      this.sourcePosition.setText(i18nString(UIStrings.dCharactersSelected, {PH1: selectedText.length}));
     } else {
-      this.sourcePosition.setText(i18nString(
-          UIStrings.dLinesDCharactersSelected,
-          {PH1: textRange.endLine - textRange.startLine + 1, PH2: selectedText.length}));
+      const startLine = state.doc.lineAt(main.from), endLine = state.doc.lineAt(main.to);
+      if (startLine.number === endLine.number) {
+        this.sourcePosition.setText(i18nString(UIStrings.dCharactersSelected, {PH1: main.to - main.from}));
+      } else {
+        this.sourcePosition.setText(i18nString(
+            UIStrings.dLinesDCharactersSelected,
+            {PH1: endLine.number - startLine.number + 1, PH2: main.to - main.from}));
+      }
     }
   }
+
+  onContextMenu(event: MouseEvent): boolean {
+    event.consume(true);  // Consume event now to prevent document from handling the async menu
+    const contextMenu = new UI.ContextMenu.ContextMenu(event);
+    const {state} = this.textEditor;
+    const pos = state.selection.main.from, line = state.doc.lineAt(pos);
+    this.populateTextAreaContextMenu(contextMenu, line.number - 1, pos - line.from);
+    contextMenu.appendApplicableItems(this);
+    contextMenu.show();
+    return true;
+  }
+
+  protected populateTextAreaContextMenu(_menu: UI.ContextMenu.ContextMenu, _lineNumber: number, _columnNumber: number):
+      void {
+  }
+
+  onLineGutterContextMenu(position: number, event: MouseEvent): boolean {
+    event.consume(true);  // Consume event now to prevent document from handling the async menu
+    const contextMenu = new UI.ContextMenu.ContextMenu(event);
+    const lineNumber = this.textEditor.state.doc.lineAt(position).number - 1;
+    this.populateLineGutterContextMenu(contextMenu, lineNumber);
+    contextMenu.appendApplicableItems(this);
+    contextMenu.show();
+    return true;
+  }
+
+  protected populateLineGutterContextMenu(_menu: UI.ContextMenu.ContextMenu, _lineNumber: number): void {
+  }
+
+  focus(): void {
+    this.textEditor.focus();
+  }
 }
 
-export interface LineDecorator {
-  decorate(uiSourceCode: Workspace.UISourceCode.UISourceCode, textEditor: SourcesTextEditor, type: string): void;
+class SearchMatch {
+  constructor(readonly from: number, readonly to: number, readonly match: RegExpMatchArray) {
+  }
+
+  insertPlaceholders(replacement: string): string {
+    return replacement.replace(/\$(\$|&|\d+|<[^>]+>)/g, (_, selector): string => {
+      if (selector === '$') {
+        return '$';
+      }
+      if (selector === '&') {
+        return this.match[0];
+      }
+      if (selector[0] === '<') {
+        return (this.match.groups && this.match.groups[selector.slice(1, selector.length - 1)]) || '';
+      }
+      return this.match[Number.parseInt(selector, 10)] || '';
+    });
+  }
 }
 
 export interface Transformer {
-  editorLocationToUILocation(lineNumber: number, columnNumber?: number): {
+  editorLocationToUILocation(lineNumber: number, columnNumber: number): {
     lineNumber: number,
-    columnNumber?: number|undefined,
+    columnNumber: number,
+  };
+  editorLocationToUILocation(lineNumber: number): {
+    lineNumber: number,
+    columnNumber: number|undefined,
   };
 
   uiLocationToEditorLocation(lineNumber: number, columnNumber?: number): {
@@ -887,16 +1019,6 @@ export interface Transformer {
   };
 }
 
-const registeredLineDecorators: LineDecoratorRegistration[] = [];
-
-export function registerLineDecorator(registration: LineDecoratorRegistration): void {
-  registeredLineDecorators.push(registration);
-}
-
-export function getRegisteredLineDecorators(): LineDecoratorRegistration[] {
-  return registeredLineDecorators;
-}
-
 // TODO(crbug.com/1167717): Make this a const enum again
 // eslint-disable-next-line rulesdir/const_enum
 export enum DecoratorType {
@@ -905,7 +1027,134 @@ export enum DecoratorType {
   COVERAGE = 'coverage',
 }
 
-export interface LineDecoratorRegistration {
-  lineDecorator: () => LineDecorator;
-  decoratorType: DecoratorType;
+const config = {
+  editable: new CodeMirror.Compartment(),
+  language: new CodeMirror.Compartment(),
+  lineNumbers: new CodeMirror.Compartment(),
+};
+
+class ActiveSearch {
+  constructor(readonly regexp: RegExp, readonly currentRange: {from: number, to: number}|null) {
+  }
+
+  map(change: CodeMirror.ChangeDesc): ActiveSearch {
+    return change.empty || !this.currentRange ?
+        this :
+        new ActiveSearch(
+            this.regexp, {from: change.mapPos(this.currentRange.from), to: change.mapPos(this.currentRange.to)});
+  }
+
+  static eq(a: ActiveSearch|null, b: ActiveSearch|null): boolean {
+    return Boolean(
+        a === b ||
+        a && b && a.currentRange?.from === b.currentRange?.from && a.currentRange?.to === b.currentRange?.to &&
+            a.regexp.source === b.regexp.source && a.regexp.flags === b.regexp.flags);
+  }
+}
+
+const setActiveSearch = CodeMirror.StateEffect.define<ActiveSearch|null>(
+    {map: (value, mapping): ActiveSearch | null => value && value.map(mapping)});
+
+const activeSearchState = CodeMirror.StateField.define<ActiveSearch|null>({
+  create(): null {
+    return null;
+  },
+  update(state, tr): ActiveSearch |
+      null {
+        return tr.effects.reduce(
+            (state, effect) => effect.is(setActiveSearch) ? effect.value : state, state && state.map(tr.changes));
+      },
+});
+
+const searchMatchDeco = CodeMirror.Decoration.mark({class: 'cm-searchMatch'});
+const currentSearchMatchDeco = CodeMirror.Decoration.mark({class: 'cm-searchMatch cm-searchMatch-selected'});
+
+const searchHighlighter = CodeMirror.ViewPlugin.fromClass(class {
+  decorations: CodeMirror.DecorationSet;
+
+  constructor(view: CodeMirror.EditorView) {
+    this.decorations = this.computeDecorations(view);
+  }
+
+  update(update: CodeMirror.ViewUpdate): void {
+    const active = update.state.field(activeSearchState);
+    if (!ActiveSearch.eq(active, update.startState.field(activeSearchState)) ||
+        (active && (update.viewportChanged || update.docChanged))) {
+      this.decorations = this.computeDecorations(update.view);
+    }
+  }
+
+  private computeDecorations(view: CodeMirror.EditorView): CodeMirror.DecorationSet {
+    const active = view.state.field(activeSearchState);
+    if (!active) {
+      return CodeMirror.Decoration.none;
+    }
+
+    const builder = new CodeMirror.RangeSetBuilder<CodeMirror.Decoration>();
+    const {doc} = view.state;
+    for (const {from, to} of view.visibleRanges) {
+      let pos = from;
+      for (const line of doc.iterLines(doc.lineAt(from).number, doc.lineAt(to).number + 1)) {
+        active.regexp.lastIndex = 0;
+        for (;;) {
+          const match = active.regexp.exec(line);
+          if (!match) {
+            break;
+          }
+          const start = pos + match.index, end = start + match[0].length;
+          const current = active.currentRange && active.currentRange.from === start && active.currentRange.to === end;
+          builder.add(start, end, current ? currentSearchMatchDeco : searchMatchDeco);
+        }
+        pos += line.length + 1;
+      }
+    }
+    return builder.finish();
+  }
+}, {decorations: (value): CodeMirror.DecorationSet => value.decorations});
+
+const nonBreakableLineMark = new (class extends CodeMirror.GutterMarker {
+  elementClass = 'cm-nonBreakableLine';
+})();
+
+// Effect to add lines (by position) to the set of non-breakable lines.
+export const addNonBreakableLines = CodeMirror.StateEffect.define<readonly number[]>();
+
+const nonBreakableLines = CodeMirror.StateField.define<CodeMirror.RangeSet<CodeMirror.GutterMarker>>({
+  create(): CodeMirror.RangeSet<CodeMirror.GutterMarker> {
+    return CodeMirror.RangeSet.empty;
+  },
+  update(deco, tr): CodeMirror.RangeSet<CodeMirror.GutterMarker> {
+    return tr.effects.reduce((deco, effect) => {
+      return !effect.is(addNonBreakableLines) ?
+          deco :
+          deco.update({add: effect.value.map(pos => nonBreakableLineMark.range(pos))});
+    }, deco.map(tr.changes));
+  },
+  provide: field => CodeMirror.lineNumberMarkers.from(field),
+});
+
+export function isBreakableLine(state: CodeMirror.EditorState, line: CodeMirror.Line): boolean {
+  const nonBreakable = state.field(nonBreakableLines);
+  if (!nonBreakable.size) {
+    return true;
+  }
+  let found = false;
+  nonBreakable.between(line.from, line.from, () => {
+    found = true;
+  });
+  return !found;
+}
+
+function markNonBreakableLines(disassembly: Common.WasmDisassembly.WasmDisassembly): CodeMirror.Extension {
+  // Mark non-breakable lines in the Wasm disassembly after setting
+  // up the content for the text editor (which creates the gutter).
+  return nonBreakableLines.init(state => {
+    const marks = [];
+    for (const lineNumber of disassembly.nonBreakableLineNumbers()) {
+      if (lineNumber < state.doc.lines) {
+        marks.push(nonBreakableLineMark.range(state.doc.line(lineNumber + 1).from));
+      }
+    }
+    return CodeMirror.RangeSet.of(marks);
+  });
 }