chrome-devtools-frontend 1.0.1721762 → 1.0.1724140

package/docs/cookbook/dependencies.md

@@ -54,23 +54,67 @@ reviewers and typically avoids inflating the bundle size.
 
 For all third-party packages that are used either as part of the DevTools build
 process or to augment engineers workflows (for example linters), we add them to
-`scripts/deps/manage_node_deps.py`. This Python script has been approved by
-Chromium licensing to be used, on the basis that it enforces all packages have a
-license that is compatible with a set of pre-defined licensees.
-
-If you want to use a new package as tooling process in engineer workflows, you
-can add the package to the `package.json` and run `./dt install-deps` to
-check in the new contents.
+`package.json`; `scripts/deps/manage_node_deps.py` installs them. This Python
+script has been approved by Chromium licensing to be used, on the basis that it
+enforces all packages have a license that is compatible with a set of
+pre-defined licensees.
+
+`node_modules/` is not checked into git. `gclient sync` downloads it as one
+archive from `gs://chromium-nodejs/devtools-frontend/<sha256>`, pinned by the
+`node_modules` entry in `DEPS`, the same way Chromium's WebUI toolchain and
+chromium-bidi ship their npm dependencies. Local edits inside `node_modules/`
+only last until the next `gclient sync` that changes the pin.
+
+gclient decides whether to re-extract the archive from the stamp files it
+keeps in `node_modules/`, not from the extracted tree. Checking out a revision
+from before `node_modules/` left git restores the tracked tree over the
+extracted one and leaves the stamps alone; checking out a later revision again
+deletes the tracked files, and `gclient sync` would consider the now empty
+directory up to date. The `ensure_node_modules` hook
+(`scripts/deps/ensure_node_modules.py`) catches this and re-extracts the
+archive that gclient leaves in `node_modules/node_modules.tar.gz`; if that
+archive is missing, it removes the stamps and asks you to run `gclient sync`
+once more.
+
+To add or update a package:
+
+1. Change the version in `package.json`.
+2. Run `./dt install-deps`. It runs `npm install`, post-processes the tree,
+   checks licenses, applies `scripts/deps/npm_exclude.txt`, verifies that
+   every `node_modules/` path referenced from GN or Python build files still
+   exists and writes a deterministic `out/node_modules.tar.gz` (sorted
+   entries, zeroed timestamps and ownership: the same tree always has the
+   same sha256).
+3. Build and test against the new tree: `./dt build && ./dt test`.
+4. Run `./dt install-deps --upload`. It uploads the archive (a no-op if the
+   object exists) and updates `DEPS`. This needs write access to the bucket;
+   otherwise ask an infra owner (`config/owner/INFRA_OWNERS`) to run it on
+   your branch.
+5. Upload the CL: `package.json`, `package-lock.json` and the `DEPS` change.
+   Presubmit checks that these change together; add a
+   `Skip-Node-Modules-Check: <reason>` footer for intentional exceptions.
+
+Reviewers can rebuild the archive from the lockfile with `./dt install-deps`
+and compare the printed sha256 with `DEPS`.
 
 Only add new license types to `LICENSES` after you received approval from
 `opensource-licensing@google.com`. Their response time is typically within 24
 hours, so this typically is not a big hurdle.
 
 To avoid excessive package updates, it is typically easiest to update all
-packages in `manage_node_deps.py` once a month. Since NPM packages can have a
-lot of (shared) transitive dependencies, updating the packages on a specific day
-increases the chances that shared dependencies are deduplicated and thus result
-in smaller repository sizes.
+packages once a month. Since NPM packages can have a lot of (shared) transitive
+dependencies, updating the packages on a specific day increases the chances
+that shared dependencies are deduplicated and thus result in a smaller archive.
+
+#### The exclude list
+
+`scripts/deps/npm_exclude.txt` holds rsync filter rules that drop files the
+build and tests don't need (tests, docs, source maps, non-declaration
+TypeScript sources, dotfiles, ...) before the archive is built. Keep rules come
+first and the first matching rule wins. Stick to generic patterns: anything
+package-specific must be measured and verified with a full build and test run,
+because the reference check only knows about paths mentioned in GN and Python
+files, not about what Node resolves at runtime.
 
 > **WARNING:** Updating tools such as Rollup and TypeScript will cause all build
 > cache output to be purged, as they are part of all DevTools modules. Whenever

package/docs/get_the_code.md

@@ -334,6 +334,14 @@ Follow [instructions](https://www.chromium.org/developers/how-tos/get-the-code)
 to check out Chromium. The DevTools front-end code is located inside the
 `third_party/devtools-frontend/src/` folder (after running `gclient sync`).
 
+`node_modules/` is not part of the devtools-frontend git tree: `gclient sync`,
+run from `chromium/src`, downloads the archive pinned in
+`third_party/devtools-frontend/src/DEPS` and extracts it (see
+[dependencies.md](cookbook/dependencies.md)). Whenever you check out a
+different DevTools revision or branch in `third_party/devtools-frontend/src`,
+run `gclient sync` again before building; `git checkout` or `git rebase`
+alone do not update `node_modules/`.
+
 ### Build
 
 The [instructions](https://www.chromium.org/developers/how-tos/get-the-code) on
@@ -438,6 +446,13 @@ git rebase
 popd
 ```
 
+Finish with another `gclient sync` so that `node_modules/` (and the other
+dependencies pinned in the DevTools `DEPS`) match the DevTools revision you
+ended up on. If you switch back and forth across the revision that moved
+`node_modules/` out of git, `gclient sync` repairs the directory on its own
+(`ensure_node_modules` hook); in the worst case it asks you to run it once
+more.
+
 ## Integrated checkout
 
 **This solution is experimental, please report any trouble that you run into!**

package/front_end/core/i18n/collect-ui-strings.js

@@ -2,7 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {globSync} from 'node:fs';
+import {createHash} from 'node:crypto';
+import * as fs from 'node:fs';
+import {createRequire} from 'node:module';
 import * as path from 'node:path';
 import yargs from 'yargs';
 import {hideBin} from 'yargs/helpers';
@@ -58,32 +60,56 @@ if (inputDirectories.length === 0) {
   throw new Error('Provide at least one directory!');
 }
 
+const outputDirectory = yargsObject['output-directory'];
+
+// The parse results depend on collect-strings.js and the TypeScript version,
+// so a change to either one discards the cache.
+const cachePath = path.join(outputDirectory, 'collected-ui-strings.cache.json');
+const collectStringsSource = fs.readFileSync(new URL('../../../third_party/i18n/collect-strings.js', import.meta.url));
+const typescriptVersion = createRequire(import.meta.url)('typescript/package.json').version;
+const cacheVersion = createHash('sha256').update(collectStringsSource).update(typescriptVersion).digest('hex');
+/** @type {Record<string, {source: string, parsed: object}>} */
+let savedFiles = {};
+try {
+  const saved = JSON.parse(fs.readFileSync(cachePath, 'utf8'));
+  if (saved.version === cacheVersion) {
+    savedFiles = saved.files;
+  }
+} catch {
+  // Without a cache, all UIStrings get parsed again.
+}
+const cache = new Map(Object.entries(savedFiles));
+const initialCacheSize = cache.size;
+
 /** @type {Record<string, CtcMessage>} */
 let collectedStrings = {};
 /** @type {string[]} */
 const files = [];
 for (const directory of inputDirectories) {
-  collectedStrings = {
-    ...collectedStrings,
-    ...collectAllStringsInDir(directory),
-  };
-
-  const fs = globSync('**/*.{js,ts,gn}', {
+  const directoryFiles = fs.globSync('**/*.{js,ts,gn}', {
     cwd: directory,
     exclude: IGNORED_PATH_COMPONENTS,
   });
-  files.push(...fs.map(f => path.join(directory, f)));
+  collectedStrings = {
+    ...collectedStrings,
+    ...collectAllStringsInDir(
+        directory,
+        directoryFiles.filter(f => !f.endsWith('.gn')),
+        cache,
+        ),
+  };
+  files.push(...directoryFiles.map(f => path.join(directory, f)));
 }
 
-const outputDirectory = yargsObject['output-directory'];
-await convertCtcToLhLAndSave(outputDirectory, 'en-US', collectedStrings);
+const tasks = [convertCtcToLhLAndSave(outputDirectory, 'en-US', collectedStrings)];
 if (yargsObject['include-en-xl']) {
-  await convertCtcToLhLAndSave(
+  tasks.push(convertCtcToLhLAndSave(
       outputDirectory,
       'en-XL',
       createPsuedoLocaleStrings(collectedStrings),
-  );
+      ));
 }
+await Promise.all(tasks);
 
 // Write the depfile. This is necessary to properly rebuild en-US.json/en-XL.json
 // when any of the input TS files change. We also re-build when any GN file changes,
@@ -93,3 +119,23 @@ ${path.join(outputDirectory, 'en-US.json')}: ${files.join(' ')}
 `;
 
 await writeIfChanged(path.join(outputDirectory, 'collected-ui-strings.d'), depfile);
+
+// Drop the entries of deleted files, and save the cache only if it changed.
+let cacheChanged = false;
+await Promise.all(
+    Array.from(cache.entries()).map(async ([file, entry]) => {
+      if (savedFiles[file] !== entry) {
+        cacheChanged = true;
+      }
+      try {
+        await fs.promises.access(file);
+      } catch {
+        cache.delete(file);
+        cacheChanged = true;
+      }
+    }),
+);
+if (cacheChanged || cache.size !== initialCacheSize) {
+  const serialized = JSON.stringify({version: cacheVersion, files: Object.fromEntries(cache)});
+  await writeIfChanged(cachePath, serialized);
+}

package/front_end/core/sdk/WebAuthnModel.ts

@@ -22,6 +22,13 @@ export interface EventTypes {
   [Events.CREDENTIAL_UPDATED]: Protocol.WebAuthn.CredentialUpdatedEvent;
 }
 
+function throwIfError(response: Protocol.ProtocolResponseWithError): void {
+  const error = response.getError();
+  if (error) {
+    throw new Error(error);
+  }
+}
+
 export class WebAuthnModel extends SDKModel<EventTypes> {
   readonly #agent: ProtocolProxyApi.WebAuthnApi;
   constructor(target: Target) {
@@ -30,44 +37,44 @@ export class WebAuthnModel extends SDKModel<EventTypes> {
     target.registerWebAuthnDispatcher(new WebAuthnDispatcher(this));
   }
 
-  setVirtualAuthEnvEnabled(enable: boolean, enableUI = true): Promise<Object> {
-    if (enable) {
-      return this.#agent.invoke_enable({enableUI});
-    }
-    return this.#agent.invoke_disable();
+  async setVirtualAuthEnvEnabled(enable: boolean, enableUI = true): Promise<void> {
+    const response = enable ? await this.#agent.invoke_enable({enableUI}) : await this.#agent.invoke_disable();
+    throwIfError(response);
   }
 
   async addAuthenticator(options: Protocol.WebAuthn.VirtualAuthenticatorOptions):
       Promise<Protocol.WebAuthn.AuthenticatorId> {
     const response = await this.#agent.invoke_addVirtualAuthenticator({options});
+    throwIfError(response);
     return response.authenticatorId;
   }
 
   async removeAuthenticator(authenticatorId: Protocol.WebAuthn.AuthenticatorId): Promise<void> {
-    await this.#agent.invoke_removeVirtualAuthenticator({authenticatorId});
+    throwIfError(await this.#agent.invoke_removeVirtualAuthenticator({authenticatorId}));
   }
 
   async setAutomaticPresenceSimulation(authenticatorId: Protocol.WebAuthn.AuthenticatorId, enabled: boolean):
       Promise<void> {
-    await this.#agent.invoke_setAutomaticPresenceSimulation({authenticatorId, enabled});
+    throwIfError(await this.#agent.invoke_setAutomaticPresenceSimulation({authenticatorId, enabled}));
   }
 
   async setUserVerified(authenticatorId: Protocol.WebAuthn.AuthenticatorId, isUserVerified: boolean): Promise<void> {
-    await this.#agent.invoke_setUserVerified({authenticatorId, isUserVerified});
+    throwIfError(await this.#agent.invoke_setUserVerified({authenticatorId, isUserVerified}));
   }
 
   async addCredential(authenticatorId: Protocol.WebAuthn.AuthenticatorId,
                       credential: Protocol.WebAuthn.Credential): Promise<void> {
-    await this.#agent.invoke_addCredential({authenticatorId, credential});
+    throwIfError(await this.#agent.invoke_addCredential({authenticatorId, credential}));
   }
 
   async getCredentials(authenticatorId: Protocol.WebAuthn.AuthenticatorId): Promise<Protocol.WebAuthn.Credential[]> {
     const response = await this.#agent.invoke_getCredentials({authenticatorId});
+    throwIfError(response);
     return response.credentials;
   }
 
   async removeCredential(authenticatorId: Protocol.WebAuthn.AuthenticatorId, credentialId: string): Promise<void> {
-    await this.#agent.invoke_removeCredential({authenticatorId, credentialId});
+    throwIfError(await this.#agent.invoke_removeCredential({authenticatorId, credentialId}));
   }
 
   credentialAdded(params: Protocol.WebAuthn.CredentialAddedEvent): void {

package/front_end/generated/InspectorBackendCommands.ts

@@ -867,8 +867,8 @@ inspectorBackend.registerEvent("Network.directTCPSocketAborted", ["identifier",
 inspectorBackend.registerEvent("Network.directTCPSocketClosed", ["identifier", "timestamp"]);
 inspectorBackend.registerEvent("Network.directTCPSocketChunkSent", ["identifier", "data", "timestamp"]);
 inspectorBackend.registerEvent("Network.directTCPSocketChunkReceived", ["identifier", "data", "timestamp"]);
-inspectorBackend.registerEvent("Network.directUDPSocketJoinedMulticastGroup", ["identifier", "IPAddress"]);
-inspectorBackend.registerEvent("Network.directUDPSocketLeftMulticastGroup", ["identifier", "IPAddress"]);
+inspectorBackend.registerEvent("Network.directUDPSocketJoinedMulticastGroup", ["identifier", "IPAddress", "sourceAddress"]);
+inspectorBackend.registerEvent("Network.directUDPSocketLeftMulticastGroup", ["identifier", "IPAddress", "sourceAddress"]);
 inspectorBackend.registerEvent("Network.directUDPSocketCreated", ["identifier", "options", "timestamp", "initiator"]);
 inspectorBackend.registerEvent("Network.directUDPSocketOpened", ["identifier", "localAddr", "localPort", "timestamp", "remoteAddr", "remotePort"]);
 inspectorBackend.registerEvent("Network.directUDPSocketAborted", ["identifier", "errorMessage", "timestamp"]);

package/front_end/generated/protocol.ts

@@ -13395,12 +13395,28 @@ export namespace Network {
 
   export interface DirectUDPSocketJoinedMulticastGroupEvent {
     identifier: RequestId;
+    /**
+     * Multicast group address.
+     */
     IPAddress: string;
+    /**
+     * Source address of a source-specific multicast (SSM) membership. Absent
+     * for any-source multicast (ASM) memberships.
+     */
+    sourceAddress?: string;
   }
 
   export interface DirectUDPSocketLeftMulticastGroupEvent {
     identifier: RequestId;
+    /**
+     * Multicast group address.
+     */
     IPAddress: string;
+    /**
+     * Source address of a source-specific multicast (SSM) membership. Absent
+     * for any-source multicast (ASM) memberships.
+     */
+    sourceAddress?: string;
   }
 
   /**

package/front_end/models/comment_manager/CD4ABridge.ts

@@ -113,6 +113,10 @@ export class CD4ABridge extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
       details.push(`- Editor: ${editorInfo}`);
     }
 
+    for (const line of thread.anchor.agentContext ?? []) {
+      details.push(`- ${line}`);
+    }
+
     if (details.length === 0) {
       return rawText;
     }

package/front_end/models/comment_manager/CommentThread.ts

@@ -51,6 +51,22 @@ export interface CommentAnchorSignature {
   editor?: EditorAnchorSignature;
   /** Optional timeline flamechart anchor coordinates for Performance panel trace entries */
   timeline?: TimelineAnchorSignature;
+  /**
+   * Optional formatted lines that give the AI agent context about the
+   * anchored target beyond the VE path and text signature, for example the
+   * timing and warnings of a Performance panel trace entry. CD4ABridge
+   * appends each line to the comment text that it sends to the agent.
+   *
+   * These lines are only context for the agent. They are not used to
+   * re-match the anchor to its target; the other fields of this signature
+   * do that.
+   *
+   * Currently only the Performance panel sets this field. Before adding
+   * context here, consider whether it belongs in a new field on this
+   * signature instead. This field is only for text that is already
+   * formatted for the agent, not for data that other code needs to read.
+   */
+  agentContext?: string[];
 }
 
 export interface Comment {

package/front_end/models/trace/handlers/NetworkRequestsHandler.ts

@@ -283,14 +283,21 @@ export async function finalize(): Promise<void> {
      */
     // @ts-expect-error
     const isLightrider = globalThis.isLightrider;
-    if (isLightrider && request.resourceFinish && request.receiveResponse?.args.data.headers) {
-      const lrSizeHeader = request.receiveResponse.args.data.headers.find(h => h.name === 'X-TotalFetchedSize');
-      if (lrSizeHeader) {
-        const size = parseFloat(lrSizeHeader.value);
-        if (!isNaN(size)) {
-          request.resourceFinish.args.data.encodedDataLength = size;
+    if (isLightrider && request.receiveResponse?.args.data.headers) {
+      if (request.resourceFinish) {
+        const lrSizeHeader = request.receiveResponse.args.data.headers.find(h => h.name === 'X-TotalFetchedSize');
+        if (lrSizeHeader) {
+          const size = parseFloat(lrSizeHeader.value);
+          if (!isNaN(size)) {
+            request.resourceFinish.args.data.encodedDataLength = size;
+          }
         }
       }
+
+      const isH2 = request.receiveResponse.args.data.headers.some(h => h.name === 'X-ProtocolIsH2');
+      if (isH2) {
+        request.receiveResponse.args.data.protocol = 'h2';
+      }
     }
 
     // If a ResourceFinish event with an encoded data length is received,

package/front_end/panels/accessibility/AccessibilityAnnouncementRecordingView.ts

@@ -89,11 +89,86 @@ const UIStrings = {
    * @description Fallback reason shown when an unknown error occurs while blocking recording.
    */
   unknownError: 'Unknown error',
+  /**
+   * @description Accessible label for the grabber handle used to vertically resize the announcements pane.
+   */
+  resizeAnnouncementsPane: 'Resize announcements pane',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/accessibility/AccessibilityAnnouncementRecordingView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export const BINDING_NAME = '__announcementsRecorderBinding';
+const MIN_MAIN_PANE_HEIGHT = 150;
+const KEYBOARD_RESIZE_STEP = 10;
+let isDragging = false;
+let resizeStartY = 0;
+let resizeStartHeight = MIN_MAIN_PANE_HEIGHT;
+
+function onResizerPointerDown(event: PointerEvent): void {
+  if (event.button !== 0) {
+    return;
+  }
+  const resizerEl = event.currentTarget as HTMLElement | null;
+  const mainPane = resizerEl?.parentElement?.querySelector<HTMLElement>('.announcements-main-pane');
+  if (!resizerEl || !mainPane) {
+    return;
+  }
+  isDragging = true;
+  resizeStartY = event.clientY;
+  resizeStartHeight = mainPane.getBoundingClientRect().height;
+  try {
+    resizerEl.setPointerCapture(event.pointerId);
+  } catch {
+    // Pointer capture may fail on synthetic events in unit tests.
+  }
+  event.preventDefault();
+}
+
+function onResizerPointerMove(event: PointerEvent): void {
+  const resizerEl = event.currentTarget as HTMLElement | null;
+  if (!resizerEl || !isDragging) {
+    return;
+  }
+  const mainPane = resizerEl.parentElement?.querySelector<HTMLElement>('.announcements-main-pane');
+  if (!mainPane) {
+    return;
+  }
+  const delta = event.clientY - resizeStartY;
+  const newHeight = Math.max(MIN_MAIN_PANE_HEIGHT, resizeStartHeight + delta);
+  mainPane.style.height = `${newHeight}px`;
+  mainPane.style.flex = 'none';
+}
+
+function onResizerPointerUp(event: PointerEvent): void {
+  isDragging = false;
+  const resizerEl = event.currentTarget as HTMLElement | null;
+  if (resizerEl) {
+    try {
+      if (resizerEl.hasPointerCapture(event.pointerId)) {
+        resizerEl.releasePointerCapture(event.pointerId);
+      }
+    } catch {
+      // Ignored for synthetic events in unit tests.
+    }
+  }
+}
+
+function onResizerKeyDown(event: KeyboardEvent): void {
+  if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+    return;
+  }
+  const resizerEl = event.currentTarget as HTMLElement | null;
+  const mainPane = resizerEl?.parentElement?.querySelector<HTMLElement>('.announcements-main-pane');
+  if (!mainPane) {
+    return;
+  }
+  event.preventDefault();
+  const delta = event.key === 'ArrowDown' ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP;
+  const currentHeight = mainPane.getBoundingClientRect().height;
+  const newHeight = Math.max(MIN_MAIN_PANE_HEIGHT, currentHeight + delta);
+  mainPane.style.height = `${newHeight}px`;
+  mainPane.style.flex = 'none';
+}
 
 export enum AnnouncementApi {
   ARIA_LIVE = 'aria-live',
@@ -218,6 +293,23 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           @reveal-in-a11y-tree=${(e: CustomEvent<A11yAnnouncement>) => input.onRevealInA11yTree(e.detail)}>
         </devtools-widget>
       </div>
+      <div
+        class="announcements-resizer"
+        role="separator"
+        aria-orientation="horizontal"
+        aria-label=${i18nString(UIStrings.resizeAnnouncementsPane)}
+        title=${i18nString(UIStrings.resizeAnnouncementsPane)}
+        tabindex="0"
+        jslog=${VisualLogging.resizer('accessibility-announcements.resizer').track({
+          drag: true,
+          keydown: 'ArrowUp|ArrowDown',
+        })}
+        @pointerdown=${onResizerPointerDown}
+        @pointermove=${onResizerPointerMove}
+        @pointerup=${onResizerPointerUp}
+        @lostpointercapture=${onResizerPointerUp}
+        @keydown=${onResizerKeyDown}>
+      </div>
     </div>`,
     target);
   // clang-format on

package/front_end/panels/accessibility/accessibilityAnnouncementRecordingListView.css

@@ -10,7 +10,7 @@
   flex-direction: column;
   flex: auto;
   height: 100%;
-  min-height: 0;
+  min-height: 150px;
   overflow: hidden;
 }
 
@@ -21,6 +21,7 @@
     flex-direction: column;
     flex: auto;
     height: 100%;
+    min-height: 150px;
     overflow: hidden;
   }
 
@@ -28,6 +29,7 @@
     font-family: inherit;
     flex: auto;
     height: 100%;
+    min-height: 150px;
     border: none;
   }
 }

package/front_end/panels/accessibility/accessibilityAnnouncementRecordingView.css

@@ -20,6 +20,7 @@
     flex: auto;
     height: 100%;
     overflow: hidden;
+    position: relative;
   }
 
   .announcements-toolbar-container {
@@ -79,7 +80,17 @@
     display: flex;
     flex-direction: column;
     flex: auto;
-    min-height: 0;
+    min-height: 150px;
     overflow: hidden;
   }
+
+  .announcements-resizer {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: var(--sys-size-4);
+    z-index: 4000;
+    cursor: ns-resize;
+  }
 }