RPP: Support columns, pretty'd sources in Source's panel profile data

The profile data decorations in the Sources panel now apply to the '-'
lines in Sources when a minified file is pretty-printed, and correctly
for minified + source map'd scripts.

The Sources panel displays profile data ("x ms") in the line gutters
when a performance trace is active. However, we did not handle common
edge cases involving pretty-formatted files (the `{}` button), nor did
we handle source mapped content well (we totally ignored column
information, and since most generated code is minified across few lines,
profile data would be displayed far too coarsely).

Now, we utilize the pretty -> original line mapping to create accurate
profile data for the formatted code; and further we consider the column
when mapping the profile data to a UILocation.

Bug: 406012441
Change-Id: I84278eec4e778c62f8568e2c96353fa98be92b32
Bypass-Check-License: test fixture cannot have the license without breaking the test. (because isMinified)
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6588993
Commit-Queue: Paul Irish <[email protected]>
Reviewed-by: Connor Clark <[email protected]>

Author: paulirish

front_end/models/cpu_profile/CPUProfileDataModel.ts

@@ -56,7 +56,15 @@ export class CPUProfileDataModel extends ProfileTreeModel {
    * for CPU profiles coming from traces.
    */
   traceIds?: Record<string, number>;
+  /**
+   * Each item in the `lines` array contains the script line executing
+   * when the sample in that array position was taken.
+   */
   lines?: number[];
+  /**
+   * Same as `lines` above, but with the script column.
+   */
+  columns?: number[];
   totalHitCount: number;
   profileHead: CPUProfileNode;
   /**
@@ -90,14 +98,8 @@ export class CPUProfileDataModel extends ProfileTreeModel {
     this.traceIds = profile.traceIds;
     this.samples = profile.samples;
 
-    // Lines are available only in profiles coming from tracing.
-    // Elements in the lines array have a 1 to 1 correspondence with
-    // samples, by array position. They can be 1 or 0 and indicate if
-    // there is line data for a given sample, i.e. if a given sample
-    // needs to be included to calculate the line level execution time
-    // data, which we show in the sources panel after recording a
-    // profile.
     this.lines = profile.lines;
+    this.columns = profile.columns;
     this.totalHitCount = 0;
     this.profileHead = this.translateProfileTree(profile.nodes);
     this.initialize(this.profileHead);
@@ -557,6 +559,7 @@ export type ExtendedProfileNode = Protocol.Profiler.ProfileNode&{parent?: number
 export type ExtendedProfile = Protocol.Profiler.Profile&{
   nodes: Protocol.Profiler.ProfileNode[] | ExtendedProfileNode[],
   lines?: number[],
+  columns?: number[],
   /**
    * A sample can be manually collected with v8::CpuProfiler::collectSample.
    * When this is done an id (trace id) can be passed to the API to

front_end/models/trace/handlers/SamplesHandler.test.ts

@@ -255,7 +255,8 @@ describeWithEnvironment('SamplesHandler', function() {
       assert.strictEqual(profileById.size, 1);
       const cpuProfileData = profileById.values().next().value as Trace.Handlers.ModelHandlers.Samples.ProfileData;
       const cpuProfile = cpuProfileData.rawProfile;
-      assert.deepEqual(Object.keys(cpuProfile), ['startTime', 'endTime', 'nodes', 'samples', 'timeDeltas', 'lines']);
+      assert.deepEqual(
+          Object.keys(cpuProfile), ['startTime', 'endTime', 'nodes', 'samples', 'timeDeltas', 'lines', 'columns']);
       assert.lengthOf(cpuProfile.nodes, 153);
       assert.strictEqual(cpuProfile.startTime, 287510826176);
       assert.strictEqual(cpuProfile.endTime, 287510847633);

front_end/models/trace/handlers/SamplesHandler.ts

@@ -217,9 +217,11 @@ export function handleEvent(event: Types.Events.Event): void {
 
     const timeDeltas = event.args.data?.timeDeltas || [];
     const lines = event.args.data?.lines || Array(samples.length).fill(0);
+    const columns = event.args.data?.columns || Array(samples.length).fill(0);
     cdpProfile.samples?.push(...samples);
     cdpProfile.timeDeltas?.push(...timeDeltas);
     cdpProfile.lines?.push(...lines);
+    cdpProfile.columns?.push(...columns);
 
     if (traceIds) {
       cdpProfile.traceIds ??= {};
@@ -270,6 +272,7 @@ function getOrCreatePreProcessedData(
                                   samples: [],
                                   timeDeltas: [],
                                   lines: [],
+                                  columns: [],
                                 },
                                 profileId,
                               }));

front_end/models/trace/types/TraceEvents.ts

@@ -174,8 +174,9 @@ export interface ProfileChunk extends Sample {
     data?: ArgsData & {
       cpuProfile?: PartialProfile,
       timeDeltas?: Micro[],
-      lines?: Micro[],
+      lines?: number[],
       source?: ProfileSource,
+      columns?: number[],
     },
   };
 }

front_end/models/workspace/UISourceCode.test.ts

@@ -378,6 +378,38 @@ describe('UISourceCode', () => {
 
     assert.isTrue(sutObject.sut.editDisabled());
   });
+
+  describe('formatChanged', () => {
+    it('should remap performance decorations when the source is formatted', () => {
+      const {sut} = setupMockedUISourceCode();
+      const decorations = new Map<number, Map<number, number>>();
+      const columnData = new Map<number, number>();
+      columnData.set(10, 100);         // column 10, value 100
+      decorations.set(1, columnData);  // line 1
+
+      sut.setDecorationData(Workspace.UISourceCode.DecoratorType.PERFORMANCE, decorations);
+
+      const format = {
+        originalToFormatted: (lineNumber: number, columnNumber?: number) => {
+          if (lineNumber === 0 && columnNumber === 9) {
+            return [4, 1];  // new line 5, new column 2 (0-based)
+          }
+          return [lineNumber, columnNumber || 0];
+        },
+      };
+
+      sut.formatChanged(format);
+
+      const newDecorations = sut.getDecorationData(Workspace.UISourceCode.DecoratorType.PERFORMANCE);
+      assert.isDefined(newDecorations);
+
+      const newLineData = newDecorations.get(5);  // check line 5 (1-based)
+      assert.isDefined(newLineData);
+
+      const newData = newLineData.get(2);  // check column 2 (1-based)
+      assert.strictEqual(newData, 100);
+    });
+  });
 });
 
 describe('UILocation', () => {

front_end/models/workspace/UISourceCode.ts

@@ -35,7 +35,9 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   #contentType: Common.ResourceType.ResourceType;
   #requestContentPromise: Promise<TextUtils.ContentData.ContentDataOrError>|null = null;
   #decorations = new Map<string, any>();
+  #formattedDecorations = new Map<string, any>();
   #hasCommits = false;
+  #prettied = false;
   #messages: Set<Message>|null = null;
   #content: TextUtils.ContentData.ContentDataOrError|null = null;
   #forceLoadOnCheckContent = false;
@@ -497,6 +499,9 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   }
 
   getDecorationData(type: string): any {
+    if (this.#prettied && this.#formattedDecorations.get(type)) {
+      return this.#formattedDecorations.get(type);
+    }
     return this.#decorations.get(type);
   }
 
@@ -508,6 +513,45 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return this.#disableEdit;
   }
 
+  formatChanged(format: {originalToFormatted(lineNumber: number, columnNumber?: number): number[]}|null): void {
+    if (this.#prettied === Boolean(format)) {
+      return;
+    }
+    this.#prettied = Boolean(format);
+    if (!format) {
+      this.dispatchEventToListeners(Events.DecorationChanged, DecoratorType.PERFORMANCE);
+      return;
+    }
+    const performanceDecorations = this.#decorations.get(DecoratorType.PERFORMANCE);
+    if (!performanceDecorations) {
+      return;
+    }
+    let formattedPerformanceDecorations: Map<number, Map<number, number>> =
+        this.#formattedDecorations.get(DecoratorType.PERFORMANCE);
+    if (!formattedPerformanceDecorations) {
+      formattedPerformanceDecorations = new Map<number, Map<number, number>>();
+      this.#formattedDecorations.set(DecoratorType.PERFORMANCE, formattedPerformanceDecorations);
+    } else {
+      formattedPerformanceDecorations.clear();
+    }
+
+    for (const [lineNumber, columnData] of performanceDecorations) {
+      for (const [columnNumber, data] of columnData) {
+        const [formattedLineNumber, formattedColumnNumber] =
+            format.originalToFormatted(lineNumber - 1, columnNumber - 1);
+        const oneBasedFormattedLineNumber = formattedLineNumber + 1;
+        const oneBasedFormattedColumnNumber = formattedColumnNumber + 1;
+        let lineData = formattedPerformanceDecorations.get(oneBasedFormattedLineNumber);
+        if (!lineData) {
+          lineData = new Map();
+          formattedPerformanceDecorations.set(oneBasedFormattedLineNumber, lineData);
+        }
+        lineData.set(oneBasedFormattedColumnNumber, (lineData.get(oneBasedFormattedColumnNumber) || 0) + data);
+      }
+    }
+    this.dispatchEventToListeners(Events.DecorationChanged, 'performance');
+  }
+
   isIgnoreListed(): boolean {
     return IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(this);
   }
@@ -696,3 +740,9 @@ export class UISourceCodeMetadata {
     this.contentSize = contentSize;
   }
 }
+
+export const enum DecoratorType {
+  PERFORMANCE = 'performance',
+  MEMORY = 'memory',
+  COVERAGE = 'coverage',
+}

front_end/panels/sources/CoveragePlugin.ts

@@ -7,10 +7,10 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
-import type * as Workspace from '../../models/workspace/workspace.js';
+import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
-import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
+import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Coverage from '../coverage/coverage.js';
 
@@ -123,7 +123,7 @@ export class CoveragePlugin extends Plugin {
   }
 
   private getCoverageManager(): Coverage.CoverageDecorationManager.CoverageDecorationManager|undefined {
-    return this.uiSourceCode.getDecorationData(SourceFrame.SourceFrame.DecoratorType.COVERAGE);
+    return this.uiSourceCode.getDecorationData(Workspace.UISourceCode.DecoratorType.COVERAGE);
   }
 
   override editorInitialized(editor: TextEditor.TextEditor.TextEditor): void {
@@ -132,9 +132,9 @@ export class CoveragePlugin extends Plugin {
     }
   }
 
-  override decorationChanged(type: SourceFrame.SourceFrame.DecoratorType, editor: TextEditor.TextEditor.TextEditor):
+  override decorationChanged(type: Workspace.UISourceCode.DecoratorType, editor: TextEditor.TextEditor.TextEditor):
       void {
-    if (type === SourceFrame.SourceFrame.DecoratorType.COVERAGE) {
+    if (type === Workspace.UISourceCode.DecoratorType.COVERAGE) {
       this.startDecoUpdate(editor);
     }
   }

front_end/panels/sources/Plugin.ts

@@ -41,7 +41,7 @@ export class Plugin {
       void {
   }
 
-  decorationChanged(_type: SourceFrame.SourceFrame.DecoratorType, _editor: TextEditor.TextEditor.TextEditor): void {
+  decorationChanged(_type: Workspace.UISourceCode.DecoratorType, _editor: TextEditor.TextEditor.TextEditor): void {
   }
 
   editorExtension(): CodeMirror.Extension {

front_end/panels/sources/ProfilePlugin.ts

@@ -5,10 +5,9 @@
 
 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 Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
-import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 
 import {Plugin} from './Plugin.js';
 
@@ -90,22 +89,31 @@ class PerformanceMarker extends CodeMirror.GutterMarker {
 }
 
 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;
+    map: Map<number, number>|Map<number, Map<number, number>>, state: CodeMirror.EditorState,
+    type: Workspace.UISourceCode.DecoratorType): CodeMirror.RangeSet<CodeMirror.GutterMarker> {
+  const markerType = type === Workspace.UISourceCode.DecoratorType.PERFORMANCE ? PerformanceMarker : MemoryMarker;
   const markers: Array<CodeMirror.Range<CodeMirror.GutterMarker>> = [];
+  const aggregatedByLine = new Map<number, number>();
   for (const [line, value] of map) {
     if (line <= state.doc.lines) {
-      const {from} = state.doc.line(line);
-      markers.push(new markerType(value).range(from));
+      if (value instanceof Map) {
+        for (const [, data] of value) {
+          aggregatedByLine.set(line, (aggregatedByLine.get(line) || 0) + data);
+        }
+        continue;
+      }
+      aggregatedByLine.set(line, value);
     }
   }
+  for (const [line, value] of aggregatedByLine) {
+    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>>();
+const makeLineLevelProfilePlugin = (type: Workspace.UISourceCode.DecoratorType): typeof Plugin => class extends Plugin {
+  updateEffect = CodeMirror.StateEffect.define<Map<number, number>|Map<number, Map<number, number>>>();
   field: CodeMirror.StateField<CodeMirror.RangeSet<CodeMirror.GutterMarker>>;
   gutter: CodeMirror.Extension;
   compartment: CodeMirror.Compartment = new CodeMirror.Compartment();
@@ -134,7 +142,7 @@ const makeLineLevelProfilePlugin = (type: SourceFrame.SourceFrame.DecoratorType)
     return uiSourceCode.contentType().hasScripts();
   }
 
-  private getLineMap(): Map<number, number>|undefined {
+  private getLineMap(): Map<number, number>|Map<number, Map<number, number>>|undefined {
     return this.uiSourceCode.getDecorationData(type);
   }
 
@@ -144,7 +152,7 @@ const makeLineLevelProfilePlugin = (type: SourceFrame.SourceFrame.DecoratorType)
         !map ? [] : [this.field.init(state => markersFromProfileData(map, state, type)), this.gutter, theme]);
   }
 
-  override decorationChanged(type: SourceFrame.SourceFrame.DecoratorType, editor: TextEditor.TextEditor.TextEditor):
+  override decorationChanged(type: Workspace.UISourceCode.DecoratorType, editor: TextEditor.TextEditor.TextEditor):
       void {
     const installed = Boolean(editor.state.field(this.field, false));
     const map = this.getLineMap();
@@ -189,6 +197,6 @@ const theme = CodeMirror.EditorView.baseTheme({
   },
 });
 
-export const MemoryProfilePlugin = makeLineLevelProfilePlugin(SourceFrame.SourceFrame.DecoratorType.MEMORY);
+export const MemoryProfilePlugin = makeLineLevelProfilePlugin(Workspace.UISourceCode.DecoratorType.MEMORY);
 
-export const PerformanceProfilePlugin = makeLineLevelProfilePlugin(SourceFrame.SourceFrame.DecoratorType.PERFORMANCE);
+export const PerformanceProfilePlugin = makeLineLevelProfilePlugin(Workspace.UISourceCode.DecoratorType.PERFORMANCE);

front_end/panels/sources/UISourceCodeFrame.ts

@@ -238,6 +238,7 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
   }
 
   override async setContent(content: string): Promise<void> {
+    this.#uiSourceCode.formatChanged(this.formattedMap);
     this.disposePlugins();
     this.loadPlugins();
     await super.setContent(content);
@@ -423,7 +424,7 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
 
   private onDecorationChanged(event: Common.EventTarget.EventTargetEvent<string>): void {
     for (const plugin of this.plugins) {
-      plugin.decorationChanged(event.data as SourceFrame.SourceFrame.DecoratorType, this.textEditor);
+      plugin.decorationChanged(event.data as Workspace.UISourceCode.DecoratorType, this.textEditor);
     }
   }