chrome-devtools-frontend 1.0.1040857 → 1.0.1070764

package/front_end/panels/sources/sources-meta.ts

@@ -7,6 +7,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 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 * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
@@ -386,7 +387,14 @@ const UIStrings = {
   * @description Text for command of toggling debugger sidebar in Sources panel
   */
   toggleDebuggerSidebar: 'Toggle debugger sidebar',
-
+  /**
+   * @description Title of an action that navigates to the next editor in the Sources panel.
+   */
+  nextEditorTab: 'Next editor',
+  /**
+   * @description Title of an action that navigates to the next editor in the Sources panel.
+   */
+  previousEditorTab: 'Previous editor',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/sources/sources-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -904,6 +912,68 @@ UI.ActionRegistration.registerActionExtension({
   ],
 });
 
+UI.ActionRegistration.registerActionExtension({
+  actionId: 'sources.next-editor-tab',
+  category: UI.ActionRegistration.ActionCategory.SOURCES,
+  title: i18nLazyString(UIStrings.nextEditorTab),
+  async loadActionDelegate() {
+    const Sources = await loadSourcesModule();
+    return Sources.SourcesView.ActionDelegate.instance();
+  },
+  contextTypes() {
+    return maybeRetrieveContextTypes(Sources => [Sources.SourcesView.SourcesView]);
+  },
+  bindings: [
+    {
+      platform: UI.ActionRegistration.Platforms.WindowsLinux,
+      shortcut: 'Ctrl+PageDown',
+      keybindSets: [
+        UI.ActionRegistration.KeybindSet.DEVTOOLS_DEFAULT,
+        UI.ActionRegistration.KeybindSet.VS_CODE,
+      ],
+    },
+    {
+      platform: UI.ActionRegistration.Platforms.Mac,
+      shortcut: 'Meta+PageDown',
+      keybindSets: [
+        UI.ActionRegistration.KeybindSet.DEVTOOLS_DEFAULT,
+        UI.ActionRegistration.KeybindSet.VS_CODE,
+      ],
+    },
+  ],
+});
+
+UI.ActionRegistration.registerActionExtension({
+  actionId: 'sources.previous-editor-tab',
+  category: UI.ActionRegistration.ActionCategory.SOURCES,
+  title: i18nLazyString(UIStrings.previousEditorTab),
+  async loadActionDelegate() {
+    const Sources = await loadSourcesModule();
+    return Sources.SourcesView.ActionDelegate.instance();
+  },
+  contextTypes() {
+    return maybeRetrieveContextTypes(Sources => [Sources.SourcesView.SourcesView]);
+  },
+  bindings: [
+    {
+      platform: UI.ActionRegistration.Platforms.WindowsLinux,
+      shortcut: 'Ctrl+PageUp',
+      keybindSets: [
+        UI.ActionRegistration.KeybindSet.DEVTOOLS_DEFAULT,
+        UI.ActionRegistration.KeybindSet.VS_CODE,
+      ],
+    },
+    {
+      platform: UI.ActionRegistration.Platforms.Mac,
+      shortcut: 'Meta+PageUp',
+      keybindSets: [
+        UI.ActionRegistration.KeybindSet.DEVTOOLS_DEFAULT,
+        UI.ActionRegistration.KeybindSet.VS_CODE,
+      ],
+    },
+  ],
+});
+
 UI.ActionRegistration.registerActionExtension({
   actionId: 'sources.go-to-line',
   category: UI.ActionRegistration.ActionCategory.SOURCES,
@@ -985,10 +1055,16 @@ UI.ActionRegistration.registerActionExtension({
     {
       platform: UI.ActionRegistration.Platforms.WindowsLinux,
       shortcut: 'Ctrl+b',
+      keybindSets: [
+        UI.ActionRegistration.KeybindSet.DEVTOOLS_DEFAULT,
+      ],
     },
     {
       platform: UI.ActionRegistration.Platforms.Mac,
       shortcut: 'Meta+b',
+      keybindSets: [
+        UI.ActionRegistration.KeybindSet.DEVTOOLS_DEFAULT,
+      ],
     },
     {
       shortcut: 'F9',
@@ -1266,10 +1342,30 @@ UI.ActionRegistration.registerActionExtension({
     {
       platform: UI.ActionRegistration.Platforms.WindowsLinux,
       shortcut: 'Ctrl+Shift+y',
+      keybindSets: [
+        UI.ActionRegistration.KeybindSet.DEVTOOLS_DEFAULT,
+      ],
     },
     {
       platform: UI.ActionRegistration.Platforms.Mac,
       shortcut: 'Meta+Shift+y',
+      keybindSets: [
+        UI.ActionRegistration.KeybindSet.DEVTOOLS_DEFAULT,
+      ],
+    },
+    {
+      platform: UI.ActionRegistration.Platforms.WindowsLinux,
+      shortcut: 'Ctrl+b',
+      keybindSets: [
+        UI.ActionRegistration.KeybindSet.VS_CODE,
+      ],
+    },
+    {
+      platform: UI.ActionRegistration.Platforms.WindowsLinux,
+      shortcut: 'Meta+b',
+      keybindSets: [
+        UI.ActionRegistration.KeybindSet.VS_CODE,
+      ],
     },
   ],
 });
@@ -1704,6 +1800,19 @@ Common.Revealer.registerRevealer({
   },
 });
 
+Common.Revealer.registerRevealer({
+  contextTypes() {
+    return [
+      Bindings.BreakpointManager.BreakpointLocation,
+    ];
+  },
+  destination: Common.Revealer.RevealerDestination.SOURCES_PANEL,
+  async loadRevealer() {
+    const Sources = await loadSourcesModule();
+    return Sources.DebuggerPlugin.BreakpointLocationRevealer.instance();
+  },
+});
+
 UI.Toolbar.registerToolbarItem({
   actionId: 'sources.add-folder-to-workspace',
   location: UI.Toolbar.ToolbarItemLocation.FILES_NAVIGATION_TOOLBAR,
@@ -1771,7 +1880,7 @@ QuickOpen.FilteredListWidget.registerProvider({
   iconName: 'ic_command_go_to_symbol',
   async provider() {
     const Sources = await loadSourcesModule();
-    return Sources.OutlineQuickOpen.OutlineQuickOpen.instance();
+    return new Sources.OutlineQuickOpen.OutlineQuickOpen();
   },
   titlePrefix: i18nLazyString(UIStrings.goTo),
   titleSuggestion: i18nLazyString(UIStrings.symbol),
@@ -1782,7 +1891,7 @@ QuickOpen.FilteredListWidget.registerProvider({
   iconName: 'ic_command_go_to_line',
   async provider() {
     const Sources = await loadSourcesModule();
-    return Sources.GoToLineQuickOpen.GoToLineQuickOpen.instance();
+    return new Sources.GoToLineQuickOpen.GoToLineQuickOpen();
   },
   titlePrefix: i18nLazyString(UIStrings.goTo),
   titleSuggestion: i18nLazyString(UIStrings.line),
@@ -1793,7 +1902,7 @@ QuickOpen.FilteredListWidget.registerProvider({
   iconName: 'ic_command_open_file',
   async provider() {
     const Sources = await loadSourcesModule();
-    return Sources.OpenFileQuickOpen.OpenFileQuickOpen.instance();
+    return new Sources.OpenFileQuickOpen.OpenFileQuickOpen();
   },
   titlePrefix: i18nLazyString(UIStrings.open),
   titleSuggestion: i18nLazyString(UIStrings.file),

package/front_end/panels/sources/sources.ts

@@ -15,7 +15,6 @@ import * as FilteredUISourceCodeListProvider from './FilteredUISourceCodeListPro
 import * as GoToLineQuickOpen from './GoToLineQuickOpen.js';
 import * as InplaceFormatterEditorAction from './InplaceFormatterEditorAction.js';
 import * as JavaScriptBreakpointsSidebarPane from './JavaScriptBreakpointsSidebarPane.js';
-import * as JavaScriptCompilerPlugin from './JavaScriptCompilerPlugin.js';
 import * as NavigatorView from './NavigatorView.js';
 import * as OpenFileQuickOpen from './OpenFileQuickOpen.js';
 import * as OutlineQuickOpen from './OutlineQuickOpen.js';
@@ -48,7 +47,6 @@ export {
   GoToLineQuickOpen,
   InplaceFormatterEditorAction,
   JavaScriptBreakpointsSidebarPane,
-  JavaScriptCompilerPlugin,
   NavigatorView,
   OpenFileQuickOpen,
   OutlineQuickOpen,

package/front_end/panels/sources/watchExpressionsSidebarPane.css

@@ -35,9 +35,8 @@
 
 .watch-expression-title {
   white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
   line-height: 20px;
+  display: flex;
 }
 
 .watch-expression-title:hover {
@@ -54,7 +53,7 @@
   min-height: 20px;
 }
 
-.watch-expressions .name {
+.watch-expression .name {
   --override-watch-expression-name-color: rgb(136 19 145);
 
   color: var(--override-watch-expression-name-color);
@@ -62,10 +61,11 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  flex-shrink: 2;
 }
 
-.-theme-with-dark-background .watch-expressions .name,
-:host-context(.-theme-with-dark-background) .watch-expressions .name {
+.-theme-with-dark-background .watch-expression .name,
+:host-context(.-theme-with-dark-background) .watch-expression .name {
   --override-watch-expression-name-color: rgb(227 110 236);
 }
 
@@ -77,9 +77,13 @@
   flex: none;
 }
 
-.watch-expressions .value {
+.watch-expression .value {
   white-space: nowrap;
   display: inline;
+  overflow: hidden;
+  padding-left: 4px;
+  text-overflow: ellipsis;
+  flex-shrink: 1;
 }
 
 .watch-expression .text-prompt {

package/front_end/panels/timeline/PerformanceModel.ts

@@ -6,6 +6,7 @@ import * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Bindings from '../../models/bindings/bindings.js';
 import * as TimelineModel from '../../models/timeline_model/timeline_model.js';
+import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
 
 import {TimelineUIUtils} from './TimelineUIUtils.js';
 
@@ -16,7 +17,6 @@ export class PerformanceModel extends Common.ObjectWrapper.ObjectWrapper<EventTy
   private readonly timelineModelInternal: TimelineModel.TimelineModel.TimelineModelImpl;
   private readonly frameModelInternal: TimelineModel.TimelineFrameModel.TimelineFrameModel;
   private filmStripModelInternal: SDK.FilmStripModel.FilmStripModel|null;
-  private readonly irModel: TimelineModel.TimelineIRModel.TimelineIRModel;
   private windowInternal: Window;
   private readonly extensionTracingModels: {
     title: string,
@@ -35,7 +35,6 @@ export class PerformanceModel extends Common.ObjectWrapper.ObjectWrapper<EventTy
     this.frameModelInternal = new TimelineModel.TimelineFrameModel.TimelineFrameModel(
         event => TimelineUIUtils.eventStyle(event).category.name);
     this.filmStripModelInternal = null;
-    this.irModel = new TimelineModel.TimelineIRModel.TimelineIRModel();
 
     this.windowInternal = {left: 0, right: Infinity};
 
@@ -71,23 +70,15 @@ export class PerformanceModel extends Common.ObjectWrapper.ObjectWrapper<EventTy
     return this.filtersInternal.every(f => f.accept(event));
   }
 
-  setTracingModel(model: SDK.TracingModel.TracingModel): void {
+  async setTracingModel(model: SDK.TracingModel.TracingModel): Promise<void> {
     this.tracingModelInternal = model;
     this.timelineModelInternal.setEvents(model);
-
-    let animationEvents: SDK.TracingModel.AsyncEvent[]|null = null;
-    for (const track of this.timelineModelInternal.tracks()) {
-      if (track.type === TimelineModel.TimelineModel.TrackType.Animation) {
-        animationEvents = track.asyncEvents;
-      }
-    }
-    if (animationEvents) {
-      this.irModel.populate([], animationEvents || []);
-    }
+    await this.addSourceMapListeners();
 
     const mainTracks = this.timelineModelInternal.tracks().filter(
         track => track.type === TimelineModel.TimelineModel.TrackType.MainThread && track.forMainFrame &&
             track.events.length);
+
     const threadData = mainTracks.map(track => {
       const event = track.events[0];
       return {thread: event.thread, time: event.startTime};
@@ -103,6 +94,65 @@ export class PerformanceModel extends Common.ObjectWrapper.ObjectWrapper<EventTy
     this.autoWindowTimes();
   }
 
+  #cpuProfileNodes(): SDK.CPUProfileDataModel.CPUProfileNode[] {
+    return this.timelineModel().cpuProfiles().flatMap(p => p.nodes() || []);
+  }
+
+  async addSourceMapListeners(): Promise<void> {
+    const debuggerModelsToListen = new Set<SDK.DebuggerModel.DebuggerModel>();
+    for (const node of this.#cpuProfileNodes()) {
+      if (!node) {
+        continue;
+      }
+      const debuggerModelToListen = this.#maybeGetDebuggerModelForNode(node);
+      if (!debuggerModelToListen) {
+        continue;
+      }
+
+      debuggerModelsToListen.add(debuggerModelToListen);
+    }
+    for (const debuggerModel of debuggerModelsToListen) {
+      debuggerModel.sourceMapManager().addEventListener(
+          SDK.SourceMapManager.Events.SourceMapAttached, this.#onAttachedSourceMap, this);
+    }
+    await this.#resolveNamesFromCPUProfile();
+  }
+
+  // If a node corresponds to a script that has not been parsed or a script
+  // that has a source map, we should listen to SourceMapAttached events to
+  // attempt a function name resolving.
+  #maybeGetDebuggerModelForNode(node: SDK.CPUProfileDataModel.CPUProfileNode): SDK.DebuggerModel.DebuggerModel|null {
+    const target = node.target();
+    const debuggerModel = target?.model(SDK.DebuggerModel.DebuggerModel);
+    if (!debuggerModel) {
+      return null;
+    }
+    const script = debuggerModel.scriptForId(String(node.callFrame.scriptId));
+    const shouldListenToSourceMap = !script || script.sourceMapURL;
+    if (shouldListenToSourceMap) {
+      return debuggerModel;
+    }
+    return null;
+  }
+
+  async #resolveNamesFromCPUProfile(): Promise<void> {
+    for (const node of this.#cpuProfileNodes()) {
+      const resolvedFunctionName =
+          await SourceMapScopes.NamesResolver.resolveProfileFrameFunctionName(node.callFrame, node.target());
+      node.setFunctionName(resolvedFunctionName);
+    }
+  }
+
+  async #onAttachedSourceMap(
+      event: Common.EventTarget.EventTargetEvent<{client: SDK.Script.Script, sourceMap: SDK.SourceMap.SourceMap}>):
+      Promise<void> {
+    if (!this.#cpuProfileNodes().some(node => node.scriptId === event.data.client.scriptId)) {
+      return;
+    }
+    await this.#resolveNamesFromCPUProfile();
+    this.dispatchEventToListeners(Events.NamesResolved);
+  }
+
   addExtensionEvents(title: string, model: SDK.TracingModel.TracingModel, timeOffset: number): void {
     this.extensionTracingModels.push({model: model, title: title, timeOffset: timeOffset});
     if (!this.tracingModelInternal) {
@@ -143,10 +193,6 @@ export class PerformanceModel extends Common.ObjectWrapper.ObjectWrapper<EventTy
     return this.frameModelInternal;
   }
 
-  interactionRecords(): Common.SegmentedRange.Segment<TimelineModel.TimelineIRModel.Phases>[] {
-    return this.irModel.interactionRecords();
-  }
-
   extensionInfo(): {
     title: string,
     model: SDK.TracingModel.TracingModel,
@@ -243,8 +289,8 @@ export class PerformanceModel extends Common.ObjectWrapper.ObjectWrapper<EventTy
 export enum Events {
   ExtensionDataAdded = 'ExtensionDataAdded',
   WindowChanged = 'WindowChanged',
+  NamesResolved = 'NamesResolved',
 }
-
 export interface WindowChangedEvent {
   window: Window;
   animate: boolean|undefined;
@@ -253,6 +299,7 @@ export interface WindowChangedEvent {
 export type EventTypes = {
   [Events.ExtensionDataAdded]: void,
   [Events.WindowChanged]: WindowChangedEvent,
+  [Events.NamesResolved]: void,
 };
 
 export interface Window {

package/front_end/panels/timeline/TimelineController.ts

@@ -142,7 +142,11 @@ export class TimelineController implements SDK.TargetManager.SDKModelObserver<SD
 
     this.client.loadingStarted();
     await this.waitForTracingToStop(true);
-    this.allSourcesFinished();
+    await this.allSourcesFinished();
+    return this.performanceModel;
+  }
+
+  getPerformanceModel(): PerformanceModel {
     return this.performanceModel;
   }
 
@@ -232,16 +236,17 @@ export class TimelineController implements SDK.TargetManager.SDKModelObserver<SD
     this.tracingCompleteCallback = null;
   }
 
-  private allSourcesFinished(): void {
+  private async allSourcesFinished(): Promise<void> {
     this.client.processingStarted();
-    window.setTimeout(() => this.finalizeTrace(), 0);
+    await this.finalizeTrace();
   }
 
   private async finalizeTrace(): Promise<void> {
     this.injectCpuProfileEvents();
     await SDK.TargetManager.TargetManager.instance().resumeAllTargets();
     this.tracingModel.tracingComplete();
-    this.client.loadingComplete(this.tracingModel);
+    await this.client.loadingComplete(this.tracingModel);
+    this.client.loadingCompleteForTest();
   }
 
   private injectCpuProfileEvent(pid: number, tid: number, cpuProfile: Protocol.Profiler.Profile|null): void {
@@ -302,7 +307,7 @@ export class TimelineController implements SDK.TargetManager.SDKModelObserver<SD
     const mainRendererProcessId = mainFrame.processId;
     const mainProcess = this.tracingModel.getProcessById(mainRendererProcessId);
     if (mainProcess) {
-      const target = SDK.TargetManager.TargetManager.instance().mainTarget();
+      const target = SDK.TargetManager.TargetManager.instance().mainFrameTarget();
       if (target) {
         targetIdToPid.set(target.id(), mainProcess.id());
       }
@@ -381,6 +386,7 @@ export interface Client {
   processingStarted(): void;
   loadingProgress(progress?: number): void;
   loadingComplete(tracingModel: SDK.TracingModel.TracingModel|null): void;
+  loadingCompleteForTest(): void;
 }
 export interface RecordingOptions {
   enableJSSampling?: boolean;

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -155,8 +155,8 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineFlameChartDataProvider.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-type TimelineFlameChartEntry = (SDK.FilmStripModel.Frame|SDK.TracingModel.Event|
-                                TimelineModel.TimelineFrameModel.TimelineFrame|TimelineModel.TimelineIRModel.Phases);
+type TimelineFlameChartEntry =
+    (SDK.FilmStripModel.Frame|SDK.TracingModel.Event|TimelineModel.TimelineFrameModel.TimelineFrame);
 export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements
     PerfUI.FlameChart.FlameChartDataProvider {
   private readonly font: string;
@@ -185,7 +185,6 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   private entryData!: TimelineFlameChartEntry[];
   private entryTypeByLevel!: EntryType[];
   private markers!: TimelineFlameChartMarker[];
-  private asyncColorByInteractionPhase!: Map<TimelineModel.TimelineIRModel.Phases, string>;
   private screenshotImageCache!: Map<SDK.FilmStripModel.Frame, HTMLImageElement|null>;
   private extensionInfo!: {
     title: string,
@@ -352,7 +351,6 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     this.entryIndexToTitle = [];
     this.markers = [];
     this.asyncColorByCategory = new Map();
-    this.asyncColorByInteractionPhase = new Map();
     this.extensionInfo = [];
     this.screenshotImageCache = new Map();
   }
@@ -421,7 +419,6 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
 
   private processInspectorTrace(): void {
     this.appendFrames();
-    this.appendInteractionRecords();
 
     const eventEntryType = EntryType.Event;
 
@@ -753,27 +750,6 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     return group;
   }
 
-  private appendInteractionRecords(): void {
-    if (!this.performanceModel) {
-      return;
-    }
-    const interactionRecords = this.performanceModel.interactionRecords();
-    if (!interactionRecords.length) {
-      return;
-    }
-    for (const segment of interactionRecords) {
-      const index = this.entryData.length;
-      this.entryData.push((segment.data as TimelineModel.TimelineIRModel.Phases));
-      this.entryIndexToTitle[index] = (segment.data as string);
-      if (this.timelineDataInternal) {
-        this.timelineDataInternal.entryLevels[index] = this.currentLevel;
-        this.timelineDataInternal.entryTotalTimes[index] = segment.end - segment.begin;
-        this.timelineDataInternal.entryStartTimes[index] = segment.begin;
-      }
-    }
-    this.entryTypeByLevel[this.currentLevel++] = EntryType.InteractionRecord;
-  }
-
   private appendPageMetrics(): void {
     this.entryTypeByLevel[this.currentLevel] = EntryType.Event;
 
@@ -916,12 +892,9 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     this.framesHeader.collapsible = hasFilmStrip;
     this.appendHeader(i18nString(UIStrings.frames), this.framesHeader, false /* selectable */);
     this.frameGroup = this.timelineDataInternal.groups[this.timelineDataInternal.groups.length - 1];
-    const style = TimelineUIUtils.markerStyleForFrame();
 
     this.entryTypeByLevel[this.currentLevel] = EntryType.Frame;
     for (const frame of this.performanceModel.frames()) {
-      this.markers.push(
-          new TimelineFlameChartMarker(frame.startTime, frame.startTime - this.model.minimumRecordTime(), style));
       this.appendFrame(frame);
     }
     ++this.currentLevel;
@@ -1071,20 +1044,12 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
           event.hasCategory(TimelineModel.TimelineModel.TimelineModelImpl.Category.UserTiming)) {
         return this.consoleColorGenerator.colorForID(event.name);
       }
-      if (event.hasCategory(TimelineModel.TimelineModel.TimelineModelImpl.Category.LatencyInfo)) {
-        const phase = TimelineModel.TimelineIRModel.TimelineIRModel.phaseForEvent(event) ||
-            TimelineModel.TimelineIRModel.Phases.Uncategorized;
-        return patchColorAndCache(this.asyncColorByInteractionPhase, phase, TimelineUIUtils.interactionPhaseColor);
-      }
       const category = TimelineUIUtils.eventStyle(event).category;
       return patchColorAndCache(this.asyncColorByCategory, category, () => category.color);
     }
     if (type === entryTypes.Frame) {
       return 'white';
     }
-    if (type === entryTypes.InteractionRecord) {
-      return 'transparent';
-    }
     if (type === entryTypes.ExtensionEvent) {
       const event = (this.entryData[entryIndex] as SDK.TracingModel.Event);
       return this.extensionColorGenerator.colorForID(event.name);
@@ -1224,15 +1189,6 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       return true;
     }
 
-    if (type === entryTypes.InteractionRecord) {
-      const color = TimelineUIUtils.interactionPhaseColor((data as TimelineModel.TimelineIRModel.Phases));
-      context.fillStyle = color;
-      context.fillRect(barX, barY, barWidth - 1, 2);
-      context.fillRect(barX, barY - 3, 2, 3);
-      context.fillRect(barX + barWidth - 3, barY - 3, 2, 3);
-      return false;
-    }
-
     if (type === entryTypes.Event) {
       const event = (data as SDK.TracingModel.Event);
       if (event.hasCategory(TimelineModel.TimelineModel.TimelineModelImpl.Category.LatencyInfo)) {
@@ -1394,8 +1350,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       return this.lastSelection.entryIndex;
     }
     const index = this.entryData.indexOf(
-        (selection.object() as SDK.TracingModel.Event | TimelineModel.TimelineIRModel.Phases |
-         TimelineModel.TimelineFrameModel.TimelineFrame));
+        (selection.object() as SDK.TracingModel.Event | TimelineModel.TimelineFrameModel.TimelineFrame));
     if (index !== -1) {
       this.lastSelection = new Selection(selection, index);
     }
@@ -1482,7 +1437,6 @@ export type EventTypes = {
 export enum EntryType {
   Frame = 'Frame',
   Event = 'Event',
-  InteractionRecord = 'InteractionRecord',
   ExtensionEvent = 'ExtensionEvent',
   Screenshot = 'Screenshot',
 }

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -264,7 +264,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     }
   }
 
-  private updateColorMapper(): void {
+  updateColorMapper(): void {
     this.urlToColorCache = new Map();
     if (!this.model) {
       return;

package/front_end/panels/timeline/TimelineLoader.ts

@@ -63,46 +63,63 @@ export class TimelineLoader implements Common.StringOutputStream.OutputStream {
     this.jsonTokenizer = new TextUtils.TextUtils.BalancedJSONTokenizer(this.writeBalancedJSON.bind(this), true);
   }
 
-  static loadFromFile(file: File, client: Client): TimelineLoader {
+  static async loadFromFile(file: File, client: Client): Promise<TimelineLoader> {
     const loader = new TimelineLoader(client);
     const fileReader = new Bindings.FileUtils.ChunkedFileReader(file, TransferChunkLengthBytes);
     loader.canceledCallback = fileReader.cancel.bind(fileReader);
     loader.totalSize = file.size;
-    void fileReader.read(loader).then(success => {
-      if (!success && fileReader.error()) {
-        // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        loader.reportErrorAndCancelLoading((fileReader.error() as any).message);
-      }
-    });
+    const success = await fileReader.read(loader);
+    if (!success && fileReader.error()) {
+      // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      loader.reportErrorAndCancelLoading((fileReader.error() as any).message);
+    }
     return loader;
   }
 
   static loadFromEvents(events: SDK.TracingManager.EventPayload[], client: Client): TimelineLoader {
     const loader = new TimelineLoader(client);
-
     window.setTimeout(async () => {
-      const eventsPerChunk = 5000;
-      client.loadingStarted();
-      for (let i = 0; i < events.length; i += eventsPerChunk) {
-        const chunk = events.slice(i, i + eventsPerChunk);
-        (loader.tracingModel as SDK.TracingModel.TracingModel).addEvents(chunk);
-        client.loadingProgress((i + chunk.length) / events.length);
-        await new Promise(r => window.setTimeout(r));  // Yield event loop to paint.
-      }
-      void loader.close();
+      void loader.addEvents(events);
     });
-
     return loader;
   }
 
   static loadFromURL(url: Platform.DevToolsPath.UrlString, client: Client): TimelineLoader {
     const loader = new TimelineLoader(client);
-    const allowFileUNCPaths = Common.Settings.Settings.instance().moduleSetting('network.enable-unc-loading').get();
-    Host.ResourceLoader.loadAsStream(url, null, loader, undefined, allowFileUNCPaths);
+    const stream = new Common.StringOutputStream.StringOutputStream();
+    client.loadingStarted();
+
+    const allowRemoteFilePaths =
+        Common.Settings.Settings.instance().moduleSetting('network.enable-remote-file-loading').get();
+    Host.ResourceLoader.loadAsStream(url, null, stream, finishedCallback, allowRemoteFilePaths);
+
+    function finishedCallback(
+        success: boolean, _headers: {[x: string]: string},
+        errorDescription: Host.ResourceLoader.LoadErrorDescription): void {
+      if (!success) {
+        return loader.reportErrorAndCancelLoading(errorDescription.message);
+      }
+      const txt = stream.data();
+      const events = JSON.parse(txt);
+      void loader.addEvents(events);
+    }
+
     return loader;
   }
 
+  async addEvents(events: SDK.TracingManager.EventPayload[]): Promise<void> {
+    this.client?.loadingStarted();
+    const eventsPerChunk = 5000;
+    for (let i = 0; i < events.length; i += eventsPerChunk) {
+      const chunk = events.slice(i, i + eventsPerChunk);
+      (this.tracingModel as SDK.TracingModel.TracingModel).addEvents(chunk);
+      this.client?.loadingProgress((i + chunk.length) / events.length);
+      await new Promise(r => window.setTimeout(r));  // Yield event loop to paint.
+    }
+    void this.close();
+  }
+
   cancel(): void {
     this.tracingModel = null;
     this.backingStorage.reset();
@@ -230,16 +247,16 @@ export class TimelineLoader implements Common.StringOutputStream.OutputStream {
       return;
     }
     this.client.processingStarted();
-    window.setTimeout(() => this.finalizeTrace(), 0);
+    await this.finalizeTrace();
   }
 
-  private finalizeTrace(): void {
+  private async finalizeTrace(): Promise<void> {
     if (this.state === State.LoadingCPUProfileFormat) {
       this.parseCPUProfileFormat(this.buffer);
       this.buffer = '';
     }
     (this.tracingModel as SDK.TracingModel.TracingModel).tracingComplete();
-    (this.client as Client).loadingComplete(this.tracingModel);
+    await (this.client as Client).loadingComplete(this.tracingModel);
   }
 
   private parseCPUProfileFormat(text: string): void {