[unified-css] Migrate icon_button component.

Now that we have an agreement on how to proceed with the CSS in the
front-end, migrate the `icon_button` component as the first guinea
pig, and remove the offending ESLint rule.

Bug: 391381439
Change-Id: Ie996db09fcf9dfc329206f62b136fad62583b730
Doc: https://goo.gle/devtools-unified-css-design
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6216261
Commit-Queue: Benedikt Meurer <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>
Auto-Submit: Benedikt Meurer <[email protected]>

Author: bmeurer

config/gni/devtools_grd_files.gni

@@ -2234,9 +2234,9 @@ grd_files_debug_sources = [
   "front_end/ui/components/icon_button/FileSourceIcon.js",
   "front_end/ui/components/icon_button/Icon.js",
   "front_end/ui/components/icon_button/IconButton.js",
-  "front_end/ui/components/icon_button/fileSourceIcon.css.js",
-  "front_end/ui/components/icon_button/icon.css.js",
-  "front_end/ui/components/icon_button/iconButton.css.js",
+  "front_end/ui/components/icon_button/fileSourceIcon.css.legacy.js",
+  "front_end/ui/components/icon_button/icon.css.legacy.js",
+  "front_end/ui/components/icon_button/iconButton.css.legacy.js",
   "front_end/ui/components/input/checkbox.css.js",
   "front_end/ui/components/input/textInput.css.js",
   "front_end/ui/components/issue_counter/IssueCounter.js",

eslint.config.mjs

@@ -281,11 +281,11 @@ export default [
       parserOptions: {
         allowAutomaticSingleRunInference: true,
         project: join(
-          import.meta.dirname,
-          'config',
-          'typescript',
-          'tsconfig.eslint.json',
-        ),
+            import.meta.dirname,
+            'config',
+            'typescript',
+            'tsconfig.eslint.json',
+            ),
       },
     },
 
@@ -474,12 +474,12 @@ export default [
         {
           // Enforce that any import of models/trace/trace.js names the import Trace.
           modulePath: join(
-            import.meta.dirname,
-            'front_end',
-            'models',
-            'trace',
-            'trace.js',
-          ),
+              import.meta.dirname,
+              'front_end',
+              'models',
+              'trace',
+              'trace.js',
+              ),
           importName: 'Trace',
         },
       ],
@@ -530,7 +530,6 @@ export default [
       'rulesdir/no-bound-component-methods': 'error',
       'rulesdir/no-customized-builtin-elements': 'error',
       'rulesdir/no-self-closing-custom-element-tagnames': 'error',
-      'rulesdir/no-style-tags-in-lit': 'error',
       'rulesdir/no-a-tags-in-lit': 'error',
       'rulesdir/check-css-import': 'error',
       'rulesdir/enforce-optional-properties-last': 'error',
@@ -685,7 +684,6 @@ export default [
       // anything, so we leave return types to the developer within the
       // component_docs folder.
       '@typescript-eslint/explicit-function-return-type': 'off',
-      'rulesdir/no-style-tags-in-lit': 'off',
       // We use Lit to help render examples sometimes and we don't use
       // {host: this} as often the `this` is the window.
       'rulesdir/lit-host-this': 'off',

front_end/panels/emulation/components/DeviceSizeInputElement.ts

@@ -61,7 +61,6 @@ export class SizeInputElement extends HTMLElement {
         // For now, use an inline style tag and later we can refactor this
         // to use proper constructed stylesheets, when the code runs
         // in the correct frame context.
-        // eslint-disable-next-line rulesdir/no-style-tags-in-lit
         html`
       <style>
         input {

front_end/ui/components/icon_button/BUILD.gn

@@ -11,12 +11,11 @@ import("../visibility.gni")
 generate_css("css_files") {
   sources = [
     "fileSourceIcon.css",
+    "icon.css",
     "iconButton.css",
   ]
-}
 
-generate_css("legacy_css_files") {
-  sources = [ "icon.css" ]
+  legacy = true
 }
 
 devtools_module("icon_button") {
@@ -38,7 +37,6 @@ devtools_entrypoint("bundle") {
   deps = [
     ":css_files",
     ":icon_button",
-    ":legacy_css_files",
   ]
 
   visibility = [

front_end/ui/components/icon_button/FileSourceIcon.ts

@@ -4,7 +4,7 @@
 
 import * as Lit from '../../lit/lit.js';
 
-import styles from './fileSourceIcon.css.js';
+import fileSourceIconStyles from './fileSourceIcon.css.legacy.js';
 import {create} from './Icon.js';
 
 const {html} = Lit;
@@ -44,7 +44,6 @@ export class FileSourceIcon extends HTMLElement {
   }
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [styles];
     this.#render();
   }
 
@@ -59,7 +58,9 @@ export class FileSourceIcon extends HTMLElement {
     const icon = create(this.#iconType, iconStyles.join(' '));
 
     // clang-format off
-    Lit.render(html`${icon}`, this.#shadow, {
+    Lit.render(
+      html`<style>${fileSourceIconStyles.cssContent}</style>${icon}`,
+      this.#shadow, {
       host: this,
     });
     // clang-format on

front_end/ui/components/icon_button/Icon.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import iconStyles from './icon.css.js';
+import iconStyles from './icon.css.legacy.js';
 
 /**
  * @deprecated
@@ -72,13 +72,11 @@ export class Icon extends HTMLElement {
   constructor() {
     super();
     this.role = 'presentation';
+    const style = document.createElement('style');
+    style.textContent = iconStyles.cssContent;
     this.#icon = document.createElement('span');
     this.#shadowRoot = this.attachShadow({mode: 'open'});
-    this.#shadowRoot.appendChild(this.#icon);
-  }
-
-  connectedCallback(): void {
-    this.#shadowRoot.adoptedStyleSheets = [iconStyles];
+    this.#shadowRoot.append(style, this.#icon);
   }
 
   /**

front_end/ui/components/icon_button/IconButton.ts

@@ -7,7 +7,7 @@ import './Icon.js';
 import * as Lit from '../../lit/lit.js';
 
 import type {IconData} from './Icon.js';
-import iconButtonStyles from './iconButton.css.js';
+import iconButtonStyles from './iconButton.css.legacy.js';
 
 const {html} = Lit;
 
@@ -58,10 +58,6 @@ export class IconButton extends HTMLElement {
     };
   }
 
-  connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [iconButtonStyles];
-  }
-
   #onClickHandler(event: Event): void {
     if (this.#clickHandler) {
       event.preventDefault();
@@ -80,6 +76,7 @@ export class IconButton extends HTMLElement {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     Lit.render(html`
+      <style>${iconButtonStyles.cssContent}</style>
       <button class=${buttonClasses} @click=${this.#onClickHandler} aria-label=${Lit.Directives.ifDefined(this.#accessibleName)}>
       ${(!this.#compact && this.#leadingText) ? html`<span class="icon-button-title">${this.#leadingText}</span>` : Lit.nothing}
       ${filteredGroups.map(counter =>

front_end/ui/legacy/components/perf_ui/BrickBreaker.ts

@@ -108,7 +108,7 @@ const colorPallettes: ColorPalette[] = [
   },
 ];
 
-/* rulesdir/no-underscored-properties, rulesdir/no-style-tags-in-lit, rulesdir/no-a-tags-in-lit, rulesdir/lit-host-this */
+/* rulesdir/no-underscored-properties, rulesdir/no-a-tags-in-lit, rulesdir/lit-host-this */
 export class BrickBreaker extends HTMLElement {
   #canvas: HTMLCanvasElement;
   #ctx: CanvasRenderingContext2D;