[GM3Restyling] Update shared storage empty state

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

Author: ktran

front_end/panels/application/SharedStorageEventsView.test.ts

@@ -148,7 +148,7 @@ describeWithMockConnection('SharedStorageEventsView', () => {
   it('initially has placeholder sidebar', () => {
     const view = new View.SharedStorageEventsView();
     assert.notDeepEqual(view.sidebarWidget()?.constructor.name, 'SearchableView');
-    assert.isTrue(view.sidebarWidget()?.contentElement.firstChild?.textContent?.includes('Click'));
+    assert.deepEqual(view.sidebarWidget()?.contentElement.firstChild?.textContent, 'No shared storage event selected');
   });
 
   it('updates sidebarWidget upon receiving cellFocusedEvent', async () => {
@@ -186,7 +186,7 @@ describeWithMockConnection('SharedStorageEventsView', () => {
     view.clearEvents();
     assert.isTrue(spy.calledTwice);
     assert.notDeepEqual(view.sidebarWidget()?.constructor.name, 'SearchableView');
-    assert.isTrue(view.sidebarWidget()?.contentElement.firstChild?.textContent?.includes('Click'));
+    assert.deepEqual(view.sidebarWidget()?.contentElement.firstChild?.textContent, 'No shared storage event selected');
   });
 
   it('records events only from the target page', () => {

front_end/panels/application/SharedStorageEventsView.ts

@@ -13,11 +13,19 @@ import * as ApplicationComponents from './components/components.js';
 import sharedStorageEventsViewStyles from './sharedStorageEventsView.css.js';
 
 const UIStrings = {
+  /**
+   *@description Placeholder text if no shared storage event has been selected.
+   * Shared storage allows to store and access data that can be shared across different sites.
+   * A shared storage event is for example an access from a site to that storage.
+   */
+  noEventSelected: 'No shared storage event selected',
   /**
    *@description Placeholder text instructing the user how to display shared
-   *storage event details.
+   * storage event details.
+   * Shared storage allows to store and access data that can be shared across different sites.
+   * A shared storage event is for example an access from a site to that storage.
    */
-  clickToDisplayBody: 'Click on any shared storage event to display the event parameters.',
+  clickToDisplayBody: 'Click on any shared storage event to display the event parameters',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/SharedStorageEventsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -39,23 +47,21 @@ export class SharedStorageEventsView extends UI.SplitWidget.SplitWidget {
     this.element.setAttribute('jslog', `${VisualLogging.pane('shared-storage-events')}`);
 
     const topPanel = new UI.Widget.VBox();
-    this.#noDisplayView = new UI.Widget.VBox();
+    this.#noDisplayView =
+        new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.noEventSelected), i18nString(UIStrings.clickToDisplayBody));
 
     topPanel.setMinimumSize(0, 80);
     this.setMainWidget(topPanel);
     this.#noDisplayView.setMinimumSize(0, 40);
     this.setSidebarWidget(this.#noDisplayView);
+    this.hideSidebar();
 
     topPanel.contentElement.appendChild(this.#sharedStorageEventGrid);
     this.#sharedStorageEventGrid.addEventListener('select', this.#onFocus.bind(this));
     this.#sharedStorageEventGrid.setAttribute('jslog', `${VisualLogging.section('events-table')}`);
 
     this.#getMainFrameResourceTreeModel()?.addEventListener(
         SDK.ResourceTreeModel.Events.PrimaryPageChanged, this.clearEvents, this);
-
-    this.#noDisplayView.contentElement.classList.add('placeholder');
-    const noDisplayDiv = this.#noDisplayView.contentElement.createChild('div');
-    noDisplayDiv.textContent = i18nString(UIStrings.clickToDisplayBody);
   }
 
   #getMainFrameResourceTreeModel(): SDK.ResourceTreeModel.ResourceTreeModel|null {
@@ -90,6 +96,10 @@ export class SharedStorageEventsView extends UI.SplitWidget.SplitWidget {
       return;
     }
 
+    if (this.showMode() !== UI.SplitWidget.ShowMode.BOTH) {
+      this.showBoth();
+    }
+
     this.#events.push(event);
     this.#sharedStorageEventGrid.data = this.#events;
   }
@@ -98,6 +108,7 @@ export class SharedStorageEventsView extends UI.SplitWidget.SplitWidget {
     this.#events = [];
     this.#sharedStorageEventGrid.data = this.#events;
     this.setSidebarWidget(this.#noDisplayView);
+    this.hideSidebar();
   }
 
   async #onFocus(event: Event): Promise<void> {

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

@@ -68,7 +68,7 @@ describeWithLocale('SharedStorageAccessGrid', () => {
     const nullGridElement = component.shadowRoot!.querySelector('devtools-new-data');
     assert.isNull(nullGridElement);
 
-    const noEventsElement = component.shadowRoot!.querySelector('div.no-events-message');
+    const noEventsElement = component.shadowRoot!.querySelector('.empty-state');
     assert.instanceOf(noEventsElement, HTMLDivElement);
   });
 });

front_end/panels/application/components/SharedStorageAccessGrid.ts

@@ -6,14 +6,26 @@ 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 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 sharedStorageAccessGridStylesRaw from './sharedStorageAccessGrid.css.js';
 
 // TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
 const sharedStorageAccessGridStyles = new CSSStyleSheet();
 sharedStorageAccessGridStyles.replaceSync(sharedStorageAccessGridStylesRaw.cssContent);
 
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const inspectorCommonStyles = new CSSStyleSheet();
+inspectorCommonStyles.replaceSync(inspectorCommonStylesRaw.cssContent);
+
+const SHARED_STORAGE_EXPLANATION_URL =
+    'https://developers.google.com/privacy-sandbox/private-advertising/shared-storage';
+
 const {render, html} = Lit;
 
 const UIStrings = {
@@ -48,9 +60,23 @@ const UIStrings = {
    */
   eventParams: 'Optional Event Params',
   /**
-   *@description Text shown instead of a table when the table would be empty.
+   *@description Text shown when no shared storage event is shown.
+   * Shared storage allows to store and access data that can be shared across different sites.
+   * A shared storage event is for example an access from a site to that storage.
    */
-  noEvents: 'No shared storage events recorded.',
+  noEvents: 'No shared storage events detected',
+  /**
+   *@description Text shown when no shared storage event is shown. It explains the shared storage event page.
+   * Shared storage allows to store and access data that can be shared across different sites.
+   * A shared storage event is for example an access from a site to that storage.
+   */
+  sharedStorageDescription:
+      'On this page you can view, add, edit and delete shared storage key-value pairs and view shared storage events.',
+  /**
+   * @description Text used in a link to learn more about the topic.
+   */
+  learnMore: 'Learn more',
+
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/SharedStorageAccessGrid.ts', UIStrings);
@@ -61,7 +87,7 @@ export class SharedStorageAccessGrid extends HTMLElement {
   #datastores: Array<Protocol.Storage.SharedStorageAccessedEvent> = [];
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [sharedStorageAccessGridStyles];
+    this.#shadow.adoptedStyleSheets = [sharedStorageAccessGridStyles, inspectorCommonStyles];
     this.#render();
   }
 
@@ -71,55 +97,65 @@ export class SharedStorageAccessGrid extends HTMLElement {
   }
 
   #render(): void {
-    // clang-format off
-    render(html`
-      <div>
-        <span class="heading">${i18nString(UIStrings.sharedStorage)}</span>
-        <devtools-icon class="info-icon"
-                       title=${i18nString(UIStrings.allSharedStorageEvents)}
-                       .data=${{iconName: 'info', color: 'var(--icon-default)', width: '16px'}}>
-        </devtools-icon>
-        ${this.#renderGridOrNoDataMessage()}
-      </div>
-    `, this.#shadow, {host: this});
-    // clang-format on
+    render(html`${this.#renderGridOrNoDataMessage()}`, this.#shadow, {host: this});
   }
 
   #renderGridOrNoDataMessage(): Lit.TemplateResult {
     if (this.#datastores.length === 0) {
-      return html`<div
-        class="no-events-message">${i18nString(UIStrings.noEvents)}</div>`;
+      return html`
+        <div class="empty-state" jslog=${VisualLogging.section().context('empty-view')}>
+          <div class="empty-state-header">${i18nString(UIStrings.noEvents)}</div>
+          <div class="empty-state-description">
+            <span>${i18nString(UIStrings.sharedStorageDescription)}</span>
+            ${
+          UI.XLink.XLink.create(
+              SHARED_STORAGE_EXPLANATION_URL, i18nString(UIStrings.learnMore), 'x-link', undefined, 'learn-more')}
+          </div>
+        </div>
+      `;
     }
+    // clang-format off
     return html`
-      <devtools-data-grid striped inline @select=${this.#onSelect}>
-        <table>
-          <tr>
-            <th id="event-time" weight="10" sortable>
-              ${i18nString(UIStrings.eventTime)}
-            </th>
-            <th id="event-type" weight="10" sortable>
-              ${i18nString(UIStrings.eventType)}
-            </th>
-            <th id="event-owner-origin" weight="10" sortable>
-              ${i18nString(UIStrings.ownerOrigin)}
-            </th>
-            <th id="event-params" weight="10" sortable>
-              ${i18nString(UIStrings.eventParams)}
-            </th>
-          </tr>
-          ${this.#datastores.map((event, index) => html`
-            <tr data-index=${index}>
-              <td data-value=${event.accessTime}>
-                ${new Date(1e3 * event.accessTime).toLocaleString()}
-              </td>
-              <td>${event.type}</td>
-              <td>${event.ownerOrigin}</td>
-              <td>${JSON.stringify(event.params)}</td>
+      <div>
+        <span class="heading">${i18nString(UIStrings.sharedStorage)}</span>
+        <devtools-icon class="info-icon"
+                        title=${i18nString(UIStrings.allSharedStorageEvents)}
+                        .data=${{iconName: 'info', color: 'var(--icon-default)', width: '16px'}}>
+        </devtools-icon>
+        <devtools-data-grid striped inline @select=${this.#onSelect}>
+          <table>
+            <tr>
+              <th id="event-time" weight="10" sortable>
+                ${i18nString(UIStrings.eventTime)}
+              </th>
+              <th id="event-type" weight="10" sortable>
+                ${i18nString(UIStrings.eventType)}
+              </th>
+              <th id="event-owner-origin" weight="10" sortable>
+                ${i18nString(UIStrings.ownerOrigin)}
+              </th>
+              <th id="event-params" weight="10" sortable>
+                ${i18nString(UIStrings.eventParams)}
+              </th>
             </tr>
-          `)}
-        </table>
-      </devtools-data-grid>
+            ${
+        this.#datastores.map((event, index) => html`
+              <tr data-index=${index}>
+                <td data-value=${event.accessTime}>
+                  ${
+            new Date(1e3 * event.accessTime)
+                .toLocaleString()}
+                </td>
+                <td>${event.type}</td>
+                <td>${event.ownerOrigin}</td>
+                <td>${JSON.stringify(event.params)}</td>
+              </tr>
+            `)}
+          </table>
+        </devtools-data-grid>
+      </div>
     `;
+    // clang-format on
   }
 
   #onSelect(event: CustomEvent<HTMLElement>): void {

front_end/panels/application/components/sharedStorageAccessGrid.css

@@ -5,6 +5,8 @@
  */
 :host {
   padding: 20px;
+  height: 100%;
+  display: flex;
 }
 
 .heading {

front_end/panels/application/sharedStorageEventsView.css

@@ -7,16 +7,3 @@
 devtools-shared-storage-access-grid {
   overflow: auto;
 }
-
-.placeholder {
-  align-items: center;
-  justify-content: center;
-  font-size: 13px;
-  color: var(--sys-color-token-subtle);
-  overflow: auto;
-  text-align: center;
-
-  & div {
-    width: 100%;
-  }
-}