Agentize the Network Dependency Tree.

Example response: https://screenshot.googleplex.com/8bNPxUeb5GS6oNt.png

Bug: 425273273
Change-Id: I2069e5088d549275ce72687cc764dae62d587501
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6901176
Reviewed-by: Connor Clark <[email protected]>
Commit-Queue: Finnur Thorarinsson <[email protected]>

Author: finnurbreki

front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.snapshot.txt

@@ -723,3 +723,62 @@ This image file is larger than it needs to be (2048x1356) for its displayed dime
 ## External resources:
 - https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/
 === end content
+
+Title: PerformanceInsightFormatter NetworkDependencyTree serializes correctly when there are no results
+Content:
+## Insight Title: Network dependency tree
+
+## Insight Summary:
+This insight analyzes the network dependency tree to identify:
+- The maximum critical path latency (the longest chain of network requests that the browser must download before it can render the page).
+- Whether current [preconnect] tags are appropriate, according to the following rules:
+   1. They should all be in use (no unnecessary preconnects).
+   2. All preconnects should specify cross-origin correctly.
+   3. The maximum of 4 preconnects should be respected.
+- Opportunities to add [preconnect] for a faster loading experience.
+
+## Detailed analysis:
+The network dependency tree checks found no problems, but optimization suggestions may be available.
+
+No rendering tasks impacted by network dependencies.
+
+no origins were preconnected.
+
+## Estimated savings: none
+
+## External resources:
+- https://web.dev/learn/performance/understanding-the-critical-path
+- https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/
+=== end content
+
+Title: PerformanceInsightFormatter NetworkDependencyTree serializes the correct details when there are problems found in the network dependency tree
+Content:
+## Insight Title: Network dependency tree
+
+## Insight Summary:
+This insight analyzes the network dependency tree to identify:
+- The maximum critical path latency (the longest chain of network requests that the browser must download before it can render the page).
+- Whether current [preconnect] tags are appropriate, according to the following rules:
+   1. They should all be in use (no unnecessary preconnects).
+   2. All preconnects should specify cross-origin correctly.
+   3. The maximum of 4 preconnects should be respected.
+- Opportunities to add [preconnect] for a faster loading experience.
+
+## Detailed analysis:
+The network dependency tree checks found one or more problems.
+
+Max critical path latency is 5,014.91 ms
+
+The following is the critical request chain:
+- http://localhost:8787/lcp-iframes/index.html (5,005.59 ms) (longest chain)
+  - http://localhost:8787/lcp-iframes/app.js (5,014.91 ms) (longest chain)
+  - http://localhost:8787/lcp-iframes/app.css (5,010.12 ms)
+
+no origins were preconnected.
+
+## Estimated savings: none
+
+## External resources:
+- https://web.dev/learn/performance/understanding-the-critical-path
+- https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/
+=== end content

front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.test.ts

@@ -364,4 +364,26 @@ describeWithEnvironment('PerformanceInsightFormatter', () => {
       snapshotTester.assert(this, output);
     });
   });
+
+  describe('NetworkDependencyTree', () => {
+    it('serializes correctly when there are no results', async function() {
+      const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+      assert.isOk(insights);
+      const firstNav = getFirstOrError(parsedTrace.Meta.navigationsByNavigationId.values());
+      const insight = getInsightOrError('NetworkDependencyTree', insights, firstNav);
+      const formatter = new PerformanceInsightFormatter(parsedTrace, insight);
+      const output = formatter.formatInsight();
+      snapshotTester.assert(this, output);
+    });
+
+    it('serializes the correct details when there are problems found in the network dependency tree', async function() {
+      const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'lcp-multiple-frames.json.gz');
+      assert.isOk(insights);
+      const firstNav = getFirstOrError(parsedTrace.Meta.navigationsByNavigationId.values());
+      const insight = getInsightOrError('NetworkDependencyTree', insights, firstNav);
+      const formatter = new PerformanceInsightFormatter(parsedTrace, insight);
+      const output = formatter.formatInsight();
+      snapshotTester.assert(this, output);
+    });
+  });
 });

front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.ts

@@ -180,6 +180,86 @@ export class PerformanceInsightFormatter {
     }
   }
 
+  /**
+   * Create an AI prompt string out of the NetworkDependencyTree Insight model to use with Ask AI.
+   * Note: This function accesses the UIStrings within NetworkDependencyTree to help build the
+   * AI prompt, but does not (and should not) call i18nString to localize these strings. They
+   * should all be sent in English (at least for now).
+   * @param insight The Network Dependency Tree Insight Model to query.
+   * @returns a string formatted for sending to Ask AI.
+   */
+  formatNetworkDependencyTreeInsight(
+      insight: Trace.Insights.Models.NetworkDependencyTree.NetworkDependencyTreeInsightModel): string {
+    let output = insight.fail ?
+        'The network dependency tree checks found one or more problems.\n\n' :
+        'The network dependency tree checks found no problems, but optimization suggestions may be available.\n\n';
+
+    const rootNodes = insight.rootNodes;
+    if (rootNodes.length > 0) {
+      output += `Max critical path latency is ${formatMicroToMilli(insight.maxTime)}\n\n`;
+      output += 'The following is the critical request chain:\n';
+
+      function formatNode(
+          node: Trace.Insights.Models.NetworkDependencyTree.CriticalRequestNode, indent: string): string {
+        const url = node.request.args.data.url;
+        const time = formatMicroToMilli(node.timeFromInitialRequest);
+        const isLongest = node.isLongest ? ' (longest chain)' : '';
+        let nodeString = `${indent}- ${url} (${time})${isLongest}\n`;
+        for (const child of node.children) {
+          nodeString += formatNode(child, indent + '  ');
+        }
+        return nodeString;
+      }
+
+      for (const rootNode of rootNodes) {
+        output += formatNode(rootNode, '');
+      }
+      output += '\n';
+    } else {
+      output += `${Trace.Insights.Models.NetworkDependencyTree.UIStrings.noNetworkDependencyTree}.\n\n`;
+    }
+
+    if (insight.preconnectedOrigins?.length > 0) {
+      output += `${Trace.Insights.Models.NetworkDependencyTree.UIStrings.preconnectOriginsTableTitle}:\n`;
+      output += `${Trace.Insights.Models.NetworkDependencyTree.UIStrings.preconnectOriginsTableDescription}\n`;
+      for (const origin of insight.preconnectedOrigins) {
+        const headerText = 'headerText' in origin ? `'${origin.headerText}'` : ``;
+        output += `
+  - ${origin.url}
+    - ${Trace.Insights.Models.NetworkDependencyTree.UIStrings.columnSource}: '${origin.source}'`;
+        if (headerText) {
+          output += `\n   - Header: ${headerText}`;
+        }
+        if (origin.unused) {
+          output += `\n   - Warning: ${Trace.Insights.Models.NetworkDependencyTree.UIStrings.unusedWarning}`;
+        }
+        if (origin.crossorigin) {
+          output += `\n   - Warning: ${Trace.Insights.Models.NetworkDependencyTree.UIStrings.crossoriginWarning}`;
+        }
+      }
+      if (insight.preconnectedOrigins.length >
+          Trace.Insights.Models.NetworkDependencyTree.TOO_MANY_PRECONNECTS_THRESHOLD) {
+        output +=
+            `\n\n**Warning**: ${Trace.Insights.Models.NetworkDependencyTree.UIStrings.tooManyPreconnectLinksWarning}`;
+      }
+    } else {
+      output += `${Trace.Insights.Models.NetworkDependencyTree.UIStrings.noPreconnectOrigins}.`;
+    }
+
+    if (insight.preconnectCandidates.length > 0 &&
+        insight.preconnectedOrigins.length <
+            Trace.Insights.Models.NetworkDependencyTree.TOO_MANY_PRECONNECTS_THRESHOLD) {
+      output += `\n\n${Trace.Insights.Models.NetworkDependencyTree.UIStrings.estSavingTableTitle}:\n${
+          Trace.Insights.Models.NetworkDependencyTree.UIStrings.estSavingTableDescription}\n`;
+      for (const candidate of insight.preconnectCandidates) {
+        output +=
+            `\nAdding [preconnect] to origin '${candidate.origin}' would save ${formatMilli(candidate.wastedMs)}.`;
+      }
+    }
+
+    return output;
+  }
+
   /**
    * Formats and outputs the insight's data.
    * Pass `{headingLevel: X}` to determine what heading level to use for the
@@ -430,6 +510,10 @@ Legacy JavaScript by file:
 ${filesFormatted}`;
     }
 
+    if (Trace.Insights.Models.NetworkDependencyTree.isNetworkDependencyTree(this.#insight)) {
+      return this.formatNetworkDependencyTreeInsight(this.#insight);
+    }
+
     return '';
   }
 
@@ -473,7 +557,8 @@ ${filesFormatted}`;
         return `- https://web.dev/articles/lcp
 - https://web.dev/articles/optimize-lcp`;
       case 'NetworkDependencyTree':
-        return '';
+        return `- https://web.dev/learn/performance/understanding-the-critical-path
+- https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/`;
       case 'RenderBlocking':
         return `- https://web.dev/articles/lcp
 - https://web.dev/articles/optimize-lcp`;
@@ -538,7 +623,13 @@ It is important that all of these checks pass to minimize the delay between the
       case 'LCPBreakdown':
         return 'This insight is used to analyze the time spent that contributed to the final LCP time and identify which of the 4 phases (or 2 if there was no LCP resource) are contributing most to the delay in rendering the LCP element.';
       case 'NetworkDependencyTree':
-        return '';
+        return `This insight analyzes the network dependency tree to identify:
+- The maximum critical path latency (the longest chain of network requests that the browser must download before it can render the page).
+- Whether current [preconnect] tags are appropriate, according to the following rules:
+   1. They should all be in use (no unnecessary preconnects).
+   2. All preconnects should specify cross-origin correctly.
+   3. The maximum of 4 preconnects should be respected.
+- Opportunities to add [preconnect] for a faster loading experience.`;
       case 'RenderBlocking':
         return 'This insight identifies network requests that were render blocking. Render blocking requests are impactful because they are deemed critical to the page and therefore the browser stops rendering the page until it has dealt with these resources. For this insight make sure you fully inspect the details of each render blocking network request and prioritize your suggestions to the user based on the impact of each render blocking request.';
       case 'SlowCSSSelector':

front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.snapshot.txt

@@ -876,6 +876,10 @@ Available insights:
     relevant trace bounds: {min: 157425604232, max: 157426760958}
     example question: Help me optimize my CLS score
     example question: How can I prevent layout shifts on this page?
+  - insight name: NetworkDependencyTree
+    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.
+    relevant trace bounds: {min: 157423489126, max: 157426527569}
+    example question: How do I optimize my network dependency tree?
   - insight name: ImageDelivery
     description: Reducing the download time of images can improve the perceived load time of the page and LCP. [Learn more about optimizing image size](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/)
     relevant trace bounds: {min: 157423794709, max: 157424082831}

front_end/models/trace/insights/NetworkDependencyTree.ts

@@ -666,6 +666,10 @@ export function generatePreconnectCandidates(
   return preconnectCandidates.slice(0, TOO_MANY_PRECONNECTS_THRESHOLD);
 }
 
+export function isNetworkDependencyTree(model: InsightModel): model is NetworkDependencyTreeInsightModel {
+  return model.insightKey === InsightKeys.NETWORK_DEPENDENCY_TREE;
+}
+
 export function generateInsight(
     parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): NetworkDependencyTreeInsightModel {
   if (!context.navigation) {

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

@@ -33,6 +33,10 @@ export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependenc
   #relatedRequests: Set<Trace.Types.Events.SyntheticNetworkRequest>|null = null;
   #countOfChains = 0;
 
+  protected override hasAskAiSupport(): boolean {
+    return true;
+  }
+
   #createOverlayForChain(requests: Set<Trace.Types.Events.SyntheticNetworkRequest>):
       Trace.Types.Overlays.EntryOutline[] {
     const overlays: Trace.Types.Overlays.EntryOutline[] = [];

front_end/ui/visual_logging/KnownContextValues.ts

@@ -3793,6 +3793,7 @@ export const knownContextValues = new Set([
   'timeline.insight-ask-ai.legacy-javascript ',
   'timeline.insight-ask-ai.long-critical-network-tree',
   'timeline.insight-ask-ai.modern-http',
+  'timeline.insight-ask-ai.network-dependency-tree',
   'timeline.insight-ask-ai.render-blocking-requests',
   'timeline.insight-ask-ai.slow-css-selector',
   'timeline.insight-ask-ai.third-parties',