[cleanup] Migrate another chunk of legacy CSS files.

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

Author: bmeurer

config/gni/devtools_grd_files.gni

@@ -2362,7 +2362,7 @@ grd_files_debug_sources = [
   "front_end/ui/legacy/XLink.js",
   "front_end/ui/legacy/XWidget.js",
   "front_end/ui/legacy/ZoomManager.js",
-  "front_end/ui/legacy/checkboxTextLabel.css.legacy.js",
+  "front_end/ui/legacy/checkboxTextLabel.css.js",
   "front_end/ui/legacy/components/color_picker/ColorFormatSpec.js",
   "front_end/ui/legacy/components/color_picker/ContrastDetails.js",
   "front_end/ui/legacy/components/color_picker/ContrastInfo.js",
@@ -2459,8 +2459,8 @@ grd_files_debug_sources = [
   "front_end/ui/legacy/components/source_frame/imageView.css.js",
   "front_end/ui/legacy/components/source_frame/jsonView.css.js",
   "front_end/ui/legacy/components/source_frame/resourceSourceFrame.css.js",
-  "front_end/ui/legacy/components/source_frame/selfXssDialog.css.legacy.js",
-  "front_end/ui/legacy/components/source_frame/xmlTree.css.legacy.js",
+  "front_end/ui/legacy/components/source_frame/selfXssDialog.css.js",
+  "front_end/ui/legacy/components/source_frame/xmlTree.css.js",
   "front_end/ui/legacy/components/source_frame/xmlView.css.js",
   "front_end/ui/legacy/components/utils/ImagePreview.js",
   "front_end/ui/legacy/components/utils/JSPresentationUtils.js",
@@ -2469,36 +2469,36 @@ grd_files_debug_sources = [
   "front_end/ui/legacy/components/utils/TargetDetachedDialog.js",
   "front_end/ui/legacy/components/utils/imagePreview.css.js",
   "front_end/ui/legacy/components/utils/jsUtils.css.js",
-  "front_end/ui/legacy/confirmDialog.css.legacy.js",
+  "front_end/ui/legacy/confirmDialog.css.js",
   "front_end/ui/legacy/dialog.css.js",
-  "front_end/ui/legacy/dropTarget.css.legacy.js",
+  "front_end/ui/legacy/dropTarget.css.js",
   "front_end/ui/legacy/emptyWidget.css.js",
   "front_end/ui/legacy/filter.css.js",
   "front_end/ui/legacy/glassPane.css.js",
-  "front_end/ui/legacy/infobar.css.legacy.js",
-  "front_end/ui/legacy/inlineButton.css.legacy.js",
+  "front_end/ui/legacy/infobar.css.js",
+  "front_end/ui/legacy/inlineButton.css.js",
   "front_end/ui/legacy/inspectorCommon.css.js",
   "front_end/ui/legacy/inspectorCommon.css.legacy.js",
   "front_end/ui/legacy/inspectorViewTabbedPane.css.js",
   "front_end/ui/legacy/listWidget.css.js",
   "front_end/ui/legacy/popover.css.js",
-  "front_end/ui/legacy/progressIndicator.css.legacy.js",
+  "front_end/ui/legacy/progressIndicator.css.js",
   "front_end/ui/legacy/remoteDebuggingTerminatedScreen.css.js",
   "front_end/ui/legacy/reportView.css.js",
   "front_end/ui/legacy/rootView.css.js",
   "front_end/ui/legacy/searchableView.css.js",
-  "front_end/ui/legacy/smallBubble.css.legacy.js",
+  "front_end/ui/legacy/smallBubble.css.js",
   "front_end/ui/legacy/softContextMenu.css.js",
-  "front_end/ui/legacy/softDropDown.css.legacy.js",
+  "front_end/ui/legacy/softDropDown.css.js",
   "front_end/ui/legacy/softDropDownButton.css.legacy.js",
   "front_end/ui/legacy/splitWidget.css.js",
-  "front_end/ui/legacy/suggestBox.css.legacy.js",
+  "front_end/ui/legacy/suggestBox.css.js",
   "front_end/ui/legacy/tabbedPane.css.js",
   "front_end/ui/legacy/targetCrashedScreen.css.js",
   "front_end/ui/legacy/textPrompt.css.legacy.js",
   "front_end/ui/legacy/theme_support/ThemeSupport.js",
   "front_end/ui/legacy/toolbar.css.js",
-  "front_end/ui/legacy/treeoutline.css.legacy.js",
+  "front_end/ui/legacy/treeoutline.css.js",
   "front_end/ui/legacy/viewContainers.css.js",
   "front_end/ui/lit-html/i18n-template.js",
   "front_end/ui/visual_logging/Debugging.js",

front_end/ui/legacy/BUILD.gn

@@ -10,42 +10,42 @@ import("./visibility.gni")
 
 generate_css("css_files") {
   sources = [
+    "checkboxTextLabel.css",
+    "confirmDialog.css",
     "dialog.css",
+    "dropTarget.css",
     "emptyWidget.css",
     "filter.css",
     "glassPane.css",
+    "infobar.css",
+    "inlineButton.css",
     "inspectorCommon.css",
     "inspectorViewTabbedPane.css",
     "listWidget.css",
     "popover.css",
+    "progressIndicator.css",
     "remoteDebuggingTerminatedScreen.css",
     "reportView.css",
     "rootView.css",
     "searchableView.css",
+    "smallBubble.css",
     "softContextMenu.css",
+    "softDropDown.css",
     "splitWidget.css",
+    "suggestBox.css",
     "tabbedPane.css",
     "targetCrashedScreen.css",
     "toolbar.css",
+    "treeoutline.css",
     "viewContainers.css",
   ]
 }
 
 generate_css("legacy_css_files") {
   sources = [
-    "checkboxTextLabel.css",
-    "confirmDialog.css",
-    "dropTarget.css",
-    "infobar.css",
-    "inlineButton.css",
     "inspectorCommon.css",
-    "progressIndicator.css",
-    "smallBubble.css",
-    "softDropDown.css",
     "softDropDownButton.css",
-    "suggestBox.css",
     "textPrompt.css",
-    "treeoutline.css",
   ]
 
   legacy = true

front_end/ui/legacy/DropTarget.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 dropTargetStyles from './dropTarget.css.legacy.js';
+import dropTargetStyles from './dropTarget.css.js';
 import {createShadowRootWithCoreStyles} from './UIUtils.js';
 
 export class DropTarget {
@@ -71,7 +71,7 @@ export class DropTarget {
       return;
     }
     this.dragMaskElement = this.element.createChild('div', '');
-    const shadowRoot = createShadowRootWithCoreStyles(this.dragMaskElement, {cssFile: dropTargetStyles});
+    const shadowRoot = createShadowRootWithCoreStyles(this.dragMaskElement, {cssFile: [dropTargetStyles]});
     shadowRoot.createChild('div', 'drop-target-message').textContent = this.messageText;
     this.dragMaskElement.addEventListener('drop', this.onDrop.bind(this), true);
     this.dragMaskElement.addEventListener('dragleave', this.onDragLeave.bind(this), true);

front_end/ui/legacy/Infobar.ts

@@ -8,7 +8,7 @@ import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
-import infobarStyles from './infobar.css.legacy.js';
+import infobarStyles from './infobar.css.js';
 import {Keys} from './KeyboardShortcut.js';
 import {createShadowRootWithCoreStyles, createTextButton, type DevToolsCloseButton} from './UIUtils.js';
 import type {Widget} from './Widget.js';
@@ -59,7 +59,7 @@ export class Infobar {
           'jslog', `${VisualLogging.dialog(jslogContext).track({resize: true, keydown: 'Enter|Escape'})}`);
     }
     this.element.classList.add('flex-none');
-    this.shadowRoot = createShadowRootWithCoreStyles(this.element, {cssFile: infobarStyles});
+    this.shadowRoot = createShadowRootWithCoreStyles(this.element, {cssFile: [infobarStyles]});
 
     this.contentElement = this.shadowRoot.createChild('div', 'infobar infobar-' + type);
 

front_end/ui/legacy/ProgressIndicator.ts

@@ -30,7 +30,7 @@
 
 import type * as Common from '../../core/common/common.js';
 
-import progressIndicatorStyles from './progressIndicator.css.legacy.js';
+import progressIndicatorStyles from './progressIndicator.css.js';
 import {createShadowRootWithCoreStyles} from './UIUtils.js';
 
 export class ProgressIndicator implements Common.Progress.Progress {
@@ -47,7 +47,7 @@ export class ProgressIndicator implements Common.Progress.Progress {
   constructor(options = {showStopButton: true}) {
     this.element = document.createElement('div');
     this.element.classList.add('progress-indicator');
-    this.shadowRoot = createShadowRootWithCoreStyles(this.element, {cssFile: progressIndicatorStyles});
+    this.shadowRoot = createShadowRootWithCoreStyles(this.element, {cssFile: [progressIndicatorStyles]});
     this.contentElement = this.shadowRoot.createChild('div', 'progress-indicator-shadow-container');
 
     this.labelElement = this.contentElement.createChild('div', 'title');

front_end/ui/legacy/SoftDropDown.ts

@@ -12,7 +12,7 @@ import {Size} from './Geometry.js';
 import {AnchorBehavior, GlassPane, MarginBehavior, PointerEventsBehavior} from './GlassPane.js';
 import {ListControl, type ListDelegate, ListMode} from './ListControl.js';
 import {Events as ListModelEvents, type ItemsReplacedEvent, type ListModel} from './ListModel.js';
-import softDropDownStyles from './softDropDown.css.legacy.js';
+import softDropDownStyles from './softDropDown.css.js';
 import softDropDownButtonStyles from './softDropDownButton.css.legacy.js';
 import * as ThemeSupport from './theme_support/theme_support.js';
 import {createShadowRootWithCoreStyles} from './UIUtils.js';
@@ -70,7 +70,7 @@ export class SoftDropDown<T> implements ListDelegate<T> {
     this.rowHeight = 36;
     this.width = 315;
     createShadowRootWithCoreStyles(this.glassPane.contentElement, {
-      cssFile: softDropDownStyles,
+      cssFile: [softDropDownStyles]
     }).appendChild(this.list.element);
     ARIAUtils.markAsMenu(this.list.element);
     VisualLogging.setMappedParent(this.list.element, this.element);

front_end/ui/legacy/SuggestBox.ts

@@ -38,7 +38,7 @@ import {Size} from './Geometry.js';
 import {AnchorBehavior, GlassPane} from './GlassPane.js';
 import {ListControl, type ListDelegate, ListMode} from './ListControl.js';
 import {ListModel} from './ListModel.js';
-import suggestBoxStyles from './suggestBox.css.legacy.js';
+import suggestBoxStyles from './suggestBox.css.js';
 import {createShadowRootWithCoreStyles, measuredScrollbarWidth, measurePreferredSize} from './UIUtils.js';
 
 const UIStrings = {
@@ -105,7 +105,7 @@ export class SuggestBox implements ListDelegate<Suggestion> {
     this.glassPane = new GlassPane();
     this.glassPane.setAnchorBehavior(AnchorBehavior.PREFER_BOTTOM);
     this.glassPane.setOutsideClickCallback(this.hide.bind(this));
-    const shadowRoot = createShadowRootWithCoreStyles(this.glassPane.contentElement, {cssFile: suggestBoxStyles});
+    const shadowRoot = createShadowRootWithCoreStyles(this.glassPane.contentElement, {cssFile: [suggestBoxStyles]});
     shadowRoot.appendChild(this.element);
   }
 

front_end/ui/legacy/Treeoutline.ts

@@ -42,9 +42,8 @@ import * as VisualLogging from '../visual_logging/visual_logging.js';
 import * as ARIAUtils from './ARIAUtils.js';
 import {type Config, InplaceEditor} from './InplaceEditor.js';
 import {Keys} from './KeyboardShortcut.js';
-import * as ThemeSupport from './theme_support/theme_support.js';
 import {Tooltip} from './Tooltip.js';
-import treeoutlineStyles from './treeoutline.css.legacy.js';
+import treeoutlineStyles from './treeoutline.css.js';
 import {
   createShadowRootWithCoreStyles,
   deepElementFromPoint,
@@ -406,7 +405,7 @@ export class TreeOutlineInShadow extends TreeOutline {
     super();
     this.contentElement.classList.add('tree-outline');
     this.element = document.createElement('div');
-    this.shadowRoot = createShadowRootWithCoreStyles(this.element, {cssFile: treeoutlineStyles});
+    this.shadowRoot = createShadowRootWithCoreStyles(this.element, {cssFile: [treeoutlineStyles]});
     this.disclosureElement = this.shadowRoot.createChild('div', 'tree-outline-disclosure');
     this.disclosureElement.appendChild(this.contentElement);
     this.renderSelection = true;
@@ -416,10 +415,6 @@ export class TreeOutlineInShadow extends TreeOutline {
     }
   }
 
-  registerRequiredCSS(cssFile: {cssContent: string}): void {
-    ThemeSupport.ThemeSupport.instance().appendStyle(this.shadowRoot, cssFile);
-  }
-
   registerCSSFiles(cssFiles: CSSStyleSheet[]): void {
     this.shadowRoot.adoptedStyleSheets = this.shadowRoot.adoptedStyleSheets.concat(cssFiles);
   }

front_end/ui/legacy/UIUtils.ts

@@ -44,15 +44,15 @@ import * as IconButton from '../components/icon_button/icon_button.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
-import checkboxTextLabelStyles from './checkboxTextLabel.css.legacy.js';
-import confirmDialogStyles from './confirmDialog.css.legacy.js';
+import checkboxTextLabelStyles from './checkboxTextLabel.css.js';
+import confirmDialogStyles from './confirmDialog.css.js';
 import {Dialog} from './Dialog.js';
 import {Size} from './Geometry.js';
 import {GlassPane, PointerEventsBehavior, SizeBehavior} from './GlassPane.js';
-import inlineButtonStyles from './inlineButton.css.legacy.js';
+import inlineButtonStyles from './inlineButton.css.js';
 import inspectorCommonStyles from './inspectorCommon.css.legacy.js';
 import {KeyboardShortcut, Keys} from './KeyboardShortcut.js';
-import smallBubbleStyles from './smallBubble.css.legacy.js';
+import smallBubbleStyles from './smallBubble.css.js';
 import * as ThemeSupport from './theme_support/theme_support.js';
 import type {ToolbarButton} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
@@ -1300,15 +1300,15 @@ export function setTitle(element: HTMLElement, title: string): void {
 }
 
 export class CheckboxLabel extends HTMLElement {
-  private readonly shadowRootInternal!: DocumentFragment;
+  private readonly shadowRootInternal: ShadowRoot;
   checkboxElement!: HTMLInputElement;
   textElement!: HTMLElement;
 
   constructor() {
     super();
     CheckboxLabel.lastId = CheckboxLabel.lastId + 1;
     const id = 'ui-checkbox-label' + CheckboxLabel.lastId;
-    this.shadowRootInternal = createShadowRootWithCoreStyles(this, {cssFile: checkboxTextLabelStyles});
+    this.shadowRootInternal = createShadowRootWithCoreStyles(this);
     this.checkboxElement = this.shadowRootInternal.createChild('input');
     this.checkboxElement.type = 'checkbox';
     this.checkboxElement.setAttribute('id', id);
@@ -1317,6 +1317,10 @@ export class CheckboxLabel extends HTMLElement {
     this.shadowRootInternal.createChild('slot');
   }
 
+  connectedCallback(): void {
+    this.shadowRootInternal.adoptedStyleSheets.push(checkboxTextLabelStyles);
+  }
+
   static create(
       title?: Platform.UIString.LocalizedString, checked?: boolean, subtitle?: Platform.UIString.LocalizedString,
       jslogContext?: string, small?: boolean): CheckboxLabel {
@@ -1378,16 +1382,21 @@ export class DevToolsIconLabel extends HTMLElement {
 customElements.define('dt-icon-label', DevToolsIconLabel);
 
 export class DevToolsSmallBubble extends HTMLElement {
+  #shadowRoot: ShadowRoot;
   private textElement: Element;
 
   constructor() {
     super();
-    const root = createShadowRootWithCoreStyles(this, {cssFile: smallBubbleStyles});
-    this.textElement = root.createChild('div');
+    this.#shadowRoot = createShadowRootWithCoreStyles(this);
+    this.textElement = this.#shadowRoot.createChild('div');
     this.textElement.className = 'info';
     this.textElement.createChild('slot');
   }
 
+  connectedCallback(): void {
+    this.#shadowRoot.adoptedStyleSheets.push(smallBubbleStyles);
+  }
+
   set type(type: string) {
     this.textElement.className = type;
   }
@@ -1622,7 +1631,7 @@ export class MessageDialog {
     const dialog = new Dialog(jslogContext);
     dialog.setSizeBehavior(SizeBehavior.MEASURE_CONTENT);
     dialog.setDimmed(true);
-    const shadowRoot = createShadowRootWithCoreStyles(dialog.contentElement, {cssFile: confirmDialogStyles});
+    const shadowRoot = createShadowRootWithCoreStyles(dialog.contentElement, {cssFile: [confirmDialogStyles]});
     const content = shadowRoot.createChild('div', 'widget');
     await new Promise(resolve => {
       const okButton = createTextButton(
@@ -1646,7 +1655,7 @@ export class ConfirmDialog {
     dialog.setSizeBehavior(SizeBehavior.MEASURE_CONTENT);
     dialog.setDimmed(true);
     ARIAUtils.setLabel(dialog.contentElement, message);
-    const shadowRoot = createShadowRootWithCoreStyles(dialog.contentElement, {cssFile: confirmDialogStyles});
+    const shadowRoot = createShadowRootWithCoreStyles(dialog.contentElement, {cssFile: [confirmDialogStyles]});
     const content = shadowRoot.createChild('div', 'widget');
     content.createChild('div', 'message').createChild('span').textContent = message;
     const buttonsBar = content.createChild('div', 'button');
@@ -1671,7 +1680,7 @@ export class ConfirmDialog {
 
 export function createInlineButton(toolbarButton: ToolbarButton): Element {
   const element = document.createElement('span');
-  const shadowRoot = createShadowRootWithCoreStyles(element, {cssFile: inlineButtonStyles});
+  const shadowRoot = createShadowRootWithCoreStyles(element, {cssFile: [inlineButtonStyles]});
   element.classList.add('inline-button');
   const toolbar = shadowRoot.createChild('devtools-toolbar');
   toolbar.appendToolbarItem(toolbarButton);
@@ -1885,24 +1894,18 @@ export function injectCoreStyles(elementOrShadowRoot: Element|ShadowRoot): void
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow
  */
 export function createShadowRootWithCoreStyles(
-    element: Element, options: {cssFile?: CSSStyleSheet[]|{cssContent: string}, delegatesFocus?: boolean} = {
+    element: Element, options: {cssFile?: CSSStyleSheet[], delegatesFocus?: boolean} = {
       delegatesFocus: undefined,
       cssFile: undefined,
     }): ShadowRoot {
   const {
-    cssFile,
+    cssFile = [],
     delegatesFocus,
   } = options;
 
   const shadowRoot = element.attachShadow({mode: 'open', delegatesFocus});
   injectCoreStyles(shadowRoot);
-  if (cssFile) {
-    if ('cssContent' in cssFile) {
-      ThemeSupport.ThemeSupport.instance().appendStyle(shadowRoot, cssFile);
-    } else {
-      shadowRoot.adoptedStyleSheets.push(...cssFile);
-    }
-  }
+  shadowRoot.adoptedStyleSheets.push(...cssFile);
   shadowRoot.addEventListener('focus', focusChanged, true);
   return shadowRoot;
 }

front_end/ui/legacy/components/source_frame/BUILD.gn

@@ -14,17 +14,10 @@ generate_css("css_files") {
     "imageView.css",
     "jsonView.css",
     "resourceSourceFrame.css",
-    "xmlView.css",
-  ]
-}
-
-generate_css("legacy_css_files") {
-  sources = [
     "selfXssDialog.css",
     "xmlTree.css",
+    "xmlView.css",
   ]
-
-  legacy = true
 }
 
 devtools_module("source_frame") {
@@ -62,7 +55,6 @@ devtools_entrypoint("bundle") {
 
   deps = [
     ":css_files",
-    ":legacy_css_files",
     ":source_frame",
   ]