Merge from vscode 3d67364fbfcf676d93be64f949e9b33e7f1b969e (#5028)

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;
@@ -56,16 +60,22 @@
 	display: flex;
 	flex-grow: 1;
 	padding: 10px 15px 20px;
+	align-items: center;
 }
 
 .monaco-workbench .dialog-box .dialog-message-row .dialog-icon {
 	flex: 0 0 30px;
+	height: 30px;
 	padding-right: 4px;
 	padding-left: 4px;
 	background-position: center;
 	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 +88,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 +107,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 {
@@ -33,6 +33,7 @@ export class Dialog extends Disposable {
 	private element: HTMLElement | undefined;
 	private modal: HTMLElement | undefined;
 	private buttonsContainer: HTMLElement | undefined;
+	private messageDetailElement: HTMLElement | undefined;
 	private iconElement: HTMLElement | undefined;
 	private toolbarContainer: HTMLElement | undefined;
 	private buttonGroup: ButtonGroup | undefined;
@@ -40,7 +41,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);
 
@@ -56,13 +57,19 @@ export class Dialog extends Disposable {
 			messageElement.innerText = this.message;
 		}
 
-		const messageDetailElement = messageContainer.appendChild($('.dialog-message-detail'));
-		messageDetailElement.innerText = this.options.detail ? this.options.detail : message;
+		this.messageDetailElement = messageContainer.appendChild($('.dialog-message-detail'));
+		this.messageDetailElement.innerText = this.options.detail ? this.options.detail : message;
 
 		const toolbarRowElement = this.element.appendChild($('.dialog-toolbar-row'));
 		this.toolbarContainer = toolbarRowElement.appendChild($('.dialog-toolbar'));
 	}
 
+	updateMessage(message: string): void {
+		if (this.messageDetailElement) {
+			this.messageDetailElement.innerText = message;
+		}
+	}
+
 	async show(): Promise<number> {
 		return new Promise<number>((resolve) => {
 			if (!this.element || !this.buttonsContainer || !this.iconElement || !this.toolbarContainer) {
@@ -129,6 +136,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

@@ -0,0 +1,31 @@
+<?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

@@ -0,0 +1,31 @@
+<?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

@@ -0,0 +1,31 @@
+<?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>