chrome-devtools-frontend 1.0.1690531 → 1.0.1695017

package/.agents/skills/devtools-model-management/SKILL.md

@@ -22,12 +22,12 @@ This guide outlines the standard procedure for creating a new model or migrating
 ## 2. Build Configuration (`BUILD.gn`)
 Every model requires a `BUILD.gn` file in its directory with three specific targets:
 
-1.  **`devtools_module("<model_name>")`**: Lists implementation source files (`sources`) and dependencies (`deps`).
+1.  **`devtools_module("<model_name>")`**: Lists implementation source files (`sources`) and TypeScript dependencies (`ts_deps`). Non-TypeScript dependencies (e.g. CSS, assets) go into `deps`.
     *   **Crucial:** Do NOT include the barrel file (`<model_name>.ts`) in `sources`.
 2.  **`devtools_entrypoint("bundle")`**: Defines the barrel file (`entrypoint = "<model_name>.ts"`).
-    *   **Crucial:** Must depend on the module target: `deps = [ ":<model_name>" ]`.
+    *   **Crucial:** Must depend on the module target: `ts_deps = [ ":<model_name>" ]`.
 3.  **`ts_library("unittests")`**: Lists test files and test-only dependencies.
-    *   **Crucial:** Must depend on the bundle: `deps = [ ":bundle" ]`.
+    *   **Crucial:** Must depend on the bundle: `ts_deps = [ ":bundle" ]`.
 
 ## 3. Global Registration (Crucial)
 The build system does not auto-detect new modules. You must manually register them in **`config/gni/devtools_grd_files.gni`**:

package/.agents/skills/foundation-test-migration/SKILL.md

@@ -143,13 +143,13 @@ When a module and its tests are ready, update `BUILD.gn`:
 
 devtools_foundation_module("my_module") {
   sources = [ "MyModule.ts" ]
-  deps = [ "../../core/common:bundle" ]
+  ts_deps = [ "../../core/common:bundle" ]
 }
 
 devtools_foundation_module("unittests") {
   testonly = true
   sources = [ "MyModule.test.ts" ]
-  deps = [
+  ts_deps = [
     ":my_module",
     "../../testing",
   ]

package/.agents/skills/merging-devtools-module/SKILL.md

@@ -19,7 +19,7 @@ You will need the following information:
 
 Read the contents of the `BUILD.gn` file from both the child module and the parent module. Identify the following from the child's `BUILD.gn`:
 -   The list of `sources` in the `devtools_module`.
--   The list of `deps` (dependencies) in the `devtools_module`.
+-   The list of `ts_deps` (and non-TypeScript `deps`) in the `devtools_module`.
 -   The `entrypoint` for the `devtools_entrypoint("bundle")`.
 
 ### 2. Modify the Parent `BUILD.gn`
@@ -27,8 +27,8 @@ Read the contents of the `BUILD.gn` file from both the child module and the pare
 Edit the `BUILD.gn` file in the parent module's directory to incorporate the child module's configuration.
 
 1.  **Add Child's Sources:** Append the list of `sources` from the child's `devtools_module` to the parent's `sources` list. Remember to maintain the relative path from the parent's directory (e.g., `extensions/ExtensionUI.ts`).
-2.  **Merge Dependencies:** Add the `deps` from the child's `devtools_module` to the parent's `deps` list. Remove any duplicate entries.
-3.  **Remove Child Bundle Dependency:** Delete the dependency on the child's bundle from the parent's `deps` list (e.g., remove `./extensions:bundle`).
+2.  **Merge Dependencies:** Add the `ts_deps` from the child's `devtools_module` to the parent's `ts_deps` list (and merge any non-TypeScript `deps`). Remove any duplicate entries.
+3.  **Remove Child Bundle Dependency:** Delete the dependency on the child's bundle from the parent's `ts_deps` list (e.g., remove `./extensions:bundle`).
 
 ### 3. Delete the Child `BUILD.gn`
 
@@ -63,7 +63,7 @@ devtools_module("timeline") {
     "UIDevtoolsUtils.ts",
   ]
 
-  deps = [
+  ts_deps = [
     ...
     "./components:bundle",
     "./extensions:bundle",
@@ -82,7 +82,7 @@ devtools_module("timeline") {
     "extensions/ExtensionUI.ts", # Added from child
   ]
 
-  deps = [
+  ts_deps = [
     ...
     "./components:bundle",
     # "./extensions:bundle", # Removed

package/.gitmodules

@@ -1,7 +1,3 @@
-[submodule "test/ai_evals/eval_data"]
-	path = test/ai_evals/eval_data
-	url = https://chrome-internal.googlesource.com/devtools/chrome-devtools-evals
-	gclient-condition = checkout_ai_evals == True
 [submodule "third_party/clang-format/script"]
 	path = third_party/clang-format/script
 	url = https://chromium.googlesource.com/external/github.com/llvm/llvm-project/clang/tools/clang-format

package/AUTHORS

@@ -35,6 +35,7 @@ Conner Turner <cturner@zyme.xyz>
 Daniel bellfield <dnlbellfield@gmail.com>
 Danny Eldridge <me@heardanieljames.com>
 Derek Li <the.derekli@gmail.com>
+Dmitry Kryaklin <dmkryak@gmail.com>
 Douglas Chiang <douglasdothnc@gmail.com>
 Dragonish <no.web.developer@outlook.com>
 Eden Wang <nedenwang@gmail.com>
@@ -79,6 +80,7 @@ Michael Rienstra <mrienstra@gmail.com>
 Mostafa Aboalkasim <mostafa.aboalkasim.offical@gmail.com>
 Muhammad Mahad <mahadtxt@gmail.com>
 Naoto Ono <onoto1998@gmail.com>
+Navoda Munasinha <navoda.munasinha@codimite.com>
 Nourhan Hasan <nourhan.m.hasan@gmail.com>
 Paras Awasthi <awasthiparas6@gmail.com>
 Paul Fisher <paul@pfish.zone>
@@ -121,6 +123,7 @@ Yoichiro Hibara <hibarayoichiro871@gmail.com>
 Yoni Feigelson <yfeigelson@gmail.com>
 Young Min Kim <y@ylem.kim>
 Yuan Zhuang <joann.yuanzhuang@gmail.com>
+Zuyao Chen <zuyaocat@gmail.com>
 # Please DO NOT APPEND here. See comments at the top of the file.
 # END individuals section.
 

package/config/typescript/tsconfig.base.json

@@ -23,6 +23,7 @@
     "preserveConstEnums": true,
     "composite": true,
     "declaration": true,
+    "isolatedDeclarations": true,
 
     "sourceMap": true,
     "inlineSources": true

package/docs/get_the_code.md

@@ -43,17 +43,12 @@ npm run build -- -t Debug
 will build in `out/Debug` instead of `out/Default`. If the directory doesn't exist,
 it'll automatically create and initialize it.
 
-You can disable type checking (via TypeScript) by using the `devtools_skip_typecheck`
-argument in your GN configuration. This uses [esbuild](https://esbuild.github.io/)
-instead of `tsc` to compile the TypeScript files and generally results in much
-shorter build times.
-
-Additionally, we now bundle files together by default in all builds, which has
-a build time cost. If you want an even fast fast build, you might want to opt
-out of bundling by setting `devtools_bundle` to `false`
+We bundle files together by default in all builds, which has a build time cost.
+If you want a faster build, you can opt out of bundling by setting `devtools_bundle`
+to `false`:
 
 ```bash
-gn gen out/Fast --args="devtools_skip_typecheck=true devtools_bundle=false"
+gn gen out/Fast --args="devtools_bundle=false"
 ```
 
 and use `npm run build -- -t Fast` to build this target.

package/front_end/Images/src/comment-mode-cursor.svg

@@ -0,0 +1,23 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_6727_40653)">
+<path d="M30 18C30 12.4772 25.5228 8 20 8C14.4772 8 10 12.4772 10 18V27.2308C10 27.6556 10.3444 28 10.7692 28H20C25.5228 28 30 23.5228 30 18Z" fill="white"/>
+<path d="M20 7C13.9249 7 9 11.9249 9 18V27.2305C9 28.2076 9.79241 29 10.7695 29H20C26.0751 29 31 24.0751 31 18C31 11.9249 26.0751 7 20 7Z" stroke="#0B57D0" stroke-width="2"/>
+</g>
+<defs>
+<filter id="filter0_dd_6727_40653" x="0" y="0" width="40" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="2" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_6727_40653"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="3"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6727_40653"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_6727_40653" result="effect2_dropShadow_6727_40653"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_6727_40653" result="shape"/>
+</filter>
+</defs>
+</svg>

package/front_end/Tests.js

@@ -550,7 +550,7 @@
     this._waitForTargets(1, callback.bind(this));
 
     function callback() {
-      ProtocolClient.test.deprecatedRunAfterPendingDispatches(this.releaseControl.bind(this));
+      setTimeout(this.releaseControl.bind(this), 0);
     }
   };
 

package/front_end/application_tokens.css

@@ -254,6 +254,11 @@
    */
    --combobox-dropdown-arrow: var(--image-file-arrow-drop-down-light);
 
+  /**
+   * Comment mode cursor.
+   */
+  --comment-cursor: var(--image-file-comment-mode-cursor) 10 28, auto;
+
   &.theme-with-dark-background {
     --color-primary-old: rgb(138 180 248);
     --color-primary-variant: rgb(102 157 246);

package/front_end/core/common/ColorConverter.ts

@@ -274,9 +274,9 @@ export class ColorConverter {
     const xyzInput = new Vector3([x, y, z]);
     const lmsIntermediate = XYZ_TO_LMS_MATRIX.multiply(xyzInput);
 
-    lmsIntermediate.values[0] = Math.pow(lmsIntermediate.values[0], 1.0 / 3.0);
-    lmsIntermediate.values[1] = Math.pow(lmsIntermediate.values[1], 1.0 / 3.0);
-    lmsIntermediate.values[2] = Math.pow(lmsIntermediate.values[2], 1.0 / 3.0);
+    lmsIntermediate.values[0] = Math.cbrt(lmsIntermediate.values[0]);
+    lmsIntermediate.values[1] = Math.cbrt(lmsIntermediate.values[1]);
+    lmsIntermediate.values[2] = Math.cbrt(lmsIntermediate.values[2]);
 
     const labOutput = LMS_TO_OKLAB_MATRIX.multiply(lmsIntermediate);
     return [labOutput.values[0], labOutput.values[1], labOutput.values[2]];

package/front_end/core/host/UserMetrics.ts

@@ -265,6 +265,31 @@ export class UserMetrics {
     InspectorFrontendHostInstance.recordPerformanceHistogram('DevTools.Insights.ShortTeaserGenerationTime',
                                                              timeInMilliseconds);
   }
+
+  changeRecorded(count: number): void {
+    InspectorFrontendHostInstance.recordCountHistogram('DevTools.Comments.ChangeRecorded', count, 1, 100, 50);
+  }
+
+  changeSharedWithAgent(count: number): void {
+    InspectorFrontendHostInstance.recordCountHistogram('DevTools.Comments.ChangeSharedWithAgent', count, 1, 100, 50);
+  }
+
+  commentCreated(count: number): void {
+    InspectorFrontendHostInstance.recordCountHistogram('DevTools.Comments.CommentCreated', count, 1, 100, 50);
+  }
+
+  commentResolved(resolver: CommentResolver, count: number): void {
+    InspectorFrontendHostInstance.recordCountHistogram(`DevTools.Comments.CommentResolvedBy${resolver}`, count, 1, 100,
+                                                       50);
+  }
+
+  commentSharedWithAgent(count: number): void {
+    InspectorFrontendHostInstance.recordCountHistogram('DevTools.Comments.CommentSharedWithAgent', count, 1, 100, 50);
+  }
+
+  commentSize(characters: number): void {
+    InspectorFrontendHostInstance.recordCountHistogram('DevTools.Comments.CommentSize', characters, 1, 100_000, 50);
+  }
 }
 
 /**
@@ -493,3 +518,5 @@ export function resendRequestType(resourceType: Common.ResourceType.ResourceType
   const key = resendRequestTypeMap.get(resourceType);
   return (key ? ResendRequestType[key] : undefined) ?? ResendRequestType.OTHER;
 }
+
+export type CommentResolver = 'Agent'|'User';

package/front_end/core/protocol_client/DevToolsCDPConnection.ts

@@ -25,21 +25,15 @@ interface CallbackWithDebugInfo {
 
 type Callback = (error: MessageError|null, arg1: Object|null) => void;
 
-const LongPollingMethods = new Set<string>(['CSS.takeComputedStyleUpdates']);
-
 export class DevToolsCDPConnection implements CDPConnection {
   readonly #transport: ConnectionTransport;
   #lastMessageId = 1;
-  #pendingResponsesCount = 0;
-  readonly #pendingLongPollingMessageIds = new Set<number>();
-  #pendingScripts: Array<() => void> = [];
   readonly #callbacks = new Map<number, CallbackWithDebugInfo>();
   readonly #observers = new Set<CDPConnectionObserver>();
 
   constructor(transport: ConnectionTransport) {
     this.#transport = transport;
 
-    test.deprecatedRunAfterPendingDispatches = this.deprecatedRunAfterPendingDispatches.bind(this);
     test.sendRawMessage = this.sendRawMessageForTesting.bind(this);
 
     this.#transport.setOnMessage(this.onMessage.bind(this));
@@ -81,11 +75,6 @@ export class DevToolsCDPConnection implements CDPConnection {
       test.onMessageSent({domain, method, params: (paramsObject as Object), id: messageId, sessionId});
     }
 
-    ++this.#pendingResponsesCount;
-    if (LongPollingMethods.has(method)) {
-      this.#pendingLongPollingMessageIds.add(messageId);
-    }
-
     return new Promise(resolve => {
       this.#callbacks.set(messageId, {resolve, method, sessionId});
       this.#transport.sendRawMessage(JSON.stringify(messageObject));
@@ -147,45 +136,10 @@ export class DevToolsCDPConnection implements CDPConnection {
       }
 
       callback.resolve(messageObject);
-      --this.#pendingResponsesCount;
-      this.#pendingLongPollingMessageIds.delete(messageObject.id);
-
-      if (this.#pendingScripts.length && !this.hasOutstandingNonLongPollingRequests()) {
-        this.deprecatedRunAfterPendingDispatches();
-      }
     } else if ('method' in messageObject) {
       this.#observers.forEach(observer => observer.onEvent(messageObject));
     } else {
       InspectorBackend.reportProtocolError('Protocol Error: the message without method', messageObject);
     }
   }
-
-  private hasOutstandingNonLongPollingRequests(): boolean {
-    return this.#pendingResponsesCount - this.#pendingLongPollingMessageIds.size > 0;
-  }
-
-  private deprecatedRunAfterPendingDispatches(script?: (() => void)): void {
-    if (script) {
-      this.#pendingScripts.push(script);
-    }
-
-    // Execute all promises.
-    setTimeout(() => {
-      if (!this.hasOutstandingNonLongPollingRequests()) {
-        this.executeAfterPendingDispatches();
-      } else {
-        this.deprecatedRunAfterPendingDispatches();
-      }
-    }, 0);
-  }
-
-  private executeAfterPendingDispatches(): void {
-    if (!this.hasOutstandingNonLongPollingRequests()) {
-      const scripts = this.#pendingScripts;
-      this.#pendingScripts = [];
-      for (let id = 0; id < scripts.length; ++id) {
-        scripts[id]();
-      }
-    }
-  }
 }

package/front_end/core/protocol_client/InspectorBackend.ts

@@ -153,12 +153,6 @@ export const test = {
    */
   dumpProtocol: null as ((arg0: string) => void) | null,
 
-  /**
-   * Runs a function when no protocol activity is present.
-   * ProtocolClient.test.deprecatedRunAfterPendingDispatches(() => console.log('done'))
-   */
-  deprecatedRunAfterPendingDispatches: null as ((arg0: () => void) => void) | null,
-
   /**
    * Sends a raw message over main connection.
    * ProtocolClient.test.sendRawMessage('Page.enable', {}, console.log)
@@ -181,6 +175,12 @@ export const test = {
    * Set to get notified about any messages received over protocol.
    */
   onMessageReceived: null as ((message: Object) => void) | null,
+
+  /**
+   * Runs a function when no protocol activity is present.
+   * ProtocolClient.test.deprecatedRunAfterPendingDispatches(() => console.log('done'))
+   */
+  deprecatedRunAfterPendingDispatches: null as ((arg0: () => void) => void) | null,
 };
 
 export class SessionRouter implements CDPConnectionObserver {

package/front_end/core/sdk/CSSLocation.ts

@@ -0,0 +1,32 @@
+// 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 type * as Protocol from '../../generated/protocol.js';
+import type * as Platform from '../platform/platform.js';
+
+import type {CSSModel} from './CSSModel.js';
+import type {CSSStyleSheetHeader} from './CSSStyleSheetHeader.js';
+
+export class CSSLocation {
+  readonly #cssModel: CSSModel;
+  styleSheetId: Protocol.DOM.StyleSheetId;
+  url: Platform.DevToolsPath.UrlString;
+  lineNumber: number;
+  columnNumber: number;
+  constructor(header: CSSStyleSheetHeader, lineNumber: number, columnNumber?: number) {
+    this.#cssModel = header.cssModel();
+    this.styleSheetId = header.id;
+    this.url = header.resourceURL();
+    this.lineNumber = lineNumber;
+    this.columnNumber = columnNumber || 0;
+  }
+
+  cssModel(): CSSModel {
+    return this.#cssModel;
+  }
+
+  header(): CSSStyleSheetHeader|null {
+    return this.#cssModel.styleSheetHeaderForId(this.styleSheetId);
+  }
+}

package/front_end/core/sdk/CSSModel.ts

@@ -11,6 +11,7 @@ import * as Root from '../root/root.js';
 import * as TextUtils from '../text_utils/text_utils.js';
 
 import {CSSFontFace} from './CSSFontFace.js';
+import {CSSLocation} from './CSSLocation.js';
 import {CSSMatchedStyles} from './CSSMatchedStyles.js';
 import {CSSMedia} from './CSSMedia.js';
 import {cssMetadata} from './CSSMetadata.js';
@@ -1052,28 +1053,7 @@ export class Edit {
   }
 }
 
-export class CSSLocation {
-  readonly #cssModel: CSSModel;
-  styleSheetId: Protocol.DOM.StyleSheetId;
-  url: Platform.DevToolsPath.UrlString;
-  lineNumber: number;
-  columnNumber: number;
-  constructor(header: CSSStyleSheetHeader, lineNumber: number, columnNumber?: number) {
-    this.#cssModel = header.cssModel();
-    this.styleSheetId = header.id;
-    this.url = header.resourceURL();
-    this.lineNumber = lineNumber;
-    this.columnNumber = columnNumber || 0;
-  }
-
-  cssModel(): CSSModel {
-    return this.#cssModel;
-  }
-
-  header(): CSSStyleSheetHeader|null {
-    return this.#cssModel.styleSheetHeaderForId(this.styleSheetId);
-  }
-}
+export {CSSLocation};
 
 class CSSDispatcher implements ProtocolProxyApi.CSSDispatcher {
   readonly #cssModel: CSSModel;

package/front_end/core/sdk/CSSQuery.ts

@@ -5,7 +5,8 @@
 import type * as Protocol from '../../generated/protocol.js';
 import type * as TextUtils from '../text_utils/text_utils.js';
 
-import {CSSLocation, type CSSModel, type Edit} from './CSSModel.js';
+import {CSSLocation} from './CSSLocation.js';
+import type {CSSModel, Edit} from './CSSModel.js';
 import type {CSSStyleSheetHeader} from './CSSStyleSheetHeader.js';
 
 type CSSQueryPayload =

package/front_end/core/sdk/CSSRule.ts

@@ -231,6 +231,35 @@ export class CSSStyleRule extends CSSRule {
 
     super.rebase(edit);
   }
+
+  constructResolvedSelector(nestingIndex?: number): string|undefined {
+    const nestingSelectors = this.nestingSelectors;
+    if (!nestingSelectors) {
+      return nestingIndex === undefined ? this.selectorText() : undefined;
+    }
+
+    if (nestingIndex !== undefined && (nestingIndex < 0 || nestingIndex >= nestingSelectors.length)) {
+      return undefined;
+    }
+
+    const selectorText = nestingIndex !== undefined ? nestingSelectors[nestingIndex] : this.selectorText();
+
+    const parentIndex = nestingIndex !== undefined ? nestingIndex + 1 : 0;
+    const parentSelector = this.constructResolvedSelector(parentIndex);
+
+    if (!parentSelector) {
+      return selectorText;
+    }
+
+    // Strip pseudo-elements (e.g. ::before) because pseudo-elements are invalid inside CSS :is(...).
+    const sanitizedParent = parentSelector.replace(/::[a-zA-Z-]+/g, '').trim();
+
+    if (selectorText.includes('&')) {
+      return selectorText.replaceAll('&', `:is(${sanitizedParent})`);
+    }
+
+    return `:is(${sanitizedParent}) ${selectorText.trim()}`;
+  }
 }
 
 export class CSSPropertyRule extends CSSRule {

package/front_end/core/sdk/DebuggerModel.ts

@@ -1473,8 +1473,12 @@ export class Scope implements ScopeChainEntry {
     return undefined;
   }
 
+  empty(): boolean {
+    return Boolean(this.#payload.empty);
+  }
+
   extraProperties(): RemoteObjectProperty[] {
-    if (this.#ordinal !== 0 || this.#type !== Protocol.Debugger.ScopeType.Local || this.#callFrame.script.isWasm()) {
+    if (this !== this.#callFrame.localScope() || this.#callFrame.script.isWasm()) {
       return [];
     }
 

package/front_end/core/sdk/NetworkManager.ts

@@ -1014,6 +1014,8 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
       }
       requestToManagerMap.set(networkRequest, this.#manager);
     }
+    networkRequest.setCacheDisabled(
+        this.#manager.target().targetManager().settings.resolve(cacheDisabledSettingDescriptor).get());
     networkRequest.hasNetworkData = true;
     this.updateNetworkRequestWithRequest(networkRequest, request);
     networkRequest.setIssueTime(timestamp, wallTime);

package/front_end/core/sdk/NetworkRequest.ts

@@ -178,6 +178,7 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
   #endTime = -1;
   #blockedReason: Protocol.Network.BlockedReason|undefined = undefined;
   #renderBlockingBehavior?: Protocol.Network.RenderBlockingBehavior;
+  #initiatorSecurityOrigin?: SecurityOrigin;
   #corsErrorStatus: Protocol.Network.CorsErrorStatus|undefined = undefined;
   statusCode = 0;
   statusText = '';
@@ -248,6 +249,7 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
   #fromMemoryCache?: boolean;
   #fromDiskCache?: boolean;
   #fromPrefetchCache?: boolean;
+  #cacheDisabled = false;
   #fromEarlyHints?: boolean;
   #fetchedViaServiceWorker?: boolean;
   #serviceWorkerRouterInfo?: Protocol.Network.ServiceWorkerRouterInfo;
@@ -423,7 +425,10 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
    * @see {@link requestURLSecurityOrigin} to obtain the origin of the target resource URL being requested.
    */
   initiatorSecurityOrigin(): SecurityOrigin {
-    return this.#resolveSecurityOrigin(this.#documentURL);
+    if (!this.#initiatorSecurityOrigin) {
+      this.#initiatorSecurityOrigin = this.#resolveSecurityOrigin(this.#documentURL);
+    }
+    return this.#initiatorSecurityOrigin;
   }
 
   #resolveSecurityOrigin(url: Platform.DevToolsPath.UrlString): SecurityOrigin {
@@ -727,6 +732,14 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
     this.#fromPrefetchCache = true;
   }
 
+  cacheDisabled(): boolean {
+    return this.#cacheDisabled;
+  }
+
+  setCacheDisabled(cacheDisabled: boolean): void {
+    this.#cacheDisabled = cacheDisabled;
+  }
+
   fromEarlyHints(): boolean {
     return Boolean(this.#fromEarlyHints);
   }

package/front_end/core/sdk/NetworkRequestAccess.ts

@@ -48,11 +48,24 @@ export const CORS_SAFELISTED_RESPONSE_HEADERS: ReadonlySet<string> = new Set([
 export const REDACTED_RESPONSE_BODY = '<redacted cross-origin response body>';
 
 /**
- * Returns whether a network request used credentials (cookies, authorization headers,
- * or server-indicated credentials mode).
+ * Returns whether a network request was made with credentials (cookies or authorization headers)
+ * or received `Set-Cookie` in the response.
+ *
+ * NOTE: The response header `Access-Control-Allow-Credentials: true` is sent by the server
+ * to grant permission for credentialed CORS; it is not a credential sent by the client.
+ *
+ * Example:
+ * If a page makes an uncredentialed request:
+ *   `fetch('https://api.example.com/data', {credentials: 'omit'})`
+ * And the server responds with:
+ *   `Access-Control-Allow-Origin: *`
+ *   `Access-Control-Allow-Credentials: true`
+ * The browser allows the page to read the response under `*` because the client sent no cookies or auth.
+ * If we treated `Access-Control-Allow-Credentials: true` as a credential here, we would falsely mark
+ * this request as credentialed and reject the wildcard `*`.
  *
  * @param request The network request to inspect.
- * @returns True if the request included credentials or requires credentialed CORS.
+ * @returns True if the request or response carried authentication credentials or cookies.
  * @see https://fetch.spec.whatwg.org/#credentials
  */
 export function isRequestCredentialed(request: NetworkRequest.NetworkRequest): boolean {
@@ -61,45 +74,40 @@ export function isRequestCredentialed(request: NetworkRequest.NetworkRequest): b
   );
   const hasCookies = request.includedRequestCookies().length > 0 || request.responseCookies.length > 0 ||
       Boolean(request.requestHeaderValue('cookie')) || Boolean(request.responseHeaderValue('set-cookie'));
-  const hasAllowCredentials =
-      request.responseHeaderValue('access-control-allow-credentials')?.trim().toLowerCase() === 'true';
 
-  return hasAuthHeaders || hasCookies || hasAllowCredentials;
+  return hasAuthHeaders || hasCookies;
 }
 
 /**
  * Evaluates the response access mode for a network request relative to an initiator origin.
  *
  * Evaluation rules:
- * 1. If `initiatorOrigin` is omitted, the origin is derived from `request.documentURL`. If
- *    `documentURL` is invalid or opaque, access mode defaults to `OPAQUE_CROSS_ORIGIN`.
- * 2. If the initiator origin is opaque (e.g. sandboxed iframe or `data:` URL), returns `OPAQUE_CROSS_ORIGIN`.
- * 3. If the initiator origin is same-origin with the request URL, returns `SAME_ORIGIN`.
- * 4. If Chrome's network stack flagged a CORS error (`corsErrorStatus`), returns `OPAQUE_CROSS_ORIGIN`.
- * 5. If the server provided an `Access-Control-Allow-Origin` header:
+ * 1. If the initiator security origin is opaque (e.g. sandboxed iframe or `data:` URL), returns `OPAQUE_CROSS_ORIGIN`.
+ * 2. If the initiator security origin is same-origin with the request URL, returns `SAME_ORIGIN`.
+ * 3. If Chrome's network stack flagged a CORS error (`corsErrorStatus`), returns `OPAQUE_CROSS_ORIGIN`.
+ * 4. If the server provided an `Access-Control-Allow-Origin` header:
  *    - Wildcard `*` grants `CORS_ALLOWED` only if the request does not include credentials. Under the
  *      Fetch specification, wildcard `*` is invalid for credentialed requests.
- *    - An explicit match against the initiator origin grants `CORS_ALLOWED`.
- * 6. Otherwise, returns `OPAQUE_CROSS_ORIGIN`.
+ *    - An explicit match against the initiator origin grants `CORS_ALLOWED` if uncredentialed, or if
+ *      `Access-Control-Allow-Credentials: true` is also present for credentialed requests.
+ * 5. Otherwise, returns `OPAQUE_CROSS_ORIGIN`.
  *
  * @param request The network request being inspected.
- * @param initiatorOrigin The security origin of the initiating context (e.g. page or conversation origin).
+ * @param initiatorSecurityOrigin The security origin of the initiating context (e.g. page or conversation origin).
  * @returns The evaluated `ResponseAccessMode`.
  */
 export function evaluateResponseAccessMode(
     request: NetworkRequest.NetworkRequest,
-    initiatorOrigin?: SecurityOrigin.SecurityOrigin,
+    initiatorSecurityOrigin: SecurityOrigin.SecurityOrigin,
     ): ResponseAccessMode {
-  const effectiveInitiatorOrigin = initiatorOrigin ?? SecurityOrigin.SecurityOrigin.create(request.documentURL);
-
   // Opaque initiator contexts (e.g. data: URLs, sandboxed iframes) are never permitted
   // to inspect cross-origin response content.
-  if (effectiveInitiatorOrigin.isOpaque()) {
+  if (initiatorSecurityOrigin.isOpaque()) {
     return ResponseAccessMode.OPAQUE_CROSS_ORIGIN;
   }
 
-  const resourceOrigin = SecurityOrigin.SecurityOrigin.create(request.url());
-  if (effectiveInitiatorOrigin.isSameOriginWith(resourceOrigin)) {
+  const resourceOrigin = request.requestURLSecurityOrigin();
+  if (initiatorSecurityOrigin.isSameOriginWith(resourceOrigin)) {
     return ResponseAccessMode.SAME_ORIGIN;
   }
 
@@ -121,7 +129,18 @@ export function evaluateResponseAccessMode(
     return ResponseAccessMode.CORS_ALLOWED;
   }
 
-  if (allowOriginHeader.toLowerCase() === effectiveInitiatorOrigin.siteId().toLowerCase()) {
+  const allowedOrigin = SecurityOrigin.SecurityOrigin.create(allowOriginHeader);
+  if (initiatorSecurityOrigin.isSameOriginWith(allowedOrigin)) {
+    // Under the WHATWG Fetch specification (§ 3.2.5), when a request includes
+    // credentials (cookies or authorization headers), the response is only exposed
+    // if the server explicitly includes Access-Control-Allow-Credentials: true.
+    if (isCredentialed) {
+      const allowCredentials =
+          request.responseHeaderValue('access-control-allow-credentials')?.trim().toLowerCase() === 'true';
+      if (!allowCredentials) {
+        return ResponseAccessMode.OPAQUE_CROSS_ORIGIN;
+      }
+    }
     return ResponseAccessMode.CORS_ALLOWED;
   }