chrome-devtools-frontend 1.0.1604514 → 1.0.1605219

package/front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -342,12 +342,13 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
       class="chat-message answer ${input.isLastMessage ? 'is-last-message' : ''}"
       jslog=${VisualLogging.section('answer')}
     >
-      <div class="message-info">
-        <devtools-icon name=${icon}></devtools-icon>
-        <div class="message-name">
-          <h2>${AiAssistanceModel.AiUtils.isGeminiBranding() ? lockedString(UIStringsNotTranslate.gemini) : lockedString(UIStringsNotTranslate.ai)}</h2>
-        </div>
-      </div>
+      ${aiAssistanceV2 ? Lit.nothing : html`
+        <div class="message-info">
+          <devtools-icon name=${icon}></devtools-icon>
+          <div class="message-name">
+            <h2>${AiAssistanceModel.AiUtils.isGeminiBranding() ? lockedString(UIStringsNotTranslate.gemini) : lockedString(UIStringsNotTranslate.ai)}</h2>
+          </div>
+        </div>`}
       ${aiAssistanceV2 ? renderWalkthroughUI(input, steps) : Lit.nothing}
       ${Lit.Directives.repeat(
         message.parts,
@@ -519,11 +520,14 @@ function renderWalkthroughSidebarButton(
   // want to change it visually at the end once everything has stopped
   // loading.
   const variant = hasOneStepWithWidget && !input.isLoading ? Buttons.Button.Variant.TONAL : Buttons.Button.Variant.TEXT;
+  const icon = AiAssistanceModel.AiUtils.getIconName();
 
   // clang-format off
   return html`
-    <div class="walkthrough-toggle-container">
-      ${input.isLoading ? html`<devtools-spinner></devtools-spinner>` : Lit.nothing}
+    <div class="walkthrough-toggle-container ${hasOneStepWithWidget ? 'has-widgets' : ''}">
+      ${input.isLoading ?
+        html`<devtools-spinner></devtools-spinner>` :
+        html`<devtools-icon name=${icon}></devtools-icon>`}
       <devtools-button
         .variant=${variant}
         .size=${Buttons.Button.Size.SMALL}
@@ -540,8 +544,8 @@ function renderWalkthroughSidebarButton(
             walkthrough.onOpen(message as ModelChatMessage);
           }
         }}
-      >
-        ${title}<devtools-icon class="chevron" .name=${'chevron-right'}></devtools-icon>
+>
+        ${title}<devtools-icon class="chevron" .name=${isExpanded ? 'cross' : 'chevron-right'}></devtools-icon>
       </devtools-button>
     </div>
   `;
@@ -1236,7 +1240,7 @@ export class ChatMessage extends UI.Widget.Widget {
   };
 
   #suggestionsResizeObserver = new ResizeObserver(() => this.#handleSuggestionsScrollOrResize());
-  #suggestionsEvaluateLayoutThrottler = new Common.Throttler.Throttler(50);
+  #suggestionsEvaluateLayoutThrottler = new Common.Throttler.Throttler(100);
 
   #feedbackValue = '';
   #currentRating: Host.AidaClient.Rating|undefined;
@@ -1246,6 +1250,8 @@ export class ChatMessage extends UI.Widget.Widget {
   #view: View;
   #viewOutput: ViewOutput = {};
 
+  #isObservingSuggestions = false;
+
   constructor(element?: HTMLElement, view?: View) {
     super(element);
     this.#view = view ?? DEFAULT_VIEW;
@@ -1255,10 +1261,6 @@ export class ChatMessage extends UI.Widget.Widget {
     super.wasShown();
     void this.performUpdate();
     this.#evaluateSuggestionsLayout();
-
-    if (this.#viewOutput.suggestionsScrollContainer) {
-      this.#suggestionsResizeObserver.observe(this.#viewOutput.suggestionsScrollContainer);
-    }
   }
 
   override performUpdate(): Promise<void>|void {
@@ -1297,6 +1299,11 @@ export class ChatMessage extends UI.Widget.Widget {
           walkthrough: this.walkthrough,
         },
         this.#viewOutput, this.contentElement);
+
+    if (this.#viewOutput.suggestionsScrollContainer && !this.#isObservingSuggestions) {
+      this.#suggestionsResizeObserver.observe(this.#viewOutput.suggestionsScrollContainer);
+      this.#isObservingSuggestions = true;
+    }
   }
 
   #handleInputChange(value: string): void {
@@ -1320,6 +1327,7 @@ export class ChatMessage extends UI.Widget.Widget {
     const shouldShowRightButton = suggestionsScrollContainer.scrollLeft +
             (suggestionsScrollContainer as HTMLElement).offsetWidth + SCROLL_ROUNDING_OFFSET <
         suggestionsScrollContainer.scrollWidth;
+
     leftScrollButtonContainer.classList.toggle('hidden', !shouldShowLeftButton);
     rightScrollButtonContainer.classList.toggle('hidden', !shouldShowRightButton);
   };
@@ -1327,6 +1335,7 @@ export class ChatMessage extends UI.Widget.Widget {
   override willHide(): void {
     super.willHide();
     this.#suggestionsResizeObserver.disconnect();
+    this.#isObservingSuggestions = false;
   }
 
   #handleSuggestionsScrollOrResize(): void {
@@ -1410,8 +1419,8 @@ async function makeTimelineRangeSummaryWidget(widgetData: TimelineRangeSummaryAi
 
   const thirdPartyTree = new Timeline.ThirdPartyTreeView.ThirdPartyTreeViewWidget();
   const mapper = new Trace.EntityMapper.EntityMapper(parsedTrace);
-  thirdPartyTree.setModelWithEvents(eventsArray, parsedTrace, mapper);
-  thirdPartyTree.updateContents(Timeline.TimelineSelection.selectionFromRangeMicroSeconds(bounds.min, bounds.max));
+  thirdPartyTree.model = {selectedEvents: eventsArray, parsedTrace, entityMapper: mapper};
+  thirdPartyTree.activeSelection = Timeline.TimelineSelection.selectionFromRangeMicroSeconds(bounds.min, bounds.max);
   thirdPartyTree.refreshTree(true);
 
   // clang-format off
@@ -1423,9 +1432,16 @@ async function makeTimelineRangeSummaryWidget(widgetData: TimelineRangeSummaryAi
           events,
           startTime: Trace.Helpers.Timing.microToMilli(bounds.min),
           endTime: Trace.Helpers.Timing.microToMilli(bounds.max),
-          thirdPartyTreeTemplate: html`<devtools-performance-third-party-tree-view
-            max-rows="10"
-            .treeView=${thirdPartyTree}></devtools-performance-third-party-tree-view>`,
+          thirdPartyTreeTemplate: html`${
+            widget(Timeline.ThirdPartyTreeView.ThirdPartyTreeViewWidget, {
+              maxRows: 10,
+              model: {
+                selectedEvents: thirdPartyTree.selectedEvents() ?? null,
+                parsedTrace,
+                entityMapper: thirdPartyTree.entityMapper(),
+              },
+              activeSelection: { bounds },
+            })}`,
         } as TimelineComponents.TimelineRangeSummaryView.TimelineRangeSummaryViewData,
       })}
     ></devtools-widget>`;

package/front_end/panels/ai_assistance/components/chatMessage.css

@@ -344,9 +344,13 @@
 
   .walkthrough-toggle-container {
     display: flex;
-    gap: var(--sys-size-4);
+    gap: var(--sys-size-2);
     align-items: center;
 
+    &.has-widgets {
+      gap: var(--sys-size-6);
+    }
+
     .chevron {
       color: var(--sys-color-primary);
       width: var(--sys-size-8);

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -92,6 +92,7 @@ import {SharedStorageTreeElement} from './SharedStorageTreeElement.js';
 import {StorageBucketsTreeParentElement} from './StorageBucketsTreeElement.js';
 import {StorageView} from './StorageView.js';
 import {TrustTokensTreeElement} from './TrustTokensTreeElement.js';
+import {WebMCPTreeElement} from './WebMCPTreeElement.js';
 
 const UIStrings = {
   /**
@@ -346,6 +347,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
   periodicBackgroundSyncTreeElement: BackgroundServiceTreeElement;
   pushMessagingTreeElement: BackgroundServiceTreeElement;
   reportingApiTreeElement: ReportingApiTreeElement;
+  webMcpTreeElement?: WebMCPTreeElement;
   deviceBoundSessionsRootTreeElement: DeviceBoundSessionsRootTreeElement|undefined;
   deviceBoundSessionsModel: DeviceBoundSessionsModel|undefined;
   preloadingSummaryTreeElement: PreloadingSummaryTreeElement|undefined;
@@ -390,6 +392,10 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.applicationTreeElement.appendChild(this.serviceWorkersTreeElement);
     const clearStorageTreeElement = new ClearStorageTreeElement(panel);
     this.applicationTreeElement.appendChild(clearStorageTreeElement);
+    if (Root.Runtime.hostConfig.devToolsWebMCPSupport?.enabled) {
+      this.webMcpTreeElement = new WebMCPTreeElement(panel);
+      this.applicationTreeElement.appendChild(this.webMcpTreeElement);
+    }
 
     const storageSectionTitle = i18nString(UIStrings.storage);
     const storageTreeElement = this.addSidebarSection(storageSectionTitle, 'storage');

package/front_end/panels/application/IndexedDBViews.ts

@@ -321,27 +321,19 @@ export class IDBDataView extends UI.View.SimpleView {
     const keyPath = this.isIndex && this.index ? this.index.keyPath : this.objectStore.keyPath;
 
     const columns: DataGrid.DataGrid.ColumnDescriptor[] = [];
-
-    // Create column defaults so that we avoid repetition below.
-    const columnDefaults: Partial<DataGrid.DataGrid.ColumnDescriptor> = {
-      sortable: false,
-    };
     columns.push({
-      ...columnDefaults,
       id: 'number',
       title: '#' as Platform.UIString.LocalizedString,
       sortable: false,
       width: '50px',
     });
     columns.push({
-      ...columnDefaults,
       id: 'key',
       titleDOMFragment: this.keyColumnHeaderFragment(i18nString(UIStrings.keyString), keyPath),
       sortable: false,
     });
     if (this.isIndex) {
       columns.push({
-        ...columnDefaults,
         id: 'primary-key',
         titleDOMFragment: this.keyColumnHeaderFragment(i18nString(UIStrings.primaryKey), this.objectStore.keyPath),
         sortable: false,
@@ -349,7 +341,6 @@ export class IDBDataView extends UI.View.SimpleView {
     }
     const title = i18nString(UIStrings.valueString);
     columns.push({
-      ...columnDefaults,
       id: 'value',
       title,
       sortable: false,

package/front_end/panels/application/WebMCPTreeElement.ts

@@ -0,0 +1,35 @@
+// 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 * as Host from '../../core/host/host.js';
+import type * as Platform from '../../core/platform/platform.js';
+import {createIcon} from '../../ui/kit/kit.js';
+
+import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
+import type {ResourcesPanel} from './ResourcesPanel.js';
+import {WebMCPView} from './WebMCPView.js';
+
+export class WebMCPTreeElement extends ApplicationPanelTreeElement {
+  #view?: WebMCPView;
+
+  constructor(storagePanel: ResourcesPanel) {
+    super(storagePanel, 'WebMCP', false, 'web-mcp');
+    const icon = createIcon('document');
+    this.setLeadingIcons([icon]);
+  }
+
+  override get itemURL(): Platform.DevToolsPath.UrlString {
+    return 'webMcp://' as Platform.DevToolsPath.UrlString;
+  }
+
+  override onselect(selectedByUser?: boolean): boolean {
+    super.onselect(selectedByUser);
+    if (!this.#view) {
+      this.#view = new WebMCPView();
+    }
+    this.showView(this.#view);
+    Host.userMetrics.panelShown('web-mcp');
+    return false;
+  }
+}

package/front_end/panels/application/WebMCPView.ts

@@ -0,0 +1,118 @@
+// 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 '../../ui/components/icon_button/icon_button.js';
+import '../../ui/components/lists/lists.js';
+import '../../ui/legacy/legacy.js';
+
+import * as i18n from '../../core/i18n/i18n.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import {
+  html,
+  render,
+} from '../../ui/lit/lit.js';
+
+import webMCPViewStyles from './webMCPView.css.js';
+
+const UIStrings = {
+  /**
+   * @description Text for the header of the tool registry section
+   */
+  toolRegistry: 'Available Tools',
+  /**
+   * @description Title of text to display when no tools are registered
+   */
+  noToolsPlaceholderTitle: 'Available `WebMCP` Tools',
+  /**
+   * @description Text to display when no tools are registered
+   */
+  noToolsPlaceholder:
+      'Registered `WebMCP` tools for this page will appear here. No tools have been registered or detected yet.',
+  /**
+   * @description Title of text to display when no calls have been made
+   */
+  noCallsPlaceholderTitle: 'Tool Activity',
+  /**
+   * @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.'
+} as const;
+const str_ = i18n.i18n.registerUIStrings('panels/application/WebMCPView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export interface ViewInput {
+  tools: Protocol.WebMCP.Tool[];
+}
+
+export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const tools = input.tools;
+  // clang-format off
+  render(html`
+    <style>${webMCPViewStyles}</style>
+    <devtools-split-view class="webmcp-view" direction="row" sidebar-position="second" name="webmcp-split-view">
+      <div slot="main" class="call-log">
+        ${UI.Widget.widget(UI.EmptyWidget.EmptyWidget, {header: i18nString(UIStrings.noCallsPlaceholderTitle),
+                                                        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 => html`
+                <div class="tool-item">
+                  <div class="tool-name-container">
+                    <div class="tool-name source-code">${tool.name}</div>
+                  </div>
+                  <div class="tool-description">${tool.description}</div>
+                </div>
+              `)}
+          </devtools-list>
+        `}
+      </div>
+    </devtools-split-view>
+  `, target);
+  // clang-format on
+};
+
+export class WebMCPView extends UI.Widget.VBox {
+  readonly #view: View;
+
+  constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super();
+    this.#view = view;
+    SDK.TargetManager.TargetManager.instance().observeModels(SDK.WebMCPModel.WebMCPModel, {
+      modelAdded: (model: SDK.WebMCPModel.WebMCPModel) => this.#webMCPModelAdded(model),
+      modelRemoved: (model: SDK.WebMCPModel.WebMCPModel) => this.#webMCPModelRemoved(model),
+    });
+    this.requestUpdate();
+  }
+
+  #webMCPModelAdded(model: SDK.WebMCPModel.WebMCPModel): void {
+    model.addEventListener(SDK.WebMCPModel.Events.TOOLS_ADDED, this.requestUpdate, this);
+    model.addEventListener(SDK.WebMCPModel.Events.TOOLS_REMOVED, this.requestUpdate, this);
+  }
+
+  #webMCPModelRemoved(model: SDK.WebMCPModel.WebMCPModel): void {
+    model.removeEventListener(SDK.WebMCPModel.Events.TOOLS_ADDED, this.requestUpdate, this);
+    model.removeEventListener(SDK.WebMCPModel.Events.TOOLS_REMOVED, this.requestUpdate, this);
+  }
+
+  override performUpdate(): void {
+    const tools = SDK.TargetManager.TargetManager.instance()
+                      .models(SDK.WebMCPModel.WebMCPModel)
+                      .flatMap(m => m.tools.toArray())
+                      .sort((a, b) => a.name.localeCompare(b.name));
+    this.#view(
+        {
+          tools,
+        },
+        {}, this.contentElement);
+  }
+}

package/front_end/panels/application/application.ts

@@ -40,6 +40,8 @@ import * as StorageBucketsTreeElement from './StorageBucketsTreeElement.js';
 import * as StorageItemsToolbar from './StorageItemsToolbar.js';
 import * as StorageView from './StorageView.js';
 import * as TrustTokensTreeElement from './TrustTokensTreeElement.js';
+import * as WebMCPTreeElement from './WebMCPTreeElement.js';
+import * as WebMCPView from './WebMCPView.js';
 
 export {
   ApplicationPanelSidebar,
@@ -80,4 +82,6 @@ export {
   StorageItemsToolbar,
   StorageView,
   TrustTokensTreeElement,
+  WebMCPTreeElement,
+  WebMCPView,
 };

package/front_end/panels/application/webMCPView.css

@@ -0,0 +1,65 @@
+/*
+ * 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.
+ */
+
+@scope to (devtools-widget > *) {
+    .webmcp-view {
+        height: 100%;
+        width: 100%;
+    }
+
+    .call-log,
+    .tool-list {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+        padding: 0;
+    }
+
+    .empty-view-scroller {
+        flex: auto;
+    }
+
+    .section-title {
+        background-color: var(--sys-color-surface1);
+        padding: 0 5px;
+        line-height: 22px;
+        overflow: hidden;
+        align-items: center;
+        flex: none;
+        color: var(--sys-color-on-surface);
+    }
+
+    devtools-list {
+      flex: 1 1 auto;
+      margin: var(--sys-size-4);
+    }
+
+    .tool-item {
+        display: flex;
+        flex-direction: column;
+        padding: 8px 0;
+        gap: 4px;
+        width: 100%;
+        border-bottom: 1px solid var(--sys-color-divider);
+    }
+
+    .tool-name-container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .tool-name.source-code {
+        color: var(--sys-color-token-string);
+    }
+
+    .tool-description {
+        color: var(--sys-color-on-surface);
+    }
+
+
+}

package/front_end/panels/common/aiCodeCompletionSummaryToolbar.css

@@ -49,7 +49,7 @@
       border-left: var(--sys-size-1) solid var(--sys-color-divider);
     }
 
-    @media (width < 545px) {
+    @container (width < 545px) {
       &.has-disclaimer.has-recitation-notice {
         height: 46px;
         flex-direction: column;

package/front_end/panels/console/consoleView.css

@@ -633,6 +633,10 @@
   }
 }
 
+.ai-code-completion-summary-toolbar-container {
+  container-type: inline-size;
+}
+
 @media (forced-colors: active) {
   .console-message-expand-icon,
   .console-warning-level .expand-group-icon {

package/front_end/panels/elements/StylesAiCodeCompletionProvider.ts

@@ -16,6 +16,18 @@ export class StylesAiCodeCompletionProvider {
   #aiCodeCompletion?: AiCodeCompletion.AiCodeCompletion.AiCodeCompletion;
   #aiCodeCompletionConfig?: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig;
 
+  getCompletionHint?: () => string | null;
+  setAiAutoCompletion?: (args: {
+    text: string,
+    from: number,
+    startTime: number,
+    onImpression: (rpcGlobalId: Host.AidaClient.RpcGlobalId, latency: number, sampleId?: number) => void,
+    clearCachedRequest: () => void,
+    citations: Host.AidaClient.Citation[],
+    rpcGlobalId?: Host.AidaClient.RpcGlobalId,
+    sampleId?: number,
+  }|null) => void;
+
   #boundOnUpdateAiCodeCompletionState = this.#updateAiCodeCompletionState.bind(this);
 
   private constructor(aiCodeCompletionConfig: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig) {
@@ -123,7 +135,7 @@ export class StylesAiCodeCompletionProvider {
       return;
     }
 
-    this.#aiCodeCompletionConfig?.setAiAutoCompletion?.({
+    this.setAiAutoCompletion?.({
       text: currentPropertyString + aidaSuggestion.suggestionText,
       from: cursorPosition,
       rpcGlobalId: aidaSuggestion.rpcGlobalId,
@@ -131,6 +143,7 @@ export class StylesAiCodeCompletionProvider {
       startTime,
       clearCachedRequest: this.clearCache.bind(this),
       onImpression: this.#aiCodeCompletion.registerUserImpression.bind(this.#aiCodeCompletion),
+      citations: aidaSuggestion.citations,
     });
   }
 
@@ -206,7 +219,7 @@ export class StylesAiCodeCompletionProvider {
       return null;
     }
 
-    const completionHint = this.#aiCodeCompletionConfig?.getCompletionHint?.();
+    const completionHint = this.getCompletionHint?.();
     if (!completionHint) {
       return response.generatedSamples[0];
     }
@@ -216,4 +229,12 @@ export class StylesAiCodeCompletionProvider {
   clearCache(): void {
     this.#aiCodeCompletion?.clearCachedRequest();
   }
+
+  onSuggestionAccepted(
+      citations: Host.AidaClient.Citation[], rpcGlobalId?: Host.AidaClient.RpcGlobalId, sampleId?: number): void {
+    this.#aiCodeCompletionConfig?.onSuggestionAccepted(citations);
+    if (rpcGlobalId) {
+      this.#aiCodeCompletion?.registerUserAcceptance(rpcGlobalId, sampleId);
+    }
+  }
 }