chrome-devtools-frontend 1.0.1698733 → 1.0.1699061

package/front_end/panels/accessibility/AccessibilityAnnouncementRecordingView.ts

@@ -6,25 +6,192 @@ import type * as Common from '../../core/common/common.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 Buttons from '../../ui/components/buttons/buttons.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+import {AccessibilityAnnouncementRecordingListView} from './AccessibilityAnnouncementRecordingListView.js';
+import accessibilityAnnouncementRecordingViewStyles from './accessibilityAnnouncementRecordingView.css.js';
 import {AccessibilitySubPane} from './AccessibilitySubPane.js';
 
+const {html, render} = Lit;
+const {widget} = UI.Widget;
+
 const UIStrings = {
   /**
    * @description Title for the ARIA-Live and JS announcements recording tool
    */
   ariaLiveRecording: 'Announcements recording',
+  /**
+   * @description Tooltip for the start recording button in the announcements tool.
+   */
+  startRecording: 'Start recording',
+  /**
+   * @description Tooltip for the stop recording button in the announcements tool.
+   */
+  stopRecording: 'Stop recording',
+  /**
+   * @description Tooltip for the clear announcements button in the announcements tool.
+   */
+  clearAnnouncements: 'Clear announcements',
+  /**
+   * @description Label/title for the dropdown filter to select which announcement types to record.
+   */
+  filterByType: 'Filter by type',
+  /**
+   * @description Option label to record and display both ARIA-live and JavaScript announcements.
+   */
+  recordBoth: 'Record both',
+  /**
+   * @description Option label to record and display only ARIA-live announcements.
+   */
+  ariaLiveOnly: 'ARIA-live only',
+  /**
+   * @description Option label to record and display only JavaScript-triggered announcements.
+   */
+  announcementsOnly: 'Announcements only',
+  /**
+   * @description Placeholder text for the filter input in the announcements tool.
+   */
+  filter: 'Filter',
+  /**
+   * @description Screen reader announcement when no events match the filter in the announcements tool.
+   */
+  noEventsMatch: 'No events match',
+  /**
+   * @description Screen reader announcement when exactly one event matches the filter in the announcements tool.
+   */
+  oneEventMatches: '1 event matches',
+  /**
+   * @description Screen reader announcement when multiple events match the filter in the announcements tool.
+   * @example {15} PH1
+   */
+  nEventsMatch: '{PH1} events match',
+  /**
+   * @description Warning banner title shown when recording could not be enabled in some frames.
+   */
+  recordingBlockedWarning: 'Recording was blocked for some frames:',
+  /**
+   * @description Warning item describing a specific frame and the reason recording was blocked.
+   * @example {iframe#main} PH1
+   * @example {Script evaluation failed} PH2
+   */
+  frameBlockedReason: '{PH1}: {PH2}',
+  /**
+   * @description Fallback reason shown when an unknown error occurs while blocking recording.
+   */
+  unknownError: 'Unknown error',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/accessibility/AccessibilityAnnouncementRecordingView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export const BINDING_NAME = '__announcementsRecorderBinding';
 
-export const enum AnnouncementApi {
+export enum AnnouncementApi {
   ARIA_LIVE = 'aria-live',
   JS_TRIGGERED = 'js-triggered',
 }
 
+export const enum RecordTypeFilter {
+  BOTH = 'both',
+  ARIA_LIVE = 'aria-live',
+  JS_TRIGGERED = 'js-triggered',
+}
+
+export interface BlockedTargetInfo {
+  targetName: string;
+  reason: string;
+}
+
+export interface ViewInput {
+  isRecording: boolean;
+  onToggleRecording: () => void;
+  onClear: () => void;
+  recordTypeFilter: RecordTypeFilter;
+  onRecordTypeFilterChange: (type: RecordTypeFilter) => void;
+  textFilter: string;
+  onTextFilterChange: (text: string) => void;
+  blockedTargets: BlockedTargetInfo[];
+  announcements: readonly A11yAnnouncement[];
+}
+
+export type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  // clang-format off
+  render(html`
+    <style>${accessibilityAnnouncementRecordingViewStyles}</style>
+    <div class="accessibility-announcement-recording-view">
+      <div class="announcements-toolbar-container">
+        <devtools-toolbar class="announcements-toolbar" jslog=${VisualLogging.toolbar()}>
+          <devtools-button
+            title=${input.isRecording ? i18nString(UIStrings.stopRecording) : i18nString(UIStrings.startRecording)}
+            aria-label=${input.isRecording ? i18nString(UIStrings.stopRecording) : i18nString(UIStrings.startRecording)}
+            .iconName=${'record-start'}
+            .toggledIconName=${'record-stop'}
+            .toggleType=${Buttons.Button.ToggleType.PRIMARY}
+            .toggled=${input.isRecording}
+            @click=${input.onToggleRecording}
+            .variant=${Buttons.Button.Variant.TOOLBAR}
+            .jslogContext=${'accessibility.toggle-recording'}>
+          </devtools-button>
+          <devtools-button
+            title=${i18nString(UIStrings.clearAnnouncements)}
+            aria-label=${i18nString(UIStrings.clearAnnouncements)}
+            .iconName=${'clear'}
+            @click=${input.onClear}
+            .variant=${Buttons.Button.Variant.TOOLBAR}
+            .jslogContext=${'accessibility.clear-announcements'}>
+          </devtools-button>
+          <div class="toolbar-divider" role="separator"></div>
+          <select
+            title=${i18nString(UIStrings.filterByType)}
+            aria-label=${i18nString(UIStrings.filterByType)}
+            @change=${(event: Event) => input.onRecordTypeFilterChange((event.target as HTMLSelectElement).value as RecordTypeFilter)}
+            .value=${input.recordTypeFilter}
+            jslog=${VisualLogging.dropDown('accessibility-announcements.filter-by-type').track({change: true})}>
+            <option value=${RecordTypeFilter.BOTH} .selected=${input.recordTypeFilter === RecordTypeFilter.BOTH}>
+              ${i18nString(UIStrings.recordBoth)}
+            </option>
+            <option value=${RecordTypeFilter.ARIA_LIVE} .selected=${input.recordTypeFilter === RecordTypeFilter.ARIA_LIVE}>
+              ${i18nString(UIStrings.ariaLiveOnly)}
+            </option>
+            <option value=${RecordTypeFilter.JS_TRIGGERED} .selected=${input.recordTypeFilter === RecordTypeFilter.JS_TRIGGERED}>
+              ${i18nString(UIStrings.announcementsOnly)}
+            </option>
+          </select>
+          <div class="toolbar-divider" role="separator"></div>
+          <devtools-toolbar-input
+            type="filter"
+            placeholder=${i18nString(UIStrings.filter)}
+            .value=${input.textFilter}
+            @change=${(event: CustomEvent<string>) => input.onTextFilterChange(event.detail)}
+            style="flex-grow: 1">
+          </devtools-toolbar-input>
+        </devtools-toolbar>
+      </div>
+      ${input.blockedTargets.length > 0 ? html`
+        <div class="announcements-blocked-banner" role="alert">
+          <div class="blocked-banner-header">
+            <devtools-icon name="warning-filled"></devtools-icon>
+            <span>${i18nString(UIStrings.recordingBlockedWarning)}</span>
+          </div>
+          <ul class="blocked-targets-list">
+            ${input.blockedTargets.map(targetInfo => html`
+              <li>${i18nString(UIStrings.frameBlockedReason, {PH1: targetInfo.targetName, PH2: targetInfo.reason || i18nString(UIStrings.unknownError)})}</li>
+            `)}
+          </ul>
+        </div>
+      ` : Lit.nothing}
+      <div class="announcements-main-pane">
+        ${widget(AccessibilityAnnouncementRecordingListView, {items: input.announcements})}
+      </div>
+    </div>`,
+    target);
+  // clang-format on
+};
+
 declare global {
   interface Window {
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -564,17 +731,23 @@ export function validateAndSanitizeAnnouncement(payload: unknown): A11yAnnouncem
 
 export class AccessibilityAnnouncementRecordingView extends AccessibilitySubPane implements SDK.TargetManager.Observer {
   #announcements: A11yAnnouncement[] = [];
+  #filteredAnnouncements: readonly A11yAnnouncement[]|null = null;
   #isRecording = false;
   #blockedTargets = new Map<SDK.Target.Target, string>();
   #scriptIdentifiers = new Map<SDK.Target.Target, Protocol.Page.ScriptIdentifier>();
   #targets = new Set<SDK.Target.Target>();
   #enabledTargets = new Set<SDK.Target.Target>();
+  #recordTypeFilter: RecordTypeFilter = RecordTypeFilter.BOTH;
+  #textFilter = '';
+  #regexFilter: RegExp|null = null;
+  readonly #view: View;
 
-  constructor() {
+  constructor(view: View = DEFAULT_VIEW) {
     super({
       title: i18nString(UIStrings.ariaLiveRecording),
       viewId: 'aria-live-recording',
     });
+    this.#view = view;
     SDK.TargetManager.TargetManager.instance().observeTargets(this, {scoped: true});
   }
 
@@ -595,8 +768,11 @@ export class AccessibilityAnnouncementRecordingView extends AccessibilitySubPane
 
   async targetRemoved(target: SDK.Target.Target): Promise<void> {
     this.#targets.delete(target);
-    this.#blockedTargets.delete(target);
+    const wasBlocked = this.#blockedTargets.delete(target);
     await this.#disableTarget(target);
+    if (wasBlocked) {
+      this.requestUpdate();
+    }
   }
 
   async #enableTarget(target: SDK.Target.Target): Promise<void> {
@@ -708,6 +884,11 @@ export class AccessibilityAnnouncementRecordingView extends AccessibilitySubPane
       return;
     }
     this.#announcements.push(announcement);
+    if (this.#filteredAnnouncements !== null) {
+      if (this.#matchesFilter(announcement)) {
+        this.#filteredAnnouncements = [...this.#filteredAnnouncements, announcement];
+      }
+    }
     this.requestUpdate();
   }
 
@@ -736,9 +917,106 @@ export class AccessibilityAnnouncementRecordingView extends AccessibilitySubPane
 
   clearAnnouncements(): void {
     this.#announcements = [];
+    this.#filteredAnnouncements = [];
+    this.requestUpdate();
+  }
+
+  #matchesFilter(announcement: A11yAnnouncement): boolean {
+    if (this.#recordTypeFilter === RecordTypeFilter.ARIA_LIVE && announcement.api !== AnnouncementApi.ARIA_LIVE) {
+      return false;
+    }
+    if (this.#recordTypeFilter === RecordTypeFilter.JS_TRIGGERED && announcement.api !== AnnouncementApi.JS_TRIGGERED) {
+      return false;
+    }
+    if (this.#regexFilter && !this.#regexFilter.test(announcement.message)) {
+      return false;
+    }
+    return true;
+  }
+
+  get filteredAnnouncements(): readonly A11yAnnouncement[] {
+    if (this.#filteredAnnouncements !== null) {
+      return this.#filteredAnnouncements;
+    }
+    this.#filteredAnnouncements = this.#announcements.filter(announcement => this.#matchesFilter(announcement));
+    return this.#filteredAnnouncements;
+  }
+
+  #announceFilterMatches(): void {
+    const count = this.filteredAnnouncements.length;
+    let message: string;
+    if (count === 0) {
+      message = i18nString(UIStrings.noEventsMatch);
+    } else if (count === 1) {
+      message = i18nString(UIStrings.oneEventMatches);
+    } else {
+      message = i18nString(UIStrings.nEventsMatch, {PH1: count});
+    }
+    UI.ARIAUtils.LiveAnnouncer.alert(message);
+  }
+
+  setRecordTypeFilter(type: RecordTypeFilter): void {
+    if (this.#recordTypeFilter === type) {
+      return;
+    }
+    this.#recordTypeFilter = type;
+    this.#filteredAnnouncements = null;
+    this.#announceFilterMatches();
     this.requestUpdate();
   }
 
+  setTextFilter(text: string): void {
+    if (this.#textFilter === text) {
+      return;
+    }
+    this.#textFilter = text;
+    if (!text) {
+      this.#regexFilter = null;
+    } else {
+      try {
+        this.#regexFilter = new RegExp(text, 'i');
+      } catch {
+        this.#regexFilter = new RegExp('(?!)', 'i');
+      }
+    }
+    this.#filteredAnnouncements = null;
+    this.#announceFilterMatches();
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    const blockedTargets: BlockedTargetInfo[] = [];
+    for (const [target, reason] of this.#blockedTargets) {
+      const targetName = target.name() || target.inspectedURL() || target.id();
+      blockedTargets.push({targetName, reason});
+    }
+
+    const input: ViewInput = {
+      isRecording: this.#isRecording,
+      onToggleRecording: () => {
+        if (this.#isRecording) {
+          void this.stopRecording();
+        } else {
+          void this.startRecording();
+        }
+      },
+      onClear: () => {
+        this.clearAnnouncements();
+      },
+      recordTypeFilter: this.#recordTypeFilter,
+      onRecordTypeFilterChange: (type: RecordTypeFilter) => {
+        this.setRecordTypeFilter(type);
+      },
+      textFilter: this.#textFilter,
+      onTextFilterChange: (text: string) => {
+        this.setTextFilter(text);
+      },
+      blockedTargets,
+      announcements: this.filteredAnnouncements,
+    };
+    this.#view(input, undefined, this.contentElement);
+  }
+
   announcementsForTest(): A11yAnnouncement[] {
     return [...this.#announcements];
   }

package/front_end/panels/accessibility/accessibilityAnnouncementRecordingView.css

@@ -0,0 +1,85 @@
+/*
+ * 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 > *) {
+  :scope {
+    font-family: inherit;
+    display: flex;
+    flex-direction: column;
+    flex: auto;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .accessibility-announcement-recording-view {
+    display: flex;
+    flex-direction: column;
+    flex: auto;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .announcements-toolbar-container {
+    display: flex;
+    flex: none;
+    background-color: var(--sys-color-cdt-base-container);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+  }
+
+  .announcements-toolbar {
+    flex: auto;
+  }
+
+  .announcements-toolbar select {
+    background-color: transparent;
+    border: none;
+    color: var(--sys-color-on-surface);
+    font-size: var(--sys-typescale-body4-size);
+    padding: var(--sys-size-2) var(--sys-size-4);
+    height: 100%;
+    cursor: pointer;
+  }
+
+  .toolbar-divider {
+    background-color: var(--sys-color-divider);
+    width: var(--sys-size-1);
+    margin: 5px var(--sys-size-3);
+    height: var(--sys-size-8);
+  }
+
+  .announcements-blocked-banner {
+    display: flex;
+    flex-direction: column;
+    flex: none;
+    gap: var(--sys-size-3);
+    padding: var(--sys-size-5) var(--sys-size-8);
+    background-color: var(--sys-color-surface-yellow);
+    color: var(--sys-color-on-surface-yellow);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+    font-size: var(--sys-typescale-body4-size);
+    line-height: var(--sys-typescale-body4-line-height);
+  }
+
+  .blocked-banner-header {
+    display: flex;
+    align-items: center;
+    gap: var(--sys-size-4);
+    font-weight: var(--ref-typeface-weight-medium);
+  }
+
+  .blocked-targets-list {
+    margin: 0;
+    padding-left: var(--sys-size-8);
+  }
+
+  .announcements-main-pane {
+    display: flex;
+    flex-direction: column;
+    flex: auto;
+    min-height: 0;
+    overflow: hidden;
+  }
+}

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -391,9 +391,8 @@ function toolbarView(input: ToolbarViewInput): Lit.LitTemplate {
           @click=${input.onNewChatClick}></devtools-button>
         <div class="toolbar-divider"></div>
         <devtools-menu-button
-          title=${i18nString(UIStrings.history)}
-          aria-label=${i18nString(UIStrings.history)}
           .iconName=${'history'}
+          .accessibleLabel=${i18nString(UIStrings.history)}
           .jslogContext=${'freestyler.history'}
           .populateMenuCall=${input.populateHistoryMenu}
         ></devtools-menu-button>`

package/front_end/panels/animation/AnimationTimeline.ts

@@ -72,7 +72,7 @@ const UIStrings = {
   /**
    * @description Empty buffer hint text content in the animation timeline of the Animations panel that explains the panel.
    */
-  animationDescription: 'On this page you can inspect and modify animations.',
+  animationDescription: 'On this page you can inspect and modify animations',
   /**
    * @description Tooltip text that appears when hovering over largeicon replay animation button in the animation timeline of the Animations panel.
    */

package/front_end/panels/application/CrashReportContextView.ts

@@ -20,7 +20,7 @@ const UIStrings = {
   /**
    * @description Placeholder text when no context is detected.
    */
-  noContext: 'No context entries detected across frames.',
+  noContext: 'No context entries detected across frames',
   /**
    * @description Fallback label when a frame has no URL.
    */

package/front_end/panels/application/IndexedDBViews.ts

@@ -289,7 +289,7 @@ const populateContextMenu = (e: CustomEvent<UI.ContextMenu.ContextMenu>): void =
 const renderDataGrid = (input: IndexedDBDataViewInput): LitTemplate => {
   const keyPath = input.isIndex && input.index ? input.index.keyPath : input.objectStore.keyPath;
   // clang-format off
-  return html`<devtools-data-grid row-height="auto" striped style="flex: auto;" name=${i18nString(UIStrings.indexedDb)} .template=${html`
+  return html`<devtools-data-grid row-height="auto" striped deletable style="flex: auto;" name=${i18nString(UIStrings.indexedDb)} .template=${html`
     <style>${indexedDBViewsStyles}</style>
     <table>
       <tr>

package/front_end/panels/application/KeyValueStorageItemsView.ts

@@ -153,6 +153,7 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
                 <devtools-data-grid
                   .name=${`${id}-datagrid-with-preview`}
                   striped
+                  deletable
                   style="flex: auto"
                   @sort=${(e: CustomEvent<{columnId: string, ascending: boolean}>) => input.onSort(e.detail.ascending)}
                   @refresh=${input.onRefresh}

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

@@ -23,6 +23,12 @@ const {html} = Lit;
 const {repeat} = Lit.Directives;
 const {bindToSetting} = UI.UIUtils;
 
+const DENSITY_DOC_URL = 'https://developer.chrome.com/docs/ads/metrics/density';
+const COUNT_DOC_URL = 'https://developer.chrome.com/docs/ads/metrics/count';
+const CPU_USAGE_DOC_URL = 'https://developer.chrome.com/docs/ads/metrics/weight-cpu';
+const NETWORK_USAGE_DOC_URL = 'https://developer.chrome.com/docs/ads/metrics/weight-network';
+const AD_DETECTION_DOC_URL = 'https://developer.chrome.com/docs/ads/detection';
+
 const UIStrings = {
   /**
    * @description Title for the metrics table.
@@ -32,18 +38,34 @@ const UIStrings = {
    * @description Title for a metric showing the percentage of the viewport covered by ads.
    */
   viewportAdDensity: 'Viewport ad density',
+  /**
+   * @description Tooltip text explaining the viewport ad density metric in the ads view of the Application panel.
+   */
+  viewportAdDensityExplanation: 'Percentage of the viewport covered by ads',
   /**
    * @description Title for a metric showing the number of ads in the viewport.
    */
   viewportAdCount: 'Viewport ad count',
+  /**
+   * @description Tooltip text explaining the viewport ad count metric in the ads view of the Application panel.
+   */
+  viewportAdCountExplanation: 'Number of ads in the viewport',
   /**
    * @description Title for a metric showing the total CPU usage by ads.
    */
   totalCpuUsage: 'Total CPU usage by ads',
+  /**
+   * @description Tooltip text explaining the total CPU usage metric in the ads view of the Application panel.
+   */
+  totalCpuUsageExplanation: 'Total CPU time consumed by ads',
   /**
    * @description Title for a metric showing the total network usage by ads.
    */
   totalNetworkUsage: 'Total network usage by ads',
+  /**
+   * @description Tooltip text explaining the total network usage metric in the ads view of the Application panel.
+   */
+  totalNetworkUsageExplanation: 'Total network data consumed by ads',
   /**
    * @description Subtext showing the average value of a metric.
    * @example {5.00%} PH1
@@ -231,6 +253,26 @@ const DEFAULT_VIEW: View = (input, output, target) => {
     });
   };
 
+  const renderMetricTooltip = (tooltipId: string, explanation: string, url: string): Lit.LitTemplate => {
+    return html`
+      <devtools-icon
+        name="info"
+        class="small metric-info-icon"
+        tabindex="0"
+        role="button"
+        aria-details=${tooltipId}
+        aria-label=${explanation}
+      ></devtools-icon>
+      <devtools-tooltip id=${tooltipId} variant="rich" prefer-span-left @copy=${stopPropagation}>
+        <span>${explanation}</span>
+        &#32;
+        <devtools-link href=${url} jslogcontext="learn-more">
+          ${i18nString(UIStrings.learnMore)}
+        </devtools-link>
+      </devtools-tooltip>
+    `;
+  };
+
   // clang-format off
   Lit.render(html`
     <style>${adsViewStyles}</style>
@@ -245,6 +287,11 @@ const DEFAULT_VIEW: View = (input, output, target) => {
                 PH1: formatAverage(metrics.averageViewportAdDensityByArea, true),
               })}</span>
           </dd>
+          ${renderMetricTooltip(
+            'density-metric-tooltip',
+            i18nString(UIStrings.viewportAdDensityExplanation),
+            DENSITY_DOC_URL,
+          )}
         </div>
         <div class="metric-box">
           <dt class="metric-title">${i18nString(UIStrings.viewportAdCount)}</dt>
@@ -254,18 +301,33 @@ const DEFAULT_VIEW: View = (input, output, target) => {
                 PH1: formatAverage(metrics.averageViewportAdCount, false),
               })}</span>
           </dd>
+          ${renderMetricTooltip(
+            'count-metric-tooltip',
+            i18nString(UIStrings.viewportAdCountExplanation),
+            COUNT_DOC_URL,
+          )}
         </div>
         <div class="metric-box">
           <dt class="metric-title">${i18nString(UIStrings.totalCpuUsage)}</dt>
           <dd class="metric-value">
             <span>${formatCpu(metrics.totalAdCpuTime)}</span>
           </dd>
+          ${renderMetricTooltip(
+            'cpu-metric-tooltip',
+            i18nString(UIStrings.totalCpuUsageExplanation),
+            CPU_USAGE_DOC_URL,
+          )}
         </div>
         <div class="metric-box">
           <dt class="metric-title">${i18nString(UIStrings.totalNetworkUsage)}</dt>
           <dd class="metric-value">
             <span>${formatNetwork(metrics.totalAdNetworkBytes)}</span>
           </dd>
+          ${renderMetricTooltip(
+            'network-metric-tooltip',
+            i18nString(UIStrings.totalNetworkUsageExplanation),
+            NETWORK_USAGE_DOC_URL,
+          )}
         </div>
       </dl>
       <hr class="divider">
@@ -374,7 +436,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
         <span>
           ${i18nString(UIStrings.adDetectionMistakes)}
           &#32;
-          <devtools-link class="link devtools-link" href="https://chromium.googlesource.com/chromium/src/+/main/docs/ad_tagging.md" jslogcontext="learn-more">
+          <devtools-link href=${AD_DETECTION_DOC_URL} jslogcontext="learn-more">
             ${i18nString(UIStrings.learnMore)}
           </devtools-link>
         </span>

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

@@ -29,17 +29,20 @@
 
 .metric-box {
   background-color: var(--sys-color-surface);
-  padding: var(--sys-size-6);
+  padding: var(--sys-size-4);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  position: relative;
 }
 
 .metric-title {
   font-size: var(--sys-typescale-body4-size);
   color: var(--sys-color-on-surface-subtle);
   margin: 0 0 var(--sys-size-3);
+  padding: 0 var(--sys-size-8);
+  text-align: center;
 }
 
 .metric-value {
@@ -59,6 +62,13 @@
   color: var(--sys-color-on-surface-subtle);
 }
 
+.metric-info-icon {
+  position: absolute;
+  top: var(--sys-size-4);
+  right: var(--sys-size-4);
+  cursor: pointer;
+}
+
 .metrics-title,
 .ad-frames-title,
 .ad-scripts-title,