[cleanup] Remove several unnnecessary foo as FooData casts.

This removes most unnecessary `foo as FooData` casts that we previously
enforced for `.data=${...}` assignments in lit-html templates. These
casts in this CL were 100% redundant and didn't hide any typing bugs.
There's another set of casts that were hiding potential bugs, and that
will be addressed in a separate CL.

Bug: 375114000
Change-Id: I4fa89a802e4f7880fbd47073c8b077adecdf5d5c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5956835
Auto-Submit: Benedikt Meurer <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>

Author: bmeurer

extensions/cxx_debugging/src/ExtensionOptions.ts

@@ -6,15 +6,16 @@
 /* eslint-disable rulesdir/inject_checkbox_styles */
 /* eslint-disable rulesdir/lit_html_host_this */
 
+import './CreditsItem.js';
+import './ModuleConfigurationList.js';
+
 import {html, render} from 'lit-html';
 import {until} from 'lit-html/directives/until.js';  // eslint-disable-line rulesdir/es_modules_import
 
 import {type CreditsItemData} from './CreditsItem.js';
-import './CreditsItem.js';
-import {type ModuleConfigurationsChangedEvent} from './ModuleConfigurationList.js';
-import './ModuleConfigurationList.js';
-import {DEFAULT_MODULE_CONFIGURATIONS} from './ModuleConfiguration.js';
 import {type Storage} from './DevToolsPluginHost.js';
+import {DEFAULT_MODULE_CONFIGURATIONS} from './ModuleConfiguration.js';
+import {type ModuleConfigurationsChangedEvent} from './ModuleConfigurationList.js';
 
 const CREDITS_ITEMS: CreditsItemData[] = [
   {
@@ -697,8 +698,7 @@ export class ExtensionOptions extends HTMLElement {
 
     <h2>Credits</h2>
     <div>${CREDITS_ITEMS.map(data => {
-      return html`<devtools-cxx-debugging-credits-item .data=${
-          data as CreditsItemData}></devtools-cxx-debugging-credits-item>`;
+      return html`<devtools-cxx-debugging-credits-item .data=${data}></devtools-cxx-debugging-credits-item>`;
     })}</div>`;
     render(output, this.shadow, {
       eventContext: this,

extensions/cxx_debugging/tests/CreditsItem_test.ts

@@ -31,8 +31,8 @@ describe('CreditsItem', () => {
       homepage: 'https://www.example.com',
       license: 'Do whatever you want!'
     };
-    const el = await createItem(html`<devtools-cxx-debugging-credits-item .data=${
-        data as CreditsItemData}></devtools-cxx-debugging-credits-item>`);
+    const el = await createItem(
+        html`<devtools-cxx-debugging-credits-item .data=${data}></devtools-cxx-debugging-credits-item>`);
     expect(el.data).to.equal(data);
 
     el.data = {title: 'title', homepage: 'homepage', license: 'license'};
@@ -43,8 +43,8 @@ describe('CreditsItem', () => {
 
   it('renders title and homepage correctly', async () => {
     const data: CreditsItemData = {title: 'My project', homepage: 'https://www.example.com', license: '3-BSD License'};
-    const el = await createItem(html`<devtools-cxx-debugging-credits-item .data=${
-        data as CreditsItemData}></devtools-cxx-debugging-credits-item>`);
+    const el = await createItem(
+        html`<devtools-cxx-debugging-credits-item .data=${data}></devtools-cxx-debugging-credits-item>`);
     expect(el.shadowRoot?.querySelector('.title')?.textContent).to.eql(data.title);
     expect(el.shadowRoot?.querySelector('a')?.getAttribute('href')).to.eql(data.homepage);
   });

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>
     `;

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">

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>
     `;
   }
 

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`

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">

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>
     `;
   }
 

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});

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