chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/core/common/Base64.ts

@@ -11,7 +11,7 @@ for (let index = 0; index < BASE64_CHARS.length; ++index) {
 /**
  * Decodes Base64-encoded data from a string without performing any kind of checking.
  */
-export function decode(input: string): ArrayBuffer {
+export function decode(input: string): Uint8Array<ArrayBuffer> {
   let bytesLength = ((input.length * 3) / 4) >>> 0;
   if (input.charCodeAt(input.length - 2) === 0x3d /* '=' */) {
     bytesLength -= 2;
@@ -29,10 +29,10 @@ export function decode(input: string): ArrayBuffer {
     bytes[offset++] = ((b & 0x0f) << 4) | (c >> 2);
     bytes[offset++] = ((c & 0x03) << 6) | (d & 0x3f);
   }
-  return bytes.buffer;
+  return bytes;
 }
 
-export function encode(input: ArrayBuffer|Blob): Promise<string> {
+export function encode(input: BlobPart): Promise<string> {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.onerror = () => reject(new Error('failed to convert to base64'));

package/front_end/core/common/Color.ts

@@ -150,6 +150,22 @@ function getColorSpace(colorSpaceText: string): ColorSpace|null {
   return null;
 }
 
+export const enum ColorChannel {
+  A = 'a',
+  ALPHA = 'alpha',
+  B = 'b',
+  C = 'c',
+  G = 'g',
+  H = 'h',
+  L = 'l',
+  R = 'r',
+  S = 's',
+  W = 'w',
+  X = 'x',
+  Y = 'y',
+  Z = 'z',
+}
+
 /**
  * Percents in color spaces are mapped to ranges.
  * These ranges change based on the syntax.
@@ -641,6 +657,7 @@ interface ColorConversions<T = void> {
 
 export interface Color {
   readonly alpha: number|null;
+  readonly channels: [ColorChannel, ColorChannel, ColorChannel, ColorChannel];
 
   equal(color: Color): boolean;
   asString(format?: Format): string;
@@ -720,6 +737,8 @@ export class Lab implements Color {
   readonly alpha: number|null;
   readonly #authoredText?: string;
   readonly #rawParams: Color3D;
+  readonly channels: [ColorChannel, ColorChannel, ColorChannel, ColorChannel] =
+      [ColorChannel.L, ColorChannel.A, ColorChannel.B, ColorChannel.ALPHA];
 
   static readonly #conversions: ColorConversions<Lab> = {
     [Format.HEX]: (self: Lab) => new Legacy(self.#getRGBArray(/* withAlpha= */ false), Format.HEX),
@@ -857,6 +876,8 @@ export class LCH implements Color {
   readonly h: number;
   readonly alpha: number|null;
   readonly #authoredText?: string;
+  readonly channels: [ColorChannel, ColorChannel, ColorChannel, ColorChannel] =
+      [ColorChannel.L, ColorChannel.C, ColorChannel.H, ColorChannel.ALPHA];
 
   static readonly #conversions: ColorConversions<LCH> = {
     [Format.HEX]: (self: LCH) => new Legacy(self.#getRGBArray(/* withAlpha= */ false), Format.HEX),
@@ -997,6 +1018,8 @@ export class Oklab implements Color {
   readonly b: number;
   readonly alpha: number|null;
   readonly #authoredText?: string;
+  readonly channels: [ColorChannel, ColorChannel, ColorChannel, ColorChannel] =
+      [ColorChannel.L, ColorChannel.A, ColorChannel.B, ColorChannel.ALPHA];
 
   static readonly #conversions: ColorConversions<Oklab> = {
     [Format.HEX]: (self: Oklab) => new Legacy(self.#getRGBArray(/* withAlpha= */ false), Format.HEX),
@@ -1134,6 +1157,8 @@ export class Oklch implements Color {
   readonly h: number;
   readonly alpha: number|null;
   readonly #authoredText?: string;
+  readonly channels: [ColorChannel, ColorChannel, ColorChannel, ColorChannel] =
+      [ColorChannel.L, ColorChannel.C, ColorChannel.H, ColorChannel.ALPHA];
 
   static readonly #conversions: ColorConversions<Oklch> = {
     [Format.HEX]: (self: Oklch) => new Legacy(self.#getRGBArray(/* withAlpha= */ false), Format.HEX),
@@ -1271,6 +1296,10 @@ export class ColorFunction implements Color {
   readonly alpha: number|null;
   readonly colorSpace: ColorSpace;
   readonly #authoredText?: string;
+  get channels(): [ColorChannel, ColorChannel, ColorChannel, ColorChannel] {
+    return this.isXYZ() ? [ColorChannel.X, ColorChannel.Y, ColorChannel.Z, ColorChannel.ALPHA] :
+                          [ColorChannel.R, ColorChannel.G, ColorChannel.B, ColorChannel.ALPHA];
+  }
 
   static readonly #conversions: ColorConversions<ColorFunction> = {
     [Format.HEX]: (self: ColorFunction) => new Legacy(self.#getRGBArray(/* withAlpha= */ false), Format.HEX),
@@ -1502,6 +1531,8 @@ export class HSL implements Color {
   readonly alpha: number|null;
   readonly #rawParams: Color3D;
   #authoredText: string|undefined;
+  readonly channels: [ColorChannel, ColorChannel, ColorChannel, ColorChannel] =
+      [ColorChannel.H, ColorChannel.S, ColorChannel.L, ColorChannel.ALPHA];
 
   static readonly #conversions: ColorConversions<HSL> = {
     [Format.HEX]: (self: HSL) => new Legacy(self.#getRGBArray(/* withAlpha= */ false), Format.HEX),
@@ -1646,6 +1677,7 @@ export class HSL implements Color {
     return [Math.round(this.h * 360), Math.round(this.s * 100), Math.round(this.l * 100), this.alpha ?? 1];
   }
 }
+
 export class HWB implements Color {
   readonly h: number;
   readonly w: number;
@@ -1653,6 +1685,8 @@ export class HWB implements Color {
   readonly alpha: number|null;
   readonly #rawParams: Color3D;
   #authoredText: string|undefined;
+  readonly channels: [ColorChannel, ColorChannel, ColorChannel, ColorChannel] =
+      [ColorChannel.H, ColorChannel.W, ColorChannel.B, ColorChannel.ALPHA];
 
   static readonly #conversions: ColorConversions<HWB> = {
     [Format.HEX]: (self: HWB) => new Legacy(self.#getRGBArray(/* withAlpha= */ false), Format.HEX),
@@ -1810,6 +1844,8 @@ function toRgbValue(value: number): number {
 
 abstract class ShortFormatColorBase implements Color {
   protected readonly color: Legacy;
+  readonly channels: [ColorChannel, ColorChannel, ColorChannel, ColorChannel] =
+      [ColorChannel.R, ColorChannel.G, ColorChannel.B, ColorChannel.ALPHA];
   constructor(color: Legacy) {
     this.color = color;
   }
@@ -1919,6 +1955,8 @@ export class Legacy implements Color {
   #rgbaInternal: Color4D;
   readonly #authoredText: string|null;
   #formatInternal: LegacyColor;
+  readonly channels: [ColorChannel, ColorChannel, ColorChannel, ColorChannel] =
+      [ColorChannel.R, ColorChannel.G, ColorChannel.B, ColorChannel.ALPHA];
 
   static readonly #conversions: ColorConversions<Legacy> = {
     [Format.HEX]: (self: Legacy) => new Legacy(self.#rgbaInternal, Format.HEX),

package/front_end/core/common/Debouncer.ts

@@ -5,11 +5,11 @@
 /**
  * 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: () => void, delay: number): () => void {
+export const debounce = function(func: (...args: any[]) => void, delay: number): (...args: any[]) => void {
   let timer = 0;
-  const debounced = (): void => {
+  const debounced = (...args: any[]): void => {
     clearTimeout(timer);
-    timer = window.setTimeout(() => func(), delay);
+    timer = window.setTimeout(() => func(...args), delay);
   };
   return debounced;
 };

package/front_end/core/common/EventTarget.test.ts

@@ -162,4 +162,5 @@ const untypedEmitter = new UntypedEventEmitter();
   untypedEmitter.addEventListener('foo', genericListener());
   untypedEmitter.addEventListener(Symbol('foo'), genericListener());
   untypedEmitter.addEventListener(Events.VOID_EVENT, genericListener());
+  untypedEmitter.testDispatch();
 })();

package/front_end/core/common/Gzip.test.ts

@@ -0,0 +1,63 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Common from './common.js';
+
+describe('Gzip', () => {
+  it('can compress and decompress a string', async () => {
+    const text = 'Hello, world!';
+    const compressed = await Common.Gzip.compress(text);
+    const decompressed = await Common.Gzip.decompress(compressed);
+    assert.strictEqual(decompressed, text);
+  });
+
+  it('can compress and decompress a stream', async () => {
+    const text = 'Hello, world! This is a stream test.';
+    const textEncoder = new TextEncoder();
+    const inputStream = new ReadableStream({
+      start(controller) {
+        controller.enqueue(textEncoder.encode(text));
+        controller.close();
+      },
+    });
+
+    const compressedStream = Common.Gzip.compressStream(inputStream);
+    const decompressedStream = Common.Gzip.decompressStream(compressedStream);
+
+    const buffer = await new Response(decompressedStream).arrayBuffer();
+    const decodedText = new TextDecoder().decode(buffer);
+
+    assert.strictEqual(decodedText, text);
+  });
+});
+
+describe('arrayBufferToString', () => {
+  it('can decompress a gzipped buffer', async () => {
+    const text = 'Hello, world!';
+    const compressed = await Common.Gzip.compress(text);
+    const result = await Common.Gzip.arrayBufferToString(compressed);
+    assert.strictEqual(result, text);
+  });
+  it('can decode a plaintext buffer', async () => {
+    const text = 'Hello, buddy!';
+    const buffer = new TextEncoder().encode(text).buffer as ArrayBuffer;
+    const result = await Common.Gzip.arrayBufferToString(buffer);
+    assert.strictEqual(result, text);
+  });
+});
+
+describe('fileToString', () => {
+  it('can decompress a gzipped file', async () => {
+    const text = '{"key": "value"}';
+    const compressed = await Common.Gzip.compress(text);
+    const result = await Common.Gzip.fileToString(new File([compressed], 'file.json.gz', {type: 'application/gzip'}));
+    assert.strictEqual(result, text);
+  });
+  it('can decode a plaintext file', async () => {
+    const text = 'Hello, buddy!';
+    const file = new File([text], 'test.txt');
+    const result = await Common.Gzip.fileToString(file);
+    assert.strictEqual(result, text);
+  });
+});

package/front_end/core/common/Gzip.ts

@@ -0,0 +1,72 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * Quickly determine if gzipped, by seeing if the first 3 bytes of the file header match the gzip signature
+ */
+export function isGzip(ab: ArrayBuffer): boolean {
+  const buf = new Uint8Array(ab);
+  if (!buf || buf.length < 3) {
+    return false;
+  }
+  // https://www.rfc-editor.org/rfc/rfc1952#page-6
+  return buf[0] === 0x1F && buf[1] === 0x8B && buf[2] === 0x08;
+}
+
+/** Decode a gzipped _or_ plain text ArrayBuffer to a decoded string */
+export async function arrayBufferToString(ab: ArrayBuffer): Promise<string> {
+  if (isGzip(ab)) {
+    return await decompress(ab);
+  }
+  const str = new TextDecoder('utf-8').decode(ab);
+  return str;
+}
+
+export async function fileToString(file: File): Promise<string> {
+  let stream = file.stream();
+  if (file.type.endsWith('gzip')) {
+    stream = decompressStream(stream);
+  }
+  const arrayBuffer = await new Response(stream).arrayBuffer();
+  const str = new TextDecoder('utf-8').decode(arrayBuffer);
+  return str;
+}
+
+/**
+ * Decompress a gzipped ArrayBuffer to a string.
+ * Consider using `arrayBufferToString` instead, which can handle both gzipped and plain text buffers.
+ */
+export async function decompress(gzippedBuffer: ArrayBuffer): Promise<string> {
+  const buffer = await gzipCodec(gzippedBuffer, new DecompressionStream('gzip'));
+  const str = new TextDecoder('utf-8').decode(buffer);
+  return str;
+}
+export async function compress(str: string): Promise<ArrayBuffer> {
+  const encoded = new TextEncoder().encode(str);
+  const buffer = await gzipCodec(encoded, new CompressionStream('gzip'));
+  return buffer;
+}
+
+// Private coder/decoder
+function gzipCodec(buffer: Uint8Array<ArrayBufferLike>|ArrayBuffer, codecStream: CompressionStream|DecompressionStream):
+    Promise<ArrayBuffer> {
+  const {readable, writable} = new TransformStream();
+  const codecReadable = readable.pipeThrough(codecStream);
+
+  const writer = writable.getWriter();
+  void writer.write(buffer);
+  void writer.close();
+  // A response is a convenient way to get an ArrayBuffer from a ReadableStream.
+  return new Response(codecReadable).arrayBuffer();
+}
+
+export function decompressStream(stream: ReadableStream): ReadableStream {
+  // https://github.com/wicg/compression/blob/main/explainer.md#deflate-compress-an-arraybuffer
+  const ds = new DecompressionStream('gzip');
+  return stream.pipeThrough(ds);
+}
+export function compressStream(stream: ReadableStream): ReadableStream {
+  const cs = new CompressionStream('gzip');
+  return stream.pipeThrough(cs);
+}

package/front_end/core/common/ResourceType.ts

@@ -38,119 +38,119 @@ import {ParsedURL} from './ParsedURL.js';
 
 const UIStrings = {
   /**
-   *@description Text that appears in a tooltip the fetch and xhr resource types filter.
+   * @description Text that appears in a tooltip the fetch and xhr resource types filter.
    */
   fetchAndXHR: '`Fetch` and `XHR`',
   /**
-   *@description Text that appears in a tooltip for the JavaScript types filter.
+   * @description Text that appears in a tooltip for the JavaScript types filter.
    */
   javascript: 'JavaScript',
   /**
-   *@description Text that appears on a button for the JavaScript resource type filter.
+   * @description Text that appears on a button for the JavaScript resource type filter.
    */
   js: 'JS',
   /**
-   *@description Text that appears on a button for the css resource type filter.
+   * @description Text that appears on a button for the css resource type filter.
    */
   css: 'CSS',
   /**
-   *@description Text that appears on a button for the image resource type filter.
+   * @description Text that appears on a button for the image resource type filter.
    */
   img: 'Img',
   /**
-   *@description Text that appears on a button for the media resource type filter.
+   * @description Text that appears on a button for the media resource type filter.
    */
   media: 'Media',
   /**
-   *@description Text that appears on a button for the font resource type filter.
+   * @description Text that appears on a button for the font resource type filter.
    */
   font: 'Font',
   /**
-   *@description Text that appears on a button for the document resource type filter.
+   * @description Text that appears on a button for the document resource type filter.
    */
   doc: 'Doc',
   /**
-   *@description Text that appears on a button for the websocket, webtransport, directsocket resource type filter.
+   * @description Text that appears on a button for the websocket, webtransport, directsocket resource type filter.
    */
   socketShort: 'Socket',
   /**
-   *@description Text that appears in a tooltip for the WebAssembly types filter.
+   * @description Text that appears in a tooltip for the WebAssembly types filter.
    */
   webassembly: 'WebAssembly',
   /**
-   *@description Text that appears on a button for the WebAssembly resource type filter.
+   * @description Text that appears on a button for the WebAssembly resource type filter.
    */
   wasm: 'Wasm',
   /**
-   *@description Text that appears on a button for the manifest resource type filter.
+   * @description Text that appears on a button for the manifest resource type filter.
    */
   manifest: 'Manifest',
   /**
-   *@description Text for other types of items
+   * @description Text for other types of items
    */
   other: 'Other',
   /**
-   *@description Name of a network resource type
+   * @description Name of a network resource type
    */
   document: 'Document',
   /**
-   *@description Name of a network resource type
+   * @description Name of a network resource type
    */
   stylesheet: 'Stylesheet',
   /**
-   *@description Text in Image View of the Sources panel
+   * @description Text in Image View of the Sources panel
    */
   image: 'Image',
   /**
-   *@description Label for a group of JavaScript files
+   * @description Label for a group of JavaScript files
    */
   script: 'Script',
   /**
-   *@description Name of a network resource type
+   * @description Name of a network resource type
    */
   texttrack: 'TextTrack',
   /**
-   *@description Name of a network resource type
+   * @description Name of a network resource type
    */
   fetch: 'Fetch',
   /**
-   *@description Name of a network resource type
+   * @description Name of a network resource type
    */
   eventsource: 'EventSource',
   /**
-   *@description Name of a network resource type
+   * @description Name of a network resource type
    */
   websocket: 'WebSocket',
   /**
-   *@description Name of a network resource type
+   * @description Name of a network resource type
    */
   webtransport: 'WebTransport',
   /**
-   *@description Name of a network resource type
+   * @description Name of a network resource type
    */
   directsocket: 'DirectSocket',
   /**
-   *@description Name of a network resource type
+   * @description Name of a network resource type
    */
   signedexchange: 'SignedExchange',
   /**
-   *@description Name of a network resource type
+   * @description Name of a network resource type
    */
   ping: 'Ping',
   /**
-   *@description Name of a network resource type
+   * @description Name of a network resource type
    */
   cspviolationreport: 'CSPViolationReport',
   /**
-   *@description Name of a network initiator type
+   * @description Name of a network initiator type
    */
   preflight: 'Preflight',
   /**
-   *@description Name of a network initiator type
+   * @description Name of a network initiator type
    */
   webbundle: 'WebBundle',
   /**
-   *@description Name of a network initiator type for FedCM requests
+   * @description Name of a network initiator type for FedCM requests
    */
   fedcm: 'FedCM',
 } as const;

package/front_end/core/common/ReturnToPanel.ts

@@ -0,0 +1,15 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Set instance of this class as flavor to mark what panel triggered the
+// 'elements.toggle-element-search' action if it was not the elements panel.
+// This will cause specified panel to be made visible instead of the elements
+// panel after the inspection is done.
+export class ReturnToPanelFlavor {
+  readonly viewId: string;
+
+  constructor(viewId: string) {
+    this.viewId = viewId;
+  }
+}

package/front_end/core/common/Revealer.ts

@@ -7,43 +7,43 @@ import type * as Platform from '../platform/platform.js';
 
 const UIStrings = {
   /**
-   *@description The UI destination when right clicking an item that can be revealed
+   * @description The UI destination when right clicking an item that can be revealed
    */
   elementsPanel: 'Elements panel',
   /**
-   *@description The UI destination when right clicking an item that can be revealed
+   * @description The UI destination when right clicking an item that can be revealed
    */
   stylesSidebar: 'styles sidebar',
   /**
-   *@description The UI destination when right clicking an item that can be revealed
+   * @description The UI destination when right clicking an item that can be revealed
    */
   changesDrawer: 'Changes drawer',
   /**
-   *@description The UI destination when right clicking an item that can be revealed
+   * @description The UI destination when right clicking an item that can be revealed
    */
   issuesView: 'Issues view',
   /**
-   *@description The UI destination when right clicking an item that can be revealed
+   * @description The UI destination when right clicking an item that can be revealed
    */
   networkPanel: 'Network panel',
   /**
-   *@description The UI destination when right clicking an item that can be revealed
+   * @description The UI destination when right clicking an item that can be revealed
    */
   applicationPanel: 'Application panel',
   /**
-   *@description The UI destination when right clicking an item that can be revealed
+   * @description The UI destination when right clicking an item that can be revealed
    */
   securityPanel: 'Security panel',
   /**
-   *@description The UI destination when right clicking an item that can be revealed
+   * @description The UI destination when right clicking an item that can be revealed
    */
   sourcesPanel: 'Sources panel',
   /**
-   *@description The UI destination when right clicking an item that can be revealed
+   * @description The UI destination when right clicking an item that can be revealed
    */
   timelinePanel: 'Performance panel',
   /**
-   *@description The UI destination when right clicking an item that can be revealed
+   * @description The UI destination when right clicking an item that can be revealed
    */
   memoryInspectorPanel: 'Memory inspector panel',
   /**

package/front_end/core/common/SettingRegistration.ts

@@ -10,74 +10,74 @@ import type {SettingStorageType} from './Settings.js';
 
 const UIStrings = {
   /**
-   *@description Title of the Elements Panel
+   * @description Title of the Elements Panel
    */
   elements: 'Elements',
   /**
-   *@description Text for DevTools AI
+   * @description Text for DevTools AI
    */
   ai: 'AI',
   /**
-   *@description Text for DevTools appearance
+   * @description Text for DevTools appearance
    */
   appearance: 'Appearance',
   /**
-   *@description Name of the Sources panel
+   * @description Name of the Sources panel
    */
   sources: 'Sources',
   /**
-   *@description Title of the Network tool
+   * @description Title of the Network tool
    */
   network: 'Network',
   /**
-   *@description Text for the performance of something
+   * @description Text for the performance of something
    */
   performance: 'Performance',
   /**
-   *@description Title of the Console tool
+   * @description Title of the Console tool
    */
   console: 'Console',
   /**
-   *@description A title of the 'Persistence' setting category
+   * @description A title of the 'Persistence' setting category
    */
   persistence: 'Persistence',
   /**
-   *@description Text that refers to the debugger
+   * @description Text that refers to the debugger
    */
   debugger: 'Debugger',
   /**
-   *@description Text describing global shortcuts and settings that are available throughout the DevTools
+   * @description Text describing global shortcuts and settings that are available throughout the DevTools
    */
   global: 'Global',
   /**
-   *@description Title of the Rendering tool
+   * @description Title of the Rendering tool
    */
   rendering: 'Rendering',
   /**
-   *@description Title of a section on CSS Grid tooling
+   * @description Title of a section on CSS Grid tooling
    */
   grid: 'Grid',
   /**
-   *@description Text for the mobile platform, as opposed to desktop
+   * @description Text for the mobile platform, as opposed to desktop
    */
   mobile: 'Mobile',
   /**
-   *@description Text for the memory of the page
+   * @description Text for the memory of the page
    */
   memory: 'Memory',
   /**
-   *@description Text for the extension of the page
+   * @description Text for the extension of the page
    */
   extension: 'Extension',
   /**
-   *@description Text for the adorner of the page
+   * @description Text for the adorner of the page
    */
   adorner: 'Adorner',
   /**
-   * @description Header for the "Sync" section in the settings UI. The "Sync"
-   * section allows users to configure which DevTools data is synced via Chrome Sync.
+   * @description Header for the "Account" section in the settings UI. The "Account"
+   * section allows users see their signed in account and configure which DevTools data is synced via Chrome Sync.
    */
-  sync: 'Sync',
+  account: 'Account',
   /**
    * @description Text for the privacy section of the page.
    */
@@ -148,7 +148,7 @@ export const enum SettingCategory {
   MEMORY = 'MEMORY',
   EXTENSIONS = 'EXTENSIONS',
   ADORNER = 'ADORNER',
-  SYNC = 'SYNC',
+  ACCOUNT = 'ACCOUNT',
   PRIVACY = 'PRIVACY',
 }
 
@@ -190,8 +190,8 @@ export function getLocalizedSettingsCategory(category: SettingCategory): Platfor
       return i18nString(UIStrings.adorner);
     case SettingCategory.NONE:
       return i18n.i18n.lockedString('');
-    case SettingCategory.SYNC:
-      return i18nString(UIStrings.sync);
+    case SettingCategory.ACCOUNT:
+      return i18nString(UIStrings.account);
     case SettingCategory.PRIVACY:
       return i18nString(UIStrings.privacy);
   }