chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

package/front_end/panels/timeline/Initiators.test.ts

@@ -9,184 +9,165 @@ import {TraceLoader} from '../../testing/TraceLoader.js';
 import * as Timeline from './timeline.js';
 
 describeWithEnvironment('Initiators', () => {
-  it('returns the initiator data', async function() {
-    const {parsedTrace} = await TraceLoader.traceEngine(this, 'set-timeout-long-task.json.gz');
-
-    const timerFireEvent =
-        Array.from(parsedTrace.Initiators.eventToInitiator.keys()).find(Trace.Types.Events.isTimerFire);
-    assert.exists(timerFireEvent);
-    const timerInstallEvent = parsedTrace.Initiators.eventToInitiator.get(timerFireEvent);
-    assert.exists(timerInstallEvent);
-    const initiatorData = Timeline.Initiators.initiatorsDataToDraw(parsedTrace, timerFireEvent, [], []);
-
-    assert.deepEqual(initiatorData, [{
-                       event: timerFireEvent,
-                       initiator: timerInstallEvent,
-                     }]);
-  });
-
-  it('returns the initiator data for network requests', async function() {
-    const {parsedTrace} = await TraceLoader.traceEngine(this, 'network-requests-initiators.json.gz');
-
-    // Find the network request to test, it is initiated by `youtube.com`.
-    const event = parsedTrace.NetworkRequests.byTime.find(event => event.ts === 1491680762420);
-    assert.exists(event);
-    // Find the `youtube.com` network request.
-    const initiator = parsedTrace.NetworkRequests.byTime.find(event => event.ts === 1491680629144);
-    assert.exists(initiator);
-    const initiatorData = Timeline.Initiators.initiatorsDataToDrawForNetwork(parsedTrace, event);
-
-    assert.deepEqual(initiatorData, [{event, initiator}]);
-  });
-
-  it('can walk up the tree to find the first parent with an initiator', async function() {
-    const {parsedTrace} = await TraceLoader.traceEngine(this, 'set-timeout-long-task.json.gz');
-
-    // Find any of the fibonnaci() calls; they have a parent
-    // event (TimerFire) that has an initiator.
-    const fibonacciCall = parsedTrace.Renderer.allTraceEntries.find(entry => {
-      return Trace.Types.Events.isProfileCall(entry) && entry.callFrame.functionName === 'fibonacci';
+  describe('initiator-initiated event relationships', () => {
+    let requestIdleCallbackCall: Trace.Types.Events.SyntheticProfileCall;
+    let functionCallByrequestIdleCallback: Trace.Types.Events.Event;
+    let setTimeoutCall: Trace.Types.Events.SyntheticProfileCall;
+    let functionCallBySetTimeout: Trace.Types.Events.Event;
+    let rAFCall: Trace.Types.Events.SyntheticProfileCall;
+    let functionCallByRAF: Trace.Types.Events.Event;
+
+    let parsedTrace: Trace.Handlers.Types.ParsedTrace;
+    beforeEach(async function() {
+      parsedTrace = (await TraceLoader.traceEngine(this, 'async-js-calls.json.gz')).parsedTrace;
+      setTimeoutCall =
+          parsedTrace.Renderer.allTraceEntries
+              .filter(e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'setTimeout')
+              .at(-1) as Trace.Types.Events.SyntheticProfileCall;
+      assert.exists(setTimeoutCall);
+      assert.isTrue(Trace.Types.Events.isProfileCall(setTimeoutCall));
+
+      functionCallBySetTimeout =
+          parsedTrace.Renderer.allTraceEntries.find(
+              e => Trace.Types.Events.isFunctionCall(e) && e.ts > setTimeoutCall.ts) as Trace.Types.Events.Event;
+      assert.exists(functionCallBySetTimeout);
+
+      rAFCall =
+          parsedTrace.Renderer.allTraceEntries
+              .filter(e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'requestAnimationFrame')
+              .at(-1) as Trace.Types.Events.SyntheticProfileCall;
+      assert.exists(rAFCall);
+      assert.isTrue(Trace.Types.Events.isProfileCall(rAFCall));
+
+      functionCallByRAF =
+          parsedTrace.Renderer.allTraceEntries.find(e => Trace.Types.Events.isFunctionCall(e) && e.ts > rAFCall.ts) as
+          Trace.Types.Events.Event;
+      assert.exists(functionCallByRAF);
+
+      requestIdleCallbackCall =
+          parsedTrace.Renderer.allTraceEntries
+              .filter(e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'requestIdleCallback')
+              .at(-1) as Trace.Types.Events.SyntheticProfileCall;
+      assert.exists(requestIdleCallbackCall);
+      assert.isTrue(Trace.Types.Events.isProfileCall(requestIdleCallbackCall));
+
+      functionCallByrequestIdleCallback = parsedTrace.Renderer.allTraceEntries.find(
+                                              e => Trace.Types.Events.isFunctionCall(e) &&
+                                                  e.ts > requestIdleCallbackCall.ts) as Trace.Types.Events.Event;
+      assert.exists(functionCallByrequestIdleCallback);
     });
-    assert.exists(fibonacciCall);
-
-    const timerFireEvent =
-        Array.from(parsedTrace.Initiators.eventToInitiator.keys()).find(Trace.Types.Events.isTimerFire);
-    assert.exists(timerFireEvent);
-    const timerInstallEvent = parsedTrace.Initiators.eventToInitiator.get(timerFireEvent);
-    assert.exists(timerInstallEvent);
-
-    // Find the initator data but starting at the fibonacci()
-    // call.
-    const initiatorsData = Timeline.Initiators.initiatorsDataToDraw(parsedTrace, fibonacciCall, [], []);
-
-    assert.deepEqual(initiatorsData, [{
-                       event: timerFireEvent,
-                       initiator: timerInstallEvent,
-                     }]);
-  });
-
-  it('will walk back through the initiators to find the entire chain', async function() {
-    const {parsedTrace} = await TraceLoader.traceEngine(this, 'nested-initiators.json.gz');
-
-    // Find any of the fibonnaci() calls; they have a parent
-    // event (TimerFire) that has an initiator.
-    const fibonacciCall = parsedTrace.Renderer.allTraceEntries.find(entry => {
-      return Trace.Types.Events.isProfileCall(entry) && entry.callFrame.functionName === 'fibonacci';
+    it('returns the initiator data', async function() {
+      const initiatorData = Timeline.Initiators.initiatorsDataToDraw(parsedTrace, functionCallBySetTimeout, [], []);
+      assert.deepEqual(initiatorData[0], {
+        event: functionCallBySetTimeout,
+        initiator: setTimeoutCall,
+      });
     });
-    assert.exists(fibonacciCall);
-
-    // Find the initators data but starting at the fibonacci()
-    // call. We expect to find two initiatorData objects here:
-    // 1. fibonacci() ===> TimerFire caused by TimerInstall
-    // 2. The TimerInstall from (1), caused by a prior TimerInstall.
-    const initiatorsData = Timeline.Initiators.initiatorsDataToDraw(parsedTrace, fibonacciCall, [], []);
-
-    assert.lengthOf(initiatorsData, 2);
-    for (const initiatorData of initiatorsData) {
-      // Ensure each initiatorData object has TimerInstall>TimerFire event to initiator.
-      assert.strictEqual(initiatorData.event.name, Trace.Types.Events.Name.TIMER_FIRE);
-      assert.strictEqual(initiatorData.initiator.name, Trace.Types.Events.Name.TIMER_INSTALL);
-    }
-  });
 
-  it('will walk forward to find the events initiated by the selected entry', async function() {
-    const {parsedTrace} = await TraceLoader.traceEngine(this, 'nested-initiators.json.gz');
+    it('can walk up the tree to find the first parent with an initiator', async function() {
+      // Find any of the bar() calls; they have a parent event
+      // (FunctionCall) that has an initiator.
+      const barCall = parsedTrace.Renderer.allTraceEntries.find(
+          e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'bar');
+      assert.exists(barCall);
+
+      // Find the initator data but starting at the fibonacci()
+      // call.
+      const initiatorsData = Timeline.Initiators.initiatorsDataToDraw(parsedTrace, barCall, [], []);
+
+      assert.deepEqual(initiatorsData[0], {
+        event: functionCallBySetTimeout,
+        initiator: setTimeoutCall,
+      });
+    });
 
-    // Find any of the InstallTimer calls; they initiate other events.
-    const timerInstall = parsedTrace.Renderer.allTraceEntries.find(entry => {
-      return entry.name === Trace.Types.Events.Name.TIMER_INSTALL;
+    it('will walk back through the initiators to find the entire chain', async function() {
+      // Find any of the baz() calls; they have a parent event
+      // (FunctionCall) that has an initiator.
+      const bazCall = parsedTrace.Renderer.allTraceEntries.find(
+          e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'baz');
+      assert.exists(bazCall);
+
+      // Find the initators data but starting at the baz()
+      // call. We expect to find 3 initiatorData objects here:
+      // 1. baz() ===> FunctionCall caused by requestIdleCallback
+      // 2. The requestIdleCallback from (1), caused by a prior setTimeout.
+      // 3. The setTimeout from (2), caused by a prior requestAnimationFrame.
+      const initiatorsData = Timeline.Initiators.initiatorsDataToDraw(parsedTrace, bazCall, [], []);
+
+      assert.deepEqual(initiatorsData, [
+        {
+          event: functionCallByrequestIdleCallback,
+          initiator: requestIdleCallbackCall,
+        },
+        {
+          event: functionCallBySetTimeout,
+          initiator: setTimeoutCall,
+        },
+        {
+          event: functionCallByRAF,
+          initiator: rAFCall,
+        },
+      ]);
     });
-    assert.exists(timerInstall);
 
-    // Find the initatorData objects starting at the TimerInstall
-    // call. We expect to find one initatorData here:
-    // TimerFire that was initiated by the entry we found - TimerInstall
+    it('will walk forward to find the events initiated by the selected entry', async function() {
+      const initatorsData = Timeline.Initiators.initiatorsDataToDraw(parsedTrace, rAFCall, [], []);
+      assert.lengthOf(initatorsData, 1);
+      assert.strictEqual(initatorsData[0].event, functionCallByRAF);
+      assert.strictEqual(initatorsData[0].initiator, rAFCall);
+    });
 
-    const initatorsData = Timeline.Initiators.initiatorsDataToDraw(parsedTrace, timerInstall, [], []);
+    it('will return the closest expandable ancestor as an initiator in a pair if the initiator itself is hidden',
+       async function() {
+         // Get the parent of rAF to add to the expandable events array.
+         // When we add rAF to hidden entries list, it will be the
+         // closest expandable parent and the initiator should point to it.
+         const rAFParent = parsedTrace.Renderer.entryToNode.get(rAFCall)?.parent;
+         assert.exists(rAFParent);
+
+         // Find the initatorData objects starting at the rAF
+         // call. We expect to find one initatorData here:
+         // rAF callback initiated by rAF -> Parent of rAF because rAF is hidden
+         const initiatorsData =
+             Timeline.Initiators.initiatorsDataToDraw(parsedTrace, rAFCall, [rAFCall], [rAFParent?.entry]);
+
+         assert.lengthOf(initiatorsData, 1);
+         assert.strictEqual(initiatorsData[0].event, functionCallByRAF);
+         assert.strictEqual(initiatorsData[0].initiator, rAFParent.entry);
+         // Ensure the expandable entry is marked as hidden
+         assert.isTrue(initiatorsData[0].isInitiatorHidden);
+       });
 
-    assert.lengthOf(initatorsData, 1);
-    for (const initatorData of initatorsData) {
-      // Ensure each initiatorData object has TimerInstall>TimerFire event to initiator.
-      assert.strictEqual(initatorData.event.name, Trace.Types.Events.Name.TIMER_FIRE);
-      assert.strictEqual(initatorData.initiator.name, Trace.Types.Events.Name.TIMER_INSTALL);
-    }
-  });
+    it('will return the closest expandable ancestor as an initiated event in a pair if the event itself is hidden',
+       async function() {
+         const functionCallByRAFParent = parsedTrace.Renderer.entryToNode.get(functionCallByRAF)?.parent;
+         assert.exists(functionCallByRAFParent);
 
-  it('will return the closest expandable ancestor as an initiator in a pair if the initiator itself is hidden',
-     async function() {
-       const {parsedTrace} = await TraceLoader.traceEngine(this, 'nested-initiators.json.gz');
+         const initiatorsData = Timeline.Initiators.initiatorsDataToDraw(
+             parsedTrace, rAFCall, [functionCallByRAF], [functionCallByRAFParent?.entry]);
 
-       // Find any of the InstallTimer calls; they initiate other events.
-       const timerInstall = parsedTrace.Renderer.allTraceEntries.find(entry => {
-         return entry.name === Trace.Types.Events.Name.TIMER_INSTALL;
-       });
-       assert.exists(timerInstall);
-       // Get the parent of InstallTimer to add to the expandable events array.
-       // When we add TimerInstall to hidden entries list, it will be the closest expandable parent and the initiator should point to it.
-       const timerInstallParent = parsedTrace.Renderer.entryToNode.get(timerInstall)?.parent;
-       assert.exists(timerInstallParent);
-
-       // Find the initatorData objects starting at the TimerInstall
-       // call. We expect to find one initatorData here:
-       // TimerFire that was initiated by the entry we found - Parent of TimerInstall because TimerInstall is hidden
-       const initiatorsData = Timeline.Initiators.initiatorsDataToDraw(
-           parsedTrace, timerInstall, [timerInstall], [timerInstallParent?.entry]);
-
-       assert.lengthOf(initiatorsData, 1);
-       // Ensure each initiatorData object has TimerInstall>TimerFire event to initiator.
-       for (const initiatorData of initiatorsData) {
-         assert.strictEqual(initiatorData.event.name, Trace.Types.Events.Name.TIMER_FIRE);
-         assert.strictEqual(initiatorData.initiator, timerInstallParent.entry);
+         assert.lengthOf(initiatorsData, 1);
+         assert.strictEqual(initiatorsData[0].event, functionCallByRAFParent?.entry);
+         assert.strictEqual(initiatorsData[0].initiator, rAFCall);
          // Ensure the expandable entry is marked as hidden
-         assert.strictEqual(initiatorData.isInitiatorHidden, true);
-       }
-     });
-
-  it('will return the closest expandable ancestor as an initiated event in a pair if the event itself is hidden',
-     async function() {
-       const {parsedTrace} = await TraceLoader.traceEngine(this, 'nested-initiators.json.gz');
-
-       // Find any of the fibonnaci() calls; they have a parent
-       // event (TimerFire) that has an initiator.
-       const fibonacciCall = parsedTrace.Renderer.allTraceEntries.find(entry => {
-         return Trace.Types.Events.isProfileCall(entry) && entry.callFrame.functionName === 'fibonacci';
+         assert.isTrue(initiatorsData[0].isEntryHidden);
        });
-       assert.exists(fibonacciCall);
-
-       // Find the initatorData objects but starting at the fibonacci()
-       // call. We expect to find two initiatorData objects here:
-       // 1. fibonacci() ===> TimerFire caused by TimerInstall
-       // 2. The TimerInstall from (1), caused by a prior TimerInstall.
-       let initiatorsData = Timeline.Initiators.initiatorsDataToDraw(parsedTrace, fibonacciCall, [], []);
-
-       assert.lengthOf(initiatorsData, 2);
-       // Save the parents of initiated events and the events themselves to get initiators again with those as expandable and hidden
-       const timerFireParents: Trace.Types.Events.Event[] = [];
-       const initiatedEvents: Trace.Types.Events.Event[] = [];
-
-       for (const initiatorData of initiatorsData) {
-         // Ensure each initiatorData object has TimerInstall>TimerFire event to initiator.
-         assert.strictEqual(initiatorData.event.name, Trace.Types.Events.Name.TIMER_FIRE);
-         assert.strictEqual(initiatorData.initiator.name, Trace.Types.Events.Name.TIMER_INSTALL);
-         const parentEvent = parsedTrace.Renderer.entryToNode.get(initiatorData.event)?.parent?.entry;
-         if (parentEvent) {
-           timerFireParents.push(parentEvent);
-           initiatedEvents.push(initiatorData.event);
-         }
-       }
-
-       // Get initiatorData object again, now with the previously initiated events hidden and parents marked as expandable
-       initiatorsData =
-           Timeline.Initiators.initiatorsDataToDraw(parsedTrace, fibonacciCall, initiatedEvents, timerFireParents);
-       // The length should not change, just the inititated events.
-       assert.lengthOf(initiatorsData, 2);
-       for (let i = 0; i < initiatorsData.length; i++) {
-         const initiatorData = initiatorsData[i];
-         // Ensure each initiatorData object has TimerInstall>TimerFire event to initiator.
-         assert.strictEqual(initiatorData.event, timerFireParents[i]);
-         assert.strictEqual(initiatorData.initiator.name, Trace.Types.Events.Name.TIMER_INSTALL);
-         // Ensure the expandable entry is marked as hidden
-         assert.strictEqual(initiatorData.isEntryHidden, true);
-       }
-     });
+  });
+
+  describe('Network Requests', function() {
+    it('returns the initiator data for network requests', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'network-requests-initiators.json.gz');
+
+      // Find the network request to test, it is initiated by `youtube.com`.
+      const event = parsedTrace.NetworkRequests.byTime.find(event => event.ts === 1491680762420);
+      assert.exists(event);
+      // Find the `youtube.com` network request.
+      const initiator = parsedTrace.NetworkRequests.byTime.find(event => event.ts === 1491680629144);
+      assert.exists(initiator);
+      const initiatorData = Timeline.Initiators.initiatorsDataToDrawForNetwork(parsedTrace, event);
+
+      assert.deepEqual(initiatorData, [{event, initiator}]);
+    });
+  });
 });

package/front_end/panels/timeline/LayoutShiftsTrackAppender.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as ComponentHelpers from '../../ui/components/helpers/helpers.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -100,13 +99,10 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
    * layout shifts (the first available level to append more data).
    */
   #appendLayoutShiftsAtLevel(currentLevel: number): number {
-    const allLayoutShifts = this.#parsedTrace.LayoutShifts.clusters.flatMap(cluster => cluster.events);
-
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS)) {
-      const allClusters = this.#parsedTrace.LayoutShifts.clusters;
-      this.#compatibilityBuilder.appendEventsAtLevel(allClusters, currentLevel, this);
-    }
+    const allClusters = this.#parsedTrace.LayoutShifts.clusters;
+    this.#compatibilityBuilder.appendEventsAtLevel(allClusters, currentLevel, this);
 
+    const allLayoutShifts = this.#parsedTrace.LayoutShifts.clusters.flatMap(cluster => cluster.events);
     void this.preloadScreenshots(allLayoutShifts);
     return this.#compatibilityBuilder.appendEventsAtLevel(allLayoutShifts, currentLevel, this);
   }
@@ -165,25 +161,6 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
   }
 
   getDrawOverride(event: Trace.Types.Events.Event): DrawOverride|undefined {
-    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS)) {
-      // If the new CLS experience isn't on.. Continue to present that Shifts are 5ms long. (but now via drawOverrides)
-      // TODO: Remove this when the experiment ships
-      if (Trace.Types.Events.isLayoutShift(event)) {
-        return (context, x, y, _width, levelHeight, timeToPosition, transformColor) => {
-          const fakeDurMs = Trace.Helpers.Timing.microSecondsToMilliseconds(
-              Trace.Types.Timing.MicroSeconds(event.ts + LAYOUT_SHIFT_SYNTHETIC_DURATION));
-          const barEnd = timeToPosition(fakeDurMs);
-          const barWidth = barEnd - x;
-          context.fillStyle = transformColor(this.colorForEvent(event));
-          context.fillRect(x, y, barWidth - 0.5, levelHeight - 1);
-          return {
-            x,
-            width: barWidth,
-          };
-        };
-      }
-    }
-
     if (Trace.Types.Events.isLayoutShift(event)) {
       const score = event.args.data?.weighted_score_delta || 0;
 

package/front_end/panels/timeline/ModificationsManager.test.ts

@@ -16,8 +16,8 @@ describeWithEnvironment('ModificationsManager', () => {
       throw new Error('Modifications manager does not exist.');
     }
     const entriesFilter = modificationsManager.getEntriesFilter();
-    assert.strictEqual(entriesFilter.expandableEntries().length, 1);
-    assert.strictEqual(entriesFilter.invisibleEntries().length, 108);
+    assert.lengthOf(entriesFilter.expandableEntries(), 1);
+    assert.lengthOf(entriesFilter.invisibleEntries(), 108);
     assert.deepEqual(modificationsManager.getTimelineBreadcrumbs().initialBreadcrumb, {
       window: {min: 1020034823047, max: 1020036087961, range: 1264914},
       child: {window: {min: 1020034823047, max: 1020035228006.5569, range: 404959.5568847656}, child: null},
@@ -42,9 +42,9 @@ describeWithEnvironment('ModificationsManager', () => {
     }
     const entriesFilter = modificationsManager.getEntriesFilter();
     const modifications = modificationsManager.toJSON();
-    assert.strictEqual(entriesFilter.expandableEntries().length, 1);
-    assert.strictEqual(modifications.entriesModifications.expandableEntries.length, 1);
-    assert.strictEqual(modifications.entriesModifications.hiddenEntries.length, 108);
+    assert.lengthOf(entriesFilter.expandableEntries(), 1);
+    assert.lengthOf(modifications.entriesModifications.expandableEntries, 1);
+    assert.lengthOf(modifications.entriesModifications.hiddenEntries, 108);
     assert.deepEqual(modifications.initialBreadcrumb, {
       window: {min: 1020034823047, max: 1020036087961, range: 1264914},
       child: {window: {min: 1020034823047, max: 1020035228006.5569, range: 404959.5568847656}, child: null},

package/front_end/panels/timeline/TimelineController.ts

@@ -6,6 +6,8 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
+import * as CrUXManager from '../../models/crux-manager/crux-manager.js';
+import * as EmulationModel from '../../models/emulation/emulation.js';
 import * as Extensions from '../../models/extensions/extensions.js';
 import * as LiveMetrics from '../../models/live-metrics/live-metrics.js';
 import * as Trace from '../../models/trace/trace.js';
@@ -25,6 +27,8 @@ export class TimelineController implements Trace.TracingManager.TracingManagerCl
   readonly rootTarget: SDK.Target.Target;
   private tracingManager: Trace.TracingManager.TracingManager|null;
   #collectedEvents: Trace.Types.Events.Event[] = [];
+  #navigationUrls: string[] = [];
+  #fieldData: CrUXManager.PageResult[]|null = null;
   #recordingStartTime: number|null = null;
   private readonly client: Client;
   private tracingCompletePromise: PromiseWithResolvers<void>|null = null;
@@ -93,6 +97,7 @@ export class TimelineController implements Trace.TracingManager.TracingManagerCl
       disabledByDefault('devtools.timeline.frame'),
       disabledByDefault('devtools.timeline.stack'),
       disabledByDefault('v8.compile'),
+      disabledByDefault('v8.inspector'),
       disabledByDefault('v8.cpu_profiler.hires'),
       disabledByDefault('lighthouse'),
       'v8.execute',
@@ -131,6 +136,12 @@ export class TimelineController implements Trace.TracingManager.TracingManagerCl
 
     await LiveMetrics.LiveMetrics.instance().disable();
 
+    SDK.TargetManager.TargetManager.instance().addModelListener(
+        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated, this.#onFrameNavigated,
+        this);
+
+    this.#navigationUrls = [];
+    this.#fieldData = null;
     this.#recordingStartTime = Date.now();
     const response = await this.startRecordingWithCategories(categoriesArray.join(','));
     if (response.getError()) {
@@ -139,10 +150,23 @@ export class TimelineController implements Trace.TracingManager.TracingManagerCl
     return response;
   }
 
+  async #onFrameNavigated(event: {data: SDK.ResourceTreeModel.ResourceTreeFrame}): Promise<void> {
+    if (!event.data.isPrimaryFrame()) {
+      return;
+    }
+
+    this.#navigationUrls.push(event.data.url);
+  }
+
   async stopRecording(): Promise<void> {
     if (this.tracingManager) {
       this.tracingManager.stop();
     }
+
+    SDK.TargetManager.TargetManager.instance().removeModelListener(
+        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated, this.#onFrameNavigated,
+        this);
+
     // When throttling is applied to the main renderer, it can slow down the
     // collection of trace events once tracing has completed. Therefore we
     // temporarily disable throttling whilst the final trace event collection
@@ -154,6 +178,7 @@ export class TimelineController implements Trace.TracingManager.TracingManagerCl
     throttlingManager.setCPUThrottlingRate(1);
 
     this.client.loadingStarted();
+    this.#fieldData = await this.fetchFieldData();
     await this.waitForTracingToStop();
 
     // Now we re-enable throttling again to maintain the setting being persistent.
@@ -163,6 +188,28 @@ export class TimelineController implements Trace.TracingManager.TracingManagerCl
     await LiveMetrics.LiveMetrics.instance().enable();
   }
 
+  private async fetchFieldData(): Promise<CrUXManager.PageResult[]|null> {
+    const cruxManager = CrUXManager.CrUXManager.instance();
+    if (!cruxManager.isEnabled() || !navigator.onLine) {
+      return null;
+    }
+
+    const urls = [...new Set(this.#navigationUrls)];
+    return Promise.all(urls.map(url => cruxManager.getFieldDataForPage(url)));
+  }
+
+  private async createMetadata(): Promise<Trace.Types.File.MetaData> {
+    const deviceModeModel = EmulationModel.DeviceModeModel.DeviceModeModel.tryInstance();
+    let emulatedDeviceTitle;
+    if (deviceModeModel?.type() === EmulationModel.DeviceModeModel.Type.Device) {
+      emulatedDeviceTitle = deviceModeModel.device()?.title ?? undefined;
+    } else if (deviceModeModel?.type() === EmulationModel.DeviceModeModel.Type.Responsive) {
+      emulatedDeviceTitle = 'Responsive';
+    }
+    return Trace.Extras.Metadata.forNewRecording(
+        false, this.#recordingStartTime ?? undefined, emulatedDeviceTitle, this.#fieldData ?? undefined);
+  }
+
   private async waitForTracingToStop(): Promise<void> {
     if (this.tracingManager) {
       await this.tracingCompletePromise?.promise;
@@ -218,9 +265,8 @@ export class TimelineController implements Trace.TracingManager.TracingManagerCl
     Extensions.ExtensionServer.ExtensionServer.instance().profilingStopped();
 
     this.client.processingStarted();
-    await this.client.loadingComplete(
-        this.#collectedEvents, /* exclusiveFilter= */ null, /* isCpuProfile= */ false, this.#recordingStartTime,
-        /* metadata= */ null);
+    const metadata = await this.createMetadata();
+    await this.client.loadingComplete(this.#collectedEvents, /* exclusiveFilter= */ null, metadata);
     this.client.loadingCompleteForTest();
   }
 
@@ -240,7 +286,7 @@ export interface Client {
   loadingProgress(progress?: number): void;
   loadingComplete(
       collectedEvents: Trace.Types.Events.Event[], exclusiveFilter: Trace.Extras.TraceFilter.TraceFilter|null,
-      isCpuProfile: boolean, recordingStartTime: number|null, metadata: Trace.Types.File.MetaData|null): Promise<void>;
+      metadata: Trace.Types.File.MetaData|null): Promise<void>;
   loadingCompleteForTest(): void;
 }
 export interface RecordingOptions {

package/front_end/panels/timeline/TimelineDetailsView.test.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Root from '../../core/root/root.js';
 import * as Trace from '../../models/trace/trace.js';
 import {doubleRaf} from '../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
@@ -42,7 +41,7 @@ describeWithEnvironment('TimelineDetailsView', function() {
 
     const detailsContentElement = detailsView.getDetailsContentElementForTest();
     // NetworkRequestDetails and RelatedInsightsChips nodes.
-    assert.strictEqual(detailsContentElement.childNodes.length, 2);
+    assert.lengthOf(detailsContentElement.childNodes, 2);
   });
 
   it('displays the details for a frame correctly', async function() {
@@ -67,8 +66,6 @@ describeWithEnvironment('TimelineDetailsView', function() {
   });
 
   it('renders the layout shift component for a single layout shift', async function() {
-    Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS);
-
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'shift-attribution.json.gz');
     const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsView(mockViewDelegate);
     await detailsView.setModel(
@@ -86,8 +83,6 @@ describeWithEnvironment('TimelineDetailsView', function() {
   });
 
   it('renders the layout shift component for a selected cluster', async function() {
-    Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS);
-
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'shift-attribution.json.gz');
     const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsView(mockViewDelegate);
     await detailsView.setModel(

package/front_end/panels/timeline/TimelineDetailsView.ts

@@ -4,7 +4,6 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as TimelineModel from '../../models/timeline_model/timeline_model.js';
 import * as Trace from '../../models/trace/trace.js';
@@ -340,11 +339,9 @@ export class TimelineDetailsView extends
       this.#relatedInsightChips.eventToRelatedInsightsMap = this.#eventToRelatedInsightsMap;
     }
 
-    // Special case: if Insights experiment is enabled (on by default in M131)
-    // and the user selects a layout shift or a layout shift cluster, render
-    // the new layout shift details component.
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS) &&
-        (Trace.Types.Events.isSyntheticLayoutShift(event) || Trace.Types.Events.isSyntheticLayoutShiftCluster(event))) {
+    // Special case: if the user selects a layout shift or a layout shift cluster,
+    // render the new layout shift details component.
+    if (Trace.Types.Events.isSyntheticLayoutShift(event) || Trace.Types.Events.isSyntheticLayoutShiftCluster(event)) {
       const isFreshRecording = Boolean(this.#parsedTrace && Tracker.instance().recordingIsFresh(this.#parsedTrace));
       this.#layoutShiftDetails.setData(event, this.#traceInsightsSets, this.#parsedTrace, isFreshRecording);
       this.setContent(this.#layoutShiftDetails);

package/front_end/panels/timeline/TimelineEventOverview.ts

@@ -162,7 +162,7 @@ export class TimelineEventOverviewCPUActivity extends TimelineEventOverview {
     // the PerformanceModel will be removed.
     super('cpu-activity', i18nString(UIStrings.cpu));
     this.#parsedTrace = parsedTrace;
-    this.backgroundCanvas = (this.element.createChild('canvas', 'fill background') as HTMLCanvasElement);
+    this.backgroundCanvas = this.element.createChild('canvas', 'fill background');
     this.#start = Trace.Helpers.Timing.traceWindowMilliSeconds(parsedTrace.Meta.traceBounds).min;
     this.#end = Trace.Helpers.Timing.traceWindowMilliSeconds(parsedTrace.Meta.traceBounds).max;
   }