chrome-devtools-frontend 1.0.1605390 → 1.0.1606789

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,10 +154,13 @@ 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 function registerWidgetConfig<WidgetT extends Widget>(
-    element: WidgetElement<WidgetT>, config: WidgetConfig<WidgetT>): void {
+    element: HTMLElement, config: WidgetConfig<WidgetT>): void {
+  if (!widgetConfigs.has(element)) {
+    setUpLifecycleTracking(element);
+  }
   widgetConfigs.set(element, config);
 }
 
@@ -169,10 +172,10 @@ function instantiateWidget<WidgetT extends Widget>(element: HTMLElement, widgetC
   let newWidget: WidgetT;
   if (Widget.isPrototypeOf(widgetConfig.widgetClass)) {
     const ctor = widgetConfig.widgetClass as WidgetConstructor<WidgetT>;
-    newWidget = new ctor(element as WidgetElement<WidgetT>);
+    newWidget = new ctor(element);
   } else {
     const factory = widgetConfig.widgetClass as WidgetProducer<WidgetT>;
-    newWidget = factory(element as WidgetElement<WidgetT>);
+    newWidget = factory(element);
   }
 
   if (widgetConfig.widgetParams) {
@@ -182,24 +185,66 @@ function instantiateWidget<WidgetT extends Widget>(element: HTMLElement, widgetC
   return newWidget;
 }
 
+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;
     }
   }
 
@@ -224,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);
@@ -234,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();
@@ -243,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;
   }
 
@@ -273,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);
@@ -294,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);
@@ -498,11 +540,8 @@ export class Widget {
     let config = widgetConfigs.get(element as WidgetElement<Widget>);
     if (!config) {
       config = widgetConfig(element => new Widget(element));
-      if (element instanceof WidgetElement) {
-        widgetConfigs.set(element, config);
-      }
     }
-    return instantiateWidget(element, config);
+    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

@@ -3623,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',

package/package.json

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

package/front_end/core/sdk/WebMCPModel.ts

@@ -1,159 +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',
-  TOOL_INVOKED = 'ToolInvoked',
-  TOOL_RESPONDED = 'ToolResponded',
-}
-
-export interface Call {
-  invocationId: string;
-  input: string;
-  tool: Protocol.WebMCP.Tool;
-  result?: {
-    status: Protocol.WebMCP.InvocationStatus,
-    output?: unknown,
-    errorText?: string,
-    exception?: Protocol.Runtime.RemoteObject,
-  };
-}
-
-export interface EventTypes {
-  [Events.TOOLS_ADDED]: ReadonlyArray<Readonly<Protocol.WebMCP.Tool>>;
-  [Events.TOOLS_REMOVED]: ReadonlyArray<Readonly<Protocol.WebMCP.Tool>>;
-  [Events.TOOL_INVOKED]: Call;
-  [Events.TOOL_RESPONDED]: Call;
-}
-
-export class WebMCPModel extends SDKModel<EventTypes> {
-  readonly #tools = new Map<Protocol.Page.FrameId, Map<string, Protocol.WebMCP.Tool>>();
-  readonly #calls = new Map<string, Call>();
-  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());
-  }
-
-  get toolCalls(): Call[] {
-    return [...this.#calls.values()];
-  }
-
-  clearCalls(): void {
-    this.#calls.clear();
-  }
-
-  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);
-  }
-
-  toolInvoked(params: Protocol.WebMCP.ToolInvokedEvent): void {
-    const tool = this.#tools.get(params.frameId)?.get(params.toolName);
-    if (!tool) {
-      return;
-    }
-    const call: Call = {
-      invocationId: params.invocationId,
-      input: params.input,
-      tool,
-    };
-    this.#calls.set(params.invocationId, call);
-    this.dispatchEventToListeners(Events.TOOL_INVOKED, call);
-  }
-
-  toolResponded(params: Protocol.WebMCP.ToolRespondedEvent): void {
-    const call = this.#calls.get(params.invocationId);
-    if (!call) {
-      return;
-    }
-    call.result = {
-      status: params.status,
-      output: params.output,
-      errorText: params.errorText,
-      exception: params.exception,
-    };
-    this.dispatchEventToListeners(Events.TOOL_RESPONDED, call);
-  }
-}
-
-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(params: Protocol.WebMCP.ToolInvokedEvent): void {
-    this.#model.toolInvoked(params);
-  }
-
-  toolResponded(params: Protocol.WebMCP.ToolRespondedEvent): void {
-    this.#model.toolResponded(params);
-  }
-}
-
-SDKModel.register(WebMCPModel, {capabilities: Capability.WEB_MCP, autostart: true});