[cleanup] Remove the .toolbar-item CSS class.

This is the next step required to eventually be able to just add elements to the <devtools-toolbar> without having to go through the imperative Toolbar API. Bug: 388445687 Change-Id: I912f2d4a1285af7fab63a5268c5c0a3baa556462 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6163603 Commit-Queue: Danil Somsikov <[email protected]> Auto-Submit: Benedikt Meurer <[email protected]> Reviewed-by: Danil Somsikov <[email protected]>
ChromeDevTools · Jan 9, 2025 · 6bfc051 · 6bfc051
1 parent 7710a43
commit 6bfc051
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 62 deletions.
diff --git a/front_end/panels/profiler/profileLauncherView.css b/front_end/panels/profiler/profileLauncherView.css
@@ -122,8 +122,7 @@
 
   .profile-memory-usage-item-trend,
   .profile-memory-usage-item-trend.increasing,
-  .profile-launcher-view-content button.running,
-  body.inactive .profile-launcher-view-content button.running:not(.toolbar-item) {
+  .profile-launcher-view-content button.running {
     color: ButtonText;
   }
 

diff --git a/front_end/ui/legacy/Toolbar.ts b/front_end/ui/legacy/Toolbar.ts
@@ -257,7 +257,7 @@ export class Toolbar extends HTMLElement {
           return;
         }
         if (e.target instanceof HTMLElement) {
-          const buttonElement = e.target.enclosingNodeOrSelfWithClass('toolbar-item');
+          const buttonElement = e.target.enclosingNodeOrSelfWithClass('toolbar-button');
           buttonElement.classList.add('emulate-active');
         }
       }
@@ -267,7 +267,7 @@ export class Toolbar extends HTMLElement {
           return;
         }
         if (e.target instanceof HTMLElement) {
-          const buttonElement = e.target.enclosingNodeOrSelfWithClass('toolbar-item');
+          const buttonElement = e.target.enclosingNodeOrSelfWithClass('toolbar-button');
           buttonElement.classList.remove('emulate-active');
         }
       }
@@ -508,7 +508,6 @@ export class ToolbarItem<T = any> extends Common.ObjectWrapper.ObjectWrapper<T>
   constructor(element: Element) {
     super();
     this.element = (element as HTMLElement);
-    this.element.classList.add('toolbar-item');
     this.visibleInternal = true;
     this.enabled = true;
 
@@ -1147,7 +1146,7 @@ export class ToolbarComboBox extends ToolbarItem<void> {
     const element = document.createElement('span');
     element.classList.add('toolbar-select-container');
     super(element);
-    this.selectElementInternal = this.element.createChild('select', 'toolbar-item');
+    this.selectElementInternal = this.element.createChild('select');
     const dropdownArrowIcon = IconButton.Icon.create('triangle-down', 'toolbar-dropdown-arrow');
     this.element.appendChild(dropdownArrowIcon);
     if (changeHandler) {

diff --git a/front_end/ui/legacy/inspectorCommon.css b/front_end/ui/legacy/inspectorCommon.css
@@ -784,15 +784,15 @@ devtools-toolbar {
     height: auto;
     align-items: flex-start;
 
-    & > .toolbar-item {
+    & > * {
       height: auto;
       min-height: var(--toolbar-height);
       white-space: normal;
 
     }
   }
 
-  .toolbar-item {
+  & > * {
     position: relative;
     display: flex;
     background-color: transparent;
@@ -805,6 +805,7 @@ devtools-toolbar {
     white-space: pre;
     overflow: hidden;
     max-width: 100%;
+    color: var(--icon-default);
 
     /* Some toolbars have a different cursor on hover (for example, resizeable
      * ones which can be clicked + dragged to move). But we want to make sure
@@ -813,6 +814,15 @@ devtools-toolbar {
      * have to click + drag only on empty space. See crbug.com/371838044 for
      * an example. */
     cursor: default;
+
+    & .devtools-link {
+      color: var(--icon-default);
+    }
+  }
+
+  & > devtools-issue-counter {
+    margin-top: -4px;
+    padding-left: 1px;
   }
 
   devtools-adorner.fix-perf-icon {
@@ -821,16 +831,6 @@ devtools-toolbar {
     --override-adorner-background-color: transparent;
   }
 
-  .toolbar-item,
-  .toolbar-item .devtools-link {
-    color: var(--icon-default);
-  }
-
-  devtools-issue-counter.toolbar-item {
-    margin-top: -4px;
-    padding-left: 1px;
-  }
-
   devtools-issue-counter.main-toolbar {
     margin-left: 1px;
     margin-right: 1px;
@@ -1020,63 +1020,66 @@ devtools-toolbar {
 
   /* Checkbox */
 
-  .toolbar-item.checkbox {
+  & > .checkbox {
     padding: 0 5px 0 0;
   }
 
   /* Select */
 
-  .toolbar-select-container {
+  & > .toolbar-select-container {
     display: inline-flex;
     flex-shrink: 0;
     padding-left: 2px;
-  }
 
-  select.toolbar-item {
-    min-width: var(--sys-size-14);
-    appearance: none;
-    padding: 0 var(--sys-size-9) 0 var(--sys-size-5);
-    margin-right: -10px;
-    position: relative;
-    height: var(--sys-size-9);
-    border-radius: var(--sys-shape-corner-extra-small);
-
-    &:disabled {
-      opacity: 100%;
-      pointer-events: none;
-      background-color: var(--sys-color-state-disabled-container);
-      color: var(--sys-color-state-disabled);
-
-      & + .toolbar-dropdown-arrow {
+    & > select {
+      min-width: var(--sys-size-14);
+      appearance: none;
+      padding: 0 var(--sys-size-9) 0 var(--sys-size-5);
+      margin-right: -10px;
+      position: relative;
+      height: var(--sys-size-9);
+      color: inherit;
+      border: inherit;
+      border-radius: var(--sys-shape-corner-extra-small);
+      background-color: inherit;
+
+      &:disabled {
+        opacity: 100%;
+        pointer-events: none;
+        background-color: var(--sys-color-state-disabled-container);
         color: var(--sys-color-state-disabled);
+
+        & + .toolbar-dropdown-arrow {
+          color: var(--sys-color-state-disabled);
+        }
       }
-    }
 
-    &:hover {
-      background-color: var(--sys-color-state-hover-on-subtle);
-    }
+      &:hover {
+        background-color: var(--sys-color-state-hover-on-subtle);
+      }
 
-    &:active {
-      background-color: var(--sys-color-state-ripple-neutral-on-subtle);
-    }
+      &:active {
+        background-color: var(--sys-color-state-ripple-neutral-on-subtle);
+      }
 
-    &:hover:active {
-      background:
-        linear-gradient(var(--sys-color-state-hover-on-subtle), var(--sys-color-state-hover-on-subtle)),
-        linear-gradient(var(--sys-color-state-ripple-neutral-on-subtle), var(--sys-color-state-ripple-neutral-on-subtle));
+      &:hover:active {
+        background:
+          linear-gradient(var(--sys-color-state-hover-on-subtle), var(--sys-color-state-hover-on-subtle)),
+          linear-gradient(var(--sys-color-state-ripple-neutral-on-subtle), var(--sys-color-state-ripple-neutral-on-subtle));
+      }
     }
   }
 
-  button.toolbar-item:focus-visible,
-  select.toolbar-item:focus-visible {
+  & > button:focus-visible,
+  & > .toolbar-select-container > select:focus-visible {
     outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
 
     &.toolbar-has-dropdown {
       background: none;
     }
   }
 
-  select.toolbar-item:focus-visible > * {
+  & > .toolbar-select-container > select:focus-visible > * {
     background: var(--sys-color-cdt-base-container);
     border-radius: 7px;
   }
@@ -1171,17 +1174,17 @@ devtools-toolbar {
     left: -2px;
   }
 
-  &:not(.floating) .toolbar-item:last-child:not(:first-child, .toolbar-select-container) {
+  &:not(.floating) > :last-child:not(:first-child, .toolbar-select-container) {
     flex-shrink: 1;
     justify-content: left;
   }
 
-  &:not(.floating) .toolbar-button.toolbar-item:last-child:not(:first-child, .toolbar-select-container) {
+  &:not(.floating) > .toolbar-button:last-child:not(:first-child, .toolbar-select-container) {
     justify-content: left;
     margin-right: 2px;
   }
 
-  .toolbar-item.highlight::before {
+  & > .highlight::before {
     content: "";
     position: absolute;
     inset: 2px;
@@ -1190,7 +1193,7 @@ devtools-toolbar {
     z-index: -1;
   }
 
-  .toolbar-item.highlight:focus-visible {
+  & > .highlight:focus-visible {
     background: var(--sys-color-tonal-container);
 
     & > .title {
@@ -1208,7 +1211,7 @@ devtools-toolbar {
       color: Graytext;
     }
 
-    .toolbar-item,
+    devtools-toolbar > *,
     .toolbar-text {
       color: ButtonText;
     }
@@ -1217,8 +1220,8 @@ devtools-toolbar {
       color: Graytext;
     }
 
-    select.toolbar-item:disabled,
-    select.toolbar-item:disabled + .toolbar-dropdown-arrow {
+    devtools-toolbar > .toolbar-select-container > select:disabled,
+    devtools-toolbar > .toolbar-select-container > select:disabled + .toolbar-dropdown-arrow {
       opacity: 100%;
       color: Graytext;
     }
@@ -1276,7 +1279,7 @@ devtools-toolbar {
       box-shadow: var(--legacy-focus-ring-active-shadow);
     }
 
-    .toolbar-item .devtools-link {
+    devtools-toolbar .devtools-link {
       color: linktext;
     }
 

diff --git a/test/e2e/extensions/debugger-language-plugins_test.ts b/test/e2e/extensions/debugger-language-plugins_test.ts
@@ -252,7 +252,7 @@ describe('The Debugger Language Plugins', () => {
     await addDummyExternalDWARFInfo('global_variable.wasm');
     await openFileInEditor('global_variable.wat');
 
-    const toolbarLink = await waitFor('.toolbar-item .devtools-link');
+    const toolbarLink = await waitFor('devtools-toolbar .devtools-link');
     const toolbarLinkText = await toolbarLink.evaluate(({textContent}) => textContent);
     assert.strictEqual(toolbarLinkText, 'global_variable.wasm');
 

diff --git a/test/e2e/helpers/memory-helpers.ts b/test/e2e/helpers/memory-helpers.ts
@@ -402,7 +402,7 @@ export async function restoreIgnoredRetainers() {
 }
 
 export async function setFilterDropdown(filter: string) {
-  const select = await waitFor('select.toolbar-item[aria-label="Filter"]');
+  const select = await waitFor('devtools-toolbar select[aria-label="Filter"]');
   await select.select(filter);
 }
 

diff --git a/test/e2e/sources/sourcemap_test.ts b/test/e2e/sources/sourcemap_test.ts
@@ -60,7 +60,7 @@ async function waitForTextContent(selector: string) {
   return await element.evaluate(({textContent}) => textContent);
 }
 
-const DEVTOOLS_LINK = '.toolbar-item .devtools-link';
+const DEVTOOLS_LINK = 'devtools-toolbar .devtools-link';
 const INFOBAR_TEXT = '.infobar-info-text';
 
 describe('The Sources Tab', function() {