chore(deps-dev): bump chrome-devtools-frontend from 1.0.1524741 to 1.0.1531367 in the chrome-devtools-frontend group

package.json

@@ -51,7 +51,7 @@
     "@types/yargs": "^17.0.33",
     "@typescript-eslint/eslint-plugin": "^8.43.0",
     "@typescript-eslint/parser": "^8.43.0",
-    "chrome-devtools-frontend": "1.0.1524741",
+    "chrome-devtools-frontend": "1.0.1532884",
     "core-js": "3.46.0",
     "debug": "4.4.3",
     "eslint": "^9.35.0",

scripts/post-build.ts

@@ -9,6 +9,8 @@ import * as path from 'node:path';
 
 import tsConfig from '../tsconfig.json' with {type: 'json'};
 
+import {sed} from './sed.ts';
+
 const BUILD_DIR = path.join(process.cwd(), 'build');
 
 /**
@@ -20,22 +22,6 @@ function writeFile(filePath: string, content: string): void {
   fs.writeFileSync(filePath, content, 'utf-8');
 }
 
-/**
- * Replaces content in a file.
- * @param filePath The path to the file.
- * @param find The regex to find.
- * @param replace The string to replace with.
- */
-function sed(filePath: string, find: RegExp, replace: string): void {
-  if (!fs.existsSync(filePath)) {
-    console.warn(`File not found for sed operation: ${filePath}`);
-    return;
-  }
-  const content = fs.readFileSync(filePath, 'utf-8');
-  const newContent = content.replace(find, replace);
-  fs.writeFileSync(filePath, newContent, 'utf-8');
-}
-
 /**
  * Ensures that licenses for third party files we use gets copied into the build/ dir.
  */

scripts/prepare.ts

@@ -7,6 +7,8 @@
 import {rm} from 'node:fs/promises';
 import {resolve} from 'node:path';
 
+import {sed} from './sed.ts';
+
 const projectRoot = process.cwd();
 
 const filesToRemove = [
@@ -28,6 +30,28 @@ async function main() {
       process.exit(1);
     }
   }
+  // TODO: remove once https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7072054 is available.
+  sed(
+    'node_modules/chrome-devtools-frontend/front_end/core/sdk/NetworkManager.ts',
+    `declare global {
+  // TS typedefs are not up to date
+  interface URLPattern {
+    hash: string;
+    hostname: string;
+    password: string;
+    pathname: string;
+    port: string;
+    protocol: string;
+    search: string;
+    username: string;
+    hasRegExpGroups: boolean;
+    test(url: string): boolean;
+  }
+  /* eslint-disable-next-line @typescript-eslint/naming-convention */
+  var URLPattern: {prototype: URLPattern, new (input: string): URLPattern};
+}`,
+    '',
+  );
   console.log('Clean up of chrome-devtools-frontend complete.');
 }
 

scripts/sed.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as fs from 'node:fs';
+
+/**
+ * Replaces content in a file.
+ * @param filePath The path to the file.
+ * @param find The regex to find.
+ * @param replace The string to replace with.
+ */
+export function sed(
+  filePath: string,
+  find: RegExp | string,
+  replace: string,
+): void {
+  if (!fs.existsSync(filePath)) {
+    console.warn(`File not found for sed operation: ${filePath}`);
+    return;
+  }
+  const content = fs.readFileSync(filePath, 'utf-8');
+  const newContent = content.replace(find, replace);
+  fs.writeFileSync(filePath, newContent, 'utf-8');
+}

src/DevToolsConnectionAdapter.ts

@@ -4,14 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {Connection} from '../node_modules/chrome-devtools-frontend/front_end/core/protocol_client/InspectorBackend.js';
+import {ConnectionTransport as DevToolsConnectionTransport} from '../node_modules/chrome-devtools-frontend/front_end/core/protocol_client/ConnectionTransport.js';
 
 import {type ConnectionTransport} from './third_party/index.js';
 
 /**
  * Allows a puppeteer {@link ConnectionTransport} to act like a DevTools {@link Connection}.
  */
-export class DevToolsConnectionAdapter extends Connection {
+export class DevToolsConnectionAdapter extends DevToolsConnectionTransport {
   #transport: ConnectionTransport | null;
   #onDisconnect: ((arg0: string) => void) | null = null;
 

tests/tools/performance.test.js.snapshot

@@ -38,6 +38,7 @@ We can break this time down into the 4 phases that combine to make the LCP time:
 ## Estimated savings: none
 
 ## External resources:
+- https://developer.chrome.com/docs/performance/insights/lcp-breakdown
 - https://web.dev/articles/lcp
 - https://web.dev/articles/optimize-lcp
 `;
@@ -66,31 +67,31 @@ Metrics (lab / observed):
 Metrics (field / real users): n/a – no data for this page in CrUX
 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.
+    description: Each [subpart has specific improvement strategies](https://developer.chrome.com/docs/performance/insights/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)
+    description: [Optimize LCP](https://developer.chrome.com/docs/performance/insights/lcp-discovery) by making the LCP image discoverable from the HTML immediately, and avoiding 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.
+    description: Requests are blocking the page's initial render, which may delay LCP. [Deferring or inlining](https://developer.chrome.com/docs/performance/insights/render-blocking) 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.
+    description: Your first network request is the most important. [Reduce its latency](https://developer.chrome.com/docs/performance/insights/document-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.
+    description: 3rd party code can significantly impact load performance. [Reduce and defer loading of 3rd party code](https://developer.chrome.com/docs/performance/insights/third-parties) 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

@@ -15,31 +15,31 @@ Metrics (lab / observed):
 Metrics (field / real users): n/a – no data for this page in CrUX
 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.
+    description: Each [subpart has specific improvement strategies](https://developer.chrome.com/docs/performance/insights/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)
+    description: [Optimize LCP](https://developer.chrome.com/docs/performance/insights/lcp-discovery) by making the LCP image discoverable from the HTML immediately, and avoiding 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.
+    description: Requests are blocking the page's initial render, which may delay LCP. [Deferring or inlining](https://developer.chrome.com/docs/performance/insights/render-blocking) 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.
+    description: Your first network request is the most important. [Reduce its latency](https://developer.chrome.com/docs/performance/insights/document-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.
+    description: 3rd party code can significantly impact load performance. [Reduce and defer loading of 3rd party code](https://developer.chrome.com/docs/performance/insights/third-parties) 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?