chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

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

@@ -3,19 +3,35 @@
 // found in the LICENSE file.
 
 import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/legacy/components/data_grid/data_grid.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as DataGrid from '../../../ui/components/data_grid/data_grid.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 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 trustTokensViewStyles from './trustTokensView.css.js';
+import trustTokensViewStylesRaw from './trustTokensView.css.js';
 
-const {html} = LitHtml;
+// 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 = {
   /**
@@ -31,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
+   */
+  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
    */
-  noTrustTokensStored: 'No private state tokens are currently stored.',
+  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
@@ -45,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_);
@@ -67,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();
   }
 
@@ -77,15 +102,12 @@ export class TrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableCompon
       return;
     }
     const {tokens} = await mainTarget.storageAgent().invoke_getTrustTokens();
+    tokens.sort((a, b) => a.issuerOrigin.localeCompare(b.issuerOrigin));
 
     await RenderCoordinator.write('Render TrustTokensView', () => {
       // clang-format off
-      LitHtml.render(html`
-        <div>
-          <span class="heading">${i18nString(UIStrings.trustTokens)}</span>
-          <devtools-icon name="info" title=${i18nString(UIStrings.allStoredTrustTokensAvailableIn)}></devtools-icon>
-          ${this.#renderGridOrNoDataMessage(tokens)}
-        </div>
+      Lit.render(html`
+        ${this.#renderGridOrNoDataMessage(tokens)}
       `, this.#shadow, {host: this});
       // clang-format on
       if (this.isConnected) {
@@ -94,74 +116,51 @@ export class TrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     });
   }
 
-  #renderGridOrNoDataMessage(tokens: Protocol.Storage.TrustTokens[]): LitHtml.TemplateResult {
+  #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
     }
 
-    const gridData: DataGrid.DataGridController.DataGridControllerData = {
-      columns: [
-        {
-          id: 'issuer',
-          title: i18nString(UIStrings.issuer),
-          widthWeighting: 10,
-          hideable: false,
-          visible: true,
-          sortable: true,
-        },
-        {
-          id: 'count',
-          title: i18nString(UIStrings.storedTokenCount),
-          widthWeighting: 5,
-          hideable: false,
-          visible: true,
-          sortable: true,
-        },
-        {
-          id: 'delete-button',
-          title: '',
-          widthWeighting: 1,
-          hideable: false,
-          visible: true,
-          sortable: false,
-        },
-      ],
-      rows: this.#buildRowsFromTokens(tokens),
-      initialSort: {
-        columnId: 'issuer',
-        direction: DataGrid.DataGridUtils.SortDirection.ASC,
-      },
-    };
-
-    return html`
-      <devtools-data-grid-controller .data=${gridData}></devtools-data-grid-controller>
-    `;
-  }
-
-  #buildRowsFromTokens(tokens: Protocol.Storage.TrustTokens[]): DataGrid.DataGridUtils.Row[] {
-    return tokens.filter(token => token.count > 0)
-        .map(token => ({
-               cells: [
-                 {
-                   columnId: 'delete-button',
-                   value: removeTrailingSlash(token.issuerOrigin),
-                   renderer: this.#deleteButtonRendererForDataGridCell.bind(this),
-                 },
-                 {columnId: 'issuer', value: removeTrailingSlash(token.issuerOrigin)},
-                 {columnId: 'count', value: token.count},
-               ],
-             }));
-  }
-
-  #deleteButtonRendererForDataGridCell(issuer: DataGrid.DataGridUtils.CellValue): LitHtml.TemplateResult {
     // clang-format off
     return html`
-      <devtools-button .iconName=${'bin'}
-                       .jslogContext=${'delete-all'}
-                       .size=${Buttons.Button.Size.SMALL}
-                       .title=${i18nString(UIStrings.deleteTrustTokens, {PH1: issuer as string})}
-                       .variant=${Buttons.Button.Variant.ICON}
-                       @click=${this.#deleteClickHandler.bind(this, issuer as string)}></devtools-button>
+      <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
   }

package/front_end/panels/application/components/bounceTrackingMitigationsView.css

@@ -3,8 +3,7 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
-devtools-data-grid-controller {
-  border: 1px solid var(--sys-color-divider);
+devtools-data-grid {
   margin-top: 0;
 }
 

package/front_end/panels/application/components/interestGroupAccessGrid.css

@@ -4,15 +4,16 @@
  * found in the LICENSE file.
  */
 :host {
+  display: flex;
   padding: 20px;
+  height: 100%;
 }
 
 .heading {
   font-size: 15px;
 }
 
-devtools-data-grid-controller {
-  border: 1px solid var(--sys-color-divider);
+devtools-data-grid {
   margin-top: 20px;
 }
 

package/front_end/panels/application/components/reportingApiGrid.css

@@ -19,21 +19,11 @@
   font-size: 15px;
   background-color: var(--sys-color-surface2);
   padding: 1px 4px;
+  flex-shrink: 0;
 }
 
-.reporting-placeholder {
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 13px;
-  color: var(--sys-color-token-subtle);
-  min-width: min-content;
-  text-align: center;
-}
-
-devtools-data-grid-controller {
-  border: 1px solid var(--sys-color-divider);
+devtools-data-grid {
+  flex: auto;
 }
 
 .inline-icon {

package/front_end/panels/application/components/sharedStorageAccessGrid.css

@@ -5,14 +5,15 @@
  */
 :host {
   padding: 20px;
+  height: 100%;
+  display: flex;
 }
 
 .heading {
   font-size: 15px;
 }
 
-devtools-data-grid-controller {
-  border: 1px solid var(--sys-color-divider);
+devtools-data-grid {
   margin-top: 20px;
 }
 

package/front_end/panels/application/components/trustTokensView.css

@@ -6,14 +6,15 @@
 
 :host {
   padding: 20px;
+  height: 100%;
+  display: flex;
 }
 
 .heading {
   font-size: 15px;
 }
 
-devtools-data-grid-controller {
-  border: 1px solid var(--sys-color-divider);
+devtools-data-grid {
   margin-top: 20px;
 
   & devtools-button {

package/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%;
-  }
-}

package/front_end/panels/application/preloading/PreloadingView.test.ts

@@ -15,7 +15,6 @@ import {
   describeWithMockConnection,
   dispatchEvent,
 } 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 ReportView from '../../../ui/components/report_view/report_view.js';
 import * as UI from '../../../ui/legacy/legacy.js';
@@ -145,7 +144,7 @@ class NavigationEmulator {
     let json;
     try {
       json = JSON.parse(specrules);
-    } catch (_) {
+    } catch {
       dispatchEvent(this.primaryTarget, 'Preload.ruleSetUpdated', {
         ruleSet: {
           id: `ruleSetId:0.${this.seq}`,
@@ -245,6 +244,10 @@ function createRuleSetView(target: SDK.Target.Target): Resources.PreloadingView.
   const view = new Resources.PreloadingView.PreloadingRuleSetView(model);
   const container = new UI.Widget.VBox();
   const div = document.createElement('div');
+  view.contentElement.style.display = 'block';
+  view.contentElement.style.width = '640px';
+  view.contentElement.style.height = '480px';
+
   renderElementIntoDOM(div);
   container.markAsRoot();
   container.show(div);
@@ -261,6 +264,8 @@ function createAttemptView(target: SDK.Target.Target): Resources.PreloadingView.
   const view = new Resources.PreloadingView.PreloadingAttemptView(model);
   const container = new UI.Widget.VBox();
   const div = document.createElement('div');
+  view.contentElement.style.width = '640px';
+  view.contentElement.style.height = '480px';
   renderElementIntoDOM(div);
   container.markAsRoot();
   container.show(div);
@@ -366,12 +371,7 @@ describeWithMockConnection('PreloadingRuleSetView', () => {
 
     );
 
-    const cells = [
-      {columnId: 'id', value: 'ruleSetId:0.2'},
-      {columnId: 'Validity', value: 'Invalid'},
-    ];
-    ruleSetGridComponent.dispatchEvent(
-        new DataGrid.DataGridEvents.BodyCellFocusedEvent({columnId: 'Validity', value: 'Invalid'}, {cells}));
+    ruleSetGridComponent.dispatchEvent(new CustomEvent('select', {detail: 'ruleSetId:0.2'}));
 
     await RenderCoordinator.done();
 
@@ -538,9 +538,11 @@ describeWithMockConnection('PreloadingAttemptView', () => {
         ],
     );
 
-    const placeholder = preloadingDetailsComponent.shadowRoot.querySelector('div.preloading-noselected div p');
+    const placeholderHeader = preloadingDetailsComponent.shadowRoot.querySelector('.empty-state-header');
+    assert.strictEqual(placeholderHeader?.textContent?.trim(), 'No element selected');
 
-    assert.strictEqual(placeholder?.textContent, 'Select an element for more details');
+    const placeholderDescription = preloadingDetailsComponent.shadowRoot.querySelector('.empty-state-description');
+    assert.strictEqual(placeholderDescription?.textContent, 'Select an element for more details');
   });
 
   // See https://crbug.com/1432880
@@ -600,9 +602,11 @@ describeWithMockConnection('PreloadingAttemptView', () => {
         ],
     );
 
-    const placeholder = preloadingDetailsComponent.shadowRoot.querySelector('div.preloading-noselected div p');
+    const placeholderHeader = preloadingDetailsComponent.shadowRoot.querySelector('.empty-state-header');
+    assert.strictEqual(placeholderHeader?.textContent?.trim(), 'No element selected');
 
-    assert.strictEqual(placeholder?.textContent, 'Select an element for more details');
+    const placeholderDescription = preloadingDetailsComponent.shadowRoot.querySelector('.empty-state-description');
+    assert.strictEqual(placeholderDescription?.textContent, 'Select an element for more details');
   });
 
   it('filters preloading attempts by selected rule set', async () => {
@@ -767,12 +771,8 @@ describeWithMockConnection('PreloadingAttemptView', () => {
         ],
     );
 
-    const cells = [
-      {columnId: 'id', value: 'loaderId:1:Prerender:https://example.com/prerendered.html:undefined'},
-      // Omit other columns.
-    ];
     preloadingGridComponent.dispatchEvent(
-        new DataGrid.DataGridEvents.BodyCellFocusedEvent({columnId: 'URL', value: '/prerendered.html'}, {cells}));
+        new CustomEvent('select', {detail: 'loaderId:1:Prerender:https://example.com/prerendered.html:undefined'}));
 
     await RenderCoordinator.done();
 
@@ -838,12 +838,8 @@ describeWithMockConnection('PreloadingAttemptView', () => {
         ],
     );
 
-    const cells = [
-      {columnId: 'id', value: 'loaderId:1:Prerender:https://example.com/prerendered.html:undefined'},
-      // Omit other columns.
-    ];
     preloadingGridComponent.dispatchEvent(
-        new DataGrid.DataGridEvents.BodyCellFocusedEvent({columnId: 'URL', value: '/prerendered.html'}, {cells}));
+        new CustomEvent('select', {detail: 'loaderId:1:Prerender:https://example.com/prerendered.html:undefined'}));
 
     await RenderCoordinator.done();
 
@@ -917,12 +913,8 @@ describeWithMockConnection('PreloadingAttemptView', () => {
         ],
     );
 
-    const cells = [
-      {columnId: 'id', value: 'loaderId:1:Prerender:https://example.com/prerendered.html:undefined'},
-      // Omit other columns.
-    ];
     preloadingGridComponent.dispatchEvent(
-        new DataGrid.DataGridEvents.BodyCellFocusedEvent({columnId: 'URL', value: '/prerendered.html'}, {cells}));
+        new CustomEvent('select', {detail: 'loaderId:1:Prerender:https://example.com/prerendered.html:undefined'}));
 
     await RenderCoordinator.done();
 

package/front_end/panels/application/preloading/PreloadingView.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import '../../../ui/components/split_view/split_view.js';
+import '../../../ui/legacy/legacy.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -12,12 +13,11 @@ import * as SDK from '../../../core/sdk/sdk.js';
 import * as Protocol from '../../../generated/protocol.js';
 import * as Bindings from '../../../models/bindings/bindings.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import type * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
 import type * as SplitView from '../../../ui/components/split_view/split_view.js';
 // eslint-disable-next-line rulesdir/es-modules-import
 import emptyWidgetStyles from '../../../ui/legacy/emptyWidget.css.js';
 import * as UI from '../../../ui/legacy/legacy.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import {html, render} from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import * as PreloadingComponents from './components/components.js';
@@ -25,8 +25,6 @@ import type * as PreloadingHelper from './helper/helper.js';
 import preloadingViewStyles from './preloadingView.css.js';
 import preloadingViewDropDownStyles from './preloadingViewDropDown.css.js';
 
-const {html} = LitHtml;
-
 const UIStrings = {
   /**
    *@description DropDown title for filtering preloading attempts by rule set
@@ -192,6 +190,7 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
 
   constructor(model: SDK.PreloadingModel.PreloadingModel) {
     super(/* isWebComponent */ true, /* delegatesFocus */ false);
+    this.registerRequiredCSS(emptyWidgetStyles, preloadingViewStyles);
 
     this.model = model;
     SDK.TargetManager.TargetManager.instance().addScopeChangeListener(this.onScopeChange.bind(this));
@@ -219,7 +218,7 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
     this.contentElement.insertBefore(this.warningsContainer, this.contentElement.firstChild);
     this.warningsView.show(this.warningsContainer);
 
-    this.ruleSetGrid.addEventListener('cellfocused', this.onRuleSetsGridCellFocused.bind(this));
+    this.ruleSetGrid.addEventListener('select', this.onRuleSetsGridCellFocused.bind(this));
 
     const onPrettyPrintToggle = (): void => {
       this.shouldPrettyPrint = !this.shouldPrettyPrint;
@@ -227,7 +226,7 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
     };
 
     // clang-format off
-    LitHtml.render(
+    render(
         html`
         <devtools-split-view .horizontal=${true} style="--min-sidebar-size: max(100vh-200px, 0px)">
           <div slot="main" class="overflow-auto" style="height: 100%">
@@ -258,8 +257,6 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
   override wasShown(): void {
     super.wasShown();
 
-    this.registerCSSFiles([emptyWidgetStyles, preloadingViewStyles]);
-
     this.warningsView.wasShown();
 
     this.render();
@@ -306,9 +303,8 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
   }
 
   private onRuleSetsGridCellFocused(event: Event): void {
-    const focusedEvent = event as DataGrid.DataGridEvents.BodyCellFocusedEvent;
-    this.focusedRuleSetId =
-        focusedEvent.data.row.cells.find(cell => cell.columnId === 'id')?.value as Protocol.Preload.RuleSetId;
+    const focusedEvent = event as CustomEvent<Protocol.Preload.RuleSetId>;
+    this.focusedRuleSetId = focusedEvent.detail;
     this.render();
   }
 
@@ -340,6 +336,7 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
 
   constructor(model: SDK.PreloadingModel.PreloadingModel) {
     super(/* isWebComponent */ true, /* delegatesFocus */ false);
+    this.registerRequiredCSS(emptyWidgetStyles, preloadingViewStyles);
 
     this.element.setAttribute('jslog', `${VisualLogging.pane('preloading-speculations')}`);
     this.model = model;
@@ -372,13 +369,13 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
 
     const vbox = new UI.Widget.VBox();
 
-    const toolbar = new UI.Toolbar.Toolbar('preloading-toolbar', vbox.contentElement);
-    toolbar.element.setAttribute('jslog', `${VisualLogging.toolbar()}`);
+    const toolbar = vbox.contentElement.createChild('devtools-toolbar', 'preloading-toolbar');
+    toolbar.setAttribute('jslog', `${VisualLogging.toolbar()}`);
     this.ruleSetSelector = new PreloadingRuleSetSelector(() => this.render());
     toolbar.appendToolbarItem(this.ruleSetSelector.item());
 
-    this.preloadingGrid.addEventListener('cellfocused', this.onPreloadingGridCellFocused.bind(this));
-    LitHtml.render(
+    this.preloadingGrid.addEventListener('select', this.onPreloadingGridCellFocused.bind(this));
+    render(
         html`
         <devtools-split-view .horizontal=${true} style="--min-sidebar-size: 0px">
           <div slot="main" class="overflow-auto" style="height: 100%">
@@ -396,8 +393,6 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
   override wasShown(): void {
     super.wasShown();
 
-    this.registerCSSFiles([emptyWidgetStyles, preloadingViewStyles]);
-
     this.warningsView.wasShown();
 
     this.render();
@@ -458,9 +453,8 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
   }
 
   private onPreloadingGridCellFocused(event: Event): void {
-    const focusedEvent = event as DataGrid.DataGridEvents.BodyCellFocusedEvent;
-    this.focusedPreloadingAttemptId = focusedEvent.data.row.cells.find(cell => cell.columnId === 'id')?.value as
-        SDK.PreloadingModel.PreloadingAttemptId;
+    const focusedEvent = event as CustomEvent<SDK.PreloadingModel.PreloadingAttemptId>;
+    this.focusedPreloadingAttemptId = focusedEvent.detail;
     this.render();
   }
 
@@ -490,6 +484,7 @@ export class PreloadingSummaryView extends UI.Widget.VBox {
 
   constructor(model: SDK.PreloadingModel.PreloadingModel) {
     super(/* isWebComponent */ true, /* delegatesFocus */ false);
+    this.registerRequiredCSS(emptyWidgetStyles, preloadingViewStyles);
 
     this.element.setAttribute('jslog', `${VisualLogging.pane('speculative-loads')}`);
     this.model = model;
@@ -514,8 +509,6 @@ export class PreloadingSummaryView extends UI.Widget.VBox {
   override wasShown(): void {
     super.wasShown();
 
-    this.registerCSSFiles([emptyWidgetStyles, preloadingViewStyles]);
-
     this.warningsView.wasShown();
 
     this.render();
@@ -660,7 +653,7 @@ class PreloadingRuleSetSelector implements
   // Method for UI.SoftDropDown.Delegate<Protocol.Preload.RuleSetId|typeof AllRuleSetRootId>
   createElementForItem(id: Protocol.Preload.RuleSetId|typeof AllRuleSetRootId): Element {
     const element = document.createElement('div');
-    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(element, {cssFile: [preloadingViewDropDownStyles]});
+    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(element, {cssFile: preloadingViewDropDownStyles});
     const title = shadowRoot.createChild('div', 'title');
     UI.UIUtils.createTextChild(title, Platform.StringUtilities.trimEndWithMaxLength(this.titleFor(id), 100));
     const subTitle = shadowRoot.createChild('div', 'subtitle');
@@ -691,13 +684,11 @@ export class PreloadingWarningsView extends UI.Widget.VBox {
 
   constructor() {
     super(/* isWebComponent */ false, /* delegatesFocus */ false);
+    this.registerRequiredCSS(emptyWidgetStyles);
   }
 
   override wasShown(): void {
     super.wasShown();
-
-    this.registerCSSFiles([emptyWidgetStyles]);
-
     this.contentElement.append(this.infobar);
   }