chrome-devtools-frontend 1.0.1555430 → 1.0.1558690

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

@@ -9,6 +9,7 @@ import * as Bidi from 'webdriver-bidi-protocol';
 
 import {firstValueFrom, from, raceWith} from '../../third_party/rxjs/rxjs.js';
 import type {BluetoothEmulation} from '../api/BluetoothEmulation.js';
+import type {WindowId} from '../api/Browser.js';
 import type {CDPSession} from '../api/CDPSession.js';
 import type {DeviceRequestPrompt} from '../api/DeviceRequestPrompt.js';
 import type {BoundingBox} from '../api/ElementHandle.js';
@@ -47,12 +48,7 @@ import {EventEmitter} from '../common/EventEmitter.js';
 import {FileChooser} from '../common/FileChooser.js';
 import type {PDFOptions} from '../common/PDFOptions.js';
 import type {Awaitable} from '../common/types.js';
-import {
-  evaluationString,
-  isString,
-  parsePDFOptions,
-  timeout,
-} from '../common/util.js';
+import {evaluationString, parsePDFOptions, timeout} from '../common/util.js';
 import type {Viewport} from '../common/Viewport.js';
 import {assert} from '../util/assert.js';
 import {bubble} from '../util/decorators.js';
@@ -260,15 +256,23 @@ export class BidiPage extends Page {
     return this.#frame;
   }
 
+  override async emulateFocusedPage(enabled: boolean): Promise<void> {
+    return await this.#cdpEmulationManager.emulateFocus(enabled);
+  }
+
   override resize(_params: {
     contentWidth: number;
     contentHeight: number;
   }): Promise<void> {
-    throw new Error('Method not implemented for WebDriver BiDi yet.');
+    throw new UnsupportedOperation();
+  }
+
+  override windowId(): Promise<WindowId> {
+    throw new UnsupportedOperation();
   }
 
   override openDevTools(): Promise<Page> {
-    throw new Error('Method not implemented for WebDriver BiDi yet.');
+    throw new UnsupportedOperation();
   }
 
   async focusedFrame(): Promise<BidiFrame> {
@@ -725,9 +729,7 @@ export class BidiPage extends Page {
 
   get isNetworkInterceptionEnabled(): boolean {
     return (
-      Boolean(this.#requestInterception) ||
-      Boolean(this.#extraHeadersInterception) ||
-      Boolean(this.#authInterception)
+      Boolean(this.#requestInterception) || Boolean(this.#authInterception)
     );
   }
 
@@ -743,26 +745,10 @@ export class BidiPage extends Page {
   /**
    * @internal
    */
-  _extraHTTPHeaders: Record<string, string> = {};
-  #extraHeadersInterception?: string;
   override async setExtraHTTPHeaders(
     headers: Record<string, string>,
   ): Promise<void> {
-    const extraHTTPHeaders: Record<string, string> = {};
-    for (const [key, value] of Object.entries(headers)) {
-      assert(
-        isString(value),
-        `Expected value of header "${key}" to be String, but "${typeof value}" is found.`,
-      );
-      extraHTTPHeaders[key.toLowerCase()] = value;
-    }
-    this._extraHTTPHeaders = extraHTTPHeaders;
-
-    this.#extraHeadersInterception = await this.#toggleInterception(
-      [Bidi.Network.InterceptPhase.BeforeRequestSent],
-      this.#extraHeadersInterception,
-      Boolean(Object.keys(this._extraHTTPHeaders).length),
-    );
+    await this.#frame.browsingContext.setExtraHTTPHeaders(headers);
   }
 
   /**

package/front_end/third_party/puppeteer/package/src/bidi/core/BrowsingContext.ts

@@ -9,6 +9,8 @@ import type * as Bidi from 'webdriver-bidi-protocol';
 import type {BluetoothEmulation} from '../../api/BluetoothEmulation.js';
 import type {DeviceRequestPrompt} from '../../api/DeviceRequestPrompt.js';
 import {EventEmitter} from '../../common/EventEmitter.js';
+import {isString} from '../../common/util.js';
+import {assert} from '../../util/assert.js';
 import {inertIfDisposed, throwIfDisposed} from '../../util/decorators.js';
 import {DisposableStack, disposeSymbol} from '../../util/disposable.js';
 import {BidiBluetoothEmulation} from '../BluetoothEmulation.js';
@@ -785,4 +787,21 @@ export class BrowsingContext extends EventEmitter<{
       signal,
     );
   }
+
+  async setExtraHTTPHeaders(headers: Record<string, string>): Promise<void> {
+    await this.#session.send('network.setExtraHeaders', {
+      headers: Object.entries(headers).map(([key, value]) => {
+        assert(
+          isString(value),
+          `Expected value of header "${key}" to be String, but "${typeof value}" is found.`,
+        );
+
+        return {
+          name: key.toLowerCase(),
+          value: {type: 'string', value: value},
+        };
+      }),
+      contexts: [this.id],
+    });
+  }
 }

package/front_end/third_party/puppeteer/package/src/bidi/core/Connection.ts

@@ -21,8 +21,9 @@ export type BidiEvents = {
 /**
  * @internal
  */
-export interface Connection<Events extends BidiEvents = BidiEvents>
-  extends EventEmitter<Events> {
+export interface Connection<
+  Events extends BidiEvents = BidiEvents,
+> extends EventEmitter<Events> {
   send<T extends keyof Commands>(
     method: T,
     params: Commands[T]['params'],

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

@@ -18,6 +18,8 @@ import {
   type TargetFilterCallback,
   type ScreenInfo,
   type AddScreenParams,
+  type WindowBounds,
+  type WindowId,
 } from '../api/Browser.js';
 import {BrowserContextEvent} from '../api/BrowserContext.js';
 import {CDPSessionEvent} from '../api/CDPSession.js';
@@ -453,6 +455,23 @@ export class CdpBrowser extends BrowserBase {
     return await this.#connection.send('Emulation.removeScreen', {screenId});
   }
 
+  override async getWindowBounds(windowId: WindowId): Promise<WindowBounds> {
+    const {bounds} = await this.#connection.send('Browser.getWindowBounds', {
+      windowId: Number(windowId),
+    });
+    return bounds;
+  }
+
+  override async setWindowBounds(
+    windowId: WindowId,
+    windowBounds: WindowBounds,
+  ): Promise<void> {
+    await this.#connection.send('Browser.setWindowBounds', {
+      windowId: Number(windowId),
+      bounds: windowBounds,
+    });
+  }
+
   override targets(): CdpTarget[] {
     return Array.from(
       this.#targetManager.getAvailableTargets().values(),

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

@@ -66,6 +66,11 @@ interface JavascriptEnabledState {
   active: boolean;
 }
 
+interface FocusState {
+  enabled: boolean;
+  active: boolean;
+}
+
 /**
  * @internal
  */
@@ -193,6 +198,14 @@ export class EmulationManager implements ClientProvider {
     this,
     this.#setJavaScriptEnabled,
   );
+  #focusState = new EmulatedState<FocusState>(
+    {
+      enabled: true,
+      active: false,
+    },
+    this,
+    this.#emulateFocus,
+  );
 
   #secondaryClients = new Set<CDPSession>();
 
@@ -578,4 +591,21 @@ export class EmulationManager implements ClientProvider {
       javaScriptEnabled: enabled,
     });
   }
+
+  @invokeAtMostOnceForArguments
+  async #emulateFocus(client: CDPSession, state: FocusState): Promise<void> {
+    if (!state.active) {
+      return;
+    }
+    await client.send('Emulation.setFocusEmulationEnabled', {
+      enabled: state.enabled,
+    });
+  }
+
+  async emulateFocus(enabled: boolean): Promise<void> {
+    await this.#focusState.setState({
+      active: true,
+      enabled,
+    });
+  }
 }

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

@@ -8,7 +8,7 @@ import type {Protocol} from 'devtools-protocol';
 
 import {firstValueFrom, from, raceWith} from '../../third_party/rxjs/rxjs.js';
 import type {BluetoothEmulation} from '../api/BluetoothEmulation.js';
-import type {Browser} from '../api/Browser.js';
+import type {Browser, WindowId} from '../api/Browser.js';
 import type {BrowserContext} from '../api/BrowserContext.js';
 import {CDPSessionEvent, type CDPSession} from '../api/CDPSession.js';
 import type {DeviceRequestPrompt} from '../api/DeviceRequestPrompt.js';
@@ -375,17 +375,22 @@ export class CdpPage extends Page {
     contentWidth: number;
     contentHeight: number;
   }): Promise<void> {
-    const {windowId} = await this.#primaryTargetClient.send(
-      'Browser.getWindowForTarget',
-    );
-
+    const windowId = await this.windowId();
     await this.#primaryTargetClient.send('Browser.setContentsSize', {
-      windowId,
+      windowId: Number(windowId),
       width: params.contentWidth,
       height: params.contentHeight,
     });
   }
 
+  override async windowId(): Promise<WindowId> {
+    const {windowId} = await this.#primaryTargetClient.send(
+      'Browser.getWindowForTarget',
+    );
+
+    return windowId.toString();
+  }
+
   async #onFileChooser(
     event: Protocol.Page.FileChooserOpenedEvent,
   ): Promise<void> {
@@ -580,6 +585,10 @@ export class CdpPage extends Page {
     );
   }
 
+  override async emulateFocusedPage(enabled: boolean): Promise<void> {
+    return await this.#emulationManager.emulateFocus(enabled);
+  }
+
   override setDefaultNavigationTimeout(timeout: number): void {
     this._timeoutSettings.setDefaultNavigationTimeout(timeout);
   }

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

@@ -57,12 +57,21 @@ export async function _connectToBrowser(
 async function getConnectionTransport(
   options: ConnectOptions,
 ): Promise<{connectionTransport: ConnectionTransport; endpointUrl: string}> {
-  const {browserWSEndpoint, browserURL, transport, headers = {}} = options;
+  const {
+    browserWSEndpoint,
+    browserURL,
+    channel,
+    transport,
+    headers = {},
+  } = options;
 
   assert(
-    Number(!!browserWSEndpoint) + Number(!!browserURL) + Number(!!transport) ===
+    Number(!!browserWSEndpoint) +
+      Number(!!browserURL) +
+      Number(!!transport) +
+      Number(!!channel) ===
       1,
-    'Exactly one of browserWSEndpoint, browserURL or transport must be passed to puppeteer.connect',
+    'Exactly one of browserWSEndpoint, browserURL, transport or channel must be passed to puppeteer.connect',
   );
 
   if (transport) {
@@ -91,9 +100,8 @@ async function getConnectionTransport(
     if (!platform) {
       throw new Error('Could not detect required browser platform');
     }
-    const {convertPuppeteerChannelToBrowsersChannel} = await import(
-      '../node/LaunchOptions.js'
-    );
+    const {convertPuppeteerChannelToBrowsersChannel} =
+      await import('../node/LaunchOptions.js');
     const {join} = await import('node:path');
     const userDataDir = resolveDefaultUserDataDir(
       Browser.CHROME,
@@ -102,15 +110,26 @@ async function getConnectionTransport(
     );
     const portPath = join(userDataDir, 'DevToolsActivePort');
     try {
-      const portRawValue = await environment.value.fs.promises.readFile(
+      const fileContent = await environment.value.fs.promises.readFile(
         portPath,
         'ascii',
       );
-      const port = parseInt(portRawValue, 10);
+      const [rawPort, rawPath] = fileContent
+        .split('\n')
+        .map(line => {
+          return line.trim();
+        })
+        .filter(line => {
+          return !!line;
+        });
+      if (!rawPort || !rawPath) {
+        throw new Error(`Invalid DevToolsActivePort '${fileContent}' found`);
+      }
+      const port = parseInt(rawPort, 10);
       if (isNaN(port) || port <= 0 || port > 65535) {
-        throw new Error(`Invalid port '${portRawValue}' found`);
+        throw new Error(`Invalid port '${rawPort}' found`);
       }
-      const browserWSEndpoint = `ws://localhost:${port}`;
+      const browserWSEndpoint = `ws://localhost:${port}${rawPath}`;
       const WebSocketClass = await getWebSocketTransportClass();
       const connectionTransport = await WebSocketClass.create(
         browserWSEndpoint,

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

@@ -56,9 +56,9 @@ export type EventsWithWildcard<Events extends Record<EventType, unknown>> =
  *
  * @public
  */
-export class EventEmitter<Events extends Record<EventType, unknown>>
-  implements CommonEventEmitter<EventsWithWildcard<Events>>
-{
+export class EventEmitter<
+  Events extends Record<EventType, unknown>,
+> implements CommonEventEmitter<EventsWithWildcard<Events>> {
   #emitter: Emitter<EventsWithWildcard<Events>> | EventEmitter<Events>;
   #handlers = new Map<keyof Events | '*', Array<Handler<any>>>();
 

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

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

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

package/front_end/ui/components/icon_button/iconButton.css

@@ -7,6 +7,8 @@
 :host {
   white-space: normal;
   display: inline-block;
+  margin-right: var(--sys-size-1);
+  margin-left: var(--sys-size-1);
 }
 
 .icon-button {
@@ -33,7 +35,7 @@
 }
 
 .icon-button:focus-visible {
-  background-color: var(--sys-color-state-hover-on-subtle);
+  outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
 }
 
 .compact .icon-button-title {

package/front_end/ui/components/report_view/ReportView.docs.ts

@@ -0,0 +1,37 @@
+// 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 './report_view.js';
+
+import * as Lit from '../../lit/lit.js';
+
+import type {ReportData} from './ReportView.js';
+
+const {html} = Lit;
+
+const exampleRenderHelper = (key: string, value: string) => html`
+          <devtools-report-key>${key}</devtools-report-key>
+          <devtools-report-value>${value}</devtools-report-value>
+        `;
+
+export function render(container: HTMLElement) {
+  // clang-format off
+  Lit.render(
+      html`
+        <devtools-report .data=${{reportTitle: 'Optional Title'} as ReportData}>
+          <devtools-report-section-header>Section 1</devtools-report-section-header>
+          <devtools-report-key>Basic plain text field</devtools-report-key>
+          <devtools-report-value>And this is the value</devtools-report-value>
+          <devtools-report-key>A field with a code value</devtools-report-key>
+          <devtools-report-value class="source-code">SomeCodeValue</devtools-report-value>
+          <devtools-report-divider></devtools-report-divider>
+          <devtools-report-section-header>Section 2</devtools-report-section-header>
+          ${exampleRenderHelper('Using a small helper', 'to render report rows')}
+          ${exampleRenderHelper('This wide column defines the column width', 'for all rows')}
+          <devtools-report-divider></devtools-report-divider>
+        </devtools-report>
+      `,
+      container);
+  // clang-format on
+}

package/front_end/ui/components/report_view/ReportView.ts

@@ -3,6 +3,8 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
+import * as Platform from '../../../core/platform/platform.js';
+import * as Components from '../../legacy/components/utils/utils.js';
 import {html, nothing, render} from '../../lit/lit.js';
 
 import reportStyles from './report.css.js';
@@ -29,20 +31,20 @@ import reportValueStyles from './reportValue.css.js';
  *     <devtools-report-divider></devtools-report-divider>
  *   </devtools-report>
  * ```
+ * The component is intended to replace UI.ReportView in an idiomatic way.
  */
 export interface ReportData {
   reportTitle: string;
+  reportUrl?: Platform.DevToolsPath.UrlString;
 }
-
-/**
- * @deprecated Use UI.ReportView.ReportView instead.
- */
 export class Report extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #reportTitle = '';
+  #reportUrl = Platform.DevToolsPath.EmptyUrlString;
 
-  set data({reportTitle}: ReportData) {
+  set data({reportTitle, reportUrl}: ReportData) {
     this.#reportTitle = reportTitle;
+    this.#reportUrl = reportUrl ?? Platform.DevToolsPath.EmptyUrlString;
     this.#render();
   }
 
@@ -55,7 +57,11 @@ export class Report extends HTMLElement {
     // clang-format off
     render(html`
       <style>${reportStyles}</style>
-      ${this.#reportTitle ? html`<div class="report-title">${this.#reportTitle}</div>` : nothing}
+      ${this.#reportTitle ? html`<div class="report-title">
+        ${this.#reportTitle}
+        ${this.#reportUrl ? Components.Linkifier.Linkifier.linkifyURL(this.#reportUrl, {
+          tabStop: true, jslogContext: 'source-location', className: 'report-url'}) : nothing}
+      </div>` : nothing}
       <div class="content">
         <slot></slot>
       </div>

package/front_end/ui/components/report_view/report.css

@@ -26,3 +26,19 @@
   color: var(--sys-color-on-surface);
   background-color: var(--sys-color-cdt-base-container);
 }
+
+.report-url {
+  background: none;
+  border-radius: 2px;
+  border: none;
+  color: var(--text-link);
+  cursor: pointer;
+  display: block;
+  font: var(--sys-typescale-body4-regular);
+  height: unset;
+  margin: 0;
+  outline-offset: 2px;
+  outline: none;
+  padding: 0 !important; /* stylelint-disable-line declaration-no-important */
+  text-decoration: underline;
+}

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

@@ -155,7 +155,7 @@ export class SettingCheckbox extends HTMLElement {
             .checked=${this.checked}
             ?disabled=${this.#setting.disabled()}
             @change=${this.#checkboxChanged}
-            jslog=${VisualLogging.toggle().track({click: true}).context(this.#setting.name)}
+            jslog=${VisualLogging.toggle().track({change: true}).context(this.#setting.name)}
             aria-label=${this.#setting.title()}
           />
           ${this.#textOverride || this.#setting.title()}${reason}