chrome-devtools-frontend 1.0.1592129 → 1.0.1593518

package/front_end/Images/src/tab-move.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#000000"><path d="M216-144q-29.7 0-50.85-21.5Q144-187 144-216v-120h72v120h528v-456H216v144h-72v-216q0-29 21.15-50.5T216-816h528q29.7 0 50.85 21.5Q816-773 816-744v528q0 29-21.15 50.5T744-144H216Zm240-120-51-51 81-81H144v-72h342l-81-81 51-51 168 168-168 168Z"/></svg>

package/front_end/application_tokens.css

@@ -180,8 +180,8 @@
   /**
    * Colors for Coverage visualization.
    */
-  --app-color-coverage-used: var(--ref-palette-neutral80);
-  --app-color-coverage-unused: var(--sys-color-error-bright);
+  --app-color-coverage-used: var(--sys-color-green-bright);
+    --app-color-coverage-unused: var(--ref-palette-neutral80);
   --app-color-toolbar-background: var(--sys-color-surface4);
 
   /**
@@ -372,8 +372,8 @@
     /**
      * Colors for Coverage visualization.
      */
-    --app-color-coverage-used: var(--ref-palette-neutral40);
-    --app-color-coverage-unused: var(--sys-color-error-bright);
+    --app-color-coverage-used: var(--sys-color-green-bright);
+      --app-color-coverage-unused: var(--ref-palette-neutral40);
     --app-color-toolbar-background: var(--sys-color-base);
 
     /**

package/front_end/core/host/UserMetrics.ts

@@ -826,10 +826,11 @@ export enum DevtoolsExperiments {
   'timeline-show-postmessage-events' = 86,
   'timeline-debug-mode' = 93,
   'durable-messages' = 110,
+  'jpeg-xl' = 111,
   /* eslint-enable @typescript-eslint/naming-convention */
 
   // Increment this when new experiments are added.
-  MAX_VALUE = 111,
+  MAX_VALUE = 112,
 }
 
 /** Update DevToolsIssuesPanelIssueExpanded from tools/metrics/histograms/enums.xml if new enum is added. **/

package/front_end/core/root/ExperimentNames.ts

@@ -24,6 +24,7 @@ export enum ExperimentName {
   TIMELINE_SHOW_POST_MESSAGE_EVENTS = 'timeline-show-postmessage-events',
   TIMELINE_DEBUG_MODE = 'timeline-debug-mode',
   DURABLE_MESSAGES = 'durable-messages',
+  JPEG_XL = 'jpeg-xl',
   // Adding or removing an entry from this enum?
   // You will need to update:
   // 1. DevToolsExperiments enum in host/UserMetrics.ts

package/front_end/entrypoints/main/MainImpl.ts

@@ -431,6 +431,14 @@ export class MainImpl {
       requiresChromeRestart: false,
     });
 
+    Root.Runtime.experiments.registerHostExperiment({
+      name: Root.ExperimentNames.ExperimentName.JPEG_XL,
+      title: 'JPEG XL support',
+      aboutFlag: 'enable-jxl-image-format',
+      isEnabled: Root.Runtime.hostConfig.devToolsJpegXlImageFormat?.enabled ?? false,
+      requiresChromeRestart: true,
+    });
+
     Root.Runtime.experiments.enableExperimentsByDefault([
       Root.ExperimentNames.ExperimentName.FULL_ACCESSIBILITY_TREE,
       Root.ExperimentNames.ExperimentName.USE_SOURCE_MAP_SCOPES,

package/front_end/generated/InspectorBackendCommands.ts

@@ -508,6 +508,7 @@ inspectorBackend.registerEnum("Emulation.PressureSource", {Cpu: "cpu"});
 inspectorBackend.registerEnum("Emulation.PressureState", {Nominal: "nominal", Fair: "fair", Serious: "serious", Critical: "critical"});
 inspectorBackend.registerEnum("Emulation.DisabledImageType", {Avif: "avif", Jxl: "jxl", Webp: "webp"});
 inspectorBackend.registerEvent("Emulation.virtualTimeBudgetExpired", []);
+inspectorBackend.registerEvent("Emulation.screenOrientationLockChanged", ["locked", "orientation"]);
 inspectorBackend.registerCommand("Emulation.canEmulate", [], ["result"], "Tells whether emulation is supported.");
 inspectorBackend.registerCommand("Emulation.clearDeviceMetricsOverride", [], [], "Clears the overridden device metrics.");
 inspectorBackend.registerCommand("Emulation.clearGeolocationOverride", [], [], "Clears the overridden Geolocation Position and Error.");
@@ -518,7 +519,7 @@ inspectorBackend.registerCommand("Emulation.setCPUThrottlingRate", [{"name": "ra
 inspectorBackend.registerCommand("Emulation.setDefaultBackgroundColorOverride", [{"name": "color", "type": "object", "optional": true, "description": "RGBA of the default background color. If not specified, any existing override will be cleared.", "typeRef": "DOM.RGBA"}], [], "Sets or clears an override of the default background color of the frame. This override is used if the content does not specify one.");
 inspectorBackend.registerCommand("Emulation.setSafeAreaInsetsOverride", [{"name": "insets", "type": "object", "optional": false, "description": "", "typeRef": "Emulation.SafeAreaInsets"}], [], "Overrides the values for env(safe-area-inset-*) and env(safe-area-max-inset-*). Unset values will cause the respective variables to be undefined, even if previously overridden.");
 inspectorBackend.registerEnum("Emulation.SetDeviceMetricsOverrideRequestScrollbarType", {Overlay: "overlay", Default: "default"});
-inspectorBackend.registerCommand("Emulation.setDeviceMetricsOverride", [{"name": "width", "type": "number", "optional": false, "description": "Overriding width value in pixels (minimum 0, maximum 10000000). 0 disables the override.", "typeRef": null}, {"name": "height", "type": "number", "optional": false, "description": "Overriding height value in pixels (minimum 0, maximum 10000000). 0 disables the override.", "typeRef": null}, {"name": "deviceScaleFactor", "type": "number", "optional": false, "description": "Overriding device scale factor value. 0 disables the override.", "typeRef": null}, {"name": "mobile", "type": "boolean", "optional": false, "description": "Whether to emulate mobile device. This includes viewport meta tag, overlay scrollbars, text autosizing and more.", "typeRef": null}, {"name": "scale", "type": "number", "optional": true, "description": "Scale to apply to resulting view image.", "typeRef": null}, {"name": "screenWidth", "type": "number", "optional": true, "description": "Overriding screen width value in pixels (minimum 0, maximum 10000000).", "typeRef": null}, {"name": "screenHeight", "type": "number", "optional": true, "description": "Overriding screen height value in pixels (minimum 0, maximum 10000000).", "typeRef": null}, {"name": "positionX", "type": "number", "optional": true, "description": "Overriding view X position on screen in pixels (minimum 0, maximum 10000000).", "typeRef": null}, {"name": "positionY", "type": "number", "optional": true, "description": "Overriding view Y position on screen in pixels (minimum 0, maximum 10000000).", "typeRef": null}, {"name": "dontSetVisibleSize", "type": "boolean", "optional": true, "description": "Do not set visible view size, rely upon explicit setVisibleSize call.", "typeRef": null}, {"name": "screenOrientation", "type": "object", "optional": true, "description": "Screen orientation override.", "typeRef": "Emulation.ScreenOrientation"}, {"name": "viewport", "type": "object", "optional": true, "description": "If set, the visible area of the page will be overridden to this viewport. This viewport change is not observed by the page, e.g. viewport-relative elements do not change positions.", "typeRef": "Page.Viewport"}, {"name": "displayFeature", "type": "object", "optional": true, "description": "If set, the display feature of a multi-segment screen. If not set, multi-segment support is turned-off. Deprecated, use Emulation.setDisplayFeaturesOverride.", "typeRef": "Emulation.DisplayFeature"}, {"name": "devicePosture", "type": "object", "optional": true, "description": "If set, the posture of a foldable device. If not set the posture is set to continuous. Deprecated, use Emulation.setDevicePostureOverride.", "typeRef": "Emulation.DevicePosture"}, {"name": "scrollbarType", "type": "string", "optional": true, "description": "Scrollbar type. Default: `default`.", "typeRef": "Emulation.SetDeviceMetricsOverrideRequestScrollbarType"}], [], "Overrides the values of device screen dimensions (window.screen.width, window.screen.height, window.innerWidth, window.innerHeight, and \"device-width\"/\"device-height\"-related CSS media query results).");
+inspectorBackend.registerCommand("Emulation.setDeviceMetricsOverride", [{"name": "width", "type": "number", "optional": false, "description": "Overriding width value in pixels (minimum 0, maximum 10000000). 0 disables the override.", "typeRef": null}, {"name": "height", "type": "number", "optional": false, "description": "Overriding height value in pixels (minimum 0, maximum 10000000). 0 disables the override.", "typeRef": null}, {"name": "deviceScaleFactor", "type": "number", "optional": false, "description": "Overriding device scale factor value. 0 disables the override.", "typeRef": null}, {"name": "mobile", "type": "boolean", "optional": false, "description": "Whether to emulate mobile device. This includes viewport meta tag, overlay scrollbars, text autosizing and more.", "typeRef": null}, {"name": "scale", "type": "number", "optional": true, "description": "Scale to apply to resulting view image.", "typeRef": null}, {"name": "screenWidth", "type": "number", "optional": true, "description": "Overriding screen width value in pixels (minimum 0, maximum 10000000).", "typeRef": null}, {"name": "screenHeight", "type": "number", "optional": true, "description": "Overriding screen height value in pixels (minimum 0, maximum 10000000).", "typeRef": null}, {"name": "positionX", "type": "number", "optional": true, "description": "Overriding view X position on screen in pixels (minimum 0, maximum 10000000).", "typeRef": null}, {"name": "positionY", "type": "number", "optional": true, "description": "Overriding view Y position on screen in pixels (minimum 0, maximum 10000000).", "typeRef": null}, {"name": "dontSetVisibleSize", "type": "boolean", "optional": true, "description": "Do not set visible view size, rely upon explicit setVisibleSize call.", "typeRef": null}, {"name": "screenOrientation", "type": "object", "optional": true, "description": "Screen orientation override.", "typeRef": "Emulation.ScreenOrientation"}, {"name": "viewport", "type": "object", "optional": true, "description": "If set, the visible area of the page will be overridden to this viewport. This viewport change is not observed by the page, e.g. viewport-relative elements do not change positions.", "typeRef": "Page.Viewport"}, {"name": "displayFeature", "type": "object", "optional": true, "description": "If set, the display feature of a multi-segment screen. If not set, multi-segment support is turned-off. Deprecated, use Emulation.setDisplayFeaturesOverride.", "typeRef": "Emulation.DisplayFeature"}, {"name": "devicePosture", "type": "object", "optional": true, "description": "If set, the posture of a foldable device. If not set the posture is set to continuous. Deprecated, use Emulation.setDevicePostureOverride.", "typeRef": "Emulation.DevicePosture"}, {"name": "scrollbarType", "type": "string", "optional": true, "description": "Scrollbar type. Default: `default`.", "typeRef": "Emulation.SetDeviceMetricsOverrideRequestScrollbarType"}, {"name": "screenOrientationLockEmulation", "type": "boolean", "optional": true, "description": "If set to true, enables screen orientation lock emulation, which intercepts screen.orientation.lock() calls from the page and reports orientation changes via screenOrientationLockChanged events. This is useful for emulating mobile device orientation lock behavior in responsive design mode.", "typeRef": null}], [], "Overrides the values of device screen dimensions (window.screen.width, window.screen.height, window.innerWidth, window.innerHeight, and \"device-width\"/\"device-height\"-related CSS media query results).");
 inspectorBackend.registerCommand("Emulation.setDevicePostureOverride", [{"name": "posture", "type": "object", "optional": false, "description": "", "typeRef": "Emulation.DevicePosture"}], [], "Start reporting the given posture value to the Device Posture API. This override can also be set in setDeviceMetricsOverride().");
 inspectorBackend.registerCommand("Emulation.clearDevicePostureOverride", [], [], "Clears a device posture override set with either setDeviceMetricsOverride() or setDevicePostureOverride() and starts using posture information from the platform again. Does nothing if no override is set.");
 inspectorBackend.registerCommand("Emulation.setDisplayFeaturesOverride", [{"name": "features", "type": "array", "optional": false, "description": "", "typeRef": "Emulation.DisplayFeature"}], [], "Start using the given display features to pupulate the Viewport Segments API. This override can also be set in setDeviceMetricsOverride().");
@@ -556,6 +557,7 @@ inspectorBackend.registerCommand("Emulation.setAutomationOverride", [{"name": "e
 inspectorBackend.registerCommand("Emulation.setSmallViewportHeightDifferenceOverride", [{"name": "difference", "type": "number", "optional": false, "description": "This will cause an element of size 100svh to be `difference` pixels smaller than an element of size 100lvh.", "typeRef": null}], [], "Allows overriding the difference between the small and large viewport sizes, which determine the value of the `svh` and `lvh` unit, respectively. Only supported for top-level frames.");
 inspectorBackend.registerCommand("Emulation.getScreenInfos", [], ["screenInfos"], "Returns device's screen configuration. In headful mode, the physical screens configuration is returned, whereas in headless mode, a virtual headless screen configuration is provided instead.");
 inspectorBackend.registerCommand("Emulation.addScreen", [{"name": "left", "type": "number", "optional": false, "description": "Offset of the left edge of the screen in pixels.", "typeRef": null}, {"name": "top", "type": "number", "optional": false, "description": "Offset of the top edge of the screen in pixels.", "typeRef": null}, {"name": "width", "type": "number", "optional": false, "description": "The width of the screen in pixels.", "typeRef": null}, {"name": "height", "type": "number", "optional": false, "description": "The height of the screen in pixels.", "typeRef": null}, {"name": "workAreaInsets", "type": "object", "optional": true, "description": "Specifies the screen's work area. Default is entire screen.", "typeRef": "Emulation.WorkAreaInsets"}, {"name": "devicePixelRatio", "type": "number", "optional": true, "description": "Specifies the screen's device pixel ratio. Default is 1.", "typeRef": null}, {"name": "rotation", "type": "number", "optional": true, "description": "Specifies the screen's rotation angle. Available values are 0, 90, 180 and 270. Default is 0.", "typeRef": null}, {"name": "colorDepth", "type": "number", "optional": true, "description": "Specifies the screen's color depth in bits. Default is 24.", "typeRef": null}, {"name": "label", "type": "string", "optional": true, "description": "Specifies the descriptive label for the screen. Default is none.", "typeRef": null}, {"name": "isInternal", "type": "boolean", "optional": true, "description": "Indicates whether the screen is internal to the device or external, attached to the device. Default is false.", "typeRef": null}], ["screenInfo"], "Add a new screen to the device. Only supported in headless mode.");
+inspectorBackend.registerCommand("Emulation.updateScreen", [{"name": "screenId", "type": "string", "optional": false, "description": "Target screen identifier.", "typeRef": "Emulation.ScreenId"}, {"name": "left", "type": "number", "optional": true, "description": "Offset of the left edge of the screen in pixels.", "typeRef": null}, {"name": "top", "type": "number", "optional": true, "description": "Offset of the top edge of the screen in pixels.", "typeRef": null}, {"name": "width", "type": "number", "optional": true, "description": "The width of the screen in pixels.", "typeRef": null}, {"name": "height", "type": "number", "optional": true, "description": "The height of the screen in pixels.", "typeRef": null}, {"name": "workAreaInsets", "type": "object", "optional": true, "description": "Specifies the screen's work area.", "typeRef": "Emulation.WorkAreaInsets"}, {"name": "devicePixelRatio", "type": "number", "optional": true, "description": "Specifies the screen's device pixel ratio.", "typeRef": null}, {"name": "rotation", "type": "number", "optional": true, "description": "Specifies the screen's rotation angle. Available values are 0, 90, 180 and 270.", "typeRef": null}, {"name": "colorDepth", "type": "number", "optional": true, "description": "Specifies the screen's color depth in bits.", "typeRef": null}, {"name": "label", "type": "string", "optional": true, "description": "Specifies the descriptive label for the screen.", "typeRef": null}, {"name": "isInternal", "type": "boolean", "optional": true, "description": "Indicates whether the screen is internal to the device or external, attached to the device. Default is false.", "typeRef": null}], ["screenInfo"], "Updates specified screen parameters. Only supported in headless mode.");
 inspectorBackend.registerCommand("Emulation.removeScreen", [{"name": "screenId", "type": "string", "optional": false, "description": "", "typeRef": "Emulation.ScreenId"}], [], "Remove screen from the device. Only supported in headless mode.");
 inspectorBackend.registerCommand("Emulation.setPrimaryScreen", [{"name": "screenId", "type": "string", "optional": false, "description": "", "typeRef": "Emulation.ScreenId"}], [], "Set primary screen. Only supported in headless mode. Note that this changes the coordinate system origin to the top-left of the new primary screen, updating the bounds and work areas of all existing screens accordingly.");
 inspectorBackend.registerType("Emulation.SafeAreaInsets", [{"name": "top", "type": "number", "optional": true, "description": "Overrides safe-area-inset-top.", "typeRef": null}, {"name": "topMax", "type": "number", "optional": true, "description": "Overrides safe-area-max-inset-top.", "typeRef": null}, {"name": "left", "type": "number", "optional": true, "description": "Overrides safe-area-inset-left.", "typeRef": null}, {"name": "leftMax", "type": "number", "optional": true, "description": "Overrides safe-area-max-inset-left.", "typeRef": null}, {"name": "bottom", "type": "number", "optional": true, "description": "Overrides safe-area-inset-bottom.", "typeRef": null}, {"name": "bottomMax", "type": "number", "optional": true, "description": "Overrides safe-area-max-inset-bottom.", "typeRef": null}, {"name": "right", "type": "number", "optional": true, "description": "Overrides safe-area-inset-right.", "typeRef": null}, {"name": "rightMax", "type": "number", "optional": true, "description": "Overrides safe-area-max-inset-right.", "typeRef": null}]);

package/front_end/generated/SupportedCSSProperties.js

@@ -4891,7 +4891,7 @@ export const generatedProperties = [
   "inherited": false,
   "keywords": [
    "none",
-   "auto"
+   "all"
   ],
   "name": "view-transition-scope"
  },
@@ -7267,7 +7267,7 @@ export const generatedPropertyValues = {
  "view-transition-scope": {
   "values": [
    "none",
-   "auto"
+   "all"
   ]
  },
  "visibility": {

package/front_end/generated/protocol-mapping.d.ts

@@ -202,6 +202,12 @@ export namespace ProtocolMapping {
      * Notification sent after the virtual time budget for the current VirtualTimePolicy has run out.
      */
     'Emulation.virtualTimeBudgetExpired': [];
+    /**
+     * Fired when a page calls screen.orientation.lock() or screen.orientation.unlock()
+     * while device emulation is enabled. This allows the DevTools frontend to update the
+     * emulated device orientation accordingly.
+     */
+    'Emulation.screenOrientationLockChanged': [Protocol.Emulation.ScreenOrientationLockChangedEvent];
     'FedCm.dialogShown': [Protocol.FedCm.DialogShownEvent];
     /**
      * Triggered when a dialog is closed, either by user action, JS abort,
@@ -2775,6 +2781,13 @@ export namespace ProtocolMapping {
       paramsType: [Protocol.Emulation.AddScreenRequest];
       returnType: Protocol.Emulation.AddScreenResponse;
     };
+    /**
+     * Updates specified screen parameters. Only supported in headless mode.
+     */
+    'Emulation.updateScreen': {
+      paramsType: [Protocol.Emulation.UpdateScreenRequest];
+      returnType: Protocol.Emulation.UpdateScreenResponse;
+    };
     /**
      * Remove screen from the device. Only supported in headless mode.
      */

package/front_end/generated/protocol-proxy-api.d.ts

@@ -1847,6 +1847,11 @@ declare namespace ProtocolProxyApi {
      */
     invoke_addScreen(params: Protocol.Emulation.AddScreenRequest): Promise<Protocol.Emulation.AddScreenResponse>;
 
+    /**
+     * Updates specified screen parameters. Only supported in headless mode.
+     */
+    invoke_updateScreen(params: Protocol.Emulation.UpdateScreenRequest): Promise<Protocol.Emulation.UpdateScreenResponse>;
+
     /**
      * Remove screen from the device. Only supported in headless mode.
      */
@@ -1867,6 +1872,13 @@ declare namespace ProtocolProxyApi {
      */
     virtualTimeBudgetExpired(): void;
 
+    /**
+     * Fired when a page calls screen.orientation.lock() or screen.orientation.unlock()
+     * while device emulation is enabled. This allows the DevTools frontend to update the
+     * emulated device orientation accordingly.
+     */
+    screenOrientationLockChanged(params: Protocol.Emulation.ScreenOrientationLockChangedEvent): void;
+
   }
 
   export interface EventBreakpointsApi {

package/front_end/generated/protocol.ts

@@ -7205,6 +7205,14 @@ export namespace Emulation {
      * Scrollbar type. Default: `default`.
      */
     scrollbarType?: SetDeviceMetricsOverrideRequestScrollbarType;
+    /**
+     * If set to true, enables screen orientation lock emulation, which
+     * intercepts screen.orientation.lock() calls from the page and reports
+     * orientation changes via screenOrientationLockChanged events. This is
+     * useful for emulating mobile device orientation lock behavior in
+     * responsive design mode.
+     */
+    screenOrientationLockEmulation?: boolean;
   }
 
   export interface SetDevicePostureOverrideRequest {
@@ -7547,6 +7555,57 @@ export namespace Emulation {
     screenInfo: ScreenInfo;
   }
 
+  export interface UpdateScreenRequest {
+    /**
+     * Target screen identifier.
+     */
+    screenId: ScreenId;
+    /**
+     * Offset of the left edge of the screen in pixels.
+     */
+    left?: integer;
+    /**
+     * Offset of the top edge of the screen in pixels.
+     */
+    top?: integer;
+    /**
+     * The width of the screen in pixels.
+     */
+    width?: integer;
+    /**
+     * The height of the screen in pixels.
+     */
+    height?: integer;
+    /**
+     * Specifies the screen's work area.
+     */
+    workAreaInsets?: WorkAreaInsets;
+    /**
+     * Specifies the screen's device pixel ratio.
+     */
+    devicePixelRatio?: number;
+    /**
+     * Specifies the screen's rotation angle. Available values are 0, 90, 180 and 270.
+     */
+    rotation?: integer;
+    /**
+     * Specifies the screen's color depth in bits.
+     */
+    colorDepth?: integer;
+    /**
+     * Specifies the descriptive label for the screen.
+     */
+    label?: string;
+    /**
+     * Indicates whether the screen is internal to the device or external, attached to the device. Default is false.
+     */
+    isInternal?: boolean;
+  }
+
+  export interface UpdateScreenResponse extends ProtocolResponseWithError {
+    screenInfo: ScreenInfo;
+  }
+
   export interface RemoveScreenRequest {
     screenId: ScreenId;
   }
@@ -7554,6 +7613,22 @@ export namespace Emulation {
   export interface SetPrimaryScreenRequest {
     screenId: ScreenId;
   }
+
+  /**
+   * Fired when a page calls screen.orientation.lock() or screen.orientation.unlock()
+   * while device emulation is enabled. This allows the DevTools frontend to update the
+   * emulated device orientation accordingly.
+   */
+  export interface ScreenOrientationLockChangedEvent {
+    /**
+     * Whether the screen orientation is currently locked.
+     */
+    locked: boolean;
+    /**
+     * The orientation lock type requested by the page. Only set when locked is true.
+     */
+    orientation?: ScreenOrientation;
+  }
 }
 
 /**

package/front_end/models/ai_assistance/agents/AiAgent.ts

@@ -5,6 +5,7 @@
 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 type * as Protocol from '../../../generated/protocol.js';
 import * as Greendev from '../../greendev/greendev.js';
 import {debugLog, isStructuredLogEnabled} from '../debug.js';
 
@@ -84,6 +85,7 @@ export interface ThoughtResponse {
 
 export interface SideEffectResponse {
   type: ResponseType.SIDE_EFFECT;
+  description: string|null;
   code?: string;
   confirm: (confirm: boolean) => void;
 }
@@ -105,6 +107,7 @@ export interface ActionResponse {
   code?: string;
   output?: string;
   canceled: boolean;
+  widgets?: AiWidget[];
 }
 
 export interface QueryingResponse {
@@ -215,10 +218,29 @@ export abstract class ConversationContext<T> {
   }
 }
 
+export interface ComputedStyleAiWidget {
+  name: 'COMPUTED_STYLES';
+  data: {
+    computedStyles: Map<string, string>,
+    backendNodeId: Protocol.DOM.BackendNodeId,
+    matchedCascade: SDK.CSSMatchedStyles.CSSMatchedStyles,
+    // The subset of CSS properties that the AI looked up.
+    properties: string[],
+  };
+}
+// This type will grow as we add more widgets.
+export type AiWidget = ComputedStyleAiWidget;
+
 export type FunctionCallHandlerResult<Result> = {
   requiresApproval: true,
+  /**
+   * Provides extra description of what the required
+   * approval is requesting.
+   */
+  description: string|null,
 }|{
   result: Result,
+  widgets?: AiWidget[],
 }|{
   context: ConversationContext<unknown>,
   description: string,
@@ -259,7 +281,6 @@ export interface FunctionDeclaration<Args extends Record<string, unknown>, Retur
   /**
    * Function implementation that the LLM will try to execute,
    */
-
   handler(args: Args, options?: FunctionHandlerOptions): Promise<FunctionCallHandlerResult<ReturnType>>;
 }
 
@@ -738,6 +759,7 @@ export abstract class AiAgent<T> {
       yield {
         type: ResponseType.SIDE_EFFECT,
         confirm: sideEffectConfirmationPromiseWithResolvers.resolve,
+        description: result.description,
       };
 
       const approvedRun = await sideEffectConfirmationPromiseWithResolvers.promise;
@@ -764,6 +786,7 @@ export abstract class AiAgent<T> {
         type: ResponseType.ACTION,
         code,
         output: typeof result.result === 'string' ? result.result : JSON.stringify(result.result),
+        widgets: result.widgets,
         canceled: false,
       };
     }