[AskAi]: Agentize the Viewport insight.

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

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

Author: finnurbreki

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

@@ -1026,3 +1026,41 @@ The following list contains the largest amount spent by a 3rd party script on th
 ## External resources:
 - https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/
 === end content
+
+Title: PerformanceInsightFormatter Viewport serializes correctly when there are no results
+Content:
+## Insight Title: Optimize viewport for mobile
+
+## Insight Summary:
+The insight identifies web pages that are not specifying the viewport meta tag for mobile devies, which avoids the artificial 300-350ms delay designed to help differentiate between tap and double-click.
+
+## Detailed analysis:
+The webpage is not optimized for mobile viewing.
+
+The viewport meta tag was found: `width=device-width, initial-scale=0.25`.
+
+## Estimated savings: INP 0 ms
+
+## External resources:
+- https://developer.chrome.com/blog/300ms-tap-delay-gone-away/
+=== end content
+
+Title: PerformanceInsightFormatter Viewport serializes the correct details showing viewport problems on mobile
+Content:
+## Insight Title: Optimize viewport for mobile
+
+## Insight Summary:
+The insight identifies web pages that are not specifying the viewport meta tag for mobile devies, which avoids the artificial 300-350ms delay designed to help differentiate between tap and double-click.
+
+## Detailed analysis:
+The webpage is not optimized for mobile viewing.
+
+The viewport meta tag is missing.
+
+Tap interactions may be [delayed by up to 300 ms](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/) if the viewport is not optimized for mobile.
+
+## Estimated savings: none
+
+## External resources:
+- https://developer.chrome.com/blog/300ms-tap-delay-gone-away/
+=== end content

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

@@ -496,4 +496,26 @@ describeWithEnvironment('PerformanceInsightFormatter', () => {
       snapshotTester.assert(this, output);
     });
   });
+
+  describe('Viewport', () => {
+    it('serializes correctly when there are no results', async function() {
+      const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'image-delivery.json.gz');
+      assert.isOk(insights);
+      const firstNav = getFirstOrError(parsedTrace.Meta.navigationsByNavigationId.values());
+      const insight = getInsightOrError('Viewport', insights, firstNav);
+      const formatter = new PerformanceInsightFormatter(parsedTrace, insight);
+      const output = formatter.formatInsight();
+      snapshotTester.assert(this, output);
+    });
+
+    it('serializes the correct details showing viewport problems on mobile', 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('Viewport', 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

@@ -488,6 +488,32 @@ export class PerformanceInsightFormatter {
     return output;
   }
 
+  /**
+   * Create an AI prompt string out of the Viewport [Mobile] Insight model to use with Ask AI.
+   * Note: This function accesses the UIStrings within Viewport 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.
+   */
+  formatViewportInsight(insight: Trace.Insights.Models.Viewport.ViewportInsightModel): string {
+    let output = '';
+
+    output += 'The webpage is ' + (insight.mobileOptimized ? 'already' : 'not') + ' optimized for mobile viewing.\n';
+
+    const hasMetaTag = insight.viewportEvent;
+    if (hasMetaTag) {
+      output += `\nThe viewport meta tag was found: \`${insight.viewportEvent?.args?.data.content}\`.`;
+    } else {
+      output += `\nThe viewport meta tag is missing.`;
+    }
+
+    if (!hasMetaTag) {
+      output += '\n\n' + Trace.Insights.Models.Viewport.UIStrings.description;
+    }
+    return output;
+  }
+
   /**
    * Formats and outputs the insight's data.
    * Pass `{headingLevel: X}` to determine what heading level to use for the
@@ -762,6 +788,10 @@ ${filesFormatted}`;
       return this.formatThirdPartiesInsight(this.#insight);
     }
 
+    if (Trace.Insights.Models.Viewport.isViewportInsight(this.#insight)) {
+      return this.formatViewportInsight(this.#insight);
+    }
+
     return '';
   }
 
@@ -817,7 +847,7 @@ ${filesFormatted}`;
       case 'ThirdParties':
         return '- https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/';
       case 'Viewport':
-        return '';
+        return '- https://developer.chrome.com/blog/300ms-tap-delay-gone-away/';
       case 'Cache':
         return '';
       case 'ModernHTTP':
@@ -891,7 +921,7 @@ It is important that all of these checks pass to minimize the delay between the
       case 'ThirdParties':
         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 '';
+        return 'The insight identifies web pages that are not specifying the viewport meta tag for mobile devies, which avoids the artificial 300-350ms delay designed to help differentiate between tap and double-click.';
       case 'Cache':
         return '';
       case 'ModernHTTP':

front_end/models/trace/insights/Viewport.ts

@@ -52,6 +52,10 @@ function finalize(partialModel: PartialInsightModel<ViewportInsightModel>): View
   };
 }
 
+export function isViewportInsight(model: InsightModel): model is ViewportInsightModel {
+  return model.insightKey === InsightKeys.VIEWPORT;
+}
+
 export function generateInsight(
     parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): ViewportInsightModel {
   const viewportEvent = parsedTrace.UserInteractions.parseMetaViewportEvents.find(event => {

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

@@ -16,6 +16,10 @@ export class Viewport extends BaseInsightComponent<ViewportInsightModel> {
   static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-viewport`;
   override internalName = 'viewport';
 
+  protected override hasAskAiSupport(): boolean {
+    return true;
+  }
+
   override getEstimatedSavingsTime(): Trace.Types.Timing.Milli|null {
     return this.model?.metricSavings?.INP ?? null;
   }