chrome-devtools-frontend 1.0.1651641 → 1.0.1654411

package/front_end/models/ai_assistance/tools/README.md

@@ -17,11 +17,29 @@ Instead of passing a monolithic "grab-bag" context object to all tool handlers,
 - `PageExecutionCapability`: For tools executing JavaScript code on the inspected page.
 - `StyleMutationCapability`: For tools managing and applying style mutations via a `ChangeManager`.
 - `TargetCapability`: For tools requiring access to the page's current SDK `Target`.
-- `OriginLockCapability`: For tools enforcing cross-origin security via origin locks. Tools that fetch resources or state from the inspected page (such as styling or source code) must use this capability to verify that the target resource matches the conversation's established origin. This prevents the LLM from executing tools against out-of-origin elements or documents.
+- `OriginLockCapability`: For tools enforcing cross-origin security via origin locks. Tools that fetch resources or state from the inspected page (such as styling or source code) must use this capability to verify that the target resource matches the conversation's established origin. This prevents the LLM from executing tools against out-of-origin elements or documents. Verification should be done by wrapping resolved resources in helper context classes (e.g., `DOMNodeContext`) and calling `isOriginAllowed(establishedOrigin)`.
 
 ### Unified Context
 
-The Agent (e.g., `AiAgent2`) builds the complete dependency union (`AllToolsContext`) and fulfills all capabilities. When the handler is invoked, TypeScript validates that the provided context matches the intersection of capabilities requested by that tool.
+The Agent (e.g., `AiAgent2`) builds the complete dependency union (`AllToolsCapabilities`) and fulfills all capabilities. When the handler is invoked, TypeScript validates that the provided context matches the intersection of capabilities requested by that tool.
+
+## Returning UI Widgets
+
+Tools can return rich UI components (widgets) to be rendered directly in the AI Assistance panel alongside text results. To do this, include the widget payload in the `widgets` field of the returned `FunctionCallHandlerResult`:
+
+```typescript
+return {
+  result: JSON.stringify(properties, null, 2),
+  widgets: [{
+    name: 'DOM_TREE',
+    data: {
+      root: snapshot,
+      title: i18n.i18n.lockedString('Element details'),
+      accessibleRevealLabel: i18n.i18n.lockedString('Reveal element'),
+    },
+  }],
+};
+```
 
 ## Authoring a New Tool
 
@@ -35,6 +53,8 @@ To author a new tool:
 See concrete, production examples of capability-based tools in this directory:
 - [ExecuteJavaScript.ts](ExecuteJavaScript.ts): Demonstrates use of `PageExecutionCapability` and `StyleMutationCapability`.
 - [GetStyles.ts](GetStyles.ts): Demonstrates use of `TargetCapability` and `OriginLockCapability`.
+- [GetElementAccessibilityDetails.ts](GetElementAccessibilityDetails.ts): Demonstrates returning UI widgets (`DOM_TREE`) and origin checks with context wrappers.
+- [ResolveDevtoolsNodePath.ts](ResolveDevtoolsNodePath.ts): Demonstrates path resolution input validation and origin lock checks.
 
 ## ToolRegistry Lookup
 

package/front_end/models/ai_assistance/tools/{ResolveLighthousePath.ts → ResolveDevtoolsNodePath.ts}

@@ -17,11 +17,11 @@ import {
 } from './Tool.js';
 
 /**
- * Arguments for resolving a Lighthouse path to a backend node ID.
+ * Arguments for resolving a DevTools node path to a backend node ID.
  */
-export interface ResolveLighthousePathArgs extends ToolArgs {
+export interface ResolveDevtoolsNodePathArgs extends ToolArgs {
   /**
-   * A Lighthouse-style element path.
+   * A DevTools node path.
    * This is typically a comma-separated list of child indices and tag names
    * representing the path from the root to the target element (e.g., "1,HTML,1,BODY").
    */
@@ -30,19 +30,20 @@ export interface ResolveLighthousePathArgs extends ToolArgs {
 }
 
 /**
- * A tool that resolves a Lighthouse-style element path to a backend node ID.
+ * A tool that resolves a DevTools node path to a backend node ID.
  *
  * This is used by the AI assistant to identify specific DOM nodes referred to in
- * Lighthouse reports. It ensures the resolved node belongs to the locked origin.
+ * Lighthouse reports or other sources using node paths. It ensures the resolved node
+ * belongs to the locked origin.
  */
-export class ResolveLighthousePathTool implements
-    Tool<ResolveLighthousePathArgs, {backendNodeId: number}, BaseToolCapability&TargetCapability&OriginLockCapability> {
-  readonly name = ToolName.RESOLVE_LIGHTHOUSE_PATH;
-  readonly description = 'Resolves a Lighthouse path to a backend node ID.';
+export class ResolveDevtoolsNodePathTool implements Tool<ResolveDevtoolsNodePathArgs, {backendNodeId: number},
+                                                         BaseToolCapability&TargetCapability&OriginLockCapability> {
+  readonly name = ToolName.RESOLVE_DEVTOOLS_NODE_PATH;
+  readonly description = 'Resolves a DevTools node path to a backend node ID.';
 
-  readonly parameters: Host.AidaClient.FunctionObjectParam<keyof ResolveLighthousePathArgs> = {
+  readonly parameters: Host.AidaClient.FunctionObjectParam<keyof ResolveDevtoolsNodePathArgs> = {
     type: Host.AidaClient.ParametersTypes.OBJECT,
-    description: 'Arguments for resolving a Lighthouse path to a backend node ID.',
+    description: 'Arguments for resolving a DevTools node path to a backend node ID.',
     nullable: false,
     properties: {
       explanation: {
@@ -52,14 +53,14 @@ export class ResolveLighthousePathTool implements
       },
       path: {
         type: Host.AidaClient.ParametersTypes.STRING,
-        description: 'Lighthouse path string.',
+        description: 'DevTools node path string.',
         nullable: false,
       },
     },
     required: ['explanation', 'path'],
   };
 
-  displayInfoFromArgs(params: ResolveLighthousePathArgs): {
+  displayInfoFromArgs(params: ResolveDevtoolsNodePathArgs): {
     title: string,
     thought: string,
     action: string,
@@ -67,7 +68,7 @@ export class ResolveLighthousePathTool implements
     return {
       title: 'Resolving element path',
       thought: params.explanation,
-      action: `resolveLighthousePath('${params.path}')`,
+      action: `resolveDevtoolsNodePath('${params.path}')`,
     };
   }
 
@@ -79,7 +80,7 @@ export class ResolveLighthousePathTool implements
    * access to nodes from other origins.
    */
   async handler(
-      params: ResolveLighthousePathArgs,
+      params: ResolveDevtoolsNodePathArgs,
       context: BaseToolCapability&TargetCapability&OriginLockCapability,
       ): Promise<FunctionCallHandlerResult<{backendNodeId: number}>> {
     const establishedOrigin = context.getEstablishedOrigin();
@@ -95,11 +96,11 @@ export class ResolveLighthousePathTool implements
 
     let nodeId;
     try {
-      // Resolves the Lighthouse path (a representation of the path to a node)
+      // Resolves the DevTools node path (a representation of the path to a node)
       // and ensures the node is loaded into the frontend DOM model, returning its ID.
       nodeId = await domModel.pushNodeByPathToFrontend(params.path);
     } catch {
-      return {error: 'Error: Could not find node by path.'};
+      // pushNodeByPathToFrontend can fail or return undefined
     }
     if (!nodeId) {
       return {error: 'Error: Could not find node by path.'};

package/front_end/models/ai_assistance/tools/Tool.ts

@@ -84,7 +84,7 @@ export interface LighthouseCapability {
  * Unified context interface providing all capabilities available in the project.
  * Used by the agent to pass a complete context to any tool type-safely.
  */
-export type AllToolsContext = BaseToolCapability&PageExecutionCapability&StyleMutationCapability&TargetCapability&
+export type AllToolsCapabilities = BaseToolCapability&PageExecutionCapability&StyleMutationCapability&TargetCapability&
     OriginLockCapability&LighthouseCapability;
 
 /**
@@ -98,7 +98,8 @@ export const enum ToolName {
   LIST_NETWORK_REQUESTS = 'listNetworkRequests',
   GET_NETWORK_REQUEST_DETAILS = 'getNetworkRequestDetails',
   GET_LIGHTHOUSE_AUDITS = 'getLighthouseAudits',
-  RESOLVE_LIGHTHOUSE_PATH = 'resolveLighthousePath',
+  RESOLVE_DEVTOOLS_NODE_PATH = 'resolveDevtoolsNodePath',
+  GET_ELEMENT_ACCESSIBILITY_DETAILS = 'getElementAccessibilityDetails',
 }
 
 /**
@@ -125,6 +126,10 @@ export interface BaseTool {
 export interface Tool<Args extends ToolArgs = ToolArgs, ReturnType = unknown,
                                    ContextType extends BaseToolCapability = BaseToolCapability> extends BaseTool {
   readonly parameters: Host.AidaClient.FunctionObjectParam<keyof Args>;
+  /**
+   * Converts the tool arguments into user-friendly display information.
+   * This is used by the UI to show what the agent is doing (e.g., in the history/steps log).
+   */
   readonly displayInfoFromArgs?: (
       args: Args,
       ) => {

package/front_end/models/ai_assistance/tools/ToolRegistry.ts

@@ -3,12 +3,13 @@
 // found in the LICENSE file.
 
 import {ExecuteJavaScriptTool} from './ExecuteJavaScript.js';
+import {GetElementAccessibilityDetailsTool} from './GetElementAccessibilityDetails.js';
 import {GetLighthouseAuditsTool} from './GetLighthouseAudits.js';
 import {GetNetworkRequestDetailsTool} from './GetNetworkRequestDetails.js';
 import {GetStylesTool} from './GetStyles.js';
 import {ListNetworkRequestsTool} from './ListNetworkRequests.js';
-import {ResolveLighthousePathTool} from './ResolveLighthousePath.js';
-import {type AllToolsContext, type Tool, type ToolArgs, ToolName} from './Tool.js';
+import {ResolveDevtoolsNodePathTool} from './ResolveDevtoolsNodePath.js';
+import {type AllToolsCapabilities, type Tool, type ToolArgs, ToolName} from './Tool.js';
 
 /**
  * Plain object registry containing concrete instantiated tools.
@@ -24,7 +25,8 @@ export const TOOLS = {
   [ToolName.LIST_NETWORK_REQUESTS]: new ListNetworkRequestsTool(),
   [ToolName.GET_NETWORK_REQUEST_DETAILS]: new GetNetworkRequestDetailsTool(),
   [ToolName.GET_LIGHTHOUSE_AUDITS]: new GetLighthouseAuditsTool(),
-  [ToolName.RESOLVE_LIGHTHOUSE_PATH]: new ResolveLighthousePathTool(),
+  [ToolName.RESOLVE_DEVTOOLS_NODE_PATH]: new ResolveDevtoolsNodePathTool(),
+  [ToolName.GET_ELEMENT_ACCESSIBILITY_DETAILS]: new GetElementAccessibilityDetailsTool(),
 };
 
 /**
@@ -45,16 +47,16 @@ export class ToolRegistry {
    * @param name The string name of the tool to retrieve, used when the tool name is only known at runtime.
    * @returns The generic Tool interface, or undefined if not found.
    */
-  static get(name: string): Tool<ToolArgs, unknown, AllToolsContext>|undefined;
-  static get(name: string): Tool<ToolArgs, unknown, AllToolsContext>|undefined {
+  static get(name: string): Tool<ToolArgs, unknown, AllToolsCapabilities>|undefined;
+  static get(name: string): Tool<ToolArgs, unknown, AllToolsCapabilities>|undefined {
     // We use a double assertion (`as unknown as Tool<...>`) here. TypeScript's variance
     // rules prevent direct casting from specific concrete tools (which have narrowed,
-    // capability-specific contexts) to the generic `Tool` signature that uses `AllToolsContext`.
+    // capability-specific contexts) to the generic `Tool` signature that uses `AllToolsCapabilities`.
     // This cast is runtime-safe because any capability requested by a specific tool is
-    // guaranteed to be satisfied by `AllToolsContext`, and the handler will only access
+    // guaranteed to be satisfied by `AllToolsCapabilities`, and the handler will only access
     // the capabilities it expects.
     return Object.prototype.hasOwnProperty.call(TOOLS, name) ?
-        TOOLS[name as keyof typeof TOOLS] as unknown as Tool<ToolArgs, unknown, AllToolsContext>:
+        TOOLS[name as keyof typeof TOOLS] as unknown as Tool<ToolArgs, unknown, AllToolsCapabilities>:
         undefined;
   }
 }

package/front_end/models/autofill_manager/AutofillManager.ts

@@ -7,27 +7,19 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 
-let autofillManagerInstance: AutofillManager;
-
 export class AutofillManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   #address = '';
   #filledFields: Protocol.Autofill.FilledField[] = [];
   #matches: Match[] = [];
   #autofillModel: SDK.AutofillModel.AutofillModel|null = null;
+  #frameManager: SDK.FrameManager.FrameManager;
 
-  private constructor() {
+  constructor(targetManager: SDK.TargetManager.TargetManager,
+              frameManager: SDK.FrameManager.FrameManager = SDK.FrameManager.FrameManager.instance()) {
     super();
-    SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.AutofillModel.AutofillModel, SDK.AutofillModel.Events.ADDRESS_FORM_FILLED, this.#addressFormFilled, this,
-        {scoped: true});
-  }
-
-  static instance(opts: {forceNew: boolean|null} = {forceNew: null}): AutofillManager {
-    const {forceNew} = opts;
-    if (!autofillManagerInstance || forceNew) {
-      autofillManagerInstance = new AutofillManager();
-    }
-    return autofillManagerInstance;
+    this.#frameManager = frameManager;
+    targetManager.addModelListener(SDK.AutofillModel.AutofillModel, SDK.AutofillModel.Events.ADDRESS_FORM_FILLED,
+                                   this.#addressFormFilled, this, {scoped: true});
   }
 
   async #addressFormFilled({data}: Common.EventTarget.EventTargetEvent<
@@ -56,7 +48,7 @@ export class AutofillManager extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
   highlightFilledField(filledField: Protocol.Autofill.FilledField): void {
     const backendNodeId = filledField.fieldId;
-    const target = SDK.FrameManager.FrameManager.instance().getFrame(filledField.frameId)?.resourceTreeModel().target();
+    const target = this.#frameManager.getFrame(filledField.frameId)?.resourceTreeModel().target();
     if (target) {
       const deferredNode = new SDK.DOMModel.DeferredDOMNode(target, backendNodeId);
       const domModel = target.model(SDK.DOMModel.DOMModel);

package/front_end/models/bindings/NetworkProject.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import type * as Workspace from '../workspace/workspace.js';
@@ -13,21 +14,16 @@ const uiSourceCodeToAttributionMap = new WeakMap<Workspace.UISourceCode.UISource
                                                  }>>();
 const projectToTargetMap = new WeakMap<Workspace.Workspace.Project, SDK.Target.Target>();
 
-let networkProjectManagerInstance: NetworkProjectManager;
-
 export class NetworkProjectManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
-  private constructor() {
-    super();
-  }
 
   static instance({forceNew}: {
     forceNew: boolean,
   } = {forceNew: false}): NetworkProjectManager {
-    if (!networkProjectManagerInstance || forceNew) {
-      networkProjectManagerInstance = new NetworkProjectManager();
+    if (!Root.DevToolsContext.globalInstance().has(NetworkProjectManager) || forceNew) {
+      Root.DevToolsContext.globalInstance().set(NetworkProjectManager, new NetworkProjectManager());
     }
 
-    return networkProjectManagerInstance;
+    return Root.DevToolsContext.globalInstance().get(NetworkProjectManager);
   }
 }
 

package/front_end/models/breakpoints/BreakpointManager.ts

@@ -14,7 +14,6 @@ import * as SourceMapScopes from '../source_map_scopes/source_map_scopes.js';
 import type * as TextUtils from '../text_utils/text_utils.js';
 import * as Workspace from '../workspace/workspace.js';
 
-let breakpointManagerInstance: BreakpointManager;
 const INITIAL_RESTORE_BREAKPOINT_COUNT = 100;
 
 export class BreakpointManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements
@@ -35,10 +34,9 @@ export class BreakpointManager extends Common.ObjectWrapper.ObjectWrapper<EventT
   readonly #breakpointByStorageId = new Map<string, Breakpoint>();
   #updateBindingsCallbacks: Array<(uiSourceCode: Workspace.UISourceCode.UISourceCode) => Promise<void>> = [];
 
-  private constructor(
-      targetManager: SDK.TargetManager.TargetManager, workspace: Workspace.Workspace.WorkspaceImpl,
-      debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding,
-      settings: Common.Settings.Settings, restoreInitialBreakpointCount?: number) {
+  constructor(targetManager: SDK.TargetManager.TargetManager, workspace: Workspace.Workspace.WorkspaceImpl,
+              debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding,
+              settings: Common.Settings.Settings, restoreInitialBreakpointCount?: number) {
     super();
     this.#workspace = workspace;
     this.targetManager = targetManager;
@@ -85,18 +83,20 @@ export class BreakpointManager extends Common.ObjectWrapper.ObjectWrapper<EventT
   }): BreakpointManager {
     const {forceNew, targetManager, workspace, debuggerWorkspaceBinding, settings, restoreInitialBreakpointCount} =
         opts;
-    if (!breakpointManagerInstance || forceNew) {
+    if (!Root.DevToolsContext.globalInstance().has(BreakpointManager) || forceNew) {
       if (!targetManager || !workspace || !debuggerWorkspaceBinding || !settings) {
         throw new Error(
             `Unable to create settings: targetManager, workspace, debuggerWorkspaceBinding, and settings must be provided: ${
                 new Error().stack}`);
       }
 
-      breakpointManagerInstance = new BreakpointManager(
-          targetManager, workspace, debuggerWorkspaceBinding, settings, restoreInitialBreakpointCount);
+      Root.DevToolsContext.globalInstance().set(
+          BreakpointManager,
+          new BreakpointManager(targetManager, workspace, debuggerWorkspaceBinding, settings,
+                                restoreInitialBreakpointCount));
     }
 
-    return breakpointManagerInstance;
+    return Root.DevToolsContext.globalInstance().get(BreakpointManager);
   }
 
   modelAdded(debuggerModel: SDK.DebuggerModel.DebuggerModel): void {

package/front_end/models/emulation/DeviceModeModel.ts

@@ -200,6 +200,10 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     }
   }
 
+  static removeInstance(): void {
+    deviceModeModelInstance = null;
+  }
+
   dispose(): void {
     SDK.TargetManager.TargetManager.instance().unobserveModels(SDK.EmulationModel.EmulationModel, this);
   }
@@ -573,6 +577,25 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return this.#mode.insets;
   }
 
+  private currentSafeAreaInsets(): Insets|null {
+    if (this.#type !== Type.Device || !this.#mode) {
+      return null;
+    }
+    return this.#mode.safeAreaInsets ?? null;
+  }
+
+  private applySafeAreaInsets(insets: Insets|null): void {
+    if (!this.#emulationModel) {
+      return;
+    }
+    if (insets) {
+      void this.#emulationModel.setSafeAreaInsets(
+          {top: insets.top, left: insets.left, bottom: insets.bottom, right: insets.right});
+    } else {
+      void this.#emulationModel.setSafeAreaInsets({});
+    }
+  }
+
   private getScreenOrientationType(): Protocol.Emulation.ScreenOrientationType {
     if (!this.#mode) {
       throw new Error('Mode required to get orientation type.');
@@ -649,6 +672,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     if (overlayModel) {
       overlayModel.setShowViewportSizeOnResize(this.#type === Type.None);
     }
+    this.applySafeAreaInsets(this.currentSafeAreaInsets());
     this.dispatchEventToListeners(Events.UPDATED);
   }
 

package/front_end/models/emulation/EmulatedDevices.ts

@@ -103,6 +103,15 @@ export class EmulatedDevice {
             parseIntValue(json, 'bottom'));
       }
 
+      function parseCutoutShape(json: any): CutoutShape {
+        const shape = parseValue(json, 'shape', 'string');
+        if (shape !== CutoutShape.PILL && shape !== CutoutShape.NOTCH && shape !== CutoutShape.CIRCLE &&
+            shape !== CutoutShape.RECTANGLE) {
+          throw new Error('Emulated device mode has unsupported cutout shape: ' + shape);
+        }
+        return shape;
+      }
+
       function parseRGBA(json: any): SDK.OverlayModel.HighlightColor {
         const result = {} as SDK.OverlayModel.HighlightColor;
         result.r = parseIntValue(json, 'r');
@@ -257,6 +266,40 @@ export class EmulatedDevice {
           throw new Error('Emulated device mode \'' + mode.title + '\'has wrong mode insets');
         }
         mode.image = (parseValue(modes[i], 'image', 'string', null) as string);
+        const safeAreaInsets = parseValue(modes[i], 'safe-area-insets', 'object', null);
+        if (safeAreaInsets) {
+          mode.safeAreaInsets = parseInsets(safeAreaInsets);
+        }
+        const cutout = parseValue(modes[i], 'cutout', 'object', null);
+        if (cutout) {
+          const shape = parseCutoutShape(cutout);
+          const baseCutout = {
+            x: parseIntValue(cutout, 'x'),
+            y: parseIntValue(cutout, 'y'),
+            width: parseIntValue(cutout, 'width'),
+            height: parseIntValue(cutout, 'height'),
+          };
+          if (shape === CutoutShape.PILL) {
+            mode.cutout = {shape, ...baseCutout, borderRadius: parseIntValue(cutout, 'border-radius')};
+          } else if (shape === CutoutShape.NOTCH) {
+            mode.cutout = {
+              shape,
+              ...baseCutout,
+              upperRadius: parseIntValue(cutout, 'upper-radius'),
+              lowerRadius: parseIntValue(cutout, 'lower-radius'),
+            };
+          } else if (shape === CutoutShape.CIRCLE) {
+            mode.cutout = {
+              shape,
+              ...baseCutout,
+              cx: parseIntValue(cutout, 'cx'),
+              cy: parseIntValue(cutout, 'cy'),
+              radius: parseIntValue(cutout, 'radius'),
+            };
+          } else {
+            mode.cutout = {shape, ...baseCutout};
+          }
+        }
         result.modes.push(mode);
       }
       result.#showByDefault = (parseValue(json, 'show-by-default', 'boolean', undefined) as boolean);
@@ -359,6 +402,35 @@ export class EmulatedDevice {
         },
         image: this.modes[i].image || undefined,
       };
+      const safeAreaInsets = this.modes[i].safeAreaInsets;
+      if (safeAreaInsets) {
+        mode['safe-area-insets'] = {
+          left: safeAreaInsets.left,
+          top: safeAreaInsets.top,
+          right: safeAreaInsets.right,
+          bottom: safeAreaInsets.bottom,
+        };
+      }
+      const cutout = this.modes[i].cutout;
+      if (cutout) {
+        mode.cutout = {
+          shape: cutout.shape,
+          x: cutout.x,
+          y: cutout.y,
+          width: cutout.width,
+          height: cutout.height,
+        };
+        if (cutout.shape === CutoutShape.PILL) {
+          mode.cutout['border-radius'] = cutout.borderRadius;
+        } else if (cutout.shape === CutoutShape.NOTCH) {
+          mode.cutout['upper-radius'] = cutout.upperRadius;
+          mode.cutout['lower-radius'] = cutout.lowerRadius;
+        } else if (cutout.shape === CutoutShape.CIRCLE) {
+          mode.cutout.cx = cutout.cx;
+          mode.cutout.cy = cutout.cy;
+          mode.cutout.radius = cutout.radius;
+        }
+      }
       json['modes'].push(mode);
     }
 
@@ -637,7 +709,24 @@ export interface Mode {
   orientation: string;
   insets: Insets;
   image: string|null;
+  safeAreaInsets?: Insets;
+  cutout?: Cutout;
 }
+export const enum CutoutShape {
+  PILL = 'pill',
+  NOTCH = 'notch',
+  CIRCLE = 'circle',
+  RECTANGLE = 'rectangle',
+}
+export interface BaseCutout {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+export type Cutout = BaseCutout&({shape: CutoutShape.RECTANGLE}|{shape: CutoutShape.PILL, borderRadius: number}|
+                                 {shape: CutoutShape.NOTCH, upperRadius: number, lowerRadius: number}|
+                                 {shape: CutoutShape.CIRCLE, cx: number, cy: number, radius: number});
 export interface Orientation {
   width: number;
   height: number;
@@ -655,6 +744,25 @@ export interface JSONMode {
     top: number,
     bottom: number,
   };
+  'safe-area-insets'?: {
+    left: number,
+    right: number,
+    top: number,
+    bottom: number,
+  };
+  cutout?: {
+    shape: string,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    'border-radius'?: number,
+    'upper-radius'?: number,
+    'lower-radius'?: number,
+    cx?: number,
+    cy?: number,
+    radius?: number,
+  };
 }
 
 // These props should quoted for the script to work properly

package/front_end/models/heap_snapshot/HeapSnapshotModel.ts

@@ -316,4 +316,40 @@ export interface DuplicateStringGroup {
     distance: number,
   }>;
   truncated?: boolean;
+  length?: number;
+  hash?: number;
+}
+
+export interface NativeContextSize {
+  nodeId: number;
+  nodeIndex: number;
+  nodeName: string;
+  attributedSize: number;
+  retainedSize: number;
+  selfSize: number;
+}
+
+export interface NativeContextSizes {
+  nativeContexts: NativeContextSize[];
+  sharedSize: number;
+  noAttributionSize: number;
+}
+
+export const enum DOMLinkState {
+  UNKNOWN = 0,
+  ATTACHED = 1,
+  DETACHED = 2,
+}
+
+export interface ObjectInfo {
+  id: number;
+  name: string;
+  type: string;
+  nodeIndex: number;
+  detachedness: DOMLinkState;
+  selfSize: number;
+  retainedSize: number;
+  distance: number;
+  edgeCount: number;
+  retainerCount: number;
 }

package/front_end/models/heap_snapshot/HeapSnapshotProxy.ts

@@ -267,6 +267,10 @@ export class HeapSnapshotProxy extends HeapSnapshotProxyObject {
     return this.callMethodPromise('interfaceDefinitions');
   }
 
+  getNativeContextSizes(): Promise<HeapSnapshotModel.NativeContextSizes> {
+    return this.callMethodPromise('getNativeContextSizes');
+  }
+
   aggregatesWithFilter(filter: HeapSnapshotModel.NodeFilter):
       Promise<Record<string, HeapSnapshotModel.AggregatedInfo>> {
     return this.callMethodPromise('aggregatesWithFilter', filter);
@@ -295,6 +299,10 @@ export class HeapSnapshotProxy extends HeapSnapshotProxyObject {
     return this.callMethodPromise('nodeIndexForId', nodeId);
   }
 
+  getObjectInfo(nodeIndex: number): Promise<HeapSnapshotModel.ObjectInfo> {
+    return this.callMethodPromise('getObjectInfo', nodeIndex);
+  }
+
   createEdgesProvider(nodeIndex: number): HeapSnapshotProviderProxy {
     return this.callFactoryMethod('createEdgesProvider', HeapSnapshotProviderProxy, nodeIndex);
   }

package/front_end/models/issues_manager/IssuesManager.ts

@@ -180,6 +180,7 @@ export function createIssuesFromProtocolIssue(
 
 export interface IssuesManagerCreationOptions {
   forceNew: boolean;
+  frameManager?: SDK.FrameManager.FrameManager;
   /** Throw an error if this is not the first instance created */
   ensureFirst: boolean;
   showThirdPartyIssuesSetting?: Common.Settings.Setting<boolean>;
@@ -224,18 +225,20 @@ export class IssuesManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   #thirdPartyCookiePhaseoutIssueCount = new Map<IssueKind, number>();
   #issuesById = new Map<string, Issue>();
   #issuesByOutermostTarget: WeakMap<SDK.Target.Target, Set<Issue>> = new Map();
+  #frameManager: SDK.FrameManager.FrameManager;
 
-  constructor(
-      private readonly showThirdPartyIssuesSetting?: Common.Settings.Setting<boolean>,
-      private readonly hideIssueSetting?: Common.Settings.Setting<HideIssueMenuSetting>) {
+  constructor(private readonly showThirdPartyIssuesSetting?: Common.Settings.Setting<boolean>,
+              private readonly hideIssueSetting?: Common.Settings.Setting<HideIssueMenuSetting>,
+              frameManager: SDK.FrameManager.FrameManager = SDK.FrameManager.FrameManager.instance()) {
     super();
+    this.#frameManager = frameManager;
     new SourceFrameIssuesManager(this);
     SDK.TargetManager.TargetManager.instance().observeModels(SDK.IssuesModel.IssuesModel, this);
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.PrimaryPageChanged,
         this.#onPrimaryPageChanged, this);
-    SDK.FrameManager.FrameManager.instance().addEventListener(
-        SDK.FrameManager.Events.FRAME_ADDED_TO_TARGET, this.#onFrameAddedToTarget, this);
+    this.#frameManager.addEventListener(SDK.FrameManager.Events.FRAME_ADDED_TO_TARGET, this.#onFrameAddedToTarget,
+                                        this);
 
     // issueFilter uses the 'show-third-party-issues' setting. Clients of IssuesManager need
     // a full update when the setting changes to get an up-to-date issues list.
@@ -263,7 +266,8 @@ export class IssuesManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
     }
 
     if (!issuesManagerInstance || opts.forceNew) {
-      issuesManagerInstance = new IssuesManager(opts.showThirdPartyIssuesSetting, opts.hideIssueSetting);
+      issuesManagerInstance =
+          new IssuesManager(opts.showThirdPartyIssuesSetting, opts.hideIssueSetting, opts.frameManager);
     }
 
     return issuesManagerInstance;

package/front_end/models/javascript_metadata/JavaScriptMetadata.ts

@@ -3,11 +3,10 @@
 // found in the LICENSE file.
 
 import type * as Common from '../../core/common/common.js';
+import * as Root from '../../core/root/root.js';
 
 import {NativeFunctions} from './NativeFunctions.js';
 
-let javaScriptMetadataInstance: JavaScriptMetadataImpl;
-
 export class JavaScriptMetadataImpl implements Common.JavaScriptMetaData.JavaScriptMetaData {
   private readonly uniqueFunctions: Map<string, string[][]>;
   private readonly receiverMethods: Map<string, Map<string, string[][]>>;
@@ -15,11 +14,11 @@ export class JavaScriptMetadataImpl implements Common.JavaScriptMetaData.JavaScr
     forceNew: boolean|null,
   } = {forceNew: null}): JavaScriptMetadataImpl {
     const {forceNew} = opts;
-    if (!javaScriptMetadataInstance || forceNew) {
-      javaScriptMetadataInstance = new JavaScriptMetadataImpl();
+    if (!Root.DevToolsContext.globalInstance().has(JavaScriptMetadataImpl) || forceNew) {
+      Root.DevToolsContext.globalInstance().set(JavaScriptMetadataImpl, new JavaScriptMetadataImpl());
     }
 
-    return javaScriptMetadataInstance;
+    return Root.DevToolsContext.globalInstance().get(JavaScriptMetadataImpl);
   }
   constructor() {
     this.uniqueFunctions = new Map();