debug: StartDebugActionItem

fixes #16258

src/vs/workbench/parts/debug/browser/debugActionItems.ts

@@ -3,38 +3,87 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import errors = require('vs/base/common/errors');
-import { IAction } from 'vs/base/common/actions';
-import { SelectActionItem } from 'vs/base/browser/ui/actionbar/actionbar';
+import * as lifecycle from 'vs/base/common/lifecycle';
+import { IAction, IActionRunner } from 'vs/base/common/actions';
+import * as dom from 'vs/base/browser/dom';
+import { SelectBox } from 'vs/base/browser/ui/selectBox/selectBox';
+import { SelectActionItem, IActionItem } from 'vs/base/browser/ui/actionbar/actionbar';
+import { EventEmitter } from 'vs/base/common/eventEmitter';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
-import { IDebugService, IGlobalConfig, NO_CONFIGURATIONS_LABEL } from 'vs/workbench/parts/debug/common/debug';
+import { IDebugService, IGlobalConfig, NO_CONFIGURATIONS_LABEL, State } from 'vs/workbench/parts/debug/common/debug';
 
-export class SelectConfigurationActionItem extends SelectActionItem {
+const $ = dom.$;
+
+export class StartDebugActionItem extends EventEmitter implements IActionItem {
+
+	public actionRunner: IActionRunner;
+	private container: HTMLElement;
+	private nameContainer: HTMLElement;
+	private selectBox: SelectBox;
+	private toDispose: lifecycle.IDisposable[];
 
 	constructor(
-		action: IAction,
+		private context: any,
+		private action: IAction,
 		@IDebugService private debugService: IDebugService,
 		@IConfigurationService private configurationService: IConfigurationService
 	) {
-		super(null, action, [], -1);
+		super();
+		this.toDispose = [];
+		this.selectBox = new SelectBox([], -1);
+		this.registerListeners();
+	}
 
-		this.toDispose.push(configurationService.onDidUpdateConfiguration(e => {
-			this.updateOptions(true);
+	private registerListeners(): void {
+		this.toDispose.push(this.configurationService.onDidUpdateConfiguration(e => {
+			this.updateOptions();
 		}));
-		this.toDispose.push(this.debugService.getViewModel().onDidSelectConfigurationName(name => {
-			this.updateOptions(false);
+		this.toDispose.push(this.selectBox.onDidSelect(configurationName => {
+			this.debugService.getViewModel().setSelectedConfigurationName(configurationName);
+			this.nameContainer.textContent = configurationName;
 		}));
 	}
 
 	public render(container: HTMLElement): void {
-		super.render(container);
-		this.updateOptions(true);
+		this.container = container;
+		dom.addClass(container, 'start-debug-action-item');
+		const debugStartContainer = dom.append(container, $('.start-debug'));
+		dom.append(debugStartContainer, $('.icon'));
+		this.nameContainer = dom.append(debugStartContainer, $('.name'));
+		this.nameContainer.textContent = this.debugService.getViewModel().selectedConfigurationName;
+
+		this.toDispose.push(dom.addDisposableListener(debugStartContainer, 'click', () => {
+			this.actionRunner.run(this.action, this.context);
+		}));
+
+		this.selectBox.render(dom.append(container, $('.configuration')));
+		this.updateOptions();
+	}
+
+	public setActionContext(context: any): void {
+		this.context = context;
 	}
 
-	private updateOptions(changeDebugConfiguration: boolean): void {
+	public isEnabled(): boolean {
+		return this.debugService.state !== State.Inactive;
+	}
+
+	public focus(): void {
+		this.container.focus();
+	}
+
+	public blur(): void {
+		this.container.blur();
+	}
+
+	public dispose(): void {
+		this.toDispose = lifecycle.dispose(this.toDispose);
+	}
+
+	private updateOptions(): void {
 		const config = this.configurationService.getConfiguration<IGlobalConfig>('launch');
 		if (!config || !config.configurations || config.configurations.length === 0) {
-			this.setOptions([NO_CONFIGURATIONS_LABEL], 0);
+			this.selectBox.setOptions([NO_CONFIGURATIONS_LABEL], 0);
 		} else {
 			const options = config.configurations.filter(cfg => !!cfg.name).map(cfg => cfg.name);
 			if (config.compounds) {
@@ -42,11 +91,7 @@ export class SelectConfigurationActionItem extends SelectActionItem {
 			}
 
 			const selected = options.indexOf(this.debugService.getViewModel().selectedConfigurationName);
-			this.setOptions(options, selected);
-		}
-
-		if (changeDebugConfiguration) {
-			this.actionRunner.run(this._action, this.getSelected()).done(null, errors.onUnexpectedError);
+			this.selectBox.setOptions(options, selected);
 		}
 	}
 }

src/vs/workbench/parts/debug/browser/debugActions.ts

@@ -92,20 +92,6 @@ export class ConfigureAction extends AbstractDebugAction {
 	}
 }
 
-export class SelectConfigAction extends AbstractDebugAction {
-	static ID = 'workbench.debug.action.setActiveConfig';
-	static LABEL = nls.localize('selectConfig', "Select Configuration");
-
-	constructor(id: string, label: string, @IDebugService debugService: IDebugService, @IKeybindingService keybindingService: IKeybindingService) {
-		super(id, label, 'debug-action select-active-config', debugService, keybindingService);
-	}
-
-	public run(configName: string): TPromise<any> {
-		this.debugService.getViewModel().setSelectedConfigurationName(configName === NO_CONFIGURATIONS_LABEL ? null : configName);
-		return TPromise.as(null);
-	}
-}
-
 export class StartAction extends AbstractDebugAction {
 	static ID = 'workbench.action.debug.start';
 	static LABEL = nls.localize('startDebug', "Start Debugging");

src/vs/workbench/parts/debug/browser/debugViewlet.ts

@@ -15,8 +15,8 @@ import { Scope } from 'vs/workbench/common/memento';
 import { IViewletView, Viewlet } from 'vs/workbench/browser/viewlet';
 import { IDebugService, VIEWLET_ID, State } from 'vs/workbench/parts/debug/common/debug';
 import { DebugViewRegistry } from 'vs/workbench/parts/debug/browser/debugViewRegistry';
-import { StartAction, ToggleReplAction, ConfigureAction, SelectConfigAction } from 'vs/workbench/parts/debug/browser/debugActions';
-import { SelectConfigurationActionItem } from 'vs/workbench/parts/debug/browser/debugActionItems';
+import { StartAction, ToggleReplAction, ConfigureAction } from 'vs/workbench/parts/debug/browser/debugActions';
+import { StartDebugActionItem } from 'vs/workbench/parts/debug/browser/debugActionItems';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IProgressService, IProgressRunner } from 'vs/platform/progress/common/progress';
 import { IWorkspaceContextService } from 'vs/platform/workspace/common/workspace';
@@ -122,7 +122,6 @@ export class DebugViewlet extends Viewlet {
 		if (!this.actions) {
 			this.actions = [
 				this.instantiationService.createInstance(StartAction, StartAction.ID, StartAction.LABEL),
-				this.instantiationService.createInstance(SelectConfigAction, SelectConfigAction.ID, SelectConfigAction.LABEL),
 				this.instantiationService.createInstance(ConfigureAction, ConfigureAction.ID, ConfigureAction.LABEL),
 				this.instantiationService.createInstance(ToggleReplAction, ToggleReplAction.ID, ToggleReplAction.LABEL)
 			];
@@ -136,8 +135,8 @@ export class DebugViewlet extends Viewlet {
 	}
 
 	public getActionItem(action: IAction): IActionItem {
-		if (action.id === SelectConfigAction.ID) {
-			return this.instantiationService.createInstance(SelectConfigurationActionItem, action);
+		if (action.id === StartAction.ID) {
+			return this.instantiationService.createInstance(StartDebugActionItem, null, action);
 		}
 
 		return null;

src/vs/workbench/parts/debug/browser/media/debugViewlet.css

@@ -41,12 +41,45 @@
 	background: url('repl-inverse.svg') center center no-repeat;
 }
 
-.monaco-workbench .debug-action.start {
+.monaco-workbench > .part > .title > .title-actions .start-debug-action-item {
+	display: flex;
+	align-items: center;
+	margin: 6px 0;
+	border: 1px solid #dddddd;
+	font-size: 11px;
+	margin-right: 0.3em;
+	height: 20px;
+}
+
+.vs-dark .monaco-workbench > .part > .title > .title-actions .start-debug-action-item,
+.hc-black .monaco-workbench > .part > .title > .title-actions .start-debug-action-item {
+	border-color: #383838;
+}
+
+.monaco-workbench > .part > .title > .title-actions .start-debug-action-item .start-debug {
+	border-right: 1px solid #dddddd;
+	height: 20px;
+}
+
+.monaco-workbench > .part > .title > .title-actions .start-debug-action-item .start-debug .name {
+	margin-right: 6px;
+	display: inline-block;
+}
+
+.vs-dark .monaco-workbench > .part > .title > .title-actions .start-debug-action-item .start-debug,
+.hc-black .monaco-workbench > .part > .title > .title-actions .start-debug-action-item .start-debug {
+	border-color: #383838;
+}
+
+.monaco-workbench > .part > .title > .title-actions .start-debug-action-item .start-debug .icon {
+	width: 20px;
+	height: 20px;
 	background: url('continue.svg') center center no-repeat;
+	vertical-align: bottom;
 }
 
-.vs-dark .monaco-workbench .debug-action.start,
-.hc-black .monaco-workbench .debug-action.start {
+.vs-dark .monaco-workbench > .part > .title > .title-actions .start-debug-action-item .start-debug .icon,
+.hc-black .monaco-workbench > .part > .title > .title-actions .start-debug-action-item .start-debug .icon {
 	background: url('continue-inverse.svg') center center no-repeat;
 }
 
@@ -56,8 +89,12 @@
 	line-height: 22px;
 }
 
-.monaco-workbench .monaco-action-bar .action-item.select-container {
-	overflow: hidden;
+.monaco-workbench .monaco-action-bar .start-debug-action-item .configuration .select-box {
+	width: 12px;
+	background-color: inherit;
+	border: none;
+	margin-top: 0px;
+	cursor: pointer;
 }
 
 .debug-viewlet .line-number {