chrome-devtools-frontend 1.0.1558690 → 1.0.1561080

package/front_end/panels/timeline/TimelinePanel.ts

@@ -229,9 +229,17 @@ const UIStrings = {
    */
   processingTrace: 'Processing trace…',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Text in Timeline Panel of the Performance panel. Shown to the user after they request to download the trace.
+   */
+  preparingTraceForDownload: 'Preparing…',
+  /**
+   * @description Text in Timeline Panel of the Performance panel. Shown to the user after they request to download the trace.
    */
-  initializingTracing: 'Initializing tracing…',
+  compressingTraceForDownload: 'Compressing…',
+  /**
+   * @description Text in Timeline Panel of the Performance panel. Shown to the user after they request to download the trace.
+   */
+  encodingTraceForDownload: 'Encoding…',
   /**
    * @description Tooltip description for a checkbox that toggles the visibility of data added by extensions of this panel (Performance).
    */
@@ -333,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;
@@ -447,12 +454,9 @@ 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.#listenForProcessingProgress();
 
     this.element.addEventListener('contextmenu', this.contextMenu.bind(this), false);
     this.dropTarget = new UI.DropTarget.DropTarget(
@@ -462,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');
 
@@ -527,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));
@@ -675,7 +675,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   #setActiveInsight(insight: TimelineComponents.Sidebar.ActiveInsight|null, opts: {
     highlightInsight: boolean,
   } = {highlightInsight: false}): void {
-    if (insight) {
+    if (insight && this.#splitWidget.showMode() !== UI.SplitWidget.ShowMode.BOTH) {
       this.#splitWidget.showBoth();
     }
     this.#sideBar.setActiveInsight(insight, {highlight: opts.highlightInsight});
@@ -732,7 +732,25 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     config.includeRuntimeCallStats = Root.Runtime.experiments.isEnabled('timeline-v8-runtime-call-stats');
     config.debugMode = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DEBUG_MODE);
 
-    return Trace.TraceModel.Model.createWithAllHandlers(config);
+    const traceEngineModel = Trace.TraceModel.Model.createWithAllHandlers(config);
+
+    traceEngineModel.addEventListener(Trace.TraceModel.ModelUpdateEvent.eventName, e => {
+      const updateEvent = e as Trace.TraceModel.ModelUpdateEvent;
+      const str = i18nString(UIStrings.processed);
+
+      // Trace Engine will report progress from [0...1] but we still have more work to do. So, scale them down a bit.
+      const traceParseMaxProgress = 0.7;
+
+      if (updateEvent.data.type === Trace.TraceModel.ModelUpdateType.COMPLETE) {
+        this.statusDialog?.updateProgressBar(str, 100 * traceParseMaxProgress);
+      } else if (updateEvent.data.type === Trace.TraceModel.ModelUpdateType.PROGRESS_UPDATE) {
+        const data = updateEvent.data.data;
+        this.statusDialog?.updateProgressBar(str, data.percent * 100 * traceParseMaxProgress);
+      }
+    });
+
+    this.#traceEngineModel = traceEngineModel;
+    return this.#traceEngineModel;
   }
 
   static extensionDataVisibilitySetting(): Common.Settings.Setting<boolean> {
@@ -1455,6 +1473,9 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       }
 
       this.#showExportTraceErrorDialog(error);
+    } finally {
+      this.statusDialog?.remove();
+      this.statusDialog = null;
     }
   }
 
@@ -1464,6 +1485,24 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     addModifications: boolean,
     shouldCompress: boolean,
   }): Promise<void> {
+    this.statusDialog = new StatusDialog(
+        {
+          hideStopButton: true,
+          showProgress: true,
+        },
+        async () => {
+          this.statusDialog?.remove();
+          this.statusDialog = null;
+        });
+    this.statusDialog.showPane(this.statusPaneContainer, 'tinted');
+    this.statusDialog.updateStatus(i18nString(UIStrings.preparingTraceForDownload));
+    this.statusDialog.updateProgressBar(i18nString(UIStrings.preparingTraceForDownload), 0);
+    this.statusDialog.requestUpdate();
+    await this.statusDialog.updateComplete;
+    // Not sure why the above isn't sufficient.
+    await new Promise(resolve => requestAnimationFrame(resolve));
+    await new Promise(resolve => requestAnimationFrame(resolve));
+
     // Base the filename on the trace's time of recording
     const isoDate =
         Platform.DateUtilities.toISO8601Compact(metadata.startTime ? new Date(metadata.startTime) : new Date());
@@ -1499,8 +1538,16 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     let blob = new Blob(blobParts, {type: 'application/json'});
 
     if (config.shouldCompress) {
+      this.statusDialog.updateStatus(i18nString(UIStrings.compressingTraceForDownload));
+      this.statusDialog.updateProgressBar(i18nString(UIStrings.compressingTraceForDownload), 0);
+
       fileName = `${fileName}.gz` as Platform.DevToolsPath.RawPathString;
-      const gzStream = Common.Gzip.compressStream(blob.stream());
+      const inputSize = blob.size;
+      const monitoredStream = Common.Gzip.createMonitoredStream(blob.stream(), bytesRead => {
+        this.statusDialog?.updateProgressBar(
+            i18nString(UIStrings.compressingTraceForDownload), bytesRead / inputSize * 100);
+      });
+      const gzStream = Common.Gzip.compressStream(monitoredStream);
       blob = await new Response(gzStream, {
                headers: {'Content-Type': 'application/gzip'},
              }).blob();
@@ -1515,9 +1562,12 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     try {
       // The maximum string length in v8 is `2 ** 29 - 23`, aka 538 MB.
       // If the gzipped&base64-encoded trace is larger than that, this'll throw a RangeError.
+      this.statusDialog.updateStatus(i18nString(UIStrings.encodingTraceForDownload));
+      this.statusDialog.updateProgressBar(i18nString(UIStrings.encodingTraceForDownload), 100);
       bytesAsB64 = await Common.Base64.encode(blob);
     } catch {
     }
+
     if (bytesAsB64?.length) {
       const contentData = new TextUtils.ContentData.ContentData(bytesAsB64, /* isBase64=*/ true, blob.type);
       await Workspace.FileManager.FileManager.instance().save(fileName, contentData, /* forceSaveAs=*/ true);
@@ -1531,6 +1581,9 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       a.click();
       URL.revokeObjectURL(url);
     }
+
+    this.statusDialog.remove();
+    this.statusDialog = null;
   }
 
   async handleSaveToFileAction(): Promise<void> {
@@ -1794,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);
@@ -1889,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);
     }
@@ -1965,7 +1971,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
         {
           description: error,
           buttonText: i18nString(UIStrings.close),
-          hideStopButton: true,
+          hideStopButton: false,
           showProgress: undefined,
           showTimer: undefined,
         },
@@ -2055,7 +2061,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
   private onClearButton(): void {
     this.#historyManager.clear();
-    this.#traceEngineModel = this.#instantiateNewModel();
+    this.#instantiateNewModel();
     ModificationsManager.reset();
     this.#uninstallSourceMapsResolver();
     this.flameChart.getMainDataProvider().reset();
@@ -2364,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();
     }
@@ -2397,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.
@@ -2467,23 +2462,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.statusDialog?.updateStatus(i18nString(UIStrings.processingTrace));
   }
 
-  #listenForProcessingProgress(): void {
-    this.#traceEngineModel.addEventListener(Trace.TraceModel.ModelUpdateEvent.eventName, e => {
-      const updateEvent = e as Trace.TraceModel.ModelUpdateEvent;
-      const str = i18nString(UIStrings.processed);
-
-      // Trace Engine will report progress from [0...1] but we still have more work to do. So, scale them down a bit.
-      const traceParseMaxProgress = 0.7;
-
-      if (updateEvent.data.type === Trace.TraceModel.ModelUpdateType.COMPLETE) {
-        this.statusDialog?.updateProgressBar(str, 100 * traceParseMaxProgress);
-      } else if (updateEvent.data.type === Trace.TraceModel.ModelUpdateType.PROGRESS_UPDATE) {
-        const data = updateEvent.data.data;
-        this.statusDialog?.updateProgressBar(str, data.percent * 100 * traceParseMaxProgress);
-      }
-    });
-  }
-
   #onSourceMapsNodeNamesResolved(): void {
     // Source maps can change the way calls hierarchies should look in
     // the flame chart (f.e. if some calls are ignore listed after
@@ -2855,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);
   }
 
@@ -2865,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;
@@ -3061,7 +3021,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
    * 3. Flash the Insight with the highlight colour we use in other panels.
    */
   revealInsight(insightModel: Trace.Insights.Types.InsightModel): void {
-    const insightSetKey = insightModel.navigationId ?? Trace.Types.Events.NO_NAVIGATION;
+    const insightSetKey = insightModel.navigation?.args.data?.navigationId ?? Trace.Types.Events.NO_NAVIGATION;
     this.#setActiveInsight({model: insightModel, insightSetKey}, {highlightInsight: true});
   }
 

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

@@ -824,6 +824,10 @@ export class TimelineUIUtils {
         link = 'https://web.dev/lcp/';
         name = 'largest contentful paint';
         break;
+      case Trace.Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION:
+        link = 'https://developer.chrome.com/docs/web-platform/soft-navigations-experiment';
+        name = 'largest contentful paint (soft navigation)';
+        break;
       case Trace.Types.Events.Name.MARK_FCP:
         link = 'https://web.dev/first-contentful-paint/';
         name = 'first contentful paint';
@@ -1001,6 +1005,20 @@ export class TimelineUIUtils {
       return contentHelper.fragment;
     }
 
+    if (Trace.Types.Events.isNavigationStart(event)) {
+      url = (event.args.data?.documentLoaderURL ?? event.args.data?.url) as Platform.DevToolsPath.UrlString;
+      if (url) {
+        contentHelper.appendElementRow(i18nString(UIStrings.url), LegacyComponents.Linkifier.Linkifier.linkifyURL(url));
+      }
+    }
+
+    if (Trace.Types.Events.isSoftNavigationStart(event)) {
+      url = event.args.context.URL as Platform.DevToolsPath.UrlString;
+      if (url) {
+        contentHelper.appendElementRow(i18nString(UIStrings.url), LegacyComponents.Linkifier.Linkifier.linkifyURL(url));
+      }
+    }
+
     if (Trace.Types.Events.isV8Compile(event)) {
       url = event.args.data?.url as Platform.DevToolsPath.UrlString;
       if (url) {
@@ -1428,6 +1446,7 @@ export class TimelineUIUtils {
         break;
       }
 
+      case Trace.Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION:
       // @ts-expect-error Fall-through intended.
       case Trace.Types.Events.Name.MARK_LCP_CANDIDATE: {
         contentHelper.appendTextRow(i18nString(UIStrings.type), String(unsafeEventData['type']));
@@ -2244,6 +2263,10 @@ export class TimelineUIUtils {
         color = 'var(--color-text-primary)';
         tall = true;
         break;
+      case Trace.Types.Events.Name.SOFT_NAVIGATION_START:
+        color = 'var(--sys-color-blue)';
+        tall = true;
+        break;
       case Trace.Types.Events.Name.FRAME_STARTED_LOADING:
         color = 'green';
         tall = true;
@@ -2264,6 +2287,7 @@ export class TimelineUIUtils {
         color = 'var(--sys-color-green-bright)';
         tall = true;
         break;
+      case Trace.Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION:
       case Trace.Types.Events.Name.MARK_LCP_CANDIDATE:
         color = 'var(--sys-color-green)';
         tall = true;
@@ -2509,6 +2533,7 @@ export function timeStampForEventAdjustedForClosestNavigationIfPossible(
       event,
       parsedTrace.data.Meta.traceBounds,
       parsedTrace.data.Meta.navigationsByNavigationId,
+      parsedTrace.data.Meta.softNavigationsById,
       parsedTrace.data.Meta.navigationsByFrameId,
   );
   return Trace.Helpers.Timing.microToMilli(time);
@@ -2523,7 +2548,8 @@ export function timeStampForEventAdjustedForClosestNavigationIfPossible(
 export function isMarkerEvent(parsedTrace: Trace.TraceModel.ParsedTrace, event: Trace.Types.Events.Event): boolean {
   const {Name} = Trace.Types.Events;
 
-  if (event.name === Name.TIME_STAMP || event.name === Name.NAVIGATION_START) {
+  if (event.name === Name.TIME_STAMP || event.name === Name.NAVIGATION_START ||
+      event.name === Name.SOFT_NAVIGATION_START) {
     return true;
   }
 
@@ -2532,7 +2558,7 @@ export function isMarkerEvent(parsedTrace: Trace.TraceModel.ParsedTrace, event:
   }
 
   if (Trace.Types.Events.isMarkDOMContent(event) || Trace.Types.Events.isMarkLoad(event) ||
-      Trace.Types.Events.isLargestContentfulPaintCandidate(event)) {
+      Trace.Types.Events.isAnyLargestContentfulPaintCandidate(event)) {
     // isOutermostMainFrame was added in 2022, so we fallback to isMainFrame
     // for older traces.
     if (!event.args.data) {

package/front_end/panels/timeline/TimingsTrackAppender.ts

@@ -42,6 +42,7 @@ export const SORT_ORDER_PAGE_LOAD_MARKERS: Readonly<Record<string, number>> = {
   [Trace.Types.Events.Name.MARK_FIRST_PAINT]: 2,
   [Trace.Types.Events.Name.MARK_DOM_CONTENT]: 3,
   [Trace.Types.Events.Name.MARK_LCP_CANDIDATE]: 4,
+  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION]: 5,
 };
 
 export class TimingsTrackAppender implements TrackAppender {
@@ -182,7 +183,7 @@ export class TimingsTrackAppender implements TrackAppender {
       color = '#1A6937';
       title = Trace.Handlers.ModelHandlers.PageLoadMetrics.MetricName.FCP;
     }
-    if (Trace.Types.Events.isLargestContentfulPaintCandidate(markerEvent)) {
+    if (Trace.Types.Events.isAnyLargestContentfulPaintCandidate(markerEvent)) {
       color = '#1A3422';
       title = Trace.Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP;
     }
@@ -282,6 +283,7 @@ export class TimingsTrackAppender implements TrackAppender {
           event,
           this.#parsedTrace.data.Meta.traceBounds,
           this.#parsedTrace.data.Meta.navigationsByNavigationId,
+          this.#parsedTrace.data.Meta.softNavigationsById,
           this.#parsedTrace.data.Meta.navigationsByFrameId,
       );
       info.formattedTime = getDurationString(timeOfEvent);

package/front_end/panels/timeline/components/SidebarSingleInsightSet.ts

@@ -84,7 +84,7 @@ interface InsightData {
 }
 
 interface LocalMetrics {
-  lcp: {value: Trace.Types.Timing.Micro, event: Trace.Types.Events.LargestContentfulPaintCandidate}|null;
+  lcp: {value: Trace.Types.Timing.Micro, event: Trace.Types.Events.AnyLargestContentfulPaintCandidate}|null;
   cls: {value: number, worstClusterEvent: Trace.Types.Events.Event|null};
   inp: {value: Trace.Types.Timing.Micro, event: Trace.Types.Events.SyntheticInteractionPair}|null;
 }

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

@@ -5,15 +5,17 @@
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type {RenderBlockingInsightModel} from '../../../../models/trace/insights/RenderBlocking.js';
 import * as Trace from '../../../../models/trace/trace.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
 import {eventRef} from './EventRef.js';
-import {createLimitedRows, renderOthersLabel, type TableDataRow} from './Table.js';
+import {createLimitedRows, renderOthersLabel, Table, type TableDataRow} from './Table.js';
 
 const {UIStrings, i18nString, createOverlayForRequest} = Trace.Insights.Models.RenderBlocking;
 
 const {html} = Lit;
+const {widgetConfig} = UI.Widget;
 
 export class RenderBlocking extends BaseInsightComponent<RenderBlockingInsightModel> {
   override internalName = 'render-blocking-requests';
@@ -58,12 +60,12 @@ export class RenderBlocking extends BaseInsightComponent<RenderBlockingInsightMo
     // clang-format off
     return html`
       <div class="insight-section">
-        <devtools-widget
-          .data=${{
+        <devtools-widget .widgetConfig=${widgetConfig(Table, {
+           data: {
             insight: this,
             headers: [i18nString(UIStrings.renderBlockingRequest), i18nString(UIStrings.duration)],
             rows,
-          }}>
+          }})}>
         </devtools-widget>
       </div>
     `;

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;

package/front_end/panels/timeline/overlays/OverlaysImpl.ts

@@ -1616,6 +1616,10 @@ export class Overlays extends EventTarget {
   #mouseMoveOverlay(
       e: MouseEvent, event: Trace.Types.Events.PageLoadEvent, name: string, overlay: Trace.Types.Overlays.TimingsMarker,
       markers: HTMLElement, marker: HTMLElement): void {
+    if (Trace.Types.Events.isSoftNavigationStart(event)) {
+      name = 'Soft Nav';
+    }
+
     const fieldResult = overlay.entryToFieldResult.get(event);
     const popoverElement = this.#createOverlayPopover(overlay.adjustedTimestamp, name, fieldResult);
     this.#lastMouseOffsetX = e.offsetX + (markers.offsetLeft || 0) + (marker.offsetLeft || 0);

package/front_end/panels/timeline/timelinePanel.css

@@ -90,11 +90,18 @@
   pointer-events: none;
 }
 
-.timeline.panel .status-pane-container.tinted {
+.timeline.panel .status-pane-container.opaque {
   background-color: var(--sys-color-cdt-base-container);
   pointer-events: auto;
 }
 
+.timeline.panel .status-pane-container.tinted {
+  /* stylelint-disable-next-line plugin/use_theme_colors */
+  background-color: #0005;
+  background-blend-mode: multiply;
+  pointer-events: auto;
+}
+
 .timeline-landing-page.legacy > div > p {
   flex: none;
   white-space: pre-line;

package/front_end/panels/timeline/utils/EntryNodes.ts

@@ -29,7 +29,8 @@ export function nodeIdsForEvent(
   } else if (Trace.Types.Events.isSyntheticLayoutShift(event) && event.args.data?.impacted_nodes) {
     event.args.data.impacted_nodes.forEach(node => foundIds.add(node.node_id));
   } else if (
-      Trace.Types.Events.isLargestContentfulPaintCandidate(event) && typeof event.args.data?.nodeId !== 'undefined') {
+      Trace.Types.Events.isAnyLargestContentfulPaintCandidate(event) &&
+      typeof event.args.data?.nodeId !== 'undefined') {
     foundIds.add(event.args.data.nodeId);
   } else if (Trace.Types.Events.isPaint(event) && typeof event.args.data.nodeId !== 'undefined') {
     foundIds.add(event.args.data.nodeId);

package/front_end/panels/whats_new/ReleaseNoteText.ts

@@ -40,22 +40,28 @@ export function getReleaseNote(): ReleaseNote {
 }
 
 let releaseNote: ReleaseNote = {
-  version: 143,
-  header: 'What\'s new in DevTools 143',
+  version: 144,
+  header: 'What\'s new in DevTools 144',
   markdownLinks: [
+    {
+      key: 'request-conditions',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-144/#request-conditions',
+    },
     {
       key: 'mcp-server',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-143/#mcp-server',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-144/#mcp-server',
     },
     {
-      key: 'trace-sharing',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-143/#trace-sharing',
+      key: 'adopted-stylesheets',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-144/#adopted-stylesheets',
     },
+  ],
+  videoLinks: [
     {
-      key: 'starting-style',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-143/#starting-style',
+      description: 'See past highlights from Chrome 144',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-144' as Platform.DevToolsPath.UrlString,
+      type: VideoType.WHATS_NEW,
     },
   ],
-  videoLinks: [],
-  link: 'https://developer.chrome.com/blog/new-in-devtools-143/',
+  link: 'https://developer.chrome.com/blog/new-in-devtools-144/',
 };