chrome-devtools-frontend 1.0.1596535 → 1.0.1597624

package/agents/prompts/ui-widgets.md

@@ -11,7 +11,7 @@ Adhere strictly to the Model-View-Presenter (MVP) architecture.
 ### Presenter (`Widget`) Rules
 
 * Location: Co-located in the same file as its View.
-* 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 `<devtools-widget>`.
+* 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.
 * Styling MUST be handled within the View. `this.registerCSSFiles()` is forbidden.
@@ -50,10 +50,10 @@ const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement)
 // clang-format on
 ```
 
-### Composition (`<devtools-widget>`)
+### Composition
 
-* To render a child widget, the parent's View MUST use `<devtools-widget>`.
-* Configuration is passed via the `.widgetConfig` property using `UI.Widget.widgetConfig()`.
+* To render a child widget, the parent's View MUST use lit-html directive `UI.Widget.wiget`
+* 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.
 
@@ -66,7 +66,7 @@ When migrating imperative components (extending `UI.VBox`, `UI.Panel`, or `HTMLE
     *   Prefer extending `UI.Widget.Widget`.
     *   **Special Case:** If the component *must* extend `UI.Panel.Panel` or `UI.Dialog.Dialog` (to retain specific functionality), you cannot use `requestUpdate()`. Instead, call `this.performUpdate()` directly on state changes.
 3.  **State Migration:** Move DOM-stored state to private class fields.
-4.  **Update Usage:** Replace `new MyComponent()` instantiations with declarative `<devtools-widget .widgetConfig=...>` in parent templates.
+4.  **Update Usage:** Replace `new MyComponent()` instantiations with declarative `widget(MyComponent, {params})` in parent templates.
 5.  **Scoping Styles:** Ensure your CSS file uses the `@scope` block to prevent style leaks:
     ```css
     @scope to (devtools-widget > *) {
@@ -101,7 +101,7 @@ render(html`
 
 ### 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)`).
-*   **Child Widgets:** Use `UI.Widget.widgetRef` to obtain the class instance of a child `<devtools-widget>` if you need to call methods on it directly (though declarative data flow is preferred).
+*   **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.
@@ -236,8 +236,7 @@ const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLElement):
       <button @click=${input.onTitleChange}>Change Child Title</button>
 
       <!-- Pass properties to the child widget. -->
-      <devtools-widget .widgetConfig=${widgetConfig(MyExampleWidget, {title: input.title})}>
-      </devtools-widget>
+      ${widget(MyExampleWidget, {title: input.title})}
     </div>
   `, target);
 };

package/docs/ui_engineering.md

@@ -40,11 +40,11 @@ To test the `DEFAULT_VIEW` function itself, we should use screenshot and e2e tes
 
 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 `<devtools-widget .widgetConfig=${widgetConfig(<class>, {foo: 1, bar: 2})}`
+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.
 
-For backwards compatibility, the first argument to `widgetConfig` can also be a factory function: `<devtools-widget .widgetConfig=${widgetConfig(element => new MyWidget(foo, bar, element))}>`. Similar to the class constructor version, `element` is the actual `<devtools-widget>` so the following two invocations of `widgetConfig` are equivalent: `widgetConfig(MyWidget)` and `widgetConfig(element => new MyWidget(element))`.
+For backwards compatibility, the first argument to `widgetConfig` 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 `widgetConfig` are equivalent: `widget(MyWidget)` and `widget(element => new MyWidget(element))`.
 
 ## Styling
 To prevent style conflicts in widgets without relying on shadow DOM, we use the CSS [`@scope`](https://developer.mozilla.org/en-US/docs/Web/CSS/@scope) at-rule for style encapsulation. This ensures that styles defined for a widget do not leak out and affect other components.
@@ -83,12 +83,12 @@ render(html`
   <div class="container">
     <h3 class="title">My Widget</h3>
     ...
-    <devtools-widget .widgetConfig=${widgetConfig(NestedWidget)}></devtools-widget>
+    ${widget(NestedWidget)}
   </div>
 `, this.element);
 ```
 
-In this example, the `.title` style will apply within the parent widget but will not leak into the nested `<devtools-widget>`. Because this convention relies on developer discipline, it is important to verify its correct application during code reviews.
+In this example, the `.title` style will apply within the parent widget but will not leak into the nested widget. Because this convention relies on developer discipline, it is important to verify its correct application during code reviews.
 
 ## Examples
 
@@ -97,8 +97,8 @@ In this example, the `.title` style will apply within the parent widget but will
   <devtools-split-view>
     <devtools-widget slot="main" .widgetConfig=${widgetConfig(ElementsTree)}></devtools-widget>
     <devtools-tab-pane slot="sidebar">
-      <devtools-widget .widgetConfig=${widgetConfig(StylesPane, {element: input.element})}></devtools-widget>
-      <devtools-widget .widgetConfig=${widgetConfig(ComputedPane, {element: input.element})}></devtools-widget>
+      ${widget(StylesPane, {element: input.element})}
+      ${widget(ComputedPane, {element: input.element})}
       ...
     </devtools-tab-pane>
   </devtools-split-view>
@@ -109,8 +109,7 @@ In this example, the `.title` style will apply within the parent widget but will
 type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
 const DEFAULT_VIEW = (input, output, target) => {
   render(html`
-    <devtools-widget .widgetConfig=${widgetConfig(MetricsPane, {element: input.element})}>
-    </devtools-widget>
+    ${widget(MetricsPane, {element: input.element})}
     <devtools-toolbar>
       <devtools-filter-input @change=${input.onFilter}></devtools-filter-input>
       <devtools-checkbox @change=${input.onShowAll}>Show All</devtools-checkbox>
@@ -1236,7 +1235,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
 
 ## Migrating `EmptyWidget`
 
-Replace the imperative `EmptyWidget` with a declarative `<devtools-widget>` and configure it with `widgetConfig` to render an `EmptyWidget`.
+Replace the imperative `EmptyWidget` with a declarative `widget` and configure it to render an `EmptyWidget`.
 
 **Before:**
 ```typescript
@@ -1258,9 +1257,9 @@ class SomeWidget extends UI.Widget.Widget {
 export const DEFAULT_VIEW = (input, _output, target) => {
   render(html`
     <div>
-      <devtools-widget .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget,{
+      ${widget(UI.EmptyWidget.EmptyWidget,{
           header: i18nString(UIStrings.nothingToSeeHere), text: this.explanation,
-          link: 'http://www.google.com',})}></devtools-widget>
+          link: 'http://www.google.com',})}
     </div>`,
     target, {host: input});
 };

package/front_end/core/host/AidaClient.ts

@@ -133,6 +133,10 @@ export enum ClientFeature {
   CHROME_PATCH_AGENT = 12,
   // Chrome AI Assistance Performance Agent.
   CHROME_PERFORMANCE_FULL_AGENT = 24,
+  // Chrome Context Selection Agent.
+  CHROME_CONTEXT_SELECTION_AGENT = 25,
+  // Chrome Accessibility Agent
+  CHROME_ACCESSIBILITY_AGENT = 26,
 
   // Removed features (for reference).
   // Chrome AI Assistance Performance Insights Agent.

package/front_end/core/host/InspectorFrontendHostAPI.ts

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

package/front_end/core/host/UserMetrics.ts

@@ -322,6 +322,11 @@ export class UserMetrics {
     InspectorFrontendHostInstance.recordPerformanceHistogram(
         'DevTools.Insights.ShortTeaserGenerationTime', timeInMilliseconds);
   }
+
+  extensionEvalTarget(target: ExtensionEvalTarget): void {
+    InspectorFrontendHostInstance.recordEnumeratedHistogram(
+        EnumeratedHistogram.ExtensionEvalTarget, target, ExtensionEvalTarget.MAX_VALUE);
+  }
 }
 
 /**
@@ -1264,3 +1269,10 @@ export const enum BuiltInAiAvailability {
   DISABLED_NO_GPU = 9,
   MAX_VALUE = 10,
 }
+
+export const enum ExtensionEvalTarget {
+  WEB_PAGE = 0,
+  SAME_EXTENSION = 1,
+  OTHER_EXTENSION = 2,
+  MAX_VALUE = 3,
+}

package/front_end/core/root/Runtime.ts

@@ -476,6 +476,10 @@ export interface HostConfigAiAssistanceFileAgent {
   userTier: string;
 }
 
+export interface HostConfigAiAssistanceAccessibilityAgent {
+  enabled: boolean;
+}
+
 export interface HostConfigAiCodeCompletion {
   modelId: string;
   temperature: number;
@@ -632,6 +636,7 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   devToolsAiAssistanceNetworkAgent: HostConfigAiAssistanceNetworkAgent,
   devToolsAiAssistanceFileAgent: HostConfigAiAssistanceFileAgent,
   devToolsAiAssistancePerformanceAgent: HostConfigAiAssistancePerformanceAgent,
+  devToolsAiAssistanceAccessibilityAgent: HostConfigAiAssistanceAccessibilityAgent,
   devToolsAiAssistanceV2: HostConfigAiAssistanceV2,
   devToolsAiCodeCompletion: HostConfigAiCodeCompletion,
   devToolsAiCodeGeneration: HostConfigAiCodeGeneration,

package/front_end/core/sdk/CPUThrottlingManager.ts

@@ -35,36 +35,37 @@ const str_ = i18n.i18n.registerUIStrings('core/sdk/CPUThrottlingManager.ts', UIS
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
-let throttlingManagerInstance: CPUThrottlingManager;
+let throttlingManagerInstance: CPUThrottlingManager|undefined;
 
 export class CPUThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements
     SDKModelObserver<EmulationModel> {
-  readonly #targetManager: TargetManager;
   #cpuThrottlingOption: CPUThrottlingOption;
   #calibratedThrottlingSetting: Common.Settings.Setting<CalibratedCPUThrottling>;
   #hardwareConcurrency?: number;
   #pendingMainTargetPromise?: (r: number) => void;
 
-  private constructor(settings: Common.Settings.Settings, targetManager: TargetManager) {
+  private constructor() {
     super();
-    this.#targetManager = targetManager;
     this.#cpuThrottlingOption = NoThrottlingOption;
-    this.#calibratedThrottlingSetting = settings.createSetting<CalibratedCPUThrottling>(
+    this.#calibratedThrottlingSetting = Common.Settings.Settings.instance().createSetting<CalibratedCPUThrottling>(
         'calibrated-cpu-throttling', {}, Common.Settings.SettingStorageType.GLOBAL);
     this.#calibratedThrottlingSetting.addChangeListener(this.#onCalibratedSettingChanged, this);
-    targetManager.observeModels(EmulationModel, this);
+    TargetManager.instance().observeModels(EmulationModel, this);
   }
 
   static instance(opts: {forceNew: boolean|null} = {forceNew: null}): CPUThrottlingManager {
     const {forceNew} = opts;
     if (!throttlingManagerInstance || forceNew) {
-      throttlingManagerInstance =
-          new CPUThrottlingManager(Common.Settings.Settings.instance(), TargetManager.instance());
+      throttlingManagerInstance = new CPUThrottlingManager();
     }
 
     return throttlingManagerInstance;
   }
 
+  static removeInstance(): void {
+    throttlingManagerInstance = undefined;
+  }
+
   cpuThrottlingRate(): number {
     return this.#cpuThrottlingOption.rate();
   }
@@ -87,7 +88,7 @@ export class CPUThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Eve
       return;
     }
 
-    for (const emulationModel of this.#targetManager.models(EmulationModel)) {
+    for (const emulationModel of TargetManager.instance().models(EmulationModel)) {
       void emulationModel.setCPUThrottlingRate(rate);
     }
     this.dispatchEventToListeners(Events.RATE_CHANGED, rate);
@@ -99,7 +100,7 @@ export class CPUThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Eve
     }
 
     this.#cpuThrottlingOption = option;
-    for (const emulationModel of this.#targetManager.models(EmulationModel)) {
+    for (const emulationModel of TargetManager.instance().models(EmulationModel)) {
       void emulationModel.setCPUThrottlingRate(this.#cpuThrottlingOption.rate());
     }
     this.dispatchEventToListeners(Events.RATE_CHANGED, this.#cpuThrottlingOption.rate());
@@ -107,7 +108,7 @@ export class CPUThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Eve
 
   setHardwareConcurrency(concurrency: number): void {
     this.#hardwareConcurrency = concurrency;
-    for (const emulationModel of this.#targetManager.models(EmulationModel)) {
+    for (const emulationModel of TargetManager.instance().models(EmulationModel)) {
       void emulationModel.setHardwareConcurrency(concurrency);
     }
     this.dispatchEventToListeners(Events.HARDWARE_CONCURRENCY_CHANGED, this.#hardwareConcurrency);
@@ -118,14 +119,14 @@ export class CPUThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Eve
     // target may error. So if we get any errors here at all, assume that we do
     // not have a target.
     try {
-      return this.#targetManager.primaryPageTarget() !== null;
+      return TargetManager.instance().primaryPageTarget() !== null;
     } catch {
       return false;
     }
   }
 
   async getHardwareConcurrency(): Promise<number> {
-    const target = this.#targetManager.primaryPageTarget();
+    const target = TargetManager.instance().primaryPageTarget();
     const existingCallback = this.#pendingMainTargetPromise;
 
     // If the main target hasn't attached yet, block callers until it appears.

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -21,6 +21,7 @@ import {
   BinOpMatcher,
   ColorMatcher,
   ColorMixMatcher,
+  ContrastColorMatcher,
   CustomFunctionMatcher,
   defaultValueForCSSType,
   EnvFunctionMatcher,
@@ -932,6 +933,7 @@ export class CSSMatchedStyles {
       new VariableMatcher(this, style),
       new ColorMatcher(() => computedStyles?.get('color') ?? null),
       new ColorMixMatcher(),
+      new ContrastColorMatcher(),
       new URLMatcher(),
       new AngleMatcher(),
       new LinkableNameMatcher(),

package/front_end/core/sdk/CSSPropertyParserMatchers.ts

@@ -433,6 +433,34 @@ export class ColorMixMatcher extends matcherBase(ColorMixMatch) {
   }
 }
 
+export class ContrastColorMatch implements Match {
+  constructor(readonly text: string, readonly node: CodeMirror.SyntaxNode, readonly color: CodeMirror.SyntaxNode[]) {
+  }
+}
+
+// clang-format off
+export class ContrastColorMatcher extends matcherBase(ContrastColorMatch) {
+  // clang-format on
+  override accepts(propertyName: string): boolean {
+    return cssMetadata().isColorAwareProperty(propertyName);
+  }
+  override matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): ContrastColorMatch|null {
+    if (node.name !== 'CallExpression' || matching.ast.text(node.getChild('Callee')) !== 'contrast-color') {
+      return null;
+    }
+
+    if (matching.getComputedText(node) === '') {
+      return null;
+    }
+
+    const args = ASTUtils.callArgs(node);
+    if (args.length !== 1) {
+      return null;
+    }
+    return new ContrastColorMatch(matching.ast.text(node), node, args[0]);
+  }
+}
+
 // clang-format off
 export class URLMatch implements Match {
   constructor(

package/front_end/core/sdk/PageResourceLoader.ts

@@ -334,6 +334,27 @@ export class PageResourceLoader extends Common.ObjectWrapper.ObjectWrapper<Event
         initiator.target;
     Host.userMetrics.developerResourceScheme(this.getDeveloperResourceScheme(parsedURL));
     if (eligibleForLoadFromTarget) {
+      let mustEnforceCSP = false;
+      const isHttp = parsedURL.scheme === 'http' || parsedURL.scheme === 'https';
+      if (isHttp && initiator.target) {
+        const networkManager = initiator.target.model(NetworkManager);
+        if (networkManager) {
+          let status = await networkManager.getSecurityIsolationStatus(initiator.frameId);
+          if (!status && initiator.frameId) {
+            status = await networkManager.getSecurityIsolationStatus(null);
+          }
+          if (status?.csp) {
+            for (const csp of status.csp) {
+              const directives = csp.effectiveDirectives;
+              if (directives.includes('connect-src') || directives.includes('default-src')) {
+                mustEnforceCSP = true;
+                break;
+              }
+            }
+          }
+        }
+      }
+
       try {
         Host.userMetrics.developerResourceLoaded(Host.UserMetrics.DeveloperResourceLoaded.LOAD_THROUGH_PAGE_VIA_TARGET);
         const result = await this.loadFromTarget(initiator.target, initiator.frameId, url, isBinary);
@@ -341,7 +362,7 @@ export class PageResourceLoader extends Common.ObjectWrapper.ObjectWrapper<Event
       } catch (e) {
         if (e instanceof Error) {
           Host.userMetrics.developerResourceLoaded(Host.UserMetrics.DeveloperResourceLoaded.LOAD_THROUGH_PAGE_FAILURE);
-          if (e.message.includes('CSP violation')) {
+          if (mustEnforceCSP || e.message.includes('CSP violation')) {
             return {
               success: false,
               content: '',

package/front_end/devtools_compatibility.js

@@ -444,7 +444,8 @@
     TimelineNavigationSettingState: 'DevTools.TimelineNavigationSettingState',
     SyncSetting: 'DevTools.SyncSetting',
     SwatchActivated: 'DevTools.SwatchActivated',
-    BuiltInAiAvailability: 'DevTools.BuiltInAiAvailability'
+    BuiltInAiAvailability: 'DevTools.BuiltInAiAvailability',
+    ExtensionEvalTarget: 'DevTools.ExtensionEvalTarget'
     // LINT.ThenChange(/front_end/core/host/InspectorFrontendHostAPI.ts:EnumeratedHistogram)
   };
 

package/front_end/models/ai_assistance/AiConversation.ts

@@ -1,10 +1,10 @@
 // Copyright 2024 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-
+import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as Root from '../../core/root/root.js';
-import type * as SDK from '../../core/sdk/sdk.js';
+import * as SDK from '../../core/sdk/sdk.js';
 import type * as Trace from '../../models/trace/trace.js';
 import * as Greendev from '../greendev/greendev.js';
 import type * as NetworkTimeCalculator from '../network_time_calculator/network_time_calculator.js';
@@ -13,6 +13,7 @@ import {
   type AiAgent,
   type ContextDetail,
   type ConversationContext,
+  ErrorType,
   type MultimodalInput,
   type ResponseData,
   ResponseType,
@@ -162,6 +163,11 @@ export class AiConversation {
     return this.#contexts.at(0);
   }
 
+  getPendingMultimodalInput(): MultimodalInput|undefined {
+    const greenDevEmulationEnabled = Greendev.Prototypes.instance().isEnabled('emulationCapabilities');
+    return greenDevEmulationEnabled ? this.#agent.popPendingMultimodalInput() : undefined;
+  }
+
   #reconstructHistory(historyWithoutImages: ResponseData[]): ResponseData[] {
     const imageHistory = AiHistoryStorage.instance().getImageHistory();
     if (imageHistory && imageHistory.length > 0) {
@@ -308,6 +314,7 @@ export class AiConversation {
       performanceRecordAndReload: this.#performanceRecordAndReload,
       onInspectElement: this.#onInspectElement,
       networkTimeCalculator: this.#networkTimeCalculator,
+      allowedOrigin: this.allowedOrigin,
       history,
     };
     switch (type) {
@@ -364,12 +371,6 @@ export class AiConversation {
     void this.addHistoryItem(userQuery);
     yield userQuery;
 
-    this.#setOriginIfEmpty(this.selectedContext?.getOrigin());
-
-    if (this.isBlockedByOrigin) {
-      throw new Error('Cross-origin context data should not be included');
-    }
-
     yield* this.#runAgent(initialQuery, options);
   }
 
@@ -385,6 +386,15 @@ export class AiConversation {
             multimodalInput?: MultimodalInput,
           } = {},
           ): AsyncGenerator<ResponseData, void, void> {
+    this.#setOriginIfEmpty(this.selectedContext?.getOrigin());
+    if (this.isBlockedByOrigin) {
+      yield {
+        type: ResponseType.ERROR,
+        error: ErrorType.CROSS_ORIGIN,
+      };
+      return;
+    }
+
     function shouldAddToHistory(data: ResponseData): boolean {
       if (data.type === ResponseType.CONTEXT_CHANGE) {
         return false;
@@ -440,6 +450,17 @@ export class AiConversation {
   get type(): ConversationType {
     return this.#type;
   }
+
+  allowedOrigin = (): string|undefined => {
+    if (this.#origin) {
+      return this.#origin;
+    }
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const inspectedURL = target?.inspectedURL();
+    this.#origin = inspectedURL ? new Common.ParsedURL.ParsedURL(inspectedURL).securityOrigin() : undefined;
+
+    return this.#origin;
+  };
 }
 
 function isAiAssistanceServerSideLoggingEnabled(): boolean {

package/front_end/models/ai_assistance/ChangeManager.ts

@@ -9,6 +9,8 @@ import type * as Protocol from '../../generated/protocol.js';
 
 export interface Change {
   groupId: string;
+  // Optional turn ID to group changes from the same turn.
+  turnId?: number;
   // Optional about where in the source the selector was defined.
   sourceLocation?: string;
   // Selector used by the page or a simple selector as the fallback.
@@ -17,6 +19,7 @@ export interface Change {
   simpleSelector?: string;
   className: string;
   styles: Record<string, string>;
+  backendNodeId?: Protocol.DOM.BackendNodeId;
 }
 
 function formatStyles(styles: Record<string, string>, indent = 2): string {
@@ -101,6 +104,7 @@ export class ChangeManager {
       // it currently causes crashes in the Styles tab when duplicate selectors exist (crbug.com/393515428).
       // This workaround avoids that crash.
       existingChange.groupId = change.groupId;
+      existingChange.turnId = change.turnId;
     } else {
       changes.push({
         ...change,
@@ -122,6 +126,18 @@ export class ChangeManager {
         .join('\n\n');
   }
 
+  getChangedNodesForGroupId(groupId: string, turnId?: number): Protocol.DOM.BackendNodeId[] {
+    const nodes = new Set<Protocol.DOM.BackendNodeId>();
+    for (const changes of this.#stylesheetChanges.values()) {
+      for (const change of changes) {
+        if (change.groupId === groupId && change.backendNodeId && (turnId === undefined || change.turnId === turnId)) {
+          nodes.add(change.backendNodeId);
+        }
+      }
+    }
+    return Array.from(nodes);
+  }
+
   #formatChangesForInspectorStylesheet(changes: Change[]): string {
     return changes
         .map(change => {

package/front_end/models/ai_assistance/ExtensionScope.ts

@@ -22,6 +22,7 @@ interface ElementContext {
   selector: string;
   simpleSelector?: string;
   sourceLocation?: string;
+  backendNodeId?: Protocol.DOM.BackendNodeId;
 }
 
 /**
@@ -33,6 +34,7 @@ export class ExtensionScope {
                     }) => Promise<void>> = [];
   #changeManager: ChangeManager;
   #agentId: string;
+  #turnId?: number;
   /** Don't use directly use the getter */
   #frameId?: Protocol.Page.FrameId|null;
   /** Don't use directly use the getter */
@@ -40,15 +42,15 @@ export class ExtensionScope {
 
   readonly #bindingMutex = new Common.Mutex.Mutex();
 
-  constructor(changes: ChangeManager, agentId: string, selectedNode: SDK.DOMModel.DOMNode|null) {
+  constructor(changes: ChangeManager, agentId: string, selectedNode: SDK.DOMModel.DOMNode|null, turnId?: number) {
     this.#changeManager = changes;
     const frameId = selectedNode?.frameId();
     const target = selectedNode?.domModel().target();
     this.#agentId = agentId;
+    this.#turnId = turnId;
     this.#target = target;
     this.#frameId = frameId;
   }
-
   get target(): SDK.Target.Target {
     if (!this.#target) {
       throw new Error('Target is not found for executing code');
@@ -274,6 +276,7 @@ export class ExtensionScope {
       throw new Error('Node is not found');
     }
 
+    const backendNodeId = node.backendNodeId();
     try {
       const matchedStyles = await cssModel.getMatchedStyles(node.id);
 
@@ -297,6 +300,7 @@ export class ExtensionScope {
         selector,
         simpleSelector: ExtensionScope.getSelectorForNode(node),
         sourceLocation: ExtensionScope.getSourceLocation(styleRule),
+        backendNodeId,
       };
     } catch {
       // no-op to allow the fallback below to run.
@@ -305,6 +309,7 @@ export class ExtensionScope {
     // Fallback
     return {
       selector: ExtensionScope.getSelectorForNode(node),
+      backendNodeId,
     };
   }
 
@@ -337,7 +342,8 @@ export class ExtensionScope {
 
       let context: ElementContext = {
         // TODO: Should this a be a *?
-        selector: ''
+        selector: '',
+        backendNodeId: undefined,
       };
       try {
         context = await this.#computeContextFromElement(element.object);
@@ -351,11 +357,13 @@ export class ExtensionScope {
         const sanitizedStyles = await this.sanitizedStyleChanges(context.selector, arg.styles);
         const styleChanges = await this.#changeManager.addChange(cssModel, this.frameId, {
           groupId: this.#agentId,
+          turnId: this.#turnId,
           sourceLocation: context.sourceLocation,
           selector: context.selector,
           simpleSelector: context.simpleSelector,
           className: arg.className,
           styles: sanitizedStyles,
+          backendNodeId: context.backendNodeId,
         });
         await this.#simpleEval(executionContext, `freestyler.respond(${id}, ${JSON.stringify(styleChanges)})`);
       } catch (error) {