chrome-devtools-frontend 1.0.1538523 → 1.0.1539972

package/front_end/third_party/puppeteer/package/src/cdp/BrowserConnector.ts

@@ -7,6 +7,7 @@
 import type {ConnectionTransport} from '../common/ConnectionTransport.js';
 import type {ConnectOptions} from '../common/ConnectOptions.js';
 import {debugError, DEFAULT_VIEWPORT} from '../common/util.js';
+import {createIncrementalIdGenerator} from '../util/incremental-id-generator.js';
 
 import {CdpBrowser} from './Browser.js';
 import {Connection} from './Connection.js';
@@ -32,6 +33,7 @@ export async function _connectToCdpBrowser(
     slowMo = 0,
     protocolTimeout,
     handleDevToolsAsPage,
+    idGenerator = createIncrementalIdGenerator(),
   } = options;
 
   const connection = new Connection(
@@ -39,6 +41,8 @@ export async function _connectToCdpBrowser(
     connectionTransport,
     slowMo,
     protocolTimeout,
+    /* rawErrors */ false,
+    idGenerator,
   );
 
   const {browserContextIds} = await connection.send(

package/front_end/third_party/puppeteer/package/src/cdp/BrowserContext.ts

@@ -45,13 +45,13 @@ export class CdpBrowserContext extends BrowserContext {
     });
   }
 
-  override async pages(): Promise<Page[]> {
+  override async pages(includeAll = false): Promise<Page[]> {
     const pages = await Promise.all(
       this.targets()
         .filter(target => {
           return (
             target.type() === 'page' ||
-            (target.type() === 'other' &&
+            ((target.type() === 'other' || includeAll) &&
               this.#browser._getIsPageTargetCallback()?.(target))
           );
         })

package/front_end/third_party/puppeteer/package/src/cdp/CdpSession.ts

@@ -27,7 +27,7 @@ import type {CdpTarget} from './Target.js';
 export class CdpCDPSession extends CDPSession {
   #sessionId: string;
   #targetType: string;
-  #callbacks = new CallbackRegistry();
+  #callbacks: CallbackRegistry;
   #connection: Connection;
   #parentSessionId?: string;
   #target?: CdpTarget;
@@ -46,6 +46,7 @@ export class CdpCDPSession extends CDPSession {
     super();
     this.#connection = connection;
     this.#targetType = targetType;
+    this.#callbacks = new CallbackRegistry(connection._idGenerator);
     this.#sessionId = sessionId;
     this.#parentSessionId = parentSessionId;
     this.#rawErrors = rawErrors;

package/front_end/third_party/puppeteer/package/src/cdp/Connection.ts

@@ -19,6 +19,10 @@ import {debug} from '../common/Debug.js';
 import {ConnectionClosedError, TargetCloseError} from '../common/Errors.js';
 import {EventEmitter} from '../common/EventEmitter.js';
 import {createProtocolErrorMessage} from '../util/ErrorLike.js';
+import {
+  createIncrementalIdGenerator,
+  type GetIdFn,
+} from '../util/incremental-id-generator.js';
 
 import {CdpCDPSession} from './CdpSession.js';
 
@@ -38,6 +42,7 @@ export class Connection extends EventEmitter<CDPSessionEvents> {
   #manuallyAttached = new Set<string>();
   #callbacks: CallbackRegistry;
   #rawErrors = false;
+  #idGenerator: GetIdFn;
 
   constructor(
     url: string,
@@ -45,10 +50,12 @@ export class Connection extends EventEmitter<CDPSessionEvents> {
     delay = 0,
     timeout?: number,
     rawErrors = false,
+    idGenerator: () => number = createIncrementalIdGenerator(),
   ) {
     super();
     this.#rawErrors = rawErrors;
-    this.#callbacks = new CallbackRegistry();
+    this.#idGenerator = idGenerator;
+    this.#callbacks = new CallbackRegistry(idGenerator);
     this.#url = url;
     this.#delay = delay;
     this.#timeout = timeout ?? 180_000;
@@ -80,6 +87,13 @@ export class Connection extends EventEmitter<CDPSessionEvents> {
     return this.#closed;
   }
 
+  /**
+   * @internal
+   */
+  get _idGenerator(): GetIdFn {
+    return this.#idGenerator;
+  }
+
   /**
    * @internal
    */

package/front_end/third_party/puppeteer/package/src/cdp/ExtensionTransport.ts

@@ -68,7 +68,10 @@ export class ExtensionTransport implements ConnectionTransport {
   };
 
   #dispatchResponse(message: object): void {
-    this.onmessage?.(JSON.stringify(message));
+    // Dispatch in a new task like other transports.
+    setTimeout(() => {
+      this.onmessage?.(JSON.stringify(message));
+    }, 0);
   }
 
   send(message: string): void {
@@ -125,6 +128,7 @@ export class ExtensionTransport implements ConnectionTransport {
         if (parsed.sessionId === 'tabTargetSessionId') {
           this.#dispatchResponse({
             method: 'Target.attachedToTarget',
+            sessionId: 'tabTargetSessionId',
             params: {
               targetInfo: pageTargetInfo,
               sessionId: 'pageTargetSessionId',

package/front_end/third_party/puppeteer/package/src/cdp/Page.ts

@@ -58,6 +58,7 @@ import {AsyncDisposableStack} from '../util/disposable.js';
 import {isErrorLike} from '../util/ErrorLike.js';
 
 import {Binding} from './Binding.js';
+import type {CdpBrowser} from './Browser.js';
 import {CdpCDPSession} from './CdpSession.js';
 import {isTargetClosedError} from './Connection.js';
 import {Coverage} from './Coverage.js';
@@ -417,6 +418,13 @@ export class CdpPage extends Page {
     return this.#emulationManager.javascriptEnabled;
   }
 
+  override async openDevTools(): Promise<Page> {
+    const pageTargetId = this.target()._targetId;
+    const browser = this.browser() as CdpBrowser;
+    const devtoolsPage = await browser._createDevToolsPage(pageTargetId);
+    return devtoolsPage;
+  }
+
   override async waitForFileChooser(
     options: WaitTimeoutOptions = {},
   ): Promise<FileChooser> {

package/front_end/third_party/puppeteer/package/src/cdp/TargetManager.ts

@@ -15,7 +15,8 @@ import {Deferred} from '../util/Deferred.js';
 
 import {CdpCDPSession} from './CdpSession.js';
 import type {Connection} from './Connection.js';
-import {CdpTarget, InitializationStatus} from './Target.js';
+import type {CdpTarget} from './Target.js';
+import {InitializationStatus} from './Target.js';
 import type {TargetManagerEvents} from './TargetManageEvents.js';
 import {TargetManagerEvent} from './TargetManageEvents.js';
 
@@ -90,10 +91,20 @@ export class TargetManager
   >();
 
   #initializeDeferred = Deferred.create<void>();
-  #targetsIdsForInit = new Set<string>();
   #waitForInitiallyDiscoveredTargets = true;
 
   #discoveryFilter: Protocol.Target.FilterEntry[] = [{}];
+  // IDs of tab targets detected while running the initial Target.setAutoAttach
+  // request. These are the targets whose initialization we want to await for
+  // before resolving puppeteer.connect() or launch() to avoid flakiness.
+  // Whenever a sub-target whose parent is a tab target is attached, we remove
+  // the tab target from this list. Once the list is empty, we resolve the
+  // initializeDeferred.
+  #targetsIdsForInit = new Set<string>();
+  // This is false until the connection-level Target.setAutoAttach request is
+  // done. It indicates whethere we are running the initial auto-attach step or
+  // if we are handling targets after that.
+  #initialAttachDone = false;
 
   constructor(
     connection: Connection,
@@ -117,45 +128,12 @@ export class TargetManager
     this.#setupAttachmentListeners(this.#connection);
   }
 
-  #storeExistingTargetsForInit = () => {
-    if (!this.#waitForInitiallyDiscoveredTargets) {
-      return;
-    }
-    for (const [
-      targetId,
-      targetInfo,
-    ] of this.#discoveredTargetsByTargetId.entries()) {
-      const targetForFilter = new CdpTarget(
-        targetInfo,
-        undefined,
-        undefined,
-        this,
-        undefined,
-      );
-      // Only wait for pages and frames (except those from extensions)
-      // to auto-attach.
-      const isPageOrFrame =
-        targetInfo.type === 'page' || targetInfo.type === 'iframe';
-      const isExtension = targetInfo.url.startsWith('chrome-extension://');
-      if (
-        (!this.#targetFilterCallback ||
-          this.#targetFilterCallback(targetForFilter)) &&
-        isPageOrFrame &&
-        !isExtension
-      ) {
-        this.#targetsIdsForInit.add(targetId);
-      }
-    }
-  };
-
   async initialize(): Promise<void> {
     await this.#connection.send('Target.setDiscoverTargets', {
       discover: true,
       filter: this.#discoveryFilter,
     });
 
-    this.#storeExistingTargetsForInit();
-
     await this.#connection.send('Target.setAutoAttach', {
       waitForDebuggerOnStart: true,
       flatten: true,
@@ -168,6 +146,7 @@ export class TargetManager
         ...this.#discoveryFilter,
       ],
     });
+    this.#initialAttachDone = true;
     this.#finishInitializationIfReady();
     await this.#initializeDeferred.valueOrThrow();
   }
@@ -346,7 +325,6 @@ export class TargetManager
     // should determine if a target is auto-attached or not with the help of
     // CDP.
     if (targetInfo.type === 'service_worker') {
-      this.#finishInitializationIfReady(targetInfo.targetId);
       await silentDetach();
       if (this.#attachedTargetsByTargetId.has(targetInfo.targetId)) {
         return;
@@ -370,13 +348,26 @@ export class TargetManager
           parentSession instanceof CdpCDPSession ? parentSession : undefined,
         );
 
+    const parentTarget =
+      parentSession instanceof CdpCDPSession ? parentSession.target() : null;
+
     if (this.#targetFilterCallback && !this.#targetFilterCallback(target)) {
       this.#ignoredTargets.add(targetInfo.targetId);
-      this.#finishInitializationIfReady(targetInfo.targetId);
+      if (parentTarget?.type() === 'tab') {
+        this.#finishInitializationIfReady(parentTarget._targetId);
+      }
       await silentDetach();
       return;
     }
 
+    if (
+      this.#waitForInitiallyDiscoveredTargets &&
+      event.targetInfo.type === 'tab' &&
+      !this.#initialAttachDone
+    ) {
+      this.#targetsIdsForInit.add(event.targetInfo.targetId);
+    }
+
     this.#setupAttachmentListeners(session);
 
     if (isExistingTarget) {
@@ -391,19 +382,16 @@ export class TargetManager
       this.#attachedTargetsBySessionId.set(session.id(), target);
     }
 
-    const parentTarget =
-      parentSession instanceof CDPSession
-        ? (parentSession as CdpCDPSession).target()
-        : null;
     parentTarget?._addChildTarget(target);
 
     parentSession.emit(CDPSessionEvent.Ready, session);
 
-    this.#targetsIdsForInit.delete(target._targetId);
     if (!isExistingTarget) {
       this.emit(TargetManagerEvent.TargetAvailable, target);
     }
-    this.#finishInitializationIfReady();
+    if (parentTarget?.type() === 'tab') {
+      this.#finishInitializationIfReady(parentTarget._targetId);
+    }
 
     // TODO: the browser might be shutting down here. What do we do with the
     // error?
@@ -422,6 +410,11 @@ export class TargetManager
     if (targetId !== undefined) {
       this.#targetsIdsForInit.delete(targetId);
     }
+    // If we are still initializing it might be that we have not learned about
+    // some targets yet.
+    if (!this.#initialAttachDone) {
+      return;
+    }
     if (this.#targetsIdsForInit.size === 0) {
       this.#initializeDeferred.resolve();
     }

package/front_end/third_party/puppeteer/package/src/common/CallbackRegistry.ts

@@ -6,21 +6,23 @@
 
 import {Deferred} from '../util/Deferred.js';
 import {rewriteError} from '../util/ErrorLike.js';
-import {createIncrementalIdGenerator} from '../util/incremental-id-generator.js';
+import type {GetIdFn} from '../util/incremental-id-generator.js';
 
 import {ProtocolError, TargetCloseError} from './Errors.js';
 import {debugError} from './util.js';
 
-const idGenerator = createIncrementalIdGenerator();
-
 /**
  * Manages callbacks and their IDs for the protocol request/response communication.
  *
  * @internal
  */
 export class CallbackRegistry {
-  #callbacks = new Map<number, Callback>();
-  #idGenerator = idGenerator;
+  readonly #callbacks = new Map<number, Callback>();
+  readonly #idGenerator: GetIdFn;
+
+  constructor(idGenerator: GetIdFn) {
+    this.#idGenerator = idGenerator;
+  }
 
   create(
     label: string,

package/front_end/third_party/puppeteer/package/src/common/ConnectOptions.ts

@@ -112,6 +112,14 @@ export interface ConnectOptions {
   browserWSEndpoint?: string;
   browserURL?: string;
   transport?: ConnectionTransport;
+  /**
+   * @internal
+   *
+   * Custom ID generator for CDP / BiDi messages. Useful if the same transport
+   * is shared for multiple connections.
+   */
+  idGenerator?: () => number;
+
   /**
    * Headers to use for the web socket connection.
    * @remarks

package/front_end/third_party/puppeteer/package/src/node/BrowserLauncher.ts

@@ -30,6 +30,10 @@ import {TimeoutError} from '../common/Errors.js';
 import type {SupportedBrowser} from '../common/SupportedBrowser.js';
 import {debugError, DEFAULT_VIEWPORT} from '../common/util.js';
 import type {Viewport} from '../common/Viewport.js';
+import {
+  createIncrementalIdGenerator,
+  type GetIdFn,
+} from '../util/incremental-id-generator.js';
 
 import type {ChromeReleaseChannel, LaunchOptions} from './LaunchOptions.js';
 import {NodeWebSocketTransport as WebSocketTransport} from './NodeWebSocketTransport.js';
@@ -88,6 +92,7 @@ export abstract class BrowserLauncher {
       waitForInitialPage = true,
       protocolTimeout,
       handleDevToolsAsPage,
+      idGenerator = createIncrementalIdGenerator(),
     } = options;
 
     let {protocol} = options;
@@ -166,6 +171,7 @@ export abstract class BrowserLauncher {
             defaultViewport,
             acceptInsecureCerts,
             networkEnabled,
+            idGenerator,
           },
         );
       } else {
@@ -174,12 +180,14 @@ export abstract class BrowserLauncher {
             timeout,
             protocolTimeout,
             slowMo,
+            idGenerator,
           });
         } else {
           cdpConnection = await this.createCdpSocketConnection(browserProcess, {
             timeout,
             protocolTimeout,
             slowMo,
+            idGenerator,
           });
         }
 
@@ -342,6 +350,7 @@ export abstract class BrowserLauncher {
       timeout: number;
       protocolTimeout: number | undefined;
       slowMo: number;
+      idGenerator: GetIdFn;
     },
   ): Promise<Connection> {
     const browserWSEndpoint = await browserProcess.waitForLineOutput(
@@ -354,6 +363,8 @@ export abstract class BrowserLauncher {
       transport,
       opts.slowMo,
       opts.protocolTimeout,
+      /* rawErrors */ false,
+      opts.idGenerator,
     );
   }
 
@@ -366,6 +377,7 @@ export abstract class BrowserLauncher {
       timeout: number;
       protocolTimeout: number | undefined;
       slowMo: number;
+      idGenerator: GetIdFn;
     },
   ): Promise<Connection> {
     // stdio was assigned during start(), and the 'pipe' option there adds the
@@ -375,7 +387,14 @@ export abstract class BrowserLauncher {
       pipeWrite as NodeJS.WritableStream,
       pipeRead as NodeJS.ReadableStream,
     );
-    return new Connection('', transport, opts.slowMo, opts.protocolTimeout);
+    return new Connection(
+      '',
+      transport,
+      opts.slowMo,
+      opts.protocolTimeout,
+      /* rawErrors */ false,
+      opts.idGenerator,
+    );
   }
 
   /**
@@ -417,6 +436,7 @@ export abstract class BrowserLauncher {
       timeout: number;
       protocolTimeout: number | undefined;
       slowMo: number;
+      idGenerator: GetIdFn;
       defaultViewport: Viewport | null;
       acceptInsecureCerts?: boolean;
       networkEnabled?: boolean;
@@ -432,6 +452,7 @@ export abstract class BrowserLauncher {
     const bidiConnection = new BiDi.BidiConnection(
       browserWSEndpoint,
       transport,
+      opts.idGenerator,
       opts.slowMo,
       opts.protocolTimeout,
     );

package/front_end/third_party/puppeteer/package/src/util/version.ts

@@ -6,5 +6,5 @@
 
 // If moved update release-please config
 // x-release-please-start-version
-export const packageVersion = '24.27.0';
+export const packageVersion = '24.29.0';
 // x-release-please-end

package/front_end/ui/components/dialogs/ButtonDialog.ts

@@ -5,7 +5,11 @@
 
 import type * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import {html, render} from '../../../ui/lit/lit.js';
+import {
+  Directives,
+  html,
+  render,
+} from '../../../ui/lit/lit.js';
 
 import buttonDialogStyles from './buttonDialog.css.js';
 import {
@@ -16,6 +20,8 @@ import {
   DialogVerticalPosition,
 } from './Dialog.js';
 
+const {ref} = Directives;
+
 export type ButtonDialogState = DialogState;
 
 export interface ButtonDialogData {
@@ -96,8 +102,10 @@ export class ButtonDialog extends HTMLElement {
       <style>${buttonDialogStyles}</style>
       <devtools-button
         @click=${this.#showDialog}
-        on-render=${ComponentHelpers.Directives.nodeRenderedCallback(node => {
-          this.#showButton = node as Buttons.Button.Button;
+        ${ref(el => {
+          if (el instanceof HTMLElement) {
+            this.#showButton = el as Buttons.Button.Button;
+          }
         })}
         .data=${{
           variant: this.#data.variant,
@@ -123,8 +131,10 @@ export class ButtonDialog extends HTMLElement {
         .dialogTitle=${this.#data.dialogTitle}
         .jslogContext=${this.#data.jslogContext ?? ''}
         .state=${this.#data.state ?? DialogState.EXPANDED}
-        on-render=${ComponentHelpers.Directives.nodeRenderedCallback(node => {
-          this.#dialog = node as DialogElement;
+        ${ref(el => {
+          if (el instanceof HTMLElement) {
+            this.#dialog = el as DialogElement;
+          }
         })}
       >
         <slot></slot>

package/front_end/ui/components/expandable_list/ExpandableList.ts

@@ -46,7 +46,7 @@ export class ExpandableList extends HTMLElement {
         <div>
           ${this.#rows.length > 1 ?
             html`
-              <button title='${ifDefined(this.#title)}' aria-label='${ifDefined(this.#title)}' aria-expanded=${this.#expanded ? 'true' : 'false'} @click=${() => this.#onArrowClick()} class="arrow-icon-button">
+              <button title=${ifDefined(this.#title)} aria-label=${ifDefined(this.#title)} aria-expanded=${this.#expanded ? 'true' : 'false'} @click=${() => this.#onArrowClick()} class="arrow-icon-button">
                 <span class="arrow-icon ${this.#expanded ? 'expanded' : ''}"
                 jslog=${VisualLogging.expand().track({click: true})}></span>
               </button>

package/front_end/ui/components/helpers/helpers.ts

@@ -3,13 +3,11 @@
 // found in the LICENSE file.
 
 import * as ComponentServerSetup from './component-server-setup.js';
-import * as Directives from './directives.js';
 import * as GetRootNode from './get-root-node.js';
 import * as ScheduledRender from './scheduled-render.js';
 
 export {
   ComponentServerSetup,
-  Directives,
   GetRootNode,
   ScheduledRender,
 };

package/front_end/ui/components/menus/Menu.ts

@@ -14,7 +14,7 @@ import menuStyles from './menu.css.js';
 import menuGroupStyles from './menuGroup.css.js';
 import menuItemStyles from './menuItem.css.js';
 
-const {html} = Lit;
+const {html, Directives: {ref}} = Lit;
 
 export interface MenuData {
   /**
@@ -380,8 +380,10 @@ export class Menu extends HTMLElement {
         .dialogShownCallback=${this.#dialogDeployed.bind(this)}
         .horizontalAlignment=${this.horizontalAlignment}
         .getConnectorCustomXPosition=${this.getConnectorCustomXPosition}
-        on-render=${ComponentHelpers.Directives.nodeRenderedCallback((domNode: Element) => {
-          this.#dialog = domNode as Dialogs.Dialog.Dialog;
+        ${ref(el => {
+          if (el instanceof HTMLElement) {
+            this.#dialog = el as Dialogs.Dialog.Dialog;
+          }
         })}
         >
         <span id="container" role="menu" tabIndex="0" @keydown=${this.#handleDialogKeyDown} jslog=${VisualLogging.menu().track({resize: true, keydown: 'Escape'})}>

package/front_end/ui/components/panel_feedback/PreviewToggle.ts

@@ -69,7 +69,7 @@ export class PreviewToggle extends HTMLElement {
           <devtools-checkbox
             ?checked=${checked}
             @change=${this.#checkboxChanged}
-            aria-label=${this.#name} />
+            aria-label=${this.#name} >
             <devtools-icon name="experiment" class="medium">
           </devtools-icon>${this.#name}
           </devtools-checkbox>

package/front_end/ui/components/survey_link/SurveyLink.docs.ts

@@ -0,0 +1,22 @@
+// Copyright 2020 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Common from '../../../core/common/common.js';
+import {SurveyLink} from '../survey_link/survey_link.js';
+
+export function render(container: HTMLElement): void {
+  const link = new SurveyLink.SurveyLink();
+  container.appendChild(link);
+
+  link.data = {
+    trigger: 'test trigger',
+    promptText: Common.UIString.LocalizedEmptyString,
+    canShowSurvey: (_trigger, callback) => {
+      setTimeout(callback.bind(undefined, {canShowSurvey: true}), 500);
+    },
+    showSurvey: (_trigger, callback) => {
+      setTimeout(callback.bind(undefined, {surveyShown: true}), 1500);
+    },
+  };
+}

package/front_end/ui/components/switch/Switch.docs.ts

@@ -0,0 +1,38 @@
+// Copyright 2024 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {Switch} from './switch.js';
+
+export async function render(container: HTMLElement) {
+  function switchExample({checked, disabled}: {checked: boolean, disabled: boolean}): HTMLElement {
+    const example = document.createElement('div');
+    example.style.marginTop = '20px';
+    const explanation = document.createElement('div');
+    const disabledExplanation = document.createElement('div');
+    const component = new Switch.Switch();
+    component.checked = checked;
+    component.disabled = disabled;
+    explanation.textContent = `is checked? ${component.checked}`;
+    disabledExplanation.textContent = `is disabled? ${component.disabled}`;
+    component.addEventListener(Switch.SwitchChangeEvent.eventName, ev => {
+      explanation.textContent = `is checked? ${ev.checked}`;
+    });
+    example.appendChild(component);
+    example.appendChild(explanation);
+    example.appendChild(disabledExplanation);
+    return example;
+  }
+
+  // Basic
+  container.appendChild(switchExample({checked: false, disabled: false}));
+
+  // Already checked
+  container.appendChild(switchExample({checked: true, disabled: false}));
+
+  // Disabled
+  container.appendChild(switchExample({checked: false, disabled: true}));
+
+  // Disabled & checked
+  container.appendChild(switchExample({checked: true, disabled: true}));
+}