Hide overlay on any command (#18869)

src/vs/editor/browser/standalone/simpleServices.ts

@@ -10,7 +10,7 @@ import URI from 'vs/base/common/uri';
 import { TPromise } from 'vs/base/common/winjs.base';
 import { IConfigurationService, IConfigurationServiceEvent, IConfigurationValue, getConfigurationValue, IConfigurationKeys } from 'vs/platform/configuration/common/configuration';
 import { IEditor, IEditorInput, IEditorOptions, IEditorService, IResourceInput, Position } from 'vs/platform/editor/common/editor';
-import { ICommandService, ICommand, ICommandHandler, CommandsRegistry } from 'vs/platform/commands/common/commands';
+import { ICommandService, ICommand, ICommandEvent, ICommandHandler, CommandsRegistry } from 'vs/platform/commands/common/commands';
 import { AbstractKeybindingService } from 'vs/platform/keybinding/common/abstractKeybindingService';
 import { KeybindingResolver, IOSupport } from 'vs/platform/keybinding/common/keybindingResolver';
 import { IKeybindingEvent, IKeybindingItem, KeybindingSource } from 'vs/platform/keybinding/common/keybinding';
@@ -270,6 +270,9 @@ export class StandaloneCommandService implements ICommandService {
 	private readonly _instantiationService: IInstantiationService;
 	private _dynamicCommands: { [id: string]: ICommand; };
 
+	private _onWillExecuteCommand: Emitter<ICommandEvent> = new Emitter<ICommandEvent>();
+	public readonly onWillExecuteCommand: Event<ICommandEvent> = this._onWillExecuteCommand.event;
+
 	constructor(instantiationService: IInstantiationService) {
 		this._instantiationService = instantiationService;
 		this._dynamicCommands = Object.create(null);
@@ -291,6 +294,7 @@ export class StandaloneCommandService implements ICommandService {
 		}
 
 		try {
+			this._onWillExecuteCommand.fire({ commandId: id });
 			const result = this._instantiationService.invokeFunction.apply(this._instantiationService, [command.handler].concat(args));
 			return TPromise.as(result);
 		} catch (err) {

src/vs/platform/commands/common/commandService.ts

@@ -6,19 +6,25 @@
 
 import { TPromise } from 'vs/base/common/winjs.base';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
-import { ICommandService, ICommand, CommandsRegistry } from 'vs/platform/commands/common/commands';
+import { ICommandService, ICommand, ICommandEvent, CommandsRegistry } from 'vs/platform/commands/common/commands';
 import { IExtensionService } from 'vs/platform/extensions/common/extensions';
+import Event, { Emitter } from 'vs/base/common/event';
+import { Disposable } from 'vs/base/common/lifecycle';
 
-export class CommandService implements ICommandService {
+export class CommandService extends Disposable implements ICommandService {
 
 	_serviceBrand: any;
 
 	private _extensionHostIsReady: boolean = false;
 
+	private _onWillExecuteCommand: Emitter<ICommandEvent> = this._register(new Emitter<ICommandEvent>());
+	public readonly onWillExecuteCommand: Event<ICommandEvent> = this._onWillExecuteCommand.event;
+
 	constructor(
 		@IInstantiationService private _instantiationService: IInstantiationService,
 		@IExtensionService private _extensionService: IExtensionService
 	) {
+		super();
 		this._extensionService.onReady().then(value => this._extensionHostIsReady = value);
 	}
 
@@ -41,6 +47,7 @@ export class CommandService implements ICommandService {
 		}
 
 		try {
+			this._onWillExecuteCommand.fire({ commandId: id });
 			const result = this._instantiationService.invokeFunction.apply(this._instantiationService, [command.handler].concat(args));
 			return TPromise.as(result);
 		} catch (err) {

src/vs/platform/commands/common/commands.ts

@@ -8,11 +8,17 @@ import { TPromise } from 'vs/base/common/winjs.base';
 import { IDisposable } from 'vs/base/common/lifecycle';
 import { TypeConstraint, validateConstraints } from 'vs/base/common/types';
 import { ServicesAccessor, createDecorator } from 'vs/platform/instantiation/common/instantiation';
+import Event from 'vs/base/common/event';
 
 export const ICommandService = createDecorator<ICommandService>('commandService');
 
+export interface ICommandEvent {
+	commandId: string;
+}
+
 export interface ICommandService {
 	_serviceBrand: any;
+	onWillExecuteCommand: Event<ICommandEvent>;
 	executeCommand<T>(commandId: string, ...args: any[]): TPromise<T>;
 	executeCommand(commandId: string, ...args: any[]): TPromise<any>;
 }
@@ -136,6 +142,7 @@ export const CommandsRegistry: ICommandRegistry = new class implements ICommandR
 
 export const NullCommandService: ICommandService = {
 	_serviceBrand: undefined,
+	onWillExecuteCommand: () => ({ dispose: () => { } }),
 	executeCommand() {
 		return TPromise.as(undefined);
 	}

src/vs/platform/keybinding/test/common/abstractKeybindingService.test.ts

@@ -73,6 +73,7 @@ suite('AbstractKeybindingService', () => {
 
 			let commandService: ICommandService = {
 				_serviceBrand: undefined,
+				onWillExecuteCommand: () => ({ dispose: () => { } }),
 				executeCommand: (commandId: string, ...args: any[]): TPromise<any> => {
 					executeCommandCalls.push({
 						commandId: commandId,

src/vs/platform/opener/test/browser/openerService.test.ts

@@ -26,6 +26,7 @@ suite('OpenerService', function () {
 
 	const commandService = new class implements ICommandService {
 		_serviceBrand: any;
+		onWillExecuteCommand = () => ({ dispose: () => { } });
 		executeCommand(id: string, ...args: any[]): TPromise<any> {
 			lastCommand = { id, args };
 			return TPromise.as(undefined);

src/vs/workbench/parts/welcomeOverlay/browser/welcomeOverlay.ts

@@ -5,7 +5,7 @@
 'use strict';
 
 import 'vs/css!./welcomeOverlay';
-import { $ } from 'vs/base/browser/builder';
+import { $, Builder } from 'vs/base/browser/builder';
 import * as dom from 'vs/base/browser/dom';
 import * as errors from 'vs/base/common/errors';
 import { Registry } from 'vs/platform/platform';
@@ -20,6 +20,8 @@ import { Action } from 'vs/base/common/actions';
 import { IWorkbenchActionRegistry, Extensions } from 'vs/workbench/common/actionRegistry';
 import { SyncActionDescriptor } from 'vs/platform/actions/common/actions';
 import SCMPreview from 'vs/workbench/parts/scm/browser/scmPreview';
+import { ICommandService } from 'vs/platform/commands/common/commands';
+import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 
 interface Key {
 	id: string;
@@ -111,9 +113,13 @@ export class WelcomeOverlayAction extends Action {
 
 export class WelcomeOverlayContribution implements IWorkbenchContribution {
 
+	private _toDispose: IDisposable[] = [];
+	private _overlay: Builder;
+
 	constructor(
 		@IPartService private partService: IPartService,
 		@IWorkbenchEditorService private editorService: IWorkbenchEditorService,
+		@ICommandService private commandService: ICommandService,
 		@IKeybindingService private keybindingService: IKeybindingService
 	) {
 		this.partService.joinCreation().then(() => {
@@ -129,22 +135,19 @@ export class WelcomeOverlayContribution implements IWorkbenchContribution {
 		const container = this.partService.getContainer(Parts.EDITOR_PART);
 
 		const offset = this.partService.getTitleBarOffset();
-		const overlay = $(container.parentElement)
+		this._overlay = $(container.parentElement)
 			.div({ 'class': 'welcomeOverlay' })
 			.style({ top: `${offset}px` })
 			.style({ height: `calc(100% - ${offset}px)` })
 			.display('none');
 
-		overlay.on('click', () => {
-			overlay.display('none');
-			const welcomePage = document.getElementById('workbench.parts.editor') as HTMLDivElement;
-			dom.removeClass(welcomePage, 'blur-background');
-		});
+		this._overlay.on('click', () => this._hide(), this._toDispose);
+		this.commandService.onWillExecuteCommand(() => this._hide());
 
 		const editorOpen = !!this.editorService.getVisibleEditors().length;
 		keys.filter(key => !('withEditor' in key) || key.withEditor === editorOpen)
 			.forEach(({ id, arrow, label, command, arrowLast }) => {
-				const div = $(overlay).div({ 'class': ['key', id] });
+				const div = $(this._overlay).div({ 'class': ['key', id] });
 				if (!arrowLast) {
 					$(div).span({ 'class': 'arrow' }).innerHtml(arrow);
 				}
@@ -161,7 +164,19 @@ export class WelcomeOverlayContribution implements IWorkbenchContribution {
 					$(div).span({ 'class': 'arrow' }).innerHtml(arrow);
 				}
 			});
-		$(overlay).div({ 'class': 'commandPalettePlaceholder' });
+		$(this._overlay).div({ 'class': 'commandPalettePlaceholder' });
+	}
+
+	private _hide() {
+		if (this._overlay.style('display') !== 'none') {
+			this._overlay.display('none');
+			const welcomePage = document.getElementById('workbench.parts.editor') as HTMLDivElement;
+			dom.removeClass(welcomePage, 'blur-background');
+		}
+	}
+
+	dispose() {
+		this._toDispose = dispose(this._toDispose);
 	}
 }
 

src/vs/workbench/services/configurationResolver/test/node/configurationResolverService.test.ts

@@ -345,6 +345,8 @@ class MockCommandService implements ICommandService {
 	public _serviceBrand: any;
 	public callCount = 0;
 
+	onWillExecuteCommand = () => ({ dispose: () => { } });
+
 	public executeCommand<T>(commandId: string, ...args: any[]): TPromise<any> {
 		this.callCount++;
 		return TPromise.as(commandId);