Move text-button styles to the button component.

This is the next step in unifying the way we inject CSS. While we should
probably have a proper `<devtools-text-button>` component instead of the
`.text-button` styles, I'm leaving that as a refactoring for later, and
for now, move the styles out of the legacy UI bundle and into the button
component.

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

Author: bmeurer

config/gni/devtools_grd_files.gni

@@ -2198,6 +2198,7 @@ grd_files_debug_sources = [
   "front_end/ui/components/adorners/adorner.css.js",
   "front_end/ui/components/buttons/Button.js",
   "front_end/ui/components/buttons/button.css.js",
+  "front_end/ui/components/buttons/textButton.css.js",
   "front_end/ui/components/cards/Card.js",
   "front_end/ui/components/cards/card.css.js",
   "front_end/ui/components/chrome_link/ChromeLink.js",
@@ -2499,7 +2500,6 @@ grd_files_debug_sources = [
   "front_end/ui/legacy/suggestBox.css.legacy.js",
   "front_end/ui/legacy/tabbedPane.css.legacy.js",
   "front_end/ui/legacy/targetCrashedScreen.css.legacy.js",
-  "front_end/ui/legacy/textButton.css.legacy.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/panels/elements/components/ComputedStyleTrace.ts

@@ -25,8 +25,8 @@ export class ComputedStyleTrace extends HTMLElement {
   #ruleOriginNode?: Node;
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [computedStyleTraceStyles];
     UI.UIUtils.injectCoreStyles(this.#shadow);
+    this.#shadow.adoptedStyleSheets.push(computedStyleTraceStyles);
   }
 
   set data(data: ComputedStyleTraceData) {

front_end/panels/timeline/components/LayoutShiftDetails.ts

@@ -8,8 +8,8 @@ import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as Helpers from '../../../models/trace/helpers/helpers.js';
 import * as Trace from '../../../models/trace/trace.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as LegacyComponents from '../../../ui/legacy/components/utils/utils.js';
-import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as Utils from '../utils/utils.js';
 
@@ -89,9 +89,11 @@ export class LayoutShiftDetails extends HTMLElement {
   #isFreshRecording: Boolean = false;
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [layoutShiftDetailsStyles];
-    // Styles for linkifier button.
-    UI.UIUtils.injectTextButtonStyles(this.#shadow);
+    this.#shadow.adoptedStyleSheets = [
+      layoutShiftDetailsStyles,
+      // Styles for linkifier button.
+      Buttons.textButtonStyles,
+    ];
     this.#render();
   }
 

front_end/ui/components/buttons/BUILD.gn

@@ -8,8 +8,15 @@ import("../../../../scripts/build/ninja/generate_css.gni")
 import("../../../../scripts/build/typescript/typescript.gni")
 import("../visibility.gni")
 
-generate_css("legacy_css_files") {
-  sources = [ "button.css" ]
+generate_css("css_files") {
+  sources = [
+    "button.css",
+    "textButton.css",
+  ]
+}
+
+copy_to_gen("copy_stylesheets_for_server") {
+  sources = [ "textButton.css" ]
 }
 
 devtools_module("button") {
@@ -27,7 +34,7 @@ devtools_entrypoint("bundle") {
 
   deps = [
     ":button",
-    ":legacy_css_files",
+    ":css_files",
   ]
 
   visibility = [ "../../../entrypoints/main/*" ]

front_end/ui/components/buttons/buttons.ts

@@ -3,7 +3,9 @@
 // found in the LICENSE file.
 
 import * as Button from './Button.js';
+import textButtonStyles from './textButton.css.js';
 
 export {
   Button,
+  textButtonStyles,
 };

front_end/ui/legacy/textButton.css renamed to front_end/ui/components/buttons/textButton.css

@@ -45,7 +45,6 @@ generate_css("legacy_css_files") {
     "suggestBox.css",
     "tabbedPane.css",
     "targetCrashedScreen.css",
-    "textButton.css",
     "textPrompt.css",
     "treeoutline.css",
     "viewContainers.css",
@@ -58,7 +57,6 @@ copy_to_gen("copy_stylesheets_for_server") {
   sources = [
     "inspectorCommon.css",
     "inspectorSyntaxHighlight.css",
-    "textButton.css",
   ]
 }
 

front_end/ui/legacy/BUILD.gn

@@ -53,7 +53,6 @@ import inlineButtonStyles from './inlineButton.css.legacy.js';
 import inspectorCommonStyles from './inspectorCommon.css.legacy.js';
 import {KeyboardShortcut, Keys} from './KeyboardShortcut.js';
 import smallBubbleStyles from './smallBubble.css.legacy.js';
-import textButtonStyles from './textButton.css.legacy.js';
 import * as ThemeSupport from './theme_support/theme_support.js';
 import type {ToolbarButton} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
@@ -1868,15 +1867,14 @@ function focusChanged(event: Event): void {
   updateXWidgetfocusWidgetForNode(element);
 }
 
-export function injectCoreStyles(root: Element|ShadowRoot): void {
-  ThemeSupport.ThemeSupport.instance().appendStyle(root, inspectorCommonStyles);
-  ThemeSupport.ThemeSupport.instance().appendStyle(root, textButtonStyles);
+export function injectCoreStyles(elementOrShadowRoot: Element|ShadowRoot): void {
+  ThemeSupport.ThemeSupport.instance().appendStyle(elementOrShadowRoot, inspectorCommonStyles);
+  const shadowRootOrDocument = (elementOrShadowRoot instanceof ShadowRoot) ?
+      elementOrShadowRoot :
+      (elementOrShadowRoot.shadowRoot ?? elementOrShadowRoot.ownerDocument);
+  shadowRootOrDocument.adoptedStyleSheets.push(Buttons.textButtonStyles);
 
-  ThemeSupport.ThemeSupport.instance().injectHighlightStyleSheets(root);
-}
-
-export function injectTextButtonStyles(root: Element|ShadowRoot): void {
-  ThemeSupport.ThemeSupport.instance().appendStyle(root, textButtonStyles);
+  ThemeSupport.ThemeSupport.instance().injectHighlightStyleSheets(elementOrShadowRoot);
 }
 
 /**
@@ -1904,7 +1902,7 @@ export function createShadowRootWithCoreStyles(
     if ('cssContent' in cssFile) {
       ThemeSupport.ThemeSupport.instance().appendStyle(shadowRoot, cssFile);
     } else {
-      shadowRoot.adoptedStyleSheets = cssFile;
+      shadowRoot.adoptedStyleSheets.push(...cssFile);
     }
   }
   shadowRoot.addEventListener('focus', focusChanged, true);

front_end/ui/legacy/UIUtils.ts

@@ -57,6 +57,7 @@ devtools_module("inline_editor") {
     "../../../../models/text_utils:bundle",
     "../../../../panels/css_overview:bundle",
     "../../../../third_party/codemirror.next:bundle",
+    "../../../../ui/components/buttons:bundle",
     "../../../../ui/components/helpers:bundle",
     "../../../../ui/legacy:bundle",
     "../../../../ui/legacy/components/utils:bundle",

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

@@ -3,10 +3,9 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../../core/i18n/i18n.js';
+import * as Buttons from '../../../components/buttons/buttons.js';
 import * as LitHtml from '../../../lit-html/lit-html.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
-import textButtonStyles from '../../textButton.css.legacy.js';
-import * as ThemeSupport from '../../theme_support/theme_support.js';
 
 import linkSwatchStyles from './linkSwatch.css.js';
 
@@ -35,8 +34,7 @@ class BaseLinkSwatch extends HTMLElement {
   #linkElement: HTMLSpanElement|undefined;
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [linkSwatchStyles];
-    ThemeSupport.ThemeSupport.instance().appendStyle(this.shadow, textButtonStyles);
+    this.shadow.adoptedStyleSheets = [linkSwatchStyles, Buttons.textButtonStyles];
   }
 
   set data(data: BaseLinkSwatchRenderData) {

front_end/ui/legacy/components/inline_editor/LinkSwatch.ts

@@ -7,5 +7,8 @@ import("../build/ninja/copy.gni")
 copy_to_gen("component_server") {
   sources = [ "server.js" ]
 
-  deps = [ "../../front_end/ui/legacy:copy_stylesheets_for_server" ]
+  deps = [
+    "../../front_end/ui/components/buttons:copy_stylesheets_for_server",
+    "../../front_end/ui/legacy:copy_stylesheets_for_server",
+  ]
 }

scripts/component_server/BUILD.gn

@@ -147,9 +147,9 @@ const styleSheetPaths = [
   'front_end/tokens.css',
   'front_end/application_color_tokens.css',
   'front_end/design_tokens.css',
+  'front_end/ui/components/buttons/textButton.css',
   'front_end/ui/legacy/inspectorCommon.css',
   'front_end/ui/legacy/inspectorSyntaxHighlight.css',
-  'front_end/ui/legacy/textButton.css',
   'front_end/ui/components/docs/component_docs_styles.css',
 ];