Use PerformanceTraceFormatter to give a summary of the trace.

Note: this will error until a chrome-devtools-frontend with this change
https://chromiumdash.appspot.com/commit/62e1652b2bf044ec53a2ec212cf53b1a62bc357e
is released on npm.

Bug: 441265851

Author: jackfranklin

package-lock.json

@@ -15,6 +15,7 @@
     "start": "npm run build && node build/src/index.js",
     "start-debug": "DEBUG=mcp:* DEBUG_COLORS=false npm run build && node build/src/index.js",
     "test": "npm run build && npx puppeteer browsers install chrome@latest && PUPPETEER_CHROME_VERSION=latest node --test-force-exit --test 'build/tests/**/*.test.js'",
+    "test:update-snapshots": "npm run build && npx puppeteer browsers install chrome@latest && PUPPETEER_CHROME_VERSION=latest node --test-force-exit --test --test-update-snapshots 'build/tests/**/*.test.js'",
     "test:only": "npm run build && npx puppeteer browsers install chrome@latest && PUPPETEER_CHROME_VERSION=latest node --test-force-exit --test --test-only 'build/tests/**/*.test.js'",
     "test:only:no-build": "npx puppeteer browsers install chrome@latest && PUPPETEER_CHROME_VERSION=latest node --test-force-exit --test --test-only 'build/tests/**/*.test.js'",
     "prepare": "node --experimental-strip-types scripts/prepare.ts"
@@ -47,7 +48,7 @@
     "@types/yargs": "^17.0.33",
     "@typescript-eslint/eslint-plugin": "^8.43.0",
     "@typescript-eslint/parser": "^8.43.0",
-    "chrome-devtools-frontend": "1.0.1513662",
+    "chrome-devtools-frontend": "1.0.1515446",
     "eslint": "^9.35.0",
     "globals": "^16.4.0",
     "gts": "^6.0.2",

package.json

@@ -68,15 +68,42 @@ function main(): void {
   const i18nDir = path.join(BUILD_DIR, devtoolsFrontEndCorePath, 'i18n');
   fs.mkdirSync(i18nDir, {recursive: true});
   const i18nFile = path.join(i18nDir, 'i18n.js');
-  const i18nContent = `export const i18n = {
-    registerUIStrings: () => {},
-    getLocalizedString: (_, str) => {
-      // So that the string passed in gets output verbatim.
-      return str;
-    },
-    lockedLazyString: () => {},
-    getLazilyComputedLocalizedString: () => {}
-  };`;
+  const i18nContent = `
+export const i18n = {
+  registerUIStrings: () => {},
+  getLocalizedString: (_, str) => {
+    // So that the string passed in gets output verbatim.
+    return str;
+  },
+  lockedLazyString: () => {},
+  getLazilyComputedLocalizedString: () => {},
+};
+
+// TODO(jacktfranklin): once the DocumentLatency insight does not depend on
+// this method, we can remove this stub.
+export const TimeUtilities = {
+  millisToString(x) {
+    const separator = '\xA0';
+    const formatter = new Intl.NumberFormat('en-US', {
+      style: 'unit',
+      unitDisplay: 'narrow',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 1,
+      unit: 'millisecond',
+    });
+
+    const parts = formatter.formatToParts(x);
+    for (const part of parts) {
+      if (part.type === 'literal') {
+        if (part.value === ' ') {
+          part.value = separator;
+        }
+      }
+    }
+
+    return parts.map(part => part.value).join('');
+  }
+};`;
   writeFile(i18nFile, i18nContent);
 
   // Create codemirror.next mock.
@@ -94,7 +121,10 @@ function main(): void {
   const rootDir = path.join(BUILD_DIR, devtoolsFrontEndCorePath, 'root');
   fs.mkdirSync(rootDir, {recursive: true});
   const runtimeFile = path.join(rootDir, 'Runtime.js');
-  const runtimeContent = 'export default {};';
+  const runtimeContent = `
+export function getChromeVersion() { return ''; };
+export const hostConfig = {};
+  `;
   writeFile(runtimeFile, runtimeContent);
 
   // Update protocol_client to remove:

scripts/post-build.ts

@@ -7,8 +7,7 @@
 import {PerformanceTraceFormatter} from '../../node_modules/chrome-devtools-frontend/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.js';
 import * as TraceEngine from '../../node_modules/chrome-devtools-frontend/front_end/models/trace/trace.js';
 import {logger} from '../logger.js';
-import {AgentFocus} from 'chrome-devtools-frontend/front_end/panels/timeline/utils/AIContext.js';
-import {EventsSerializer} from 'chrome-devtools-frontend/front_end/models/trace/EventsSerializer.js';
+import {AgentFocus} from '../../node_modules/chrome-devtools-frontend/front_end/models/ai_assistance/performance/AIContext.js';
 
 const engine = TraceEngine.TraceModel.Model.createWithAllHandlers();
 
@@ -65,7 +64,7 @@ export async function parseRawTraceBuffer(
 // This is a very temporary helper to output some text from the tool call to aid development.
 export function insightOutput(result: TraceResult): string {
   const focus = AgentFocus.full(result.parsedTrace);
-  const serializer = new EventsSerializer();
+  const serializer = new TraceEngine.EventsSerializer.EventsSerializer();
   const formatter = new PerformanceTraceFormatter(focus, serializer);
   const output = formatter.formatTraceSummary();
   return output;

src/trace-processing/parse.ts

@@ -112,7 +112,7 @@ describe('input', () => {
       });
     });
 
-    it.only('waits for stable DOM', async () => {
+    it('waits for stable DOM', async () => {
       server.addHtmlRoute(
         '/unstable',
         html`

tests/tools/input.test.ts

@@ -0,0 +1,43 @@
+exports[`Trace parsing > can format results of a trace 1`] = `
+URL: https://web.dev/
+Bounds: {min: 122410994891, max: 122416385853}
+CPU throttling: none
+Network throttling: none
+Metrics (lab / observed):
+  - LCP: 129 ms, event: (eventKey: r-6063, ts: 122411126100)
+  - LCP breakdown:
+    - TTFB: 7.9 ms, bounds: {min: 122410996889, max: 122411004828}
+    - Load delay: 33.2 ms, bounds: {min: 122411004828, max: 122411037986}
+    - Load duration: 14.7 ms, bounds: {min: 122411037986, max: 122411052690}
+    - Render delay: 73.4 ms, bounds: {min: 122411052690, max: 122411126100}
+  - CLS: 0.00
+Available insights:
+  - insight name: LCPBreakdown
+    description: Each [subpart has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
+    relevant trace bounds: {min: 122410996889, max: 122411126100}
+    example question: Help me optimize my LCP score
+    example question: Which LCP phase was most problematic?
+    example question: What can I do to reduce the LCP time for this page load?
+  - insight name: LCPDiscovery
+    description: Optimize LCP by making the LCP image [discoverable](https://web.dev/articles/optimize-lcp#1_eliminate_resource_load_delay) from the HTML immediately, and [avoiding lazy-loading](https://web.dev/articles/lcp-lazy-loading)
+    relevant trace bounds: {min: 122411004828, max: 122411055039}
+    example question: Suggest fixes to reduce my LCP
+    example question: What can I do to reduce my LCP discovery time?
+    example question: Why is LCP discovery time important?
+  - insight name: RenderBlocking
+    description: Requests are blocking the page's initial render, which may delay LCP. [Deferring or inlining](https://web.dev/learn/performance/understanding-the-critical-path#render-blocking_resources) can move these network requests out of the critical path.
+    relevant trace bounds: {min: 122411037528, max: 122411053852}
+    example question: Show me the most impactful render blocking requests that I should focus on
+    example question: How can I reduce the number of render blocking requests?
+  - insight name: DocumentLatency
+    description: Your first network request is the most important.  Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.
+    relevant trace bounds: {min: 122410998910, max: 122411043781}
+    estimated metric savings: FCP 0 ms, LCP 0 ms
+    estimated wasted bytes: 77.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: 122411037881, max: 122416229595}
+    example question: Which third parties are having the largest impact on my page performance?
+`;

tests/trace-processing/parse.test.js.snapshot

@@ -4,37 +4,40 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import {describe, it} from 'node:test';
-import assert from 'assert';
+import assert from 'node:assert';
 import {
   insightOutput,
   parseRawTraceBuffer,
 } from '../../src/trace-processing/parse.js';
 import {loadTraceAsBuffer} from './fixtures/load.js';
 
 describe('Trace parsing', async () => {
+  it.snapshot.setResolveSnapshotPath(testPath => {
+    // By default the snapshots go into the build directory, but we want them
+    // in the tests/ directory.
+    const correctPath = testPath?.replace('/build/tests', '/tests');
+    return correctPath + '.snapshot';
+  });
+
+  // The default serializer is JSON.stringify which outputs a very hard to read
+  // snapshot. So we override it to one that shows new lines literally rather
+  // than via `\n`.
+  it.snapshot.setDefaultSnapshotSerializers([String]);
+
   it('can parse a Uint8Array from Tracing.stop())', async () => {
     const rawData = loadTraceAsBuffer('basic-trace.json.gz');
     const result = await parseRawTraceBuffer(rawData);
     assert.ok(result?.parsedTrace);
     assert.ok(result?.insights);
   });
 
-  it.only('can format results of a trace', async () => {
+  it('can format results of a trace', async t => {
     const rawData = loadTraceAsBuffer('web-dev-with-commit.json.gz');
     const result = await parseRawTraceBuffer(rawData);
     assert.ok(result?.parsedTrace);
     assert.ok(result?.insights);
 
     const output = insightOutput(result);
-    assert.strictEqual(
-      output.includes(
-        'The Largest Contentful Paint (LCP) time for this navigation was 129.2 ms.',
-      ),
-      true,
-    );
-    assert.strictEqual(
-      output.includes('- fetchpriority=high should be applied: FAILED'),
-      true,
-    );
+    t.assert.snapshot(output);
   });
 });

tests/trace-processing/parse.test.ts

@@ -29,14 +29,21 @@
     "node_modules/chrome-devtools-frontend/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.ts",
     "node_modules/chrome-devtools-frontend/front_end/models/ai_assistance/data_formatters/NetworkRequestFormatter.ts",
     "node_modules/chrome-devtools-frontend/front_end/models/ai_assistance/data_formatters/UnitFormatters.ts",
+    "node_modules/chrome-devtools-frontend/front_end/models/ai_assistance/performance",
+    "node_modules/chrome-devtools-frontend/front_end/models/trace_source_maps_resolver",
+    "node_modules/chrome-devtools-frontend/front_end/models/emulation",
+    "node_modules/chrome-devtools-frontend/front_end/models/stack_trace",
+    "node_modules/chrome-devtools-frontend/front_end/models/bindings",
+    "node_modules/chrome-devtools-frontend/front_end/models/formatter",
+    "node_modules/chrome-devtools-frontend/front_end/models/geometry",
+    "node_modules/chrome-devtools-frontend/front_end/models/source_map_scopes",
+    "node_modules/chrome-devtools-frontend/front_end/models/workspace",
     "node_modules/chrome-devtools-frontend/front_end/core/common",
     "node_modules/chrome-devtools-frontend/front_end/core/sdk",
     "node_modules/chrome-devtools-frontend/front_end/core/protocol_client",
     "node_modules/chrome-devtools-frontend/front_end/core/host",
     "node_modules/chrome-devtools-frontend/front_end/core/platform",
     "node_modules/chrome-devtools-frontend/front_end/models/cpu_profile",
-    "node_modules/chrome-devtools-frontend/front_end/panels/timeline/utils",
-    "node_modules/chrome-devtools-frontend/front_end/ui/legacy/theme_support",
     "node_modules/chrome-devtools-frontend/front_end/generated",
     "node_modules/chrome-devtools-frontend/front_end/third_party/legacy-javascript",
     "node_modules/chrome-devtools-frontend/front_end/third_party/source-map-scopes-codec",