AI: add basic info for documentRequestLatency insight

Bug: 401232558
Change-Id: I5c24f2367d246b8ec4a771e6923d0409c5db2ca0
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6348559
Auto-Submit: Jack Franklin <[email protected]>
Reviewed-by: Alina Varkki <[email protected]>
Commit-Queue: Alina Varkki <[email protected]>

Author: jackfranklin

front_end/models/trace/insights/DocumentLatency.ts

@@ -76,13 +76,17 @@ const TARGET_MS = 100;
 // Threshold for compression savings.
 const IGNORE_THRESHOLD_IN_BYTES = 1400;
 
+export function isDocumentLatency(x: InsightModel): x is DocumentLatencyInsightModel {
+  return x.insightKey === 'DocumentLatency';
+}
+
 export type DocumentLatencyInsightModel = InsightModel<typeof UIStrings, {
   data?: {
     serverResponseTime: Types.Timing.Milli,
     redirectDuration: Types.Timing.Milli,
     uncompressedResponseBytes: number,
+    checklist: Checklist<'noRedirects'|'serverResponseIsFast'|'usesCompression'>,
     documentRequest?: Types.Events.SyntheticNetworkRequest,
-                   checklist: Checklist<'noRedirects'|'serverResponseIsFast'|'usesCompression'>,
   },
 }>;
 

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

@@ -157,7 +157,61 @@ The result of the checks for this insight are:
     });
   });
 
+  describe('Document request latency', () => {
+    it('serializes the correct details', async function() {
+      const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'bad-document-request-latency.json.gz');
+      assert.isOk(insights);
+      const firstNav = getFirstOrError(parsedTrace.Meta.navigationsByNavigationId.values());
+      const insight = getInsightOrError('DocumentLatency', insights, firstNav);
+
+      const formatter = new PerformanceInsightFormatter(new ActiveInsight(insight, parsedTrace));
+      const output = formatter.formatInsight();
+
+      const expected = `*IMPORTANT*: all time units given to you are in milliseconds.
+## Insight title: Document request latency
+
+## Insight Description:
+This insight checks that the first request is responded to promptly. We use the following criteria to check this:
+1. Was the initial request redirected?
+2. Did the server respond in 600ms or less? We want developers to aim for as close to 100ms as possible, but our threshold for this insight is 600ms.
+3. Was there compression applied to the response to minimize the transfer size?
+
+## External resources:
+- https://web.dev/articles/optimize-ttfb
+
+## Insight details:
+The Largest Contentful Paint (LCP) time for this navigation was 3,604.15 ms.
+The LCP is text based and was not fetched from the network.
+
+The result of the checks for this insight are:
+- The request was not redirected: FAILED
+- Server responded quickly: FAILED
+- Compression was applied: FAILED`;
+
+      assert.strictEqual(output, expected);
+    });
+  });
+
   describe('Formatting TraceEvents', () => {
+    it('formats network requests that have redirects', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'bad-document-request-latency.json.gz');
+      const requestUrl = 'http://localhost:3000/redirect3';
+      const request = parsedTrace.NetworkRequests.byTime.find(r => r.args.data.url === requestUrl);
+      assert.isOk(request);
+      const output = TraceEventFormatter.networkRequest(request, parsedTrace, {verbose: true});
+      assert.include(output, `Redirects:
+#### Redirect 1: http://localhost:3000/
+- Start time: 3.04 ms
+- Duration: 512.02 ms
+#### Redirect 2: http://localhost:3000/redirect1
+- Start time: 515.06 ms
+- Duration: 505.67 ms
+#### Redirect 3: http://localhost:3000/redirect2
+- Start time: 1,020.73 ms
+- Duration: 507.09 ms
+`);
+    });
+
     it('formats network requests in verbose mode', async function() {
       const {parsedTrace} = await TraceLoader.traceEngine(this, 'lcp-images.json.gz');
       const requestUrl = 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,800';
@@ -175,6 +229,7 @@ Durations:
 - Main thread processing duration: 3.51 ms
 - Total duration: 13.93 ms
 Initiator: https://chromedevtools.github.io/performance-stories/lcp-large-image/index.html
+Redirects: no redirects
 Status code: 200
 MIME Type: text/css
 Priority: VeryHigh

front_end/panels/ai_assistance/data_formatters/PerformanceInsightFormatter.ts

@@ -1,6 +1,7 @@
 // Copyright 2025 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Trace from '../../../models/trace/trace.js';
 import type * as TimelineUtils from '../../timeline/utils/utils.js';
@@ -172,6 +173,31 @@ ${checklistBulletPoints.map(point => `- ${point.name}: ${point.passed ? 'PASSED'
 
 ${requestSummary.join('\n\n')}`;
     }
+
+    if (Trace.Insights.Models.DocumentLatency.isDocumentLatency(this.#insight)) {
+      if (!this.#insight.data) {
+        return '';
+      }
+      const {checklist} = this.#insight.data;
+      const checklistBulletPoints: Array<{name: string, passed: boolean}> = [];
+      checklistBulletPoints.push({
+        name: 'The request was not redirected',
+        passed: checklist.noRedirects.value,
+      });
+      checklistBulletPoints.push({
+        name: 'Server responded quickly',
+        passed: checklist.serverResponseIsFast.value,
+      });
+      checklistBulletPoints.push({
+        name: 'Compression was applied',
+        passed: checklist.usesCompression.value,
+      });
+      return `${this.#lcpMetricSharedContext()}
+
+The result of the checks for this insight are:
+${checklistBulletPoints.map(point => `- ${point.name}: ${point.passed ? 'PASSED' : 'FAILED'}`).join('\n')}`;
+    }
+
     return '';
   }
 
@@ -180,7 +206,7 @@ ${requestSummary.join('\n\n')}`;
       case 'CLSCulprits':
         return '';
       case 'DocumentLatency':
-        return '';
+        return '- https://web.dev/articles/optimize-ttfb';
       case 'DOMSize':
         return '';
       case 'DuplicateJavaScript':
@@ -218,7 +244,10 @@ ${requestSummary.join('\n\n')}`;
       case 'CLSCulprits':
         return '';
       case 'DocumentLatency':
-        return '';
+        return `This insight checks that the first request is responded to promptly. We use the following criteria to check this:
+1. Was the initial request redirected?
+2. Did the server respond in 600ms or less? We want developers to aim for as close to 100ms as possible, but our threshold for this insight is 600ms.
+3. Was there compression applied to the response to minimize the transfer size?`;
       case 'DOMSize':
         return '';
       case 'DuplicateJavaScript':
@@ -308,6 +337,13 @@ export class TraceEventFormatter {
       priorityLines.push(`Final priority: ${priority}`);
     }
 
+    const redirects = request.args.data.redirects.map((redirect, index) => {
+      const startTime = redirect.ts - baseTime;
+      return `#### Redirect ${index + 1}: ${redirect.url}
+- Start time: ${formatMicro(startTime)}
+- Duration: ${formatMicro(redirect.dur)}`;
+    });
+
     if (!options.verbose) {
       return `## Network request: ${url}
 - Start time: ${formatMicro(startTimesForLifecycle.start)}
@@ -325,6 +361,7 @@ Timings:
 Durations:
 - Main thread processing duration: ${formatMicro(mainThreadProcessingDuration)}
 - Total duration: ${formatMicro(request.dur)}${initiator ? `\nInitiator: ${initiator.args.data.url}` : ''}
+Redirects:${redirects.length ? '\n' + redirects.join('\n') : ' no redirects'}
 Status code: ${statusCode}
 MIME Type: ${mimeType}
 ${priorityLines.join('\n')}

front_end/panels/timeline/fixtures/traces/BUILD.gn

@@ -9,6 +9,7 @@ copy_to_gen("traces") {
     "about-blank-first.json.gz",
     "animation.json.gz",
     "async-js-calls.json.gz",
+    "bad-document-request-latency.json.gz",
     "basic-stack.json.gz",
     "basic.cpuprofile.gz",
     "basic.json.gz",