chrome-devtools-frontend 1.0.940714 → 1.0.942529

package/front_end/panels/sources/EditingLocationHistoryManager.ts

@@ -28,146 +28,116 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import * as Common from '../../core/common/common.js';
-import type * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
+import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 
 import type {SourcesView} from './SourcesView.js';
 import type {UISourceCodeFrame} from './UISourceCodeFrame.js';
 
+export const HistoryDepth = 20;
+
 export class EditingLocationHistoryManager {
-  private readonly sourcesView: SourcesView;
-  private readonly historyManager: Common.SimpleHistoryManager.SimpleHistoryManager;
-  private readonly currentSourceFrameCallback: () => UISourceCodeFrame | null;
-  constructor(sourcesView: SourcesView, currentSourceFrameCallback: () => UISourceCodeFrame | null) {
-    this.sourcesView = sourcesView;
-    this.historyManager = new Common.SimpleHistoryManager.SimpleHistoryManager(HistoryDepth);
-    this.currentSourceFrameCallback = currentSourceFrameCallback;
+  private readonly entries: EditingLocationHistoryEntry[] = [];
+  private current = -1;
+  private revealing = false;
+
+  constructor(private readonly sourcesView: SourcesView) {
   }
 
   trackSourceFrameCursorJumps(sourceFrame: UISourceCodeFrame): void {
-    sourceFrame.textEditor.addEventListener(
-        SourceFrame.SourcesTextEditor.Events.JumpHappened, this.onJumpHappened.bind(this));
+    sourceFrame.addEventListener(
+        SourceFrame.SourceFrame.Events.EditorUpdate, event => this.onEditorUpdate(event.data, sourceFrame));
   }
 
-  private onJumpHappened(event: Common.EventTarget.EventTargetEvent<SourceFrame.SourcesTextEditor.JumpHappenedEvent>):
-      void {
-    const {from, to} = event.data;
-    if (from) {
-      this.updateActiveState(from);
+  private onEditorUpdate(update: CodeMirror.ViewUpdate, sourceFrame: UISourceCodeFrame): void {
+    if (update.docChanged) {
+      this.mapEntriesFor(sourceFrame.uiSourceCode(), update.changes);
     }
-    if (to) {
-      this.pushActiveState(to);
+    const prevPos = update.startState.selection.main;
+    const newPos = update.state.selection.main;
+    const isJump = !this.revealing && prevPos.anchor !== newPos.anchor && update.transactions.some((tr): boolean => {
+      return Boolean(
+          tr.isUserEvent('select.pointer') || tr.isUserEvent('select.reveal') || tr.isUserEvent('select.search'));
+    });
+    if (isJump) {
+      this.updateCurrentState(sourceFrame.uiSourceCode(), prevPos.head);
+      if (this.entries.length > this.current + 1) {
+        this.entries.length = this.current + 1;
+      }
+      this.entries.push(new EditingLocationHistoryEntry(sourceFrame.uiSourceCode(), newPos.head));
+      this.current++;
+      if (this.entries.length > HistoryDepth) {
+        this.entries.shift();
+        this.current--;
+      }
     }
   }
 
-  rollback(): void {
-    this.historyManager.rollback();
-  }
-
-  rollover(): void {
-    this.historyManager.rollover();
+  updateCurrentState(uiSourceCode: Workspace.UISourceCode.UISourceCode, position: number): void {
+    if (!this.revealing) {
+      const top = this.current >= 0 ? this.entries[this.current] : null;
+      if (top?.matches(uiSourceCode)) {
+        top.position = position;
+      }
+    }
   }
 
-  updateCurrentState(): void {
-    const sourceFrame = this.currentSourceFrameCallback();
-    if (!sourceFrame) {
-      return;
+  private mapEntriesFor(uiSourceCode: Workspace.UISourceCode.UISourceCode, change: CodeMirror.ChangeDesc): void {
+    for (const entry of this.entries) {
+      if (entry.matches(uiSourceCode)) {
+        entry.position = change.mapPos(entry.position);
+      }
     }
-    this.updateActiveState(sourceFrame.textEditor.selection());
   }
 
-  pushNewState(): void {
-    const sourceFrame = this.currentSourceFrameCallback();
-    if (!sourceFrame) {
-      return;
+  private reveal(entry: EditingLocationHistoryEntry): void {
+    const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCode(entry.projectId, entry.url);
+    if (uiSourceCode) {
+      this.revealing = true;
+      this.sourcesView.showSourceLocation(uiSourceCode, entry.position, false, true);
+      this.revealing = false;
     }
-    this.pushActiveState(sourceFrame.textEditor.selection());
   }
 
-  private updateActiveState(selection: TextUtils.TextRange.TextRange): void {
-    const active = (this.historyManager.active() as EditingLocationHistoryEntry | null);
-    if (!active) {
-      return;
-    }
-    const sourceFrame = this.currentSourceFrameCallback();
-    if (!sourceFrame) {
-      return;
+  rollback(): void {
+    if (this.current > 0) {
+      this.current--;
+      this.reveal(this.entries[this.current]);
     }
-    const entry = new EditingLocationHistoryEntry(this.sourcesView, this, sourceFrame, selection);
-    active.merge(entry);
   }
 
-  private pushActiveState(selection: TextUtils.TextRange.TextRange): void {
-    const sourceFrame = this.currentSourceFrameCallback();
-    if (!sourceFrame) {
-      return;
+  rollover(): void {
+    if (this.current < this.entries.length - 1) {
+      this.current++;
+      this.reveal(this.entries[this.current]);
     }
-    const entry = new EditingLocationHistoryEntry(this.sourcesView, this, sourceFrame, selection);
-    this.historyManager.push(entry);
   }
 
   removeHistoryForSourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
-    this.historyManager.filterOut(entry => {
-      const historyEntry = (entry as EditingLocationHistoryEntry);
-      return historyEntry.projectId === uiSourceCode.project().id() && historyEntry.url === uiSourceCode.url();
-    });
+    for (let i = this.entries.length - 1; i >= 0; i--) {
+      if (this.entries[i].matches(uiSourceCode)) {
+        this.entries.splice(i, 1);
+        if (this.current >= i) {
+          this.current--;
+        }
+      }
+    }
   }
 }
 
-export const HistoryDepth = 20;
-
-export class EditingLocationHistoryEntry implements Common.SimpleHistoryManager.HistoryEntry {
-  private readonly sourcesView: SourcesView;
-  private readonly editingLocationManager: EditingLocationHistoryManager;
+class EditingLocationHistoryEntry {
   readonly projectId: string;
   readonly url: string;
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private positionHandle: any;
-
-  constructor(
-      sourcesView: SourcesView, editingLocationManager: EditingLocationHistoryManager, sourceFrame: UISourceCodeFrame,
-      selection: TextUtils.TextRange.TextRange) {
-    this.sourcesView = sourcesView;
-    this.editingLocationManager = editingLocationManager;
-    const uiSourceCode = sourceFrame.uiSourceCode();
+  position: number;
+
+  constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode, position: number) {
     this.projectId = uiSourceCode.project().id();
     this.url = uiSourceCode.url();
-
-    const position = this.positionFromSelection(selection);
-    this.positionHandle = sourceFrame.textEditor.textEditorPositionHandle(position.lineNumber, position.columnNumber);
-  }
-
-  merge(entry: EditingLocationHistoryEntry): void {
-    if (this.projectId !== entry.projectId || this.url !== entry.url) {
-      return;
-    }
-    this.positionHandle = entry.positionHandle;
+    this.position = position;
   }
 
-  private positionFromSelection(selection: TextUtils.TextRange.TextRange): {
-    lineNumber: number,
-    columnNumber: number,
-  } {
-    return {lineNumber: selection.endLine, columnNumber: selection.endColumn};
-  }
-
-  valid(): boolean {
-    const position = this.positionHandle.resolve();
-    const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCode(this.projectId, this.url);
-    return Boolean(position && uiSourceCode);
-  }
-
-  reveal(): void {
-    const position = this.positionHandle.resolve();
-    const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCode(this.projectId, this.url);
-    if (!position || !uiSourceCode) {
-      return;
-    }
-
-    this.editingLocationManager.updateCurrentState();
-    this.sourcesView.showSourceLocation(uiSourceCode, position.lineNumber, position.columnNumber);
+  matches(uiSourceCode: Workspace.UISourceCode.UISourceCode): boolean {
+    return this.url === uiSourceCode.url() && this.projectId === uiSourceCode.project().id();
   }
 }

package/front_end/panels/sources/GoToLineQuickOpen.ts

@@ -97,8 +97,9 @@ export class GoToLineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
         this.#goToLineStrings.push(i18nString(UIStrings.typeANumberToGoToThatLine));
         return;
       }
+      const editorState = sourceFrame.textEditor.state;
       const disassembly = sourceFrame.wasmDisassembly;
-      const currentLineNumber = sourceFrame.textEditor.currentLineNumber();
+      const currentLineNumber = editorState.doc.lineAt(editorState.selection.main.head).number - 1;
       if (disassembly) {
         const lastBytecodeOffset = disassembly.lineNumberToBytecodeOffset(disassembly.lineNumbers - 1);
         const bytecodeOffsetDigits = lastBytecodeOffset.toString(16).length;
@@ -110,7 +111,7 @@ export class GoToLineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
         }));
         return;
       }
-      const linesCount = sourceFrame.textEditor.linesCount;
+      const linesCount = editorState.doc.lines;
       this.#goToLineStrings.push(
           i18nString(UIStrings.currentLineSTypeALineNumber, {PH1: currentLineNumber + 1, PH2: linesCount}));
       return;
@@ -124,7 +125,7 @@ export class GoToLineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
       this.#goToLineStrings.push(i18nString(UIStrings.goToLineSAndColumnS, {PH1: position.line, PH2: position.column}));
       return;
     }
-    if (sourceFrame && position.line > sourceFrame.textEditor.linesCount) {
+    if (sourceFrame && position.line > sourceFrame.textEditor.state.doc.lines) {
       return;
     }
     this.#goToLineStrings.push(i18nString(UIStrings.goToLineS, {PH1: position.line}));

package/front_end/panels/sources/InplaceFormatterEditorAction.ts

@@ -128,12 +128,12 @@ export class InplaceFormatterEditorAction implements EditorAction {
     const sourceFrame = (this.sourcesView.viewForFile(uiSourceCode) as SourceFrame.SourceFrame.SourceFrameImpl);
     let start: number[]|number[] = [0, 0];
     if (sourceFrame) {
-      const selection = sourceFrame.selection();
-      start = formatterMapping.originalToFormatted(selection.startLine, selection.startColumn);
+      const selection = sourceFrame.textEditor.toLineColumn(sourceFrame.textEditor.state.selection.main.head);
+      start = formatterMapping.originalToFormatted(selection.lineNumber, selection.columnNumber);
     }
     uiSourceCode.setWorkingCopy(formattedContent);
 
-    this.sourcesView.showSourceLocation(uiSourceCode, start[0], start[1]);
+    this.sourcesView.showSourceLocation(uiSourceCode, {lineNumber: start[0], columnNumber: start[1]});
   }
 }
 

package/front_end/panels/sources/JavaScriptCompilerPlugin.ts

@@ -5,32 +5,35 @@
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Workspace from '../../models/workspace/workspace.js';
-import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
+import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import * as Snippets from '../snippets/snippets.js';
 
 import {Plugin} from './Plugin.js';
 
 export class JavaScriptCompilerPlugin extends Plugin {
-  private readonly textEditor: SourceFrame.SourcesTextEditor.SourcesTextEditor;
-  private uiSourceCode: Workspace.UISourceCode.UISourceCode;
-  private compiling: boolean;
-  private recompileScheduled: boolean;
-  private timeout: number|null;
-  private message: Workspace.UISourceCode.Message|null;
-  private disposed: boolean;
-  constructor(
-      textEditor: SourceFrame.SourcesTextEditor.SourcesTextEditor, uiSourceCode: Workspace.UISourceCode.UISourceCode) {
-    super();
-    this.textEditor = textEditor;
-    this.uiSourceCode = uiSourceCode;
-    this.compiling = false;
-    this.recompileScheduled = false;
-    this.timeout = null;
-    this.message = null;
-    this.disposed = false;
+  private compiling: boolean = false;
+  private recompileScheduled: boolean = false;
+  private timeout: number|null = null;
+  private message: Workspace.UISourceCode.Message|null = null;
+  private disposed: boolean = false;
+  private editor: TextEditor.TextEditor.TextEditor|null = null;
+
+  constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode) {
+    super(uiSourceCode);
+  }
+
+  editorExtension(): CodeMirror.Extension {
+    return CodeMirror.EditorView.updateListener.of(update => {
+      if (update.docChanged) {
+        this.scheduleCompile();
+      }
+    });
+  }
 
-    this.textEditor.addEventListener(UI.TextEditor.Events.TextChanged, this.scheduleCompile, this);
+  editorInitialized(editor: TextEditor.TextEditor.TextEditor): void {
+    this.editor = editor;
     if (this.uiSourceCode.hasCommits() || this.uiSourceCode.isDirty()) {
       this.scheduleCompile();
     }
@@ -78,7 +81,7 @@ export class JavaScriptCompilerPlugin extends Plugin {
 
   private async compile(): Promise<void> {
     const runtimeModel = this.findRuntimeModel();
-    if (!runtimeModel) {
+    if (!runtimeModel || !this.editor) {
       return;
     }
     const currentExecutionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
@@ -86,11 +89,11 @@ export class JavaScriptCompilerPlugin extends Plugin {
       return;
     }
 
-    const code = this.textEditor.text();
-    if (code.length > 1024 * 100) {
+    if (this.editor.state.doc.length > 1024 * 100) {
       return;
     }
 
+    const code = this.editor.state.doc.toString();
     const scripts =
         Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().scriptsForResource(this.uiSourceCode);
     const isModule = scripts.reduce((v, s) => v || s.isModule === true, false);
@@ -109,6 +112,7 @@ export class JavaScriptCompilerPlugin extends Plugin {
     }
     if (this.message) {
       this.uiSourceCode.removeMessage(this.message);
+      this.message = null;
     }
     if (this.disposed || !result || !result.exceptionDetails) {
       return;
@@ -125,7 +129,6 @@ export class JavaScriptCompilerPlugin extends Plugin {
   }
 
   dispose(): void {
-    this.textEditor.removeEventListener(UI.TextEditor.Events.TextChanged, this.scheduleCompile, this);
     if (this.message) {
       this.uiSourceCode.removeMessage(this.message);
     }

package/front_end/panels/sources/Plugin.ts

@@ -3,9 +3,17 @@
 // found in the LICENSE file.
 
 import type * as Workspace from '../../models/workspace/workspace.js';
+import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
+import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import type * as UI from '../../ui/legacy/legacy.js';
+import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 
 export class Plugin {
+  constructor(
+      protected readonly uiSourceCode: Workspace.UISourceCode.UISourceCode,
+      _transformer?: SourceFrame.SourceFrame.Transformer) {
+  }
+
   static accepts(_uiSourceCode: Workspace.UISourceCode.UISourceCode): boolean {
     return false;
   }
@@ -29,13 +37,21 @@ export class Plugin {
     return [];
   }
 
-  populateLineGutterContextMenu(_contextMenu: UI.ContextMenu.ContextMenu, _lineNumber: number): Promise<void> {
-    return Promise.resolve();
+  populateLineGutterContextMenu(_contextMenu: UI.ContextMenu.ContextMenu, _lineNumber: number): void {
   }
 
   populateTextAreaContextMenu(_contextMenu: UI.ContextMenu.ContextMenu, _lineNumber: number, _columnNumber: number):
-      Promise<void> {
-    return Promise.resolve();
+      void {
+  }
+
+  decorationChanged(_type: SourceFrame.SourceFrame.DecoratorType, _editor: TextEditor.TextEditor.TextEditor): void {
+  }
+
+  editorExtension(): CodeMirror.Extension {
+    return [];
+  }
+
+  editorInitialized(_editor: TextEditor.TextEditor.TextEditor): void {
   }
 
   dispose(): void {

package/front_end/panels/sources/ProfilePlugin.ts

@@ -0,0 +1,185 @@
+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
+import type * as Workspace from '../../models/workspace/workspace.js';
+import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
+import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
+import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
+
+import {Plugin} from './Plugin.js';
+
+const UIStrings = {
+  /**
+  *@description The milisecond unit
+  */
+  ms: 'ms',
+  /**
+  *@description Unit for data size in DevTools
+  */
+  mb: 'MB',
+  /**
+  *@description A unit
+  */
+  kb: 'kB',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/sources/ProfilePlugin.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+class MemoryMarker extends CodeMirror.GutterMarker {
+  constructor(readonly value: number) {
+    super();
+  }
+
+  eq(other: MemoryMarker): boolean {
+    return this.value === other.value;
+  }
+
+  toDOM(): HTMLElement {
+    const element = document.createElement('div');
+    element.className = 'cm-profileMarker';
+    let value = this.value;
+    const intensity = Platform.NumberUtilities.clamp(Math.log10(1 + 2e-3 * value) / 5, 0.02, 1);
+    element.style.backgroundColor = `hsla(217, 100%, 70%, ${intensity.toFixed(3)})`;
+    value /= 1e3;
+    let units;
+    let fractionDigits;
+    if (value >= 1e3) {
+      units = i18nString(UIStrings.mb);
+      value /= 1e3;
+      fractionDigits = value >= 20 ? 0 : 1;
+    } else {
+      units = i18nString(UIStrings.kb);
+      fractionDigits = 0;
+    }
+    element.textContent = value.toFixed(fractionDigits);
+    const unitElement = element.appendChild(document.createElement('span'));
+    unitElement.className = 'cm-units';
+    unitElement.textContent = units;
+    return element;
+  }
+}
+
+class PerformanceMarker extends CodeMirror.GutterMarker {
+  constructor(readonly value: number) {
+    super();
+  }
+
+  eq(other: MemoryMarker): boolean {
+    return this.value === other.value;
+  }
+
+  toDOM(): HTMLElement {
+    const element = document.createElement('div');
+    element.className = 'cm-profileMarker';
+    const intensity = Platform.NumberUtilities.clamp(Math.log10(1 + 10 * this.value) / 5, 0.02, 1);
+    element.textContent = this.value.toFixed(1);
+    element.style.backgroundColor = `hsla(44, 100%, 50%, ${intensity.toFixed(3)})`;
+    const span = document.createElement('span');
+    span.className = 'cm-units';
+    span.textContent = i18nString(UIStrings.ms);
+    element.appendChild(span);
+    return element;
+  }
+}
+
+function markersFromProfileData(
+    map: Map<number, number>, state: CodeMirror.EditorState,
+    type: SourceFrame.SourceFrame.DecoratorType): CodeMirror.RangeSet<CodeMirror.GutterMarker> {
+  const markerType = type === SourceFrame.SourceFrame.DecoratorType.PERFORMANCE ? PerformanceMarker : MemoryMarker;
+  const markers: CodeMirror.Range<CodeMirror.GutterMarker>[] = [];
+  for (const [line, value] of map) {
+    if (line <= state.doc.lines) {
+      const {from} = state.doc.line(line);
+      markers.push(new markerType(value).range(from));
+    }
+  }
+  return CodeMirror.RangeSet.of(markers, true);
+}
+
+const makeLineLevelProfilePlugin = (type: SourceFrame.SourceFrame.DecoratorType): typeof Plugin =>
+    class extends Plugin {
+  updateEffect = CodeMirror.StateEffect.define<Map<number, number>>();
+  field: CodeMirror.StateField<CodeMirror.RangeSet<CodeMirror.GutterMarker>>;
+  gutter: CodeMirror.Extension;
+  compartment: CodeMirror.Compartment = new CodeMirror.Compartment();
+
+  constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode) {
+    super(uiSourceCode);
+
+    this.field = CodeMirror.StateField.define<CodeMirror.RangeSet<CodeMirror.GutterMarker>>({
+      create(): CodeMirror.RangeSet<CodeMirror.GutterMarker> {
+        return CodeMirror.RangeSet.empty;
+      },
+      update: (markers, tr) => {
+        return tr.effects.reduce((markers, effect) => {
+          return effect.is(this.updateEffect) ? markersFromProfileData(effect.value, tr.state, type) : markers;
+        }, markers.map(tr.changes));
+      },
+    });
+
+    this.gutter = CodeMirror.gutter({
+      markers: (view): CodeMirror.RangeSet<CodeMirror.GutterMarker> => view.state.field(this.field),
+      class: `cm-${type}Gutter`,
+    });
+  }
+
+  static accepts(uiSourceCode: Workspace.UISourceCode.UISourceCode): boolean {
+    return uiSourceCode.contentType().hasScripts();
+  }
+
+  private getLineMap(): Map<number, number>|undefined {
+    return this.uiSourceCode.getDecorationData(type);
+  }
+
+  editorExtension(): CodeMirror.Extension {
+    const map = this.getLineMap();
+    return this.compartment.of(
+        !map ? [] : [this.field.init(state => markersFromProfileData(map, state, type)), this.gutter, theme]);
+  }
+
+  decorationChanged(type: SourceFrame.SourceFrame.DecoratorType, editor: TextEditor.TextEditor.TextEditor): void {
+    const installed = Boolean(editor.state.field(this.field, false));
+    const map = this.getLineMap();
+    if (!map) {
+      if (installed) {
+        editor.dispatch({effects: this.compartment.reconfigure([])});
+      }
+    } else if (!installed) {
+      editor.dispatch({
+        effects: this.compartment.reconfigure(
+            [this.field.init(state => markersFromProfileData(map, state, type)), this.gutter, theme]),
+      });
+    } else {
+      editor.dispatch({effects: this.updateEffect.of(map)});
+    }
+  }
+};
+
+const theme = CodeMirror.EditorView.baseTheme({
+  '.cm-performanceGutter': {
+    width: '60px',
+    backgroundColor: 'var(--color-background)',
+    marginLeft: '3px',
+  },
+  '.cm-memoryGutter': {
+    width: '48px',
+    backgroundColor: 'var(--color-background)',
+    marginLeft: '3px',
+  },
+  '.cm-profileMarker': {
+    textAlign: 'right',
+    paddingRight: '3px',
+  },
+  '.cm-profileMarker .cm-units': {
+    color: 'var(--color-text-secondary)',
+    fontSize: '75%',
+    marginLeft: '3px',
+  },
+});
+
+export const MemoryProfilePlugin = makeLineLevelProfilePlugin(SourceFrame.SourceFrame.DecoratorType.MEMORY);
+
+export const PerformanceProfilePlugin = makeLineLevelProfilePlugin(SourceFrame.SourceFrame.DecoratorType.PERFORMANCE);

package/front_end/panels/sources/ScriptFormatterEditorAction.ts

@@ -147,10 +147,10 @@ export class ScriptFormatterEditorAction implements EditorAction {
     const sourceFrame = this.sourcesView.viewForFile(uiSourceCode);
     let start: number[]|number[] = [0, 0];
     if (sourceFrame instanceof SourceFrame.SourceFrame.SourceFrameImpl) {
-      const selection = sourceFrame.selection();
-      start = formatData.mapping.originalToFormatted(selection.startLine, selection.startColumn);
+      const selection = sourceFrame.textEditor.toLineColumn(sourceFrame.textEditor.state.selection.main.head);
+      start = formatData.mapping.originalToFormatted(selection.lineNumber, selection.columnNumber);
     }
-    this.sourcesView.showSourceLocation(formatData.formattedSourceCode, start[0], start[1]);
+    this.sourcesView.showSourceLocation(formatData.formattedSourceCode, {lineNumber: start[0], columnNumber: start[1]});
   }
 }
 

package/front_end/panels/sources/ScriptOriginPlugin.ts

@@ -6,7 +6,6 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
-import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -27,15 +26,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/sources/ScriptOriginPlugin.ts', UIStrings);
 
 export class ScriptOriginPlugin extends Plugin {
-  private readonly textEditor: SourceFrame.SourcesTextEditor.SourcesTextEditor;
-  private readonly uiSourceCode: Workspace.UISourceCode.UISourceCode;
-  constructor(
-      textEditor: SourceFrame.SourcesTextEditor.SourcesTextEditor, uiSourceCode: Workspace.UISourceCode.UISourceCode) {
-    super();
-    this.textEditor = textEditor;
-    this.uiSourceCode = uiSourceCode;
-  }
-
   static accepts(uiSourceCode: Workspace.UISourceCode.UISourceCode): boolean {
     return uiSourceCode.contentType().hasScripts() || Boolean(ScriptOriginPlugin.script(uiSourceCode));
   }

package/front_end/panels/sources/SnippetsPlugin.ts

@@ -5,7 +5,6 @@
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
-import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Snippets from '../snippets/snippets.js';
 
@@ -23,16 +22,8 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('panels/sources/SnippetsPlugin.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class SnippetsPlugin extends Plugin {
-  private readonly textEditor: SourceFrame.SourcesTextEditor.SourcesTextEditor;
-  private readonly uiSourceCode: Workspace.UISourceCode.UISourceCode;
-  constructor(
-      textEditor: SourceFrame.SourcesTextEditor.SourcesTextEditor, uiSourceCode: Workspace.UISourceCode.UISourceCode) {
-    super();
-    this.textEditor = textEditor;
-    this.uiSourceCode = uiSourceCode;
-  }
 
+export class SnippetsPlugin extends Plugin {
   static accepts(uiSourceCode: Workspace.UISourceCode.UISourceCode): boolean {
     return Snippets.ScriptSnippetFileSystem.isSnippetsUISourceCode(uiSourceCode);
   }