Fix missing styles for interest group empty state

After dropping the `adoptedStyleSheets` the styles went missing for
the interest group tab's empty state. This CL moves the rendering
of the empty state into the main `render` method, under which we also
include the correct styles.

Before: https://i.imgur.com/N3xS6DM.png
After: https://i.imgur.com/3W26pvn.png
Bug: none
Change-Id: If8eed04ec054e199d08053337cd3e6b2d3112c5e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6376103
Commit-Queue: Benedikt Meurer <[email protected]>
Auto-Submit: Kim-Anh Tran <[email protected]>
Reviewed-by: Benedikt Meurer <[email protected]>

Author: ktran

front_end/panels/application/components/InterestGroupAccessGrid.ts

@@ -80,35 +80,29 @@ 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`
       <style>${interestGroupAccessGridStyles.cssText}</style>
       <style>${inspectorCommonStyles.cssText}</style>
-      <div>
-        <span class="heading">Interest Groups</span>
-        <devtools-icon class="info-icon"
-                       title=${i18nString(UIStrings.allInterestGroupStorageEvents)}
-                       .data=${{iconName: 'info', color: 'var(--icon-default)', width: '16px'}}>
-        </devtools-icon>
-        ${this.#renderGrid()}
-      </div>
+      ${this.#datastores.length === 0 ?
+        html`
+          <div class="empty-state">
+            <span class="empty-state-header">${i18nString(UIStrings.noEvents)}</span>
+            <span class="empty-state-description">${i18nString(UIStrings.interestGroupDescription)}</span>
+          </div>`:
+        html`
+          <div>
+            <span class="heading">Interest Groups</span>
+            <devtools-icon class="info-icon"
+                          title=${i18nString(UIStrings.allInterestGroupStorageEvents)}
+                          .data=${{iconName: 'info', color: 'var(--icon-default)', width: '16px'}}>
+            </devtools-icon>
+            ${this.#renderGrid()}
+          </div>`}
     `, this.#shadow, {host: this});
     // clang-format on
   }
 
-  #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>