chrome-devtools-frontend 1.0.1642899 → 1.0.1643855

package/front_end/models/stack_trace/StackTraceModel.ts

@@ -211,10 +211,11 @@ export class StackTraceModel extends SDK.SDKModel.SDKModel<unknown> {
     let i = 0;
     let evalI = 0;
     for (const node of fragment.node.getCallStack()) {
-      node.frames = uiFrames[i++].map(
-          frame => new FrameImpl(
-              frame.url, frame.uiSourceCode, frame.name, frame.line, frame.column, frame.missingDebugInfo,
-              node.rawFrame.functionName, node.rawFrame.isWasm));
+      const group = uiFrames[i++];
+      node.frames =
+          group.map((frame, index) => new FrameImpl(frame.url, frame.uiSourceCode, frame.name, frame.line, frame.column,
+                                                    frame.missingDebugInfo, node.rawFrame.functionName,
+                                                    node.rawFrame.isWasm, index < group.length - 1));
 
       if (node.parsedFrameInfo?.evalOrigin) {
         node.evalOrigin = evalOrigins[evalI++];
@@ -253,10 +254,10 @@ async function translateEvalOrigin(
     rawFrame: RawFrame, rawFramesToUIFrames: TranslateRawFrames,
     target: SDK.Target.Target): Promise<EvalOrigin|undefined> {
   const uiFrames = await rawFramesToUIFrames([rawFrame], target);
-  const frames = uiFrames[0].map(
-      frame => new FrameImpl(
-          frame.url, frame.uiSourceCode, frame.name, frame.line, frame.column, frame.missingDebugInfo,
-          rawFrame.functionName, rawFrame.isWasm));
+  const group = uiFrames[0];
+  const frames = group.map((frame, index) => new FrameImpl(frame.url, frame.uiSourceCode, frame.name, frame.line,
+                                                           frame.column, frame.missingDebugInfo, rawFrame.functionName,
+                                                           rawFrame.isWasm, index < group.length - 1));
 
   let parentEvalOrigin: EvalOrigin|undefined;
   if (rawFrame.parsedFrameInfo?.evalOrigin) {

package/front_end/panels/accessibility/AccessibilitySidebarView.ts

@@ -33,7 +33,7 @@ export class AccessibilitySidebarView extends UI.Widget.VBox {
   #node: SDK.DOMModel.DOMNode|null;
   #axNode: SDK.AccessibilityModel.AccessibilityNode|null;
   private skipNextPullNode: boolean;
-  private readonly sidebarPaneStack: UI.View.ViewLocation;
+  private readonly sidebarPaneStack: UI.ViewManager.StackLocation;
   private readonly ariaSubPane: ARIAAttributesPane;
   private readonly axNodeSubPane: AXNodeSubPane;
   private readonly sourceOrderSubPane: SourceOrderPane;
@@ -159,6 +159,7 @@ export class AccessibilitySidebarView extends UI.Widget.VBox {
 
   private updateToggle(): void {
     const isToggled = this.toggleAction.toggled();
+    this.sidebarPaneStack.notifyVisibilityChanged(isToggled);
     // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
     render(
         html`

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -657,7 +657,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   // NodeJS debugging does not have Elements panel, thus this action might not exist.
   #toggleSearchElementAction?: UI.ActionRegistration.Action;
   #aidaClient: Host.AidaClient.AidaClient;
-  #conversationSummaryAgent?: AiAssistanceModel.ConversationSummaryAgent.ConversationSummaryAgent;
+  #conversationSummary?: AiAssistanceModel.ConversationSummary.ConversationSummary;
   #viewOutput: PanelViewOutput = {};
   #serverSideLoggingEnabled = isAiAssistanceServerSideLoggingEnabled();
   #aiAssistanceEnabledSetting: Common.Settings.Setting<boolean>|undefined;
@@ -784,17 +784,16 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           markdownRenderer,
           conversationMarkdown: this.#conversation.getConversationMarkdown(),
           generateConversationSummary: async (markdown: string) => {
-            if (!this.#conversationSummaryAgent) {
-              this.#conversationSummaryAgent = new AiAssistanceModel.ConversationSummaryAgent.ConversationSummaryAgent({
+            if (!this.#conversationSummary) {
+              this.#conversationSummary = new AiAssistanceModel.ConversationSummary.ConversationSummary({
                 aidaClient: this.#aidaClient,
                 serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
               });
             }
-            return await this.#conversationSummaryAgent.summarizeConversation(markdown);
+            return await this.#conversationSummary.summarizeConversation(markdown);
           },
-          onTextSubmit: async (
-              text: string, imageInput?: Host.AidaClient.Part,
-              multimodalInputType?: AiAssistanceModel.AiAgent.MultimodalInputType) => {
+          onTextSubmit: async (text: string, imageInput?: Host.AidaClient.Part,
+                               multimodalInputType?: AiAssistanceModel.AiAgent.MultimodalInputType) => {
             const submit = (): void => {
               Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceQuerySubmitted);
               void this.#startConversation(text, imageInput, multimodalInputType);
@@ -2116,7 +2115,8 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
       case 'drjones.network-panel-context':
       case 'drjones.performance-panel-context':
       case 'drjones.sources-floating-button':
-      case 'drjones.sources-panel-context': {
+      case 'drjones.sources-panel-context':
+      case 'ai-assistance.storage-floating-button': {
         void (async () => {
           const view = UI.ViewManager.ViewManager.instance().view(
               AiAssistancePanel.panelName,

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

@@ -14,9 +14,9 @@ import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import type {
   AiWidget, BottomUpTreeAiWidget, ComputedStyleAiWidget, CoreVitalsAiWidget, DomTreeAiWidget, LighthouseReportAiWidget,
-  NetworkRequestGeneralHeadersAiWidget, PerfInsightAiWidget, PerformanceTraceAiWidget, SourceCodeAiWidget,
-  SourceFileAiWidget, SourceFilesListAiWidget, StylePropertiesAiWidget, TimelineEventSummaryAiWidget,
-  TimelineRangeSummaryAiWidget} from '../../../models/ai_assistance/agents/AiAgent.js';
+  NetworkRequestGeneralHeadersAiWidget, NetworkRequestsListAiWidget, PerfInsightAiWidget, PerformanceTraceAiWidget,
+  SourceCodeAiWidget, SourceFileAiWidget, SourceFilesListAiWidget, StylePropertiesAiWidget,
+  TimelineEventSummaryAiWidget, TimelineRangeSummaryAiWidget} from '../../../models/ai_assistance/agents/AiAgent.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as ComputedStyle from '../../../models/computed_style/computed_style.js';
 import * as Formatter from '../../../models/formatter/formatter.js';
@@ -30,6 +30,7 @@ import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Input from '../../../ui/components/input/input.js';
 import type * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
 import type {MarkdownLitRenderer} from '../../../ui/components/markdown_view/MarkdownView.js';
+import * as Snackbars from '../../../ui/components/snackbars/snackbars.js';
 import * as UIHelpers from '../../../ui/helpers/helpers.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
@@ -414,6 +415,14 @@ const UIStringsNotTranslate = {
    * @description Title for the character set declaration widget.
    */
   characterSet: 'Character set declaration',
+  /**
+   * @description Title for the network requests list widget.
+   */
+  networkRequests: 'Network requests',
+  /**
+   * @description Accessible label for the reveal button in the network requests list widget.
+   */
+  revealFirstNetworkRequest: 'Reveal first network request in Network panel',
   /**
    * @description Title for the source files list widget.
    */
@@ -1300,7 +1309,12 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
     if (response === null) {
       return;
     }
-    void Common.Revealer.reveal(response?.revealable);
+    Common.Revealer.reveal(response?.revealable).catch((error: Error) => {
+      if (!error.message) {
+        return;
+      }
+      Snackbars.Snackbar.Snackbar.show({message: error.message});
+    });
   }
 
   const classes = Lit.Directives.classMap({
@@ -1466,6 +1480,79 @@ async function makeSourceFilesListWidget(widgetData: SourceFilesListAiWidget): P
   };
 }
 
+const expandedNetworkRequestsWidgets = new WeakSet<NetworkRequestsListAiWidget>();
+
+// A widget with a table of the list of network requests sent to the agent.
+// Only show 15 requests maximum in collapsed version. The rest of the requests
+// will be hidden unless the user clicks "Show all".
+async function makeNetworkRequestsListWidget(widgetData: NetworkRequestsListAiWidget):
+    Promise<WidgetMakerResponse|null> {
+  const requests = widgetData.data.requests;
+  if (requests.length === 0) {
+    return null;
+  }
+
+  const isExpanded = expandedNetworkRequestsWidgets.has(widgetData);
+  // We only want just expanded widget to be expanded, if the user closed and reopened the walkthrought, the widget should be collapsed again.
+  // Therefore, after rendering the widget, we remove the widget from the set of expanded widgets so that it is collapsed on next render.
+  if (isExpanded) {
+    expandedNetworkRequestsWidgets.delete(widgetData);
+  }
+  const displayedRequests = isExpanded ? requests : requests.slice(0, 15);
+
+  // The table contains same fields as the ones sent to the agent.
+  // clang-format off
+  const renderedWidget = html`
+    <div class="network-requests-widget">
+      <devtools-data-grid striped inline>
+        <table>
+          <tr>
+            <th id="name" weight="4">${i18n.i18n.lockedString('Name')}</th>
+            <th id="status" weight="1">${i18n.i18n.lockedString('Status')}</th>
+            <th id="size" weight="1">${i18n.i18n.lockedString('Size')}</th>
+            <th id="time" weight="1">${i18n.i18n.lockedString('Time')}</th>
+          </tr>
+          ${displayedRequests.map(request => html`
+            <tr>
+              <td>${request.name()}</td>
+              <td>${request.statusCode}</td>
+              <td>${i18n.ByteUtilities.formatBytesToKb(request.transferSize)}</td>
+              <td>${i18n.TimeUtilities.secondsToString(request.duration)}</td>
+            </tr>
+          `)}
+        </table>
+      </devtools-data-grid>
+      ${!isExpanded && requests.length > 15 ? html`
+        <div class="show-all-container">
+          <button class="show-all-widget-requests-button text-button"
+            jslog=${VisualLogging.action('show-all-widget-requests-button').track({click: true})}
+            @click=${(e: Event) => {
+              expandedNetworkRequestsWidgets.add(widgetData);
+              const widgetEl = (e.target as HTMLElement).closest('.widget');
+              if (widgetEl) {
+                const widget = UI.Widget.Widget.get(widgetEl) as ChatMessage;
+                if (widget && widget.performUpdate) {
+                  void widget.performUpdate();
+                }
+              }
+            }}>
+            ${i18n.i18n.lockedString(`Show all ${requests.length} network requests`)}
+          </button>
+        </div>
+      ` : Lit.nothing}
+    </div>
+  `;
+  // clang-format on
+
+  return {
+    renderedWidget,
+    title: lockedString(UIStringsNotTranslate.networkRequests),
+    revealable: requests[0],
+    accessibleRevealLabel: lockedString(UIStringsNotTranslate.revealFirstNetworkRequest),
+    jslogContext: 'network-requests-list-widget',
+  };
+}
+
 function renderNetworkRequestPreview(networkRequest: NonNullable<DomTreeAiWidget['data']['networkRequest']>):
     Lit.TemplateResult {
   const filename = networkRequest.url.split('/').pop() || networkRequest.url;
@@ -1583,6 +1670,8 @@ export function getWidgetSignature(widget: AiWidget): string {
       return `${widget.name}:${widget.data.request.requestId()}`;
     case 'SOURCE_CODE':
       return `${widget.name}:${widget.data.url}:${widget.data.line ?? ''}:${widget.data.column ?? ''}`;
+    case 'NETWORK_REQUESTS_LIST':
+      return `${widget.name}:${widget.data.requests.map(r => r.requestId()).join(',')}`;
     default:
       Platform.assertNever(widget, 'Unknown AiWidget name');
   }
@@ -1672,6 +1761,9 @@ async function renderWidgets(
       case 'SOURCE_FILES_LIST':
         response = await makeSourceFilesListWidget(widgetData);
         break;
+      case 'NETWORK_REQUESTS_LIST':
+        response = await makeNetworkRequestsListWidget(widgetData);
+        break;
       case 'LIGHTHOUSE_REPORT':
         response = await makeLighthouseReportWidget(widgetData);
         break;

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

@@ -624,4 +624,10 @@
       display: none;
     }
   }
+
+  .network-requests-widget {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-size-4);
+  }
 }

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -40,6 +40,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import * as AiAssistance from '../../models/ai_assistance/ai_assistance.js';
 import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import {createIcon} from '../../ui/kit/kit.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
@@ -1762,9 +1763,29 @@ export class DOMStorageTreeElement extends ApplicationPanelTreeElement {
     return false;
   }
 
+  /**
+   * Resolves the DOM storage partition context (`localStorage` or `sessionStorage`)
+   * associated with this tree element for AI assistance.
+   */
+  #getStorageItem(): AiAssistance.StorageItem.StorageItem|null {
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const mainPageOrigin =
+        target?.inspectedURL() ? Common.ParsedURL.ParsedURL.extractOrigin(target.inspectedURL()) : '';
+    if (!mainPageOrigin || !this.domStorage.storageKey) {
+      return null;
+    }
+    const origin = SDK.StorageKeyManager.parseStorageKey(this.domStorage.storageKey).origin;
+    const storageType = this.domStorage.isLocalStorage ? 'localStorage' : 'sessionStorage';
+    return new AiAssistance.StorageItem.DOMStorageItem(mainPageOrigin, origin, this.domStorage.storageKey, storageType);
+  }
+
   override onattach(): void {
     super.onattach();
     this.listItemElement.addEventListener('contextmenu', this.handleContextMenuEvent.bind(this), true);
+    const storageItem = this.#getStorageItem();
+    if (storageItem) {
+      this.createAiButton(storageItem);
+    }
   }
 
   private handleContextMenuEvent(event: MouseEvent): void {
@@ -1851,9 +1872,27 @@ export class CookieTreeElement extends ApplicationPanelTreeElement {
     return this.#cookieDomain;
   }
 
+  /**
+   * Resolves the cookie domain security context associated with this tree element
+   * for AI assistance.
+   */
+  #getStorageItem(): AiAssistance.StorageItem.StorageItem|null {
+    const primaryTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const mainPageOrigin =
+        primaryTarget?.inspectedURL() ? Common.ParsedURL.ParsedURL.extractOrigin(primaryTarget.inspectedURL()) : '';
+    if (!mainPageOrigin || !this.#cookieDomain) {
+      return null;
+    }
+    return new AiAssistance.StorageItem.CookieItem(mainPageOrigin, this.#cookieDomain);
+  }
+
   override onattach(): void {
     super.onattach();
     this.listItemElement.addEventListener('contextmenu', this.handleContextMenuEvent.bind(this), true);
+    const storageItem = this.#getStorageItem();
+    if (storageItem) {
+      this.createAiButton(storageItem);
+    }
   }
 
   private handleContextMenuEvent(event: Event): void {

package/front_end/panels/application/ApplicationPanelTreeElement.ts

@@ -2,15 +2,24 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+/* eslint-disable @devtools/no-lit-render-outside-of-view */
+
+import '../../ui/components/buttons/buttons.js';
+
 import * as Common from '../../core/common/common.js';
 import type * as Platform from '../../core/platform/platform.js';
+import * as AiAssistance from '../../models/ai_assistance/ai_assistance.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 
 import type {ResourcesPanel} from './ResourcesPanel.js';
 
+const {html} = Lit;
+
 export class ApplicationPanelTreeElement extends UI.TreeOutline.TreeElement {
   protected readonly resourcesPanel: ResourcesPanel;
   private customItemURL?: Platform.DevToolsPath.UrlString;
+  protected aiButtonContainer?: HTMLElement;
 
   constructor(resourcesPanel: ResourcesPanel, title: string, expandable: boolean, jslogContext: string) {
     super(title, expandable, jslogContext);
@@ -56,6 +65,36 @@ export class ApplicationPanelTreeElement extends UI.TreeOutline.TreeElement {
   showView(view: UI.Widget.AnyWidget|null): void {
     this.resourcesPanel.showView(view);
   }
+
+  protected createAiButton(storageItem: AiAssistance.StorageItem.StorageItem): void {
+    const STORAGE_FLOATING_BUTTON_ACTION_ID = 'ai-assistance.storage-floating-button';
+    const actionRegistry = UI.ActionRegistry.ActionRegistry.instance();
+    if (!actionRegistry.hasAction(STORAGE_FLOATING_BUTTON_ACTION_ID)) {
+      return;
+    }
+    const action = actionRegistry.getAction(STORAGE_FLOATING_BUTTON_ACTION_ID);
+    if (!this.aiButtonContainer) {
+      this.aiButtonContainer = this.listItemElement.createChild('span', 'ai-button-container');
+      const icon = AiAssistance.AiUtils.getIconName();
+      const onClick = (ev: Event): void => {
+        ev.stopPropagation();
+        UI.Context.Context.instance().setFlavor(AiAssistance.StorageItem.StorageItem, storageItem);
+        void action.execute();
+      };
+
+      // clang-format off
+      Lit.render(html`
+            <devtools-floating-button
+              icon-name=${icon}
+              title=${action.title()}
+              jslogcontext="ask-ai"
+              @click=${onClick}
+              @mousedown=${(ev: Event) => ev.stopPropagation()}>
+            </devtools-floating-button>
+          `, this.aiButtonContainer);
+      // clang-format on
+    }
+  }
 }
 
 export class ExpandableApplicationPanelTreeElement extends ApplicationPanelTreeElement {

package/front_end/panels/application/CookieItemsView.ts

@@ -317,7 +317,7 @@ export class CookieItemsView extends UI.Widget.VBox {
   }
 
   private updateAiAssistanceContext(cookie: SDK.Cookie.Cookie|null): void {
-    if (!cookie || cookie.httpOnly()) {
+    if (cookie && cookie.httpOnly()) {
       UI.Context.Context.instance().setFlavor(AiAssistanceModel.StorageItem.StorageItem, null);
       return;
     }
@@ -332,7 +332,7 @@ export class CookieItemsView extends UI.Widget.VBox {
       return;
     }
 
-    const storageItem = new AiAssistanceModel.StorageItem.CookieItem(mainPageOrigin, this.cookieDomain, cookie.name());
+    const storageItem = new AiAssistanceModel.StorageItem.CookieItem(mainPageOrigin, this.cookieDomain, cookie?.name());
     UI.Context.Context.instance().setFlavor(AiAssistanceModel.StorageItem.StorageItem, storageItem);
   }
 

package/front_end/panels/application/components/AdsView.ts

@@ -0,0 +1,219 @@
+// 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 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 * as Lit from '../../../ui/lit/lit.js';
+
+import adsViewStyles from './adsView.css.js';
+
+const {html} = Lit;
+
+const UIStrings = {
+  /**
+   * @description Title for a metric showing the percentage of the viewport covered by ads.
+   */
+  viewportAdDensity: 'Viewport ad density',
+  /**
+   * @description Title for a metric showing the number of ads in the viewport.
+   */
+  viewportAdCount: 'Viewport ad count',
+  /**
+   * @description Title for a metric showing the total CPU usage by ads.
+   */
+  totalCpuUsage: 'Total CPU usage by ads',
+  /**
+   * @description Title for a metric showing the total network usage by ads.
+   */
+  totalNetworkUsage: 'Total network usage by ads',
+  /**
+   * @description Subtext showing the average value of a metric.
+   * @example {5.00%} PH1
+   */
+  average: '(Average: {PH1})',
+} as const;
+
+const str_ = i18n.i18n.registerUIStrings('panels/application/components/AdsView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export interface ViewInput {
+  metrics: Protocol.Ads.AdMetrics;
+}
+
+export type View = (input: ViewInput, output: undefined, target: HTMLElement|DocumentFragment) => void;
+
+const DEFAULT_VIEW: View = (input, output, target) => {
+  const metrics = input.metrics;
+
+  const formatValue = (val: number, isPercentage: boolean): string => {
+    if (isPercentage) {
+      return new Intl
+          .NumberFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale, {
+            style: 'percent',
+            maximumFractionDigits: 0,
+          })
+          .format(val / 100);
+    }
+    return new Intl.NumberFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale).format(val);
+  };
+
+  const formatAverage = (val: number, isPercentage: boolean): string => {
+    if (isPercentage) {
+      return new Intl
+          .NumberFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale, {
+            style: 'percent',
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })
+          .format(val / 100);
+    }
+    return new Intl
+        .NumberFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale, {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        })
+        .format(val);
+  };
+
+  const formatCpu = (val: number): string => {
+    return i18n.TimeUtilities.preciseMillisToString(val, 1);
+  };
+
+  const formatNetwork = (val: number): string => {
+    return i18n.ByteUtilities.bytesToString(val);
+  };
+
+  // clang-format off
+  Lit.render(html`
+    <style>${adsViewStyles}</style>
+    <dl class="metrics-container">
+      <div class="metric-box">
+        <dt class="metric-title">${i18nString(UIStrings.viewportAdDensity)}</dt>
+        <dd class="metric-value">
+          <span>${formatValue(metrics.viewportAdDensityByArea, true)}</span>
+          <span class="metric-average">${i18nString(UIStrings.average, {PH1: formatAverage(metrics.averageViewportAdDensityByArea, true)})}</span>
+        </dd>
+      </div>
+      <div class="metric-box">
+        <dt class="metric-title">${i18nString(UIStrings.viewportAdCount)}</dt>
+        <dd class="metric-value">
+          <span>${formatValue(metrics.viewportAdCount, false)}</span>
+          <span class="metric-average">${i18nString(UIStrings.average, {PH1: formatAverage(metrics.averageViewportAdCount, false)})}</span>
+        </dd>
+      </div>
+      <div class="metric-box">
+        <dt class="metric-title">${i18nString(UIStrings.totalCpuUsage)}</dt>
+        <dd class="metric-value">
+          <span>${formatCpu(metrics.totalAdCpuTime)}</span>
+        </dd>
+      </div>
+      <div class="metric-box">
+        <dt class="metric-title">${i18nString(UIStrings.totalNetworkUsage)}</dt>
+        <dd class="metric-value">
+          <span>${formatNetwork(metrics.totalAdNetworkBytes)}</span>
+        </dd>
+      </div>
+    </dl>
+  `, target);
+  // clang-format on
+};
+
+export class AdsView extends UI.Widget.Widget {
+  #currentMetrics: Protocol.Ads.AdMetrics;
+  #pollTimer?: number;
+  #isPolling = false;
+  #pollSessionId = 0;
+  #view: View;
+
+  constructor(view: View = DEFAULT_VIEW) {
+    super({useShadowDom: true});
+    this.#view = view;
+    this.#currentMetrics = {
+      viewportAdDensityByArea: 0,
+      averageViewportAdDensityByArea: 0,
+      viewportAdCount: 0,
+      averageViewportAdCount: 0,
+      totalAdCpuTime: 0,
+      totalAdNetworkBytes: 0,
+    };
+    this.requestUpdate();
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.#startPolling();
+    SDK.TargetManager.TargetManager.instance().addModelListener(SDK.ResourceTreeModel.ResourceTreeModel,
+                                                                SDK.ResourceTreeModel.Events.PrimaryPageChanged,
+                                                                this.#onPrimaryPageChanged, this);
+  }
+
+  override willHide(): void {
+    this.#stopPolling();
+    SDK.TargetManager.TargetManager.instance().removeModelListener(SDK.ResourceTreeModel.ResourceTreeModel,
+                                                                   SDK.ResourceTreeModel.Events.PrimaryPageChanged,
+                                                                   this.#onPrimaryPageChanged, this);
+    super.willHide();
+  }
+
+  #startPolling(): void {
+    if (this.#isPolling) {
+      return;
+    }
+    this.#isPolling = true;
+    this.#pollSessionId++;
+    void this.#pollMetrics(this.#pollSessionId);
+  }
+
+  #stopPolling(): void {
+    this.#isPolling = false;
+    if (this.#pollTimer !== undefined) {
+      window.clearTimeout(this.#pollTimer);
+      this.#pollTimer = undefined;
+    }
+  }
+
+  async #pollMetrics(sessionId: number): Promise<void> {
+    if (!this.#isPolling || this.#pollSessionId !== sessionId) {
+      return;
+    }
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    if (target) {
+      const adsAgent = target.adsAgent();
+      if (adsAgent) {
+        const response = await adsAgent.invoke_getAdMetrics();
+        if (!this.#isPolling || this.#pollSessionId !== sessionId) {
+          return;
+        }
+        if (!response.getError()) {
+          this.#currentMetrics = response.metrics;
+          this.requestUpdate();
+        }
+      }
+    }
+    if (this.#isPolling && this.#pollSessionId === sessionId) {
+      this.#pollTimer = window.setTimeout(() => this.#pollMetrics(sessionId), 500);
+    }
+  }
+
+  #onPrimaryPageChanged(): void {
+    this.#currentMetrics = {
+      viewportAdDensityByArea: 0,
+      averageViewportAdDensityByArea: 0,
+      viewportAdCount: 0,
+      averageViewportAdCount: 0,
+      totalAdCpuTime: 0,
+      totalAdNetworkBytes: 0,
+    };
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    const viewInput: ViewInput = {
+      metrics: this.#currentMetrics,
+    };
+    this.#view(viewInput, undefined, this.contentElement);
+  }
+}

package/front_end/panels/application/components/adsView.css

@@ -0,0 +1,54 @@
+/*
+ * 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.
+ */
+
+:host {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.metrics-container {
+  flex: 0 0 auto;
+  margin: 0 0 24px;
+  border: 1px solid var(--sys-color-divider);
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1px;
+  background-color: var(--sys-color-divider);
+}
+
+.metric-box {
+  background-color: var(--sys-color-surface);
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.metric-title {
+  font-size: 12px;
+  color: var(--sys-color-on-surface-subtle);
+  margin: 0 0 4px;
+}
+
+.metric-value {
+  font-size: 18px;
+  font-weight: bold;
+  color: var(--sys-color-on-surface);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0;
+  gap: 2px;
+}
+
+.metric-average {
+  font-size: 12px;
+  font-weight: normal;
+  color: var(--sys-color-on-surface-subtle);
+}