[GM3Restyling] Use old button implementaiton for toolbar select menu
Bug: 330213829
Change-Id: Ia8fad07286eb06ee97f032485a4100f06bb6bee4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5587883
Commit-Queue: Benedikt Meurer <bmeurer@chromium.org>
Auto-Submit: Kateryna Prokopenko <kprokopenko@chromium.org>
Reviewed-by: Benedikt Meurer <bmeurer@chromium.org>
diff --git a/front_end/entrypoints/main/MainImpl.ts b/front_end/entrypoints/main/MainImpl.ts
index 87b089c..3fab27f 100644
--- a/front_end/entrypoints/main/MainImpl.ts
+++ b/front_end/entrypoints/main/MainImpl.ts
@@ -777,7 +777,9 @@
export class MainMenuItem implements UI.Toolbar.Provider {
readonly #itemInternal: UI.Toolbar.ToolbarMenuButton;
constructor() {
- this.#itemInternal = new UI.Toolbar.ToolbarMenuButton(this.#handleContextMenu.bind(this), true, 'main-menu');
+ this.#itemInternal = new UI.Toolbar.ToolbarMenuButton(
+ this.#handleContextMenu.bind(this), /* isIconDropdown */ true, /* useSoftMenu */ true, 'main-menu');
+ this.#itemInternal.setGlyph('dots-vertical');
this.#itemInternal.element.classList.add('main-menu');
this.#itemInternal.setTitle(i18nString(UIStrings.customizeAndControlDevtools));
}
diff --git a/front_end/panels/console/ConsoleView.ts b/front_end/panels/console/ConsoleView.ts
index cc5139f..029a3e0 100644
--- a/front_end/panels/console/ConsoleView.ts
+++ b/front_end/panels/console/ConsoleView.ts
@@ -1650,9 +1650,7 @@
]));
this.levelMenuButton =
- new UI.Toolbar.ToolbarMenuButton(this.appendLevelMenuItems.bind(this), undefined, 'log-level');
- this.levelMenuButton.setGlyph('');
- this.levelMenuButton.turnIntoSelect();
+ new UI.Toolbar.ToolbarMenuButton(this.appendLevelMenuItems.bind(this), undefined, undefined, 'log-level');
this.updateLevelMenuButtonText();
this.messageLevelFiltersSetting.addChangeListener(this.updateLevelMenuButtonText.bind(this));
diff --git a/front_end/panels/emulation/DeviceModeToolbar.ts b/front_end/panels/emulation/DeviceModeToolbar.ts
index cdb35df..b3955ad 100644
--- a/front_end/panels/emulation/DeviceModeToolbar.ts
+++ b/front_end/panels/emulation/DeviceModeToolbar.ts
@@ -190,7 +190,7 @@
* than in the DevTools panel itself. Therefore, we need to fall back to using the
* built-in tooltip by setting the title attribute on the button's element.
*/
-function setTitleForButton(button: UI.Toolbar.ToolbarButton, title: string): void {
+function setTitleForButton(button: UI.Toolbar.ToolbarButton|UI.Toolbar.ToolbarMenuButton, title: string): void {
button.setTitle(title);
button.element.title = title;
}
@@ -314,9 +314,8 @@
private fillLeftToolbar(toolbar: UI.Toolbar.Toolbar): void {
toolbar.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement()));
this.deviceSelectItem =
- new UI.Toolbar.ToolbarMenuButton(this.appendDeviceMenuItems.bind(this), undefined, 'device');
- this.deviceSelectItem.setGlyph('');
- this.deviceSelectItem.turnIntoSelect(true);
+ new UI.Toolbar.ToolbarMenuButton(this.appendDeviceMenuItems.bind(this), undefined, undefined, 'device');
+ this.deviceSelectItem.turnShrinkable();
this.deviceSelectItem.setDarkText();
toolbar.appendToolbarItem(this.deviceSelectItem);
}
@@ -335,30 +334,26 @@
private fillRightToolbar(toolbar: UI.Toolbar.Toolbar): void {
toolbar.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement()));
- this.scaleItem = new UI.Toolbar.ToolbarMenuButton(this.appendScaleMenuItems.bind(this), undefined, 'scale');
+ this.scaleItem =
+ new UI.Toolbar.ToolbarMenuButton(this.appendScaleMenuItems.bind(this), undefined, undefined, 'scale');
setTitleForButton(this.scaleItem, i18nString(UIStrings.zoom));
- this.scaleItem.setGlyph('');
- this.scaleItem.turnIntoSelect();
this.scaleItem.setDarkText();
toolbar.appendToolbarItem(this.scaleItem);
toolbar.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement()));
- this.deviceScaleItem =
- new UI.Toolbar.ToolbarMenuButton(this.appendDeviceScaleMenuItems.bind(this), undefined, 'device-pixel-ratio');
+ this.deviceScaleItem = new UI.Toolbar.ToolbarMenuButton(
+ this.appendDeviceScaleMenuItems.bind(this), undefined, undefined, 'device-pixel-ratio');
this.deviceScaleItem.setVisible(this.showDeviceScaleFactorSetting.get());
setTitleForButton(this.deviceScaleItem, i18nString(UIStrings.devicePixelRatio));
- this.deviceScaleItem.setGlyph('');
- this.deviceScaleItem.turnIntoSelect();
this.deviceScaleItem.setDarkText();
toolbar.appendToolbarItem(this.deviceScaleItem);
toolbar.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement()));
- this.uaItem = new UI.Toolbar.ToolbarMenuButton(this.appendUserAgentMenuItems.bind(this), undefined, 'device-type');
+ this.uaItem =
+ new UI.Toolbar.ToolbarMenuButton(this.appendUserAgentMenuItems.bind(this), undefined, undefined, 'device-type');
this.uaItem.setVisible(this.showUserAgentTypeSetting.get());
setTitleForButton(this.uaItem, i18nString(UIStrings.deviceType));
- this.uaItem.setGlyph('');
- this.uaItem.turnIntoSelect();
this.uaItem.setDarkText();
toolbar.appendToolbarItem(this.uaItem);
@@ -380,10 +375,8 @@
// Show posture toolbar menu for foldable devices.
toolbar.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement()));
- this.postureItem =
- new UI.Toolbar.ToolbarMenuButton(this.appendDevicePostureItems.bind(this), undefined, 'device-posture');
- this.postureItem.setGlyph('');
- this.postureItem.turnIntoSelect();
+ this.postureItem = new UI.Toolbar.ToolbarMenuButton(
+ this.appendDevicePostureItems.bind(this), undefined, undefined, 'device-posture');
this.postureItem.setDarkText();
setTitleForButton(this.postureItem, i18nString(UIStrings.devicePosture));
toolbar.appendToolbarItem(this.postureItem);
@@ -413,7 +406,7 @@
private fillOptionsToolbar(toolbar: UI.Toolbar.Toolbar): void {
toolbar.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement()));
const moreOptionsButton =
- new UI.Toolbar.ToolbarMenuButton(this.appendOptionsMenuItems.bind(this), undefined, 'more-options');
+ new UI.Toolbar.ToolbarMenuButton(this.appendOptionsMenuItems.bind(this), undefined, undefined, 'more-options');
setTitleForButton(moreOptionsButton, i18nString(UIStrings.moreOptions));
toolbar.appendToolbarItem(moreOptionsButton);
}
diff --git a/front_end/panels/mobile_throttling/ThrottlingManager.ts b/front_end/panels/mobile_throttling/ThrottlingManager.ts
index 110e2fc..c374a8a 100644
--- a/front_end/panels/mobile_throttling/ThrottlingManager.ts
+++ b/front_end/panels/mobile_throttling/ThrottlingManager.ts
@@ -227,10 +227,8 @@
}
createMobileThrottlingButton(): UI.Toolbar.ToolbarMenuButton {
- const button = new UI.Toolbar.ToolbarMenuButton(appendItems, undefined, 'mobile-throttling');
+ const button = new UI.Toolbar.ToolbarMenuButton(appendItems, undefined, undefined, 'mobile-throttling');
button.setTitle(i18nString(UIStrings.throttling));
- button.setGlyph('');
- button.turnIntoSelect();
button.setDarkText();
let options: ConditionsList = [];
diff --git a/front_end/panels/sources/SourcesPanel.ts b/front_end/panels/sources/SourcesPanel.ts
index 354370c..279c8dd 100644
--- a/front_end/panels/sources/SourcesPanel.ts
+++ b/front_end/panels/sources/SourcesPanel.ts
@@ -248,8 +248,9 @@
tabbedPane.headerElement().setAttribute(
'jslog',
`${VisualLogging.toolbar('navigator').track({keydown: 'ArrowUp|ArrowLeft|ArrowDown|ArrowRight|Enter|Space'})}`);
- const navigatorMenuButton =
- new UI.Toolbar.ToolbarMenuButton(this.populateNavigatorMenu.bind(this), true, 'more-options');
+ const navigatorMenuButton = new UI.Toolbar.ToolbarMenuButton(
+ this.populateNavigatorMenu.bind(this), /* isIconDropdown */ true, /* useSoftMenu */ true, 'more-options');
+ navigatorMenuButton.setGlyph('dots-vertical');
navigatorMenuButton.setTitle(i18nString(UIStrings.moreOptions));
tabbedPane.rightToolbar().appendToolbarItem(navigatorMenuButton);
tabbedPane.addEventListener(
diff --git a/front_end/ui/legacy/Toolbar.ts b/front_end/ui/legacy/Toolbar.ts
index ed9964c..55e3c59 100644
--- a/front_end/ui/legacy/Toolbar.ts
+++ b/front_end/ui/legacy/Toolbar.ts
@@ -655,6 +655,79 @@
}
}
+export class ToolbarCombobox extends ToolbarItem<ToolbarButton.EventTypes> {
+ private readonly glyphElement: IconButton.Icon.Icon;
+ private textElement: HTMLElement;
+ private text?: string;
+ private glyph?: string;
+
+ constructor(title: string, isIconDropdown?: boolean, jslogContext?: string) {
+ const element = document.createElement('button');
+ element.classList.add('toolbar-button');
+ super(element);
+ this.element.addEventListener('click', this.clicked.bind(this), false);
+ this.element.addEventListener('mousedown', this.mouseDown.bind(this), false);
+
+ this.glyphElement = new IconButton.Icon.Icon();
+ this.glyphElement.className = 'toolbar-glyph hidden';
+ this.element.appendChild(this.glyphElement);
+ this.textElement = this.element.createChild('div', 'toolbar-text hidden');
+
+ this.setTitle(title);
+ if (jslogContext) {
+ this.element.setAttribute('jslog', `${VisualLogging.action().track({click: true}).context(jslogContext)}`);
+ }
+ this.title = '';
+ if (!isIconDropdown) {
+ this.element.classList.add('toolbar-has-dropdown');
+ const dropdownArrowIcon = IconButton.Icon.create('triangle-down', 'toolbar-dropdown-arrow');
+ this.element.appendChild(dropdownArrowIcon);
+ }
+ }
+
+ setText(text: string): void {
+ if (this.text === text) {
+ return;
+ }
+ this.textElement.textContent = text;
+ this.textElement.classList.toggle('hidden', !text);
+ this.text = text;
+ }
+
+ setGlyph(glyph: string): void {
+ if (this.glyph === glyph) {
+ return;
+ }
+ this.glyphElement.name = !glyph ? null : glyph;
+ this.glyphElement.classList.toggle('hidden', !glyph);
+ this.element.classList.toggle('toolbar-has-glyph', Boolean(glyph));
+ this.glyph = glyph;
+ }
+
+ setDarkText(): void {
+ this.element.classList.add('dark-text');
+ }
+
+ turnShrinkable(): void {
+ this.element.classList.add('toolbar-has-dropdown-shrinkable');
+ }
+
+ clicked(event: Event): void {
+ if (!this.enabled) {
+ return;
+ }
+ this.dispatchEventToListeners(ToolbarButton.Events.Click, event);
+ event.consume();
+ }
+
+ protected mouseDown(event: MouseEvent): void {
+ if (!this.enabled) {
+ return;
+ }
+ this.dispatchEventToListeners(ToolbarButton.Events.MouseDown, event);
+ }
+}
+
export namespace ToolbarButton {
export const enum Events {
Click = 'Click',
@@ -855,12 +928,14 @@
}
}
-export class ToolbarMenuButton extends ToolbarButton {
+export class ToolbarMenuButton extends ToolbarCombobox {
private readonly contextMenuHandler: (arg0: ContextMenu) => void;
private readonly useSoftMenu: boolean;
private triggerTimeout?: number;
- constructor(contextMenuHandler: (arg0: ContextMenu) => void, useSoftMenu?: boolean, jslogContext?: string) {
- super('', 'dots-vertical', undefined, jslogContext);
+ constructor(
+ contextMenuHandler: (arg0: ContextMenu) => void, isIconDropdown?: boolean, useSoftMenu?: boolean,
+ jslogContext?: string) {
+ super('', isIconDropdown, jslogContext);
if (jslogContext) {
this.element.setAttribute('jslog', `${VisualLogging.dropDown().track({click: true}).context(jslogContext)}`);
}
diff --git a/front_end/ui/legacy/ViewManager.ts b/front_end/ui/legacy/ViewManager.ts
index c96db6a..4fb5920 100644
--- a/front_end/ui/legacy/ViewManager.ts
+++ b/front_end/ui/legacy/ViewManager.ts
@@ -638,7 +638,9 @@
}
enableMoreTabsButton(): ToolbarMenuButton {
- const moreTabsButton = new ToolbarMenuButton(this.appendTabsToMenu.bind(this), undefined, 'more-tabs');
+ const moreTabsButton =
+ new ToolbarMenuButton(this.appendTabsToMenu.bind(this), /* isIconDropdown */ true, undefined, 'more-tabs');
+ moreTabsButton.setGlyph('dots-vertical');
this.tabbedPaneInternal.leftToolbar().appendToolbarItem(moreTabsButton);
this.tabbedPaneInternal.disableOverflowMenu();
return moreTabsButton;
diff --git a/front_end/ui/legacy/softDropDownButton.css b/front_end/ui/legacy/softDropDownButton.css
index 56d2ffe..1e2c3d34 100644
--- a/front_end/ui/legacy/softDropDownButton.css
+++ b/front_end/ui/legacy/softDropDownButton.css
@@ -5,20 +5,24 @@
*/
button.soft-dropdown {
- height: 26px;
+ height: var(--sys-size-9);
text-align: left;
position: relative;
border: none;
background: none;
max-width: 120px;
+
+ devtools-icon {
+ top: 1px;
+ }
}
button.soft-dropdown[disabled] {
- opacity: 50%;
+ background: var(--sys-color-state-disabled-container);
+ color: var(--sys-color-state-disabled);
}
button.soft-dropdown > .title {
- padding-right: 5px;
flex: 0 1 auto;
overflow: hidden;
text-overflow: ellipsis;
diff --git a/front_end/ui/legacy/toolbar.css b/front_end/ui/legacy/toolbar.css
index 186d99c..093e63e 100644
--- a/front_end/ui/legacy/toolbar.css
+++ b/front_end/ui/legacy/toolbar.css
@@ -83,7 +83,7 @@
.toolbar-dropdown-arrow {
pointer-events: none;
flex: none;
- margin-left: -4px;
+ top: 1px;
}
.toolbar-button.dark-text .toolbar-dropdown-arrow {
@@ -127,8 +127,39 @@
.toolbar-has-dropdown {
justify-content: space-between;
- padding: 0 3px 0 5px;
- border: 1px solid transparent;
+ height: var(--sys-size-9);
+ padding: 0 var(--sys-size-3) 0 var(--sys-size-5);
+ gap: var(--sys-size-2);
+ border-radius: var(--sys-shape-corner-extra-small);
+
+ &:hover::after,
+ &:active::before {
+ content: "";
+ height: 100%;
+ width: 100%;
+ border-radius: inherit;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+ &:hover::after {
+ background-color: var(--sys-color-state-hover-on-subtle);
+ }
+
+ &:active::before {
+ background-color: var(--sys-color-state-ripple-neutral-on-subtle);
+ }
+
+ &:focus-visible {
+ border: 2px solid var(--sys-color-state-focus-ring);
+ }
+
+ &[disabled] {
+ pointer-events: none;
+ background-color: var(--sys-color-state-disabled-container);
+ color: var(--sys-color-state-disabled);
+ }
}
.toolbar-has-dropdown-shrinkable {
@@ -136,7 +167,7 @@
}
.toolbar-has-dropdown .toolbar-text {
- margin: 0 4px 0 0;
+ margin: 0;
text-overflow: ellipsis;
flex: auto;
overflow: hidden;
@@ -159,7 +190,7 @@
outline: auto 5px -webkit-focus-ring-color;
}
-:not(.toolbar-render-as-links) .toolbar-button:focus-visible::before {
+:not(.toolbar-render-as-links) .toolbar-button:not(.toolbar-has-dropdown):focus-visible::before {
position: absolute;
top: 2px;
bottom: 2px;
@@ -319,20 +350,25 @@
margin-bottom: 2px;
}
-select.toolbar-item:disabled {
- opacity: 50%;
-}
-
button.toolbar-item:focus-visible,
select.toolbar-item:focus-visible {
background: var(--sys-color-state-hover-on-subtle);
border-radius: 2px;
+
+ &.toolbar-has-dropdown {
+ background: none;
+ border-radius: var(--sys-shape-corner-extra-small);
+ }
}
select.toolbar-item:focus-visible > * {
background: var(--sys-color-cdt-base-container);
border-radius: 7px;
}
+
+select.toolbar-item:not(.toolbar-has-dropdown):disabled {
+ opacity: 50%;
+}
/* Input */
.toolbar-input {
