[unified-css] Only generate "legacy CSS" files.

This is the first step in the CSS unification, which adjusts the build
system to only spit out "legacy CSS" files, which we still turn into
constructed style sheets in various places, and which will be migrated
in a follow-up step.

In a follow up step, the `.css.legacy.js` files will also be renamed to
just `.css.js`, but for this change, it was easier to stick to this
naming scheme.

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

Author: bmeurer

config/gni/devtools_grd_files.gni

@@ -12,7 +12,11 @@ import * as MobileThrottling from '../../panels/mobile_throttling/mobile_throttl
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import nodeIconStyles from './nodeIcon.css.js';
+import nodeIconStylesRaw from './nodeIcon.css.legacy.js';
+
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const nodeIconStyles = new CSSStyleSheet();
+nodeIconStyles.replaceSync(nodeIconStylesRaw.cssContent);
 
 const UIStrings = {
   /**

front_end/entrypoints/inspector_main/InspectorMain.ts

@@ -10,7 +10,11 @@ import type * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import outermostTargetSelectorStyles from './outermostTargetSelector.css.js';
+import outermostTargetSelectorStylesRaw from './outermostTargetSelector.css.legacy.js';
+
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const outermostTargetSelectorStyles = new CSSStyleSheet();
+outermostTargetSelectorStyles.replaceSync(outermostTargetSelectorStylesRaw.cssContent);
 
 const UIStrings = {
   /**

front_end/entrypoints/inspector_main/OutermostTargetSelector.ts

@@ -34,7 +34,11 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import renderingOptionsStyles from './renderingOptions.css.js';
+import renderingOptionsStylesRaw from './renderingOptions.css.legacy.js';
+
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const renderingOptionsStyles = new CSSStyleSheet();
+renderingOptionsStyles.replaceSync(renderingOptionsStylesRaw.cssContent);
 
 const UIStrings = {
   /**

front_end/entrypoints/inspector_main/RenderingOptions.ts

@@ -8,7 +8,11 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import nodeConnectionsPanelStyles from './nodeConnectionsPanel.css.js';
+import nodeConnectionsPanelStylesRaw from './nodeConnectionsPanel.css.legacy.js';
+
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const nodeConnectionsPanelStyles = new CSSStyleSheet();
+nodeConnectionsPanelStyles.replaceSync(nodeConnectionsPanelStylesRaw.cssContent);
 
 const UIStrings = {
   /**

front_end/entrypoints/node_app/NodeConnectionsPanel.ts

@@ -2,11 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-declare module '*.css.js' {
-  const styles: CSSStyleSheet;
-  export default styles;
-}
-
 declare module '*.css.legacy.js' {
   const styles: {cssContent: string};
   export default styles;

front_end/global_typings/global_defs.d.ts

@@ -33,10 +33,14 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import editFileSystemViewStyles from './editFileSystemView.css.js';
+import editFileSystemViewStylesRaw from './editFileSystemView.css.legacy.js';
 import {Events, IsolatedFileSystemManager} from './IsolatedFileSystemManager.js';
 import type {PlatformFileSystem} from './PlatformFileSystem.js';
 
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const editFileSystemViewStyles = new CSSStyleSheet();
+editFileSystemViewStyles.replaceSync(editFileSystemViewStylesRaw.cssContent);
+
 const UIStrings = {
   /**
    *@description Text in Edit File System View of the Workspace settings in Settings to indicate that the following string is a folder URL

front_end/models/persistence/EditFileSystemView.ts

@@ -14,7 +14,11 @@ import {IsolatedFileSystem} from './IsolatedFileSystem.js';
 import {Events, IsolatedFileSystemManager} from './IsolatedFileSystemManager.js';
 import {NetworkPersistenceManager} from './NetworkPersistenceManager.js';
 import type {PlatformFileSystem} from './PlatformFileSystem.js';
-import workspaceSettingsTabStyles from './workspaceSettingsTab.css.js';
+import workspaceSettingsTabStylesRaw from './workspaceSettingsTab.css.legacy.js';
+
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const workspaceSettingsTabStyles = new CSSStyleSheet();
+workspaceSettingsTabStyles.replaceSync(workspaceSettingsTabStylesRaw.cssContent);
 
 const UIStrings = {
   /**

front_end/models/persistence/WorkspaceSettingsTab.ts

@@ -14,7 +14,11 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import type {AccessibilitySidebarView} from './AccessibilitySidebarView.js';
 import {AccessibilitySubPane} from './AccessibilitySubPane.js';
-import axBreadcrumbsStyles from './axBreadcrumbs.css.js';
+import axBreadcrumbsStylesRaw from './axBreadcrumbs.css.legacy.js';
+
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const axBreadcrumbsStyles = new CSSStyleSheet();
+axBreadcrumbsStyles.replaceSync(axBreadcrumbsStylesRaw.cssContent);
 
 const UIStrings = {
   /**

front_end/panels/accessibility/AXBreadcrumbsPane.ts

@@ -9,10 +9,14 @@ import * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import accessibilityNodeStyles from './accessibilityNode.css.js';
+import accessibilityNodeStylesRaw from './accessibilityNode.css.legacy.js';
 import {AXAttributes, AXNativeSourceTypes, AXSourceTypes} from './AccessibilityStrings.js';
 import {AccessibilitySubPane} from './AccessibilitySubPane.js';
 
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const accessibilityNodeStyles = new CSSStyleSheet();
+accessibilityNodeStyles.replaceSync(accessibilityNodeStylesRaw.cssContent);
+
 const UIStrings = {
   /**
    *@description Text in Accessibility Node View of the Accessibility panel