chrome-devtools-frontend 1.0.1717196 → 1.0.1721762

package/.agents/skills/ui-widgets/SKILL.md

@@ -43,7 +43,7 @@ Complex views can be broken down using helper functions defined inside `DEFAULT_
 ```ts
 // clang-format off
 const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
-  const renderHeader = (): Lit.LitTemplate => {
+  const renderHeader = (): LitTemplate => {
     return html`<h1>${input.title}</h1>`;
   };
   // ...
@@ -58,10 +58,13 @@ const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement)
 
 ### Composition
 
-* To render a child widget, the parent's View MUST use lit-html directive `UI.Widget.wiget`
+* To render a child widget, the parent's View MUST use the lit-html directive `UI.Widget.widget`.
+* **Strongly prefer the two-argument `widget(WidgetClass, {params})` form** over the single-argument factory callback `widget(element => new WidgetClass(element, ...))`. The two-argument form automatically updates properties and calls `requestUpdate()` on subsequent renders, whereas a factory callback only runs once on initial instantiation.
+* If a child widget currently exposes imperative setter methods (e.g., `setStorageKey(key)` or `setStorageBucket(bucket)`) instead of public properties/setters, convert them into standard TypeScript setters (`set storageKey(key)`, `set storageBucket(bucket)`) on the child widget so it can be instantiated and updated declaratively via the two-argument `widget(WidgetClass, {params})` directive.
 * Configuration is passed via the parameters.
-* Properties passed from a parent MUST be declared as public fields on the child presenter class.
+* Properties passed from a parent MUST be declared as public fields or setters on the child presenter class.
 * The framework automatically updates these properties and calls `requestUpdate()` on the child when the parent re-renders.
+* **Pre-existing Widget Instances (`WrapperWidget`):** To render an existing `UI.Widget` instance (such as locations created by `UI.ViewManager`: `TabbedViewLocation.tabbedPane()`, `StackLocation.widget()`) declaratively without creating a custom wrapper class, use `${widget(UI.Widget.WrapperWidget, {widget: myWidgetInstance})}`. `WrapperWidget` automatically forwards constraints, handles attach/detach lifecycle, and supports dynamic widget replacement.
 
 ## Refactoring Legacy Components
 
@@ -106,7 +109,7 @@ render(html`
 **Note:** The `{host: input}` option in `render()` is generally **not required** unless you are using specific Shadow DOM patterns that necessitate it. The `@scope` strategy is the preferred method for style isolation in DevTools widgets.
 
 ### Legacy Interop & Refs
-*   **Raw Elements:** Use `Lit.Directives.ref` to obtain a reference to a raw `HTMLElement` if needed for imperative APIs (e.g., `splitWidget.installResizer(element)`).
+*   **Raw Elements:** Use `Directives.ref` (from `ui/lit/lit.js`) to obtain a reference to a raw `HTMLElement` if needed for imperative APIs (e.g., `splitWidget.installResizer(element)`).
 *   **Child Widgets:** Use `UI.Widget.widgetRef` to obtain the class instance of a child widget if you need to call methods on it directly (though declarative data flow is preferred).
 
 ### Dependencies
@@ -153,12 +156,12 @@ Example: `front_end/panels/my_example/MyExampleWidget.ts`.
 ```ts
 // front_end/panels/my_example/MyExampleWidget.ts
 
-import * as Lit from '../../ui/lit/lit.js';
+import {Directives, html, render} from '../../ui/lit/lit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import myExampleWidgetStyles from './myExampleWidget.css.js';
 
-const {html, render, ref} = Lit;
+const {ref} = Directives;
 
 // 1. Define Input data shape. (Assuming Child Widget configuration for completeness)
 export interface ViewInput {
@@ -241,14 +244,13 @@ Example: `front_end/panels/parent/ParentWidget.ts`. Demonstrates passing state v
 ```ts
 // front_end/panels/parent/ParentWidget.ts
 
-import * as Lit from '../../ui/lit/lit.js';
+import {html, render} from '../../ui/lit/lit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {MyExampleWidget} from '../my_example/MyExampleWidget.ts';
 
 import parentWidgetStyles from './parentWidgetStyles.css';
 
-const {html, render} = Lit;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 interface ViewInput {
   title: string;

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>
+DevTools AIRC Bot <devtools-airc-bot@mths-airc-433412.iam.gserviceaccount.com>
 Dmitry Kryaklin <dmkryak@gmail.com>
 Douglas Chiang <douglasdothnc@gmail.com>
 Dragonish <no.web.developer@outlook.com>
@@ -85,6 +86,7 @@ Muhammad Mahad <mahadtxt@gmail.com>
 Naoto Ono <onoto1998@gmail.com>
 Navoda Munasinha <navoda.munasinha@codimite.com>
 Nourhan Hasan <nourhan.m.hasan@gmail.com>
+Omar Ramadan <omar@blockcast.net>
 Paras Awasthi <awasthiparas6@gmail.com>
 Paul Fisher <paul@pfish.zone>
 Peng Zhou <zhoupeng.1996@bytedance.com>
@@ -111,6 +113,7 @@ Simon Siefke <simon.siefke@gmail.com>
 Stephen Tsoi-A-Sue <stsoiasue@gmail.com>
 Steve Harrison <steve@steveharrison.dev>
 Sunnylost <sunnylost@gmail.com>
+Sutthinon <mankhong.garden@gmail.com>
 Suyoung Jung <tdhitbtd@gmail.com>
 TaegeonKim <aksen5240@gmail.com>
 Thomas Stokes <git@tombl.dev>

package/DIR_METADATA

@@ -17,6 +17,26 @@ agentic_review: {
       ".agents/skills/devtools-ux-writing-refactor/SKILL.md"
     ]
   }
+  capability_groups: {
+    path_expression: [
+      "front_end/(core|models|entrypoints|generated)/.*\\.ts",
+      ".*BUILD\\.gn",
+      ".*\\.gni"
+    ]
+    path_expression_exclusion: [".*\\.test\\.ts"]
+    rules: [
+      ".agents/rules/models-and-core/core-trace-engine-handler-invariants.md",
+      ".agents/rules/models-and-core/core-sdk-model-and-target-lifecycle.md",
+      ".agents/rules/models-and-core/core-gn-build-and-module-layering.md",
+      ".agents/rules/models-and-core/core-ai-agent-context-and-prompt-discipline.md",
+      ".agents/rules/models-and-core/core-runtime-neutrality-and-platform-utils.md",
+      ".agents/rules/models-and-core/core-cdp-and-extension-error-handling.md",
+      ".agents/rules/models-and-core/core-security-origin-and-capability-guards.md",
+      ".agents/rules/models-and-core/core-sourcemap-and-workspace-mapping.md",
+      ".agents/rules/models-and-core/core-settings-and-storage-migration.md",
+      ".agents/rules/models-and-core/core-trace-insight-models-and-timing-types.md"
+    ]
+  }
   capability_groups: {
     path_expression: ["front_end/(panels|ui)/.*\\.(ts|css)"]
     path_expression_exclusion: [".*\\.test\\.ts"]
@@ -24,13 +44,43 @@ agentic_review: {
       ".agents/skills/ui-widgets/SKILL.md",
       ".agents/skills/ui-eng-vision-orchestrator/SKILL.md"
     ]
+    rules: [
+      ".agents/rules/ui-and-widgets/ui-modern-component-and-encapsulation-standards.md",
+      ".agents/rules/ui-and-widgets/ui-type-safety-and-exhaustiveness.md",
+      ".agents/rules/ui-and-widgets/ui-pure-view-and-presenter-separation.md",
+      ".agents/rules/ui-and-widgets/ui-lit-declarative-templates-and-directives.md",
+      ".agents/rules/ui-and-widgets/ui-widget-dom-and-listener-lifecycle.md",
+      ".agents/rules/ui-and-widgets/ui-accessibility-and-semantic-html.md",
+      ".agents/rules/ui-and-widgets/ui-performance-and-flamechart-rendering.md",
+      ".agents/rules/ui-and-widgets/ui-localization-and-uistrings-hygiene.md",
+      ".agents/rules/ui-and-widgets/ui-reactive-widget-update-lifecycle.md",
+      ".agents/rules/ui-and-widgets/ui-visual-logging-instrumentation.md",
+      ".agents/rules/ui-and-widgets/ui-css-scoping-and-flex-layout.md",
+      ".agents/rules/ui-and-widgets/ui-view-output-and-callback-contracts.md",
+      ".agents/rules/ui-and-widgets/ui-panel-and-meta-registration.md",
+      ".agents/rules/ui-and-widgets/ui-weak-dom-references-and-observer-cleanup.md",
+      ".agents/rules/ui-and-widgets/ui-security-and-output-sanitization.md",
+      ".agents/rules/ui-and-widgets/ui-declarative-child-widget-composition.md",
+      ".agents/rules/ui-and-widgets/ui-await-update-complete-post-render.md"
+    ]
   }
   capability_groups: {
-    path_expression: [".*\\.test\\.ts", "test/.*\\.ts"]
+    path_expression: [".*\\.test\\.ts", "test/.*\\.ts", "front_end/testing/.*\\.ts"]
     review_capability_skills: [
       ".agents/skills/devtools-testing-guidance/SKILL.md",
       ".agents/skills/foundation-test-migration/SKILL.md",
       ".agents/skills/fix-tests/SKILL.md"
     ]
+    rules: [
+      ".agents/rules/tests/test-shared-fixture-and-helper-reuse.md",
+      ".agents/rules/tests/test-modular-hooks-and-test-universe.md",
+      ".agents/rules/tests/test-deterministic-async-synchronization.md",
+      ".agents/rules/tests/test-strict-assertions-and-literal-expectations.md",
+      ".agents/rules/tests/test-view-and-presenter-isolation.md",
+      ".agents/rules/tests/test-public-api-and-encapsulation.md",
+      ".agents/rules/tests/test-single-responsibility-and-conciseness.md",
+      ".agents/rules/tests/test-type-safe-mocks-and-events.md",
+      ".agents/rules/tests/test-cleanup-mutated-globals-and-widgets.md"
+    ]
   }
 }

package/docs/ui_engineering.md

@@ -906,6 +906,34 @@ export const DEFAULT_VIEW = (input, _output, target) => {
 };
 ```
 
+### Long-press action buttons
+
+Imperative long-press action buttons (`UI.Toolbar.Toolbar.createLongPressActionButton`) are migrated declaratively by nesting secondary `<devtools-button>` elements inside `<devtools-button ${bindToAction('...')}>`. The parent button triggers the primary action on click, and holding the button down opens a menu presenting the nested buttons:
+
+```typescript
+export const DEFAULT_VIEW = (input, _output, target) => {
+  const {bindToAction} = UI.UIUtils;
+  render(html`
+    <devtools-toolbar>
+      <devtools-button ${bindToAction('debugger.toggle-pause')}>
+        <devtools-button
+            .iconName=${'stop'}
+            .variant=${Buttons.Button.Variant.TOOLBAR}
+            .title=${i18nString(UIStrings.terminateCurrentJavascriptCall)}
+            @click=${input.onTerminateExecution}>
+        </devtools-button>
+        <devtools-button
+            .iconName=${'play'}
+            .variant=${Buttons.Button.Variant.TOOLBAR}
+            .title=${i18nString(UIStrings.resumeWithAllPausesBlockedForMs)}
+            @click=${input.onLongResume}>
+        </devtools-button>
+      </devtools-button>
+    </devtools-toolbar>`,
+    target);
+};
+```
+
 ## Binding a setting to a checkbox
 
 Use the `bindToSetting` directive to bind a boolean setting to a `<devtools-checkbox>` component.
@@ -1244,6 +1272,12 @@ export const DEFAULT_VIEW = (input, _output, target) => {
 };
 ```
 
+### Pre-existing Widget Instances (`WrapperWidget`)
+When embedding pre-existing `UI.Widget` instances that are created elsewhere (such as `UI.ViewManager` locations: `TabbedViewLocation.tabbedPane()`, `StackLocation.widget()`), render them declaratively using `${widget(UI.Widget.WrapperWidget, {widget: myWidgetInstance})}` instead of creating custom wrapper widget classes. `WrapperWidget` automatically forwards constraints and manages child widget attach/detach lifecycles.
+
+### Preserving `showMode` Settings
+When migrating a `SplitWidget` that persists sidebar visibility (e.g. via `splitWidget.showModeSetting()`), bind the setting's value to the `<devtools-split-view show=${input.showMode}>` property (`Both`, `OnlyMain`, or `OnlySidebar`) to preserve user settings and layout state across sessions.
+
 ## Migrating `UI.ARIAUtils` helpers
 
 Replace calls to `UI.ARIAUtils` helper functions with the corresponding ARIA attributes directly in the lit-html template.

package/eslint.config.mjs

@@ -267,8 +267,7 @@ export default defineConfig([
         'error',
         {
           selector: 'ExportDefaultDeclaration',
-          message:
-            'Default exports are not allowed. Use named exports instead.',
+          message: 'Default exports are not allowed. Use named exports instead.',
         },
       ],
       /**
@@ -309,8 +308,8 @@ export default defineConfig([
         'error',
         {
           definedTags: [
-            'attribute', // @attribute is used by lit-analyzer (through web-component-analyzer)
-            'meaning', // @meaning is used by localization
+            'attribute',  // @attribute is used by lit-analyzer (through web-component-analyzer)
+            'meaning',    // @meaning is used by localization
           ],
         },
       ],
@@ -341,11 +340,11 @@ export default defineConfig([
       parserOptions: {
         allowAutomaticSingleRunInference: true,
         project: join(
-          import.meta.dirname,
-          'config',
-          'typescript',
-          'tsconfig.eslint.json',
-        ),
+            import.meta.dirname,
+            'config',
+            'typescript',
+            'tsconfig.eslint.json',
+            ),
       },
     },
 
@@ -588,12 +587,12 @@ export default defineConfig([
         {
           // Enforce that any import of models/trace/trace.js names the import Trace.
           modulePath: join(
-            import.meta.dirname,
-            'front_end',
-            'models',
-            'trace',
-            'trace.js',
-          ),
+              import.meta.dirname,
+              'front_end',
+              'models',
+              'trace',
+              'trace.js',
+              ),
           importName: 'Trace',
         },
       ],
@@ -668,6 +667,8 @@ export default defineConfig([
       ],
       '@devtools/static-custom-event-names': 'error',
       '@devtools/lit-no-attribute-quotes': 'error',
+      '@devtools/lit-no-non-latin1': 'error',
+      '@devtools/no-boolean-input-checked-attr': 'error',
       '@devtools/lit-template-result-or-nothing': 'error',
       '@devtools/inject-checkbox-styles': 'error',
       '@devtools/jslog-context-list': 'error',
@@ -792,6 +793,7 @@ export default defineConfig([
       '@devtools/prefer-url-string': 'error',
       '@devtools/trace-engine-test-timeouts': 'error',
       '@devtools/no-document-body-mutation': 'error',
+      '@devtools/no-manual-sinon-restore': 'error',
       // Don't update the KnownContext with test data.
       '@devtools/jslog-context-list': 'off',
       '@devtools/enforce-custom-element-definitions-location': 'off',
@@ -821,10 +823,16 @@ export default defineConfig([
   {
     name: 'Use private class members rule',
     files: [
+      'front_end/core/**/*.ts',
+      'front_end/models/**/*.ts',
       'front_end/panels/**/components/*.ts',
       'front_end/ui/components/**/*.ts',
       'front_end/entrypoints/**/*.ts',
     ],
+    ignores: [
+      'front_end/core/**/*.test.ts',
+      'front_end/models/**/*.test.ts',
+    ],
 
     rules: {
       '@devtools/prefer-private-class-members': 'error',
@@ -833,6 +841,29 @@ export default defineConfig([
   {
     name: 'Ignore private class members rule',
     files: [
+      'front_end/core/common/**/*.ts',
+      'front_end/core/host/**/*.ts',
+      'front_end/core/platform/**/*.ts',
+      'front_end/core/protocol_client/**/*.ts',
+      'front_end/core/sdk/**/*.ts',
+      'front_end/core/text_utils/**/*.ts',
+      'front_end/models/bindings/**/*.ts',
+      'front_end/models/breakpoints/**/*.ts',
+      'front_end/models/computed_style/**/*.ts',
+      'front_end/models/cpu_profile/**/*.ts',
+      'front_end/models/elements/**/*.ts',
+      'front_end/models/emulation/**/*.ts',
+      'front_end/models/extensions/**/*.ts',
+      'front_end/models/formatter/**/*.ts',
+      'front_end/models/har/**/*.ts',
+      'front_end/models/javascript_metadata/**/*.ts',
+      'front_end/models/logs/**/*.ts',
+      'front_end/models/persistence/**/*.ts',
+      'front_end/models/source_map_scopes/**/*.ts',
+      'front_end/models/trace/**/*.ts',
+      'front_end/models/trace_source_maps_resolver/**/*.ts',
+      'front_end/models/workspace/**/*.ts',
+      'front_end/models/workspace_diff/**/*.ts',
       'front_end/panels/recorder/**/*.ts',
       'front_end/ui/components/suggestion_input/*.ts',
     ],
@@ -899,12 +930,12 @@ export default defineConfig([
           bannedImportPaths: [
             {
               bannedPath: join(
-                import.meta.dirname,
-                'front_end',
-                'core',
-                'sdk',
-                'sdk.js',
-              ),
+                  import.meta.dirname,
+                  'front_end',
+                  'core',
+                  'sdk',
+                  'sdk.js',
+                  ),
               allowTypeImports: true,
             },
           ],
@@ -963,4 +994,15 @@ export default defineConfig([
       'no-restricted-syntax': 'off',
     },
   },
+  {
+    name: 'Mocha test harness setup files',
+    files: [
+      'front_end/testing/test_setup.ts',
+      'test/unit/mocha-hooks.ts',
+    ],
+    rules: {
+      // Global Mocha test harness restores Sinon stubs and timers after each test.
+      '@devtools/no-manual-sinon-restore': 'off',
+    },
+  },
 ]);

package/front_end/core/common/Settings.ts

@@ -258,6 +258,11 @@ export class Settings {
     return setting;
   }
 
+  /** The event target shared by all settings. Change listeners are registered with the setting name as event type. */
+  get eventTargetForTest(): ObjectWrapper<GenericEvents> {
+    return this.#eventSupport;
+  }
+
   /**
    * Get setting via key, and create a new setting if the requested setting does not exist.
    * @param key kebab-case string ID

package/front_end/core/host/UserMetricsEnums.ts

@@ -636,6 +636,7 @@ export enum IssueCreated {
   'GenericIssue::AutofillAndManualTextPolicyControlledFeaturesInfo' = 114,
   'GenericIssue::AutofillPolicyControlledFeatureInfo' = 115,
   'GenericIssue::ManualTextPolicyControlledFeatureInfo' = 116,
+  'GenericIssue::GeolocationPromptWithoutUserGesture' = 117,
   'CorsIssue::InvalidLocalNetworkAccess' = 118,
   /* eslint-enable @typescript-eslint/naming-convention */
   MAX_VALUE = 119,

package/front_end/core/platform/api/HostRuntime.ts

@@ -36,6 +36,7 @@ export interface HostRuntime {
   getCacheStorage(): CacheStorageLike|undefined;
   getDevicePixelRatio(): number;
   saveScreenshot(options: ScreenshotOptions): Promise<void>;
+  copyScreenshot(options: ScreenshotOptions): Promise<void>;
   revokeLastScreenshotUrl(): void;
   loadTextFile(url: URL): Promise<string>;
   evaluateCSS(dataValue: string|null, customExpr: string): string|null;

package/front_end/core/platform/browser/HostRuntime.ts

@@ -130,6 +130,15 @@ async function saveScreenshot(options: Api.HostRuntime.ScreenshotOptions): Promi
   link.click();
 }
 
+async function copyScreenshot(options: Api.HostRuntime.ScreenshotOptions): Promise<void> {
+  const response = await fetch('data:image/png;base64,' + options.base64Png);
+  const blob = await response.blob();
+
+  await navigator.clipboard.write([
+    new ClipboardItem({'image/png': blob}),
+  ]);
+}
+
 let cssEvaluationElement: HTMLElement|null = null;
 
 export const HOST_RUNTIME: Api.HostRuntime.HostRuntime = {
@@ -155,6 +164,7 @@ export const HOST_RUNTIME: Api.HostRuntime.HostRuntime = {
     return window.devicePixelRatio;
   },
   saveScreenshot,
+  copyScreenshot,
   revokeLastScreenshotUrl,
   async loadTextFile(url: URL): Promise<string> {
     const response = await fetch(url);

package/front_end/core/platform/node/HostRuntime.ts

@@ -137,6 +137,7 @@ export const HOST_RUNTIME: Api.HostRuntime.HostRuntime = {
     return 1;
   },
   async saveScreenshot(_options: Api.HostRuntime.ScreenshotOptions): Promise<void>{},
+  async copyScreenshot(_options: Api.HostRuntime.ScreenshotOptions): Promise<void>{},
   revokeLastScreenshotUrl(): void{},
   async loadTextFile(url: URL): Promise<string> {
     return await Fs.promises.readFile(Url.fileURLToPath(url), 'utf-8');

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -27,6 +27,7 @@ import {
   EnvFunctionMatcher,
   FlexGridGridLanesMatcher,
   GridTemplateMatcher,
+  ImportantMatcher,
   LengthMatcher,
   LightDarkColorMatcher,
   LinearGradientMatcher,
@@ -140,6 +141,10 @@ function cleanUserAgentPayload(payload: Protocol.CSS.RuleMatch[]): Protocol.CSS.
   }
 }
 
+function parseCustomHighlightName(selectorText: string): string|null {
+  return selectorText.match(/::highlight\(([^)]+)\)/)?.[1] ?? null;
+}
+
 /**
  * Return a mapping of the highlight names in the specified RuleMatch to
  * the indices of selectors in that selector list with that highlight name.
@@ -164,15 +169,15 @@ function cleanUserAgentPayload(payload: Protocol.CSS.RuleMatch[]): Protocol.CSS.
  * list associated with ruleMatch. The indices correspond to the selectors in the rule
  * associated with the key's highlight name.
  */
-function customHighlightNamesToMatchingSelectorIndices(ruleMatch: Protocol.CSS.RuleMatch): Map<string, number[]> {
+function customHighlightNamesToMatchingSelectorIndices(ruleMatch: Protocol.CSS.RuleMatch,
+                                                       highlightNames: Set<string>): Map<string, number[]> {
   const highlightNamesToMatchingSelectors = new Map<string, number[]>();
 
   for (let i = 0; i < ruleMatch.matchingSelectors.length; i++) {
     const matchingSelectorIndex = ruleMatch.matchingSelectors[i];
     const selectorText = ruleMatch.rule.selectorList.selectors[matchingSelectorIndex].text;
-    const highlightNameMatch = selectorText.match(/::highlight\((.*)\)/);
-    if (highlightNameMatch) {
-      const highlightName = highlightNameMatch[1];
+    const highlightName = parseCustomHighlightName(selectorText);
+    if (highlightName) {
       const selectorsForName = highlightNamesToMatchingSelectors.get(highlightName);
       if (selectorsForName) {
         selectorsForName.push(matchingSelectorIndex);
@@ -181,9 +186,36 @@ function customHighlightNamesToMatchingSelectorIndices(ruleMatch: Protocol.CSS.R
       }
     }
   }
+
+  const universalSelectors = highlightNamesToMatchingSelectors.get('*');
+  if (universalSelectors) {
+    for (const highlightName of highlightNames) {
+      const selectorsForName = highlightNamesToMatchingSelectors.get(highlightName) ?? [];
+      highlightNamesToMatchingSelectors.set(highlightName, [...selectorsForName, ...universalSelectors]);
+    }
+  }
   return highlightNamesToMatchingSelectors;
 }
 
+function getCustomHighlightNames(pseudoPayload: Protocol.CSS.PseudoElementMatches[]): Set<string> {
+  const highlightNames = new Set<string>();
+  for (const entryPayload of pseudoPayload) {
+    if (entryPayload.pseudoType !== Protocol.DOM.PseudoType.Highlight || !entryPayload.matches) {
+      continue;
+    }
+    for (const ruleMatch of entryPayload.matches) {
+      for (const matchingSelectorIndex of ruleMatch.matchingSelectors) {
+        const selectorText = ruleMatch.rule.selectorList.selectors[matchingSelectorIndex].text;
+        const highlightName = parseCustomHighlightName(selectorText);
+        if (highlightName && highlightName !== '*') {
+          highlightNames.add(highlightName);
+        }
+      }
+    }
+  }
+  return highlightNames;
+}
+
 function queryMatches(style: CSSStyleDeclaration): boolean {
   if (!style.parentRule) {
     return true;
@@ -564,13 +596,14 @@ export class CSSMatchedStyles {
    * This helper function takes a list of rule matches and generates separate NodeCascades
    * for each custom highlight name that was matched.
    */
-  private buildSplitCustomHighlightCascades(
-      rules: Protocol.CSS.RuleMatch[], node: DOMNode, isInherited: boolean,
-      pseudoCascades: Map<string, NodeCascade[]>): void {
+  private buildSplitCustomHighlightCascades(rules: Protocol.CSS.RuleMatch[], node: DOMNode, isInherited: boolean,
+                                            highlightNames: Set<string>,
+                                            pseudoCascades: Map<string, NodeCascade[]>): void {
     const splitHighlightRules = new Map<string, CSSStyleDeclaration[]>();
 
     for (let j = rules.length - 1; j >= 0; --j) {
-      const highlightNamesToMatchingSelectorIndices = customHighlightNamesToMatchingSelectorIndices(rules[j]);
+      const highlightNamesToMatchingSelectorIndices =
+          customHighlightNamesToMatchingSelectorIndices(rules[j], highlightNames);
 
       for (const [highlightName, matchingSelectors] of highlightNamesToMatchingSelectorIndices) {
         const pseudoRule = new CSSStyleRule(this.#cssModel, rules[j].rule);
@@ -613,6 +646,8 @@ export class CSSMatchedStyles {
 
     const pseudoCascades = new Map<Protocol.DOM.PseudoType, NodeCascade[]>();
     const customHighlightPseudoCascades = new Map<string, NodeCascade[]>();
+    const highlightNames = getCustomHighlightNames(
+        [...pseudoPayload, ...(inheritedPseudoPayload || []).flatMap(entry => entry.pseudoElements)]);
     for (let i = 0; i < pseudoPayload.length; ++i) {
       const entryPayload = pseudoPayload[i];
       // PseudoElement nodes are not created unless "content" css property is set.
@@ -621,8 +656,8 @@ export class CSSMatchedStyles {
       const rules = entryPayload.matches || [];
 
       if (entryPayload.pseudoType === Protocol.DOM.PseudoType.Highlight) {
-        this.buildSplitCustomHighlightCascades(
-            rules, this.#node, false /* #isInherited */, customHighlightPseudoCascades);
+        this.buildSplitCustomHighlightCascades(rules, this.#node, false /* #isInherited */, highlightNames,
+                                               customHighlightPseudoCascades);
       } else {
         for (let j = rules.length - 1; j >= 0; --j) {
           const pseudoRule = new CSSStyleRule(this.#cssModel, rules[j].rule);
@@ -651,8 +686,8 @@ export class CSSMatchedStyles {
           const rules = inheritedEntryPayload.matches || [];
 
           if (inheritedEntryPayload.pseudoType === Protocol.DOM.PseudoType.Highlight) {
-            this.buildSplitCustomHighlightCascades(
-                rules, parentNode, true /* #isInherited */, customHighlightPseudoCascades);
+            this.buildSplitCustomHighlightCascades(rules, parentNode, true /* #isInherited */, highlightNames,
+                                                   customHighlightPseudoCascades);
           } else {
             const pseudoStyles = [];
             for (let k = rules.length - 1; k >= 0; --k) {
@@ -1490,19 +1525,23 @@ class DOMInheritanceCascade {
       return null;
     }
 
-    if (definedValue.declaration.declaration instanceof CSSProperty && definedValue.declaration.value &&
-        CSSMetadata.isCSSWideKeyword(definedValue.declaration.value)) {
-      const resolvedProperty =
-          this.resolveGlobalKeyword(definedValue.declaration.declaration, definedValue.declaration.value);
+    while (definedValue.declaration.declaration instanceof CSSProperty && definedValue.declaration.value) {
+      const value = PropertyParser
+                        .matchDeclaration(`--${variableName}`, definedValue.declaration.value, [new ImportantMatcher()])
+                        ?.getComputedPropertyValueText()
+                        .trim();
+      if (!value || !CSSMetadata.isCSSWideKeyword(value)) {
+        break;
+      }
+      const resolvedProperty = this.resolveGlobalKeyword(definedValue.declaration.declaration, value);
       if (!resolvedProperty) {
         return definedValue;
       }
       const declaration = new CSSValueSource(resolvedProperty);
-      const {value} = declaration;
-      if (!value) {
+      if (!declaration.value) {
         return definedValue;
       }
-      definedValue = {declaration, value};
+      definedValue = {declaration, value: declaration.value};
     }
 
     const ast = PropertyParser.tokenizeDeclaration(`--${variableName}`, definedValue.value);
@@ -1623,9 +1662,10 @@ class DOMInheritanceCascade {
             }
             return evaluateFallback(match.fallback, match.matching);
           }),
+      ...(declaration ? [new ImportantMatcher()] : []),
     ]);
     const decl = PropertyParser.ASTUtils.siblings(PropertyParser.ASTUtils.declValue(matching.ast.tree));
-    const declText = decl.length > 0 ? matching.getComputedTextRange(decl[0], decl[decl.length - 1]) : '';
+    const declText = decl.length > 0 ? matching.getComputedTextRange(decl[0], decl[decl.length - 1]).trim() : '';
     const hasUnresolvedSubstitutions =
         decl.length > 0 && matching.hasUnresolvedSubstitutionsRange(decl[0], decl[decl.length - 1]);
     const computedText = hasUnresolvedSubstitutions ? null : declText;

package/front_end/core/sdk/CSSModel.ts

@@ -537,6 +537,24 @@ export class CSSModel extends SDKModel<EventTypes> {
     return true;
   }
 
+  forcePositionTryOption(node: DOMNode, index?: number): boolean {
+    const currentForcedIndex = node.marker<number>(PositionTryOptionMarker) ?? undefined;
+    if (currentForcedIndex === index) {
+      return false;
+    }
+    node.setMarker(PositionTryOptionMarker, index ?? null);
+    if (node.id === undefined) {
+      return false;
+    }
+    void this.agent.invoke_forcePositionTryOption({nodeId: node.id, index});
+    this.dispatchEventToListeners(Events.PositionTryOptionForced, node);
+    return true;
+  }
+
+  forcedPositionTryOption(node: DOMNode): number|undefined {
+    return node.marker<number>(PositionTryOptionMarker) ?? undefined;
+  }
+
   forcePseudoState(node: DOMNode, pseudoClass: string, enable: boolean): boolean {
     const forcedPseudoClasses = node.marker<string[]>(PseudoStateMarker) || [];
     const hasPseudoClass = forcedPseudoClasses.includes(pseudoClass);
@@ -1058,6 +1076,7 @@ export enum Events {
   MediaQueryResultChanged = 'MediaQueryResultChanged',
   ModelWasEnabled = 'ModelWasEnabled',
   ModelDisposed = 'ModelDisposed',
+  PositionTryOptionForced = 'PositionTryOptionForced',
   PseudoStateForced = 'PseudoStateForced',
   StartingStylesStateForced = 'StartingStylesStateForced',
   StyleSheetAdded = 'StyleSheetAdded',
@@ -1087,6 +1106,7 @@ export interface EventTypes {
   [Events.MediaQueryResultChanged]: void;
   [Events.ModelWasEnabled]: void;
   [Events.ModelDisposed]: CSSModel;
+  [Events.PositionTryOptionForced]: DOMNode;
   [Events.PseudoStateForced]: PseudoStateForcedEvent;
   [Events.StartingStylesStateForced]: DOMNode;
   [Events.StyleSheetAdded]: CSSStyleSheetHeader;
@@ -1096,6 +1116,7 @@ export interface EventTypes {
 }
 
 const PseudoStateMarker = 'pseudo-state-marker';
+const PositionTryOptionMarker = 'position-try-option-marker';
 
 export class Edit {
   styleSheetId: string;