adding overlayService (#72014)

* adding overlayService

* addressing feedback from UX meeting

* relocating to progressService2

* remove overlayService and update progressService

src/vs/base/browser/ui/dialog/dialog.css

@@ -15,6 +15,10 @@
 	align-items: center;
 }
 
+.monaco-workbench .dialog-modal-block.dimmed {
+	background: rgba(0, 0, 0, 0.3);
+}
+
 /** Dialog: Container */
 .monaco-workbench .dialog-box {
 	display: flex;
@@ -66,6 +70,10 @@
 	background-repeat: no-repeat;
 }
 
+.vs .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-pending {
+	background-image: url('pending.svg');
+}
+
 .vs .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-info {
 	background-image: url('info.svg');
 }
@@ -78,6 +86,10 @@
 	background-image: url('error.svg');
 }
 
+.vs-dark .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-pending {
+	background-image: url('pending-dark.svg');
+}
+
 .vs-dark .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-info,
 .hc-black .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-info {
 	background-image: url('info-inverse.svg');
@@ -93,6 +105,14 @@
 	background-image: url('error-inverse.svg');
 }
 
+.hc-black .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-pending {
+	background-image: url('pending-hc.svg');
+}
+
+.monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-pending {
+	background-size: 30px;
+}
+
 /** Dialog: Message Container */
 .monaco-workbench .dialog-box .dialog-message-row .dialog-message-container {
 	display: flex;

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

@@ -19,7 +19,7 @@ import { mnemonicButtonLabel } from 'vs/base/common/labels';
 export interface IDialogOptions {
 	cancelId?: number;
 	detail?: string;
-	type?: 'none' | 'info' | 'error' | 'question' | 'warning';
+	type?: 'none' | 'info' | 'error' | 'question' | 'warning' | 'pending';
 }
 
 export interface IDialogStyles extends IButtonStyles {
@@ -40,7 +40,7 @@ export class Dialog extends Disposable {
 
 	constructor(private container: HTMLElement, private message: string, private buttons: string[], private options: IDialogOptions) {
 		super();
-		this.modal = this.container.appendChild($('.dialog-modal-block'));
+		this.modal = this.container.appendChild($(`.dialog-modal-block${options.type === 'pending' ? '.dimmed' : ''}`));
 		this.element = this.modal.appendChild($('.dialog-box'));
 		hide(this.element);
 
@@ -129,6 +129,9 @@ export class Dialog extends Disposable {
 				case 'warning':
 					addClass(this.iconElement, 'icon-warning');
 					break;
+				case 'pending':
+					addClass(this.iconElement, 'icon-pending');
+					break;
 				case 'none':
 				case 'info':
 				case 'question':

src/vs/base/browser/ui/dialog/pending-dark.svg

+<?xml version='1.0' standalone='no' ?>
+<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'>
+	<style>
+    circle {
+      animation: ball 1.04s linear infinite;
+    }
+
+    circle:nth-child(2) { animation-delay: 0.13s; }
+    circle:nth-child(3) { animation-delay: 0.26s; }
+    circle:nth-child(4) { animation-delay: 0.39s; }
+    circle:nth-child(5) { animation-delay: 0.52s; }
+    circle:nth-child(6) { animation-delay: 0.65s; }
+    circle:nth-child(7) { animation-delay: 0.78s; }
+    circle:nth-child(8) { animation-delay: 0.91s; }
+
+    @keyframes ball {
+      from { opacity: 1; }
+      to { opacity: 0.3; }
+    }
+	</style>
+	<g style="fill:grey;">
+		<circle cx='5' cy='1' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' />
+		<circle cx='9' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='5' cy='9' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='1' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' />
+	</g>
+</svg>

src/vs/base/browser/ui/dialog/pending-hc.svg

+<?xml version='1.0' standalone='no' ?>
+<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'>
+	<style>
+    circle {
+      animation: ball 1.04s linear infinite;
+    }
+
+    circle:nth-child(2) { animation-delay: 0.13s; }
+    circle:nth-child(3) { animation-delay: 0.26s; }
+    circle:nth-child(4) { animation-delay: 0.39s; }
+    circle:nth-child(5) { animation-delay: 0.52s; }
+    circle:nth-child(6) { animation-delay: 0.65s; }
+    circle:nth-child(7) { animation-delay: 0.78s; }
+    circle:nth-child(8) { animation-delay: 0.91s; }
+
+    @keyframes ball {
+      from { opacity: 1; }
+      to { opacity: 0.3; }
+    }
+	</style>
+	<g style="fill:white;">
+		<circle cx='5' cy='1' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' />
+		<circle cx='9' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='5' cy='9' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='1' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' />
+	</g>
+</svg>

src/vs/base/browser/ui/dialog/pending.svg

+<?xml version='1.0' standalone='no' ?>
+<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'>
+	<style>
+    circle {
+      animation: ball 1.04s linear infinite;
+    }
+
+    circle:nth-child(2) { animation-delay: 0.13s; }
+    circle:nth-child(3) { animation-delay: 0.26s; }
+    circle:nth-child(4) { animation-delay: 0.39s; }
+    circle:nth-child(5) { animation-delay: 0.52s; }
+    circle:nth-child(6) { animation-delay: 0.65s; }
+    circle:nth-child(7) { animation-delay: 0.78s; }
+    circle:nth-child(8) { animation-delay: 0.91s; }
+
+    @keyframes ball {
+      from { opacity: 1; }
+      to { opacity: 0.3; }
+    }
+	</style>
+	<g>
+		<circle cx='5' cy='1' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' />
+		<circle cx='9' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='5' cy='9' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='1' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' />
+	</g>
+</svg>

src/vs/platform/progress/common/progress.ts

@@ -30,7 +30,8 @@ export const enum ProgressLocation {
 	Scm = 3,
 	Extensions = 5,
 	Window = 10,
-	Notification = 15
+	Notification = 15,
+	Dialog = 20
 }
 
 export interface IProgressOptions {

src/vs/workbench/services/progress/browser/progressService2.ts

@@ -16,6 +16,10 @@ import { INotificationService, Severity, INotificationHandle, INotificationActio
 import { Action } from 'vs/base/common/actions';
 import { Event } from 'vs/base/common/event';
 import { registerSingleton } from 'vs/platform/instantiation/common/extensions';
+import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
+import { Dialog } from 'vs/base/browser/ui/dialog/dialog';
+import { attachDialogStyler } from 'vs/platform/theme/common/styler';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 export class ProgressService2 implements IProgressService2 {
 
@@ -29,6 +33,8 @@ export class ProgressService2 implements IProgressService2 {
 		@IViewletService private readonly _viewletService: IViewletService,
 		@INotificationService private readonly _notificationService: INotificationService,
 		@IStatusbarService private readonly _statusbarService: IStatusbarService,
+		@ILayoutService private readonly _layoutService: ILayoutService,
+		@IThemeService private readonly _themeService: IThemeService
 	) { }
 
 	withProgress<R = unknown>(options: IProgressOptions, task: (progress: IProgress<IProgressStep>) => Promise<R>, onDidCancel?: () => void): Promise<R> {
@@ -53,6 +59,8 @@ export class ProgressService2 implements IProgressService2 {
 				return this._withViewletProgress('workbench.view.scm', task);
 			case ProgressLocation.Extensions:
 				return this._withViewletProgress('workbench.view.extensions', task);
+			case ProgressLocation.Dialog:
+				return this._withDialogProgress(options, task, onDidCancel);
 			default:
 				return Promise.reject(new Error(`Bad progress location: ${location}`));
 		}
@@ -265,6 +273,52 @@ export class ProgressService2 implements IProgressService2 {
 		promise.then(onDone, onDone);
 		return promise;
 	}
+
+	private _withDialogProgress<P extends Promise<R>, R = unknown>(options: IProgressOptions, task: (progress: IProgress<{ message?: string, increment?: number }>) => P, onDidCancel?: () => void): P {
+		const disposables: IDisposable[] = [];
+
+		let dialog: Dialog;
+
+		const createDialog = (message: string) => {
+			dialog = new Dialog(
+				this._layoutService.container,
+				message,
+				[options.cancellable ? localize('cancel', "Cancel") : localize('dismiss', "Dismiss")],
+				{ type: 'pending' }
+			);
+
+			disposables.push(dialog);
+			disposables.push(attachDialogStyler(dialog, this._themeService));
+
+			dialog.show().then(() => {
+				if (options.cancellable && typeof onDidCancel === 'function') {
+					onDidCancel();
+				}
+
+				dispose(dialog);
+			});
+
+			return dialog;
+		};
+
+		const updateDialog = (message?: string) => {
+			if (message && !dialog) {
+				dialog = createDialog(message);
+			}
+		};
+
+		const p = task({
+			report: progress => {
+				updateDialog(progress.message);
+			}
+		});
+
+		p.finally(() => {
+			dispose(disposables);
+		});
+
+		return p;
+	}
 }
 
 registerSingleton(IProgressService2, ProgressService2, true);