chrome-devtools-frontend 1.0.1550444 → 1.0.1555174

package/front_end/panels/application/preloading/components/RuleSetDetailsView.ts

@@ -1,25 +1,19 @@
 // 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 * as i18n from '../../../../core/i18n/i18n.js';
-import {assertNotNullOrUndefined} from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
 import * as Formatter from '../../../../models/formatter/formatter.js';
 import * as CodeMirror from '../../../../third_party/codemirror.next/codemirror.next.js';
 import * as CodeHighlighter from '../../../../ui/components/code_highlighter/code_highlighter.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 TextEditor from '../../../../ui/components/text_editor/text_editor.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
-import * as Lit from '../../../../ui/lit/lit.js';
+import {html, nothing, render} from '../../../../ui/lit/lit.js';
 
 import ruleSetDetailsViewStyles from './RuleSetDetailsView.css.js';
 
-const {html} = Lit;
-
 const UIStrings = {
   /**
    * @description Text in RuleSetDetailsView of the Application panel if no element is selected. An element here is an item in a
@@ -41,118 +35,105 @@ type RuleSet = Protocol.Preload.RuleSet;
 
 const codeMirrorJsonType = await CodeHighlighter.CodeHighlighter.languageFromMIME('application/json');
 
-export type RuleSetDetailsViewData = RuleSet|null;
-
-export class RuleSetDetailsView extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #data: RuleSetDetailsViewData = null;
-  #shouldPrettyPrint = true;
-  #editorState?: CodeMirror.EditorState;
-
-  set data(data: RuleSetDetailsViewData) {
-    this.#data = data;
-    void this.#render();
-  }
-
-  set shouldPrettyPrint(shouldPrettyPrint: boolean) {
-    this.#shouldPrettyPrint = shouldPrettyPrint;
-  }
+export interface ViewInput {
+  url: string;
+  errorMessage?: string;
+  editorState: CodeMirror.EditorState;
+  sourceText: string;
+}
 
-  async #render(): Promise<void> {
-    await RenderCoordinator.write('RuleSetDetailsView render', async () => {
-      if (this.#data === null) {
-        Lit.render(
-            html`
-          <style>${ruleSetDetailsViewStyles}</style>
-          <style>${UI.inspectorCommonStyles}</style>
+export const DEFAULT_VIEW = (input: ViewInput|null, _output: object, target: HTMLElement): void => {
+  // clang-format off
+  render(html`
+    <style>${ruleSetDetailsViewStyles}</style>
+    <style>${UI.inspectorCommonStyles}</style>
+    ${input
+      ? html`
+        <div class="content">
+          <div class="ruleset-header" id="ruleset-url">${input.url}</div>
+          ${input.errorMessage ? html`
+            <div class="ruleset-header">
+              <devtools-icon name="cross-circle" class="medium">
+              </devtools-icon>
+              <span id="error-message-text">${input.errorMessage}</span>
+            </div>
+          ` : nothing}
+        </div>
+        <div class="text-ellipsis">
+          <devtools-text-editor .style.flexGrow=${'1'} .state=${input.editorState}></devtools-text-editor>
+        </div>`
+      : html`
           <div class="placeholder">
             <div class="empty-state">
               <span class="empty-state-header">${i18nString(UIStrings.noElementSelected)}</span>
               <span class="empty-state-description">${i18nString(UIStrings.selectAnElementForMoreDetails)}</span>
             </div>
-          </div>
-      `,
-            this.#shadow, {host: this});
-        // clang-format on
-        return;
-      }
-
-      const sourceText = await this.#getSourceText();
-
-      // Disabled until https://crbug.com/1079231 is fixed.
-      // clang-format off
-      Lit.render(html`
-        <style>${ruleSetDetailsViewStyles}</style>
-        <style>${UI.inspectorCommonStyles}</style>
-        <div class="content">
-          <div class="ruleset-header" id="ruleset-url">${this.#data?.url || SDK.TargetManager.TargetManager.instance().inspectedURL()}</div>
-          ${this.#maybeError()}
-        </div>
-        <div class="text-ellipsis">
-          ${this.#renderSource(sourceText)}
-        </div>
-      `, this.#shadow, {host: this});
-      // clang-format on
-    });
+          </div>`
+    }
+    `, target);
+  // clang-format on
+};
+
+export class RuleSetDetailsView extends UI.Widget.VBox {
+  readonly #view: typeof DEFAULT_VIEW;
+  #ruleSet: RuleSet|null = null;
+  #shouldPrettyPrint = true;
+
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
   }
 
-  // TODO(https://crbug.com/1425354): Support i18n.
-  #maybeError(): Lit.LitTemplate {
-    assertNotNullOrUndefined(this.#data);
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+  }
 
-    if (this.#data.errorMessage === undefined) {
-      return Lit.nothing;
-    }
+  set ruleSet(ruleSet: RuleSet|null) {
+    this.#ruleSet = ruleSet;
+    this.requestUpdate();
+  }
 
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    return html`
-      <div class="ruleset-header">
-        <devtools-icon name="cross-circle" class="medium">
-        </devtools-icon>
-        <span id="error-message-text">${this.#data.errorMessage}</span>
-      </div>
-    `;
-    // clang-format on
+  set shouldPrettyPrint(shouldPrettyPrint: boolean) {
+    this.#shouldPrettyPrint = shouldPrettyPrint;
+    this.requestUpdate();
   }
 
-  #renderSource(sourceText: string): Lit.LitTemplate {
-    this.#editorState = CodeMirror.EditorState.create({
+  override async performUpdate(): Promise<void> {
+    if (!this.#ruleSet) {
+      this.#view(null, {}, this.contentElement);
+      return;
+    }
+
+    const sourceText = await this.#getSourceText();
+    const editorState = CodeMirror.EditorState.create({
       doc: sourceText,
       extensions: [
-        TextEditor.Config.baseConfiguration(sourceText || ''),
+        TextEditor.Config.baseConfiguration(sourceText),
         CodeMirror.lineNumbers(),
         CodeMirror.EditorState.readOnly.of(true),
         codeMirrorJsonType as CodeMirror.Extension,
         CodeMirror.syntaxHighlighting(CodeHighlighter.CodeHighlighter.highlightStyle),
       ],
     });
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    // TODO(https://crbug.com/1425354): Add Raw button.
-    return html`
-      <devtools-text-editor .style.flexGrow=${'1'} .state=${
-        this.#editorState
-      }></devtools-text-editor>
-    `;
-    // clang-format on
+
+    this.#view(
+        {
+          url: this.#ruleSet.url || SDK.TargetManager.TargetManager.instance().inspectedURL(),
+          errorMessage: this.#ruleSet.errorMessage,
+          editorState,
+          sourceText,
+        },
+        {}, this.contentElement);
   }
 
   async #getSourceText(): Promise<string> {
-    if (this.#shouldPrettyPrint && this.#data?.sourceText !== undefined) {
+    if (this.#shouldPrettyPrint && this.#ruleSet?.sourceText !== undefined) {
       const formattedResult =
-          await Formatter.ScriptFormatter.formatScriptContent('application/json', this.#data.sourceText);
+          await Formatter.ScriptFormatter.formatScriptContent('application/json', this.#ruleSet.sourceText);
       return formattedResult.formattedContent;
     }
 
-    return this.#data?.sourceText || '';
-  }
-}
-
-customElements.define('devtools-resources-rulesets-details-view', RuleSetDetailsView);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-resources-rulesets-details-view': RuleSetDetailsView;
+    return this.#ruleSet?.sourceText || '';
   }
 }

package/front_end/panels/application/preloading/components/RuleSetGrid.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/legacy/components/data_grid/data_grid.js';
 import '../../../../ui/kit/kit.js';
@@ -12,9 +11,8 @@ 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 type * as UI from '../../../../ui/legacy/legacy.js';
-import * as Lit from '../../../../ui/lit/lit.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
+import {Directives, html, type LitTemplate, nothing, render} from '../../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 import * as NetworkForward from '../../../network/forward/forward.js';
 import * as PreloadingHelper from '../helper/helper.js';
@@ -22,7 +20,7 @@ import * as PreloadingHelper from '../helper/helper.js';
 import * as PreloadingString from './PreloadingString.js';
 import ruleSetGridStyles from './ruleSetGrid.css.js';
 
-const {html, Directives: {styleMap}} = Lit;
+const {styleMap} = Directives;
 
 const UIStrings = {
   /**
@@ -63,29 +61,145 @@ export interface RuleSetGridRow {
   preloadsStatusSummary: string;
 }
 
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+
+export interface ViewInput {
+  data: RuleSetGridData|null;
+  onSelect: (ruleSetId: Protocol.Preload.RuleSetId) => void;
+  onRevealInElements: (ruleSet: Protocol.Preload.RuleSet) => void;
+  onRevealInNetwork: (ruleSet: Protocol.Preload.RuleSet) => void;
+  onRevealPreloadsAssociatedWithRuleSet: (ruleSet: Protocol.Preload.RuleSet) => void;
+}
+
+export type ViewOutput = unknown;
+
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  let template: LitTemplate = nothing;
+  if (input.data !== null) {
+    const {rows, pageURL} = input.data;
+
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    template =
+      html`
+          <style>${ruleSetGridStyles}</style>
+          <div class="ruleset-container" jslog=${VisualLogging.pane('preloading-rules')}>
+            <devtools-data-grid striped>
+              <table>
+                <tr>
+                  <th id="rule-set" weight="20" sortable>
+                    ${i18nString(UIStrings.ruleSet)}
+                  </th>
+                  <th id="status" weight="80" sortable>
+                    ${i18nString(UIStrings.status)}
+                  </th>
+                </tr>
+                ${rows.map(({ruleSet, preloadsStatusSummary}) => {
+                  const location = PreloadingString.ruleSetTagOrLocationShort(ruleSet, pageURL);
+                  const revealInElements = ruleSet.backendNodeId !== undefined;
+                  const revealInNetwork = ruleSet.url !== undefined && ruleSet.requestId;
+                  return html`
+                    <tr @select=${() => input.onSelect(ruleSet.id)}>
+                      <td>
+                        ${revealInElements || revealInNetwork ? html`
+                          <button class="link" role="link"
+                              @click=${() => {
+                                if (revealInElements) {
+                                  input.onRevealInElements(ruleSet);
+                                } else {
+                                  input.onRevealInNetwork(ruleSet);
+                                }
+                              }}
+                              title=${revealInElements ? i18nString(UIStrings.clickToOpenInElementsPanel)
+                                                      : i18nString(UIStrings.clickToOpenInNetworkPanel)}
+                              style=${styleMap({
+                                border: 'none',
+                                background: 'none',
+                                color: 'var(--icon-link)',
+                                cursor: 'pointer',
+                                'text-decoration': 'underline',
+                                'padding-inline-start': '0',
+                                'padding-inline-end': '0',
+                              })}
+                              jslog=${VisualLogging
+                                  .action(revealInElements ? 'reveal-in-elements' : 'reveal-in-network')
+                                  .track({click: true})}
+                            >
+                              <devtools-icon name=${revealInElements ? 'code-circle' : 'arrow-up-down-circle'} class="medium"
+                                style=${styleMap({
+                                  color: 'var(--icon-link)',
+                                  'vertical-align': 'sub',
+                                })}
+                              ></devtools-icon>
+                              ${location}
+                            </button>`
+                            : location}
+                    </td>
+                    <td>
+                      ${ruleSet.errorType !== undefined ? html`
+                        <span style=${styleMap({color: 'var(--sys-color-error)'})}>
+                          ${i18nString(UIStrings.errors, {errorCount: 1})}
+                        </span>` : ''} ${ruleSet.errorType !== Protocol.Preload.RuleSetErrorType.SourceIsNotJsonObject &&
+                        ruleSet.errorType !== Protocol.Preload.RuleSetErrorType.InvalidRulesetLevelTag ?
+                        html`
+                        <button class="link" role="link"
+                          @click=${() => input.onRevealPreloadsAssociatedWithRuleSet(ruleSet)}
+                          title=${i18nString(UIStrings.buttonRevealPreloadsAssociatedWithRuleSet)}
+                          style=${styleMap({
+                            color: 'var(--sys-color-primary)',
+                            'text-decoration': 'underline',
+                            cursor: 'pointer',
+                            border: 'none',
+                            background: 'none',
+                            'padding-inline-start': '0',
+                            'padding-inline-end': '0',
+                          })}
+                          jslog=${VisualLogging.action('reveal-preloads').track({click: true})}>
+                          ${preloadsStatusSummary}
+                        </button>` : ''}
+                    </td>
+                  </tr>
+                `;})}
+              </table>
+            </devtools-data-grid>
+          </div>`;
+    // clang-format on
+  }
+  render(template, target);
+};
+
 /** Grid component to show SpeculationRules rule sets. **/
-export class RuleSetGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+export class RuleSetGrid extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
+  readonly #view: View;
   #data: RuleSetGridData|null = null;
 
-  connectedCallback(): void {
-    this.#render();
+  constructor(view: View = DEFAULT_VIEW) {
+    super({useShadowDom: true});
+    this.#view = view;
+  }
+
+  get data(): RuleSetGridData|null {
+    return this.#data;
   }
 
-  update(data: RuleSetGridData): void {
+  set data(data: RuleSetGridData|null) {
     this.#data = data;
-    this.#render();
+    this.requestUpdate();
   }
 
-  async #revealSpeculationRules(ruleSet: Protocol.Preload.RuleSet): Promise<void> {
-    if (ruleSet.backendNodeId !== undefined) {
-      await this.#revealSpeculationRulesInElements(ruleSet);
-    } else if (ruleSet.url !== undefined && ruleSet.requestId) {
-      await this.#revealSpeculationRulesInNetwork(ruleSet);
-    }
+  override performUpdate(): void {
+    const input: ViewInput = {
+      data: this.#data,
+      onSelect: this.dispatchEventToListeners.bind(this, Events.SELECT),
+      onRevealInElements: this.#revealSpeculationRulesInElements.bind(this),
+      onRevealInNetwork: this.#revealSpeculationRulesInNetwork.bind(this),
+      onRevealPreloadsAssociatedWithRuleSet: this.#revealAttemptViewWithFilter.bind(this),
+    };
+    const output = undefined;
+    this.#view(input, output, this.contentElement);
   }
 
-  async #revealSpeculationRulesInElements(ruleSet: Protocol.Preload.RuleSet): Promise<void> {
+  #revealSpeculationRulesInElements(ruleSet: Protocol.Preload.RuleSet): void {
     assertNotNullOrUndefined(ruleSet.backendNodeId);
 
     const target = SDK.TargetManager.TargetManager.instance().scopeTarget();
@@ -93,10 +207,10 @@ export class RuleSetGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<
       return;
     }
 
-    await Common.Revealer.reveal(new SDK.DOMModel.DeferredDOMNode(target, ruleSet.backendNodeId));
+    void Common.Revealer.reveal(new SDK.DOMModel.DeferredDOMNode(target, ruleSet.backendNodeId));
   }
 
-  async #revealSpeculationRulesInNetwork(ruleSet: Protocol.Preload.RuleSet): Promise<void> {
+  #revealSpeculationRulesInNetwork(ruleSet: Protocol.Preload.RuleSet): void {
     assertNotNullOrUndefined(ruleSet.requestId);
     const request = SDK.TargetManager.TargetManager.instance()
                         .scopeTarget()
@@ -109,107 +223,18 @@ export class RuleSetGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<
 
     const requestLocation = NetworkForward.UIRequestLocation.UIRequestLocation.tab(
         request, NetworkForward.UIRequestLocation.UIRequestTabs.PREVIEW, {clearFilter: false});
-    await Common.Revealer.reveal(requestLocation);
-  }
-
-  async #revealAttemptViewWithFilter(ruleSet: Protocol.Preload.RuleSet): Promise<void> {
-    await Common.Revealer.reveal(new PreloadingHelper.PreloadingForward.AttemptViewWithFilter(ruleSet.id));
+    void Common.Revealer.reveal(requestLocation);
   }
 
-  #render(): void {
-    if (this.#data === null) {
-      return;
-    }
-
-    const {rows, pageURL} = this.#data;
-
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-      Lit.render(html`
-        <style>${ruleSetGridStyles}</style>
-        <div class="ruleset-container" jslog=${VisualLogging.pane('preloading-rules')}>
-          <devtools-data-grid striped>
-            <table>
-              <tr>
-                <th id="rule-set" weight="20" sortable>
-                  ${i18nString(UIStrings.ruleSet)}
-                </th>
-                <th id="status" weight="80" sortable>
-                  ${i18nString(UIStrings.status)}
-                </th>
-              </tr>
-              ${rows.map(({ruleSet, preloadsStatusSummary}) => {
-                const location = PreloadingString.ruleSetTagOrLocationShort(ruleSet, pageURL);
-                const revealInElements = ruleSet.backendNodeId !== undefined;
-                const revealInNetwork = ruleSet.url !== undefined && ruleSet.requestId;
-                return html`
-                  <tr @select=${() => this.dispatchEvent(new CustomEvent('select', {detail: ruleSet.id}))}>
-                    <td>
-                      ${revealInElements || revealInNetwork ? html`
-                        <button class="link" role="link"
-                            @click=${() => this.#revealSpeculationRules(ruleSet)}
-                            title=${revealInElements ? i18nString(UIStrings.clickToOpenInElementsPanel)
-                                                    : i18nString(UIStrings.clickToOpenInNetworkPanel)}
-                            style=${styleMap({
-                              border: 'none',
-                              background: 'none',
-                              color: 'var(--icon-link)',
-                              cursor: 'pointer',
-                              'text-decoration': 'underline',
-                              'padding-inline-start': '0',
-                              'padding-inline-end': '0',
-                            })}
-                            jslog=${VisualLogging
-                                .action(revealInElements ? 'reveal-in-elements' : 'reveal-in-network')
-                                .track({click: true})}
-                          >
-                            <devtools-icon name=${revealInElements ? 'code-circle' : 'arrow-up-down-circle'} class="medium"
-                              style=${styleMap({
-                                color: 'var(--icon-link)',
-                                'vertical-align': 'sub',
-                              })}
-                            ></devtools-icon>
-                            ${location}
-                          </button>`
-                          : location}
-                  </td>
-                  <td>
-                    ${ruleSet.errorType !== undefined ? html`
-                      <span style=${styleMap({color: 'var(--sys-color-error)'})}>
-                        ${i18nString(UIStrings.errors, {errorCount: 1})}
-                      </span>` : ''} ${ruleSet.errorType !== Protocol.Preload.RuleSetErrorType.SourceIsNotJsonObject &&
-                      ruleSet.errorType !== Protocol.Preload.RuleSetErrorType.InvalidRulesetLevelTag ?
-                      html`
-                      <button class="link" role="link"
-                        @click=${() => this.#revealAttemptViewWithFilter(ruleSet)}
-                        title=${i18nString(UIStrings.buttonRevealPreloadsAssociatedWithRuleSet)}
-                        style=${styleMap({
-                          color: 'var(--sys-color-primary)',
-                          'text-decoration': 'underline',
-                          cursor: 'pointer',
-                          border: 'none',
-                          background: 'none',
-                          'padding-inline-start': '0',
-                          'padding-inline-end': '0',
-                        })}
-                        jslog=${VisualLogging.action('reveal-preloads').track({click: true})}>
-                        ${preloadsStatusSummary}
-                      </button>` : ''}
-                  </td>
-                </tr>
-              `;})}
-            </table>
-          </devtools-data-grid>
-        </div>
-      `, this.#shadow, {host: this});
-    // clang-format on
+  #revealAttemptViewWithFilter(ruleSet: Protocol.Preload.RuleSet): void {
+    void Common.Revealer.reveal(new PreloadingHelper.PreloadingForward.AttemptViewWithFilter(ruleSet.id));
   }
 }
 
-customElements.define('devtools-resources-ruleset-grid', RuleSetGrid);
+export const enum Events {
+  SELECT = 'select',
+}
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-resources-ruleset-grid': RuleSetGrid;
-  }
+export interface EventTypes {
+  [Events.SELECT]: Protocol.Preload.RuleSetId;
 }

package/front_end/panels/application/preloading/components/UsedPreloadingView.ts

@@ -5,7 +5,6 @@
 
 import '../../../../ui/kit/kit.js';
 import '../../../../ui/components/report_view/report_view.js';
-import './PreloadingMismatchedHeadersGrid.js';
 import './MismatchedPreloadingGrid.js';
 
 import * as Common from '../../../../core/common/common.js';
@@ -16,12 +15,13 @@ 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 type * as UI from '../../../../ui/legacy/legacy.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 * as PreloadingHelper from '../helper/helper.js';
 
-import type * as MismatchedPreloadingGrid from './MismatchedPreloadingGrid.js';
+import * as MismatchedPreloadingGrid from './MismatchedPreloadingGrid.js';
+import preloadingGridStyles from './preloadingGrid.css.js';
 import {prefetchFailureReason, prerenderFailureReason} from './PreloadingString.js';
 import usedPreloadingStyles from './usedPreloadingView.css.js';
 
@@ -119,6 +119,22 @@ const UIStrings = {
    * @description Label for badge, indicating how many failed speculations there are.
    */
   badgeFailureWithCount: '{n, plural, =1 {# failure} other {# failures}}',
+  /**
+   * @description The name of the HTTP request header.
+   */
+  headerName: 'Header name',
+  /**
+   * @description The value of the HTTP request header in initial navigation.
+   */
+  initialNavigationValue: 'Value in initial navigation',
+  /**
+   * @description The value of the HTTP request header in activation navigation.
+   */
+  activationNavigationValue: 'Value in activation navigation',
+  /**
+   * @description The string to indicate the value of the header is missing.
+   */
+  missing: '(missing)',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/preloading/components/UsedPreloadingView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -337,8 +353,9 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
       <devtools-report-section-header>${i18nString(UIStrings.preloadedURLs)}</devtools-report-section-header>
       <devtools-report-section
       jslog=${VisualLogging.section('preloaded-urls')}>
-        <devtools-resources-mismatched-preloading-grid
-          .data=${data as MismatchedPreloadingGrid.MismatchedPreloadingGridData}></devtools-resources-mismatched-preloading-grid>
+        <devtools-widget
+          .widgetConfig=${UI.Widget.widgetConfig(MismatchedPreloadingGrid.MismatchedPreloadingGrid, {data})}
+        ></devtools-widget>
       </devtools-report-section>
     `;
     // clang-format on
@@ -346,8 +363,10 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
 
   #maybeMismatchedHTTPHeadersSections(): Lit.LitTemplate {
     const attempt = this.#data.previousAttempts.find(
-        attempt => this.#isPrerenderAttempt(attempt) && attempt.mismatchedHeaders !== null);
-    if (attempt === undefined) {
+                        attempt => this.#isPrerenderAttempt(attempt) && attempt.mismatchedHeaders !== null) as
+            SDK.PreloadingModel.PrerenderAttempt |
+        SDK.PreloadingModel.PrerenderUntilScriptAttempt | undefined;
+    if (!attempt?.mismatchedHeaders) {
       return Lit.nothing;
     }
 
@@ -363,10 +382,31 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
     return html`
       <devtools-report-section-header>${i18nString(UIStrings.mismatchedHeadersDetail)}</devtools-report-section-header>
       <devtools-report-section>
-        <devtools-resources-preloading-mismatched-headers-grid
-          .data=${
-              attempt as SDK.PreloadingModel.PrerenderAttempt |
-              SDK.PreloadingModel.PrerenderUntilScriptAttempt}></devtools-resources-preloading-mismatched-headers-grid>
+        <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

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

@@ -6,7 +6,6 @@ import * as MismatchedPreloadingGrid from './MismatchedPreloadingGrid.js';
 import * as PreloadingDetailsReportView from './PreloadingDetailsReportView.js';
 import * as PreloadingDisabledInfobar from './PreloadingDisabledInfobar.js';
 import * as PreloadingGrid from './PreloadingGrid.js';
-import * as PreloadingMismatchedHeadersGrid from './PreloadingMismatchedHeadersGrid.js';
 import * as RuleSetDetailsView from './RuleSetDetailsView.js';
 import * as RuleSetGrid from './RuleSetGrid.js';
 import * as UsedPreloadingView from './UsedPreloadingView.js';
@@ -16,7 +15,6 @@ export {
   PreloadingDetailsReportView,
   PreloadingDisabledInfobar,
   PreloadingGrid,
-  PreloadingMismatchedHeadersGrid,
   RuleSetDetailsView,
   RuleSetGrid,
   UsedPreloadingView,