chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

package/front_end/panels/timeline/track_appenders/ServerTimingsTrackAppender.test.ts

@@ -59,8 +59,7 @@ describeWithEnvironment('ServerTimingsTrackAppender', function() {
       const animationsRequests = parsedTrace.Animations.animations;
       for (let i = 0; i < animationsRequests.length; ++i) {
         const event = animationsRequests[i];
-        assert.strictEqual(
-            flameChartData.entryStartTimes[i], Trace.Helpers.Timing.microSecondsToMilliseconds(event.ts));
+        assert.strictEqual(flameChartData.entryStartTimes[i], Trace.Helpers.Timing.microToMilli(event.ts));
       }
     });
 
@@ -73,14 +72,14 @@ describeWithEnvironment('ServerTimingsTrackAppender', function() {
           continue;
         }
         const expectedTotalTimeForEvent = event.dur ?
-            Trace.Helpers.Timing.microSecondsToMilliseconds(event.dur) :
+            Trace.Helpers.Timing.microToMilli(event.dur) :
             Timeline.TimelineFlameChartDataProvider.InstantEventVisibleDurationMs;
         assert.strictEqual(flameChartData.entryTotalTimes[i], expectedTotalTimeForEvent);
       }
     });
   });
 
-  describe('colorForEvent and titleForEvent', function() {
+  describe('colorForEvent', function() {
     before(() => {
       // Rather than use the real colours here and burden the test with having to
       // inject loads of CSS, we fake out the colours. this is fine for our tests as
@@ -106,11 +105,8 @@ describeWithEnvironment('ServerTimingsTrackAppender', function() {
       ThemeSupport.ThemeSupport.clearThemeCache();
     });
     it('returns the correct color and title for server timing events', function() {
-      const serverTimings = parsedTrace.ServerTimings.serverTimings;
-      for (const event of serverTimings) {
-        assert.strictEqual(serverTimingsTrackAppender.titleForEvent(event), event.name);
-        assert.strictEqual(serverTimingsTrackAppender.colorForEvent(), 'rgb(4 4 4)');
-      }
+      // Each event has the same color so we don't need to pass one in.
+      assert.strictEqual(serverTimingsTrackAppender.colorForEvent(), 'rgb(4 4 4)');
     });
   });
 });

package/front_end/panels/timeline/track_appenders/ThreadAppender.test.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Platform from '../../../core/platform/platform.js';
+import * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Bindings from '../../../models/bindings/bindings.js';
@@ -18,6 +18,8 @@ import {TraceLoader} from '../../../testing/TraceLoader.js';
 import * as PerfUI from '../../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as Timeline from '../timeline.js';
 
+const {urlString} = Platform.DevToolsPath;
+
 function initTrackAppender(
     flameChartData: PerfUI.FlameChart.FlameChartTimelineData,
     parsedTrace: Trace.Handlers.Types.ParsedTrace,
@@ -284,7 +286,7 @@ describeWithEnvironment('ThreadAppender', function() {
     }
     const infoForLongEvent = getDefaultInfo();
     threadAppenders[0].setPopoverInfo(longTask, infoForLongEvent);
-    assert.strictEqual(infoForLongEvent.formattedTime, '1.30\u00A0s (self 47\u00A0μs)');
+    assert.strictEqual(infoForLongEvent.formattedTime, '1.30\u00A0s (self 47\xA0μs)');
   });
 
   it('shows the correct title for a ParseHTML event', async function() {
@@ -303,7 +305,7 @@ describeWithEnvironment('ThreadAppender', function() {
     }
     const infoForLongEvent = getDefaultInfo();
     threadAppenders[0].setPopoverInfo(longTask, infoForLongEvent);
-    assert.strictEqual(infoForLongEvent.formattedTime, '1.30\u00A0s (self 47\u00A0μs)');
+    assert.strictEqual(infoForLongEvent.formattedTime, '1.30\u00A0s (self 47\xA0μs)');
   });
 
   it('shows the right time for a profile call when hovered', async function() {
@@ -341,7 +343,7 @@ describeWithEnvironment('ThreadAppender', function() {
       {type: PerfUI.FlameChart.FlameChartDecorationType.WARNING_TRIANGLE},
       {
         type: PerfUI.FlameChart.FlameChartDecorationType.CANDY,
-        startAtTime: Trace.Types.Timing.MicroSeconds(50_000),
+        startAtTime: Trace.Types.Timing.Micro(50_000),
       },
     ]);
   });
@@ -399,8 +401,7 @@ describeWithEnvironment('ThreadAppender', function() {
       const initialTimelineData = await renderThreadAppendersFromTrace(this, 'react-hello-world.json.gz');
       const initialFlamechartData = initialTimelineData.flameChartData;
       const eventCountBeforeIgnoreList = initialFlamechartData.entryStartTimes.length;
-      const SCRIPT_TO_IGNORE =
-          'https://unpkg.com/react@18.2.0/umd/react.development.js' as Platform.DevToolsPath.UrlString;
+      const SCRIPT_TO_IGNORE = urlString`https://unpkg.com/react@18.2.0/umd/react.development.js`;
       // Clear the data provider cache and add the React script to the ignore list.
       ignoreListManager.ignoreListURL(SCRIPT_TO_IGNORE);
       const finalTimelineData = await renderThreadAppendersFromTrace(this, 'react-hello-world.json.gz');
@@ -420,7 +421,7 @@ describeWithEnvironment('ThreadAppender', function() {
     });
 
     it('appends a tree that contains ignore listed entries correctly', async function() {
-      const SCRIPT_TO_IGNORE = 'https://some-framework/bundled.js' as Platform.DevToolsPath.UrlString;
+      const SCRIPT_TO_IGNORE = urlString`https://some-framework/bundled.js`;
 
       // Create the following hierarchy with profile calls. Events marked
       // with \\\\ represent ignored listed events.

package/front_end/panels/timeline/track_appenders/TimingsTrackAppender.test.ts

@@ -40,7 +40,7 @@ describeWithEnvironment('TimingTrackAppender', function() {
   function getMockInfo(event?: Trace.Types.Events.Event) {
     const defaultInfo: Timeline.CompatibilityTracksAppender.PopoverInfo = {
       title: event ? timingsTrackAppender.titleForEvent(event) : 'title',
-      formattedTime: event ? Timeline.AppenderUtils.getFormattedTime(event.dur) : 'time',
+      formattedTime: event ? Timeline.AppenderUtils.getDurationString(event.dur) : 'time',
       warningElements: [],
       additionalElements: [],
       url: null,
@@ -69,8 +69,7 @@ describeWithEnvironment('TimingTrackAppender', function() {
       for (const event of [...performanceMarks, ...performanceMeasures, ...consoleTimings, ...consoleTimestamps]) {
         const markerIndex = entryData.indexOf(event);
         assert.exists(markerIndex);
-        assert.strictEqual(
-            flameChartData.entryStartTimes[markerIndex], Trace.Helpers.Timing.microSecondsToMilliseconds(event.ts));
+        assert.strictEqual(flameChartData.entryStartTimes[markerIndex], Trace.Helpers.Timing.microToMilli(event.ts));
       }
     });
     it('adds total times correctly', () => {
@@ -86,7 +85,7 @@ describeWithEnvironment('TimingTrackAppender', function() {
           continue;
         }
         const expectedTotalTimeForEvent = event.dur ?
-            Trace.Helpers.Timing.microSecondsToMilliseconds(event.dur) :
+            Trace.Helpers.Timing.microToMilli(event.dur) :
             Timeline.TimelineFlameChartDataProvider.InstantEventVisibleDurationMs;
         assert.strictEqual(flameChartData.entryTotalTimes[markerIndex], expectedTotalTimeForEvent);
       }
@@ -155,7 +154,7 @@ describeWithEnvironment('TimingTrackAppender', function() {
     it('returns the correct title for console timestamps', () => {
       const traceMarkers = parsedTrace.UserTimings.timestampEvents;
       for (const mark of traceMarkers) {
-        assert.strictEqual(timingsTrackAppender.titleForEvent(mark), `TimeStamp: ${mark.args.data.message}`);
+        assert.strictEqual(timingsTrackAppender.titleForEvent(mark), `TimeStamp: ${mark.args.data?.name}`);
       }
     });
   });
@@ -212,7 +211,7 @@ describeWithEnvironment('TimingTrackAppender', function() {
 
       assert.deepInclude(popoverInfo, {
         title: 'TimeStamp: a timestamp',
-        formattedTime: '615.25\u00A0ms',
+        formattedTime: '615.88\u00A0ms',
       });
     });
 
@@ -271,7 +270,7 @@ describeWithEnvironment('TimingTrackAppender', function() {
     it('creates a TimelineFlameChartMarker for each extension marker event in a trace', () => {
       const extensionMarkers = parsedTrace.ExtensionTraceData.extensionMarkers;
       for (const traceMarker of extensionMarkers) {
-        const markerTimeMs = Trace.Helpers.Timing.microSecondsToMilliseconds(traceMarker.ts);
+        const markerTimeMs = Trace.Helpers.Timing.microToMilli(traceMarker.ts);
         const flameChartMarker =
             flameChartData.markers.find(flameChartMarker => flameChartMarker.startTime() === markerTimeMs);
         assert.exists(flameChartMarker);
@@ -336,7 +335,7 @@ describeWithEnvironment('TimingTrackAppender', function() {
 
         const extensionMarkers = parsedTrace.ExtensionTraceData.extensionMarkers;
         for (const traceMarker of extensionMarkers) {
-          const markerTimeMs = Trace.Helpers.Timing.microSecondsToMilliseconds(traceMarker.ts);
+          const markerTimeMs = Trace.Helpers.Timing.microToMilli(traceMarker.ts);
           const flameChartMarker =
               flameChartData.markers.find(flameChartMarker => flameChartMarker.startTime() === markerTimeMs);
           assert.isUndefined(flameChartMarker);

package/front_end/panels/timeline/utils/AICallTree.test.ts

@@ -9,6 +9,106 @@ import {TraceLoader} from '../../../testing/TraceLoader.js';
 import * as Utils from './utils.js';
 
 describeWithEnvironment('AICallTree', () => {
+  it('will not build a tree from non-main-thread events', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'cls-single-frame.json.gz');
+    // A random RasterizerTask. Although this does technically run on the
+    // main _frame_, it is not on the thread we identify as the main thread.
+    const rasterTask = parsedTrace.Renderer.allTraceEntries.find(e => {
+      return e.name === Trace.Types.Events.Name.RASTER_TASK && e.pid === 4274 && e.tid === 23555;
+    });
+    assert.isOk(rasterTask);
+    assert.isNull(Utils.AICallTree.AICallTree.from(rasterTask, parsedTrace));
+  });
+
+  it('does not build a tree from events the renderer is not aware of', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'cls-single-frame.json.gz');
+    // A SyntheticLayoutShift: the RendererHandler does not know about this.
+    const shift = parsedTrace.LayoutShifts.clusters.at(0)?.events.at(0);
+    assert.isOk(shift);
+    assert.isTrue(Trace.Types.Events.isSyntheticLayoutShift(shift));
+    assert.isNull(Utils.AICallTree.AICallTree.from(shift, parsedTrace));
+  });
+
+  it('supports NodeJS traces that do not have a "main thread"', async function() {
+    // Bit of extra setup required: we need to mimic what the panel does where
+    // it takes the CDP Profile and wraps it in fake trace events, before then
+    // passing that through to the new engine.
+    const rawEvents = await TraceLoader.rawCPUProfile(this, 'basic.cpuprofile.gz');
+    const events = Trace.Extras.TimelineJSProfile.TimelineJSProfileProcessor.createFakeTraceFromCpuProfile(
+        rawEvents,
+        Trace.Types.Events.ThreadID(1),
+    );
+    const {parsedTrace} = await TraceLoader.executeTraceEngineOnFileContents(events);
+    // Find a random function call in the trace.
+    const funcCall = parsedTrace.Samples.entryToNode.keys().find(event => {
+      return Trace.Types.Events.isProfileCall(event) && event.callFrame.functionName === 'callAndPauseOnStart';
+    });
+    assert.isOk(funcCall);
+    const callTree = Utils.AICallTree.AICallTree.from(funcCall, parsedTrace);
+    assert.isOk(callTree);
+    const expectedData = '\n' +
+        `
+
+# All URL #s:
+
+  * 0: node:internal/main/run_main_module
+  * 1: node:internal/modules/run_main
+  * 2: node:internal/modules/cjs/loader
+  * 3: file:///Users/andoli/Desktop/mocks/fixnodeinspector/app.js
+
+# Call tree:
+
+Node: 1 – (anonymous)
+dur: 2370
+URL #: 0
+Children:
+  * 2 – executeUserEntryPoint
+
+Node: 2 – executeUserEntryPoint
+dur: 2370
+URL #: 1
+Children:
+  * 3 – Module._load
+
+Node: 3 – Module._load
+dur: 2370
+URL #: 2
+Children:
+  * 4 – Module.load
+
+Node: 4 – Module.load
+dur: 2370
+URL #: 2
+Children:
+  * 5 – Module._extensions..js
+
+Node: 5 – Module._extensions..js
+dur: 2370
+URL #: 2
+Children:
+  * 6 – Module._compile
+
+Node: 6 – Module._compile
+dur: 2370
+URL #: 2
+Children:
+  * 7 – callAndPauseOnStart
+
+Node: 7 – callAndPauseOnStart
+Selected: true
+dur: 2370
+Children:
+  * 8 – (anonymous)
+
+Node: 8 – (anonymous)
+dur: 2370
+self: 2370
+URL #: 3
+`.trim();
+
+    assert.strictEqual(callTree?.serialize(), expectedData);
+  });
+
   it('serializes a simple tree', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-outermost-frames.json.gz');
     const mainEvents = parsedTrace.Renderer.allTraceEntries;
@@ -17,7 +117,7 @@ describeWithEnvironment('AICallTree', () => {
     if (!selectedEvent) {
       throw new Error('Could not find expected event.');
     }
-    const callTree = Utils.AICallTree.AICallTree.from(selectedEvent, mainEvents, parsedTrace);
+    const callTree = Utils.AICallTree.AICallTree.from(selectedEvent, parsedTrace);
     const expectedData = '\n' +
         `
 
@@ -60,7 +160,7 @@ Node: 6 – Recalculate style
 dur: 0.2
 self: 0.2
 `.trim();
-    assert.strictEqual(callTree.serialize(), expectedData);
+    assert.strictEqual(callTree?.serialize(), expectedData);
   });
 
   it('serializes a tree with lots of recursion', async function() {
@@ -70,7 +170,8 @@ self: 0.2
     if (!selectedEvent) {
       throw new Error('Could not find expected event.');
     }
-    const callTree = Utils.AICallTree.AICallTree.from(selectedEvent, mainEvents, parsedTrace);
+    const callTree = Utils.AICallTree.AICallTree.from(selectedEvent, parsedTrace);
+    assert.isOk(callTree);
 
     // We don't need to validate the whole tree, just that it has recursion
     const treeStr = callTree.serialize();
@@ -88,8 +189,8 @@ self: 0.2
     if (!tinyEvent) {
       throw new Error('Could not find expected event.');
     }
-    const tinyStr = Utils.AICallTree.AICallTree.from(tinyEvent, mainEvents, parsedTrace).serialize();
-    assert.strictEqual(tinyStr.split('\n').filter(l => l.startsWith('Node:')).join('\n'), `
+    const tinyStr = Utils.AICallTree.AICallTree.from(tinyEvent, parsedTrace)?.serialize();
+    assert.strictEqual(tinyStr?.split('\n').filter(l => l.startsWith('Node:')).join('\n'), `
 Node: 1 – Task
 Node: 2 – Parse HTML
 Node: 3 – Evaluate script
@@ -102,8 +203,8 @@ Node: 5 – get storage`.trim());
     if (!evaluateEvent) {
       throw new Error('Could not find expected event.');
     }
-    const treeStr = Utils.AICallTree.AICallTree.from(evaluateEvent, mainEvents, parsedTrace).serialize();
-    assert.strictEqual(treeStr.split('\n').filter(l => l.startsWith('Node:')).join('\n'), `
+    const treeStr = Utils.AICallTree.AICallTree.from(evaluateEvent, parsedTrace)?.serialize();
+    assert.strictEqual(treeStr?.split('\n').filter(l => l.startsWith('Node:')).join('\n'), `
 Node: 1 – Task
 Node: 2 – Parse HTML
 Node: 3 – Evaluate script
@@ -117,8 +218,8 @@ Node: 6 – H.la`.trim());
     if (!compileEvent) {
       throw new Error('Could not find expected event.');
     }
-    const compileStr = Utils.AICallTree.AICallTree.from(compileEvent, mainEvents, parsedTrace).serialize();
-    assert.strictEqual(compileStr.split('\n').filter(l => l.startsWith('Node:')).join('\n'), `
+    const compileStr = Utils.AICallTree.AICallTree.from(compileEvent, parsedTrace)?.serialize();
+    assert.strictEqual(compileStr?.split('\n').filter(l => l.startsWith('Node:')).join('\n'), `
 Node: 1 – Task
 Node: 2 – Parse HTML
 Node: 3 – Evaluate script
@@ -137,8 +238,8 @@ describe('AITreeFilter', () => {
     name,
     cat: 'disabled-by-default-devtools.timeline',
     ph: Trace.Types.Events.Phase.COMPLETE,
-    ts: Trace.Types.Timing.MicroSeconds(ts),
-    dur: Trace.Types.Timing.MicroSeconds(dur),
+    ts: Trace.Types.Timing.Micro(ts),
+    dur: Trace.Types.Timing.Micro(dur),
     pid: Trace.Types.Events.ProcessID(1),
     tid: Trace.Types.Events.ThreadID(4),
     args: {},

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

@@ -28,25 +28,69 @@ export class AICallTree {
   ) {
   }
 
-  static from(
-      selectedEvent: Trace.Types.Events.Event, events: Trace.Types.Events.Event[],
-      parsedTrace: Trace.Handlers.Types.ParsedTrace): AICallTree {
+  /**
+   * Attempts to build an AICallTree from a given selected event. It also
+   * validates that this event is one that we support being used with the AI
+   * Assistance panel, which [as of January 2025] means:
+   * 1. It is on the main thread.
+   * 2. It exists in either the Renderer or Sample handler's entryToNode map.
+   * This filters out other events we make such as SyntheticLayoutShifts which are not valid
+   * If the event is not valid, or there is an unexpected error building the tree, `null` is returned.
+   */
+  static from(selectedEvent: Trace.Types.Events.Event, parsedTrace: Trace.Handlers.Types.ParsedTrace): AICallTree|null {
+    // First: check that the selected event is on the thread we have identified as the main thread.
+    const threads = Trace.Handlers.Threads.threadsInTrace(parsedTrace);
+    const thread = threads.find(t => t.pid === selectedEvent.pid && t.tid === selectedEvent.tid);
+    if (!thread) {
+      return null;
+    }
+    // We allow two thread types to deal with the NodeJS use case.
+    // MAIN_THREAD is used when a trace has been generated through Chrome
+    //   tracing on a website (and we have a renderer)
+    // CPU_PROFILE is used only when we have received a CPUProfile - in this
+    //   case all the threads are CPU_PROFILE so we allow those. If we only allow
+    //   MAIN_THREAD then we wouldn't ever allow NodeJS users to use the AI
+    //   integration.
+    if (thread.type !== Trace.Handlers.Threads.ThreadType.MAIN_THREAD &&
+        thread.type !== Trace.Handlers.Threads.ThreadType.CPU_PROFILE) {
+      return null;
+    }
+
+    // Ensure that the event is known to either the Renderer or Samples
+    // handler. This helps exclude synthetic events we build up for other
+    // information such as Layout Shift clusters.
+    // We check Renderer + Samples to ensure we support CPU Profiles (which do
+    // not populate the Renderer Handler)
+    if (!parsedTrace.Renderer.entryToNode.has(selectedEvent) && !parsedTrace.Samples.entryToNode.has(selectedEvent)) {
+      return null;
+    }
+
     const {startTime, endTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(selectedEvent);
 
     const selectedEventBounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(
-        Trace.Helpers.Timing.millisecondsToMicroseconds(startTime),
-        Trace.Helpers.Timing.millisecondsToMicroseconds(endTime));
-    const threadEvents = parsedTrace.Renderer.processes.get(selectedEvent.pid)?.threads.get(selectedEvent.tid)?.entries;
+        Trace.Helpers.Timing.milliToMicro(startTime), Trace.Helpers.Timing.milliToMicro(endTime));
+    let threadEvents = parsedTrace.Renderer.processes.get(selectedEvent.pid)?.threads.get(selectedEvent.tid)?.entries;
     if (!threadEvents) {
-      throw new Error('Cannot locate thread');
+      // None from the renderer: try the samples handler, this might be a CPU trace.
+      threadEvents = parsedTrace.Samples.profilesInProcess.get(selectedEvent.pid)?.get(selectedEvent.tid)?.profileCalls;
+    }
+
+    if (!threadEvents) {
+      console.warn(`AICallTree: could not find thread for selected entry: ${selectedEvent}`);
+      return null;
     }
     const overlappingEvents = threadEvents.filter(e => Trace.Helpers.Timing.eventIsInBounds(e, selectedEventBounds));
 
     const visibleEventsFilter = new Trace.Extras.TraceFilter.VisibleEventsFilter(visibleTypes());
     const customFilter = new AITreeFilter(selectedEvent);
     // Build a tree bounded by the selected event's timestamps, and our other filters applied
-    const rootNode = new Trace.Extras.TraceTree.TopDownRootNode(
-        overlappingEvents, [visibleEventsFilter, customFilter], startTime, endTime, false, null, true);
+
+    const rootNode = new Trace.Extras.TraceTree.TopDownRootNode(overlappingEvents, {
+      filters: [visibleEventsFilter, customFilter],
+      startTime,
+      endTime,
+      includeInstantEvents: true,
+    });
 
     // Walk the tree to find selectedNode
     let selectedNode: Trace.Extras.TraceTree.Node|null = null;
@@ -59,7 +103,8 @@ export class AICallTree {
     });
 
     if (selectedNode === null) {
-      throw new Error('Node not within its own tree. Unexpected.');
+      console.warn(`Selected event ${selectedEvent} not found within its own tree.`);
+      return null;
     }
     const instance = new AICallTree(selectedNode, rootNode, parsedTrace);
     // instance.logDebug();
@@ -146,12 +191,12 @@ export class AICallTree {
 }
 
 export class AITreeFilter extends Trace.Extras.TraceFilter.TraceFilter {
-  #minDuration: Trace.Types.Timing.MicroSeconds;
+  #minDuration: Trace.Types.Timing.Micro;
   #selectedEvent: Trace.Types.Events.Event;
   constructor(selectedEvent: Trace.Types.Events.Event) {
     super();
     // The larger the selected event is, the less small ones matter. We'll exclude items under ½% of the selected event's size
-    this.#minDuration = Trace.Types.Timing.MicroSeconds((selectedEvent.dur ?? 1) * 0.005);
+    this.#minDuration = Trace.Types.Timing.Micro((selectedEvent.dur ?? 1) * 0.005);
     this.#selectedEvent = selectedEvent;
   }
   accept(event: Trace.Types.Events.Event): boolean {

package/front_end/panels/timeline/utils/EntityMapper.test.ts

@@ -39,7 +39,7 @@ describeWithEnvironment('EntityMapper', function() {
       });
     });
 
-    // Additioanlly make sure they sum up.
+    // Additionally make sure they sum up.
     mappings.eventsByEntity.entries().forEach(([entity, events]) => {
       const eventsInNetwork = fromNetwork.get(entity) ?? [];
       const eventsInRenderer = fromRenderer.get(entity) ?? [];

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

@@ -30,7 +30,7 @@ export class EntityMapper {
    * the NetworkRequestsHandler.
    */
   #initializeEntityMappings(parsedTrace: Trace.Handlers.Types.ParsedTrace): Trace.Handlers.Helpers.EntityMappings {
-    // NetworkRequestHander caches.
+    // NetworkRequestHandler caches.
     const entityByNetworkEvent = parsedTrace.NetworkRequests.entityMappings.entityByEvent;
     const networkEventsByEntity = parsedTrace.NetworkRequests.entityMappings.eventsByEntity;
     const networkCreatedCache = parsedTrace.NetworkRequests.entityMappings.createdEntityCache;

package/front_end/panels/timeline/utils/EntryName.test.ts

@@ -37,6 +37,21 @@ describeWithEnvironment('EntryName', () => {
     assert.strictEqual(name, 'Event: click');
   });
 
+  it('correctly titles layout shifts', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'cls-single-frame.json.gz');
+    const shifts = parsedTrace.LayoutShifts.clusters.flatMap(c => c.events);
+    const title = Utils.EntryName.nameForEntry(shifts[0]);
+    assert.strictEqual(title, 'Layout shift');
+  });
+
+  it('correctly titles animation events', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'animation.json.gz');
+    const animation = parsedTrace.Animations.animations.at(0);
+    assert.isOk(animation);
+    const title = Utils.EntryName.nameForEntry(animation);
+    assert.strictEqual(title, 'Animation');
+  });
+
   it('uses the names defined in the entry styles', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
     const entry = parsedTrace.Renderer.allTraceEntries.find(e => e.name === Trace.Types.Events.Name.RUN_TASK);

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

@@ -10,7 +10,7 @@ import {getEventStyle} from './EntryStyles.js';
 
 const UIStrings = {
   /**
-   *@description Text shown for an entry in the flame chart that has no explict name.
+   *@description Text shown for an entry in the flame chart that has no explicit name.
    */
   anonymous: '(anonymous)',
   /**
@@ -35,6 +35,10 @@ const UIStrings = {
    *@description Text in Timeline Flame Chart Data Provider of the Performance panel
    */
   wsConnectionClosed: 'WebSocket closed',
+  /**
+   *@description Text in Timeline Flame Chart Data Provider of the Performance panel
+   */
+  layoutShift: 'Layout shift',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/utils/EntryName.ts', UIStrings);
@@ -99,6 +103,14 @@ export function nameForEntry(
     return nameForInteractionEvent(entry);
   }
 
+  if (Trace.Types.Events.isSyntheticLayoutShift(entry)) {
+    return i18nString(UIStrings.layoutShift);
+  }
+
+  if (Trace.Types.Events.isSyntheticAnimation(entry) && entry.args.data.beginEvent.args.data.displayName) {
+    return entry.args.data.beginEvent.args.data.displayName;
+  }
+
   const eventStyleCustomName = getEventStyle(entry.name as Trace.Types.Events.Name)?.title;
 
   return eventStyleCustomName || entry.name;

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

@@ -207,7 +207,7 @@ const UIStrings = {
    */
   xhrReadyStateChange: '`XHR` `readyState` change',
   /**
-   * @description Text for an event. Shown in the timeline in the Perforamnce panel.
+   * @description Text for an event. Shown in the timeline in the Performance panel.
    * XHR refers to XmlHttpRequest, a Web API. (see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
    * The text is shown when a XmlHttpRequest load event happens on the inspected page.
    */
@@ -241,7 +241,7 @@ const UIStrings = {
    */
   cacheModule: 'Cache module code',
   /**
-   * @description Text for an event. Shown in the timeline in the Perforamnce panel.
+   * @description Text for an event. Shown in the timeline in the Performance panel.
    * "Module" refers to JavaScript modules: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
    * JavaScript modules are a way to organize JavaScript code.
    * "Evaluate" is the phase when the JavaScript code of a module is executed.
@@ -610,7 +610,7 @@ let categoryStyles: CategoryPalette|null;
 /**
  * This map defines the styles for events shown in the panel. This
  * includes its color (which on the event's category, the label it's
- * displayed with and flag to know wether it's visible in the flamechart
+ * displayed with and flag to know weather it's visible in the flamechart
  * or not).
  * The thread appenders use this map to determine if an event should be
  * shown in the flame chart. If an event is not in the map, then it
@@ -908,7 +908,7 @@ export function maybeInitSylesMap(): EventStylesMap {
         true,
         ),
 
-    [Trace.Types.Events.Name.TIME_STAMP]:
+    [Trace.Types.Events.Name.CONSOLE_TIME_STAMP]:
         new TimelineRecordStyle(i18nString(UIStrings.timestamp), defaultCategoryStyles.scripting),
 
     [Trace.Types.Events.Name.CONSOLE_TIME]:
@@ -1044,7 +1044,13 @@ export function maybeInitSylesMap(): EventStylesMap {
     [Trace.Types.Events.Name.ASYNC_TASK]:
         new TimelineRecordStyle(i18nString(UIStrings.asyncTask), defaultCategoryStyles.async),
 
-    [Trace.Types.Events.Name.LAYOUT_SHIFT]:
+    [Trace.Types.Events.Name.LAYOUT_SHIFT]: new TimelineRecordStyle(
+        i18nString(UIStrings.layoutShift), defaultCategoryStyles.experience,
+        /* Mark LayoutShifts as hidden; in the timeline we render
+        * SyntheticLayoutShifts so those are the ones visible to the user */
+        true),
+
+    [Trace.Types.Events.Name.SYNTHETIC_LAYOUT_SHIFT]:
         new TimelineRecordStyle(i18nString(UIStrings.layoutShift), defaultCategoryStyles.experience),
 
     [Trace.Types.Events.Name.SYNTHETIC_LAYOUT_SHIFT_CLUSTER]:

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

@@ -6,19 +6,25 @@ import '../../../ui/components/markdown_view/markdown_view.js';
 
 import type * as Common from '../../../core/common/common.js';
 import * as Platform from '../../../core/platform/platform.js';
-import type * as SDK from '../../../core/sdk/sdk.js';
+import * as SDK from '../../../core/sdk/sdk.js';
 import * as CrUXManager from '../../../models/crux-manager/crux-manager.js';
 import * as Marked from '../../../third_party/marked/marked.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as Lit from '../../../ui/lit/lit.js';
 import * as MobileThrottling from '../../mobile_throttling/mobile_throttling.js';
 
-const {html} = LitHtml;
+const {html} = Lit;
 
-export function getThrottlingRecommendations():
-    {cpuRate: number|null, networkConditions: SDK.NetworkManager.Conditions|null} {
-  const cpuRate = 4;  // TODO(crbug.com/311438112): suggest "mid-tier" mobile device when implemented.
-  let networkConditions = null;
+export function getThrottlingRecommendations(): {
+  cpuOption: SDK.CPUThrottlingManager.CPUThrottlingOption|null,
+  networkConditions: SDK.NetworkManager.Conditions|null,
+} {
+  let cpuOption: SDK.CPUThrottlingManager.CPUThrottlingOption =
+      SDK.CPUThrottlingManager.CalibratedMidTierMobileThrottlingOption;
+  if (cpuOption.rate() === 0) {
+    cpuOption = SDK.CPUThrottlingManager.MidTierThrottlingOption;
+  }
 
+  let networkConditions = null;
   const response = CrUXManager.CrUXManager.instance().getSelectedFieldMetricData('round_trip_time');
   if (response?.percentiles) {
     const rtt = Number(response.percentiles.p75);
@@ -26,7 +32,7 @@ export function getThrottlingRecommendations():
   }
 
   return {
-    cpuRate,
+    cpuOption,
     networkConditions,
   };
 }
@@ -125,7 +131,7 @@ export function shortenUrl(url: URL, maxChars = 20): string {
  * This should only be used for markdown that is guaranteed to be valid,
  * and not contain any user-generated content.
  */
-export function md(markdown: Common.UIString.LocalizedString): LitHtml.TemplateResult {
+export function md(markdown: Common.UIString.LocalizedString): Lit.TemplateResult {
   const tokens = Marked.Marked.lexer(markdown);
   const data = {tokens};
   return html`<devtools-markdown-view .data=${data}></devtools-markdown-view>`;