chrome-devtools-frontend 1.0.1643099 → 1.0.1645245

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

@@ -0,0 +1,45 @@
+# AI Assistant Tools Architecture
+
+This directory defines the **Tools** used by `AiAgent2` and other AI agents to execute code, read page state, or apply mutations to the inspected page.
+
+## Core Concepts
+
+The architecture relies on three primary concepts to guarantee 100% compile-time type safety for tools:
+1. **BaseTool**: An interface capturing non-generic tool metadata (e.g. `name`, `description`, `parameters`). This allows the agent and DevTools UI to generically store, register, and describe functions to the AIDA client without needing to know their specific types at runtime.
+2. **Capability Interfaces**: Narrow TypeScript interfaces wrapping individual DevTools dependencies (e.g., ChangeManager, executeJsCode). This decouples tools from monolithic agent environments, making them reusable and easier to unit test.
+3. **Tool**: A generic TypeScript interface (`Tool<Args, ReturnType, ContextType>`) binding the execution handler to specific capability requirements. This enforces compile-time safety, ensuring that a tool handler is only invoked by an agent that fulfills all the required capabilities.
+
+## Capability Interfaces
+
+Instead of passing a monolithic "grab-bag" context object to all tool handlers, DevTools AI tools declare exactly the capabilities they require. Available capability interfaces defined in `Tool.ts` include:
+
+- `BaseToolCapability`: Base interface providing access to the top-level conversation context step.
+- `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.
+
+### 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.
+
+## Authoring a New Tool
+
+To author a new tool:
+
+1. **Define the Args interface**: Extend `ToolArgs` to represent the JSON parameter schema expected by the LLM.
+2. **Declare Capability Dependencies**: Determine which capabilities your tool handler needs. Intersect them to define the tool's `ContextType`.
+3. **Implement the `Tool` interface**: Pass the args interface, return type, and intersected ContextType to the generic parameters of `Tool`.
+4. **Instantiate in `ToolRegistry.ts`**: Add the instantiated tool class to the static `TOOLS` registry.
+
+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`.
+
+## ToolRegistry Lookup
+
+To retrieve a tool from the registry with 100% type safety, call `ToolRegistry.get()` with the literal `ToolName` key:
+
+```typescript
+const getStylesTool = ToolRegistry.get(ToolName.GET_STYLES); // Returns GetStylesTool class type
+```

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

@@ -3,22 +3,82 @@
 // found in the LICENSE file.
 
 import type * as Host from '../../../core/host/host.js';
+import type * as SDK from '../../../core/sdk/sdk.js';
 import type {ConversationContext, FunctionCallHandlerResult, FunctionHandlerOptions} from '../agents/AiAgent.js';
 import type {executeJsCode} from '../agents/ExecuteJavascript.js';
 import type {ChangeManager} from '../ChangeManager.js';
 
 /**
- * Context provided to the tool's handler execution.
+ * Base capability for all tool contexts, providing access to the conversation context.
  */
-export interface ToolContext {
+export interface BaseToolCapability {
+  /**
+   * The active context for the current conversation step, if any.
+   */
   conversationContext: ConversationContext<unknown>|null;
-  changeManager?: ChangeManager;
-  createExtensionScope?: (changes: ChangeManager) => {
-    install(): Promise<void>, uninstall(): Promise<void>,
+}
+
+/**
+ * Capability for tools that need to execute JavaScript code on the inspected page.
+ */
+export interface PageExecutionCapability {
+  /**
+   * Function to execute JavaScript code in the page context.
+   */
+  execJs: typeof executeJsCode;
+
+  /**
+   * Returns the DOM node that acts as the execution context (i.e. `$0` inside the execution context)
+   * for running JavaScript.
+   */
+  getExecutionContextNode(): SDK.DOMModel.DOMNode|null;
+}
+
+/**
+ * Capability for tools that need to manage and apply style mutations to the page.
+ */
+export interface StyleMutationCapability {
+  /**
+   * The change manager for tracking and applying style changes.
+   */
+  changeManager: ChangeManager;
+
+  /**
+   * Creates an extension scope for applying changes, ensuring they can be uninstalled when done.
+   */
+  createExtensionScope(changes: ChangeManager): {
+    install(): Promise<void>,
+    uninstall(): Promise<void>,
   };
-  execJs?: typeof executeJsCode;
 }
 
+/**
+ * Capability for tools that need access to the current SDK Target of the inspected page.
+ */
+export interface TargetCapability {
+  /**
+   * Returns the current SDK Target for the inspected page.
+   */
+  getTarget(): SDK.Target.Target|null;
+}
+
+/**
+ * Capability for tools that need to enforce origin locking for security.
+ */
+export interface OriginLockCapability {
+  /**
+   * Returns the origin that the current conversation is locked to, if any.
+   */
+  getEstablishedOrigin(): string|undefined;
+}
+
+/**
+ * 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&OriginLockCapability;
+
 /**
  * Base argument type for AI Tools.
  */
@@ -44,21 +104,30 @@ export interface BaseTool {
 
 /**
  * Main generic interface for defining a Tool.
- * Binds the parameter schema properties and the handler implementation to a strict `Args` contract.
+ * Binds the parameter schema properties and the handler implementation to a strict `Args` and `ContextType` contract.
  *
  * @template Args - The expected object type for tool arguments. Must be an object type.
  * @template ReturnType - The type of data returned by the handler function.
+ * @template ContextType - The interface defining the capabilities this tool requires. Defaults to `BaseToolCapability`.
  */
-export interface Tool<Args extends ToolArgs = ToolArgs, ReturnType = unknown, > extends BaseTool {
+export interface Tool<Args extends ToolArgs = ToolArgs, ReturnType = unknown,
+                                   ContextType extends BaseToolCapability = BaseToolCapability> extends BaseTool {
   readonly parameters: Host.AidaClient.FunctionObjectParam<keyof Args>;
   readonly displayInfoFromArgs?: (
       args: Args,
       ) => {
     title?: string, thought?: string, action?: string, suggestions?: [string, ...string[]],
   };
+  /**
+   * The implementation function called when the AI invokes this tool.
+   *
+   * @param args The arguments provided by the AI model matching the tool's parameter schema.
+   * @param context The context object providing the capabilities requested by `ContextType`.
+   * @param options Additional runtime options for the handler execution.
+   */
   handler(
       args: Args,
-      context: ToolContext,
+      context: ContextType,
       options?: FunctionHandlerOptions,
       ): Promise<FunctionCallHandlerResult<ReturnType>>;
 }

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

@@ -4,11 +4,15 @@
 
 import {ExecuteJavaScriptTool} from './ExecuteJavaScript.js';
 import {GetStylesTool} from './GetStyles.js';
-import {type Tool, ToolName} from './Tool.js';
+import {type AllToolsContext, type Tool, type ToolArgs, ToolName} from './Tool.js';
 
 /**
  * Plain object registry containing concrete instantiated tools.
- * Keep this type concrete (no type-erasure) to preserve exact tool types.
+ *
+ * This object is deliberately declared as a plain object without an explicit type annotation
+ * (like `Record<ToolName, Tool>`) to preserve the exact concrete type of each registered tool.
+ * This is required to support compile-time type safety and inference in the overloaded
+ * `ToolRegistry.get()` method, which maps a literal `ToolName` key to its specific class type.
  */
 export const TOOLS = {
   [ToolName.EXECUTE_JAVASCRIPT]: new ExecuteJavaScriptTool(),
@@ -23,14 +27,26 @@ export class ToolRegistry {
    * Retrieves a tool by its literal name with 100% type safety.
    *
    * @template K - A key from the `TOOLS` registry.
+   * @param name The literal name of the tool to retrieve.
    * @returns The concrete class type of the requested tool.
    */
   static get<K extends keyof typeof TOOLS>(name: K): typeof TOOLS[K];
   /**
    * Fallback retrieval signature for general or runtime string lookups.
+   *
+   * @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|undefined;
-  static get(name: string): Tool|undefined {
-    return Object.prototype.hasOwnProperty.call(TOOLS, name) ? TOOLS[name as keyof typeof TOOLS] as Tool : undefined;
+  static get(name: string): Tool<ToolArgs, unknown, AllToolsContext>|undefined;
+  static get(name: string): Tool<ToolArgs, unknown, AllToolsContext>|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`.
+    // 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
+    // the capabilities it expects.
+    return Object.prototype.hasOwnProperty.call(TOOLS, name) ?
+        TOOLS[name as keyof typeof TOOLS] as unknown as Tool<ToolArgs, unknown, AllToolsContext>:
+        undefined;
   }
 }

package/front_end/models/bindings/DebuggerWorkspaceBinding.ts

@@ -24,7 +24,6 @@ import {
   isErrorLike,
   type SymbolizedError,
   SymbolizedErrorObject,
-  SymbolizedSyntaxError,
   UnparsableError,
 } from './SymbolizedError.js';
 
@@ -238,14 +237,6 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
       ]);
       fetchedExceptionDetails = details;
       causeRemoteObject = causeRemote;
-
-      if (remoteObject.className === 'SyntaxError' && fetchedExceptionDetails) {
-        const syntaxError = await SymbolizedSyntaxError.fromExceptionDetails(
-            remoteObject.runtimeModel().target(), this, fetchedExceptionDetails);
-        if (syntaxError) {
-          return syntaxError;
-        }
-      }
     } else if (remoteObject.type === 'string') {
       errorStack = remoteObject.description || '';
       if (!isErrorLike(errorStack)) {
@@ -271,6 +262,12 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
     }
 
     const message = StackTraceImpl.DetailedErrorStackParser.parseMessage(errorStack);
+
+    if (remoteObject.subtype === 'error' && remoteObject.className === 'SyntaxError' && fetchedExceptionDetails) {
+      return await SymbolizedErrorObject.createForSyntaxError(remoteObject.runtimeModel().target(), this, message,
+                                                              fetchedExceptionDetails, stackTrace, cause);
+    }
+
     return new SymbolizedErrorObject(message, stackTrace, cause);
   }
 

package/front_end/models/bindings/DefaultScriptMapping.ts

@@ -107,7 +107,8 @@ export class DefaultScriptMapping implements DebuggerSourceMapping {
     }
     this.#uiSourceCodeToScript.set(uiSourceCode, script);
     this.#scriptToUISourceCode.set(script, uiSourceCode);
-    this.#project.addUISourceCodeWithProvider(uiSourceCode, script, null, 'text/javascript');
+    const mimeType = script.isWasm() ? 'application/wasm' : 'text/javascript';
+    this.#project.addUISourceCodeWithProvider(uiSourceCode, script, null, mimeType);
     void this.#debuggerWorkspaceBinding.updateLocations(script);
   }
 

package/front_end/models/bindings/SymbolizedError.ts

@@ -15,7 +15,7 @@ export function isErrorLike(stack: string): boolean {
   return /\n\s*at\s/.test(stack) || stack.startsWith('SyntaxError:');
 }
 
-export type SymbolizedError = SymbolizedErrorObject|SymbolizedSyntaxError|UnparsableError;
+export type SymbolizedError = SymbolizedErrorObject|UnparsableError;
 
 export class UnparsableError extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   readonly errorStack: string;
@@ -45,6 +45,7 @@ export class SymbolizedErrorObject extends Common.ObjectWrapper.ObjectWrapper<Ev
   readonly message: string;
   readonly stackTrace: StackTrace.StackTrace.ParsedErrorStackTrace;
   readonly cause: SymbolizedError|null;
+  #syntaxErrorLocation: Workspace.UISourceCode.UILocation|null = null;
 
   constructor(message: string, stackTrace: StackTrace.StackTrace.ParsedErrorStackTrace, cause: SymbolizedError|null) {
     super();
@@ -64,53 +65,62 @@ export class SymbolizedErrorObject extends Common.ObjectWrapper.ObjectWrapper<Ev
     }
   }
 
-  #fireUpdated(): void {
-    this.dispatchEventToListeners(Events.UPDATED);
-  }
-}
-
-export class SymbolizedSyntaxError extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
-  readonly message: string;
-  #uiLocation: Workspace.UISourceCode.UILocation|null = null;
-
-  constructor(message: string) {
-    super();
-    this.message = message;
+  get syntaxErrorLocation(): Workspace.UISourceCode.UILocation|null {
+    return this.#syntaxErrorLocation;
   }
 
-  get uiLocation(): Workspace.UISourceCode.UILocation|null {
-    return this.#uiLocation;
-  }
-
-  static async fromExceptionDetails(
-      target: SDK.Target.Target, debuggerWorkspaceBinding: DebuggerWorkspaceBinding,
-      exceptionDetails: Protocol.Runtime.ExceptionDetails): Promise<SymbolizedSyntaxError|null> {
+  /**
+   * Evaluates if we should populate the `syntaxErrorLocation` based on the provided exception details.
+   *
+   * There are three primary cases for SyntaxError:
+   * 1. Programmatic `SyntaxError`: Thrown via `throw new SyntaxError('...', {cause: ...})`. Has a full stack trace,
+   *    and an optional cause. The exception details point to the `throw` statement, which is identical to the top frame.
+   *    We do NOT want to populate `syntaxErrorLocation` here to avoid redundant location rendering in the UI.
+   * 2. Script parse failure: Failed to parse a script. Has no stack trace but possesses a compile-time location.
+   *    We DO want to populate `syntaxErrorLocation` to highlight where the parse failed.
+   * 3. `eval` parse failure: Failed to parse an eval string. Has a stack trace pointing to the `eval` call site
+   *    and a compile-time location of the parse failure within the string. The exception details location differs
+   *    from the top frame. We DO want to populate `syntaxErrorLocation` here.
+   */
+  static async createForSyntaxError(target: SDK.Target.Target, debuggerWorkspaceBinding: DebuggerWorkspaceBinding,
+                                    message: string, exceptionDetails: Protocol.Runtime.ExceptionDetails,
+                                    stackTrace: StackTrace.StackTrace.ParsedErrorStackTrace,
+                                    cause: SymbolizedError|null): Promise<SymbolizedErrorObject> {
     const {exception, scriptId, lineNumber, columnNumber} = exceptionDetails;
     if (!exception || exception.subtype !== 'error' || exception.className !== 'SyntaxError') {
-      throw new Error('SymbolizedSyntaxError.fromExceptionDetails expects a SyntaxError');
+      throw new Error('SymbolizedErrorObject.createForSyntaxError expects a SyntaxError');
     }
+
+    const symbolizedError = new SymbolizedErrorObject(message, stackTrace, cause);
+
     if (!scriptId) {
-      return null;
+      return symbolizedError;
     }
 
-    const debuggerModel = target.model(SDK.DebuggerModel.DebuggerModel);
-    if (!debuggerModel) {
-      return null;
+    const topFrame = exceptionDetails.stackTrace?.callFrames[0];
+    const isProgrammaticThrow = topFrame && topFrame.scriptId === scriptId && topFrame.lineNumber === lineNumber &&
+        topFrame.columnNumber === columnNumber;
+
+    if (!isProgrammaticThrow) {
+      const debuggerModel = target.model(SDK.DebuggerModel.DebuggerModel);
+      if (debuggerModel) {
+        const rawLocation = debuggerModel.createRawLocationByScriptId(scriptId, lineNumber, columnNumber);
+        // We don't implement dispose here. We won't create many of these so a couple
+        // LiveLocationPools and SymbolizedErrorObject instances leaking is fine.
+        await debuggerWorkspaceBinding.createLiveLocation(
+            rawLocation, symbolizedError.#updateSyntaxErrorLocation.bind(symbolizedError), new LiveLocationPool());
+      }
     }
 
-    const rawLocation = debuggerModel.createRawLocationByScriptId(scriptId, lineNumber, columnNumber);
-    const symbolizedSyntaxError = new SymbolizedSyntaxError(exception.description || '');
-
-    // We don't implement dispose here. We won't create many of these so a couple
-    // LiveLocationPools and SymbolizedSyntaxError instances leaking is fine.
-    await debuggerWorkspaceBinding.createLiveLocation(
-        rawLocation, symbolizedSyntaxError.#update.bind(symbolizedSyntaxError), new LiveLocationPool());
+    return symbolizedError;
+  }
 
-    return symbolizedSyntaxError;
+  async #updateSyntaxErrorLocation(liveLocation: LiveLocation): Promise<void> {
+    this.#syntaxErrorLocation = await liveLocation.uiLocation();
+    this.dispatchEventToListeners(Events.UPDATED);
   }
 
-  async #update(liveLocation: LiveLocation): Promise<void> {
-    this.#uiLocation = await liveLocation.uiLocation();
+  #fireUpdated(): void {
     this.dispatchEventToListeners(Events.UPDATED);
   }
 }

package/front_end/models/extensions/ExtensionAPI.ts

@@ -1067,6 +1067,46 @@ self.injectedExtensionAPI = function(
     return typeof lastArgument === 'function' ? lastArgument as (...args: unknown[]) => unknown : undefined;
   }
 
+  /**
+   * Helper to support both callback and Promise-based APIs.
+   *
+   * @param args The arguments object of the calling function.
+   * @returns An object containing either the `callback` function, or the
+   *    `promise` and its `resolve`/`reject` functions.
+   */
+  function callbackOrPromise<ResolveT, CallbackArgsT extends unknown[] = [ResolveT]>(args: IArguments): {
+    callback?: (...args: CallbackArgsT) => void,
+    promise?: Promise<ResolveT>,
+    resolve?: (value: ResolveT) => void,
+    reject?: (error: unknown) => void,
+  } {
+    const callback = extractCallbackArgument(args);
+    if (callback) {
+      return {callback: callback as (...args: CallbackArgsT) => void};
+    }
+    const {promise, resolve, reject} = Promise.withResolvers<ResolveT>();
+    return {promise, resolve, reject};
+  }
+
+  /**
+   * Checks if the `response` from the ExtensionServer indicates an error. If an
+   * error occurred and a `Promise` `reject` function is provided, this function
+   * will reject the promise with a generic 'DevTools API encountered an error' Error.
+   *
+   * @param response The response object from the ExtensionServer.
+   * @param reject The promise reject function, if applicable.
+   * @returns `true` if an error occurred and the promise was rejected, `false`
+   *    otherwise.
+   */
+  function checkErrorAndReject(response: unknown, reject?: (error: Error) => void): boolean {
+    const res = response as {isError?: boolean, description?: string, details?: unknown[]};
+    if (res.isError && reject) {
+      reject(new Error('DevTools API encountered an error'));
+      return true;
+    }
+    return false;
+  }
+
   const LanguageServicesAPI = declareInterfaceClass(LanguageServicesAPIImpl);
   const RecorderServicesAPI = declareInterfaceClass(RecorderServicesAPIImpl);
   const Performance = declareInterfaceClass(PerformanceImpl);
@@ -1247,43 +1287,68 @@ self.injectedExtensionAPI = function(
       extensionServer.sendRequest({command: PrivateAPI.Commands.Reload, options});
     },
 
-    eval: function(
-              expression: string,
-              evaluateOptions: {scriptExecutionContext?: string, frameURL?: string, useContentScriptContext?: boolean}):
-              Object |
-        null {
-          const callback = extractCallbackArgument(arguments);
+    eval: function<E = unknown>(this: PublicAPI.Chrome.DevTools.InspectedWindow, expression: string,
+                                optionsOrCallback?: unknown,
+                                _callback?: (result: unknown, exceptionInfo: object) => void): Promise<E>|
+        void {
+          const options = (typeof optionsOrCallback === 'object' && optionsOrCallback !== null) ?
+              optionsOrCallback as PrivateAPI.EvaluateOptions :
+              undefined;
+
+          const {callback: callbackArg, promise, resolve, reject} = callbackOrPromise<E, [unknown, object?]>(arguments);
+
           function callbackWrapper(result: unknown): void {
-            const {isError, isException, value} = result as {
-              value: unknown,
+            if (checkErrorAndReject(result, reject)) {
+              return;
+            }
+
+            const res = result as {
+              value?: unknown,
               isError?: boolean,
               isException?: boolean,
             };
-            if (isError || isException) {
-              callback?.(undefined, result);
+
+            if (res.isException) {
+              reject?.(res);
+            } else {
+              resolve?.(res.value as E);
+            }
+
+            if (res.isError || res.isException) {
+              callbackArg?.(undefined, res);
             } else {
-              callback?.(value);
+              callbackArg?.(res.value);
             }
           }
           extensionServer.sendRequest(
-              {
-                command: PrivateAPI.Commands.EvaluateOnInspectedPage,
-                expression,
-                evaluateOptions: (typeof evaluateOptions === 'object' ? evaluateOptions : undefined),
-              },
-              callback && callbackWrapper);
-          return null;
-        },
+              {command: PrivateAPI.Commands.EvaluateOnInspectedPage, expression, evaluateOptions: options},
+              callbackWrapper);
 
-    getResources: function(callback?: (resources: PublicAPI.Chrome.DevTools.Resource[]) => unknown): void {
-      function wrapResource(resourceData: APIImpl.ResourceData): APIImpl.Resource {
-        return new (Constructor(Resource))(resourceData);
-      }
-      function callbackWrapper(resources: unknown): void {
-        callback?.((resources as APIImpl.ResourceData[]).map(wrapResource));
-      }
-      extensionServer.sendRequest({command: PrivateAPI.Commands.GetPageResources}, callback && callbackWrapper);
-    },
+          return promise;
+        } as PublicAPI.Chrome.DevTools.InspectedWindow['eval'],
+
+    getResources: function(this: PublicAPI.Chrome.DevTools.InspectedWindow,
+                           _callback?: (resources: PublicAPI.Chrome.DevTools.Resource[]) => void):
+                      Promise<PublicAPI.Chrome.DevTools.Resource[]>|
+        void {
+          const {callback: callbackArg, promise, resolve, reject} =
+              callbackOrPromise<PublicAPI.Chrome.DevTools.Resource[]>(arguments);
+
+          function callbackWrapper(response: unknown): void {
+            if (checkErrorAndReject(response, reject)) {
+              return;
+            }
+
+            const wrappedResources =
+                ((response || []) as APIImpl.ResourceData[]).map(r => new (Constructor(Resource))(r));
+            resolve?.(wrappedResources);
+            callbackArg?.(wrappedResources);
+          }
+
+          extensionServer.sendRequest({command: PrivateAPI.Commands.GetPageResources}, callbackWrapper);
+
+          return promise;
+        } as PublicAPI.Chrome.DevTools.InspectedWindow['getResources'],
   };
 
   function ResourceImpl(this: APIImpl.Resource, resourceData: APIImpl.ResourceData): void {
@@ -1292,9 +1357,9 @@ self.injectedExtensionAPI = function(
     this._buildId = resourceData.buildId;
   }
 
-  (ResourceImpl.prototype as Pick<
-       APIImpl.Resource,
-       'url'|'type'|'buildId'|'getContent'|'setContent'|'setFunctionRangesForScript'|'attachSourceMapURL'>) = {
+  (ResourceImpl.prototype as
+   Pick<APIImpl.Resource,
+        'url'|'type'|'buildId'|'getContent'|'setContent'|'setFunctionRangesForScript'|'attachSourceMapURL'>) = {
     get url(): string {
       return (this as APIImpl.Resource)._url;
     },
@@ -1307,25 +1372,51 @@ self.injectedExtensionAPI = function(
       return (this as APIImpl.Resource)._buildId;
     },
 
-    getContent: function(this: APIImpl.Resource, callback?: (content: string, encoding: string) => unknown): void {
-      function callbackWrapper(response: unknown): void {
-        const {content, encoding} = response as {content: string, encoding: string};
-        callback?.(content, encoding);
-      }
+    getContent: function(this: APIImpl.Resource, _callback?: (content: string, encoding: string) => void): Promise<{
+                  content: string, encoding: string,
+                }>|
+        void {
+          const {callback: callbackArg, promise, resolve, reject} =
+              callbackOrPromise<{content: string, encoding: string}, [string, string]>(arguments);
 
-      extensionServer.sendRequest(
-          {command: PrivateAPI.Commands.GetResourceContent, url: this._url}, callback && callbackWrapper);
-    },
+          function callbackWrapper(response: unknown): void {
+            if (checkErrorAndReject(response, reject)) {
+              return;
+            }
 
-    setContent: function(
-        this: APIImpl.Resource, content: string, commit: boolean, callback: (error?: Object) => unknown): void {
-      extensionServer.sendRequest(
-          {command: PrivateAPI.Commands.SetResourceContent, url: this._url, content, commit},
-          callback as (response: unknown) => unknown);
-    },
+            const {content, encoding} = response as {content: string, encoding: string};
+            resolve?.({content, encoding});
+            callbackArg?.(content, encoding);
+          }
+
+          extensionServer.sendRequest({command: PrivateAPI.Commands.GetResourceContent, url: this._url},
+                                      callbackWrapper);
+
+          return promise;
+        } as PublicAPI.Chrome.DevTools.Resource['getContent'],
+
+    setContent: function(this: APIImpl.Resource, content: string, commit: boolean,
+                         _callback?: (status?: object) => void): Promise<void>|
+        void {
+          const {callback: callbackArg, promise, resolve, reject} = callbackOrPromise<void, [object]>(arguments);
+
+          function callbackWrapper(response: unknown): void {
+            if (checkErrorAndReject(response, reject)) {
+              return;
+            }
+
+            resolve?.();
+            callbackArg?.(response as object);
+          }
+
+          extensionServer.sendRequest(
+              {command: PrivateAPI.Commands.SetResourceContent, url: this._url, content, commit}, callbackWrapper);
+
+          return promise;
+        } as PublicAPI.Chrome.DevTools.Resource['setContent'],
 
-    setFunctionRangesForScript: function(
-        this: APIImpl.Resource, ranges: PublicAPI.Chrome.DevTools.NamedFunctionRange[]): Promise<void> {
+    setFunctionRangesForScript: function(this: APIImpl.Resource,
+                                         ranges: PublicAPI.Chrome.DevTools.NamedFunctionRange[]): Promise<void> {
       return new Promise(
           (resolve, reject) => extensionServer.sendRequest(
               {

package/front_end/models/har/Importer.ts

@@ -40,6 +40,7 @@ export class Importer {
       }
       const request = SDK.NetworkRequest.NetworkRequest.createWithoutBackendRequest(
           'har-' + requests.length, entry.request.url, documentURL, initiator);
+      request.setIsImportedHar(true);
       const page = pageref ? pages.get(pageref) : undefined;
       if (!pageLoad && pageref && page) {
         pageLoad = Importer.buildPageLoad(page, request);

package/front_end/models/heap_snapshot/HeapSnapshotModel.ts

@@ -136,10 +136,16 @@ export class Diff {
   removedCount = 0;
   addedSize = 0;
   removedSize = 0;
-  deletedIndexes: number[] = [];
-  addedIndexes: number[] = [];
   countDelta!: number;
   sizeDelta!: number;
+  // Data about added nodes
+  addedIndexes: number[] = [];
+  addedIds: number[] = [];
+  addedSelfSizes: number[] = [];
+  // Data about deleted nodes
+  deletedIndexes: number[] = [];
+  deletedIds: number[] = [];
+  deletedSelfSizes: number[] = [];
   constructor(name: string) {
     this.name = name;
   }
@@ -287,3 +293,13 @@ export interface RetainingPaths {
     siblings?: boolean,
   };
 }
+
+export interface DominatorNode {
+  nodeId: number;
+  nodeIndex: number;
+  nodeName: string;
+  retainedSize: number;
+  selfSize: number;
+}
+
+export type DominatorChain = DominatorNode[];

package/front_end/models/heap_snapshot/HeapSnapshotProxy.ts

@@ -370,6 +370,10 @@ export class HeapSnapshotProxy extends HeapSnapshotProxyObject {
     return this.callMethodPromise('getRetainingPaths', nodeIndex, maxDepth, maxNodes, maxSiblings);
   }
 
+  getDominatorsOf(nodeIndex: number): Promise<HeapSnapshotModel.DominatorChain> {
+    return this.callMethodPromise('getDominatorsOf', nodeIndex);
+  }
+
   unignoreNodeInRetainersView(nodeIndex: number): Promise<void> {
     return this.callMethodPromise('unignoreNodeInRetainersView', nodeIndex);
   }