Use split dropdown action

src/vs/base/browser/ui/actionbar/actionbar.css

@@ -96,3 +96,15 @@
 	justify-content: center;
 	margin-right: 10px;
 }
+
+.monaco-action-bar .action-item.action-dropdown-item {
+	display: flex;
+}
+
+.monaco-action-bar .action-item.action-dropdown-item > .action-label {
+	margin-right: 1px;
+}
+
+.monaco-action-bar .action-item.action-dropdown-item > .monaco-dropdown {
+	margin-right: 4px;
+}

src/vs/base/browser/ui/dropdown/dropdownActionViewItem.ts

@@ -4,13 +4,13 @@
  *--------------------------------------------------------------------------------------------*/
 
 import 'vs/css!./dropdown';
-import { IAction, IActionRunner, IActionViewItemProvider } from 'vs/base/common/actions';
+import { Action, IAction, IActionRunner, IActionViewItemProvider } from 'vs/base/common/actions';
 import { IDisposable } from 'vs/base/common/lifecycle';
 import { AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview';
 import { ResolvedKeybinding } from 'vs/base/common/keyCodes';
 import { append, $ } from 'vs/base/browser/dom';
 import { Emitter } from 'vs/base/common/event';
-import { BaseActionViewItem, IBaseActionViewItemOptions } from 'vs/base/browser/ui/actionbar/actionViewItems';
+import { ActionViewItem, BaseActionViewItem, IActionViewItemOptions, IBaseActionViewItemOptions } from 'vs/base/browser/ui/actionbar/actionViewItems';
 import { IActionProvider, DropdownMenu, IDropdownMenuOptions, ILabelRenderer } from 'vs/base/browser/ui/dropdown/dropdown';
 import { IContextMenuProvider } from 'vs/base/browser/contextmenu';
 
@@ -135,3 +135,32 @@ export class DropdownMenuActionViewItem extends BaseActionViewItem {
 		}
 	}
 }
+
+export interface IActionWithDropdownActionViewItemOptions extends IActionViewItemOptions {
+	readonly menuActionsOrProvider: readonly IAction[] | IActionProvider;
+	readonly menuActionClassNames?: string[];
+}
+
+export class ActionWithDropdownActionViewItem extends ActionViewItem {
+
+	protected dropdownMenuActionViewItem: DropdownMenuActionViewItem | undefined;
+
+	constructor(
+		context: unknown,
+		action: IAction,
+		options: IActionWithDropdownActionViewItemOptions,
+		private readonly contextMenuProvider: IContextMenuProvider
+	) {
+		super(context, action, options);
+	}
+
+	render(container: HTMLElement): void {
+		super.render(container);
+		if (this.element) {
+			this.element.classList.add('action-dropdown-item');
+			this.dropdownMenuActionViewItem = new DropdownMenuActionViewItem(new Action('dropdownAction', undefined), (<IActionWithDropdownActionViewItemOptions>this.options).menuActionsOrProvider, this.contextMenuProvider, { classNames: ['dropdown', 'codicon-chevron-down', ...(<IActionWithDropdownActionViewItemOptions>this.options).menuActionClassNames || []] });
+			this.dropdownMenuActionViewItem.render(this.element);
+		}
+	}
+
+}

src/vs/workbench/contrib/extensions/browser/extensionEditor.ts

@@ -27,7 +27,7 @@ import { IExtensionsWorkbenchService, IExtensionsViewPaneContainer, VIEWLET_ID,
 import { RatingsWidget, InstallCountWidget, RemoteBadgeWidget } from 'vs/workbench/contrib/extensions/browser/extensionsWidgets';
 import { EditorOptions, IEditorOpenContext } from 'vs/workbench/common/editor';
 import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
-import { CombinedInstallAction, UpdateAction, ExtensionEditorDropDownAction, ReloadAction, MaliciousStatusLabelAction, IgnoreExtensionRecommendationAction, UndoIgnoreExtensionRecommendationAction, EnableDropDownAction, DisableDropDownAction, StatusLabelAction, SetFileIconThemeAction, SetColorThemeAction, RemoteInstallAction, ExtensionToolTipAction, SystemDisabledWarningAction, LocalInstallAction, SyncIgnoredIconAction, SetProductIconThemeAction } from 'vs/workbench/contrib/extensions/browser/extensionsActions';
+import { CombinedInstallAction, UpdateAction, ReloadAction, MaliciousStatusLabelAction, IgnoreExtensionRecommendationAction, UndoIgnoreExtensionRecommendationAction, EnableDropDownAction, DisableDropDownAction, StatusLabelAction, SetFileIconThemeAction, SetColorThemeAction, RemoteInstallAction, ExtensionToolTipAction, SystemDisabledWarningAction, LocalInstallAction, SyncIgnoredIconAction, SetProductIconThemeAction, ActionWithDropDownAction } from 'vs/workbench/contrib/extensions/browser/extensionsActions';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
 import { IOpenerService, matchesScheme } from 'vs/platform/opener/common/opener';
@@ -59,6 +59,8 @@ import { TokenizationRegistry } from 'vs/editor/common/modes';
 import { generateTokensCSSForColorMap } from 'vs/editor/common/modes/supports/tokenization';
 import { editorBackground } from 'vs/platform/theme/common/colorRegistry';
 import { registerAction2, Action2 } from 'vs/platform/actions/common/actions';
+import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
+import { ExtensionActionWithDropdownActionViewItem } from 'vs/workbench/contrib/extensions/browser/extensionsActionViewItems';
 
 function removeEmbeddedSVGs(documentContent: string): string {
 	const newDocument = new DOMParser().parseFromString(documentContent, 'text/html');
@@ -195,6 +197,7 @@ export class ExtensionEditor extends EditorPane {
 		@IWorkbenchThemeService private readonly workbenchThemeService: IWorkbenchThemeService,
 		@IWebviewService private readonly webviewService: IWebviewService,
 		@IModeService private readonly modeService: IModeService,
+		@IContextMenuService private readonly contextMenuService: IContextMenuService,
 	) {
 		super(ExtensionEditor.ID, telemetryService, themeService, storageService);
 		this.extensionReadme = null;
@@ -249,8 +252,8 @@ export class ExtensionEditor extends EditorPane {
 		const extensionActionBar = this._register(new ActionBar(extensionActions, {
 			animated: false,
 			actionViewItemProvider: (action: IAction) => {
-				if (action instanceof ExtensionEditorDropDownAction) {
-					return action.createActionViewItem();
+				if (action instanceof ActionWithDropDownAction) {
+					return new ExtensionActionWithDropdownActionViewItem(action, { icon: true, label: true, menuActionsOrProvider: { getActions: () => action.menuActions }, menuActionClassNames: ActionWithDropDownAction.Class.split(' ') }, this.contextMenuService);
 				}
 				return undefined;
 			}

src/vs/workbench/contrib/extensions/browser/extensionsActionViewItems.ts

+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { IContextMenuProvider } from 'vs/base/browser/contextmenu';
+import { ActionWithDropdownActionViewItem, IActionWithDropdownActionViewItemOptions } from 'vs/base/browser/ui/dropdown/dropdownActionViewItem';
+import { ActionWithDropDownAction } from 'vs/workbench/contrib/extensions/browser/extensionsActions';
+
+export class ExtensionActionWithDropdownActionViewItem extends ActionWithDropdownActionViewItem {
+
+	constructor(
+		action: ActionWithDropDownAction,
+		options: IActionWithDropdownActionViewItemOptions,
+		contextMenuProvider: IContextMenuProvider
+	) {
+		super(null, action, options, contextMenuProvider);
+	}
+
+	render(container: HTMLElement): void {
+		super.render(container);
+		this.updateClass();
+	}
+
+	updateClass(): void {
+		super.updateClass();
+		if (this.dropdownMenuActionViewItem && this.dropdownMenuActionViewItem.element) {
+			this.dropdownMenuActionViewItem.element.classList.toggle('hide', (<ActionWithDropDownAction>this._action).menuActions.length === 0);
+		}
+	}
+
+}

src/vs/workbench/contrib/extensions/browser/extensionsActions.ts

@@ -62,9 +62,14 @@ import { Codicon } from 'vs/base/common/codicons';
 import { IViewsService } from 'vs/workbench/common/views';
 import { IActionViewItemOptions, ActionViewItem } from 'vs/base/browser/ui/actionbar/actionViewItems';
 import { EXTENSIONS_CONFIG } from 'vs/workbench/services/extensionRecommendations/common/workspaceExtensionsConfig';
+import { isPromiseCanceledError } from 'vs/base/common/errors';
 
 const promptDownloadManually = (extension: IGalleryExtension | undefined, message: string, error: Error, instantiationService: IInstantiationService): Promise<any> => {
 	return instantiationService.invokeFunction(accessor => {
+		if (isPromiseCanceledError(error)) {
+			return Promise.resolve();
+		}
+
 		const productService = accessor.get(IProductService);
 		const openerService = accessor.get(IOpenerService);
 		const notificationService = accessor.get(INotificationService);
@@ -1003,18 +1008,21 @@ export class DisableGloballyAction extends ExtensionAction {
 	}
 }
 
-export abstract class ExtensionEditorDropDownAction extends ExtensionDropDownAction {
+export abstract class ActionWithDropDownAction extends ExtensionAction {
+
+	static readonly Class = `${ExtensionAction.LABEL_ACTION_CLASS} action-dropdown`;
+	private static readonly EmptyDropdownClass = `${ActionWithDropDownAction.Class} empty-dropdown`;
+
+	private action: IAction | undefined;
 
-	private static readonly EnabledClass = `${ExtensionAction.LABEL_ACTION_CLASS} extension-editor-dropdown-action`;
-	private static readonly EnabledDropDownClass = `${ExtensionEditorDropDownAction.EnabledClass} dropdown enable`;
-	private static readonly DisabledClass = `${ExtensionEditorDropDownAction.EnabledClass} disabled`;
+	private _menuActions: IAction[] = [];
+	get menuActions(): IAction[] { return [...this._menuActions]; }
 
 	constructor(
-		id: string, private readonly initialLabel: string,
-		readonly actions: ExtensionAction[],
-		@IInstantiationService instantiationService: IInstantiationService
+		id: string, label: string,
+		private readonly actions: ExtensionAction[],
 	) {
-		super(id, initialLabel, ExtensionEditorDropDownAction.DisabledClass, false, false, instantiationService);
+		super(id, label);
 		this.update();
 	}
 
@@ -1022,32 +1030,19 @@ export abstract class ExtensionEditorDropDownAction extends ExtensionDropDownAct
 		this.actions.forEach(a => a.extension = this.extension);
 		this.actions.forEach(a => a.update());
 		const enabledActions = this.actions.filter(a => a.enabled);
-		this.enabled = enabledActions.length > 0;
-		if (this.enabled) {
-			if (enabledActions.length === 1) {
-				this.label = enabledActions[0].label;
-				this.class = ExtensionEditorDropDownAction.EnabledClass;
-			} else {
-				this.label = this.initialLabel;
-				this.class = ExtensionEditorDropDownAction.EnabledDropDownClass;
-			}
-		} else {
-			this.class = ExtensionEditorDropDownAction.DisabledClass;
-		}
+		this.action = enabledActions[0];
+		this._menuActions = enabledActions.slice(1);
+		this.enabled = !!this.action;
+		this.class = this._menuActions.length ? ActionWithDropDownAction.Class : ActionWithDropDownAction.EmptyDropdownClass;
 	}
 
-	public run(): Promise<any> {
+	run(): Promise<void> {
 		const enabledActions = this.actions.filter(a => a.enabled);
-		if (enabledActions.length === 1) {
-			enabledActions[0].run();
-		} else {
-			return super.run({ actionGroups: [this.actions], disposeActionsOnHide: false });
-		}
-		return Promise.resolve();
+		return enabledActions[0].run();
 	}
 }
 
-export class EnableDropDownAction extends ExtensionEditorDropDownAction {
+export class EnableDropDownAction extends ActionWithDropDownAction {
 
 	constructor(
 		@IInstantiationService instantiationService: IInstantiationService
@@ -1055,11 +1050,11 @@ export class EnableDropDownAction extends ExtensionEditorDropDownAction {
 		super('extensions.enable', localize('enableAction', "Enable"), [
 			instantiationService.createInstance(EnableGloballyAction),
 			instantiationService.createInstance(EnableForWorkspaceAction)
-		], instantiationService);
+		]);
 	}
 }
 
-export class DisableDropDownAction extends ExtensionEditorDropDownAction {
+export class DisableDropDownAction extends ActionWithDropDownAction {
 
 	constructor(
 		runningExtensions: IExtensionDescription[],
@@ -1068,8 +1063,9 @@ export class DisableDropDownAction extends ExtensionEditorDropDownAction {
 		super('extensions.disable', localize('disableAction', "Disable"), [
 			instantiationService.createInstance(DisableGloballyAction, runningExtensions),
 			instantiationService.createInstance(DisableForWorkspaceAction, runningExtensions)
-		], instantiationService);
+		]);
 	}
+
 }
 
 export class CheckForUpdatesAction extends Action {

src/vs/workbench/contrib/extensions/browser/media/extensionActions.css

@@ -10,13 +10,15 @@
 	text-overflow: ellipsis;
 }
 
-.monaco-action-bar .action-item .action-label.extension-action.label {
+.monaco-action-bar .action-item .action-label.extension-action.label,
+.monaco-action-bar .action-dropdown-item .action-label.extension-action.label {
 	padding: 0 5px;
 	outline-offset: 2px;
 }
 
 .monaco-action-bar .action-item .action-label.extension-action.text,
-.monaco-action-bar .action-item .action-label.extension-action.label {
+.monaco-action-bar .action-item .action-label.extension-action.label,
+.monaco-action-bar .action-dropdown-item .action-label.extension-action.label {
 	line-height: 14px;
 	margin-top: 2px;
 }
@@ -27,8 +29,7 @@
 }
 
 .monaco-action-bar .action-item .action-label.extension-action.multiserver.install:after,
-.monaco-action-bar .action-item .action-label.extension-action.multiserver.update:after,
-.monaco-action-bar .action-item .action-label.extension-action.extension-editor-dropdown-action.dropdown:after {
+.monaco-action-bar .action-item .action-label.extension-action.multiserver.update:after {
 	content: '▼';
 	padding-left: 2px;
 	font-size: 80%;
@@ -41,7 +42,8 @@
 .monaco-action-bar .action-item.disabled .action-label.extension-action.uninstall:not(.uninstalling),
 .monaco-action-bar .action-item.disabled .action-label.extension-action.update,
 .monaco-action-bar .action-item.disabled .action-label.extension-action.theme,
-.monaco-action-bar .action-item.disabled .action-label.extension-action.extension-editor-dropdown-action,
+.monaco-action-bar .action-item.action-dropdown-item.disabled,
+.monaco-action-bar .action-item.action-dropdown-item .action-label.extension-action.hide,
 .monaco-action-bar .action-item.disabled .action-label.extension-action.reload,
 .monaco-action-bar .action-item.disabled .action-label.disable-status.hide,
 .monaco-action-bar .action-item.disabled .action-label.system-disable.hide,

src/vs/workbench/contrib/extensions/browser/media/extensionEditor.css

@@ -153,16 +153,26 @@
 	justify-content: flex-start;
 }
 
-.extension-editor > .header > .details > .actions > .monaco-action-bar > .actions-container > .action-item > .extension-action {
+.extension-editor > .header > .details > .actions > .monaco-action-bar > .actions-container > .action-item:not(.action-dropdown-item) > .extension-action,
+.extension-editor > .header > .details > .actions > .monaco-action-bar > .actions-container > .action-item.action-dropdown-item .extension-action.action-label.dropdown,
+.extension-editor > .header > .details > .actions > .monaco-action-bar > .actions-container > .action-item.action-dropdown-item > .extension-action.action-label.empty-dropdown {
 	margin-right: 8px;
 }
 
-.extension-editor > .header > .details > .actions > .monaco-action-bar > .actions-container > .action-item > .extension-action.label {
+.extension-editor > .header > .details > .actions > .monaco-action-bar > .actions-container > .action-item > .extension-action.label,
+.extension-editor > .header > .details > .actions > .monaco-action-bar > .actions-container > .action-item.action-dropdown-item .extension-action.label {
 	font-weight: 600;
-	padding: 1px 6px;
 	max-width: 300px;
 }
 
+.extension-editor > .header > .details > .actions > .monaco-action-bar > .actions-container > .action-item > .extension-action.label {
+	padding: 1px 6px;
+}
+
+.extension-editor > .header > .details > .actions > .monaco-action-bar > .actions-container > .action-item.action-dropdown-item .extension-action.dropdown.label {
+	padding: 1px 3px;
+}
+
 .extension-editor > .header > .details > .actions > .monaco-action-bar > .actions-container > .action-item > .action-label.system-disable {
 	margin-right: 0;
 }