Change:
For reuse by other code areas
Also polish styling including a hover over the joint buttons
Mockup: !
Fixed in

Discussion:
.monaco-dropdown > .dropdown-label > .action-label.disabled { cursor: default; } <ins> .monaco-dropdown-with-primary { display: flex; flex-direction: row; border-radius: 5px; } .monaco-dropdown-with-primary > .action-label { margin-right: 0; } .monaco-dropdown-with-primary > .monaco-dropdown > .dropdown-label .codicon[class*='codicon-'] { font-size: 12px; padding-left: 0px; padding-right: 0px; line-height: 16px; margin-left: -4px; } </ins>

.monaco-action-bar:not(.vertical) .action-label:not(.disabled):hover { background-color: ${toolbarHoverBackgroundColor}; } <ins> .monaco-action-bar:not(.vertical) .monaco-dropdown-with-primary:not(.disabled):hover { background-color: ${toolbarHoverBackgroundColor}; } </ins> `); }

import { PANEL_BACKGROUND, SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme'; import { IMenu, IMenuService, MenuId, MenuItemAction } from 'vs/platform/actions/common/actions'; import { ITerminalProfile, TERMINAL_COMMAND_ID } from 'vs/workbench/contrib/terminal/common/terminal'; <del> import { BaseActionViewItem, SelectActionViewItem } from 'vs/base/browser/ui/actionbar/actionViewItems'; </del> <ins> import { ActionViewItem, BaseActionViewItem, SelectActionViewItem } from 'vs/base/browser/ui/actionbar/actionViewItems'; </ins> import { ITerminalContributionService } from 'vs/workbench/contrib/terminal/common/terminalExtensionPoints'; import { attachSelectBoxStyler, attachStylerCallback } from 'vs/platform/theme/common/styler'; import { selectBorder } from 'vs/platform/theme/common/colorRegistry';

import { TerminalTabbedView } from 'vs/workbench/contrib/terminal/browser/terminalTabbedView'; import { DropdownMenuActionViewItem } from 'vs/base/browser/ui/dropdown/dropdownActionViewItem'; import { Codicon } from 'vs/base/common/codicons'; <del> import { MenuEntryActionViewItem } from 'vs/platform/actions/browser/menuEntryActionViewItem'; </del> import { ICommandService } from 'vs/platform/commands/common/commands'; <ins> import { IContextMenuProvider } from 'vs/base/browser/contextmenu'; </ins> export class TerminalViewPane extends ViewPane { private _actions: IAction[] | undefined;

@IThemeService themeService: IThemeService, @ITelemetryService telemetryService: ITelemetryService, @INotificationService private readonly _notificationService: INotificationService, <del> @IKeybindingService private readonly _keybindingService: IKeybindingService, </del> @IOpenerService openerService: IOpenerService, @IMenuService private readonly _menuService: IMenuService, @ICommandService private readonly _commandService: ICommandService

this._tabButtons.dispose(); } const actions = this._getInitialTabActionBarArgs(); <del> this._tabButtons = new DropdownWithPrimaryActionViewItem(actions.primaryAction, actions.dropdownAction, actions.dropdownMenuActions, actions.className, this._contextMenuService, this._keybindingService, this._notificationService, actions.dropdownIcon || 'codicon-chevron-down'); </del> <ins> this._tabButtons = new DropdownWithPrimaryActionViewItem(actions.primaryAction, actions.dropdownAction, actions.dropdownMenuActions, actions.className, this._contextMenuService, actions.dropdownIcon || 'codicon-chevron-down'); </ins> return this._tabButtons; } return super.getActionViewItem(action);

} export class DropdownWithPrimaryActionViewItem extends BaseActionViewItem { <del> private _primaryAction: MenuEntryActionViewItem; </del> <ins> private _primaryAction: ActionViewItem; </ins> private _dropdown: DropdownMenuActionViewItem; private _container: HTMLElement | null = null; constructor( <del> primaryAction: MenuItemAction, dropdownAction: MenuItemAction, </del> <ins> primaryAction: IAction, dropdownAction: IAction, </ins> dropdownMenuActions: IAction[], private readonly _className: string, <del> @IContextMenuService private readonly _contextMenuService: IContextMenuService, @IKeybindingService private readonly _keybindingService: IKeybindingService, @INotificationService private readonly _notificationService: INotificationService, </del> <ins> private readonly _contextMenuProvider: IContextMenuProvider, </ins> dropdownIcon?: string ) { super(null, primaryAction); <del> this._primaryAction = new MenuEntryActionViewItem(primaryAction, this._keybindingService, this._notificationService); this._dropdown = new DropdownMenuActionViewItem(dropdownAction, dropdownMenuActions, _contextMenuService, { menuAsChild: true, classNames: ['codicon', dropdownIcon || 'codicon-chevron-down'] }); </del> <ins> this._primaryAction = new ActionViewItem(undefined, primaryAction, { icon: true, label: false }); this._dropdown = new DropdownMenuActionViewItem(dropdownAction, dropdownMenuActions, this._contextMenuProvider, { menuAsChild: true, classNames: ['codicon', dropdownIcon || 'codicon-chevron-down'] }); </ins> } override render(container: HTMLElement): void {

super.render(this._container); this.element = DOM.append(this._container, DOM.$('')); this.element.className = this._className; <ins> this.element.classList.add('monaco-dropdown-with-primary'); </ins> this._primaryAction.render(this.element); this._dropdown.render(this.element); <del> this._stylize(); } private _stylize(): void { if (!this.element || !this._dropdown.element || !this._primaryAction.element) { return; } const elementStyle = this.element.style; elementStyle.display = 'flex'; elementStyle.flexDirection = 'row'; const dropdownStyle = this._dropdown.element.style; dropdownStyle.paddingLeft = '0px'; dropdownStyle.fontSize = '12px'; dropdownStyle.maxWidth = '6px'; dropdownStyle.lineHeight = '16px'; dropdownStyle.marginLeft = '0px'; const primaryActionStyle = this._primaryAction.element.style; primaryActionStyle.marginRight = '0px'; if (this._primaryAction.element.children[0]) { (this._primaryAction.element.children[0] as HTMLElement).style.paddingRight = '0px'; } </del> } update(dropdownAction: MenuItemAction, dropdownMenuActions: IAction[], dropdownIcon?: string): void { this._dropdown?.dispose(); <del> this._dropdown = new DropdownMenuActionViewItem(dropdownAction, dropdownMenuActions, this._contextMenuService, { menuAsChild: true, classNames: ['codicon', dropdownIcon || 'codicon-chevron-down'] }); </del> <ins> this._dropdown = new DropdownMenuActionViewItem(dropdownAction, dropdownMenuActions, this._contextMenuProvider, { menuAsChild: true, classNames: ['codicon', dropdownIcon || 'codicon-chevron-down'] }); </ins> if (this.element) { this._dropdown.render(this.element); <del> this._stylize(); </del> } } }