chrome-devtools-frontend 1.0.1690531 → 1.0.1696904

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/platform/Size.ts

@@ -0,0 +1,43 @@
+// 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.
+
+export class Size {
+  width: number;
+  height: number;
+  constructor(width: number, height: number) {
+    this.width = width;
+    this.height = height;
+  }
+
+  clipTo(size?: Size|null): Size {
+    if (!size) {
+      return this;
+    }
+    return new Size(Math.min(this.width, size.width), Math.min(this.height, size.height));
+  }
+
+  scale(scale: number): Size {
+    return new Size(this.width * scale, this.height * scale);
+  }
+
+  isEqual(size: Size|null): boolean {
+    return size !== null && this.width === size.width && this.height === size.height;
+  }
+
+  widthToMax(size: number|Size): Size {
+    return new Size(Math.max(this.width, (typeof size === 'number' ? size : size.width)), this.height);
+  }
+
+  addWidth(size: number|Size): Size {
+    return new Size(this.width + (typeof size === 'number' ? size : size.width), this.height);
+  }
+
+  heightToMax(size: number|Size): Size {
+    return new Size(this.width, Math.max(this.height, (typeof size === 'number' ? size : size.height)));
+  }
+
+  addHeight(size: number|Size): Size {
+    return new Size(this.width, this.height + (typeof size === 'number' ? size : size.height));
+  }
+}

package/front_end/core/platform/platform.ts

@@ -19,6 +19,7 @@ import * as TypeScriptUtilities from './TypescriptUtilities.js';
 import * as UIString from './UIString.js';
 import * as UserVisibleError from './UserVisibleError.js';
 
+export {Size} from './Size.js';
 /* `assertNotNullOrUndefined` also need to be exposed, as TypeScript does
  * not allow `asserts` functions to be used with qualified access (e.g.
  * `Platform.TypeScriptUtilities.assertNotNullOrUndefined` causes a compile

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/AccessibilityModel.ts

@@ -352,7 +352,7 @@ export class AccessibilityModel extends SDKModel<EventTypes> implements Protocol
       Promise<AccessibilityNode[]> {
     const parent = this.#axIdToAXNode.get(nodeId);
     if (!parent) {
-      throw new Error('Cannot request children before parent');
+      return [];
     }
     if (!parent.hasUnloadedChildren()) {
       return parent.children();
@@ -370,7 +370,7 @@ export class AccessibilityModel extends SDKModel<EventTypes> implements Protocol
         this.#pendingChildRequests.delete(nodeId);
       }
     }
-    return parent.children();
+    return this.#axIdToAXNode.get(nodeId)?.children() ?? [];
   }
 
   async requestAndLoadSubTreeToNode(node: DOMNode): Promise<AccessibilityNode[]|null> {

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/CSSMatchedStyles.ts

@@ -34,6 +34,7 @@ import {
   localEvalCSS,
   MathFunctionMatcher,
   PositionAnchorMatcher,
+  PositionAreaMatcher,
   PositionTryMatcher,
   RelativeColorChannelMatcher,
   ShadowMatcher,
@@ -1068,6 +1069,7 @@ export class CSSMatchedStyles {
       new AnchorFunctionMatcher(),
       new PositionAnchorMatcher(),
       new FlexGridGridLanesMatcher(),
+      new PositionAreaMatcher(),
       new PositionTryMatcher(),
       new LengthMatcher(),
       new MathFunctionMatcher(),

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/CSSPropertyParserMatchers.ts

@@ -1508,3 +1508,32 @@ export class EnvFunctionMatcher extends EnvFunctionMatcherBase {
     return new EnvFunctionMatch(matching.ast.text(node), node, varName, value ?? fallbackValue ?? null, Boolean(value));
   }
 }
+
+export class PositionAreaMatch implements Match {
+  constructor(readonly text: string, readonly node: CodeMirror.SyntaxNode) {
+  }
+}
+
+const PositionAreaMatcherBase: MatcherClass<PositionAreaMatch> = matcherBase(PositionAreaMatch);
+// clang-format off
+export class PositionAreaMatcher extends PositionAreaMatcherBase {
+  // clang-format on
+  override accepts(propertyName: string): boolean {
+    return propertyName === 'position-area' || propertyName === 'inset-area';
+  }
+
+  override matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): PositionAreaMatch|null {
+    if (node.name !== 'Declaration') {
+      return null;
+    }
+    const valueNodes = ASTUtils.siblings(ASTUtils.declValue(node));
+    if (valueNodes.length === 0) {
+      return null;
+    }
+    const valueText = matching.getComputedTextRange(valueNodes[0], valueNodes[valueNodes.length - 1]);
+    if (CSSMetadata.isCSSWideKeyword(valueText)) {
+      return null;
+    }
+    return new PositionAreaMatch(valueText, node);
+  }
+}

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/DOMModel.ts

@@ -1076,17 +1076,19 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
         });
   }
 
-  duplicate(): void {
+  async duplicate(): Promise<{error: string | null, node: DOMNode|null}> {
     if (this.isInShadowTree()) {
-      return;
+      return {error: 'Cannot duplicate node in shadow tree', node: null};
     }
 
     const parentNode = this.parentNode ? this.parentNode : this;
     if (parentNode.nodeName() === '#document') {
-      return;
+      return {error: 'Parent node is document', node: null};
     }
 
-    this.copyTo(parentNode, this.nextSibling);
+    return await new Promise(resolve => {
+      this.copyTo(parentNode, this.nextSibling, (error, node) => resolve({error, node}));
+    });
   }
 
   /**
@@ -2564,7 +2566,8 @@ export class DOMNodeSnapshot extends DOMNode {
       _callback?: ((arg0: string|null, arg1: DOMNode|null) => void)|undefined): void {
   }
 
-  override duplicate(): void {
+  override duplicate(): Promise<{error: string | null, node: DOMNode|null}> {
+    return Promise.resolve({error: null, node: null});
   }
 
   override canInspectNode(): boolean {
@@ -2616,7 +2619,8 @@ export class DOMDocumentSnapshot extends DOMDocument {
       _callback?: ((arg0: string|null, arg1: DOMNode|null) => void)|undefined): void {
   }
 
-  override duplicate(): void {
+  override duplicate(): Promise<{error: string | null, node: DOMNode|null}> {
+    return Promise.resolve({error: null, node: null});
   }
 
   override canInspectNode(): boolean {

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);