[AskAi]: Agentize the Font Display insight.

Example response: https://screenshot.googleplex.com/s26km5tacB9GNTk

Fixed: 425274836
Change-Id: I9960c4b4d7b097df7576b2c0fffd6243316fb8f1
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6910796
Auto-Submit: Finnur Thorarinsson <finnur@chromium.org>
Commit-Queue: Finnur Thorarinsson <finnur@chromium.org>
Reviewed-by: Paul Irish <paulirish@chromium.org>
Reviewed-by: Connor Clark <cjamcl@chromium.org>

Author: finnurbreki

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

@@ -664,6 +664,51 @@ Line: 0, Column: 390688, Name: Object.values
 - https://philipwalton.com/articles/the-state-of-es5-on-the-web/
 === end content
 
+Title: PerformanceInsightFormatter FontDisplay serializes correctly when there are no results
+Content:
+## Insight Title: Font display
+
+## Insight Summary:
+This insight identifies font issues when a webpage uses custom fonts, for example when font-display is not set to `swap`, `fallback` or `optional`, causing the "Flash of Invisible Text" problem (FOIT).
+
+## Detailed analysis:
+No font display issues were detected.
+
+## Estimated savings: FCP -Infinity ms
+
+## External resources:
+- https://web.dev/articles/preload-optional-fonts
+- https://fonts.google.com/knowledge/glossary/foit
+- https://developer.chrome.com/blog/font-fallbacks
+=== end content
+
+Title: PerformanceInsightFormatter FontDisplay serializes the correct details when problems are found with font display
+Content:
+## Insight Title: Font display
+
+## Insight Summary:
+This insight identifies font issues when a webpage uses custom fonts, for example when font-display is not set to `swap`, `fallback` or `optional`, causing the "Flash of Invisible Text" problem (FOIT).
+
+## Detailed analysis:
+The following font display issues were found:
+
+ - Font name: jizaRExUiTo99u79D0KExcOPIDU.woff2, URL: https://fonts.gstatic.com/s/ptsans/v17/jizaRExUiTo99u79D0KExcOPIDU.woff2, Property 'font-display' set to: 'auto', Wasted time: 20.0 ms.
+ - Font name: SlGVmQWMvZQIdix7AFxXkHNSbRYXags.woff2, URL: https://fonts.gstatic.com/s/droidsans/v18/SlGVmQWMvZQIdix7AFxXkHNSbRYXags.woff2, Property 'font-display' set to: 'auto', Wasted time: 15.0 ms.
+ - Font name: jizfRExUiTo99u79B_mh0O6tLR8a8zI.woff2, URL: https://fonts.gstatic.com/s/ptsans/v17/jizfRExUiTo99u79B_mh0O6tLR8a8zI.woff2, Property 'font-display' set to: 'auto', Wasted time: 15.0 ms.
+ - Font name: SlGWmQWMvZQIdix7AFxXmMh3eDs1ZyHKpWg.woff2, URL: https://fonts.gstatic.com/s/droidsans/v18/SlGWmQWMvZQIdix7AFxXmMh3eDs1ZyHKpWg.woff2, Property 'font-display' set to: 'auto', Wasted time: 15.0 ms.
+ - Font name: EJRVQgYoZZY2vCFuvAFWzr-_dSb_.woff2, URL: https://fonts.gstatic.com/s/ptserif/v18/EJRVQgYoZZY2vCFuvAFWzr-_dSb_.woff2, Property 'font-display' set to: 'auto', Wasted time: 15.0 ms.
+ - Font name: S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2, URL: https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2, Property 'font-display' set to: 'auto', Wasted time: 10.0 ms.
+
+Consider setting [`font-display`](https://developer.chrome.com/blog/font-display) to `swap` or `optional` to ensure text is consistently visible. `swap` can be further optimized to mitigate layout shifts with [font metric overrides](https://developer.chrome.com/blog/font-fallbacks).
+
+## Estimated savings: FCP 20 ms
+
+## External resources:
+- https://web.dev/articles/preload-optional-fonts
+- https://fonts.google.com/knowledge/glossary/foit
+- https://developer.chrome.com/blog/font-fallbacks
+=== end content
+
 Title: PerformanceInsightFormatter ImageDelivery serializes the correct details when there are no optimizable images
 Content:
 ## Insight Title: Improve image delivery

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

@@ -346,6 +346,28 @@ describeWithEnvironment('PerformanceInsightFormatter', () => {
     });
   });
 
+  describe('FontDisplay', () => {
+    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('FontDisplay', insights, firstNav);
+      const formatter = new PerformanceInsightFormatter(PERF_AGENT_UNIT_FORMATTERS, parsedTrace, insight);
+      const output = formatter.formatInsight();
+      snapshotTester.assert(this, output);
+    });
+
+    it('serializes the correct details when problems are found with font display', async function() {
+      const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'font-display.json.gz');
+      assert.isOk(insights);
+      const firstNav = getFirstOrError(parsedTrace.Meta.navigationsByNavigationId.values());
+      const insight = getInsightOrError('FontDisplay', insights, firstNav);
+      const formatter = new PerformanceInsightFormatter(PERF_AGENT_UNIT_FORMATTERS, parsedTrace, insight);
+      const output = formatter.formatInsight();
+      snapshotTester.assert(this, output);
+    });
+  });
+
   describe('ImageDelivery', () => {
     it('serializes the correct details when there are no optimizable images', async function() {
       const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');

front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../../core/common/common.js';
 import * as Trace from '../../trace/trace.js';
 import type {ConversationSuggestion} from '../agents/AiAgent.js';
 
@@ -185,6 +186,35 @@ 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.
+   */
+  formatFontDisplayInsight(insight: Trace.Insights.Models.FontDisplay.FontDisplayInsightModel): string {
+    if (insight.fonts.length === 0) {
+      return 'No font display issues were detected.';
+    }
+
+    let output = 'The following font display issues were found:\n';
+
+    for (const font of insight.fonts) {
+      let fontName = font.name;
+      if (!fontName) {
+        const url = new Common.ParsedURL.ParsedURL(font.request.args.data.url);
+        fontName = url.isValid ? url.lastPathComponent : '(not available)';
+      }
+      output += `\n - Font name: ${fontName}, URL: ${font.request.args.data.url}, Property 'font-display' set to: '${
+          font.display}', Wasted time: ${this.#formatMilli(font.wastedTime)}.`;
+    }
+
+    output += '\n\n' + Trace.Insights.Models.FontDisplay.UIStrings.description;
+    return output;
+  }
+
   /**
    * Create an AI prompt string out of the Forced Reflow Insight model to use with Ask AI.
    * Note: This function accesses the UIStrings within ForcedReflow model to help build the
@@ -659,6 +689,10 @@ Legacy JavaScript by file:
 ${filesFormatted}`;
     }
 
+    if (Trace.Insights.Models.FontDisplay.isFontDisplayInsight(this.#insight)) {
+      return this.formatFontDisplayInsight(this.#insight);
+    }
+
     if (Trace.Insights.Models.ForcedReflow.isForcedReflowInsight(this.#insight)) {
       return this.formatForcedReflowInsight(this.#insight);
     }
@@ -701,7 +735,9 @@ ${filesFormatted}`;
       case 'DuplicatedJavaScript':
         return '';
       case 'FontDisplay':
-        return '';
+        return `- https://web.dev/articles/preload-optional-fonts
+- https://fonts.google.com/knowledge/glossary/foit
+- https://developer.chrome.com/blog/font-fallbacks`;
       case 'ForcedReflow':
         return '- https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts';
       case 'ImageDelivery':
@@ -757,7 +793,7 @@ ${filesFormatted}`;
         return `This insight identifies large, duplicated JavaScript modules that are present in your application and create redundant code.
   This wastes network bandwidth and slows down your page, as the user's browser must download and process the same code multiple times.`;
       case 'FontDisplay':
-        return '';
+        return 'This insight identifies font issues when a webpage uses custom fonts, for example when font-display is not set to `swap`, `fallback` or `optional`, causing the "Flash of Invisible Text" problem (FOIT).';
       case 'ForcedReflow':
         return `This insight identifies forced synchronous layouts (also known as forced reflows) and layout thrashing caused by JavaScript accessing layout properties at suboptimal points in time.`;
       case 'ImageDelivery':

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

@@ -891,6 +891,11 @@ 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: FontDisplay
+    description: Consider setting [font-display](https://developer.chrome.com/blog/font-display) to swap or optional to ensure text is consistently visible. swap can be further optimized to mitigate layout shifts with [font metric overrides](https://developer.chrome.com/blog/font-fallbacks).
+    relevant trace bounds: {min: 157425661196, max: 157425696387}
+    estimated metric savings: FCP 20 ms
+    example question: How can I update my CSS to avoid layout shifts caused by incorrect `font-display` properties?
   - 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}

front_end/models/trace/insights/FontDisplay.ts

@@ -56,6 +56,10 @@ function finalize(partialModel: PartialInsightModel<FontDisplayInsightModel>): F
   };
 }
 
+export function isFontDisplayInsight(model: InsightModel): model is FontDisplayInsightModel {
+  return model.insightKey === InsightKeys.FONT_DISPLAY;
+}
+
 export function generateInsight(
     parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): FontDisplayInsightModel {
   const fonts: RemoteFont[] = [];

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

@@ -22,6 +22,10 @@ export class FontDisplay extends BaseInsightComponent<FontDisplayInsightModel> {
   override internalName = 'font-display';
   #overlayForRequest = new Map<Trace.Types.Events.Event, Trace.Types.Overlays.Overlay>();
 
+  protected override hasAskAiSupport(): boolean {
+    return true;
+  }
+
   protected override createOverlays(): Trace.Types.Overlays.Overlay[] {
     this.#overlayForRequest.clear();