chrome-devtools-frontend 1.0.1538523 → 1.0.1539972

package/eslint.config.mjs

@@ -30,7 +30,7 @@ export default defineConfig([
     // All of these scripts are auto-generated so don't lint them.
     'front_end/generated/ARIAProperties.js',
     'front_end/generated/Deprecation.ts',
-    'front_end/generated/InspectorBackendCommands.js',
+    'front_end/generated/InspectorBackendCommands.ts',
     'front_end/generated/protocol-mapping.d.ts',
     'front_end/generated/protocol-proxy-api.d.ts',
     'front_end/generated/protocol.ts',

package/front_end/core/common/Debouncer.ts

@@ -6,10 +6,10 @@
  * Debounce utility function, ensures that the function passed in is only called once the function stops being called and the delay has expired.
  */
 export const debounce = function(func: (...args: any[]) => void, delay: number): (...args: any[]) => void {
-  let timer = 0;
+  let timer: ReturnType<typeof setTimeout>;
   const debounced = (...args: any[]): void => {
     clearTimeout(timer);
-    timer = window.setTimeout(() => func(...args), delay);
+    timer = setTimeout(() => func(...args), delay);
   };
   return debounced;
 };

package/front_end/core/common/Gzip.ts

@@ -54,7 +54,7 @@ async function gzipCodec(
     codecStream: CompressionStream|DecompressionStream): Promise<ArrayBuffer> {
   const readable = new ReadableStream({
     start(controller) {
-      controller.enqueue(buffer);
+      controller.enqueue(buffer instanceof ArrayBuffer ? new Uint8Array(buffer) : buffer);
       controller.close();
     }
   });

package/front_end/core/common/Throttler.ts

@@ -9,7 +9,7 @@ export class Throttler {
   #process: (() => (void|Promise<unknown>))|null;
   #lastCompleteTime: number;
   #scheduler = Promise.withResolvers<unknown>();
-  #processTimeout?: number;
+  #processTimeout?: ReturnType<typeof setTimeout>;
 
   constructor(timeout: number) {
     this.#timeout = timeout;
@@ -78,11 +78,11 @@ export class Throttler {
     clearTimeout(this.#processTimeout);
 
     const timeout = this.#asSoonAsPossible ? 0 : this.#timeout;
-    this.#processTimeout = window.setTimeout(this.#onTimeout.bind(this), timeout);
+    this.#processTimeout = setTimeout(this.#onTimeout.bind(this), timeout);
   }
 
   #getTime(): number {
-    return window.performance.now();
+    return performance.now();
   }
 }
 

package/front_end/core/host/GdpClient.ts

@@ -85,6 +85,7 @@ function normalizeBadgeName(name: string): string {
 }
 
 export const GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK = 'https://developers.google.com/profile/u/me';
+const ORIGIN_APPLICATION_NAME = 'APPLICATION_CHROME_DEVTOOLS';
 
 async function makeHttpRequest<R>(request: DispatchHttpRequestRequest): Promise<R> {
   if (!isGdpProfilesAvailable()) {
@@ -208,6 +209,9 @@ export class GdpClient {
         body: JSON.stringify({
           user,
           newsletter_email: emailPreference,
+          creation_origin: {
+            origin_application: ORIGIN_APPLICATION_NAME,
+          }
         }),
       });
       this.#clearCache();

package/front_end/core/protocol_client/CDPConnection.ts

@@ -4,26 +4,28 @@
 
 import type {ProtocolMapping} from '../../generated/protocol-mapping.js';
 
+export type Command = keyof ProtocolMapping.Commands;
 export type CommandParams<T extends keyof ProtocolMapping.Commands> = ProtocolMapping.Commands[T]['paramsType'][0];
 export type CommandResult<T extends keyof ProtocolMapping.Commands> = ProtocolMapping.Commands[T]['returnType'];
+export type Event = keyof ProtocolMapping.Events;
 export type EventParams<T extends keyof ProtocolMapping.Events> = ProtocolMapping.Events[T];
 
 export interface CDPBaseMessage {
   sessionId?: string;
 }
 
-export interface CDPCommandRequest<T extends keyof ProtocolMapping.Commands> extends CDPBaseMessage {
+export interface CDPCommandRequest<T extends Command> extends CDPBaseMessage {
   id: number;
   method: T;
   params: CommandParams<T>;
 }
 
-export interface CDPCommandResponse<T extends keyof ProtocolMapping.Commands> extends CDPBaseMessage {
+export interface CDPCommandResponse<T extends Command> extends CDPBaseMessage {
   id: number;
   result: CommandResult<T>;
 }
 
-export interface CDPEvent<T extends keyof ProtocolMapping.Events> extends CDPBaseMessage {
+export interface CDPEvent<T extends Event> extends CDPBaseMessage {
   method: T;
   params: EventParams<T>;
 }
@@ -31,7 +33,7 @@ export interface CDPEvent<T extends keyof ProtocolMapping.Events> extends CDPBas
 /**
  * Keep this in sync with https://source.chromium.org/chromium/chromium/src/+/main:third_party/inspector_protocol/crdtp/dispatch.h.
  */
-export const enum CDPErrorStatus {
+export enum CDPErrorStatus {
   PARSE_ERROR = -32700,
   INVALID_REQUEST = -32600,
   METHOD_NOT_FOUND = -32601,
@@ -39,6 +41,7 @@ export const enum CDPErrorStatus {
   INTERNAL_ERROR = -32603,
   SERVER_ERROR = -32000,
   SESSION_NOT_FOUND = SERVER_ERROR - 1,
+  DEVTOOLS_STUB_ERROR = -32015,
 }
 
 export interface CDPError {
@@ -52,8 +55,7 @@ export interface CDPErrorMessage extends CDPBaseMessage {
   error: CDPError;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type CDPMessage = CDPCommandRequest<any>|CDPCommandResponse<any>|CDPEvent<any>|CDPErrorMessage;
+export type CDPReceivableMessage = CDPCommandResponse<Command>|CDPEvent<Event>|CDPErrorMessage;
 
 /**
  * Allows the sending and receiving of CDP commands and the notification of CDP events to observers.
@@ -63,7 +65,7 @@ export type CDPMessage = CDPCommandRequest<any>|CDPCommandResponse<any>|CDPEvent
  * would conflict with any other shared traffic.
  */
 export interface CDPConnection {
-  send<T extends keyof ProtocolMapping.Commands>(method: T, params: CommandParams<T>, sessionId: string|undefined):
+  send<T extends Command>(method: T, params: CommandParams<T>, sessionId: string|undefined):
       Promise<{result: CommandResult<T>}|{error: CDPError}>;
 
   observe(observer: CDPConnectionObserver): void;
@@ -71,7 +73,7 @@ export interface CDPConnection {
 }
 
 export interface CDPConnectionObserver {
-  onEvent<T extends keyof ProtocolMapping.Events>(event: ProtocolMapping.Events[T]): void;
+  onEvent<T extends Event>(event: CDPEvent<T>): void;
   onDisconnect(reason: string): void;
 }
 
@@ -84,6 +86,6 @@ export interface DebuggableCDPConnection extends CDPConnection {
 }
 
 export interface RawMessageObserver {
-  onMessageReceived(message: CDPMessage): void;
-  onMessageSent(message: CDPMessage): void;
+  onMessageReceived(message: CDPReceivableMessage): void;
+  onMessageSent(message: CDPCommandRequest<Command>): void;
 }

package/front_end/core/protocol_client/DevToolsCDPConnection.ts

@@ -0,0 +1,181 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {
+  type CDPCommandRequest,
+  type CDPConnection,
+  type CDPConnectionObserver,
+  type CDPError,
+  CDPErrorStatus,
+  type CDPReceivableMessage,
+  type Command,
+  type CommandParams,
+  type CommandResult
+} from './CDPConnection.js';
+import type {ConnectionTransport} from './ConnectionTransport.js';
+import {InspectorBackend, type MessageError, type QualifiedName, test} from './InspectorBackend.js';
+
+interface CallbackWithDebugInfo {
+  resolve: (response: Awaited<ReturnType<CDPConnection['send']>>) => void;
+  method: string;
+  sessionId: string|undefined;
+}
+
+type Callback = (error: MessageError|null, arg1: Object|null) => void;
+
+const LongPollingMethods = new Set<string>(['CSS.takeComputedStyleUpdates']);
+
+export class DevToolsCDPConnection implements CDPConnection {
+  readonly #transport: ConnectionTransport;
+  #lastMessageId = 1;
+  #pendingResponsesCount = 0;
+  readonly #pendingLongPollingMessageIds = new Set<number>();
+  #pendingScripts: Array<() => void> = [];
+  readonly #callbacks = new Map<number, CallbackWithDebugInfo>();
+  readonly #observers = new Set<CDPConnectionObserver>();
+
+  constructor(transport: ConnectionTransport) {
+    this.#transport = transport;
+
+    test.deprecatedRunAfterPendingDispatches = this.deprecatedRunAfterPendingDispatches.bind(this);
+    test.sendRawMessage = this.sendRawMessageForTesting.bind(this);
+
+    this.#transport.setOnMessage(this.onMessage.bind(this));
+    this.#transport.setOnDisconnect(reason => {
+      this.#observers.forEach(observer => observer.onDisconnect(reason));
+    });
+  }
+
+  observe(observer: CDPConnectionObserver): void {
+    this.#observers.add(observer);
+  }
+
+  unobserve(observer: CDPConnectionObserver): void {
+    this.#observers.delete(observer);
+  }
+
+  send<T extends Command>(method: T, params: CommandParams<T>, sessionId: string|undefined):
+      Promise<{result: CommandResult<T>}|{error: CDPError}> {
+    const messageId = ++this.#lastMessageId;
+    const messageObject: Partial<CDPCommandRequest<T>> = {
+      id: messageId,
+      method,
+    };
+
+    if (params) {
+      messageObject.params = params;
+    }
+    if (sessionId) {
+      messageObject.sessionId = sessionId;
+    }
+
+    if (test.dumpProtocol) {
+      test.dumpProtocol('frontend: ' + JSON.stringify(messageObject));
+    }
+
+    if (test.onMessageSent) {
+      const domain = method.split('.')[0];
+      const paramsObject = JSON.parse(JSON.stringify(params || {}));
+      test.onMessageSent({domain, method, params: (paramsObject as Object), id: messageId, sessionId});
+    }
+
+    ++this.#pendingResponsesCount;
+    if (LongPollingMethods.has(method)) {
+      this.#pendingLongPollingMessageIds.add(messageId);
+    }
+
+    return new Promise(resolve => {
+      this.#callbacks.set(messageId, {resolve, method, sessionId});
+      this.#transport.sendRawMessage(JSON.stringify(messageObject));
+    });
+  }
+
+  resolvePendingCalls(sessionId: string): void {
+    for (const {resolve, method, sessionId: callbackSessionId} of this.#callbacks.values()) {
+      if (sessionId !== callbackSessionId) {
+        continue;
+      }
+      resolve({
+        error: {
+          message: `Session is unregistering, can\'t dispatch pending call to ${method}`,
+          code: CDPErrorStatus.SESSION_NOT_FOUND,
+        }
+      });
+    }
+  }
+
+  private sendRawMessageForTesting(method: QualifiedName, params: Object|null, callback: Callback|null, sessionId = ''):
+      void {
+    void this.send(method as Command, params as CommandParams<Command>, sessionId).then(response => {
+      if ('error' in response && response.error) {
+        callback?.(response.error, null);
+      } else if ('result' in response) {
+        callback?.(null, response.result as Object | null);
+      }
+    });
+  }
+
+  private onMessage(message: string|Object): void {
+    if (test.dumpProtocol) {
+      test.dumpProtocol('backend: ' + ((typeof message === 'string') ? message : JSON.stringify(message)));
+    }
+
+    if (test.onMessageReceived) {
+      const messageObjectCopy = JSON.parse((typeof message === 'string') ? message : JSON.stringify(message));
+      test.onMessageReceived(messageObjectCopy);
+    }
+
+    const messageObject = ((typeof message === 'string') ? JSON.parse(message) : message) as CDPReceivableMessage;
+
+    if ('id' in messageObject && messageObject.id !== undefined) {  // just a response for some request
+      const callback = this.#callbacks.get(messageObject.id);
+      this.#callbacks.delete(messageObject.id);
+      if (!callback) {
+        // Ignore messages with unknown IDs, we might see puppeteer proxied messages here.
+        return;
+      }
+
+      callback.resolve(messageObject);
+      --this.#pendingResponsesCount;
+      this.#pendingLongPollingMessageIds.delete(messageObject.id);
+
+      if (this.#pendingScripts.length && !this.hasOutstandingNonLongPollingRequests()) {
+        this.deprecatedRunAfterPendingDispatches();
+      }
+    } else if ('method' in messageObject) {
+      this.#observers.forEach(observer => observer.onEvent(messageObject));
+    } else {
+      InspectorBackend.reportProtocolError('Protocol Error: the message without method', messageObject);
+    }
+  }
+
+  private hasOutstandingNonLongPollingRequests(): boolean {
+    return this.#pendingResponsesCount - this.#pendingLongPollingMessageIds.size > 0;
+  }
+
+  private deprecatedRunAfterPendingDispatches(script?: (() => void)): void {
+    if (script) {
+      this.#pendingScripts.push(script);
+    }
+
+    // Execute all promises.
+    setTimeout(() => {
+      if (!this.hasOutstandingNonLongPollingRequests()) {
+        this.executeAfterPendingDispatches();
+      } else {
+        this.deprecatedRunAfterPendingDispatches();
+      }
+    }, 0);
+  }
+
+  private executeAfterPendingDispatches(): void {
+    if (!this.hasOutstandingNonLongPollingRequests()) {
+      const scripts = this.#pendingScripts;
+      this.#pendingScripts = [];
+      for (let id = 0; id < scripts.length; ++id) {
+        scripts[id]();
+      }
+    }
+  }
+}