chrome-devtools-frontend 1.0.1550444 → 1.0.1555174

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -176,19 +176,6 @@ const UIStrings = {
    * @description Text that appears on a button for the manifest resource type filter.
    */
   manifest: 'Manifest',
-  /**
-   * @description Text in App Manifest View of the Application panel
-   */
-  noManifestDetected: 'No manifest detected',
-  /**
-   * @description Description text on manifests in App Manifest View of the Application panel which describes the app manifest view tab
-   */
-  manifestDescription:
-      'A manifest defines how your app appears on phone’s home screens and what the app looks like on launch.',
-  /**
-   * @description Text in App Manifest View of the Application panel
-   */
-  appManifest: 'Manifest',
   /**
    * @description Text in Application Panel Sidebar of the Application panel
    */
@@ -1156,10 +1143,7 @@ export class AppManifestTreeElement extends ApplicationPanelTreeElement {
     const icon = createIcon('document');
     this.setLeadingIcons([icon]);
     self.onInvokeElement(this.listItemElement, this.onInvoke.bind(this));
-    const emptyView = new UI.EmptyWidget.EmptyWidget(
-        i18nString(UIStrings.noManifestDetected), i18nString(UIStrings.manifestDescription));
-    const reportView = new UI.ReportView.ReportView(i18nString(UIStrings.appManifest));
-    this.view = new AppManifestView(emptyView, reportView, new Common.Throttler.Throttler(1000));
+    this.view = new AppManifestView();
     UI.ARIAUtils.setLabel(this.listItemElement, i18nString(UIStrings.onInvokeManifestAlert));
     const handleExpansion = (hasManifest: boolean): void => {
       this.setExpandable(hasManifest);

package/front_end/panels/application/BounceTrackingMitigationsTreeElement.ts

@@ -5,9 +5,7 @@
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
-import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import {createIcon} from '../../ui/kit/kit.js';
-import * as UI from '../../ui/legacy/legacy.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import * as ApplicationComponents from './components/components.js';
@@ -23,8 +21,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/application/BounceTrackingMitig
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class BounceTrackingMitigationsTreeElement extends ApplicationPanelTreeElement {
-  private view?: LegacyWrapper.LegacyWrapper.LegacyWrapper<
-      UI.Widget.Widget, ApplicationComponents.BounceTrackingMitigationsView.BounceTrackingMitigationsView>;
+  private view?: ApplicationComponents.BounceTrackingMitigationsView.BounceTrackingMitigationsView;
 
   constructor(resourcesPanel: ResourcesPanel) {
     super(resourcesPanel, i18nString(UIStrings.bounceTrackingMitigations), false, 'bounce-tracking-mitigations');
@@ -39,8 +36,7 @@ export class BounceTrackingMitigationsTreeElement extends ApplicationPanelTreeEl
   override onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     if (!this.view) {
-      this.view = LegacyWrapper.LegacyWrapper.legacyWrapper(
-          UI.Widget.Widget, new ApplicationComponents.BounceTrackingMitigationsView.BounceTrackingMitigationsView());
+      this.view = new ApplicationComponents.BounceTrackingMitigationsView.BounceTrackingMitigationsView();
     }
     this.showView(this.view);
     Host.userMetrics.panelShown('bounce-tracking-mitigations');

package/front_end/panels/application/ExtensionStorageItemsView.ts

@@ -1,7 +1,6 @@
 // Copyright 2024 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
 
 /*
  * Copyright (C) 2008 Nokia Inc.  All rights reserved.
@@ -74,10 +73,9 @@ export class ExtensionStorageItemsView extends KeyValueStorageItemsView {
       Common.ObjectWrapper.ObjectWrapper<ExtensionStorageItemsDispatcher.EventTypes>;
 
   constructor(extensionStorage: ExtensionStorage, view?: KeyValueStorageItemsViewFunction) {
-    super(i18nString(UIStrings.extensionStorageItems), 'extension-storage', true, view);
-
-    this.element.setAttribute('jslog', `${VisualLogging.pane().context('extension-storage-data')}`);
-    this.element.classList.add('storage-view', 'table');
+    super(
+        i18nString(UIStrings.extensionStorageItems), 'extension-storage', true, view, undefined,
+        {jslog: `${VisualLogging.pane().context('extension-storage-data')}`, classes: ['storage-view', 'table']});
 
     this.extensionStorageItemsDispatcher =
         new Common.ObjectWrapper.ObjectWrapper<ExtensionStorageItemsDispatcher.EventTypes>();

package/front_end/panels/application/KeyValueStorageItemsView.ts

@@ -31,6 +31,7 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import type {WidgetOptions} from '../../ui/legacy/Widget.js';
 import {Directives as LitDirectives, html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -110,7 +111,7 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
 
   constructor(
       title: string, id: string, editable: boolean, view?: View,
-      metadataView?: ApplicationComponents.StorageMetadataView.StorageMetadataView) {
+      metadataView?: ApplicationComponents.StorageMetadataView.StorageMetadataView, opts?: WidgetOptions) {
     metadataView ??= new ApplicationComponents.StorageMetadataView.StorageMetadataView();
     if (!view) {
       view = (input: ViewInput, output: ViewOutput, target: HTMLElement) => {
@@ -168,7 +169,7 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
             target);
       };
     }
-    super();
+    super(opts);
     this.metadataView = metadataView;
     this.#editable = editable;
     this.#view = view;

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

@@ -2,10 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/components/chrome_link/chrome_link.js';
 import '../../../ui/components/expandable_list/expandable_list.js';
 import '../../../ui/components/report_view/report_view.js';
 import '../../../ui/legacy/legacy.js';
+import '../../../ui/kit/kit.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -341,7 +341,7 @@ function maybeRenderReasonContext(explanation: Protocol.Page.BackForwardCacheNot
     const link = 'chrome://extensions/?id=' + explanation.context as Platform.DevToolsPath.UrlString;
     // clang-format off
     return html`${i18nString(UIStrings.blockingExtensionId)}
-      <devtools-chrome-link .href=${link}>${explanation.context}</devtools-chrome-link>`;
+      <devtools-link .href=${link}>${explanation.context}</devtools-link>`;
     // clang-format on
   }
   return nothing;

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

@@ -1,7 +1,6 @@
 // Copyright 2023 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/components/report_view/report_view.js';
 import '../../../ui/legacy/components/data_grid/data_grid.js';
@@ -9,7 +8,7 @@ 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 * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.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';
 
@@ -58,7 +57,8 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/BounceTrackingMitigationsView.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const enum ScreenStatusType {
+export const enum ScreenStatusType {
+  INITIALIZING = 'Initializing',
   RUNNING = 'Running',
   RESULT = 'Result',
   DISABLED = 'Disabled',
@@ -68,119 +68,155 @@ export interface BounceTrackingMitigationsViewData {
   trackingSites: string[];
 }
 
-export class BounceTrackingMitigationsView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #trackingSites: string[] = [];
-  #screenStatus = ScreenStatusType.RESULT;
-  #checkedFeature = false;
-  #seenButtonClick = false;
-
-  connectedCallback(): void {
-    void this.#render();
-    this.parentElement?.classList.add('overflow-auto');
-  }
+export interface ViewInput {
+  screenStatus: ScreenStatusType;
+  trackingSites: string[];
+  seenButtonClick: boolean;
+  runMitigations: () => Promise<void>;
+}
 
-  async #render(): Promise<void> {
-    // clang-format off
-    Lit.render(html`
-      <style>${bounceTrackingMitigationsViewStyles}</style>
-      <devtools-report .data=${{reportTitle: i18nString(UIStrings.bounceTrackingMitigationsTitle)}}
-                       jslog=${VisualLogging.pane('bounce-tracking-mitigations')}>
-        ${await this.#renderMainFrameInformation()}
-      </devtools-report>
-    `, this.#shadow, {host: this});
-    // clang-format on
+const renderForceRunButton = (input: ViewInput): Lit.TemplateResult => {
+  const isMitigationRunning = (input.screenStatus === ScreenStatusType.RUNNING);
+
+  // clang-format off
+  return html`
+    <devtools-button
+      aria-label=${i18nString(UIStrings.forceRun)}
+      .disabled=${isMitigationRunning}
+      .spinner=${isMitigationRunning}
+      .variant=${Buttons.Button.Variant.PRIMARY}
+      @click=${input.runMitigations}
+      jslog=${VisualLogging.action('force-run').track({click: true})}>
+      ${isMitigationRunning ? html`
+        ${i18nString(UIStrings.runningMitigations)}`:`
+        ${i18nString(UIStrings.forceRun)}
+      `}
+    </devtools-button>
+  `;
+  // clang-format on
+};
+
+const renderDeletedSitesOrNoSitesMessage = (input: ViewInput): Lit.LitTemplate => {
+  if (!input.seenButtonClick) {
+    return Lit.nothing;
   }
 
-  async #renderMainFrameInformation(): Promise<Lit.TemplateResult> {
-    if (!this.#checkedFeature) {
-      await this.#checkFeatureState();
-    }
-
-    if (this.#screenStatus === ScreenStatusType.DISABLED) {
-      // clang-format off
-      return html`
-        <devtools-report-section>
-          ${i18nString(UIStrings.featureDisabled)}
-        </devtools-report-section>
-      `;
-      // clang-format on
-    }
-
+  if (input.trackingSites.length === 0) {
     // clang-format off
     return html`
       <devtools-report-section>
-        ${this.#renderForceRunButton()}
-      </devtools-report-section>
-      ${this.#renderDeletedSitesOrNoSitesMessage()}
-      <devtools-report-divider>
-      </devtools-report-divider>
-      <devtools-report-section>
-        <x-link href="https://privacycg.github.io/nav-tracking-mitigations/#bounce-tracking-mitigations" class="link"
-        jslog=${VisualLogging.link('learn-more').track({click: true})}>
-          ${i18nString(UIStrings.learnMore)}
-        </x-link>
+      ${(input.screenStatus === ScreenStatusType.RUNNING) ? html`
+        ${i18nString(UIStrings.checkingPotentialTrackers)}`:`
+        ${i18nString(UIStrings.noPotentialBounceTrackersIdentified)}
+      `}
       </devtools-report-section>
     `;
     // clang-format on
   }
 
-  #renderForceRunButton(): Lit.TemplateResult {
-    const isMitigationRunning = (this.#screenStatus === ScreenStatusType.RUNNING);
+  // clang-format off
+  return html`
+    <devtools-report-section>
+      <devtools-data-grid striped inline>
+        <table>
+          <tr>
+            <th id="sites" weight="10" sortable>
+              ${i18nString(UIStrings.stateDeletedFor)}
+            </th>
+          </tr>
+          ${input.trackingSites.map(site => html`
+            <tr><td>${site}</td></tr>`)}
+        </table>
+      </devtools-data-grid>
+    </devtools-report-section>
+  `;
+  // clang-format on
+};
+
+const renderMainFrameInformation = (input: ViewInput): Lit.LitTemplate => {
+  if (input.screenStatus === ScreenStatusType.INITIALIZING) {
+    return Lit.nothing;
+  }
 
+  if (input.screenStatus === ScreenStatusType.DISABLED) {
     // clang-format off
     return html`
-      <devtools-button
-        aria-label=${i18nString(UIStrings.forceRun)}
-        .disabled=${isMitigationRunning}
-        .spinner=${isMitigationRunning}
-        .variant=${Buttons.Button.Variant.PRIMARY}
-        @click=${this.#runMitigations}
-        jslog=${VisualLogging.action('force-run').track({click: true})}>
-        ${isMitigationRunning ? html`
-          ${i18nString(UIStrings.runningMitigations)}`:`
-          ${i18nString(UIStrings.forceRun)}
-        `}
-      </devtools-button>
+      <devtools-report-section>
+        ${i18nString(UIStrings.featureDisabled)}
+      </devtools-report-section>
     `;
     // clang-format on
   }
 
-  #renderDeletedSitesOrNoSitesMessage(): Lit.LitTemplate {
-    if (!this.#seenButtonClick) {
-      return Lit.nothing;
-    }
+  // clang-format off
+  return html`
+    <devtools-report-section>
+      ${renderForceRunButton(input)}
+    </devtools-report-section>
+    ${renderDeletedSitesOrNoSitesMessage(input)}
+    <devtools-report-divider>
+    </devtools-report-divider>
+    <devtools-report-section>
+      <x-link href="https://privacycg.github.io/nav-tracking-mitigations/#bounce-tracking-mitigations" class="link"
+      jslog=${VisualLogging.link('learn-more').track({click: true})}>
+        ${i18nString(UIStrings.learnMore)}
+      </x-link>
+    </devtools-report-section>
+  `;
+  // clang-format on
+};
+
+export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
+  // clang-format off
+  Lit.render(html`
+    <style>${bounceTrackingMitigationsViewStyles}</style>
+    <style>${UI.inspectorCommonStyles}</style>
+    <devtools-report .data=${{reportTitle: i18nString(UIStrings.bounceTrackingMitigationsTitle)}}
+                      jslog=${VisualLogging.pane('bounce-tracking-mitigations')}>
+      ${renderMainFrameInformation(input)}
+    </devtools-report>
+  `, target);
+  // clang-format on
+};
+
+type ViewFunction = typeof DEFAULT_VIEW;
+
+export class BounceTrackingMitigationsView extends UI.Widget.Widget {
+  #trackingSites: string[] = [];
+  #screenStatus = ScreenStatusType.INITIALIZING;
+  #seenButtonClick = false;
+  #view: ViewFunction;
+
+  constructor(element?: HTMLElement, view: ViewFunction = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true, classes: ['overflow-auto']});
 
-    if (this.#trackingSites.length === 0) {
-      // clang-format off
-      return html`
-        <devtools-report-section>
-        ${(this.#screenStatus === ScreenStatusType.RUNNING) ? html`
-          ${i18nString(UIStrings.checkingPotentialTrackers)}`:`
-          ${i18nString(UIStrings.noPotentialBounceTrackersIdentified)}
-        `}
-        </devtools-report-section>
-      `;
-      // clang-format on
+    this.#view = view;
+
+    const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    if (!mainTarget) {
+      this.#screenStatus = ScreenStatusType.RESULT;
+    } else {
+      void mainTarget.systemInfo().invoke_getFeatureState({featureState: 'DIPS'}).then(state => {
+        this.#screenStatus = state.featureEnabled ? ScreenStatusType.RESULT : ScreenStatusType.DISABLED;
+        this.requestUpdate();
+      });
     }
+  }
 
-    // clang-format off
-    return html`
-      <devtools-report-section>
-        <devtools-data-grid striped inline>
-          <table>
-            <tr>
-              <th id="sites" weight="10" sortable>
-                ${i18nString(UIStrings.stateDeletedFor)}
-              </th>
-            </tr>
-            ${this.#trackingSites.map(site => html`
-              <tr><td>${site}</td></tr>`)}
-          </table>
-        </devtools-data-grid>
-      </devtools-report-section>
-    `;
-    // clang-format on
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    this.#view(
+        {
+          screenStatus: this.#screenStatus,
+          trackingSites: this.#trackingSites,
+          seenButtonClick: this.#seenButtonClick,
+          runMitigations: this.#runMitigations.bind(this),
+        },
+        undefined, this.contentElement);
   }
 
   async #runMitigations(): Promise<void> {
@@ -192,7 +228,7 @@ export class BounceTrackingMitigationsView extends LegacyWrapper.LegacyWrapper.W
     this.#seenButtonClick = true;
     this.#screenStatus = ScreenStatusType.RUNNING;
 
-    void this.#render();
+    this.requestUpdate();
 
     const response = await mainTarget.storageAgent().invoke_runBounceTrackingMitigations();
     this.#trackingSites = [];
@@ -205,27 +241,6 @@ export class BounceTrackingMitigationsView extends LegacyWrapper.LegacyWrapper.W
 
   #renderMitigationsResult(): void {
     this.#screenStatus = ScreenStatusType.RESULT;
-    void this.#render();
-  }
-
-  async #checkFeatureState(): Promise<void> {
-    this.#checkedFeature = true;
-
-    const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-    if (!mainTarget) {
-      return;
-    }
-
-    if (!(await mainTarget.systemInfo().invoke_getFeatureState({featureState: 'DIPS'})).featureEnabled) {
-      this.#screenStatus = ScreenStatusType.DISABLED;
-    }
-  }
-}
-
-customElements.define('devtools-bounce-tracking-mitigations-view', BounceTrackingMitigationsView);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-bounce-tracking-mitigations-view': BounceTrackingMitigationsView;
+    this.requestUpdate();
   }
 }

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

@@ -16,7 +16,7 @@ import * as Buttons from '../../../ui/components/buttons/buttons.js';
 // eslint-disable-next-line @devtools/es-modules-import
 import emptyWidgetStyles from '../../../ui/legacy/emptyWidget.css.js';
 import * as UI from '../../../ui/legacy/legacy.js';
-import {html, render} from '../../../ui/lit/lit.js';
+import {Directives, 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,6 +25,8 @@ import type * as PreloadingHelper from './helper/helper.js';
 import preloadingViewStyles from './preloadingView.css.js';
 import preloadingViewDropDownStyles from './preloadingViewDropDown.css.js';
 
+const {createRef, ref} = Directives;
+
 const UIStrings = {
   /**
    * @description DropDown title for filtering preloading attempts by rule set
@@ -195,10 +197,12 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
   private focusedRuleSetId: Protocol.Preload.RuleSetId|null = null;
 
   private readonly warningsContainer: HTMLDivElement;
-  private readonly warningsView = new PreloadingWarningsView();
+  private readonly warningsView = new PreloadingComponents.PreloadingDisabledInfobar.PreloadingDisabledInfobar();
   private readonly hsplit: HTMLElement;
   private readonly ruleSetGrid = new PreloadingComponents.RuleSetGrid.RuleSetGrid();
-  private readonly ruleSetDetails = new PreloadingComponents.RuleSetDetailsView.RuleSetDetailsView();
+  private readonly ruleSetGridContainerRef = createRef<HTMLDivElement>();
+  private readonly ruleSetDetailsRef:
+      Directives.Ref<UI.Widget.WidgetElement<PreloadingComponents.RuleSetDetailsView.RuleSetDetailsView>>;
 
   private shouldPrettyPrint = Common.Settings.Settings.instance().moduleSetting('auto-pretty-print-minified').get();
 
@@ -212,8 +216,9 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
         SDK.PreloadingModel.PreloadingModel, SDK.PreloadingModel.Events.MODEL_UPDATED, this.render, this,
         {scoped: true});
     SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.PreloadingModel.PreloadingModel, SDK.PreloadingModel.Events.WARNINGS_UPDATED,
-        this.warningsView.onWarningsUpdated, this.warningsView, {scoped: true});
+        SDK.PreloadingModel.PreloadingModel, SDK.PreloadingModel.Events.WARNINGS_UPDATED, e => {
+          Object.assign(this.warningsView, e.data);
+        }, this, {scoped: true});
 
     // this (VBox)
     //   +- warningsContainer
@@ -232,7 +237,10 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
     this.contentElement.insertBefore(this.warningsContainer, this.contentElement.firstChild);
     this.warningsView.show(this.warningsContainer);
 
-    this.ruleSetGrid.addEventListener('select', this.onRuleSetsGridCellFocused.bind(this));
+    this.ruleSetGrid.addEventListener(
+        PreloadingComponents.RuleSetGrid.Events.SELECT, this.onRuleSetsGridCellFocused, this);
+    this.ruleSetDetailsRef =
+        createRef<UI.Widget.WidgetElement<PreloadingComponents.RuleSetDetailsView.RuleSetDetailsView>>();
     const onPrettyPrintToggle = (): void => {
       this.shouldPrettyPrint = !this.shouldPrettyPrint;
       this.updateRuleSetDetails();
@@ -253,11 +261,13 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
           </div>
         </div>
         <devtools-split-view sidebar-position="second">
-          <div slot="main">
-            ${this.ruleSetGrid}
+          <div slot="main" ${ref(this.ruleSetGridContainerRef)}>
           </div>
           <div slot="sidebar" jslog=${VisualLogging.section('rule-set-details')}>
-            ${this.ruleSetDetails}
+            <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(PreloadingComponents.RuleSetDetailsView.RuleSetDetailsView, {
+              ruleSet: this.getRuleSet(),
+              shouldPrettyPrint: this.shouldPrettyPrint,
+            })} ${ref(this.ruleSetDetailsRef)}></devtools-widget>
           </div>
         </devtools-split-view>
         <div class="pretty-print-button" style="border-top: 1px solid var(--sys-color-divider)">
@@ -298,10 +308,12 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
   }
 
   private updateRuleSetDetails(): void {
-    const id = this.focusedRuleSetId;
-    const ruleSet = id === null ? null : this.model.getRuleSetById(id);
-    this.ruleSetDetails.shouldPrettyPrint = this.shouldPrettyPrint;
-    this.ruleSetDetails.data = ruleSet;
+    const ruleSet = this.getRuleSet();
+    const widget = this.ruleSetDetailsRef.value?.getWidget();
+    if (widget) {
+      widget.shouldPrettyPrint = this.shouldPrettyPrint;
+      widget.ruleSet = ruleSet;
+    }
 
     if (ruleSet === null) {
       this.hsplit.setAttribute('sidebar-visibility', 'hidden');
@@ -310,6 +322,11 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
     }
   }
 
+  private getRuleSet(): Protocol.Preload.RuleSet|null {
+    const id = this.focusedRuleSetId;
+    return id === null ? null : this.model.getRuleSetById(id);
+  }
+
   render(): void {
     // Update rule sets grid
     const countsByRuleSetId = this.model.getPreloadCountsByRuleSetId();
@@ -320,14 +337,18 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
         preloadsStatusSummary: PreloadingUIUtils.preloadsStatusSummary(countsByStatus),
       };
     });
-    this.ruleSetGrid.update({rows: ruleSetRows, pageURL: pageURL()});
+    this.ruleSetGrid.data = {rows: ruleSetRows, pageURL: pageURL()};
     this.contentElement.classList.toggle('empty', ruleSetRows.length === 0);
     this.updateRuleSetDetails();
+
+    const container = this.ruleSetGridContainerRef.value;
+    if (container && this.ruleSetGrid.element.parentElement !== container) {
+      this.ruleSetGrid.show(container);
+    }
   }
 
-  private onRuleSetsGridCellFocused(event: Event): void {
-    const focusedEvent = event as CustomEvent<Protocol.Preload.RuleSetId>;
-    this.focusedRuleSetId = focusedEvent.detail;
+  private onRuleSetsGridCellFocused(event: Common.EventTarget.EventTargetEvent<Protocol.Preload.RuleSetId>): void {
+    this.focusedRuleSetId = event.data;
     this.render();
   }
 
@@ -338,10 +359,6 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
   getRuleSetGridForTest(): PreloadingComponents.RuleSetGrid.RuleSetGrid {
     return this.ruleSetGrid;
   }
-
-  getRuleSetDetailsForTest(): PreloadingComponents.RuleSetDetailsView.RuleSetDetailsView {
-    return this.ruleSetDetails;
-  }
 }
 
 export class PreloadingAttemptView extends UI.Widget.VBox {
@@ -351,7 +368,7 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
   private focusedPreloadingAttemptId: SDK.PreloadingModel.PreloadingAttemptId|null = null;
 
   private readonly warningsContainer: HTMLDivElement;
-  private readonly warningsView = new PreloadingWarningsView();
+  private readonly warningsView = new PreloadingComponents.PreloadingDisabledInfobar.PreloadingDisabledInfobar();
   private readonly preloadingGrid = new PreloadingComponents.PreloadingGrid.PreloadingGrid();
   private readonly preloadingDetails =
       new PreloadingComponents.PreloadingDetailsReportView.PreloadingDetailsReportView();
@@ -370,8 +387,9 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
         SDK.PreloadingModel.PreloadingModel, SDK.PreloadingModel.Events.MODEL_UPDATED, this.render, this,
         {scoped: true});
     SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.PreloadingModel.PreloadingModel, SDK.PreloadingModel.Events.WARNINGS_UPDATED,
-        this.warningsView.onWarningsUpdated, this.warningsView, {scoped: true});
+        SDK.PreloadingModel.PreloadingModel, SDK.PreloadingModel.Events.WARNINGS_UPDATED, e => {
+          Object.assign(this.warningsView, e.data);
+        }, this, {scoped: true});
 
     // this (VBox)
     //   +- warningsContainer
@@ -515,7 +533,7 @@ export class PreloadingSummaryView extends UI.Widget.VBox {
   private model: SDK.PreloadingModel.PreloadingModel;
 
   private readonly warningsContainer: HTMLDivElement;
-  private readonly warningsView = new PreloadingWarningsView();
+  private readonly warningsView = new PreloadingComponents.PreloadingDisabledInfobar.PreloadingDisabledInfobar();
   private readonly usedPreloading = new PreloadingComponents.UsedPreloadingView.UsedPreloadingView();
 
   constructor(model: SDK.PreloadingModel.PreloadingModel) {
@@ -531,8 +549,9 @@ export class PreloadingSummaryView extends UI.Widget.VBox {
         SDK.PreloadingModel.PreloadingModel, SDK.PreloadingModel.Events.MODEL_UPDATED, this.render, this,
         {scoped: true});
     SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.PreloadingModel.PreloadingModel, SDK.PreloadingModel.Events.WARNINGS_UPDATED,
-        this.warningsView.onWarningsUpdated, this.warningsView, {scoped: true});
+        SDK.PreloadingModel.PreloadingModel, SDK.PreloadingModel.Events.WARNINGS_UPDATED, e => {
+          Object.assign(this.warningsView, e.data);
+        }, this, {scoped: true});
 
     this.warningsContainer = document.createElement('div');
     this.warningsContainer.classList.add('flex-none');
@@ -715,21 +734,3 @@ class PreloadingRuleSetSelector implements
       _toElement: Element|null): void {
   }
 }
-
-export class PreloadingWarningsView extends UI.Widget.VBox {
-  private readonly infobar = new PreloadingComponents.PreloadingDisabledInfobar.PreloadingDisabledInfobar();
-
-  constructor() {
-    super();
-    this.registerRequiredCSS(emptyWidgetStyles);
-  }
-
-  override wasShown(): void {
-    super.wasShown();
-    this.contentElement.append(this.infobar);
-  }
-
-  onWarningsUpdated(args: Common.EventTarget.EventTargetEvent<Protocol.Preload.PreloadEnabledStateUpdatedEvent>): void {
-    this.infobar.data = args.data;
-  }
-}