Agentize "Modern HTTP" Insight

As the insight details, provide the list of requests using a non-modern HTTP.

Also editing the short description of the insight in the sidebar to be more descriptive.

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

Author: AlinaVarkki

front_end/models/ai_assistance/README.md

@@ -57,7 +57,13 @@ Once it's working, it's a good idea to manually experiment with the new Insight
 
 ## Debugging tips
 
-To test the AI code, you must be running DevTools in a branded Chrome (e.g. official Chrome Canary) and be signed in. So you cannot use the `npm start` script in this repo to run against Chrome for Testing. You'll want to run Canary but point at your local DevTools:
+To test the AI code, you must be running DevTools in a branded Chrome (e.g. official Chrome Canary) and be signed in. You can use the `npm start` with a canary flag in this repository to run against Chromium, or by running Chrome Canary and pointing it to your local DevTools.":
+
+```
+npm start -- --browser=canary
+```
+
+or
 
 ```
 /Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --custom-devtools-frontend=file://$(realpath out/Fast/gen/front_end)

front_end/models/ai_assistance/agents/PerformanceInsightsAgent.ts

@@ -194,7 +194,10 @@ export class InsightContext extends ConversationContext<TimelineUtils.InsightAIC
       case 'Viewport':
         return [{title: 'How do I make sure my page is optimized for mobile viewing?'}];
       case 'ModernHTTP':
-        return [{title: 'Is my site being served using the recommended HTTP best practices?'}];
+        return [
+          {title: 'Is my site being served using the recommended HTTP best practices?'},
+          {title: 'Which resources are not using a modern HTTP protocol?'},
+        ];
       case 'LegacyJavaScript':
         return [{title: 'Is my site polyfilling modern JavaScript features?'}];
       default:

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

@@ -319,6 +319,70 @@ The longest interaction on the page was a \`click\` which had a total duration o
     });
   });
 
+  describe('ModernHTTP', () => {
+    it('serializes the correct details when no requests are using legacy http', 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('ModernHTTP', insights, firstNav);
+      const formatter = new PerformanceInsightFormatter(new ActiveInsight(insight, parsedTrace));
+      const output = formatter.formatInsight();
+
+      const expected = `## Insight Title: Modern HTTP
+
+## Insight Summary:
+Modern HTTP protocols, such as HTTP/2, are more efficient than older versions like HTTP/1.1 because they allow for multiple requests and responses to be sent over a single network connection, significantly improving page load performance by reducing latency and overhead. This insight identifies requests that can be upgraded to a modern HTTP protocol.
+
+We apply a conservative approach when flagging HTTP/1.1 usage. This insight will only flag requests that meet all of the following criteria:
+1.  Were served over HTTP/1.1 or an earlier protocol.
+2.  Originate from an origin that serves at least 6 static asset requests, as the benefits of multiplexing are less significant with fewer requests.
+3.  Are not served from 'localhost' or coming from a third-party source, where developers have no control over the server's protocol.
+
+To pass this insight, ensure your server supports and prioritizes a modern HTTP protocol (like HTTP/2) for static assets, especially when serving a substantial number of them.
+
+## Detailed analysis:
+There are no requests that were served over a legacy HTTP protocol.
+
+## External resources:
+- https://developer.chrome.com/docs/lighthouse/best-practices/uses-http2`;
+      assert.strictEqual(output.trim(), expected.trim());
+    });
+
+    it('serializes the correct details when requests are using legacy http', async function() {
+      const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'http1.1.json.gz');
+      assert.isOk(insights);
+      const firstNav = getFirstOrError(parsedTrace.Meta.navigationsByNavigationId.values());
+      const insight = getInsightOrError('ModernHTTP', insights, firstNav);
+      const formatter = new PerformanceInsightFormatter(new ActiveInsight(insight, parsedTrace));
+      const output = formatter.formatInsight();
+
+      const requestDetails =
+          insight.http1Requests
+              .map(request => TraceEventFormatter.networkRequest(request, parsedTrace, {verbose: true}))
+              .join('\n');
+
+      const expected = `## Insight Title: Modern HTTP
+
+## Insight Summary:
+Modern HTTP protocols, such as HTTP/2, are more efficient than older versions like HTTP/1.1 because they allow for multiple requests and responses to be sent over a single network connection, significantly improving page load performance by reducing latency and overhead. This insight identifies requests that can be upgraded to a modern HTTP protocol.
+
+We apply a conservative approach when flagging HTTP/1.1 usage. This insight will only flag requests that meet all of the following criteria:
+1.  Were served over HTTP/1.1 or an earlier protocol.
+2.  Originate from an origin that serves at least 6 static asset requests, as the benefits of multiplexing are less significant with fewer requests.
+3.  Are not served from 'localhost' or coming from a third-party source, where developers have no control over the server's protocol.
+
+To pass this insight, ensure your server supports and prioritizes a modern HTTP protocol (like HTTP/2) for static assets, especially when serving a substantial number of them.
+
+## Detailed analysis:
+Here is a list of the network requests that were served over a legacy HTTP protocol:
+${requestDetails}
+
+## External resources:
+- https://developer.chrome.com/docs/lighthouse/best-practices/uses-http2`;
+      assert.strictEqual(output.trim(), expected.trim());
+    });
+  });
+
   describe('Formatting TraceEvents', () => {
     it('formats network requests that have redirects', async function() {
       const {parsedTrace} = await TraceLoader.traceEngine(this, 'bad-document-request-latency.json.gz');
@@ -359,6 +423,7 @@ Initiator: https://chromedevtools.github.io/performance-stories/lcp-large-image/
 Redirects: no redirects
 Status code: 200
 MIME Type: text/css
+Protocol: unknown
 Priority: VeryHigh
 Render blocking: Yes
 From a service worker: No

front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.ts

@@ -256,6 +256,18 @@ Layout shifts in this cluster:
 ${shiftsFormatted.join('\n')}`;
     }
 
+    if (Trace.Insights.Models.ModernHTTP.isModernHTTP(this.#insight)) {
+      const requestSummary = this.#insight.http1Requests.map(
+          request => TraceEventFormatter.networkRequest(request, this.#parsedTrace, {verbose: true}));
+
+      if (requestSummary.length === 0) {
+        return 'There are no requests that were served over a legacy HTTP protocol.';
+      }
+
+      return `Here is a list of the network requests that were served over a legacy HTTP protocol:
+${requestSummary.join('\n')}`;
+    }
+
     return '';
   }
 
@@ -301,7 +313,7 @@ ${shiftsFormatted.join('\n')}`;
       case 'Cache':
         return '';
       case 'ModernHTTP':
-        return '';
+        return '- https://developer.chrome.com/docs/lighthouse/best-practices/uses-http2';
       case 'LegacyJavaScript':
         return '';
     }
@@ -363,7 +375,14 @@ It is important that all of these checks pass to minimize the delay between the
       case 'Cache':
         return '';
       case 'ModernHTTP':
-        return '';
+        return `Modern HTTP protocols, such as HTTP/2, are more efficient than older versions like HTTP/1.1 because they allow for multiple requests and responses to be sent over a single network connection, significantly improving page load performance by reducing latency and overhead. This insight identifies requests that can be upgraded to a modern HTTP protocol.
+
+We apply a conservative approach when flagging HTTP/1.1 usage. This insight will only flag requests that meet all of the following criteria:
+1.  Were served over HTTP/1.1 or an earlier protocol.
+2.  Originate from an origin that serves at least 6 static asset requests, as the benefits of multiplexing are less significant with fewer requests.
+3.  Are not served from 'localhost' or coming from a third-party source, where developers have no control over the server's protocol.
+
+To pass this insight, ensure your server supports and prioritizes a modern HTTP protocol (like HTTP/2) for static assets, especially when serving a substantial number of them.`;
       case 'LegacyJavaScript':
         return '';
     }
@@ -425,8 +444,17 @@ ${rootCauseText}`;
   static networkRequest(
       request: Trace.Types.Events.SyntheticNetworkRequest, parsedTrace: Trace.Handlers.Types.ParsedTrace,
       options: NetworkRequestFormatOptions): string {
-    const {url, statusCode, initialPriority, priority, fromServiceWorker, mimeType, responseHeaders, syntheticData} =
-        request.args.data;
+    const {
+      url,
+      statusCode,
+      initialPriority,
+      priority,
+      fromServiceWorker,
+      mimeType,
+      responseHeaders,
+      syntheticData,
+      protocol
+    } = request.args.data;
 
     const titlePrefix = `## ${options.customTitle ?? 'Network request'}`;
 
@@ -491,6 +519,7 @@ Durations:
 Redirects:${redirects.length ? '\n' + redirects.join('\n') : ' no redirects'}
 Status code: ${statusCode}
 MIME Type: ${mimeType}
+Protocol: ${protocol}
 ${priorityLines.join('\n')}
 Render blocking: ${renderBlocking ? 'Yes' : 'No'}
 From a service worker: ${fromServiceWorker ? 'Yes' : 'No'}

front_end/models/trace/insights/ModernHTTP.test.ts

@@ -7,7 +7,7 @@ import {getFirstOrError, getInsightOrError, processTrace} from '../../../testing
 import * as Trace from '../trace.js';
 
 import * as ModernHTTP from './ModernHTTP.js';
-const {determineNonHttp2Resources} = ModernHTTP;
+const {determineHttp1Requests: determineNonHttp2Resources} = ModernHTTP;
 
 describeWithEnvironment('Cache', function() {
   describe('determineNonHttp2Resources', () => {
@@ -328,7 +328,7 @@ describeWithEnvironment('Cache', function() {
     const {data, insights} = await processTrace(this, 'http1.1.json.gz');
     const insight =
         getInsightOrError('ModernHTTP', insights, getFirstOrError(data.Meta.navigationsByNavigationId.values()));
-    assert.deepEqual(insight.requests.map(r => r.args.data.url), [
+    assert.deepEqual(insight.http1Requests.map(r => r.args.data.url), [
       'https://ads.jetpackdigital.com/sites/_uploads/1742278386bg_opt_640x350-avif.avif',
       'https://ads.jetpackdigital.com/sites/_uploads/1583540859Play.png',
       'https://ads.jetpackdigital.com/sites/_uploads/1583540859Muted.png',

front_end/models/trace/insights/ModernHTTP.ts

@@ -39,16 +39,21 @@ export const UIStrings = {
   /**
    * @description Text explaining that there were not requests that were slowed down by using HTTP/1.1. "HTTP/1.1" should not be translated.
    */
-  noOldProtocolRequests: 'No requests used HTTP/1.1'
+  noOldProtocolRequests:
+      'No requests used HTTP/1.1, or its current use of HTTP/1.1 does not present a significant optimization opportunity. HTTP/1.1 requests are only flagged if six or more static assets originate from the same origin, and they are not served from a local development environment or a third-party source.'
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/ModernHTTP.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export type UseModernHTTPInsightModel = InsightModel<typeof UIStrings, {
-  requests: Types.Events.SyntheticNetworkRequest[],
+  http1Requests: Types.Events.SyntheticNetworkRequest[],
 }>;
 
+export function isModernHTTP(model: InsightModel): model is UseModernHTTPInsightModel {
+  return model.insightKey === InsightKeys.MODERN_HTTP;
+}
+
 /**
  * Determines whether a network request is a "static resource" that would benefit from H2 multiplexing.
  * XHRs, tracking pixels, etc generally don't benefit as much because they aren't requested en-masse
@@ -99,10 +104,10 @@ function isMultiplexableStaticAsset(
  * [2] https://www.twilio.com/blog/2017/10/http2-issues.html
  * [3] https://www.cachefly.com/http-2-is-not-a-magic-bullet/
  */
-export function determineNonHttp2Resources(
+export function determineHttp1Requests(
     requests: Types.Events.SyntheticNetworkRequest[], entityMappings: Handlers.Helpers.EntityMappings,
     firstPartyEntity: Handlers.Helpers.Entity|null): Types.Events.SyntheticNetworkRequest[] {
-  const nonHttp2Resources: Types.Events.SyntheticNetworkRequest[] = [];
+  const http1Requests: Types.Events.SyntheticNetworkRequest[] = [];
 
   const groupedByOrigin = new Map<string, Types.Events.SyntheticNetworkRequest[]>();
   for (const record of requests) {
@@ -146,10 +151,10 @@ export function determineNonHttp2Resources(
     }
 
     seenURLs.add(request.args.data.url);
-    nonHttp2Resources.push(request);
+    http1Requests.push(request);
   }
 
-  return nonHttp2Resources;
+  return http1Requests;
 }
 
 /**
@@ -193,12 +198,12 @@ function computeWasteWithGraph(
 }
 
 function computeMetricSavings(
-    nonHttp2Requests: Types.Events.SyntheticNetworkRequest[], context: InsightSetContext): MetricSavings|undefined {
+    http1Requests: Types.Events.SyntheticNetworkRequest[], context: InsightSetContext): MetricSavings|undefined {
   if (!context.navigation || !context.lantern) {
     return;
   }
 
-  const urlsToChange = new Set(nonHttp2Requests.map(r => r.args.data.url));
+  const urlsToChange = new Set(http1Requests.map(r => r.args.data.url));
 
   const fcpGraph = context.lantern.metrics.firstContentfulPaint.optimisticGraph;
   const lcpGraph = context.lantern.metrics.largestContentfulPaint.optimisticGraph;
@@ -211,14 +216,14 @@ function computeMetricSavings(
 
 function finalize(partialModel: PartialInsightModel<UseModernHTTPInsightModel>): UseModernHTTPInsightModel {
   return {
-    insightKey: InsightKeys.IMAGE_DELIVERY,
+    insightKey: InsightKeys.MODERN_HTTP,
     strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
     category: InsightCategory.LCP,
-    state: partialModel.requests.length > 0 ? 'fail' : 'pass',
+    state: partialModel.http1Requests.length > 0 ? 'fail' : 'pass',
     ...partialModel,
-    relatedEvents: partialModel.requests,
+    relatedEvents: partialModel.http1Requests,
   };
 }
 
@@ -231,10 +236,10 @@ export function generateInsight(
   const entityMappings = parsedTrace.NetworkRequests.entityMappings;
   const firstPartyUrl = context.navigation?.args.data?.documentLoaderURL ?? parsedTrace.Meta.mainFrameURL;
   const firstPartyEntity = Handlers.Helpers.getEntityForUrl(firstPartyUrl, entityMappings.createdEntityCache);
-  const nonHttp2Requests = determineNonHttp2Resources(contextRequests, entityMappings, firstPartyEntity ?? null);
+  const http1Requests = determineHttp1Requests(contextRequests, entityMappings, firstPartyEntity ?? null);
 
   return finalize({
-    requests: nonHttp2Requests,
-    metricSavings: computeMetricSavings(nonHttp2Requests, context),
+    http1Requests,
+    metricSavings: computeMetricSavings(http1Requests, context),
   });
 }

front_end/models/trace/insights/types.ts

@@ -147,4 +147,5 @@ export const enum InsightKeys {
   RENDER_BLOCKING = 'RenderBlocking',
   SLOW_CSS_SELECTOR = 'SlowCSSSelector',
   VIEWPORT = 'Viewport',
+  MODERN_HTTP = 'ModernHTTP',
 }

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

@@ -21,6 +21,10 @@ export class ModernHTTP extends BaseInsightComponent<UseModernHTTPInsightModel>
   static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-modern-http`;
   override internalName = 'modern-http';
 
+  protected override hasAskAiSupport(): boolean {
+    return true;
+  }
+
   mapToRow(req: Trace.Types.Events.SyntheticNetworkRequest): TableDataRow {
     return {values: [eventRef(req), req.args.data.protocol], overlays: [this.#createOverlayForRequest(req)]};
   }
@@ -37,15 +41,15 @@ export class ModernHTTP extends BaseInsightComponent<UseModernHTTPInsightModel>
   }
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
-    return this.model?.requests.map(req => this.#createOverlayForRequest(req)) ?? [];
+    return this.model?.http1Requests.map(req => this.#createOverlayForRequest(req)) ?? [];
   }
 
   override renderContent(): Lit.LitTemplate {
     if (!this.model) {
       return Lit.nothing;
     }
 
-    const rows = createLimitedRows(this.model.requests, this);
+    const rows = createLimitedRows(this.model.http1Requests, this);
 
     if (!rows.length) {
       return html`<div class="insight-section">${i18nString(UIStrings.noOldProtocolRequests)}</div>`;

front_end/ui/visual_logging/KnownContextValues.ts

@@ -3691,6 +3691,7 @@ export const knownContextValues = new Set([
   'timeline.insight-ask-ai.lcp-by-phase',
   'timeline.insight-ask-ai.lcp-discovery',
   'timeline.insight-ask-ai.long-critical-network-tree',
+  'timeline.insight-ask-ai.modern-http',
   'timeline.insight-ask-ai.render-blocking-requests',
   'timeline.insight-ask-ai.slow-css-selector',
   'timeline.insight-ask-ai.third-parties',