chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

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;
@@ -1054,14 +1035,14 @@ describeWithMockConnection('SharedStorageItemsView', function() {
     const cellElement = getCellElementFromNodeAndColumnId(view.dataGrid, selectedNode, 'key');
     assert.exists(cellElement);
 
-    // Editing a key will cause `deleteEntry()`, `setEntry()`, `getMetadata()`, and `getEntries()` to be called.
+    // Editing a key will cause `setEntry()`, `getMetadata()`, and `getEntries()` to be called.
     const editedPromise = itemsListener.waitForItemsEditedTotal(1);
     cellElement.textContent = 'key4';
     dispatchKeyDownEvent(cellElement, {key: 'Enter'});
     await raf();
     await editedPromise;
 
-    assert.isTrue(deleteEntrySpy.calledOnceWithExactly({ownerOrigin: TEST_ORIGIN, key: ''}));
+    assert.isTrue(deleteEntrySpy.notCalled);
     assert.isTrue(
         setEntrySpy.calledOnceWithExactly({ownerOrigin: TEST_ORIGIN, key: 'key4', value: '', ignoreIfPresent: false}));
     assert.isTrue(getMetadataSpy.calledThrice);
@@ -1071,7 +1052,7 @@ describeWithMockConnection('SharedStorageItemsView', function() {
 
     assert.deepEqual(view.getEntriesForTesting(), ENTRIES_NEW_KEY);
     assert.deepEqual(itemsListener.editedEvents, [
-      {columnIdentifier: 'key', oldText: '', newText: 'key4'} as View.SharedStorageItemsDispatcher.ItemEditedEvent,
+      {columnIdentifier: 'key', oldText: null, newText: 'key4'},
     ]);
 
     // Verify that the preview loads.

package/front_end/panels/application/SharedStorageItemsView.ts

@@ -87,7 +87,7 @@ export namespace SharedStorageItemsDispatcher {
 
   export interface ItemEditedEvent {
     columnIdentifier: string;
-    oldText: string;
+    oldText: string|null;
     newText: string;
   }
 
@@ -241,7 +241,7 @@ export class SharedStorageItemsView extends StorageItemsView {
 
   async #editingCallback(
       editingNode: DataGrid.DataGrid.DataGridNode<Protocol.Storage.SharedStorageEntry>, columnIdentifier: string,
-      oldText: string, newText: string): Promise<void> {
+      oldText: string|null, newText: string): Promise<void> {
     if (columnIdentifier === 'key' && newText === '') {
       // The Shared Storage backend does not currently allow '' as a key, so we only set a new entry with a new key if its new key is nonempty.
       await this.refreshItems();
@@ -249,7 +249,9 @@ export class SharedStorageItemsView extends StorageItemsView {
       return;
     }
     if (columnIdentifier === 'key') {
-      await this.#sharedStorage.deleteEntry(oldText);
+      if (oldText !== null) {
+        await this.#sharedStorage.deleteEntry(oldText);
+      }
       await this.#sharedStorage.setEntry(newText, editingNode.data.value || '', false);
     } else {
       // The Shared Storage backend does not currently allow '' as a key, so we use ' ' as the default key instead.

package/front_end/panels/application/StorageView.ts

@@ -507,8 +507,8 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
       return;
     }
     const quotaOverridden = response.overrideActive;
-    const quotaAsString = Platform.NumberUtilities.bytesToString(response.quota);
-    const usageAsString = Platform.NumberUtilities.bytesToString(response.usage);
+    const quotaAsString = i18n.ByteUtilities.bytesToString(response.quota);
+    const usageAsString = i18n.ByteUtilities.bytesToString(response.usage);
     const formattedQuotaAsString = i18nString(UIStrings.storageWithCustomMarker, {PH1: quotaAsString});
     const quota =
         quotaOverridden ? UI.Fragment.Fragment.build`<b>${formattedQuotaAsString}</b>`.element() : quotaAsString;
@@ -550,7 +550,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
     this.pieChart.data = {
       chartName: i18nString(UIStrings.storageUsage),
       size: 110,
-      formatter: Platform.NumberUtilities.bytesToString,
+      formatter: i18n.ByteUtilities.bytesToString,
       showLegend: true,
       total,
       slices,

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

@@ -5,13 +5,11 @@
 import '../../../ui/components/report_view/report_view.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as Platform from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 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 +141,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
@@ -217,7 +215,7 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
       ${this.key(i18nString(UIStrings.durability))}
       ${this.value(durability)}
       ${this.key(i18nString(UIStrings.quota))}
-      ${this.value(Platform.NumberUtilities.bytesToString(quota))}
+      ${this.value(i18n.ByteUtilities.bytesToString(quota))}
       ${this.key(i18nString(UIStrings.expiration))}
       ${this.value(this.#getExpirationString())}`;
   }

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 {