chrome-devtools-frontend 1.0.1153166 → 1.0.1155899

package/front_end/models/trace/README.md

@@ -2,29 +2,89 @@
 
 This folder contains the new trace engine that was first implemented for the Performance Insights panel and is now being repurposed as the primary trace engine that we use within DevTools.
 
+## High level architecture
+
+```
+     ┌──────────────┐
+     │  Model#parse ├───┐
+     └──────────────┘   │
+                        │
+             ┌──────────▼──────────┐
+             │async processor#parse│
+             └──────────┬──────────┘
+                        │
+             ┌──────────▼────────────┐
+             │for handler of handlers│
+             └───┬────────────────┬──┘
+                 │                │
+┌────────────────▼────┐     ┌─────▼────────────────┐
+│NetworkRequestHandler│     │...many more handlers │
+│                     │     │                      │
+│     reset()         │     │                      │
+│     initialize()    │     │                      │
+│                     │     │                      │
+│     handleEvent()   │     │                      │
+│                     │     │                      │
+│     finalize()      │     │                      │
+│                     │     │                      │
+│     data()          │  │  │                      │
+└─────────────────────┘  │  └──────────────────────┘
+                         │
+                         │
+      ┌──────────────────▼─────────────────┐
+      │const data = model.traceParsedData()│
+      └────────────────────────────────────┘
+```
+
+`Model#parse` is the entrypoint into the engine and is the public interface that consumers use to initiate tracing and to fetch data back.
+
+All the processing is done by the `Processor`. The processor contains a series of *Handlers*, each of which is responsible for parsing events of a particular category.
+
+The trace processor loops over every event in the trace and calls each handler in turn (done this way so we only loop over the trace file once, rather than doing it once-per-handler). A Handler is a file that exposes a set of methods, most importantly `handleEvent()` and `data()`. The `handleEvent` function will be called for each event in the trace, and it is up to an individual handler to do something with that event if it needs to. The `data` method should return the final data that has been parsed and generated by the handler.
+
+Once processing is done (read on for more details on how to track this), you can use the `traceParsedData()` method to fetch the result of parsing a given trace.
+
+## Enabled handlers and creating a model
+
+At the time of writing (06 June 2023) we are midway through a migration of the Performanc Panel's trace engine from the SDK.TracingModel to the new TraceEngine. Consequently, not all of the TraceEngine's handlers are currently active, because we don't want to run expensive handlers whose data we do not yet use in the UI.
+
+Therefore, to create a model instance, we use `Model.createWithRequiredHandlersForMigration()`, which initializes a model configured correctly with the right handlers.
+
+Once the migration is done, we can swap to `Model.createWithAllHandlers()` and remove the code that enables a subset of the handlers to run.
+
+If you want to strictly control the set of handlers that are run (for example, if you only want to run one particular handler), you can initialize the model yourself and pass in the set of handlers:
+
+```ts
+const model = new Model({
+  NetworkRequestHandler: Handlers.ModelHandlers.NetworkRequestHandler,
+})
+```
+
 ## Parsing a trace and getting data back
 
 Once you have an instance of the model, you can call the `parse` method to take a set of raw events and parse them. Once parsed, you then have to call the `traceParsedData` method, providing an index of the trace you want to have the data for. This is because any model can store a number of traces. Each trace is given an index, which starts at 0 and increments by one as a new trace is parsed.
 
 If you are managing multiple traces, you should store them in some form of indexed data structure so you can easily know which index to use to fetch any data from the model. You may delete a trace with `deleteTraceByIndex`, which will then update the indexes of all other traces too.
 
-## Updates from the model
+If you need to check how many traces you have, you can call `model.size()`. The latest trace's index is therefore always `model.size() - 1`.
+
+## Waiting for updates from the model
 
 When you call `parse` you have two options. You can `await` it, which will wait until the trace is fully parsed:
 
-```
+```ts
 await this.model.parse();
 ```
 
 But it's likely preferable to instead use events, to avoid blocking the UI whilst parsing is in progress. You can listen to the `ModelUpdateEvent` for updates:
 
-```
+```ts
 this.model.addEventListener(Model.ModelUpdateEvent.eventName, event => {
   const {data} = event as Model.ModelUpdateEvent;
 
   if (data.data === 'done') {
     // trace is complete
-    const newestData = this.model.traceParsedData(this.model.getRecordingsAvailable().length - 1);
+    const newestData = this.model.traceParsedData(this.model.size() - 1);
   } else {
     // data.data will be an object: { index: X, total: Y}, which represents how many events (X) have been processed out of a total (Y).
     // This can be used to show a progress bar, for example.
@@ -32,18 +92,14 @@ this.model.addEventListener(Model.ModelUpdateEvent.eventName, event => {
 })
 ```
 
-## Handlers
+## The structure of the final data object
 
-Trace Parsing is split into a series of Handlers. The trace processor loops over every event in the trace and calls each handler in turn (done this way so we only loop over the trace file once, rather than doing it once-per-handler). A Handler is a file that exposes a set of methods, most importantly `handleEvent()` and `data()`. The `handleEvent` function will be called for each event in the trace, and it is up to an individual handler to do something with that event if it needs to. The `data` method should return the final data that has been parsed and generated by the handler.
+The object returned from `traceParsedData()` is an object of key-value pairs where each key is the name of a handler, and the value is the data that was parsed and returned from that handler.
 
-Each handler can be individually unit tested by feeding it events, and asserting on the final result of its `data()` function.
-
-The final data object that is returned by the `Processor` contains the result of calling `data()` on each handler. The key of each item in the object will be the name of the handler. Once this data is returned, it is considered immutable and should not be changed.
-
-## Running in a worker
-
-When you create an instance of the Trace Model it will automatically create an instance of the trace worker. This worker is where the actual parsing is done. This is to ensure that parsing a large trace does not cause the main thread to freeze. The fact that the tracing occurs in a different thread is an implementation detail and should not impact how you interface with the trace model itself.
-
-When you call `parse()`, the model will post a message to the worker. This starts processing, and sends messages back. `models/trace/worker/Types.ts` contains the messages that can be sent to and from the worker.
-
-The model listens to these messages and will deal with them. If you want to listen out for updates from the model, you can listen to the `ModelUpdateEvent`, which will be emitted periodically with progress stats, and finally once a trace is complete.
+```ts
+{
+  NetworkRequestHandler: ReturnType<typeof NetworkRequestHandler['data']>,
+  LayoutShiftHandler: ReturnType<typeof LayoutShiftHandler['data']>,
+  // and so on for each enabled Handler
+}
+```

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

@@ -196,7 +196,7 @@ export async function finalize(): Promise<void> {
         Types.Timing.MicroSeconds(request.willSendRequests[request.willSendRequests.length - 1].ts) :
         Types.Timing.MicroSeconds(finalSendRequest.ts);
 
-    // Finsh time and end time
+    // Finish time and end time
     // =======================
     // The finish time and the end time are subtly different.
     //  - Finish time: records the point at which the network stack stopped receiving the data

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

@@ -6,18 +6,15 @@ import * as Platform from '../../../core/platform/platform.js';
 import * as Helpers from '../helpers/helpers.js';
 
 import {data as metaHandlerData} from './MetaHandler.js';
-import {
-  buildStackTraceAsCallFramesFromId,
-  data as samplesData,
-  getAllHotFunctionsBetweenTimestamps,
-} from './SamplesHandler.js';
 
 import {KnownEventName, KNOWN_EVENTS, type TraceEventHandlerName, HandlerState} from './types.js';
 import * as Types from '../types/types.js';
 
 const processes = new Map<Types.TraceEvents.ProcessID, RendererProcess>();
-const traceEventToNode = new Map<RendererEvent, RendererEventNode>();
-const allRendererEvents: RendererEvent[] = [];
+const traceEventToNode = new Map<RendererTraceEvent, RendererEventNode>();
+const allRendererEvents: RendererTraceEvent[] = [];
+let nodeIdCount = 0;
+const makeRendererEventNodeId = (): RendererEventNodeId => (++nodeIdCount) as RendererEventNodeId;
 
 let handlerState = HandlerState.UNINITIALIZED;
 
@@ -38,18 +35,14 @@ const makeEmptyRendererEventTree = (): RendererEventTree => ({
   maxDepth: 0,
 });
 
-const makeEmptyRendererEventNode = (eventIndex: number): RendererEventNode => ({
-  eventIndex,
+const makeEmptyRendererEventNode = (event: RendererTraceEvent, id: RendererEventNodeId): RendererEventNode => ({
+  event,
+  id,
   parentId: null,
   childrenIds: new Set(),
   depth: 0,
 });
 
-const makeRendererEventNodeIdGenerator = (): () => RendererEventNodeId => {
-  let i = 0;
-  return (): RendererEventNodeId => i++ as RendererEventNodeId;
-};
-
 const getOrCreateRendererProcess =
     (processes: Map<Types.TraceEvents.ProcessID, RendererProcess>, pid: Types.TraceEvents.ProcessID):
         RendererProcess => {
@@ -64,6 +57,7 @@ export function reset(): void {
   processes.clear();
   traceEventToNode.clear();
   allRendererEvents.length = 0;
+  nodeIdCount = -1;
   handlerState = HandlerState.UNINITIALIZED;
 }
 
@@ -292,69 +286,46 @@ export function buildHierarchy(
  * Complexity: O(n), where n = number of events
  */
 export function treify(
-    events: RendererEvent[], options: {filter: {has: (name: KnownEventName) => boolean}}): RendererEventTree {
+    events: RendererTraceEvent[], options: {filter: {has: (name: KnownEventName) => boolean}}): RendererEventTree {
   const stack = [];
+  // Reset the node id counter for every new renderer.
+  nodeIdCount = -1;
   const tree = makeEmptyRendererEventTree();
-  const makeRendererEventNodeId = makeRendererEventNodeIdGenerator();
-  let lastScheduleStyleRecalcEvent: RendererEvent|null = null;
-  let lastInvalidateLayout: RendererEvent|null = null;
-  let lastForcedStyleRecalc: RendererEvent|null = null;
-
   for (let i = 0; i < events.length; i++) {
     const event = events[i];
 
-    buildHotFunctionsStackTracesForTask(event);
-
-    if (event.name === KnownEventName.ScheduleStyleRecalculation) {
-      lastScheduleStyleRecalcEvent = event;
-    }
-    if (event.name === KnownEventName.InvalidateLayout) {
-      lastInvalidateLayout = event;
-    }
-    if (event.name === KnownEventName.RecalculateStyles) {
-      lastForcedStyleRecalc = event;
-    }
     // If the current event should not be part of the tree, then simply proceed
     // with the next event.
     if (!options.filter.has(event.name as KnownEventName)) {
       continue;
     }
 
-    const duration = Types.TraceEvents.isTraceEventInstant(event) ? 0 : event.dur;
+    const duration = event.dur || 0;
+    const nodeId = makeRendererEventNodeId();
+    const node = makeEmptyRendererEventNode(event, nodeId);
 
     // If the parent stack is empty, then the current event is a root. Create a
     // node for it, mark it as a root, then proceed with the next event.
     if (stack.length === 0) {
-      const node = makeEmptyRendererEventNode(i);
-      const nodeId = makeRendererEventNodeId();
       tree.nodes.set(nodeId, node);
       tree.roots.add(nodeId);
-      event.totalTime = Types.Timing.MicroSeconds(duration);
       event.selfTime = Types.Timing.MicroSeconds(duration);
-      stack.push(nodeId);
+      stack.push(node);
       tree.maxDepth = Math.max(tree.maxDepth, stack.length);
       traceEventToNode.set(event, node);
       continue;
     }
 
-    const parentNodeId = stack[stack.length - 1];
-    if (parentNodeId === undefined) {
-      throw new Error('Impossible: no parent node id found in the stack');
+    const parentNode = stack.at(-1);
+    if (parentNode === undefined) {
+      throw new Error('Impossible: no parent node found in the stack');
     }
 
-    const parentNode = tree.nodes.get(parentNodeId);
-    if (!parentNode) {
-      throw new Error('Impossible: no parent node exists for the given id');
-    }
-
-    const parentEvent = events[parentNode.eventIndex];
-    if (!parentEvent) {
-      throw new Error('Impossible: no parent event exists for the given node');
-    }
+    const parentEvent = parentNode.event;
 
     const begin = event.ts;
     const parentBegin = parentEvent.ts;
-    const parentDuration = Types.TraceEvents.isTraceEventInstant(parentEvent) ? 0 : parentEvent.dur;
+    const parentDuration = parentEvent.dur || 0;
     const end = begin + duration;
     const parentEnd = parentBegin + parentDuration;
     // Check the relationship between the parent event at the top of the stack,
@@ -378,6 +349,8 @@ export function treify(
     if (startsAfterParent) {
       stack.pop();
       i--;
+      // The last created node has been discarded, so discard this id.
+      nodeIdCount--;
       continue;
     }
 
@@ -392,105 +365,21 @@ export function treify(
     //    contained within the parent event. Create a node for the current
     //    event, establish the parent/child relationship, then proceed with the
     //    next event.
-    const node = makeEmptyRendererEventNode(i);
-    const nodeId = makeRendererEventNodeId();
     tree.nodes.set(nodeId, node);
     node.depth = stack.length;
-    node.parentId = parentNodeId;
+    node.parentId = parentNode.id;
     parentNode.childrenIds.add(nodeId);
     event.selfTime = Types.Timing.MicroSeconds(duration);
-    event.totalTime = Types.Timing.MicroSeconds(duration);
     if (parentEvent.selfTime !== undefined) {
-      parentEvent.selfTime = Types.Timing.MicroSeconds(parentEvent.selfTime - event.totalTime);
+      parentEvent.selfTime = Types.Timing.MicroSeconds(parentEvent.selfTime - (event.dur || 0));
     }
-    stack.push(nodeId);
+    stack.push(node);
     tree.maxDepth = Math.max(tree.maxDepth, stack.length);
     traceEventToNode.set(event, node);
-    // For checking if an event is a forced layout, this point in the process
-    // is the perfect spot.
-    // An event is a forced layout if it is in a subset of all events (see
-    // EVENTS_THAT_MAY_BE_FORCED_LAYOUTS constant) AND if its parent event is
-    // not a RunTask.  Rather than navigate the tree and perform this check
-    // later on, we can do this at this point, where we already have done the
-    // work to calculate the event and its parent event.
-    checkIfEventIsForcedLayoutAndStore(
-        event, lastScheduleStyleRecalcEvent, lastInvalidateLayout, lastForcedStyleRecalc);
   }
   return tree;
 }
 
-function checkIfEventIsForcedLayoutAndStore(
-    event: RendererEvent, lastScheduleStyleRecalcEvent: RendererEvent|null, lastInvalidateLayout: RendererEvent|null,
-    lastForcedStyleRecalc: RendererEvent|null): void {
-  // Forced re relayout
-  if (FORCED_LAYOUT_EVENT_NAMES.has(event.name as KnownEventName)) {
-    if (lastInvalidateLayout) {
-      // By default, the initiator of a forced re layout is the last InvalidateLayout event.
-      event.initiator = lastInvalidateLayout;
-    }
-
-    // However if the last InvalidateLayout ended before the last forced styles recalc,
-    // set the initiator to be the last ScheduleStylesRecalc.
-    const lastForcedStyleEndTime = lastForcedStyleRecalc && lastForcedStyleRecalc.ts + (lastForcedStyleRecalc.dur || 0);
-    const hasInitiator = lastScheduleStyleRecalcEvent && lastInvalidateLayout && lastForcedStyleEndTime;
-    if (hasInitiator && lastForcedStyleEndTime > lastInvalidateLayout.ts) {
-      event.initiator = lastScheduleStyleRecalcEvent;
-    }
-  }
-
-  // Forced styles recalc
-  if (FORCED_RECALC_STYLE_EVENTS.has(event.name as KnownEventName)) {
-    lastForcedStyleRecalc = event;
-    if (lastScheduleStyleRecalcEvent) {
-      // By default, the initiator of a forced styles recalc is the last ScheduleStylesRecalc event.
-      event.initiator = lastScheduleStyleRecalcEvent;
-    }
-  }
-}
-
-function eventIsLongTask(event: RendererEvent, mustBeOnMainFrame: boolean): boolean {
-  if (event.name !== KnownEventName.RunTask) {
-    return false;
-  }
-  const eventProcess = processes.get(event.pid);
-  const isOnMainFrame = Boolean(eventProcess && eventProcess.isOnMainFrame);
-  if (!isOnMainFrame && mustBeOnMainFrame) {
-    return false;
-  }
-
-  const errorTimeThreshold = Helpers.Timing.millisecondsToMicroseconds(Types.Timing.MilliSeconds(50));
-  const eventDuration = Types.TraceEvents.isTraceEventInstant(event) ? 0 : event.dur;
-  return eventDuration > errorTimeThreshold;
-}
-
-export function buildHotFunctionsStackTracesForTask(task: RendererEvent): void {
-  if (!eventIsLongTask(task, true)) {
-    // Don't spend time computing this data for tasks that aren't long.
-    return;
-  }
-  const {processes} = samplesData();
-  const thread = processes.get(task.pid)?.threads.get(task.tid);
-  // This threshold is temporarily set to 0 until so that at the moment
-  // we want to always show what functions were executed in a long task.
-  // In the future however, as we provide more sophisticated details
-  // for long tasks, we should set the threshold to a more valuable value.
-  const HOT_FUNCTION_MIN_SELF_PERCENTAGE = 0;
-  const calls = thread?.calls;
-  const taskStart = task.ts;
-  const taskEnd = Types.Timing.MicroSeconds(task.ts + (task.dur || 0));
-  const hotFunctions =
-      calls && getAllHotFunctionsBetweenTimestamps(calls, taskStart, taskEnd, HOT_FUNCTION_MIN_SELF_PERCENTAGE);
-  const tree = thread?.tree;
-  if (!hotFunctions || !tree) {
-    return;
-  }
-  // Store the top 10 hot functions.
-  const MAX_HOT_FUNCTION_COUNT = 10;
-  task.hotFunctionsStackTraces =
-      hotFunctions.slice(0, MAX_HOT_FUNCTION_COUNT)
-          .map(hotFunction => buildStackTraceAsCallFramesFromId(tree, hotFunction.stackFrame.nodeId).reverse());
-}
-
 export const FORCED_LAYOUT_EVENT_NAMES = new Set([
   KnownEventName.Layout,
 ]);
@@ -506,8 +395,8 @@ export function deps(): TraceEventHandlerName[] {
 
 export interface RendererHandlerData {
   processes: Map<Types.TraceEvents.ProcessID, RendererProcess>;
-  traceEventToNode: Map<RendererEvent, RendererEventNode>;
-  allRendererEvents: RendererEvent[];
+  traceEventToNode: Map<RendererTraceEvent, RendererEventNode>;
+  allRendererEvents: RendererTraceEvent[];
 }
 
 export interface RendererProcess {
@@ -520,18 +409,18 @@ export interface RendererProcess {
 
 export interface RendererThread {
   name: string|null;
-  events: RendererEvent[];
+  events: RendererTraceEvent[];
   tree?: RendererEventTree;
 }
 
 interface RendererEventData {
   selfTime: Types.Timing.MicroSeconds;
-  totalTime: Types.Timing.MicroSeconds;
-  initiator: RendererEvent;
+  initiator: RendererTraceEvent;
+  parent?: RendererTraceEvent;
   hotFunctionsStackTraces: Types.TraceEvents.TraceEventCallFrame[][];
 }
 
-export type RendererEvent = Types.TraceEvents.TraceEventRendererData&Partial<RendererEventData>;
+export type RendererTraceEvent = Types.TraceEvents.TraceEventRendererData&Partial<RendererEventData>;
 
 export interface RendererEventTree {
   nodes: Map<RendererEventNodeId, RendererEventNode>;
@@ -540,8 +429,9 @@ export interface RendererEventTree {
 }
 
 export interface RendererEventNode {
-  eventIndex: number;
+  event: RendererTraceEvent;
   depth: number;
+  id: RendererEventNodeId;
   parentId?: RendererEventNodeId|null;
   childrenIds: Set<RendererEventNodeId>;
 }

package/front_end/models/trace/handlers/UserTimings.md

@@ -20,7 +20,7 @@ Events that represent a `performance.measure` call will come in pairs: a begin e
 
 ### Parsing out user timings
 
-For `performance.mark` calls, the handler looks for events with the user timing category and the `Mark` trace event phase ('R'). These events are then filtered to exclude timings appendend by Chrome (1).
+For `performance.mark` calls, the handler looks for events with the user timing category and the `Mark` trace event phase (`I`). However, pre-June 2023, these are emitted with phase `R`. These events are then filtered to exclude timings appendend by Chrome (1).
 
 For `performance.measure` calls, the handler looks for begin or end events in the trace. Once we have these, we then pair them up, and create a list of synthetic user timing events. These are events that do not actually exist in the trace, but we create because we need one event to map to each block. The event is made up of information from the begin and/or end event and includes most crucially:
 

package/front_end/models/trace/types/TraceEvents.ts

@@ -738,7 +738,7 @@ export interface TraceEventTimeStamp extends TraceEventData {
 
 export interface TraceEventPerformanceMark extends TraceEventData {
   cat: 'blink.user_timing';
-  ph: Phase.MARK;
+  ph: Phase.INSTANT|Phase.MARK;
   id: string;
 }
 
@@ -1057,7 +1057,8 @@ export function isTraceEventPerformanceMeasure(traceEventData: TraceEventData):
 
 export function isTraceEventPerformanceMark(traceEventData: TraceEventData):
     traceEventData is TraceEventPerformanceMark {
-  return traceEventData.ph === Phase.MARK && traceEventData.cat === 'blink.user_timing';
+  return (traceEventData.ph === Phase.MARK || traceEventData.ph === Phase.INSTANT) &&
+      traceEventData.cat === 'blink.user_timing';
 }
 
 export function isTraceEventConsoleTime(traceEventData: TraceEventData): traceEventData is TraceEventConsoleTimeBegin|

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -50,6 +50,7 @@ import {BackgroundServiceModel} from './BackgroundServiceModel.js';
 import {BackgroundServiceView} from './BackgroundServiceView.js';
 import {BounceTrackingMitigationsTreeElement} from './BounceTrackingMitigationsTreeElement.js';
 import * as ApplicationComponents from './components/components.js';
+import {type PreloadingResultView, type PreloadingView} from './preloading/PreloadingView.js';
 import {PreloadingTreeElement} from './PreloadingTreeElement.js';
 import resourcesSidebarStyles from './resourcesSidebar.css.js';
 import {ServiceWorkerCacheTreeElement} from './ServiceWorkerCacheTreeElement.js';
@@ -264,7 +265,8 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
   periodicBackgroundSyncTreeElement: BackgroundServiceTreeElement;
   pushMessagingTreeElement: BackgroundServiceTreeElement;
   reportingApiTreeElement: ReportingApiTreeElement;
-  preloadingTreeElement: PreloadingTreeElement|undefined;
+  preloadingTreeElement: PreloadingTreeElement<PreloadingView>|undefined;
+  preloadingResultTreeElement: PreloadingTreeElement<PreloadingResultView>|undefined;
   private readonly resourcesSection: ResourcesSection;
   private readonly databaseTableViews: Map<DatabaseModelDatabase, {
     [x: string]: DatabaseTableView,
@@ -400,8 +402,10 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
       const preloadingSectionTitle = i18nString(UIStrings.preloading);
       const preloadingSectionTreeElement = this.addSidebarSection(preloadingSectionTitle);
 
-      this.preloadingTreeElement = new PreloadingTreeElement(panel);
+      this.preloadingTreeElement = PreloadingTreeElement.newForPreloadingView(panel);
+      this.preloadingResultTreeElement = PreloadingTreeElement.newForPreloadingResultView(panel);
       preloadingSectionTreeElement.appendChild(this.preloadingTreeElement);
+      preloadingSectionTreeElement.appendChild(this.preloadingResultTreeElement);
     }
 
     const resourcesSectionTitle = i18nString(UIStrings.frames);
@@ -561,12 +565,11 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.periodicBackgroundSyncTreeElement.initialize(backgroundServiceModel);
     this.pushMessagingTreeElement.initialize(backgroundServiceModel);
 
-    // The condition is equivalent to
-    // `Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.PRELOADING_STATUS_PANEL)`.
-    if (this.preloadingTreeElement) {
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.PRELOADING_STATUS_PANEL)) {
       const preloadingModel = this.target?.model(SDK.PreloadingModel.PreloadingModel);
       if (preloadingModel) {
-        this.preloadingTreeElement.initialize(preloadingModel);
+        this.preloadingTreeElement?.initialize(preloadingModel);
+        this.preloadingResultTreeElement?.initialize(preloadingModel);
       }
     }
   }

package/front_end/panels/application/PreloadingTreeElement.ts

@@ -10,24 +10,42 @@ import type * as Platform from '../../core/platform/platform.js';
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import {type ResourcesPanel} from './ResourcesPanel.js';
 
-import {PreloadingView} from './preloading/PreloadingView.js';
+import {PreloadingView, PreloadingResultView} from './preloading/PreloadingView.js';
 
 const UIStrings = {
   /**
    *@description Text in Application Panel Sidebar of the Application panel
    */
   prefetchingAndPrerendering: 'Prefetching & Prerendering',
+  /**
+   *@description Text in Application Panel Sidebar of the Application panel
+   */
+  thisPage: 'This Page',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/PreloadingTreeElement.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class PreloadingTreeElement extends ApplicationPanelTreeElement {
-  private model?: SDK.PreloadingModel.PreloadingModel;
-  private view?: PreloadingView;
+type M = SDK.PreloadingModel.PreloadingModel;
+
+export class PreloadingTreeElement<V extends PreloadingView|PreloadingResultView> extends ApplicationPanelTreeElement {
+  private model?: M;
+  private ctorV: {new(model: M): V};
+  private view?: V;
   #selectedInternal: boolean;
 
-  constructor(resourcesPanel: ResourcesPanel) {
-    super(resourcesPanel, i18nString(UIStrings.prefetchingAndPrerendering), false);
+  // TODO(https://crbug.com/1410709): Split this view into "SpeculationRules" and "Preload".
+  static newForPreloadingView(resourcesPanel: ResourcesPanel): PreloadingTreeElement<PreloadingView> {
+    return new PreloadingTreeElement(resourcesPanel, PreloadingView, i18nString(UIStrings.prefetchingAndPrerendering));
+  }
+
+  static newForPreloadingResultView(resourcesPanel: ResourcesPanel): PreloadingTreeElement<PreloadingResultView> {
+    return new PreloadingTreeElement(resourcesPanel, PreloadingResultView, i18nString(UIStrings.thisPage));
+  }
+
+  constructor(resourcesPanel: ResourcesPanel, ctorV: {new(model: M): V}, title: string) {
+    super(resourcesPanel, title, false);
+
+    this.ctorV = ctorV;
 
     const icon = UI.Icon.Icon.create('arrow-up-down', 'resource-tree-item');
     this.setLeadingIcons([icon]);
@@ -58,7 +76,7 @@ export class PreloadingTreeElement extends ApplicationPanelTreeElement {
     }
 
     if (!this.view) {
-      this.view = new PreloadingView(this.model);
+      this.view = new this.ctorV(this.model);
     }
 
     this.showView(this.view);