diff --git a/src/vs/workbench/parts/debug/browser/debugActionItems.ts b/src/vs/workbench/parts/debug/browser/debugActionItems.ts index 1a350afde1f5d2d008ce66d4d9abe48891a9ae8d..26879953b8072a429aa110bcfcacf64d61be63a7 100644 --- a/src/vs/workbench/parts/debug/browser/debugActionItems.ts +++ b/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('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); } } } diff --git a/src/vs/workbench/parts/debug/browser/debugActions.ts b/src/vs/workbench/parts/debug/browser/debugActions.ts index c6951a1a54a09b4f65a4473ef48a5ab6d334ea7d..dfae9334ef13302e954845428410f975e363b4f7 100644 --- a/src/vs/workbench/parts/debug/browser/debugActions.ts +++ b/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 { - 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"); diff --git a/src/vs/workbench/parts/debug/browser/debugViewlet.ts b/src/vs/workbench/parts/debug/browser/debugViewlet.ts index bfaaba496d12689a7506bdd978dcc74a89f8788c..18cef93ff037d5ef7d073e87d8a21e2f2b47c955 100644 --- a/src/vs/workbench/parts/debug/browser/debugViewlet.ts +++ b/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; diff --git a/src/vs/workbench/parts/debug/browser/media/debugViewlet.css b/src/vs/workbench/parts/debug/browser/media/debugViewlet.css index 7ed976cb899d3839d30690f9716fe7c11d915240..0ad1ab8d2ef63df1fe8ff074a916378e5e9025ca 100644 --- a/src/vs/workbench/parts/debug/browser/media/debugViewlet.css +++ b/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 {