chrome-devtools-frontend 1.0.1558690 → 1.0.1561080

package/front_end/panels/settings/SettingsScreen.ts

@@ -646,7 +646,7 @@ const GREENDEV_VIEW: View = (input, _output, target) => {
               <span>${i18nString(UIStrings.greenDevUnstable)}</span>
              </div>
              <div class="settings-experiments-block">
-               ${renderPrototypeCheckboxes(input.settings, ['aiAnnotations', 'inDevToolsFloaty'])}
+               ${renderPrototypeCheckboxes(input.settings, ['aiAnnotations', 'inDevToolsFloaty', 'copyToGemini'])}
              </div>
            </devtools-card>
 
@@ -668,7 +668,8 @@ const GREENDEV_PROTOTYPE_NAMES: Record<keyof GreenDev.GreenDevSettings, string>
   inDevToolsFloaty: 'In DevTools context picker',
   aiAnnotations: 'AI auto-annotations',
   inlineWidgets: 'Inline widgets in AI Assistance',
-  artifactViewer: 'Widgets in the Artifact viewer'
+  artifactViewer: 'Widgets in the Artifact viewer',
+  copyToGemini: 'Copy changes to AI Prompt'
 };
 
 function renderWidgetOptions(settings: GreenDev.GreenDevSettings): TemplateResult {

package/front_end/panels/timeline/CompatibilityTracksAppender.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 
 import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as Trace from '../../models/trace/trace.js';
@@ -409,6 +410,7 @@ export class CompatibilityTracksAppender {
     if (trackStartLevel === null || trackEndLevel === null) {
       throw new Error(`Could not find events for track: ${trackAppender}`);
     }
+
     const entryLevels = this.#flameChartData.entryLevels;
     const events = [];
     for (let i = 0; i < entryLevels.length; i++) {
@@ -416,7 +418,13 @@ export class CompatibilityTracksAppender {
         events.push(this.#entryData[i]);
       }
     }
-    events.sort((a, b) => a.ts - b.ts);  // TODO(paulirish): Remove as I'm 90% it's already sorted.
+
+    // TODO(crbug.com/457866795): callers expect this to be sorted, but #entryData
+    // currently isn't guaranteed to be sorted because of appendEventsAtLevel and
+    // appendEventAtLevel. Also, see
+    // TimelineFlameChartDataProvider#insertEventToEntryData. This method is cached
+    // in eventsForTreeView, so it doesn't impact performance much.
+    events.sort((a, b) => a.ts - b.ts);
 
     this.#eventsForTrack.set(trackAppender, events);
     return events;
@@ -541,6 +549,11 @@ export class CompatibilityTracksAppender {
   appendEventsAtLevel<T extends Trace.Types.Events.Event>(
       events: readonly T[], trackStartLevel: number, appender: TrackAppender,
       eventAppendedCallback?: (event: T, index: number) => void): number {
+    // Usage of getEventLevel below requires `events` to be sorted.
+    if (Host.InspectorFrontendHost.isUnderTest()) {
+      Platform.ArrayUtilities.assertArrayIsSorted(events, (a, b) => a.ts - b.ts);
+    }
+
     const lastTimestampByLevel: LastTimestampByLevel = [];
     for (let i = 0; i < events.length; ++i) {
       const event = events[i];

package/front_end/panels/timeline/StatusDialog.ts

@@ -145,14 +145,15 @@ export class StatusDialog extends UI.Widget.VBox {
   }
 
   remove(): void {
-    (this.element.parentNode as HTMLElement)?.classList.remove('tinted');
+    (this.element.parentNode as HTMLElement)?.classList.remove('opaque', 'tinted');
     this.stopTimer();
     this.element.remove();
   }
 
-  showPane(parent: Element): void {
+  showPane(parent: Element, mode: 'tinted'|'opaque' = 'opaque'): void {
     this.show(parent);
-    parent.classList.add('tinted');
+    parent.classList.toggle('tinted', mode === 'tinted');
+    parent.classList.toggle('opaque', mode === 'opaque');
   }
 
   enableAndFocusButton(): void {

package/front_end/panels/timeline/ThirdPartyTreeView.ts

@@ -80,9 +80,6 @@ export class ThirdPartyTreeViewWidget extends TimelineTreeView.TimelineTreeView
       });
     }
 
-    // const events = this.#thirdPartySummaries.entityByEvent.keys();
-    const relatedEvents = this.selectedEvents().sort(Trace.Helpers.Trace.eventTimeComparator);
-
     // The filters for this view are slightly different; we want to use the set
     // of visible event types, but also include network events, which by
     // default are not in the set of visible entries (as they are not shown on
@@ -90,7 +87,7 @@ export class ThirdPartyTreeViewWidget extends TimelineTreeView.TimelineTreeView
     const filter = new Trace.Extras.TraceFilter.VisibleEventsFilter(
         Trace.Styles.visibleTypes().concat([Trace.Types.Events.Name.SYNTHETIC_NETWORK_REQUEST]));
 
-    const node = new Trace.Extras.TraceTree.BottomUpRootNode(relatedEvents, {
+    const node = new Trace.Extras.TraceTree.BottomUpRootNode(this.selectedEvents(), {
       textFilter: this.textFilter(),
       filters: [filter],
       startTime: this.startTime,

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/TimelineFlameChartNetworkDataProvider.ts

@@ -423,28 +423,15 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
 
   /**
    * When users zoom in the flamechart, we only want to show them the network
-   * requests between startTime and endTime. This function will call the
-   * trackAppender to update the timeline data, and then force to create a new
-   * PerfUI.FlameChart.FlameChartTimelineData instance to force the flamechart
-   * to re-render.
+   * requests between startTime and endTime.
    */
   #updateTimelineData(startTime: Trace.Types.Timing.Milli, endTime: Trace.Types.Timing.Milli): void {
     if (!this.#networkTrackAppender || !this.#timelineData) {
       return;
     }
+    // This also has the side-effect of updating this.#timelineData with new
+    // information.
     this.#maxLevel = this.#networkTrackAppender.relayoutEntriesWithinBounds(this.#events, startTime, endTime);
-
-    // TODO(crbug.com/1459225): Remove this recreating code.
-    // Force to create a new PerfUI.FlameChart.FlameChartTimelineData instance
-    // to force the flamechart to re-render. This also causes crbug.com/1459225.
-    this.#timelineData = PerfUI.FlameChart.FlameChartTimelineData.create({
-      entryLevels: this.#timelineData?.entryLevels,
-      entryTotalTimes: this.#timelineData?.entryTotalTimes,
-      entryStartTimes: this.#timelineData?.entryStartTimes,
-      groups: this.#timelineData?.groups,
-      initiatorsData: this.#timelineData.initiatorsData,
-      entryDecorations: this.#timelineData.entryDecorations,
-    });
   }
 
   /**

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -66,10 +66,12 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
  */
 export const SORT_ORDER_PAGE_LOAD_MARKERS: Readonly<Record<string, number>> = {
   [Trace.Types.Events.Name.NAVIGATION_START]: 0,
-  [Trace.Types.Events.Name.MARK_LOAD]: 1,
-  [Trace.Types.Events.Name.MARK_FCP]: 2,
-  [Trace.Types.Events.Name.MARK_DOM_CONTENT]: 3,
-  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE]: 4,
+  [Trace.Types.Events.Name.SOFT_NAVIGATION_START]: 1,
+  [Trace.Types.Events.Name.MARK_LOAD]: 2,
+  [Trace.Types.Events.Name.MARK_FCP]: 3,
+  [Trace.Types.Events.Name.MARK_DOM_CONTENT]: 4,
+  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE]: 5,
+  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION]: 6,
 };
 
 // Threshold to match up overlay markers that are off by a tiny amount so they aren't rendered
@@ -123,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
@@ -648,6 +651,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
           fieldMetricResult = fieldMetricResults.fcp;
         } else if (event.name === Trace.Types.Events.Name.MARK_LCP_CANDIDATE) {
           fieldMetricResult = fieldMetricResults.lcp;
+          // Ignoring soft-nav LCP on purpose.
         }
 
         if (!fieldMetricResult) {
@@ -669,7 +673,9 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     // Set markers for Navigations, LCP, FCP, DCL, L.
     const markers = markerEvents.filter(
         event => event.name === Trace.Types.Events.Name.NAVIGATION_START ||
+            event.name === Trace.Types.Events.Name.SOFT_NAVIGATION_START ||
             event.name === Trace.Types.Events.Name.MARK_LCP_CANDIDATE ||
+            event.name === Trace.Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION ||
             event.name === Trace.Types.Events.Name.MARK_FCP ||
             event.name === Trace.Types.Events.Name.MARK_DOM_CONTENT ||
             event.name === Trace.Types.Events.Name.MARK_LOAD);
@@ -681,6 +687,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
           marker,
           parsedTrace.data.Meta.traceBounds,
           parsedTrace.data.Meta.navigationsByNavigationId,
+          parsedTrace.data.Meta.softNavigationsById,
           parsedTrace.data.Meta.navigationsByFrameId,
       );
       // If any of the markers overlap in timing, lets put them on the same marker.
@@ -732,24 +739,11 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
       entries.push(...Overlays.Overlays.entriesForOverlay(overlay));
     }
 
-    // The insight's `relatedEvents` property likely already includes the events associated with
-    // an overlay, but just in case not, include both arrays. Duplicates are fine.
-    let relatedEventsList = this.#activeInsight?.model.relatedEvents;
-    if (!relatedEventsList) {
-      relatedEventsList = [];
-    } else if (relatedEventsList instanceof Map) {
-      relatedEventsList = Array.from(relatedEventsList.keys());
-    }
-    this.#dimInsightRelatedEvents([...entries, ...relatedEventsList]);
-
     if (options.updateTraceWindow) {
-      // We should only expand the entry track when we are updating the trace window
-      // (eg. when insight cards are initially opened).
+      // We should only expand the entry track when we are updating the trace window (eg. when insight cards are initially opened).
       // Otherwise the track will open when not intending to.
-      for (const entry of entries) {
-        // Ensure that the track for the entries are open.
-        this.#expandEntryTrack(entry);
-      }
+      this.#bulkExpandGroupsForEntries(entries);
+
       const overlaysBounds = Overlays.Overlays.traceWindowContainingOverlays(this.#currentInsightOverlays);
       if (overlaysBounds) {
         // Trace window covering all overlays expanded by 50% so that the overlays cover 2/3 (100/150) of the visible window. (Or use provided override)
@@ -767,11 +761,26 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
       }
     }
 
+    // The insight's `relatedEvents` property likely already includes the events associated with
+    // an overlay, but just in case not, include both arrays. Duplicates are fine.
+    let relatedEventsList = this.#activeInsight?.model.relatedEvents;
+    if (!relatedEventsList) {
+      relatedEventsList = [];
+    } else if (relatedEventsList instanceof Map) {
+      relatedEventsList = Array.from(relatedEventsList.keys());
+    }
+    this.#dimInsightRelatedEvents([...entries, ...relatedEventsList]);
+
     // Reveal entry if we have one.
+    // This is wrapped in a rAF to make sure the FlameChart draw from the
+    // expansion of any groups is complete - we need all the update() handlers
+    // to have run so the FlameChart has been drawn correctly at the right height.
     if (entries.length !== 0) {
       const earliestEntry =
           entries.reduce((earliest, current) => (earliest.ts < current.ts ? earliest : current), entries[0]);
-      this.revealEventVertically(earliestEntry);
+      requestAnimationFrame(() => {
+        this.revealEventVertically(earliestEntry);
+      });
     }
   }
 
@@ -823,6 +832,41 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     }
   }
 
+  /**
+   * Bulk expands the tracks (e.g. groups) that the given entries belong to.
+   * Will update them all at once and then do a redraw.
+   */
+  #bulkExpandGroupsForEntries(entries: Trace.Types.Events.Event[]): void {
+    const networkGroupIndexes = new Set<number>();
+    const mainGroupIndexes = new Set<number>();
+
+    for (const entry of entries) {
+      const chartName = Overlays.Overlays.chartForEntry(entry);
+      const provider = chartName === 'main' ? this.mainDataProvider : this.networkDataProvider;
+      const entryIndex = provider.indexForEvent?.(entry) ?? null;
+      if (entryIndex === null) {
+        continue;
+      }
+
+      const group = provider.groupForEvent?.(entryIndex) ?? null;
+      if (!group) {
+        continue;
+      }
+      if (group.expanded) {
+        continue;
+      }
+      const groupIndex = provider.timelineData().groups.indexOf(group);
+      if (chartName === 'main') {
+        mainGroupIndexes.add(groupIndex);
+      } else {
+        networkGroupIndexes.add(groupIndex);
+      }
+    }
+
+    this.mainFlameChart.bulkExpandGroups([...mainGroupIndexes]);
+    this.networkFlameChart.bulkExpandGroups([...networkGroupIndexes]);
+  }
+
   /**
    * Expands the track / group that the given entry is in.
    */