[ui] Bring back dedicated toolbar.css.

The current styling for `<devtools-toolbar>` is difficult to comprehend,
because the global styles peek into deep DOM trees, and there's little
to no isolation. While it's beneficial to have the toolbar items in the
light DOM, it still makes sense to encapsulate the toolbar specific
styles in a shadow DOM. This is a first step to move the styling for the
toolbar itself into a separate CSS file again.

Drive-by-fix: Also add support for the `hidden` attribute.

Bug: 388445687
Change-Id: I4a74df36cf2bfdd21e65ed9067fd84a8f8fdf415
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6172348
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

@@ -2503,6 +2503,7 @@ grd_files_debug_sources = [
   "front_end/ui/legacy/themeColors.css.legacy.js",
   "front_end/ui/legacy/theme_support/ThemeSupport.js",
   "front_end/ui/legacy/tokens.css.legacy.js",
+  "front_end/ui/legacy/toolbar.css.legacy.js",
   "front_end/ui/legacy/treeoutline.css.legacy.js",
   "front_end/ui/legacy/viewContainers.css.legacy.js",
   "front_end/ui/lit-html/i18n-template.js",

front_end/ui/legacy/BUILD.gn

@@ -50,6 +50,7 @@ generate_css("legacy_css_files") {
     "textPrompt.css",
     "themeColors.css",
     "tokens.css",
+    "toolbar.css",
     "treeoutline.css",
     "viewContainers.css",
   ]

front_end/ui/legacy/Toolbar.test.ts

@@ -24,10 +24,10 @@ describeWithLocale('Toolbar', () => {
       assert.instanceOf(toolbar, Toolbar);
     });
 
-    it('does not attach a shadow root', () => {
+    it('attaches a shadow root', () => {
       const toolbar = document.createElement('devtools-toolbar');
 
-      assert.isNull(toolbar.shadowRoot, 'Expected Toolbar to use Light DOM');
+      assert.isNotNull(toolbar.shadowRoot, 'Expected Toolbar to use Light DOM');
     });
 
     describe('connectedCallback', () => {

front_end/ui/legacy/Toolbar.ts

@@ -45,8 +45,9 @@ import {GlassPane, PointerEventsBehavior} from './GlassPane.js';
 import {bindCheckbox} from './SettingsUI.js';
 import type {Suggestion} from './SuggestBox.js';
 import {Events as TextPromptEvents, TextPrompt} from './TextPrompt.js';
+import toolbarStyles from './toolbar.css.legacy.js';
 import {Tooltip} from './Tooltip.js';
-import {CheckboxLabel, LongClickController} from './UIUtils.js';
+import {CheckboxLabel, createShadowRootWithCoreStyles, LongClickController} from './UIUtils.js';
 
 const UIStrings = {
   /**
@@ -81,6 +82,11 @@ export class Toolbar extends HTMLElement {
   enabled: boolean = true;
   private compactLayout = false;
 
+  constructor() {
+    super();
+    createShadowRootWithCoreStyles(this, {cssFile: toolbarStyles}).createChild('slot');
+  }
+
   connectedCallback(): void {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'toolbar');

front_end/ui/legacy/inspectorCommon.css

@@ -794,24 +794,6 @@ iframe.panel.extension {
 
 /* Toolbar styles */
 devtools-toolbar {
-  padding: 0 2px;
-  position: relative;
-  white-space: nowrap;
-  height: var(--toolbar-height);
-  overflow: hidden;
-  display: flex;
-  flex: none;
-  align-items: center;
-  z-index: 0;
-
-  --toolbar-height: 26px;
-
-  &[wrappable] {
-    flex-wrap: wrap;
-    overflow: visible;
-    height: initial;
-  }
-
   & > * {
     position: relative;
     display: flex;

front_end/ui/legacy/toolbar.css

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2025 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.
+ */
+
+:host {
+  padding: 0 2px;
+  position: relative;
+  white-space: nowrap;
+  height: var(--toolbar-height);
+  overflow: hidden;
+  display: flex;
+  flex: none;
+  align-items: center;
+  z-index: 0;
+
+  --toolbar-height: 26px;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host([wrappable]) {
+  flex-wrap: wrap;
+  overflow: visible;
+  height: initial;
+}