debug-start polish

fixes #16657

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

@@ -654,9 +654,11 @@ export class ActionBar extends EventEmitter implements IActionRunner {
 		}
 
 		// trigger action
-		let actionItem = (<BaseActionItem>this.items[this.focusedItem]);
-		const context = (actionItem._context === null || actionItem._context === undefined) ? event : actionItem._context;
-		this.run(actionItem._action, context).done();
+		let actionItem = this.items[this.focusedItem];
+		if (actionItem instanceof BaseActionItem) {
+			const context = (actionItem._context === null || actionItem._context === undefined) ? event : actionItem._context;
+			this.run(actionItem._action, context).done();
+		}
 	}
 
 	private cancel(): void {

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

@@ -5,7 +5,9 @@
 
 import * as lifecycle from 'vs/base/common/lifecycle';
 import { IAction, IActionRunner } from 'vs/base/common/actions';
+import { KeyCode } from 'vs/base/common/keyCodes';
 import * as dom from 'vs/base/browser/dom';
+import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 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';
@@ -18,7 +20,6 @@ export class StartDebugActionItem extends EventEmitter implements IActionItem {
 
 	public actionRunner: IActionRunner;
 	private container: HTMLElement;
-	private nameContainer: HTMLElement;
 	private selectBox: SelectBox;
 	private toDispose: lifecycle.IDisposable[];
 
@@ -37,25 +38,29 @@ export class StartDebugActionItem extends EventEmitter implements IActionItem {
 	private registerListeners(): void {
 		this.toDispose.push(this.configurationService.onDidUpdateConfiguration(e => {
 			this.updateOptions();
-			this.nameContainer.textContent = this.debugService.getViewModel().selectedConfigurationName;
 		}));
 		this.toDispose.push(this.selectBox.onDidSelect(configurationName => {
 			this.debugService.getViewModel().setSelectedConfigurationName(configurationName);
-			this.nameContainer.textContent = configurationName;
 		}));
 	}
 
 	public render(container: HTMLElement): void {
 		this.container = container;
+		this.container.tabIndex = 0;
 		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;
+		const icon = dom.append(container, $('.icon'));
+		icon.title = this.action.label;
+		icon.tabIndex = 0;
 
-		this.toDispose.push(dom.addDisposableListener(debugStartContainer, 'click', () => {
+		this.toDispose.push(dom.addDisposableListener(icon, 'click', () => {
 			this.actionRunner.run(this.action, this.context);
 		}));
+		this.toDispose.push(dom.addDisposableListener(icon, 'keyup', (e: KeyboardEvent) => {
+			let event = new StandardKeyboardEvent(e);
+			if (event.equals(KeyCode.Enter)) {
+				this.actionRunner.run(this.action, this.context);
+			}
+		}));
 
 		this.selectBox.render(dom.append(container, $('.configuration')));
 		this.updateOptions();

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

@@ -49,6 +49,7 @@
 	font-size: 11px;
 	margin-right: 0.3em;
 	height: 20px;
+	flex-shrink: 1;
 }
 
 .vs-dark .monaco-workbench > .part > .title > .title-actions .start-debug-action-item,
@@ -56,56 +57,36 @@
 	border-color: #3c3c3c;
 }
 
-.monaco-workbench > .part > .title > .title-actions .start-debug-action-item .start-debug {
+.monaco-workbench > .part > .title > .title-actions .start-debug-action-item .icon {
 	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;
-	overflow: hidden;
-	max-width: 100px;
-}
-
-.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: #3c3c3c;
-}
-
-.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;
+	flex-shrink: 0;
 }
 
-.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 {
+.vs-dark .monaco-workbench > .part > .title > .title-actions .start-debug-action-item .icon,
+.hc-black .monaco-workbench > .part > .title > .title-actions .start-debug-action-item .icon {
 	background: url('continue-inverse.svg') center center no-repeat;
+	border-color: #3c3c3c;
 }
 
 .monaco-workbench .monaco-action-bar .start-debug-action-item .configuration .select-box {
-	width: 18px;
 	background-color: inherit;
 	border: none;
 	margin-top: 0px;
 	cursor: pointer;
-	outline: none;
-}
-
-.monaco-workbench.mac .monaco-action-bar .start-debug-action-item .configuration .select-box {
-	width: 13px;
 }
 
 /* Hover feedback for start debug action item */
-.monaco-workbench > .part > .title > .title-actions .start-debug-action-item .start-debug:hover,
+.monaco-workbench > .part > .title > .title-actions .start-debug-action-item .icon:hover,
 .monaco-workbench > .part > .title > .title-actions .start-debug-action-item .configuration:hover {
 	background-color: #ececec;
 }
 
-.vs-dark .monaco-workbench > .part > .title > .title-actions .start-debug-action-item .start-debug:hover,
+.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,
-.hc-black .monaco-workbench > .part > .title > .title-actions .start-debug-action-item .start-debug:hover,
+.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 {
 	background-color: #2A2D2E;
 }