chrome-devtools-frontend 1.0.1376716 → 1.0.1380117

package/front_end/panels/timeline/TimelineTreeView.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 type * as TimelineModel from '../../models/timeline_model/timeline_model.js';
 import * as Trace from '../../models/trace/trace.js';
 import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
 import {TraceLoader} from '../../testing/TraceLoader.js';
@@ -35,13 +34,13 @@ describeWithEnvironment('TimelineTreeView', function() {
       eventTreeView.setModelWithEvents(consoleTimings, parsedTrace);
       const tree = eventTreeView.buildTree();
       const topNodesIterator = tree.children().values();
-      const firstNode = topNodesIterator.next().value as TimelineModel.TimelineProfileTree.Node;
+      const firstNode = topNodesIterator.next().value as Trace.Extras.TraceTree.Node;
       assert.strictEqual(firstNode.event?.name, 'first console time');
 
-      const secondNode = topNodesIterator.next().value as TimelineModel.TimelineProfileTree.Node;
+      const secondNode = topNodesIterator.next().value as Trace.Extras.TraceTree.Node;
       assert.strictEqual(secondNode.event?.name, 'third console time');
 
-      const bottomNode = firstNode.children().values().next().value as TimelineModel.TimelineProfileTree.Node;
+      const bottomNode = firstNode.children().values().next().value as Trace.Extras.TraceTree.Node;
       assert.strictEqual(bottomNode.event?.name, 'second console time');
     });
 
@@ -52,10 +51,10 @@ describeWithEnvironment('TimelineTreeView', function() {
       eventTreeView.setModelWithEvents(consoleTimings, parsedTrace);
       const tree = eventTreeView.buildTree();
       const topNodesIterator = tree.children().values();
-      const firstNode = topNodesIterator.next().value as TimelineModel.TimelineProfileTree.Node;
+      const firstNode = topNodesIterator.next().value as Trace.Extras.TraceTree.Node;
       assert.strictEqual(firstNode.event?.name, 'mark1');
 
-      const secondNode = topNodesIterator.next().value as TimelineModel.TimelineProfileTree.Node;
+      const secondNode = topNodesIterator.next().value as Trace.Extras.TraceTree.Node;
       assert.strictEqual(secondNode.event?.name, 'mark3');
     });
 
@@ -110,16 +109,16 @@ describeWithEnvironment('TimelineTreeView', function() {
 
       const tree = bottomUpTreeView.buildTree();
       const topNodesIterator = tree.children().values();
-      const firstNode = topNodesIterator.next().value as TimelineModel.TimelineProfileTree.Node;
+      const firstNode = topNodesIterator.next().value as Trace.Extras.TraceTree.Node;
       assert.strictEqual(firstNode.event?.name, 'second console time');
 
-      const secondNode = topNodesIterator.next().value as TimelineModel.TimelineProfileTree.Node;
+      const secondNode = topNodesIterator.next().value as Trace.Extras.TraceTree.Node;
       assert.strictEqual(secondNode.event?.name, 'first console time');
 
-      const thirdNode = topNodesIterator.next().value as TimelineModel.TimelineProfileTree.Node;
+      const thirdNode = topNodesIterator.next().value as Trace.Extras.TraceTree.Node;
       assert.strictEqual(thirdNode.event?.name, 'third console time');
 
-      const childNode = firstNode.children().values().next().value as TimelineModel.TimelineProfileTree.Node;
+      const childNode = firstNode.children().values().next().value as Trace.Extras.TraceTree.Node;
       assert.strictEqual(childNode.event?.name, 'first console time');
     });
   });
@@ -136,13 +135,13 @@ describeWithEnvironment('TimelineTreeView', function() {
 
       const tree = callTreeView.buildTree();
       const topNodesIterator = tree.children().values();
-      const firstNode = topNodesIterator.next().value as TimelineModel.TimelineProfileTree.Node;
+      const firstNode = topNodesIterator.next().value as Trace.Extras.TraceTree.Node;
       assert.strictEqual(firstNode.event?.name, 'first console time');
 
-      const secondNode = topNodesIterator.next().value as TimelineModel.TimelineProfileTree.Node;
+      const secondNode = topNodesIterator.next().value as Trace.Extras.TraceTree.Node;
       assert.strictEqual(secondNode.event?.name, 'third console time');
 
-      const childNode = firstNode.children().values().next().value as TimelineModel.TimelineProfileTree.Node;
+      const childNode = firstNode.children().values().next().value as Trace.Extras.TraceTree.Node;
       assert.strictEqual(childNode.event?.name, 'second console time');
     });
   });

package/front_end/panels/timeline/TimelineTreeView.ts

@@ -6,7 +6,6 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.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';
 import * as ThirdPartyWeb from '../../third_party/third-party-web/third-party-web.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
@@ -152,12 +151,12 @@ const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineTreeView.ts',
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class TimelineTreeView extends UI.Widget.VBox implements UI.SearchableView.Searchable {
   #selectedEvents: Trace.Types.Events.Event[]|null;
-  private searchResults: TimelineModel.TimelineProfileTree.Node[];
+  private searchResults: Trace.Extras.TraceTree.Node[];
   linkifier!: Components.Linkifier.Linkifier;
   dataGrid!: DataGrid.SortableDataGrid.SortableDataGrid<GridNode>;
-  private lastHoveredProfileNode!: TimelineModel.TimelineProfileTree.Node|null;
+  private lastHoveredProfileNode!: Trace.Extras.TraceTree.Node|null;
   private textFilterInternal!: TimelineRegExp;
-  private taskFilter!: TimelineModel.TimelineModelFilter.ExclusiveNameFilter;
+  private taskFilter!: Trace.Extras.TraceFilter.ExclusiveNameFilter;
   protected startTime!: Trace.Types.Timing.MilliSeconds;
   protected endTime!: Trace.Types.Timing.MilliSeconds;
   splitWidget!: UI.SplitWidget.SplitWidget;
@@ -166,8 +165,8 @@ export class TimelineTreeView extends UI.Widget.VBox implements UI.SearchableVie
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private currentThreadSetting?: Common.Settings.Setting<any>;
-  private lastSelectedNodeInternal?: TimelineModel.TimelineProfileTree.Node|null;
-  private root?: TimelineModel.TimelineProfileTree.Node;
+  private lastSelectedNodeInternal?: Trace.Extras.TraceTree.Node|null;
+  private root?: Trace.Extras.TraceTree.Node;
   private currentResult?: number;
   textFilterUI?: UI.Toolbar.ToolbarInput;
   private caseSensitiveButton: UI.Toolbar.ToolbarToggle|undefined;
@@ -211,7 +210,7 @@ export class TimelineTreeView extends UI.Widget.VBox implements UI.SearchableVie
   init(): void {
     this.linkifier = new Components.Linkifier.Linkifier();
 
-    this.taskFilter = new TimelineModel.TimelineModelFilter.ExclusiveNameFilter([
+    this.taskFilter = new Trace.Extras.TraceFilter.ExclusiveNameFilter([
       Trace.Types.Events.Name.RUN_TASK,
     ]);
     this.textFilterInternal = new TimelineRegExp();
@@ -254,7 +253,7 @@ export class TimelineTreeView extends UI.Widget.VBox implements UI.SearchableVie
     this.lastSelectedNodeInternal;
   }
 
-  lastSelectedNode(): TimelineModel.TimelineProfileTree.Node|null|undefined {
+  lastSelectedNode(): Trace.Extras.TraceTree.Node|null|undefined {
     return this.lastSelectedNodeInternal;
   }
 
@@ -270,11 +269,11 @@ export class TimelineTreeView extends UI.Widget.VBox implements UI.SearchableVie
     this.refreshTree();
   }
 
-  filters(): TimelineModel.TimelineModelFilter.TimelineModelFilter[] {
+  filters(): Trace.Extras.TraceFilter.TraceFilter[] {
     return [this.taskFilter, this.textFilterInternal, ...(ActiveFilters.instance().activeFilters())];
   }
 
-  filtersWithoutTextFilter(): TimelineModel.TimelineModelFilter.TimelineModelFilter[] {
+  filtersWithoutTextFilter(): Trace.Extras.TraceFilter.TraceFilter[] {
     return [this.taskFilter, ...(ActiveFilters.instance().activeFilters())];
   }
 
@@ -319,16 +318,15 @@ export class TimelineTreeView extends UI.Widget.VBox implements UI.SearchableVie
     return this.#selectedEvents || [];
   }
 
-  onHover(_node: TimelineModel.TimelineProfileTree.Node|null): void {
+  onHover(_node: Trace.Extras.TraceTree.Node|null): void {
   }
 
-  appendContextMenuItems(_contextMenu: UI.ContextMenu.ContextMenu, _node: TimelineModel.TimelineProfileTree.Node):
-      void {
+  appendContextMenuItems(_contextMenu: UI.ContextMenu.ContextMenu, _node: Trace.Extras.TraceTree.Node): void {
   }
 
-  selectProfileNode(treeNode: TimelineModel.TimelineProfileTree.Node, suppressSelectedEvent: boolean): void {
+  selectProfileNode(treeNode: Trace.Extras.TraceTree.Node, suppressSelectedEvent: boolean): void {
     const pathToRoot = [];
-    let node: (TimelineModel.TimelineProfileTree.Node|null)|TimelineModel.TimelineProfileTree.Node = treeNode;
+    let node: (Trace.Extras.TraceTree.Node|null)|Trace.Extras.TraceTree.Node = treeNode;
     for (; node; node = node.parent) {
       pathToRoot.push(node);
     }
@@ -385,13 +383,13 @@ export class TimelineTreeView extends UI.Widget.VBox implements UI.SearchableVie
     }
   }
 
-  buildTree(): TimelineModel.TimelineProfileTree.Node {
+  buildTree(): Trace.Extras.TraceTree.Node {
     throw new Error('Not Implemented');
   }
 
   buildTopDownTree(doNotAggregate: boolean, groupIdCallback: ((arg0: Trace.Types.Events.Event) => string)|null):
-      TimelineModel.TimelineProfileTree.Node {
-    return new TimelineModel.TimelineProfileTree.TopDownRootNode(
+      Trace.Extras.TraceTree.Node {
+    return new Trace.Extras.TraceTree.TopDownRootNode(
         this.selectedEvents(), this.filters(), this.startTime, this.endTime, doNotAggregate, groupIdCallback);
   }
 
@@ -521,7 +519,7 @@ export class TimelineTreeView extends UI.Widget.VBox implements UI.SearchableVie
     UI.UIUtils.createTextChild(banner, i18nString(UIStrings.selectItemForDetails));
   }
 
-  showDetailsForNode(_node: TimelineModel.TimelineProfileTree.Node): boolean {
+  showDetailsForNode(_node: Trace.Extras.TraceTree.Node): boolean {
     return false;
   }
 
@@ -551,7 +549,7 @@ export class TimelineTreeView extends UI.Widget.VBox implements UI.SearchableVie
     }
   }
 
-  dataGridNodeForTreeNode(treeNode: TimelineModel.TimelineProfileTree.Node): GridNode|null {
+  dataGridNodeForTreeNode(treeNode: Trace.Extras.TraceTree.Node): GridNode|null {
     return profileNodeToTreeGridNode.get(treeNode) || null;
   }
 
@@ -601,7 +599,7 @@ export class TimelineTreeView extends UI.Widget.VBox implements UI.SearchableVie
 
 export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<GridNode> {
   protected populated: boolean;
-  profileNode: TimelineModel.TimelineProfileTree.Node;
+  profileNode: Trace.Extras.TraceTree.Node;
   protected treeView: TimelineTreeView;
   protected grandTotalTime: number;
   protected maxSelfTime: number;
@@ -609,8 +607,8 @@ export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<Gri
   linkElement: Element|null;
 
   constructor(
-      profileNode: TimelineModel.TimelineProfileTree.Node, grandTotalTime: number, maxSelfTime: number,
-      maxTotalTime: number, treeView: TimelineTreeView) {
+      profileNode: Trace.Extras.TraceTree.Node, grandTotalTime: number, maxSelfTime: number, maxTotalTime: number,
+      treeView: TimelineTreeView) {
     super(null, false);
     this.populated = false;
     this.profileNode = profileNode;
@@ -718,8 +716,8 @@ export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<Gri
 
 export class TreeGridNode extends GridNode {
   constructor(
-      profileNode: TimelineModel.TimelineProfileTree.Node, grandTotalTime: number, maxSelfTime: number,
-      maxTotalTime: number, treeView: TimelineTreeView) {
+      profileNode: Trace.Extras.TraceTree.Node, grandTotalTime: number, maxSelfTime: number, maxTotalTime: number,
+      treeView: TimelineTreeView) {
     super(profileNode, grandTotalTime, maxSelfTime, maxTotalTime, treeView);
     this.setHasChildren(this.profileNode.hasChildren());
     profileNodeToTreeGridNode.set(profileNode, this);
@@ -740,7 +738,7 @@ export class TreeGridNode extends GridNode {
   }
 }
 
-const profileNodeToTreeGridNode = new WeakMap<TimelineModel.TimelineProfileTree.Node, TreeGridNode>();
+const profileNodeToTreeGridNode = new WeakMap<Trace.Extras.TraceTree.Node, TreeGridNode>();
 
 export class AggregatedTimelineTreeView extends TimelineTreeView {
   protected readonly groupBySetting: Common.Settings.Setting<AggregatedTimelineTreeView.GroupBy>;
@@ -790,7 +788,7 @@ export class AggregatedTimelineTreeView extends TimelineTreeView {
     return name;
   }
 
-  displayInfoForGroupNode(node: TimelineModel.TimelineProfileTree.Node): {
+  displayInfoForGroupNode(node: Trace.Extras.TraceTree.Node): {
     name: string,
     color: string,
     icon: (Element|undefined),
@@ -863,17 +861,15 @@ export class AggregatedTimelineTreeView extends TimelineTreeView {
         i18nString(UIStrings.heaviestStackShown), i18nString(UIStrings.heaviestStackHidden)));
   }
 
-  private buildHeaviestStack(treeNode: TimelineModel.TimelineProfileTree.Node):
-      TimelineModel.TimelineProfileTree.Node[] {
+  private buildHeaviestStack(treeNode: Trace.Extras.TraceTree.Node): Trace.Extras.TraceTree.Node[] {
     console.assert(Boolean(treeNode.parent), 'Attempt to build stack for tree root');
-    let result: TimelineModel.TimelineProfileTree.Node[] = [];
+    let result: Trace.Extras.TraceTree.Node[] = [];
     // Do not add root to the stack, as it's the tree itself.
-    for (let node: TimelineModel.TimelineProfileTree.Node = treeNode; node && node.parent; node = node.parent) {
+    for (let node: Trace.Extras.TraceTree.Node = treeNode; node && node.parent; node = node.parent) {
       result.push(node);
     }
     result = result.reverse();
-    for (let node: TimelineModel.TimelineProfileTree.Node = treeNode;
-         node && node.children() && node.children().size;) {
+    for (let node: Trace.Extras.TraceTree.Node = treeNode; node && node.children() && node.children().size;) {
       const children = Array.from(node.children().values());
       node = children.reduce((a, b) => a.totalTime > b.totalTime ? a : b);
       result.push(node);
@@ -892,7 +888,7 @@ export class AggregatedTimelineTreeView extends TimelineTreeView {
     }
   }
 
-  override showDetailsForNode(node: TimelineModel.TimelineProfileTree.Node): boolean {
+  override showDetailsForNode(node: Trace.Extras.TraceTree.Node): boolean {
     const stack = this.buildHeaviestStack(node);
     this.stackView.setStack(stack, node);
     this.stackView.show(this.detailsView.element);
@@ -1001,7 +997,7 @@ export class CallTreeTimelineTreeView extends AggregatedTimelineTreeView {
     this.dataGrid.markColumnAsSortedBy('total', DataGrid.DataGrid.Order.Descending);
   }
 
-  override buildTree(): TimelineModel.TimelineProfileTree.Node {
+  override buildTree(): Trace.Extras.TraceTree.Node {
     const grouping = this.groupBySetting.get();
     return this.buildTopDownTree(false, this.groupingFunction(grouping));
   }
@@ -1014,8 +1010,8 @@ export class BottomUpTimelineTreeView extends AggregatedTimelineTreeView {
     this.dataGrid.markColumnAsSortedBy('self', DataGrid.DataGrid.Order.Descending);
   }
 
-  override buildTree(): TimelineModel.TimelineProfileTree.Node {
-    return new TimelineModel.TimelineProfileTree.BottomUpRootNode(
+  override buildTree(): Trace.Extras.TraceTree.Node {
+    return new Trace.Extras.TraceTree.BottomUpRootNode(
         this.selectedEvents(), this.textFilter(), this.filtersWithoutTextFilter(), this.startTime, this.endTime,
         this.groupingFunction(this.groupBySetting.get()));
   }
@@ -1047,8 +1043,7 @@ export class TimelineStackView extends
     this.dataGrid.asWidget().show(this.element);
   }
 
-  setStack(stack: TimelineModel.TimelineProfileTree.Node[], selectedNode: TimelineModel.TimelineProfileTree.Node):
-      void {
+  setStack(stack: Trace.Extras.TraceTree.Node[], selectedNode: Trace.Extras.TraceTree.Node): void {
     const rootNode = this.dataGrid.rootNode();
     rootNode.removeChildren();
     let nodeToReveal: GridNode|null = null;
@@ -1065,7 +1060,7 @@ export class TimelineStackView extends
     }
   }
 
-  selectedTreeNode(): TimelineModel.TimelineProfileTree.Node|null {
+  selectedTreeNode(): Trace.Extras.TraceTree.Node|null {
     const selectedNode = this.dataGrid.selectedNode;
     return selectedNode && (selectedNode as GridNode).profileNode;
   }

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

@@ -631,7 +631,7 @@ describeWithMockConnection('TimelineUIUtils', function() {
       assert.deepEqual(rowData, [
         {
           title: 'Timestamp',
-          value: '1058.3\xA0ms',
+          value: '1,058.3\xA0ms',
         },
         {title: 'Details', value: '{   "hello": "world"\n}'},
       ]);
@@ -653,7 +653,7 @@ describeWithMockConnection('TimelineUIUtils', function() {
       assert.deepEqual(rowData, [
         {
           title: 'Timestamp',
-          value: '1005.5\xA0ms',
+          value: '1,005.5\xA0ms',
         },
         {
           title: 'Details',

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -40,7 +40,6 @@ 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 Bindings from '../../models/bindings/bindings.js';
-import * as TimelineModel from '../../models/timeline_model/timeline_model.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
@@ -577,14 +576,14 @@ type LinkifyLocationOptions = {
 
 export class TimelineUIUtils {
   static frameDisplayName(frame: Protocol.Runtime.CallFrame): string {
-    if (!TimelineModel.TimelineJSProfile.TimelineJSProfileProcessor.isNativeRuntimeFrame(frame)) {
+    if (!Trace.Extras.TimelineJSProfile.TimelineJSProfileProcessor.isNativeRuntimeFrame(frame)) {
       return UI.UIUtils.beautifyFunctionName(frame.functionName);
     }
-    const nativeGroup = TimelineModel.TimelineJSProfile.TimelineJSProfileProcessor.nativeGroup(frame.functionName);
+    const nativeGroup = Trace.Extras.TimelineJSProfile.TimelineJSProfileProcessor.nativeGroup(frame.functionName);
     switch (nativeGroup) {
-      case TimelineModel.TimelineJSProfile.TimelineJSProfileProcessor.NativeGroups.COMPILE:
+      case Trace.Extras.TimelineJSProfile.TimelineJSProfileProcessor.NativeGroups.COMPILE:
         return i18nString(UIStrings.compile);
-      case TimelineModel.TimelineJSProfile.TimelineJSProfileProcessor.NativeGroups.PARSE:
+      case Trace.Extras.TimelineJSProfile.TimelineJSProfileProcessor.NativeGroups.PARSE:
         return i18nString(UIStrings.parse);
     }
     return frame.functionName;
@@ -723,7 +722,7 @@ export class TimelineUIUtils {
       case Trace.Types.Events.Name.MAJOR_GC:
       case Trace.Types.Events.Name.MINOR_GC: {
         const delta = unsafeEventArgs['usedHeapSizeBefore'] - unsafeEventArgs['usedHeapSizeAfter'];
-        detailsText = i18nString(UIStrings.sCollected, {PH1: Platform.NumberUtilities.bytesToString(delta)});
+        detailsText = i18nString(UIStrings.sCollected, {PH1: i18n.ByteUtilities.bytesToString(delta)});
         break;
       }
       case Trace.Types.Events.Name.FUNCTION_CALL: {
@@ -1090,8 +1089,7 @@ export class TimelineUIUtils {
       contentHelper.appendTextRow(
           i18nString(UIStrings.compilationCacheStatus), i18nString(UIStrings.scriptLoadedFromCache));
       contentHelper.appendTextRow(
-          i18nString(UIStrings.compilationCacheSize),
-          Platform.NumberUtilities.bytesToString(eventData.consumedCacheSize));
+          i18nString(UIStrings.compilationCacheSize), i18n.ByteUtilities.bytesToString(eventData.consumedCacheSize));
       const cacheKind = eventData.cacheKind;
       if (cacheKind) {
         contentHelper.appendTextRow(i18nString(UIStrings.compilationCacheKind), cacheKind);
@@ -1241,7 +1239,7 @@ export class TimelineUIUtils {
       case Trace.Types.Events.Name.MAJOR_GC:
       case Trace.Types.Events.Name.MINOR_GC: {
         const delta = unsafeEventArgs['usedHeapSizeBefore'] - unsafeEventArgs['usedHeapSizeAfter'];
-        contentHelper.appendTextRow(i18nString(UIStrings.collected), Platform.NumberUtilities.bytesToString(delta));
+        contentHelper.appendTextRow(i18nString(UIStrings.collected), i18n.ByteUtilities.bytesToString(delta));
         break;
       }
 
@@ -1294,7 +1292,7 @@ export class TimelineUIUtils {
         url = unsafeEventData && unsafeEventData['url'] as Platform.DevToolsPath.UrlString;
         contentHelper.appendTextRow(
             i18nString(UIStrings.compilationCacheSize),
-            Platform.NumberUtilities.bytesToString(unsafeEventData['producedCacheSize']));
+            i18n.ByteUtilities.bytesToString(unsafeEventData['producedCacheSize']));
         break;
       }
 
@@ -1306,7 +1304,7 @@ export class TimelineUIUtils {
         }
         contentHelper.appendTextRow(
             i18nString(UIStrings.compilationCacheSize),
-            Platform.NumberUtilities.bytesToString(unsafeEventData['producedCacheSize']));
+            i18n.ByteUtilities.bytesToString(unsafeEventData['producedCacheSize']));
         break;
       }
 
@@ -1450,7 +1448,7 @@ export class TimelineUIUtils {
           contentHelper.appendTextRow(i18nString(UIStrings.relatedNode), nodeName);
         }
 
-        const CLSInsight = Trace.Insights.InsightRunners.CumulativeLayoutShift;
+        const CLSInsight = Trace.Insights.Models.CLSCulprits;
         const failures = CLSInsight.getNonCompositedFailure(event);
         if (!failures.length) {
           break;
@@ -2197,8 +2195,8 @@ export class TimelineUIUtils {
     return eventDivider;
   }
 
-  static visibleEventsFilter(): TimelineModel.TimelineModelFilter.TimelineModelFilter {
-    return new TimelineModel.TimelineModelFilter.TimelineVisibleEventsFilter(Utils.EntryStyles.visibleTypes());
+  static visibleEventsFilter(): Trace.Extras.TraceFilter.TraceFilter {
+    return new Trace.Extras.TraceFilter.VisibleEventsFilter(Utils.EntryStyles.visibleTypes());
   }
 
   // Included only for layout tests.

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

@@ -173,8 +173,8 @@ export class LayoutShiftDetails extends HTMLElement {
     this.dispatchEvent(new Insights.EventRef.EventReferenceClick(event));
   }
 
-  #renderAnimation(failure: Trace.Insights.InsightRunners.CumulativeLayoutShift.NoncompositedAnimationFailure):
-      LitHtml.TemplateResult|null {
+  #renderAnimation(failure: Trace.Insights.Models.CLSCulprits.NoncompositedAnimationFailure): LitHtml.TemplateResult
+      |null {
     const event = failure.animation;
     if (!event) {
       return null;
@@ -201,7 +201,7 @@ export class LayoutShiftDetails extends HTMLElement {
     // clang-format on
   }
 
-  #renderRootCauseValues(rootCauses: Trace.Insights.InsightRunners.CumulativeLayoutShift.LayoutShiftRootCausesData|
+  #renderRootCauseValues(rootCauses: Trace.Insights.Models.CLSCulprits.LayoutShiftRootCausesData|
                          undefined): LitHtml.TemplateResult|null {
     return html`
       ${rootCauses?.fontRequests.map(fontReq => this.#renderFontRequest(fontReq))}
@@ -227,8 +227,7 @@ export class LayoutShiftDetails extends HTMLElement {
   #renderShiftRow(
       shift: Trace.Types.Events.SyntheticLayoutShift, parsedTrace: Trace.Handlers.Types.ParsedTrace,
       elementsShifted: Trace.Types.Events.TraceImpactedNode[],
-      rootCauses: Trace.Insights.InsightRunners.CumulativeLayoutShift.LayoutShiftRootCausesData|
-      undefined): LitHtml.TemplateResult|null {
+      rootCauses: Trace.Insights.Models.CLSCulprits.LayoutShiftRootCausesData|undefined): LitHtml.TemplateResult|null {
     const score = shift.args.data?.weighted_score_delta;
     if (!score) {
       return null;
@@ -291,7 +290,7 @@ export class LayoutShiftDetails extends HTMLElement {
       return null;
     }
     const insightsId = layoutShift.args.data?.navigationId ?? Trace.Types.Events.NO_NAVIGATION;
-    const clsInsight = traceInsightsSets.get(insightsId)?.data.CumulativeLayoutShift;
+    const clsInsight = traceInsightsSets.get(insightsId)?.model.CLSCulprits;
     if (!clsInsight || clsInsight instanceof Error) {
       return null;
     }
@@ -337,7 +336,7 @@ export class LayoutShiftDetails extends HTMLElement {
       return null;
     }
     const insightsId = cluster.navigationId ?? Trace.Types.Events.NO_NAVIGATION;
-    const clsInsight = traceInsightsSets.get(insightsId)?.data.CumulativeLayoutShift;
+    const clsInsight = traceInsightsSets.get(insightsId)?.model.CLSCulprits;
     if (!clsInsight || clsInsight instanceof Error) {
       return null;
     }

package/front_end/panels/timeline/components/LiveMetricsView.test.ts

@@ -729,7 +729,7 @@ describeWithMockConnection('LiveMetricsView', () => {
       assert.match(fieldMessage!.innerText, /See how your local metrics compare/);
 
       const title = getLiveMetricsTitle(view);
-      assert.strictEqual(title.innerText, 'Local metrics ');
+      assert.strictEqual(title.innerText, 'Local metrics');
     });
 
     it('should show when crux is enabled', async () => {
@@ -760,7 +760,7 @@ describeWithMockConnection('LiveMetricsView', () => {
       assert.match(fieldMessage!.innerText, /Jan.+2024/);
 
       const title = getLiveMetricsTitle(view);
-      assert.strictEqual(title.innerText, 'Local and field metrics ');
+      assert.strictEqual(title.innerText, 'Local and field metrics');
     });
 
     it('should show empty values when crux is enabled but there is no field data', async () => {
@@ -784,7 +784,7 @@ describeWithMockConnection('LiveMetricsView', () => {
       assert.match(fieldMessage!.textContent!, /Not enough data/);
 
       const title = getLiveMetricsTitle(view);
-      assert.strictEqual(title.innerText, 'Local and field metrics ');
+      assert.strictEqual(title.innerText, 'Local and field metrics');
     });
 
     it('should make initial request on render when crux is enabled', async () => {

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

@@ -10,7 +10,6 @@ import '../../../ui/components/menus/menus.js';
 import './MetricCard.js';
 
 import * as Common from '../../../core/common/common.js';
-import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
@@ -175,11 +174,6 @@ const UIStrings = {
    * @description Text for a link that is inserted inside a larger text block that explains how to simulate different mobile and desktop devices.
    */
   simulateDifferentDevices: 'simulate different devices',
-  /**
-   * @description Tooltip text that explains how disabling the network cache can simulate the network connections of users that are visiting a page for the first time.
-   */
-  networkCacheExplanation:
-      'Disabling the network cache will simulate a network experience similar to a first time visitor.',
   /**
    * @description Text label for a checkbox that controls if the network cache is disabled.
    */
@@ -220,11 +214,15 @@ const UIStrings = {
    * @example {Chrome UX Report} PH1
    */
   seeHowYourLocalMetricsCompare: 'See how your local metrics compare to real user data in the {PH1}.',
+  /**
+   * @description Text for a link that goes to more documentation about local and field data. "Local" refers to performance metrics measured in the developers local environment. "field data" is data measured by real users in the field.
+   */
+  localFieldLearnMoreLink: 'Learn more about local and field data',
   /**
    * @description Tooltip text for a link that goes to documentation explaining the difference between local and field metrics. "Local metrics" are performance metrics measured in the developers local environment. "field data" is data measured by real users in the field.
    */
-  learnMoreAboutMetrics:
-      'Local metrics are captured from the current page using your network connection and device. Field data is measured by real users using many different network connections and devices. Click to learn more about local and field metrics.',
+  localFieldLearnMoreTooltip:
+      'Local metrics are captured from the current page using your network connection and device. Field data is measured by real users using many different network connections and devices.',
   /**
    * @description Tooltip text explaining that this user interaction was ignored when calculating the Interaction to Next Paint (INP) metric because the interaction delay fell beyond the 98th percentile of interaction delays on this page. "INP" is an acronym and should not be translated.
    */
@@ -664,12 +662,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
             textOverride: i18nString(UIStrings.disableNetworkCache),
           } as Settings.SettingCheckbox.SettingCheckboxData}
         ></setting-checkbox>
-        <devtools-icon
-          class="setting-hint"
-          name="help"
-          title=${i18nString(UIStrings.networkCacheExplanation)}
-        ></devtools-icon>
-        </div>
+      </div>
     `;
     // clang-format on
   }
@@ -1106,18 +1099,8 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     const output = html`
       <div class="container">
         <div class="live-metrics-view">
-          <main class="live-metrics"
-          >
-            <h2 class="section-title">
-              ${liveMetricsTitle}
-              <devtools-button
-                class="section-title-help"
-                title=${i18nString(UIStrings.learnMoreAboutMetrics)}
-                .iconName=${'help'}
-                .variant=${Buttons.Button.Variant.ICON}
-                @click=${() => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(helpLink)}
-              ></devtools-button>
-            </h2>
+          <main class="live-metrics">
+            <h2 class="section-title">${liveMetricsTitle}</h2>
             <div class="metric-cards"
               on-render=${ComponentHelpers.Directives.nodeRenderedCallback(node => {
                 this.#tooltipContainerEl = node;
@@ -1133,6 +1116,11 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
                 ${this.#renderInpCard()}
               </div>
             </div>
+            <x-link
+              href=${helpLink}
+              class="local-field-link"
+              title=${i18nString(UIStrings.localFieldLearnMoreTooltip)}
+            >${i18nString(UIStrings.localFieldLearnMoreLink)}</x-link>
             ${this.#renderLogSection()}
           </main>
           <aside class="next-steps" aria-labelledby="next-steps-section-title">

package/front_end/panels/timeline/components/MetricCard.test.ts

@@ -145,7 +145,7 @@ describeWithMockConnection('MetricCard', () => {
 
     const localValueEl = getLocalMetricValue(view);
     assert.strictEqual(localValueEl.className, 'metric-value poor');
-    assert.strictEqual(localValueEl.innerText, '2000 ms');
+    assert.strictEqual(localValueEl.innerText, '2,000 ms');
 
     const fieldValueEl = getFieldMetricValue(view);
     assert.strictEqual(fieldValueEl!.className, 'metric-value good');