chrome-devtools-frontend 1.0.1521880 → 1.0.1522585

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

@@ -1,23 +1,17 @@
 // Copyright 2021 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable rulesdir/no-lit-render-outside-of-view */
 
 import '../../../ui/legacy/components/data_grid/data_grid.js';
-import '../../../ui/components/icon_button/icon_button.js';
-import '../../../ui/legacy/legacy.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
 import type * as Protocol from '../../../generated/protocol.js';
-// inspectorCommonStyles is imported for the empty state styling that is used for the start view
-// eslint-disable-next-line rulesdir/es-modules-import
-import inspectorCommonStyles from '../../../ui/legacy/inspectorCommon.css.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 reportingApiGridStyles from './reportingApiGrid.css.js';
+import reportsGridStyles from './reportsGrid.css.js';
 
 const UIStrings = {
   /**
@@ -48,7 +42,7 @@ const UIStrings = {
    * @description Column header for a table displaying Reporting API reports.
    *The column contains the timestamp of when a report was generated.
    */
-  generatedAt: 'Generated at'
+  generatedAt: 'Generated at',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/ReportsGrid.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -57,115 +51,100 @@ const {render, html} = Lit;
 
 const REPORTING_API_EXPLANATION_URL = 'https://developer.chrome.com/docs/capabilities/web-apis/reporting-api';
 
-export class ReportsGridStatusHeader extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-
-  connectedCallback(): void {
-    this.#render();
-  }
-
-  #render(): void {
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    render(html`
-      <style>${reportingApiGridStyles}</style>
-      <span class="status-header">${i18nString(UIStrings.status)}</span>
-      <x-link href="https://web.dev/reporting-api/#report-status"
-      jslog=${VisualLogging.link('report-status').track({click: true})}>
-        <devtools-icon class="inline-icon medium" name="help" style="color: var(--icon-link);"></devtools-icon>
-      </x-link>
-    `, this.#shadow, {host: this});
-    // clang-format on
-  }
-}
-
 export interface ReportsGridData {
   reports: Protocol.Network.ReportingApiReport[];
 }
 
-export class ReportsGrid extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #reports: Protocol.Network.ReportingApiReport[] = [];
-  #protocolMonitorExperimentEnabled = false;
+export interface ViewInput {
+  reports: Protocol.Network.ReportingApiReport[];
+  protocolMonitorExperimentEnabled: boolean;
+  onSelect: (e: CustomEvent<HTMLElement|null>) => void;
+}
 
-  connectedCallback(): void {
-    this.#protocolMonitorExperimentEnabled = Root.Runtime.experiments.isEnabled('protocol-monitor');
-    this.#render();
-  }
+export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLElement): void => {
+  // clang-format off
+  render(html`
+    <style>${reportsGridStyles}</style>
+    <style>${UI.inspectorCommonStyles}</style>
+    <div class="reporting-container" jslog=${VisualLogging.section('reports')}>
+      <div class="reporting-header">${i18n.i18n.lockedString('Reports')}</div>
+      ${input.reports.length > 0 ? html`
+        <devtools-data-grid striped @select=${input.onSelect}>
+          <table>
+            <tr>
+              ${input.protocolMonitorExperimentEnabled ? html`
+                <th id="id" weight="30">${i18n.i18n.lockedString('ID')}</th>
+              ` : ''}
+              <th id="url" weight="30">${i18n.i18n.lockedString('URL')}</th>
+              <th id="type" weight="20">${i18n.i18n.lockedString('Type')}</th>
+              <th id="status" weight="20">
+                <style>${reportsGridStyles}</style>
+                <span class="status-header">${i18nString(UIStrings.status)}</span>
+                <x-link href="https://web.dev/reporting-api/#report-status"
+                jslog=${VisualLogging.link('report-status').track({click: true})}>
+                  <devtools-icon class="inline-icon medium" name="help" style="color: var(--icon-link);"
+                  ></devtools-icon>
+                </x-link>
+              </th>
+              <th id="destination" weight="20">${i18nString(UIStrings.destination)}</th>
+              <th id="timestamp" weight="20">${i18nString(UIStrings.generatedAt)}</th>
+              <th id="body" weight="20">${i18n.i18n.lockedString('Body')}</th>
+            </tr>
+            ${input.reports.map(report => html`
+              <tr data-id=${report.id}>
+                ${input.protocolMonitorExperimentEnabled ? html`<td>${report.id}</td>` : ''}
+                <td>${report.initiatorUrl}</td>
+                <td>${report.type}</td>
+                <td>${report.status}</td>
+                <td>${report.destination}</td>
+                <td>${new Date(report.timestamp * 1000).toLocaleString()}</td>
+                <td>${JSON.stringify(report.body)}</td>
+              </tr>
+            `)}
+          </table>
+        </devtools-data-grid>
+      ` : html`
+        <div class="empty-state">
+          <span class="empty-state-header">${i18nString(UIStrings.noReportsToDisplay)}</span>
+          <div class="empty-state-description">
+            <span>${i18nString(UIStrings.reportingApiDescription)}</span>
+            ${UI.XLink.XLink.create(REPORTING_API_EXPLANATION_URL, i18nString(UIStrings.learnMore), undefined,
+              undefined, 'learn-more')}
+          </div>
+        </div>
+      `}
+    </div>
+  `, target);
+  // clang-format on
+};
 
-  set data(data: ReportsGridData) {
-    this.#reports = data.reports;
-    this.#render();
-  }
+type View = typeof DEFAULT_VIEW;
 
-  get data(): ReportsGridData {
-    return {reports: this.#reports};
-  }
+export class ReportsGrid extends UI.Widget.Widget {
+  reports: Protocol.Network.ReportingApiReport[] = [];
+  #protocolMonitorExperimentEnabled = false;
+  #view: View;
+  onReportSelected: (id: string) => void = () => {};
 
-  #render(): void {
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    render(html`
-      <style>${reportingApiGridStyles}</style>
-      <style>${inspectorCommonStyles}</style>
-      <div class="reporting-container" jslog=${VisualLogging.section('reports')}>
-        <div class="reporting-header">${i18n.i18n.lockedString('Reports')}</div>
-        ${this.#reports.length > 0 ? html`
-          <devtools-data-grid striped @select=${this.#onSelect}>
-            <table>
-              <tr>
-                ${this.#protocolMonitorExperimentEnabled ? html`
-                  <th id="id" weight="30">${i18n.i18n.lockedString('ID')}</th>
-                ` : ''}
-                <th id="url" weight="30">${i18n.i18n.lockedString('URL')}</th>
-                <th id="type" weight="20">${i18n.i18n.lockedString('Type')}</th>
-                <th id="status" weight="20">
-                    <devtools-resources-reports-grid-status-header></devtools-resources-reports-grid-status-header>
-                </th>
-                <th id="destination" weight="20">${i18nString(UIStrings.destination)}</th>
-                <th id="timestamp" weight="20">${i18nString(UIStrings.generatedAt)}</th>
-                <th id="body" weight="20">${i18n.i18n.lockedString('Body')}</th>
-              </tr>
-              ${this.#reports.map(report => html`
-                <tr data-id=${report.id}>
-                  ${this.#protocolMonitorExperimentEnabled ? html`<td>${report.id}</td>` : ''}
-                  <td>${report.initiatorUrl}</td>
-                  <td>${report.type}</td>
-                  <td>${report.status}</td>
-                  <td>${report.destination}</td>
-                  <td>${new Date(report.timestamp * 1000).toLocaleString()}</td>
-                  <td>${JSON.stringify(report.body)}</td>
-                </tr>
-              `)}
-            </table>
-          </devtools-data-grid>
-        ` : html`
-          <div class="empty-state">
-            <span class="empty-state-header">${i18nString(UIStrings.noReportsToDisplay)}</span>
-            <div class="empty-state-description">
-              <span>${i18nString(UIStrings.reportingApiDescription)}</span>
-              ${UI.XLink.XLink.create(REPORTING_API_EXPLANATION_URL, i18nString(UIStrings.learnMore), undefined, undefined, 'learn-more')}
-            </div>
-          </div>
-        `}
-      </div>
-    `, this.#shadow, {host: this});
-    // clang-format on
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+    this.#protocolMonitorExperimentEnabled = Root.Runtime.experiments.isEnabled('protocol-monitor');
+    this.requestUpdate();
   }
 
-  #onSelect(e: CustomEvent<HTMLElement|null>): void {
-    if (e.detail) {
-      this.dispatchEvent(new CustomEvent('select', {detail: e.detail.dataset.id}));
+  #onSelect = (e: CustomEvent<HTMLElement|null>): void => {
+    if (e.detail?.dataset.id) {
+      this.onReportSelected(e.detail.dataset.id);
     }
-  }
-}
-
-customElements.define('devtools-resources-reports-grid-status-header', ReportsGridStatusHeader);
-customElements.define('devtools-resources-reports-grid', ReportsGrid);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-resources-reports-grid-status-header': ReportsGridStatusHeader;
-    'devtools-resources-reports-grid': ReportsGrid;
+  };
+
+  override performUpdate(): void {
+    const viewInput = {
+      reports: this.reports,
+      protocolMonitorExperimentEnabled: this.#protocolMonitorExperimentEnabled,
+      onSelect: this.#onSelect,
+    };
+    this.#view(viewInput, undefined, this.contentElement);
   }
 }

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

@@ -14,6 +14,8 @@ import * as RenderCoordinator from '../../../ui/components/render_coordinator/re
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 
+import storageMetadataViewStyle from './storageMetadataView.css.js';
+
 const {html} = Lit;
 
 const UIStrings = {
@@ -21,7 +23,7 @@ const UIStrings = {
    * @description The origin of a URL (https://web.dev/same-site-same-origin/#origin).
    *(for a lot of languages this does not need to be translated, please translate only where necessary)
    */
-  origin: 'Origin',
+  origin: 'Frame origin',
   /**
    * @description Site (https://web.dev/same-site-same-origin/#site) for the URL the user sees in the omnibox.
    */
@@ -118,6 +120,7 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
   #storageBucketsModel?: SDK.StorageBucketsModel.StorageBucketsModel;
   #storageKey: SDK.StorageKeyManager.StorageKey|null = null;
   #storageBucket: Protocol.Storage.StorageBucketInfo|null = null;
+  #showOnlyBucket = true;
 
   setStorageKey(storageKey: string): void {
     this.#storageKey = SDK.StorageKeyManager.parseStorageKey(storageKey);
@@ -129,6 +132,10 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
     this.setStorageKey(storageBucket.bucket.storageKey);
   }
 
+  setShowOnlyBucket(show: boolean): void {
+    this.#showOnlyBucket = show;
+  }
+
   enableStorageBucketControls(model: SDK.StorageBucketsModel.StorageBucketsModel): void {
     this.#storageBucketsModel = model;
     if (this.#storageKey) {
@@ -141,6 +148,9 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       Lit.render(html`
+        <style>
+          ${storageMetadataViewStyle}
+        </style>
         <devtools-report .data=${{reportTitle: this.getTitle() ?? i18nString(UIStrings.loading)}}>
           ${await this.renderReportContent()}
         </devtools-report>`, this.#shadow, {host: this});
@@ -181,11 +191,16 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
         topLevelSiteIsOpaque                           ? i18nString(UIStrings.yesBecauseTopLevelIsOpaque) :
         (topLevelSite && origin !== topLevelSite)      ? i18nString(UIStrings.yesBecauseOriginNotInTopLevelSite) :
                                                          null;
+
+    const isIframeOrEmbedded = topLevelSite && origin !== topLevelSite;
+
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
-        ${this.key(i18nString(UIStrings.origin))}
-        ${this.value(html`<div class="text-ellipsis" title=${origin}>${origin}</div>`)}
+        ${(isIframeOrEmbedded) ?
+          html`${this.key(i18nString(UIStrings.origin))}
+            ${this.value(html`<div class="text-ellipsis" title=${origin}>${origin}</div>`)}`
+          : Lit.nothing}
         ${(topLevelSite || topLevelSiteIsOpaque) ? this.key(i18nString(UIStrings.topLevelSite)) : Lit.nothing}
         ${topLevelSite ? this.value(topLevelSite) : Lit.nothing}
         ${topLevelSiteIsOpaque ? this.value(i18nString(UIStrings.opaque)) : Lit.nothing}
@@ -205,11 +220,22 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
       throw new Error('Should not call #renderStorageBucketInfo if #bucket is null.');
     }
     const {bucket: {name}, persistent, durability, quota} = this.#storageBucket;
+    const isDefault = !name;
 
+    if (!this.#showOnlyBucket) {
+      if (isDefault) {
+        return html`
+          ${this.key(i18nString(UIStrings.bucketName))}
+          ${this.value(html`<span class="default-bucket">default</span>`)}`;
+      }
+      return html`
+        ${this.key(i18nString(UIStrings.bucketName))}
+        ${this.value(name)}`;
+    }
     // clang-format off
     return html`
       ${this.key(i18nString(UIStrings.bucketName))}
-      ${this.value(name || 'default')}
+      ${this.value(name || html`<span class="default-bucket">default</span>`)}
       ${this.key(i18nString(UIStrings.persistent))}
       ${this.value(persistent ? i18nString(UIStrings.yes) : i18nString(UIStrings.no))}
       ${this.key(i18nString(UIStrings.durability))}

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

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2025 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 {
+    overflow: auto;
+    height: 100%;
+  }
+
+  .endpoints-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .endpoints-header {
+    font-size: 15px;
+    background-color: var(--sys-color-surface2);
+    padding: 1px 4px;
+    flex-shrink: 0;
+  }
+
+  devtools-data-grid {
+    flex: auto;
+  }
+}

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

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2025 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 {
+    overflow: auto;
+    height: 100%;
+  }
+
+  .reporting-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .reporting-header {
+    font-size: 15px;
+    background-color: var(--sys-color-surface2);
+    padding: 1px 4px;
+    flex-shrink: 0;
+  }
+
+  devtools-data-grid {
+    flex: auto;
+  }
+
+  .inline-icon {
+    vertical-align: text-bottom;
+  }
+}

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

@@ -0,0 +1,9 @@
+/*
+ * Copyright 2025 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.default-bucket {
+  font-style: italic;
+}

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -183,29 +183,23 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
             'source-code': true,
             'breakpoint-hit': input.highlightedItem === breakpoint,
           });
-  const categoryConfigElements = new WeakMap<HTMLLIElement, SDK.CategorizedBreakpoint.Category>();
-  const trackCategoryConfigElement = (category: SDK.CategorizedBreakpoint.Category): ReturnType<typeof ref> =>
-      ref((e: Element|undefined) => {
-        if (e instanceof HTMLLIElement) {
-          categoryConfigElements.set(e, category);
-        }
-      });
-  const onExpand = ({detail: {expanded, target}}: UI.TreeOutline.TreeViewElement.ExpandEvent): void => {
-    const category = categoryConfigElements.get(target);
-    const breakpoints = category && input.categories.get(category);
-    if (!breakpoints) {
-      return;
-    }
-    if (shouldExpandCategory(breakpoints)) {
-      // Basically ignore expand/collapse when the category is expanded by default.
-      return;
-    }
-    if (expanded) {
-      output.userExpandedCategories.add(category);
-    } else {
-      output.userExpandedCategories.delete(category);
-    }
-  };
+  const onExpand =
+      (category: SDK.CategorizedBreakpoint.Category, {detail: {expanded}}: UI.TreeOutline.TreeViewElement.ExpandEvent):
+          void => {
+            const breakpoints = category && input.categories.get(category);
+            if (!breakpoints) {
+              return;
+            }
+            if (shouldExpandCategory(breakpoints)) {
+              // Basically ignore expand/collapse when the category is expanded by default.
+              return;
+            }
+            if (expanded) {
+              output.userExpandedCategories.add(category);
+            } else {
+              output.userExpandedCategories.delete(category);
+            }
+          };
 
   render(
       // clang-format off
@@ -219,17 +213,15 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
     </devtools-toolbar>
     <devtools-tree
       ${ref(e => { output.defaultFocus = e; })}
-      @expand=${onExpand}
       .template=${html`
         <ul role="tree">
           ${filteredCategories.map(([category, breakpoints]) => html`
-            <li
+            <li @expand=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) => onExpand(category, e)}
                 role="treeitem"
                 jslog-context=${category}
                 aria-checked=${breakpoints.some(breakpoint => breakpoint.enabled())
                   ? breakpoints.some(breakpoint => !breakpoint.enabled()) ? 'mixed' : true
-                  : false}
-                ${trackCategoryConfigElement(category)}>
+                  : false}>
               <style>${categorizedBreakpointsSidebarPaneStyles}</style>
               <devtools-checkbox
                 class="small"

package/front_end/panels/common/BadgeNotification.ts

@@ -192,7 +192,14 @@ export class BadgeNotification extends UI.Widget.Widget {
   }
 
   async #presentStarterBadge(badge: Badges.Badge): Promise<void> {
-    const gdpProfile = await Host.GdpClient.GdpClient.instance().getProfile();
+    const getProfileResponse = await Host.GdpClient.GdpClient.instance().getProfile();
+    // The `getProfile` call failed and returned a `null`.
+    // For that case, we don't show anything.
+    if (!getProfileResponse) {
+      return;
+    }
+
+    const hasGdpProfile = Boolean(getProfileResponse.profile);
     const receiveBadgesSettingEnabled = Badges.UserBadges.instance().isReceiveBadgesSettingEnabled();
     const googleDeveloperProgramLink = UI.XLink.XLink.create(
         'https://developers.google.com/program', lockedString('Google Developer Program'), 'badge-link', undefined,
@@ -200,14 +207,14 @@ export class BadgeNotification extends UI.Widget.Widget {
 
     // If the user already has a GDP profile and the receive badges setting enabled,
     // starter badge behaves as if it's an activity based badge.
-    if (gdpProfile && receiveBadgesSettingEnabled) {
+    if (hasGdpProfile && receiveBadgesSettingEnabled) {
       this.#presentActivityBasedBadge(badge);
       return;
     }
 
     // If the user already has a GDP profile and the receive badges setting disabled,
     // starter badge behaves as a nudge for opting into receiving badges.
-    if (gdpProfile && !receiveBadgesSettingEnabled) {
+    if (hasGdpProfile && !receiveBadgesSettingEnabled) {
       this.#show({
         message: i18nFormatString(
             UIStrings.starterBadgeAwardMessageSettingDisabled, {PH1: badge.title, PH2: googleDeveloperProgramLink}),

package/front_end/panels/network/NetworkPanel.ts

@@ -1050,7 +1050,7 @@ let searchNetworkViewInstance: SearchNetworkView;
 
 export class SearchNetworkView extends Search.SearchView.SearchView {
   private constructor() {
-    super('network', new Common.Throttler.Throttler(/* timeoutMs */ 200));
+    super('network');
   }
 
   static instance(opts: {

package/front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -173,17 +173,17 @@ export interface ViewInput {
   filterKeys: string[];
   filter: string;
   parseFilter: (filter: string) => TextUtils.TextUtils.ParsedFilter[];
-  onRecord: (e: Event) => void;
+  onRecord: (record: boolean) => void;
   onClear: () => void;
   onSave: () => void;
-  onSplitChange: (e: CustomEvent<string>) => void;
+  onSplitChange: (onlyMain: boolean) => void;
   onSelect: (e: CustomEvent<HTMLElement|null>) => void;
   onContextMenu: (e: CustomEvent<{menu: UI.ContextMenu.ContextMenu, element: HTMLElement}>) => void;
-  onFilterChanged: (e: CustomEvent<string>) => void;
-  onCommandChange: (e: CustomEvent<string>) => void;
-  onCommandSubmitted: (e: CustomEvent<string>) => void;
-  onTargetChange: (e: Event) => void;
-  onToggleSidebar: (e: Event) => void;
+  onFilterChanged: (filter: string) => void;
+  onCommandChange: (command: string) => void;
+  onCommandSubmitted: (input: string) => void;
+  onTargetChange: (targetId: string) => void;
+  onToggleSidebar: () => void;
   targets: SDK.Target.Target[];
   selectedTargetId: string;
 }
@@ -203,7 +203,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                              direction="column"
                              sidebar-initial-size="400"
                              sidebar-visibility=${input.sidebarVisible ? 'visible' : 'hidden'}
-                             @change=${input.onSplitChange}>
+                             @change=${(e: CustomEvent<string>) => input.onSplitChange(e.detail === 'OnlyMain')}>
           <div slot="main" class="vbox protocol-monitor-main">
             <devtools-toolbar class="protocol-monitor-toolbar"
                                jslog=${VisualLogging.toolbar('top')}>
@@ -214,22 +214,23 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                                 .variant=${Buttons.Button.Variant.ICON_TOGGLE}
                                 .toggleType=${Buttons.Button.ToggleType.RED}
                                 .toggled=${true}
-                                @click=${input.onRecord}></devtools-button>
+                                @click=${(e: Event) => input.onRecord((e.target as Buttons.Button.Button).toggled)}>
+               </devtools-button>
               <devtools-button title=${i18nString(UIStrings.clearAll)}
                                .iconName=${'clear'}
                                .variant=${Buttons.Button.Variant.TOOLBAR}
                                .jslogContext=${'protocol-monitor.clear-all'}
-                               @click=${input.onClear}></devtools-button>
+                               @click=${() => input.onClear()}></devtools-button>
               <devtools-button title=${i18nString(UIStrings.save)}
                                .iconName=${'download'}
                                .variant=${Buttons.Button.Variant.TOOLBAR}
                                .jslogContext=${'protocol-monitor.save'}
-                               @click=${input.onSave}></devtools-button>
+                               @click=${() => input.onSave()}></devtools-button>
               <devtools-toolbar-input type="filter"
                                       list="filter-suggestions"
                                       style="flex-grow: 1"
                                       value=${input.filter}
-                                      @change=${input.onFilterChanged}>
+                                      @change=${(e: Event) => input.onFilterChanged((e.target as HTMLInputElement).value)}>
                 <datalist id="filter-suggestions">
                   ${input.filterKeys.map(key => html`
                         <option value=${key + ':'}></option>
@@ -320,7 +321,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                                .iconName=${input.sidebarVisible ? 'left-panel-close' : 'left-panel-open'}
                                .variant=${Buttons.Button.Variant.TOOLBAR}
                                .jslogContext=${'protocol-monitor.toggle-command-editor'}
-                               @click=${input.onToggleSidebar}></devtools-button>
+                               @click=${() => input.onToggleSidebar()}></devtools-button>
               </devtools-button>
               <devtools-toolbar-input id="command-input"
                                       style=${styleMap({
@@ -330,8 +331,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                                       list="command-input-suggestions"
                                       placeholder=${i18nString(UIStrings.sendRawCDPCommand)}
                                       title=${i18nString(UIStrings.sendRawCDPCommandExplanation)}
-                                      @change=${input.onCommandChange}
-                                      @submit=${input.onCommandSubmitted}>
+                                      @change=${(e: Event) => input.onCommandChange((e.target as HTMLInputElement).value)}
+                                      @submit=${(e: Event) => input.onCommandSubmitted((e.target as HTMLInputElement).value)}>
                 <datalist id="command-input-suggestions">
                   ${input.commandSuggestions.map(c => html`<option value=${c}></option>`)}
                 </datalist>
@@ -340,7 +341,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                       title=${i18nString(UIStrings.selectTarget)}
                       style=${styleMap({display: input.sidebarVisible ? 'none' : 'flex'})}
                       jslog=${VisualLogging.dropDown('target-selector').track({change: true})}
-                      @change=${input.onTargetChange}>
+                      @change=${(e: Event) => input.onTargetChange((e.target as HTMLSelectElement).value)}>
                 ${input.targets.map(target => html`
                   <option jslog=${VisualLogging.item('target').track({click: true})}
                           value=${target.id()} ?selected=${target.id() === input.selectedTargetId}>
@@ -416,8 +417,8 @@ export class ProtocolMonitorImpl extends UI.Panel.Panel {
       filterKeys: this.#filterKeys,
       filter: this.#filter,
       parseFilter: this.filterParser.parse.bind(this.filterParser),
-      onSplitChange: (e: CustomEvent<string>) => {
-        if (e.detail === 'OnlyMain') {
+      onSplitChange: (onlyMain: boolean) => {
+        if (onlyMain) {
           this.#populateToolbarInput();
           this.#sidebarVisible = false;
         } else {
@@ -427,8 +428,8 @@ export class ProtocolMonitorImpl extends UI.Panel.Panel {
         }
         this.requestUpdate();
       },
-      onRecord: (e: Event) => {
-        this.setRecording((e.target as Buttons.Button.Button).toggled);
+      onRecord: (recording: boolean) => {
+        this.setRecording(recording);
       },
       onClear: () => {
         this.#messages = [];
@@ -449,24 +450,22 @@ export class ProtocolMonitorImpl extends UI.Panel.Panel {
           this.#populateContextMenu(e.detail.menu, message);
         }
       },
-      onCommandChange: (e: CustomEvent<string>) => {
-        this.#command = e.detail;
+      onCommandChange: (command: string) => {
+        this.#command = command;
       },
-      onCommandSubmitted: (e: CustomEvent<string>) => {
-        this.#commandAutocompleteSuggestionProvider.addEntry(e.detail);
-        const {command, parameters} = parseCommandInput(e.detail);
+      onCommandSubmitted: (input: string) => {
+        this.#commandAutocompleteSuggestionProvider.addEntry(input);
+        const {command, parameters} = parseCommandInput(input);
         this.onCommandSend(command, parameters, this.#selectedTargetId);
       },
-      onFilterChanged: (e: CustomEvent<string>) => {
-        this.#filter = e.detail;
+      onFilterChanged: (filter: string) => {
+        this.#filter = filter;
         this.requestUpdate();
       },
-      onTargetChange: (e: Event) => {
-        if (e.target instanceof HTMLSelectElement) {
-          this.#selectedTargetId = e.target.value;
-        }
+      onTargetChange: (targetId: string) => {
+        this.#selectedTargetId = targetId;
       },
-      onToggleSidebar: (_e: Event) => {
+      onToggleSidebar: () => {
         this.#sidebarVisible = !this.#sidebarVisible;
         this.requestUpdate();
       },