[GM3Restyling] Update dropdown styles in Memory inspector

Fix settings button in Memory inspector toolbar as a drive-by

Screenshot: https://imgur.com/a/to82e9d

Bug: 325441856
Change-Id: I3371e2dd731b3eafe691b9818e607a84b8f0b506
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6366954
Reviewed-by: Kim-Anh Tran <[email protected]>
Auto-Submit: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: Kateryna Prokopenko

front_end/panels/linear_memory_inspector/components/LinearMemoryValueInterpreter.test.ts

@@ -8,6 +8,7 @@ import {
   renderElementIntoDOM,
 } from '../../../testing/DOMHelpers.js';
 import {describeWithLocale} from '../../../testing/EnvironmentHelpers.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
 
 import * as LinearMemoryInspectorComponents from './components.js';
 
@@ -30,7 +31,7 @@ function assertDisplayRenders(component: HTMLElement) {
 
 function clickSettingsButton(
     component: LinearMemoryInspectorComponents.LinearMemoryValueInterpreter.LinearMemoryValueInterpreter) {
-  const settingsButton = getElementWithinComponent(component, '[data-settings]', HTMLButtonElement);
+  const settingsButton = getElementWithinComponent(component, '[data-settings]', Buttons.Button.Button);
   settingsButton.click();
 }
 

front_end/panels/linear_memory_inspector/components/LinearMemoryValueInterpreter.ts

@@ -8,13 +8,20 @@ import './ValueInterpreterSettings.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
+// eslint-disable-next-line rulesdir/es-modules-import
+import inspectorCommonStylesRaw from '../../../ui/legacy/inspectorCommon.css.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import linearMemoryValueInterpreterStylesRaw from './linearMemoryValueInterpreter.css.js';
 import {Endianness, type ValueType, type ValueTypeMode} from './ValueInterpreterDisplayUtils.js';
 import type {TypeToggleEvent} from './ValueInterpreterSettings.js';
 
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const inspectorCommonStyles = new CSSStyleSheet();
+inspectorCommonStyles.replaceSync(inspectorCommonStylesRaw.cssText);
+
 // TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
 const linearMemoryValueInterpreterStyles = new CSSStyleSheet();
 linearMemoryValueInterpreterStyles.replaceSync(linearMemoryValueInterpreterStylesRaw.cssText);
@@ -74,7 +81,7 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
   #showSettings = false;
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [linearMemoryValueInterpreterStyles];
+    this.#shadow.adoptedStyleSheets = [inspectorCommonStyles, linearMemoryValueInterpreterStyles];
   }
 
   set data(data: LinearMemoryValueInterpreterData) {
@@ -93,11 +100,14 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
       <div class="value-interpreter">
         <div class="settings-toolbar">
           ${this.#renderEndiannessSetting()}
-          <button data-settings="true" class="settings-toolbar-button ${this.#showSettings ? 'active' : ''}"
+          <devtools-button data-settings="true" class="toolbar-button ${this.#showSettings ? '' : 'disabled'}"
               title=${i18nString(UIStrings.toggleValueTypeSettings)} @click=${this.#onSettingsToggle}
-              jslog=${VisualLogging.toggleSubpane('linear-memory-inspector.toggle-value-settings').track({click: true})}>
-            <devtools-icon name=${this.#showSettings ? 'gear-filled' : 'gear'}></devtools-icon>
-          </button>
+              jslog=${VisualLogging.toggleSubpane('linear-memory-inspector.toggle-value-settings').track({click: true})}
+              .iconName=${'gear'}
+              .toggledIconName=${'gear-filled'}
+              .toggleType=${Buttons.Button.ToggleType.PRIMARY}
+              .variant=${Buttons.Button.Variant.ICON_TOGGLE}
+          ></devtools-button>
         </div>
         <span class="divider"></span>
         <div>
@@ -140,7 +150,7 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
     <label data-endianness-setting="true" title=${i18nString(UIStrings.changeEndianness)}>
       <select
         jslog=${VisualLogging.dropDown('linear-memory-inspector.endianess').track({change: true})}
-        style="border: none; background-color: transparent; cursor: pointer;"
+        style="border: none;"
         data-endianness="true" @change=${onEnumSettingChange}>
         ${[Endianness.LITTLE, Endianness.BIG].map(endianness => {
             return html`<option value=${endianness} .selected=${this.#endianness === endianness}

front_end/panels/linear_memory_inspector/components/ValueInterpreterDisplay.ts

@@ -112,7 +112,7 @@ export class ValueInterpreterDisplay extends HTMLElement {
   }
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [valueInterpreterDisplayStyles];
+    this.#shadow.adoptedStyleSheets = [inspectorCommonStyles, valueInterpreterDisplayStyles];
   }
 
   set data(data: ValueDisplayData) {
@@ -194,7 +194,6 @@ export class ValueInterpreterDisplay extends HTMLElement {
       <div>
         <select title=${i18nString(UIStrings.changeValueTypeMode)}
           data-mode-settings="true"
-          style="border: none; background-color: transparent; cursor: pointer; color: var(--sys-color-token-subtle);"
           jslog=${VisualLogging.dropDown('linear-memory-inspector.value-type-mode').track({change: true})}
           @change=${this.#onValueTypeModeChange.bind(this, type)}>
             ${VALUE_TYPE_MODE_LIST.filter(x => isValidMode(type, x)).map(mode => {

front_end/panels/linear_memory_inspector/components/linearMemoryValueInterpreter.css

@@ -21,8 +21,8 @@
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-left: var(--sys-size-3);
+  padding-right: var(--sys-size-3);
   align-items: center;
 }