debug debt: debug select action item extends SelectActionItem

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

@@ -695,7 +695,11 @@ export class SelectActionItem extends BaseActionItem {
 
 	public setOptions(options: string[], selected: number): void {
 		this.options = options;
+		if (selected >= 0) {
 		this.selected = selected;
+		} else if (this.selected < 0 || this.selected > this.options.length) {
+			this.selected = 0;
+		}
 
 		this.doSetOptions();
 	}
@@ -728,6 +732,10 @@ export class SelectActionItem extends BaseActionItem {
 		this.doSetOptions();
 	}
 
+	protected getSelected(): string {
+		return this.options && this.selected >= 0 && this.selected < this.options.length ? this.options[this.selected] : null;
+	}
+
 	private doSetOptions(): void {
 		this.select.options.length = 0;
 

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

@@ -4,115 +4,54 @@
  *--------------------------------------------------------------------------------------------*/
 
 import nls = require('vs/nls');
-import lifecycle = require('vs/base/common/lifecycle');
 import errors = require('vs/base/common/errors');
 import { TPromise } from 'vs/base/common/winjs.base';
-import dom = require('vs/base/browser/dom');
 import { IAction } from 'vs/base/common/actions';
-import { BaseActionItem } from 'vs/base/browser/ui/actionbar/actionbar';
-import { IDebugService, State } from 'vs/workbench/parts/debug/common/debug';
+import { SelectActionItem } from 'vs/base/browser/ui/actionbar/actionbar';
+import { IDebugService } from 'vs/workbench/parts/debug/common/debug';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 
-export class SelectConfigActionItem extends BaseActionItem {
-
-	private select: HTMLSelectElement;
-	private toDispose: lifecycle.IDisposable[];
+export class DebugSelectActionItem extends SelectActionItem {
 
 	constructor(
 		action: IAction,
 		@IDebugService private debugService: IDebugService,
 		@IConfigurationService configurationService: IConfigurationService
 	) {
-		super(null, action);
-
-		this.select = document.createElement('select');
-		this.select.className = 'debug-select action-bar-select';
+		super(null, action, [], -1);
 
-		this.toDispose = [];
-		this.registerListeners(configurationService);
+		this.registerConfigurationListeners(configurationService);
 	}
 
-	private registerListeners(configurationService: IConfigurationService): void {
-		this.toDispose.push(dom.addStandardDisposableListener(this.select, 'change', (e) => {
-			this.actionRunner.run(this._action, e.target.value).done(null, errors.onUnexpectedError);
-		}));
-		this.toDispose.push(this.debugService.onDidChangeState(state => {
-			this.select.disabled = state !== State.Inactive;
-		}));
+	private registerConfigurationListeners(configurationService: IConfigurationService): void {
 		this.toDispose.push(configurationService.onDidUpdateConfiguration(e => {
-			this.setOptions(true).done(null, errors.onUnexpectedError);
+			this.updateOptions(true).done(null, errors.onUnexpectedError);
 		}));
 		this.toDispose.push(this.debugService.getConfigurationManager().onDidConfigurationChange(name => {
-			this.setOptions(false).done(null, errors.onUnexpectedError);
+			this.updateOptions(false).done(null, errors.onUnexpectedError);
 		}));
 	}
 
 	public render(container: HTMLElement): void {
-		dom.addClass(container, 'select-container');
-		container.appendChild(this.select);
-		this.setOptions(true).done(null, errors.onUnexpectedError);
+		super.render(container);
+		this.updateOptions(true).done(null, errors.onUnexpectedError);
 	}
 
-	public focus(): void {
-		if (this.select) {
-			this.select.focus();
-		}
-	}
-
-	public blur(): void {
-		if (this.select) {
-			this.select.blur();
-		}
-	}
-
-	private setOptions(changeDebugConfiguration: boolean): TPromise<any> {
-		let previousSelectedIndex = this.select.selectedIndex;
-		this.select.options.length = 0;
-
+	private updateOptions(changeDebugConfiguration: boolean): TPromise<any> {
 		return this.debugService.getConfigurationManager().loadLaunchConfig().then(config => {
 			if (!config || !config.configurations) {
-				this.select.add(this.createOption(nls.localize('noConfigurations', "No Configurations")));
-				this.select.disabled = true;
+				this.setOptions([nls.localize('noConfigurations', "No Configurations")], 0);
 				return changeDebugConfiguration ? this.actionRunner.run(this._action, null) : null;
 			}
 
-			const configurations = config.configurations;
-			this.select.disabled = configurations.length < 1;
-
-			let found = false;
+			const configurationNames = config.configurations.map(cfg => cfg.name);
 			const configurationName = this.debugService.getConfigurationManager().configurationName;
-			for (let i = 0; i < configurations.length; i++) {
-				this.select.add(this.createOption(configurations[i].name));
-				if (configurationName === configurations[i].name) {
-					this.select.selectedIndex = i;
-					found = true;
-				}
-			}
+			let selected = configurationNames.indexOf(configurationName);
 
-			if (!found && configurations.length > 0) {
-				if (!previousSelectedIndex || previousSelectedIndex < 0 || previousSelectedIndex >= configurations.length) {
-					previousSelectedIndex = 0;
-				}
-				this.select.selectedIndex = previousSelectedIndex;
-				if (changeDebugConfiguration) {
-					return this.actionRunner.run(this._action, configurations[previousSelectedIndex].name);
-				}
+			this.setOptions(configurationNames, selected);
+			if (changeDebugConfiguration) {
+				return this.actionRunner.run(this._action, this.getSelected());
 			}
 		});
 	}
-
-	private createOption(value: string): HTMLOptionElement {
-		const option = document.createElement('option');
-		option.value = value;
-		option.text = value;
-
-		return option;
-	}
-
-	public dispose(): void {
-		this.debugService = null;
-		this.toDispose = lifecycle.dispose(this.toDispose);
-
-		super.dispose();
-	}
-}
\ No newline at end of file
+}

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

@@ -140,7 +140,7 @@ export class DebugViewlet extends Viewlet {
 
 	public getActionItem(action: actions.IAction): actionbar.IActionItem {
 		if (action.id === debugactions.SelectConfigAction.ID) {
-			return this.instantiationService.createInstance(dbgactionitems.SelectConfigActionItem, action);
+			return this.instantiationService.createInstance(dbgactionitems.DebugSelectActionItem, action);
 		}
 
 		return null;

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

@@ -86,16 +86,6 @@
 	opacity: 0.35;
 }
 
-.monaco-workbench.windows .debug-select {
-	margin-top: 7px; /* Center the select box */
-}
-
-.vs-dark .monaco-workbench .debug-select {
-	background-color: #3C3C3C;
-	border-color: #3C3C3C;
-	color: rgb(204, 204, 204);
-}
-
 /* Call stack */
 
 .debug-viewlet .debug-call-stack-title {
@@ -326,11 +316,3 @@
 .debug-viewlet > .noworkspace-view > p {
 	line-height: 1.5em;
 }
-
-/* High Contrast Theming */
-
-.hc-black .monaco-workbench .debug-select {
-	background-color: #3C3C3C;
-	border-color: #3C3C3C;
-	color: rgb(204, 204, 204);
-}
\ No newline at end of file