chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

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

@@ -2,14 +2,31 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+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';
-import * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.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);
 
-import sharedStorageAccessGridStyles from './sharedStorageAccessGrid.css.js';
+const SHARED_STORAGE_EXPLANATION_URL =
+    'https://developers.google.com/privacy-sandbox/private-advertising/shared-storage';
 
-const {html} = LitHtml;
+const {render, html} = Lit;
 
 const UIStrings = {
   /**
@@ -32,11 +49,6 @@ const UIStrings = {
    * 'documentSet', 'workletDelete', or 'workletGet'.
    */
   eventType: 'Access Type',
-  /**
-   *@description Text in Shared Storage Events View of the Application panel
-   * Id of the page's main frame for this access event.
-   */
-  mainFrameId: 'Main Frame ID',
   /**
    *@description Text in Shared Storage Events View of the Application panel
    * Owner origin of the shared storage for this access event.
@@ -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,110 +87,83 @@ export class SharedStorageAccessGrid extends HTMLElement {
   #datastores: Array<Protocol.Storage.SharedStorageAccessedEvent> = [];
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [sharedStorageAccessGridStyles];
+    this.#shadow.adoptedStyleSheets = [sharedStorageAccessGridStyles, inspectorCommonStyles];
     this.#render();
   }
 
   set data(data: Array<Protocol.Storage.SharedStorageAccessedEvent>) {
-    this.#datastores = data;
+    this.#datastores = data.sort((a, b) => a.accessTime - b.accessTime);
     this.#render();
   }
 
   #render(): void {
+    render(html`${this.#renderGridOrNoDataMessage()}`, this.#shadow, {host: this});
+  }
+
+  #renderGridOrNoDataMessage(): Lit.TemplateResult {
+    if (this.#datastores.length === 0) {
+      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
-    LitHtml.render(html`
+    return 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'}}>
+                        title=${i18nString(UIStrings.allSharedStorageEvents)}
+                        .data=${{iconName: 'info', color: 'var(--icon-default)', width: '16px'}}>
         </devtools-icon>
-        ${this.#renderGridOrNoDataMessage()}
+        <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>
+              </tr>
+            `)}
+          </table>
+        </devtools-data-grid>
       </div>
-    `, this.#shadow, {host: this});
+    `;
     // clang-format on
   }
 
-  #renderGridOrNoDataMessage(): LitHtml.TemplateResult {
-    if (this.#datastores.length === 0) {
-      return html`<div
-        class="no-events-message">${i18nString(UIStrings.noEvents)}</div>`;
+  #onSelect(event: CustomEvent<HTMLElement>): void {
+    const index = parseInt(event.detail.dataset.index || '', 10);
+    const datastore = isNaN(index) ? undefined : this.#datastores[index];
+    if (datastore) {
+      this.dispatchEvent(new CustomEvent('select', {detail: datastore}));
     }
-
-    const gridData: DataGrid.DataGridController.DataGridControllerData = {
-      columns: [
-        {
-          id: 'event-main-frame-id',
-          title: i18nString(UIStrings.mainFrameId),
-          widthWeighting: 10,
-          hideable: false,
-          visible: false,
-          sortable: false,
-        },
-        {
-          id: 'event-time',
-          title: i18nString(UIStrings.eventTime),
-          widthWeighting: 10,
-          hideable: false,
-          visible: true,
-          sortable: true,
-        },
-        {
-          id: 'event-type',
-          title: i18nString(UIStrings.eventType),
-          widthWeighting: 10,
-          hideable: false,
-          visible: true,
-          sortable: true,
-        },
-        {
-          id: 'event-owner-origin',
-          title: i18nString(UIStrings.ownerOrigin),
-          widthWeighting: 10,
-          hideable: false,
-          visible: true,
-          sortable: true,
-        },
-        {
-          id: 'event-params',
-          title: i18nString(UIStrings.eventParams),
-          widthWeighting: 10,
-          hideable: false,
-          visible: true,
-          sortable: true,
-        },
-      ],
-      rows: this.#buildRows(),
-      initialSort: {
-        columnId: 'event-time',
-        direction: DataGrid.DataGridUtils.SortDirection.ASC,
-      },
-    };
-
-    return html`
-      <devtools-data-grid-controller .data=${gridData}></devtools-data-grid-controller>
-    `;
-  }
-
-  #buildRows(): DataGrid.DataGridUtils.Row[] {
-    return this.#datastores.map(event => ({
-                                  cells: [
-                                    {columnId: 'event-main-frame-id', value: event.mainFrameId},
-                                    {
-                                      columnId: 'event-time',
-                                      value: event.accessTime,
-                                      renderer: this.#renderDateForDataGridCell.bind(this),
-                                    },
-                                    {columnId: 'event-type', value: event.type},
-                                    {columnId: 'event-owner-origin', value: event.ownerOrigin},
-                                    {columnId: 'event-params', value: JSON.stringify(event.params)},
-                                  ],
-                                }));
-  }
-
-  #renderDateForDataGridCell(value: DataGrid.DataGridUtils.CellValue): LitHtml.TemplateResult {
-    const date = new Date(1e3 * (value as number));
-    return html`${date.toLocaleString()}`;
   }
 }
 

package/front_end/panels/application/components/SharedStorageMetadataView.ts

@@ -7,12 +7,16 @@ import '../../../ui/components/icon_button/icon_button.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as Lit from '../../../ui/lit/lit.js';
 
-import sharedStorageMetadataViewStyles from './sharedStorageMetadataView.css.js';
+import sharedStorageMetadataViewStylesRaw from './sharedStorageMetadataView.css.js';
 import {StorageMetadataView} from './StorageMetadataView.js';
 
-const {html} = LitHtml;
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const sharedStorageMetadataViewStyles = new CSSStyleSheet();
+sharedStorageMetadataViewStyles.replaceSync(sharedStorageMetadataViewStylesRaw.cssContent);
+
+const {html} = Lit;
 
 const UIStrings = {
   /**
@@ -83,7 +87,7 @@ export class SharedStorageMetadataView extends StorageMetadataView {
     return i18nString(UIStrings.sharedStorage);
   }
 
-  override async renderReportContent(): Promise<LitHtml.LitTemplate> {
+  override async renderReportContent(): Promise<Lit.LitTemplate> {
     const metadata = await this.#sharedStorageMetadataGetter.getMetadata();
     this.#creationTime = metadata?.creationTime ?? null;
     this.#length = metadata?.length ?? 0;
@@ -105,7 +109,7 @@ export class SharedStorageMetadataView extends StorageMetadataView {
     // clang-format on
   }
 
-  #renderDateForCreationTime(): LitHtml.TemplateResult {
+  #renderDateForCreationTime(): Lit.TemplateResult {
     if (!this.#creationTime) {
       return html`${i18nString(UIStrings.notYetCreated)}`;
     }
@@ -113,7 +117,7 @@ export class SharedStorageMetadataView extends StorageMetadataView {
     return html`${date.toLocaleString()}`;
   }
 
-  #renderResetBudgetButton(): LitHtml.TemplateResult {
+  #renderResetBudgetButton(): Lit.TemplateResult {
     // clang-format off
     return html`
       <devtools-button .iconName=${'undo'}

package/front_end/panels/application/components/StackTrace.test.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../../core/common/common.js';
-import type * as Platform from '../../../core/platform/platform.js';
+import * as Platform from '../../../core/platform/platform.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as Workspace from '../../../models/workspace/workspace.js';
@@ -21,6 +21,7 @@ import * as Components from '../../../ui/legacy/components/utils/utils.js';
 
 import * as ApplicationComponents from './components.js';
 
+const {urlString} = Platform.DevToolsPath;
 const makeFrame = (overrides: Partial<SDK.ResourceTreeModel.ResourceTreeFrame> = {}) => {
   const newFrame: SDK.ResourceTreeModel.ResourceTreeFrame = {
     resourceTreeModel: () => ({
@@ -42,7 +43,7 @@ function mockBuildStackTraceRows(
   const fakeProject = {id: () => 'http://www.example.com', type: () => Workspace.Workspace.projectTypes.Network} as
       Workspace.Workspace.Project;
   return stackTrace.callFrames.map(callFrame => {
-    const url = callFrame.url as Platform.DevToolsPath.UrlString;
+    const url = urlString`${callFrame.url}`;
     const link = Components.Linkifier.Linkifier.linkifyURL(url);
     Components.Linkifier.Linkifier.bindUILocationForTest(
         link,
@@ -122,7 +123,7 @@ describeWithEnvironment('StackTrace', () => {
   it('hides hidden rows behind "show all" button', async () => {
     // Initialize ignore listing
     const {ignoreListManager} = setupIgnoreListManagerEnvironment();
-    ignoreListManager.ignoreListURL('http://www.example.com/hidden.js' as Platform.DevToolsPath.UrlString);
+    ignoreListManager.ignoreListURL(urlString`http://www.example.com/hidden.js`);
     const frame = makeFrame({
       getCreationStackTraceData: () => ({
         creationStackTrace: {

package/front_end/panels/application/components/StackTrace.ts

@@ -9,13 +9,19 @@ import type * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as Bindings from '../../../models/bindings/bindings.js';
 import * as Components from '../../../ui/legacy/components/utils/utils.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
-import stackTraceLinkButtonStyles from './stackTraceLinkButton.css.js';
-import stackTraceRowStyles from './stackTraceRow.css.js';
+import stackTraceLinkButtonStylesRaw from './stackTraceLinkButton.css.js';
+import stackTraceRowStylesRaw from './stackTraceRow.css.js';
 
-const {html} = LitHtml;
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const stackTraceLinkButtonStyles = new CSSStyleSheet();
+stackTraceLinkButtonStyles.replaceSync(stackTraceLinkButtonStylesRaw.cssContent);
+const stackTraceRowStyles = new CSSStyleSheet();
+stackTraceRowStyles.replaceSync(stackTraceRowStylesRaw.cssContent);
+
+const {html} = Lit;
 
 const UIStrings = {
   /**
@@ -73,7 +79,7 @@ export class StackTraceRow extends HTMLElement {
     if (!this.#stackTraceRowItem) {
       return;
     }
-    LitHtml.render(
+    Lit.render(
         html`
       <div class="stack-trace-row">
               <div class="stack-trace-function-name text-ellipsis" title=${this.#stackTraceRowItem.functionName}>
@@ -83,7 +89,7 @@ export class StackTraceRow extends HTMLElement {
                 ${
             this.#stackTraceRowItem.link ?
                 html`<div class="text-ellipsis">\xA0@\xA0${this.#stackTraceRowItem.link}</div>` :
-                LitHtml.nothing}
+                Lit.nothing}
               </div>
             </div>
     `,
@@ -121,7 +127,7 @@ export class StackTraceLinkButton extends HTMLElement {
     }
     const linkText = this.#expandedView ? i18nString(UIStrings.showLess) :
                                           i18nString(UIStrings.showSMoreFrames, {n: this.#hiddenCallFramesCount});
-    LitHtml.render(
+    Lit.render(
         html`
       <div class="stack-trace-row">
           <button class="link" @click=${() => this.#onShowAllClick()}>
@@ -162,7 +168,7 @@ export class StackTrace extends HTMLElement {
     this.#render();
   }
 
-  createRowTemplates(): LitHtml.TemplateResult[] {
+  createRowTemplates(): Lit.TemplateResult[] {
     const expandableRows = [];
     let hiddenCallFramesCount = 0;
     for (const item of this.#stackTraceRows) {
@@ -213,7 +219,7 @@ export class StackTrace extends HTMLElement {
     if (!this.#stackTraceRows.length) {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      LitHtml.render(
+      Lit.render(
         html`
           <span>${i18nString(UIStrings.cannotRenderStackTrace)}</span>
         `,
@@ -222,7 +228,7 @@ export class StackTrace extends HTMLElement {
     }
 
     const expandableRows = this.createRowTemplates();
-    LitHtml.render(
+    Lit.render(
       html`
         <devtools-expandable-list .data=${{rows: expandableRows, title: i18nString(UIStrings.creationStackTrace)}}
                                   jslog=${VisualLogging.tree()}>

package/front_end/panels/application/components/StorageMetadataView.ts

@@ -11,9 +11,9 @@ 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';
 import * as UI from '../../../ui/legacy/legacy.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as Lit from '../../../ui/lit/lit.js';
 
-const {html} = LitHtml;
+const {html} = Lit;
 
 const UIStrings = {
   /**
@@ -139,7 +139,7 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
     return RenderCoordinator.write('StorageMetadataView render', async () => {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      LitHtml.render(html`
+      Lit.render(html`
         <devtools-report .data=${{reportTitle: this.getTitle() ?? i18nString(UIStrings.loading)}}>
           ${await this.renderReportContent()}
         </devtools-report>`, this.#shadow, {host: this});
@@ -156,17 +156,17 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
     return this.#storageBucketsModel ? `${bucketName} - ${origin}` : origin;
   }
 
-  key(content: string|LitHtml.TemplateResult): LitHtml.TemplateResult {
+  key(content: string|Lit.TemplateResult): Lit.TemplateResult {
     return html`<devtools-report-key>${content}</devtools-report-key>`;
   }
 
-  value(content: string|LitHtml.TemplateResult): LitHtml.TemplateResult {
+  value(content: string|Lit.TemplateResult): Lit.TemplateResult {
     return html`<devtools-report-value>${content}</devtools-report-value>`;
   }
 
-  async renderReportContent(): Promise<LitHtml.LitTemplate> {
+  async renderReportContent(): Promise<Lit.LitTemplate> {
     if (!this.#storageKey) {
-      return LitHtml.nothing;
+      return Lit.nothing;
     }
     const origin = this.#storageKey.origin;
     const ancestorChainHasCrossSite =
@@ -185,21 +185,21 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
     return html`
         ${this.key(i18nString(UIStrings.origin))}
         ${this.value(html`<div class="text-ellipsis" title=${origin}>${origin}</div>`)}
-        ${(topLevelSite || topLevelSiteIsOpaque) ? this.key(i18nString(UIStrings.topLevelSite)) : LitHtml.nothing}
-        ${topLevelSite ? this.value(topLevelSite) : LitHtml.nothing}
-        ${topLevelSiteIsOpaque ? this.value(i18nString(UIStrings.opaque)) : LitHtml.nothing}
-        ${thirdPartyReason ? html`${this.key(i18nString(UIStrings.isThirdParty))}${this.value(thirdPartyReason)}` : LitHtml.nothing}
+        ${(topLevelSite || topLevelSiteIsOpaque) ? this.key(i18nString(UIStrings.topLevelSite)) : Lit.nothing}
+        ${topLevelSite ? this.value(topLevelSite) : Lit.nothing}
+        ${topLevelSiteIsOpaque ? this.value(i18nString(UIStrings.opaque)) : Lit.nothing}
+        ${thirdPartyReason ? html`${this.key(i18nString(UIStrings.isThirdParty))}${this.value(thirdPartyReason)}` : Lit.nothing}
         ${hasNonce || topLevelSiteIsOpaque ?
-        this.key(i18nString(UIStrings.isOpaque)) : LitHtml.nothing}
-        ${hasNonce ? this.value(i18nString(UIStrings.yes)) : LitHtml.nothing}
+        this.key(i18nString(UIStrings.isOpaque)) : Lit.nothing}
+        ${hasNonce ? this.value(i18nString(UIStrings.yes)) : Lit.nothing}
         ${topLevelSiteIsOpaque ?
-        this.value(i18nString(UIStrings.yesBecauseTopLevelIsOpaque)) : LitHtml.nothing}
-        ${this.#storageBucket ? this.#renderStorageBucketInfo() : LitHtml.nothing}
-        ${this.#storageBucketsModel ? this.#renderBucketControls() : LitHtml.nothing}`;
+        this.value(i18nString(UIStrings.yesBecauseTopLevelIsOpaque)) : Lit.nothing}
+        ${this.#storageBucket ? this.#renderStorageBucketInfo() : Lit.nothing}
+        ${this.#storageBucketsModel ? this.#renderBucketControls() : Lit.nothing}`;
     // clang-format on
   }
 
-  #renderStorageBucketInfo(): LitHtml.LitTemplate {
+  #renderStorageBucketInfo(): Lit.LitTemplate {
     if (!this.#storageBucket) {
       throw new Error('Should not call #renderStorageBucketInfo if #bucket is null.');
     }
@@ -233,7 +233,7 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
     return (new Date(expiration * 1000)).toLocaleString();
   }
 
-  #renderBucketControls(): LitHtml.TemplateResult {
+  #renderBucketControls(): Lit.TemplateResult {
     // clang-format off
     return html`
       <devtools-report-section>

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

@@ -4,23 +4,23 @@
 
 import type * as SDK from '../../../core/sdk/sdk.js';
 import {
-  getCellByIndexes,
   getValuesOfAllBodyRows,
 } from '../../../testing/DataGridHelpers.js';
 import {
   dispatchClickEvent,
-  getElementWithinComponent,
   renderElementIntoDOM,
 } from '../../../testing/DOMHelpers.js';
 import {createTarget} from '../../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../../testing/MockConnection.js';
-import * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 
 import * as ApplicationComponents from './components.js';
 
 async function renderTrustTokensView(): Promise<ApplicationComponents.TrustTokensView.TrustTokensView> {
   const component = new ApplicationComponents.TrustTokensView.TrustTokensView();
+  component.style.display = 'block';
+  component.style.width = '640px';
+  component.style.height = '480px';
   renderElementIntoDOM(component);
 
   // The data-grid's renderer is scheduled, so we need to wait until the coordinator
@@ -31,9 +31,7 @@ async function renderTrustTokensView(): Promise<ApplicationComponents.TrustToken
 }
 
 function getInternalDataGridShadowRoot(component: ApplicationComponents.TrustTokensView.TrustTokensView): ShadowRoot {
-  const dataGridController = getElementWithinComponent(
-      component, 'devtools-data-grid-controller', DataGrid.DataGridController.DataGridController);
-  const dataGrid = getElementWithinComponent(dataGridController, 'devtools-data-grid', DataGrid.DataGrid.DataGrid);
+  const dataGrid = component.shadowRoot!.querySelector('devtools-data-grid')!;
   assert.isNotNull(dataGrid.shadowRoot);
   return dataGrid.shadowRoot;
 }
@@ -96,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);
   });
 
@@ -120,9 +118,7 @@ describeWithMockConnection('TrustTokensView', () => {
 
     const component = await renderTrustTokensView();
 
-    const dataGridShadowRoot = getInternalDataGridShadowRoot(component);
-    const deleteCell = getCellByIndexes(dataGridShadowRoot, {column: 2, row: 1});
-    const deleteButtonComponent = deleteCell.querySelector('devtools-button');
+    const deleteButtonComponent = component.shadowRoot!.querySelector('devtools-button');
     assert.instanceOf(deleteButtonComponent, HTMLElement);
     dispatchClickEvent(deleteButtonComponent);