[RPP Insight] Add the visual effect when hovering the last network request of a chain

This CL add these effect only when hovering the last network request of a chain
- Highlight the chain in the sidebar
- Only highlight the requests in the chain in network flame chart

There is no change for those non-last requests.

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

Author: Nancy Li

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

@@ -59,4 +59,17 @@ describeWithEnvironment('NetworkDependencyTree', function() {
     // The |app.css| is not in the longest chain
     assert.isNotTrue(child0.isLongest);
   });
+
+  it('Store the chain in the last request of the chain', async () => {
+    const root = insight.rootNodes[0];
+    const [child0, child1] = root.children;
+
+    // There are three chains from Lantern:
+    //   |index.html(root)|
+    //   |index.html(root) -> app.css(child0)|
+    //   |index.html(root) -> app.js(child1)|
+    assert.deepEqual(root.chain, [root.request]);
+    assert.deepEqual(child0.chain, [root.request, child0.request]);
+    assert.deepEqual(child1.chain, [root.request, child1.request]);
+  });
 });

front_end/models/trace/insights/NetworkDependencyTree.ts

@@ -56,6 +56,7 @@ export interface CriticalRequestNode {
   timeFromInitialRequest: Types.Timing.Micro;
   children: CriticalRequestNode[];
   isLongest?: boolean;
+  chain?: Types.Events.SyntheticNetworkRequest[];
 }
 
 export type NetworkDependencyTreeInsightModel = InsightModel<typeof UIStrings, {
@@ -155,6 +156,11 @@ export function generateInsight(
         };
         currentNodes.push(found);
       }
+
+      if (networkRequest === lastRequest) {
+        found.chain = path;
+      }
+
       currentNodes = found.children;
     }
   }

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

@@ -28,6 +28,8 @@ export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependenc
   static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-long-critical-network-tree`;
   override internalName = 'long-critical-network-tree';
 
+  hoveredChain: Trace.Types.Events.SyntheticNetworkRequest[] = [];
+
   override connectedCallback(): void {
     super.connectedCallback();
     this.shadow.adoptedStyleSheets.push(networkDependencyTreeInsightComponentStyles);
@@ -44,24 +46,53 @@ export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependenc
     return overlays;
   }
 
+  #createOverlayForChain(chain: Trace.Types.Events.SyntheticNetworkRequest[]): Overlays.Overlays.EntryOutline[] {
+    return chain.map(entry => ({
+                       type: 'ENTRY_OUTLINE',
+                       entry,
+                       outlineReason: 'ERROR',
+                     }));
+  }
+
+  #onMouseOver(chain: Trace.Types.Events.SyntheticNetworkRequest[]|undefined): void {
+    this.hoveredChain = chain ?? [];
+    const overlays = this.#createOverlayForChain(this.hoveredChain);
+    this.toggleTemporaryOverlays(overlays, {
+      // The trace window doesn't need to be updated because the request is being hovered.
+      updateTraceWindow: false,
+    });
+    this.scheduleRender();
+  }
+
+  #onMouseOut(): void {
+    this.hoveredChain = [];
+    this.toggleTemporaryOverlays(null, {
+      updateTraceWindow: false,
+    });
+    this.scheduleRender();
+  }
+
   renderTree(nodes: CriticalRequestNode[]): Lit.LitTemplate|null {
     if (nodes.length === 0) {
       return null;
     }
     // clang-format off
     return html`
       <ul>
-        ${nodes.map(({request, timeFromInitialRequest, children, isLongest}) => {
+        ${nodes.map(({request, timeFromInitialRequest, children, isLongest, chain}) => {
           const hasChildren = children.length > 0;
 
           const requestClasses = Lit.Directives.classMap({
             request: true,
             longest: Boolean(isLongest),
+            highlighted: this.hoveredChain.includes(request),
           });
 
           return html`
             <li>
-              <div class=${requestClasses}>
+              <div class=${requestClasses}
+                   @mouseover=${hasChildren ? null : this.#onMouseOver.bind(this, chain)}
+                   @mouseout=${hasChildren ? null : this.#onMouseOut.bind(this)}>
                 <span class="url">${eventRef(request)}</span>
                 ${
                   // If this is the last request, show the chain time

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

@@ -41,6 +41,10 @@
           color: var(--sys-color-error);
         }
 
+        &.highlighted {
+          background-color: var(--sys-color-state-hover-on-subtle);
+        }
+
         .url {
           flex: auto;
         }