progress - stop animation when a modal dialog is visible (#138396)

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

@@ -186,6 +186,9 @@ export class SimpleDialogService implements IDialogService {
 
 	public _serviceBrand: undefined;
 
+	readonly onWillShowDialog = Event.None;
+	readonly onDidShowDialog = Event.None;
+
 	public confirm(confirmation: IConfirmation): Promise<IConfirmationResult> {
 		return this.doConfirm(confirmation).then(confirmed => {
 			return {

src/vs/platform/dialogs/common/dialogs.ts

@@ -3,6 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import { Event } from 'vs/base/common/event';
 import { Codicon } from 'vs/base/common/codicons';
 import { IMarkdownString } from 'vs/base/common/htmlContent';
 import { basename } from 'vs/base/common/resources';
@@ -107,6 +108,7 @@ export interface IPickAndOpenOptions {
 }
 
 export interface ISaveDialogOptions {
+
 	/**
 	 * A human-readable string for the dialog title
 	 */
@@ -136,6 +138,7 @@ export interface ISaveDialogOptions {
 }
 
 export interface IOpenDialogOptions {
+
 	/**
 	 * A human-readable string for the dialog title
 	 */
@@ -211,6 +214,7 @@ export interface IInput {
  * A handler to bring up modal dialogs.
  */
 export interface IDialogHandler {
+
 	/**
 	 * Ask the user for confirmation with a modal dialog.
 	 */
@@ -251,6 +255,16 @@ export interface IDialogService {
 
 	readonly _serviceBrand: undefined;
 
+	/**
+	 * An event that fires when a dialog is about to show.
+	 */
+	onWillShowDialog: Event<void>;
+
+	/**
+	 * An event that fires when a dialog did show (closed).
+	 */
+	onDidShowDialog: Event<void>;
+
 	/**
 	 * Ask the user for confirmation with a modal dialog.
 	 */

src/vs/platform/dialogs/test/common/testDialogService.ts

@@ -3,13 +3,17 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import { Event } from 'vs/base/common/event';
 import Severity from 'vs/base/common/severity';
 import { IConfirmation, IConfirmationResult, IDialogOptions, IDialogService, IInputResult, IShowResult } from 'vs/platform/dialogs/common/dialogs';
 
 export class TestDialogService implements IDialogService {
 
 	declare readonly _serviceBrand: undefined;
 
+	readonly onWillShowDialog = Event.None;
+	readonly onDidShowDialog = Event.None;
+
 	private confirmResult: IConfirmationResult | undefined = undefined;
 	setConfirmResult(result: IConfirmationResult) {
 		this.confirmResult = result;

src/vs/workbench/browser/media/style.css

@@ -180,6 +180,14 @@ body.web {
 	cursor: default;
 }
 
+.monaco-workbench .codicon[class*='codicon-'] {
+	font-size: 16px; /* sets font-size for codicons in workbench (https://github.com/microsoft/vscode/issues/98495) */
+}
+
+.monaco-workbench.modal-dialog-visible .monaco-progress-container.infinite .progress-bit {
+	display: none; /* stop progress animations when dialogs are visible (https://github.com/microsoft/vscode/issues/138396) */
+}
+
 /* Custom Dropdown (select) Arrows */
 
 .monaco-workbench select {
@@ -208,7 +216,7 @@ body.web {
 	pointer-events: none;
 }
 
-/* START Keyboard Focus Indication Styles */
+/* Keyboard Focus Indication Styles */
 
 .monaco-workbench [tabindex="0"]:focus,
 .monaco-workbench [tabindex="-1"]:focus,
@@ -271,7 +279,3 @@ body.web {
 .monaco-workbench .monaco-list:focus {
 	outline: 0 !important; /* tree indicates focus not via outline but through the focused item */
 }
-
-.monaco-workbench .codicon[class*='codicon-'] {
-	font-size: 16px; /* sets font-size for codicons in workbench https://github.com/microsoft/vscode/issues/98495 */
-}

src/vs/workbench/browser/parts/dialogs/dialog.web.contribution.ts

@@ -41,7 +41,7 @@ export class DialogHandlerContribution extends Disposable implements IWorkbenchC
 
 		this.model = (this.dialogService as DialogService).model;
 
-		this._register(this.model.onDidShowDialog(() => {
+		this._register(this.model.onWillShowDialog(() => {
 			if (!this.currentDialog) {
 				this.processDialogs();
 			}

src/vs/workbench/browser/workbench.ts

@@ -39,6 +39,7 @@ import { coalesce } from 'vs/base/common/arrays';
 import { InstantiationService } from 'vs/platform/instantiation/common/instantiationService';
 import { Layout } from 'vs/workbench/browser/layout';
 import { IHostService } from 'vs/workbench/services/host/browser/host';
+import { IDialogService } from 'vs/platform/dialogs/common/dialogs';
 
 export interface IWorkbenchOptions {
 
@@ -142,6 +143,7 @@ export class Workbench extends Layout {
 				const storageService = accessor.get(IStorageService);
 				const configurationService = accessor.get(IConfigurationService);
 				const hostService = accessor.get(IHostService);
+				const dialogService = accessor.get(IDialogService);
 
 				// Layout
 				this.initLayout(accessor);
@@ -154,7 +156,7 @@ export class Workbench extends Layout {
 				this._register(instantiationService.createInstance(WorkbenchContextKeysHandler));
 
 				// Register Listeners
-				this.registerListeners(lifecycleService, storageService, configurationService, hostService);
+				this.registerListeners(lifecycleService, storageService, configurationService, hostService, dialogService);
 
 				// Render Workbench
 				this.renderWorkbench(instantiationService, accessor.get(INotificationService) as NotificationService, storageService, configurationService);
@@ -219,7 +221,7 @@ export class Workbench extends Layout {
 		return instantiationService;
 	}
 
-	private registerListeners(lifecycleService: ILifecycleService, storageService: IStorageService, configurationService: IConfigurationService, hostService: IHostService): void {
+	private registerListeners(lifecycleService: ILifecycleService, storageService: IStorageService, configurationService: IConfigurationService, hostService: IHostService, dialogService: IDialogService): void {
 
 		// Configuration changes
 		this._register(configurationService.onDidChangeConfiguration(() => this.setFontAliasing(configurationService)));
@@ -252,6 +254,10 @@ export class Workbench extends Layout {
 				storageService.flush();
 			}
 		}));
+
+		// Dialogs showing/hiding
+		this._register(dialogService.onWillShowDialog(() => this.container.classList.add('modal-dialog-visible')));
+		this._register(dialogService.onDidShowDialog(() => this.container.classList.remove('modal-dialog-visible')));
 	}
 
 	private fontAliasing: 'default' | 'antialiased' | 'none' | 'auto' | undefined;

src/vs/workbench/common/dialogs.ts

@@ -20,6 +20,7 @@ export interface IDialogHandle {
 
 export interface IDialogsModel {
 
+	readonly onWillShowDialog: Event<void>;
 	readonly onDidShowDialog: Event<void>;
 
 	readonly dialogs: IDialogViewItem[];
@@ -31,6 +32,9 @@ export class DialogsModel extends Disposable implements IDialogsModel {
 
 	readonly dialogs: IDialogViewItem[] = [];
 
+	private readonly _onWillShowDialog = this._register(new Emitter<void>());
+	readonly onWillShowDialog = this._onWillShowDialog.event;
+
 	private readonly _onDidShowDialog = this._register(new Emitter<void>());
 	readonly onDidShowDialog = this._onDidShowDialog.event;
 
@@ -42,11 +46,12 @@ export class DialogsModel extends Disposable implements IDialogsModel {
 			close: result => {
 				this.dialogs.splice(0, 1);
 				promise.complete(result);
+				this._onDidShowDialog.fire();
 			}
 		};
 
 		this.dialogs.push(item);
-		this._onDidShowDialog.fire();
+		this._onWillShowDialog.fire();
 
 		return {
 			item,

src/vs/workbench/electron-sandbox/parts/dialogs/dialog.contribution.ts

@@ -48,7 +48,7 @@ export class DialogHandlerContribution extends Disposable implements IWorkbenchC
 
 		this.model = (this.dialogService as DialogService).model;
 
-		this._register(this.model.onDidShowDialog(() => {
+		this._register(this.model.onWillShowDialog(() => {
 			if (!this.currentDialog) {
 				this.processDialogs();
 			}

src/vs/workbench/services/dialogs/common/dialogService.ts

@@ -15,6 +15,10 @@ export class DialogService extends Disposable implements IDialogService {
 
 	readonly model = this._register(new DialogsModel());
 
+	readonly onWillShowDialog = this.model.onWillShowDialog;
+
+	readonly onDidShowDialog = this.model.onDidShowDialog;
+
 	async confirm(confirmation: IConfirmation): Promise<IConfirmationResult> {
 		const handle = this.model.show({ confirmArgs: { confirmation } });
 

src/vs/workbench/test/browser/api/extHostMessagerService.test.ts

@@ -11,25 +11,7 @@ import { ICommandService } from 'vs/platform/commands/common/commands';
 import { mock } from 'vs/base/test/common/mock';
 import { IDisposable, Disposable } from 'vs/base/common/lifecycle';
 import { Event } from 'vs/base/common/event';
-
-const emptyDialogService = new class implements IDialogService {
-	declare readonly _serviceBrand: undefined;
-	show(): never {
-		throw new Error('not implemented');
-	}
-
-	confirm(): never {
-		throw new Error('not implemented');
-	}
-
-	about(): never {
-		throw new Error('not implemented');
-	}
-
-	input(): never {
-		throw new Error('not implemented');
-	}
-};
+import { TestDialogService } from 'vs/platform/dialogs/test/common/testDialogService';
 
 const emptyCommandService: ICommandService = {
 	_serviceBrand: undefined,
@@ -107,7 +89,7 @@ suite('ExtHostMessageService', function () {
 		let service = new MainThreadMessageService(null!, new EmptyNotificationService(notification => {
 			assert.strictEqual(notification.actions!.primary!.length, 1);
 			queueMicrotask(() => notification.actions!.primary![0].run());
-		}), emptyCommandService, emptyDialogService);
+		}), emptyCommandService, new TestDialogService());
 
 		const handle = await service.$showMessage(1, 'h', {}, [{ handle: 42, title: 'a thing', isCloseAffordance: true }]);
 		assert.strictEqual(handle, 42);