chrome-devtools-frontend 1.0.1559913 → 1.0.1561080

package/front_end/panels/timeline/TimelineController.ts

@@ -2,7 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
@@ -15,15 +17,82 @@ import * as Tracing from '../../services/tracing/tracing.js';
 import * as RecordingMetadata from './RecordingMetadata.js';
 
 const UIStrings = {
+  /**
+   * @description Text in Timeline Panel of the Performance panel
+   */
+  initializingTracing: 'Initializing tracing…',
   /**
    * @description Text in Timeline Controller of the Performance panel indicating that the Performance Panel cannot
    * record a performance trace because the type of target (where possible types are page, service worker and shared
    * worker) doesn't support it.
    */
   tracingNotSupported: 'Performance trace recording not supported for this type of target',
+  /**
+   * @description Text in a status dialog shown during a performance trace of a web page. It indicates to the user what the tracing is currently waiting on.
+   */
+  waitingForLoadEvent: 'Waiting for load event…',
+  /**
+   * @description Text in a status dialog shown during a performance trace of a web page. It indicates to the user what the tracing is currently waiting on.
+   */
+  waitingForLoadEventPlus5Seconds: 'Waiting for load event (+5s)…',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineController.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+type StatusUpdate = string|null;
+type Listener = (status: StatusUpdate) => void;
+
+/**
+ * Accepts promises with a text label, and reports to a listener as promises resolve.
+ * Only returns the label of the first incomplete promise. When no more promises
+ * remain, the updated status is null.
+ */
+class StatusChecker {
+  #checkers: Array<{title: string, complete: boolean}> = [];
+  #listener: Listener|null = null;
+  #currentStatus: StatusUpdate = null;
+
+  add(title: string, promise: Promise<unknown>): void {
+    const item = {title, complete: false};
+    this.#checkers.push(item);
+
+    void promise.finally(() => {
+      item.complete = true;
+      this.#evaluate();
+    });
+  }
+
+  setListener(listener: Listener): void {
+    this.#listener = null;
+    this.#evaluate();
+    this.#listener = listener;
+    listener(this.#currentStatus);
+  }
+
+  removeListener(): void {
+    this.#listener = null;
+  }
+
+  #evaluate(): void {
+    let nextStatus: StatusUpdate = null;
+
+    // Only report the status of the first incomplete checker.
+    for (const checker of this.#checkers) {
+      if (!checker.complete) {
+        nextStatus = checker.title;
+        break;
+      }
+    }
+
+    if (nextStatus !== this.#currentStatus) {
+      this.#currentStatus = nextStatus;
+      if (this.#listener) {
+        this.#listener(nextStatus);
+      }
+    }
+  }
+}
+
 export class TimelineController implements Tracing.TracingManager.TracingManagerClient {
   readonly primaryPageTarget: SDK.Target.Target;
   readonly rootTarget: SDK.Target.Target;
@@ -35,6 +104,10 @@ export class TimelineController implements Tracing.TracingManager.TracingManager
   private readonly client: Client;
   private tracingCompletePromise: PromiseWithResolvers<void>|null = null;
 
+  // These properties are only used for "Reload and record".
+  #statusChecker: StatusChecker|null = null;
+  #loadEventFiredCb: (() => void)|null = null;
+
   /**
    * We always need to profile against the DevTools root target, which is
    * the target that DevTools is attached to.
@@ -76,11 +149,72 @@ export class TimelineController implements Tracing.TracingManager.TracingManager
     }
   }
 
-  async startRecording(options: RecordingOptions): Promise<Protocol.ProtocolResponseWithError> {
+  async #navigateToAboutBlank(): Promise<void> {
+    const aboutBlankNavigationComplete = new Promise<void>(async (resolve, reject) => {
+      const target = this.primaryPageTarget;
+      const resourceModel = target.model(SDK.ResourceTreeModel.ResourceTreeModel);
+      if (!resourceModel) {
+        reject('Could not load resourceModel');
+        return;
+      }
+
+      /**
+       * To clear out the page and any state from prior test runs, we
+       * navigate to about:blank before initiating the trace recording.
+       * Once we have navigated to about:blank, we start recording and
+       * then navigate to the original page URL, to ensure we profile the
+       * page load.
+       **/
+      function waitForAboutBlank(event: Common.EventTarget.EventTargetEvent<SDK.ResourceTreeModel.ResourceTreeFrame>):
+          void {
+        if (event.data.url === 'about:blank') {
+          resolve();
+        } else {
+          reject(`Unexpected navigation to ${event.data.url}`);
+        }
+        resourceModel?.removeEventListener(SDK.ResourceTreeModel.Events.FrameNavigated, waitForAboutBlank);
+      }
+      resourceModel.addEventListener(SDK.ResourceTreeModel.Events.FrameNavigated, waitForAboutBlank);
+      await resourceModel.navigate('about:blank' as Platform.DevToolsPath.UrlString);
+    });
+
+    await aboutBlankNavigationComplete;
+  }
+
+  async #navigateWithSDK(url: Platform.DevToolsPath.UrlString): Promise<void> {
+    const resourceModel = this.primaryPageTarget.model(SDK.ResourceTreeModel.ResourceTreeModel);
+    if (!resourceModel) {
+      throw new Error('expected to find ResourceTreeModel');
+    }
+
+    const loadPromiseWithResolvers = Promise.withResolvers<void>();
+    this.#loadEventFiredCb = loadPromiseWithResolvers.resolve;
+    SDK.TargetManager.TargetManager.instance().addModelListener(
+        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.Load, this.#onLoadEventFired, this);
+
+    // We don't need to await this because we are purposefully showing UI
+    // progress as the page loads & tracing is underway.
+    void resourceModel.navigate(url);
+
+    await loadPromiseWithResolvers.promise;
+  }
+
+  async startRecording(options: RecordingOptions): Promise<void> {
     function disabledByDefault(category: string): string {
       return 'disabled-by-default-' + category;
     }
 
+    this.client.recordingStatus(i18nString(UIStrings.initializingTracing));
+
+    // If we are doing "Reload & record", we first navigate the page to
+    // about:blank. This is to ensure any data on the timeline from any
+    // previous performance recording is lost, avoiding the problem where a
+    // timeline will show data & screenshots from a previous page load that
+    // was not relevant.
+    if (options.navigateToUrl) {
+      await this.#navigateToAboutBlank();
+    }
+
     // The following categories are also used in other tools, but this panel
     // offers the possibility of turning them off (see below).
     // 'disabled-by-default-devtools.screenshot'
@@ -144,11 +278,40 @@ export class TimelineController implements Tracing.TracingManager.TracingManager
     this.#navigationUrls = [];
     this.#fieldData = null;
     this.#recordingStartTime = Date.now();
+
     const response = await this.startRecordingWithCategories(categoriesArray.join(','));
     if (response.getError()) {
       await SDK.TargetManager.TargetManager.instance().resumeAllTargets();
+      throw new Error(response.getError());
     }
-    return response;
+
+    if (!options.navigateToUrl) {
+      return;
+    }
+
+    // If the user hit "Reload & record", by this point we have:
+    // 1. Navigated to about:blank
+    // 2. Initiated tracing.
+    // We therefore now should navigate back to the original URL that the user wants to profile.
+
+    // Setup a status checker so we can wait long enough for the page to settle,
+    // and to let users know what is going on.
+    this.#statusChecker?.removeListener();
+    this.#statusChecker = new StatusChecker();
+
+    const loadEvent = this.#navigateWithSDK(options.navigateToUrl);
+    this.#statusChecker.add(i18nString(UIStrings.waitingForLoadEvent), loadEvent);
+    this.#statusChecker.add(
+        i18nString(UIStrings.waitingForLoadEventPlus5Seconds),
+        loadEvent.then(() => new Promise(resolve => setTimeout(resolve, 5000))));
+
+    this.#statusChecker.setListener(status => {
+      if (status === null) {
+        void this.stopRecording();
+      } else {
+        this.client.recordingStatus(status);
+      }
+    });
   }
 
   async #onFrameNavigated(event: {data: SDK.ResourceTreeModel.ResourceTreeFrame}): Promise<void> {
@@ -159,7 +322,22 @@ export class TimelineController implements Tracing.TracingManager.TracingManager
     this.#navigationUrls.push(event.data.url);
   }
 
+  async #onLoadEventFired(
+      event: Common.EventTarget
+          .EventTargetEvent<{resourceTreeModel: SDK.ResourceTreeModel.ResourceTreeModel, loadTime: number}>):
+      Promise<void> {
+    if (!event.data.resourceTreeModel.mainFrame?.isPrimaryFrame()) {
+      return;
+    }
+
+    this.#loadEventFiredCb?.();
+  }
+
   async stopRecording(): Promise<void> {
+    this.#statusChecker?.removeListener();
+    this.#statusChecker = null;
+    this.#loadEventFiredCb = null;
+
     if (this.tracingManager) {
       this.tracingManager.stop();
     }
@@ -167,6 +345,8 @@ export class TimelineController implements Tracing.TracingManager.TracingManager
     SDK.TargetManager.TargetManager.instance().removeModelListener(
         SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated, this.#onFrameNavigated,
         this);
+    SDK.TargetManager.TargetManager.instance().removeModelListener(
+        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.Load, this.#onLoadEventFired, this);
 
     // When throttling is applied to the main renderer, it can slow down the
     // collection of trace events once tracing has completed. Therefore we
@@ -286,7 +466,8 @@ export class TimelineController implements Tracing.TracingManager.TracingManager
 }
 
 export interface Client {
-  recordingProgress(usage: number): void;
+  recordingProgress(bufferUsage: number): void;
+  recordingStatus(status: string): void;
   loadingStarted(): void;
   processingStarted(): void;
   loadingProgress(progress?: number): void;
@@ -300,4 +481,5 @@ export interface RecordingOptions {
   capturePictures?: boolean;
   captureFilmStrip?: boolean;
   captureSelectorStats?: boolean;
+  navigateToUrl?: Platform.DevToolsPath.UrlString;
 }

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -453,6 +453,20 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     return this.compatibilityTracksAppender;
   }
 
+  #insertEventToEntryData(event: Trace.Types.Events.Event): number {
+    // TODO(crbug.com/457866795): We don't actually need to keep this sorted yet, because we sort
+    // in CompatibilityTracksAppender.eventsInTrack. But if we ever wanted to remove that sort,
+    // the following code will be needed.
+
+    // const index = Platform.ArrayUtilities.lowerBound(this.entryData, event, (a, b) => a.ts - b.ts);
+    // this.entryData.splice(index, 0, event);
+    // return index;
+
+    // For now, just keep it simple and slightly faster.
+    this.entryData.push(event);
+    return this.entryData.length - 1;
+  }
+
   /**
    * Returns the instance of the timeline flame chart data, without
    * adding data to it. In case the timeline data hasn't been instanced
@@ -546,7 +560,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     this.entryData = [];
     this.entryTypeByLevel = [];
     this.entryIndexToTitle = [];
-    this.#eventIndexByEvent = new Map();
+    this.#eventIndexByEvent = new WeakMap();
 
     if (this.#timelineData) {
       this.compatibilityTracksAppender?.setFlameChartDataAndEntryData(
@@ -568,7 +582,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     this.entryData = [];
     this.entryTypeByLevel = [];
     this.entryIndexToTitle = [];
-    this.#eventIndexByEvent = new Map();
+    this.#eventIndexByEvent = new WeakMap();
     this.#minimumBoundary = 0;
     this.timeSpan = 0;
 
@@ -750,9 +764,14 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
    * because then when it comes to drawing we can decorate them differently.
    **/
   #appendFramesAndScreenshotsTrack(): void {
+    if (this.entryData.length) {
+      throw new Error('expected this.entryData to be empty');
+    }
+
     if (!this.parsedTrace) {
       return;
     }
+
     const filmStrip = Trace.Extras.FilmStrip.fromHandlerData(this.parsedTrace.data);
     const hasScreenshots = filmStrip.frames.length > 0;
     const hasFrames = this.parsedTrace.data.Frames.frames.length > 0;
@@ -782,27 +801,27 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     if (!this.#timelineData || !this.parsedTrace) {
       return;
     }
+
     this.appendHeader('', this.screenshotsGroupStyle, false /* selectable */);
     this.entryTypeByLevel[this.currentLevel] = EntryType.SCREENSHOT;
-    let prevTimestamp: Trace.Types.Timing.Milli|undefined = undefined;
-
-    for (const filmStripFrame of filmStrip.frames) {
-      const screenshotTimeInMilliSeconds = Trace.Helpers.Timing.microToMilli(filmStripFrame.screenshotEvent.ts);
-      this.entryData.push(filmStripFrame.screenshotEvent);
-      (this.#timelineData.entryLevels as number[]).push(this.currentLevel);
-      (this.#timelineData.entryStartTimes as number[]).push(screenshotTimeInMilliSeconds);
-      if (prevTimestamp) {
-        (this.#timelineData.entryTotalTimes as number[]).push(screenshotTimeInMilliSeconds - prevTimestamp);
-      }
-      prevTimestamp = screenshotTimeInMilliSeconds;
-    }
-    if (filmStrip.frames.length && prevTimestamp !== undefined) {
-      const maxRecordTimeMillis =
-          Trace.Helpers.Timing.traceWindowMilliSeconds(this.parsedTrace.data.Meta.traceBounds).max;
 
-      // Set the total time of the final screenshot so it takes up the remainder of the trace.
-      (this.#timelineData.entryTotalTimes as number[]).push(maxRecordTimeMillis - prevTimestamp);
+    const traceEnd = Trace.Helpers.Timing.traceWindowMilliSeconds(this.parsedTrace.data.Meta.traceBounds).max;
+
+    for (let i = 0; i < filmStrip.frames.length; ++i) {
+      const currentFrame = filmStrip.frames[i];
+      const nextFrame = filmStrip.frames[i + 1];
+      const startTimeMillis = Trace.Helpers.Timing.microToMilli(currentFrame.screenshotEvent.ts);
+      // If there is no next frame, use the end of the trace.
+      const endTimeMillis = nextFrame ? Trace.Helpers.Timing.microToMilli(nextFrame.screenshotEvent.ts) : traceEnd;
+      const durationMillis = endTimeMillis - startTimeMillis;
+
+      const index = this.#insertEventToEntryData(currentFrame.screenshotEvent);
+      (this.#timelineData.entryLevels as number[]).splice(index, 0, this.currentLevel);
+      (this.#timelineData.entryStartTimes as number[]).splice(index, 0, startTimeMillis);
+      (this.#timelineData.entryTotalTimes as number[]).splice(index, 0, durationMillis);
+      this.entryIndexToTitle.splice(index, 0, '');
     }
+
     ++this.currentLevel;
   }
 
@@ -1175,16 +1194,24 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   }
 
   #appendFrame(frame: Trace.Types.Events.LegacyTimelineFrame): void {
-    const index = this.entryData.length;
-    this.entryData.push(frame);
+    const index = this.#insertEventToEntryData(frame);
     const durationMilliseconds = Trace.Helpers.Timing.microToMilli(frame.duration);
-    this.entryIndexToTitle[index] = i18n.TimeUtilities.millisToString(durationMilliseconds, true);
+    this.entryIndexToTitle.splice(index, 0, i18n.TimeUtilities.millisToString(durationMilliseconds, true));
+
     if (!this.#timelineData) {
       return;
     }
-    this.#timelineData.entryLevels[index] = this.currentLevel;
-    this.#timelineData.entryTotalTimes[index] = durationMilliseconds;
-    this.#timelineData.entryStartTimes[index] = Trace.Helpers.Timing.microToMilli(frame.startTime);
+
+    if (Array.isArray(this.#timelineData.entryLevels) && Array.isArray(this.#timelineData.entryTotalTimes) &&
+        Array.isArray(this.#timelineData.entryStartTimes)) {
+      this.#timelineData.entryLevels.splice(index, 0, this.currentLevel);
+      this.#timelineData.entryTotalTimes.splice(index, 0, durationMilliseconds);
+      this.#timelineData.entryStartTimes.splice(index, 0, Trace.Helpers.Timing.microToMilli(frame.startTime));
+    } else {
+      this.#timelineData.entryLevels[index] = this.currentLevel;
+      this.#timelineData.entryTotalTimes[index] = durationMilliseconds;
+      this.#timelineData.entryStartTimes[index] = Trace.Helpers.Timing.microToMilli(frame.startTime);
+    }
   }
 
   createSelection(entryIndex: number): TimelineSelection|null {

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -125,6 +125,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
   private readonly onMainEntrySelected: (event: Common.EventTarget.EventTargetEvent<number>) => void;
   private readonly onNetworkEntrySelected: (event: Common.EventTarget.EventTargetEvent<number>) => void;
   readonly #boundRefreshAfterIgnoreList: () => void;
+  /** This is sorted by ts. */
   #selectedEvents: Trace.Types.Events.Event[]|null;
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/front_end/panels/timeline/TimelinePanel.ts

@@ -228,10 +228,6 @@ const UIStrings = {
    * @description Text in Timeline Panel of the Performance panel
    */
   processingTrace: 'Processing trace…',
-  /**
-   * @description Text in Timeline Panel of the Performance panel
-   */
-  initializingTracing: 'Initializing tracing…',
   /**
    * @description Text in Timeline Panel of the Performance panel. Shown to the user after they request to download the trace.
    */
@@ -345,7 +341,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   private readonly recordingOptionUIControls: UI.Toolbar.ToolbarItem[];
   private state: State;
   private recordingPageReload: boolean;
-  private readonly millisecondsToRecordAfterLoadEvent: number;
   private readonly toggleRecordAction: UI.ActionRegistration.Action;
   private readonly recordReloadAction: UI.ActionRegistration.Action;
   readonly #historyManager: TimelineHistoryManager;
@@ -459,10 +454,8 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       ">💫</div>`;
     const adorner = new Adorners.Adorner.Adorner();
     adorner.classList.add('fix-perf-icon');
-    adorner.data = {
-      name: i18nString(UIStrings.fixMe),
-      content: adornerContent,
-    };
+    adorner.name = i18nString(UIStrings.fixMe);
+    adorner.append(adornerContent);
     this.#traceEngineModel = traceModel || this.#instantiateNewModel();
 
     this.element.addEventListener('contextmenu', this.contextMenu.bind(this), false);
@@ -473,7 +466,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.recordingOptionUIControls = [];
     this.state = State.IDLE;
     this.recordingPageReload = false;
-    this.millisecondsToRecordAfterLoadEvent = 5000;
     this.toggleRecordAction = UI.ActionRegistry.ActionRegistry.instance().getAction('timeline.toggle-recording');
     this.recordReloadAction = UI.ActionRegistry.ActionRegistry.instance().getAction('timeline.record-reload');
 
@@ -538,9 +530,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
     this.createFileSelector();
 
-    SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.Load, this.loadEventFired, this);
-
     this.flameChart = new TimelineFlameChartView(this);
     this.element.addEventListener(
         'toggle-popover', event => this.flameChart.togglePopover((event as CustomEvent).detail));
@@ -1858,41 +1847,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     return navigationEntry.url as Platform.DevToolsPath.UrlString;
   }
 
-  async #navigateToAboutBlank(): Promise<void> {
-    const aboutBlankNavigationComplete = new Promise<void>(async (resolve, reject) => {
-      if (!this.controller) {
-        reject('Could not find TimelineController');
-        return;
-      }
-      const target = this.controller.primaryPageTarget;
-      const resourceModel = target.model(SDK.ResourceTreeModel.ResourceTreeModel);
-      if (!resourceModel) {
-        reject('Could not load resourceModel');
-        return;
-      }
-
-      /**
-       * To clear out the page and any state from prior test runs, we
-       * navigate to about:blank before initiating the trace recording.
-       * Once we have navigated to about:blank, we start recording and
-       * then navigate to the original page URL, to ensure we profile the
-       * page load.
-       **/
-      function waitForAboutBlank(event: Common.EventTarget.EventTargetEvent<SDK.ResourceTreeModel.ResourceTreeFrame>):
-          void {
-        if (event.data.url === 'about:blank') {
-          resolve();
-        } else {
-          reject(`Unexpected navigation to ${event.data.url}`);
-        }
-        resourceModel?.removeEventListener(SDK.ResourceTreeModel.Events.FrameNavigated, waitForAboutBlank);
-      }
-      resourceModel.addEventListener(SDK.ResourceTreeModel.Events.FrameNavigated, waitForAboutBlank);
-      await resourceModel.navigate('about:blank' as Platform.DevToolsPath.UrlString);
-    });
-    await aboutBlankNavigationComplete;
-  }
-
   async #startCPUProfilingRecording(): Promise<void> {
     try {
       this.cpuProfiler = UI.Context.Context.instance().flavor(SDK.CPUProfilerModel.CPUProfilerModel);
@@ -1953,30 +1907,18 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       }
 
       const urlToTrace = await this.#evaluateInspectedURL();
-      // If we are doing "Reload & record", we first navigate the page to
-      // about:blank. This is to ensure any data on the timeline from any
-      // previous performance recording is lost, avoiding the problem where a
-      // timeline will show data & screenshots from a previous page load that
-      // was not relevant.
-      if (this.recordingPageReload) {
-        await this.#navigateToAboutBlank();
-      }
-      const recordingOptions = {
+
+      // Order is important here: we tell the controller to start recording, which enables tracing.
+      await this.controller.startRecording({
         enableJSSampling: !this.disableCaptureJSProfileSetting.get(),
         capturePictures: this.captureLayersAndPicturesSetting.get(),
         captureFilmStrip: this.showScreenshotsSetting.get(),
         captureSelectorStats: this.captureSelectorStatsSetting.get(),
-      };
-      // Order is important here: we tell the controller to start recording, which enables tracing.
-      const response = await this.controller.startRecording(recordingOptions);
-      if (response.getError()) {
-        throw new Error(response.getError());
-      }
+        navigateToUrl: this.recordingPageReload ? urlToTrace : undefined,
+      });
+
       // Once we get here, we know tracing is active.
-      // This is when, if the user has hit "Reload & Record" that we now need to navigate to the original URL.
-      // If the user has just hit "record", we don't do any navigating.
-      const recordingConfig = this.recordingPageReload ? {navigateToUrl: urlToTrace} : undefined;
-      this.recordingStarted(recordingConfig);
+      this.recordingStarted();
     } catch (e) {
       await this.recordingFailed(e.message);
     }
@@ -2428,28 +2370,11 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     return ThemeSupport.ThemeSupport.instance().getComputedValue('--app-color-system');
   }
 
-  private recordingStarted(config?: {navigateToUrl: Platform.DevToolsPath.UrlString}): void {
-    if (config && this.recordingPageReload && this.controller) {
-      // If the user hit "Reload & record", by this point we have:
-      // 1. Navigated to about:blank
-      // 2. Initiated tracing.
-      // We therefore now should navigate back to the original URL that the user wants to profile.
-      const resourceModel = this.controller?.primaryPageTarget.model(SDK.ResourceTreeModel.ResourceTreeModel);
-      if (!resourceModel) {
-        void this.recordingFailed('Could not navigate to original URL');
-        return;
-      }
-      // We don't need to await this because we are purposefully showing UI
-      // progress as the page loads & tracing is underway.
-      void resourceModel.navigate(config.navigateToUrl);
-    }
-
+  private recordingStarted(): void {
     this.#changeView({mode: 'STATUS_PANE_OVERLAY'});
     this.setState(State.RECORDING);
-    this.showRecordingStarted();
     if (this.statusDialog) {
       this.statusDialog.enableAndFocusButton();
-      this.statusDialog.updateStatus(i18nString(UIStrings.tracing));
       this.statusDialog.updateProgressBar(i18nString(UIStrings.bufferUsage), 0);
       this.statusDialog.startTimer();
     }
@@ -2461,6 +2386,12 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     }
   }
 
+  recordingStatus(status: string): void {
+    if (this.statusDialog) {
+      this.statusDialog.updateStatus(status);
+    }
+  }
+
   /**
    * Hide the sidebar, but persist the user's state, because when they import a
    * trace we want to revert the sidebar back to what it was.
@@ -2902,7 +2833,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
         },
         () => this.stopRecording());
     this.statusDialog.showPane(this.statusPaneContainer);
-    this.statusDialog.updateStatus(i18nString(UIStrings.initializingTracing));
+    this.statusDialog.updateStatus(i18nString(UIStrings.tracing));
     this.statusDialog.updateProgressBar(i18nString(UIStrings.bufferUsage), 0);
   }
 
@@ -2912,24 +2843,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     }
   }
 
-  private async loadEventFired(
-      event: Common.EventTarget
-          .EventTargetEvent<{resourceTreeModel: SDK.ResourceTreeModel.ResourceTreeModel, loadTime: number}>):
-      Promise<void> {
-    if (this.state !== State.RECORDING || !this.recordingPageReload ||
-        this.controller?.primaryPageTarget !== event.data.resourceTreeModel.target()) {
-      return;
-    }
-    const controller = this.controller;
-    await new Promise(r => window.setTimeout(r, this.millisecondsToRecordAfterLoadEvent));
-
-    // Check if we're still in the same recording session.
-    if (controller !== this.controller || this.state !== State.RECORDING) {
-      return;
-    }
-    void this.stopRecording();
-  }
-
   private frameForSelection(selection: TimelineSelection): Trace.Types.Events.LegacyTimelineFrame|null {
     if (this.#viewMode.mode !== 'VIEWING_TRACE') {
       return null;

package/front_end/panels/timeline/TimelineTreeView.ts

@@ -171,6 +171,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class TimelineTreeView extends
     Common.ObjectWrapper.eventMixin<TimelineTreeView.EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
         implements UI.SearchableView.Searchable {
+  /** This is sorted by ts. */
   #selectedEvents: Trace.Types.Events.Event[]|null;
   private searchResults: Trace.Extras.TraceTree.Node[];
   linkifier!: Components.Linkifier.Linkifier;

package/front_end/panels/timeline/components/insights/BaseInsightComponent.ts

@@ -75,7 +75,7 @@ interface ViewInput {
   estimatedSavingsAriaLabel: string|null;
   renderContent: () => Lit.LitTemplate;
   dispatchInsightToggle: () => void;
-  onHeaderKeyDown: () => void;
+  onHeaderKeyDown: (event: KeyboardEvent) => void;
   onAskAIButtonClick: () => void;
 }
 
@@ -412,7 +412,7 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends UI.Wi
       showAskAI: this.#canShowAskAI(),
       dispatchInsightToggle: () => this.#dispatchInsightToggle(),
       renderContent: () => this.renderContent(),
-      onHeaderKeyDown: () => this.#onHeaderKeyDown,
+      onHeaderKeyDown: this.#onHeaderKeyDown.bind(this),
       onAskAIButtonClick: () => this.#onAskAIButtonClick(),
     };
     this.#view(input, undefined, this.contentElement);

package/front_end/panels/timeline/components/insights/Table.ts

@@ -239,11 +239,11 @@ export class Table extends UI.Widget.Widget {
   }
 
   #onHoverRow(row: TableDataRow, rowEl: HTMLElement): void {
-    if (row === this.#currentHoverRow) {
+    if (row === this.#currentHoverRow || !this.element.shadowRoot) {
       return;
     }
 
-    for (const el of this.element.querySelectorAll('.hover')) {
+    for (const el of this.element.shadowRoot.querySelectorAll('.hover')) {
       el.classList.remove('hover');
     }
 
@@ -251,7 +251,7 @@ export class Table extends UI.Widget.Widget {
     let curRow: TableDataRow|undefined = this.#rowToParentRow.get(row);
     while (curRow) {
       rowEl.classList.add('hover');
-      curRow = this.#rowToParentRow.get(row);
+      curRow = this.#rowToParentRow.get(curRow);
     }
 
     this.#currentHoverRow = row;