[RPP Insight] Add some skeleton code for long critical network tree insight

This CL adds the skeleton code for the insight model and insight
component, it doesn't have any functionality, just the code compiles
successfully. Also this insight will be behind the flag.

Bug: 372897712
Change-Id: I0c234b7f7eee0144df729ce4b0eab524b0eefc32
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6179489
Reviewed-by: Jack Franklin <[email protected]>
Commit-Queue: Nancy Li <[email protected]>

Author: Nancy Li

config/gni/devtools_grd_files.gni

@@ -1114,6 +1114,7 @@ grd_files_debug_sources = [
   "front_end/models/trace/insights/InteractionToNextPaint.js",
   "front_end/models/trace/insights/LCPDiscovery.js",
   "front_end/models/trace/insights/LCPPhases.js",
+  "front_end/models/trace/insights/LongCriticalNetworkTree.js",
   "front_end/models/trace/insights/Models.js",
   "front_end/models/trace/insights/RenderBlocking.js",
   "front_end/models/trace/insights/SlowCSSSelector.js",
@@ -1869,6 +1870,7 @@ grd_files_debug_sources = [
   "front_end/panels/timeline/components/insights/InteractionToNextPaint.js",
   "front_end/panels/timeline/components/insights/LCPDiscovery.js",
   "front_end/panels/timeline/components/insights/LCPPhases.js",
+  "front_end/panels/timeline/components/insights/LongCriticalNetworkTree.js",
   "front_end/panels/timeline/components/insights/NodeLink.js",
   "front_end/panels/timeline/components/insights/RenderBlocking.js",
   "front_end/panels/timeline/components/insights/SidebarInsight.js",

front_end/models/trace/Processor.test.ts

@@ -408,6 +408,7 @@ describeWithEnvironment('TraceProcessor', function() {
         'DOMSize',
         'ThirdParties',
         'SlowCSSSelector',
+        'LongCriticalNetworkTree',
       ]);
 
       const orderWithMetadata = await getInsightOrder(true);
@@ -425,6 +426,7 @@ describeWithEnvironment('TraceProcessor', function() {
         'DOMSize',
         'ThirdParties',
         'SlowCSSSelector',
+        'LongCriticalNetworkTree',
       ]);
     });
   });

front_end/models/trace/Processor.ts

@@ -365,6 +365,7 @@ export class TraceProcessor extends EventTarget {
       DOMSize: null,
       ThirdParties: null,
       SlowCSSSelector: null,
+      LongCriticalNetworkTree: null,
     };
 
     // Determine the weights for each metric based on field data, utilizing the same scoring curve that Lighthouse uses.
@@ -573,7 +574,7 @@ export class TraceProcessor extends EventTarget {
 /**
  * Some Handlers need data provided by others. Dependencies of a handler handler are
  * declared in the `deps` field.
- * @returns A map from trace event handler name to trace event hander whose entries
+ * @returns A map from trace event handler name to trace event handler whose entries
  * iterate in such a way that each handler is visited after its dependencies.
  */
 export function sortHandlers(traceHandlers: Partial<{[key in Handlers.Types.HandlerName]: Handlers.Types.Handler}>):

front_end/models/trace/insights/BUILD.gn

@@ -17,6 +17,7 @@ devtools_module("insights") {
     "InteractionToNextPaint.ts",
     "LCPDiscovery.ts",
     "LCPPhases.ts",
+    "LongCriticalNetworkTree.ts",
     "Models.ts",
     "RenderBlocking.ts",
     "SlowCSSSelector.ts",

front_end/models/trace/insights/LongCriticalNetworkTree.ts

@@ -0,0 +1,50 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../../core/i18n/i18n.js';
+import type * as Types from '../types/types.js';
+
+import {InsightCategory, type InsightModel, type InsightSetContext, type RequiredData} from './types.js';
+
+const UIStrings = {
+  /**
+   * @description Title of an insight that recommends avoiding chaining critical requests.
+   */
+  title: 'Long critical network tree',
+  /**
+   * @description Description of an insight that recommends avoiding chaining critical requests.
+   */
+  description:
+      '[Avoid chaining critical requests](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains) by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load.',
+};
+
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/LongCriticalNetworkTree.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export type LongCriticalNetworkTreeInsightModel = InsightModel<{
+  longChains: Types.Events.SyntheticNetworkRequest[][],
+}>;
+
+export function deps(): ['NetworkRequests'] {
+  return ['NetworkRequests'];
+}
+
+function finalize(
+    partialModel: Omit<LongCriticalNetworkTreeInsightModel, 'title'|'description'|'category'|'shouldShow'>):
+    LongCriticalNetworkTreeInsightModel {
+  return {
+    title: i18nString(UIStrings.title),
+    description: i18nString(UIStrings.description),
+    category: InsightCategory.LCP,
+    shouldShow: partialModel.longChains.length > 0,
+    ...partialModel,
+  };
+}
+
+export function generateInsight(
+    _parsedTrace: RequiredData<typeof deps>, _context: InsightSetContext): LongCriticalNetworkTreeInsightModel {
+  return finalize({
+    longChains: [],
+  });
+}

front_end/models/trace/insights/Models.ts

@@ -10,6 +10,7 @@ export * as ImageDelivery from './ImageDelivery.js';
 export * as InteractionToNextPaint from './InteractionToNextPaint.js';
 export * as LCPDiscovery from './LCPDiscovery.js';
 export * as LCPPhases from './LCPPhases.js';
+export * as LongCriticalNetworkTree from './LongCriticalNetworkTree.js';
 export * as RenderBlocking from './RenderBlocking.js';
 export * as SlowCSSSelector from './SlowCSSSelector.js';
 export * as ThirdParties from './ThirdParties.js';

front_end/panels/timeline/components/SidebarSingleInsightSet.test.ts

@@ -163,6 +163,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       'Optimize viewport for mobile',
       'Optimize DOM size',
       'CSS Selector costs',
+      'Long critical network tree',
     ]);
 
     const passedInsightTitles = getPassedInsights(component).flatMap(component => {
@@ -176,6 +177,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       'Optimize viewport for mobile',
       'Optimize DOM size',
       'CSS Selector costs',
+      'Long critical network tree',
     ]);
   });
 

front_end/panels/timeline/components/SidebarSingleInsightSet.ts

@@ -55,6 +55,7 @@ export interface SidebarSingleInsightSetData {
  * users. */
 const EXPERIMENTAL_INSIGHTS: ReadonlySet<string> = new Set([
   'FontDisplay',
+  'LongCriticalNetworkTree',
 ]);
 
 type InsightNameToComponentMapping =
@@ -74,6 +75,7 @@ const INSIGHT_NAME_TO_COMPONENT: InsightNameToComponentMapping = {
   InteractionToNextPaint: Insights.InteractionToNextPaint.InteractionToNextPaint,
   LCPDiscovery: Insights.LCPDiscovery.LCPDiscovery,
   LCPPhases: Insights.LCPPhases.LCPPhases,
+  LongCriticalNetworkTree: Insights.LongCriticalNetworkTree.LongCriticalNetworkTree,
   RenderBlocking: Insights.RenderBlocking.RenderBlocking,
   SlowCSSSelector: Insights.SlowCSSSelector.SlowCSSSelector,
   ThirdParties: Insights.ThirdParties.ThirdParties,

front_end/panels/timeline/components/insights/BUILD.gn

@@ -27,6 +27,7 @@ devtools_module("insights") {
     "InteractionToNextPaint.ts",
     "LCPDiscovery.ts",
     "LCPPhases.ts",
+    "LongCriticalNetworkTree.ts",
     "NodeLink.ts",
     "RenderBlocking.ts",
     "SidebarInsight.ts",

front_end/panels/timeline/components/insights/LongCriticalNetworkTree.ts

@@ -0,0 +1,61 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import '../../../../ui/components/icon_button/icon_button.js';
+
+import * as i18n from '../../../../core/i18n/i18n.js';
+import type {LongCriticalNetworkTreeInsightModel} from '../../../../models/trace/insights/LongCriticalNetworkTree.js';
+import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+import type * as Overlays from '../../overlays/overlays.js';
+
+import {BaseInsightComponent} from './BaseInsightComponent.js';
+
+const UIStrings = {
+  /**
+   * @description Text status indicating that there isn't long chaining critical network requests.
+   */
+  noLongCriticalNetworkTree: 'No rendering tasks impacted by long critical network tree',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/LongCriticalNetworkTree.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const {html} = LitHtml;
+
+export class LongCriticalNetworkTree extends BaseInsightComponent<LongCriticalNetworkTreeInsightModel> {
+  static override readonly litTagName = LitHtml.StaticHtml.literal`devtools-performance-long-critical-network-tree`;
+  override internalName: string = 'long-critical-network-tree';
+
+  override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
+    if (!this.model) {
+      return [];
+    }
+
+    return this.model.longChains.flat().map(entry => ({
+                                              type: 'ENTRY_OUTLINE',
+                                              entry,
+                                              outlineReason: 'ERROR',
+                                            }));
+  }
+
+  override renderContent(): LitHtml.LitTemplate {
+    if (!this.model) {
+      return LitHtml.nothing;
+    }
+
+    if (!this.model.longChains.length) {
+      return html`<div class="insight-section">${i18nString(UIStrings.noLongCriticalNetworkTree)}</div>`;
+    }
+
+    return LitHtml.nothing;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-performance-long-critical-network-tree': LongCriticalNetworkTree;
+  }
+}
+
+customElements.define('devtools-performance-long-critical-network-tree', LongCriticalNetworkTree);