[RPP Insight] Highlight the longest network dependency chain

After: https://screenshot.googleplex.com/BcmczdQCgiFypFJ

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

Author: Nancy Li

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

@@ -7,11 +7,15 @@ import {getFirstOrError, getInsightOrError, processTrace} from '../../../testing
 import * as Trace from '../trace.js';
 
 describeWithEnvironment('NetworkDependencyTree', function() {
-  it('calculates network dependency tree', async () => {
+  let insight: Trace.Insights.Types.InsightModels['NetworkDependencyTree'];
+
+  before(async function() {
     const {data, insights} = await processTrace(this, 'lcp-multiple-frames.json.gz');
     const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
-    const insight = getInsightOrError('NetworkDependencyTree', insights, firstNav);
+    insight = getInsightOrError('NetworkDependencyTree', insights, firstNav);
+  });
 
+  it('calculates network dependency tree', async () => {
     // The network dependency tree in this trace is
     // | .../index.html (ts:566777570990, dur:5005590)
     // |
@@ -35,9 +39,24 @@ describeWithEnvironment('NetworkDependencyTree', function() {
         child1.timeFromInitialRequest,
         Trace.Types.Timing.Micro(child1.request.ts + child1.request.dur - root.request.ts));
     assert.lengthOf(child1.children, 0);
+  });
 
-    // The chain |index.html -> app.js| is the longest
+  it('Calculate the max critical path latency', async () => {
+    // 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 () => {
+    const root = insight.rootNodes[0];
+    const [child0, child1] = root.children;
+
+    // The chain |index.html(root) -> app.js(child1)| is the longest
+    assert.isTrue(root.isLongest);
+    assert.isTrue(child1.isLongest);
+    // The |app.css| is not in the longest chain
+    assert.isNotTrue(child0.isLongest);
+  });
 });

front_end/models/trace/insights/NetworkDependencyTree.ts

@@ -55,6 +55,7 @@ export interface CriticalRequestNode {
   request: Types.Events.SyntheticNetworkRequest;
   timeFromInitialRequest: Types.Timing.Micro;
   children: CriticalRequestNode[];
+  isLongest?: boolean;
 }
 
 export type NetworkDependencyTreeInsightModel = InsightModel<typeof UIStrings, {
@@ -125,11 +126,20 @@ export function generateInsight(
   const rootNodes: CriticalRequestNode[] = [];
   let maxTime = Types.Timing.Micro(0);
 
+  let longestChain: Types.Events.SyntheticNetworkRequest[] = [];
+
   function addChain(path: Types.Events.SyntheticNetworkRequest[]): void {
     if (path.length === 0) {
       return;
     }
     const initialRequest = path[0];
+    const lastRequest = path[path.length - 1];
+    const totalChainTime = Types.Timing.Micro(lastRequest.ts + lastRequest.dur - initialRequest.ts);
+    if (totalChainTime > maxTime) {
+      maxTime = totalChainTime;
+      longestChain = path;
+    }
+
     let currentNodes = rootNodes;
 
     for (const networkRequest of path) {
@@ -138,7 +148,6 @@ export function generateInsight(
 
       if (!found) {
         const timeFromInitialRequest = Types.Timing.Micro(networkRequest.ts + networkRequest.dur - initialRequest.ts);
-        maxTime = Types.Timing.Micro(Math.max(maxTime, timeFromInitialRequest));
         found = {
           request: networkRequest,
           timeFromInitialRequest,
@@ -183,6 +192,20 @@ export function generateInsight(
     addChain(networkPath);
   }, getNextNodes);
 
+  // Mark the longest chain
+  if (longestChain.length > 0) {
+    let currentNodes = rootNodes;
+    for (const request of longestChain) {
+      const found = currentNodes.find(node => node.request === request);
+      if (found) {
+        found.isLongest = true;
+        currentNodes = found.children;
+      } else {
+        console.error('Some request in the longest chain is not found');
+      }
+    }
+  }
+
   return finalize({
     rootNodes,
     maxTime,

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

@@ -51,12 +51,17 @@ export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependenc
     // clang-format off
     return html`
       <ul>
-        ${nodes.map(({request, timeFromInitialRequest, children}) => {
+        ${nodes.map(({request, timeFromInitialRequest, children, isLongest}) => {
           const hasChildren = children.length > 0;
 
+          const requestClasses = Lit.Directives.classMap({
+            request: true,
+            longest: Boolean(isLongest),
+          });
+
           return html`
             <li>
-              <div class="request">
+              <div class=${requestClasses}>
                 <span class="url">${eventRef(request)}</span>
                 ${
                   // If this is the last request, show the chain time

front_end/panels/timeline/components/insights/baseInsightComponent.css

@@ -165,7 +165,7 @@ dd.dl-title {
 .timeline-link {
   cursor: pointer;
   text-decoration: var(--override-timeline-link-text-decoration, underline);
-  color: var(--sys-color-primary);
+  color: var(--override-timeline-link-text-color, var(--sys-color-primary));
   /* for a11y reasons this is a button, so we have to remove some default
    * styling */
   background: none;

front_end/panels/timeline/components/insights/networkDependencyTreeInsight.css

@@ -35,6 +35,12 @@
       .request {
         display: flex;
 
+        &.longest {
+          --override-timeline-link-text-color: var(--sys-color-error);
+
+          color: var(--sys-color-error);
+        }
+
         .url {
           flex: auto;
         }