chrome-devtools-frontend 1.0.1606789 → 1.0.1608868

package/front_end/panels/application/WebMCPView.ts

@@ -4,22 +4,30 @@
 
 import '../../ui/components/icon_button/icon_button.js';
 import '../../ui/components/lists/lists.js';
+import '../../ui/components/node_text/node_text.js';
 import '../../ui/legacy/components/data_grid/data_grid.js';
 import '../../ui/legacy/legacy.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';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import type * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as WebMCP from '../../models/web_mcp/web_mcp.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import type * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import type * as NodeText from '../../ui/components/node_text/node_text.js';
+import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
+import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {
   Directives,
   html,
+  nothing,
   render,
+  type TemplateResult,
 } from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -47,6 +55,18 @@ const UIStrings = {
    * @description Text to display when no calls have been made
    */
   noCallsPlaceholder: 'Start interacting with your `WebMCP` agent to see real-time tool calls and executions here.',
+  /**
+   * @description Text for the header of the tool details section
+   */
+  toolDetails: 'Details',
+  /**
+   * @description Text for the link to reveal the tool's DOM node in the Elements panel
+   */
+  viewInElementsPanel: 'View in Elements panel',
+  /**
+   * @description Text for the frame of a tool
+   */
+  frame: 'Frame',
   /**
    * @description Text for the name of a tool call
    */
@@ -71,6 +91,10 @@ const UIStrings = {
    * @description Tooltip for the clear log button
    */
   clearLog: 'Clear log',
+  /**
+   * @description Text to close something
+   */
+  close: 'Close',
   /**
    * @description Placeholder for the filter input
    */
@@ -134,6 +158,7 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/WebMCPView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {widget} = UI.Widget;
 
 export interface FilterState {
   text: string;
@@ -159,6 +184,10 @@ export interface FilterMenuButtons {
 }
 export interface ViewInput {
   tools: WebMCP.WebMCPModel.Tool[];
+  selectedTool: WebMCP.WebMCPModel.Tool|null;
+  onToolSelect: (tool: WebMCP.WebMCPModel.Tool|null) => void;
+  selectedCall: WebMCP.WebMCPModel.Call|null;
+  onCallSelect: (call: WebMCP.WebMCPModel.Call|null) => void;
   filters: FilterState;
   filterButtons: FilterMenuButtons;
   onClearLogClick: () => void;
@@ -271,6 +300,24 @@ function getIconGroupsFromStats(toolStats: ReturnType<typeof calculateToolStats>
   }
   return groups;
 }
+
+export function parsePayload(payload?: unknown): {
+  valueObject: unknown,
+  valueString: string|undefined,
+} {
+  if (payload === undefined) {
+    return {valueObject: undefined, valueString: undefined};
+  }
+  if (typeof payload === 'string') {
+    try {
+      return {valueObject: JSON.parse(payload), valueString: undefined};
+    } catch {
+      return {valueObject: undefined, valueString: payload};
+    }
+  }
+  return {valueObject: payload, valueString: undefined};
+}
+
 export const DEFAULT_VIEW: View = (input, output, target) => {
   const tools = input.tools;
   const stats = calculateToolStats(input.toolCalls);
@@ -332,36 +379,77 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           </devtools-toolbar>
         </div>
         ${input.toolCalls.length > 0 ? html`
-          <devtools-data-grid striped>
-            <table>
-              <tr>
-                <th id="name" weight="20">
-                  ${i18nString(UIStrings.name)}
-                </th>
-                <th id="status" weight="20">${i18nString(UIStrings.status)}</th>
-                <th id="input" weight="30">${i18nString(UIStrings.input)}</th>
-                <th id="output" weight="30">${i18nString(UIStrings.output)}</th>
-              </tr>
-              ${Directives.repeat(input.toolCalls, call => call.invocationId + '-' + (call.result?.status ?? ''), call => html`
-                <tr class=${
-                  call.result?.status === Protocol.WebMCP.InvocationStatus.Error ? 'status-error' :
-                  call.result?.status === Protocol.WebMCP.InvocationStatus.Canceled ? 'status-cancelled' : ''
-                }>
+          <devtools-split-view name="webmcp-call-split-view"
+                               direction="column"
+                               sidebar-position="second"
+                               sidebar-visibility=${input.selectedCall ? 'show' : 'hidden'}>
+            <div slot="main" style="display: flex; flex-direction: column; overflow: hidden; height: 100%;">
+              <devtools-data-grid striped .template=${html`
+                <table>
                   <style>${webMCPViewStyles}</style>
-                  <td>${call.tool.name}</td>
-                  <td>
-                    <div class="status-cell">
-                      ${iconName(call) ? html`<devtools-icon class="small" name=${iconName(call)}></devtools-icon>`
-                                       : ''}
-                      <span>${statusString(call)}</span>
-                    </div>
-                  </td>
-                  <td>${call.input}</td>
-                  <td>${call.result?.output ? JSON.stringify(call.result.output) : call.result?.errorText ?? ''}</td>
-                </tr>
-              `)}
-              </table>
-          </devtools-data-grid>
+                  <tr>
+                    <th id="name" weight="20">
+                      ${i18nString(UIStrings.name)}
+                    </th>
+                    <th id="status" weight="20">${i18nString(UIStrings.status)}</th>
+                            ${!input.selectedCall ? html`
+                    <th id="input" weight="30">${i18nString(UIStrings.input)}</th>
+                    <th id="output" weight="30">${i18nString(UIStrings.output)}</th>
+                            ` : nothing}
+                  </tr>
+                      ${Directives.repeat(input.toolCalls, call => call.invocationId + '-' + (call.result?.status ?? ''),
+                                          call => html`
+                    <tr class=${Directives.classMap({
+                      'status-error': call.result?.status === Protocol.WebMCP.InvocationStatus.Error,
+                      'status-cancelled': call.result?.status === Protocol.WebMCP.InvocationStatus.Canceled,
+                      selected: call === input.selectedCall,
+                    })} @click=${() => input.onCallSelect(call)}>
+                      <td>${call.tool.name}</td>
+                      <td>
+                        <div class="status-cell">
+                          ${iconName(call) ? html`<devtools-icon class="small" name=${iconName(call)}></devtools-icon>`
+                                           : ''}
+                          <span>${statusString(call)}</span>
+                        </div>
+                      </td>
+                      ${!input.selectedCall ? html`
+                        <td>${call.input}</td>
+                        <td>${call.result?.output ? JSON.stringify(call.result.output)
+                                                    : call.result?.errorText ?? ''}</td>
+                        ` : nothing}
+                    </tr>
+                  `)}
+                  </table>`}>
+              </devtools-data-grid>
+            </div>
+            <div slot="sidebar" style="height: 100%; display: flex; flex-direction: column; overflow: hidden;">
+              <devtools-tabbed-pane class="call-details-tabbed-pane">
+                <devtools-button
+                  slot="left"
+                  .iconName=${'cross'}
+                  .size=${Buttons.Button.Size.SMALL}
+                  .variant=${Buttons.Button.Variant.ICON}
+                  title=${i18nString(UIStrings.close)}
+                  @click=${() => input.onCallSelect(null)}
+                ></devtools-button>
+                <devtools-widget
+                  id="details"
+                  title=${i18nString(UIStrings.toolDetails)}
+                  ${widget(ToolDetailsWidget, {tool: input.selectedCall?.tool})}>
+                </devtools-widget>
+                <devtools-widget
+                  id="inputs"
+                  title=${i18nString(UIStrings.input)}
+                  ${widget(PayloadWidget, parsePayload(input.selectedCall?.input))}>
+                </devtools-widget>
+                <devtools-widget
+                  id="outputs"
+                  title=${i18nString(UIStrings.output)}
+                  ${widget(PayloadWidget, parsePayload(input.selectedCall?.result?.output))}>
+                </devtools-widget>
+              </devtools-tabbed-pane>
+            </div>
+          </devtools-split-view>
           <div class="webmcp-toolbar-container" role="toolbar">
             <devtools-toolbar class="webmcp-toolbar" role="presentation" wrappable>
               <span class="toolbar-text">${i18nString(UIStrings.totalCalls, {PH1: stats.total})}</span>
@@ -379,30 +467,50 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                                                           text: i18nString(UIStrings.noCallsPlaceholder)})}
         `}
       </div>
-      <div slot="sidebar" class="tool-list">
-        <div class="section-title">${i18nString(UIStrings.toolRegistry)}</div>
-        ${tools.length === 0 ? html`
-        ${UI.Widget.widget(UI.EmptyWidget.EmptyWidget, {header: i18nString(UIStrings.noToolsPlaceholderTitle),
-                                                        text: i18nString(UIStrings.noToolsPlaceholder)})}
-        ` : html`
-          <devtools-list>
-            ${tools.map(tool => {
-              const toolStats = calculateToolStats(input.toolCalls.filter(c => c.tool === tool));
-              const groups = getIconGroupsFromStats(toolStats);
-              return html`
-                <div class="tool-item">
-                  <div class="tool-name-container">
-                    <div class="tool-name source-code">${tool.name}</div>
-                    ${groups.length > 0 ? html`<icon-button .data=${
-                        {groups, compact: false} as IconButton.IconButton.IconButtonData}></icon-button>` : ''}
+      <devtools-split-view slot="sidebar"
+                           direction="column"
+                           sidebar-position="second"
+                           name="webmcp-details-split-view"
+                           sidebar-visibility=${input.selectedTool ? 'show' : 'hidden'}>
+        <div slot="main" class="tool-list">
+          <div class="section-title">${i18nString(UIStrings.toolRegistry)}</div>
+          ${tools.length === 0 ? html`
+          ${UI.Widget.widget(UI.EmptyWidget.EmptyWidget, {header: i18nString(UIStrings.noToolsPlaceholderTitle),
+                                                          text: i18nString(UIStrings.noToolsPlaceholder)})}
+          ` : html`
+            <devtools-list>
+              ${tools.map(tool => {
+                const toolStats = calculateToolStats(input.toolCalls.filter(c => c.tool === tool));
+                const groups = getIconGroupsFromStats(toolStats);
+                return html`
+                    <div class=${Directives.classMap({'tool-item': true, selected: tool === input.selectedTool})}
+                         @click=${() => input.onToolSelect(tool)}>
+                    <div class="tool-name-container">
+                      <div class="tool-name source-code">${tool.name}</div>
+                      ${groups.length > 0 ? html`<icon-button .data=${
+                          {groups, compact: false} as IconButton.IconButton.IconButtonData}></icon-button>` : ''}
+                    </div>
+                    <div class="tool-description">${tool.description}</div>
                   </div>
-                  <div class="tool-description">${tool.description}</div>
-                </div>
-              `;
-            })}
-          </devtools-list>
-        `}
-      </div>
+                `;
+              })}
+            </devtools-list>
+          `}
+        </div>
+        <div slot="sidebar" class="tool-details">
+          <div class="section-title">
+            <devtools-button
+              .iconName=${'cross'}
+              .size=${Buttons.Button.Size.SMALL}
+              .variant=${Buttons.Button.Variant.ICON}
+              title=${i18nString(UIStrings.close)}
+              @click=${() => input.onToolSelect(null)}
+            ></devtools-button>
+            <span>${i18nString(UIStrings.toolDetails)}</span>
+          </div>
+          ${widget(ToolDetailsWidget, {tool: input.selectedTool})}
+        </div>
+      </devtools-split-view>
     </devtools-split-view>
   `, target);
   // clang-format on
@@ -410,6 +518,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 
 export class WebMCPView extends UI.Widget.VBox {
   readonly #view: View;
+  #selectedTool: WebMCP.WebMCPModel.Tool|null = null;
+  #selectedCall: WebMCP.WebMCPModel.Call|null = null;
 
   #filterState: FilterState = {
     text: '',
@@ -553,6 +663,16 @@ export class WebMCPView extends UI.Widget.VBox {
     const filteredCalls = filterToolCalls(toolCalls, this.#filterState);
     const input: ViewInput = {
       tools: this.#getTools(),
+      selectedTool: this.#selectedTool,
+      onToolSelect: tool => {
+        this.#selectedTool = tool;
+        this.requestUpdate();
+      },
+      selectedCall: this.#selectedCall,
+      onCallSelect: call => {
+        this.#selectedCall = call;
+        this.requestUpdate();
+      },
       toolCalls: filteredCalls,
       filters: this.#filterState,
       filterButtons: this.#filterButtons,
@@ -562,3 +682,220 @@ export class WebMCPView extends UI.Widget.VBox {
     this.#view(input, {}, this.contentElement);
   }
 }
+export interface PayloadViewInput {
+  valueObject?: unknown;
+  valueString?: string;
+}
+
+export const PAYLOAD_DEFAULT_VIEW = (input: PayloadViewInput, output: object, target: HTMLElement): void => {
+  if (input.valueObject === undefined && input.valueString === undefined) {
+    render(nothing, target);
+    return;
+  }
+  const isParsable = input.valueObject !== undefined;
+
+  const createPayload = (parsedInput: unknown): TemplateResult => {
+    const object = new SDK.RemoteObject.LocalJSONObject(parsedInput);
+    const section =
+        new ObjectUI.ObjectPropertiesSection.RootElement(new ObjectUI.ObjectPropertiesSection.ObjectTree(object, {
+          readOnly: true,
+          propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+        }));
+    section.title = document.createTextNode(object.description);
+    section.listItemElement.classList.add('source-code', 'object-properties-section');
+    section.childrenListElement.classList.add('source-code', 'object-properties-section');
+    section.expand();
+    return html`<devtools-tree .template=${html`
+          <style>${ObjectUI.ObjectPropertiesSection.objectValueStyles}</style>
+          <style>${ObjectUI.ObjectPropertiesSection.objectPropertiesSectionStyles}</style>
+          <ul role="tree">
+            <devtools-tree-wrapper .treeElement=${section}></devtools-tree-wrapper>
+          </ul>
+        `}></devtools-tree>`;
+  };
+
+  const createSourceText = (text: string): TemplateResult => html`<div class="payload-value source-code">${text}</div>`;
+
+  render(
+      html`
+    <style>${webMCPViewStyles}</style>
+    <div class="call-payload-view">
+      <div class="call-payload-content">
+            ${
+          isParsable ? createPayload(input.valueObject) :
+                       (input.valueString !== undefined ? createSourceText(input.valueString) : nothing)}
+      </div>
+    </div>
+  `,
+      target);
+};
+
+export class PayloadWidget extends UI.Widget.Widget {
+  #valueObject?: unknown;
+  #valueString?: string;
+  #view: typeof PAYLOAD_DEFAULT_VIEW;
+
+  constructor(element?: HTMLElement, view = PAYLOAD_DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+  }
+
+  set valueObject(valueObject: unknown) {
+    this.#valueObject = valueObject;
+    this.requestUpdate();
+  }
+
+  get valueObject(): unknown {
+    return this.#valueObject;
+  }
+
+  set valueString(valueString: string|undefined) {
+    this.#valueString = valueString;
+    this.requestUpdate();
+  }
+
+  get valueString(): string|undefined {
+    return this.#valueString;
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    const input: PayloadViewInput = {
+      valueObject: this.#valueObject,
+      valueString: this.#valueString,
+    };
+    this.#view(input, {}, this.contentElement);
+  }
+}
+
+export interface ToolDetailsViewInput {
+  tool: WebMCP.WebMCPModel.Tool|null|undefined;
+  origin: SDK.DOMModel.DOMNode|StackTrace.StackTrace.StackTrace|undefined;
+  highlightNode: (node: SDK.DOMModel.DOMNode) => void;
+  clearHighlight: () => void;
+  revealNode: (node: SDK.DOMModel.DOMNode) => void;
+}
+
+// clang-format off
+const TOOL_DETAILS_VIEW = (input: ToolDetailsViewInput, output: undefined, target: HTMLElement): void => {
+  if (!input.tool) {
+    render(nothing, target);
+    return;
+  }
+  const tool = input.tool;
+  const origin = input.origin;
+  render(html`
+    <style>${webMCPViewStyles}</style>
+    <div class="tool-details-grid">
+      <div class="label">Name</div>
+      <div class="value source-code">${tool.name}</div>
+      <div class="label">Description</div>
+      <div class="value">${tool.description}</div>
+      ${tool.frame ? html`
+      <div class="label">${i18nString(UIStrings.frame)}</div>
+      <div class="value">${Components.Linkifier.Linkifier.linkifyRevealable(tool.frame, tool.frame.displayName())}</div>
+      ` : nothing}
+      ${origin instanceof SDK.DOMModel.DOMNode ? html`
+      <div class="label">Origin</div>
+      <div class="value tool-origin-container">
+        <span
+            class="node-text-container source-code tool-origin-node"
+            data-label="true"
+            @mouseenter=${() => input.highlightNode(origin)}
+            @mouseleave=${input.clearHighlight}>
+          <devtools-node-text .data=${{
+              nodeId: origin.getAttribute('id') || undefined,
+              nodeTitle: origin.nodeNameInCorrectCase(),
+              nodeClasses: origin.getAttribute('class')?.split(/\s+/).filter(s => Boolean(s))
+            } as NodeText.NodeText.NodeTextData}>
+          </devtools-node-text>
+        </span>
+        <devtools-button class="show-element"
+           .title=${i18nString(UIStrings.viewInElementsPanel)}
+           aria-label=${i18nString(UIStrings.viewInElementsPanel)}
+           .iconName=${'select-element'}
+           .jslogContext=${'elements.select-element'}
+           .size=${Buttons.Button.Size.SMALL}
+           .variant=${Buttons.Button.Variant.ICON}
+           @click=${() => input.revealNode(origin)}
+           ></devtools-button>
+      </div>` : origin ? html`
+      <div class="label">Origin</div>
+      <div class="value">
+        ${widget(Components.JSPresentationUtils.StackTracePreviewContent,
+                 {stackTrace: origin, options: { expandable: true}})}
+      </div>` : nothing}
+    </div>
+  `, target);
+};
+// clang-format on
+
+export class ToolDetailsWidget extends UI.Widget.Widget {
+  #tool: WebMCP.WebMCPModel.Tool|null|undefined = null;
+  #origin: SDK.DOMModel.DOMNode|StackTrace.StackTrace.StackTrace|undefined;
+
+  #view: typeof TOOL_DETAILS_VIEW;
+
+  constructor(element?: HTMLElement, view: typeof TOOL_DETAILS_VIEW = TOOL_DETAILS_VIEW) {
+    super(element);
+    this.#view = view;
+  }
+
+  set tool(tool: WebMCP.WebMCPModel.Tool|null|undefined) {
+    if (this.#tool === tool) {
+      return;
+    }
+    this.#tool = tool;
+    this.#origin = undefined;
+
+    if (this.#tool) {
+      void this.#setToolOrigin(this.#tool);
+    }
+    this.requestUpdate();
+  }
+
+  async #setToolOrigin(tool: WebMCP.WebMCPModel.Tool): Promise<void> {
+    const origin = await (tool.node ? tool.node.resolvePromise() : tool.stackTrace);
+    if (this.#tool === tool && origin) {
+      this.#origin = origin;
+      this.requestUpdate();
+    }
+  }
+
+  get tool(): WebMCP.WebMCPModel.Tool|null|undefined {
+    return this.#tool;
+  }
+
+  #highlightNode = (node: SDK.DOMModel.DOMNode): void => {
+    node.highlight();
+  };
+
+  #clearHighlight = (): void => {
+    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
+  };
+
+  #revealNode = (node: SDK.DOMModel.DOMNode): void => {
+    void Common.Revealer.reveal(node);
+    void node.scrollIntoView();
+  };
+
+  override performUpdate(): void {
+    const viewInput = {
+      tool: this.#tool,
+      origin: this.#origin,
+      highlightNode: this.#highlightNode,
+      clearHighlight: this.#clearHighlight,
+      revealNode: this.#revealNode,
+    };
+    this.#view(viewInput, undefined, this.contentElement);
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+  }
+}

package/front_end/panels/application/application.ts

@@ -8,6 +8,7 @@ import * as BackgroundServiceModel from './BackgroundServiceModel.js';
 import * as BackgroundServiceView from './BackgroundServiceView.js';
 import * as BounceTrackingMitigationsTreeElement from './BounceTrackingMitigationsTreeElement.js';
 import * as CookieItemsView from './CookieItemsView.js';
+import * as CrashReportContextView from './CrashReportContextView.js';
 import * as DeviceBoundSessionsModel from './DeviceBoundSessionsModel.js';
 import * as DeviceBoundSessionsTreeElement from './DeviceBoundSessionsTreeElement.js';
 import * as DeviceBoundSessionsView from './DeviceBoundSessionsView.js';
@@ -26,6 +27,7 @@ import * as OpenedWindowDetailsView from './OpenedWindowDetailsView.js';
 import * as OriginTrialTreeView from './OriginTrialTreeView.js';
 import * as PreloadingView from './preloading/PreloadingView.js';
 import * as PreloadingTreeElement from './PreloadingTreeElement.js';
+import * as ReportingApiTreeElement from './ReportingApiTreeElement.js';
 import * as ReportingApiView from './ReportingApiView.js';
 import * as ResourcesPanel from './ResourcesPanel.js';
 import * as ServiceWorkerCacheViews from './ServiceWorkerCacheViews.js';
@@ -50,6 +52,7 @@ export {
   BackgroundServiceView,
   BounceTrackingMitigationsTreeElement,
   CookieItemsView,
+  CrashReportContextView,
   DeviceBoundSessionsModel,
   DeviceBoundSessionsTreeElement,
   DeviceBoundSessionsView,
@@ -68,6 +71,7 @@ export {
   OriginTrialTreeView,
   PreloadingTreeElement,
   PreloadingView,
+  ReportingApiTreeElement,
   ReportingApiView,
   ResourcesPanel,
   ServiceWorkerCacheViews,