Use submenu for switch output action (#162966)

* #162304 Use submenu for switch output action

* fix monaco editor checks

src/vs/base/browser/ui/actionbar/actionViewItems.ts

@@ -435,9 +435,11 @@ export class SelectActionViewItem extends BaseActionViewItem {
 	}
 
 	private registerListeners(): void {
-		this._register(this.selectBox.onDidSelect(e => {
-			this.actionRunner.run(this._action, this.getActionContext(e.selected, e.index));
-		}));
+		this._register(this.selectBox.onDidSelect(e => this.runAction(e.selected, e.index)));
+	}
+
+	protected runAction(option: string, index: number): void {
+		this.actionRunner.run(this._action, this.getActionContext(option, index));
 	}
 
 	protected getActionContext(option: string, index: number) {

src/vs/base/browser/ui/selectBox/selectBox.ts

@@ -14,6 +14,7 @@ import { Event } from 'vs/base/common/event';
 import { IDisposable } from 'vs/base/common/lifecycle';
 import { deepClone } from 'vs/base/common/objects';
 import { isMacintosh } from 'vs/base/common/platform';
+import { IThemable } from 'vs/base/common/styler';
 import 'vs/css!./selectBox';
 
 
@@ -77,7 +78,7 @@ export interface ISelectData {
 	index: number;
 }
 
-export class SelectBox extends Widget implements ISelectBoxDelegate {
+export class SelectBox extends Widget implements ISelectBoxDelegate, IThemable {
 	private selectBoxDelegate: ISelectBoxDelegate;
 
 	constructor(options: ISelectOptionItem[], selected: number, contextViewProvider: IContextViewProvider, styles: ISelectBoxStyles = deepClone(defaultStyles), selectBoxOptions?: ISelectBoxOptions) {

src/vs/platform/actions/browser/menuEntryActionViewItem.ts

@@ -5,7 +5,7 @@
 
 import { $, addDisposableListener, append, asCSSUrl, EventType, ModifierKeyEmitter, prepend } from 'vs/base/browser/dom';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
-import { ActionViewItem, BaseActionViewItem } from 'vs/base/browser/ui/actionbar/actionViewItems';
+import { ActionViewItem, BaseActionViewItem, SelectActionViewItem } from 'vs/base/browser/ui/actionbar/actionViewItems';
 import { DropdownMenuActionViewItem, IDropdownMenuActionViewItemOptions } from 'vs/base/browser/ui/dropdown/dropdownActionViewItem';
 import { ActionRunner, IAction, IRunEvent, Separator, SubmenuAction } from 'vs/base/common/actions';
 import { Event } from 'vs/base/common/event';
@@ -18,7 +18,7 @@ import { localize } from 'vs/nls';
 import { IMenu, IMenuActionOptions, IMenuService, MenuItemAction, SubmenuItemAction } from 'vs/platform/actions/common/actions';
 import { ICommandAction, isICommandActionToggleInfo } from 'vs/platform/action/common/action';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
-import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
+import { IContextMenuService, IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { INotificationService } from 'vs/platform/notification/common/notification';
@@ -27,6 +27,8 @@ import { IThemeService, ThemeIcon } from 'vs/platform/theme/common/themeService'
 import { isDark } from 'vs/platform/theme/common/theme';
 import { IHoverDelegate } from 'vs/base/browser/ui/iconLabel/iconHoverDelegate';
 import { assertType } from 'vs/base/common/types';
+import { attachSelectBoxStyler, attachStylerCallback } from 'vs/platform/theme/common/styler';
+import { selectBorder } from 'vs/platform/theme/common/colorRegistry';
 
 export function createAndFillInContextMenuActions(menu: IMenu, options: IMenuActionOptions | undefined, target: IAction[] | { primary: IAction[]; secondary: IAction[] }, primaryGroup?: string): void {
 	const groups = menu.getActions(options);
@@ -468,17 +470,52 @@ export class DropdownWithDefaultActionViewItem extends BaseActionViewItem {
 	}
 }
 
+class SubmenuEntrySelectActionViewItem extends SelectActionViewItem {
+
+	constructor(
+		action: SubmenuItemAction,
+		@IThemeService private readonly themeService: IThemeService,
+		@IContextViewService contextViewService: IContextViewService
+	) {
+		super(null, action, action.actions.map(a => ({
+			text: a.id === Separator.ID ? '\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500' : a.label,
+			isDisabled: !a.enabled,
+		})), 0, contextViewService, { ariaLabel: action.tooltip, optionsAsChildren: true });
+		this._register(attachSelectBoxStyler(this.selectBox, themeService));
+		this.select(Math.max(0, action.actions.findIndex(a => a.checked)));
+	}
+
+	override render(container: HTMLElement): void {
+		super.render(container);
+		this._register(attachStylerCallback(this.themeService, { selectBorder }, colors => {
+			container.style.borderColor = colors.selectBorder ? `${colors.selectBorder}` : '';
+		}));
+	}
+
+	protected override runAction(option: string, index: number): void {
+		const action = (this.action as SubmenuItemAction).actions[index];
+		if (action) {
+			this.actionRunner.run(action);
+		}
+	}
+
+}
+
 /**
  * Creates action view items for menu actions or submenu actions.
  */
 export function createActionViewItem(instaService: IInstantiationService, action: IAction, options?: IDropdownMenuActionViewItemOptions | IMenuEntryActionViewItemOptions): undefined | MenuEntryActionViewItem | SubmenuEntryActionViewItem | BaseActionViewItem {
 	if (action instanceof MenuItemAction) {
 		return instaService.createInstance(MenuEntryActionViewItem, action, options);
 	} else if (action instanceof SubmenuItemAction) {
-		if (action.item.rememberDefaultAction) {
-			return instaService.createInstance(DropdownWithDefaultActionViewItem, action, options);
+		if (action.item.isSelection) {
+			return instaService.createInstance(SubmenuEntrySelectActionViewItem, action);
 		} else {
-			return instaService.createInstance(SubmenuEntryActionViewItem, action, options);
+			if (action.item.rememberDefaultAction) {
+				return instaService.createInstance(DropdownWithDefaultActionViewItem, action, options);
+			} else {
+				return instaService.createInstance(SubmenuEntryActionViewItem, action, options);
+			}
 		}
 	} else {
 		return undefined;

src/vs/platform/actions/common/actions.ts

@@ -32,6 +32,7 @@ export interface ISubmenuItem {
 	when?: ContextKeyExpression;
 	group?: 'navigation' | string;
 	order?: number;
+	isSelection?: boolean;
 	rememberDefaultAction?: boolean;	// for dropdown menu: if true the last executed action is remembered as the default action
 }