chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

package/front_end/panels/application/BackgroundServiceView.ts

@@ -1,9 +1,9 @@
 // Copyright 2019 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 @devtools/no-imperative-dom-api */
 
 import '../../ui/legacy/legacy.js';
+import '../../ui/legacy/components/data_grid/data_grid.js';
 
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -13,9 +13,7 @@ import * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
-// eslint-disable-next-line @devtools/es-modules-import
-import emptyWidgetStyles from '../../ui/legacy/emptyWidget.css.js';
+import * as Input from '../../ui/components/input/input.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -141,24 +139,183 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/BackgroundServiceView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class BackgroundServiceView extends UI.Widget.VBox {
-  private readonly serviceName: Protocol.BackgroundService.ServiceName;
-  private readonly model: BackgroundServiceModel;
-  private readonly serviceWorkerManager: SDK.ServiceWorkerManager.ServiceWorkerManager|null;
-  private readonly securityOriginManager: SDK.SecurityOriginManager.SecurityOriginManager;
-  private readonly storageKeyManager: SDK.StorageKeyManager.StorageKeyManager;
-  private recordAction: UI.ActionRegistration.Action;
-  private recordButton!: UI.Toolbar.ToolbarToggle;
-  private originCheckbox!: UI.Toolbar.ToolbarCheckbox;
-  private storageKeyCheckbox!: UI.Toolbar.ToolbarCheckbox;
-  private saveButton!: UI.Toolbar.ToolbarButton;
-  private readonly toolbar: UI.Toolbar.Toolbar;
-  private readonly splitWidget: UI.SplitWidget.SplitWidget;
-  private readonly dataGrid: DataGrid.DataGrid.DataGridImpl<EventData>;
-  private readonly previewPanel: UI.Widget.VBox;
+
+export interface ViewInput {
+  serviceName: Protocol.BackgroundService.ServiceName;
+  isRecording: boolean;
+  selectedEvent: EventData|null;
+  events: EventData[];
+  onClear: () => void;
+  onSave: () => void;
+  toggleRecording: () => void;
+  onSelectEvent: (event: EventData) => void;
+  onOriginCheckboxChanged: (event: Event) => void;
+  onStorageKeyCheckboxChanged: (event: Event) => void;
+  isOriginCheckboxChecked: boolean;
+  isStorageKeyCheckboxChecked: boolean;
+  createLearnMoreLink: () => Platform.DevToolsPath.UrlString;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLElement): void => {
+  const recordShortcuts =
+      UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction('background-service.toggle-recording')[0];
+  const startRecordingText = i18nString(UIStrings.startRecordingToDebug, {
+    PH1: i18nString(UIStrings.startRecordingEvents),
+    PH2: recordShortcuts ? recordShortcuts.title() : '',
+  });
+  const featureName = BackgroundServiceView.getUIString(input.serviceName).toLowerCase();
+
+  // Toolbar state
+  const buttonTooltip =
+      input.isRecording ? i18nString(UIStrings.stopRecordingEvents) : i18nString(UIStrings.startRecordingEvents);
+
+  const dataGridTemplate = html`
+    <table>
+      <tr>
+        <th id="id" weight="1">${'#' as Common.UIString.LocalizedString}</th>
+        <th id="timestamp" weight="7">${i18nString(UIStrings.timestamp)}</th>
+        <th id="event-name" weight="8">${i18nString(UIStrings.event)}</th>
+        <th id="origin" weight="8">${i18nString(UIStrings.origin)}</th>
+        <th id="storage-key" weight="8">${i18nString(UIStrings.storageKey)}</th>
+        <th id="sw-scope" weight="4">${i18nString(UIStrings.swScope)}</th>
+        <th id="instance-id" weight="8">${i18nString(UIStrings.instanceId)}</th>
+      </tr>
+      ${input.events.map(event => html`
+        <tr @select=${() => input.onSelectEvent(event)}
+            class=${event === input.selectedEvent ? 'selected' : ''}
+            ?selected=${event === input.selectedEvent}>
+          <td>${event.id}</td>
+          <td>${event.timestamp}</td>
+          <td>${event['event-name']}</td>
+          <td>${event.origin}</td>
+          <td>${event['storage-key']}</td>
+          <td>${event['sw-scope']}</td>
+          <td>${event['instance-id']}</td>
+        </tr>
+      `)}
+    </table>
+  `;
+
+  // clang-format off
+  render(html`
+    <style>${backgroundServiceViewStyles}</style>
+    <style>${Input.checkboxStyles}</style>
+    <div class="background-service-view">
+      <devtools-toolbar class="background-service-toolbar" jslog=${VisualLogging.toolbar()}>
+        <devtools-button title=${buttonTooltip}
+            class="toolbar-button"
+            .iconName=${'record-start'}
+            .toggledIconName=${'record-stop'}
+            .toggleType=${Buttons.Button.ToggleType.PRIMARY}
+            .toggled=${input.isRecording}
+            @click=${input.toggleRecording}
+            .variant=${Buttons.Button.Variant.TOOLBAR}
+            .jslogContext=${'background-service.toggle-recording'}></devtools-button>
+        <devtools-button title=${i18nString(UIStrings.clear)} @click=${input.onClear}
+            class="toolbar-button"
+            .iconName=${'clear'} .variant=${Buttons.Button.Variant.TOOLBAR}
+            .jslogContext=${'background-service.clear'}></devtools-button>
+        <div class="toolbar-divider"></div>
+        <devtools-button title=${i18nString(UIStrings.saveEvents)}
+            class="toolbar-button"
+            @click=${input.onSave}
+            .disabled=${input.events.length === 0}
+            .iconName=${'download'} .variant=${Buttons.Button.Variant.TOOLBAR}
+            .jslogContext=${'background-service.save-events'}></devtools-button>
+        <div class="toolbar-divider"></div>
+        <label title=${i18nString(UIStrings.showEventsFromOtherDomains)} class="checkbox-label"
+            jslog=${VisualLogging.toggle('show-events-from-other-domains').track({click: true})}
+        >
+          <input type="checkbox" .checked=${input.isOriginCheckboxChecked} @change=${input.onOriginCheckboxChanged}>
+          ${i18nString(UIStrings.showEventsFromOtherDomains)}
+        </label>
+        <label title=${i18nString(UIStrings.showEventsForOtherStorageKeys)} class="checkbox-label"
+            jslog=${VisualLogging.toggle('show-events-from-other-partitions').track({click: true})}
+        >
+          <input type="checkbox" .checked=${input.isStorageKeyCheckboxChecked}
+              @change=${input.onStorageKeyCheckboxChanged}
+          >
+          ${i18nString(UIStrings.showEventsForOtherStorageKeys)}
+        </label>
+      </devtools-toolbar>
+      ${input.events.length === 0 ? (input.isRecording ? html`
+        ${UI.Widget.widget(UI.EmptyWidget.EmptyWidget, {
+          header: i18nString(UIStrings.recordingSActivity, {PH1: featureName}),
+          text: i18nString(UIStrings.devtoolsWillRecordAllSActivity, {PH1: featureName}),
+        })}
+      ` : html`
+        <devtools-widget ${UI.Widget.widget(UI.EmptyWidget.EmptyWidget, {
+          header: i18nString(UIStrings.noRecording),
+          text: startRecordingText,
+          link: input.createLearnMoreLink(),
+        })}>
+          <devtools-button class="start-recording-button" .variant=${Buttons.Button.Variant.TONAL} jslogContext=${'start-recording'} @click=${input.toggleRecording}>
+            ${i18nString(UIStrings.startRecordingEvents)}
+          </devtools-button>
+        </devtools-widget>
+      `) : html`
+        <devtools-split-view sidebar-position="second" direction="row">
+          <div slot="main" class="data-grid-container">
+            <devtools-data-grid class="data-grid" striped
+                name=${i18nString(UIStrings.backgroundServices)}
+                style="outline: none;"
+            >
+              ${dataGridTemplate}
+            </devtools-data-grid>
+          </div>
+          <div slot="sidebar" class="preview-panel empty-state-container"
+              jslog=${VisualLogging.pane('preview').track({resize: true})}
+          >
+            ${input.selectedEvent ? html`
+              <div class="background-service-metadata" jslog=${VisualLogging.section('metadata')}>
+                ${input.selectedEvent.eventMetadata.length > 0 ? input.selectedEvent.eventMetadata.map(entry => html`
+                  <div class="background-service-metadata-entry">
+                    <div class="background-service-metadata-name">${entry.key}: </div>${
+                      entry.value ?
+                      html`<div class="background-service-metadata-value source-code">${entry.value}</div>` :
+                      html`<div class="background-service-metadata-value background-service-empty-value">${i18nString(UIStrings.empty)}</div>`}
+                  </div>
+                `) : html`
+                  <div class="background-service-metadata-entry">
+                    <div class="background-service-metadata-name background-service-empty-value">${i18nString(UIStrings.noMetadataForThisEvent)}</div>
+                  </div>
+                `}
+              </div>
+            ` : html`
+              ${UI.Widget.widget(UI.EmptyWidget.EmptyWidget, {
+                header: i18nString(UIStrings.noEventSelected),
+                text: i18nString(UIStrings.selectAnEventToViewMetadata),
+              })}
+            `}
+          </div>
+        </devtools-split-view>
+      `}
+    </div>
+  `, target, {
+    container: {
+      attributes: {
+        jslog: `${VisualLogging.pane().context(Platform.StringUtilities.toKebabCase(input.serviceName))}`,
+      },
+    },
+  });
+  // clang-format on
+};
+
+export class BackgroundServiceView extends UI.Widget.Widget {
+  #serviceName?: Protocol.BackgroundService.ServiceName;
+  #model?: BackgroundServiceModel;
+  #serviceWorkerManager?: SDK.ServiceWorkerManager.ServiceWorkerManager;
+  #securityOriginManager?: SDK.SecurityOriginManager.SecurityOriginManager;
+  #storageKeyManager?: SDK.StorageKeyManager.StorageKeyManager;
+
   #isRecording = false;
-  #selectedEventNode: EventDataNode|null = null;
-  private preview: UI.Widget.Widget|null;
+  #selectedEvent: EventData|null = null;
+  #events: EventData[] = [];
+  #isOriginCheckboxChecked = false;
+  #isStorageKeyCheckboxChecked = false;
+  readonly #view: View;
 
   static getUIString(serviceName: string): string {
     switch (serviceName) {
@@ -179,103 +336,65 @@ export class BackgroundServiceView extends UI.Widget.VBox {
     }
   }
 
-  constructor(serviceName: Protocol.BackgroundService.ServiceName, model: BackgroundServiceModel) {
-    super({
-      jslog: `${VisualLogging.pane().context(Platform.StringUtilities.toKebabCase(serviceName))}`,
-      useShadowDom: true,
-    });
-    this.registerRequiredCSS(emptyWidgetStyles, backgroundServiceViewStyles);
-
-    this.serviceName = serviceName;
-
-    this.model = model;
-    this.model.addEventListener(Events.RecordingStateChanged, this.onRecordingStateChanged, this);
-    this.model.addEventListener(Events.BackgroundServiceEventReceived, this.onEventReceived, this);
-    this.model.enable(this.serviceName);
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+  }
 
-    this.serviceWorkerManager = this.model.target().model(SDK.ServiceWorkerManager.ServiceWorkerManager);
+  get serviceName(): Protocol.BackgroundService.ServiceName|undefined {
+    return this.#serviceName;
+  }
 
-    this.securityOriginManager = this.model.target().model(SDK.SecurityOriginManager.SecurityOriginManager) as
-        SDK.SecurityOriginManager.SecurityOriginManager;
-    if (!this.securityOriginManager) {
-      throw new Error('SecurityOriginManager instance is missing');
+  set serviceName(serviceName: Protocol.BackgroundService.ServiceName) {
+    if (this.#serviceName === serviceName) {
+      return;
     }
-    this.securityOriginManager.addEventListener(
-        SDK.SecurityOriginManager.Events.MainSecurityOriginChanged, () => this.onOriginChanged());
-
-    this.storageKeyManager =
-        this.model.target().model(SDK.StorageKeyManager.StorageKeyManager) as SDK.StorageKeyManager.StorageKeyManager;
-    if (!this.storageKeyManager) {
-      throw new Error('StorageKeyManager instance is missing');
+    this.#serviceName = serviceName;
+    if (this.#model) {
+      this.#model.enable(this.#serviceName);
     }
-    this.storageKeyManager.addEventListener(
-        SDK.StorageKeyManager.Events.MAIN_STORAGE_KEY_CHANGED, () => this.onStorageKeyChanged());
-
-    this.recordAction = UI.ActionRegistry.ActionRegistry.instance().getAction('background-service.toggle-recording');
-
-    this.toolbar = this.contentElement.createChild('devtools-toolbar', 'background-service-toolbar');
-    this.toolbar.setAttribute('jslog', `${VisualLogging.toolbar()}`);
-    this.setupToolbar();
-
-    /**
-     * This will contain the DataGrid for displaying events, and a panel at the bottom for showing
-     * extra metadata related to the selected event.
-     */
-    this.splitWidget = new UI.SplitWidget.SplitWidget(/* isVertical= */ false, /* secondIsSidebar= */ true);
-    this.splitWidget.show(this.contentElement);
-
-    this.dataGrid = this.createDataGrid();
-
-    this.previewPanel = new UI.Widget.VBox();
-    this.previewPanel.element.setAttribute('jslog', `${VisualLogging.pane('preview').track({resize: true})}`);
-
-    this.preview = null;
-
-    this.splitWidget.setMainWidget(this.dataGrid.asWidget());
-    this.splitWidget.setSidebarWidget(this.previewPanel);
-    this.splitWidget.hideMain();
-
-    this.performUpdate();
+    this.requestUpdate();
   }
 
-  getDataGrid(): DataGrid.DataGrid.DataGridImpl<EventData> {
-    return this.dataGrid;
+  get model(): BackgroundServiceModel|undefined {
+    return this.#model;
   }
 
-  /**
-   * Creates the toolbar UI element.
-   */
-  private setupToolbar(): void {
-    this.toolbar.wrappable = true;
-    this.recordButton = (UI.Toolbar.Toolbar.createActionButton(this.recordAction) as UI.Toolbar.ToolbarToggle);
-    this.recordButton.toggleOnClick(false);
-    this.toolbar.appendToolbarItem(this.recordButton);
-
-    const clearButton =
-        new UI.Toolbar.ToolbarButton(i18nString(UIStrings.clear), 'clear', undefined, 'background-service.clear');
-    clearButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => this.clearEvents());
-    this.toolbar.appendToolbarItem(clearButton);
-
-    this.toolbar.appendSeparator();
+  set model(model: BackgroundServiceModel) {
+    if (this.#model === model) {
+      return;
+    }
+    if (this.#model) {
+      this.#model.removeEventListener(Events.RecordingStateChanged, this.onRecordingStateChanged, this);
+      this.#model.removeEventListener(Events.BackgroundServiceEventReceived, this.onEventReceived, this);
+    }
+    this.#model = model;
+    this.#model.addEventListener(Events.RecordingStateChanged, this.onRecordingStateChanged, this);
+    this.#model.addEventListener(Events.BackgroundServiceEventReceived, this.onEventReceived, this);
+    if (this.#serviceName) {
+      this.#model.enable(this.#serviceName);
+    }
 
-    this.saveButton = new UI.Toolbar.ToolbarButton(
-        i18nString(UIStrings.saveEvents), 'download', undefined, 'background-service.save-events');
-    this.saveButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, _event => {
-      void this.saveToFile();
-    });
-    this.toolbar.appendToolbarItem(this.saveButton);
+    this.#serviceWorkerManager = this.#model.target().model(SDK.ServiceWorkerManager.ServiceWorkerManager) ?? undefined;
 
-    this.toolbar.appendSeparator();
+    this.#securityOriginManager =
+        this.#model.target().model(SDK.SecurityOriginManager.SecurityOriginManager) ?? undefined;
+    if (this.#securityOriginManager) {
+      this.#securityOriginManager.addEventListener(SDK.SecurityOriginManager.Events.MainSecurityOriginChanged,
+                                                   () => this.onOriginChanged());
+    }
 
-    this.originCheckbox = new UI.Toolbar.ToolbarCheckbox(
-        i18nString(UIStrings.showEventsFromOtherDomains), i18nString(UIStrings.showEventsFromOtherDomains),
-        () => this.refreshView(), 'show-events-from-other-domains');
-    this.toolbar.appendToolbarItem(this.originCheckbox);
+    this.#storageKeyManager = this.#model.target().model(SDK.StorageKeyManager.StorageKeyManager) ?? undefined;
+    if (this.#storageKeyManager) {
+      this.#storageKeyManager.addEventListener(SDK.StorageKeyManager.Events.MAIN_STORAGE_KEY_CHANGED,
+                                               () => this.onStorageKeyChanged());
+    }
+    this.requestUpdate();
+  }
 
-    this.storageKeyCheckbox = new UI.Toolbar.ToolbarCheckbox(
-        i18nString(UIStrings.showEventsForOtherStorageKeys), i18nString(UIStrings.showEventsForOtherStorageKeys),
-        () => this.refreshView(), 'show-events-from-other-partitions');
-    this.toolbar.appendToolbarItem(this.storageKeyCheckbox);
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
   }
 
   /**
@@ -283,7 +402,10 @@ export class BackgroundServiceView extends UI.Widget.VBox {
    */
   private refreshView(): void {
     this.clearView();
-    const events = this.model.getEvents(this.serviceName).filter(event => this.acceptEvent(event));
+    if (!this.#model || !this.#serviceName) {
+      return;
+    }
+    const events = this.#model.getEvents(this.#serviceName).filter(event => this.acceptEvent(event));
     for (const event of events) {
       this.addEvent(event);
     }
@@ -293,25 +415,26 @@ export class BackgroundServiceView extends UI.Widget.VBox {
    * Clears the grid and panel.
    */
   private clearView(): void {
-    this.#selectedEventNode = null;
-    this.dataGrid.rootNode().removeChildren();
-    this.splitWidget.hideMain();
-    this.performUpdate();
+    this.#selectedEvent = null;
+    this.#events = [];
+    this.requestUpdate();
   }
 
   /**
    * Called when the `Toggle Record` button is clicked.
    */
   toggleRecording(): void {
+    if (!this.#model || !this.#serviceName) {
+      return;
+    }
     const isRecording = !this.#isRecording;
-    this.model.setRecording(isRecording, this.serviceName);
-    const featureName = BackgroundServiceView.getUIString(this.serviceName).toLowerCase();
+    this.#model.setRecording(isRecording, this.#serviceName);
+    const featureName = BackgroundServiceView.getUIString(this.#serviceName).toLowerCase();
 
     if (isRecording) {
       UI.ARIAUtils.LiveAnnouncer.alert(
           i18nString(UIStrings.recordingSActivity, {PH1: featureName}) + ' ' +
           i18nString(UIStrings.devtoolsWillRecordAllSActivity, {PH1: featureName}));
-      this.preview?.focus();
     }
   }
 
@@ -319,12 +442,14 @@ export class BackgroundServiceView extends UI.Widget.VBox {
    * Called when the `Clear` button is clicked.
    */
   private clearEvents(): void {
-    this.model.clearEvents(this.serviceName);
+    if (this.#model && this.#serviceName) {
+      this.#model.clearEvents(this.#serviceName);
+    }
     this.clearView();
   }
 
   private onRecordingStateChanged({data: state}: Common.EventTarget.EventTargetEvent<RecordingState>): void {
-    if (state.serviceName !== this.serviceName) {
+    if (state.serviceName !== this.#serviceName) {
       return;
     }
 
@@ -333,7 +458,7 @@ export class BackgroundServiceView extends UI.Widget.VBox {
     }
 
     this.#isRecording = state.isRecording;
-    this.performUpdate();
+    this.requestUpdate();
   }
 
   private onEventReceived({
@@ -347,14 +472,14 @@ export class BackgroundServiceView extends UI.Widget.VBox {
 
   private onOriginChanged(): void {
     // No need to refresh the view if we are already showing all events.
-    if (this.originCheckbox.checked()) {
+    if (this.#isOriginCheckboxChecked) {
       return;
     }
     this.refreshView();
   }
 
   private onStorageKeyChanged(): void {
-    if (this.storageKeyCheckbox.checked()) {
+    if (this.#isStorageKeyCheckboxChecked) {
       return;
     }
     this.refreshView();
@@ -362,57 +487,9 @@ export class BackgroundServiceView extends UI.Widget.VBox {
 
   private addEvent(serviceEvent: Protocol.BackgroundService.BackgroundServiceEvent): void {
     const data = this.createEventData(serviceEvent);
-    const dataNode = new EventDataNode(data, serviceEvent.eventMetadata);
-    this.dataGrid.rootNode().appendChild(dataNode);
-
-    if (this.splitWidget.showMode() !== UI.SplitWidget.ShowMode.BOTH) {
-      this.splitWidget.showBoth();
-    }
-
-    if (this.dataGrid.rootNode().children.length === 1) {
-      this.performUpdate();
-    }
-  }
+    this.#events.push(data);
 
-  private createDataGrid(): DataGrid.DataGrid.DataGridImpl<EventData> {
-    const columns: DataGrid.DataGrid.ColumnDescriptor[] = [
-      {id: 'id', title: '#' as Common.UIString.LocalizedString, weight: 1, sortable: false},
-      {id: 'timestamp', title: i18nString(UIStrings.timestamp), weight: 7, sortable: false},
-      {id: 'event-name', title: i18nString(UIStrings.event), weight: 8, sortable: false},
-      {id: 'origin', title: i18nString(UIStrings.origin), weight: 8, sortable: false},
-      {id: 'storage-key', title: i18nString(UIStrings.storageKey), weight: 8, sortable: false},
-      {id: 'sw-scope', title: i18nString(UIStrings.swScope), weight: 4, sortable: false},
-      {id: 'instance-id', title: i18nString(UIStrings.instanceId), weight: 8, sortable: false},
-    ];
-    const dataGrid = new DataGrid.DataGrid.DataGridImpl({
-      displayName: i18nString(UIStrings.backgroundServices),
-      columns,
-    });
-    dataGrid.setStriped(true);
-
-    dataGrid.addEventListener(DataGrid.DataGrid.Events.SELECTED_NODE, event => {
-      this.#selectedEventNode = event.data as EventDataNode;
-      this.performUpdate();
-    });
-
-    return dataGrid;
-  }
-
-  override performUpdate(): void {
-    this.#updateToolbar();
-    this.#updatePreview();
-  }
-
-  #updateToolbar(): void {
-    if (this.recordButton) {
-      this.recordButton.setToggled(this.#isRecording);
-      const buttonTooltip =
-          this.#isRecording ? i18nString(UIStrings.stopRecordingEvents) : i18nString(UIStrings.startRecordingEvents);
-      this.recordButton.setTitle(buttonTooltip, 'background-service.toggle-recording');
-    }
-    if (this.saveButton) {
-      this.saveButton.setEnabled(this.dataGrid.rootNode().children.length > 0);
-    }
+    this.requestUpdate();
   }
 
   /**
@@ -422,21 +499,22 @@ export class BackgroundServiceView extends UI.Widget.VBox {
     let swScope = '';
 
     // Try to get the scope of the Service Worker registration to be more user-friendly.
-    const registration = this.serviceWorkerManager ?
-        this.serviceWorkerManager.registrations().get(serviceEvent.serviceWorkerRegistrationId) :
+    const registration = this.#serviceWorkerManager ?
+        this.#serviceWorkerManager.registrations().get(serviceEvent.serviceWorkerRegistrationId) :
         undefined;
     if (registration) {
       swScope = registration.scopeURL.substr(registration.securityOrigin.length);
     }
 
     return {
-      id: this.dataGrid.rootNode().children.length + 1,
+      id: this.#events.length + 1,
       timestamp: UI.UIUtils.formatTimestamp(serviceEvent.timestamp * 1000, /* full= */ true),
       origin: serviceEvent.origin,
       'storage-key': serviceEvent.storageKey,
       'sw-scope': swScope,
       'event-name': serviceEvent.eventName,
       'instance-id': serviceEvent.instanceId,
+      eventMetadata: serviceEvent.eventMetadata.sort((m1, m2) => Platform.StringUtilities.compare(m1.key, m2.key)),
     };
   }
 
@@ -444,11 +522,11 @@ export class BackgroundServiceView extends UI.Widget.VBox {
    * Filtration function to know whether event should be shown or not.
    */
   private acceptEvent(event: Protocol.BackgroundService.BackgroundServiceEvent): boolean {
-    if (event.service !== this.serviceName) {
+    if (event.service !== this.#serviceName) {
       return false;
     }
 
-    if (this.originCheckbox.checked() || this.storageKeyCheckbox.checked()) {
+    if (this.#isOriginCheckboxChecked || this.#isStorageKeyCheckboxChecked) {
       return true;
     }
 
@@ -456,14 +534,14 @@ export class BackgroundServiceView extends UI.Widget.VBox {
     const origin = event.origin.substr(0, event.origin.length - 1);
     const storageKey = event.storageKey;
 
-    return this.securityOriginManager.securityOrigins().includes(origin) ||
-        this.storageKeyManager.storageKeys().includes(storageKey);
+    return Boolean(this.#securityOriginManager?.securityOrigins().includes(origin) ||
+                   this.#storageKeyManager?.storageKeys().includes(storageKey));
   }
 
   private createLearnMoreLink(): Platform.DevToolsPath.UrlString {
     let url = 'https://developer.chrome.com/docs/devtools/javascript/background-services/';
 
-    switch (this.serviceName) {
+    switch (this.#serviceName) {
       case Protocol.BackgroundService.ServiceName.BackgroundFetch:
         url += '#fetch';
         break;
@@ -483,52 +561,47 @@ export class BackgroundServiceView extends UI.Widget.VBox {
     return url as Platform.DevToolsPath.UrlString;
   }
 
-  #updatePreview(): void {
-    if (this.preview) {
-      this.preview.detach();
-    }
-
-    if (this.#selectedEventNode) {
-      this.preview = this.#selectedEventNode.createPreview();
-      this.preview.show(this.previewPanel.contentElement);
+  override performUpdate(): void {
+    if (!this.#serviceName || !this.#model) {
       return;
     }
-
-    let emptyWidget: UI.EmptyWidget.EmptyWidget;
-    if (this.dataGrid.rootNode().children.length) {
-      emptyWidget = new UI.EmptyWidget.EmptyWidget(
-          i18nString(UIStrings.noEventSelected), i18nString(UIStrings.selectAnEventToViewMetadata));
-    } else if (this.#isRecording) {
-      // Inform users that we are recording/waiting for events.
-      const featureName = BackgroundServiceView.getUIString(this.serviceName).toLowerCase();
-      emptyWidget = new UI.EmptyWidget.EmptyWidget(
-          i18nString(UIStrings.recordingSActivity, {PH1: featureName}),
-          i18nString(UIStrings.devtoolsWillRecordAllSActivity, {PH1: featureName}));
-    } else {
-      const recordShortcuts =
-          UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction('background-service.toggle-recording')[0];
-      emptyWidget = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.noRecording),
-                                                   i18nString(UIStrings.startRecordingToDebug, {
-                                                     PH1: i18nString(UIStrings.startRecordingEvents),
-                                                     PH2: recordShortcuts ? recordShortcuts.title() : '',
-                                                   }));
-      emptyWidget.link = this.createLearnMoreLink();
-
-      const button = UI.UIUtils.createTextButton(
-          i18nString(UIStrings.startRecordingEvents), () => this.toggleRecording(),
-          {jslogContext: 'start-recording', variant: Buttons.Button.Variant.TONAL});
-      emptyWidget.contentElement.appendChild(button);
-    }
-    emptyWidget.setDefaultFocusedElement(emptyWidget.contentElement);
-    this.preview = emptyWidget;
-    this.preview.show(this.previewPanel.contentElement);
+    const viewInput = {
+      serviceName: this.#serviceName,
+      isRecording: this.#isRecording,
+      selectedEvent: this.#selectedEvent,
+      events: this.#events,
+      onClear: () => this.clearEvents(),
+      onSave: () => void this.saveToFile(),
+      onSelectEvent: (event: EventData) => {
+        this.#selectedEvent = event;
+        this.requestUpdate();
+      },
+      onOriginCheckboxChanged: (event: Event) => {
+        const checkbox = event.target as HTMLInputElement;
+        this.#isOriginCheckboxChecked = checkbox.checked;
+        this.refreshView();
+      },
+      onStorageKeyCheckboxChanged: (event: Event) => {
+        const checkbox = event.target as HTMLInputElement;
+        this.#isStorageKeyCheckboxChecked = checkbox.checked;
+        this.refreshView();
+      },
+      isOriginCheckboxChecked: this.#isOriginCheckboxChecked,
+      isStorageKeyCheckboxChecked: this.#isStorageKeyCheckboxChecked,
+      toggleRecording: () => this.toggleRecording(),
+      createLearnMoreLink: () => this.createLearnMoreLink(),
+    };
+    this.#view(viewInput, undefined, this.contentElement);
   }
 
   /**
    * Saves all currently displayed events in a file (JSON format).
    */
   private async saveToFile(): Promise<void> {
-    const fileName = `${this.serviceName}-${Platform.DateUtilities.toISO8601Compact(new Date())}.json` as
+    if (!this.#serviceName || !this.#model) {
+      return;
+    }
+    const fileName = `${this.#serviceName}-${Platform.DateUtilities.toISO8601Compact(new Date())}.json` as
         Platform.DevToolsPath.RawPathString;
     const stream = new Bindings.FileUtils.FileOutputStream(Workspace.FileManager.FileManager.instance());
 
@@ -537,48 +610,12 @@ export class BackgroundServiceView extends UI.Widget.VBox {
       return;
     }
 
-    const events = this.model.getEvents(this.serviceName).filter(event => this.acceptEvent(event));
+    const events = this.#model.getEvents(this.#serviceName).filter(event => this.acceptEvent(event));
     await stream.write(JSON.stringify(events, undefined, 2));
     void stream.close();
   }
 }
 
-export class EventDataNode extends DataGrid.DataGrid.DataGridNode<EventData> {
-  private readonly eventMetadata: Protocol.BackgroundService.EventMetadata[];
-
-  constructor(data: EventData, eventMetadata: Protocol.BackgroundService.EventMetadata[]) {
-    super(data);
-
-    this.eventMetadata = eventMetadata.sort((m1, m2) => Platform.StringUtilities.compare(m1.key, m2.key));
-  }
-
-  createPreview(): UI.Widget.VBox {
-    const preview = new UI.Widget.VBox();
-    preview.element.classList.add('background-service-metadata');
-    preview.element.setAttribute('jslog', `${VisualLogging.section('metadata')}`);
-
-    // clang-format off
-    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-    render(
-      html`${this.eventMetadata.length > 0 ? this.eventMetadata.map(entry => html`
-        <div class="background-service-metadata-entry">
-          <div class="background-service-metadata-name">${entry.key}: </div>${
-            entry.value ?
-            html`<div class="background-service-metadata-value source-code">${entry.value}</div>` :
-            html`<div class="background-service-metadata-value background-service-empty-value">${i18nString(UIStrings.empty)}</div>`}
-        </div>
-      `) : html`
-        <div class="background-service-metadata-entry">
-          <div class="background-service-metadata-name background-service-empty-value">${i18nString(UIStrings.noMetadataForThisEvent)}</div>
-        </div>
-      `}`,
-      preview.element, {host: this});
-    // clang-format on
-
-    return preview;
-  }
-}
-
 export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   handleAction(context: UI.Context.Context, actionId: string): boolean {
     const view = context.flavor(BackgroundServiceView);
@@ -606,4 +643,5 @@ export interface EventData {
   'sw-scope': string;
   'event-name': string;
   'instance-id': string;
+  eventMetadata: Protocol.BackgroundService.EventMetadata[];
 }