chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

package/front_end/panels/application/ExtensionStorageModel.test.ts

@@ -229,4 +229,19 @@ describeWithMockConnection('ExtensionStorageModel', () => {
     runtime.executionContextDestroyed(mockExecutionContext2.id);
     assert.strictEqual(0, extensionStorageModel.storages().length);
   });
+
+  it('matches service worker target on same origin', () => {
+    assert.isTrue(extensionStorage.matchesTarget(
+        createTarget({type: SDK.Target.Type.ServiceWorker, url: `chrome-extension://${initId}/sw.js`})));
+  });
+
+  it('matches tab target on same origin', () => {
+    assert.isTrue(extensionStorage.matchesTarget(
+        createTarget({type: SDK.Target.Type.TAB, url: `chrome-extension://${initId}/sw.js`})));
+  });
+
+  it('does not match service worker target on different origin', () => {
+    assert.isFalse(extensionStorage.matchesTarget(
+        createTarget({type: SDK.Target.Type.ServiceWorker, url: 'chrome-extension://other-id/sw.js'})));
+  });
 });

package/front_end/panels/application/ExtensionStorageModel.ts

@@ -60,7 +60,7 @@ export class ExtensionStorage extends Common.ObjectWrapper.ObjectWrapper<{}> {
     return response.data;
   }
 
-  async setItem(key: string, value: string): Promise<void> {
+  async setItem(key: string, value: unknown): Promise<void> {
     const response = await this.#model.agent.invoke_setStorageItems(
         {id: this.#extensionIdInternal, storageArea: this.#storageAreaInternal, values: {[key]: value}});
     if (response.getError()) {
@@ -83,6 +83,15 @@ export class ExtensionStorage extends Common.ObjectWrapper.ObjectWrapper<{}> {
       throw new Error(response.getError());
     }
   }
+
+  matchesTarget(target: SDK.Target.Target|undefined): boolean {
+    if (!target) {
+      return false;
+    }
+    const targetURL = target.targetInfo()?.url;
+    const parsedURL = targetURL ? Common.ParsedURL.ParsedURL.fromString(targetURL) : null;
+    return parsedURL?.scheme === 'chrome-extension' && parsedURL?.host === this.extensionId;
+  }
 }
 
 export class ExtensionStorageModel extends SDK.SDKModel.SDKModel<EventTypes> {

package/front_end/panels/application/OpenedWindowDetailsView.ts

@@ -23,7 +23,7 @@ const UIStrings = {
   /**
    *@description Title for a link to the Elements panel
    */
-  clickToRevealInElementsPanel: 'Click to reveal in Elements panel',
+  clickToOpenInElementsPanel: 'Click to open in Elements panel',
   /**
    *@description Name of a network resource type
    */
@@ -120,8 +120,7 @@ async function maybeCreateLinkToElementsPanel(opener: Protocol.Page.FrameId|SDK.
     return null;
   }
   const linkElement = linkifyIcon(
-      'code-circle', i18nString(UIStrings.clickToRevealInElementsPanel),
-      () => Common.Revealer.reveal(linkTargetDOMNode));
+      'code-circle', i18nString(UIStrings.clickToOpenInElementsPanel), () => Common.Revealer.reveal(linkTargetDOMNode));
   const label = document.createElement('span');
   label.textContent = `<${linkTargetDOMNode.nodeName().toLocaleLowerCase()}>`;
   linkElement.insertBefore(label, linkElement.firstChild);

package/front_end/panels/application/SharedStorageItemsView.test.ts

@@ -15,6 +15,7 @@ import {createTarget} from '../../testing/EnvironmentHelpers.js';
 import {
   describeWithMockConnection,
 } from '../../testing/MockConnection.js';
+import {getCellElementFromNodeAndColumnId, selectNodeByKey} from '../../testing/StorageItemsViewHelpers.js';
 import * as Coordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 import type * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -123,26 +124,6 @@ class SharedStorageItemsListener {
   }
 }
 
-function selectNodeByKey(
-    dataGrid: DataGrid.DataGrid.DataGridImpl<Protocol.Storage.SharedStorageEntry>,
-    key: string|null): DataGrid.DataGrid.DataGridNode<Protocol.Storage.SharedStorageEntry>|null {
-  for (const node of dataGrid.rootNode().children) {
-    if (node?.data?.key === key) {
-      node.select();
-      return node;
-    }
-  }
-  return null;
-}
-
-function getCellElementFromNodeAndColumnId(
-    dataGrid: DataGrid.DataGrid.DataGridImpl<Protocol.Storage.SharedStorageEntry>,
-    node: DataGrid.DataGrid.DataGridNode<Protocol.Storage.SharedStorageEntry>, columnId: string): Element|null {
-  const column = dataGrid.columns[columnId];
-  const cellIndex = dataGrid.visibleColumnsArray.indexOf(column);
-  return node.element()?.children[cellIndex] || null;
-}
-
 describeWithMockConnection('SharedStorageItemsView', function() {
   let target: SDK.Target.Target;
   let sharedStorageModel: Resources.SharedStorageModel.SharedStorageModel|null;

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

@@ -697,6 +697,7 @@ export const NotRestoredReasonDescription = {
   ParserAborted: {name: i18n.i18n.lockedLazyString('ParserAborted')},
   BroadcastChannelOnMessage: {name: i18n.i18n.lockedLazyString('BroadcastChannelOnMessage')},
   RequestedByWebViewClient: {name: i18n.i18n.lockedLazyString('RequestedByWebViewClient')},
+  PostMessageByWebViewClient: {name: i18n.i18n.lockedLazyString('PostMessageByWebViewClient')},
   WebViewSettingsChanged: {name: i18n.i18n.lockedLazyString('WebViewSettingsChanged')},
   WebViewJavaScriptObjectChanged: {name: i18n.i18n.lockedLazyString('WebViewJavaScriptObjectChanged')},
   WebViewMessageListenerInjected: {name: i18n.i18n.lockedLazyString('WebViewMessageListenerInjected')},

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

@@ -11,7 +11,6 @@ import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ChromeLink from '../../../ui/components/chrome_link/chrome_link.js';
 import * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import type * as ReportView from '../../../ui/components/report_view/report_view.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -91,10 +90,8 @@ export class BounceTrackingMitigationsView extends LegacyWrapper.LegacyWrapper.W
   async #render(): Promise<void> {
     // clang-format off
     LitHtml.render(html`
-      <devtools-report .data=${
-          {reportTitle: i18nString(UIStrings.bounceTrackingMitigationsTitle)} as ReportView.ReportView.ReportData
-      }
-      jslog=${VisualLogging.pane('bounce-tracking-mitigations')}>
+      <devtools-report .data=${{reportTitle: i18nString(UIStrings.bounceTrackingMitigationsTitle)}}
+                       jslog=${VisualLogging.pane('bounce-tracking-mitigations')}>
         ${await this.#renderMainFrameInformation()}
       </devtools-report>
     `, this.#shadow, {host: this});
@@ -200,8 +197,7 @@ export class BounceTrackingMitigationsView extends LegacyWrapper.LegacyWrapper.W
     // clang-format off
     return html`
       <devtools-report-section>
-        <devtools-data-grid-controller .data=${
-            gridData as DataGrid.DataGridController.DataGridControllerData}>
+        <devtools-data-grid-controller .data=${gridData}>
         </devtools-data-grid-controller>
       </devtools-report-section>
     `;

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

@@ -77,8 +77,7 @@ export class EndpointsGrid extends HTMLElement {
       <div class="reporting-container" jslog=${VisualLogging.section('endpoints')}>
         <div class="reporting-header">${i18n.i18n.lockedString('Endpoints')}</div>
         ${this.#endpoints.size > 0 ? html`
-          <devtools-data-grid-controller .data=${
-              endpointsGridData as DataGrid.DataGridController.DataGridControllerData}>
+          <devtools-data-grid-controller .data=${endpointsGridData}>
           </devtools-data-grid-controller>
         ` : html`
           <div class="reporting-placeholder">

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

@@ -61,11 +61,11 @@ const UIStrings = {
   /**
    *@description Title for a link to the Sources panel
    */
-  clickToRevealInSourcesPanel: 'Click to reveal in Sources panel',
+  clickToOpenInSourcesPanel: 'Click to open in Sources panel',
   /**
    *@description Title for a link to the Network panel
    */
-  clickToRevealInNetworkPanel: 'Click to reveal in Network panel',
+  clickToOpenInNetworkPanel: 'Click to open in Network panel',
   /**
    *@description Title for unreachable URL field
    */
@@ -73,7 +73,7 @@ const UIStrings = {
   /**
    *@description Title for a link that applies a filter to the network panel
    */
-  clickToRevealInNetworkPanelMight: 'Click to reveal in Network panel (might require page reload)',
+  clickToOpenInNetworkPanelMight: 'Click to open in Network panel (might require page reload)',
   /**
    *@description The origin of a URL (https://web.dev/same-site-same-origin/#origin)
    *(for a lot of languages this does not need to be translated, please translate only where necessary)
@@ -87,7 +87,7 @@ const UIStrings = {
   /**
    *@description Title for a link to the Elements panel
    */
-  clickToRevealInElementsPanel: 'Click to reveal in Elements panel',
+  clickToOpenInElementsPanel: 'Click to open in Elements panel',
   /**
    *@description Title for ad frame type field
    */
@@ -391,7 +391,7 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
     const sourceCode = this.#uiSourceCodeForFrame(this.#frame);
     return renderIconLink(
         'breakpoint-circle',
-        i18nString(UIStrings.clickToRevealInSourcesPanel),
+        i18nString(UIStrings.clickToOpenInSourcesPanel),
         () => Common.Revealer.reveal(sourceCode),
         'reveal-in-sources',
     );
@@ -402,7 +402,7 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
       const resource = this.#frame.resourceForURL(this.#frame.url);
       if (resource && resource.request) {
         const request = resource.request;
-        return renderIconLink('arrow-up-down-circle', i18nString(UIStrings.clickToRevealInNetworkPanel), () => {
+        return renderIconLink('arrow-up-down-circle', i18nString(UIStrings.clickToOpenInNetworkPanel), () => {
           const requestLocation = NetworkForward.UIRequestLocation.UIRequestLocation.tab(
               request, NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT);
           return Common.Revealer.reveal(requestLocation);
@@ -446,7 +446,7 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
       if (unreachableUrl) {
         return renderIconLink(
             'arrow-up-down-circle',
-            i18nString(UIStrings.clickToRevealInNetworkPanelMight),
+            i18nString(UIStrings.clickToOpenInNetworkPanelMight),
             ():
                 void => {
                   void Common.Revealer.reveal(NetworkForward.UIFilter.UIRequestFilter.filters([
@@ -489,7 +489,7 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
           <devtools-report-key>${i18nString(UIStrings.ownerElement)}</devtools-report-key>
           <devtools-report-value class="without-min-width">
             <div class="inline-items">
-              <button class="link text-link" role="link" tabindex=0 title=${i18nString(UIStrings.clickToRevealInElementsPanel)}
+              <button class="link text-link" role="link" tabindex=0 title=${i18nString(UIStrings.clickToOpenInElementsPanel)}
                 @mouseenter=${() => this.#frame?.highlight()}
                 @mouseleave=${() => SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight()}
                 @click=${() => Common.Revealer.reveal(linkTargetDOMNode)}

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

@@ -5,7 +5,6 @@
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
-import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import interestGroupAccessGridStyles from './interestGroupAccessGrid.css.js';
@@ -71,11 +70,9 @@ export class InterestGroupAccessGrid extends HTMLElement {
     LitHtml.render(html`
       <div>
         <span class="heading">Interest Groups</span>
-        <devtools-icon class="info-icon" title=${
-            i18nString(UIStrings.allInterestGroupStorageEvents)}
-          .data=${
-            {iconName: 'info', color: 'var(--icon-default)', width: '16px'} as
-            IconButton.Icon.IconWithName}>
+        <devtools-icon class="info-icon"
+                       title=${i18nString(UIStrings.allInterestGroupStorageEvents)}
+                       .data=${{iconName: 'info', color: 'var(--icon-default)', width: '16px'}}>
         </devtools-icon>
         ${this.#renderGridOrNoDataMessage()}
       </div>
@@ -131,8 +128,7 @@ export class InterestGroupAccessGrid extends HTMLElement {
     };
 
     return html`
-      <devtools-data-grid-controller .data=${
-        gridData as DataGrid.DataGridController.DataGridControllerData}></devtools-data-grid-controller>
+      <devtools-data-grid-controller .data=${gridData}></devtools-data-grid-controller>
     `;
   }
 

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

@@ -2,8 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/components/report_view/report_view.js';
 import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/components/report_view/report_view.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -12,7 +12,6 @@ import * as SDK from '../../../core/sdk/sdk.js';
 import * as Protocol from '../../../generated/protocol.js';
 import * as NetworkForward from '../../../panels/network/forward/forward.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -187,7 +186,7 @@ export class PermissionsPolicySection extends HTMLElement {
                 color: 'var(--icon-error)',
                 iconName: 'cross-circle',
                 width: '20px', height: '20px',
-              } as IconButton.Icon.IconData}>
+              }}>
             </devtools-icon>
           </div>
           <div class="feature-name text-ellipsis">
@@ -210,7 +209,7 @@ export class PermissionsPolicySection extends HTMLElement {
           </div>
         </div>
       `;
-      // clang-format on
+                // clang-format on
     }));
 
     return html`

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

@@ -10,7 +10,6 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import type * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
-import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -63,7 +62,7 @@ export class ReportsGridStatusHeader extends HTMLElement {
           color: 'var(--icon-link)',
           width: '16px',
           height: '16px',
-          } as IconButton.Icon.IconData}></devtools-icon>
+          }}></devtools-icon>
       </x-link>
     `, this.#shadow, {host: this});
     // clang-format on
@@ -155,8 +154,7 @@ export class ReportsGrid extends HTMLElement {
       <div class="reporting-container" jslog=${VisualLogging.section('reports')}>
         <div class="reporting-header">${i18n.i18n.lockedString('Reports')}</div>
         ${this.#reports.length > 0 ? html`
-          <devtools-data-grid-controller .data=${
-              reportsGridData as DataGrid.DataGridController.DataGridControllerData}>
+          <devtools-data-grid-controller .data=${reportsGridData}>
           </devtools-data-grid-controller>
         ` : html`
           <div class="reporting-placeholder">

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

@@ -5,7 +5,6 @@
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
-import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import sharedStorageAccessGridStyles from './sharedStorageAccessGrid.css.js';
@@ -76,12 +75,9 @@ export class SharedStorageAccessGrid extends HTMLElement {
     LitHtml.render(html`
       <div>
         <span class="heading">${i18nString(UIStrings.sharedStorage)}</span>
-        <devtools-icon class="info-icon" title=${
-            i18nString(UIStrings.allSharedStorageEvents)}
-          .data=${
-            {iconName: 'info',
-              color: 'var(--icon-default)', width: '16px'} as
-            IconButton.Icon.IconWithName}>
+        <devtools-icon class="info-icon"
+                       title=${i18nString(UIStrings.allSharedStorageEvents)}
+                       .data=${{iconName: 'info', color: 'var(--icon-default)', width: '16px'}}>
         </devtools-icon>
         ${this.#renderGridOrNoDataMessage()}
       </div>
@@ -146,8 +142,7 @@ export class SharedStorageAccessGrid extends HTMLElement {
     };
 
     return html`
-      <devtools-data-grid-controller .data=${
-        gridData as DataGrid.DataGridController.DataGridControllerData}></devtools-data-grid-controller>
+      <devtools-data-grid-controller .data=${gridData}></devtools-data-grid-controller>
     `;
   }
 

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

@@ -8,7 +8,6 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as Bindings from '../../../models/bindings/bindings.js';
-import type * as ExpandableList from '../../../ui/components/expandable_list/expandable_list.js';
 import * as Components from '../../../ui/legacy/components/utils/utils.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -135,7 +134,6 @@ export class StackTraceLinkButton extends HTMLElement {
 }
 
 export class StackTrace extends HTMLElement {
-
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #linkifier = new Components.Linkifier.Linkifier();
   #stackTraceRows: (Components.JSPresentationUtils.StackTraceRegularRow|
@@ -185,8 +183,9 @@ export class StackTrace extends HTMLElement {
         if ('functionName' in item) {
           expandableRows.push(html`
           <devtools-stack-trace-row data-stack-trace-row .data=${{
-            stackTraceRowItem: item,
-          } as StackTraceRowData}></devtools-stack-trace-row>`);
+            stackTraceRowItem:
+              item,
+          }}></devtools-stack-trace-row>`);
         }
         if ('asyncDescription' in item) {
           expandableRows.push(html`
@@ -202,7 +201,7 @@ export class StackTrace extends HTMLElement {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       expandableRows.push(html`
-      <devtools-stack-trace-link-button data-stack-trace-row .data=${{onShowAllClick: this.#onToggleShowAllClick.bind(this), hiddenCallFramesCount, expandedView: this.#showHidden} as StackTraceLinkButtonData}></devtools-stack-trace-link-button>
+      <devtools-stack-trace-link-button data-stack-trace-row .data=${{onShowAllClick: this.#onToggleShowAllClick.bind(this), hiddenCallFramesCount, expandedView: this.#showHidden}}></devtools-stack-trace-link-button>
       `);
       // clang-format on
     }
@@ -225,10 +224,8 @@ export class StackTrace extends HTMLElement {
     const expandableRows = this.createRowTemplates();
     LitHtml.render(
       html`
-        <devtools-expandable-list .data=${{
-          rows: expandableRows, title: i18nString(UIStrings.creationStackTrace),
-        } as ExpandableList.ExpandableList.ExpandableListData}>
-        jslog=${VisualLogging.tree()}>
+        <devtools-expandable-list .data=${{rows: expandableRows, title: i18nString(UIStrings.creationStackTrace)}}
+                                  jslog=${VisualLogging.tree()}>
         </devtools-expandable-list>
       `,
       this.#shadow, {host: this});

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

@@ -11,7 +11,6 @@ import type * as Protocol from '../../../generated/protocol.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
-import type * as ReportView from '../../../ui/components/report_view/report_view.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
@@ -143,7 +142,7 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       LitHtml.render(html`
-        <devtools-report .data=${{reportTitle: this.getTitle() ?? i18nString(UIStrings.loading)} as ReportView.ReportView.ReportData}>
+        <devtools-report .data=${{reportTitle: this.getTitle() ?? i18nString(UIStrings.loading)}}>
           ${await this.renderReportContent()}
         </devtools-report>`, this.#shadow, {host: this});
       // clang-format on

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

@@ -136,8 +136,7 @@ export class TrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     };
 
     return html`
-      <devtools-data-grid-controller .data=${
-        gridData as DataGrid.DataGridController.DataGridControllerData}></devtools-data-grid-controller>
+      <devtools-data-grid-controller .data=${gridData}></devtools-data-grid-controller>
     `;
   }
 

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

@@ -226,6 +226,7 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
       this.updateRuleSetDetails();
     };
 
+    // clang-format off
     LitHtml.render(
         html`
         <devtools-split-view .horizontal=${true} style="--min-sidebar-size: max(100vh-200px, 0px)">
@@ -245,13 +246,12 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
           .toggleType=${Buttons.Button.ToggleType.PRIMARY}
           .title=${i18nString(UIStrings.prettyPrint)}
           .variant=${Buttons.Button.Variant.ICON_TOGGLE}
-          .size=${Buttons.Button.Size.SMALL}
+          .size=${Buttons.Button.Size.REGULAR}
           @click=${onPrettyPrintToggle}
-          jslog=${VisualLogging.action().track({click: true}).context('preloading-status-panel-pretty-print')}>
-        </devtools-button>
-        </div>
-        `,
+          jslog=${VisualLogging.action().track({click: true}).context('preloading-status-panel-pretty-print')}></devtools-button>
+        </div>`,
         this.contentElement, {host: this});
+    // clang-format on
     this.hsplit = this.contentElement.querySelector('devtools-split-view') as SplitView.SplitView.SplitView;
   }
 

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

@@ -54,8 +54,8 @@ function assertDiff(
   }
 }
 
-const FG_GREEN = 'color: var(--sys-color-green); text-decoration: line-through';
-const FG_RED = 'color: var(--sys-color-error);';
+const FG_GREEN = 'color:var(--sys-color-green);text-decoration:line-through';
+const FG_RED = 'color:var(--sys-color-error);';
 
 describeWithEnvironment('MismatchedPreloadingGrid', () => {
   // Disabled due to flakiness

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

@@ -101,7 +101,6 @@ export interface MismatchedPreloadingGridData {
 
 // Grid component to show prerendering attempts.
 export class MismatchedPreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: MismatchedPreloadingGridData|null = null;
 
@@ -151,14 +150,9 @@ export class MismatchedPreloadingGrid extends LegacyWrapper.LegacyWrapper.Wrappa
       striped: true,
     };
 
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    render(html`
-      <devtools-data-grid-controller .data=${
-        reportsGridData as DataGrid.DataGridController.DataGridControllerData}>
-      </devtools-data-grid-controller>
-    `, this.#shadow, {host: this});
-    // clang-format on
+    render(
+        html`<devtools-data-grid-controller .data=${reportsGridData}></devtools-data-grid-controller>`, this.#shadow,
+        {host: this});
   }
 
   #buildReportRows(): DataGrid.DataGridUtils.Row[] {

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

@@ -15,8 +15,6 @@ import * as Logs from '../../../../models/logs/logs.js';
 import * as Buttons from '../../../../ui/components/buttons/buttons.js';
 import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as Coordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
-import type * as ReportView from '../../../../ui/components/report_view/report_view.js';
-import type * as RequestLinkIcon from '../../../../ui/components/request_link_icon/request_link_icon.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
@@ -132,7 +130,6 @@ interface PreloadingDetailsReportViewDataInternal {
 }
 
 export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: PreloadingDetailsReportViewData = null;
 
@@ -167,7 +164,7 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       LitHtml.render(html`
-        <devtools-report .data=${{reportTitle: 'Speculative Loading Attempt'} as ReportView.ReportView.ReportData}
+        <devtools-report .data=${{reportTitle: 'Speculative Loading Attempt'}}
         jslog=${VisualLogging.section('preloading-details')}>
           <devtools-report-section-header>${i18nString(UIStrings.detailsDetailedInformation)}</devtools-report-section-header>
 
@@ -208,7 +205,7 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
                 requestResolver: this.#data.requestResolver || new Logs.RequestResolver.RequestResolver(),
                 displayURL: true,
                 urlToDisplay: attempt.key.url,
-              } as RequestLinkIcon.RequestLinkIcon.RequestLinkIconData
+              }
             }
           >
           </devtools-request-link-icon>

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

@@ -161,14 +161,14 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
             horizontalAlignment: Dialogs.Dialog.DialogHorizontalAlignment.AUTO,
             closeOnESC: true,
             closeOnScroll: false,
-          } as Dialogs.IconDialog.IconDialogData}
+          }}
           jslog=${VisualLogging.dialog('preloading-disabled').track({resize: true, keydown: 'Escape'})}
         >
           ${this.#dialogContents()}
         </devtools-icon-dialog>
       </div>
     `;
-    // clang-format on
+            // clang-format on
   }
 
   #dialogContents(): LitHtml.LitTemplate {

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

@@ -296,7 +296,7 @@ describeWithEnvironment('PreloadingGrid', () => {
     assert.isNotNull(grid.shadowRoot);
     const cell = getCellByIndexes(grid.shadowRoot, {row: 1, column: 3});
     const div = cell.querySelector('div');
-    assert.strictEqual(div!.getAttribute('style'), 'color: var(--sys-color-error);');
+    assert.strictEqual(div!.getAttribute('style'), 'color:var(--sys-color-error);');
     const icon = div!.children[0];
     assert.include(icon.shadowRoot!.innerHTML, 'cross-circle-filled');
   });

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

@@ -12,7 +12,6 @@ import {assertNotNullOrUndefined} from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
 import type * as DataGrid from '../../../../ui/components/data_grid/data_grid.js';
-import type * as IconButton from '../../../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import type * as UI from '../../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
@@ -114,9 +113,7 @@ export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableCompone
     // clang-format off
     render(html`
       <div class="preloading-container">
-        <devtools-data-grid-controller .data=${
-            reportsGridData as DataGrid.DataGridController.DataGridControllerData}>
-        </devtools-data-grid-controller>
+        <devtools-data-grid-controller .data=${reportsGridData}></devtools-data-grid-controller>
       </div>
     `, this.#shadow, {host: this});
     // clang-format on
@@ -142,7 +139,7 @@ export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableCompone
               color: 'var(--sys-color-error)',
               width: '16px',
               height: '16px',
-            } as IconButton.Icon.IconData}
+            }}
             style=${LitHtml.Directives.styleMap({
               'vertical-align': 'sub',
             })}
@@ -151,7 +148,7 @@ export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableCompone
           ${statusString}
         </div>
       `;
-      // clang-format on
+              // clang-format on
     }
 
     assertNotNullOrUndefined(this.#data);

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

@@ -95,9 +95,7 @@ export class PreloadingMismatchedHeadersGrid extends LegacyWrapper.LegacyWrapper
     // clang-format off
       render(html`
         <div class="preloading-container">
-          <devtools-data-grid-controller .data=${
-              reportsGridData as DataGrid.DataGridController.DataGridControllerData}>
-          </devtools-data-grid-controller>
+          <devtools-data-grid-controller .data=${reportsGridData}></devtools-data-grid-controller>
         </div>
       `, this.#shadow, {host: this});
     // clang-format on

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

@@ -373,6 +373,10 @@ const UIStrings = {
    */
   prerenderFinalStatusAllPrerenderingCanceled:
       'All prerendered pages were unloaded by the browser for some reason (For example, WebViewCompat.addWebMessageListener() was called during prerendering.)',
+  /**
+   * Description text for PrenderFinalStatus::kWindowClosed.
+   */
+  prerenderFinalStatusWindowClosed: 'The prerendered page was unloaded because it called window.close().',
 
   /**
    *@description Text in grid and details: Preloading attempt is not yet triggered.
@@ -680,6 +684,7 @@ export function prerenderFailureReason(attempt: SDK.PreloadingModel.PrerenderAtt
     case Protocol.Preload.PrerenderFinalStatus.AllPrerenderingCanceled:
       return i18nString(UIStrings.prerenderFinalStatusAllPrerenderingCanceled);
     case Protocol.Preload.PrerenderFinalStatus.WindowClosed:
+      return i18nString(UIStrings.prerenderFinalStatusWindowClosed);
     case Protocol.Preload.PrerenderFinalStatus.SlowNetwork:
     case Protocol.Preload.PrerenderFinalStatus.OtherPrerenderedPageActivated:
     case Protocol.Preload.PrerenderFinalStatus.V8OptimizerDisabled: