diff --git a/src/vs/base/browser/ui/selectBox/selectBox.ts b/src/vs/base/browser/ui/selectBox/selectBox.ts index cf7daf6ee794b5d4b1dd61eed7b384ce04a8ba90..f84f5fc4372d646aae2ff10bc9277f9eaa688ed8 100644 --- a/src/vs/base/browser/ui/selectBox/selectBox.ts +++ b/src/vs/base/browser/ui/selectBox/selectBox.ts @@ -62,6 +62,10 @@ export class SelectBox extends Widget { this.select.disabled = !value; } + public get enabled(): boolean { + return !this.select.disabled; + } + public blur(): void { if (this.select) { this.select.blur(); diff --git a/src/vs/workbench/parts/debug/browser/debugActionItems.ts b/src/vs/workbench/parts/debug/browser/debugActionItems.ts index 7216de86de53828ff1716d7642437a72031b17f3..6c0dd58dd8455c6f20851d63b90d3c5c204c38b0 100644 --- a/src/vs/workbench/parts/debug/browser/debugActionItems.ts +++ b/src/vs/workbench/parts/debug/browser/debugActionItems.ts @@ -52,11 +52,24 @@ export class StartDebugActionItem extends EventEmitter implements IActionItem { icon.title = this.action.label; icon.tabIndex = 0; - this.toDispose.push(dom.addDisposableListener(icon, 'click', () => { + this.toDispose.push(dom.addDisposableListener(icon, dom.EventType.CLICK, () => { icon.blur(); this.actionRunner.run(this.action, this.context).done(null, errors.onUnexpectedError); })); - this.toDispose.push(dom.addDisposableListener(icon, 'keyup', (e: KeyboardEvent) => { + + this.toDispose.push(dom.addDisposableListener(icon, dom.EventType.MOUSE_DOWN, () => { + if (this.selectBox.enabled) { + dom.addClass(icon, 'active'); + } + })); + this.toDispose.push(dom.addDisposableListener(icon, dom.EventType.MOUSE_UP, () => { + dom.removeClass(icon, 'active'); + })); + this.toDispose.push(dom.addDisposableListener(icon, dom.EventType.MOUSE_OUT, () => { + dom.removeClass(icon, 'active'); + })); + + this.toDispose.push(dom.addDisposableListener(icon, dom.EventType.KEY_UP, (e: KeyboardEvent) => { let event = new StandardKeyboardEvent(e); if (event.equals(KeyCode.Enter)) { this.actionRunner.run(this.action, this.context).done(null, errors.onUnexpectedError); diff --git a/src/vs/workbench/parts/debug/browser/media/debugViewlet.css b/src/vs/workbench/parts/debug/browser/media/debugViewlet.css index 8e0ff75ab5236bcac3f14ec6d801472449857b22..4284ee4412737c8129e3495c16fe1a278932c7b5 100644 --- a/src/vs/workbench/parts/debug/browser/media/debugViewlet.css +++ b/src/vs/workbench/parts/debug/browser/media/debugViewlet.css @@ -48,26 +48,32 @@ margin-right: 0.3em; height: 20px; flex-shrink: 1; - height: 35px; + border: 1px solid #dddddd; + margin-top: 7px; } +.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: #3c3c3c; +} + + .monaco-workbench > .part > .title > .title-actions .start-debug-action-item .icon { height: 20px; width: 20px; background: url('continue.svg') center center no-repeat; flex-shrink: 0; - border: 1px solid #dddddd; - border-right: none; + transition: transform 50ms ease; + -webkit-transition: -webkit-transform 50ms ease; } .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 > .part > .title > .title-actions .start-debug-action-item .configuration { - border: 1px solid #dddddd; + border-left: 1px solid #dddddd; } .vs-dark .monaco-workbench > .part > .title > .title-actions .start-debug-action-item .configuration, @@ -93,17 +99,9 @@ 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: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: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:not(.disabled) { - background-color: #2D2D2D +.monaco-workbench > .part > .title > .title-actions .start-debug-action-item .icon.active { + -webkit-transform: scale(1.272019649, 1.272019649); + transform: scale(1.272019649, 1.272019649); } /* Debug viewlet trees */