chrome-devtools-frontend 1.0.1550444 → 1.0.1555174

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

@@ -95,9 +95,8 @@ export class CdpWebWorker extends WebWorker {
 
   override async close(): Promise<void> {
     switch (this.#targetType) {
-      case TargetType.SERVICE_WORKER:
-      case TargetType.SHARED_WORKER: {
-        // For service and shared workers we need to close the target and detach to allow
+      case TargetType.SERVICE_WORKER: {
+        // For service workers we need to close the target and detach to allow
         // the worker to stop.
         await this.client.connection()?.send('Target.closeTarget', {
           targetId: this.#id,
@@ -107,6 +106,12 @@ export class CdpWebWorker extends WebWorker {
         });
         break;
       }
+      case TargetType.SHARED_WORKER: {
+        await this.client.connection()?.send('Target.closeTarget', {
+          targetId: this.#id,
+        });
+        break;
+      }
       default:
         await this.evaluate(() => {
           self.close();

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

@@ -6,6 +6,7 @@
 
 export * from './Accessibility.js';
 export * from './Binding.js';
+export * from './BluetoothEmulation.js';
 export * from './Browser.js';
 export * from './BrowserContext.js';
 export * from './BrowserConnector.js';

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

@@ -7,7 +7,7 @@
 import type {Browser} from '../api/Browser.js';
 import {_connectToBiDiBrowser} from '../bidi/BrowserConnector.js';
 import {_connectToCdpBrowser} from '../cdp/BrowserConnector.js';
-import {isNode} from '../environment.js';
+import {environment, isNode} from '../environment.js';
 import {assert} from '../util/assert.js';
 import {isErrorLike} from '../util/ErrorLike.js';
 
@@ -84,6 +84,50 @@ async function getConnectionTransport(
       connectionTransport: connectionTransport,
       endpointUrl: connectionURL,
     };
+  } else if (options.channel && isNode) {
+    const {detectBrowserPlatform, resolveDefaultUserDataDir, Browser} =
+      await import('@puppeteer/browsers');
+    const platform = detectBrowserPlatform();
+    if (!platform) {
+      throw new Error('Could not detect required browser platform');
+    }
+    const {convertPuppeteerChannelToBrowsersChannel} = await import(
+      '../node/LaunchOptions.js'
+    );
+    const {join} = await import('node:path');
+    const userDataDir = resolveDefaultUserDataDir(
+      Browser.CHROME,
+      platform,
+      convertPuppeteerChannelToBrowsersChannel(options.channel),
+    );
+    const portPath = join(userDataDir, 'DevToolsActivePort');
+    try {
+      const portRawValue = await environment.value.fs.promises.readFile(
+        portPath,
+        'ascii',
+      );
+      const port = parseInt(portRawValue, 10);
+      if (isNaN(port) || port <= 0 || port > 65535) {
+        throw new Error(`Invalid port '${portRawValue}' found`);
+      }
+      const browserWSEndpoint = `ws://localhost:${port}`;
+      const WebSocketClass = await getWebSocketTransportClass();
+      const connectionTransport = await WebSocketClass.create(
+        browserWSEndpoint,
+        headers,
+      );
+      return {
+        connectionTransport: connectionTransport,
+        endpointUrl: browserWSEndpoint,
+      };
+    } catch (error) {
+      throw new Error(
+        `Could not find DevToolsActivePort for ${options.channel} at ${portPath}`,
+        {
+          cause: error,
+        },
+      );
+    }
   }
   throw new Error('Invalid connection options');
 }

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

@@ -38,6 +38,15 @@ export interface SupportedWebDriverCapabilities {
   alwaysMatch?: SupportedWebDriverCapability;
 }
 
+/**
+ * @public
+ */
+export type ChromeReleaseChannel =
+  | 'chrome'
+  | 'chrome-beta'
+  | 'chrome-canary'
+  | 'chrome-dev';
+
 /**
  * Generic browser options that can be passed when launching any browser or when
  * connecting to an existing browser instance.
@@ -49,6 +58,17 @@ export interface ConnectOptions {
    * @defaultValue `false`
    */
   acceptInsecureCerts?: boolean;
+  /**
+   * If specified, puppeteer looks for an open WebSocket at the well-known
+   * default user data directory for the specified channel and attempts to
+   * connect to it using ws://localhost:$ActivePort/devtools/browser. Only works
+   * for Chrome and when run in Node.js.
+   *
+   * This option is experimental when used with puppeteer.connect().
+   *
+   * @experimental
+   */
+  channel?: ChromeReleaseChannel;
   /**
    * Experimental setting to disable monitoring network events by default. When
    * set to `false`, parts of Puppeteer that depend on network events would not

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

@@ -11,7 +11,6 @@ import path from 'node:path';
 import {
   computeSystemExecutablePath,
   Browser as SupportedBrowsers,
-  ChromeReleaseChannel as BrowsersChromeReleaseChannel,
 } from '@puppeteer/browsers';
 
 import type {Browser} from '../api/Browser.js';
@@ -19,7 +18,11 @@ import {debugError} from '../common/util.js';
 import {assert} from '../util/assert.js';
 
 import {BrowserLauncher, type ResolvedLaunchArgs} from './BrowserLauncher.js';
-import type {ChromeReleaseChannel, LaunchOptions} from './LaunchOptions.js';
+import {
+  convertPuppeteerChannelToBrowsersChannel,
+  type ChromeReleaseChannel,
+  type LaunchOptions,
+} from './LaunchOptions.js';
 import type {PuppeteerNode} from './PuppeteerNode.js';
 import {rm} from './util/fs.js';
 
@@ -285,21 +288,6 @@ export class ChromeLauncher extends BrowserLauncher {
   }
 }
 
-function convertPuppeteerChannelToBrowsersChannel(
-  channel: ChromeReleaseChannel,
-): BrowsersChromeReleaseChannel {
-  switch (channel) {
-    case 'chrome':
-      return BrowsersChromeReleaseChannel.STABLE;
-    case 'chrome-dev':
-      return BrowsersChromeReleaseChannel.DEV;
-    case 'chrome-beta':
-      return BrowsersChromeReleaseChannel.BETA;
-    case 'chrome-canary':
-      return BrowsersChromeReleaseChannel.CANARY;
-  }
-}
-
 /**
  * Extracts all features from the given command-line flag
  * (e.g. `--enable-features`, `--enable-features=`).

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

@@ -4,17 +4,33 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import type {ConnectOptions} from '../common/ConnectOptions.js';
+import {ChromeReleaseChannel as BrowsersChromeReleaseChannel} from '@puppeteer/browsers';
+
+import type {
+  ChromeReleaseChannel,
+  ConnectOptions,
+} from '../common/ConnectOptions.js';
 import type {SupportedBrowser} from '../common/SupportedBrowser.js';
 
+export type {ChromeReleaseChannel};
+
 /**
- * @public
+ * @internal
  */
-export type ChromeReleaseChannel =
-  | 'chrome'
-  | 'chrome-beta'
-  | 'chrome-canary'
-  | 'chrome-dev';
+export function convertPuppeteerChannelToBrowsersChannel(
+  channel: ChromeReleaseChannel,
+): BrowsersChromeReleaseChannel {
+  switch (channel) {
+    case 'chrome':
+      return BrowsersChromeReleaseChannel.STABLE;
+    case 'chrome-dev':
+      return BrowsersChromeReleaseChannel.DEV;
+    case 'chrome-beta':
+      return BrowsersChromeReleaseChannel.BETA;
+    case 'chrome-canary':
+      return BrowsersChromeReleaseChannel.CANARY;
+  }
+}
 
 /**
  * Generic launch options that can be passed when launching any browser.

package/front_end/third_party/puppeteer/package/src/revisions.ts

@@ -8,7 +8,7 @@
  * @internal
  */
 export const PUPPETEER_REVISIONS = Object.freeze({
-  chrome: '142.0.7444.175',
-  'chrome-headless-shell': '142.0.7444.175',
-  firefox: 'stable_145.0.1',
+  chrome: '143.0.7499.40',
+  'chrome-headless-shell': '143.0.7499.40',
+  firefox: 'stable_145.0.2',
 });

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.31.0';
+export const packageVersion = '24.32.0';
 // x-release-please-end

package/front_end/third_party/puppeteer/puppeteer-tsconfig.json

@@ -3,6 +3,7 @@
     "composite": true
   },
   "files": [
+    "package/lib/esm/puppeteer/api/BluetoothEmulation.js",
     "package/lib/esm/puppeteer/api/Browser.js",
     "package/lib/esm/puppeteer/api/BrowserContext.js",
     "package/lib/esm/puppeteer/api/CDPSession.js",
@@ -23,12 +24,14 @@
     "package/lib/esm/puppeteer/api/api.js",
     "package/lib/esm/puppeteer/api/locators/locators.js",
     "package/lib/esm/puppeteer/bidi/BidiOverCdp.js",
+    "package/lib/esm/puppeteer/bidi/BluetoothEmulation.js",
     "package/lib/esm/puppeteer/bidi/Browser.js",
     "package/lib/esm/puppeteer/bidi/BrowserConnector.js",
     "package/lib/esm/puppeteer/bidi/BrowserContext.js",
     "package/lib/esm/puppeteer/bidi/CDPSession.js",
     "package/lib/esm/puppeteer/bidi/Connection.js",
     "package/lib/esm/puppeteer/bidi/Deserializer.js",
+    "package/lib/esm/puppeteer/bidi/DeviceRequestPrompt.js",
     "package/lib/esm/puppeteer/bidi/Dialog.js",
     "package/lib/esm/puppeteer/bidi/ElementHandle.js",
     "package/lib/esm/puppeteer/bidi/ExposedFunction.js",
@@ -56,6 +59,7 @@
     "package/lib/esm/puppeteer/bidi/util.js",
     "package/lib/esm/puppeteer/cdp/Accessibility.js",
     "package/lib/esm/puppeteer/cdp/Binding.js",
+    "package/lib/esm/puppeteer/cdp/BluetoothEmulation.js",
     "package/lib/esm/puppeteer/cdp/Browser.js",
     "package/lib/esm/puppeteer/cdp/BrowserConnector.js",
     "package/lib/esm/puppeteer/cdp/BrowserContext.js",

package/front_end/ui/components/annotations/AnnotationRepository.ts

@@ -8,12 +8,12 @@ import type * as SDK from '../../../core/sdk/sdk.js';
 
 import {AnnotationType} from './AnnotationType.js';
 
-interface BaseAnnotationData {
+export interface BaseAnnotationData {
   id: number;
   type: AnnotationType;
   message: string;
   // Sometimes the anchor for an annotation is not known, but is provided using a
-  // string id instead (which can be converted to an `anchor` later).
+  // string id instead (which can be converted to a proper `anchor`).
   lookupId: string;
   // Sometimes we want annotations to anchor to a particular string on the page.
   anchorToString?: string;
@@ -24,18 +24,35 @@ export interface ElementsAnnotationData extends BaseAnnotationData {
   anchor?: SDK.DOMModel.DOMNode;
 }
 
+export interface NetworkRequestAnnotationData extends BaseAnnotationData {
+  type: AnnotationType.NETWORK_REQUEST;
+  anchor?: SDK.NetworkRequest.NetworkRequest;
+}
+
+export interface NetworkRequestDetailsAnnotationData extends BaseAnnotationData {
+  type: AnnotationType.NETWORK_REQUEST_SUBPANEL_HEADERS;
+  anchor?: SDK.NetworkRequest.NetworkRequest;
+}
+
 export const enum Events {
   ANNOTATION_ADDED = 'AnnotationAdded',
+  ANNOTATION_DELETED = 'AnnotationDeleted',
+  ALL_ANNOTATIONS_DELETED = 'AllAnnotationsDeleted',
 }
 
 export interface EventTypes {
   [Events.ANNOTATION_ADDED]: BaseAnnotationData;
+  [Events.ANNOTATION_DELETED]: {id: number};
+  [Events.ALL_ANNOTATIONS_DELETED]: void;
 }
 
 export class AnnotationRepository {
   static #instance: AnnotationRepository|null = null;
+  static #hasRepliedGreenDevDisabled = false;
+  static #hasShownFlagWarning = false;
+
   #events = new Common.ObjectWrapper.ObjectWrapper<EventTypes>();
-  #annotations: BaseAnnotationData[] = [];
+  #annotationData: BaseAnnotationData[] = [];
   #nextId = 0;
 
   static instance(): AnnotationRepository {
@@ -46,7 +63,17 @@ export class AnnotationRepository {
   }
 
   static annotationsEnabled(): boolean {
-    return Boolean(Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled);
+    const enabled = Boolean(Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled);
+    // TODO(finnur): Fix race when Repository is created before feature flags have been set properly.
+    if (!enabled) {
+      this.#hasRepliedGreenDevDisabled = true;
+    } else if (this.#hasRepliedGreenDevDisabled && !this.#hasShownFlagWarning) {
+      console.warn(
+          'Flag controlling GreenDev has flipped from false to true. ' +
+          'Only some callers will expect GreenDev to be enabled, which can lead to unexpected results.');
+      this.#hasShownFlagWarning = true;
+    }
+    return Boolean(enabled);
   }
 
   addEventListener<T extends keyof EventTypes>(
@@ -58,20 +85,65 @@ export class AnnotationRepository {
     return this.#events.addEventListener(eventType, listener, thisObject);
   }
 
-  getAnnotationsByType(type: AnnotationType): BaseAnnotationData[] {
+  getAnnotationDataByType(type: AnnotationType): BaseAnnotationData[] {
     if (!AnnotationRepository.annotationsEnabled()) {
       console.warn('Received query for annotation types with annotations disabled');
       return [];
     }
 
-    const annotations = this.#annotations.filter(annotation => annotation.type === type);
+    const annotations = this.#annotationData.filter(annotation => annotation.type === type);
     return annotations;
   }
 
+  getAnnotationDataById(id: number): BaseAnnotationData|undefined {
+    if (!AnnotationRepository.annotationsEnabled()) {
+      console.warn('Received query for annotation type with annotations disabled');
+      return undefined;
+    }
+
+    return this.#annotationData.find(annotation => annotation.id === id);
+  }
+
+  #getExistingAnnotation(type: AnnotationType, anchor?: SDK.DOMModel.DOMNode|SDK.NetworkRequest.NetworkRequest|string):
+      BaseAnnotationData|undefined {
+    const annotations = this.getAnnotationDataByType(type);
+    const annotation = annotations.find(annotation => {
+      if (typeof anchor === 'string') {
+        return annotation.lookupId === anchor;
+      }
+      switch (type) {
+        case AnnotationType.ELEMENT_NODE: {
+          const elementAnnotation = annotation as ElementsAnnotationData;
+          return elementAnnotation.anchor === anchor;
+        }
+        case AnnotationType.NETWORK_REQUEST_SUBPANEL_HEADERS: {
+          const networkRequestDetailsAnnotation = annotation as NetworkRequestDetailsAnnotationData;
+          return networkRequestDetailsAnnotation.anchor === anchor;
+        }
+        default:
+          console.warn('[AnnotationRepository] Unknown AnnotationType', type);
+          return false;
+      }
+    });
+    return annotation;
+  }
+
+  #updateExistingAnnotationLabel(
+      label: string, type: AnnotationType,
+      anchor?: SDK.DOMModel.DOMNode|SDK.NetworkRequest.NetworkRequest|string): boolean {
+    const annotation = this.#getExistingAnnotation(type, anchor);
+    if (annotation) {
+      // TODO(finnur): This should work for annotations that have not been displayed yet,
+      // but we need to also notify the AnnotationManager for those that have been shown.
+      annotation.message = label;
+      return true;
+    }
+    return false;
+  }
+
   addElementsAnnotation(
       label: string,
-      lookupId?: string,
-      anchor?: SDK.DOMModel.DOMNode,
+      anchor?: SDK.DOMModel.DOMNode|string,
       anchorToString?: string,
       ): void {
     if (!AnnotationRepository.annotationsEnabled()) {
@@ -79,20 +151,88 @@ export class AnnotationRepository {
       return;
     }
 
+    if (this.#updateExistingAnnotationLabel(label, AnnotationType.ELEMENT_NODE, anchor)) {
+      return;
+    }
+
     const annotationData: ElementsAnnotationData = {
       id: this.#nextId++,
       type: AnnotationType.ELEMENT_NODE,
       message: label,
-      lookupId: lookupId || '',
-      anchor,
-      anchorToString
+      lookupId: typeof anchor === 'string' ? anchor : '',
+      anchor: typeof anchor !== 'string' ? anchor : undefined,
+      anchorToString,
+    };
+    this.#annotationData.push(annotationData);
+    // eslint-disable-next-line no-console
+    console.log('[AnnotationRepository] Added element annotation:', label, {
+      annotationData,
+      annotations: this.#annotationData.length,
+    });
+    this.#events.dispatchEventToListeners(Events.ANNOTATION_ADDED, annotationData);
+  }
+
+  addNetworkRequestAnnotation(
+      label: string,
+      anchor?: SDK.NetworkRequest.NetworkRequest|string,
+      anchorToString?: string,
+      ): void {
+    if (!AnnotationRepository.annotationsEnabled()) {
+      console.warn('Received annotation registration with annotations disabled');
+      return;
+    }
+
+    // We only need to update the NETWORK_REQUEST_SUBPANEL_HEADERS because the
+    // NETWORK_REQUEST Annotation has no meaningful label.
+    if (this.#updateExistingAnnotationLabel(label, AnnotationType.NETWORK_REQUEST_SUBPANEL_HEADERS, anchor)) {
+      return;
+    }
+
+    const annotationData: NetworkRequestAnnotationData = {
+      id: this.#nextId++,
+      type: AnnotationType.NETWORK_REQUEST,
+      message: '',
+      lookupId: typeof anchor === 'string' ? anchor : '',
+      anchor: typeof anchor !== 'string' ? anchor : undefined,
+      anchorToString,
     };
-    this.#annotations.push(annotationData);
+    this.#annotationData.push(annotationData);
     // eslint-disable-next-line no-console
     console.log('[AnnotationRepository] Added annotation:', label, {
       annotationData,
-      annotations: this.#annotations.length,
+      annotations: this.#annotationData.length,
     });
     this.#events.dispatchEventToListeners(Events.ANNOTATION_ADDED, annotationData);
+
+    const annotationDetailsData: NetworkRequestDetailsAnnotationData = {
+      id: this.#nextId++,
+      type: AnnotationType.NETWORK_REQUEST_SUBPANEL_HEADERS,
+      message: label,
+      lookupId: typeof anchor === 'string' ? anchor : '',
+      anchor: typeof anchor !== 'string' ? anchor : undefined,
+      anchorToString,
+    };
+
+    this.#annotationData.push(annotationDetailsData);
+    this.#events.dispatchEventToListeners(Events.ANNOTATION_ADDED, annotationDetailsData);
+  }
+
+  deleteAllAnnotations(): void {
+    this.#annotationData = [];
+    this.#events.dispatchEventToListeners(Events.ALL_ANNOTATIONS_DELETED);
+    // eslint-disable-next-line no-console
+    console.log('[AnnotationRepository] Deleting all annotations');
+  }
+
+  deleteAnnotation(id: number): void {
+    const index = this.#annotationData.findIndex(annotation => annotation.id === id);
+    if (index === -1) {
+      console.warn(`[AnnotationRepository] Could not find annotation with id ${id}`);
+      return;
+    }
+    this.#annotationData.splice(index, 1);
+    this.#events.dispatchEventToListeners(Events.ANNOTATION_DELETED, {id});
+    // eslint-disable-next-line no-console
+    console.log(`[AnnotationRepository] Deleted annotation with id ${id}`);
   }
 }

package/front_end/ui/components/settings/SettingCheckbox.ts

@@ -5,7 +5,7 @@
 
 import '../tooltips/tooltips.js';
 import './SettingDeprecationWarning.js';
-import '../../legacy/legacy.js';
+import '../../kit/kit.js';
 
 import type * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
@@ -90,13 +90,11 @@ export class SettingCheckbox extends HTMLElement {
           <devtools-tooltip id=${id} variant="rich">
             <span>${learnMore.tooltip()}</span><br />
             ${url
-              ? html`<x-link
+              ? html`<devtools-link
                   href=${url}
                   class="link"
-                  jslog=${VisualLogging.link(jsLogContext).track({
-                    click: true,
-                  })}
-                  >${i18nString(UIStrings.learnMore)}</x-link
+                  .jslogContext=${jsLogContext}
+                  >${i18nString(UIStrings.learnMore)}</devtools-link
                 >`
               : Lit.nothing}
           </devtools-tooltip>

package/front_end/ui/components/snackbars/Snackbars.docs.ts

@@ -6,7 +6,6 @@ import {Snackbar} from './snackbars.js';
 
 export function render(container: HTMLElement) {
   const onActionClick = (): void => {
-    // eslint-disable-next-line no-console
     console.log('Action button clicked!');
   };
 

package/front_end/ui/components/text_editor/AiCodeCompletionTeaserPlaceholder.ts

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
-import type * as PanelCommon from '../../../panels/common/common.js';
 import * as CM from '../../../third_party/codemirror.next/codemirror.next.js';
+import type * as UI from '../../../ui/legacy/legacy.js';
 
 export function flattenRect(rect: DOMRect, left: boolean): {
   left: number,
@@ -16,8 +16,17 @@ export function flattenRect(rect: DOMRect, left: boolean): {
   return {left: x, right: x, top: rect.top, bottom: rect.bottom};
 }
 
+// TODO(b/462393094): Rename this to be a generic accessible placeholder
+/**
+ * A CodeMirror WidgetType that displays a UI.Widget.Widget as a placeholder.
+ *
+ * This custom placeholder implementation is used in place of the default
+ * CodeMirror placeholder to provide better accessibility. Specifically,
+ * it ensures that screen readers can properly announce the content within
+ * the encapsulated widget.
+ */
 export class AiCodeCompletionTeaserPlaceholder extends CM.WidgetType {
-  constructor(readonly teaser: PanelCommon.AiCodeCompletionTeaser) {
+  constructor(readonly teaser: UI.Widget.Widget) {
     super();
   }
 
@@ -64,7 +73,7 @@ export class AiCodeCompletionTeaserPlaceholder extends CM.WidgetType {
   }
 }
 
-export function aiCodeCompletionTeaserPlaceholder(teaser: PanelCommon.AiCodeCompletionTeaser): CM.Extension {
+export function aiCodeCompletionTeaserPlaceholder(teaser: UI.Widget.Widget): CM.Extension {
   const plugin = CM.ViewPlugin.fromClass(class {
     placeholder: CM.DecorationSet;