chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

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

@@ -2,6 +2,9 @@
 // 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/request_link_icon/request_link_icon.js';
+
 import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as Platform from '../../../../core/platform/platform.js';
@@ -12,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 * as ReportView from '../../../../ui/components/report_view/report_view.js';
-import * 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';
@@ -23,6 +24,8 @@ import preloadingDetailsReportViewStyles from './preloadingDetailsReportView.css
 import * as PreloadingString from './PreloadingString.js';
 import {prefetchFailureReason, prerenderFailureReason, ruleSetLocationShort} from './PreloadingString.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Text in PreloadingDetailsReportView of the Application panel
@@ -127,8 +130,6 @@ interface PreloadingDetailsReportViewDataInternal {
 }
 
 export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-  static readonly litTagName = LitHtml.literal`devtools-resources-preloading-details-report-view`;
-
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: PreloadingDetailsReportViewData = null;
 
@@ -146,7 +147,7 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
       if (this.#data === null) {
         // Disabled until https://crbug.com/1079231 is fixed.
         // clang-format off
-        LitHtml.render(LitHtml.html`
+        LitHtml.render(html`
           <div class="preloading-noselected">
             <div>
               <p>${i18nString(UIStrings.selectAnElementForMoreDetails)}</p>
@@ -162,26 +163,24 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
 
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      LitHtml.render(LitHtml.html`
-        <${ReportView.ReportView.Report.litTagName} .data=${{reportTitle: 'Speculative Loading Attempt'} as ReportView.ReportView.ReportData}
+      LitHtml.render(html`
+        <devtools-report .data=${{reportTitle: 'Speculative Loading Attempt'}}
         jslog=${VisualLogging.section('preloading-details')}>
-          <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18nString(UIStrings.detailsDetailedInformation)}</${
-            ReportView.ReportView.ReportSectionHeader.litTagName}>
+          <devtools-report-section-header>${i18nString(UIStrings.detailsDetailedInformation)}</devtools-report-section-header>
 
           ${this.#url()}
           ${this.#action()}
 
-          <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.detailsStatus)}</${
-            ReportView.ReportView.ReportKey.litTagName}>
-          <${ReportView.ReportView.ReportValue.litTagName}>
+          <devtools-report-key>${i18nString(UIStrings.detailsStatus)}</devtools-report-key>
+          <devtools-report-value>
             ${detailedStatus}
-          </${ReportView.ReportView.ReportValue.litTagName}>
+          </devtools-report-value>
 
           ${this.#maybePrefetchFailureReason()}
           ${this.#maybePrerenderFailureReason()}
 
           ${this.#data.ruleSets.map(ruleSet => this.#renderRuleSet(ruleSet, pageURL))}
-        </${ReportView.ReportView.Report.litTagName}>
+        </devtools-report>
       `, this.#shadow, {host: this});
       // clang-format on
     });
@@ -195,8 +194,8 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
     if (attempt.action === Protocol.Preload.SpeculationAction.Prefetch && attempt.requestId !== undefined) {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      value = LitHtml.html`
-          <${RequestLinkIcon.RequestLinkIcon.RequestLinkIcon.litTagName}
+      value = html`
+          <devtools-request-link-icon
             .data=${
               {
                 affectedRequest: {
@@ -206,15 +205,15 @@ 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
+              }
             }
           >
-          </${RequestLinkIcon.RequestLinkIcon.RequestLinkIcon.litTagName}>
+          </devtools-request-link-icon>
       `;
     } else {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      value = LitHtml.html`
+      value = html`
           <div class="text-ellipsis" title=${attempt.key.url}>${attempt.key.url}</div>
       `;
       // clang-format on
@@ -222,12 +221,11 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
-        <${ReportView.ReportView.ReportKey.litTagName}>${i18n.i18n.lockedString('URL')}</${
-          ReportView.ReportView.ReportKey.litTagName}>
-        <${ReportView.ReportView.ReportValue.litTagName}>
+    return html`
+        <devtools-report-key>${i18n.i18n.lockedString('URL')}</devtools-report-key>
+        <devtools-report-value>
           ${value}
-        </${ReportView.ReportView.ReportValue.litTagName}>
+        </devtools-report-value>
     `;
     // clang-format on
   }
@@ -261,8 +259,8 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
       };
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      maybeInspectButton = LitHtml.html`
-          <${Buttons.Button.Button.litTagName}
+      maybeInspectButton = html`
+          <devtools-button
             @click=${inspect}
             .title=${i18nString(UIStrings.buttonClickToInspect)}
             .size=${Buttons.Button.Size.SMALL}
@@ -271,22 +269,21 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
             jslog=${VisualLogging.action('inspect-prerendered-page').track({click: true})}
           >
             ${i18nString(UIStrings.buttonInspect)}
-          </${Buttons.Button.Button.litTagName}>
+          </devtools-button>
       `;
       // clang-format on
     })();
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
-        <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.detailsAction)}</${
-          ReportView.ReportView.ReportKey.litTagName}>
-        <${ReportView.ReportView.ReportValue.litTagName}>
+    return html`
+        <devtools-report-key>${i18nString(UIStrings.detailsAction)}</devtools-report-key>
+        <devtools-report-value>
           <div class="text-ellipsis" title="">
             ${action}
             ${maybeInspectButton}
           </div>
-        </${ReportView.ReportView.ReportValue.litTagName}>
+        </devtools-report-value>
     `;
     // clang-format on
   }
@@ -304,12 +301,11 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
       return LitHtml.nothing;
     }
 
-    return LitHtml.html`
-        <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.detailsFailureReason)}</${
-        ReportView.ReportView.ReportKey.litTagName}>
-        <${ReportView.ReportView.ReportValue.litTagName}>
+    return html`
+        <devtools-report-key>${i18nString(UIStrings.detailsFailureReason)}</devtools-report-key>
+        <devtools-report-value>
           ${failureDescription}
-        </${ReportView.ReportView.ReportValue.litTagName}>
+        </devtools-report-value>
     `;
   }
 
@@ -326,12 +322,11 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
       return LitHtml.nothing;
     }
 
-    return LitHtml.html`
-        <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.detailsFailureReason)}</${
-        ReportView.ReportView.ReportKey.litTagName}>
-        <${ReportView.ReportView.ReportValue.litTagName}>
+    return html`
+        <devtools-report-key>${i18nString(UIStrings.detailsFailureReason)}</devtools-report-key>
+        <devtools-report-value>
           ${failureReason}
-        </${ReportView.ReportView.ReportValue.litTagName}>
+        </devtools-report-value>
     `;
   }
 
@@ -343,10 +338,9 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
-      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.detailsRuleSet)}</${
-        ReportView.ReportView.ReportKey.litTagName}>
-      <${ReportView.ReportView.ReportValue.litTagName}>
+    return html`
+      <devtools-report-key>${i18nString(UIStrings.detailsRuleSet)}</devtools-report-key>
+      <devtools-report-value>
         <div class="text-ellipsis" title="">
           <button class="link" role="link"
             @click=${revealRuleSetView}
@@ -360,7 +354,7 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
             ${location}
           </button>
         </div>
-      </${ReportView.ReportView.ReportValue.litTagName}>
+      </devtools-report-value>
     `;
     // clang-format on
   }

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

@@ -2,6 +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 * as i18n from '../../../../core/i18n/i18n.js';
 import type * as Platform from '../../../../core/platform/platform.js';
 import type * as Protocol from '../../../../generated/protocol.js';
@@ -10,13 +12,14 @@ import * as Dialogs from '../../../../ui/components/dialogs/dialogs.js';
 import * as IconButton from '../../../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as Coordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
-import * 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';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 
 import preloadingDisabledInfobarStyles from './preloadingDisabledInfobar.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Infobar text for disabled case
@@ -96,7 +99,6 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-  static readonly litTagName = LitHtml.literal`devtools-resources-preloading-disabled-infobar`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: Protocol.Preload.PreloadEnabledStateUpdatedEvent = {
@@ -140,13 +142,13 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
+    return html`
       <div id='container'>
         <span id='header'>
           ${header}
         </span>
 
-        <${Dialogs.IconDialog.IconDialog.litTagName}
+        <devtools-icon-dialog
           .data=${{
             iconData: {
               iconName: 'info',
@@ -159,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()}
-        </${Dialogs.IconDialog.IconDialog.litTagName}>
+        </devtools-icon-dialog>
       </div>
     `;
-    // clang-format on
+            // clang-format on
   }
 
   #dialogContents(): LitHtml.LitTemplate {
@@ -182,20 +184,20 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
         .data = {iconName: 'open-externally', color: 'var(--icon-default-hover)', width: '16px', height: '16px'};
     iconLink.append(iconLinkIcon);
 
-    return LitHtml.html`
+    return html`
       <div id='contents'>
         <div id='title'>${i18nString(UIStrings.titleReasonsPreventingPreloading)}</div>
 
-        <${ReportView.ReportView.Report.litTagName}>
+        <devtools-report>
           ${this.#maybeDisalebByPreference()}
           ${this.#maybeDisalebByDataSaver()}
           ${this.#maybeDisalebByBatterySaver()}
           ${this.#maybeDisalebByHoldbackPrefetchSpeculationRules()}
           ${this.#maybeDisalebByHoldbackPrerenderSpeculationRules()}
 
-          <${ReportView.ReportView.ReportSectionDivider.litTagName}>
-          </${ReportView.ReportView.ReportSectionDivider.litTagName}>
-        </${ReportView.ReportView.Report.litTagName}>
+          <devtools-report-divider>
+          </devtools-report-divider>
+        </devtools-report>
 
         <div id='footer'>
           ${learnMoreLink}
@@ -210,7 +212,7 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
       return LitHtml.nothing;
     }
 
-    return LitHtml.html`
+    return html`
       <div class='key'>
         ${header}
       </div>

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

@@ -2,14 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../../ui/components/data_grid/data_grid.js';
+import '../../../../ui/components/icon_button/icon_button.js';
+
 import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 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 type * as Protocol from '../../../../generated/protocol.js';
-import * as DataGrid from '../../../../ui/components/data_grid/data_grid.js';
-import * as IconButton from '../../../../ui/components/icon_button/icon_button.js';
+import type * as DataGrid from '../../../../ui/components/data_grid/data_grid.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';
@@ -49,7 +51,6 @@ export interface PreloadingGridRow {
 
 // Grid component to show prerendering attempts.
 export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-  static readonly litTagName = LitHtml.literal`devtools-resources-preloading-grid`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: PreloadingGridData|null = null;
@@ -112,9 +113,7 @@ export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableCompone
     // clang-format off
     render(html`
       <div class="preloading-container">
-        <${DataGrid.DataGridController.DataGridController.litTagName} .data=${
-            reportsGridData as DataGrid.DataGridController.DataGridControllerData}>
-        </${DataGrid.DataGridController.DataGridController.litTagName}>
+        <devtools-data-grid-controller .data=${reportsGridData}></devtools-data-grid-controller>
       </div>
     `, this.#shadow, {host: this});
     // clang-format on
@@ -123,33 +122,33 @@ export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableCompone
   #buildReportRows(): DataGrid.DataGridUtils.Row[] {
     function statusRenderer(statusString: string, status: SDK.PreloadingModel.PreloadingStatus): LitHtml.LitTemplate {
       if (status !== SDK.PreloadingModel.PreloadingStatus.FAILURE) {
-        return LitHtml.html`<div>${statusString}</div>`;
+        return html`<div>${statusString}</div>`;
       }
 
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      return LitHtml.html`
+      return html`
         <div
           style=${LitHtml.Directives.styleMap({
             color: 'var(--sys-color-error)',
           })}
         >
-          <${IconButton.Icon.Icon.litTagName}
+          <devtools-icon
             .data=${{
               iconName: 'cross-circle-filled',
               color: 'var(--sys-color-error)',
               width: '16px',
               height: '16px',
-            } as IconButton.Icon.IconData}
+            }}
             style=${LitHtml.Directives.styleMap({
               'vertical-align': 'sub',
             })}
           >
-          </${IconButton.Icon.Icon.litTagName}>
+          </devtools-icon>
           ${statusString}
         </div>
       `;
-      // clang-format on
+              // clang-format on
     }
 
     assertNotNullOrUndefined(this.#data);

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

@@ -2,10 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../../ui/components/data_grid/data_grid.js';
+
 import * as i18n from '../../../../core/i18n/i18n.js';
 import {assertNotNullOrUndefined} from '../../../../core/platform/platform.js';
 import type * as SDK from '../../../../core/sdk/sdk.js';
-import * as DataGrid from '../../../../ui/components/data_grid/data_grid.js';
+import type * as DataGrid from '../../../../ui/components/data_grid/data_grid.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';
@@ -37,7 +39,6 @@ export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {render, html} = LitHtml;
 
 export class PreloadingMismatchedHeadersGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-  static readonly litTagName = LitHtml.literal`devtools-resources-preloading-mismatched-headers-grid`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: SDK.PreloadingModel.PrerenderAttempt|null = null;
@@ -94,9 +95,7 @@ export class PreloadingMismatchedHeadersGrid extends LegacyWrapper.LegacyWrapper
     // clang-format off
       render(html`
         <div class="preloading-container">
-          <${DataGrid.DataGridController.DataGridController.litTagName} .data=${
-              reportsGridData as DataGrid.DataGridController.DataGridControllerData}>
-          </${DataGrid.DataGridController.DataGridController.litTagName}>
+          <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,8 +684,11 @@ 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:
+    case Protocol.Preload.PrerenderFinalStatus.PrerenderFailedDuringPrefetch:
       // TODO(crbug.com/350870118): Add message for this.
       return '';
     default:

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

@@ -8,7 +8,6 @@ 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 IconButton from '../../../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as Coordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
 import * as TextEditor from '../../../../ui/components/text_editor/text_editor.js';
@@ -17,6 +16,8 @@ import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 
 import ruleSetDetailsViewStyles from './RuleSetDetailsView.css.js';
 
+const {html} = LitHtml;
+
 type RuleSet = Protocol.Preload.RuleSet;
 
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
@@ -54,7 +55,7 @@ export class RuleSetDetailsView extends LegacyWrapper.LegacyWrapper.WrappableCom
 
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      LitHtml.render(LitHtml.html`
+      LitHtml.render(html`
         <div class="content">
           <div class="ruleset-header" id="ruleset-url">${this.#data?.url || SDK.TargetManager.TargetManager.instance().inspectedURL()}</div>
           ${this.#maybeError()}
@@ -77,20 +78,20 @@ export class RuleSetDetailsView extends LegacyWrapper.LegacyWrapper.WrappableCom
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
+    return html`
       <div class="ruleset-header">
-        <${IconButton.Icon.Icon.litTagName}
+        <devtools-icon
           .data=${{
             iconName: 'cross-circle',
             color: 'var(--icon-error)',
             width: '16px',
             height: '16px',
-          } as IconButton.Icon.IconData}>
-        </${IconButton.Icon.Icon.litTagName}>
+          }}>
+        </devtools-icon>
         <span id="error-message-text">${this.#data.errorMessage}</span>
       </div>
     `;
-    // clang-format on
+            // clang-format on
   }
 
   #renderSource(sourceText: string): LitHtml.LitTemplate {
@@ -107,10 +108,10 @@ export class RuleSetDetailsView extends LegacyWrapper.LegacyWrapper.WrappableCom
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     // TODO(https://crbug.com/1425354): Add Raw button.
-    return LitHtml.html`
-      <${TextEditor.TextEditor.TextEditor.litTagName} .style.flexGrow = '1' .state=${
+    return html`
+      <devtools-text-editor .style.flexGrow=${'1'} .state=${
         this.#editorState
-      }></${TextEditor.TextEditor.TextEditor.litTagName}>
+      }></devtools-text-editor>
     `;
     // clang-format on
   }