chrome-devtools-frontend 1.0.1669021 → 1.0.1672557

package/front_end/models/issues_manager/IssuesManager.ts

@@ -173,6 +173,7 @@ export function isIssueCodeSupported(code: Protocol.Audits.InspectorIssueCode):
  */
 export function createIssuesFromProtocolIssue(
     issuesModel: SDK.IssuesModel.IssuesModel|null, inspectorIssue: Protocol.Audits.InspectorIssue,
+    // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
     frameManager: SDK.FrameManager.FrameManager = SDK.FrameManager.FrameManager.instance()): Issue[] {
   const handler = issueCodeHandlers.get(inspectorIssue.code);
   if (handler) {
@@ -203,6 +204,7 @@ export function defaultHideIssueByCodeSetting(): HideIssueMenuSetting {
   return setting;
 }
 
+// eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
 export function getHideIssueByCodeSetting(settings: Common.Settings.Settings = Common.Settings.Settings.instance()):
     Common.Settings.Setting<HideIssueMenuSetting> {
   return settings.createSetting('hide-issue-by-code-setting-experiment-2021', defaultHideIssueByCodeSetting());
@@ -235,13 +237,18 @@ export class IssuesManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   constructor(
       private readonly showThirdPartyIssuesSetting?: Common.Settings.Setting<boolean>,
       private readonly hideIssueSetting?: Common.Settings.Setting<HideIssueMenuSetting>,
+      // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
       frameManager: SDK.FrameManager.FrameManager = SDK.FrameManager.FrameManager.instance(),
+      // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
       targetManager: SDK.TargetManager.TargetManager = SDK.TargetManager.TargetManager.instance(),
+      // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
       workspace: Workspace.Workspace.WorkspaceImpl = Workspace.Workspace.WorkspaceImpl.instance(),
       debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding =
-          Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance(),
+          // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
+      Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance(),
       cssWorkspaceBinding: Bindings.CSSWorkspaceBinding.CSSWorkspaceBinding =
-          Bindings.CSSWorkspaceBinding.CSSWorkspaceBinding.instance(),
+          // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
+      Bindings.CSSWorkspaceBinding.CSSWorkspaceBinding.instance(),
   ) {
     super();
     this.#frameManager = frameManager;
@@ -523,6 +530,7 @@ export interface EventTypes {
 
 // @ts-expect-error
 globalThis.addIssueForTest = (issue: Protocol.Audits.InspectorIssue) => {
+  // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
   const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
   const issuesModel = mainTarget?.model(SDK.IssuesModel.IssuesModel);
   issuesModel?.issueAdded({issue});

package/front_end/models/live-metrics/LiveMetrics.ts

@@ -14,6 +14,13 @@ import * as CrUXManager from '../crux-manager/crux-manager.js';
 
 import * as Spec from './web-vitals-injected/spec/spec.js';
 
+export const timelineEnableSoftNavigationsSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'timeline-enable-soft-navigations',
+  type: Common.Settings.SettingType.BOOLEAN,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  defaultValue: true,
+};
+
 const UIStrings = {
   /**
    * @description Warning text indicating that the Largest Contentful Paint (LCP) performance metric was affected by the user changing the simulated device.
@@ -61,18 +68,19 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   #mutex = new Common.Mutex.Mutex();
   readonly #targetManager: SDK.TargetManager.TargetManager;
   readonly #deviceModeModel: EmulationModel.DeviceModeModel.DeviceModeModel|null;
+  readonly #settings: Common.Settings.Settings;
 
-  constructor(targetManager: SDK.TargetManager.TargetManager,
+  constructor(targetManager: SDK.TargetManager.TargetManager, settings: Common.Settings.Settings,
               deviceModeModel: EmulationModel.DeviceModeModel.DeviceModeModel|null) {
     super();
     this.#targetManager = targetManager;
+    this.#settings = settings;
     this.#deviceModeModel = deviceModeModel;
     this.#targetManager.observeTargets(this, {scoped: true});
     this.#targetManager.addModelListener(SDK.ResourceTreeModel.ResourceTreeModel,
                                          SDK.ResourceTreeModel.Events.PrimaryPageChanged, this.#onPrimaryPageChanged,
                                          this);
-    Common.Settings.Settings.instance()
-        .moduleSetting('timeline-enable-soft-navigations')
+    this.#settings.resolve(timelineEnableSoftNavigationsSettingDescriptor)
         .addChangeListener(this.#onSettingChanged, this);
   }
 
@@ -104,7 +112,8 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     if (!Root.DevToolsContext.globalInstance().has(LiveMetrics) || forceNew) {
       Root.DevToolsContext.globalInstance().set(
           LiveMetrics,
-          new LiveMetrics(SDK.TargetManager.TargetManager.instance(),
+          // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
+          new LiveMetrics(SDK.TargetManager.TargetManager.instance(), Common.Settings.Settings.instance(),
                           EmulationModel.DeviceModeModel.DeviceModeModel.tryInstance()));
     }
 
@@ -149,6 +158,19 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
       return false;
     }
 
+    // Validate duration at runtime to prevent code injection via interpolation.
+    const duration = Number(interaction.duration);
+    if (!Number.isFinite(duration)) {
+      return false;
+    }
+
+    // JSON.stringify escapes quotes. We concatenate safeInteractionType (which is
+    // wrapped in double quotes) instead of interpolating it directly inside the
+    // single-quoted template below. This avoids syntax errors if the value contains
+    // single quotes (e.g. "pointer'"), which would otherwise terminate the
+    // single-quoted template string.
+    const safeInteractionType = JSON.stringify(interaction.interactionType ?? 'unknown');
+
     const scriptsTable = [];
     for (const loaf of interaction.longAnimationFrameTimings) {
       for (const script of loaf.scripts) {
@@ -179,8 +201,8 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
           '';
       await this.#target.runtimeAgent().invoke_evaluate({
         expression: `
-          console.group('[DevTools] Long animation frames for ${interaction.duration}ms ${
-            interaction.interactionType} interaction');
+          console.group('[DevTools] Long animation frames for ${duration}ms ' + ${
+            safeInteractionType} + ' interaction');
           console.log('Scripts${scriptLimitText}:');
           console.table(${JSON.stringify(scriptsTable)});
           console.log('Intersecting long animation frame events${loafLimitText}:', ${
@@ -206,6 +228,12 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
    */
   async #resolveNodeRef(index: number, executionContextId: Protocol.Runtime.ExecutionContextId):
       Promise<SDK.DOMModel.DOMNode|null> {
+    // Validate index at runtime because the payload comes from an untrusted binding
+    // and could contain malicious strings if type casted.
+    if (!Number.isInteger(index)) {
+      return null;
+    }
+
     if (!this.#target) {
       return null;
     }
@@ -412,7 +440,9 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
         this.#clearMetrics();
         this.#navigationType = webVitalsEvent.navigationType;
         if (webVitalsEvent.url) {
+          // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
           CrUXManager.CrUXManager.instance().setMainDocumentURL(webVitalsEvent.url);
+          // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
           void CrUXManager.CrUXManager.instance().refresh();
         }
         break;
@@ -445,7 +475,10 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
 
     const resourceTreeModel = this.#target.model(SDK.ResourceTreeModel.ResourceTreeModel);
     const primaryFrameId = resourceTreeModel?.mainFrame?.id;
-    return Boolean(primaryFrameId && executionContext.frameId === primaryFrameId);
+    // Ensure the context belongs to our isolated world and is not the default
+    // page context, to prevent the page from spoofing events.
+    return Boolean(primaryFrameId && executionContext.frameId === primaryFrameId &&
+                   executionContext.name === LIVE_METRICS_WORLD_NAME && !executionContext.isDefault);
   }
 
   async #onBindingCalled(event: {data: Protocol.Runtime.BindingCalledEvent}): Promise<void> {
@@ -546,8 +579,7 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
       });
     }
 
-    const softNavsSettingValue =
-        Common.Settings.Settings.instance().moduleSetting('timeline-enable-soft-navigations').get();
+    const softNavsSettingValue = this.#settings.resolve(timelineEnableSoftNavigationsSettingDescriptor).get();
     const source = `window.devToolsReportSoftNavs = ${softNavsSettingValue};\n` + await InjectedScript.get();
 
     // Inject the script

package/front_end/models/logs/LogManager.ts

@@ -27,11 +27,14 @@ export class LogManager implements SDK.TargetManager.SDKModelObserver<SDK.LogMod
 
   static instance({forceNew}: {forceNew: boolean} = {forceNew: false}): LogManager {
     if (!Root.DevToolsContext.globalInstance().has(LogManager) || forceNew) {
-      Root.DevToolsContext.globalInstance().set(LogManager,
-                                                new LogManager(
-                                                    SDK.TargetManager.TargetManager.instance(),
-                                                    NetworkLog.instance(),
-                                                    ));
+      Root.DevToolsContext.globalInstance().set(
+          LogManager,
+          new LogManager(
+              // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
+              SDK.TargetManager.TargetManager.instance(),
+              // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
+              NetworkLog.instance(),
+              ));
     }
 
     return Root.DevToolsContext.globalInstance().get(LogManager);

package/front_end/models/logs/NetworkLog.ts

@@ -56,6 +56,7 @@ export class NetworkLog extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
   static instance(): NetworkLog {
     if (!Root.DevToolsContext.globalInstance().has(NetworkLog)) {
       Root.DevToolsContext.globalInstance().set(
+          // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
           NetworkLog, new NetworkLog(SDK.TargetManager.TargetManager.instance(), Common.Settings.Settings.instance()));
     }
 

package/front_end/models/persistence/IsolatedFileSystemManager.ts

@@ -47,9 +47,7 @@ export class IsolatedFileSystemManager extends Common.ObjectWrapper.ObjectWrappe
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
         Host.InspectorFrontendHostAPI.Events.FileSystemRemoved, this.onFileSystemRemoved, this);
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-        Host.InspectorFrontendHostAPI.Events.FileSystemAdded, event => {
-          this.onFileSystemAdded(event);
-        }, this);
+        Host.InspectorFrontendHostAPI.Events.FileSystemAdded, this.onFileSystemAdded, this);
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
         Host.InspectorFrontendHostAPI.Events.FileSystemFilesChangedAddedRemoved, this.onFileSystemFilesChanged, this);
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
@@ -101,13 +99,33 @@ export class IsolatedFileSystemManager extends Common.ObjectWrapper.ObjectWrappe
     this.fileSystemsLoadedPromise = this.requestFileSystems();
   }
 
+  // TODO(crbug.com/542394587): Should be `Symbol.dispsoe`
+  dispose(): void {
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
+        Host.InspectorFrontendHostAPI.Events.FileSystemRemoved, this.onFileSystemRemoved, this);
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
+        Host.InspectorFrontendHostAPI.Events.FileSystemAdded, this.onFileSystemAdded, this);
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
+        Host.InspectorFrontendHostAPI.Events.FileSystemFilesChangedAddedRemoved, this.onFileSystemFilesChanged, this);
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
+        Host.InspectorFrontendHostAPI.Events.IndexingTotalWorkCalculated, this.onIndexingTotalWorkCalculated, this);
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
+        Host.InspectorFrontendHostAPI.Events.IndexingWorked, this.onIndexingWorked, this);
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
+        Host.InspectorFrontendHostAPI.Events.IndexingDone, this.onIndexingDone, this);
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
+        Host.InspectorFrontendHostAPI.Events.SearchCompleted, this.onSearchCompleted, this);
+  }
+
   static instance(opts: {
     forceNew?: boolean|null,
     settings?: Common.Settings.Settings|null,
     console?: Common.Console.Console|null,
   } = {}): IsolatedFileSystemManager {
     const forceNew = opts.forceNew ?? null;
+    // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
     const settings = opts.settings ?? Common.Settings.Settings.instance();
+    // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
     const console = opts.console ?? Common.Console.Console.instance();
     if (!Root.DevToolsContext.globalInstance().has(IsolatedFileSystemManager) || forceNew) {
       const instance = new IsolatedFileSystemManager(settings, console);

package/front_end/models/persistence/NetworkPersistenceManager.ts

@@ -103,11 +103,17 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
           NetworkPersistenceManager,
           new NetworkPersistenceManager(
               workspace,
+              // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
               PersistenceImpl.instance(),
+              // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
               Breakpoints.BreakpointManager.BreakpointManager.instance(),
+              // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
               SDK.TargetManager.TargetManager.instance(),
+              // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
               Common.Settings.Settings.instance(),
+              // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
               IsolatedFileSystemManager.instance(),
+              // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
               SDK.NetworkManager.MultitargetNetworkManager.instance(),
               ),
       );

package/front_end/models/project_settings/ProjectSettingsModel.ts

@@ -4,7 +4,6 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
-import type * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 
 /** The security origin for all DevTools (front-end) resources. */
@@ -107,23 +106,20 @@ export class ProjectSettingsModel extends Common.ObjectWrapper.ObjectWrapper<Eve
   }
 
   constructor(
-      hostConfig: Root.Runtime.HostConfig,
       pageResourceLoader: SDK.PageResourceLoader.PageResourceLoader,
       targetManager: SDK.TargetManager.TargetManager,
   ) {
     super();
     this.#pageResourceLoader = pageResourceLoader;
     this.#targetManager = targetManager;
-    if (hostConfig.devToolsWellKnown?.enabled) {
-      this.#targetManager.addEventListener(
-          SDK.TargetManager.Events.INSPECTED_URL_CHANGED,
-          this.#inspectedURLChanged,
-          this,
-      );
-      const target = this.#targetManager.primaryPageTarget();
-      if (target !== null) {
-        this.#inspectedURLChanged({data: target});
-      }
+    this.#targetManager.addEventListener(
+        SDK.TargetManager.Events.INSPECTED_URL_CHANGED,
+        this.#inspectedURLChanged,
+        this,
+    );
+    const target = this.#targetManager.primaryPageTarget();
+    if (target !== null) {
+      this.#inspectedURLChanged({data: target});
     }
   }
 

package/front_end/models/trace/Processor.ts

@@ -440,7 +440,12 @@ export class TraceProcessor extends EventTarget {
     let id, urlString, navigation;
     if (context.navigation) {
       id = `NAVIGATION_${this.#insights.size}`;
-      urlString = data.Meta.finalDisplayUrlByNavigationId.get(context.navigationId) ?? data.Meta.mainFrameURL;
+      if (Types.Events.isSoftNavigationStart(context.navigation)) {
+        urlString = context.navigation.args.context.URL;
+      } else {
+        urlString = data.Meta.finalDisplayUrlByNavigationId.get(context.navigation.args.data?.navigationId ?? '') ??
+            data.Meta.mainFrameURL;
+      }
       navigation = context.navigation;
     } else {
       id = Types.Events.NO_NAVIGATION;
@@ -523,17 +528,28 @@ export class TraceProcessor extends EventTarget {
 
     // Filter main frame navigations to those that have the necessary data (frameId and navigationId).
     // TODO(cjamcl): Does this filtering makes the "use the next nav as the end time" logic potentially broken? Are navs without nav id or frame even real?
-    const navigations = data.Meta.mainFrameNavigations.filter(
-        navigation => navigation.args.frame && navigation.args.data?.navigationId);
+    const hardNavigations = data.Meta.mainFrameNavigations.filter(navigation => navigation.args.frame &&
+                                                                      navigation.args.data?.navigationId);
+
+    const softNavigations =
+        this.#modelConfiguration.enableSoftNavigation ? Array.from(data.Meta.softNavigationsById.values()) : [];
+    const navigations = [...hardNavigations, ...softNavigations].sort((a, b) => a.ts - b.ts);
 
     this.#computeInsightsForInitialTracePeriod(data, navigations, options);
 
     for (const [index, navigation] of navigations.entries()) {
       const min = navigation.ts;
-      // Use trace end for the last navigation, otherwise use the start of the next navigation.
-      const max = index + 1 < navigations.length ? navigations[index + 1].ts : data.Meta.traceBounds.max;
+      // Use trace end for the last navigation, otherwise use the start of the next navigation (minus 1 to avoid overlap).
+      let max = index + 1 < navigations.length ? navigations[index + 1].ts : data.Meta.traceBounds.max;
+      if (index + 1 < navigations.length) {
+        max = Types.Timing.Micro(max - 1);
+      }
       const bounds = Helpers.Timing.traceWindowFromMicroSeconds(min, max);
-      this.#computeInsightsForNavigation(navigation, bounds, data, traceEvents, options);
+      if (Types.Events.isSoftNavigationStart(navigation)) {
+        this.#computeInsightsForSoftNavigation(navigation, bounds, data, options);
+      } else {
+        this.#computeInsightsForNavigation(navigation, bounds, data, traceEvents, options);
+      }
     }
   }
 
@@ -541,12 +557,13 @@ export class TraceProcessor extends EventTarget {
    * Computes insights for the period before the first navigation, or for the entire trace if no navigations exist.
    */
   #computeInsightsForInitialTracePeriod(
-      data: Handlers.Types.HandlerData, navigations: readonly Types.Events.NavigationStart[],
+      data: Handlers.Types.HandlerData,
+      navigations: ReadonlyArray<Types.Events.NavigationStart|Types.Events.SoftNavigationStart>,
       options: Types.Configuration.ParseOptions): void {
     // Determine bounds: Use the period before the first navigation if navigations exist, otherwise use the entire trace bounds.
-    const bounds = navigations.length > 0 ?
-        Helpers.Timing.traceWindowFromMicroSeconds(data.Meta.traceBounds.min, navigations[0].ts) :
-        data.Meta.traceBounds;
+    const bounds = navigations.length > 0 ? Helpers.Timing.traceWindowFromMicroSeconds(
+                                                data.Meta.traceBounds.min, Types.Timing.Micro(navigations[0].ts - 1)) :
+                                            data.Meta.traceBounds;
 
     const context: Insights.Types.InsightSetContext = {
       options,
@@ -609,6 +626,21 @@ export class TraceProcessor extends EventTarget {
     };
     this.#computeInsightSet(data, context);
   }
+
+  /**
+   * Computes insights for a specific soft navigation event.
+   */
+  #computeInsightsForSoftNavigation(navigation: Types.Events.SoftNavigationStart, bounds: Types.Timing.TraceWindowMicro,
+                                    data: Handlers.Types.HandlerData, options: Types.Configuration.ParseOptions): void {
+    const frameId = navigation.args.frame;
+    const context: Insights.Types.InsightSetContextWithSoftNavigation = {
+      options,
+      bounds,
+      frameId,
+      navigation,
+    };
+    this.#computeInsightSet(data, context);
+  }
 }
 
 /**

package/front_end/models/trace/handlers/LayoutShiftsHandler.ts

@@ -39,7 +39,6 @@ import type {HandlerName} from './types.js';
 
 interface LayoutShiftsData {
   clusters: readonly Types.Events.SyntheticLayoutShiftCluster[];
-  clustersByNavigationId: Map<Types.Events.NavigationId, Types.Events.SyntheticLayoutShiftCluster[]>;
   sessionMaxScore: number;
   // The session window which contains the SessionMaxScore
   clsWindowID: number;
@@ -110,7 +109,6 @@ let sessionMaxScore = 0;
 let clsWindowID = -1;
 
 let clusters: Types.Events.SyntheticLayoutShiftCluster[] = [];
-let clustersByNavigationId = new Map<Types.Events.NavigationId, Types.Events.SyntheticLayoutShiftCluster[]>();
 
 /**
  * Represents a point in time in which a  LS score change
@@ -141,7 +139,6 @@ export function reset(): void {
   sessionMaxScore = 0;
   scoreRecords = [];
   clsWindowID = -1;
-  clustersByNavigationId = new Map();
 }
 
 export function handleEvent(event: Types.Events.Event): void {
@@ -292,8 +289,9 @@ export async function finalize(): Promise<void> {
 }
 
 async function buildLayoutShiftsClusters(): Promise<void> {
-  const {navigationsByFrameId, mainFrameId, traceBounds} = metaHandlerData();
-  const navigations = navigationsByFrameId.get(mainFrameId) || [];
+  const {navigationsByFrameId, mainFrameId, traceBounds, softNavigationsById} = metaHandlerData();
+  const navigations: Types.Events.Event[] =
+      [...(navigationsByFrameId.get(mainFrameId) || []), ...softNavigationsById.values()].sort((a, b) => a.ts - b.ts);
   if (layoutShiftEvents.length === 0) {
     return;
   }
@@ -348,13 +346,15 @@ async function buildLayoutShiftsClusters(): Promise<void> {
       // If this cluster happened after a navigation, set the navigationId to
       // the current navigation. This lets us easily group clusters by
       // navigation.
-      const navigationId = currentShiftNavigation === null ?
-          Types.Events.NO_NAVIGATION :
-          navigations[currentShiftNavigation].args.data?.navigationId;
-      // TODO: `navigationId` is `string | undefined`, but the undefined portion
-      // comes from `data.navigationId`. I don't think that is possible for this
-      // event type. Can we make this typing stronger? In the meantime, we allow
-      // `navigationId` to include undefined values.
+      let navigationId: string|undefined = undefined;
+      if (currentShiftNavigation !== null) {
+        const nav = navigations[currentShiftNavigation];
+        if (Types.Events.isNavigationStart(nav)) {
+          navigationId = nav.args.data?.navigationId;
+        }
+      } else {
+        navigationId = Types.Events.NO_NAVIGATION;
+      }
 
       clusters.push(Helpers.SyntheticEvents.SyntheticEventsManager
                         .registerSyntheticEvent<Types.Events.SyntheticLayoutShiftCluster>({
@@ -519,12 +519,6 @@ async function buildLayoutShiftsClusters(): Promise<void> {
       sessionMaxScore = weightedScore;
     }
 
-    if (cluster.navigationId) {
-      const clustersForId = Platform.MapUtilities.getWithDefault(clustersByNavigationId, cluster.navigationId, () => {
-        return [];
-      });
-      clustersForId.push(cluster);
-    }
   }
 }
 
@@ -543,7 +537,6 @@ export function data(): LayoutShiftsData {
     remoteFonts,
     scoreRecords,
     backendNodeIds,
-    clustersByNavigationId,
     paintImageEvents,
   };
 }

package/front_end/models/trace/handlers/MetaHandler.ts

@@ -62,6 +62,7 @@ let navigationsByNavigationId = new Map<string, Types.Events.NavigationStart>();
 let softNavigationsById = new Map<number, Types.Events.SoftNavigationStart>();
 let finalDisplayUrlByNavigationId = new Map<string, string>();
 let mainFrameNavigations: Types.Events.NavigationStart[] = [];
+let sameDocumentNavigations: Types.Events.DidCommitSameDocumentNavigation[] = [];
 
 // Represents all the threads in the trace, organized by process. This is mostly for internal
 // bookkeeping so that during the finalize pass we can obtain the main and browser thread IDs.
@@ -97,6 +98,7 @@ export function reset(): void {
   finalDisplayUrlByNavigationId = new Map();
   processNames = new Map();
   mainFrameNavigations = [];
+  sameDocumentNavigations = [];
 
   browserProcessId = Types.Events.ProcessID(-1);
   browserThreadId = Types.Events.ThreadID(-1);
@@ -346,15 +348,12 @@ export function handleEvent(event: Types.Events.Event): void {
     return;
   }
 
-  // Update `finalDisplayUrlByNavigationId` to reflect history API navigations.
+  // Track history API navigations to compute final display URLs in finalize.
   if (Types.Events.isDidCommitSameDocumentNavigation(event)) {
     if (event.args.render_frame_host.frame_type !== 'PRIMARY_MAIN_FRAME') {
       return;
     }
-
-    const navigation = mainFrameNavigations.at(-1);
-    const key = navigation?.args.data?.navigationId ?? '';
-    finalDisplayUrlByNavigationId.set(key, event.args.url);
+    sameDocumentNavigations.push(event);
     return;
   }
 }
@@ -440,6 +439,40 @@ export async function finalize(options?: FinalizeOptions): Promise<void> {
       mainFrameURL = firstMainFrameNav.args.data.documentLoaderURL;
     }
   }
+
+  // Compute final display URLs for each hard navigation.
+  // A hard navigation's final URL is updated by history API navigations (e.g. pushState).
+  // However, if a soft navigation occurs, subsequent history API navigations belong to the
+  // soft navigation and should not update the hard navigation's URL.
+  const softNavs = Array.from(softNavigationsById.values()).sort((a, b) => a.ts - b.ts);
+
+  // Create an array of intervals for each hard navigation.
+  const hardNavs = [...mainFrameNavigations];
+
+  // Add a faux navigation to cover the time before the first hard navigation, or the whole trace if there are none.
+  const intervals = [
+    {minTs: 0, maxTs: hardNavs.length > 0 ? hardNavs[0].ts : Infinity, key: ''},
+    ...hardNavs.map((nav, i) => ({
+                      minTs: nav.ts,
+                      maxTs: i + 1 < hardNavs.length ? hardNavs[i + 1].ts : Infinity,
+                      key: nav.args.data?.navigationId ?? '',
+                    })),
+  ];
+
+  for (const {minTs, maxTs, key} of intervals) {
+    // Find the first soft navigation within this hard navigation's time window.
+    const firstSoftNav = softNavs.find(sn => sn.ts >= minTs && sn.ts < maxTs);
+    // If a soft navigation occurred, we only consider history events before it.
+    const effectiveMaxTs = firstSoftNav ? firstSoftNav.ts : maxTs;
+
+    // Find the last history API navigation in the effective window.
+    const historyEvents = sameDocumentNavigations.filter(hn => hn.ts >= minTs && hn.ts < effectiveMaxTs);
+
+    const lastHistoryEvent = historyEvents.at(-1);
+    if (lastHistoryEvent) {
+      finalDisplayUrlByNavigationId.set(key, lastHistoryEvent.args.url);
+    }
+  }
 }
 
 export interface MetaHandlerData {

package/front_end/models/trace/insights/CLSCulprits.ts

@@ -599,8 +599,7 @@ export function generateInsight(data: Handlers.Types.HandlerData, context: Insig
   const domLoadingEvents = data.LayoutShifts.domLoadingEvents.filter(isWithinContext);
   const unsizedImageEvents = data.LayoutShifts.layoutImageUnsizedEvents.filter(isWithinContext);
 
-  const clusterKey = context.navigation ? context.navigationId : Types.Events.NO_NAVIGATION;
-  const clusters = data.LayoutShifts.clustersByNavigationId.get(clusterKey) ?? [];
+  const clusters = data.LayoutShifts.clusters.filter(isWithinContext);
   const clustersByScore = clusters.toSorted((a, b) => b.clusterCumulativeScore - a.clusterCumulativeScore);
   const worstCluster = clustersByScore.at(0);
   const layoutShifts = clusters.flatMap(cluster => cluster.events);

package/front_end/models/trace/insights/CharacterSet.ts

@@ -127,7 +127,7 @@ function metaCharsetLabel(disposition: Types.Events.MetaCharsetDisposition|undef
 
 export function generateInsight(
     data: Handlers.Types.HandlerData, context: InsightSetContext): CharacterSetInsightModel {
-  if (!context.navigation) {
+  if (!context.navigation || !('navigationId' in context)) {
     return finalize({});
   }
 

package/front_end/models/trace/insights/Common.ts

@@ -160,7 +160,26 @@ export function getFieldMetricsForInsightSet(
     return null;
   }
 
-  const pageResult = getPageResult(cruxFieldData, insightSet.url.href, insightSet.url.origin, scope);
+  let pageResult = getPageResult(cruxFieldData, insightSet.url.href, insightSet.url.origin, scope);
+
+  if (!pageResult && insightSet.navigation && Types.Events.isSoftNavigationStart(insightSet.navigation)) {
+    pageResult = cruxFieldData.find(result => {
+      const key = scope ? result[`${scope.pageScope}-${scope.deviceScope}`]?.record.key :
+                          (result['url-ALL'] || result['origin-ALL'])?.record.key;
+      if (!key) {
+        return false;
+      }
+      if (key.url) {
+        try {
+          return new URL(key.url).origin === insightSet.url.origin;
+        } catch {
+          return false;
+        }
+      }
+      return key.origin === insightSet.url.origin;
+    });
+  }
+
   if (!pageResult) {
     return null;
   }
@@ -266,7 +285,7 @@ function estimateSavingsWithGraphs(
  */
 export function metricSavingsForWastedBytes(
     wastedBytesByRequestId: Map<string, number>, context: InsightSetContext): MetricSavings|undefined {
-  if (!context.navigation || !context.lantern) {
+  if (!context.navigation || !('lantern' in context) || !context.lantern) {
     return;
   }
 

package/front_end/models/trace/insights/DocumentLatency.ts

@@ -191,7 +191,7 @@ function finalize(partialModel: PartialInsightModel<DocumentLatencyInsightModel>
 
 export function generateInsight(
     data: Handlers.Types.HandlerData, context: InsightSetContext): DocumentLatencyInsightModel {
-  if (!context.navigation) {
+  if (!context.navigation || !('navigationId' in context)) {
     return finalize({});
   }
 

package/front_end/models/trace/insights/LCPBreakdown.ts

@@ -110,10 +110,10 @@ function anyValuesNaN(...values: number[]): boolean {
  * them to be missing on newer traces, but old trace files may lack some of the
  * data we rely on, so we want to handle that case.
  */
-function determineSubparts(
-    nav: Types.Events.NavigationStart, docRequest: Types.Events.SyntheticNetworkRequest,
-    lcpEvent: Types.Events.AnyLargestContentfulPaintCandidate,
-    lcpRequest: Types.Events.SyntheticNetworkRequest|undefined): LCPSubparts|null {
+function determineSubparts(nav: Types.Events.NavigationStart|Types.Events.SoftNavigationStart,
+                           docRequest: Types.Events.SyntheticNetworkRequest,
+                           lcpEvent: Types.Events.AnyLargestContentfulPaintCandidate,
+                           lcpRequest: Types.Events.SyntheticNetworkRequest|undefined): LCPSubparts|null {
   const firstDocByteTs = calculateDocFirstByteTs(docRequest);
   if (firstDocByteTs === null) {
     return null;
@@ -232,9 +232,10 @@ export function generateInsight(
   const lcpMs = Helpers.Timing.microToMilli(metricScore.timing);
   // This helps position things on the timeline's UI accurately for a trace.
   const lcpTs = metricScore.event?.ts ? Helpers.Timing.microToMilli(metricScore.event?.ts) : undefined;
-  const lcpRequest = data.LargestImagePaint.lcpRequestByNavigationId.get(context.navigationId);
+  const lcpRequest =
+      'navigationId' in context ? data.LargestImagePaint.lcpRequestByNavigationId.get(context.navigationId) : undefined;
 
-  const docRequest = networkRequests.byId.get(context.navigationId);
+  const docRequest = 'navigationId' in context ? networkRequests.byId.get(context.navigationId) : undefined;
   if (!docRequest) {
     return finalize({lcpMs, lcpTs, lcpEvent, lcpRequest, warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});
   }

package/front_end/models/trace/insights/LCPDiscovery.ts

@@ -101,7 +101,7 @@ function finalize(partialModel: PartialInsightModel<LCPDiscoveryInsightModel>):
 
 export function generateInsight(
     data: Handlers.Types.HandlerData, context: InsightSetContext): LCPDiscoveryInsightModel {
-  if (!context.navigation) {
+  if (!context.navigation || !('navigationId' in context)) {
     return finalize({});
   }