chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/application/ReportingApiView.test.ts

@@ -4,19 +4,74 @@
 
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 import {createTarget} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
-import * as UI from '../../ui/legacy/legacy.js';
+import {createViewFunctionStub} from '../../testing/ViewFunctionHelpers.js';
 
 import * as Application from './application.js';
 import * as ApplicationComponents from './components/components.js';
 
+const endpoints = [{url: 'www.reporting-endpoint.com', groupName: 'endpointName'}];
+const reports = [
+  {
+    id: 'some_id' as Protocol.Network.ReportId,
+    initiatorUrl: 'https://example.com/script.js',
+    destination: 'main-endpoint',
+    type: 'deprecation',
+    timestamp: 1632747042.12696,
+    depth: 1,
+    completedAttempts: 0,
+    body: {
+      columnNumber: 8,
+      id: 'PrefixedStorageInfo',
+      lineNumber: 15,
+      message:
+          '\'window.webkitStorageInfo\' is deprecated. Please use \'navigator.webkitTemporaryStorage\' or \'navigator.webkitPersistentStorage\' instead.',
+      sourceFile: 'https://example.com/script.js',
+    },
+    status: Protocol.Network.ReportStatus.Queued,
+  },
+  {
+    id: 'another_id' as Protocol.Network.ReportId,
+    initiatorUrl: 'https://www.google.com/script.js',
+    destination: 'default',
+    type: 'csp-violation',
+    timestamp: 1632747045.39856,
+    depth: 1,
+    completedAttempts: 0,
+    body: {
+      blockedURL: 'https://www.google.com/script.js',
+      disposition: 'enforce',
+      documentURL: 'https://www.google.com/document',
+      effectiveDirective: 'script-src-elem',
+      originalPolicy: 'script-src \'self\'; object-src \'none\'; report-to main-endpoint;',
+      statusCode: 200,
+    },
+    status: Protocol.Network.ReportStatus.Queued,
+  },
+];
+
 describeWithMockConnection('ReportingApiView', () => {
   const ORIGIN_1 = 'origin1';
   const ENDPOINTS_1 = [{url: 'url1', groupName: 'group1'}];
   const ORIGIN_2 = 'origin2';
   const ENDPOINTS_2 = [{url: 'url2', groupName: 'group1'}, {url: 'url3', groupName: 'group2'}];
 
+  async function createComponent() {
+    const view = createViewFunctionStub(Application.ReportingApiView.ReportingApiView);
+    const endpointsGrid = new ApplicationComponents.EndpointsGrid.EndpointsGrid();
+    const widget = new Application.ReportingApiView.ReportingApiView(endpointsGrid, view);
+
+    const container = document.createElement('div');
+    renderElementIntoDOM(container);
+    widget.markAsRoot();
+    widget.show(container);
+    await view.nextInput;
+
+    return {view};
+  }
+
   it('updates endpoints grid when they change', () => {
     const tabTarget = createTarget({type: SDK.Target.Type.TAB});
     const frameTarget = createTarget({parentTarget: tabTarget});
@@ -39,64 +94,140 @@ describeWithMockConnection('ReportingApiView', () => {
         endpointsGridData.set, {endpoints: new Map([[ORIGIN_1, ENDPOINTS_1], [ORIGIN_2, ENDPOINTS_2]])});
   });
 
-  it('shows placeholder if no report or endpoint data is available yet', () => {
+  it('shows placeholder if there is no report and no endpoint', async () => {
+    const {view} = await createComponent();
+    assert.isFalse(view.input.hasEndpoints);
+    assert.isFalse(view.input.hasReports);
+    assert.isUndefined(view.input.focusedReport);
+
+    const viewEndpoints = view.input.endpointsGrid.data.endpoints;
+    assert.strictEqual(viewEndpoints.size, 0);
+
+    const viewReports = view.input.reportsGrid.data.reports;
+    assert.lengthOf(viewReports, 0);
+  });
+
+  it('shows only endpoints when endpoint event is received', async () => {
     const target = createTarget();
     const networkManager = target.model(SDK.NetworkManager.NetworkManager);
     assert.exists(networkManager);
-    const endpointsGrid = new ApplicationComponents.EndpointsGrid.EndpointsGrid();
-    const view = new Application.ReportingApiView.ReportingApiView(endpointsGrid);
+    const {view} = await createComponent();
 
-    assert.exists(view.element.querySelector('.empty-state'));
-    assert.deepEqual(view.element.querySelector('.empty-state-header')?.textContent, 'No report or endpoint');
-    assert.deepEqual(
-        view.element.querySelector('.empty-state-description > span')?.textContent,
-        'On this page you will be able to inspect Reporting API reports and endpoints.');
+    networkManager.dispatchEventToListeners(
+        SDK.NetworkManager.Events.ReportingApiEndpointsChangedForOrigin, {origin: 'dummy', endpoints});
+    await view.nextInput;
+
+    assert.isTrue(view.input.hasEndpoints);
+    assert.isFalse(view.input.hasReports);
+    assert.isUndefined(view.input.focusedReport);
+
+    const viewEndpoints = view.input.endpointsGrid.data.endpoints;
+    assert.strictEqual(viewEndpoints.size, 1);
+    const dummyEndpoints = viewEndpoints.get('dummy');
+    assert.deepEqual(dummyEndpoints, endpoints);
+
+    const reports = view.input.reportsGrid.data.reports;
+    assert.lengthOf(reports, 0);
   });
 
-  it('shows reports (main element) and endpoints (sidebar element) if endpoint appears', () => {
+  it('shows only reports when report events are received', async () => {
     const target = createTarget();
     const networkManager = target.model(SDK.NetworkManager.NetworkManager);
     assert.exists(networkManager);
-    const endpointsGrid = new ApplicationComponents.EndpointsGrid.EndpointsGrid();
-    const view = new Application.ReportingApiView.ReportingApiView(endpointsGrid);
+    const {view} = await createComponent();
+
+    networkManager.dispatchEventToListeners(SDK.NetworkManager.Events.ReportingApiReportAdded, reports[0]);
+    networkManager.dispatchEventToListeners(SDK.NetworkManager.Events.ReportingApiReportAdded, reports[1]);
+    await view.nextInput;
+
+    assert.isFalse(view.input.hasEndpoints);
+    assert.isTrue(view.input.hasReports);
+    assert.isUndefined(view.input.focusedReport);
+
+    const viewEndpoints = view.input.endpointsGrid.data.endpoints;
+    assert.strictEqual(viewEndpoints.size, 0);
+
+    const viewReports = view.input.reportsGrid.data.reports;
+    assert.deepEqual(viewReports, reports);
+  });
+
+  it('shows both reports and endpoints when events for both are received', async () => {
+    const target = createTarget();
+    const networkManager = target.model(SDK.NetworkManager.NetworkManager);
+    assert.exists(networkManager);
+    const {view} = await createComponent();
 
     networkManager.dispatchEventToListeners(
-        SDK.NetworkManager.Events.ReportingApiEndpointsChangedForOrigin, {origin: 'dummy', endpoints: []});
-    assert.strictEqual(view.showMode(), UI.SplitWidget.ShowMode.BOTH);
-    assert.isNotNull(view.mainWidget());
-    assert.instanceOf(view.mainWidget(), Application.ReportingApiReportsView.ReportingApiReportsView);
-    assert.isNotNull(view.sidebarElement());
+        SDK.NetworkManager.Events.ReportingApiEndpointsChangedForOrigin, {origin: 'dummy', endpoints});
+    networkManager.dispatchEventToListeners(SDK.NetworkManager.Events.ReportingApiReportAdded, reports[0]);
+    await view.nextInput;
+
+    assert.isTrue(view.input.hasEndpoints);
+    assert.isTrue(view.input.hasReports);
+    assert.isUndefined(view.input.focusedReport);
+
+    const viewEndpoints = view.input.endpointsGrid.data.endpoints;
+    assert.strictEqual(viewEndpoints.size, 1);
+    const dummyEndpoints = viewEndpoints.get('dummy');
+    assert.deepEqual(dummyEndpoints, endpoints);
+
+    const viewReports = view.input.reportsGrid.data.reports;
+    assert.deepEqual(viewReports, [reports[0]]);
   });
 
-  it('shows reports (main element) and endpoints (sidebar element) if report appears', () => {
+  it('can handle report updates', async () => {
     const target = createTarget();
     const networkManager = target.model(SDK.NetworkManager.NetworkManager);
     assert.exists(networkManager);
-    const endpointsGrid = new ApplicationComponents.EndpointsGrid.EndpointsGrid();
-    const view = new Application.ReportingApiView.ReportingApiView(endpointsGrid);
+    const {view} = await createComponent();
 
-    const report = {
+    const successReport = {
       id: 'some_id' as Protocol.Network.ReportId,
       initiatorUrl: 'https://example.com/script.js',
       destination: 'main-endpoint',
       type: 'deprecation',
-      timestamp: 1,
+      timestamp: 1632747042.12696,
       depth: 1,
-      completedAttempts: 0,
+      completedAttempts: 1,
       body: {
         columnNumber: 8,
         id: 'PrefixedStorageInfo',
         lineNumber: 15,
-        message: '',
+        message:
+            '\'window.webkitStorageInfo\' is deprecated. Please use \'navigator.webkitTemporaryStorage\' or \'navigator.webkitPersistentStorage\' instead.',
         sourceFile: 'https://example.com/script.js',
       },
-      status: Protocol.Network.ReportStatus.Queued,
+      status: Protocol.Network.ReportStatus.Success,
     };
+    networkManager.dispatchEventToListeners(SDK.NetworkManager.Events.ReportingApiReportAdded, reports[0]);
+    networkManager.dispatchEventToListeners(SDK.NetworkManager.Events.ReportingApiReportUpdated, successReport);
+    await view.nextInput;
+
+    assert.isFalse(view.input.hasEndpoints);
+    assert.isTrue(view.input.hasReports);
+    assert.isUndefined(view.input.focusedReport);
+
+    const viewEndpoints = view.input.endpointsGrid.data.endpoints;
+    assert.strictEqual(viewEndpoints.size, 0);
+
+    const viewReports = view.input.reportsGrid.data.reports;
+    assert.deepEqual(viewReports, [successReport]);
+  });
+
+  it('shows report details when a report is selected', async () => {
+    const target = createTarget();
+    const networkManager = target.model(SDK.NetworkManager.NetworkManager);
+    assert.exists(networkManager);
+    const {view} = await createComponent();
+
+    networkManager.dispatchEventToListeners(SDK.NetworkManager.Events.ReportingApiReportAdded, reports[0]);
+    networkManager.dispatchEventToListeners(SDK.NetworkManager.Events.ReportingApiReportAdded, reports[1]);
+    await view.nextInput;
 
-    networkManager.dispatchEventToListeners(SDK.NetworkManager.Events.ReportingApiReportAdded, report);
-    assert.strictEqual(view.showMode(), UI.SplitWidget.ShowMode.BOTH);
-    assert.isNotNull(view.mainWidget());
-    assert.instanceOf(view.mainWidget(), Application.ReportingApiReportsView.ReportingApiReportsView);
-    assert.isNotNull(view.sidebarElement());
+    const grid = view.input.reportsGrid;
+    assert.isUndefined(view.input.focusedReport);
+    grid.dispatchEvent(new CustomEvent('select', {detail: 'some_id'}));
+    await view.nextInput;
+    assert.strictEqual(view.input.focusedReport, reports[0]);
   });
 });

package/front_end/panels/application/ReportingApiView.ts

@@ -1,33 +1,45 @@
 // Copyright 2021 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.
-/* eslint-disable rulesdir/no-imperative-dom-api */
 
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
+import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.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';
 
-import type * as ApplicationComponents from './components/components.js';
-import {ReportingApiReportsView} from './ReportingApiReportsView.js';
+import * as ApplicationComponents from './components/components.js';
+
+const {widgetConfig} = UI.Widget;
 
 const UIStrings = {
   /**
-   *@description Placeholder text that shows if no report or endpoint was detected.
+   * @description Placeholder text that shows if no report or endpoint was detected.
    *             A report contains information on issues or events that were encountered by a web browser.
    *             An endpoint is a URL where the report is sent to.
    *             (https://developer.chrome.com/docs/capabilities/web-apis/reporting-api)
    */
   noReportOrEndpoint: 'No report or endpoint',
   /**
-   *@description Placeholder text that shows if no report or endpoint was detected.
+   * @description Placeholder text that shows if no report or endpoint was detected.
    *             A report contains information on issues or events that were encountered by a web browser.
    *             An endpoint is a URL where the report is sent to.
    *             (https://developer.chrome.com/docs/capabilities/web-apis/reporting-api)
    */
   reportingApiDescription: 'On this page you will be able to inspect `Reporting API` reports and endpoints.',
+  /**
+   * @description Placeholder text that shows if no report was selected for viewing
+   *report body (https://developers.google.com/web/updates/2018/09/reportingapi#sending).
+   */
+  noReportSelected: 'No report selected',
+  /**
+   * @description Placeholder text instructing the user how to display a Reporting API
+   *report body (https://developers.google.com/web/updates/2018/09/reportingapi#sending).
+   */
+  clickToDisplayBody: 'Click on any report to display its body',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/ReportingApiView.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -35,58 +47,149 @@ export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const REPORTING_API_EXPLANATION_URL =
     'https://developer.chrome.com/docs/capabilities/web-apis/reporting-api' as Platform.DevToolsPath.UrlString;
 
-export class ReportingApiView extends UI.SplitWidget.SplitWidget {
-  private readonly endpointsGrid: ApplicationComponents.EndpointsGrid.EndpointsGrid;
-  private endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]>;
-  #emptyWidget?: UI.EmptyWidget.EmptyWidget;
-  #reportingApiReports?: ReportingApiReportsView;
-
-  constructor(endpointsGrid: ApplicationComponents.EndpointsGrid.EndpointsGrid) {
-    super(/* isVertical: */ false, /* secondIsSidebar: */ true);
-    this.element.setAttribute('jslog', `${VisualLogging.pane('reporting-api')}`);
-    this.endpointsGrid = endpointsGrid;
-    this.endpoints = new Map();
-    const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-    const networkManager = mainTarget?.model(SDK.NetworkManager.NetworkManager);
-    this.#emptyWidget = new UI.EmptyWidget.EmptyWidget(
-        i18nString(UIStrings.noReportOrEndpoint), i18nString(UIStrings.reportingApiDescription));
-    this.#emptyWidget.link = REPORTING_API_EXPLANATION_URL;
-    this.setMainWidget(this.#emptyWidget);
-    if (networkManager) {
-      networkManager.addEventListener(
-          SDK.NetworkManager.Events.ReportingApiEndpointsChangedForOrigin,
-          event => this.onEndpointsChangedForOrigin(event.data), this);
-
-      networkManager.addEventListener(
-          SDK.NetworkManager.Events.ReportingApiReportAdded, this.#showReportsAndEndpoints, this);
-
-      this.#reportingApiReports = new ReportingApiReportsView(networkManager);
-      const reportingApiEndpointsView = new UI.Widget.VBox();
-      reportingApiEndpointsView.setMinimumSize(0, 40);
-      reportingApiEndpointsView.contentElement.appendChild(this.endpointsGrid);
-
-      this.setSidebarWidget(reportingApiEndpointsView);
-      void networkManager.enableReportingApi();
-      this.hideSidebar();
+interface ViewInput {
+  hasReports: boolean;
+  hasEndpoints: boolean;
+  // TODO (crbug.com/407940329): port EndpointsGrid to a UI Widget and instantiate it in the view
+  endpointsGrid: ApplicationComponents.EndpointsGrid.EndpointsGrid;
+  // TODO (crbug.com/407940381): port ReportsGrid to a UI Widget and instantiate it in the view
+  reportsGrid: ApplicationComponents.ReportsGrid.ReportsGrid;
+  focusedReport?: Protocol.Network.ReportingApiReport;
+}
+
+type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  if (input.hasReports || input.hasEndpoints) {
+    // clang-format off
+    render(html`
+      <devtools-split-view sidebar-position="second" sidebar-initial-size="150" jslog=${
+          VisualLogging.pane('reporting-api')}>
+        ${input.hasReports ? html`
+          <devtools-split-view slot="main" sidebar-position="second" sidebar-initial-size="150">
+            <div slot="main">
+              ${input.reportsGrid}
+            </div>
+            <div slot="sidebar" class="vbox" jslog=${VisualLogging.pane('preview').track({resize: true})}>
+              ${input.focusedReport ? html`
+                <devtools-widget .widgetConfig=${widgetConfig(
+                  element => SourceFrame.JSONView.JSONView.createViewSync(input.focusedReport?.body || '', element)
+                )}></devtools-widget>
+              ` : html`
+                <devtools-widget .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget, {
+                  header: i18nString(UIStrings.noReportSelected),
+                  text: i18nString(UIStrings.clickToDisplayBody),
+                })}></devtools-widget>
+              `}
+            </div>
+          </devtools-split-view>
+        ` : html`
+          <div slot="main">
+            ${input.reportsGrid}
+          </div>
+        `}
+        <div slot="sidebar">
+          ${input.endpointsGrid}
+        </div>
+      </devtools-split-view>
+    `, target);
+    // clang-format on
+  } else {
+    // clang-format off
+    render(html`
+      <devtools-widget .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget, {
+        header: i18nString(UIStrings.noReportOrEndpoint),
+        text: i18nString(UIStrings.reportingApiDescription),
+        link: REPORTING_API_EXPLANATION_URL,
+      })} jslog=${VisualLogging.pane('reporting-api-empty')}></devtools-widget>
+    `, target);
+    // clang-format on
+  }
+};
+
+export class ReportingApiView extends UI.Widget.VBox implements
+    SDK.TargetManager.SDKModelObserver<SDK.NetworkManager.NetworkManager> {
+  readonly #endpointsGrid: ApplicationComponents.EndpointsGrid.EndpointsGrid;
+  #endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]>;
+  #view: View;
+  #networkManager?: SDK.NetworkManager.NetworkManager;
+  #reportsGrid = new ApplicationComponents.ReportsGrid.ReportsGrid();
+  #reports: Protocol.Network.ReportingApiReport[] = [];
+  #focusedReport?: Protocol.Network.ReportingApiReport;
+
+  constructor(endpointsGrid: ApplicationComponents.EndpointsGrid.EndpointsGrid, view = DEFAULT_VIEW) {
+    super();
+    this.#view = view;
+    this.#endpointsGrid = endpointsGrid;
+    this.#endpoints = new Map();
+    this.#reportsGrid.addEventListener('select', this.#onFocus.bind(this));
+    SDK.TargetManager.TargetManager.instance().observeModels(SDK.NetworkManager.NetworkManager, this);
+    this.requestUpdate();
+  }
+
+  modelAdded(networkManager: SDK.NetworkManager.NetworkManager): void {
+    if (networkManager.target() !== SDK.TargetManager.TargetManager.instance().primaryPageTarget()) {
+      return;
     }
+    this.#networkManager = networkManager;
+    this.#networkManager.addEventListener(
+        SDK.NetworkManager.Events.ReportingApiEndpointsChangedForOrigin, this.#onEndpointsChangedForOrigin, this);
+    this.#networkManager.addEventListener(SDK.NetworkManager.Events.ReportingApiReportAdded, this.#onReportAdded, this);
+    this.#networkManager.addEventListener(
+        SDK.NetworkManager.Events.ReportingApiReportUpdated, this.#onReportUpdated, this);
+    void this.#networkManager.enableReportingApi();
+    this.requestUpdate();
   }
 
-  #showReportsAndEndpoints(): void {
-    // Either we don't have reports and endpoints to show (first case), or we have already
-    // replaced the empty widget with a different main view (second case).
-    if (this.#reportingApiReports === undefined || this.mainWidget() !== this.#emptyWidget) {
+  modelRemoved(networkManager: SDK.NetworkManager.NetworkManager): void {
+    if (!this.#networkManager || this.#networkManager !== networkManager) {
       return;
     }
+    this.#networkManager.removeEventListener(
+        SDK.NetworkManager.Events.ReportingApiEndpointsChangedForOrigin, this.#onEndpointsChangedForOrigin, this);
+    this.#networkManager.removeEventListener(
+        SDK.NetworkManager.Events.ReportingApiReportAdded, this.#onReportAdded, this);
+    this.#networkManager.removeEventListener(
+        SDK.NetworkManager.Events.ReportingApiReportUpdated, this.#onReportUpdated, this);
+    this.#networkManager = undefined;
+  }
+
+  override performUpdate(): void {
+    const viewInput = {
+      hasReports: this.#reports.length > 0,
+      hasEndpoints: this.#endpoints.size > 0,
+      endpointsGrid: this.#endpointsGrid,
+      reportsGrid: this.#reportsGrid,
+      focusedReport: this.#focusedReport,
+    };
+    this.#view(viewInput, {}, this.element);
+  }
 
-    this.#emptyWidget?.detach();
-    this.#emptyWidget = undefined;
-    this.setMainWidget(this.#reportingApiReports);
-    this.showBoth();
+  #onEndpointsChangedForOrigin({data}: {data: Protocol.Network.ReportingApiEndpointsChangedForOriginEvent}): void {
+    this.#endpoints.set(data.origin, data.endpoints);
+    this.#endpointsGrid.data = {endpoints: this.#endpoints};
+    this.requestUpdate();
   }
 
-  private onEndpointsChangedForOrigin(data: Protocol.Network.ReportingApiEndpointsChangedForOriginEvent): void {
-    this.#showReportsAndEndpoints();
-    this.endpoints.set(data.origin, data.endpoints);
-    this.endpointsGrid.data = {endpoints: this.endpoints};
+  #onReportAdded({data: report}: {data: Protocol.Network.ReportingApiReport}): void {
+    this.#reports.push(report);
+    this.#reportsGrid.data = {reports: this.#reports};
+    this.requestUpdate();
+  }
+
+  #onReportUpdated({data: report}: {data: Protocol.Network.ReportingApiReport}): void {
+    const index = this.#reports.findIndex(oldReport => oldReport.id === report.id);
+    this.#reports[index] = report;
+    this.#reportsGrid.data = {reports: this.#reports};
+    this.requestUpdate();
+  }
+
+  async #onFocus(event: Event): Promise<void> {
+    const selectEvent = event as CustomEvent<string>;
+    const report = this.#reports.find(report => report.id === selectEvent.detail);
+    if (report) {
+      this.#focusedReport = report;
+      this.requestUpdate();
+    }
   }
 }

package/front_end/panels/application/ServiceWorkerCacheTreeElement.ts

@@ -17,23 +17,23 @@ import {ServiceWorkerCacheView} from './ServiceWorkerCacheViews.js';
 
 const UIStrings = {
   /**
-   *@description Text in Application Panel Sidebar of the Application panel
+   * @description Text in Application Panel Sidebar of the Application panel
    */
   cacheStorage: 'Cache storage',
   /**
-   *@description Text in Application Panel if no cache storage was detected.
+   * @description Text in Application Panel if no cache storage was detected.
    */
   noCacheStorage: 'No cache storage detected',
   /**
-   *@description Description text in Application Panel describing the cache storage tab
+   * @description Description text in Application Panel describing the cache storage tab
    */
   cacheStorageDescription: 'On this page you can view and delete cache data.',
   /**
-   *@description A context menu item in the Application Panel Sidebar of the Application panel
+   * @description A context menu item in the Application Panel Sidebar of the Application panel
    */
   refreshCaches: 'Refresh Caches',
   /**
-   *@description Text to delete something
+   * @description Text to delete something
    */
   delete: 'Delete',
 } as const;

package/front_end/panels/application/ServiceWorkerCacheViews.ts

@@ -23,35 +23,35 @@ import serviceWorkerCacheViewsStyles from './serviceWorkerCacheViews.css.js';
 
 const UIStrings = {
   /**
-   *@description Text in Application Panel Sidebar of the Application panel
+   * @description Text in Application Panel Sidebar of the Application panel
    */
   cache: 'Cache',
   /**
-   *@description Text to refresh the page
+   * @description Text to refresh the page
    */
   refresh: 'Refresh',
   /**
-   *@description Tooltip text that appears when hovering over the largeicon delete button in the Service Worker Cache Views of the Application panel
+   * @description Tooltip text that appears when hovering over the largeicon delete button in the Service Worker Cache Views of the Application panel
    */
   deleteSelected: 'Delete Selected',
   /**
-   *@description Text in Service Worker Cache Views of the Application panel
+   * @description Text in Service Worker Cache Views of the Application panel
    */
   filterByPath: 'Filter by path',
   /**
-   *@description Text in Service Worker Cache Views of the Application panel that shows if no cache entry is selected for preview
+   * @description Text in Service Worker Cache Views of the Application panel that shows if no cache entry is selected for preview
    */
   noCacheEntrySelected: 'No cache entry selected',
   /**
-   *@description Text in Service Worker Cache Views of the Application panel
+   * @description Text in Service Worker Cache Views of the Application panel
    */
   selectACacheEntryAboveToPreview: 'Select a cache entry above to preview',
   /**
-   *@description Text for the name of something
+   * @description Text for the name of something
    */
   name: 'Name',
   /**
-   *@description Text in Service Worker Cache Views of the Application panel
+   * @description Text in Service Worker Cache Views of the Application panel
    */
   timeCached: 'Time Cached',
   /**
@@ -59,25 +59,25 @@ const UIStrings = {
    */
   varyHeaderWarning: '⚠️ Set ignoreVary to true when matching this entry',
   /**
-   *@description Text used to show that data was retrieved from ServiceWorker Cache
+   * @description Text used to show that data was retrieved from ServiceWorker Cache
    */
   serviceWorkerCache: '`Service Worker` Cache',
   /**
-   *@description Span text content in Service Worker Cache Views of the Application panel
-   *@example {2} PH1
+   * @description Span text content in Service Worker Cache Views of the Application panel
+   * @example {2} PH1
    */
   matchingEntriesS: 'Matching entries: {PH1}',
   /**
-   *@description Span text content in Indexed DBViews of the Application panel
-   *@example {2} PH1
+   * @description Span text content in Indexed DBViews of the Application panel
+   * @example {2} PH1
    */
   totalEntriesS: 'Total entries: {PH1}',
   /**
-   *@description Text for network request headers
+   * @description Text for network request headers
    */
   headers: 'Headers',
   /**
-   *@description Text for previewing items
+   * @description Text for previewing items
    */
   preview: 'Preview',
 } as const;
@@ -104,7 +104,11 @@ export class ServiceWorkerCacheView extends UI.View.SimpleView {
   private readonly metadataView = new ApplicationComponents.StorageMetadataView.StorageMetadataView();
 
   constructor(model: SDK.ServiceWorkerCacheModel.ServiceWorkerCacheModel, cache: SDK.ServiceWorkerCacheModel.Cache) {
-    super(i18nString(UIStrings.cache));
+    super({
+      title: i18nString(UIStrings.cache),
+      viewId: 'cache',
+      jslog: `${VisualLogging.pane('cache-storage-data')}`,
+    });
     this.registerRequiredCSS(serviceWorkerCacheViewsStyles);
 
     this.model = model;
@@ -112,7 +116,6 @@ export class ServiceWorkerCacheView extends UI.View.SimpleView {
 
     this.element.classList.add('service-worker-cache-data-view');
     this.element.classList.add('storage-view');
-    this.element.setAttribute('jslog', `${VisualLogging.pane('cache-storage-data')}`);
 
     const editorToolbar = this.element.createChild('devtools-toolbar', 'data-view-toolbar');
     editorToolbar.setAttribute('jslog', `${VisualLogging.toolbar()}`);

package/front_end/panels/application/ServiceWorkerUpdateCycleView.ts

@@ -11,25 +11,25 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 const UIStrings = {
   /**
-   *@description Text in Indexed DBViews of the Application panel
+   * @description Text in Indexed DBViews of the Application panel
    */
   version: 'Version',
   /**
-   *@description Table heading for Service Workers update information. Update is a noun.
+   * @description Table heading for Service Workers update information. Update is a noun.
    */
   updateActivity: 'Update Activity',
   /**
-   *@description Title for the timeline tab.
+   * @description Title for the timeline tab.
    */
   timeline: 'Timeline',
   /**
-   *@description Text in Service Workers Update Life Cycle
-   *@example {2} PH1
+   * @description Text in Service Workers Update Life Cycle
+   * @example {2} PH1
    */
   startTimeS: 'Start time: {PH1}',
   /**
-   *@description Text for end time of an event
-   *@example {2} PH1
+   * @description Text for end time of an event
+   * @example {2} PH1
    */
   endTimeS: 'End time: {PH1}',
 } as const;