[GM3Restyling] Update Reporting API empty states

This updates the empty states for reporting api, and also
hides the bottom panel for viewing the details, if no reports
have been rendered yet.

Before: https://i.imgur.com/9l8UJTI.png
After: https://imgur.com/a/shxzNND
Bug: 325443331
Change-Id: I6678ef1ddf0c19fb5e11f313ff224fa8c2f303c4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6233913
Reviewed-by: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

config/gni/devtools_grd_files.gni

@@ -1296,7 +1296,6 @@ grd_files_debug_sources = [
   "front_end/panels/application/preloading/helper/PreloadingForward.js",
   "front_end/panels/application/preloading/preloadingView.css.js",
   "front_end/panels/application/preloading/preloadingViewDropDown.css.js",
-  "front_end/panels/application/reportingApiReportsView.css.js",
   "front_end/panels/application/resourcesPanel.css.js",
   "front_end/panels/application/resourcesSidebar.css.js",
   "front_end/panels/application/serviceWorkerCacheViews.css.js",

front_end/panels/application/BUILD.gn

@@ -18,7 +18,6 @@ generate_css("css_files") {
     "openedWindowDetailsView.css",
     "preloading/preloadingView.css",
     "preloading/preloadingViewDropDown.css",
-    "reportingApiReportsView.css",
     "resourcesPanel.css",
     "resourcesSidebar.css",
     "serviceWorkerCacheViews.css",

front_end/panels/application/ReportingApiReportsView.ts

@@ -10,9 +10,13 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import * as ApplicationComponents from './components/components.js';
-import reportingApiReportsViewStyles from './reportingApiReportsView.css.js';
 
 const UIStrings = {
+  /**
+   *@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).
@@ -29,35 +33,28 @@ export class ReportingApiReportsView extends UI.SplitWidget.SplitWidget {
   constructor(networkManager: SDK.NetworkManager.NetworkManager) {
     super(/* isVertical: */ false, /* secondIsSidebar: */ true);
     const topPanel = new UI.Widget.VBox();
-    const bottomPanel = new UI.Widget.VBox();
+    const bottomPanel = new UI.EmptyWidget.EmptyWidget(
+        i18nString(UIStrings.noReportSelected), i18nString(UIStrings.clickToDisplayBody));
     topPanel.setMinimumSize(0, 80);
     this.setMainWidget(topPanel);
     bottomPanel.setMinimumSize(0, 40);
     bottomPanel.element.setAttribute('jslog', `${VisualLogging.pane('preview').track({resize: true})}`);
     this.setSidebarWidget(bottomPanel);
+    this.hideSidebar();
 
     topPanel.contentElement.appendChild(this.reportsGrid);
     this.reportsGrid.addEventListener('select', this.onFocus.bind(this));
 
-    bottomPanel.contentElement.classList.add('placeholder');
-    const centered = bottomPanel.contentElement.createChild('div');
-    centered.textContent = i18nString(UIStrings.clickToDisplayBody);
-
     networkManager.addEventListener(
         SDK.NetworkManager.Events.ReportingApiReportAdded, event => this.onReportAdded(event.data), this);
     networkManager.addEventListener(
         SDK.NetworkManager.Events.ReportingApiReportUpdated, event => this.onReportUpdated(event.data), this);
   }
 
-  override wasShown(): void {
-    super.wasShown();
-    const sbw = this.sidebarWidget();
-    if (sbw) {
-      sbw.registerRequiredCSS(reportingApiReportsViewStyles);
-    }
-  }
-
   private onReportAdded(report: Protocol.Network.ReportingApiReport): void {
+    if (this.showMode() !== UI.SplitWidget.ShowMode.BOTH) {
+      this.showBoth();
+    }
     this.reports.push(report);
     this.reportsGrid.data = {reports: this.reports};
   }

front_end/panels/application/ReportingApiView.ts

@@ -32,11 +32,15 @@ export class ReportingApiView extends UI.SplitWidget.SplitWidget {
       reportingApiEndpointsView.contentElement.appendChild(this.endpointsGrid);
       this.setMainWidget(reportingApiReportsView);
       this.setSidebarWidget(reportingApiEndpointsView);
+      this.hideSidebar();
       void networkManager.enableReportingApi();
     }
   }
 
   private onEndpointsChangedForOrigin(data: Protocol.Network.ReportingApiEndpointsChangedForOriginEvent): void {
+    if (this.showMode() !== UI.SplitWidget.ShowMode.BOTH) {
+      this.showBoth();
+    }
     this.endpoints.set(data.origin, data.endpoints);
     this.endpointsGrid.data = {endpoints: this.endpoints};
   }

front_end/panels/application/components/EndpointsGrid.test.ts

@@ -37,8 +37,11 @@ describeWithLocale('EndpointsGrid', () => {
     renderElementIntoDOM(component);
     await RenderCoordinator.done();
 
-    const placeholder = component.shadowRoot!.querySelector('.reporting-placeholder div');
-    assert.strictEqual(placeholder?.textContent, 'No endpoints to display');
+    const placeholderHeader = component.shadowRoot!.querySelector('.empty-state-header');
+    assert.strictEqual(placeholderHeader?.textContent, 'No endpoints to display');
+    const placeholderDescription = component.shadowRoot!.querySelector('.empty-state-description');
+    assert.strictEqual(
+        placeholderDescription?.textContent, 'Here you will find the list of endpoints that receive the reports');
   });
 
   it('renders grid with correct content', async () => {

front_end/panels/application/components/EndpointsGrid.ts

@@ -6,6 +6,9 @@ import '../../../ui/legacy/components/data_grid/data_grid.js';
 
 import * as i18n from '../../../core/i18n/i18n.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 inspectorCommonStylesRaw from '../../../ui/legacy/inspectorCommon.css.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -15,12 +18,21 @@ import reportingApiGridStylesRaw from './reportingApiGrid.css.js';
 const reportingApiGridStyles = new CSSStyleSheet();
 reportingApiGridStyles.replaceSync(reportingApiGridStylesRaw.cssContent);
 
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const inspectorCommonStyles = new CSSStyleSheet();
+inspectorCommonStyles.replaceSync(inspectorCommonStylesRaw.cssContent);
+
 const UIStrings = {
   /**
    *@description Placeholder text when there are no Reporting API endpoints.
    *(https://developers.google.com/web/updates/2018/09/reportingapi#tldr)
    */
   noEndpointsToDisplay: 'No endpoints to display',
+  /**
+   *@description Placeholder text when there are no Reporting API endpoints.
+   *(https://developers.google.com/web/updates/2018/09/reportingapi#tldr)
+   */
+  endpointsDescription: 'Here you will find the list of endpoints that receive the reports'
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/EndpointsGrid.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -37,7 +49,7 @@ export class EndpointsGrid extends HTMLElement {
   #endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]> = new Map();
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [reportingApiGridStyles];
+    this.#shadow.adoptedStyleSheets = [reportingApiGridStyles, inspectorCommonStyles];
     this.#render();
   }
 
@@ -70,8 +82,9 @@ export class EndpointsGrid extends HTMLElement {
             </table>
           </devtools-data-grid>
         ` : html`
-          <div class="reporting-placeholder">
-            <div>${i18nString(UIStrings.noEndpointsToDisplay)}</div>
+          <div class="empty-state">
+            <span class="empty-state-header">${i18nString(UIStrings.noEndpointsToDisplay)}</span>
+            <span class="empty-state-description">${i18nString(UIStrings.endpointsDescription)}</span>
           </div>
         `}
       </div>

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

@@ -43,8 +43,11 @@ describeWithEnvironment('ReportsGrid', () => {
   it('displays placeholder text if no data', async () => {
     const component = await renderReportsGrid();
 
-    const placeholder = component.shadowRoot!.querySelector('.reporting-placeholder div');
-    assert.strictEqual(placeholder!.textContent, 'No reports to display');
+    const placeholderHeader = component.shadowRoot!.querySelector('.empty-state-header');
+    assert.strictEqual(placeholderHeader?.textContent, 'No reports to display');
+    const placeholderDescription = component.shadowRoot!.querySelector('.empty-state-description');
+    assert.isTrue(placeholderDescription?.textContent?.includes(
+        'Here you will find reporting api reports that are generated by the page.'));
   });
 
   it('renders grid with correct content', async () => {

front_end/panels/application/components/ReportsGrid.ts

@@ -9,6 +9,10 @@ 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 inspectorCommonStylesRaw 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';
 
@@ -18,12 +22,25 @@ import reportingApiGridStylesRaw from './reportingApiGrid.css.js';
 const reportingApiGridStyles = new CSSStyleSheet();
 reportingApiGridStyles.replaceSync(reportingApiGridStylesRaw.cssContent);
 
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const inspectorCommonStyles = new CSSStyleSheet();
+inspectorCommonStyles.replaceSync(inspectorCommonStylesRaw.cssContent);
+
 const UIStrings = {
   /**
    *@description Placeholder text when there are no Reporting API reports.
    *(https://developers.google.com/web/updates/2018/09/reportingapi#sending)
    */
   noReportsToDisplay: 'No reports to display',
+  /**
+   *@description Placeholder text that explains Reporting API reports.
+   *(https://developers.google.com/web/updates/2018/09/reportingapi#sending)
+   */
+  reportingApiDescription: 'Here you will find reporting api reports that are generated by the page.',
+  /**
+   * @description Link text to forward to a documentation page on reporting API.
+   */
+  learnMore: 'Learn more',
   /**
    *@description Column header for a table displaying Reporting API reports.
    *Status is one of 'Queued', 'Pending', 'MarkedForRemoval' or 'Success'.
@@ -38,13 +55,15 @@ 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'
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/ReportsGrid.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 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'});
 
@@ -82,7 +101,7 @@ export class ReportsGrid extends HTMLElement {
   #protocolMonitorExperimentEnabled = false;
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [reportingApiGridStyles];
+    this.#shadow.adoptedStyleSheets = [reportingApiGridStyles, inspectorCommonStyles];
     this.#protocolMonitorExperimentEnabled = Root.Runtime.experiments.isEnabled('protocol-monitor');
     this.#render();
   }
@@ -97,8 +116,8 @@ export class ReportsGrid extends HTMLElement {
     // clang-format off
     render(html`
       <div class="reporting-container" jslog=${VisualLogging.section('reports')}>
-        <div class="reporting-header">${i18n.i18n.lockedString('Reports')}</div>
         ${this.#reports.length > 0 ? html`
+          <div class="reporting-header">${i18n.i18n.lockedString('Reports')}</div>
           <devtools-data-grid striped @select=${this.#onSelect}>
             <table>
               <tr>
@@ -128,8 +147,12 @@ export class ReportsGrid extends HTMLElement {
             </table>
           </devtools-data-grid>
         ` : html`
-          <div class="reporting-placeholder">
-            <div>${i18nString(UIStrings.noReportsToDisplay)}</div>
+          <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>

front_end/panels/application/components/reportingApiGrid.css

@@ -19,17 +19,7 @@
   font-size: 15px;
   background-color: var(--sys-color-surface2);
   padding: 1px 4px;
-}
-
-.reporting-placeholder {
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 13px;
-  color: var(--sys-color-token-subtle);
-  min-width: min-content;
-  text-align: center;
+  flex-shrink: 0;
 }
 
 devtools-data-grid {