[unified-css] Migrate files in front_end/panels/issues.

Bug: 391381439
Change-Id: I52a2a97e7b4a41b1172fd188776d463c70c02ca1
Fixed: 404267373, 404267273
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6448275
Commit-Queue: Benedikt Meurer <[email protected]>
Auto-Submit: Benedikt Meurer <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>

Author: bmeurer

front_end/panels/issues/components/ElementsPanelLink.ts

@@ -6,11 +6,7 @@
 import {html, render} from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
-import elementsPanelLinkStylesRaw from './elementsPanelLink.css.js';
-
-// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
-const elementsPanelLinkStyles = new CSSStyleSheet();
-elementsPanelLinkStyles.replaceSync(elementsPanelLinkStylesRaw.cssText);
+import elementsPanelLinkStyles from './elementsPanelLink.css.js';
 
 export interface ElementsPanelLinkData {
   onElementRevealIconClick: (event?: Event) => void;
@@ -35,13 +31,10 @@ export class ElementsPanelLink extends HTMLElement {
     this.#render();
   }
 
-  connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [elementsPanelLinkStyles];
-  }
-
   #render(): void {
     // clang-format off
     render(html`
+      <style>${elementsPanelLinkStyles.cssText}</style>
       <span
         class="element-reveal-icon"
         jslog=${VisualLogging.link('elements-panel').track({click: true})}

front_end/panels/issues/components/HideIssuesMenu.ts

@@ -1,4 +1,3 @@
-
 // Copyright 2021 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.
@@ -10,11 +9,7 @@ import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import {html, render} from '../../../ui/lit/lit.js';
 
-import hideIssuesMenuStylesRaw from './hideIssuesMenu.css.js';
-
-// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
-const hideIssuesMenuStyles = new CSSStyleSheet();
-hideIssuesMenuStyles.replaceSync(hideIssuesMenuStylesRaw.cssText);
+import hideIssuesMenuStyles from './hideIssuesMenu.css.js';
 
 const UIStrings = {
   /**
@@ -42,10 +37,6 @@ export class HideIssuesMenu extends HTMLElement {
     this.#render();
   }
 
-  connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [hideIssuesMenuStyles];
-  }
-
   onMenuOpen(event: Event): void {
     event.stopPropagation();
     const buttonElement = this.#shadow.querySelector('devtools-button');
@@ -62,6 +53,7 @@ export class HideIssuesMenu extends HTMLElement {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
+    <style>${hideIssuesMenuStyles.cssText}</style>
     <devtools-button
       .data=${{variant: Buttons.Button.Variant.ICON,iconName: 'dots-vertical', title: i18nString(UIStrings.tooltipTitle)} as Buttons.Button.ButtonData}
       .jslogContext=${'hide-issues'}