chrome-devtools-frontend 1.0.1666631 → 1.0.1667564

package/front_end/core/host/AidaClient.ts

@@ -456,6 +456,10 @@ export class HostConfigTracker extends Common.ObjectWrapper.ObjectWrapper<EventT
   #pollTimer?: ReturnType<typeof setTimeout>;
   #aidaAvailability?: AidaAccessPreconditions;
 
+  get aidaAvailability(): AidaAccessPreconditions|undefined {
+    return this.#aidaAvailability;
+  }
+
   static instance({forceNew}: {
     forceNew: boolean,
   } = {forceNew: false}): HostConfigTracker {
@@ -507,9 +511,7 @@ export class HostConfigTracker extends Common.ObjectWrapper.ObjectWrapper<EventT
       const config =
           await new Promise<Root.Runtime.HostConfig>(resolve => InspectorFrontendHostInstance.getHostConfig(resolve));
       Object.assign(Root.Runtime.hostConfig, config);
-      // TODO(crbug.com/442545623): Send `currentAidaAvailability` to the listeners as part of the event so that
-      // `await AidaClient.checkAccessPreconditions()` does not need to be called again in the event handlers.
-      this.dispatchEventToListeners(Events.AIDA_AVAILABILITY_CHANGED);
+      this.dispatchEventToListeners(Events.AIDA_AVAILABILITY_CHANGED, currentAidaAvailability);
     }
   }
 }
@@ -519,7 +521,7 @@ export const enum Events {
 }
 
 export interface EventTypes {
-  [Events.AIDA_AVAILABILITY_CHANGED]: void;
+  [Events.AIDA_AVAILABILITY_CHANGED]: AidaAccessPreconditions;
 }
 
 export function isQuotaError(...inputs: Array<string|undefined>): boolean {

package/front_end/core/host/InspectorFrontendHostAPI.ts

@@ -556,5 +556,6 @@ export const enum EnumeratedHistogram {
   LighthouseCategoryUsed = 'DevTools.LighthouseCategoryUsed',
   SwatchActivated = 'DevTools.SwatchActivated',
   BuiltInAiAvailability = 'DevTools.BuiltInAiAvailability',
+  ResendRequest = 'DevTools.ResendRequest',
   // LINT.ThenChange(/front_end/devtools_compatibility.js:EnumeratedHistogram)
 }

package/front_end/core/host/InspectorFrontendHostStub.ts

@@ -118,15 +118,15 @@ export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
   }
 
   setIsDocked(_isDocked: boolean, callback: () => void): void {
-    window.setTimeout(callback, 0);
+    globalThis.setTimeout(callback, 0);
   }
 
   showSurvey(_trigger: string, callback: (arg0: ShowSurveyResult) => void): void {
-    window.setTimeout(() => callback({surveyShown: false}), 0);
+    globalThis.setTimeout(() => callback({surveyShown: false}), 0);
   }
 
   canShowSurvey(_trigger: string, callback: (arg0: CanShowSurveyResult) => void): void {
-    window.setTimeout(() => callback({canShowSurvey: false}), 0);
+    globalThis.setTimeout(() => callback({canShowSurvey: false}), 0);
   }
 
   /**

package/front_end/core/host/UserMetrics.ts

@@ -2,6 +2,8 @@
 // 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/common.js';
+
 import {InspectorFrontendHostInstance} from './InspectorFrontendHost.js';
 import {EnumeratedHistogram} from './InspectorFrontendHostAPI.js';
 
@@ -29,6 +31,11 @@ export class UserMetrics {
     InspectorFrontendHostInstance.recordEnumeratedHistogram(EnumeratedHistogram.ActionTaken, action, Action.MAX_VALUE);
   }
 
+  resendRequest(resourceType: ResendRequestType): void {
+    InspectorFrontendHostInstance.recordEnumeratedHistogram(EnumeratedHistogram.ResendRequest, resourceType,
+                                                            ResendRequestType.MAX_VALUE);
+  }
+
   keybindSetSettingChanged(keybindSet: string): void {
     const value = KeybindSetSettings[keybindSet as keyof typeof KeybindSetSettings] || 0;
     InspectorFrontendHostInstance.recordEnumeratedHistogram(
@@ -253,7 +260,6 @@ export class UserMetrics {
     InspectorFrontendHostInstance.recordPerformanceHistogram(
         'DevTools.Insights.ShortTeaserGenerationTime', timeInMilliseconds);
   }
-
 }
 
 /**
@@ -1182,3 +1188,45 @@ export const enum BuiltInAiAvailability {
   DISABLED_NO_GPU = 9,
   MAX_VALUE = 10,
 }
+
+export const enum ResendRequestType {
+  XHR = 0,
+  FETCH = 1,
+  SCRIPT = 2,
+  STYLESHEET = 3,
+  IMAGE = 4,
+  MEDIA = 5,
+  FONT = 6,
+  WASM = 7,
+  MANIFEST = 8,
+  TEXT_TRACK = 9,
+  SOURCE_MAP_SCRIPT = 10,
+  SOURCE_MAP_STYLE_SHEET = 11,
+  DOCUMENT = 12,
+  PREFETCH = 13,
+  PING = 14,
+  OTHER = 15,
+  MAX_VALUE = 16,
+}
+
+const resendRequestTypeMap = new Map<Common.ResourceType.ResourceType, ResendRequestType>([
+  [Common.ResourceType.resourceTypes.XHR, ResendRequestType.XHR],
+  [Common.ResourceType.resourceTypes.Fetch, ResendRequestType.FETCH],
+  [Common.ResourceType.resourceTypes.Script, ResendRequestType.SCRIPT],
+  [Common.ResourceType.resourceTypes.Stylesheet, ResendRequestType.STYLESHEET],
+  [Common.ResourceType.resourceTypes.Image, ResendRequestType.IMAGE],
+  [Common.ResourceType.resourceTypes.Media, ResendRequestType.MEDIA],
+  [Common.ResourceType.resourceTypes.Font, ResendRequestType.FONT],
+  [Common.ResourceType.resourceTypes.Wasm, ResendRequestType.WASM],
+  [Common.ResourceType.resourceTypes.Manifest, ResendRequestType.MANIFEST],
+  [Common.ResourceType.resourceTypes.TextTrack, ResendRequestType.TEXT_TRACK],
+  [Common.ResourceType.resourceTypes.SourceMapScript, ResendRequestType.SOURCE_MAP_SCRIPT],
+  [Common.ResourceType.resourceTypes.SourceMapStyleSheet, ResendRequestType.SOURCE_MAP_STYLE_SHEET],
+  [Common.ResourceType.resourceTypes.Document, ResendRequestType.DOCUMENT],
+  [Common.ResourceType.resourceTypes.Prefetch, ResendRequestType.PREFETCH],
+  [Common.ResourceType.resourceTypes.Ping, ResendRequestType.PING],
+]);
+
+export function resendRequestType(resourceType: Common.ResourceType.ResourceType): ResendRequestType {
+  return resendRequestTypeMap.get(resourceType) ?? ResendRequestType.OTHER;
+}

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -52,7 +52,7 @@ import {
   CSSStyleRule,
 } from './CSSRule.js';
 import {CSSStyleDeclaration, Type} from './CSSStyleDeclaration.js';
-import type {DOMNode} from './DOMModel.js';
+import {type DOMNode, NodeType} from './DOMModel.js';
 
 function containsStyle(styles: CSSStyleDeclaration[]|Set<CSSStyleDeclaration>, query: CSSStyleDeclaration): boolean {
   if (!query.styleSheetId || !query.range) {
@@ -456,7 +456,7 @@ export class CSSMatchedStyles {
     }
 
     // Inline style takes precedence over regular and inherited rules.
-    if (inlinePayload && this.#node.nodeType() === Node.ELEMENT_NODE) {
+    if (inlinePayload && this.#node.nodeType() === NodeType.ELEMENT_NODE) {
       const style = new CSSStyleDeclaration(this.#cssModel, null, inlinePayload, Type.Inline);
       this.#nodeForStyle.set(style, this.#node);
       nodeStyles.push(style);
@@ -905,9 +905,6 @@ export class CSSMatchedStyles {
 
     const matchCascade = (cascade: DOMInheritanceCascade): CSSStyleRule|null => {
       for (const style of cascade.styles()) {
-        if (this.isInherited(style)) {
-          continue;
-        }
         const parentRule = style.parentRule;
         if (!(parentRule instanceof CSSStyleRule)) {
           continue;

package/front_end/core/sdk/CSSPropertyParserMatchers.ts

@@ -243,6 +243,18 @@ function getCssEvaluationElement(): HTMLElement {
   return cssEvaluationElement;
 }
 
+/**
+ * If a test calls localEvalCSS, an element is created on demand for this
+ * purpose. This element is not removed from the DOM and will leak between tests
+ * if not removed.
+ */
+export function removeCSSEvaluationElement(): void {
+  if (cssEvaluationElement) {
+    document.body.removeChild(cssEvaluationElement);
+    cssEvaluationElement = null;
+  }
+}
+
 /**
  * These functions use an element in the frontend to evaluate CSS. The advantage
  * of this is that it is synchronous and doesn't require a CDP method. The

package/front_end/core/sdk/Connections.ts

@@ -189,7 +189,7 @@ export class StubTransport implements ProtocolClient.ConnectionTransport.Connect
   }
 
   sendRawMessage(message: string): void {
-    window.setTimeout(this.respondWithError.bind(this, message), 0);
+    globalThis.setTimeout(this.respondWithError.bind(this, message), 0);
   }
 
   private respondWithError(message: string): void {

package/front_end/core/sdk/DOMModel.test.api.ts

@@ -0,0 +1,104 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {assert} from 'chai';
+
+import type * as Common from '../common/common.js';
+
+// eslint-disable-next-line @devtools/es-modules-import
+import * as SDK from './sdk.js';
+
+function findNode(node: SDK.DOMModel.DOMNode, predicate: (node: SDK.DOMModel.DOMNode) => boolean): SDK.DOMModel.DOMNode|
+    null {
+  if (predicate(node)) {
+    return node;
+  }
+  const children = node.children();
+  if (children) {
+    for (const child of children) {
+      const result = findNode(child, predicate);
+      if (result) {
+        return result;
+      }
+    }
+  }
+  return null;
+}
+
+describe('DOMModel API Test', () => {
+  it('generates attribute updated event only when attribute is actually changed', async ({inspectedPage, universe}) => {
+    const primaryTarget = universe.targetManager.primaryPageTarget();
+    assert.isNotNull(primaryTarget);
+
+    const domModel = primaryTarget.model(SDK.DOMModel.DOMModel);
+    assert.isNotNull(domModel);
+
+    await inspectedPage.goToHtml(`
+      <div id="container">
+          <div id="node-set-new-value" style="color:red"></div>
+          <div id="node-set-same-value" style="color:red"></div>
+      </div>
+    `);
+
+    const documentNode = await domModel.requestDocument();
+    assert.isNotNull(documentNode);
+
+    // Retrieve the subtree to populate the DOMModel cache.
+    await documentNode.getSubtree(5, true);
+
+    const container = findNode(documentNode, n => n.getAttribute('id') === 'container');
+    assert.isNotNull(container);
+
+    const nodeSetNewValue = findNode(documentNode, n => n.getAttribute('id') === 'node-set-new-value');
+    assert.isNotNull(nodeSetNewValue);
+
+    const nodeSetSameValue = findNode(documentNode, n => n.getAttribute('id') === 'node-set-same-value');
+    assert.isNotNull(nodeSetSameValue);
+
+    if (!nodeSetNewValue || !nodeSetSameValue) {
+      assert.fail('Could not find test nodes');
+    }
+
+    // Verifies that setting a new style attribute value triggers the AttrModified event.
+    let attrModifiedPromise = domModel.once(SDK.DOMModel.Events.AttrModified);
+
+    await inspectedPage.evaluate(() => {
+      (document.getElementById('node-set-new-value') as HTMLElement).style.setProperty('color', 'blue');
+    });
+
+    let eventData = await attrModifiedPromise;
+    assert.strictEqual(eventData.node, nodeSetNewValue);
+    assert.strictEqual(eventData.name, 'style');
+    assert.strictEqual(nodeSetNewValue.getAttribute('style'), 'color: blue;');
+
+    // Verifies that setting the style attribute to the same value does not trigger the AttrModified event.
+    let attrModifiedFired = false;
+    const listener =
+        (event: Common.EventTarget
+             .EventTargetEvent<SDK.DOMModel.EventTypes[SDK.DOMModel.Events.AttrModified], SDK.DOMModel.EventTypes>):
+            void => {
+              if (event.data.node === nodeSetSameValue) {
+                attrModifiedFired = true;
+              }
+            };
+    domModel.addEventListener(SDK.DOMModel.Events.AttrModified, listener);
+
+    await inspectedPage.evaluate(() => {
+      (document.getElementById('node-set-same-value') as HTMLElement).style.setProperty('color', 'red');
+    });
+
+    // Flushes pending events by triggering a style change on the new value node.
+    attrModifiedPromise = domModel.once(SDK.DOMModel.Events.AttrModified);
+
+    await inspectedPage.evaluate(() => {
+      (document.getElementById('node-set-new-value') as HTMLElement).style.setProperty('color', 'green');
+    });
+
+    eventData = await attrModifiedPromise;
+    assert.strictEqual(eventData.node, nodeSetNewValue);
+    assert.isFalse(attrModifiedFired, 'AttrModified should not have fired for same value');
+
+    domModel.removeEventListener(SDK.DOMModel.Events.AttrModified, listener);
+  });
+});

package/front_end/core/sdk/DOMModel.ts

@@ -50,6 +50,18 @@ import {SDKModel} from './SDKModel.js';
 import {Capability, type Target} from './Target.js';
 import type {TargetManager} from './TargetManager.js';
 
+export const enum NodeType {
+  ELEMENT_NODE = 1,
+  ATTRIBUTE_NODE = 2,
+  TEXT_NODE = 3,
+  CDATA_SECTION_NODE = 4,
+  PROCESSING_INSTRUCTION_NODE = 7,
+  COMMENT_NODE = 8,
+  DOCUMENT_NODE = 9,
+  DOCUMENT_TYPE_NODE = 10,
+  DOCUMENT_FRAGMENT_NODE = 11,
+}
+
 /** Keep this list in sync with https://w3c.github.io/aria/#state_prop_def **/
 export const ARIA_ATTRIBUTES = new Set<string>([
   'role',
@@ -297,7 +309,7 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
       this.#adProvenance = payload.adProvenance;
     }
 
-    if (this.#nodeType === Node.ELEMENT_NODE) {
+    if (this.#nodeType === NodeType.ELEMENT_NODE) {
       // HTML and BODY from internal iframes should not overwrite top-level ones.
       if (this.ownerDocument && !this.ownerDocument.documentElement && this.#nodeName === 'HTML') {
         this.ownerDocument.documentElement = this;
@@ -305,11 +317,11 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
       if (this.ownerDocument && !this.ownerDocument.body && this.#nodeName === 'BODY') {
         this.ownerDocument.body = this;
       }
-    } else if (this.#nodeType === Node.DOCUMENT_TYPE_NODE) {
+    } else if (this.#nodeType === NodeType.DOCUMENT_TYPE_NODE) {
       this.publicId = payload.publicId;
       this.systemId = payload.systemId;
       this.internalSubset = payload.internalSubset;
-    } else if (this.#nodeType === Node.ATTRIBUTE_NODE) {
+    } else if (this.#nodeType === NodeType.ATTRIBUTE_NODE) {
       this.name = payload.name;
       this.value = payload.value;
     }
@@ -354,7 +366,7 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
   }
 
   isRootNode(): boolean {
-    if (this.nodeType() === Node.ELEMENT_NODE && this.nodeName() === 'HTML') {
+    if (this.nodeType() === NodeType.ELEMENT_NODE && this.nodeName() === 'HTML') {
       return true;
     }
     return false;
@@ -762,7 +774,7 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
       if (node.isShadowRoot()) {
         return node.shadowRootType() === DOMNode.ShadowRootTypes.UserAgent ? 'u' : 'a';
       }
-      if (node.nodeType() === Node.DOCUMENT_NODE) {
+      if (node.nodeType() === NodeType.DOCUMENT_NODE) {
         return 'd';
       }
       return null;
@@ -1018,7 +1030,7 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
   }
 
   isCustomElement(): boolean {
-    if (this.nodeType() !== Node.ELEMENT_NODE || this.isXMLNode()) {
+    if (this.nodeType() !== NodeType.ELEMENT_NODE || this.isXMLNode()) {
       return false;
     }
     const localName = this.localName() || this.nodeName().toLowerCase();
@@ -1158,11 +1170,11 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
 
   enclosingElementOrSelf(): DOMNode|null {
     let node: DOMNode|null = this;
-    if (node && node.nodeType() === Node.TEXT_NODE && node.parentNode) {
+    if (node && node.nodeType() === NodeType.TEXT_NODE && node.parentNode) {
       node = node.parentNode;
     }
 
-    if (node && node.nodeType() !== Node.ELEMENT_NODE) {
+    if (node && node.nodeType() !== NodeType.ELEMENT_NODE) {
       node = null;
     }
     return node;
@@ -1223,7 +1235,7 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
 
   simpleSelector(): string {
     const lowerCaseName = this.localName() || this.nodeName().toLowerCase();
-    if (this.nodeType() !== Node.ELEMENT_NODE) {
+    if (this.nodeType() !== NodeType.ELEMENT_NODE) {
       return lowerCaseName;
     }
     const type = this.getAttribute('type');
@@ -1474,7 +1486,7 @@ export class DOMModel extends SDKModel<EventTypes> {
   #lastMutationId!: number;
   #pendingDocumentRequestPromise: Promise<DOMDocument|null>|null = null;
   #frameOwnerNode?: DOMNode|null;
-  #loadNodeAttributesTimeout?: number;
+  #loadNodeAttributesTimeout?: ReturnType<typeof setTimeout>;
   #searchId?: string;
   #topLayerThrottler = new Common.Throttler.Throttler(100);
   #topLayerNodes: DOMNode[] = [];
@@ -1663,7 +1675,7 @@ export class DOMModel extends SDKModel<EventTypes> {
   inlineStyleInvalidated(nodeIds: Protocol.DOM.NodeId[]): void {
     nodeIds.forEach(nodeId => this.#attributeLoadNodeIds.add(nodeId));
     if (!this.#loadNodeAttributesTimeout) {
-      this.#loadNodeAttributesTimeout = window.setTimeout(this.loadNodeAttributes.bind(this), 20);
+      this.#loadNodeAttributesTimeout = globalThis.setTimeout(this.loadNodeAttributes.bind(this), 20);
     }
   }
 

package/front_end/core/sdk/DebuggerModel.ts

@@ -144,7 +144,7 @@ export class DebuggerModel extends SDKModel<EventTypes> {
   #selectedCallFrame: CallFrame|null = null;
   #debuggerEnabled = false;
   #debuggerId: string|null = null;
-  #skipAllPausesTimeout = 0;
+  #skipAllPausesTimeout?: ReturnType<typeof setTimeout>;
   #beforePausedCallback: ((arg0: DebuggerPausedDetails, stepOver: Location|null) => Promise<boolean>)|null = null;
   #computeAutoStepRangesCallback: ((arg0: StepMode, arg1: CallFrame) => Promise<Array<{
                                      start: Location,
@@ -337,20 +337,20 @@ export class DebuggerModel extends SDKModel<EventTypes> {
   }
 
   private skipAllPauses(skip: boolean): void {
-    if (this.#skipAllPausesTimeout) {
-      clearTimeout(this.#skipAllPausesTimeout);
-      this.#skipAllPausesTimeout = 0;
-    }
+    clearTimeout(this.#skipAllPausesTimeout);
+
     void this.agent.invoke_setSkipAllPauses({skip});
   }
 
   skipAllPausesUntilReloadOrTimeout(timeout: number): void {
-    if (this.#skipAllPausesTimeout) {
-      clearTimeout(this.#skipAllPausesTimeout);
-    }
+    clearTimeout(this.#skipAllPausesTimeout);
+
     void this.agent.invoke_setSkipAllPauses({skip: true});
     // If reload happens before the timeout, the flag will be already unset and the timeout callback won't change anything.
-    this.#skipAllPausesTimeout = window.setTimeout(this.skipAllPauses.bind(this, false), timeout);
+    this.#skipAllPausesTimeout = globalThis.setTimeout(
+        this.skipAllPauses.bind(this, false),
+        timeout,
+    );
   }
 
   private pauseOnExceptionStateChanged(): void {

package/front_end/core/sdk/IsolateManager.ts

@@ -121,7 +121,7 @@ export class IsolateManager extends Common.ObjectWrapper.ObjectWrapper<EventType
     const pollId = this.#pollId;
     while (pollId === this.#pollId) {
       await Promise.all(Array.from(this.isolates(), isolate => isolate.update()));
-      await new Promise(r => window.setTimeout(r, PollIntervalMs));
+      await new Promise(r => globalThis.setTimeout(r, PollIntervalMs));
     }
   }
 }

package/front_end/core/sdk/NetworkManager.ts

@@ -5,6 +5,7 @@
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Common from '../common/common.js';
+import * as Host from '../host/host.js';
 import * as i18n from '../i18n/i18n.js';
 import * as Platform from '../platform/platform.js';
 import * as Root from '../root/root.js';
@@ -23,6 +24,7 @@ import {
   type NameValue,
   NetworkRequest,
 } from './NetworkRequest.js';
+import {type ExecutionContext, RuntimeModel} from './RuntimeModel.js';
 import {SDKModel} from './SDKModel.js';
 import {Capability, type Target} from './Target.js';
 import {type SDKModelObserver, TargetManager} from './TargetManager.js';
@@ -116,6 +118,22 @@ const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined
 
 const requestToManagerMap = new WeakMap<NetworkRequest, NetworkManager>();
 
+/** Resource types eligible for resend with full fidelity. */
+const FULL_FIDELITY_RESEND_TYPES = new Set([
+  Common.ResourceType.resourceTypes.XHR,
+  Common.ResourceType.resourceTypes.Fetch,
+  Common.ResourceType.resourceTypes.Script,
+  Common.ResourceType.resourceTypes.Stylesheet,
+  Common.ResourceType.resourceTypes.Image,
+  Common.ResourceType.resourceTypes.Media,
+  Common.ResourceType.resourceTypes.Font,
+  Common.ResourceType.resourceTypes.Wasm,
+  Common.ResourceType.resourceTypes.Manifest,
+  Common.ResourceType.resourceTypes.TextTrack,
+  Common.ResourceType.resourceTypes.SourceMapScript,
+  Common.ResourceType.resourceTypes.SourceMapStyleSheet,
+]);
+
 const CONNECTION_TYPES = new Map([
   ['2g', Protocol.Network.ConnectionType.Cellular2g],
   ['3g', Protocol.Network.ConnectionType.Cellular3g],
@@ -193,18 +211,101 @@ export class NetworkManager extends SDKModel<EventTypes> {
     return requestToManagerMap.get(request) || null;
   }
 
-  static canReplayRequest(request: NetworkRequest): boolean {
-    return Boolean(requestToManagerMap.get(request)) && Boolean(request.backendRequestId()) && !request.isRedirect() &&
-        request.resourceType() === Common.ResourceType.resourceTypes.XHR;
+  static canResendRequest(request: NetworkRequest): boolean {
+    if (!requestToManagerMap.get(request) || !request.backendRequestId() || request.isRedirect()) {
+      return false;
+    }
+    return FULL_FIDELITY_RESEND_TYPES.has(request.resourceType());
   }
 
   static replayRequest(request: NetworkRequest): void {
+    void NetworkManager.resendRequest(request);
+  }
+
+  static async resendRequest(request: NetworkRequest): Promise<void> {
     const manager = requestToManagerMap.get(request);
     const requestId = request.backendRequestId();
     if (!manager || !requestId || request.isRedirect()) {
       return;
     }
-    void manager.#networkAgent.invoke_replayXHR({requestId});
+
+    Host.userMetrics.resendRequest(Host.UserMetrics.resendRequestType(request.resourceType()));
+
+    // XHR requests use the existing CDP replay mechanism.
+    if (request.resourceType() === Common.ResourceType.resourceTypes.XHR) {
+      void manager.#networkAgent.invoke_replayXHR({requestId});
+      return;
+    }
+
+    // All other eligible types use fetch via Runtime.evaluate.
+    const target = manager.target();
+    const runtimeModel = target.model(RuntimeModel);
+    if (!runtimeModel) {
+      return;
+    }
+
+    // Resolve execution context: prefer the frame's default context.
+    let executionContext: ExecutionContext|null = null;
+    const frameId = request.frameId;
+    if (frameId) {
+      executionContext = runtimeModel.executionContexts().find(ctx => ctx.frameId === frameId && ctx.isDefault) ?? null;
+    }
+    const usesFallbackContext = !executionContext;
+    if (!executionContext) {
+      executionContext = runtimeModel.defaultExecutionContext();
+    }
+    if (!executionContext) {
+      return;
+    }
+
+    if (usesFallbackContext) {
+      runtimeModel.target().targetManager().getConsole().warn(
+          'Resend: original execution context unavailable, using top-level context.');
+    }
+
+    // Build the fetch expression.
+    const method = request.requestMethod;
+    const url = request.url();
+    const headers: Array<[string, string]> = [];
+    for (const {name, value} of request.requestHeaders()) {
+      // Skip HTTP/2+ pseudo-headers (e.g. :authority, :method, :path, :scheme).
+      if (name.startsWith(':')) {
+        continue;
+      }
+      // Skip headers the browser sets automatically for fetch.
+      const lower = name.toLowerCase();
+      if (lower === 'host' || lower === 'connection' || lower === 'content-length' || lower === 'cookie' ||
+          lower === 'origin' || lower === 'referer') {
+        continue;
+      }
+      headers.push([name, value]);
+    }
+
+    const body = await request.requestFormData();
+    const fetchOptions: {method: string, headers: Array<[string, string]>, credentials: string, body?: string} = {
+      method,
+      headers,
+      credentials: 'include',
+    };
+    const isGetOrHead = method === 'GET' || method === 'HEAD';
+    if (body && !isGetOrHead) {
+      fetchOptions.body = body;
+    }
+
+    const expression = `fetch(${JSON.stringify(url)}, ${JSON.stringify(fetchOptions)})`;
+    const response = await target.runtimeAgent().invoke_evaluate({
+      expression,
+      // Use uniqueContextId if available, otherwise fall back to contextId.
+      ...(executionContext.uniqueId ? {uniqueContextId: executionContext.uniqueId} : {contextId: executionContext.id}),
+      silent: false,
+      awaitPromise: true,
+    });
+
+    if (response.getError() || response.exceptionDetails) {
+      const errorText = response.getError() || response.exceptionDetails?.exception?.description ||
+          response.exceptionDetails?.text || 'Unknown error';
+      runtimeModel.target().targetManager().getConsole().error(`Resend failed for ${url}: ${errorText}`);
+    }
   }
 
   static async searchInRequest(request: NetworkRequest, query: string, caseSensitive: boolean, isRegex: boolean):

package/front_end/core/sdk/OverlayModel.ts

@@ -86,7 +86,7 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
   overlayAgent: ProtocolProxyApi.OverlayApi;
   readonly #debuggerModel: DebuggerModel|null;
   #inspectModeEnabled = false;
-  #hideHighlightTimeout: number|null = null;
+  #hideHighlightTimeout?: ReturnType<typeof setTimeout>;
   #defaultHighlighter: Highlighter;
   #highlighter: Highlighter;
   #showPaintRectsSetting: Common.Settings.Setting<boolean>;
@@ -331,14 +331,13 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
       // overlay, so that it is not cleared by the highlight
       return;
     }
-    if (this.#hideHighlightTimeout) {
       clearTimeout(this.#hideHighlightTimeout);
-      this.#hideHighlightTimeout = null;
-    }
-    const highlightConfig = this.buildHighlightConfig(mode);
-    if (typeof showInfo !== 'undefined') {
-      highlightConfig.showInfo = showInfo;
-    }
+      this.#hideHighlightTimeout = undefined;
+
+      const highlightConfig = this.buildHighlightConfig(mode);
+      if (typeof showInfo !== 'undefined') {
+        highlightConfig.showInfo = showInfo;
+      }
     this.#highlighter.highlightInOverlay(data, highlightConfig);
   }
 
@@ -486,17 +485,19 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
   }
 
   private delayedHideHighlight(delay: number): void {
-    if (this.#hideHighlightTimeout === null) {
-      this.#hideHighlightTimeout = window.setTimeout(() => this.highlightInOverlay({clear: true}), delay);
+    if (this.#hideHighlightTimeout === undefined) {
+      this.#hideHighlightTimeout = globalThis.setTimeout(
+          () => this.highlightInOverlay({clear: true}),
+          delay,
+      );
     }
   }
 
   highlightFrame(frameId: Protocol.Page.FrameId): void {
-    if (this.#hideHighlightTimeout) {
       clearTimeout(this.#hideHighlightTimeout);
-      this.#hideHighlightTimeout = null;
-    }
-    this.#highlighter.highlightFrame(frameId);
+      this.#hideHighlightTimeout = undefined;
+
+      this.#highlighter.highlightFrame(frameId);
   }
 
   showHingeForDualScreen(hinge: Hinge|null): void {

package/front_end/core/sdk/RemoteObject.ts

@@ -868,7 +868,7 @@ export class LocalJSONObject extends RemoteObject {
       Promise<GetPropertiesResult> {
     function isArrayIndex(name: string): boolean {
       const index = Number(name) >>> 0;
-      return String(index) === name;
+      return String(index) === name && index < 4294967295;
     }
 
     let properties = this.children();

package/front_end/devtools_compatibility.js

@@ -445,6 +445,7 @@
     SyncSetting: 'DevTools.SyncSetting',
     SwatchActivated: 'DevTools.SwatchActivated',
     BuiltInAiAvailability: 'DevTools.BuiltInAiAvailability',
+    ResendRequest: 'DevTools.ResendRequest',
     // LINT.ThenChange(/front_end/core/host/InspectorFrontendHostAPI.ts:EnumeratedHistogram)
   };