[GM3Restyling] Update private state tokens empty view

Before: https://i.imgur.com/hKZNNmL.png
After: https://i.imgur.com/0iTBBmB.png
Bug: 325443331
Change-Id: I660b2748218604d585ea69cac4eb7b499f4cd479
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6247614
Commit-Queue: Kim-Anh Tran <[email protected]>
Reviewed-by: Kateryna Prokopenko <[email protected]>

Author: ktran

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

@@ -94,14 +94,14 @@ describeWithMockConnection('TrustTokensView', () => {
     ]);
   });
 
-  it('hides trust token table when there are no trust tokens', async () => {
+  it('shows empty state when there are no trust tokens', async () => {
     sinon.stub(target.storageAgent(), 'invoke_getTrustTokens').resolves({tokens: [], getError: () => undefined});
     const component = await renderTrustTokensView();
 
     const nullGridElement = component.shadowRoot!.querySelector('devtools-data-grid-controller');
     assert.isNull(nullGridElement);
 
-    const noTrustTokensElement = component.shadowRoot!.querySelector('div.no-tt-message');
+    const noTrustTokensElement = component.shadowRoot!.querySelector('.empty-state');
     assert.instanceOf(noTrustTokensElement, HTMLDivElement);
   });
 

front_end/panels/application/components/TrustTokensView.ts

@@ -11,14 +11,26 @@ import type * as Protocol from '../../../generated/protocol.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.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 trustTokensViewStylesRaw from './trustTokensView.css.js';
 
 // TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
 const trustTokensViewStyles = new CSSStyleSheet();
 trustTokensViewStyles.replaceSync(trustTokensViewStylesRaw.cssContent);
 
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const inspectorCommonStyles = new CSSStyleSheet();
+inspectorCommonStyles.replaceSync(inspectorCommonStylesRaw.cssContent);
+
+const PRIVATE_STATE_TOKENS_EXPLANATION_URL =
+    'https://developers.google.com/privacy-sandbox/protections/private-state-tokens';
+
 const {html} = Lit;
 
 const UIStrings = {
@@ -35,9 +47,14 @@ const UIStrings = {
    */
   allStoredTrustTokensAvailableIn: 'All stored private state tokens available in this browser instance.',
   /**
-   * @description Text shown instead of a table when the table would be empty.
+   * @description Text shown instead of a table when the table would be empty. https://developers.google.com/privacy-sandbox/protections/private-state-tokens
    */
-  noTrustTokensStored: 'No private state tokens are currently stored.',
+  noTrustTokens: 'No private state tokens detected',
+  /**
+   * @description Text shown if there are no private state tokens. https://developers.google.com/privacy-sandbox/protections/private-state-tokens
+   */
+  trustTokensDescription:
+      'On this page you can view all available private state tokens in the current browsing context.',
   /**
    * @description Each row in the Private State Token table has a delete button. This is the text shown
    * when hovering over this button. The placeholder is a normal URL, indicating the site which
@@ -49,6 +66,10 @@ const UIStrings = {
    * @description Heading label for a view. Previously known as 'Trust Tokens'.
    */
   trustTokens: 'Private state tokens',
+  /**
+   * @description Text used in a link to learn more about the topic.
+   */
+  learnMore: 'Learn more',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/TrustTokensView.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -71,7 +92,7 @@ export class TrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableCompon
 
   connectedCallback(): void {
     this.wrapper?.contentElement.classList.add('vbox');
-    this.#shadow.adoptedStyleSheets = [trustTokensViewStyles];
+    this.#shadow.adoptedStyleSheets = [trustTokensViewStyles, inspectorCommonStyles];
     void this.render();
   }
 
@@ -86,11 +107,7 @@ export class TrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     await RenderCoordinator.write('Render TrustTokensView', () => {
       // clang-format off
       Lit.render(html`
-        <div>
-          <span class="heading">${i18nString(UIStrings.trustTokens)}</span>
-          <devtools-icon name="info" title=${i18nString(UIStrings.allStoredTrustTokensAvailableIn)}></devtools-icon>
-          ${this.#renderGridOrNoDataMessage(tokens)}
-        </div>
+        ${this.#renderGridOrNoDataMessage(tokens)}
       `, this.#shadow, {host: this});
       // clang-format on
       if (this.isConnected) {
@@ -101,35 +118,49 @@ export class TrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableCompon
 
   #renderGridOrNoDataMessage(tokens: Protocol.Storage.TrustTokens[]): Lit.TemplateResult {
     if (tokens.length === 0) {
-      return html`<div class="no-tt-message">${i18nString(UIStrings.noTrustTokensStored)}</div>`;
+      // clang-format off
+      return html`
+        <div class="empty-state" jslog=${VisualLogging.section().context('empty-view')}>
+          <div class="empty-state-header">${i18nString(UIStrings.noTrustTokens)}</div>
+          <div class="empty-state-description">
+            <span>${i18nString(UIStrings.trustTokensDescription)}</span>
+            ${UI.XLink.XLink.create(PRIVATE_STATE_TOKENS_EXPLANATION_URL, i18nString(UIStrings.learnMore), 'x-link', undefined, 'learn-more')}
+          </div>
+        </div>
+      `;
+      // clang-format on
     }
 
     // clang-format off
     return html`
-      <devtools-data-grid striped inline>
-        <table>
-          <tr>
-            <th id="issuer" weight="10" sortable>${i18nString(UIStrings.issuer)}</th>
-            <th id="count" weight="5" sortable>${i18nString(UIStrings.storedTokenCount)}</th>
-            <th id="delete-button" weight="1" sortable></th>
-          </tr>
-          ${tokens.filter(token => token.count > 0)
-                .map(token => html`
-              <tr>
-                <td>${removeTrailingSlash(token.issuerOrigin)}</td>
-                <td>${token.count}</td>
-                <td>
-                  <devtools-button .iconName=${'bin'}
-                                   .jslogContext=${'delete-all'}
-                                   .size=${Buttons.Button.Size.SMALL}
-                                   .title=${i18nString(UIStrings.deleteTrustTokens, {PH1: removeTrailingSlash(token.issuerOrigin)})}
-                                   .variant=${Buttons.Button.Variant.ICON}
-                                   @click=${this.#deleteClickHandler.bind(this, removeTrailingSlash(token.issuerOrigin))}></devtools-button>
-                </td>
-              </tr>
-            `)}
-        </table>
-      </devtools-data-grid>
+      <div>
+        <span class="heading">${i18nString(UIStrings.trustTokens)}</span>
+        <devtools-icon name="info" title=${i18nString(UIStrings.allStoredTrustTokensAvailableIn)}></devtools-icon>
+        <devtools-data-grid striped inline>
+          <table>
+            <tr>
+              <th id="issuer" weight="10" sortable>${i18nString(UIStrings.issuer)}</th>
+              <th id="count" weight="5" sortable>${i18nString(UIStrings.storedTokenCount)}</th>
+              <th id="delete-button" weight="1" sortable></th>
+            </tr>
+            ${tokens.filter(token => token.count > 0)
+                  .map(token => html`
+                <tr>
+                  <td>${removeTrailingSlash(token.issuerOrigin)}</td>
+                  <td>${token.count}</td>
+                  <td>
+                    <devtools-button .iconName=${'bin'}
+                                    .jslogContext=${'delete-all'}
+                                    .size=${Buttons.Button.Size.SMALL}
+                                    .title=${i18nString(UIStrings.deleteTrustTokens, {PH1: removeTrailingSlash(token.issuerOrigin)})}
+                                    .variant=${Buttons.Button.Variant.ICON}
+                                    @click=${this.#deleteClickHandler.bind(this, removeTrailingSlash(token.issuerOrigin))}></devtools-button>
+                  </td>
+                </tr>
+              `)}
+          </table>
+        </devtools-data-grid>
+      </div>
     `;
     // clang-format on
   }

front_end/panels/application/components/trustTokensView.css

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