chrome-devtools-frontend 1.0.941208 → 1.0.943182

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -34,15 +34,15 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
+import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
-
-import type * as TextEditor from '../../ui/legacy/components/text_editor/text_editor.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as Protocol from '../../generated/protocol.js';
+import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 
 import {AddSourceMapURLDialog} from './AddSourceMapURLDialog.js';
 import {BreakpointEditDialog, LogpointPrefix} from './BreakpointEditDialog.js';
@@ -144,154 +144,67 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('panels/sources/DebuggerPlugin.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-// eslint-disable-next-line no-unused-vars
-class DecoratorWidget extends HTMLDivElement {
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  nameToToken!: Map<string, HTMLElement>;
-  constructor() {
-    super();
-  }
-}
+
+// Note: Line numbers are passed around as zero-based numbers (though
+// CodeMirror numbers them from 1).
+
+// Don't scan for possible breakpoints on a line beyond this position;
+const MAX_POSSIBLE_BREAKPOINT_LINE = 2500;
+
+type BreakpointDescription = {
+  position: number,
+  breakpoint: Bindings.BreakpointManager.Breakpoint,
+};
 
 export class DebuggerPlugin extends Plugin {
-  private textEditor: SourceFrame.SourcesTextEditor.SourcesTextEditor;
-  private uiSourceCode: Workspace.UISourceCode.UISourceCode;
-  private readonly transformer: SourceFrame.SourceFrame.Transformer;
-  private executionLocation: Workspace.UISourceCode.UILocation|null;
-  private controlDown: boolean;
-  private asyncStepInHoveredLine: number|null;
-  private asyncStepInHovered: boolean;
-  private clearValueWidgetsTimer: number|null;
-  private sourceMapInfobar: UI.Infobar.Infobar|null;
-  private controlTimeout: number|null;
+  private editor: TextEditor.TextEditor.TextEditor|undefined = undefined;
+  private executionLocation: Workspace.UISourceCode.UILocation|null = null;
+  private controlDown: boolean = false;
+  private sourceMapInfobar: UI.Infobar.Infobar|null = null;
+  private controlTimeout: number|undefined = undefined;
   private readonly scriptsPanel: SourcesPanel;
   private readonly breakpointManager: Bindings.BreakpointManager.BreakpointManager;
   private readonly popoverHelper: UI.PopoverHelper.PopoverHelper;
-  private readonly boundPopoverHelperHide: () => void;
-  private readonly boundKeyDown: (arg0: Event) => void;
-  private readonly boundKeyUp: (arg0: Event) => void;
-  private readonly boundMouseMove: (arg0: Event) => void;
-  private readonly boundMouseDown: (arg0: Event) => void;
-  private readonly boundBlur: (arg0: Event) => void;
-  private readonly boundWheel: (arg0: Event) => void;
-  private readonly boundGutterClick:
-      (arg0: Common.EventTarget.EventTargetEvent<SourceFrame.SourcesTextEditor.GutterClickEventData>) => void;
-  private readonly breakpointDecorations: Set<BreakpointDecoration>;
-  private readonly decorationByBreakpoint:
-      Map<Bindings.BreakpointManager.Breakpoint, Map<string, BreakpointDecoration>>;
-  private readonly possibleBreakpointsRequested: Set<number>;
   private scriptFileForDebuggerModel:
       Map<SDK.DebuggerModel.DebuggerModel, Bindings.ResourceScriptMapping.ResourceScriptFile>;
-  private readonly valueWidgets: Map<number, DecoratorWidget>;
+  // The current set of breakpoints for this file. The locations in
+  // here are only in sync with editor positions when `this.muted` is
+  // false.
+  private breakpoints: BreakpointDescription[] = [];
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private continueToLocationDecorations: Map<any, Function>|null;
+  private continueToLocations: {from: number, to: number, async: boolean, click: () => void}[]|null = null;
   private readonly liveLocationPool: Bindings.LiveLocation.LiveLocationPool;
   private muted: boolean;
-  private mutedFromStart: boolean;
+  private initializedMuted: boolean;
   private ignoreListInfobar: UI.Infobar.Infobar|null;
-  private hasLineWithoutMapping: boolean;
   private prettyPrintInfobar!: UI.Infobar.Infobar|null;
   private scheduledBreakpointDecorationUpdates?: Set<BreakpointDecoration>|null;
+  private refreshBreakpointsTimeout: undefined|number = undefined;
 
   constructor(
-      textEditor: SourceFrame.SourcesTextEditor.SourcesTextEditor, uiSourceCode: Workspace.UISourceCode.UISourceCode,
-      transformer: SourceFrame.SourceFrame.Transformer) {
-    super();
-    this.textEditor = textEditor;
-    this.uiSourceCode = uiSourceCode;
-    this.transformer = transformer;
-
-    this.executionLocation = null;
-    this.controlDown = false;
-    this.asyncStepInHoveredLine = 0;
-    this.asyncStepInHovered = false;
-    this.clearValueWidgetsTimer = null;
-    this.sourceMapInfobar = null;
-    this.controlTimeout = null;
+      uiSourceCode: Workspace.UISourceCode.UISourceCode,
+      private readonly transformer: SourceFrame.SourceFrame.Transformer) {
+    super(uiSourceCode);
 
     this.scriptsPanel = SourcesPanel.instance();
     this.breakpointManager = Bindings.BreakpointManager.BreakpointManager.instance();
-    if (uiSourceCode.project().type() === Workspace.Workspace.projectTypes.Debugger) {
-      this.textEditor.element.classList.add('source-frame-debugger-script');
-    }
 
     this.popoverHelper =
         new UI.PopoverHelper.PopoverHelper(this.scriptsPanel.element, this.getPopoverRequest.bind(this));
     this.popoverHelper.setDisableOnClick(true);
     this.popoverHelper.setTimeout(250, 250);
     this.popoverHelper.setHasPadding(true);
-    this.boundPopoverHelperHide = this.popoverHelper.hidePopover.bind(this.popoverHelper);
-    this.scriptsPanel.element.addEventListener('scroll', this.boundPopoverHelperHide, true);
-
-    const shortcutHandlers = {
-      'debugger.toggle-breakpoint': async(): Promise<boolean> => {
-        const selection = this.textEditor.selection();
-        if (!selection) {
-          return false;
-        }
-        await this.toggleBreakpoint(selection.startLine, false);
-        return true;
-      },
-      'debugger.toggle-breakpoint-enabled': async(): Promise<boolean> => {
-        const selection = this.textEditor.selection();
-        if (!selection) {
-          return false;
-        }
-        await this.toggleBreakpoint(selection.startLine, true);
-        return true;
-      },
-      'debugger.breakpoint-input-window': async(): Promise<boolean> => {
-        const selection = this.textEditor.selection();
-        if (!selection) {
-          return false;
-        }
-        const breakpoints = this.lineBreakpointDecorations(selection.startLine)
-                                .map(decoration => decoration.breakpoint)
-                                .filter(breakpoint => Boolean(breakpoint));
-        let breakpoint: (Bindings.BreakpointManager.Breakpoint|null)|null = null;
-        if (breakpoints.length) {
-          breakpoint = breakpoints[0];
-        }
-        const isLogpoint = breakpoint ? breakpoint.condition().includes(LogpointPrefix) : false;
-        this.editBreakpointCondition(selection.startLine, breakpoint, null, isLogpoint);
-        return true;
-      },
-    };
-    UI.ShortcutRegistry.ShortcutRegistry.instance().addShortcutListener(this.textEditor.element, shortcutHandlers);
-    this.boundKeyDown = (this.onKeyDown.bind(this) as (arg0: Event) => void);
-    this.textEditor.element.addEventListener('keydown', this.boundKeyDown, true);
-    this.boundKeyUp = (this.onKeyUp.bind(this) as (arg0: Event) => void);
-    this.textEditor.element.addEventListener('keyup', this.boundKeyUp, true);
-    this.boundMouseMove = (this.onMouseMove.bind(this) as (arg0: Event) => void);
-    this.textEditor.element.addEventListener('mousemove', this.boundMouseMove, false);
-    this.boundMouseDown = (this.onMouseDown.bind(this) as (arg0: Event) => void);
-    this.textEditor.element.addEventListener('mousedown', this.boundMouseDown, true);
-    this.boundBlur = (this.onBlur.bind(this) as (arg0: Event) => void);
-    this.textEditor.element.addEventListener('focusout', this.boundBlur, false);
-    this.boundWheel = (this.onWheel.bind(this) as (arg0: Event) => void);
-    this.textEditor.element.addEventListener('wheel', this.boundWheel, true);
-    this.boundGutterClick =
-        (e: Common.EventTarget.EventTargetEvent<SourceFrame.SourcesTextEditor.GutterClickEventData>): void => {
-          this.handleGutterClick(e);
-        };
-
-    this.textEditor.addEventListener(SourceFrame.SourcesTextEditor.Events.GutterClick, this.boundGutterClick, this);
 
     this.breakpointManager.addEventListener(
-        Bindings.BreakpointManager.Events.BreakpointAdded, this.breakpointAdded, this);
+        Bindings.BreakpointManager.Events.BreakpointAdded, this.breakpointChange, this);
     this.breakpointManager.addEventListener(
-        Bindings.BreakpointManager.Events.BreakpointRemoved, this.breakpointRemoved, this);
+        Bindings.BreakpointManager.Events.BreakpointRemoved, this.breakpointChange, this);
 
     this.uiSourceCode.addEventListener(Workspace.UISourceCode.Events.WorkingCopyChanged, this.workingCopyChanged, this);
     this.uiSourceCode.addEventListener(
         Workspace.UISourceCode.Events.WorkingCopyCommitted, this.workingCopyCommitted, this);
 
-    this.breakpointDecorations = new Set();
-    this.decorationByBreakpoint = new Map();
-    this.possibleBreakpointsRequested = new Set();
-
     this.scriptFileForDebuggerModel = new Map();
 
     Common.Settings.Settings.instance()
@@ -301,23 +214,13 @@ export class DebuggerPlugin extends Plugin {
         .moduleSetting('skipContentScripts')
         .addChangeListener(this.showIgnoreListInfobarIfNeeded, this);
 
-    this.valueWidgets = new Map();
-    this.continueToLocationDecorations = null;
-
     UI.Context.Context.instance().addFlavorChangeListener(SDK.DebuggerModel.CallFrame, this.callFrameChanged, this);
     this.liveLocationPool = new Bindings.LiveLocation.LiveLocationPool();
-    this.callFrameChanged();
 
     this.updateScriptFiles();
 
-    if (this.uiSourceCode.isDirty()) {
-      this.muted = true;
-      this.mutedFromStart = true;
-    } else {
-      this.muted = false;
-      this.mutedFromStart = false;
-      this.initializeBreakpoints();
-    }
+    this.muted = this.uiSourceCode.isDirty();
+    this.initializedMuted = this.muted;
 
     this.ignoreListInfobar = null;
     this.showIgnoreListInfobarIfNeeded();
@@ -326,14 +229,98 @@ export class DebuggerPlugin extends Plugin {
       scriptFile.checkMapping();
     }
 
-    this.hasLineWithoutMapping = false;
-    this.updateLinesWithoutMappingHighlight();
     if (!Root.Runtime.experiments.isEnabled('sourcesPrettyPrint')) {
       this.prettyPrintInfobar = null;
       this.detectMinified();
     }
   }
 
+  editorExtension(): CodeMirror.Extension {
+    const handlers = this.shortcutHandlers();
+
+    return [
+      CodeMirror.EditorView.updateListener.of(update => this.onEditorUpdate(update)),
+      CodeMirror.EditorView.domEventHandlers({
+        keydown: (event): boolean => {
+          if (this.onKeyDown(event)) {
+            return true;
+          }
+          handlers(event);
+          return event.defaultPrevented;
+        },
+        keyup: event => this.onKeyUp(event),
+        mousemove: event => this.onMouseMove(event),
+        mousedown: event => this.onMouseDown(event),
+        focusout: event => this.onBlur(event),
+        wheel: event => this.onWheel(event),
+      }),
+      CodeMirror.lineNumbers({
+        domEventHandlers: {
+          mousedown: (view, block, event) =>
+              this.handleGutterClick(view.state.doc.lineAt(block.from), event as MouseEvent),
+        },
+      }),
+      infobarState,
+      breakpointMarkers,
+      CodeMirror.Prec.highest(executionLine.field),
+      CodeMirror.Prec.lowest(continueToMarkers.field),
+      markIfContinueTo,
+      valueDecorations.field,
+      CodeMirror.Prec.lowest(evalExpression.field),
+      theme,
+      this.uiSourceCode.project().type() === Workspace.Workspace.projectTypes.Debugger ?
+          CodeMirror.EditorView.editorAttributes.of({class: 'source-frame-debugger-script'}) :
+          [],
+    ];
+  }
+
+  private shortcutHandlers(): (event: KeyboardEvent) => void {
+    const selectionLine = (editor: TextEditor.TextEditor.TextEditor): CodeMirror.Line => {
+      return editor.state.doc.lineAt(editor.state.selection.main.head);
+    };
+
+    return UI.ShortcutRegistry.ShortcutRegistry.instance().getShortcutListener({
+      'debugger.toggle-breakpoint': async(): Promise<boolean> => {
+        if (this.muted || !this.editor) {
+          return false;
+        }
+        await this.toggleBreakpoint(selectionLine(this.editor), false);
+        return true;
+      },
+      'debugger.toggle-breakpoint-enabled': async(): Promise<boolean> => {
+        if (this.muted || !this.editor) {
+          return false;
+        }
+        await this.toggleBreakpoint(selectionLine(this.editor), true);
+        return true;
+      },
+      'debugger.breakpoint-input-window': async(): Promise<boolean> => {
+        if (this.muted || !this.editor) {
+          return false;
+        }
+        const line = selectionLine(this.editor);
+        const breakpoint =
+            this.breakpoints.find(b => b.position >= line.from && b.position <= line.to)?.breakpoint || null;
+        const isLogpoint = breakpoint ? breakpoint.condition().includes(LogpointPrefix) : false;
+        this.editBreakpointCondition(line, breakpoint, null, isLogpoint);
+        return true;
+      },
+    });
+  }
+
+  editorInitialized(editor: TextEditor.TextEditor.TextEditor): void {
+    this.editor = editor;
+    computeNonBreakableLines(editor.state, this.uiSourceCode).then(linePositions => {
+      if (linePositions.length) {
+        editor.dispatch({effects: SourceFrame.SourceFrame.addNonBreakableLines.of(linePositions)});
+      }
+    }, console.error);
+    if (!this.muted) {
+      this.refreshBreakpoints();
+    }
+    this.callFrameChanged();
+  }
+
   static accepts(uiSourceCode: Workspace.UISourceCode.UISourceCode): boolean {
     return uiSourceCode.contentType().hasScripts();
   }
@@ -372,6 +359,7 @@ export class DebuggerPlugin extends Plugin {
           },
         ]);
     this.ignoreListInfobar = infobar;
+    infobar.setCloseCallback(() => this.removeInfobar(this.ignoreListInfobar));
 
     infobar.createDetailsRowMessage(i18nString(UIStrings.theDebuggerWillSkipStepping));
 
@@ -380,7 +368,19 @@ export class DebuggerPlugin extends Plugin {
     if (scriptFile && scriptFile.hasSourceMapURL()) {
       infobar.createDetailsRowMessage(i18nString(UIStrings.sourceMapFoundButIgnoredForFile));
     }
-    this.textEditor.attachInfobar(this.ignoreListInfobar);
+    this.attachInfobar(this.ignoreListInfobar);
+  }
+
+  attachInfobar(bar: UI.Infobar.Infobar): void {
+    if (this.editor) {
+      this.editor.dispatch({effects: addInfobar.of(bar)});
+    }
+  }
+
+  removeInfobar(bar: UI.Infobar.Infobar|null): void {
+    if (this.editor && bar) {
+      this.editor.dispatch({effects: removeInfobar.of(bar)});
+    }
   }
 
   private hideIgnoreListInfobar(): void {
@@ -391,73 +391,64 @@ export class DebuggerPlugin extends Plugin {
     this.ignoreListInfobar = null;
   }
 
-  wasShown(): void {
-    if (this.executionLocation) {
-      // We need SourcesTextEditor to be initialized prior to this call. @see crbug.com/499889
-      queueMicrotask(() => {
-        this.generateValuesInSource();
-      });
-    }
-  }
-
   willHide(): void {
     this.popoverHelper.hidePopover();
   }
 
-  async populateLineGutterContextMenu(contextMenu: UI.ContextMenu.ContextMenu, editorLineNumber: number):
-      Promise<void> {
+  populateLineGutterContextMenu(contextMenu: UI.ContextMenu.ContextMenu, editorLineNumber: number): void {
     const uiLocation = new Workspace.UISourceCode.UILocation(this.uiSourceCode, editorLineNumber, 0);
     this.scriptsPanel.appendUILocationItems(contextMenu, uiLocation);
-    const breakpoints =
-        (this.lineBreakpointDecorations(editorLineNumber)
-             .map(decoration => decoration.breakpoint)
-             .filter(breakpoint => Boolean(breakpoint)) as Bindings.BreakpointManager.Breakpoint[]);
+    if (this.muted || !this.editor) {
+      return;
+    }
+    const line = this.editor.state.doc.line(editorLineNumber + 1);
+    const breakpoints = this.lineBreakpoints(line);
     const supportsConditionalBreakpoints =
         Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().supportsConditionalBreakpoints(
             this.uiSourceCode);
     if (!breakpoints.length) {
-      if (!this.textEditor.hasLineClass(editorLineNumber, 'cm-non-breakable-line')) {
+      if (this.editor && SourceFrame.SourceFrame.isBreakableLine(this.editor.state, line)) {
         contextMenu.debugSection().appendItem(
-            i18nString(UIStrings.addBreakpoint), this.createNewBreakpoint.bind(this, editorLineNumber, '', true));
+            i18nString(UIStrings.addBreakpoint), this.createNewBreakpoint.bind(this, line, '', true));
         if (supportsConditionalBreakpoints) {
           contextMenu.debugSection().appendItem(
               i18nString(UIStrings.addConditionalBreakpoint),
-              this.editBreakpointCondition.bind(this, editorLineNumber, null, null, false /* preferLogpoint */));
+              this.editBreakpointCondition.bind(this, line, null, null, false /* preferLogpoint */));
           contextMenu.debugSection().appendItem(
               i18nString(UIStrings.addLogpoint),
-              this.editBreakpointCondition.bind(this, editorLineNumber, null, null, true /* preferLogpoint */));
+              this.editBreakpointCondition.bind(this, line, null, null, true /* preferLogpoint */));
           contextMenu.debugSection().appendItem(
-              i18nString(UIStrings.neverPauseHere),
-              this.createNewBreakpoint.bind(this, editorLineNumber, 'false', true));
+              i18nString(UIStrings.neverPauseHere), this.createNewBreakpoint.bind(this, line, 'false', true));
         }
       }
     } else {
       const removeTitle = i18nString(UIStrings.removeBreakpoint, {n: breakpoints.length});
-      contextMenu.debugSection().appendItem(removeTitle, () => breakpoints.map(breakpoint => breakpoint.remove(false)));
+      contextMenu.debugSection().appendItem(
+          removeTitle, () => breakpoints.forEach(breakpoint => breakpoint.remove(false)));
       if (breakpoints.length === 1 && supportsConditionalBreakpoints) {
         // Editing breakpoints only make sense for conditional breakpoints
         // and logpoints and both are currently only available for JavaScript
         // debugging.
         contextMenu.debugSection().appendItem(
             i18nString(UIStrings.editBreakpoint),
-            this.editBreakpointCondition.bind(
-                this, editorLineNumber, breakpoints[0], null, false /* preferLogpoint */));
+            this.editBreakpointCondition.bind(this, line, breakpoints[0], null, false /* preferLogpoint */));
       }
       const hasEnabled = breakpoints.some(breakpoint => breakpoint.enabled());
       if (hasEnabled) {
         const title = i18nString(UIStrings.disableBreakpoint, {n: breakpoints.length});
-        contextMenu.debugSection().appendItem(title, () => breakpoints.map(breakpoint => breakpoint.setEnabled(false)));
+        contextMenu.debugSection().appendItem(
+            title, () => breakpoints.forEach(breakpoint => breakpoint.setEnabled(false)));
       }
       const hasDisabled = breakpoints.some(breakpoint => !breakpoint.enabled());
       if (hasDisabled) {
         const title = i18nString(UIStrings.enableBreakpoint, {n: breakpoints.length});
-        contextMenu.debugSection().appendItem(title, () => breakpoints.map(breakpoint => breakpoint.setEnabled(true)));
+        contextMenu.debugSection().appendItem(
+            title, () => breakpoints.forEach(breakpoint => breakpoint.setEnabled(true)));
       }
     }
   }
 
-  populateTextAreaContextMenu(
-      contextMenu: UI.ContextMenu.ContextMenu, editorLineNumber: number, editorColumnNumber: number): Promise<void> {
+  populateTextAreaContextMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
     function addSourceMapURL(scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile): void {
       const dialog = new AddSourceMapURLDialog(addSourceMapURLDialogCallback.bind(null, scriptFile));
       dialog.show();
@@ -471,95 +462,66 @@ export class DebuggerPlugin extends Plugin {
       scriptFile.addSourceMapURL(url);
     }
 
-    function populateSourceMapMembers(this: DebuggerPlugin): void {
-      if (this.uiSourceCode.project().type() === Workspace.Workspace.projectTypes.Network &&
-          Common.Settings.Settings.instance().moduleSetting('jsSourceMapsEnabled').get() &&
-          !Bindings.IgnoreListManager.IgnoreListManager.instance().isIgnoreListedUISourceCode(this.uiSourceCode)) {
-        if (this.scriptFileForDebuggerModel.size) {
-          const scriptFile = this.scriptFileForDebuggerModel.values().next().value;
-          const addSourceMapURLLabel = i18nString(UIStrings.addSourceMap);
-          contextMenu.debugSection().appendItem(addSourceMapURLLabel, addSourceMapURL.bind(null, scriptFile));
-        }
+    if (this.uiSourceCode.project().type() === Workspace.Workspace.projectTypes.Network &&
+        Common.Settings.Settings.instance().moduleSetting('jsSourceMapsEnabled').get() &&
+        !Bindings.IgnoreListManager.IgnoreListManager.instance().isIgnoreListedUISourceCode(this.uiSourceCode)) {
+      if (this.scriptFileForDebuggerModel.size) {
+        const scriptFile = this.scriptFileForDebuggerModel.values().next().value;
+        const addSourceMapURLLabel = i18nString(UIStrings.addSourceMap);
+        contextMenu.debugSection().appendItem(addSourceMapURLLabel, addSourceMapURL.bind(null, scriptFile));
       }
     }
-
-    return super.populateTextAreaContextMenu(contextMenu, editorLineNumber, editorColumnNumber)
-        .then(populateSourceMapMembers.bind(this));
   }
 
   private workingCopyChanged(): void {
-    if (this.scriptFileForDebuggerModel.size) {
-      return;
-    }
-
-    if (this.uiSourceCode.isDirty()) {
-      this.muteBreakpointsWhileEditing();
-    } else {
-      this.restoreBreakpointsAfterEditing();
+    if (!this.scriptFileForDebuggerModel.size) {
+      this.setMuted(this.uiSourceCode.isDirty());
     }
   }
 
   private workingCopyCommitted(): void {
     this.scriptsPanel.updateLastModificationTime();
     if (!this.scriptFileForDebuggerModel.size) {
-      this.restoreBreakpointsAfterEditing();
+      this.setMuted(false);
     }
   }
 
   private didMergeToVM(): void {
-    this.restoreBreakpointsIfConsistentScripts();
+    if (this.consistentScripts()) {
+      this.setMuted(false);
+    }
   }
 
   private didDivergeFromVM(): void {
-    this.muteBreakpointsWhileEditing();
+    this.setMuted(true);
   }
 
-  private muteBreakpointsWhileEditing(): void {
-    if (this.muted) {
+  private setMuted(value: boolean): void {
+    if (this.initializedMuted) {
       return;
     }
-    for (const decoration of this.breakpointDecorations) {
-      this.updateBreakpointDecoration(decoration);
+    if (value !== this.muted) {
+      this.muted = value;
+      if (!value) {
+        this.restoreBreakpointsAfterEditing();
+      } else if (this.editor) {
+        this.editor.dispatch({effects: muteBreakpoints.of(null)});
+      }
     }
-    this.muted = true;
   }
 
-  private async restoreBreakpointsIfConsistentScripts(): Promise<void> {
+  private consistentScripts(): boolean {
     for (const scriptFile of this.scriptFileForDebuggerModel.values()) {
       if (scriptFile.hasDivergedFromVM() || scriptFile.isMergingToVM()) {
-        return;
-      }
-    }
-
-    await this.restoreBreakpointsAfterEditing();
-  }
-
-  private async restoreBreakpointsAfterEditing(): Promise<void> {
-    this.muted = false;
-    if (this.mutedFromStart) {
-      this.mutedFromStart = false;
-      this.initializeBreakpoints();
-      return;
-    }
-    const decorations = Array.from(this.breakpointDecorations);
-    this.breakpointDecorations.clear();
-    this.textEditor.operation(() => decorations.map(decoration => decoration.hide()));
-    for (const decoration of decorations) {
-      if (!decoration.breakpoint) {
-        continue;
-      }
-      const enabled = decoration.enabled;
-      decoration.breakpoint.remove(false);
-      const location = decoration.handle.resolve();
-      if (location) {
-        await this.setBreakpoint(location.lineNumber, location.columnNumber, decoration.condition, enabled);
+        return false;
       }
     }
+    return true;
   }
 
   private isIdentifier(tokenType: string): boolean {
-    return tokenType.startsWith('js-variable') || tokenType.startsWith('js-property') || tokenType === 'js-def' ||
-        tokenType === 'variable';
+    return tokenType === 'VariableName' || tokenType === 'VariableDefinition' || tokenType === 'PropertyName' ||
+        tokenType === 'PropertyDefinition';
   }
 
   private getPopoverRequest(event: MouseEvent): UI.PopoverHelper.PopoverRequest|null {
@@ -568,161 +530,98 @@ export class DebuggerPlugin extends Plugin {
     }
     const target = UI.Context.Context.instance().flavor(SDK.Target.Target);
     const debuggerModel = target ? target.model(SDK.DebuggerModel.DebuggerModel) : null;
-    if (!debuggerModel || !debuggerModel.isPaused()) {
-      return null;
-    }
-
-    const textPosition = this.textEditor.coordinatesToCursorPosition(event.x, event.y);
-    if (!textPosition) {
+    const {editor} = this;
+    if (!debuggerModel || !debuggerModel.isPaused() || !editor) {
       return null;
     }
 
-    const mouseLine = textPosition.startLine;
-    const mouseColumn = textPosition.startColumn;
-    const textSelection = this.textEditor.selection().normalize();
-    let editorLineNumber = -1;
-    let startHighlight = -1;
-    let endHighlight = -1;
-
     const selectedCallFrame =
         (UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame) as SDK.DebuggerModel.CallFrame);
     if (!selectedCallFrame) {
       return null;
     }
 
-    if (textSelection && !textSelection.isEmpty()) {
-      if (textSelection.startLine !== textSelection.endLine || textSelection.startLine !== mouseLine ||
-          mouseColumn < textSelection.startColumn || mouseColumn > textSelection.endColumn) {
+    let textPosition = editor.editor.posAtCoords(event);
+    if (!textPosition) {
+      return null;
+    }
+    const positionCoords = editor.editor.coordsAtPos(textPosition);
+    if (!positionCoords || event.clientY < positionCoords.top || event.clientY > positionCoords.bottom ||
+        event.clientX < positionCoords.left - 30 || event.clientX > positionCoords.right + 30) {
+      return null;
+    }
+    if (event.clientX < positionCoords.left && textPosition > editor.state.doc.lineAt(textPosition).from) {
+      textPosition -= 1;
+    }
+
+    const textSelection = editor.state.selection.main;
+    let highlightRange: {from: number, to: number};
+
+    if (!textSelection.empty) {
+      if (textPosition < textSelection.from || textPosition > textSelection.to) {
         return null;
       }
-      editorLineNumber = textSelection.startLine;
-      startHighlight = textSelection.startColumn;
-      endHighlight = textSelection.endColumn - 1;
+      highlightRange = textSelection;
     } else if (this.uiSourceCode.mimeType() === 'application/wasm') {
-      const token = this.textEditor.tokenAtTextPosition(textPosition.startLine, textPosition.startColumn);
-      if (!token || token.type !== 'variable-2') {
+      const node = CodeMirror.syntaxTree(editor.state).resolveInner(textPosition, 1);
+      if (node.name !== 'Identifier') {
         return null;
       }
-      editorLineNumber = textPosition.startLine;
-      startHighlight = token.startColumn;
-      endHighlight = token.endColumn - 1;
-
       // For $label identifiers we can't show a meaningful preview (https://crbug.com/1155548),
       // so we suppress them for now. Label identifiers can only appear as operands to control
-      // instructions[1], so we just check the first token on the line and filter them out.
+      // instructions[1].
       //
       // [1]: https://webassembly.github.io/spec/core/text/instructions.html#control-instructions
-      for (let firstColumn = 0; firstColumn < startHighlight; ++firstColumn) {
-        const firstToken = this.textEditor.tokenAtTextPosition(editorLineNumber, firstColumn);
-        if (firstToken && firstToken.type === 'keyword') {
-          const line = this.textEditor.line(editorLineNumber);
-          switch (line.substring(firstToken.startColumn, firstToken.endColumn)) {
-            case 'block':
-            case 'loop':
-            case 'if':
-            case 'else':
-            case 'end':
-            case 'br':
-            case 'br_if':
-            case 'br_table':
-              return null;
-            default:
-              break;
+      const controlInstructions = ['block', 'loop', 'if', 'else', 'end', 'br', 'br_if', 'br_table'];
+      for (let parent: CodeMirror.SyntaxNode|null = node.parent; parent; parent = parent.parent) {
+        if (parent.name === 'App') {
+          const firstChild = parent.firstChild;
+          const opName = firstChild?.name === 'Keyword' && editor.state.sliceDoc(firstChild.from, firstChild.to);
+          if (opName && controlInstructions.includes(opName)) {
+            return null;
           }
-          break;
         }
       }
-    } else {
-      let token = this.textEditor.tokenAtTextPosition(textPosition.startLine, textPosition.startColumn);
-      if (!token) {
+      highlightRange = node;
+    } else if (/^text\/(javascript|typescript|jsx)/.test(this.uiSourceCode.mimeType())) {
+      let node: CodeMirror.SyntaxNode|null = CodeMirror.syntaxTree(editor.state).resolveInner(textPosition, 1);
+      // Only do something if the cursor is over a leaf node.
+      if (node.firstChild) {
         return null;
       }
-      editorLineNumber = textPosition.startLine;
-      const line = this.textEditor.line(editorLineNumber);
-      let tokenContent = line.substring(token.startColumn, token.endColumn);
-
-      // When the user hovers an opening bracket, we look for the closing bracket
-      // and kick off the matching from that below.
-      if (tokenContent === '[') {
-        const closingColumn = line.indexOf(']', token.startColumn);
-        if (closingColumn < 0) {
-          return null;
-        }
-        token = this.textEditor.tokenAtTextPosition(editorLineNumber, closingColumn);
-        if (!token) {
-          return null;
-        }
-        tokenContent = line.substring(token.startColumn, token.endColumn);
-      }
-      startHighlight = token.startColumn;
-      endHighlight = token.endColumn - 1;
-
-      // Consume multiple `[index][0]...[f(1)]` at the end of the expression.
-      while (tokenContent === ']') {
-        startHighlight = line.lastIndexOf('[', startHighlight) - 1;
-        if (startHighlight < 0) {
-          return null;
-        }
-        token = this.textEditor.tokenAtTextPosition(editorLineNumber, startHighlight);
-        if (!token) {
-          return null;
-        }
-        tokenContent = line.substring(token.startColumn, token.endColumn);
-        startHighlight = token.startColumn;
+      while (node && node.name !== 'VariableDefinition' && node.name !== 'VariableName' &&
+             node.name !== 'MemberExpression') {
+        node = node.parent;
       }
-
-      if (!token.type) {
+      if (!node) {
         return null;
       }
-      const isIdentifier = this.isIdentifier(token.type);
-      if (!isIdentifier && (token.type !== 'js-keyword' || tokenContent !== 'this')) {
+      highlightRange = node;
+    } else {
+      // In other languages, just assume a token consisting entirely
+      // of identifier-like characters is an identifier.
+      const node: CodeMirror.SyntaxNode = CodeMirror.syntaxTree(editor.state).resolveInner(textPosition, 1);
+      if (node.to - node.from > 50 || /[^\w_\-$]/.test(editor.state.sliceDoc(node.from, node.to))) {
         return null;
       }
+      highlightRange = node;
+    }
 
-      while (startHighlight > 1 && line.charAt(startHighlight - 1) === '.') {
-        // Consume multiple `[index][0]...[f(1)]` preceeding a dot.
-        while (line.charAt(startHighlight - 2) === ']') {
-          startHighlight = line.lastIndexOf('[', startHighlight - 2) - 1;
-          if (startHighlight < 0) {
-            return null;
-          }
-        }
-        const tokenBefore = this.textEditor.tokenAtTextPosition(editorLineNumber, startHighlight - 2);
-        if (!tokenBefore || !tokenBefore.type) {
-          return null;
-        }
-        if (tokenBefore.type === 'js-meta') {
-          break;
-        }
-        if (tokenBefore.type === 'js-string-2') {
-          // If we hit a template literal, find the opening ` in this line.
-          // TODO(bmeurer): We should eventually replace this tokenization
-          // approach with a proper soluation based on parsing, maybe reusing
-          // the Parser and AST inside V8 for this (or potentially relying on
-          // acorn to do the job).
-          if (tokenBefore.endColumn < 2) {
-            return null;
-          }
-          startHighlight = line.lastIndexOf('`', tokenBefore.endColumn - 2);
-          if (startHighlight < 0) {
-            return null;
-          }
-          break;
-        }
-        startHighlight = tokenBefore.startColumn;
-      }
+    const highlightLine = editor.state.doc.lineAt(highlightRange.from);
+    if (highlightRange.to > highlightLine.to) {
+      return null;
     }
 
-    const leftCorner =
-        (this.textEditor.cursorPositionToCoordinates(editorLineNumber, startHighlight) as
-         TextEditor.CodeMirrorTextEditor.Coordinates);
-    const rightCorner =
-        (this.textEditor.cursorPositionToCoordinates(editorLineNumber, endHighlight) as
-         TextEditor.CodeMirrorTextEditor.Coordinates);
-    const box = new AnchorBox(leftCorner.x, leftCorner.y, rightCorner.x - leftCorner.x, leftCorner.height);
+    const leftCorner = editor.editor.coordsAtPos(highlightRange.from);
+    const rightCorner = editor.editor.coordsAtPos(highlightRange.to);
+    if (!leftCorner || !rightCorner) {
+      return null;
+    }
+    const box = new AnchorBox(
+        leftCorner.left, leftCorner.top - 2, rightCorner.right - leftCorner.left, rightCorner.bottom - leftCorner.top);
+    const evaluationText = editor.state.sliceDoc(highlightRange.from, highlightRange.to);
 
     let objectPopoverHelper: ObjectUI.ObjectPopoverHelper.ObjectPopoverHelper|null = null;
-    let highlightDescriptor: CodeMirror.TextMarker|null = null;
 
     async function evaluate(uiSourceCode: Workspace.UISourceCode.UISourceCode, evaluationText: string): Promise<{
       object: SDK.RemoteObject.RemoteObject,
@@ -731,7 +630,8 @@ export class DebuggerPlugin extends Plugin {
       error: string,
     }|null> {
       const resolvedText = await resolveExpression(
-          selectedCallFrame, evaluationText, uiSourceCode, editorLineNumber, startHighlight, endHighlight);
+          selectedCallFrame, evaluationText, uiSourceCode, highlightLine.number - 1,
+          highlightRange.from - highlightLine.from, highlightRange.to - highlightLine.from);
       return await selectedCallFrame.evaluate({
         expression: resolvedText || evaluationText,
         objectGroup: 'popover',
@@ -750,9 +650,7 @@ export class DebuggerPlugin extends Plugin {
     return {
       box,
       show: async(popover: UI.GlassPane.GlassPane): Promise<boolean> => {
-        const evaluationText = this.textEditor.line(editorLineNumber).substring(startHighlight, endHighlight + 1);
         const result = await evaluate(this.uiSourceCode, evaluationText);
-
         if (!result || 'error' in result || !result.object ||
             (result.object.type === 'object' && result.object.subtype === 'error')) {
           return false;
@@ -767,9 +665,8 @@ export class DebuggerPlugin extends Plugin {
           }
           return false;
         }
-        const highlightRange =
-            new TextUtils.TextRange.TextRange(editorLineNumber, startHighlight, editorLineNumber, endHighlight);
-        highlightDescriptor = this.textEditor.highlightRange(highlightRange, 'source-frame-eval-expression');
+        const decoration = CodeMirror.Decoration.set(evalExpressionMark.range(highlightRange.from, highlightRange.to));
+        editor.dispatch({effects: evalExpression.update.of(decoration)});
         return true;
       },
       hide: (): void => {
@@ -777,379 +674,389 @@ export class DebuggerPlugin extends Plugin {
           objectPopoverHelper.dispose();
         }
         debuggerModel.runtimeModel().releaseObjectGroup('popover');
-        if (highlightDescriptor) {
-          this.textEditor.removeHighlight(highlightDescriptor);
-        }
+        editor.dispatch({effects: evalExpression.update.of(CodeMirror.Decoration.none)});
       },
     };
   }
 
+  private onEditorUpdate(update: CodeMirror.ViewUpdate): void {
+    if (!update.changes.empty) {
+      for (const breakpointDesc of this.breakpoints) {
+        breakpointDesc.position = update.changes.mapPos(breakpointDesc.position);
+      }
+    }
+  }
+
   private onWheel(event: WheelEvent): void {
     if (this.executionLocation && UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(event)) {
       event.preventDefault();
     }
   }
 
-  private onKeyDown(event: KeyboardEvent): void {
-    if (!event.ctrlKey || (!event.metaKey && Host.Platform.isMac())) {
-      this.clearControlDown();
+  private onKeyDown(event: KeyboardEvent): boolean {
+    const ctrlDown = UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(event);
+    if (!ctrlDown) {
+      this.setControlDown(false);
     }
-
     if (event.key === Platform.KeyboardUtilities.ESCAPE_KEY) {
       if (this.popoverHelper.isPopoverVisible()) {
         this.popoverHelper.hidePopover();
         event.consume();
       }
-      return;
+      return true;
     }
-
-    if (UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(event) && this.executionLocation) {
-      this.controlDown = true;
-      if (event.key === (Host.Platform.isMac() ? 'Meta' : 'Control')) {
-        this.controlTimeout = window.setTimeout(() => {
-          if (this.executionLocation && this.controlDown) {
-            this.showContinueToLocations();
-          }
-        }, 150);
-      }
+    if (ctrlDown && this.executionLocation) {
+      this.setControlDown(true);
     }
+    return false;
   }
 
   private onMouseMove(event: MouseEvent): void {
     if (this.executionLocation && this.controlDown &&
         UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(event)) {
-      if (!this.continueToLocationDecorations) {
+      if (!this.continueToLocations) {
         this.showContinueToLocations();
       }
     }
-    if (this.continueToLocationDecorations) {
-      const target = (event.target as Element);
-      const textPosition = this.textEditor.coordinatesToCursorPosition(event.x, event.y);
-      const hovering = Boolean(target.enclosingNodeOrSelfWithClass('source-frame-async-step-in'));
-      this.setAsyncStepInHoveredLine(textPosition ? textPosition.startLine : null, hovering);
-    }
-  }
-
-  private setAsyncStepInHoveredLine(editorLineNumber: number|null, hovered: boolean): void {
-    if (this.asyncStepInHoveredLine === editorLineNumber && this.asyncStepInHovered === hovered) {
-      return;
-    }
-    if (this.asyncStepInHovered && this.asyncStepInHoveredLine) {
-      this.textEditor.toggleLineClass(this.asyncStepInHoveredLine, 'source-frame-async-step-in-hovered', false);
-    }
-    this.asyncStepInHoveredLine = editorLineNumber;
-    this.asyncStepInHovered = hovered;
-    if (this.asyncStepInHovered && this.asyncStepInHoveredLine) {
-      this.textEditor.toggleLineClass(this.asyncStepInHoveredLine, 'source-frame-async-step-in-hovered', true);
-    }
   }
 
   private onMouseDown(event: MouseEvent): void {
     if (!this.executionLocation || !UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(event)) {
       return;
     }
-    if (!this.continueToLocationDecorations) {
+    if (!this.continueToLocations || !this.editor) {
       return;
     }
     event.consume();
-    const textPosition = this.textEditor.coordinatesToCursorPosition(event.x, event.y);
-    if (!textPosition) {
+    const textPosition = this.editor.editor.posAtCoords(event);
+    if (textPosition === null) {
       return;
     }
-    for (const decoration of this.continueToLocationDecorations.keys()) {
-      const range = decoration.find();
-      if (!range) {
-        continue;
-      }
-      if (range.from.line !== textPosition.startLine || range.to.line !== textPosition.startLine) {
-        continue;
-      }
-      if (range.from.ch <= textPosition.startColumn && textPosition.startColumn <= range.to.ch) {
-        const callback = this.continueToLocationDecorations.get(decoration);
-        if (!callback) {
-          throw new Error('Expected a function');
-        }
-        callback();
+    for (const {from, to, click} of this.continueToLocations) {
+      if (from <= textPosition && to >= textPosition) {
+        click();
         break;
       }
     }
   }
 
   private onBlur(_event: Event): void {
-    this.clearControlDown();
+    this.setControlDown(false);
   }
 
   private onKeyUp(_event: KeyboardEvent): void {
-    this.clearControlDown();
+    this.setControlDown(false);
   }
 
-  private clearControlDown(): void {
-    this.controlDown = false;
-    this.clearContinueToLocations();
-    if (this.controlTimeout) {
+  private setControlDown(state: boolean): void {
+    if (state !== this.controlDown) {
+      this.controlDown = state;
       clearTimeout(this.controlTimeout);
+      this.controlTimeout = undefined;
+      if (state && this.executionLocation) {
+        this.controlTimeout = window.setTimeout(() => {
+          if (this.executionLocation && this.controlDown) {
+            this.showContinueToLocations();
+          }
+        }, 150);
+      } else {
+        this.clearContinueToLocations();
+      }
     }
   }
 
-  private async editBreakpointCondition(
-      editorLineNumber: number, breakpoint: Bindings.BreakpointManager.Breakpoint|null, location: {
+  private editBreakpointCondition(
+      line: CodeMirror.Line, breakpoint: Bindings.BreakpointManager.Breakpoint|null, location: {
         lineNumber: number,
         columnNumber: number,
       }|null,
-      preferLogpoint?: boolean): Promise<void> {
+      preferLogpoint?: boolean): void {
+    const editor = this.editor as TextEditor.TextEditor.TextEditor;
     const oldCondition = breakpoint ? breakpoint.condition() : '';
     const decorationElement = document.createElement('div');
-    const dialog =
-        await BreakpointEditDialog.create(editorLineNumber, oldCondition, Boolean(preferLogpoint), async result => {
-          dialog.detach();
-          this.textEditor.removeDecoration(decorationElement, editorLineNumber);
-          if (!result.committed) {
-            return;
-          }
-          if (breakpoint) {
-            breakpoint.setCondition(result.condition);
-          } else if (location) {
-            await this.setBreakpoint(location.lineNumber, location.columnNumber, result.condition, true);
-          } else {
-            await this.createNewBreakpoint(editorLineNumber, result.condition, true);
-          }
-        });
-    this.textEditor.addDecoration(decorationElement, editorLineNumber);
+    const compartment = new CodeMirror.Compartment();
+    const dialog = new BreakpointEditDialog(line.number - 1, oldCondition, Boolean(preferLogpoint), async result => {
+      dialog.detach();
+      editor.dispatch({effects: compartment.reconfigure([])});
+      if (!result.committed) {
+        return;
+      }
+      if (breakpoint) {
+        breakpoint.setCondition(result.condition);
+      } else if (location) {
+        await this.setBreakpoint(location.lineNumber, location.columnNumber, result.condition, true);
+      } else {
+        await this.createNewBreakpoint(line, result.condition, true);
+      }
+    });
+    editor.dispatch({
+      effects: CodeMirror.StateEffect.appendConfig.of(compartment.of(CodeMirror.EditorView.decorations.of(
+          CodeMirror.Decoration.set([CodeMirror.Decoration
+                                         .widget({
+                                           block: true, widget: new class extends CodeMirror.WidgetType {
+                                             toDOM(): HTMLElement {
+                                               return decorationElement;
+                                             }
+                                           }(),
+                                                                                  side: 1,
+                                         })
+                                         .range(line.from)])))),
+    });
     dialog.markAsExternallyManaged();
     dialog.show(decorationElement);
     dialog.focusEditor();
   }
 
-  private async executionLineChanged(liveLocation: Bindings.LiveLocation.LiveLocation): Promise<void> {
-    this.clearExecutionLine();
-    const uiLocation = await liveLocation.uiLocation();
-    if (!uiLocation || uiLocation.uiSourceCode.url() !== this.uiSourceCode.url()) {
-      this.executionLocation = null;
-      return;
+  private computeExecutionDecorations(editorState: CodeMirror.EditorState, lineNumber: number, columnNumber: number):
+      CodeMirror.DecorationSet {
+    const {doc} = editorState;
+    if (lineNumber >= doc.lines) {
+      return CodeMirror.Decoration.none;
     }
-
-    this.executionLocation = uiLocation;
-    const editorLocation = this.transformer.uiLocationToEditorLocation(uiLocation.lineNumber, uiLocation.columnNumber);
-    this.textEditor.setExecutionLocation(editorLocation.lineNumber, editorLocation.columnNumber);
-    if (this.textEditor.isShowing()) {
-      // We need SourcesTextEditor to be initialized prior to this call. @see crbug.com/506566
-      queueMicrotask(() => {
-        if (this.controlDown) {
-          this.showContinueToLocations();
-        } else {
-          this.generateValuesInSource();
-        }
-      });
+    const line = doc.line(lineNumber + 1);
+    const decorations: CodeMirror.Range<CodeMirror.Decoration>[] = [executionLineDeco.range(line.from)];
+    const position = Math.min(line.to, line.from + columnNumber);
+    let syntaxNode = CodeMirror.syntaxTree(editorState).resolveInner(position, 1);
+    if (syntaxNode.to === syntaxNode.from - 1 && /[(.]/.test(doc.sliceString(syntaxNode.from, syntaxNode.to))) {
+      syntaxNode = syntaxNode.resolve(syntaxNode.to, 1);
     }
+    const tokenEnd = Math.min(line.to, syntaxNode.to);
+    if (tokenEnd > position) {
+      decorations.push(executionTokenDeco.range(position, tokenEnd));
+    }
+
+    return CodeMirror.Decoration.set(decorations);
   }
 
-  private generateValuesInSource(): void {
-    if (!Common.Settings.Settings.instance().moduleSetting('inlineVariableValues').get()) {
-      return;
-    }
-    const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
-    if (!executionContext) {
-      return;
-    }
-    const callFrame = UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame);
-    if (!callFrame) {
+  // Show widgets with variable's values after lines that mention the
+  // variables, if the debugger is paused in this file.
+  private async updateValueDecorations(): Promise<void> {
+    if (!this.editor) {
       return;
     }
-
-    const localScope = callFrame.localScope();
-    const functionLocation = callFrame.functionLocation();
-    if (localScope && functionLocation) {
-      resolveScopeInObject(localScope)
-          .getAllProperties(false, false)
-          .then(this.prepareScopeVariables.bind(this, callFrame));
+    const decorations = this.executionLocation ? await this.computeValueDecorations() : null;
+    if (decorations || this.editor.state.field(valueDecorations.field).size) {
+      this.editor.dispatch({effects: valueDecorations.update.of(decorations || CodeMirror.Decoration.none)});
     }
   }
 
-  private showContinueToLocations(): void {
-    this.popoverHelper.hidePopover();
+  private async computeValueDecorations(): Promise<CodeMirror.DecorationSet|null> {
+    if (!this.editor) {
+      return null;
+    }
+    if (!Common.Settings.Settings.instance().moduleSetting('inlineVariableValues').get()) {
+      return null;
+    }
     const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     if (!executionContext) {
-      return;
+      return null;
     }
     const callFrame = UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame);
     if (!callFrame) {
-      return;
+      return null;
     }
-    const start = callFrame.functionLocation() || callFrame.location();
-    const debuggerModel = callFrame.debuggerModel;
-    debuggerModel.getPossibleBreakpoints(start, null, true)
-        .then(locations => this.textEditor.operation(renderLocations.bind(this, locations)));
-
-    function renderLocations(this: DebuggerPlugin, locations: SDK.DebuggerModel.BreakLocation[]): void {
-      this.clearContinueToLocationsNoRestore();
-      this.textEditor.hideExecutionLineBackground();
-      this.continueToLocationDecorations = new Map();
-      locations = locations.reverse();
-      let previousCallLine = -1;
-      for (const location of locations) {
-        const editorLocation = this.transformer.uiLocationToEditorLocation(location.lineNumber, location.columnNumber);
-        const tokenThatIsPossiblyNull =
-            this.textEditor.tokenAtTextPosition(editorLocation.lineNumber, editorLocation.columnNumber);
-        if (!tokenThatIsPossiblyNull) {
-          continue;
-        }
-        let token: TextEditor.CodeMirrorTextEditor.Token =
-            (tokenThatIsPossiblyNull as TextEditor.CodeMirrorTextEditor.Token);
-
-        const line = this.textEditor.line(editorLocation.lineNumber);
-        let tokenContent = line.substring(token.startColumn, token.endColumn);
-        if (!token.type && tokenContent === '.') {
-          const nextToken = this.textEditor.tokenAtTextPosition(editorLocation.lineNumber, token.endColumn + 1);
-          if (!nextToken) {
-            throw new Error('nextToken should not be null.');
-          }
-          token = nextToken;
-          tokenContent = line.substring(token.startColumn, token.endColumn);
-        }
-        if (!token.type) {
-          continue;
-        }
-        const validKeyword = token.type === 'js-keyword' &&
-            (tokenContent === 'this' || tokenContent === 'return' || tokenContent === 'new' ||
-             tokenContent === 'continue' || tokenContent === 'break');
-        if (!validKeyword && !this.isIdentifier(token.type)) {
-          continue;
-        }
-        if (previousCallLine === editorLocation.lineNumber &&
-            location.type !== Protocol.Debugger.BreakLocationType.Call) {
-          continue;
-        }
-
-        let highlightRange: TextUtils.TextRange.TextRange = new TextUtils.TextRange.TextRange(
-            editorLocation.lineNumber, token.startColumn, editorLocation.lineNumber, token.endColumn - 1);
-        let decoration = this.textEditor.highlightRange(highlightRange, 'source-frame-continue-to-location');
-        this.continueToLocationDecorations.set(decoration, location.continueToLocation.bind(location));
-        if (location.type === Protocol.Debugger.BreakLocationType.Call) {
-          previousCallLine = editorLocation.lineNumber;
-        }
-
-        let isAsyncCall: boolean = (line[token.startColumn - 1] === '.' && tokenContent === 'then') ||
-            tokenContent === 'setTimeout' || tokenContent === 'setInterval' || tokenContent === 'postMessage';
-        if (tokenContent === 'new') {
-          const nextToken = this.textEditor.tokenAtTextPosition(editorLocation.lineNumber, token.endColumn + 1);
-          if (!nextToken) {
-            throw new Error('nextToken should not be null.');
-          }
-          token = nextToken;
-          tokenContent = line.substring(token.startColumn, token.endColumn);
-          isAsyncCall = tokenContent === 'Worker';
-        }
-        const isCurrentPosition = this.executionLocation && location.lineNumber === this.executionLocation.lineNumber &&
-            location.columnNumber === this.executionLocation.columnNumber;
-        if (location.type === Protocol.Debugger.BreakLocationType.Call && isAsyncCall) {
-          const asyncStepInRange =
-              this.findAsyncStepInRange(this.textEditor, editorLocation.lineNumber, line, token.endColumn);
-          if (asyncStepInRange) {
-            highlightRange = new TextUtils.TextRange.TextRange(
-                editorLocation.lineNumber, asyncStepInRange.from, editorLocation.lineNumber, asyncStepInRange.to - 1);
-            decoration = this.textEditor.highlightRange(highlightRange, 'source-frame-async-step-in');
-            this.continueToLocationDecorations.set(
-                decoration, this.asyncStepIn.bind(this, location, Boolean(isCurrentPosition)));
-          }
-        }
-      }
 
-      this.continueToLocationRenderedForTest();
+    const localScope = callFrame.localScope();
+    if (!localScope || !callFrame.functionLocation()) {
+      return null;
     }
-  }
-
-  private continueToLocationRenderedForTest(): void {
-  }
 
-  private findAsyncStepInRange(
-      textEditor: SourceFrame.SourcesTextEditor.SourcesTextEditor, editorLineNumber: number, line: string,
-      column: number): {
-    from: number,
-    to: number,
-  }|null {
-    let token: (TextEditor.CodeMirrorTextEditor.Token|null)|null = null;
-    let tokenText;
-    let from: number = column;
-    let to: number = line.length;
+    const {properties} = await resolveScopeInObject(localScope).getAllProperties(false, false);
+    if (!properties || !properties.length || properties.length > 500) {
+      return null;
+    }
 
-    let position = line.indexOf('(', column);
-    const argumentsStart = position;
-    if (position === -1) {
+    const functionUILocationPromise =
+        Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().rawLocationToUILocation(
+            (callFrame.functionLocation() as SDK.DebuggerModel.Location));
+    const executionUILocationPromise =
+        Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().rawLocationToUILocation(
+            callFrame.location());
+    const [functionUILocation, executionUILocation] =
+        await Promise.all([functionUILocationPromise, executionUILocationPromise]);
+    if (!functionUILocation || !executionUILocation ||
+        functionUILocation.uiSourceCode.url() !== this.uiSourceCode.url() ||
+        executionUILocation.uiSourceCode.url() !== this.uiSourceCode.url()) {
       return null;
     }
-    position++;
 
-    skipWhitespace();
-    if (position >= line.length) {
+    const functionLocation =
+        this.transformer.uiLocationToEditorLocation(functionUILocation.lineNumber, functionUILocation.columnNumber);
+    const executionLocation =
+        this.transformer.uiLocationToEditorLocation(executionUILocation.lineNumber, executionUILocation.columnNumber);
+    if (functionLocation.lineNumber >= executionLocation.lineNumber ||
+        executionLocation.lineNumber - functionLocation.lineNumber > 500 || functionLocation.lineNumber < 0 ||
+        executionLocation.lineNumber >= this.editor.state.doc.lines) {
       return null;
     }
 
-    token = nextToken();
-    if (!token) {
+    const variableMap = new Map<string, SDK.RemoteObject.RemoteObject>(
+        properties.map(p => [p.name, p.value] as [string, SDK.RemoteObject.RemoteObject]));
+
+    const variablesByLine =
+        this.getVariablesByLine(this.editor.state, variableMap, functionLocation, executionLocation);
+    if (!variablesByLine) {
       return null;
     }
-    from = token.startColumn;
 
-    if (token.type === 'js-keyword' && tokenText === 'async') {
-      skipWhitespace();
-      if (position >= line.length) {
-        return {from: from, to: to};
+    const decorations: CodeMirror.Range<CodeMirror.Decoration>[] = [];
+
+    for (const [line, names] of variablesByLine) {
+      const prevLine = variablesByLine.get(line - 1);
+      let newNames = prevLine ? Array.from(names).filter(n => !prevLine.has(n)) : Array.from(names);
+      if (!newNames.length) {
+        continue;
       }
-      token = nextToken();
-      if (!token) {
-        return {from: from, to: to};
+      if (newNames.length > 10) {
+        newNames = newNames.slice(0, 10);
       }
+      const pairs = newNames.map(name => [name, variableMap.get(name)] as [string, SDK.RemoteObject.RemoteObject]);
+      decorations.push(CodeMirror.Decoration.widget({widget: new ValueDecoration(pairs), side: 1})
+                           .range(this.editor.state.doc.line(line + 1).to));
     }
+    return CodeMirror.Decoration.set(decorations, true);
+  }
 
-    if (token.type === 'js-keyword' && tokenText === 'function') {
-      return {from: from, to: to};
-    }
+  getVariablesByLine(
+      editorState: CodeMirror.EditorState, variableMap: Map<string, unknown>,
+      fromLoc: {lineNumber: number, columnNumber: number},
+      toLoc: {lineNumber: number, columnNumber: number}): Map<number, Set<string>>|null {
+    const fromLine = editorState.doc.line(fromLoc.lineNumber + 1);
+    const fromPos = Math.min(fromLine.to, fromLine.from + fromLoc.columnNumber);
+    const toPos = editorState.doc.line(toLoc.lineNumber + 1).from;
 
-    if (token.type === 'js-string') {
-      return {from: argumentsStart, to: to};
+    const tree = CodeMirror.ensureSyntaxTree(editorState, toPos, 100);
+    if (!tree) {
+      return null;
     }
 
-    if (token.type && this.isIdentifier(token.type)) {
-      return {from: from, to: to};
-    }
+    const namesPerLine = new Map<number, Set<string>>();
+    let curLine = fromLine;
+    tree.iterate({
+      from: fromPos,
+      to: toPos,
+      enter(type, from, to): void {
+        const varName = type.name === 'VariableName' && editorState.sliceDoc(from, to);
+        if (varName && variableMap.has(varName)) {
+          if (from > curLine.to) {
+            curLine = editorState.doc.lineAt(from);
+          }
+          let names = namesPerLine.get(curLine.number - 1);
+          if (!names) {
+            names = new Set();
+            namesPerLine.set(curLine.number - 1, names);
+          }
+          names.add(varName);
+        }
+      },
+    });
+    return namesPerLine;
+  }
 
-    if (tokenText !== '(') {
-      return null;
+  private async showContinueToLocations(): Promise<void> {
+    this.popoverHelper.hidePopover();
+    const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
+    if (!executionContext || !this.editor) {
+      return;
     }
-    const closeParen = line.indexOf(')', position);
-    if (closeParen === -1 || line.substring(position, closeParen).indexOf('(') !== -1) {
-      return {from: from, to: to};
+    const callFrame = UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame);
+    if (!callFrame) {
+      return;
     }
-    return {from: from, to: closeParen + 1};
+    const start = callFrame.functionLocation() || callFrame.location();
+    const debuggerModel = callFrame.debuggerModel;
+
+    const {state} = this.editor;
+    const locations = await debuggerModel.getPossibleBreakpoints(start, null, true);
 
-    function nextToken(): TextEditor.CodeMirrorTextEditor.Token|null {
-      token = textEditor.tokenAtTextPosition(editorLineNumber, position);
-      if (token) {
-        position = token.endColumn;
-        to = token.endColumn;
-        tokenText = line.substring(token.startColumn, token.endColumn);
+    this.continueToLocations = [];
+    let previousCallLine = -1;
+    for (const location of locations.reverse()) {
+      const editorLocation = this.transformer.uiLocationToEditorLocation(location.lineNumber, location.columnNumber);
+      if (previousCallLine === editorLocation.lineNumber &&
+              location.type !== Protocol.Debugger.BreakLocationType.Call ||
+          editorLocation.lineNumber >= state.doc.lines) {
+        continue;
+      }
+      const line = state.doc.line(editorLocation.lineNumber + 1);
+      const position = Math.min(line.to, line.from + editorLocation.columnNumber);
+      let syntaxNode = CodeMirror.syntaxTree(state).resolveInner(position, 1);
+      if (syntaxNode.firstChild || syntaxNode.from < line.from ||
+          syntaxNode.to > line.to) {  // Only use leaf nodes within the line
+        continue;
+      }
+      if (syntaxNode.name === '.') {
+        const nextNode = syntaxNode.resolve(syntaxNode.to, 1);
+        if (nextNode.firstChild || nextNode.from < line.from || nextNode.to > line.to) {
+          continue;
+        }
+        syntaxNode = nextNode;
+      }
+      const syntaxType = syntaxNode.name;
+      const validKeyword = syntaxType === 'this' || syntaxType === 'return' || syntaxType === 'new' ||
+          syntaxType === 'break' || syntaxType === 'continue';
+      if (!validKeyword && !this.isIdentifier(syntaxType)) {
+        continue;
       }
 
-      return token;
-    }
+      this.continueToLocations.push(
+          {from: syntaxNode.from, to: syntaxNode.to, async: false, click: () => location.continueToLocation()});
+      if (location.type === Protocol.Debugger.BreakLocationType.Call) {
+        previousCallLine = editorLocation.lineNumber;
+      }
 
-    function skipWhitespace(): void {
-      while (position < line.length) {
-        if (line[position] === ' ') {
-          position++;
-          continue;
+      const identifierName =
+          validKeyword ? '' : line.text.slice(syntaxNode.from - line.from, syntaxNode.to - line.from);
+      let asyncCall: CodeMirror.SyntaxNode|null = null;
+      if (identifierName === 'then' && syntaxNode.parent?.name === 'MemberExpression') {
+        asyncCall = syntaxNode.parent.parent;
+      } else if (
+          identifierName === 'setTimeout' || identifierName === 'setInterval' || identifierName === 'postMessage') {
+        asyncCall = syntaxNode.parent;
+      }
+      if (syntaxType === 'new') {
+        const callee = syntaxNode.parent?.getChild('Expression');
+        if (callee && callee.name === 'VariableName' && state.sliceDoc(callee.from, callee.to) === 'Worker') {
+          asyncCall = syntaxNode.parent;
         }
-        const token = textEditor.tokenAtTextPosition(editorLineNumber, position);
-        if (!token) {
-          throw new Error('expected token to not be null');
+      }
+      if (asyncCall && (asyncCall.name === 'CallExpression' || asyncCall.name === 'NewExpression') &&
+          location.type === Protocol.Debugger.BreakLocationType.Call) {
+        const firstArg = asyncCall.getChild('ArgList')?.firstChild?.nextSibling;
+        let highlightNode;
+        if (firstArg?.name === 'VariableName') {
+          highlightNode = firstArg;
+        } else if (firstArg?.name === 'ArrowFunction' || firstArg?.name === 'FunctionExpression') {
+          highlightNode = firstArg.firstChild;
+          if (highlightNode?.name === 'async') {
+            highlightNode = highlightNode.nextSibling;
+          }
         }
-        if (token.type === 'js-comment') {
-          position = token.endColumn;
-          continue;
+        if (highlightNode) {
+          const isCurrentPosition = this.executionLocation &&
+              location.lineNumber === this.executionLocation.lineNumber &&
+              location.columnNumber === this.executionLocation.columnNumber;
+          this.continueToLocations.push({
+            from: highlightNode.from,
+            to: highlightNode.to,
+            async: true,
+            click: () => this.asyncStepIn(location, Boolean(isCurrentPosition)),
+          });
         }
-        break;
       }
     }
+    const decorations = CodeMirror.Decoration.set(
+        this.continueToLocations.map(loc => {
+          return (loc.async ? asyncContinueToMark : continueToMark).range(loc.from, loc.to);
+        }),
+        true);
+    this.editor.dispatch({effects: continueToMarkers.update.of(decorations)});
+  }
+
+  private clearContinueToLocations(): void {
+    if (this.editor && this.editor.state.field(continueToMarkers.field).size) {
+      this.editor.dispatch({effects: continueToMarkers.update.of(CodeMirror.Decoration.none)});
+    }
   }
 
   private asyncStepIn(location: SDK.DebuggerModel.BreakLocation, isCurrentPosition: boolean): void {
@@ -1164,573 +1071,213 @@ export class DebuggerPlugin extends Plugin {
     }
   }
 
-  private async prepareScopeVariables(
-      callFrame: SDK.DebuggerModel.CallFrame, allProperties: SDK.RemoteObject.GetPropertiesResult): Promise<void> {
-    const properties = allProperties.properties;
-    this.clearValueWidgets();
-    if (!properties || !properties.length || properties.length > 500 || !this.textEditor.isShowing()) {
-      return;
+  private fetchBreakpoints(): {
+    position: number,
+    breakpoint: Bindings.BreakpointManager.Breakpoint,
+  }[] {
+    if (!this.editor) {
+      return [];
     }
+    const {editor} = this;
+    const breakpointLocations = this.breakpointManager.breakpointLocationsForUISourceCode(this.uiSourceCode);
+    return breakpointLocations.map(({uiLocation, breakpoint}) => {
+      const editorLocation =
+          this.transformer.uiLocationToEditorLocation(uiLocation.lineNumber, uiLocation.columnNumber);
+      return {
+        position: editor.toOffset(editorLocation),
+        breakpoint,
+      };
+    });
+  }
 
-    const functionUILocationPromise =
-        Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().rawLocationToUILocation(
-            (callFrame.functionLocation() as SDK.DebuggerModel.Location));
-    const executionUILocationPromise =
-        Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().rawLocationToUILocation(
-            callFrame.location());
-    const [functionUILocation, executionUILocation] =
-        await Promise.all([functionUILocationPromise, executionUILocationPromise]);
-    if (!functionUILocation || !executionUILocation ||
-        functionUILocation.uiSourceCode.url() !== this.uiSourceCode.url() ||
-        executionUILocation.uiSourceCode.url() !== this.uiSourceCode.url()) {
-      return;
-    }
+  private lineBreakpoints(line: CodeMirror.Line): readonly Bindings.BreakpointManager.Breakpoint[] {
+    return this.breakpoints.filter(b => b.position >= line.from && b.position <= line.to).map(b => b.breakpoint);
+  }
 
-    const functionEditorLocation =
-        this.transformer.uiLocationToEditorLocation(functionUILocation.lineNumber, functionUILocation.columnNumber);
-    const executionEditorLocation =
-        this.transformer.uiLocationToEditorLocation(executionUILocation.lineNumber, executionUILocation.columnNumber);
-    const fromLine = functionEditorLocation.lineNumber;
-    const fromColumn = functionEditorLocation.columnNumber;
-    const toLine = executionEditorLocation.lineNumber;
-    if (fromLine >= toLine || toLine - fromLine > 500 || fromLine < 0 || toLine >= this.textEditor.linesCount) {
-      return;
-    }
+  private async computeBreakpointDecoration(state: CodeMirror.EditorState, breakpoints: BreakpointDescription[]):
+      Promise<BreakpointDecoration> {
+    const decorations: CodeMirror.Range<CodeMirror.Decoration>[] = [];
+    const gutterMarkers: CodeMirror.Range<CodeMirror.GutterMarker>[] = [];
+    const breakpointsByLine = new Map<number, Bindings.BreakpointManager.Breakpoint[]>();
+    const inlineMarkersByLine =
+        new Map<number, {breakpoint: Bindings.BreakpointManager.Breakpoint | null, column: number}[]>();
+    const possibleBreakpointRequests: Promise<void>[] = [];
+    const inlineMarkerPositions = new Set<number>();
 
-    const valuesMap = new Map<string, SDK.RemoteObject.RemoteObject|null|undefined>();
-    for (const property of properties) {
-      valuesMap.set(property.name, property.value);
-    }
+    const addInlineMarker =
+        (linePos: number, columnNumber: number, breakpoint: Bindings.BreakpointManager.Breakpoint|null): void => {
+          let inlineMarkers = inlineMarkersByLine.get(linePos);
+          if (!inlineMarkers) {
+            inlineMarkers = [];
+            inlineMarkersByLine.set(linePos, inlineMarkers);
+          }
+          inlineMarkers.push({breakpoint, column: columnNumber});
+        };
 
-    const namesPerLine = new Map<number, Set<string>>();
-    let skipObjectProperty = false;
-    const tokenizer = TextUtils.CodeMirrorUtils.TokenizerFactory.instance().createTokenizer('text/javascript');
-    tokenizer(this.textEditor.line(fromLine).substring(fromColumn), processToken.bind(this, fromLine));
-    for (let i = fromLine + 1; i < toLine; ++i) {
-      tokenizer(this.textEditor.line(i), processToken.bind(this, i));
-    }
-
-    function processToken(
-        this: DebuggerPlugin, editorLineNumber: number, tokenValue: string, tokenType: string|null, _column: number,
-        _newColumn: number): void {
-      if (!skipObjectProperty && tokenType && this.isIdentifier(tokenType) && valuesMap.get(tokenValue)) {
-        let names = namesPerLine.get(editorLineNumber);
-        if (!names) {
-          names = new Set();
-          namesPerLine.set(editorLineNumber, names);
-        }
-        names.add(tokenValue);
+    for (const {position, breakpoint} of breakpoints) {
+      const line = state.doc.lineAt(position);
+      let forThisLine = breakpointsByLine.get(line.from);
+      if (!forThisLine) {
+        forThisLine = [];
+        breakpointsByLine.set(line.from, forThisLine);
+      }
+      if (breakpoint.enabled() && forThisLine.every(b => !b.enabled())) {
+        // Start a request for possible breakpoint positions on this line
+        const start = this.transformer.editorLocationToUILocation(line.number - 1, 0);
+        const end = this.transformer.editorLocationToUILocation(
+            line.number - 1, Math.min(line.length, MAX_POSSIBLE_BREAKPOINT_LINE));
+        const range = new TextUtils.TextRange.TextRange(
+            start.lineNumber, start.columnNumber || 0, end.lineNumber, end.columnNumber || 0);
+        possibleBreakpointRequests.push(this.breakpointManager.possibleBreakpoints(this.uiSourceCode, range)
+                                            .then(locations => addPossibleBreakpoints(line, locations)));
+      }
+      forThisLine.push(breakpoint);
+      if (breakpoint.enabled()) {
+        inlineMarkerPositions.add(position);
+        addInlineMarker(line.from, position - line.from, breakpoint);
       }
-      skipObjectProperty = tokenValue === '.';
     }
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-    // @ts-expect-error
-    this.textEditor.operation(this.renderDecorations.bind(this, valuesMap, namesPerLine, fromLine, toLine));
-  }
 
-  private renderDecorations(
-      valuesMap: Map<string, SDK.RemoteObject.RemoteObject>, namesPerLine: Map<number, Set<string>>, fromLine: number,
-      toLine: number): void {
-    const formatter = new ObjectUI.RemoteObjectPreviewFormatter.RemoteObjectPreviewFormatter();
-    for (let i = fromLine; i < toLine; ++i) {
-      const names = namesPerLine.get(i);
-      const oldWidget = this.valueWidgets.get(i);
-      if (!names) {
-        if (oldWidget) {
-          this.valueWidgets.delete(i);
-          this.textEditor.removeDecoration(oldWidget, i);
-        }
-        continue;
+    for (const [lineStart, lineBreakpoints] of breakpointsByLine) {
+      const main = lineBreakpoints.sort(mostSpecificBreakpoint)[0];
+      let gutterClass = 'cm-breakpoint';
+      if (!main.enabled()) {
+        gutterClass += ' cm-breakpoint-disabled';
       }
-
-      const widget = (document.createElement('div') as DecoratorWidget);
-      widget.classList.add('text-editor-value-decoration');
-      const base = this.textEditor.cursorPositionToCoordinates(i, 0);
-      if (!base) {
-        throw new Error('base is expected to not be null');
+      if (!main.bound()) {
+        gutterClass += ' cm-breakpoint-unbound';
       }
-      const offset = this.textEditor.cursorPositionToCoordinates(i, this.textEditor.line(i).length);
-      if (!offset) {
-        throw new Error('offset is expected to not be null');
+      if (main.condition().includes(LogpointPrefix)) {
+        gutterClass += ' cm-breakpoint-logpoint';
+      } else if (main.condition()) {
+        gutterClass += ' cm-breakpoint-conditional';
       }
-      const codeMirrorLinesLeftPadding = 4;
-      const left = offset.x - base.x + codeMirrorLinesLeftPadding;
-      widget.style.left = left + 'px';
-      widget.nameToToken = new Map();
-
-      let renderedNameCount = 0;
-      for (const name of names) {
-        if (renderedNameCount > 10) {
-          break;
-        }
-        const names = namesPerLine.get(i - 1);
-        if (names && names.has(name)) {
+      gutterMarkers.push((new BreakpointGutterMarker(gutterClass)).range(lineStart));
+    }
+
+    const addPossibleBreakpoints = (line: CodeMirror.Line, locations: Workspace.UISourceCode.UILocation[]): void => {
+      for (const location of locations) {
+        const editorLocation = this.transformer.uiLocationToEditorLocation(location.lineNumber, location.columnNumber);
+        if (editorLocation.lineNumber !== line.number - 1) {
           continue;
-        }  // Only render name once in the given continuous block.
-        if (renderedNameCount) {
-          UI.UIUtils.createTextChild(widget, ', ');
         }
-        const nameValuePair = (widget.createChild('span') as HTMLElement);
-        widget.nameToToken.set(name, nameValuePair);
-        UI.UIUtils.createTextChild(nameValuePair, name + ' = ');
-        const value = valuesMap.get(name);
-        if (!value) {
-          throw new Error('value is expected to be null');
+        const position = Math.min(line.to, line.from + editorLocation.columnNumber);
+        if (!inlineMarkerPositions.has(position)) {
+          addInlineMarker(line.from, editorLocation.columnNumber, null);
         }
-        const propertyCount = value.preview ? value.preview.properties.length : 0;
-        const entryCount = value.preview && value.preview.entries ? value.preview.entries.length : 0;
-        if (value.preview && propertyCount + entryCount < 10) {
-          formatter.appendObjectPreview(nameValuePair, value.preview, false /* isEntry */);
-        } else {
-          const propertyValue = ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.createPropertyValue(
-              value, /* wasThrown */ false, /* showPreview */ false);
-          nameValuePair.appendChild(propertyValue.element);
-        }
-        ++renderedNameCount;
       }
+    };
 
-      let widgetChanged = true;
-      if (oldWidget) {
-        widgetChanged = false;
-        for (const name of widget.nameToToken.keys()) {
-          const oldTextElement = oldWidget.nameToToken.get(name);
-          const newTextElement = widget.nameToToken.get(name);
-          const oldText = oldTextElement ? oldTextElement.textContent : '';
-          const newText = newTextElement ? newTextElement.textContent : '';
-          if (newText !== oldText) {
-            widgetChanged = true;
-            UI.UIUtils.runCSSAnimationOnce(
-                (widget.nameToToken.get(name) as Element), 'source-frame-value-update-highlight');
-          }
-        }
-        if (widgetChanged) {
-          this.valueWidgets.delete(i);
-          this.textEditor.removeDecoration(oldWidget, i);
+    await Promise.all(possibleBreakpointRequests);
+    for (const [linePos, inlineMarkers] of inlineMarkersByLine) {
+      if (inlineMarkers.length > 1) {
+        for (const {column, breakpoint} of inlineMarkers) {
+          const marker = new BreakpointInlineMarker(breakpoint, this);
+          decorations.push(CodeMirror.Decoration.widget({widget: marker, side: -1}).range(linePos + column));
         }
       }
-      if (widgetChanged) {
-        this.valueWidgets.set(i, widget);
-        this.textEditor.addDecoration(widget, i);
-      }
-    }
-  }
-
-  private clearExecutionLine(): void {
-    this.textEditor.operation(() => {
-      if (this.executionLocation) {
-        this.textEditor.clearExecutionLine();
-      }
-      this.executionLocation = null;
-      if (this.clearValueWidgetsTimer) {
-        clearTimeout(this.clearValueWidgetsTimer);
-        this.clearValueWidgetsTimer = null;
-      }
-      this.clearValueWidgetsTimer = window.setTimeout(this.clearValueWidgets.bind(this), 1000);
-      this.clearContinueToLocationsNoRestore();
-    });
-  }
-
-  private clearValueWidgets(): void {
-    if (this.clearValueWidgetsTimer) {
-      clearTimeout(this.clearValueWidgetsTimer);
     }
-    this.clearValueWidgetsTimer = null;
-    this.textEditor.operation(() => {
-      for (const line of this.valueWidgets.keys()) {
-        const valueWidget = this.valueWidgets.get(line);
-        if (valueWidget) {
-          this.textEditor.removeDecoration(valueWidget, line);
-        }
-      }
-      this.valueWidgets.clear();
-    });
-  }
 
-  private clearContinueToLocationsNoRestore(): void {
-    const continueToLocationDecorations = this.continueToLocationDecorations;
-    if (!continueToLocationDecorations) {
-      return;
-    }
-    this.textEditor.operation(() => {
-      for (const decoration of continueToLocationDecorations.keys()) {
-        this.textEditor.removeHighlight(decoration);
-      }
-      this.continueToLocationDecorations = null;
-      this.setAsyncStepInHoveredLine(null, false);
-    });
+    return {content: CodeMirror.Decoration.set(decorations, true), gutter: CodeMirror.RangeSet.of(gutterMarkers, true)};
   }
 
-  private clearContinueToLocations(): void {
-    if (!this.continueToLocationDecorations) {
-      return;
+  // If, after editing, the editor is synced again (either by going
+  // back to the original document or by saving), we replace any
+  // breakpoints the breakpoint manager might have (which point into
+  // the old file) with the breakpoints we have, which had their
+  // positions tracked through the changes.
+  private restoreBreakpointsAfterEditing(): void {
+    const {breakpoints} = this;
+    const editor = this.editor as TextEditor.TextEditor.TextEditor;
+    this.breakpoints = [];
+    for (const {breakpoint, position} of breakpoints) {
+      const condition = breakpoint.condition(), enabled = breakpoint.enabled();
+      breakpoint.remove(false);
+      const editorLocation = editor.toLineColumn(position);
+      const uiLocation =
+          this.transformer.editorLocationToUILocation(editorLocation.lineNumber, editorLocation.columnNumber);
+      this.setBreakpoint(uiLocation.lineNumber, uiLocation.columnNumber, condition, enabled);
     }
-    this.textEditor.operation(() => {
-      this.textEditor.showExecutionLineBackground();
-      this.generateValuesInSource();
-      this.clearContinueToLocationsNoRestore();
-    });
-  }
-
-  private lineBreakpointDecorations(lineNumber: number): BreakpointDecoration[] {
-    return Array.from(this.breakpointDecorations)
-        .filter(decoration => (decoration.handle.resolve() || {}).lineNumber === lineNumber);
   }
 
-  private breakpointDecoration(editorLineNumber: number, editorColumnNumber: number): BreakpointDecoration|null {
-    for (const decoration of this.breakpointDecorations) {
-      const location = decoration.handle.resolve();
-      if (!location) {
-        continue;
-      }
-      if (location.lineNumber === editorLineNumber && location.columnNumber === editorColumnNumber) {
-        return decoration;
+  private async refreshBreakpoints(): Promise<void> {
+    if (this.editor) {
+      this.breakpoints = this.fetchBreakpoints();
+      const forBreakpoints = this.breakpoints;
+      const decorations = await this.computeBreakpointDecoration(this.editor.state, forBreakpoints);
+      if (this.breakpoints === forBreakpoints &&
+          (decorations.gutter.size || this.editor.state.field(breakpointMarkers).gutter.size)) {
+        this.editor.dispatch({effects: setBreakpointDeco.of(decorations)});
       }
     }
-    return null;
   }
 
-  private updateBreakpointDecoration(decoration: BreakpointDecoration): void {
-    if (!this.scheduledBreakpointDecorationUpdates) {
-      this.scheduledBreakpointDecorationUpdates = new Set();
-      queueMicrotask(() => {
-        this.textEditor.operation(update.bind(this));
-      });
-    }
-    this.scheduledBreakpointDecorationUpdates.add(decoration);
-
-    function update(this: DebuggerPlugin): void {
-      if (!this.scheduledBreakpointDecorationUpdates) {
-        return;
-      }
-      const editorLineNumbers = new Set<number>();
-      for (const decoration of this.scheduledBreakpointDecorationUpdates) {
-        const location = decoration.handle.resolve();
-        if (!location) {
-          continue;
-        }
-        editorLineNumbers.add(location.lineNumber);
-      }
-      this.scheduledBreakpointDecorationUpdates = null;
-      let waitingForInlineDecorations = false;
-      for (const lineNumber of editorLineNumbers) {
-        const decorations = this.lineBreakpointDecorations(lineNumber);
-        updateGutter.call(this, lineNumber, decorations);
-        if (this.possibleBreakpointsRequested.has(lineNumber)) {
-          waitingForInlineDecorations = true;
-          continue;
-        }
-        updateInlineDecorations.call(this, lineNumber, decorations);
-      }
-      if (!waitingForInlineDecorations) {
-        this.breakpointDecorationsUpdatedForTest();
-      }
-    }
-
-    function updateGutter(this: DebuggerPlugin, editorLineNumber: number, decorations: BreakpointDecoration[]): void {
-      this.textEditor.toggleLineClass(editorLineNumber, 'cm-breakpoint', false);
-      this.textEditor.toggleLineClass(editorLineNumber, 'cm-breakpoint-disabled', false);
-      this.textEditor.toggleLineClass(editorLineNumber, 'cm-breakpoint-unbound', false);
-      this.textEditor.toggleLineClass(editorLineNumber, 'cm-breakpoint-conditional', false);
-      this.textEditor.toggleLineClass(editorLineNumber, 'cm-breakpoint-logpoint', false);
-
-      if (decorations.length) {
-        decorations.sort(BreakpointDecoration.mostSpecificFirst);
-        const isDisabled = !decorations[0].enabled || this.muted;
-        const isLogpoint = decorations[0].condition.includes(LogpointPrefix);
-        const isUnbound = !decorations[0].bound;
-        const isConditionalBreakpoint = Boolean(decorations[0].condition) && !isLogpoint;
-
-        this.textEditor.toggleLineClass(editorLineNumber, 'cm-breakpoint', true);
-        this.textEditor.toggleLineClass(editorLineNumber, 'cm-breakpoint-disabled', isDisabled);
-        this.textEditor.toggleLineClass(editorLineNumber, 'cm-breakpoint-unbound', isUnbound && !isDisabled);
-        this.textEditor.toggleLineClass(editorLineNumber, 'cm-breakpoint-logpoint', isLogpoint);
-        this.textEditor.toggleLineClass(editorLineNumber, 'cm-breakpoint-conditional', isConditionalBreakpoint);
-      }
+  private breakpointChange(event: Common.EventTarget.EventTargetEvent<Bindings.BreakpointManager.BreakpointLocation>):
+      void {
+    const {uiLocation} = event.data;
+    if (uiLocation.uiSourceCode !== this.uiSourceCode || this.muted) {
+      return;
     }
-
-    function updateInlineDecorations(
-        this: DebuggerPlugin, editorLineNumber: number, decorations: BreakpointDecoration[]): void {
-      const actualBookmarks = new Set<TextEditor.CodeMirrorTextEditor.TextEditorBookMark>(
-          // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-          // @ts-expect-error
-          decorations.map(decoration => decoration.bookmark).filter(bookmark => Boolean(bookmark)));
-      const lineEnd = this.textEditor.line(editorLineNumber).length;
-      const bookmarks = this.textEditor.bookmarks(
-          new TextUtils.TextRange.TextRange(editorLineNumber, 0, editorLineNumber, lineEnd),
-          BreakpointDecoration.bookmarkSymbol);
-      for (const bookmark of bookmarks) {
-        if (!actualBookmarks.has(bookmark)) {
-          bookmark.clear();
-        }
-      }
-      if (!decorations.length) {
+    for (const scriptFile of this.scriptFileForDebuggerModel.values()) {
+      if (scriptFile.isDivergingFromVM() || scriptFile.isMergingToVM()) {
         return;
       }
-      if (decorations.length > 1) {
-        for (const decoration of decorations) {
-          decoration.update();
-          if (!this.muted) {
-            decoration.show();
-          } else {
-            decoration.hide();
-          }
-        }
-      } else {
-        decorations[0].update();
-        decorations[0].hide();
-      }
     }
+    // These tend to arrive in bursts, so debounce them
+    window.clearTimeout(this.refreshBreakpointsTimeout);
+    this.refreshBreakpointsTimeout = window.setTimeout(() => this.refreshBreakpoints(), 50);
   }
 
-  private breakpointDecorationsUpdatedForTest(): void {
-  }
-
-  private async inlineBreakpointClick(decoration: BreakpointDecoration, event: MouseEvent): Promise<void> {
+  onInlineBreakpointMarkerClick(event: MouseEvent, breakpoint: Bindings.BreakpointManager.Breakpoint|null): void {
     event.consume(true);
-    if (decoration.breakpoint) {
+    if (breakpoint) {
       if (event.shiftKey) {
-        decoration.breakpoint.setEnabled(!decoration.breakpoint.enabled());
+        breakpoint.setEnabled(!breakpoint.enabled());
       } else {
-        decoration.breakpoint.remove(false);
-      }
-    } else {
-      const editorLocation = decoration.handle.resolve();
-      if (!editorLocation) {
-        return;
+        breakpoint.remove(false);
       }
-      const location =
-          this.transformer.editorLocationToUILocation(editorLocation.lineNumber, editorLocation.columnNumber);
-      await this.setBreakpoint(location.lineNumber, location.columnNumber, decoration.condition, true);
+    } else if (this.editor) {
+      const editorLocation = this.editor.editor.posAtDOM(event.target as unknown as HTMLElement);
+      const line = this.editor.state.doc.lineAt(editorLocation);
+      const uiLocation = this.transformer.editorLocationToUILocation(line.number - 1, editorLocation - line.from);
+      this.setBreakpoint(uiLocation.lineNumber, uiLocation.columnNumber, '', true);
     }
   }
 
-  private inlineBreakpointContextMenu(decoration: BreakpointDecoration, event: Event): void {
+  onInlineBreakpointMarkerContextMenu(event: MouseEvent, breakpoint: Bindings.BreakpointManager.Breakpoint|null): void {
     event.consume(true);
-    const editorLocation = decoration.handle.resolve();
-    if (!editorLocation) {
-      return;
-    }
-    if (this.textEditor.hasLineClass(editorLocation.lineNumber, 'cm-non-breakable-line')) {
-      return;
-    }
-    if (!Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().supportsConditionalBreakpoints(
+    // If there's events coming from the editor, there must be an editor.
+    const editor = this.editor as TextEditor.TextEditor.TextEditor;
+    const position = editor.editor.posAtDOM(event.target as unknown as HTMLElement);
+    const line = editor.state.doc.lineAt(position);
+    if (!SourceFrame.SourceFrame.isBreakableLine(editor.state, line) ||
+        // Editing breakpoints only make sense for conditional breakpoints
+        // and logpoints.
+        !Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().supportsConditionalBreakpoints(
             this.uiSourceCode)) {
-      // Editing breakpoints only make sense for conditional breakpoints
-      // and logpoints.
       return;
     }
-    const location =
-        this.transformer.editorLocationToUILocation(editorLocation.lineNumber, editorLocation.columnNumber);
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
-    if (decoration.breakpoint) {
+    if (breakpoint) {
       contextMenu.debugSection().appendItem(
           i18nString(UIStrings.editBreakpoint),
-          this.editBreakpointCondition.bind(
-              this, editorLocation.lineNumber, decoration.breakpoint, null, false /* preferLogpoint */));
+          this.editBreakpointCondition.bind(this, line, breakpoint, null, false /* preferLogpoint */));
     } else {
+      const uiLocation = this.transformer.editorLocationToUILocation(line.number - 1, position - line.from);
       contextMenu.debugSection().appendItem(
           i18nString(UIStrings.addConditionalBreakpoint),
-          this.editBreakpointCondition.bind(
-              this, editorLocation.lineNumber, null, editorLocation, false /* preferLogpoint */));
+          this.editBreakpointCondition.bind(this, line, null, uiLocation, false /* preferLogpoint */));
       contextMenu.debugSection().appendItem(
           i18nString(UIStrings.addLogpoint),
-          this.editBreakpointCondition.bind(
-              this, editorLocation.lineNumber, null, editorLocation, true /* preferLogpoint */));
+          this.editBreakpointCondition.bind(this, line, null, uiLocation, true /* preferLogpoint */));
+
       contextMenu.debugSection().appendItem(
           i18nString(UIStrings.neverPauseHere),
-          this.setBreakpoint.bind(this, location.lineNumber, location.columnNumber, 'false', true));
+          this.setBreakpoint.bind(this, uiLocation.lineNumber, uiLocation.columnNumber, 'false', true));
     }
     contextMenu.show();
   }
 
-  private shouldIgnoreExternalBreakpointEvents(
-      event: Common.EventTarget.EventTargetEvent<Bindings.BreakpointManager.BreakpointLocation>): boolean {
-    const {uiLocation} = event.data;
-    if (uiLocation.uiSourceCode !== this.uiSourceCode) {
-      return true;
-    }
-    if (this.muted) {
-      return true;
-    }
-    for (const scriptFile of this.scriptFileForDebuggerModel.values()) {
-      if (scriptFile.isDivergingFromVM() || scriptFile.isMergingToVM()) {
-        return true;
-      }
-    }
-    return false;
-  }
-
-  private breakpointAdded(event: Common.EventTarget.EventTargetEvent<Bindings.BreakpointManager.BreakpointLocation>):
-      void {
-    if (this.shouldIgnoreExternalBreakpointEvents(event)) {
-      return;
-    }
-    const {breakpoint, uiLocation} = event.data;
-    this.addBreakpoint(uiLocation, breakpoint);
-  }
-
-  private addBreakpoint(
-      uiLocation: Workspace.UISourceCode.UILocation, breakpoint: Bindings.BreakpointManager.Breakpoint): void {
-    const editorLocation = this.transformer.uiLocationToEditorLocation(uiLocation.lineNumber, uiLocation.columnNumber);
-    const lineDecorations = this.lineBreakpointDecorations(uiLocation.lineNumber);
-    let decoration = this.breakpointDecoration(editorLocation.lineNumber, editorLocation.columnNumber);
-    if (decoration) {
-      decoration.breakpoint = breakpoint;
-      decoration.condition = breakpoint.condition();
-      decoration.enabled = breakpoint.enabled();
-    } else {
-      const handle = this.textEditor.textEditorPositionHandle(editorLocation.lineNumber, editorLocation.columnNumber);
-      decoration = new BreakpointDecoration(
-          this.textEditor, handle, breakpoint.condition(), breakpoint.enabled(),
-          breakpoint.bound() || !breakpoint.hasBoundScript(), breakpoint);
-      decoration.element.addEventListener('click', this.inlineBreakpointClick.bind(this, decoration), true);
-      decoration.element.addEventListener('contextmenu', this.inlineBreakpointContextMenu.bind(this, decoration), true);
-      this.breakpointDecorations.add(decoration);
-    }
-
-    let uiLocationsForBreakpoint = this.decorationByBreakpoint.get(breakpoint);
-    if (!uiLocationsForBreakpoint) {
-      uiLocationsForBreakpoint = new Map();
-      this.decorationByBreakpoint.set(breakpoint, uiLocationsForBreakpoint);
-    }
-    uiLocationsForBreakpoint.set(uiLocation.id(), decoration);
-
-    this.updateBreakpointDecoration(decoration);
-    if (breakpoint.enabled() && !lineDecorations.length) {
-      this.possibleBreakpointsRequested.add(editorLocation.lineNumber);
-      const start = this.transformer.editorLocationToUILocation(editorLocation.lineNumber, 0);
-      const end = this.transformer.editorLocationToUILocation(editorLocation.lineNumber + 1, 0);
-      this.breakpointManager
-          .possibleBreakpoints(
-              this.uiSourceCode,
-              new TextUtils.TextRange.TextRange(
-                  start.lineNumber, start.columnNumber || 0, end.lineNumber, end.columnNumber || 0))
-          .then(addInlineDecorations.bind(this, editorLocation.lineNumber));
-    }
-
-    function addInlineDecorations(
-        this: DebuggerPlugin, editorLineNumber: number, possibleLocations: Workspace.UISourceCode.UILocation[]): void {
-      this.possibleBreakpointsRequested.delete(editorLineNumber);
-      const decorations = this.lineBreakpointDecorations(editorLineNumber);
-      for (const decoration of decorations) {
-        this.updateBreakpointDecoration(decoration);
-      }
-      if (!decorations.some(decoration => Boolean(decoration.breakpoint))) {
-        return;
-      }
-      const columns = new Set<number>();
-      for (const decoration of decorations) {
-        const editorLocation = decoration.handle.resolve();
-        if (!editorLocation) {
-          continue;
-        }
-        columns.add(editorLocation.columnNumber);
-      }
-      // Only consider the first 100 inline breakpoints, as DevTools might appear to hang while CodeMirror is updating
-      // the inline breakpoints. See crbug.com/1060105.
-      for (const location of possibleLocations.slice(0, 100)) {
-        const editorLocation = this.transformer.uiLocationToEditorLocation(location.lineNumber, location.columnNumber);
-        if (editorLocation.lineNumber !== editorLineNumber) {
-          continue;
-        }
-        if (columns.has(editorLocation.columnNumber)) {
-          continue;
-        }
-        const handle = this.textEditor.textEditorPositionHandle(editorLocation.lineNumber, editorLocation.columnNumber);
-        const decoration = new BreakpointDecoration(
-            this.textEditor, handle, '', /** enabled */ false, /** bound */ false, /** breakpoint */ null);
-        decoration.element.addEventListener('click', this.inlineBreakpointClick.bind(this, decoration), true);
-        decoration.element.addEventListener(
-            'contextmenu', this.inlineBreakpointContextMenu.bind(this, decoration), true);
-        this.breakpointDecorations.add(decoration);
-        this.updateBreakpointDecoration(decoration);
-      }
-    }
-  }
-
-  private breakpointRemoved(event: Common.EventTarget.EventTargetEvent<Bindings.BreakpointManager.BreakpointLocation>):
-      void {
-    if (this.shouldIgnoreExternalBreakpointEvents(event)) {
-      return;
-    }
-    const {breakpoint, uiLocation} = event.data;
-
-    const uiLocationsForBreakpoint = this.decorationByBreakpoint.get(breakpoint);
-    if (!uiLocationsForBreakpoint) {
-      return;
-    }
-
-    const decoration = uiLocationsForBreakpoint.get(uiLocation.id());
-    uiLocationsForBreakpoint.delete(uiLocation.id());
-
-    if (uiLocationsForBreakpoint.size === 0) {
-      this.decorationByBreakpoint.delete(breakpoint);
-    }
-
-    if (!decoration) {
-      return;
-    }
-
-    const editorLocation = this.transformer.uiLocationToEditorLocation(uiLocation.lineNumber, uiLocation.columnNumber);
-    decoration.breakpoint = null;
-    decoration.enabled = false;
-
-    const lineDecorations = this.lineBreakpointDecorations(editorLocation.lineNumber);
-    if (!lineDecorations.some(decoration => Boolean(decoration.breakpoint))) {
-      for (const lineDecoration of lineDecorations) {
-        this.breakpointDecorations.delete(lineDecoration);
-        this.updateBreakpointDecoration(lineDecoration);
-      }
-    } else {
-      this.updateBreakpointDecoration(decoration);
-    }
-  }
-
-  private initializeBreakpoints(): void {
-    const breakpointLocations = this.breakpointManager.breakpointLocationsForUISourceCode(this.uiSourceCode);
-    for (const breakpointLocation of breakpointLocations) {
-      this.addBreakpoint(breakpointLocation.uiLocation, breakpointLocation.breakpoint);
-    }
-  }
-
-  private updateLinesWithoutMappingHighlight(): void {
-    if (Bindings.CompilerScriptMapping.CompilerScriptMapping.uiSourceCodeOrigin(this.uiSourceCode).length) {
-      const linesCount = this.textEditor.linesCount;
-      for (let i = 0; i < linesCount; ++i) {
-        const lineHasMapping =
-            Bindings.CompilerScriptMapping.CompilerScriptMapping.uiLineHasMapping(this.uiSourceCode, i);
-        if (!lineHasMapping) {
-          this.hasLineWithoutMapping = true;
-        }
-        if (this.hasLineWithoutMapping) {
-          this.textEditor.toggleLineClass(i, 'cm-non-breakable-line', !lineHasMapping);
-        }
-      }
-      return;
-    }
-
-    const {pluginManager} = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
-    if (pluginManager) {
-      pluginManager.getMappedLines(this.uiSourceCode)
-          .then(mappedLines => {
-            if (mappedLines === undefined) {
-              return;
-            }
-            const linesCount = this.textEditor.linesCount;
-            for (let i = 0; i < linesCount; ++i) {
-              const lineHasMapping = mappedLines.has(i);
-              if (!lineHasMapping) {
-                this.hasLineWithoutMapping = true;
-              }
-              if (this.hasLineWithoutMapping) {
-                this.textEditor.toggleLineClass(i, 'cm-non-breakable-line', !lineHasMapping);
-              }
-            }
-          })
-          .catch(console.error);
-    }
-  }
-
   private updateScriptFiles(): void {
     for (const debuggerModel of SDK.TargetManager.TargetManager.instance().models(SDK.DebuggerModel.DebuggerModel)) {
       const scriptFile = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().scriptFile(
@@ -1751,8 +1298,8 @@ export class DebuggerPlugin extends Plugin {
           Bindings.ResourceScriptMapping.ResourceScriptFile.Events.DidMergeToVM, this.didMergeToVM, this);
       oldScriptFile.removeEventListener(
           Bindings.ResourceScriptMapping.ResourceScriptFile.Events.DidDivergeFromVM, this.didDivergeFromVM, this);
-      if (this.muted && !this.uiSourceCode.isDirty()) {
-        this.restoreBreakpointsIfConsistentScripts();
+      if (this.muted && !this.uiSourceCode.isDirty() && this.consistentScripts) {
+        this.setMuted(false);
       }
     }
     if (!newScriptFile) {
@@ -1784,9 +1331,10 @@ export class DebuggerPlugin extends Plugin {
       PH1: String(UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutTitleForAction('quickOpen.show')),
     }));
     this.sourceMapInfobar.setCloseCallback(() => {
+      this.removeInfobar(this.sourceMapInfobar);
       this.sourceMapInfobar = null;
     });
-    this.textEditor.attachInfobar(this.sourceMapInfobar);
+    this.attachInfobar(this.sourceMapInfobar);
   }
 
   private async detectMinified(): Promise<void> {
@@ -1817,12 +1365,13 @@ export class DebuggerPlugin extends Plugin {
     }
 
     this.prettyPrintInfobar.setCloseCallback(() => {
+      this.removeInfobar(this.prettyPrintInfobar);
       this.prettyPrintInfobar = null;
     });
     const toolbar = new UI.Toolbar.Toolbar('');
     const button = new UI.Toolbar.ToolbarButton('', 'largeicon-pretty-print');
     toolbar.appendToolbarItem(button);
-    toolbar.element.style.display = 'inline-block';
+    toolbar.element.style.display = 'inline';
     toolbar.element.style.verticalAlign = 'middle';
     toolbar.element.style.marginBottom = '3px';
     toolbar.element.style.pointerEvents = 'none';
@@ -1831,38 +1380,27 @@ export class DebuggerPlugin extends Plugin {
     element.appendChild(
         i18n.i18n.getFormatLocalizedString(str_, UIStrings.prettyprintingWillFormatThisFile, {PH1: toolbar.element}));
     UI.ARIAUtils.markAsAlert(element);
-    this.textEditor.attachInfobar(this.prettyPrintInfobar);
+    this.attachInfobar(this.prettyPrintInfobar);
   }
 
-  private async handleGutterClick(
-      event: Common.EventTarget.EventTargetEvent<SourceFrame.SourcesTextEditor.GutterClickEventData>): Promise<void> {
-    if (this.muted) {
-      return;
-    }
-
-    const {gutterType, lineNumber: editorLineNumber, event: eventObject} = event.data;
-    if (gutterType !== SourceFrame.SourcesTextEditor.lineNumbersGutterType) {
-      return;
+  private handleGutterClick(line: CodeMirror.Line, event: MouseEvent): boolean {
+    if (this.muted || event.button !== 0 || event.altKey || event.ctrlKey || event.metaKey) {
+      return false;
     }
+    this.toggleBreakpoint(line, event.shiftKey);
+    return true;
+  }
 
-    if (eventObject.button !== 0 || eventObject.altKey || eventObject.ctrlKey || eventObject.metaKey) {
+  private async toggleBreakpoint(line: CodeMirror.Line, onlyDisable: boolean): Promise<void> {
+    if (this.muted) {
       return;
     }
-
-    await this.toggleBreakpoint(editorLineNumber, eventObject.shiftKey);
-    eventObject.consume(true);
-  }
-
-  private async toggleBreakpoint(editorLineNumber: number, onlyDisable: boolean): Promise<void> {
-    const decorations = this.lineBreakpointDecorations(editorLineNumber);
-    if (!decorations.length) {
-      await this.createNewBreakpoint(editorLineNumber, '', true);
+    const breakpoints = this.lineBreakpoints(line);
+    if (!breakpoints.length) {
+      await this.createNewBreakpoint(line, '', true);
       return;
     }
-    const hasDisabled = this.textEditor.hasLineClass(editorLineNumber, 'cm-breakpoint-disabled');
-    const breakpoints =
-        (decorations.map(decoration => decoration.breakpoint).filter(breakpoint => Boolean(breakpoint)) as
-         Bindings.BreakpointManager.Breakpoint[]);
+    const hasDisabled = breakpoints.some(b => !b.enabled());
     for (const breakpoint of breakpoints) {
       if (onlyDisable) {
         breakpoint.setEnabled(hasDisabled);
@@ -1872,12 +1410,12 @@ export class DebuggerPlugin extends Plugin {
     }
   }
 
-  private async createNewBreakpoint(editorLineNumber: number, condition: string, enabled: boolean): Promise<void> {
-    if (this.textEditor.hasLineClass(editorLineNumber, 'cm-non-breakable-line')) {
+  private async createNewBreakpoint(line: CodeMirror.Line, condition: string, enabled: boolean): Promise<void> {
+    if (!this.editor || !SourceFrame.SourceFrame.isBreakableLine(this.editor.state, line)) {
       return;
     }
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.ScriptsBreakpointSet);
-    const origin = this.transformer.editorLocationToUILocation(editorLineNumber);
+    const origin = this.transformer.editorLocationToUILocation(line.number - 1);
     await this.setBreakpoint(origin.lineNumber, origin.columnNumber, condition, enabled);
   }
 
@@ -1896,25 +1434,48 @@ export class DebuggerPlugin extends Plugin {
     this.liveLocationPool.disposeAll();
     const callFrame = UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame);
     if (!callFrame) {
-      this.clearExecutionLine();
-      return;
+      this.setExecutionLocation(null);
+    } else {
+      await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createCallFrameLiveLocation(
+          callFrame.location(), async(liveLocation: Bindings.LiveLocation.LiveLocation): Promise<void> => {
+            const uiLocation = await liveLocation.uiLocation();
+            if (uiLocation && uiLocation.uiSourceCode.url() === this.uiSourceCode.url()) {
+              this.setExecutionLocation(uiLocation);
+            } else {
+              this.setExecutionLocation(null);
+            }
+          }, this.liveLocationPool);
     }
-    await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createCallFrameLiveLocation(
-        callFrame.location(), this.executionLineChanged.bind(this), this.liveLocationPool);
   }
 
-  dispose(): void {
-    for (const decoration of this.breakpointDecorations) {
-      decoration.dispose();
+  private setExecutionLocation(executionLocation: Workspace.UISourceCode.UILocation|null): void {
+    if (this.executionLocation === executionLocation || !this.editor) {
+      return;
     }
-    this.breakpointDecorations.clear();
-    if (this.scheduledBreakpointDecorationUpdates) {
-      for (const decoration of this.scheduledBreakpointDecorationUpdates) {
-        decoration.dispose();
+    this.executionLocation = executionLocation;
+
+    if (executionLocation) {
+      const editorLocation =
+          this.transformer.uiLocationToEditorLocation(executionLocation.lineNumber, executionLocation.columnNumber);
+      const decorations =
+          this.computeExecutionDecorations(this.editor.state, editorLocation.lineNumber, editorLocation.columnNumber);
+      this.editor.dispatch({effects: executionLine.update.of(decorations)});
+      this.updateValueDecorations();
+      if (this.controlDown) {
+        this.showContinueToLocations();
       }
-      this.scheduledBreakpointDecorationUpdates.clear();
+    } else {
+      this.editor.dispatch({
+        effects: [
+          executionLine.update.of(CodeMirror.Decoration.none),
+          continueToMarkers.update.of(CodeMirror.Decoration.none),
+          valueDecorations.update.of(CodeMirror.Decoration.none),
+        ],
+      });
     }
+  }
 
+  dispose(): void {
     this.hideIgnoreListInfobar();
     if (this.sourceMapInfobar) {
       this.sourceMapInfobar.dispose();
@@ -1922,7 +1483,6 @@ export class DebuggerPlugin extends Plugin {
     if (this.prettyPrintInfobar) {
       this.prettyPrintInfobar.dispose();
     }
-    this.scriptsPanel.element.removeEventListener('scroll', this.boundPopoverHelperHide, true);
     for (const script of this.scriptFileForDebuggerModel.values()) {
       script.removeEventListener(
           Bindings.ResourceScriptMapping.ResourceScriptFile.Events.DidMergeToVM, this.didMergeToVM, this);
@@ -1931,21 +1491,13 @@ export class DebuggerPlugin extends Plugin {
     }
     this.scriptFileForDebuggerModel.clear();
 
-    this.textEditor.element.removeEventListener('keydown', this.boundKeyDown, true);
-    this.textEditor.element.removeEventListener('keyup', this.boundKeyUp, true);
-    this.textEditor.element.removeEventListener('mousemove', this.boundMouseMove, false);
-    this.textEditor.element.removeEventListener('mousedown', this.boundMouseDown, true);
-    this.textEditor.element.removeEventListener('focusout', this.boundBlur, false);
-    this.textEditor.element.removeEventListener('wheel', this.boundWheel, true);
-
-    this.textEditor.removeEventListener(SourceFrame.SourcesTextEditor.Events.GutterClick, this.boundGutterClick, this);
     this.popoverHelper.hidePopover();
     this.popoverHelper.dispose();
 
     this.breakpointManager.removeEventListener(
-        Bindings.BreakpointManager.Events.BreakpointAdded, this.breakpointAdded, this);
+        Bindings.BreakpointManager.Events.BreakpointAdded, this.breakpointChange, this);
     this.breakpointManager.removeEventListener(
-        Bindings.BreakpointManager.Events.BreakpointRemoved, this.breakpointRemoved, this);
+        Bindings.BreakpointManager.Events.BreakpointRemoved, this.breakpointChange, this);
     this.uiSourceCode.removeEventListener(
         Workspace.UISourceCode.Events.WorkingCopyChanged, this.workingCopyChanged, this);
     this.uiSourceCode.removeEventListener(
@@ -1959,98 +1511,469 @@ export class DebuggerPlugin extends Plugin {
         .removeChangeListener(this.showIgnoreListInfobarIfNeeded, this);
     super.dispose();
 
-    this.clearExecutionLine();
     UI.Context.Context.instance().removeFlavorChangeListener(SDK.DebuggerModel.CallFrame, this.callFrameChanged, this);
     this.liveLocationPool.disposeAll();
   }
 }
 
-export class BreakpointDecoration {
-  private textEditor: SourceFrame.SourcesTextEditor.SourcesTextEditor;
-  handle: TextEditor.CodeMirrorTextEditor.TextEditorPositionHandle;
-  condition: string;
-  enabled: boolean;
-  bound: boolean;
-  breakpoint: Bindings.BreakpointManager.Breakpoint|null;
-  element: HTMLSpanElement;
-  bookmark: TextEditor.CodeMirrorTextEditor.TextEditorBookMark|null;
-  constructor(
-      textEditor: SourceFrame.SourcesTextEditor.SourcesTextEditor,
-      handle: TextEditor.CodeMirrorTextEditor.TextEditorPositionHandle, condition: string, enabled: boolean,
-      bound: boolean, breakpoint: Bindings.BreakpointManager.Breakpoint|null) {
-    this.textEditor = textEditor;
-    this.handle = handle;
-    this.condition = condition;
-    this.enabled = enabled;
-    this.bound = bound;
-    this.breakpoint = breakpoint;
-    this.element = document.createElement('span');
-    this.element.classList.toggle('cm-inline-breakpoint', true);
-
-    this.bookmark = null;
+// Infobar panel state
+
+const addInfobar = CodeMirror.StateEffect.define<UI.Infobar.Infobar>();
+const removeInfobar = CodeMirror.StateEffect.define<UI.Infobar.Infobar>();
+
+const infobarState = CodeMirror.StateField.define<UI.Infobar.Infobar[]>({
+  create(): UI.Infobar.Infobar[] {
+    return [];
+  },
+  update(current, tr): UI.Infobar.Infobar[] {
+    for (const effect of tr.effects) {
+      if (effect.is(addInfobar)) {
+        current = current.concat(effect.value);
+      } else if (effect.is(removeInfobar)) {
+        current = current.filter(b => b !== effect.value);
+      }
+    }
+    return current;
+  },
+  provide: (field): CodeMirror.Extension => CodeMirror.showPanel.computeN(
+      [field],
+      (state): (() => CodeMirror.Panel)[] =>
+          state.field(field).map((bar): (() => CodeMirror.Panel) => (): CodeMirror.Panel => ({dom: bar.element}))),
+});
+
+// Enumerate non-breakable lines (lines without a known corresponding
+// position in the UISource).
+async function computeNonBreakableLines(
+    state: CodeMirror.EditorState, sourceCode: Workspace.UISourceCode.UISourceCode): Promise<readonly number[]> {
+  const linePositions = [];
+  if (Bindings.CompilerScriptMapping.CompilerScriptMapping.uiSourceCodeOrigin(sourceCode).length) {
+    for (let i = 0; i < state.doc.lines; i++) {
+      const lineHasMapping = Bindings.CompilerScriptMapping.CompilerScriptMapping.uiLineHasMapping(sourceCode, i);
+      if (!lineHasMapping) {
+        linePositions.push(state.doc.line(i + 1).from);
+      }
+    }
+  } else {
+    const {pluginManager} = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
+    if (!pluginManager) {
+      return [];
+    }
+    const mappedLines = await pluginManager.getMappedLines(sourceCode);
+    if (!mappedLines) {
+      return [];
+    }
+    for (let i = 0; i < state.doc.lines; i++) {
+      if (!mappedLines.has(i)) {
+        linePositions.push(state.doc.line(i + 1).from);
+      }
+    }
   }
+  return linePositions;
+}
 
-  static mostSpecificFirst(decoration1: BreakpointDecoration, decoration2: BreakpointDecoration): number {
-    if (decoration1.enabled !== decoration2.enabled) {
-      return decoration1.enabled ? -1 : 1;
+// Breakpoint markers
+
+type BreakpointDecoration = {
+  content: CodeMirror.DecorationSet,
+  gutter: CodeMirror.RangeSet<CodeMirror.GutterMarker>,
+};
+
+const setBreakpointDeco = CodeMirror.StateEffect.define<BreakpointDecoration>();
+const muteBreakpoints = CodeMirror.StateEffect.define<null>();
+
+function muteGutterMarkers(markers: CodeMirror.RangeSet<CodeMirror.GutterMarker>, doc: CodeMirror.Text):
+    CodeMirror.RangeSet<CodeMirror.GutterMarker> {
+  const newMarkers: CodeMirror.Range<CodeMirror.GutterMarker>[] = [];
+  markers.between(0, doc.length, (from, _to, marker) => {
+    let className: string = marker.elementClass;
+    if (!/cm-breakpoint-disabled/.test(className)) {
+      className += ' cm-breakpoint-disabled';
     }
-    if (decoration1.bound !== decoration2.bound) {
-      return decoration1.bound ? -1 : 1;
+    newMarkers.push(new BreakpointGutterMarker(className).range(from));
+  });
+  return CodeMirror.RangeSet.of(newMarkers, false);
+}
+
+// Holds the inline breakpoint marker decorations and the gutter
+// markers for lines with breakpoints. When the set of active markers
+// changes in non-muted state (the editor content matches the original
+// file), it is recomputed and updated with `setBreakpointDeco`. When
+// the editor content goes out of sync with the original file, the
+// `muteBreakpoints` effect hides the inline markers and makes sure
+// all gutter markers are displayed as disabled.
+const breakpointMarkers = CodeMirror.StateField.define<BreakpointDecoration>({
+  create(): BreakpointDecoration {
+    return {content: CodeMirror.RangeSet.empty, gutter: CodeMirror.RangeSet.empty};
+  },
+  update(deco, tr): BreakpointDecoration {
+    if (!tr.changes.empty) {
+      deco = {content: deco.content.map(tr.changes), gutter: deco.gutter.map(tr.changes)};
+    }
+    for (const effect of tr.effects) {
+      if (effect.is(setBreakpointDeco)) {
+        deco = effect.value;
+      } else if (effect.is(muteBreakpoints)) {
+        deco = {content: CodeMirror.RangeSet.empty, gutter: muteGutterMarkers(deco.gutter, tr.state.doc)};
+      }
+    }
+    return deco;
+  },
+  provide: field =>
+      [CodeMirror.EditorView.decorations.from(field, deco => deco.content),
+       CodeMirror.lineNumberMarkers.from(field, deco => deco.gutter)],
+});
+
+class BreakpointInlineMarker extends CodeMirror.WidgetType {
+  class: string;
+
+  constructor(readonly breakpoint: Bindings.BreakpointManager.Breakpoint|null, readonly parent: DebuggerPlugin) {
+    super();
+    // Eagerly compute DOM class so that the widget is recreated when it changes.
+    this.class = 'cm-inlineBreakpoint';
+    const condition = breakpoint ? breakpoint.condition() : '';
+    if (condition.includes(LogpointPrefix)) {
+      this.class += ' cm-inlineBreakpoint-logpoint';
+    } else if (condition) {
+      this.class += ' cm-inlineBreakpoint-conditional';
     }
-    if (Boolean(decoration1.condition) !== Boolean(decoration2.condition)) {
-      return Boolean(decoration1.condition) ? -1 : 1;
+    if (!breakpoint?.enabled()) {
+      this.class += ' cm-inlineBreakpoint-disabled';
     }
-    return 0;
   }
 
-  update(): void {
-    const isLogpoint = Boolean(this.condition) && this.condition.includes(LogpointPrefix);
-    const isConditionalBreakpoint = Boolean(this.condition) && !isLogpoint;
-    this.element.classList.toggle('cm-inline-logpoint', isLogpoint);
-    this.element.classList.toggle('cm-inline-breakpoint-conditional', isConditionalBreakpoint);
-    this.element.classList.toggle('cm-inline-disabled', !this.enabled);
+  eq(other: BreakpointInlineMarker): boolean {
+    return other.class === this.class && other.breakpoint === this.breakpoint;
   }
 
-  show(): void {
-    if (this.bookmark) {
-      return;
-    }
-    const editorLocation = this.handle.resolve();
-    if (!editorLocation) {
-      return;
-    }
-    this.bookmark = this.textEditor.addBookmark(
-        editorLocation.lineNumber, editorLocation.columnNumber, this.element, BreakpointDecoration.bookmarkSymbol);
-    // @ts-ignore Only used for layout tests
-    this.bookmark[BreakpointDecoration.elementSymbolForTest] = this.element;
+  toDOM(): HTMLElement {
+    const span = document.createElement('span');
+    span.className = this.class;
+    span.addEventListener('click', (event: MouseEvent) => {
+      this.parent.onInlineBreakpointMarkerClick(event, this.breakpoint);
+      event.consume();
+    });
+    span.addEventListener('contextmenu', (event: MouseEvent) => {
+      this.parent.onInlineBreakpointMarkerContextMenu(event, this.breakpoint);
+      event.consume();
+    });
+    return span;
   }
 
-  hide(): void {
-    if (!this.bookmark) {
-      return;
-    }
-    this.bookmark.clear();
-    this.bookmark = null;
+  ignoreEvent(): boolean {
+    return true;
   }
+}
 
-  dispose(): void {
-    const location = this.handle.resolve();
-    if (location) {
-      this.textEditor.toggleLineClass(location.lineNumber, 'cm-breakpoint', false);
-      this.textEditor.toggleLineClass(location.lineNumber, 'cm-breakpoint-disabled', false);
-      this.textEditor.toggleLineClass(location.lineNumber, 'cm-breakpoint-unbound', false);
-      this.textEditor.toggleLineClass(location.lineNumber, 'cm-breakpoint-conditional', false);
-      this.textEditor.toggleLineClass(location.lineNumber, 'cm-breakpoint-logpoint', false);
+class BreakpointGutterMarker extends CodeMirror.GutterMarker {
+  constructor(readonly elementClass: string) {
+    super();
+  }
+
+  eq(other: BreakpointGutterMarker): boolean {
+    return other.elementClass === this.elementClass;
+  }
+}
+
+function mostSpecificBreakpoint(
+    a: Bindings.BreakpointManager.Breakpoint, b: Bindings.BreakpointManager.Breakpoint): number {
+  if (a.enabled() !== b.enabled()) {
+    return a.enabled() ? -1 : 1;
+  }
+  if (a.bound() !== b.bound()) {
+    return a.bound() ? -1 : 1;
+  }
+  if (Boolean(a.condition()) !== Boolean(b.condition())) {
+    return Boolean(a.condition()) ? -1 : 1;
+  }
+  return 0;
+}
+
+// Generic helper for creating pairs of editor state fields and
+// effects to model imperatively updated decorations.
+
+function defineStatefulDecoration(): {
+  update: CodeMirror.StateEffectType<CodeMirror.DecorationSet>,
+  field: CodeMirror.StateField<CodeMirror.DecorationSet>,
+} {
+  const update = CodeMirror.StateEffect.define<CodeMirror.DecorationSet>();
+  const field = CodeMirror.StateField.define<CodeMirror.DecorationSet>({
+    create(): CodeMirror.DecorationSet {
+      return CodeMirror.Decoration.none;
+    },
+    update(deco, tr): CodeMirror.DecorationSet {
+      return tr.effects.reduce((deco, effect) => effect.is(update) ? effect.value : deco, deco.map(tr.changes));
+    },
+    provide: field => CodeMirror.EditorView.decorations.from(field),
+  });
+  return {update, field};
+}
+
+// Execution line highlight
+
+const executionLineDeco = CodeMirror.Decoration.line({attributes: {class: 'cm-executionLine'}});
+const executionTokenDeco = CodeMirror.Decoration.mark({attributes: {class: 'cm-executionToken'}});
+const executionLine = defineStatefulDecoration();
+
+// Continue-to markers
+
+const continueToMark = CodeMirror.Decoration.mark({class: 'cm-continueToLocation'});
+const asyncContinueToMark = CodeMirror.Decoration.mark({class: 'cm-continueToLocation cm-continueToLocation-async'});
+
+const continueToMarkers = defineStatefulDecoration();
+
+const noMarkers = {}, hasContinueMarkers = {
+  class: 'cm-hasContinueMarkers',
+};
+
+// Add a class to the content element when there are active
+// continue-to markers. This hides the background on the current
+// execution line.
+const markIfContinueTo =
+    CodeMirror.EditorView.contentAttributes.compute([continueToMarkers.field], (state): Record<string, string> => {
+      return state.field(continueToMarkers.field).size ? hasContinueMarkers : noMarkers;
+    });
+
+// Variable value decorations
+
+class ValueDecoration extends CodeMirror.WidgetType {
+  constructor(readonly pairs: [string, SDK.RemoteObject.RemoteObject][]) {
+    super();
+  }
+
+  eq(other: ValueDecoration): boolean {
+    return this.pairs.length === other.pairs.length &&
+        this.pairs.every((p, i) => p[0] === other.pairs[i][0] && p[1] === other.pairs[i][1]);
+  }
+
+  toDOM(): HTMLElement {
+    const formatter = new ObjectUI.RemoteObjectPreviewFormatter.RemoteObjectPreviewFormatter();
+    const widget = document.createElement('div');
+    widget.classList.add('cm-variableValues');
+    let first = true;
+    for (const [name, value] of this.pairs) {
+      if (first) {
+        first = false;
+      } else {
+        UI.UIUtils.createTextChild(widget, ', ');
+      }
+      const nameValuePair = (widget.createChild('span') as HTMLElement);
+      UI.UIUtils.createTextChild(nameValuePair, name + ' = ');
+      const propertyCount = value.preview ? value.preview.properties.length : 0;
+      const entryCount = value.preview && value.preview.entries ? value.preview.entries.length : 0;
+      if (value.preview && propertyCount + entryCount < 10) {
+        formatter.appendObjectPreview(nameValuePair, value.preview, false /* isEntry */);
+      } else {
+        const propertyValue = ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.createPropertyValue(
+            value, /* wasThrown */ false, /* showPreview */ false);
+        nameValuePair.appendChild(propertyValue.element);
+      }
     }
-    this.hide();
+    return widget;
   }
+}
 
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  static readonly bookmarkSymbol = Symbol('bookmark');
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  private static readonly elementSymbolForTest = Symbol('element');
+const valueDecorations = defineStatefulDecoration();
+
+// Evaluated expression mark for pop-over
+
+const evalExpressionMark = CodeMirror.Decoration.mark({class: 'cm-evaluatedExpression'});
+
+const evalExpression = defineStatefulDecoration();
+
+// Styling for plugin-local elements
+
+const theme = CodeMirror.EditorView.baseTheme({
+  '.cm-lineNumbers .cm-gutterElement': {
+    '&:hover, &.cm-breakpoint': {
+      borderStyle: 'solid',
+      borderWidth: '1px 4px 1px 1px',
+      marginRight: '-4px',
+      paddingLeft: '8px',
+      // Make sure text doesn't move down due to the border above it.
+      lineHeight: 'calc(1.2em - 2px)',
+      position: 'relative',
+    },
+    '&:hover': {
+      WebkitBorderImage: lineNumberArrow('#ebeced', '#ebeced'),
+    },
+    '&.cm-breakpoint': {
+      color: '#fff',
+      WebkitBorderImage: lineNumberArrow('#4285f4', '#1a73e8'),
+    },
+    '&.cm-breakpoint-conditional': {
+      WebkitBorderImage: lineNumberArrow('#f29900', '#e37400'),
+      '&::before': {
+        content: '"?"',
+        position: 'absolute',
+        top: 0,
+        left: '1px',
+      },
+    },
+    '&.cm-breakpoint-logpoint': {
+      WebkitBorderImage: lineNumberArrow('#f439a0', '#d01884'),
+      '&::before': {
+        content: '"‥"',
+        position: 'absolute',
+        top: '-3px',
+        left: '1px',
+      },
+    },
+  },
+  '&dark .cm-lineNumbers .cm-gutterElement': {
+    '&:hover': {
+      WebkitBorderImage: lineNumberArrow('#3c4043', '#3c4043'),
+    },
+    '&.cm-breakpoint': {
+      WebkitBorderImage: lineNumberArrow('#5186EC', '#1a73e8'),
+    },
+    '&.cm-breakpoint-conditional': {
+      WebkitBorderImage: lineNumberArrow('#e9a33a', '#e37400'),
+    },
+    '&.cm-breakpoint-logpoint': {
+      WebkitBorderImage: lineNumberArrow('#E54D9B', '#d01884'),
+    },
+  },
+  ':host-context(.breakpoints-deactivated) & .cm-lineNumbers .cm-gutterElement.cm-breakpoint, .cm-lineNumbers .cm-gutterElement.cm-breakpoint-disabled':
+      {
+        color: '#1a73e8',
+        WebkitBorderImage: lineNumberArrow('#d9e7fd', '#1a73e8'),
+        '&.cm-breakpoint-conditional': {
+          color: '#e37400',
+          WebkitBorderImage: lineNumberArrow('#fcebcc', '#e37400'),
+        },
+        '&.cm-breakpoint-logpoint': {
+          color: '#d01884',
+          WebkitBorderImage: lineNumberArrow('#fdd7ec', '#f439a0'),
+        },
+      },
+  ':host-context(.breakpoints-deactivated) &dark .cm-lineNumbers .cm-gutterElement.cm-breakpoint, &dark .cm-lineNumbers .cm-gutterElement.cm-breakpoint-disabled':
+      {
+        WebkitBorderImage: lineNumberArrow('#2a384e', '#1a73e8'),
+        '&.cm-breakpoint-conditional': {
+          WebkitBorderImage: lineNumberArrow('#4d3c1d', '#e37400'),
+        },
+        '&.cm-breakpoint-logpoint': {
+          WebkitBorderImage: lineNumberArrow('#4e283d', '#f439a0'),
+        },
+      },
+
+  '.cm-inlineBreakpoint': {
+    cursor: 'pointer',
+    position: 'relative',
+    top: '1px',
+    content: inlineBreakpointArrow('#4285F4', '#1A73E8'),
+    height: '10px',
+    '&.cm-inlineBreakpoint-conditional': {
+      content: inlineConditionalBreakpointArrow('#F29900', '#E37400'),
+    },
+    '&.cm-inlineBreakpoint-logpoint': {
+      content: inlineLogpointArrow('#F439A0', '#D01884'),
+    },
+  },
+  '&dark .cm-inlineBreakpoint': {
+    content: inlineBreakpointArrow('#5186EC', '#1A73E8'),
+    '&.cm-inlineBreakpoint-conditional': {
+      content: inlineConditionalBreakpointArrow('#e9a33a', '#E37400'),
+    },
+    '&.cm-inlineBreakpoint-logpoint': {
+      content: inlineLogpointArrow('#E54D9B', '#D01884'),
+    },
+  },
+  ':host-context(.breakpoints-deactivated) & .cm-inlineBreakpoint, .cm-inlineBreakpoint-disabled': {
+    content: inlineBreakpointArrow('#4285F4', '#1A73E8', '0.2'),
+    '&.cm-inlineBreakpoint-conditional': {
+      content: inlineConditionalBreakpointArrow('#F9AB00', '#E37400', '0.2'),
+    },
+    '&.cm-inlineBreakpoint-logpoint': {
+      content: inlineLogpointArrow('#F439A0', '#D01884', '0.2'),
+    },
+  },
+
+  '.cm-executionLine': {
+    backgroundColor: 'var(--color-execution-line-background)',
+    outline: '1px solid var(--color-execution-line-outline)',
+    '.cm-hasContinueMarkers &': {
+      backgroundColor: 'transparent',
+    },
+    '&.cm-highlightedLine': {
+      animation: 'cm-fading-highlight-execution 2s 0s',
+    },
+  },
+  '.cm-executionToken': {
+    backgroundColor: 'var(--color-execution-token-background)',
+  },
+  '@keyframes cm-fading-highlight-execution': {
+    from: {
+      backgroundColor: 'var(--color-highlighted-line)',
+    },
+    to: {
+      backgroundColor: 'var(--color-execution-line-background)',
+    },
+  },
+
+  '.cm-continueToLocation': {
+    cursor: 'pointer',
+    backgroundColor: 'var(--color-continue-to-location)',
+    '&:hover': {
+      backgroundColor: 'var(--color-continue-to-location-hover)',
+      border: '1px solid var(--color-continue-to-location-hover-border)',
+      margin: '0 -1px',
+    },
+    '&.cm-continueToLocation-async': {
+      backgroundColor: 'var(--color-continue-to-location-async)',
+      '&:hover': {
+        backgroundColor: 'var(--color-continue-to-location-async-hover)',
+        border: '1px solid var(--color-continue-to-location-async-hover-border)',
+        margin: '0 -1px',
+      },
+    },
+  },
+
+  '.cm-evaluatedExpression': {
+    backgroundColor: 'var(--color-evaluated-expression)',
+    border: '1px solid var(--color-evaluated-expression-border)',
+    margin: '0 -1px',
+  },
+
+  '.cm-variableValues': {
+    display: 'inline',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    maxWidth: '1000px',
+    opacity: '80%',
+    backgroundColor: 'var(--color-variable-values)',
+    marginLeft: '10px',
+    padding: '0 5px',
+    userSelect: 'text',
+    '.cm-executionLine &': {
+      backgroundColor: 'transparent',
+      opacity: '50%',
+    },
+  },
+});
+
+function lineNumberArrow(color: string, outline: string): string {
+  return `url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="${
+      encodeURIComponent(color)}" stroke="${encodeURIComponent(outline)}"/></svg>') 1 3 1 1`;
 }
 
-export const continueToLocationDecorationSymbol = Symbol('bookmark');
+function inlineBreakpointArrow(color: string, outline: string, opacity: string = '1'): string {
+  return `url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.7549 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.7549 11.2583 6.29382 11.5 5.80139 11.5H0.5V0.5Z" fill="${
+      encodeURIComponent(
+          color)}" stroke="${encodeURIComponent(outline)}" fill-opacity="${encodeURIComponent(opacity)}"/></svg>')`;
+}
+
+function inlineConditionalBreakpointArrow(color: string, outline: string, opacity: string = '1'): string {
+  return `url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.75489 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.75489 11.2583 6.29382 11.5 5.80138 11.5H0.5V0.5Z" fill="${
+      encodeURIComponent(color)}" fill-opacity="${encodeURIComponent(opacity)}" stroke="${
+      encodeURIComponent(
+          outline)}"/><path d="M3.51074 7.75635H4.68408V9H3.51074V7.75635ZM4.68408 7.23779H3.51074V6.56104C3.51074 6.271 3.55615 6.02344 3.64697 5.81836C3.73779 5.61328 3.90039 5.39648 4.13477 5.16797L4.53027 4.77686C4.71484 4.59814 4.83936 4.4502 4.90381 4.33301C4.97119 4.21582 5.00488 4.09424 5.00488 3.96826C5.00488 3.77197 4.9375 3.62402 4.80273 3.52441C4.66797 3.4248 4.46582 3.375 4.19629 3.375C3.9502 3.375 3.69238 3.42773 3.42285 3.5332C3.15625 3.63574 2.88232 3.78955 2.60107 3.99463V2.81689C2.88818 2.65283 3.17822 2.52979 3.47119 2.44775C3.76709 2.36279 4.06299 2.32031 4.35889 2.32031C4.95068 2.32031 5.41504 2.45801 5.75195 2.7334C6.08887 3.00879 6.25732 3.38818 6.25732 3.87158C6.25732 4.09424 6.20752 4.30225 6.10791 4.49561C6.0083 4.68604 5.8208 4.91602 5.54541 5.18555L5.15869 5.56348C4.95947 5.75684 4.83203 5.91504 4.77637 6.03809C4.7207 6.16113 4.69287 6.31201 4.69287 6.49072C4.69287 6.51709 4.69141 6.54785 4.68848 6.58301C4.68848 6.61816 4.68701 6.65625 4.68408 6.69727V7.23779Z" fill="white"/></svg>')`;
+}
+
+function inlineLogpointArrow(color: string, outline: string, opacity: string = '1'): string {
+  return `url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.7549 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.7549 11.2583 6.29382 11.5 5.80139 11.5H0.5V0.5Z" fill="${
+      encodeURIComponent(color)}" stroke="${encodeURIComponent(outline)}" fill-opacity="${
+      encodeURIComponent(
+          opacity)}"/><circle cx="3" cy="6" r="1" fill="white"/><circle cx="7" cy="6" r="1" fill="white"/></svg>')`;
+}