[unified-css] Migrate several front_end/panels/ source files.

Bug: 391381439
Change-Id: I9359f654fbb8fe3b2d136fbc68876ad507107fe7
Fixed: 404268539, 404268020
Fixed: 404268162, 404267926, 404267831
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6449568
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Benedikt Meurer <[email protected]>
Auto-Submit: Benedikt Meurer <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>

Author: bmeurer

front_end/panels/autofill/AutofillView.ts

@@ -1,7 +1,7 @@
 // Copyright 2023 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable rulesdir/no-lit-render-outside-of-view */
+/* eslint-disable rulesdir/no-lit-render-outside-of-view, rulesdir/inject-checkbox-styles */
 
 import '../../ui/components/adorners/adorners.js';
 import '../../ui/legacy/components/data_grid/data_grid.js';
@@ -17,19 +17,11 @@ import * as Input from '../../ui/components/input/input.js';
 import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 // inspectorCommonStyles is imported for the empty state styling that is used for the start view
 // eslint-disable-next-line rulesdir/es-modules-import
-import inspectorCommonStylesRaw from '../../ui/legacy/inspectorCommon.css.js';
+import inspectorCommonStyles from '../../ui/legacy/inspectorCommon.css.js';
 import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import autofillViewStylesRaw from './autofillView.css.js';
-
-// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
-const autofillViewStyles = new CSSStyleSheet();
-autofillViewStyles.replaceSync(autofillViewStylesRaw.cssText);
-
-// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
-const inspectorCommonStyles = new CSSStyleSheet();
-inspectorCommonStyles.replaceSync(inspectorCommonStylesRaw.cssText);
+import autofillViewStyles from './autofillView.css.js';
 
 const {html, render, Directives: {styleMap}} = Lit;
 const {FillingStrategy} = Protocol.Autofill;
@@ -135,7 +127,6 @@ export class AutofillView extends LegacyWrapper.LegacyWrapper.WrappableComponent
   }
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [Input.checkboxStyles, autofillViewStyles, inspectorCommonStyles];
     const autofillManager = AutofillManager.AutofillManager.AutofillManager.instance();
     const formFilledEvent = autofillManager.getLastFilledAddressForm();
     if (formFilledEvent) {
@@ -183,6 +174,9 @@ export class AutofillView extends LegacyWrapper.LegacyWrapper.WrappableComponent
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       render(html`
+        <style>${Input.checkboxStylesRaw}</style>
+        <style>${autofillViewStyles.cssText}</style>
+        <style>${inspectorCommonStyles.cssText}</style>
         <main>
           <div class="top-left-corner">
             <label class="checkbox-label" title=${i18nString(UIStrings.showTestAddressesInAutofillMenu)}>
@@ -221,6 +215,9 @@ export class AutofillView extends LegacyWrapper.LegacyWrapper.WrappableComponent
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
+      <style>${Input.checkboxStylesRaw}</style>
+      <style>${autofillViewStyles.cssText}</style>
+      <style>${inspectorCommonStyles.cssText}</style>
       <main>
         <div class="content-container" jslog=${VisualLogging.pane('autofill')}>
           <div class="right-to-left" role="region" aria-label=${i18nString(UIStrings.addressPreview)}>

front_end/panels/css_overview/components/CSSOverviewStartView.ts

@@ -11,11 +11,7 @@ import type * as Platform from '../../../core/platform/platform.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import {html, render} from '../../../ui/lit/lit.js';
 
-import cssOverviewStartViewStylesRaw from './cssOverviewStartView.css.js';
-
-// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
-const cssOverviewStartViewStyles = new CSSStyleSheet();
-cssOverviewStartViewStyles.replaceSync(cssOverviewStartViewStylesRaw.cssText);
+import cssOverviewStartViewStyles from './cssOverviewStartView.css.js';
 
 const UIStrings = {
   /**
@@ -61,7 +57,6 @@ export class CSSOverviewStartView extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [cssOverviewStartViewStyles];
     this.#render();
   }
 
@@ -81,6 +76,7 @@ export class CSSOverviewStartView extends HTMLElement {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
+      <style>${cssOverviewStartViewStyles.cssText}</style>
       <div class="css-overview-start-view">
         <devtools-panel-introduction-steps>
           <span slot="title">${i18nString(UIStrings.identifyCSSImprovements)}</span>

front_end/panels/explain/components/ConsoleInsight.ts

@@ -21,16 +21,8 @@ import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import {type PromptBuilder, type Source, SourceType} from '../PromptBuilder.js';
 
-import stylesRaw from './consoleInsight.css.js';
-import listStylesRaw from './consoleInsightSourcesList.css.js';
-
-// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
-const styles = new CSSStyleSheet();
-styles.replaceSync(stylesRaw.cssText);
-
-// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
-const listStyles = new CSSStyleSheet();
-listStyles.replaceSync(listStylesRaw.cssText);
+import styles from './consoleInsight.css.js';
+import listStyles from './consoleInsightSourcesList.css.js';
 
 // Note: privacy and legal notices are not localized so far.
 const UIStrings = {
@@ -383,7 +375,6 @@ export class ConsoleInsight extends HTMLElement {
   }
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [styles, Input.checkboxStyles];
     this.classList.add('opening');
     this.#consoleInsightsEnabledSetting?.addChangeListener(this.#onConsoleInsightsSettingChanged, this);
     const blockedByAge = Root.Runtime.hostConfig.aidaAvailability?.blockedByAge === true;
@@ -1131,6 +1122,8 @@ export class ConsoleInsight extends HTMLElement {
   #render(): void {
     // clang-format off
     render(html`
+      <style>${styles.cssText}</style>
+      <style>${Input.checkboxStylesRaw.cssText}</style>
       <div class="wrapper" jslog=${VisualLogging.pane('console-insights').track({resize: true})}>
         <div class="animation-wrapper">
           ${this.#renderHeader()}
@@ -1156,12 +1149,13 @@ class ConsoleInsightSourcesList extends HTMLElement {
 
   constructor() {
     super();
-    this.#shadow.adoptedStyleSheets = [listStyles, Input.checkboxStyles];
   }
 
   #render(): void {
     // clang-format off
      render(html`
+      <style>${listStyles.cssText}</style>
+      <style>${Input.checkboxStylesRaw.cssText}</style>
       <ul>
         ${Directives.repeat(this.#sources, item => item.value, item => {
           return html`<li><x-link class="link" title="${localizeType(item.type)} ${i18nString(UIStrings.opensInNewTab)}" href="data:text/plain,${encodeURIComponent(item.value)}" jslog=${VisualLogging.link('source-' + item.type).track({click: true})}>

front_end/panels/sources/components/BreakpointsView.ts

@@ -22,13 +22,9 @@ import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
-import breakpointsViewStylesRaw from './breakpointsView.css.js';
+import breakpointsViewStyles from './breakpointsView.css.js';
 import {findNextNodeForKeyboardNavigation, getDifferentiatingPathMap, type TitleInfo} from './BreakpointsViewUtils.js';
 
-// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
-const breakpointsViewStyles = new CSSStyleSheet();
-breakpointsViewStyles.replaceSync(breakpointsViewStylesRaw.cssText);
-
 const {html, Directives: {ifDefined, repeat, classMap, live}} = Lit;
 
 const UIStrings = {
@@ -566,10 +562,6 @@ export class BreakpointsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     void this.render();
   }
 
-  connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [Input.checkboxStyles, breakpointsViewStyles];
-  }
-
   override async render(): Promise<void> {
     await RenderCoordinator.write('BreakpointsView render', () => {
       const clickHandler = async(event: Event): Promise<void> => {
@@ -583,6 +575,8 @@ export class BreakpointsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
       const pauseOnCaughtExceptionIsDisabled = !this.#independentPauseToggles && !this.#pauseOnUncaughtExceptions;
       // clang-format off
       const out = html`
+        <style>${Input.checkboxStylesRaw}</style>
+        <style>${breakpointsViewStyles.cssText}</style>
         <div class='pause-on-uncaught-exceptions'
             tabindex='0'
             @click=${clickHandler}

front_end/panels/sources/components/HeadersView.ts

@@ -15,11 +15,7 @@ import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
-import HeadersViewStylesRaw from './HeadersView.css.js';
-
-// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
-const HeadersViewStyles = new CSSStyleSheet();
-HeadersViewStyles.replaceSync(HeadersViewStylesRaw.cssText);
+import headersViewStyles from './HeadersView.css.js';
 
 const {html} = Lit;
 
@@ -150,10 +146,6 @@ export class HeadersViewComponent extends HTMLElement {
     this.addEventListener('contextmenu', this.#onContextMenu.bind(this));
   }
 
-  connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [HeadersViewStyles];
-  }
-
   set data(data: HeadersViewComponentData) {
     this.#headerOverrides = data.headerOverrides;
     this.#uiSourceCode = data.uiSourceCode;
@@ -350,6 +342,7 @@ export class HeadersViewComponent extends HTMLElement {
       const fileName = this.#uiSourceCode?.name() || '.headers';
       // clang-format off
       Lit.render(html`
+        <style>${headersViewStyles.cssText}</style>
         <div class="center-wrapper">
           <div class="centered">
             <div class="error-header">${i18nString(UIStrings.errorWhenParsing, {PH1: fileName})}</div>
@@ -363,6 +356,7 @@ export class HeadersViewComponent extends HTMLElement {
 
     // clang-format off
     Lit.render(html`
+      <style>${headersViewStyles.cssText}</style>
       ${this.#headerOverrides.map((headerOverride, blockIndex) =>
         html`
           ${this.#renderApplyToRow(headerOverride.applyTo, blockIndex)}