chrome-devtools-frontend 1.0.1596535 → 1.0.1597448

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/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

@@ -39,27 +39,24 @@ let throttlingManagerInstance: CPUThrottlingManager;
 
 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;
@@ -87,7 +84,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 +96,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 +104,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 +115,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/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

@@ -162,6 +162,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) {

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

@@ -394,6 +394,10 @@ export abstract class AiAgent<T> {
     this.#facts.clear();
   }
 
+  popPendingMultimodalInput(): MultimodalInput|undefined {
+    return undefined;
+  }
+
   preambleFeatures(): string[] {
     return [];
   }

package/front_end/models/ai_assistance/agents/StylingAgent.snapshot.txt

@@ -121,6 +121,30 @@ Content:
           "title"
         ]
       }
+    },
+    {
+      "name": "activateDeviceEmulation",
+      "description": "Sets emulation viewing mode for a specific device and optionally enables vision deficiency emulation.",
+      "parameters": {
+        "type": 6,
+        "description": "",
+        "nullable": false,
+        "properties": {
+          "deviceName": {
+            "type": 1,
+            "description": "The name of the device to emulate. Allowed values: Pixel 3 XL, Pixel 7, Samsung Galaxy S8+, Samsung Galaxy S20 Ultra, Surface Pro 7, Surface Duo, Galaxy Z Fold 5, Asus Zenbook Fold, Samsung Galaxy A51/71, Nest Hub Max, Nest Hub, iPhone 4, iPhone 5/SE, iPhone 6/7/8, iPhone SE, iPhone XR, iPhone 12 Pro, iPhone 14 Pro Max, iPad Mini, iPad Air, iPad Pro.",
+            "nullable": false
+          },
+          "visionDeficiency": {
+            "type": 1,
+            "description": "Optional vision deficiency to emulate. Allowed values: blurredVision, reducedContrast, achromatopsia, deuteranopia, protanopia, tritanopia.",
+            "nullable": true
+          }
+        },
+        "required": [
+          "deviceName"
+        ]
+      }
     }
   ],
   "options": {