Merge from vscode 3d67364fbfcf676d93be64f949e9b33e7f1b969e (#5028)

src/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.ts

@@ -126,7 +126,7 @@ export class BreadcrumbsWidget {
 			this._pendingLayout.dispose();
 		}
 		if (dim) {
-			// only meaure
+			// only measure
 			this._pendingLayout = this._updateDimensions(dim);
 		} else {
 			this._pendingLayout = this._updateScrollbar();

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>

src/vs/base/browser/ui/list/listWidget.ts

@@ -502,7 +502,7 @@ function isMouseRightClick(event: UIEvent): boolean {
 	return event instanceof MouseEvent && event.button === 2;
 }
 
-const DefaultMultipleSelectionContoller = {
+const DefaultMultipleSelectionController = {
 	isSelectionSingleChangeEvent,
 	isSelectionRangeChangeEvent
 };
@@ -529,7 +529,7 @@ export class MouseController<T> implements IDisposable {
 		this.multipleSelectionSupport = !(list.options.multipleSelectionSupport === false);
 
 		if (this.multipleSelectionSupport) {
-			this.multipleSelectionController = list.options.multipleSelectionController || DefaultMultipleSelectionContoller;
+			this.multipleSelectionController = list.options.multipleSelectionController || DefaultMultipleSelectionController;
 		}
 
 		this.openController = list.options.openController || DefaultOpenController;
@@ -909,7 +909,7 @@ function getContiguousRangeContaining(range: number[], value: number): number[]
 
 /**
  * Given two sorted collections of numbers, returns the intersection
- * betweem them (OR).
+ * between them (OR).
  */
 function disjunction(one: number[], other: number[]): number[] {
 	const result: number[] = [];

src/vs/base/browser/ui/octiconLabel/octicons/octicons.css

@@ -1,7 +1,7 @@
 @font-face {
     font-family: "octicons";
-    src: url("./octicons.ttf?4cd2299755e93a2430ba5703f4476584") format("truetype"),
-url("./octicons.svg?4cd2299755e93a2430ba5703f4476584#octicons") format("svg");
+    src: url("./octicons.ttf?91284a5a76ea88faeb754359b7f7cd03") format("truetype"),
+url("./octicons.svg?91284a5a76ea88faeb754359b7f7cd03#octicons") format("svg");
 }
 
 .octicon, .mega-octicon {
@@ -240,4 +240,5 @@ url("./octicons.svg?4cd2299755e93a2430ba5703f4476584#octicons") format("svg");
 .octicon-fold-up:before { content: "\f105" }
 .octicon-github-action:before { content: "\f106" }
 .octicon-play:before { content: "\f107" }
-.octicon-request-changes:before { content: "\f108" }
+.octicon-remote:before { content: "\f108" }
+.octicon-request-changes:before { content: "\f109" }

src/vs/base/browser/ui/scrollbar/scrollableElement.ts

@@ -523,7 +523,7 @@ export class DomScrollableElement extends ScrollableElement {
 	}
 
 	public scanDomNode(): void {
-		// widh, scrollLeft, scrollWidth, height, scrollTop, scrollHeight
+		// width, scrollLeft, scrollWidth, height, scrollTop, scrollHeight
 		this.setScrollDimensions({
 			width: this._element.clientWidth,
 			scrollWidth: this._element.scrollWidth,

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

@@ -33,7 +33,7 @@ export const enum TreeVisibility {
 export interface ITreeFilterDataResult<TFilterData> {
 
 	/**
-	 * Whether the node should be visibile.
+	 * Whether the node should be visible.
 	 */
 	visibility: boolean | TreeVisibility;