chrome-devtools-frontend 1.0.1666631 → 1.0.1668390

package/.agents/skills/devtools-setting-migration/SKILL.md

@@ -0,0 +1,290 @@
+---
+name: devtools-setting-migration
+description: "Workflow for splitting an existing SettingRegistration into a SettingDescriptor (placed in the lowest layer where used: core/, models/, or ui/settings/) and SettingUIDescriptor (registered in a higher-level -meta.ts file, outside of core/ and models/)."
+---
+
+# DevTools Setting Migration Guide
+
+This skill guide describes how to migrate an existing legacy `SettingRegistration` in DevTools by splitting it into a `SettingDescriptor` (non-UI descriptor) and a `SettingUIDescriptor` (UI descriptor).
+
+---
+
+## Key Principles & Layer Boundaries
+
+### 1. `SettingDescriptor` Location ("Lowest Layer")
+* **Lowest Layer Rule:** A `SettingDescriptor` MUST be placed in the lowest architectural layer where the setting is used.
+  * **Core / Model Settings:** If a setting is used by `core/sdk` (or `models/`), its `SettingDescriptor` should be located in `core/sdk` (or `models/`).
+  * **Panel / UI Settings:** If a setting is only used by UI components or a specific panel (e.g. `panels/console/`), its `SettingDescriptor` **MUST GO INTO `ui/settings/FooSettings.ts`** (e.g. `ui/settings/ConsoleSettings.ts` where `Foo` is the panel name).
+* **CRITICAL RULE — PANEL DESCRIPTORS MUST NOT BE PLACED IN `panels/`:**
+  * A `SettingDescriptor` **MUST NOT** be placed inside a `panels/` directory (e.g. `panels/console/ConsoleSettings.ts`).
+  * **Reason:** Panel `-meta.ts` files (e.g. `panels/console/console-meta.ts`) need to import the `SettingDescriptor` to call `SettingsUI.SettingUIRegistration.register(descriptor, uiDescriptor)`. `-meta.ts` files are loaded early and **MUST NOT import from `panels/`** (which would break lazy-loading of panel bundles). Since `ui/settings/` is in the `ui/` layer below `panels/`, `-meta.ts` files can safely import from `ui/settings/`.
+* **CRITICAL RULE — MUST NOT BE IN A `-meta.ts` FILE:**
+  * A `SettingDescriptor` **MUST NOT** be placed in a `-meta.ts` file.
+  * **Reason:** Actual runtime code (e.g. models, panels, SDKs) needs to import the descriptor directly to call `Settings.instance().resolve(descriptor)`. Preload `-meta.ts` files are meant for lazy-loaded extension registrations and must not be imported by runtime code to avoid circular dependencies and module boundary violations.
+
+### 2. `SettingUIDescriptor` Location (Higher-Level `-meta.ts` File)
+* A `SettingUIDescriptor` defines UI-specific properties (category, title, tags, options, reload requirement, etc.).
+* **Higher-Level Meta File Rule:** UI registrations **MUST BE PLACED IN A `-meta.ts` FILE ON A HIGHER LEVEL** (e.g., `entrypoints/main/main-meta.ts`, `entrypoints/inspector_main/inspector_main-meta.ts`, `panels/settings/settings-meta.ts`, or the specific panel's `-meta.ts` file).
+* **CRITICAL RULE — MUST NOT REMAIN IN `core/` OR `models/`:**
+  * UI descriptors **MUST NOT** remain in or be added to `-meta.ts` files under `core/` or `models/` (such as `core/sdk/sdk-meta.ts` or `models/*/*-meta.ts`).
+  * **Goal:** A major goal of this migration is to completely eliminate `-meta.ts` files in `core/` and `models/`.
+
+### 3. Resolving Settings vs `moduleSetting(name)`
+* Legacy code retrieves settings using string identifiers: `Settings.instance().moduleSetting('setting-name')`.
+* Refactored code should replace `moduleSetting('setting-name')` with `Settings.instance().resolve(settingDescriptor)`.
+
+---
+
+## Step-by-Step Migration Workflow
+
+Given a setting name (e.g., `'preserve-console-log'` or `'network-messages'`):
+
+### Step 1: Locate Existing Registration & Analyze Use-Sites
+1. Search for the setting name in `-meta.ts` files to find its `Common.Settings.registerSettingExtension` block.
+2. Search for all occurrences of `'setting-name'` or `moduleSetting('setting-name')` across the codebase to identify all use-sites.
+3. Determine the **lowest layer** among all use-sites:
+   * If used in `core/sdk` -> Target directory is `core/sdk/`.
+   * If used in `models/` -> Target directory is `models/<module>/`.
+   * If used in a panel (`panels/foo`) or UI -> Target directory is **`ui/settings/`** (file: `ui/settings/FooSettings.ts`). **NEVER place descriptors in `panels/`**.
+
+---
+
+### Step 2: Extract & Define `SettingDescriptor` in the Lowest Layer
+
+#### Decision Strategy: Create vs. Update File
+When placing a `SettingDescriptor` in the target directory, decide whether to create or update a file using these rules:
+
+1. **For Panel / UI Settings (Target is `ui/settings/`)**:
+   * **UPDATE**: Check if `ui/settings/FooSettings.ts` already exists (e.g., `ui/settings/ConsoleSettings.ts`). If so, add and export the `SettingDescriptor` there.
+   * **CREATE**: If `ui/settings/FooSettings.ts` does not exist:
+     * Create `ui/settings/FooSettings.ts`.
+     * Add `FooSettings.ts` to `sources` in `ui/settings/BUILD.gn`.
+     * Export `FooSettings.ts` from `ui/settings/settings.ts`.
+
+2. **For Core / Model Settings (Target is `core/` or `models/`)**:
+   * **UPDATE**: Check if a module-wide settings file exists in that directory (e.g. `core/sdk/SDKSettings.ts`, `models/workspace/WorkspaceSettings.ts`). If so, add and export the `SettingDescriptor` there.
+   * **UPDATE**: If no module settings file exists and the setting is strictly used inside a single file (e.g., `ResourceTreeModel.ts`), update that `.ts` file by exporting the `SettingDescriptor` at the top.
+   * **CREATE**: Otherwise, create `<Module>Settings.ts` (e.g., `core/sdk/SDKSettings.ts`), add it to `sources` in `BUILD.gn`, and export it from the module's entrypoint (`sdk.ts`).
+
+#### Code Definition Example:
+Define and export the `SettingDescriptor` in the target file:
+
+```typescript
+import type * as Common from '../core/common/common.js';
+
+export const preserveConsoleLogSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'preserve-console-log',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+};
+```
+
+*Note: For conditional settings (dependent on `hostConfig`), use `Common.Settings.ConditionalSettingDescriptor<ValueT, ReasonT>` with an `isAvailable` function.*
+
+---
+
+### Step 3: Move UI Registration to a Higher-Level `-meta.ts` File
+If the original registration was in a `core/` or `models/` `-meta.ts` file (e.g., `core/sdk/sdk-meta.ts`), **MOVE** the UI registration to a higher-level `-meta.ts` file (e.g., `entrypoints/main/main-meta.ts` or `panels/console/console-meta.ts`).
+
+In the higher-level `-meta.ts` file:
+1. Import `SettingsUI` from `ui/settings/settings.js` (e.g., `import * as SettingsUI from '../../ui/settings/settings.js';`).
+2. Import the `SettingDescriptor` (from `core/sdk/`, `models/`, or `ui/settings/`).
+3. Register using `SettingsUI.SettingUIRegistration.register(...)`:
+
+```typescript
+import * as SettingsUI from '../../ui/settings/settings.js';
+import * as SDK from '../../core/sdk/sdk.js';
+
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.preserveConsoleLogSettingDescriptor, {
+  category: Common.Settings.SettingCategory.CONSOLE,
+  title: i18nLazyString(UIStrings.preserveLogUponNavigation),
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.preserveLogUponNavigation),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.doNotPreserveLogUponNavigation),
+    },
+  ],
+});
+```
+
+4. **Delete** the old `Common.Settings.registerSettingExtension` call from the `core/` or `models/` `-meta.ts` file. (If the `-meta.ts` file becomes empty, delete the file and clean up its build references).
+
+---
+
+### Step 4: Update Call Sites (`moduleSetting` to `resolve`)
+Find all call sites referencing the setting via `moduleSetting`:
+
+```typescript
+// BEFORE:
+const setting = Common.Settings.Settings.instance().moduleSetting('preserve-console-log');
+
+// AFTER:
+import { preserveConsoleLogSettingDescriptor } from './SDKSettings.js';
+...
+const setting = Common.Settings.Settings.instance().resolve(preserveConsoleLogSettingDescriptor);
+```
+
+*For conditional settings, use `Common.Settings.Settings.instance().maybeResolve(descriptor)` instead of `resolve(descriptor)`.*
+
+---
+
+### Step 5: Update `BUILD.gn` Files and Module Entrypoints
+1. If a new `.ts` file was created (e.g., `SDKSettings.ts` or `ui/settings/ConsoleSettings.ts`):
+   * Add the file to `sources` in its module's `BUILD.gn`.
+   * Export the file from the module's entrypoint (`sdk.ts`, `settings.ts`, etc.).
+2. If a `core/` or `models/` `-meta.ts` file was deleted, remove it from `BUILD.gn` and `devtools_grd_files.gni`.
+3. Verify module imports strictly follow DevTools import rules (refer to `devtools-imports` skill).
+
+---
+
+### Step 6: Verify Changes
+1. Run `autoninja -C out/Default` to check GN build.
+2. Run `npm run lint` to check style and formatting rules.
+3. Run relevant unit tests for the modified module.
+
+---
+
+## Concrete Examples
+
+### Example 1: Core/SDK Setting Migration (`preserve-console-log`)
+
+#### Before Migration
+Setting registered in **`front_end/core/sdk/sdk-meta.ts`** *(Legacy core meta file)*:
+```typescript
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.CONSOLE,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  title: i18nLazyString(UIStrings.preserveLogUponNavigation),
+  settingName: 'preserve-console-log',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  options: [...],
+});
+```
+
+Setting used in **`front_end/core/sdk/ResourceTreeModel.ts`**:
+```typescript
+const setting = Common.Settings.Settings.instance().moduleSetting('preserve-console-log');
+```
+
+---
+
+#### After Migration
+
+1. **`front_end/core/sdk/SDKSettings.ts`** *(Lowest Layer in Core — NOT a `-meta.ts` file)*:
+```typescript
+import type * as Common from '../common/common.js';
+
+export const preserveConsoleLogSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'preserve-console-log',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+};
+```
+
+2. **`front_end/entrypoints/main/main-meta.ts`** *(Higher-Level Meta File — NOT in `core/` or `models/`)*:
+```typescript
+import * as SDK from '../../core/sdk/sdk.js';
+import * as SettingsUI from '../../ui/settings/settings.js';
+
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.preserveConsoleLogSettingDescriptor, {
+  category: Common.Settings.SettingCategory.CONSOLE,
+  title: i18nLazyString(UIStrings.preserveLogUponNavigation),
+  options: [...],
+});
+```
+
+3. **`front_end/core/sdk/ResourceTreeModel.ts`** *(Call Site in `core/sdk`)*:
+```typescript
+import { preserveConsoleLogSettingDescriptor } from './SDKSettings.js';
+
+const setting = Common.Settings.Settings.instance().resolve(preserveConsoleLogSettingDescriptor);
+```
+
+4. **`front_end/core/sdk/sdk-meta.ts`**:
+Registration for `'preserve-console-log'` removed.
+
+---
+
+### Example 2: Panel UI Setting Migration (`network-messages`)
+
+#### Before Migration
+Setting registered in **`front_end/panels/console/console-meta.ts`**:
+```typescript
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.CONSOLE,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  title: i18nLazyString(UIStrings.networkMessages),
+  settingName: 'network-messages',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+  options: [...],
+});
+```
+
+Setting used in **`front_end/panels/console/ConsoleView.ts`**:
+```typescript
+const setting = Common.Settings.Settings.instance().moduleSetting('network-messages');
+```
+
+---
+
+#### After Migration
+
+1. **`front_end/ui/settings/ConsoleSettings.ts`** *(Lowest Layer for UI/Panel Descriptor — NOT in `panels/console/`!)*:
+```typescript
+import type * as Common from '../../core/common/common.js';
+
+export const networkMessagesSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'network-messages',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+};
+```
+
+2. **`front_end/panels/console/console-meta.ts`** *(Panel Meta File — Imports Descriptor from `ui/settings/`)*:
+```typescript
+import * as SettingsUI from '../../ui/settings/settings.js';
+
+SettingsUI.SettingUIRegistration.register(SettingsUI.ConsoleSettings.networkMessagesSettingDescriptor, {
+  category: Common.Settings.SettingCategory.CONSOLE,
+  title: i18nLazyString(UIStrings.networkMessages),
+  options: [...],
+});
+```
+
+3. **`front_end/panels/console/ConsoleView.ts`** *(Call Site in `panels/console`)*:
+```typescript
+import * as SettingsUI from '../../ui/settings/settings.js';
+
+const setting = Common.Settings.Settings.instance().resolve(SettingsUI.ConsoleSettings.networkMessagesSettingDescriptor);
+```
+
+---
+
+## Interface Reference Summary
+
+### `SettingDescriptor<T>`
+Defined in `core/common/Settings.ts`:
+* `name: string`: Unique setting name (kebab-case).
+* `type: SettingType`: `BOOLEAN`, `ENUM`, `ARRAY`, or `REGEX`.
+* `defaultValue: ValueT | ((hostConfig: HostConfig) => ValueT)`: Default setting value.
+* `storageType?: SettingStorageType`: `SYNCED`, `LOCAL`, `GLOBAL`, or `SESSION`.
+
+### `SettingUIDescriptor`
+Defined in `ui/settings/SettingUIRegistration.ts`:
+* `category?: SettingCategory`: Category under which setting is listed in Settings UI.
+* `order?: number`: Sorting order.
+* `title?: () => LocalizedString`: Title string displayed in Settings UI.
+* `tags?: Array<() => LocalizedString>`: Search tags for Command Menu.
+* `options?: SettingExtensionOption[]`: Enum / boolean option descriptions.
+* `reloadRequired?: boolean`: Whether setting change requires DevTools reload.
+* `deprecationNotice?: { disabled: boolean, warning: () => LocalizedString, experiment?: string }`: Deprecation notice.
+* `learnMore?: LearnMore`: Help link or tooltip info.

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

@@ -36,13 +36,21 @@ clean `UI.Widget` classes that use native update rendering delegates.
         };
         ```
 
-    *   Make the view injectable in the constructor for testability (as per `docs/ui_engineering.md`):
+    *   Make the view injectable in the constructor for testability (as per `docs/ui_engineering.md`), and use static `INJECT` if requesting dependencies from `Universe`:
 
         ```typescript
         class MyWidget extends UI.Widget.VBox {
+          static override readonly INJECT = [SDK.TargetManager.TargetManager] as const;
+
+          #targetManager: SDK.TargetManager.TargetManager;
           #view: View;
-          constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
-            super(true, element);
+          constructor(
+            element?: HTMLElement,
+            [targetManager]: UI.Widget.WidgetDependencies<typeof MyWidget> = [],
+            view: View = DEFAULT_VIEW,
+          ) {
+            super(element);
+            this.#targetManager = targetManager;
             this.#view = view;
           }
         ```
@@ -84,4 +92,3 @@ clean `UI.Widget` classes that use native update rendering delegates.
 2.  ❓ **Inheritance**: Does the class now cleanly inherit from `UI.Widget` or its variants?
 3.  ❓ **Injectability**: Is the view injectable in the constructor?
 4.  ❓ **Build**: Does the code compile and do tests pass?
-

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

@@ -19,6 +19,7 @@ Adhere strictly to the Model-View-Presenter (MVP) architecture.
 * MUST extend a base `UI.Widget` class (e.g., `UI.Widget.Widget`). Note that `UI.Widget.Widget` is not an `HTMLElement` and must be appended via `.show()` or `UI.Widget.widget`
 * Constructor MUST assign the injected view function to a private `#view` field.
 * Constructor MUST call `super()`. If taking `element?: HTMLElement`, pass it to `super(element)`. `super(true)` is forbidden.
+* Dependencies from `Universe` SHOULD be requested via static `INJECT`: `static override readonly INJECT = [...] as const;` and received as constructor parameter #2 (`[dep1, dep2]: UI.Widget.WidgetDependencies<typeof MyWidget>`).
 * Styling MUST be handled within the View. `this.registerCSSFiles()` is forbidden.
 * Initial render MUST be triggered in `override wasShown(): void` by calling `this.requestUpdate()`.
 * MUST hold all UI state as private class fields (e.g., `#counter`).
@@ -109,7 +110,30 @@ render(html`
 *   **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
-The `DEFAULT_VIEW` is typically a module-level function. Ensure all dependencies (enums, constants, other components) are imported at the top of the file so they are available in the function scope.
+
+* **View Dependencies:** The `DEFAULT_VIEW` is typically a module-level function. Ensure all dependencies (enums, constants, other components) are imported at the top of the file so they are available in the function scope.
+* **Presenter (`Universe`) Dependencies:** To access dependencies managed by `Universe` (e.g. `SDK.TargetManager.TargetManager`, `Common.Settings.Settings`), declare a static `INJECT` array on the `Widget` subclass:
+  ```ts
+  export class MyWidget extends UI.Widget.Widget {
+    static override readonly INJECT = [SDK.TargetManager.TargetManager, Common.Settings.Settings] as const;
+
+    #targetManager: SDK.TargetManager.TargetManager;
+    #settings: Common.Settings.Settings;
+    #view: View;
+
+    constructor(
+      element?: HTMLElement,
+      [targetManager, settings]: UI.Widget.WidgetDependencies<typeof MyWidget> = [],
+      view: View = DEFAULT_VIEW,
+    ) {
+      super(element);
+      this.#targetManager = targetManager;
+      this.#settings = settings;
+      this.#view = view;
+    }
+  }
+  ```
+  `instantiateWidget` automatically resolves dependencies from `Universe` and passes them as constructor parameter #2. In unit tests using `renderElementIntoDOM`, `TestUniverse` handles injection automatically (override via `setTestUniverseForWidgets`).
 
 ## Step-by-Step Implementation Example
 

package/docs/ui_engineering.md

@@ -38,13 +38,42 @@ Note that `VBox` and `HBox` inherit directly from `Widget`. They fully support v
 
 To test the `DEFAULT_VIEW` function itself, we should use screenshot and e2e tests.
 
+### Dependency Injection via `INJECT`
+
+Subclasses of `UI.Widget.Widget` can declare dependencies from `Universe` to be automatically injected when instantiated (e.g. via `<devtools-widget>` or `UI.Widget.widget()`).
+
+To opt into dependency injection, define a static `INJECT` array containing dependency constructors:
+
+```ts
+class MyWidget extends UI.Widget.Widget {
+  static override readonly INJECT = [SDK.TargetManager.TargetManager, Common.Settings.Settings] as const;
+
+  #targetManager: SDK.TargetManager.TargetManager;
+  #settings: Common.Settings.Settings;
+
+  constructor(
+    element?: HTMLElement,
+    [targetManager, settings]: UI.Widget.WidgetDependencies<typeof MyWidget> = [],
+    view: View = DEFAULT_VIEW,
+  ) {
+    super(element);
+    this.#targetManager = targetManager;
+    this.#settings = settings;
+  }
+}
+```
+
+When `instantiateWidget` creates a widget with a non-empty `INJECT` array, it automatically resolves each requested constructor from the active `Universe` and passes the resolved instances array as parameter #2 to the constructor.
+
+Use `UI.Widget.WidgetDependencies<typeof MyWidget>` to type the injected dependencies parameter.
+
 ## Declarative and orchestrated DOM updates
 
 We should no longer use imperative API to update DOM. Instead we rely on orchestrated rendering of lit-html templates. The view function described above should be a call to lit-html `render`. The view function should be called from `UI.Widget`’s `performUpdate` method, which by default is scheduled using `requestAnimationFrame`.
 
 To embed another presenter (`UI.Widget`) in the lit-html template, use `widget(<class>, {foo: 1, bar: 2})`
 
-This will instantiate a `Widget` class with the web component as its `element` and, optionally, will set the properties provided in the second parameter. The widget won’t be re-instantiated on the subsequent template renders, but the properties would be updated. For this to work, the widget needs to accept `HTMLElement` as a sole constructor parameter and properties need to be public members or setters.
+This will instantiate a `Widget` class with the web component as its `element` and, optionally, will set the properties provided in the second parameter. The widget won’t be re-instantiated on the subsequent template renders, but the properties would be updated. For this to work, the widget needs to accept `HTMLElement` as its first constructor parameter, optional injected dependencies as parameter #2 (if `INJECT` is declared), and properties need to be public members or setters.
 
 For backwards compatibility, the first argument to `widget` can also be a factory function: `widget(element => new MyWidget(foo, bar, element))`. Similar to the class constructor version, `element` is the actual `<devtools-widget>` so the following two invocations of `widget` are equivalent: `widget(MyWidget)` and `widget(element => new MyWidget(element))`.
 
@@ -218,6 +247,20 @@ const presenter = new Presenter();
 presenter.doSomething();
 ```
 
+#### Testing widgets with `INJECT` dependencies
+
+When rendering widgets into DOM in unit tests (e.g. via `renderElementIntoDOM`), DOM test helpers automatically supply a default `TestUniverse` for resolving `INJECT` dependencies.
+
+If a test requires a custom `TestUniverse` instance, pass it via `setTestUniverseForWidgets`:
+
+```ts
+import {setTestUniverseForWidgets} from '../../testing/DOMHelpers.js';
+import {TestUniverse} from '../../testing/TestUniverse.js';
+
+const customUniverse = new TestUniverse();
+setTestUniverseForWidgets(customUniverse);
+```
+
 # Migrating Widgets and other "legacy" components
 
 This section provides a series of examples for migrating from imperative DOM manipulation to a declarative approach using lit-html templates.

package/front_end/core/common/Settings.ts

@@ -362,6 +362,8 @@ export class Settings {
         this.createRegExpSetting(name, evaluatedDefaultValue, undefined, storageType) :
         this.createSetting(name, evaluatedDefaultValue, storageType);
 
+    setting.setSettingType(type);
+
     this.registerModuleSetting(setting);
     return setting as Setting<T>;
   }
@@ -511,6 +513,7 @@ export class Deprecation {
 
 export class Setting<V> {
   #registration: SettingRegistration|null = null;
+  #type: SettingType|null = null;
   #requiresUserAction?: boolean;
   #value?: V;
   // TODO(crbug.com/1172300) Type cannot be inferred without changes to consumers. See above.
@@ -679,8 +682,15 @@ export class Setting<V> {
     this.eventSupport.dispatchEventToListeners(this.name, value);
   }
 
+  setSettingType(type: SettingType): void {
+    this.#type = type;
+  }
+
   setRegistration(registration: SettingRegistration): void {
     this.#registration = registration;
+    if (registration.settingType) {
+      this.#type = registration.settingType;
+    }
     const {deprecationNotice} = registration;
     if (deprecationNotice?.disabled) {
       const experiment = deprecationNotice.experiment ?
@@ -694,10 +704,7 @@ export class Setting<V> {
   }
 
   type(): SettingType|null {
-    if (this.#registration) {
-      return this.#registration.settingType;
-    }
-    return null;
+    return this.#type ?? this.#registration?.settingType ?? null;
   }
 
   options(): SimpleSettingOption[] {

package/front_end/core/host/AidaClient.ts

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

package/front_end/core/host/InspectorFrontendHostAPI.ts

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

package/front_end/core/host/InspectorFrontendHostStub.ts

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

package/front_end/core/host/UserMetrics.ts

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

package/front_end/core/root/Runtime.ts

@@ -648,6 +648,10 @@ interface DevToolsPlusButton {
   enabled: boolean;
 }
 
+interface DevToolsInstrumentationBreakpoints {
+  enabled: boolean;
+}
+
 /**
  * The host configuration that we expect from the DevTools back-end.
  *
@@ -705,6 +709,7 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   devToolsAdsPanel: DevToolsAdsPanel,
   devToolsUseGcaApi: UseGcaApi,
   devToolsPlusButton: DevToolsPlusButton,
+  devToolsInstrumentationBreakpoints: DevToolsInstrumentationBreakpoints,
   extensionsOnChromeUrls: ExtensionsOnChromeUrls,
 }>;
 

package/front_end/core/sdk/CSSMatchedStyles.ts

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