[RPP Insight] Rename the LongCriticalTree insight to NetworkDependencyTree

Nancy Li · Devtools-frontend LUCI CQ · commit 1b36370496ba · 2025-02-18T05:56:49.000-08:00
For more information see here: https://docs.google.com/document/d/1zKpNkjJQbCuuPSXiZKwQu5qMscSDqXqjFHSiAHgDFug/edit?disco=AAABb9FRpzg Bug: 372897712 Change-Id: Ia75da0808c128ffa7ffdf174de317538f1230c51 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6271743 Commit-Queue: Nancy Li <nancyly@chromium.org> Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
diff --git a/config/gni/devtools_grd_files.gni b/config/gni/devtools_grd_files.gni
@@ -1148,8 +1148,8 @@ 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/NetworkDependencyTree.js",
   "front_end/models/trace/insights/RenderBlocking.js",
   "front_end/models/trace/insights/SlowCSSSelector.js",
   "front_end/models/trace/insights/Statistics.js",
@@ -1912,7 +1912,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/NetworkDependencyTree.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",
@@ -1922,7 +1922,7 @@ grd_files_debug_sources = [
   "front_end/panels/timeline/components/insights/Viewport.js",
   "front_end/panels/timeline/components/insights/baseInsightComponent.css.js",
   "front_end/panels/timeline/components/insights/checklist.css.js",
-  "front_end/panels/timeline/components/insights/longCriticalNetworkTreeInsight.css.js",
+  "front_end/panels/timeline/components/insights/networkDependencyTreeInsight.css.js",
   "front_end/panels/timeline/components/insights/table.css.js",
   "front_end/panels/timeline/components/insights/types.js",
   "front_end/panels/timeline/components/interactionBreakdown.css.js",
diff --git a/front_end/models/trace/Processor.test.ts b/front_end/models/trace/Processor.test.ts
@@ -406,7 +406,7 @@ describeWithEnvironment('TraceProcessor', function() {
         'LCPPhases',
         'LCPDiscovery',
         'RenderBlocking',
-        'LongCriticalNetworkTree',
+        'NetworkDependencyTree',
         'ImageDelivery',
         'DocumentLatency',
         'FontDisplay',
@@ -426,7 +426,7 @@ describeWithEnvironment('TraceProcessor', function() {
         'LCPPhases',
         'LCPDiscovery',
         'RenderBlocking',
-        'LongCriticalNetworkTree',
+        'NetworkDependencyTree',
         'ImageDelivery',
         'DocumentLatency',
         'FontDisplay',
diff --git a/front_end/models/trace/Processor.ts b/front_end/models/trace/Processor.ts
@@ -345,7 +345,7 @@ export class TraceProcessor extends EventTarget {
       LCPDiscovery: null,
       CLSCulprits: null,
       RenderBlocking: null,
-      LongCriticalNetworkTree: null,
+      NetworkDependencyTree: null,
       ImageDelivery: null,
       DocumentLatency: null,
       FontDisplay: null,
diff --git a/front_end/models/trace/insights/BUILD.gn b/front_end/models/trace/insights/BUILD.gn
@@ -19,8 +19,8 @@ devtools_module("insights") {
     "InteractionToNextPaint.ts",
     "LCPDiscovery.ts",
     "LCPPhases.ts",
-    "LongCriticalNetworkTree.ts",
     "Models.ts",
+    "NetworkDependencyTree.ts",
     "RenderBlocking.ts",
     "SlowCSSSelector.ts",
     "Statistics.ts",
@@ -62,7 +62,7 @@ ts_library("unittests") {
     "InteractionToNextPaint.test.ts",
     "LCPDiscovery.test.ts",
     "LCPPhases.test.ts",
-    "LongCriticalNetworkTree.test.ts",
+    "NetworkDependencyTree.test.ts",
     "RenderBlocking.test.ts",
     "SlowCSSSelector.test.ts",
     "Statistics.test.ts",
diff --git a/front_end/models/trace/insights/Models.ts b/front_end/models/trace/insights/Models.ts
@@ -12,7 +12,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 NetworkDependencyTree from './NetworkDependencyTree.js';
 export * as RenderBlocking from './RenderBlocking.js';
 export * as SlowCSSSelector from './SlowCSSSelector.js';
 export * as ThirdParties from './ThirdParties.js';
diff --git a/front_end/models/trace/insights/NetworkDependencyTree.test.ts b/front_end/models/trace/insights/NetworkDependencyTree.test.ts
@@ -6,11 +6,11 @@ import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {getFirstOrError, getInsightOrError, processTrace} from '../../../testing/InsightHelpers.js';
 import * as Trace from '../trace.js';
 
-describeWithEnvironment('LongCriticalNetworkTree', function() {
+describeWithEnvironment('NetworkDependencyTree', function() {
   it('calculates network dependency tree', async () => {
     const {data, insights} = await processTrace(this, 'lcp-multiple-frames.json.gz');
     const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
-    const insight = getInsightOrError('LongCriticalNetworkTree', insights, firstNav);
+    const insight = getInsightOrError('NetworkDependencyTree', insights, firstNav);
 
     // The network dependency tree in this trace is
     // | .../index.html (ts:566777570990, dur:5005590)
diff --git a/front_end/models/trace/insights/NetworkDependencyTree.ts b/front_end/models/trace/insights/NetworkDependencyTree.ts
@@ -21,7 +21,7 @@ export const UIStrings = {
   /**
    * @description Title of an insight that recommends avoiding chaining critical requests.
    */
-  title: 'Long critical network tree',
+  title: 'Network dependency tree',
   /**
    * @description Description of an insight that recommends avoiding chaining critical requests.
    */
@@ -30,15 +30,15 @@ export 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',
+  noNetworkDependencyTree: 'No rendering tasks impacted by network dependencies',
   /**
    * @description Text for the maximum critical path latency. This refers to the longest chain of network requests that
    * the browser must download before it can render the page.
    */
   maxCriticalPathLatency: 'Max critical path latency:'
 };
 
-const str_ = i18n.i18n.registerUIStrings('models/trace/insights/LongCriticalNetworkTree.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/NetworkDependencyTree.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 // XHRs are fetched at High priority, but we exclude them, as they are unlikely to be critical
@@ -56,7 +56,7 @@ export interface CriticalRequestNode {
   children: CriticalRequestNode[];
 }
 
-export type LongCriticalNetworkTreeInsightModel = InsightModel<typeof UIStrings, {
+export type NetworkDependencyTreeInsightModel = InsightModel<typeof UIStrings, {
   rootNodes: CriticalRequestNode[],
   maxTime: Types.Timing.Micro,
 }>;
@@ -65,10 +65,10 @@ export function deps(): ['NetworkRequests'] {
   return ['NetworkRequests'];
 }
 
-function finalize(partialModel: PartialInsightModel<LongCriticalNetworkTreeInsightModel>):
-    LongCriticalNetworkTreeInsightModel {
+function finalize(partialModel: PartialInsightModel<NetworkDependencyTreeInsightModel>):
+    NetworkDependencyTreeInsightModel {
   return {
-    insightKey: 'LongCriticalNetworkTree',
+    insightKey: 'NetworkDependencyTree',
     strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
@@ -113,7 +113,7 @@ function isCritical(request: Types.Events.SyntheticNetworkRequest, context: Insi
 }
 
 export function generateInsight(
-    _parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): LongCriticalNetworkTreeInsightModel {
+    _parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): NetworkDependencyTreeInsightModel {
   if (!context.navigation) {
     return finalize({
       rootNodes: [],
diff --git a/front_end/panels/ai_assistance/data_formatters/PerformanceInsightFormatter.ts b/front_end/panels/ai_assistance/data_formatters/PerformanceInsightFormatter.ts
@@ -85,7 +85,7 @@ We can break this time down into the 4 phases that combine to make up the LCP ti
       case 'LCPPhases':
         return `- https://web.dev/articles/lcp
 - https://web.dev/articles/optimize-lcp`;
-      case 'LongCriticalNetworkTree':
+      case 'NetworkDependencyTree':
         return '';
       case 'RenderBlocking':
         return '';
@@ -119,7 +119,7 @@ We can break this time down into the 4 phases that combine to make up the LCP ti
         return '';
       case 'LCPPhases':
         return 'This insight is used to analyse the loading of the LCP resource and identify which of the 4 phases are contributing most to the delay in rendering the LCP element. For this insight it can be useful to get a list of all network requests that happened before the LCP time and look for slow requests. You can also look for main thread activity during the phases, in particular the load delay and render delay phases.';
-      case 'LongCriticalNetworkTree':
+      case 'NetworkDependencyTree':
         return '';
       case 'RenderBlocking':
         return '';
diff --git a/front_end/panels/timeline/components/SidebarSingleInsightSet.test.ts b/front_end/panels/timeline/components/SidebarSingleInsightSet.test.ts
@@ -158,7 +158,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
     assert.deepEqual(userVisibleTitles, [
       'LCP by phase',
       'Layout shift culprits',
-      'Long critical network tree',
+      'Network dependency tree',
       'Improve image delivery',
       'Font display',
       '3rd parties',
diff --git a/front_end/panels/timeline/components/SidebarSingleInsightSet.ts b/front_end/panels/timeline/components/SidebarSingleInsightSet.ts
@@ -91,7 +91,7 @@ export interface SidebarSingleInsightSetData {
  * users. */
 const EXPERIMENTAL_INSIGHTS: ReadonlySet<string> = new Set([
   'FontDisplay',
-  'LongCriticalNetworkTree',
+  'NetworkDependencyTree',
 ]);
 
 type InsightNameToComponentMapping = Record<
@@ -111,7 +111,7 @@ const INSIGHT_NAME_TO_COMPONENT: InsightNameToComponentMapping = {
   InteractionToNextPaint: Insights.InteractionToNextPaint.InteractionToNextPaint,
   LCPDiscovery: Insights.LCPDiscovery.LCPDiscovery,
   LCPPhases: Insights.LCPPhases.LCPPhases,
-  LongCriticalNetworkTree: Insights.LongCriticalNetworkTree.LongCriticalNetworkTree,
+  NetworkDependencyTree: Insights.NetworkDependencyTree.NetworkDependencyTree,
   RenderBlocking: Insights.RenderBlocking.RenderBlocking,
   SlowCSSSelector: Insights.SlowCSSSelector.SlowCSSSelector,
   ThirdParties: Insights.ThirdParties.ThirdParties,
diff --git a/front_end/panels/timeline/components/insights/BUILD.gn b/front_end/panels/timeline/components/insights/BUILD.gn
@@ -11,7 +11,7 @@ generate_css("css_files") {
   sources = [
     "baseInsightComponent.css",
     "checklist.css",
-    "longCriticalNetworkTreeInsight.css",
+    "networkDependencyTreeInsight.css",
     "table.css",
   ]
 }
@@ -31,7 +31,7 @@ devtools_module("insights") {
     "InteractionToNextPaint.ts",
     "LCPDiscovery.ts",
     "LCPPhases.ts",
-    "LongCriticalNetworkTree.ts",
+    "NetworkDependencyTree.ts",
     "NodeLink.ts",
     "RenderBlocking.ts",
     "SidebarInsight.ts",
diff --git a/front_end/panels/timeline/components/insights/NetworkDependencyTree.ts b/front_end/panels/timeline/components/insights/NetworkDependencyTree.ts
@@ -6,31 +6,31 @@ import '../../../../ui/components/icon_button/icon_button.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type {
-  CriticalRequestNode, LongCriticalNetworkTreeInsightModel} from
-  '../../../../models/trace/insights/LongCriticalNetworkTree.js';
+  CriticalRequestNode, NetworkDependencyTreeInsightModel} from
+  '../../../../models/trace/insights/NetworkDependencyTree.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 import type * as Overlays from '../../overlays/overlays.js';
 import * as Utils from '../../utils/utils.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
-import longCriticalNetworkTreeInsightRaw from './longCriticalNetworkTreeInsight.css.js';
+import networkDependencyTreeInsightRaw from './networkDependencyTreeInsight.css.js';
 
-const {UIStrings, i18nString} = Trace.Insights.Models.LongCriticalNetworkTree;
+const {UIStrings, i18nString} = Trace.Insights.Models.NetworkDependencyTree;
 
 const {html} = Lit;
 
 // TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
-const longCriticalNetworkTreeInsightComponentStyles = new CSSStyleSheet();
-longCriticalNetworkTreeInsightComponentStyles.replaceSync(longCriticalNetworkTreeInsightRaw.cssContent);
+const networkDependencyTreeInsightComponentStyles = new CSSStyleSheet();
+networkDependencyTreeInsightComponentStyles.replaceSync(networkDependencyTreeInsightRaw.cssContent);
 
-export class LongCriticalNetworkTree extends BaseInsightComponent<LongCriticalNetworkTreeInsightModel> {
+export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependencyTreeInsightModel> {
   static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-long-critical-network-tree`;
   override internalName: string = 'long-critical-network-tree';
 
   override connectedCallback(): void {
     super.connectedCallback();
-    this.shadow.adoptedStyleSheets.push(longCriticalNetworkTreeInsightComponentStyles);
+    this.shadow.adoptedStyleSheets.push(networkDependencyTreeInsightComponentStyles);
   }
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
@@ -80,7 +80,7 @@ export class LongCriticalNetworkTree extends BaseInsightComponent<LongCriticalNe
     }
 
     if (!this.model.rootNodes.length) {
-      return html`<div class="insight-section">${i18nString(UIStrings.noLongCriticalNetworkTree)}</div>`;
+      return html`<div class="insight-section">${i18nString(UIStrings.noNetworkDependencyTree)}</div>`;
     }
 
     // clang-format off
@@ -113,8 +113,8 @@ function getAllOverlays(nodes: CriticalRequestNode[], overlays: Overlays.Overlay
 
 declare global {
   interface HTMLElementTagNameMap {
-    'devtools-performance-long-critical-network-tree': LongCriticalNetworkTree;
+    'devtools-performance-long-critical-network-tree': NetworkDependencyTree;
   }
 }
 
-customElements.define('devtools-performance-long-critical-network-tree', LongCriticalNetworkTree);
+customElements.define('devtools-performance-long-critical-network-tree', NetworkDependencyTree);
diff --git a/front_end/panels/timeline/components/insights/insights.ts b/front_end/panels/timeline/components/insights/insights.ts
@@ -15,7 +15,7 @@ import * as ImageDelivery from './ImageDelivery.js';
 import * as InteractionToNextPaint from './InteractionToNextPaint.js';
 import * as LCPDiscovery from './LCPDiscovery.js';
 import * as LCPPhases from './LCPPhases.js';
-import * as LongCriticalNetworkTree from './LongCriticalNetworkTree.js';
+import * as NetworkDependencyTree from './NetworkDependencyTree.js';
 import * as NodeLink from './NodeLink.js';
 import * as RenderBlocking from './RenderBlocking.js';
 import * as SidebarInsight from './SidebarInsight.js';
@@ -39,7 +39,7 @@ export {
   InteractionToNextPaint,
   LCPDiscovery,
   LCPPhases,
-  LongCriticalNetworkTree,
+  NetworkDependencyTree,
   NodeLink,
   RenderBlocking,
   SidebarInsight,
diff --git a/front_end/panels/timeline/components/insights/networkDependencyTreeInsight.css b/front_end/panels/timeline/components/insights/networkDependencyTreeInsight.css
