[webmcp] Copyable names and descriptions in the tool list

Bug: 494516094
Change-Id: I68caea5f95784af03bb4b1df9c6d6ac019e2e1bf
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7766596
Reviewed-by: Eric Leese <leese@chromium.org>
Commit-Queue: Eric Leese <leese@chromium.org>
Auto-Submit: Philip Pfaffe <pfaffe@chromium.org>

Author: pfaffe

front_end/panels/application/WebMCPView.test.ts

@@ -4,13 +4,18 @@
 
 import type {JSONSchema7} from 'json-schema';
 
+import * as Host from '../../core/host/host.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 * as Bindings from '../../models/bindings/bindings.js';
 import * as WebMCP from '../../models/web_mcp/web_mcp.js';
 import * as Workspace from '../../models/workspace/workspace.js';
-import {findMenuItemWithLabel, getMenuForToolbarButton} from '../../testing/ContextMenuHelpers.js';
+import {
+  findMenuItemWithLabel,
+  getContextMenuForElement,
+  getMenuForToolbarButton
+} from '../../testing/ContextMenuHelpers.js';
 import {assertScreenshot, renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 import {createTarget, describeWithEnvironment, updateHostConfig} from '../../testing/EnvironmentHelpers.js';
 import {StubStackTrace} from '../../testing/StackTraceHelpers.js';
@@ -148,6 +153,40 @@ describeWithEnvironment('WebMCPView (View)', () => {
     await assertScreenshot('application/webmcp_view.png');
   });
 
+  it('shows a context menu when right-clicking a tool', async () => {
+    const copyTextStub = sinon.stub(Host.InspectorFrontendHost.InspectorFrontendHostInstance, 'copyText');
+    const sdkTarget = createTarget();
+    const container = document.createElement('div');
+    renderElementIntoDOM(container);
+
+    const tools = [
+      createTool('test_tool', 'A test tool description', 'frame1' as Protocol.Page.FrameId, sdkTarget),
+    ];
+
+    DEFAULT_VIEW(
+        {
+          ...createDefaultViewInput(),
+          tools,
+        },
+        {}, container);
+
+    const toolItem = container.querySelector('.tool-item');
+    assert.isNotNull(toolItem);
+
+    const contextMenu = getContextMenuForElement(toolItem);
+    const copyNameItem = findMenuItemWithLabel(contextMenu.defaultSection(), 'Copy name');
+    const copyDescItem = findMenuItemWithLabel(contextMenu.defaultSection(), 'Copy description');
+
+    assert.isDefined(copyNameItem);
+    assert.isDefined(copyDescItem);
+
+    contextMenu.invokeHandler(copyNameItem.id());
+    sinon.assert.calledWith(copyTextStub, 'test_tool');
+
+    contextMenu.invokeHandler(copyDescItem.id());
+    sinon.assert.calledWith(copyTextStub, 'A test tool description');
+  });
+
   it('renders a list of tools', async () => {
     updateHostConfig({devToolsWebMCPSupport: {enabled: true}});
     const sdkTarget = createTarget();

front_end/panels/application/WebMCPView.ts

@@ -11,6 +11,7 @@ import '../../ui/legacy/legacy.js';
 import type {JSONSchema7, JSONSchema7Definition} from 'json-schema';
 
 import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.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';
@@ -158,6 +159,14 @@ const UIStrings = {
    * @example {1} PH1
    */
   inProgressCount: '{PH1} In Progress',
+  /**
+   * @description Context menu action to copy the name of a tool
+   */
+  copyName: 'Copy name',
+  /**
+   * @description Context menu action to copy the description of a tool
+   */
+  copyDescription: 'Copy description',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/WebMCPView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -350,6 +359,16 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         return i18nString(UIStrings.inProgress);
     }
   };
+  const onToolContextMenu = (event: Event, tool: WebMCP.WebMCPModel.Tool): void => {
+    const contextMenu = new UI.ContextMenu.ContextMenu(event);
+    contextMenu.defaultSection().appendItem(i18nString(UIStrings.copyName), () => {
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(tool.name);
+    }, {jslogContext: 'webmcp.copy-tool-name'});
+    contextMenu.defaultSection().appendItem(i18nString(UIStrings.copyDescription), () => {
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(tool.description);
+    }, {jslogContext: 'webmcp.copy-tool-description'});
+    void contextMenu.show();
+  };
   // clang-format off
   render(html`
     <style>${webMCPViewStyles}</style>
@@ -491,7 +510,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                 const groups = getIconGroupsFromStats(toolStats);
                 return html`
                     <div class=${Directives.classMap({'tool-item': true, selected: tool === input.selectedTool})}
-                         @click=${() => input.onToolSelect(tool)}>
+                         @click=${() => input.onToolSelect(tool)}
+                         @contextmenu=${(e: Event) => onToolContextMenu(e, tool)}>
                     <div class="tool-name-container">
                       <div class="tool-name source-code">${tool.name}</div>
                       ${groups.length > 0 ? html`<icon-button .data=${

front_end/panels/application/webMCPView.css

@@ -77,7 +77,7 @@
         height: 100%;
         display: flex;
         flex-direction: column;
-        overflow: auto;
+        overflow: hidden;
     }
 
     .tool-details-grid {
@@ -86,6 +86,7 @@
       gap: 0 var(--sys-size-16);
       padding: calc(0.5*var(--sys-size-6)) var(--sys-size-8);
       align-items: flex-start;
+      overflow-y: auto;
 
       .label {
         color: var(--sys-color-on-surface-subtle);
@@ -94,6 +95,8 @@
       }
 
       .value {
+        user-select: text;
+
         &.source-code {
           color: var(--sys-color-token-attribute);
         }

front_end/ui/visual_logging/KnownContextValues.ts

@@ -4350,6 +4350,8 @@ export const knownContextValues = new Set([
   'webmcp.call-inputs',
   'webmcp.call-outputs',
   'webmcp.completed',
+  'webmcp.copy-tool-description',
+  'webmcp.copy-tool-name',
   'webmcp.declarative',
   'webmcp.error',
   'webmcp.imperative',