debug-start better disablement

fixes #16576

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

@@ -15,6 +15,7 @@ export class SelectBox extends Widget {
 	private select: HTMLSelectElement;
 	private options: string[];
 	private selected: number;
+	private container: HTMLElement;
 	private _onDidSelect: Emitter<string>;
 	private toDispose: IDisposable[];
 
@@ -56,6 +57,7 @@ export class SelectBox extends Widget {
 	}
 
 	public set enabled(value: boolean) {
+		dom.toggleClass(this.container, 'disabled', !value);
 		this.select.disabled = !value;
 	}
 
@@ -66,6 +68,7 @@ export class SelectBox extends Widget {
 	}
 
 	public render(container: HTMLElement): void {
+		this.container = container;
 		dom.addClass(container, 'select-container');
 		container.appendChild(this.select);
 		this.doSetOptions();

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

@@ -90,6 +90,7 @@ export class StartDebugActionItem extends EventEmitter implements IActionItem {
 		const config = this.configurationService.getConfiguration<IGlobalConfig>('launch');
 		if (!config || !config.configurations || config.configurations.length === 0) {
 			this.selectBox.setOptions([NO_CONFIGURATIONS_LABEL], 0);
+			this.selectBox.enabled = false;
 		} else {
 			const options = config.configurations.filter(cfg => !!cfg.name).map(cfg => cfg.name);
 			if (config.compounds) {
@@ -98,6 +99,7 @@ export class StartDebugActionItem extends EventEmitter implements IActionItem {
 
 			const selected = options.indexOf(this.debugService.getViewModel().selectedConfigurationName);
 			this.selectBox.setOptions(options, selected);
+			this.selectBox.enabled = true;
 		}
 
 		this.debugService.getViewModel().setSelectedConfigurationName(this.selectBox.getSelected());

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

@@ -78,16 +78,22 @@
 	cursor: pointer;
 }
 
+.monaco-workbench .monaco-action-bar .start-debug-action-item .configuration.disabled .select-box {
+	opacity: 0.7;
+	font-style: italic;
+	cursor: initial;
+}
+
 /* Hover feedback for start debug action item */
 .monaco-workbench > .part > .title > .title-actions .start-debug-action-item .icon:hover,
-.monaco-workbench > .part > .title > .title-actions .start-debug-action-item .configuration:hover {
+.monaco-workbench > .part > .title > .title-actions .start-debug-action-item .configuration:hover:not(.disabled) {
 	background-color: #ececec;
 }
 
 .vs-dark .monaco-workbench > .part > .title > .title-actions .start-debug-action-item .icon:hover,
-.vs-dark .monaco-workbench > .part > .title > .title-actions .start-debug-action-item .configuration:hover,
+.vs-dark .monaco-workbench > .part > .title > .title-actions .start-debug-action-item .configuration:hover:not(.disabled),
 .hc-black .monaco-workbench > .part > .title > .title-actions .start-debug-action-item .icon:hover,
-.hc-black .monaco-workbench > .part > .title > .title-actions .start-debug-action-item .configuration:hover {
+.hc-black .monaco-workbench > .part > .title > .title-actions .start-debug-action-item .configuration:hover:not(.disabled) {
 	background-color: #2A2D2E;
 }