chrome-devtools-frontend 1.0.1567721 → 1.0.1568864

package/front_end/panels/application/preloading/components/UsedPreloadingView.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/kit/kit.js';
 import '../../../../ui/components/report_view/report_view.js';
@@ -13,20 +12,16 @@ import type * as Platform from '../../../../core/platform/platform.js';
 import {assertNotNullOrUndefined} from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Protocol from '../../../../generated/protocol.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 Lit from '../../../../ui/lit/lit.js';
+import {html, type LitTemplate, nothing, render} from '../../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 import * as PreloadingHelper from '../helper/helper.js';
 
-import * as MismatchedPreloadingGrid from './MismatchedPreloadingGrid.js';
+import {MismatchedPreloadingGrid, type MismatchedPreloadingGridData} from './MismatchedPreloadingGrid.js';
 import preloadingGridStyles from './preloadingGrid.css.js';
 import {prefetchFailureReason, prerenderFailureReason} from './PreloadingString.js';
 import usedPreloadingStyles from './usedPreloadingView.css.js';
 
-const {html} = Lit;
-
 const UIStrings = {
   /**
    * @description Header for preloading status.
@@ -139,6 +134,8 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/application/preloading/components/UsedPreloadingView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+const {widgetConfig} = UI.Widget;
+
 export interface UsedPreloadingViewData {
   pageURL: Platform.DevToolsPath.UrlString;
   previousAttempts: SDK.PreloadingModel.PreloadingAttempt[];
@@ -154,12 +151,290 @@ export const enum UsedKind {
   NO_PRELOADS = 'NoPreloads',
 }
 
+type Badge = {
+  type: 'success',
+  count?: number,
+}|{
+  type: 'failure',
+  count?: number,
+}|{
+  type: 'neutral',
+  message: string,
+};
+
+interface MismatchedData {
+  pageURL: Platform.DevToolsPath.UrlString;
+  rows: MismatchedPreloadingGridData['rows'];
+}
+
+type AttemptWithMismatchedHeaders =
+    SDK.PreloadingModel.PrerenderAttempt|SDK.PreloadingModel.PrerenderUntilScriptAttempt;
+
+interface SpeculativeLoadingStatusForThisPageData {
+  kind: UsedKind;
+  prefetch: SDK.PreloadingModel.PreloadingAttempt|undefined;
+  prerenderLike: SDK.PreloadingModel.PreloadingAttempt|undefined;
+  mismatchedData: MismatchedData|undefined;
+  attemptWithMismatchedHeaders: AttemptWithMismatchedHeaders|undefined;
+}
+
+function renderSpeculativeLoadingStatusForThisPageSections(
+    {kind, prefetch, prerenderLike, mismatchedData, attemptWithMismatchedHeaders}:
+        SpeculativeLoadingStatusForThisPageData): LitTemplate {
+  let badge: Badge;
+  let basicMessage: LitTemplate;
+  switch (kind) {
+    case UsedKind.DOWNGRADED_PRERENDER_TO_PREFETCH_AND_USED:
+      badge = {type: 'success'};
+      basicMessage = html`${i18nString(UIStrings.downgradedPrefetchUsed)}`;
+      break;
+    case UsedKind.PREFETCH_USED:
+      badge = {type: 'success'};
+      basicMessage = html`${i18nString(UIStrings.prefetchUsed)}`;
+      break;
+    case UsedKind.PRERENDER_USED:
+      badge = {type: 'success'};
+      basicMessage = html`${i18nString(UIStrings.prerenderUsed)}`;
+      break;
+    case UsedKind.PREFETCH_FAILED:
+      badge = {type: 'failure'};
+      basicMessage = html`${i18nString(UIStrings.prefetchFailed)}`;
+      break;
+    case UsedKind.PRERENDER_FAILED:
+      badge = {type: 'failure'};
+      basicMessage = html`${i18nString(UIStrings.prerenderFailed)}`;
+      break;
+    case UsedKind.NO_PRELOADS:
+      badge = {type: 'neutral', message: i18nString(UIStrings.badgeNoSpeculativeLoads)};
+      basicMessage = html`${i18nString(UIStrings.noPreloads)}`;
+      break;
+  }
+
+  let maybeFailureReasonMessage;
+  if (kind === UsedKind.PREFETCH_FAILED) {
+    assertNotNullOrUndefined(prefetch);
+    maybeFailureReasonMessage = prefetchFailureReason(prefetch as SDK.PreloadingModel.PrefetchAttempt);
+  } else if (kind === UsedKind.PRERENDER_FAILED || kind === UsedKind.DOWNGRADED_PRERENDER_TO_PREFETCH_AND_USED) {
+    assertNotNullOrUndefined(prerenderLike);
+    maybeFailureReasonMessage = prerenderFailureReason(
+        prerenderLike as SDK.PreloadingModel.PrerenderAttempt | SDK.PreloadingModel.PrerenderUntilScriptAttempt);
+  }
+
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
+  return html`
+    <devtools-report-section-header>
+      ${i18nString(UIStrings.speculativeLoadingStatusForThisPage)}
+    </devtools-report-section-header>
+    <devtools-report-section>
+      <div>
+        <div class="status-badge-container">
+          ${renderBadge(badge)}
+        </div>
+        <div>
+          ${basicMessage}
+        </div>
+      </div>
+    </devtools-report-section>
+
+    ${maybeFailureReasonMessage !== undefined ? html`
+      <devtools-report-section-header>
+        ${i18nString(UIStrings.detailsFailureReason)}
+      </devtools-report-section-header>
+      <devtools-report-section>
+        ${maybeFailureReasonMessage}
+      </devtools-report-section>` : nothing}
+
+    ${mismatchedData ? renderMismatchedSections(mismatchedData) : nothing}
+    ${attemptWithMismatchedHeaders ?
+        renderMismatchedHTTPHeadersSections(attemptWithMismatchedHeaders) : nothing}`;
+  // clang-format on
+}
+
+function renderMismatchedSections(data: MismatchedData): LitTemplate {
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
+  return html`
+    <devtools-report-section-header>
+      ${i18nString(UIStrings.currentURL)}
+    </devtools-report-section-header>
+    <devtools-report-section>
+      <x-link
+        class="link devtools-link"
+        href=${data.pageURL}
+        jslog=${VisualLogging.link()
+                .track({ click: true, keydown: 'Enter|Space' })
+                .context('current-url')}
+      >${data.pageURL}</x-link>
+    </devtools-report-section>
+
+    <devtools-report-section-header>
+      ${i18nString(UIStrings.preloadedURLs)}
+    </devtools-report-section-header>
+    <devtools-report-section jslog=${VisualLogging.section('preloaded-urls')}>
+      <devtools-widget .widgetConfig=${widgetConfig(MismatchedPreloadingGrid, {data})}>
+      </devtools-widget>
+    </devtools-report-section>`;
+  // clang-format on
+}
+
+function renderMismatchedHTTPHeadersSections(attempt: AttemptWithMismatchedHeaders): LitTemplate {
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
+  return html`
+    <devtools-report-section-header>
+      ${i18nString(UIStrings.mismatchedHeadersDetail)}
+    </devtools-report-section-header>
+    <devtools-report-section>
+      <style>${preloadingGridStyles}</style>
+      <div class="preloading-container">
+        <devtools-data-grid striped inline>
+          <table>
+            <tr>
+              <th id="header-name" weight="30" sortable>
+                ${i18nString(UIStrings.headerName)}
+              </th>
+              <th id="initial-value" weight="30" sortable>
+                ${i18nString(UIStrings.initialNavigationValue)}
+              </th>
+              <th id="activation-value" weight="30" sortable>
+                ${i18nString(UIStrings.activationNavigationValue)}
+              </th>
+            </tr>
+            ${(attempt.mismatchedHeaders ?? []).map(mismatchedHeaders => html`
+              <tr>
+                <td>${mismatchedHeaders.headerName}</td>
+                <td>${mismatchedHeaders.initialValue ?? i18nString(UIStrings.missing)}</td>
+                <td>${mismatchedHeaders.activationValue ?? i18nString(UIStrings.missing)}</td>
+              </tr>
+            `)}
+          </table>
+        </devtools-data-grid>
+      </div>
+    </devtools-report-section>`;
+  // clang-format on
+}
+
+interface SpeculationsInitiatedByThisPageSummaryData {
+  badges: Badge[];
+  revealRuleSetView: () => void;
+  revealAttemptViewWithFilter: () => void;
+}
+
+interface ViewInput {
+  speculativeLoadingStatusData: SpeculativeLoadingStatusForThisPageData;
+  speculationsInitiatedSummaryData: SpeculationsInitiatedByThisPageSummaryData;
+}
+
+function renderSpeculationsInitiatedByThisPageSummarySections(
+    {badges, revealRuleSetView, revealAttemptViewWithFilter}: SpeculationsInitiatedByThisPageSummaryData): LitTemplate {
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
+  return html`
+    <devtools-report-section-header>
+      ${i18nString(UIStrings.speculationsInitiatedByThisPage)}
+    </devtools-report-section-header>
+    <devtools-report-section>
+      <div>
+        <div class="status-badge-container">
+          ${badges.map(renderBadge)}
+        </div>
+
+        <div class="reveal-links">
+          <button class="link devtools-link" @click=${revealRuleSetView}
+              jslog=${VisualLogging.action('view-all-rules').track({click: true})}>
+            ${i18nString(UIStrings.viewAllRules)}
+          </button>
+         ・
+          <button class="link devtools-link" @click=${revealAttemptViewWithFilter}
+              jslog=${VisualLogging.action('view-all-speculations').track({click: true})}>
+           ${i18nString(UIStrings.viewAllSpeculations)}
+          </button>
+        </div>
+      </div>
+    </devtools-report-section>`;
+  // clang-format on
+}
+
+function renderBadge(config: Badge): LitTemplate {
+  const badge = (klass: string, iconName: string, message: string): LitTemplate => {
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    return html`
+      <span class=${klass}>
+        <devtools-icon name=${iconName}></devtools-icon>
+        <span>
+          ${message}
+        </span>
+      </span>
+    `;
+    // clang-format on
+  };
+  switch (config.type) {
+    case 'success': {
+      let message;
+      if (config.count === undefined) {
+        message = i18nString(UIStrings.badgeSuccess);
+      } else {
+        message = i18nString(UIStrings.badgeSuccessWithCount, {n: config.count});
+      }
+      return badge('status-badge status-badge-success', 'check-circle', message);
+    }
+    case 'failure': {
+      let message;
+      if (config.count === undefined) {
+        message = i18nString(UIStrings.badgeFailure);
+      } else {
+        message = i18nString(UIStrings.badgeFailureWithCount, {n: config.count});
+      }
+      return badge('status-badge status-badge-failure', 'cross-circle', message);
+    }
+    case 'neutral':
+      return badge('status-badge status-badge-neutral', 'clear', config.message);
+  }
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement|ShadowRoot) => void;
+
+const DEFAULT_VIEW: View = (input, _output, target) => {
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
+  render(html`
+    <style>${usedPreloadingStyles}</style>
+    <devtools-report>
+      ${renderSpeculativeLoadingStatusForThisPageSections(input.speculativeLoadingStatusData)}
+
+      <devtools-report-divider></devtools-report-divider>
+
+      ${renderSpeculationsInitiatedByThisPageSummarySections(input.speculationsInitiatedSummaryData)}
+
+      <devtools-report-divider></devtools-report-divider>
+
+      <devtools-report-section>
+        <x-link
+          class="link devtools-link"
+          href=${'https://developer.chrome.com/blog/prerender-pages/'}
+          jslog=${VisualLogging.link()
+                  .track({ click: true, keydown: 'Enter|Space' })
+                  .context('learn-more')}
+        >${i18nString(UIStrings.learnMore)}</x-link>
+      </devtools-report-section>
+    </devtools-report>`, target);
+  // clang-format on
+};
+
 /**
  * TODO(kenoss): Rename this class and file once https://crrev.com/c/4933567 landed.
  * This also shows summary of speculations initiated by this page.
  **/
-export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+export class UsedPreloadingView extends UI.Widget.VBox {
+  readonly #view: View;
+
+  constructor(view = DEFAULT_VIEW) {
+    super({useShadowDom: true});
+    this.#view = view;
+  }
+
   #data: UsedPreloadingViewData = {
     pageURL: '' as Platform.DevToolsPath.UrlString,
     previousAttempts: [],
@@ -168,41 +443,15 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
 
   set data(data: UsedPreloadingViewData) {
     this.#data = data;
-    void this.#render();
-  }
-
-  async #render(): Promise<void> {
-    await RenderCoordinator.write('UsedPreloadingView render', () => {
-      Lit.render(this.#renderTemplate(), this.#shadow, {host: this});
-    });
+    this.requestUpdate();
   }
 
-  #renderTemplate(): Lit.LitTemplate {
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    return html`
-      <style>${usedPreloadingStyles}</style>
-      <devtools-report>
-        ${this.#speculativeLoadingStatusForThisPageSections()}
-
-        <devtools-report-divider></devtools-report-divider>
-
-        ${this.#speculationsInitiatedByThisPageSummarySections()}
-
-        <devtools-report-divider></devtools-report-divider>
-
-        <devtools-report-section>
-          <x-link
-            class="link devtools-link"
-            href=${'https://developer.chrome.com/blog/prerender-pages/'}
-            jslog=${VisualLogging.link()
-                    .track({ click: true, keydown: 'Enter|Space' })
-                    .context('learn-more')}
-          >${i18nString(UIStrings.learnMore)}</x-link>
-        </devtools-report-section>
-      </devtools-report>
-    `;
-    // clang-format on
+  override performUpdate(): void {
+    const viewInput: ViewInput = {
+      speculativeLoadingStatusData: this.#getSpeculativeLoadingStatusForThisPageData(),
+      speculationsInitiatedSummaryData: this.#getSpeculationsInitiatedByThisPageSummaryData(),
+    };
+    this.#view(viewInput, undefined, this.contentElement);
   }
 
   #isPrerenderLike(speculationAction: Protocol.Preload.SpeculationAction): boolean {
@@ -211,12 +460,11 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
     ].includes(speculationAction);
   }
 
-  #isPrerenderAttempt(attempt: SDK.PreloadingModel.PreloadingAttempt):
-      attempt is SDK.PreloadingModel.PrerenderAttempt|SDK.PreloadingModel.PrerenderUntilScriptAttempt {
+  #isPrerenderAttempt(attempt: SDK.PreloadingModel.PreloadingAttempt): attempt is AttemptWithMismatchedHeaders {
     return this.#isPrerenderLike(attempt.action);
   }
 
-  #speculativeLoadingStatusForThisPageSections(): Lit.LitTemplate {
+  #getSpeculativeLoadingStatusForThisPageData(): SpeculativeLoadingStatusForThisPageData {
     const pageURL = Common.ParsedURL.ParsedURL.urlWithoutHash(this.#data.pageURL);
     const forThisPage = this.#data.previousAttempts.filter(
         attempt => Common.ParsedURL.ParsedURL.urlWithoutHash(attempt.key.url) === pageURL);
@@ -244,84 +492,18 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
       kind = UsedKind.NO_PRELOADS;
     }
 
-    let badge;
-    let basicMessage;
-    switch (kind) {
-      case UsedKind.DOWNGRADED_PRERENDER_TO_PREFETCH_AND_USED:
-        badge = this.#badgeSuccess();
-        basicMessage = html`${i18nString(UIStrings.downgradedPrefetchUsed)}`;
-        break;
-      case UsedKind.PREFETCH_USED:
-        badge = this.#badgeSuccess();
-        basicMessage = html`${i18nString(UIStrings.prefetchUsed)}`;
-        break;
-      case UsedKind.PRERENDER_USED:
-        badge = this.#badgeSuccess();
-        basicMessage = html`${i18nString(UIStrings.prerenderUsed)}`;
-        break;
-      case UsedKind.PREFETCH_FAILED:
-        badge = this.#badgeFailure();
-        basicMessage = html`${i18nString(UIStrings.prefetchFailed)}`;
-        break;
-      case UsedKind.PRERENDER_FAILED:
-        badge = this.#badgeFailure();
-        basicMessage = html`${i18nString(UIStrings.prerenderFailed)}`;
-        break;
-      case UsedKind.NO_PRELOADS:
-        badge = this.#badgeNeutral(i18nString(UIStrings.badgeNoSpeculativeLoads));
-        basicMessage = html`${i18nString(UIStrings.noPreloads)}`;
-        break;
-    }
-
-    let maybeFailureReasonMessage;
-    if (kind === UsedKind.PREFETCH_FAILED) {
-      assertNotNullOrUndefined(prefetch);
-      maybeFailureReasonMessage = prefetchFailureReason(prefetch as SDK.PreloadingModel.PrefetchAttempt);
-    } else if (kind === UsedKind.PRERENDER_FAILED || kind === UsedKind.DOWNGRADED_PRERENDER_TO_PREFETCH_AND_USED) {
-      assertNotNullOrUndefined(prerenderLike);
-      maybeFailureReasonMessage = prerenderFailureReason(
-          prerenderLike as SDK.PreloadingModel.PrerenderAttempt | SDK.PreloadingModel.PrerenderUntilScriptAttempt);
-    }
-
-    let maybeFailureReason: Lit.LitTemplate = Lit.nothing;
-    if (maybeFailureReasonMessage !== undefined) {
-      // Disabled until https://crbug.com/1079231 is fixed.
-      // clang-format off
-      maybeFailureReason = html`
-      <devtools-report-section-header>${i18nString(UIStrings.detailsFailureReason)}</devtools-report-section-header>
-      <devtools-report-section>
-        ${maybeFailureReasonMessage}
-      </devtools-report-section>
-      `;
-      // clang-format on
-    }
-
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    return html`
-      <devtools-report-section-header>${i18nString(UIStrings.speculativeLoadingStatusForThisPage)}</devtools-report-section-header>
-      <devtools-report-section>
-        <div>
-          <div class="status-badge-container">
-            ${badge}
-          </div>
-          <div>
-            ${basicMessage}
-          </div>
-        </div>
-      </devtools-report-section>
-
-      ${maybeFailureReason}
-
-      ${this.#maybeMismatchedSections(kind)}
-      ${this.#maybeMismatchedHTTPHeadersSections()}
-    `;
-    // clang-format on
+    return {
+      kind,
+      prefetch,
+      prerenderLike,
+      mismatchedData: this.#getMismatchedData(kind),
+      attemptWithMismatchedHeaders: this.#getAttemptWithMismatchedHeaders(),
+    };
   }
 
-  #maybeMismatchedSections(kind: UsedKind): Lit.LitTemplate {
+  #getMismatchedData(kind: UsedKind): MismatchedData|undefined {
     if (kind !== UsedKind.NO_PRELOADS || this.#data.previousAttempts.length === 0) {
-      return Lit.nothing;
+      return undefined;
     }
 
     const rows = this.#data.previousAttempts.map(attempt => {
@@ -331,43 +513,19 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
         status: attempt.status,
       };
     });
-    const data = {
+    return {
       pageURL: this.#data.pageURL,
       rows,
     };
-
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    return html`
-      <devtools-report-section-header>${i18nString(UIStrings.currentURL)}</devtools-report-section-header>
-      <devtools-report-section>
-        <x-link
-          class="link devtools-link"
-          href=${this.#data.pageURL}
-          jslog=${VisualLogging.link()
-                  .track({ click: true, keydown: 'Enter|Space' })
-                  .context('current-url')}
-        >${this.#data.pageURL}</x-link>
-      </devtools-report-section>
-
-      <devtools-report-section-header>${i18nString(UIStrings.preloadedURLs)}</devtools-report-section-header>
-      <devtools-report-section
-      jslog=${VisualLogging.section('preloaded-urls')}>
-        <devtools-widget
-          .widgetConfig=${UI.Widget.widgetConfig(MismatchedPreloadingGrid.MismatchedPreloadingGrid, {data})}
-        ></devtools-widget>
-      </devtools-report-section>
-    `;
-    // clang-format on
   }
 
-  #maybeMismatchedHTTPHeadersSections(): Lit.LitTemplate {
+  #getAttemptWithMismatchedHeaders(): AttemptWithMismatchedHeaders|undefined {
     const attempt = this.#data.previousAttempts.find(
                         attempt => this.#isPrerenderAttempt(attempt) && attempt.mismatchedHeaders !== null) as
             SDK.PreloadingModel.PrerenderAttempt |
         SDK.PreloadingModel.PrerenderUntilScriptAttempt | undefined;
     if (!attempt?.mismatchedHeaders) {
-      return Lit.nothing;
+      return undefined;
     }
 
     if (attempt.key.url !== this.#data.pageURL) {
@@ -377,42 +535,10 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
       throw new Error('unreachable');
     }
 
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    return html`
-      <devtools-report-section-header>${i18nString(UIStrings.mismatchedHeadersDetail)}</devtools-report-section-header>
-      <devtools-report-section>
-        <style>${preloadingGridStyles}</style>
-        <div class="preloading-container">
-          <devtools-data-grid striped inline>
-            <table>
-              <tr>
-                <th id="header-name" weight="30" sortable>
-                  ${i18nString(UIStrings.headerName)}
-                </th>
-                <th id="initial-value" weight="30" sortable>
-                  ${i18nString(UIStrings.initialNavigationValue)}
-                </th>
-                <th id="activation-value" weight="30" sortable>
-                  ${i18nString(UIStrings.activationNavigationValue)}
-                </th>
-              </tr>
-              ${attempt.mismatchedHeaders.map(mismatchedHeaders => html`
-                <tr>
-                  <td>${mismatchedHeaders.headerName}</td>
-                  <td>${mismatchedHeaders.initialValue ?? i18nString(UIStrings.missing)}</td>
-                  <td>${mismatchedHeaders.activationValue ?? i18nString(UIStrings.missing)}</td>
-                </tr>
-              `)}
-            </table>
-          </devtools-data-grid>
-        </div>
-      </devtools-report-section>
-    `;
-    // clang-format on
+    return attempt;
   }
 
-  #speculationsInitiatedByThisPageSummarySections(): Lit.LitTemplate {
+  #getSpeculationsInitiatedByThisPageSummaryData(): SpeculationsInitiatedByThisPageSummaryData {
     const count = this.#data.currentAttempts.reduce((acc, attempt) => {
       acc.set(attempt.status, (acc.get(attempt.status) ?? 0) + 1);
       return acc;
@@ -422,21 +548,22 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
     const failureCount = count.get(SDK.PreloadingModel.PreloadingStatus.FAILURE) ?? 0;
     const inProgressCount = (count.get(SDK.PreloadingModel.PreloadingStatus.PENDING) ?? 0) +
         (count.get(SDK.PreloadingModel.PreloadingStatus.RUNNING) ?? 0);
-    const badges = [];
+
+    const badges: Badge[] = [];
     if (this.#data.currentAttempts.length === 0) {
-      badges.push(this.#badgeNeutral(i18nString(UIStrings.badgeNoSpeculativeLoads)));
+      badges.push({type: 'neutral', message: i18nString(UIStrings.badgeNoSpeculativeLoads)});
     }
     if (notTriggeredCount > 0) {
-      badges.push(this.#badgeNeutral(i18nString(UIStrings.badgeNotTriggeredWithCount, {n: notTriggeredCount})));
+      badges.push({type: 'neutral', message: i18nString(UIStrings.badgeNotTriggeredWithCount, {n: notTriggeredCount})});
     }
     if (inProgressCount > 0) {
-      badges.push(this.#badgeNeutral(i18nString(UIStrings.badgeInProgressWithCount, {n: inProgressCount})));
+      badges.push({type: 'neutral', message: i18nString(UIStrings.badgeInProgressWithCount, {n: inProgressCount})});
     }
     if (readyCount > 0) {
-      badges.push(this.#badgeSuccess(readyCount));
+      badges.push({type: 'success', count: readyCount});
     }
     if (failureCount > 0) {
-      badges.push(this.#badgeFailure(failureCount));
+      badges.push({type: 'failure', count: failureCount});
     }
 
     const revealRuleSetView = (): void => {
@@ -446,76 +573,6 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
       void Common.Revealer.reveal(new PreloadingHelper.PreloadingForward.AttemptViewWithFilter(null));
     };
 
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    return html`
-      <devtools-report-section-header>${i18nString(UIStrings.speculationsInitiatedByThisPage)}</devtools-report-section-header>
-      <devtools-report-section>
-        <div>
-          <div class="status-badge-container">
-            ${badges}
-          </div>
-
-          <div class="reveal-links">
-            <button class="link devtools-link" @click=${revealRuleSetView}
-            jslog=${VisualLogging.action('view-all-rules').track({click: true})}>
-              ${i18nString(UIStrings.viewAllRules)}
-            </button>
-           ・
-            <button class="link devtools-link" @click=${revealAttemptViewWithFilter}
-            jslog=${VisualLogging.action('view-all-speculations').track({click: true})}>
-             ${i18nString(UIStrings.viewAllSpeculations)}
-            </button>
-          </div>
-        </div>
-      </devtools-report-section>
-    `;
-    // clang-format on
-  }
-
-  #badgeSuccess(count?: number): Lit.LitTemplate {
-    let message;
-    if (count === undefined) {
-      message = i18nString(UIStrings.badgeSuccess);
-    } else {
-      message = i18nString(UIStrings.badgeSuccessWithCount, {n: count});
-    }
-    return this.#badge('status-badge status-badge-success', 'check-circle', message);
-  }
-
-  #badgeFailure(count?: number): Lit.LitTemplate {
-    let message;
-    if (count === undefined) {
-      message = i18nString(UIStrings.badgeFailure);
-    } else {
-      message = i18nString(UIStrings.badgeFailureWithCount, {n: count});
-    }
-    return this.#badge('status-badge status-badge-failure', 'cross-circle', message);
-  }
-
-  #badgeNeutral(message: string): Lit.LitTemplate {
-    return this.#badge('status-badge status-badge-neutral', 'clear', message);
-  }
-
-  #badge(klass: string, iconName: string, message: string): Lit.LitTemplate {
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    return html`
-      <span class=${klass}>
-        <devtools-icon name=${iconName}></devtools-icon>
-        <span>
-          ${message}
-        </span>
-      </span>
-    `;
-    // clang-format on
-  }
-}
-
-customElements.define('devtools-resources-used-preloading-view', UsedPreloadingView);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-resources-used-preloading-view': UsedPreloadingView;
+    return {badges, revealRuleSetView, revealAttemptViewWithFilter};
   }
 }