chrome-devtools-frontend 1.0.1605219 → 1.0.1606789

package/front_end/ui/legacy/SplitWidget.ts

@@ -13,7 +13,7 @@ import * as ARIAUtils from './ARIAUtils.js';
 import {Events as ResizerWidgetEvents, type ResizeUpdatePositionEvent, SimpleResizerWidget} from './ResizerWidget.js';
 import splitWidgetStyles from './splitWidget.css.js';
 import {ToolbarButton} from './Toolbar.js';
-import {Widget, WidgetElement} from './Widget.js';
+import {registerWidgetConfig, Widget, widgetConfig, WidgetElement} from './Widget.js';
 import {Events as ZoomManagerEvents, ZoomManager} from './ZoomManager.js';
 
 export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typeof Widget>(Widget) {
@@ -882,32 +882,38 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
 export class SplitWidgetElement extends WidgetElement<SplitWidget> {
   static readonly observedAttributes = ['direction', 'sidebar-position', 'sidebar-initial-size', 'sidebar-visibility'];
 
-  override createWidget(): SplitWidget {
-    const vertical = this.getAttribute('direction') === 'column';
-    const autoAdjustOrientation = this.getAttribute('direction') === 'auto';
-    const secondIsSidebar = this.getAttribute('sidebar-position') === 'second';
-    const settingName = this.getAttribute('name') ?? undefined;
-    const sidebarSize = parseInt(this.getAttribute('sidebar-initial-size') || '', 10);
-    const defaultSidebarWidth = !isNaN(sidebarSize) ? sidebarSize : undefined;
-    const defaultSidebarHeight = !isNaN(sidebarSize) ? sidebarSize : undefined;
-    const widget = new SplitWidget(
-        vertical, secondIsSidebar, settingName, defaultSidebarWidth, defaultSidebarHeight,
-        /* constraintsInDip=*/ false, this);
-    if (this.getAttribute('sidebar-initial-size') === 'minimized') {
-      widget.setSidebarMinimized(true);
-    }
-    if (autoAdjustOrientation) {
-      widget.setAutoAdjustOrientation(true);
-    }
-    const sidebarHidden = this.getAttribute('sidebar-visibility') === 'hidden';
-    if (sidebarHidden) {
-      widget.hideSidebar();
-    }
-    widget.addEventListener(Events.SHOW_MODE_CHANGED, () => {
-      this.dispatchEvent(new CustomEvent('change', {detail: widget.showMode()}));
-    });
-
-    return widget;
+  constructor() {
+    super();
+
+    registerWidgetConfig(this, widgetConfig(element => {
+                           const vertical = element.getAttribute('direction') === 'column';
+                           const autoAdjustOrientation = element.getAttribute('direction') === 'auto';
+                           const secondIsSidebar = element.getAttribute('sidebar-position') === 'second';
+                           const settingName = element.getAttribute('name') ?? undefined;
+                           const sidebarSize = parseInt(element.getAttribute('sidebar-initial-size') || '', 10);
+                           const defaultSidebarWidth = !isNaN(sidebarSize) ? sidebarSize : undefined;
+                           const defaultSidebarHeight = !isNaN(sidebarSize) ? sidebarSize : undefined;
+
+                           const widget = new SplitWidget(
+                               vertical, secondIsSidebar, settingName, defaultSidebarWidth, defaultSidebarHeight,
+                               /* constraintsInDip=*/ false, element as SplitWidgetElement);
+
+                           if (element.getAttribute('sidebar-initial-size') === 'minimized') {
+                             widget.setSidebarMinimized(true);
+                           }
+                           if (autoAdjustOrientation) {
+                             widget.setAutoAdjustOrientation(true);
+                           }
+                           const sidebarHidden = element.getAttribute('sidebar-visibility') === 'hidden';
+                           if (sidebarHidden) {
+                             widget.hideSidebar();
+                           }
+                           widget.addEventListener(Events.SHOW_MODE_CHANGED, () => {
+                             element.dispatchEvent(new CustomEvent('change', {detail: widget.showMode()}));
+                           });
+
+                           return widget;
+                         }));
   }
 
   attributeChangedCallback(name: string, _oldValue: string, newValue: string): void {

package/front_end/ui/legacy/TabbedPane.ts

@@ -4,8 +4,6 @@
 
 /* eslint-disable @devtools/no-imperative-dom-api, @devtools/no-lit-render-outside-of-view */
 
-import './Toolbar.js';
-
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
@@ -22,7 +20,7 @@ import tabbedPaneStyles from './tabbedPane.css.js';
 import type {Toolbar} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
 import {installDragHandle} from './UIUtils.js';
-import {VBox, type Widget} from './Widget.js';
+import {registerWidgetConfig, VBox, Widget, widgetConfig, WidgetElement} from './Widget.js';
 import {Events as ZoomManagerEvents, ZoomManager} from './ZoomManager.js';
 
 const UIStrings = {
@@ -123,7 +121,26 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.contentElement.tabIndex = -1;
     this.setDefaultFocusedElement(this.contentElement);
     this.#headerElement = this.contentElement.createChild('div', 'tabbed-pane-header');
+    const leftSlot = document.createElement('slot');
+    leftSlot.name = 'left';
+    leftSlot.classList.add('tabbed-pane-left-toolbar');
+    this.#headerElement.appendChild(leftSlot);
+    leftSlot.addEventListener('slotchange', () => {
+      this.#leftToolbar = leftSlot.assignedElements()[0] as Toolbar | undefined;
+      this.requestUpdate();
+    });
+
     this.headerContentsElement = this.#headerElement.createChild('div', 'tabbed-pane-header-contents');
+
+    const rightSlot = document.createElement('slot');
+    rightSlot.name = 'right';
+    rightSlot.classList.add('tabbed-pane-right-toolbar');
+    this.#headerElement.appendChild(rightSlot);
+    rightSlot.addEventListener('slotchange', () => {
+      this.#rightToolbar = rightSlot.assignedElements()[0] as Toolbar | undefined;
+      this.requestUpdate();
+    });
+
     this.tabSlider = document.createElement('div');
     this.tabSlider.classList.add('tabbed-pane-tab-slider');
     this.tabsElement = this.headerContentsElement.createChild('div', 'tabbed-pane-header-tabs');
@@ -547,6 +564,9 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
       if (existingTab) {
         this.changeTabView(tab.id, tab.view);
         this.changeTabTitle(tab.id, tab.title, tab.tabTooltip);
+        if (tab.jslogContext !== undefined) {
+          existingTab.jslogContext = tab.jslogContext;
+        }
         if (tab.isCloseable !== undefined) {
           existingTab.closeable = tab.isCloseable;
         }
@@ -1031,6 +1051,10 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   leftToolbar(): Toolbar {
+    if (!this.#leftToolbar) {
+      const leftSlot = this.#headerElement.querySelector('slot[name="left"]') as HTMLSlotElement | null;
+      this.#leftToolbar = leftSlot?.assignedElements()[0] as Toolbar | undefined;
+    }
     if (!this.#leftToolbar) {
       this.#leftToolbar = document.createElement('devtools-toolbar');
       this.#leftToolbar.classList.add('tabbed-pane-left-toolbar');
@@ -1040,6 +1064,10 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   rightToolbar(): Toolbar {
+    if (!this.#rightToolbar) {
+      const rightSlot = this.#headerElement.querySelector('slot[name="right"]') as HTMLSlotElement | null;
+      this.#rightToolbar = rightSlot?.assignedElements()[0] as Toolbar | undefined;
+    }
     if (!this.#rightToolbar) {
       this.#rightToolbar = document.createElement('devtools-toolbar');
       this.#rightToolbar.classList.add('tabbed-pane-right-toolbar');
@@ -1191,6 +1219,10 @@ export class TabbedPaneTab {
     return this.#jslogContext ?? (this.#id === 'console-view' ? 'console' : this.#id);
   }
 
+  set jslogContext(jslogContext: string|undefined) {
+    this.#jslogContext = jslogContext;
+  }
+
   get tabAnnotationIcon(): boolean {
     return this.#tabAnnotationIcon;
   }
@@ -1614,3 +1646,91 @@ export interface TabbedPaneTabDelegate {
   closeTabs(tabbedPane: TabbedPane, ids: string[]): void;
   onContextMenu(tabId: string, contextMenu: ContextMenu): void;
 }
+
+export class TabbedPaneElement extends WidgetElement<TabbedPane> {
+  readonly #tabObserver = new MutationObserver(() => this.#updateTabs());
+
+  constructor() {
+    super();
+
+    registerWidgetConfig(this, widgetConfig(element => {
+                           const widget = new TabbedPane(element as TabbedPaneElement);
+                           const slot = widget.contentElement.querySelector('slot:not([name])');
+                           if (slot) {
+                             slot.addEventListener('slotchange', () => this.#syncTabs());
+                           }
+                           widget.addEventListener(Events.TabSelected, () => {
+                             const slot =
+                                 widget.contentElement.querySelector('slot:not([name])') as HTMLSlotElement | null;
+                             const nodes = slot ? slot.assignedElements() : [];
+                             for (const child of nodes) {
+                               if (child.id === widget.selectedTabId) {
+                                 child.setAttribute('selected', '');
+                               } else {
+                                 child.removeAttribute('selected');
+                               }
+                             }
+                           });
+                           this.#syncTabs(widget);
+                           return widget;
+                         }));
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.#tabObserver.disconnect();
+  }
+
+  #syncTabs(widget = this.getWidget()): void {
+    if (!widget) {
+      return;
+    }
+    this.#updateObserver(widget);
+    this.#updateTabs(widget);
+  }
+
+  #updateObserver(widget: TabbedPane): void {
+    this.#tabObserver.disconnect();
+    const slot = widget.contentElement.querySelector('slot:not([name])') as HTMLSlotElement | null;
+    const nodes = slot ? slot.assignedElements() : [];
+    for (const child of nodes) {
+      this.#tabObserver.observe(
+          child, {attributes: true, attributeFilter: ['title', 'jslogcontext', 'selected', 'disabled']});
+    }
+  }
+
+  #updateTabs(widget = this.getWidget()): void {
+    if (!widget) {
+      return;
+    }
+    const tabs: TabInfo[] = [];
+    const slot = widget.contentElement.querySelector('slot:not([name])') as HTMLSlotElement | null;
+    const nodes = slot ? slot.assignedElements() : [];
+    for (const child of nodes) {
+      const id = child.id;
+      const title = child.getAttribute('title') || '';
+      const jslogContext = child.getAttribute('jslogcontext') || undefined;
+      const selected = child.hasAttribute('selected');
+      const enabled = !child.hasAttribute('disabled');
+      const view = Widget.getOrCreateWidget(child as HTMLElement);
+      view.setHideOnDetach();
+      if (widget.selectedTabId !== id) {
+        view.hideWidget();
+      } else {
+        view.showWidget();
+      }
+      tabs.push({
+        id,
+        title,
+        view,
+        jslogContext,
+        selected,
+        enabled,
+      });
+    }
+
+    widget.tabs = tabs;
+  }
+}
+
+customElements.define('devtools-tabbed-pane', TabbedPaneElement);

package/front_end/ui/legacy/Widget.ts

@@ -53,8 +53,8 @@ function assert(condition: unknown, message: string): void {
   }
 }
 
-type WidgetConstructor<WidgetT extends Widget> = new (element: WidgetElement<WidgetT>) => WidgetT;
-type WidgetProducer<WidgetT extends Widget> = (element: WidgetElement<WidgetT>) => WidgetT;
+type WidgetConstructor<WidgetT extends Widget> = new (element: HTMLElement) => WidgetT;
+type WidgetProducer<WidgetT extends Widget> = (element: HTMLElement) => WidgetT;
 type WidgetFactory<WidgetT extends Widget> = WidgetConstructor<WidgetT>|WidgetProducer<WidgetT>;
 type InferWidgetTFromFactory<F> = F extends WidgetFactory<infer WidgetT>? WidgetT : never;
 
@@ -154,64 +154,113 @@ function runNextUpdate(): void {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const widgetConfigs = new WeakMap<WidgetElement<any>, WidgetConfig<any>>();
+const widgetConfigs = new WeakMap<HTMLElement, WidgetConfig<any>>();
 
-export class WidgetElement<WidgetT extends Widget> extends HTMLElement {
-  createWidget(): WidgetT {
-    const config = widgetConfigs.get(this) as WidgetConfig<WidgetT>;
-    const widget = this.#instantiateWidget(config.widgetClass);
-    if (config.widgetParams) {
-      Object.assign(widget, config.widgetParams);
-    }
-    widget.requestUpdate();
-    return widget;
+export function registerWidgetConfig<WidgetT extends Widget>(
+    element: HTMLElement, config: WidgetConfig<WidgetT>): void {
+  if (!widgetConfigs.has(element)) {
+    setUpLifecycleTracking(element);
   }
+  widgetConfigs.set(element, config);
+}
 
-  #instantiateWidget(widgetClass: WidgetFactory<WidgetT>): WidgetT {
-    if (!widgetClass) {
-      throw new Error('No widgetClass defined');
-    }
+function instantiateWidget<WidgetT extends Widget>(element: HTMLElement, widgetConfig: WidgetConfig<WidgetT>): WidgetT {
+  if (!widgetConfig.widgetClass) {
+    throw new Error('No widgetClass defined');
+  }
 
-    if (Widget.isPrototypeOf(widgetClass)) {
-      const ctor = widgetClass as WidgetConstructor<WidgetT>;
-      return new ctor(this);
-    }
+  let newWidget: WidgetT;
+  if (Widget.isPrototypeOf(widgetConfig.widgetClass)) {
+    const ctor = widgetConfig.widgetClass as WidgetConstructor<WidgetT>;
+    newWidget = new ctor(element);
+  } else {
+    const factory = widgetConfig.widgetClass as WidgetProducer<WidgetT>;
+    newWidget = factory(element);
+  }
+
+  if (widgetConfig.widgetParams) {
+    Object.assign(newWidget, widgetConfig.widgetParams);
+  }
+  newWidget.requestUpdate();
+  return newWidget;
+}
 
-    const factory = widgetClass as WidgetProducer<WidgetT>;
-    return factory(this);
+function setUpLifecycleTracking<WidgetT extends Widget>(element: HTMLElement): void {
+  let tracker: WidgetElement<WidgetT>;
+  if (element instanceof WidgetElement) {
+    tracker = element as WidgetElement<WidgetT>;
+  } else {
+    tracker = document.createElement('devtools-widget') as WidgetElement<WidgetT>;
+    tracker.style.display = 'none';
+    element.appendChild(tracker);
   }
 
+  tracker.onDisconnect = () => {
+    const widget = Widget.get(element);
+    if (widget) {
+      widget.setHideOnDetach();
+      widget.detach();
+    }
+  };
+  tracker.onConnect = () => {
+    let widget = Widget.get(element) as WidgetT;
+    if (!widget) {
+      const config = widgetConfigs.get(element);
+      if (!config) {
+        throw new Error('No widgetConfig defined');
+      }
+      widget = instantiateWidget(element, config);
+    }
+    const parent = element.parentElementOrShadowHost() as HTMLElement | null;
+    if (!parent) {
+      widget.markAsRoot();
+    }
+    widget.show(parent as HTMLElement, undefined, /* suppressOrphanWidgetError= */ true);
+  };
+}
+
+export class WidgetElement<WidgetT extends Widget> extends HTMLElement {
+  onDisconnect?: () => void;
+  onConnect?: () => void;
+  #disconnectTimeout?: ReturnType<typeof setTimeout>;
+
   getWidget(): WidgetT|undefined {
     return Widget.get(this) as WidgetT | undefined;
   }
 
   connectedCallback(): void {
-    const widget = Widget.getOrCreateWidget(this);
-    if (!widget.element.parentElement) {
-      widget.markAsRoot();
+    if (this.#disconnectTimeout) {
+      clearTimeout(this.#disconnectTimeout);
+      this.#disconnectTimeout = undefined;
+    }
+    if (this.onConnect) {
+      this.onConnect();
+      return;
     }
-    widget.show(this.parentElement as HTMLElement, undefined, /* suppressOrphanWidgetError= */ true);
   }
 
   disconnectedCallback(): void {
-    const widget = Widget.get(this);
-    if (widget) {
-      widget.setHideOnDetach();
-      widget.detach();
+    if (this.onDisconnect) {
+      this.#disconnectTimeout = setTimeout(() => {
+        this.onDisconnect?.();
+      }, 0);
+      return;
     }
   }
 
   override appendChild<T extends Node>(child: T): T {
-    if (child instanceof HTMLElement && child.tagName !== 'STYLE') {
-      Widget.getOrCreateWidget(child).show(this);
+    const widget = child instanceof HTMLElement ? Widget.get(child) : null;
+    if (widget) {
+      widget.show(this, undefined, /* suppressOrphanWidgetError= */ true);
       return child;
     }
     return super.appendChild(child);
   }
 
   override insertBefore<T extends Node>(child: T, referenceChild: Node): T {
-    if (child instanceof HTMLElement && child.tagName !== 'STYLE') {
-      Widget.getOrCreateWidget(child).show(this, referenceChild, true);
+    const widget = child instanceof HTMLElement ? Widget.get(child) : null;
+    if (widget) {
+      widget.show(this, referenceChild, /* suppressOrphanWidgetError= */ true);
       return child;
     }
     return super.insertBefore(child, referenceChild);
@@ -220,7 +269,7 @@ export class WidgetElement<WidgetT extends Widget> extends HTMLElement {
   override removeChild<T extends Node>(child: T): T {
     const childWidget = Widget.get(child);
     if (childWidget) {
-      childWidget.detach();
+      childWidget.detach(/* overrideHideOnDetach= */ true);
       return child;
     }
     return super.removeChild(child);
@@ -230,7 +279,7 @@ export class WidgetElement<WidgetT extends Widget> extends HTMLElement {
     for (const child of this.children) {
       const childWidget = Widget.get(child);
       if (childWidget) {
-        childWidget.detach();
+        childWidget.detach(/* overrideHideOnDetach= */ true);
       }
     }
     super.removeChildren();
@@ -239,10 +288,9 @@ export class WidgetElement<WidgetT extends Widget> extends HTMLElement {
   override cloneNode(deep: boolean): Node {
     const clone = cloneCustomElement(this, deep) as WidgetElement<WidgetT>;
     const config = widgetConfigs.get(this);
-    if (!config?.widgetClass) {
-      throw new Error('No widgetClass defined');
+    if (config) {
+      registerWidgetConfig(clone, config);
     }
-    widgetConfigs.set(clone, config);
     return clone;
   }
 
@@ -269,10 +317,8 @@ export class WidgetDirective extends Lit.Directive.Directive {
 
   override update(part: Lit.Directive.Part, [widgetClass, widgetParams]: Parameters<this['render']>): unknown {
     if (this.#partType === Lit.Directive.PartType.ELEMENT) {
-      const element = (part as Lit.Directive.ElementPart).element;
-      if (!(element instanceof WidgetElement)) {
-        throw new Error('Widget directive must be used on a devtools-widget element.');
-      }
+      const element = (part as Lit.Directive.ElementPart).element as HTMLElement;
+
       const config = widgetConfig(widgetClass, widgetParams);
       const oldConfig = widgetConfigs.get(element);
       const widget = Widget.get(element);
@@ -290,7 +336,7 @@ export class WidgetDirective extends Lit.Directive.Directive {
           widget.requestUpdate();
         }
       }
-      widgetConfigs.set(element, config);
+      registerWidgetConfig(element, config);
       return Lit.nothing;
     }
     return this.render(widgetClass, widgetParams);
@@ -329,7 +375,7 @@ export function widgetRef<T extends Widget, Args extends unknown[]>(
     if (!(widget instanceof type)) {
       throw new Error(`Expected an element with a widget of type ${type.name} but got ${e?.constructor?.name}`);
     }
-    callback(widget);
+    callback(widget as T);
   });
 }
 
@@ -491,10 +537,11 @@ export class Widget {
     if (widget) {
       return widget;
     }
-    if (element instanceof WidgetElement) {
-      return element.createWidget();
+    let config = widgetConfigs.get(element as WidgetElement<Widget>);
+    if (!config) {
+      config = widgetConfig(element => new Widget(element));
     }
-    return new Widget(element);
+    return instantiateWidget(element as WidgetElement<Widget>, config);
   }
 
   markAsRoot(): void {

package/front_end/ui/legacy/components/source_frame/JSONView.ts

@@ -300,7 +300,7 @@ export class SearchableJsonView extends UI.SearchableView.SearchableView {
     jsonView.element.tabIndex = 0;
   }
 
-  set jsonObject(obj: Object) {
+  set jsonObject(obj: Object|null|undefined) {
     const jsonView = new JSONView(new ParsedJSON(obj, '', ''));
     this.#jsonView.detach();
     this.#jsonView = jsonView;

package/front_end/ui/legacy/components/utils/jsUtils.css

@@ -13,6 +13,8 @@
   --display-ignored-row: none;
   --display-toggle-link: var(--override-display-stack-preview-toggle-link, none);
 
+  user-select: text;
+
   & > tfoot > tr {
     font-style: italic;
     display: var(--display-toggle-link);

package/front_end/ui/legacy/infobar.css

@@ -125,6 +125,7 @@
 
 .infobar-info-actions {
   display: flex;
+  flex-wrap: wrap;
   gap: var(--sys-size-5);
 }
 

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -3584,6 +3584,7 @@ export const knownContextValues = new Set([
   'show-ad-highlights-true',
   'show-adorner-settings',
   'show-all',
+  'show-all-nodes',
   'show-all-properties',
   'show-as-javascript-object',
   'show-console-insight-teasers',
@@ -3622,7 +3623,6 @@ export const knownContextValues = new Set([
   'show-minimal-safe-area-for-maskable-icons',
   'show-more',
   'show-network-requests',
-  'show-option-to-expose-internals-in-heap-snapshot',
   'show-overrides',
   'show-paint-rects',
   'show-paint-rects-true',
@@ -4332,6 +4332,11 @@ export const knownContextValues = new Set([
   'webauthn.remove-credential',
   'webgl-error-fired',
   'webgl-warning-fired',
+  'webmcp.declarative',
+  'webmcp.error',
+  'webmcp.imperative',
+  'webmcp.pending',
+  'webmcp.success',
   'webp-format-disabled',
   'webp-format-disabled-true',
   'websocket',

package/package.json

@@ -105,5 +105,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1605219"
+  "version": "1.0.1606789"
 }

package/front_end/core/sdk/WebMCPModel.ts

@@ -1,104 +0,0 @@
-// Copyright 2026 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
-import type * as Protocol from '../../generated/protocol.js';
-import type * as Common from '../common/common.js';
-
-import {Events as RuntimeModelEvents, type ExecutionContext, RuntimeModel} from './RuntimeModel.js';
-import {SDKModel} from './SDKModel.js';
-import {Capability, type Target} from './Target.js';
-
-export const enum Events {
-  TOOLS_ADDED = 'ToolsAdded',
-  TOOLS_REMOVED = 'ToolsRemoved',
-}
-
-export interface EventTypes {
-  [Events.TOOLS_ADDED]: ReadonlyArray<Readonly<Protocol.WebMCP.Tool>>;
-  [Events.TOOLS_REMOVED]: ReadonlyArray<Readonly<Protocol.WebMCP.Tool>>;
-}
-
-export class WebMCPModel extends SDKModel<EventTypes> {
-  readonly #tools = new Map<Protocol.Page.FrameId, Map<string, Protocol.WebMCP.Tool>>();
-  readonly agent: ProtocolProxyApi.WebMCPApi;
-  #enabled = false;
-
-  constructor(target: Target) {
-    super(target);
-    this.agent = target.webMCPAgent();
-    target.registerWebMCPDispatcher(new WebMCPDispatcher(this));
-
-    const runtimeModel = target.model(RuntimeModel);
-    if (runtimeModel) {
-      runtimeModel.addEventListener(
-          RuntimeModelEvents.ExecutionContextDestroyed, this.#executionContextDestroyed, this);
-    }
-
-    void this.enable();
-  }
-
-  get tools(): IteratorObject<Protocol.WebMCP.Tool> {
-    return this.#tools.values().flatMap(toolMap => toolMap.values());
-  }
-
-  async enable(): Promise<void> {
-    if (this.#enabled) {
-      return;
-    }
-    await this.agent.invoke_enable();
-    this.#enabled = true;
-  }
-
-  #executionContextDestroyed(event: Common.EventTarget.EventTargetEvent<ExecutionContext>): void {
-    const executionContext = event.data;
-    if (executionContext.isDefault && executionContext.frameId) {
-      const frameTools = this.#tools.get(executionContext.frameId);
-      if (frameTools) {
-        const toolsToRemove = [...frameTools.values()];
-        this.#tools.delete(executionContext.frameId);
-        this.dispatchEventToListeners(Events.TOOLS_REMOVED, toolsToRemove);
-      }
-    }
-  }
-
-  onToolsRemoved(tools: Protocol.WebMCP.Tool[]): void {
-    const deletedTools = tools.filter(tool => this.#tools.get(tool.frameId)?.delete(tool.name));
-    this.dispatchEventToListeners(Events.TOOLS_REMOVED, deletedTools);
-  }
-
-  onToolsAdded(tools: Protocol.WebMCP.Tool[]): void {
-    for (const tool of tools) {
-      const frameTools = this.#tools.get(tool.frameId) ?? new Map();
-      if (!this.#tools.has(tool.frameId)) {
-        this.#tools.set(tool.frameId, frameTools);
-      }
-      frameTools.set(tool.name, tool);
-    }
-    this.dispatchEventToListeners(Events.TOOLS_ADDED, tools);
-  }
-}
-
-class WebMCPDispatcher implements ProtocolProxyApi.WebMCPDispatcher {
-  readonly #model: WebMCPModel;
-  constructor(model: WebMCPModel) {
-    this.#model = model;
-  }
-
-  toolsAdded(params: Protocol.WebMCP.ToolsAddedEvent): void {
-    this.#model.onToolsAdded(params.tools);
-  }
-
-  toolsRemoved(params: Protocol.WebMCP.ToolsRemovedEvent): void {
-    this.#model.onToolsRemoved(params.tools);
-  }
-
-  toolInvoked(): void {
-  }
-
-  toolResponded(): void {
-  }
-}
-
-SDKModel.register(WebMCPModel, {capabilities: Capability.WEB_MCP, autostart: true});