[AskAi]: Agentize the Third Parties Insight.

Example response: https://screenshot.googleplex.com/5i7BMeuqLnUxMb7

Fixed: 405920819
Change-Id: Iea37b557ef735be08bc63075566549fdd64013f4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6905551
Reviewed-by: Connor Clark <[email protected]>
Commit-Queue: Finnur Thorarinsson <[email protected]>

Author: finnurbreki

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

@@ -842,3 +842,49 @@ no origins were preconnected.
 - https://web.dev/learn/performance/understanding-the-critical-path
 - https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/
 === end content
+
+Title: PerformanceInsightFormatter Third Parties Insight serializes correctly when there are no results
+Content:
+## Insight Title: 3rd parties
+
+## Insight Summary:
+This insight analyzes the performance impact of resources loaded from third-party servers and aggregates the performance cost, in terms of download transfer sizes and total amount of time that third party scripts spent executing on the main thread.
+
+## Detailed analysis:
+No 3rd party scripts were found on this page.
+
+## Estimated savings: none
+
+## External resources:
+- https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/
+=== end content
+
+Title: PerformanceInsightFormatter Third Parties Insight serializes 3rd party scripts correctly
+Content:
+## Insight Title: 3rd parties
+
+## Insight Summary:
+This insight analyzes the performance impact of resources loaded from third-party servers and aggregates the performance cost, in terms of download transfer sizes and total amount of time that third party scripts spent executing on the main thread.
+
+## Detailed analysis:
+The following list contains the largest transfer sizes by a 3rd party script:
+
+- imgix: 172 kB
+- Google Tag Manager: 163 kB
+- Google Analytics: 20.5 kB
+- web.app: 823 B
+
+The following list contains the largest amount spent by a 3rd party script on the main thread:
+
+- Google Tag Manager: 28.1 ms
+- Google Analytics: 5.8 ms
+- noondiphcddnnabmjcihcjfbhfklnnep: 1.7 ms
+- web.app: 0.2 ms
+
+3rd party code can significantly impact load performance. [Reduce and defer loading of 3rd party code](https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/) to prioritize your page's content.
+
+## Estimated savings: none
+
+## External resources:
+- https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/
+=== end content

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

@@ -411,4 +411,26 @@ describeWithEnvironment('PerformanceInsightFormatter', () => {
       snapshotTester.assert(this, output);
     });
   });
+
+  describe('ThirdParties', () => {
+    it('serializes correctly when there are no results', async function() {
+      const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'simple-js-program.json.gz');
+      assert.isOk(insights);
+      const firstNav = getFirstOrError(parsedTrace.Meta.navigationsByNavigationId.values());
+      const insight = getInsightOrError('ThirdParties', insights, firstNav);
+      const formatter = new PerformanceInsightFormatter(PERF_AGENT_UNIT_FORMATTERS, parsedTrace, insight);
+      const output = formatter.formatInsight();
+      snapshotTester.assert(this, output);
+    });
+
+    it('serializes 3rd party scripts correctly', 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('ThirdParties', insights, firstNav);
+      const formatter = new PerformanceInsightFormatter(PERF_AGENT_UNIT_FORMATTERS, parsedTrace, insight);
+      const output = formatter.formatInsight();
+      snapshotTester.assert(this, output);
+    });
+  });
 });

front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.ts

@@ -319,6 +319,53 @@ export class PerformanceInsightFormatter {
     return output;
   }
 
+  /**
+   * Create an AI prompt string out of the ThirdParties Insight model to use with Ask AI.
+   * Note: This function accesses the UIStrings within ThirdParties 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 Third Parties Insight Model to query.
+   * @returns a string formatted for sending to Ask AI.
+   */
+  formatThirdPartiesInsight(insight: Trace.Insights.Models.ThirdParties.ThirdPartiesInsightModel): string {
+    let output = '';
+
+    const entitySummaries = insight.entitySummaries ?? [];
+    const firstPartyEntity = insight.firstPartyEntity;
+
+    const thirdPartyTransferSizeEntries =
+        entitySummaries.filter(s => s.entity !== firstPartyEntity).toSorted((a, b) => b.transferSize - a.transferSize);
+    const thirdPartyMainThreadTimeEntries = entitySummaries.filter(s => s.entity !== firstPartyEntity)
+                                                .toSorted((a, b) => b.mainThreadTime - a.mainThreadTime);
+
+    if (!thirdPartyTransferSizeEntries.length && !thirdPartyMainThreadTimeEntries.length) {
+      return `No 3rd party scripts were found on this page.`;
+    }
+
+    if (thirdPartyTransferSizeEntries.length) {
+      output += `The following list contains the largest transfer sizes by a 3rd party script:\n\n`;
+      for (const entry of thirdPartyTransferSizeEntries) {
+        if (entry.transferSize > 0) {
+          output += `- ${entry.entity.name}: ${this.#unitFormatters.bytes(entry.transferSize)}\n`;
+        }
+      }
+      output += '\n';
+    }
+
+    if (thirdPartyMainThreadTimeEntries.length) {
+      output += `The following list contains the largest amount spent by a 3rd party script on the main thread:\n\n`;
+      for (const entry of thirdPartyMainThreadTimeEntries) {
+        if (entry.mainThreadTime > 0) {
+          output += `- ${entry.entity.name}: ${this.#formatMilli(entry.mainThreadTime)}\n`;
+        }
+      }
+      output += '\n';
+    }
+
+    output += Trace.Insights.Models.ThirdParties.UIStrings.description;
+    return output;
+  }
+
   /**
    * Formats and outputs the insight's data.
    * Pass `{headingLevel: X}` to determine what heading level to use for the
@@ -579,6 +626,10 @@ ${filesFormatted}`;
       return this.formatNetworkDependencyTreeInsight(this.#insight);
     }
 
+    if (Trace.Insights.Models.ThirdParties.isThirdPartyInsight(this.#insight)) {
+      return this.formatThirdPartiesInsight(this.#insight);
+    }
+
     return '';
   }
 
@@ -630,7 +681,7 @@ ${filesFormatted}`;
       case 'SlowCSSSelector':
         return '';
       case 'ThirdParties':
-        return '';
+        return '- https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/';
       case 'Viewport':
         return '';
       case 'Cache':
@@ -700,7 +751,7 @@ It is important that all of these checks pass to minimize the delay between the
       case 'SlowCSSSelector':
         return '';
       case 'ThirdParties':
-        return '';
+        return 'This insight analyzes the performance impact of resources loaded from third-party servers and aggregates the performance cost, in terms of download transfer sizes and total amount of time that third party scripts spent executing on the main thread.';
       case 'Viewport':
         return '';
       case 'Cache':

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

@@ -849,6 +849,10 @@ Available insights:
     estimated wasted bytes: 52.1 kB
     example question: How do I decrease the initial loading time of my page?
     example question: Did anything slow down the request for this document?
+  - insight name: ThirdParties
+    description: 3rd party code can significantly impact load performance. [Reduce and defer loading of 3rd party code](https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/) to prioritize your page's content.
+    relevant trace bounds: {min: 1020034871372, max: 1020035171789}
+    example question: Which third parties are having the largest impact on my page performance?
 === end content
 
 Title: PerformanceTraceFormatter formatTraceSummary yahoo-news.json.gz
@@ -887,6 +891,10 @@ Available insights:
     estimated wasted bytes: 97.8 kB
     example question: What should I do to improve and optimize the time taken to fetch and display images on the page?
     example question: Are all images on my site optimized?
+  - insight name: ThirdParties
+    description: 3rd party code can significantly impact load performance. [Reduce and defer loading of 3rd party code](https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/) to prioritize your page's content.
+    relevant trace bounds: {min: 157423742399, max: 157427277086}
+    example question: Which third parties are having the largest impact on my page performance?
   - insight name: LegacyJavaScript
     description: Polyfills and transforms enable older browsers to use new JavaScript features. However, many aren't necessary for modern browsers. Consider modifying your JavaScript build process to not transpile [Baseline](https://web.dev/articles/baseline-and-polyfills) features, unless you know you must support older browsers. [Learn why most sites can deploy ES6+ code without transpiling](https://philipwalton.com/articles/the-state-of-es5-on-the-web/)
     relevant trace bounds: {min: 157423489126, max: 157426132225}

front_end/models/trace/insights/ThirdParties.ts

@@ -73,6 +73,10 @@ function finalize(partialModel: PartialInsightModel<ThirdPartiesInsightModel>):
   };
 }
 
+export function isThirdPartyInsight(model: InsightModel): model is ThirdPartiesInsightModel {
+  return model.insightKey === InsightKeys.THIRD_PARTIES;
+}
+
 export function generateInsight(
     parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): ThirdPartiesInsightModel {
   const entitySummaries =

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

@@ -51,6 +51,10 @@ export class ThirdParties extends BaseInsightComponent<ThirdPartiesInsightModel>
         },
   };
 
+  protected override hasAskAiSupport(): boolean {
+    return true;
+  }
+
   override renderContent(): Lit.LitTemplate {
     if (!this.model) {
       return Lit.nothing;