[RPP Insight] Show the insight chip for the network dependency tree related requests

- Show a chip for all requests in the tree
- and only show the warning for requests whose depth is at least 2

screenshot:
with warning: https://screenshot.googleplex.com/8XVNEcPUTCKBwAZ
without warning: https://screenshot.googleplex.com/PEAATy4JcaKB5kA

Bug: 372897712
Change-Id: Ie169430089131accd4f60c0b43a91691083b92cf
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6308819
Reviewed-by: Andres Olivares <[email protected]>
Commit-Queue: Nancy Li <[email protected]>

Author: Nancy Li

front_end/models/trace/insights/NetworkDependencyTree.test.ts

@@ -6,6 +6,8 @@ import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {getFirstOrError, getInsightOrError, processTrace} from '../../../testing/InsightHelpers.js';
 import * as Trace from '../trace.js';
 
+import type {RelatedEventsMap} from './types.js';
+
 describeWithEnvironment('NetworkDependencyTree', function() {
   let insight: Trace.Insights.Types.InsightModels['NetworkDependencyTree'];
 
@@ -15,7 +17,7 @@ describeWithEnvironment('NetworkDependencyTree', function() {
     insight = getInsightOrError('NetworkDependencyTree', insights, firstNav);
   });
 
-  it('calculates network dependency tree', async () => {
+  it('calculates network dependency tree', () => {
     // The network dependency tree in this trace is
     // | .../index.html (ts:566777570990, dur:5005590)
     // |
@@ -41,15 +43,15 @@ describeWithEnvironment('NetworkDependencyTree', function() {
     assert.lengthOf(child1.children, 0);
   });
 
-  it('Calculate the max critical path latency', async () => {
+  it('Calculate the max critical path latency', () => {
     // The chain |index.html(root) -> app.js(child1)| is the longest
     const root = insight.rootNodes[0];
     const child1 = root.children[1];
     assert.strictEqual(
         insight.maxTime, Trace.Types.Timing.Micro(child1.request.ts + child1.request.dur - root.request.ts));
   });
 
-  it('Marks the longest network dependency chain', async () => {
+  it('Marks the longest network dependency chain', () => {
     const root = insight.rootNodes[0];
     const [child0, child1] = root.children;
 
@@ -60,7 +62,7 @@ describeWithEnvironment('NetworkDependencyTree', function() {
     assert.isNotTrue(child0.isLongest);
   });
 
-  it('Store the chain in the last request of the chain', async () => {
+  it('Store the chain in the last request of the chain', () => {
     const root = insight.rootNodes[0];
     const [child0, child1] = root.children;
 
@@ -72,4 +74,30 @@ describeWithEnvironment('NetworkDependencyTree', function() {
     assert.deepEqual(child0.chain, [root.request, child0.request]);
     assert.deepEqual(child1.chain, [root.request, child1.request]);
   });
+
+  it('Calculates the related events', async () => {
+    // Need to load a file with longer dependency chain for this test.
+    // Only those requests whose depth >= 2 will be added to the related events.
+    const {data, insights} = await processTrace(this, 'web-dev-screenshot-source-ids.json.gz');
+    const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
+    insight = getInsightOrError('NetworkDependencyTree', insights, firstNav);
+
+    // For NetworkDependencyTree, the relatedEvents is a map format.
+    assert.isFalse(Array.isArray(insight.relatedEvents));
+    const relatedEvents = insight.relatedEvents as RelatedEventsMap;
+
+    // There are a few chains, let test the first chain
+    // |web.dev -> /css -> 4UasrENHsx...UvQ.woff2|
+    const root = insight.rootNodes[0];
+    const child0 = root.children[0];
+    const child00 = child0.children[0];
+
+    // Root's depth is 0, so there isn't any warning message
+    assert.deepEqual(relatedEvents.get(root.request), []);
+    // child0's depth is 1, so there isn't any warning message
+    assert.deepEqual(relatedEvents.get(child0.request), []);
+    // child00's depth is 2, so there is one warning message
+    assert.deepEqual(
+        relatedEvents.get(child00.request), [Trace.Insights.Models.NetworkDependencyTree.UIStrings.warningDescription]);
+  });
 });

front_end/models/trace/insights/NetworkDependencyTree.ts

@@ -15,6 +15,7 @@ import {
   type InsightSetContext,
   type InsightSetContextWithNavigation,
   type PartialInsightModel,
+  type RelatedEventsMap,
   type RequiredData
 } from './types.js';
 
@@ -28,6 +29,11 @@ export const UIStrings = {
    */
   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.',
+  /**
+   * @description Description of the warning that recommends avoiding chaining critical requests.
+   */
+  warningDescription:
+      'Avoid chaining critical requests by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load.',
   /**
    * @description Text status indicating that there isn't long chaining critical network requests.
    */
@@ -125,6 +131,7 @@ export function generateInsight(
   }
 
   const rootNodes: CriticalRequestNode[] = [];
+  const relatedEvents: RelatedEventsMap = new Map();
   let maxTime = Types.Timing.Micro(0);
 
   let longestChain: Types.Events.SyntheticNetworkRequest[] = [];
@@ -143,23 +150,26 @@ export function generateInsight(
 
     let currentNodes = rootNodes;
 
-    for (const networkRequest of path) {
+    for (let depth = 0; depth < path.length; ++depth) {
+      const request = path[depth];
       // find the request
-      let found = currentNodes.find(node => node.request === networkRequest);
+      let found = currentNodes.find(node => node.request === request);
 
       if (!found) {
-        const timeFromInitialRequest = Types.Timing.Micro(networkRequest.ts + networkRequest.dur - initialRequest.ts);
+        const timeFromInitialRequest = Types.Timing.Micro(request.ts + request.dur - initialRequest.ts);
         found = {
-          request: networkRequest,
+          request,
           timeFromInitialRequest,
           children: [],
         };
         currentNodes.push(found);
       }
 
-      if (networkRequest === lastRequest) {
+      if (request === lastRequest) {
         found.chain = path;
       }
+      // TODO(b/372897712) Switch the UIString to markdown.
+      relatedEvents.set(request, depth < 2 ? [] : [i18nString(UIStrings.warningDescription)]);
 
       currentNodes = found.children;
     }
@@ -183,7 +193,7 @@ export function generateInsight(
       return;
     }
 
-    const networkPath = traversalPath.filter(node => node.type === 'network').reverse().map(node => (node).rawRequest);
+    const networkPath = traversalPath.filter(node => node.type === 'network').reverse().map(node => node.rawRequest);
 
     // Ignore if some ancestor is not a critical request.
     if (networkPath.some(request => (!isCritical(request, context)))) {
@@ -215,5 +225,6 @@ export function generateInsight(
   return finalize({
     rootNodes,
     maxTime,
+    relatedEvents,
   });
 }