chrome-devtools-frontend 1.0.1667564 → 1.0.1669021

package/front_end/panels/application/ServiceWorkerUpdateCycleView.ts

@@ -1,14 +1,16 @@
 // Copyright 2021 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 */
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+import serviceWorkerUpdateCycleViewStyles from './serviceWorkerUpdateCycleView.css.js';
+
 const UIStrings = {
   /**
    * @description Text in Indexed DBViews of the Application panel
@@ -35,17 +37,107 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/ServiceWorkerUpdateCycleView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class ServiceWorkerUpdateCycleView {
-  private registration: SDK.ServiceWorkerManager.ServiceWorkerRegistration;
+export interface ViewInput {
+  timeRanges: ServiceWorkerUpdateRange[];
+  expandedRows: Set<string>;
+  onFocus: (event: Event) => void;
+  onKeydown: (event: Event, key: string) => void;
+  onClick: (event: Event, key: string) => void;
+}
+
+export type View = (input: ViewInput, output: unknown, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  let tableRows: LitTemplate|typeof nothing = nothing;
+
+  if (input.timeRanges.length > 0) {
+    const startTimes = input.timeRanges.map(r => r.start);
+    const endTimes = input.timeRanges.map(r => r.end);
+    const startTime = startTimes.reduce((a, b) => Math.min(a, b));
+    const endTime = endTimes.reduce((a, b) => Math.max(a, b));
+    const scale = 100 / (endTime - startTime);
+
+    tableRows = html`${input.timeRanges.map(range => {
+      const phaseName = range.phase;
+      const left = (scale * (range.start - startTime));
+      const right = (scale * (endTime - range.end));
+      const key = `${range.id}-${range.phase}`;
+      const expanded = input.expandedRows.has(key);
+
+      // clang-format off
+      return html`
+        <tr class="service-worker-update-timeline" jslog=${VisualLogging.treeItem('update-timeline').track({
+                      click: true,
+                      resize: true,
+                      keydown: 'ArrowLeft|ArrowRight|ArrowUp|ArrowDown|Enter|Space',
+                    })}>
+          <td class="service-worker-update-timing-bar-clickable" tabindex="0" role="switch"
+              aria-checked=${expanded ? 'true' : 'false'}
+              @focus=${input.onFocus}
+              @keydown=${(e: Event) => input.onKeydown(e, key)}
+              @click=${(e: Event) => input.onClick(e, key)}
+              jslog=${VisualLogging.expand('timing-info').track({click: true})}>
+            #${range.id}
+          </td>
+          <td>${phaseName}</td>
+          <td>
+            <div class="service-worker-update-timing-row">
+              <span class="service-worker-update-timing-bar ${phaseName.toLowerCase()}"
+                    style="left: ${left}%; right: ${right}%;">\u200B</span>
+            </div>
+          </td>
+        </tr>
+        <tr class="service-worker-update-timing-bar-details ${expanded ? 'service-worker-update-timing-bar-details-expanded' : 'service-worker-update-timing-bar-details-collapsed'}" tabindex="0">
+          <td colspan="3"><span>${i18nString(UIStrings.startTimeS, {PH1: new Date(range.start).toISOString()})}</span></td>
+        </tr>
+        <tr class="service-worker-update-timing-bar-details ${expanded ? 'service-worker-update-timing-bar-details-expanded' : 'service-worker-update-timing-bar-details-collapsed'}" tabindex="0">
+          <td colspan="3"><span>${i18nString(UIStrings.endTimeS, {PH1: new Date(range.end).toISOString()})}</span></td>
+        </tr>
+      `;
+      // clang-format on
+    })}`;
+  }
+
+  // clang-format off
+  render(html`
+    <style>${serviceWorkerUpdateCycleViewStyles}</style>
+    <table class="service-worker-update-timing-table" jslog=${VisualLogging.tree('update-timing-table')}>
+      <tr class="service-worker-update-timing-table-header">
+        <td>${i18nString(UIStrings.version)}</td>
+        <td>${i18nString(UIStrings.updateActivity)}</td>
+        <td>${i18nString(UIStrings.timeline)}</td>
+      </tr>
+      ${tableRows}
+    </table>
+  `, target);
+  // clang-format on
+};
+
+export class ServiceWorkerUpdateCycleView extends UI.Widget.Widget {
+  #registration?: SDK.ServiceWorkerManager.ServiceWorkerRegistration;
   private rows: HTMLTableRowElement[];
   private selectedRowIndex: number;
-  tableElement: HTMLElement;
-  constructor(registration: SDK.ServiceWorkerManager.ServiceWorkerRegistration) {
-    this.registration = registration;
+  private expandedRows = new Set<string>();
+  #view: View;
+
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
     this.rows = [];
     this.selectedRowIndex = -1;
-    this.tableElement = document.createElement('table');
-    this.createTimingTable();
+  }
+
+  set registration(registration: SDK.ServiceWorkerManager.ServiceWorkerRegistration|undefined) {
+    this.#registration = registration;
+    this.requestUpdate();
+  }
+
+  get registration(): SDK.ServiceWorkerManager.ServiceWorkerRegistration|undefined {
+    return this.#registration;
+  }
+
+  set registrationFingerprint(_fingerprint: symbol|undefined) {
+    this.requestUpdate();
   }
 
   calculateServiceWorkerUpdateRanges(): ServiceWorkerUpdateRange[] {
@@ -113,7 +205,10 @@ export class ServiceWorkerUpdateCycleView {
       return ranges;
     }
 
-    const versions = this.registration.versionsByMode();
+    if (!this.#registration) {
+      return [];
+    }
+    const versions = this.#registration.versionsByMode();
     const modes = [
       SDK.ServiceWorkerManager.ServiceWorkerVersion.Modes.ACTIVE,
       SDK.ServiceWorkerManager.ServiceWorkerVersion.Modes.WAITING,
@@ -132,119 +227,32 @@ export class ServiceWorkerUpdateCycleView {
     return [];
   }
 
-  private createTimingTable(): void {
-    this.tableElement.classList.add('service-worker-update-timing-table');
-    this.tableElement.setAttribute('jslog', `${VisualLogging.tree('update-timing-table')}`);
+  override performUpdate(): void {
     const timeRanges = this.calculateServiceWorkerUpdateRanges();
-    this.updateTimingTable(timeRanges);
-  }
-
-  private createTimingTableHead(): void {
-    const serverHeader = this.tableElement.createChild('tr', 'service-worker-update-timing-table-header');
-    UI.UIUtils.createTextChild(serverHeader.createChild('td'), i18nString(UIStrings.version));
-    UI.UIUtils.createTextChild(serverHeader.createChild('td'), i18nString(UIStrings.updateActivity));
-    UI.UIUtils.createTextChild(serverHeader.createChild('td'), i18nString(UIStrings.timeline));
-  }
 
-  private removeRows(): void {
-    const rows = this.tableElement.getElementsByTagName('tr');
-    while (rows[0]) {
-      if (rows[0].parentNode) {
-        rows[0].parentNode.removeChild(rows[0]);
-      }
-    }
-    this.rows = [];
-  }
-
-  private updateTimingTable(timeRanges: ServiceWorkerUpdateRange[]): void {
-    this.selectedRowIndex = -1;
-    this.removeRows();
-    this.createTimingTableHead();
-    const timeRangeArray = timeRanges;
-    if (timeRangeArray.length === 0) {
-      return;
-    }
-
-    const startTimes = timeRangeArray.map(r => r.start);
-    const endTimes = timeRangeArray.map(r => r.end);
-    const startTime = startTimes.reduce((a, b) => Math.min(a, b));
-    const endTime = endTimes.reduce((a, b) => Math.max(a, b));
-    const scale = 100 / (endTime - startTime);
-
-    for (const range of timeRangeArray) {
-      const phaseName = range.phase;
-
-      const left = (scale * (range.start - startTime));
-      const right = (scale * (endTime - range.end));
-
-      const tr = this.tableElement.createChild('tr', 'service-worker-update-timeline');
-      tr.setAttribute('jslog', `${VisualLogging.treeItem('update-timeline').track({
-                        click: true,
-                        resize: true,
-                        keydown: 'ArrowLeft|ArrowRight|ArrowUp|ArrowDown|Enter|Space',
-                      })}`);
-      this.rows.push(tr);
-      const timingBarVersionElement = tr.createChild('td');
-      UI.UIUtils.createTextChild(timingBarVersionElement, '#' + range.id);
-      timingBarVersionElement.classList.add('service-worker-update-timing-bar-clickable');
-      timingBarVersionElement.setAttribute('tabindex', '0');
-      timingBarVersionElement.setAttribute('role', 'switch');
-      timingBarVersionElement.addEventListener('focus', (event: Event) => {
-        this.onFocus(event);
-      });
-      timingBarVersionElement.setAttribute('jslog', `${VisualLogging.expand('timing-info').track({click: true})}`);
-      UI.ARIAUtils.setChecked(timingBarVersionElement, false);
-      const timingBarTitleElement = tr.createChild('td');
-      UI.UIUtils.createTextChild(timingBarTitleElement, phaseName);
-      const barContainer = tr.createChild('td').createChild('div', 'service-worker-update-timing-row');
-
-      const bar = barContainer.createChild('span', 'service-worker-update-timing-bar ' + phaseName.toLowerCase());
-
-      bar.style.left = left + '%';
-      bar.style.right = right + '%';
-      bar.textContent = '\u200B';  // Important for 0-time items to have 0 width.
-
-      this.constructUpdateDetails(tr, range);
+    const input: ViewInput = {
+      timeRanges,
+      expandedRows: this.expandedRows,
+      onFocus: this.onFocus.bind(this),
+      onKeydown: this.onKeydown.bind(this),
+      onClick: this.onClick.bind(this),
+    };
+
+    this.#view(input, this, this.contentElement);
+    this.rows =
+        Array.from(this.contentElement.querySelectorAll<HTMLTableRowElement>('.service-worker-update-timeline'));
+    if (this.selectedRowIndex >= this.rows.length) {
+      this.selectedRowIndex = -1;
     }
   }
 
-  /**
-   * Detailed information about an update phase. Currently starting and ending time.
-   */
-  private constructUpdateDetails(tr: HTMLElement, range: ServiceWorkerUpdateRange): void {
-    const startRow = this.tableElement.createChild('tr', 'service-worker-update-timing-bar-details');
-    startRow.classList.add('service-worker-update-timing-bar-details-collapsed');
-    const startTimeItem = startRow.createChild('td');
-    startTimeItem.colSpan = 3;
-    const startTime = (new Date(range.start)).toISOString();
-    UI.UIUtils.createTextChild(startTimeItem.createChild('span'), i18nString(UIStrings.startTimeS, {PH1: startTime}));
-    startRow.tabIndex = 0;
-
-    const endRow = this.tableElement.createChild('tr', 'service-worker-update-timing-bar-details');
-    endRow.classList.add('service-worker-update-timing-bar-details-collapsed');
-    const endTimeItem = endRow.createChild('td');
-    endTimeItem.colSpan = 3;
-    const endTime = (new Date(range.end)).toISOString();
-    UI.UIUtils.createTextChild(endTimeItem.createChild('span'), i18nString(UIStrings.endTimeS, {PH1: endTime}));
-    endRow.tabIndex = 0;
-
-    tr.addEventListener('keydown', (event: Event) => {
-      this.onKeydown(event, startRow, endRow);
-    });
-
-    tr.addEventListener('click', (event: Event) => {
-      this.onClick(event, startRow, endRow);
-    });
-  }
-
-  private toggle(startRow: Element, endRow: Element, target: Element, expanded: boolean): void {
-    if (target.classList.contains('service-worker-update-timing-bar-clickable')) {
-      startRow.classList.toggle('service-worker-update-timing-bar-details-collapsed');
-      startRow.classList.toggle('service-worker-update-timing-bar-details-expanded');
-      endRow.classList.toggle('service-worker-update-timing-bar-details-collapsed');
-      endRow.classList.toggle('service-worker-update-timing-bar-details-expanded');
-      UI.ARIAUtils.setChecked(target, !expanded);
+  private toggle(key: string, expanded: boolean): void {
+    if (expanded) {
+      this.expandedRows.delete(key);
+    } else {
+      this.expandedRows.add(key);
     }
+    this.requestUpdate();
   }
 
   private onFocus(event: Event): void {
@@ -260,21 +268,20 @@ export class ServiceWorkerUpdateCycleView {
     this.selectedRowIndex = this.rows.indexOf(tr);
   }
 
-  private onKeydown(event: Event, startRow: HTMLElement, endRow: HTMLElement): void {
+  private onKeydown(event: Event, key: string): void {
     if (!event.target) {
       return;
     }
-    const target: HTMLElement = event.target as HTMLElement;
     const keyboardEvent = event as KeyboardEvent;
-    const expanded = target.getAttribute('aria-checked') === 'true';
+    const expanded = this.expandedRows.has(key);
 
     if (keyboardEvent.key === 'Enter' || keyboardEvent.key === ' ') {
-      this.toggle(startRow, endRow, target, expanded);
+      this.toggle(key, expanded);
       event.preventDefault();
       return;
     }
     if ((!expanded && keyboardEvent.key === 'ArrowRight') || (expanded && keyboardEvent.key === 'ArrowLeft')) {
-      this.toggle(startRow, endRow, target, expanded);
+      this.toggle(key, expanded);
       event.preventDefault();
       return;
     }
@@ -346,21 +353,11 @@ export class ServiceWorkerUpdateCycleView {
     this.focusRow(this.rows[this.selectedRowIndex]);
   }
 
-  private onClick(event: Event, startRow: Element, endRow: Element): void {
-    const tr = event.target as Element;
-    if (!tr) {
-      return;
-    }
-
-    const expanded = tr.getAttribute('aria-checked') === 'true';
-    this.toggle(startRow, endRow, tr, expanded);
+  private onClick(event: Event, key: string): void {
+    const expanded = this.expandedRows.has(key);
+    this.toggle(key, expanded);
     event.preventDefault();
   }
-
-  refresh(): void {
-    const timeRanges = this.calculateServiceWorkerUpdateRanges();
-    this.updateTimingTable(timeRanges);
-  }
 }
 
 export const enum ServiceWorkerUpdateNames {

package/front_end/panels/application/ServiceWorkersView.ts

@@ -20,7 +20,6 @@ import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
 
 import * as ApplicationComponents from './components/components.js';
 import serviceWorkersViewStyles from './serviceWorkersView.css.js';
-import serviceWorkerUpdateCycleViewStyles from './serviceWorkerUpdateCycleView.css.js';
 import {ServiceWorkerUpdateCycleView} from './ServiceWorkerUpdateCycleView.js';
 
 const UIStrings = {
@@ -479,7 +478,7 @@ export interface SectionViewInput {
   pushData: string;
   syncTag: string;
   periodicSyncTag: string;
-  updateCycleTable: HTMLElement;
+  registration: SDK.ServiceWorkerManager.ServiceWorkerRegistration;
   activeVersion?: SDK.ServiceWorkerManager.ServiceWorkerVersion;
   waitingVersion?: SDK.ServiceWorkerManager.ServiceWorkerVersion;
   installingVersion?: SDK.ServiceWorkerManager.ServiceWorkerVersion;
@@ -695,13 +694,18 @@ function renderStatusField(input: SectionViewInput, active?: SDK.ServiceWorkerMa
 }
 
 function renderUpdateCycleField(input: SectionViewInput): LitTemplate {
+  // clang-format off
   return html`
     <div class="report-field">
       <div class="report-field-name">${i18nString(UIStrings.updateCycle)}</div>
       <div class="report-field-value">
-        ${input.updateCycleTable}
+        ${widget(ServiceWorkerUpdateCycleView, {
+          registration: input.registration,
+          registrationFingerprint: input.registration.fingerprint(),
+        })}
       </div>
     </div>`;
+  // clang-format on
 }
 
 function renderRouterField(input: SectionViewInput): LitTemplate {
@@ -729,7 +733,6 @@ export const DEFAULT_SECTION_VIEW: SectionView =
       // clang-format off
   render(html`
       <style>${serviceWorkersViewStyles}</style>
-      <style>${serviceWorkerUpdateCycleViewStyles}</style>
       <devtools-report-section-header role="heading" aria-level="2"
               aria-label=${i18nString(UIStrings.serviceWorkerForS, { PH1: input.title })}>
         <span style="flex: 1 1 auto">${input.title}</span>
@@ -761,7 +764,6 @@ export class Section extends UI.Widget.VBox {
   private pushNotificationDataSetting!: Common.Settings.Setting<string>;
   private syncTagNameSetting!: Common.Settings.Setting<string>;
   private periodicSyncTagNameSetting!: Common.Settings.Setting<string>;
-  private updateCycleView!: ServiceWorkerUpdateCycleView;
   private readonly clientInfoCache: Map<string, Protocol.Target.TargetInfo>;
   private readonly throttler: Common.Throttler.Throttler;
   #view: SectionView;
@@ -790,7 +792,6 @@ export class Section extends UI.Widget.VBox {
     }
 
     if (registrationChanged) {
-      this.updateCycleView = new ServiceWorkerUpdateCycleView(this.registration);
       this.clientInfoCache.clear();
     }
   }
@@ -838,7 +839,7 @@ export class Section extends UI.Widget.VBox {
       pushData: this.pushNotificationDataSetting.get(),
       syncTag: this.syncTagNameSetting.get(),
       periodicSyncTag: this.periodicSyncTagNameSetting.get(),
-      updateCycleTable: this.updateCycleView.tableElement,
+      registration: this.registration,
       activeVersion: active,
       waitingVersion: waiting,
       installingVersion: installing,
@@ -856,7 +857,6 @@ export class Section extends UI.Widget.VBox {
     };
 
     this.#view(input, undefined, this.contentElement);
-    this.updateCycleView.refresh();
 
     return Promise.resolve();
   }

package/front_end/panels/application/application.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as ApplicationPanelSidebar from './ApplicationPanelSidebar.js';
+import * as ApplicationPanelTreeElement from './ApplicationPanelTreeElement.js';
 import * as AppManifestView from './AppManifestView.js';
 import * as BackgroundServiceModel from './BackgroundServiceModel.js';
 import * as BackgroundServiceView from './BackgroundServiceView.js';
@@ -45,6 +46,7 @@ import * as WebMCPView from './WebMCPView.js';
 export * as Components from './components/components.js';
 export {
   ApplicationPanelSidebar,
+  ApplicationPanelTreeElement,
   AppManifestView,
   BackgroundServiceModel,
   BackgroundServiceView,

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

@@ -101,7 +101,9 @@ interface AdFrameNodeData {
   elementId: string;
   initialOrigin: string;
   networkBytes: string;
+  rawNetworkBytes: number;
   cpuTime: string;
+  rawCpuTime: number;
   revealFrame: (e: Event) => void;
 }
 
@@ -206,10 +208,10 @@ const DEFAULT_VIEW: View = (input, output, target) => {
         <devtools-data-grid striped resize="last" class="ad-frames-data-grid" name=${i18nString(UIStrings.adIframes)}>
           <table>
             <tr>
-              <th id="elementId" weight="1">${i18nString(UIStrings.elementId)}</th>
-              <th id="initialOrigin" weight="2">${i18nString(UIStrings.initialOrigin)}</th>
-              <th id="cpuTime" weight="1">${i18nString(UIStrings.cpu)}</th>
-              <th id="networkBytes" weight="1">${i18nString(UIStrings.network)}</th>
+              <th id="elementId" weight="1" sortable>${i18nString(UIStrings.elementId)}</th>
+              <th id="initialOrigin" weight="2" sortable>${i18nString(UIStrings.initialOrigin)}</th>
+              <th id="cpuTime" weight="1" sortable type="numeric">${i18nString(UIStrings.cpu)}</th>
+              <th id="networkBytes" weight="1" sortable type="numeric">${i18nString(UIStrings.network)}</th>
             </tr>
             ${input.adFrames.map(frame => html`
               <tr>
@@ -223,8 +225,8 @@ const DEFAULT_VIEW: View = (input, output, target) => {
                     : Lit.nothing}
                 </td>
                 <td title=${frame.initialOrigin}>${frame.initialOrigin}</td>
-                <td title=${frame.cpuTime}>${frame.cpuTime}</td>
-                <td title=${frame.networkBytes}>${frame.networkBytes}</td>
+                <td title=${frame.cpuTime} data-value=${frame.rawCpuTime}>${frame.cpuTime}</td>
+                <td title=${frame.networkBytes} data-value=${frame.rawNetworkBytes}>${frame.networkBytes}</td>
               </tr>
             `)}
           </table>
@@ -421,7 +423,9 @@ export class AdsView extends UI.Widget.Widget {
         elementId: elementIdText,
         initialOrigin: frame.initialOrigin || '',
         cpuTime: formatCpu(frame.cpuTime),
+        rawCpuTime: frame.cpuTime ?? -1,
         networkBytes: formatNetwork(frame.networkBytes),
+        rawNetworkBytes: frame.networkBytes ?? -1,
         revealFrame,
       });
     }

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

@@ -445,8 +445,8 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
   private readonly warningsContainer: HTMLDivElement;
   private readonly warningsView = new PreloadingComponents.PreloadingDisabledInfobar.PreloadingDisabledInfobar();
   private readonly preloadingGrid = new PreloadingComponents.PreloadingGrid.PreloadingGrid();
-  private readonly preloadingDetails =
-      new PreloadingComponents.PreloadingDetailsReportView.PreloadingDetailsReportView();
+  private readonly preloadingGridContainer: HTMLDivElement;
+  private readonly renderContainer: HTMLElement;
   private readonly ruleSetSelector: PreloadingRuleSetSelector;
   private readonly textFilterUI: UI.Toolbar.ToolbarFilter;
   private hsplit?: UI.SplitWidget.SplitWidget;
@@ -525,38 +525,12 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
 
     this.preloadingGrid.onSelect = this.onPreloadingGridCellFocused.bind(this);
 
-    const preloadingGridContainer = document.createElement('div');
-    preloadingGridContainer.className = 'preloading-grid-widget-container';
-    preloadingGridContainer.style = 'height: 100%';
-    this.preloadingGrid.show(preloadingGridContainer, null, true);
+    this.preloadingGridContainer = document.createElement('div');
+    this.preloadingGridContainer.className = 'preloading-grid-widget-container';
+    this.preloadingGridContainer.style.height = '100%';
+    this.preloadingGrid.show(this.preloadingGridContainer, null, true);
 
-    render(
-        html`
-        <div class="empty-state">
-          <span class="empty-state-header">${i18nString(UIStrings.noPrefetchAttempts)}</span>
-          <div class="empty-state-description">
-            <span>${i18nString(UIStrings.prefetchDescription)}</span>
-            <devtools-link
-              class="devtools-link"
-              href=${SPECULATION_EXPLANATION_URL}
-              jslogcontext="learn-more"
-            >${i18nString(UIStrings.learnMore)}</devtools-link>
-          </div>
-        </div>
-        <devtools-split-view sidebar-position="second" ${
-            UI.Widget.widgetRef(
-                UI.SplitWidget.SplitWidget,
-                w => {
-                  this.hsplit = w;
-                })}>
-          <div slot="main" class="overflow-auto" style="height: 100%">
-            ${preloadingGridContainer}
-          </div>
-          <div slot="sidebar" class="overflow-auto" style="height: 100%">
-            ${this.preloadingDetails}
-          </div>
-        </devtools-split-view>`,
-        vbox.contentElement, {host: this});
+    this.renderContainer = vbox.contentElement;
 
     vbox.show(this.contentElement);
   }
@@ -593,20 +567,20 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
     this.render();
   }
 
-  private updatePreloadingDetails(): void {
+  private getPreloadingDetailsData(): PreloadingComponents.PreloadingDetailsReportView.PreloadingDetailsReportViewData {
     const id = this.focusedPreloadingAttemptId;
     const preloadingAttempt = id === null ? null : this.model.getPreloadingAttemptById(id);
     if (preloadingAttempt === null) {
-      this.preloadingDetails.data = null;
-    } else {
-      const pipeline = this.model.getPipeline(preloadingAttempt);
-      const ruleSets = preloadingAttempt.ruleSetIds.map(id => this.model.getRuleSetById(id)).filter(x => x !== null);
-      this.preloadingDetails.data = {
-        pipeline,
-        ruleSets,
-        pageURL: pageURL(),
-      };
+      return null;
     }
+
+    const pipeline = this.model.getPipeline(preloadingAttempt);
+    const ruleSets = preloadingAttempt.ruleSetIds.map(id => this.model.getRuleSetById(id)).filter(x => x !== null);
+    return {
+      pipeline,
+      ruleSets,
+      pageURL: pageURL(),
+    };
   }
 
   render(): void {
@@ -647,7 +621,36 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
       this.hsplit?.doLayout();
     }
 
-    this.updatePreloadingDetails();
+    // clang-format off
+    render(html`
+      <div class="empty-state">
+        <span class="empty-state-header">${i18nString(UIStrings.noPrefetchAttempts)}</span>
+        <div class="empty-state-description">
+          <span>${i18nString(UIStrings.prefetchDescription)}</span>
+          <devtools-link
+            class="devtools-link"
+            href=${SPECULATION_EXPLANATION_URL}
+            jslogcontext="learn-more"
+          >${i18nString(UIStrings.learnMore)}</devtools-link>
+        </div>
+      </div>
+      <devtools-split-view sidebar-position="second" ${
+          UI.Widget.widgetRef(
+              UI.SplitWidget.SplitWidget,
+              w => {
+                this.hsplit = w;
+              })}>
+        <div slot="main" class="overflow-auto" style="height: 100%">
+          ${this.preloadingGridContainer}
+        </div>
+        <div slot="sidebar" class="overflow-auto" style="height: 100%">
+          ${widget(PreloadingComponents.PreloadingDetailsReportView.PreloadingDetailsReportView, {
+            data: this.getPreloadingDetailsData(),
+          })}
+        </div>
+      </devtools-split-view>
+      `, this.renderContainer, {host: this});
+    // clang-format on
   }
 
   private onPreloadingGridCellFocused({rowId}: {rowId: string}): void {
@@ -664,7 +667,12 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
   }
 
   getPreloadingDetailsForTest(): PreloadingComponents.PreloadingDetailsReportView.PreloadingDetailsReportView {
-    return this.preloadingDetails;
+    const widgetElement = this.renderContainer.querySelector('div[slot="sidebar"] devtools-widget') as
+            UI.Widget.WidgetElement<PreloadingComponents.PreloadingDetailsReportView.PreloadingDetailsReportView>|
+        null;
+    const widget = widgetElement?.getWidget();
+    assertNotNullOrUndefined(widget);
+    return widget;
   }
 
   selectRuleSetOnFilterForTest(id: Protocol.Preload.RuleSetId|null): void {