[GM3Restyling] Introduce new empty state for ReportingAPI

This adds another placeholder to reporting api, in case neither
report nor endpoint have yet been detected.

Before: https://i.imgur.com/2OyzfZh.png
After: https://i.imgur.com/mCl5UAQ.png
Bug: 400383914
Change-Id: If59cbdd755a34072afecc5ad6956f546173b40bf
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6342615
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/panels/application/ReportingApiView.test.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Protocol from '../../generated/protocol.js';
 import {createTarget} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -38,15 +39,64 @@ describeWithMockConnection('ReportingApiView', () => {
         endpointsGridData.set, {endpoints: new Map([[ORIGIN_1, ENDPOINTS_1], [ORIGIN_2, ENDPOINTS_2]])});
   });
 
-  it('shows reports (main element) and endpoints (sidebar element)', () => {
+  it('shows placeholder if no report or endpoint data is available yet', () => {
     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);
 
+    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.');
+  });
+
+  it('shows reports (main element) and endpoints (sidebar element) if endpoint appears', () => {
+    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);
+
+    networkManager.dispatchEventToListeners(
+        SDK.NetworkManager.Events.ReportingApiEndpointsChangedForOrigin, {origin: 'dummy', endpoints: []});
+    assert.isTrue(view.showMode() === UI.SplitWidget.ShowMode.BOTH);
+    assert.isNotNull(view.mainWidget());
+    assert.instanceOf(view.mainWidget(), Application.ReportingApiReportsView.ReportingApiReportsView);
+    assert.isNotNull(view.sidebarElement());
+  });
+
+  it('shows reports (main element) and endpoints (sidebar element) if report appears', () => {
+    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 report = {
+      id: 'some_id' as Protocol.Network.ReportId,
+      initiatorUrl: 'https://example.com/script.js',
+      destination: 'main-endpoint',
+      type: 'deprecation',
+      timestamp: 1,
+      depth: 1,
+      completedAttempts: 0,
+      body: {
+        columnNumber: 8,
+        id: 'PrefixedStorageInfo',
+        lineNumber: 15,
+        message: '',
+        sourceFile: 'https://example.com/script.js',
+      },
+      status: Protocol.Network.ReportStatus.Queued,
+    };
+
+    networkManager.dispatchEventToListeners(SDK.NetworkManager.Events.ReportingApiReportAdded, report);
     assert.isTrue(view.showMode() === UI.SplitWidget.ShowMode.BOTH);
     assert.isNotNull(view.mainWidget());
+    assert.instanceOf(view.mainWidget(), Application.ReportingApiReportsView.ReportingApiReportsView);
     assert.isNotNull(view.sidebarElement());
   });
 });

front_end/panels/application/ReportingApiView.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as i18n from '../../core/i18n/i18n.js';
+import 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 UI from '../../ui/legacy/legacy.js';
@@ -10,9 +12,33 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import type * as ApplicationComponents from './components/components.js';
 import {ReportingApiReportsView} from './ReportingApiReportsView.js';
 
+const UIStrings = {
+  /**
+   *@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.
+   *             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.',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('panels/application/ReportingApiView.ts', UIStrings);
+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);
@@ -21,22 +47,44 @@ export class ReportingApiView extends UI.SplitWidget.SplitWidget {
     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.appendLink(REPORTING_API_EXPLANATION_URL);
+    this.setMainWidget(this.#emptyWidget);
     if (networkManager) {
       networkManager.addEventListener(
           SDK.NetworkManager.Events.ReportingApiEndpointsChangedForOrigin,
           event => this.onEndpointsChangedForOrigin(event.data), this);
 
-      const reportingApiReportsView = new ReportingApiReportsView(networkManager);
+      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.setMainWidget(reportingApiReportsView);
+
       this.setSidebarWidget(reportingApiEndpointsView);
       void networkManager.enableReportingApi();
+      this.hideSidebar();
     }
   }
 
+  #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) {
+      return;
+    }
+
+    this.#emptyWidget?.detach();
+    this.#emptyWidget = undefined;
+    this.setMainWidget(this.#reportingApiReports);
+    this.showBoth();
+  }
+
   private onEndpointsChangedForOrigin(data: Protocol.Network.ReportingApiEndpointsChangedForOriginEvent): void {
+    this.#showReportsAndEndpoints();
     this.endpoints.set(data.origin, data.endpoints);
     this.endpointsGrid.data = {endpoints: this.endpoints};
   }