chrome-devtools-frontend 1.0.1657110 → 1.0.1660788

package/front_end/core/common/ResourceType.ts

@@ -38,7 +38,7 @@ 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 for the Fetch and XHR resource types filter.
    */
   fetchAndXHR: '`Fetch` and `XHR`',
   /**
@@ -50,7 +50,7 @@ const UIStrings = {
    */
   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',
   /**
@@ -70,7 +70,7 @@ const UIStrings = {
    */
   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, and DirectSocket resource type filter.
    */
   socketShort: 'Socket',
   /**
@@ -86,67 +86,67 @@ const UIStrings = {
    */
   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 for FedCM requests
+   * @description Name of a network initiator type for FedCM requests.
    */
   fedcm: 'FedCM',
 } as const;

package/front_end/core/common/Revealer.ts

@@ -7,55 +7,55 @@ 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',
+  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.
    */
   requestConditionsDrawer: 'Request conditions 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.
    */
   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.
    */
   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',
   /**
-   * @description The UI destination when revealing loaded resources through the Developer Resources Panel
+   * @description The UI destination when revealing loaded resources through the Developer resources panel.
    */
-  developerResourcesPanel: 'Developer Resources panel',
+  developerResourcesPanel: 'Developer resources panel',
   /**
-   * @description The UI destination when revealing loaded resources through the Animations panel
+   * @description The UI destination when revealing loaded resources through the Animations panel.
    */
   animationsPanel: 'Animations panel',
   /**
-   * @description The UI destination when revealing an item in the Lighthouse panel
+   * @description The UI destination when revealing an item in the Lighthouse panel.
    */
   lighthousePanel: 'Lighthouse panel',
 } as const;

package/front_end/core/common/SettingRegistration.ts

@@ -10,76 +10,76 @@ 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 Title of the Sources panel.
    */
   sources: 'Sources',
   /**
-   * @description Title of the Network tool
+   * @description Title of the Network panel.
    */
   network: 'Network',
   /**
-   * @description Text for the performance of something
+   * @description Title of the Performance panel.
    */
   performance: 'Performance',
   /**
-   * @description Title of the Console tool
+   * @description Title of the Console panel.
    */
   console: 'Console',
   /**
-   * @description A title of the 'Persistence' setting category
+   * @description Title of the Persistence setting category.
    */
   persistence: 'Persistence',
   /**
-   * @description Text that refers to the debugger
+   * @description Title of the Debugger setting category.
    */
   debugger: 'Debugger',
   /**
-   * @description Text describing global shortcuts and settings that are available throughout the DevTools
+   * @description Title of the Global setting category for shortcuts and settings available throughout 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 the Grid setting category for CSS Grid tooling.
    */
   grid: 'Grid',
   /**
-   * @description Text for the mobile platform, as opposed to desktop
+   * @description Title of the Mobile setting category.
    */
   mobile: 'Mobile',
   /**
-   * @description Text for the memory of the page
+   * @description Title of the Memory panel setting category.
    */
   memory: 'Memory',
   /**
-   * @description Text for the extension of the page
+   * @description Title of the Extension setting category.
    */
   extension: 'Extension',
   /**
-   * @description Text for the adorner of the page
+   * @description Title of the Adorner setting category.
    */
   adorner: 'Adorner',
   /**
-   * @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.
+   * @description Header for the Account section in the settings UI. The Account
+   * section allows users to see their signed-in account and configure which DevTools data is synced via Chrome Sync.
    */
   account: 'Account',
   /**
-   * @description Text for the privacy section of the page.
+   * @description Title of the Privacy setting category.
    */
   privacy: 'Privacy',
 } as const;

package/front_end/core/host/AidaClient.ts

@@ -63,6 +63,7 @@ const AidaLanguageToMarkdown: Record<AidaInferenceLanguage, string> = {
 
 export class AidaAbortError extends Error {}
 export class AidaBlockError extends Error {}
+export class AidaQuotaError extends Error {}
 
 interface AiStream {
   write: (data: string) => Promise<void>;
@@ -185,12 +186,23 @@ export class AidaClient {
           debugLog('doConversation failed with error:', JSON.stringify(err));
           if (err instanceof DispatchHttpRequestClient.DispatchHttpRequestError && err.response) {
             const result = err.response;
+            if (result.statusCode === 429) {
+              stream.fail(new AidaQuotaError('Server responded: quota exceeded'));
+              return;
+            }
             if (result.statusCode === 403) {
               stream.fail(new Error('Server responded: permission denied'));
               return;
             }
             if ('error' in result && result.error) {
-              stream.fail(new Error(`Cannot send request: ${result.error} ${result.detail || ''}`));
+              const errorStr = typeof result.error === 'string' ? result.error : '';
+              const detailStr = typeof result.detail === 'string' ? result.detail : '';
+              if (errorStr.toLowerCase().includes('quota') || detailStr.toLowerCase().includes('quota')) {
+                stream.fail(new AidaQuotaError(
+                    `Cannot send request: ${result.error}${result.detail ? ` ${result.detail}` : ''}`));
+                return;
+              }
+              stream.fail(new Error(`Cannot send request: ${result.error}${result.detail ? ` ${result.detail}` : ''}`));
               return;
             }
             if ('netErrorName' in result && result.netErrorName === 'net::ERR_TIMED_OUT') {
@@ -249,6 +261,9 @@ export class AidaClient {
             thoughtSignature: result.functionCallChunk.functionCall.thoughtSignature,
           });
         } else if ('error' in result) {
+          if (typeof result.error === 'string' && result.error.toLowerCase().includes('quota')) {
+            throw new AidaQuotaError(`Server responded: ${JSON.stringify(result)}`);
+          }
           throw new Error(`Server responded: ${JSON.stringify(result)}`);
         } else {
           throw new Error(`Unknown chunk result ${JSON.stringify(result)}`);
@@ -435,21 +450,32 @@ export function getClientFeatureName(feature: ClientFeature): string {
   return name;
 }
 
-let hostConfigTrackerInstance: HostConfigTracker|undefined;
-
 export class HostConfigTracker extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   #pollTimer?: ReturnType<typeof setTimeout>;
   #aidaAvailability?: AidaAccessPreconditions;
 
-  private constructor() {
-    super();
+  static instance({forceNew}: {
+    forceNew: boolean,
+  } = {forceNew: false}): HostConfigTracker {
+    if (!Root.DevToolsContext.globalInstance().has(HostConfigTracker) || forceNew) {
+      Root.DevToolsContext.globalInstance().set(
+          HostConfigTracker,
+          new HostConfigTracker(),
+      );
+    }
+    return Root.DevToolsContext.globalInstance().get(HostConfigTracker);
+  }
+
+  dispose(): void {
+    clearTimeout(this.#pollTimer);
+    this.listeners = undefined;
   }
 
-  static instance(): HostConfigTracker {
-    if (!hostConfigTrackerInstance) {
-      hostConfigTrackerInstance = new HostConfigTracker();
+  static removeInstance(): void {
+    if (Root.DevToolsContext.globalInstance().has(HostConfigTracker)) {
+      Root.DevToolsContext.globalInstance().get(HostConfigTracker).dispose();
+      Root.DevToolsContext.globalInstance().delete(HostConfigTracker);
     }
-    return hostConfigTrackerInstance;
   }
 
   override addEventListener(eventType: Events, listener: Common.EventTarget.EventListener<EventTypes, Events>):

package/front_end/core/host/GdpClient.ts

@@ -98,21 +98,24 @@ async function makeHttpRequest<R>(request: DispatchHttpRequestRequest): Promise<
 }
 
 const SERVICE_NAME = 'gdpService';
-let gdpClientInstance: GdpClient|null = null;
 export class GdpClient {
   #cachedProfilePromise?: Promise<Profile>;
   #cachedEligibilityPromise?: Promise<CheckElibigilityResponse>;
 
-  private constructor() {
-  }
-
   static instance({forceNew}: {
     forceNew: boolean,
   } = {forceNew: false}): GdpClient {
-    if (!gdpClientInstance || forceNew) {
-      gdpClientInstance = new GdpClient();
+    if (!Root.DevToolsContext.globalInstance().has(GdpClient) || forceNew) {
+      Root.DevToolsContext.globalInstance().set(
+          GdpClient,
+          new GdpClient(),
+      );
     }
-    return gdpClientInstance;
+    return Root.DevToolsContext.globalInstance().get(GdpClient);
+  }
+
+  static removeInstance(): void {
+    Root.DevToolsContext.globalInstance().delete(GdpClient);
   }
 
   /**

package/front_end/core/platform/StringUtilities.ts

@@ -4,6 +4,8 @@
 
 import type {Brand} from './Brand.js';
 
+let graphemeSegmenter: Intl.Segmenter|null = null;
+
 export const escapeCharacters = (inputString: string, charsToEscape: string): string => {
   let foundChar = false;
   for (let i = 0; i < charsToEscape.length; ++i) {
@@ -447,6 +449,39 @@ export const trimEndWithMaxLength = (str: string, maxLength: number): string =>
   return str.slice(0, lastSegmentIndex) + ellipsis;
 };
 
+/**
+ * Truncates a string to not exceed a maximum number of UTF-16 code units (as measured by JS `string.length`).
+ *
+ * Unlike simple character limiters, this helper is grapheme-aware and uses `Intl.Segmenter` to prevent
+ * slicing inside surrogate pairs (e.g. Plane 1+ characters or emojis like '𠜎' / '🥳') or combining characters
+ * (e.g. 'é' represented in NFD as 'e' + combining acute accent). If the limit falls in the middle of a
+ * grapheme cluster, the function backs off to drop the entire cluster, ensuring the result is always a valid
+ * Unicode string.
+ *
+ * @param str The string to truncate.
+ * @param maxCodeUnits The maximum allowed code unit length (must be >= 0).
+ * @returns The truncated string, guaranteed to be <= maxCodeUnits in length and grapheme-safe.
+ */
+export const truncateToCodeUnitLength = (str: string, maxCodeUnits: number): string => {
+  if (isNaN(maxCodeUnits) || maxCodeUnits <= 0) {
+    return '';
+  }
+  if (str.length <= maxCodeUnits) {
+    return str;
+  }
+  if (!graphemeSegmenter) {
+    graphemeSegmenter = new Intl.Segmenter(undefined, {granularity: 'grapheme'});
+  }
+  let lastSafeIndex = 0;
+  for (const {index, segment} of graphemeSegmenter.segment(str)) {
+    if (index + segment.length > maxCodeUnits) {
+      break;
+    }
+    lastSafeIndex = index + segment.length;
+  }
+  return str.slice(0, lastSafeIndex);
+};
+
 export const escapeForRegExp = (str: string): string => {
   return escapeCharacters(str, SPECIAL_REGEX_CHARACTERS);
 };

package/front_end/core/sdk/AccessibilityModel.snapshot.txt

@@ -0,0 +1,17 @@
+Title: AccessibilityModel axNodeToText correctly formats an accessibility node tree to text
+Content:
+dialog "Confirmation"
+  button "Submit" focusable: true
+=== end content
+
+Title: AccessibilityModel axNodeToText correctly formats when the root node is ignored
+Content:
+Ignored
+  button "Submit" focusable: true
+=== end content
+
+Title: AccessibilityModel axNodeToText correctly formats when a nested node is ignored
+Content:
+dialog "Confirmation"
+  button "Submit" focusable: true
+=== end content

package/front_end/core/sdk/AccessibilityModel.ts

@@ -3,9 +3,10 @@
 // found in the LICENSE file.
 
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
-import type * as Protocol from '../../generated/protocol.js';
+import * as Protocol from '../../generated/protocol.js';
 
-import {DeferredDOMNode, DOMModel, type DOMNode, Events as DOMModelEvents} from './DOMModel.js';
+import {DeferredDOMNode, DOMDocument, DOMModel, type DOMNode, Events as DOMModelEvents} from './DOMModel.js';
+import type {FrameManager} from './FrameManager.js';
 import {SDKModel} from './SDKModel.js';
 import {Capability, type Target} from './Target.js';
 
@@ -23,6 +24,7 @@ export interface CoreOrProtocolAxProperty {
 
 export class AccessibilityNode {
   readonly #accessibilityModel: AccessibilityModel;
+  readonly #frameManager: FrameManager;
   readonly #id: Protocol.Accessibility.AXNodeId;
   readonly #backendDOMNodeId: Protocol.DOM.BackendNodeId|null;
   readonly #deferredDOMNode: DeferredDOMNode|null;
@@ -39,6 +41,7 @@ export class AccessibilityNode {
 
   constructor(accessibilityModel: AccessibilityModel, payload: Protocol.Accessibility.AXNode) {
     this.#accessibilityModel = accessibilityModel;
+    this.#frameManager = accessibilityModel.target().targetManager().getFrameManager();
 
     this.#id = payload.nodeId;
     accessibilityModel.setAXNodeForAXId(this.#id, this);
@@ -190,6 +193,63 @@ export class AccessibilityNode {
   getFrameId(): Protocol.Page.FrameId|null {
     return this.#frameId || this.parentNode()?.getFrameId() || null;
   }
+
+  isLeafNode(): boolean {
+    return this.numChildren() === 0 && this.role()?.value !== 'Iframe';
+  }
+
+  getNodeId(): string {
+    return this.getFrameId() + '#' + this.id();
+  }
+
+  async getChildren(): Promise<AccessibilityNode[]> {
+    if (this.role()?.value === 'Iframe') {
+      const domNode = await this.deferredDOMNode()?.resolvePromise();
+      if (!domNode) {
+        throw new Error('Could not find corresponding DOMNode');
+      }
+      const frameId = domNode.frameOwnerFrameId();
+      if (!frameId) {
+        throw new Error('No owner frameId on iframe node');
+      }
+      const localRoot = await getRootNode(frameId, this.#frameManager);
+      return [localRoot];
+    }
+    return await this.accessibilityModel().requestAXChildren(this.id(), this.getFrameId() || undefined);
+  }
+
+  async axNodeToText(depth = 0): Promise<string> {
+    const indent = '  '.repeat(depth);
+    const role = this.role()?.value || '';
+    const name = this.name()?.value || '';
+    const properties = this.properties() || [];
+    const ignored = this.ignored();
+    let childDepth = depth + 1;
+
+    const lines = [];
+    if (ignored) {
+      if (depth === 0) {
+        lines.push('Ignored\n');
+      } else {
+        childDepth = depth;
+      }
+    } else {
+      let line = `${indent}${role} "${name}"`;
+      for (const prop of properties) {
+        if (prop.value && isPrintableType(prop.value.type)) {
+          line += ` ${prop.name}: ${prop.value.value}`;
+        }
+      }
+      lines.push(line + '\n');
+    }
+
+    const children = await this.getChildren();
+    for (const child of children) {
+      lines.push(await child.axNodeToText(childDepth));
+    }
+
+    return lines.join('');
+  }
 }
 
 export const enum Events {
@@ -363,3 +423,73 @@ export class AccessibilityModel extends SDKModel<EventTypes> implements Protocol
 }
 
 SDKModel.register(AccessibilityModel, {capabilities: Capability.DOM, autostart: false});
+
+function getModel(frameId: Protocol.Page.FrameId, frameManager: FrameManager): AccessibilityModel {
+  const frame = frameManager.getFrame(frameId);
+  const model = frame?.resourceTreeModel().target().model(AccessibilityModel);
+  if (!model) {
+    throw new Error('Could not instantiate model for frameId');
+  }
+  return model;
+}
+
+export async function getRootNode(frameId: Protocol.Page.FrameId,
+                                  frameManager: FrameManager): Promise<AccessibilityNode> {
+  const model = getModel(frameId, frameManager);
+  const root = await model.requestRootNode(frameId);
+  if (!root) {
+    throw new Error('No accessibility root for frame');
+  }
+  return root;
+}
+
+function getFrameIdForNodeOrDocument(node: DOMNode): Protocol.Page.FrameId {
+  let frameId;
+  if (node instanceof DOMDocument) {
+    frameId = node.body?.frameId();
+  } else {
+    frameId = node.frameId();
+  }
+  if (!frameId) {
+    throw new Error('No frameId for DOM node');
+  }
+  return frameId;
+}
+
+export async function getNodeAndAncestorsFromDOMNode(domNode: DOMNode): Promise<AccessibilityNode[]> {
+  const frameManager = domNode.domModel().target().targetManager().getFrameManager();
+  let frameId = getFrameIdForNodeOrDocument(domNode);
+  const model = getModel(frameId, frameManager);
+  const result = await model.requestAndLoadSubTreeToNode(domNode);
+  if (!result) {
+    throw new Error('Could not retrieve accessibility node for inspected DOM node');
+  }
+
+  const outermostFrameId = frameManager.getOutermostFrame()?.id;
+  if (!outermostFrameId) {
+    return result;
+  }
+  while (frameId !== outermostFrameId) {
+    const node = await frameManager.getFrame(frameId)?.getOwnerDOMNodeOrDocument();
+    if (!node) {
+      break;
+    }
+    frameId = getFrameIdForNodeOrDocument(node);
+    const model = getModel(frameId, frameManager);
+    const ancestors = await model.requestAndLoadSubTreeToNode(node);
+    result.push(...ancestors || []);
+  }
+  return result;
+}
+
+export function isPrintableType(valueType: Protocol.Accessibility.AXValueType): boolean {
+  switch (valueType) {
+    case Protocol.Accessibility.AXValueType.Boolean:
+    case Protocol.Accessibility.AXValueType.BooleanOrUndefined:
+    case Protocol.Accessibility.AXValueType.String:
+    case Protocol.Accessibility.AXValueType.Number:
+      return true;
+    default:
+      return false;
+  }
+}

package/front_end/core/sdk/CPUThrottlingManager.ts

@@ -19,7 +19,10 @@ export class CPUThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Eve
     super();
     this.#targetManager = targetManager;
     this.#cpuThrottlingRate = 1;  // No throttling
-    targetManager.observeModels(EmulationModel, this);
+  }
+
+  initialize(): void {
+    this.#targetManager.observeModels(EmulationModel, this);
   }
 
   static instance(opts: {
@@ -29,10 +32,10 @@ export class CPUThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Eve
   } = {forceNew: null}): CPUThrottlingManager {
     const {forceNew} = opts;
     if (!Root.DevToolsContext.globalInstance().has(CPUThrottlingManager) || forceNew) {
-      Root.DevToolsContext.globalInstance().set(
-          CPUThrottlingManager,
-          new CPUThrottlingManager(opts.settings ?? Common.Settings.Settings.instance(),
-                                   opts.targetManager ?? TargetManager.instance()));
+      const manager = new CPUThrottlingManager(opts.settings ?? Common.Settings.Settings.instance(),
+                                               opts.targetManager ?? TargetManager.instance());
+      manager.initialize();
+      Root.DevToolsContext.globalInstance().set(CPUThrottlingManager, manager);
     }
 
     return Root.DevToolsContext.globalInstance().get(CPUThrottlingManager);