chrome-devtools-frontend 1.0.1717196 → 1.0.1717709

package/.agents/skills/devtools-testing-guidance/SKILL.md

@@ -37,7 +37,8 @@ Use API tests for integration tests that verify business logic requiring more co
   - Tests that require extensive CDP mock setup.
   - Verifying the "foundational layer" of DevTools models against a real browser/web page.
 - **Location:** Defined in `front_end/` with `.test.api.ts` extension (e.g. `Universe.test.api.ts`).
-- **BUILD.gn**: test file should be added to `devtools_api_test_module("api_tests")` target in the corresponding `BUILD.gn` file.
+- **Test functions:** import `describe`, `it` and `setup` from `test/api/mocha-interface.ts`. They are not available as globals.
+- **BUILD.gn**: test file should be added to `devtools_api_test_module("api_tests")` target in the corresponding `BUILD.gn` file, which needs `test/api` in its `ts_deps`.
 
 ---
 
@@ -49,4 +50,5 @@ Use E2E tests to verify real end-to-end user stories and user journeys.
   - Verifying full user journeys across DevTools panels and drawers.
   - Complex UI behaviors that require extensive user interaction setup and benefit from a complete DevTools frontend page connected to an inspected target page over CDP.
 - **Location:** Defined in `test/e2e/` (e.g. `test/e2e/console/console-log.test.ts`).
-- **BUILD.gn**: test file should be added to `ts_e2e_library(ts_e2e_library)` target in the corresponding `BUILD.gn` file. And `node_ts_library` in `test/e2e/BUILD.gn` for its dependencies.
+- **Test functions:** import `describe`, `it` and `setup` from `test/e2e/conductor/mocha-interface.ts` (e.g. `import {describe, it} from '../conductor/mocha-interface.js';`). They are not available as globals.
+- **BUILD.gn**: test file should be added to the `node_ts_library` target in the corresponding `BUILD.gn` file, which needs `"../conductor:implementation"` in its `ts_deps`. And `node_ts_library` in `test/e2e/BUILD.gn` for its dependencies.

package/.agents/skills/ui-eng-vision-local-lit-renderer/SKILL.md

@@ -34,14 +34,18 @@ existing element containers.
         that method. **Do not** introduce Widget lifecycle methods
         (`performUpdate`) on classes that do not inherit them.
 
-3.  **Import Modern Templating**:
+3.  **Import Modern Templating (Named Imports Only)**:
 
-    *   Import the `Lit` rendering system inside the view module:
+    *   Always use named imports from `../../ui/lit/lit.js`:
 
         ```typescript
-        import {html, render, nothing} from '../../ui/lit/lit.js';
+        import {html, nothing, render, Directives, type LitTemplate} from '../../ui/lit/lit.js';
         ```
 
+    *   **NEVER** use namespace imports like `import * as Lit` or reference
+        `Lit.nothing` / `Lit.render`. Named imports enable better tree-shaking and
+        maintain consistent codebase style.
+
 4.  **Modern Component Mapping**:
     *   **MANDATORY**: You **MUST** read and load [ui_engineering.md](../../../docs/ui_engineering.md) first to understand specific component mappings (e.g., Toolbar vs `devtools-toolbar`). Do not assume standard Lit defaults.
     *   If unsure, also consult the [automatic migration code](../../../scripts/eslint_rules/lib/no-imperative-dom-api.ts)
@@ -115,13 +119,53 @@ existing element containers.
     *   The Gerrit Code Review UI cannot identify moved blocks of unchanged code.
     *   If blocks of code need to be reordered, create a "prefactoring" change that first extracts the code that needs to be reordered into a named helper functions and pause the migration, waiting user confirmation.
 
-12. **Micro-Commit Strategy**:
+12. **Embedding Pre-Existing `UI.Widget` Instances via `UI.Widget.WrapperWidget`**:
+
+    *   Use `${widget(UI.Widget.WrapperWidget, {widget: input.childWidget})}` when
+        embedding widgets owned by `UI.ViewManager`
+        (`TabbedViewLocation.tabbedPane()`, `StackLocation.widget()`) or when
+        conditionally moving a shared widget instance between containers
+        (`{widget: shouldShow ? this.#sharedWidget : null}`).
+    *   `WrapperWidget` automatically handles showing and detaching the inner
+        widget and forwards calculateConstraints without requiring custom wrapper
+        classes.
+
+13. **Declarative `<devtools-split-view>` Guidelines**:
+
+    *   **CSS Sizing**: Ensure `<devtools-split-view>` has `flex: auto; height: 100%;`
+        in CSS so it fills available container space and doesn't collapse to 0x0.
+    *   **Reuse Existing Settings for `showMode`**: When binding `show=${...}`
+        declaratively on `<devtools-split-view name="...">`, reuse the existing
+        `SplitWidget` setting (`{vertical?: {size, showMode}, horizontal?: {size, showMode}}`)
+        for `showMode` rather than creating new boolean settings (which loses user
+        preferences and requires `KnownContextValues.ts` updates).
+    *   **Keep Environment Overrides in Templates**: Keep environment overrides
+        (like `!input.isTraceApp`) in the `DEFAULT_VIEW` template (e.g.,
+        `show=${!input.isTraceApp && input.isSidebarOpen ? 'both' : 'main'}`)
+        rather than baking them into the presenter's setting state.
+    *   **Clean Up Resizers**: Do not leave unused `resizer-widget` classes in
+        templates; `<devtools-split-view>` manages its own built-in splitter
+        unless custom elements are explicitly registered with `installResizer`.
+
+14. **Declarative Long-Press Action Buttons (`bindToAction`)**:
+
+    *   Legacy `UI.Toolbar.Toolbar.createLongPressActionButton(action, [subButtons])`
+        maps declaratively to nesting option `<devtools-button>` elements directly
+        inside `<devtools-button ${bindToAction('action-id')}>...</devtools-button>`.
+
+15. **Audit Removed `UIStrings`**:
+
+    *   If a `UIStrings` entry becomes unused during template migration, verify
+        that a conditional UI branch (such as a dynamically shown checkbox, button,
+        or tooltip) wasn't accidentally dropped before deleting the string.
+
+16. **Micro-Commit Strategy**:
 
     *   Do not attempt to convert every helper method and UI component in a single monolithic commit. Break the template extraction into **small, self-contained micro-commits** (e.g., migrating one helper method, toolbar button, or list item render at a time).
     *   Verify with build and run tests after each micro-commit to guarantee zero regressions and 100% visual parity before moving to the next compartment.
     *   Provide the exact list of files and commit message when presenting progress so the change history remains atomic and easy to review.
 
-13. **Wait for confirmation**:
+17. **Wait for confirmation**:
 
     *   Wait for an explicit confirmation from the user (or Parent Orchestrator Agent) before proceeding to the next step.
 
@@ -130,8 +174,12 @@ existing element containers.
 ## 🔍 Mental Audit (Internal Self-Correction)
 
 *Before reporting back or committing, re-read the instructions and verify:*
-1.  ❓ **Tag Parity**: Did I accidentally change any `span` to `div` (or vice versa)?
-2.  ❓ **Attribute Drop**: Did I drop any `aria-*`, `role`, or custom data attributes?
-3.  ❓ **Clang-Off Boundary**: Is the template wrapped in `// clang-format off`?
-4.  ❓ **Build**: Does the code compile and do visual tests pass with 0% diff?
+1.  ❓ **Named Imports**: Did I use named imports `{html, nothing, render}` from `ui/lit/lit.js` (and no `import * as Lit`)?
+2.  ❓ **Tag Parity**: Did I accidentally change any `span` to `div` (or vice versa)?
+3.  ❓ **Attribute Drop**: Did I drop any `aria-*`, `role`, or custom data attributes?
+4.  ❓ **Clang-Off Boundary**: Is the template wrapped in `// clang-format off`?
+5.  ❓ **Split Views**: Does `<devtools-split-view>` have `flex: auto; height: 100%;` CSS and reuse existing split settings?
+6.  ❓ **String Audit**: Did I verify that any removed `UIStrings` weren't from accidentally dropped UI branches?
+7.  ❓ **Build**: Does the code compile and do visual tests pass with 0% diff?
+
 

package/.agents/skills/ui-eng-vision-logic-consolidator/SKILL.md

@@ -76,7 +76,29 @@ consolidating them into private helper methods with explicit data contracts.
         that first extracts the code that needs to be reordered into named
         helper functions and pause the migration, waiting for user confirmation.
 
-6.  **Wait for confirmation**:
+6.  **No Write-Only State Fields in Prefactor CLs**:
+
+    *   Do not introduce `#state` fields in a logic-consolidation CL that are only
+        written to in that CL and only read in the *next* CL's `DEFAULT_VIEW`.
+    *   Either read them in the prefactor CL (e.g., inside an extracted imperative
+        `#render...` helper) or introduce them in the CL that actually adds
+        `DEFAULT_VIEW`.
+
+7.  **Extract Imperative `#renderSubtreeContent()` Helpers**:
+
+    *   For complex layouts, extracting an imperative `#renderFooContent()`
+        helper in Pass 1 (while keeping the outer container imperative) minimizes
+        the Pass 2/3 diff when converting `#renderFooContent()` to
+        `renderFooContent(input: ViewInput): LitTemplate`.
+
+8.  **Preserve Imperative Cleanup Calls**:
+
+    *   When consolidating DOM/widget references (e.g., replacing
+        `#tabbedLocationHeader` with `#debuggerSidebarTabbedLocation`), preserve
+        imperative cleanup calls like `splitWidget.uninstallResizer(...)` until the
+        imperative container itself is removed.
+
+9.  **Wait for confirmation**:
 
     *   Wait for an explicit confirmation from the user (or Parent Orchestrator Agent) before proceeding to the next step.
 
@@ -86,6 +108,8 @@ consolidating them into private helper methods with explicit data contracts.
 
 *Before reporting back or committing, re-read the instructions and verify:*
 1.  ❓ **Minimal Diffs**: Did I move code blocks around unnecessarily?
-2.  ❓ **State Completeness**: Are all imperative DOM updates now backed by state variables?
-3.  ❓ **Build**: Does the code still compile?
+2.  ❓ **State Completeness & Utility**: Are all state variables actually read in this CL, with no write-only placeholders?
+3.  ❓ **Cleanup Preserved**: Are resizer/listener uninstallation calls preserved during reference consolidation?
+4.  ❓ **Build**: Does the code still compile?
+
 

package/.agents/skills/ui-eng-vision-orchestrator/SKILL.md

@@ -76,6 +76,26 @@ principles.
     clean and focused on high-level orchestration, prefer delegating intense
     execution tasks (like running tests, debugging compilations, or processing
     independent classes in parallel) to specialized subagents.
+13. **Cross-Repo Runtime Coupling Check (`legacy_test_runner` & `blink/web_tests`)**:
+    Before converting TypeScript `private` fields/methods to ES `#private` or
+    removing widget properties (e.g., `.tabbedPane`, `.sidebarPaneStack`,
+    `.threadsSidebarPane`, `.searchInputElement`), search both
+    `front_end/legacy_test_runner/**/*.js` and Chromium's
+    `third_party/blink/web_tests/http/tests/devtools/**/*.js` (which run on
+    `dtf_linux_rel` CQ via `blink_web_tests` and reflectively access private
+    members in untyped JS). Keep accessed members as TypeScript `private` with a
+    `// Accessed in web_tests / legacy_test_runner` comment, or migrate the
+    web_tests first in a dedicated CL.
+14. **Strict CL Splitting Rules**:
+    *   **One Class Per CL for Hybrid Files**: When modernizing files containing
+        multiple classes, extract or migrate secondary classes (e.g.,
+        `QuickSourceView`) into their own dedicated CLs.
+    *   **Separate Infrastructure CLs**: Keep shared `ui/legacy` or component
+        infrastructure changes (e.g., `bindToAction`, `SplitWidget`,
+        `WrapperWidget`) in separate, preceding CLs. Always verify with
+        `cog_api.py diff` before uploading that no changes from later commits
+        leaked into earlier infrastructure CLs.
+
 
 
 --------------------------------------------------------------------------------
@@ -129,6 +149,8 @@ The plan you generate **MUST** follow this structure:
 ## 🛠️ Passes Checklist
 - [ ] **Pass 0: Baseline & Safety Scaffolding**
   - Assigned to: `ui-eng-vision-test-scaffolder`
+- [ ] **Pass 0.5: Privatize & Dead-Code Cleanup**
+  - Mechanical prefactor: convert TypeScript `private` to ES `#private` and remove dead code
 - [ ] **Pass 1: Logic Consolidation**
   - Assigned to: `ui-eng-vision-logic-consolidator`
 - [ ] **Pass 2: Lit-HTML Rendering**
@@ -149,10 +171,18 @@ The plan you generate **MUST** follow this structure:
         regressions.
     2.  Pay extra attention not to skip this step.
 
+### Privatize & Dead-Code Cleanup (Pass 0.5)
+
+*   **Trigger Condition**: Baseline tests green.
+*   **Actions**:
+    1.  Perform the **Cross-Repo Runtime Coupling Check** against `legacy_test_runner` and `blink_web_tests` first.
+    2.  Convert internal TypeScript `private` fields/methods to ES `#private` (except those reflectively accessed by web tests).
+    3.  Identify and remove unused dead code, redundant containers, or obsolete split widgets in a dedicated prefactor CL so mechanical renames don't clutter logic and view CLs.
+    4.  Verify that all tests and lints pass and stage this prefactor CL before proceeding to logic consolidation.
+
 ### Logic Consolidation
 
-*   **Trigger Condition**: Baseline tests green (or respective previous pass
-    staged).
+*   **Trigger Condition**: Pass 0.5 staged (or baseline tests green if 0.5 skipped).
 *   **Subskill to Import/Delegate**: `ui-eng-vision-logic-consolidator` (Delegate to a subagent to maintain focus)
 *   **Actions**:
     1.  Extract manual elements, constructor DOM configurations, and imperative

package/.agents/skills/ui-eng-vision-test-scaffolder/SKILL.md

@@ -65,20 +65,23 @@ logical regressions are introduced during modernization.
 
 Always detect the execution environment first to run tests successfully:
 
-### Scenario A: Google-Internal Cog/Cider Workspaces (PRIMARY PATH for Google Workspaces)
+### Scenario A: Google-Internal Cog Workspaces (PRIMARY PATH for Google Workspaces)
 
 *   **Detection**: Triggered if the workspace path starts with `/google/cog/` or
     `/google/src/`.
-*   **Why it is required**: Raw commands like `./dt test` or `autoninja` fail
-    because they lack Google cloudtop/virtualization wrapper configurations.
+*   **Execution Guide**: Follow [`devtools-verification`](../devtools-verification/SKILL.md).
 *   **Resolution Steps**:
 
-    1.  Do not run `./dt test` or standard `autoninja` directly.
-    2.  Leverage the Google-specific Cider testing script to compile and run
-        tests in the cloud workspace:
+    1.  Ensure `depot_tools` is at the front of your `PATH`:
 
         ```bash
-        python3 internal/infra/scripts/cider/init_workspace.py test /google/cog/cloud/username/workspace_name --test_filter=front_end/panels/application/IndexedDBViews.test.ts
+        export PATH="/path/to/depot_tools:$PATH"
+        ```
+
+    2.  Execute tests using `./dt test` directly from `chromium/third_party/devtools-frontend/src`:
+
+        ```bash
+        ./dt test front_end/panels/application/IndexedDBViews.test.ts
         ```
 
 ### Scenario B: Standard Chromium Environment (Fallback)
@@ -133,6 +136,33 @@ Always detect the execution environment first to run tests successfully:
     3.  If it's a layout shift, check if you replaced a block element with an inline element (e.g. `div` -> `span`).
     4.  If styles are missing, verify if the test wrapper needs `{includeCommonStyles: true}`.
 
+### Scenario E: Lightweight Test Hook Gotchas (`describe` vs `describeWithEnvironment`)
+
+*   Prefer `describe` with lightweight hooks (`setupLocaleHooks()`, `setupSettingsHooks()`) when full `describeWithEnvironment` is unnecessary.
+*   **Always reset singleton registries in `afterEach`**:
+    When registering actions, shortcuts, or context menus in tests, singleton registries MUST be reset in `afterEach`:
+
+    ```typescript
+    afterEach(() => {
+      UI.ActionRegistration.reset();
+      UI.ActionRegistry.ActionRegistry.reset();
+      UI.ShortcutRegistry.ShortcutRegistry.removeInstance();
+    });
+    ```
+
+    Without these resets, repeated runs (such as `--repeat=10` or CQ flake detection) will fail on iteration 2+ with `Duplicate action ID: '...'`.
+
+*   **GlassPane Container Setup**:
+    If testing UI that opens a `GlassPane` or long-press option menu (e.g. `bindToAction` with long-press buttons) in a test suite using `describe` without `describeWithEnvironment`, call:
+
+    ```typescript
+    beforeEach(() => {
+      UI.GlassPane.GlassPane.setContainer(document.body);
+    });
+    ```
+
+    Otherwise, menu rendering will fail because `GlassPane` lacks an attached container element.
+
 --------------------------------------------------------------------------------
 
 ## 🔍 Mental Audit (Internal Self-Correction)

package/.agents/skills/ui-eng-vision-widget-promoter/SKILL.md

@@ -28,11 +28,11 @@ clean `UI.Widget` classes that use native update rendering delegates.
 2.  **Upgrade View Delegates & Inject View**:
 
     *   Migrate the local Lit template strings into a formally exported default
-        view layout:
+        view layout (using named imports `import {html, render} from '../../ui/lit/lit.js';`):
 
         ```typescript
         export const DEFAULT_VIEW: View = (input, output, target) => {
-          Lit.render(html`...`, target);
+          render(html`...`, target);
         };
         ```
 
@@ -67,10 +67,10 @@ clean `UI.Widget` classes that use native update rendering delegates.
 
     *   Remove any `LegacyWrapper` bindings or custom wrappable custom elements.
     *   Replace old panel instantiations with standard `<devtools-widget>`
-        declarative entries:
+        declarative entries (using `const {widget} = UI.Widget;`):
 
         ```typescript
-        html`<devtools-widget .widgetConfig=${widgetConfig(MyWidgetClass, [params])}></devtools-widget>`
+        html`<devtools-widget ${widget(MyWidgetClass, {params})}></devtools-widget>`
         ```
 
     *   Inspect instantiator files (e.g., `ApplicationPanelSidebar.ts`) and

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,11 @@ 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`.
 * Configuration is passed via the parameters.
 * Properties passed from a parent MUST be declared as public fields 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 +107,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 +154,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 +242,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/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/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/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;

package/front_end/core/sdk/CSSPropertyParser.ts

@@ -341,7 +341,7 @@ class ComputedTextChunk {
  * original and computed slices as required.
  **/
 export class ComputedText {
-  readonly #chunks: ComputedTextChunk[] = [];
+  #chunks: ComputedTextChunk[] = [];
   readonly text: string;
   readonly #topLevelValueCounts = new Map<string, number>();
 
@@ -356,6 +356,7 @@ export class ComputedText {
   }
 
   get chunkCount(): number {
+    this.#sortIfNecessary();
     return this.#chunks.length;
   }
 
@@ -363,6 +364,14 @@ export class ComputedText {
     if (this.#sorted) {
       return;
     }
+    // A match that was pushed more than once is superseded by its last push.
+    const lastPush = new Map<Match, ComputedTextChunk>();
+    for (const chunk of this.#chunks) {
+      lastPush.set(chunk.match, chunk);
+    }
+    if (lastPush.size < this.#chunks.length) {
+      this.#chunks = this.#chunks.filter(chunk => lastPush.get(chunk.match) === chunk);
+    }
     // Sort intervals by offset, with longer intervals first if the offset is identical.
     this.#chunks.sort((a, b) => {
       if (a.offset < b.offset) {
@@ -383,7 +392,7 @@ export class ComputedText {
   }
 
   // Add another substitutable match. The match will either be appended to the list of existing matches or it will
-  // be substituted for the last match(es) if it encompasses them.
+  // be substituted for the last match(es) if it encompasses them. Pushing a match again supersedes its earlier push.
   push(match: Match, offset: number): void {
     function hasComputedText(match: Match): match is MatchWithComputedText {
       return Boolean(match.computedText);

package/front_end/core/sdk/DOMModel.ts

@@ -1188,7 +1188,7 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
   }
 
   marker<T>(name: string): T|null {
-    return this.#markers.get(name) as T || null;
+    return (this.#markers.get(name) as T) ?? null;
   }
 
   getMarkerKeysForTest(): string[] {

package/front_end/core/sdk/DebuggerModel.ts

@@ -959,6 +959,9 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     this.#disableAsyncStackTracesSetting.removeChangeListener(this.asyncStackTracesStateChanged, this);
     this.#breakpointsActiveSetting.removeChangeListener(this.breakpointsActiveChanged, this);
     this.#jsSourceMapsEnabledSetting.removeChangeListener(this.jsSourceMapsStateChanged, this);
+    // Drop all scripts and their source maps, so they don't outlive the target in case something
+    // still holds on to this model (e.g. a console message with "Preserve log" enabled).
+    this.reset();
   }
 
   override async suspendModel(): Promise<void> {