[GM3Restyling] Update interest group tab in application panel

This updates the empty states in the interest group tabs. We only show
the lower details widget if there are interest groups to inspect to
begin with.

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

Author: ktran

front_end/panels/application/InterestGroupStorageView.test.ts

@@ -67,7 +67,11 @@ describeWithMockConnection('InterestGroupStorageView', () => {
   it('initially has placeholder sidebar', () => {
     const view = new View.InterestGroupStorageView(new InterestGroupDetailsGetter());
     assert.notDeepEqual(view.sidebarWidget()?.constructor.name, 'SearchableView');
-    assert.isTrue(view.sidebarWidget()?.contentElement.firstChild?.textContent?.includes('Click'));
+
+    const placeholder = view.sidebarWidget()?.contentElement;
+    assert.deepEqual(
+        placeholder?.textContent,
+        'No interest group selectedSelect any interest group event to display the group\'s current state');
   });
 
   // Disabled due to flakiness

front_end/panels/application/InterestGroupStorageView.ts

@@ -12,16 +12,35 @@ import * as ApplicationComponents from './components/components.js';
 import interestGroupStorageViewStyles from './interestGroupStorageView.css.js';
 
 const UIStrings = {
+  /**
+   *@description Placeholder text shown when nothing has been selected for display
+   *details.
+   * An interest group is an ad targeting group stored on the browser that can
+   * be used to show a certain set of advertisements in the future as the
+   * outcome of a FLEDGE auction.
+   */
+  noValueSelected: 'No interest group selected',
   /**
    *@description Placeholder text instructing the user how to display interest group
    *details.
+   * An interest group is an ad targeting group stored on the browser that can
+   * be used to show a certain set of advertisements in the future as the
+   * outcome of a FLEDGE auction.
    */
-  clickToDisplayBody: 'Click on any interest group event to display the group\'s current state',
+  clickToDisplayBody: 'Select any interest group event to display the group\'s current state',
   /**
    *@description Placeholder text telling the user no details are available for
    *the selected interest group.
    */
-  noDataAvailable: 'No details available for the selected interest group. The browser may have left the group.',
+  noDataAvailable: 'No details available',
+  /**
+   *@description Placeholder text explaining to the user a potential reason for not having details on
+   * the interest groups.
+   * An interest group is an ad targeting group stored on the browser that can
+   * be used to show a certain set of advertisements in the future as the
+   * outcome of a FLEDGE auction.
+   */
+  noDataDescription: 'The browser may have left the group.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/InterestGroupStorageView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -48,27 +67,22 @@ export class InterestGroupStorageView extends UI.SplitWidget.SplitWidget {
     this.detailsGetter = detailsGetter;
 
     const topPanel = new UI.Widget.VBox();
-    this.noDisplayView = new UI.Widget.VBox();
-    this.noDataView = new UI.Widget.VBox();
+    this.noDisplayView =
+        new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.noValueSelected), i18nString(UIStrings.clickToDisplayBody));
+    this.noDataView =
+        new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.noDataAvailable), i18nString(UIStrings.noDataDescription));
 
-    topPanel.setMinimumSize(0, 80);
+    topPanel.setMinimumSize(0, 120);
     this.setMainWidget(topPanel);
-    this.noDisplayView.setMinimumSize(0, 40);
+    this.noDisplayView.setMinimumSize(0, 80);
     this.setSidebarWidget(this.noDisplayView);
-    this.noDataView.setMinimumSize(0, 40);
+    this.noDataView.setMinimumSize(0, 80);
+    this.noDisplayView.contentElement.setAttribute('jslog', `${VisualLogging.pane('details').track({resize: true})}`);
+    this.noDataView.contentElement.setAttribute('jslog', `${VisualLogging.pane('details').track({resize: true})}`);
+    this.hideSidebar();
 
     topPanel.contentElement.appendChild(this.interestGroupGrid);
     this.interestGroupGrid.addEventListener('select', this.onFocus.bind(this));
-
-    this.noDisplayView.contentElement.classList.add('placeholder');
-    this.noDisplayView.contentElement.setAttribute('jslog', `${VisualLogging.pane('details').track({resize: true})}`);
-    const noDisplayDiv = this.noDisplayView.contentElement.createChild('div');
-    noDisplayDiv.textContent = i18nString(UIStrings.clickToDisplayBody);
-
-    this.noDataView.contentElement.classList.add('placeholder');
-    this.noDataView.contentElement.setAttribute('jslog', `${VisualLogging.pane('details').track({resize: true})}`);
-    const noDataDiv = this.noDataView.contentElement.createChild('div');
-    noDataDiv.textContent = i18nString(UIStrings.noDataAvailable);
   }
 
   override wasShown(): void {
@@ -80,6 +94,9 @@ export class InterestGroupStorageView extends UI.SplitWidget.SplitWidget {
   }
 
   addEvent(event: Protocol.Storage.InterestGroupAccessedEvent): void {
+    if (this.showMode() !== UI.SplitWidget.ShowMode.BOTH) {
+      this.showBoth();
+    }
     // Only add if not already present.
     const foundEvent = this.events.find(t => eventEquals(t, event));
     if (!foundEvent) {

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

@@ -64,7 +64,7 @@ describeWithLocale('InterestGroupAccessGrid', () => {
     const nullGridElement = component.shadowRoot!.querySelector('devtools-data-grid');
     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/InterestGroupAccessGrid.ts

@@ -6,10 +6,17 @@ 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 interestGroupAccessGridStylesRaw from './interestGroupAccessGrid.css.js';
 
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const inspectorCommonStyles = new CSSStyleSheet();
+inspectorCommonStyles.replaceSync(inspectorCommonStylesRaw.cssContent);
+
 // TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
 const interestGroupAccessGridStyles = new CSSStyleSheet();
 interestGroupAccessGridStyles.replaceSync(interestGroupAccessGridStylesRaw.cssContent);
@@ -49,9 +56,19 @@ const UIStrings = {
    */
   groupName: 'Name',
   /**
-   *@description Text shown instead of a table when the table would be empty.
+   *@description Text shown when no interest groups are detected.
+   * An interest group is an ad targeting group stored on the browser that can
+   * be used to show a certain set of advertisements in the future as the
+   * outcome of a FLEDGE auction.
+   */
+  noEvents: 'No interest group events detected',
+  /**
+   *@description Text shown when no interest groups are detected and explains what this page is about.
+   * An interest group is an ad targeting group stored on the browser that can
+   * be used to show a certain set of advertisements in the future as the
+   * outcome of a FLEDGE auction.
    */
-  noEvents: 'No interest group events recorded.',
+  interestGroupDescription: 'On this page you can inspect and analyze interest groups',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/InterestGroupAccessGrid.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -61,7 +78,7 @@ export class InterestGroupAccessGrid extends HTMLElement {
   #datastores: Array<Protocol.Storage.InterestGroupAccessedEvent> = [];
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [interestGroupAccessGridStyles];
+    this.#shadow.adoptedStyleSheets = [interestGroupAccessGridStyles, inspectorCommonStyles];
     this.#render();
   }
 
@@ -71,6 +88,10 @@ export class InterestGroupAccessGrid extends HTMLElement {
   }
 
   #render(): void {
+    if (this.#datastores.length === 0) {
+      Lit.render(this.#renderEmptyState(), this.#shadow, {host: this});
+      return;
+    }
     // clang-format off
     Lit.render(html`
       <div>
@@ -79,17 +100,22 @@ export class InterestGroupAccessGrid extends HTMLElement {
                        title=${i18nString(UIStrings.allInterestGroupStorageEvents)}
                        .data=${{iconName: 'info', color: 'var(--icon-default)', width: '16px'}}>
         </devtools-icon>
-        ${this.#renderGridOrNoDataMessage()}
+        ${this.#renderGrid()}
       </div>
     `, this.#shadow, {host: this});
     // clang-format on
   }
 
-  #renderGridOrNoDataMessage(): Lit.TemplateResult {
-    if (this.#datastores.length === 0) {
-      return html`<div class="no-events-message">${i18nString(UIStrings.noEvents)}</div>`;
-    }
+  #renderEmptyState(): Lit.TemplateResult {
+    return html`
+      <div class="empty-state">
+        <span class="empty-state-header">${i18nString(UIStrings.noEvents)}</span>
+        <span class="empty-state-description">${i18nString(UIStrings.interestGroupDescription)}</span>
+      </div>
+    `;
+  }
 
+  #renderGrid(): Lit.TemplateResult {
     return html`
       <devtools-data-grid @select=${this.#onSelect} striped inline>
         <table>

front_end/panels/application/components/interestGroupAccessGrid.css

@@ -4,7 +4,9 @@
  * found in the LICENSE file.
  */
 :host {
+  display: flex;
   padding: 20px;
+  height: 100%;
 }
 
 .heading {

front_end/panels/application/interestGroupStorageView.css

@@ -7,16 +7,3 @@
 devtools-interest-group-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%;
-  }
-}