Merge from vscode c58aaab8a1cc22a7139b761166a0d4f37d41e998 (#7880)

* Merge from vscode c58aaab8a1cc22a7139b761166a0d4f37d41e998 * fix pipelines * fix strict-null-checks * add missing files
2026-02-16 18:46:40 -05:00 · 2019-10-21 22:12:22 -07:00
parent 7c9be74970
commit 1e22f47304
913 changed files with 18898 additions and 16536 deletions
--- a/src/vs/base/browser/ui/actionbar/actionbar.css
+++ b/src/vs/base/browser/ui/actionbar/actionbar.css
@@ -50,12 +50,6 @@
 	margin-right: 4px;
 }

-.monaco-action-bar .action-label.octicon {
-	font-size: 15px;
-	line-height: 35px;
-	text-align: center;
-}
-
 .monaco-action-bar .action-item.disabled .action-label,
 .monaco-action-bar .action-item.disabled .action-label:hover {
 	opacity: 0.4;
--- a/src/vs/base/browser/ui/actionbar/actionbar.ts
+++ b/src/vs/base/browser/ui/actionbar/actionbar.ts
@@ -33,11 +33,12 @@ export interface IBaseActionViewItemOptions {

 export class BaseActionViewItem extends Disposable implements IActionViewItem {

-	element?: HTMLElement;
+	element: HTMLElement | undefined;
+
 	_context: any;
 	_action: IAction;

-	private _actionRunner!: IActionRunner;
+	private _actionRunner: IActionRunner | undefined;

 	constructor(context: any, action: IAction, protected options?: IBaseActionViewItemOptions) {
 		super();
@@ -81,12 +82,16 @@ export class BaseActionViewItem extends Disposable implements IActionViewItem {
 		}
 	}

-	set actionRunner(actionRunner: IActionRunner) {
-		this._actionRunner = actionRunner;
+	get actionRunner(): IActionRunner {
+		if (!this._actionRunner) {
+			this._actionRunner = this._register(new ActionRunner());
+		}
+
+		return this._actionRunner;
 	}

-	get actionRunner(): IActionRunner {
-		return this._actionRunner;
+	set actionRunner(actionRunner: IActionRunner) {
+		this._actionRunner = actionRunner;
 	}

 	getAction(): IAction {
@@ -102,7 +107,7 @@ export class BaseActionViewItem extends Disposable implements IActionViewItem {
 	}

 	render(container: HTMLElement): void {
-		this.element = container;
+		const element = this.element = container;
 		this._register(Gesture.addTarget(container));

 		const enableDragging = this.options && this.options.draggable;
@@ -110,19 +115,19 @@ export class BaseActionViewItem extends Disposable implements IActionViewItem {
 			container.draggable = true;
 		}

-		this._register(DOM.addDisposableListener(this.element, EventType.Tap, e => this.onClick(e)));
+		this._register(DOM.addDisposableListener(element, EventType.Tap, e => this.onClick(e)));

-		this._register(DOM.addDisposableListener(this.element, DOM.EventType.MOUSE_DOWN, e => {
+		this._register(DOM.addDisposableListener(element, DOM.EventType.MOUSE_DOWN, e => {
 			if (!enableDragging) {
 				DOM.EventHelper.stop(e, true); // do not run when dragging is on because that would disable it
 			}

-			if (this._action.enabled && e.button === 0 && this.element) {
-				DOM.addClass(this.element, 'active');
+			if (this._action.enabled && e.button === 0) {
+				DOM.addClass(element, 'active');
 			}
 		}));

-		this._register(DOM.addDisposableListener(this.element, DOM.EventType.CLICK, e => {
+		this._register(DOM.addDisposableListener(element, DOM.EventType.CLICK, e => {
 			DOM.EventHelper.stop(e, true);
 			// See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Interact_with_the_clipboard
 			// > Writing to the clipboard
@@ -139,14 +144,14 @@ export class BaseActionViewItem extends Disposable implements IActionViewItem {
 			}
 		}));

-		this._register(DOM.addDisposableListener(this.element, DOM.EventType.DBLCLICK, e => {
+		this._register(DOM.addDisposableListener(element, DOM.EventType.DBLCLICK, e => {
 			DOM.EventHelper.stop(e, true);
 		}));

 		[DOM.EventType.MOUSE_UP, DOM.EventType.MOUSE_OUT].forEach(event => {
-			this._register(DOM.addDisposableListener(this.element!, event, e => {
+			this._register(DOM.addDisposableListener(element, event, e => {
 				DOM.EventHelper.stop(e);
-				DOM.removeClass(this.element!, 'active');
+				DOM.removeClass(element, 'active');
 			}));
 		});
 	}
@@ -165,7 +170,7 @@ export class BaseActionViewItem extends Disposable implements IActionViewItem {
 			}
 		}

-		this._actionRunner.run(this._action, context);
+		this.actionRunner.run(this._action, context);
 	}

 	focus(): void {
@@ -219,7 +224,6 @@ export class Separator extends Action {
 	constructor(label?: string) {
 		super(Separator.ID, label, label ? 'separator text' : 'separator');
 		this.checked = false;
-		this.radio = false;
 		this.enabled = false;
 	}
 }
@@ -232,7 +236,7 @@ export interface IActionViewItemOptions extends IBaseActionViewItemOptions {

 export class ActionViewItem extends BaseActionViewItem {

-	protected label!: HTMLElement;
+	protected label: HTMLElement | undefined;
 	protected options: IActionViewItemOptions;

 	private cssClass?: string;
@@ -252,13 +256,17 @@ export class ActionViewItem extends BaseActionViewItem {
 		if (this.element) {
 			this.label = DOM.append(this.element, DOM.$('a.action-label'));
 		}
-		if (this._action.id === Separator.ID) {
-			this.label.setAttribute('role', 'presentation'); // A separator is a presentation item
-		} else {
-			if (this.options.isMenu) {
-				this.label.setAttribute('role', 'menuitem');
+
+
+		if (this.label) {
+			if (this._action.id === Separator.ID) {
+				this.label.setAttribute('role', 'presentation'); // A separator is a presentation item
 			} else {
-				this.label.setAttribute('role', 'button');
+				if (this.options.isMenu) {
+					this.label.setAttribute('role', 'menuitem');
+				} else {
+					this.label.setAttribute('role', 'button');
+				}
 			}
 		}

@@ -276,11 +284,13 @@ export class ActionViewItem extends BaseActionViewItem {
 	focus(): void {
 		super.focus();

-		this.label.focus();
+		if (this.label) {
+			this.label.focus();
+		}
 	}

 	updateLabel(): void {
-		if (this.options.label) {
+		if (this.options.label && this.label) {
 			this.label.textContent = this.getAction().label;
 		}
 	}
@@ -299,52 +309,65 @@ export class ActionViewItem extends BaseActionViewItem {
 			}
 		}

-		if (title) {
+		if (title && this.label) {
 			this.label.title = title;
 		}
 	}

 	updateClass(): void {
-		if (this.cssClass) {
+		if (this.cssClass && this.label) {
 			DOM.removeClasses(this.label, this.cssClass);
 		}

 		if (this.options.icon) {
 			this.cssClass = this.getAction().class;
-			DOM.addClass(this.label, 'codicon');
-			if (this.cssClass) {
-				DOM.addClasses(this.label, this.cssClass);
+
+			if (this.label) {
+				DOM.addClass(this.label, 'codicon');
+				if (this.cssClass) {
+					DOM.addClasses(this.label, this.cssClass);
+				}
 			}

 			this.updateEnabled();
 		} else {
-			DOM.removeClass(this.label, 'codicon');
+			if (this.label) {
+				DOM.removeClass(this.label, 'codicon');
+			}
 		}
 	}

 	updateEnabled(): void {
 		if (this.getAction().enabled) {
-			this.label.removeAttribute('aria-disabled');
+			if (this.label) {
+				this.label.removeAttribute('aria-disabled');
+				DOM.removeClass(this.label, 'disabled');
+				this.label.tabIndex = 0;
+			}
+
 			if (this.element) {
 				DOM.removeClass(this.element, 'disabled');
 			}
-			DOM.removeClass(this.label, 'disabled');
-			this.label.tabIndex = 0;
 		} else {
-			this.label.setAttribute('aria-disabled', 'true');
+			if (this.label) {
+				this.label.setAttribute('aria-disabled', 'true');
+				DOM.addClass(this.label, 'disabled');
+				DOM.removeTabIndexAndUpdateFocus(this.label);
+			}
+
 			if (this.element) {
 				DOM.addClass(this.element, 'disabled');
 			}
-			DOM.addClass(this.label, 'disabled');
-			DOM.removeTabIndexAndUpdateFocus(this.label);
 		}
 	}

 	updateChecked(): void {
-		if (this.getAction().checked) {
-			DOM.addClass(this.label, 'checked');
-		} else {
-			DOM.removeClass(this.label, 'checked');
+		if (this.label) {
+			if (this.getAction().checked) {
+				DOM.addClass(this.label, 'checked');
+			} else {
+				DOM.removeClass(this.label, 'checked');
+			}
 		}
 	}
 }
@@ -745,9 +768,9 @@ export class ActionBar extends Disposable implements IActionRunner {
 		this.updateFocus(true);
 	}

-	protected updateFocus(fromRight?: boolean): void {
+	protected updateFocus(fromRight?: boolean, preventScroll?: boolean): void {
 		if (typeof this.focusedItem === 'undefined') {
-			this.actionsList.focus();
+			this.actionsList.focus({ preventScroll });
 		}

 		for (let i = 0; i < this.viewItems.length; i++) {
@@ -759,7 +782,7 @@ export class ActionBar extends Disposable implements IActionRunner {
 					if (actionViewItem.isEnabled() && types.isFunction(actionViewItem.focus)) {
 						actionViewItem.focus(fromRight);
 					} else {
-						this.actionsList.focus();
+						this.actionsList.focus({ preventScroll });
 					}
 				}
 			} else {
--- a/src/vs/base/browser/ui/button/button.ts
+++ b/src/vs/base/browser/ui/button/button.ts
@@ -79,7 +79,7 @@ export class Button extends Disposable {
 		this._register(DOM.addDisposableListener(this._element, DOM.EventType.KEY_DOWN, e => {
 			const event = new StandardKeyboardEvent(e);
 			let eventHandled = false;
-			if (this.enabled && event.equals(KeyCode.Enter) || event.equals(KeyCode.Space)) {
+			if (this.enabled && (event.equals(KeyCode.Enter) || event.equals(KeyCode.Space))) {
 				this._onDidClick.fire(e);
 				eventHandled = true;
 			} else if (event.equals(KeyCode.Escape)) {
@@ -129,15 +129,15 @@ export class Button extends Disposable {
 	// {{SQL CARBON EDIT}} -- removed 'private' access modifier @todo anthonydresser 4/12/19 things needs investigation whether we need this
 	applyStyles(): void {
 		if (this._element) {
-			const background = this.buttonBackground ? this.buttonBackground.toString() : null;
+			const background = this.buttonBackground ? this.buttonBackground.toString() : '';
 			const foreground = this.buttonForeground ? this.buttonForeground.toString() : null;
-			const border = this.buttonBorder ? this.buttonBorder.toString() : null;
+			const border = this.buttonBorder ? this.buttonBorder.toString() : '';

 			this._element.style.color = foreground;
 			this._element.style.backgroundColor = background;

-			this._element.style.borderWidth = border ? '1px' : null;
-			this._element.style.borderStyle = border ? 'solid' : null;
+			this._element.style.borderWidth = border ? '1px' : '';
+			this._element.style.borderStyle = border ? 'solid' : '';
 			this._element.style.borderColor = border;
 		}
 	}
--- a/src/vs/base/browser/ui/checkbox/checkbox.ts
+++ b/src/vs/base/browser/ui/checkbox/checkbox.ts
@@ -38,7 +38,7 @@ const defaultOpts = {

 export class CheckboxActionViewItem extends BaseActionViewItem {

-	private checkbox!: Checkbox;
+	private checkbox: Checkbox | undefined;
 	private readonly disposables = new DisposableStore();

 	render(container: HTMLElement): void {
@@ -51,7 +51,7 @@ export class CheckboxActionViewItem extends BaseActionViewItem {
 			title: this._action.label
 		});
 		this.disposables.add(this.checkbox);
-		this.disposables.add(this.checkbox.onChange(() => this._action.checked = this.checkbox!.checked, this));
+		this.disposables.add(this.checkbox.onChange(() => this._action.checked = !!this.checkbox && this.checkbox.checked, this));
 		this.element.appendChild(this.checkbox.domNode);
 	}

@@ -219,7 +219,7 @@ export class SimpleCheckbox extends Widget {

 	protected applyStyles(): void {
 		this.domNode.style.color = this.styles.checkboxForeground ? this.styles.checkboxForeground.toString() : null;
-		this.domNode.style.backgroundColor = this.styles.checkboxBackground ? this.styles.checkboxBackground.toString() : null;
-		this.domNode.style.borderColor = this.styles.checkboxBorder ? this.styles.checkboxBorder.toString() : null;
+		this.domNode.style.backgroundColor = this.styles.checkboxBackground ? this.styles.checkboxBackground.toString() : '';
+		this.domNode.style.borderColor = this.styles.checkboxBorder ? this.styles.checkboxBorder.toString() : '';
 	}
 }
--- a/src/vs/base/browser/ui/codiconLabel/codicon/codicon-animations.css
+++ b/src/vs/base/browser/ui/codiconLabel/codicon/codicon-animations.css
@@ -10,5 +10,5 @@
 }

 .codicon-animation-spin {
-	animation: octicon-spin 1.5s linear infinite;
+	animation: codicon-spin 1.5s linear infinite;
 }
--- a/src/vs/base/browser/ui/codiconLabel/codicon/codicon.css
+++ b/src/vs/base/browser/ui/codiconLabel/codicon/codicon.css
@@ -5,7 +5,7 @@

@font-face {
 	font-family: "codicon";
-	src: url("./codicon.ttf?3b584136fb1f0186a1ee578cdcb5240b") format("truetype");
+	src: url("./codicon.ttf?10ac421d405314bb3250169d97fc2c62") format("truetype");
 }

 .codicon[class*='codicon-'] {
@@ -54,6 +54,7 @@
 .codicon-star:before { content: "\ea6a" }
 .codicon-star-add:before { content: "\ea6a" }
 .codicon-star-delete:before { content: "\ea6a" }
+.codicon-star-empty:before { content: "\ea6a" }
 .codicon-comment:before { content: "\ea6b" }
 .codicon-comment-add:before { content: "\ea6b" }
 .codicon-alert:before { content: "\ea6c" }
@@ -69,7 +70,6 @@
 .codicon-eye-watch:before { content: "\ea70" }
 .codicon-circle-filled:before { content: "\ea71" }
 .codicon-primitive-dot:before { content: "\ea71" }
-.codicon-stop:before { content: "\ea72" }
 .codicon-primitive-square:before { content: "\ea72" }
 .codicon-edit:before { content: "\ea73" }
 .codicon-pencil:before { content: "\ea73" }
@@ -103,253 +103,264 @@
 .codicon-file-add:before { content: "\ea7f" }
 .codicon-new-folder:before { content: "\ea80" }
 .codicon-file-directory-create:before { content: "\ea80" }
-.codicon-Vector:before { content: "\f101" }
-.codicon-activate-breakpoints:before { content: "\f102" }
-.codicon-archive:before { content: "\f103" }
-.codicon-array:before { content: "\f104" }
-.codicon-arrow-both:before { content: "\f105" }
-.codicon-arrow-down:before { content: "\f106" }
-.codicon-arrow-left:before { content: "\f107" }
-.codicon-arrow-right:before { content: "\f108" }
-.codicon-arrow-small-down:before { content: "\f109" }
-.codicon-arrow-small-left:before { content: "\f10a" }
-.codicon-arrow-small-right:before { content: "\f10b" }
-.codicon-arrow-small-up:before { content: "\f10c" }
-.codicon-arrow-up:before { content: "\f10d" }
-.codicon-bell:before { content: "\f10e" }
-.codicon-bold:before { content: "\f10f" }
-.codicon-book:before { content: "\f110" }
-.codicon-bookmark:before { content: "\f111" }
-.codicon-boolean:before { content: "\f112" }
-.codicon-breakpoint-conditional-unverified:before { content: "\f113" }
-.codicon-breakpoint-conditional:before { content: "\f114" }
-.codicon-breakpoint-data-unverified:before { content: "\f115" }
-.codicon-breakpoint-data:before { content: "\f116" }
-.codicon-breakpoint-log-unverified:before { content: "\f117" }
-.codicon-breakpoint-log:before { content: "\f118" }
-.codicon-briefcase:before { content: "\f119" }
-.codicon-broadcast:before { content: "\f11a" }
-.codicon-browser:before { content: "\f11b" }
-.codicon-bug:before { content: "\f11c" }
-.codicon-calendar:before { content: "\f11d" }
-.codicon-case-sensitive:before { content: "\f11e" }
-.codicon-check:before { content: "\f11f" }
-.codicon-checklist:before { content: "\f120" }
-.codicon-chevron-down:before { content: "\f121" }
-.codicon-chevron-left:before { content: "\f122" }
-.codicon-chevron-right:before { content: "\f123" }
-.codicon-chevron-up:before { content: "\f124" }
-.codicon-circle-outline:before { content: "\f125" }
-.codicon-circle-slash:before { content: "\f126" }
-.codicon-circuit-board:before { content: "\f127" }
-.codicon-class:before { content: "\f128" }
-.codicon-clear-all:before { content: "\f129" }
-.codicon-clippy:before { content: "\f12a" }
-.codicon-close-all:before { content: "\f12b" }
-.codicon-cloud-download:before { content: "\f12c" }
-.codicon-cloud-upload:before { content: "\f12d" }
-.codicon-code:before { content: "\f12e" }
-.codicon-collapse-all:before { content: "\f12f" }
-.codicon-color-mode:before { content: "\f130" }
-.codicon-color:before { content: "\f131" }
-.codicon-comment-discussion:before { content: "\f132" }
-.codicon-compare-changes:before { content: "\f133" }
-.codicon-console:before { content: "\f134" }
-.codicon-constant:before { content: "\f135" }
-.codicon-continue:before { content: "\f136" }
-.codicon-credit-card:before { content: "\f137" }
-.codicon-current-and-breakpoint:before { content: "\f138" }
-.codicon-current:before { content: "\f139" }
-.codicon-dash:before { content: "\f13a" }
-.codicon-dashboard:before { content: "\f13b" }
-.codicon-database:before { content: "\f13c" }
-.codicon-debug:before { content: "\f13d" }
-.codicon-device-camera-video:before { content: "\f13e" }
-.codicon-device-camera:before { content: "\f13f" }
-.codicon-device-mobile:before { content: "\f140" }
-.codicon-diff-added:before { content: "\f141" }
-.codicon-diff-ignored:before { content: "\f142" }
-.codicon-diff-modified:before { content: "\f143" }
-.codicon-diff-removed:before { content: "\f144" }
-.codicon-diff-renamed:before { content: "\f145" }
-.codicon-diff:before { content: "\f146" }
-.codicon-discard:before { content: "\f147" }
-.codicon-disconnect-:before { content: "\f148" }
-.codicon-editor-layout:before { content: "\f149" }
-.codicon-ellipsis:before { content: "\f14a" }
-.codicon-empty-window:before { content: "\f14b" }
-.codicon-enumerator-member:before { content: "\f14c" }
-.codicon-enumerator:before { content: "\f14d" }
-.codicon-error:before { content: "\f14e" }
-.codicon-event:before { content: "\f14f" }
-.codicon-exclude:before { content: "\f150" }
-.codicon-extensions:before { content: "\f151" }
-.codicon-eye-closed:before { content: "\f152" }
-.codicon-field:before { content: "\f153" }
-.codicon-file-binary:before { content: "\f154" }
-.codicon-file-code:before { content: "\f155" }
-.codicon-file-media:before { content: "\f156" }
-.codicon-file-pdf:before { content: "\f157" }
-.codicon-file-submodule:before { content: "\f158" }
-.codicon-file-symlink-directory:before { content: "\f159" }
-.codicon-file-symlink-file:before { content: "\f15a" }
-.codicon-file-zip:before { content: "\f15b" }
-.codicon-files:before { content: "\f15c" }
-.codicon-filter:before { content: "\f15d" }
-.codicon-flame:before { content: "\f15e" }
-.codicon-fold-down:before { content: "\f15f" }
-.codicon-fold-up:before { content: "\f160" }
-.codicon-fold:before { content: "\f161" }
-.codicon-folder-active:before { content: "\f162" }
-.codicon-folder-opened:before { content: "\f163" }
-.codicon-folder:before { content: "\f164" }
-.codicon-gear:before { content: "\f165" }
-.codicon-gift:before { content: "\f166" }
-.codicon-gist-secret:before { content: "\f167" }
-.codicon-gist:before { content: "\f168" }
-.codicon-git-commit:before { content: "\f169" }
-.codicon-git-compare:before { content: "\f16a" }
-.codicon-git-merge:before { content: "\f16b" }
-.codicon-github-action:before { content: "\f16c" }
-.codicon-github-alt:before { content: "\f16d" }
-.codicon-github:before { content: "\f16e" }
-.codicon-globe:before { content: "\f16f" }
-.codicon-go-to-file:before { content: "\f170" }
-.codicon-grabber:before { content: "\f171" }
-.codicon-graph:before { content: "\f172" }
-.codicon-gripper:before { content: "\f173" }
-.codicon-heart:before { content: "\f174" }
-.codicon-history:before { content: "\f175" }
-.codicon-home:before { content: "\f176" }
-.codicon-horizontal-rule:before { content: "\f177" }
-.codicon-hubot:before { content: "\f178" }
-.codicon-inbox:before { content: "\f179" }
-.codicon-interface:before { content: "\f17a" }
-.codicon-issue-closed:before { content: "\f17b" }
-.codicon-issue-reopened:before { content: "\f17c" }
-.codicon-issues:before { content: "\f17d" }
-.codicon-italic:before { content: "\f17e" }
-.codicon-jersey:before { content: "\f17f" }
-.codicon-json:before { content: "\f180" }
-.codicon-kebab-vertical:before { content: "\f181" }
-.codicon-key:before { content: "\f182" }
-.codicon-keyword:before { content: "\f183" }
-.codicon-law:before { content: "\f184" }
-.codicon-lightbulb-autofix:before { content: "\f185" }
-.codicon-link-external:before { content: "\f186" }
-.codicon-link:before { content: "\f187" }
-.codicon-list-ordered:before { content: "\f188" }
-.codicon-list-unordered:before { content: "\f189" }
-.codicon-live-share:before { content: "\f18a" }
-.codicon-loading:before { content: "\f18b" }
-.codicon-location:before { content: "\f18c" }
-.codicon-mail-read:before { content: "\f18d" }
-.codicon-mail:before { content: "\f18e" }
-.codicon-markdown:before { content: "\f18f" }
-.codicon-megaphone:before { content: "\f190" }
-.codicon-mention:before { content: "\f191" }
-.codicon-method:before { content: "\f192" }
-.codicon-milestone:before { content: "\f193" }
-.codicon-misc:before { content: "\f194" }
-.codicon-mortar-board:before { content: "\f195" }
-.codicon-move:before { content: "\f196" }
-.codicon-multiple-windows:before { content: "\f197" }
-.codicon-mute:before { content: "\f198" }
-.codicon-namespace:before { content: "\f199" }
-.codicon-no-newline:before { content: "\f19a" }
-.codicon-note:before { content: "\f19b" }
-.codicon-numeric:before { content: "\f19c" }
-.codicon-octoface:before { content: "\f19d" }
-.codicon-open-preview:before { content: "\f19e" }
-.codicon-operator:before { content: "\f19f" }
-.codicon-package:before { content: "\f1a0" }
-.codicon-paintcan:before { content: "\f1a1" }
-.codicon-parameter:before { content: "\f1a2" }
-.codicon-pause:before { content: "\f1a3" }
-.codicon-pin:before { content: "\f1a4" }
-.codicon-play:before { content: "\f1a5" }
-.codicon-plug:before { content: "\f1a6" }
-.codicon-preserve-case:before { content: "\f1a7" }
-.codicon-preview:before { content: "\f1a8" }
-.codicon-project:before { content: "\f1a9" }
-.codicon-property:before { content: "\f1aa" }
-.codicon-pulse:before { content: "\f1ab" }
-.codicon-question:before { content: "\f1ac" }
-.codicon-quote:before { content: "\f1ad" }
-.codicon-radio-tower:before { content: "\f1ae" }
-.codicon-reactions:before { content: "\f1af" }
-.codicon-references:before { content: "\f1b0" }
-.codicon-refresh:before { content: "\f1b1" }
-.codicon-regex:before { content: "\f1b2" }
-.codicon-remote:before { content: "\f1b3" }
-.codicon-remove:before { content: "\f1b4" }
-.codicon-replace-all:before { content: "\f1b5" }
-.codicon-replace:before { content: "\f1b6" }
-.codicon-repo-clone:before { content: "\f1b7" }
-.codicon-repo-force-push:before { content: "\f1b8" }
-.codicon-repo-pull:before { content: "\f1b9" }
-.codicon-repo-push:before { content: "\f1ba" }
-.codicon-report:before { content: "\f1bb" }
-.codicon-request-changes:before { content: "\f1bc" }
-.codicon-restart:before { content: "\f1bd" }
-.codicon-rocket:before { content: "\f1be" }
-.codicon-root-folder-opened:before { content: "\f1bf" }
-.codicon-root-folder:before { content: "\f1c0" }
-.codicon-rss:before { content: "\f1c1" }
-.codicon-ruby:before { content: "\f1c2" }
-.codicon-ruler:before { content: "\f1c3" }
-.codicon-save-all:before { content: "\f1c4" }
-.codicon-save-as:before { content: "\f1c5" }
-.codicon-save:before { content: "\f1c6" }
-.codicon-screen-full:before { content: "\f1c7" }
-.codicon-screen-normal:before { content: "\f1c8" }
-.codicon-search-stop:before { content: "\f1c9" }
-.codicon-selection:before { content: "\f1ca" }
-.codicon-server:before { content: "\f1cb" }
-.codicon-settings:before { content: "\f1cc" }
-.codicon-shield:before { content: "\f1cd" }
-.codicon-smiley:before { content: "\f1ce" }
-.codicon-snippet:before { content: "\f1cf" }
-.codicon-sort-precedence:before { content: "\f1d0" }
-.codicon-split-horizontal:before { content: "\f1d1" }
-.codicon-split-vertical:before { content: "\f1d2" }
-.codicon-squirrel:before { content: "\f1d3" }
-.codicon-star-empty:before { content: "\f1d4" }
-.codicon-star-full:before { content: "\f1d5" }
-.codicon-star-half:before { content: "\f1d6" }
-.codicon-start:before { content: "\f1d7" }
-.codicon-step-into:before { content: "\f1d8" }
-.codicon-step-out:before { content: "\f1d9" }
-.codicon-step-over:before { content: "\f1da" }
-.codicon-string:before { content: "\f1db" }
-.codicon-structure:before { content: "\f1dc" }
-.codicon-tasklist:before { content: "\f1dd" }
-.codicon-telescope:before { content: "\f1de" }
-.codicon-text-size:before { content: "\f1df" }
-.codicon-three-bars:before { content: "\f1e0" }
-.codicon-thumbsdown:before { content: "\f1e1" }
-.codicon-thumbsup:before { content: "\f1e2" }
-.codicon-tools:before { content: "\f1e3" }
-.codicon-trash:before { content: "\f1e4" }
-.codicon-triangle-down:before { content: "\f1e5" }
-.codicon-triangle-left:before { content: "\f1e6" }
-.codicon-triangle-right:before { content: "\f1e7" }
-.codicon-triangle-up:before { content: "\f1e8" }
-.codicon-twitter:before { content: "\f1e9" }
-.codicon-unfold:before { content: "\f1ea" }
-.codicon-unlock:before { content: "\f1eb" }
-.codicon-unmute:before { content: "\f1ec" }
-.codicon-unverified:before { content: "\f1ed" }
-.codicon-variable:before { content: "\f1ee" }
-.codicon-verified:before { content: "\f1ef" }
-.codicon-versions:before { content: "\f1f0" }
-.codicon-vm-active:before { content: "\f1f1" }
-.codicon-vm-outline:before { content: "\f1f2" }
-.codicon-vm-running:before { content: "\f1f3" }
-.codicon-watch:before { content: "\f1f4" }
-.codicon-whitespace:before { content: "\f1f5" }
-.codicon-whole-word:before { content: "\f1f6" }
-.codicon-window:before { content: "\f1f7" }
-.codicon-word-wrap:before { content: "\f1f8" }
-.codicon-zoom-in:before { content: "\f1f9" }
-.codicon-zoom-out:before { content: "\f1fa" }
+.codicon-trash:before { content: "\ea81" }
+.codicon-trashcan:before { content: "\ea81" }
+.codicon-history:before { content: "\ea82" }
+.codicon-clock:before { content: "\ea82" }
+.codicon-folder:before { content: "\ea83" }
+.codicon-file-directory:before { content: "\ea83" }
+.codicon-logo-github:before { content: "\ea84" }
+.codicon-mark-github:before { content: "\ea84" }
+.codicon-github:before { content: "\ea84" }
+.codicon-terminal:before { content: "\ea85" }
+.codicon-console:before { content: "\ea85" }
+.codicon-zap:before { content: "\ea86" }
+.codicon-event:before { content: "\ea86" }
+.codicon-error:before { content: "\ea87" }
+.codicon-stop:before { content: "\ea87" }
+.codicon-activate-breakpoints:before { content: "\f101" }
+.codicon-archive:before { content: "\f102" }
+.codicon-array:before { content: "\f103" }
+.codicon-arrow-both:before { content: "\f104" }
+.codicon-arrow-down:before { content: "\f105" }
+.codicon-arrow-left:before { content: "\f106" }
+.codicon-arrow-right:before { content: "\f107" }
+.codicon-arrow-small-down:before { content: "\f108" }
+.codicon-arrow-small-left:before { content: "\f109" }
+.codicon-arrow-small-right:before { content: "\f10a" }
+.codicon-arrow-small-up:before { content: "\f10b" }
+.codicon-arrow-up:before { content: "\f10c" }
+.codicon-bell:before { content: "\f10d" }
+.codicon-bold:before { content: "\f10e" }
+.codicon-book:before { content: "\f10f" }
+.codicon-bookmark:before { content: "\f110" }
+.codicon-boolean:before { content: "\f111" }
+.codicon-breakpoint-conditional-unverified:before { content: "\f112" }
+.codicon-breakpoint-conditional:before { content: "\f113" }
+.codicon-breakpoint-data-unverified:before { content: "\f114" }
+.codicon-breakpoint-data:before { content: "\f115" }
+.codicon-breakpoint-log-unverified:before { content: "\f116" }
+.codicon-breakpoint-log:before { content: "\f117" }
+.codicon-briefcase:before { content: "\f118" }
+.codicon-broadcast:before { content: "\f119" }
+.codicon-browser:before { content: "\f11a" }
+.codicon-bug:before { content: "\f11b" }
+.codicon-calendar:before { content: "\f11c" }
+.codicon-case-sensitive:before { content: "\f11d" }
+.codicon-check:before { content: "\f11e" }
+.codicon-checklist:before { content: "\f11f" }
+.codicon-chevron-down:before { content: "\f120" }
+.codicon-chevron-left:before { content: "\f121" }
+.codicon-chevron-right:before { content: "\f122" }
+.codicon-chevron-up:before { content: "\f123" }
+.codicon-chrome-close:before { content: "\f124" }
+.codicon-chrome-maximize:before { content: "\f125" }
+.codicon-chrome-minimize:before { content: "\f126" }
+.codicon-chrome-restore:before { content: "\f127" }
+.codicon-circle-outline:before { content: "\f128" }
+.codicon-circle-slash:before { content: "\f129" }
+.codicon-circuit-board:before { content: "\f12a" }
+.codicon-class:before { content: "\f12b" }
+.codicon-clear-all:before { content: "\f12c" }
+.codicon-clippy:before { content: "\f12d" }
+.codicon-close-all:before { content: "\f12e" }
+.codicon-cloud-download:before { content: "\f12f" }
+.codicon-cloud-upload:before { content: "\f130" }
+.codicon-code:before { content: "\f131" }
+.codicon-collapse-all:before { content: "\f132" }
+.codicon-color-mode:before { content: "\f133" }
+.codicon-color:before { content: "\f134" }
+.codicon-comment-discussion:before { content: "\f135" }
+.codicon-compare-changes:before { content: "\f136" }
+.codicon-constant:before { content: "\f137" }
+.codicon-continue:before { content: "\f138" }
+.codicon-credit-card:before { content: "\f139" }
+.codicon-current-and-breakpoint:before { content: "\f13a" }
+.codicon-current:before { content: "\f13b" }
+.codicon-dash:before { content: "\f13c" }
+.codicon-dashboard:before { content: "\f13d" }
+.codicon-database:before { content: "\f13e" }
+.codicon-debug-disconnect:before { content: "\f13f" }
+.codicon-debug-pause:before { content: "\f140" }
+.codicon-debug-restart:before { content: "\f141" }
+.codicon-debug-start:before { content: "\f142" }
+.codicon-debug-step-into:before { content: "\f143" }
+.codicon-debug-step-out:before { content: "\f144" }
+.codicon-debug-step-over:before { content: "\f145" }
+.codicon-debug-stop:before { content: "\f146" }
+.codicon-debug:before { content: "\f147" }
+.codicon-device-camera-video:before { content: "\f148" }
+.codicon-device-camera:before { content: "\f149" }
+.codicon-device-mobile:before { content: "\f14a" }
+.codicon-diff-added:before { content: "\f14b" }
+.codicon-diff-ignored:before { content: "\f14c" }
+.codicon-diff-modified:before { content: "\f14d" }
+.codicon-diff-removed:before { content: "\f14e" }
+.codicon-diff-renamed:before { content: "\f14f" }
+.codicon-diff:before { content: "\f150" }
+.codicon-discard:before { content: "\f151" }
+.codicon-editor-layout:before { content: "\f152" }
+.codicon-ellipsis:before { content: "\f153" }
+.codicon-empty-window:before { content: "\f154" }
+.codicon-enumerator-member:before { content: "\f155" }
+.codicon-enumerator:before { content: "\f156" }
+.codicon-exclude:before { content: "\f157" }
+.codicon-extensions:before { content: "\f158" }
+.codicon-eye-closed:before { content: "\f159" }
+.codicon-field:before { content: "\f15a" }
+.codicon-file-binary:before { content: "\f15b" }
+.codicon-file-code:before { content: "\f15c" }
+.codicon-file-media:before { content: "\f15d" }
+.codicon-file-pdf:before { content: "\f15e" }
+.codicon-file-submodule:before { content: "\f15f" }
+.codicon-file-symlink-directory:before { content: "\f160" }
+.codicon-file-symlink-file:before { content: "\f161" }
+.codicon-file-zip:before { content: "\f162" }
+.codicon-files:before { content: "\f163" }
+.codicon-filter:before { content: "\f164" }
+.codicon-flame:before { content: "\f165" }
+.codicon-fold-down:before { content: "\f166" }
+.codicon-fold-up:before { content: "\f167" }
+.codicon-fold:before { content: "\f168" }
+.codicon-folder-active:before { content: "\f169" }
+.codicon-folder-opened:before { content: "\f16a" }
+.codicon-gear:before { content: "\f16b" }
+.codicon-gift:before { content: "\f16c" }
+.codicon-gist-secret:before { content: "\f16d" }
+.codicon-gist:before { content: "\f16e" }
+.codicon-git-commit:before { content: "\f16f" }
+.codicon-git-compare:before { content: "\f170" }
+.codicon-git-merge:before { content: "\f171" }
+.codicon-github-action:before { content: "\f172" }
+.codicon-github-alt:before { content: "\f173" }
+.codicon-globe:before { content: "\f174" }
+.codicon-go-to-file:before { content: "\f175" }
+.codicon-grabber:before { content: "\f176" }
+.codicon-graph:before { content: "\f177" }
+.codicon-gripper:before { content: "\f178" }
+.codicon-heart:before { content: "\f179" }
+.codicon-home:before { content: "\f17a" }
+.codicon-horizontal-rule:before { content: "\f17b" }
+.codicon-hubot:before { content: "\f17c" }
+.codicon-inbox:before { content: "\f17d" }
+.codicon-interface:before { content: "\f17e" }
+.codicon-issue-closed:before { content: "\f17f" }
+.codicon-issue-reopened:before { content: "\f180" }
+.codicon-issues:before { content: "\f181" }
+.codicon-italic:before { content: "\f182" }
+.codicon-jersey:before { content: "\f183" }
+.codicon-json:before { content: "\f184" }
+.codicon-kebab-vertical:before { content: "\f185" }
+.codicon-key:before { content: "\f186" }
+.codicon-keyword:before { content: "\f187" }
+.codicon-law:before { content: "\f188" }
+.codicon-lightbulb-autofix:before { content: "\f189" }
+.codicon-link-external:before { content: "\f18a" }
+.codicon-link:before { content: "\f18b" }
+.codicon-list-ordered:before { content: "\f18c" }
+.codicon-list-unordered:before { content: "\f18d" }
+.codicon-live-share:before { content: "\f18e" }
+.codicon-loading:before { content: "\f18f" }
+.codicon-location:before { content: "\f190" }
+.codicon-mail-read:before { content: "\f191" }
+.codicon-mail:before { content: "\f192" }
+.codicon-markdown:before { content: "\f193" }
+.codicon-megaphone:before { content: "\f194" }
+.codicon-mention:before { content: "\f195" }
+.codicon-method:before { content: "\f196" }
+.codicon-milestone:before { content: "\f197" }
+.codicon-misc:before { content: "\f198" }
+.codicon-mortar-board:before { content: "\f199" }
+.codicon-move:before { content: "\f19a" }
+.codicon-multiple-windows:before { content: "\f19b" }
+.codicon-mute:before { content: "\f19c" }
+.codicon-namespace:before { content: "\f19d" }
+.codicon-no-newline:before { content: "\f19e" }
+.codicon-note:before { content: "\f19f" }
+.codicon-numeric:before { content: "\f1a0" }
+.codicon-octoface:before { content: "\f1a1" }
+.codicon-open-preview:before { content: "\f1a2" }
+.codicon-operator:before { content: "\f1a3" }
+.codicon-package:before { content: "\f1a4" }
+.codicon-paintcan:before { content: "\f1a5" }
+.codicon-parameter:before { content: "\f1a6" }
+.codicon-pin:before { content: "\f1a7" }
+.codicon-play:before { content: "\f1a8" }
+.codicon-plug:before { content: "\f1a9" }
+.codicon-preserve-case:before { content: "\f1aa" }
+.codicon-preview:before { content: "\f1ab" }
+.codicon-project:before { content: "\f1ac" }
+.codicon-property:before { content: "\f1ad" }
+.codicon-pulse:before { content: "\f1ae" }
+.codicon-question:before { content: "\f1af" }
+.codicon-quote:before { content: "\f1b0" }
+.codicon-radio-tower:before { content: "\f1b1" }
+.codicon-reactions:before { content: "\f1b2" }
+.codicon-references:before { content: "\f1b3" }
+.codicon-refresh:before { content: "\f1b4" }
+.codicon-regex:before { content: "\f1b5" }
+.codicon-remote:before { content: "\f1b6" }
+.codicon-remove:before { content: "\f1b7" }
+.codicon-replace-all:before { content: "\f1b8" }
+.codicon-replace:before { content: "\f1b9" }
+.codicon-repo-clone:before { content: "\f1ba" }
+.codicon-repo-force-push:before { content: "\f1bb" }
+.codicon-repo-pull:before { content: "\f1bc" }
+.codicon-repo-push:before { content: "\f1bd" }
+.codicon-report:before { content: "\f1be" }
+.codicon-request-changes:before { content: "\f1bf" }
+.codicon-rocket:before { content: "\f1c0" }
+.codicon-root-folder-opened:before { content: "\f1c1" }
+.codicon-root-folder:before { content: "\f1c2" }
+.codicon-rss:before { content: "\f1c3" }
+.codicon-ruby:before { content: "\f1c4" }
+.codicon-ruler:before { content: "\f1c5" }
+.codicon-save-all:before { content: "\f1c6" }
+.codicon-save-as:before { content: "\f1c7" }
+.codicon-save:before { content: "\f1c8" }
+.codicon-screen-full:before { content: "\f1c9" }
+.codicon-screen-normal:before { content: "\f1ca" }
+.codicon-search-stop:before { content: "\f1cb" }
+.codicon-selection:before { content: "\f1cc" }
+.codicon-server:before { content: "\f1cd" }
+.codicon-settings:before { content: "\f1ce" }
+.codicon-shield:before { content: "\f1cf" }
+.codicon-smiley:before { content: "\f1d0" }
+.codicon-snippet:before { content: "\f1d1" }
+.codicon-sort-precedence:before { content: "\f1d2" }
+.codicon-split-horizontal:before { content: "\f1d3" }
+.codicon-split-vertical:before { content: "\f1d4" }
+.codicon-squirrel:before { content: "\f1d5" }
+.codicon-star-full:before { content: "\f1d6" }
+.codicon-star-half:before { content: "\f1d7" }
+.codicon-string:before { content: "\f1d8" }
+.codicon-structure:before { content: "\f1d9" }
+.codicon-tasklist:before { content: "\f1da" }
+.codicon-telescope:before { content: "\f1db" }
+.codicon-text-size:before { content: "\f1dc" }
+.codicon-three-bars:before { content: "\f1dd" }
+.codicon-thumbsdown:before { content: "\f1de" }
+.codicon-thumbsup:before { content: "\f1df" }
+.codicon-tools:before { content: "\f1e0" }
+.codicon-triangle-down:before { content: "\f1e1" }
+.codicon-triangle-left:before { content: "\f1e2" }
+.codicon-triangle-right:before { content: "\f1e3" }
+.codicon-triangle-up:before { content: "\f1e4" }
+.codicon-twitter:before { content: "\f1e5" }
+.codicon-unfold:before { content: "\f1e6" }
+.codicon-unlock:before { content: "\f1e7" }
+.codicon-unmute:before { content: "\f1e8" }
+.codicon-unverified:before { content: "\f1e9" }
+.codicon-variable:before { content: "\f1ea" }
+.codicon-verified:before { content: "\f1eb" }
+.codicon-versions:before { content: "\f1ec" }
+.codicon-vm-active:before { content: "\f1ed" }
+.codicon-vm-outline:before { content: "\f1ee" }
+.codicon-vm-running:before { content: "\f1ef" }
+.codicon-watch:before { content: "\f1f0" }
+.codicon-whitespace:before { content: "\f1f1" }
+.codicon-whole-word:before { content: "\f1f2" }
+.codicon-window:before { content: "\f1f3" }
+.codicon-word-wrap:before { content: "\f1f4" }
+.codicon-zoom-in:before { content: "\f1f5" }
+.codicon-zoom-out:before { content: "\f1f6" }
--- a/src/vs/base/browser/ui/codiconLabel/codicon/codicon.ttf
+++ b/src/vs/base/browser/ui/codiconLabel/codicon/codicon.ttf
--- a/src/vs/base/browser/ui/codiconLabel/codiconLabel.ts
+++ b/src/vs/base/browser/ui/codiconLabel/codiconLabel.ts
@@ -8,7 +8,7 @@ import 'vs/css!./codicon/codicon-animations';
 import { escape } from 'vs/base/common/strings';

 function expand(text: string): string {
-	return text.replace(/\$\(((.+?)(~(.*?))?)\)/g, (_match, _g1, name, _g3, animation) => {
+	return text.replace(/\$\((([a-z0-9\-]+?)(~([a-z0-9\-]*?))?)\)/gi, (_match, _g1, name, _g3, animation) => {
 		return `<span class="codicon codicon-${name} ${animation ? `codicon-animation-${animation}` : ''}"></span>`;
 	});
 }
--- a/src/vs/base/browser/ui/contextview/contextview.ts
+++ b/src/vs/base/browser/ui/contextview/contextview.ts
@@ -263,7 +263,7 @@ export class ContextView extends Disposable {
 		const delegate = this.delegate;
 		this.delegate = null;

-		if (delegate && delegate.onHide) {
+		if (delegate?.onHide) {
 			delegate.onHide(data);
 		}

--- a/src/vs/base/browser/ui/countBadge/countBadge.ts
+++ b/src/vs/base/browser/ui/countBadge/countBadge.ts
@@ -85,15 +85,15 @@ export class CountBadge {

 	private applyStyles(): void {
 		if (this.element) {
-			const background = this.badgeBackground ? this.badgeBackground.toString() : null;
-			const foreground = this.badgeForeground ? this.badgeForeground.toString() : null;
-			const border = this.badgeBorder ? this.badgeBorder.toString() : null;
+			const background = this.badgeBackground ? this.badgeBackground.toString() : '';
+			const foreground = this.badgeForeground ? this.badgeForeground.toString() : '';
+			const border = this.badgeBorder ? this.badgeBorder.toString() : '';

 			this.element.style.backgroundColor = background;
 			this.element.style.color = foreground;

-			this.element.style.borderWidth = border ? '1px' : null;
-			this.element.style.borderStyle = border ? 'solid' : null;
+			this.element.style.borderWidth = border ? '1px' : '';
+			this.element.style.borderStyle = border ? 'solid' : '';
 			this.element.style.borderColor = border;
 		}
 	}
--- a/src/vs/base/browser/ui/dialog/dialog.ts
+++ b/src/vs/base/browser/ui/dialog/dialog.ts
@@ -142,7 +142,9 @@ export class Dialog extends Disposable {
 				let eventHandled = false;
 				if (evt.equals(KeyMod.Shift | KeyCode.Tab) || evt.equals(KeyCode.LeftArrow)) {
 					if (!this.checkboxHasFocus && focusedButton === 0) {
-						this.checkbox!.domNode.focus();
+						if (this.checkbox) {
+							this.checkbox.domNode.focus();
+						}
 						this.checkboxHasFocus = true;
 					} else {
 						focusedButton = (this.checkboxHasFocus ? 0 : focusedButton) + buttonGroup.buttons.length - 1;
@@ -154,7 +156,9 @@ export class Dialog extends Disposable {
 					eventHandled = true;
 				} else if (evt.equals(KeyCode.Tab) || evt.equals(KeyCode.RightArrow)) {
 					if (!this.checkboxHasFocus && focusedButton === buttonGroup.buttons.length - 1) {
-						this.checkbox!.domNode.focus();
+						if (this.checkbox) {
+							this.checkbox.domNode.focus();
+						}
 						this.checkboxHasFocus = true;
 					} else {
 						focusedButton = this.checkboxHasFocus ? 0 : focusedButton + 1;
@@ -237,10 +241,10 @@ export class Dialog extends Disposable {
 		if (this.styles) {
 			const style = this.styles;

-			const fgColor = style.dialogForeground ? `${style.dialogForeground}` : null;
-			const bgColor = style.dialogBackground ? `${style.dialogBackground}` : null;
-			const shadowColor = style.dialogShadow ? `0 0px 8px ${style.dialogShadow}` : null;
-			const border = style.dialogBorder ? `1px solid ${style.dialogBorder}` : null;
+			const fgColor = style.dialogForeground ? `${style.dialogForeground}` : '';
+			const bgColor = style.dialogBackground ? `${style.dialogBackground}` : '';
+			const shadowColor = style.dialogShadow ? `0 0px 8px ${style.dialogShadow}` : '';
+			const border = style.dialogBorder ? `1px solid ${style.dialogBorder}` : '';

 			if (this.element) {
 				this.element.style.color = fgColor;
--- a/src/vs/base/browser/ui/dropdown/dropdown.ts
+++ b/src/vs/base/browser/ui/dropdown/dropdown.ts
@@ -208,8 +208,8 @@ export interface IDropdownMenuOptions extends IBaseDropdownOptions {

 export class DropdownMenu extends BaseDropdown {
 	private _contextMenuProvider: IContextMenuProvider;
-	private _menuOptions: IMenuOptions;
-	private _actions: ReadonlyArray<IAction>;
+	private _menuOptions: IMenuOptions | undefined;
+	private _actions: ReadonlyArray<IAction> = [];
 	private actionProvider?: IActionProvider;
 	private menuClassName: string;

@@ -222,11 +222,11 @@ export class DropdownMenu extends BaseDropdown {
 		this.menuClassName = options.menuClassName || '';
 	}

-	set menuOptions(options: IMenuOptions) {
+	set menuOptions(options: IMenuOptions | undefined) {
 		this._menuOptions = options;
 	}

-	get menuOptions(): IMenuOptions {
+	get menuOptions(): IMenuOptions | undefined {
 		return this._menuOptions;
 	}

@@ -256,7 +256,7 @@ export class DropdownMenu extends BaseDropdown {
 			getMenuClassName: () => this.menuClassName,
 			onHide: () => this.onHide(),
 			actionRunner: this.menuOptions ? this.menuOptions.actionRunner : undefined,
-			anchorAlignment: this.menuOptions.anchorAlignment
+			anchorAlignment: this.menuOptions ? this.menuOptions.anchorAlignment : AnchorAlignment.LEFT
 		});
 	}

@@ -345,7 +345,11 @@ export class DropdownMenuActionViewItem extends BaseActionViewItem {
 		super.setActionContext(newContext);

 		if (this.dropdownMenu) {
-			this.dropdownMenu.menuOptions.context = newContext;
+			if (this.dropdownMenu.menuOptions) {
+				this.dropdownMenu.menuOptions.context = newContext;
+			} else {
+				this.dropdownMenu.menuOptions = { context: newContext };
+			}
 		}
 	}

--- a/src/vs/base/browser/ui/findinput/replaceInput.ts
+++ b/src/vs/base/browser/ui/findinput/replaceInput.ts
@@ -123,11 +123,96 @@ export class ReplaceInput extends Widget {
 		this.inputValidationErrorBackground = options.inputValidationErrorBackground;
 		this.inputValidationErrorForeground = options.inputValidationErrorForeground;

+		const history = options.history || [];
 		const flexibleHeight = !!options.flexibleHeight;
 		const flexibleWidth = !!options.flexibleWidth;
 		const flexibleMaxHeight = options.flexibleMaxHeight;

-		this.buildDomNode(options.history || [], flexibleHeight, flexibleWidth, flexibleMaxHeight);
+		this.domNode = document.createElement('div');
+		dom.addClass(this.domNode, 'monaco-findInput');
+
+		this.inputBox = this._register(new HistoryInputBox(this.domNode, this.contextViewProvider, {
+			ariaLabel: this.label || '',
+			placeholder: this.placeholder || '',
+			validationOptions: {
+				validation: this.validation
+			},
+			inputBackground: this.inputBackground,
+			inputForeground: this.inputForeground,
+			inputBorder: this.inputBorder,
+			inputValidationInfoBackground: this.inputValidationInfoBackground,
+			inputValidationInfoForeground: this.inputValidationInfoForeground,
+			inputValidationInfoBorder: this.inputValidationInfoBorder,
+			inputValidationWarningBackground: this.inputValidationWarningBackground,
+			inputValidationWarningForeground: this.inputValidationWarningForeground,
+			inputValidationWarningBorder: this.inputValidationWarningBorder,
+			inputValidationErrorBackground: this.inputValidationErrorBackground,
+			inputValidationErrorForeground: this.inputValidationErrorForeground,
+			inputValidationErrorBorder: this.inputValidationErrorBorder,
+			history,
+			flexibleHeight,
+			flexibleWidth,
+			flexibleMaxHeight
+		}));
+
+		this.preserveCase = this._register(new PreserveCaseCheckbox({
+			appendTitle: '',
+			isChecked: false,
+			inputActiveOptionBorder: this.inputActiveOptionBorder,
+			inputActiveOptionBackground: this.inputActiveOptionBackground,
+		}));
+		this._register(this.preserveCase.onChange(viaKeyboard => {
+			this._onDidOptionChange.fire(viaKeyboard);
+			if (!viaKeyboard && this.fixFocusOnOptionClickEnabled) {
+				this.inputBox.focus();
+			}
+			this.validate();
+		}));
+		this._register(this.preserveCase.onKeyDown(e => {
+			this._onPreserveCaseKeyDown.fire(e);
+		}));
+
+		if (this._showOptionButtons) {
+			this.cachedOptionsWidth = this.preserveCase.width();
+		} else {
+			this.cachedOptionsWidth = 0;
+		}
+
+		// Arrow-Key support to navigate between options
+		let indexes = [this.preserveCase.domNode];
+		this.onkeydown(this.domNode, (event: IKeyboardEvent) => {
+			if (event.equals(KeyCode.LeftArrow) || event.equals(KeyCode.RightArrow) || event.equals(KeyCode.Escape)) {
+				let index = indexes.indexOf(<HTMLElement>document.activeElement);
+				if (index >= 0) {
+					let newIndex: number = -1;
+					if (event.equals(KeyCode.RightArrow)) {
+						newIndex = (index + 1) % indexes.length;
+					} else if (event.equals(KeyCode.LeftArrow)) {
+						if (index === 0) {
+							newIndex = indexes.length - 1;
+						} else {
+							newIndex = index - 1;
+						}
+					}
+
+					if (event.equals(KeyCode.Escape)) {
+						indexes[index].blur();
+					} else if (newIndex >= 0) {
+						indexes[newIndex].focus();
+					}
+
+					dom.EventHelper.stop(event, true);
+				}
+			}
+		});
+
+
+		let controls = document.createElement('div');
+		controls.className = 'controls';
+		controls.style.display = this._showOptionButtons ? 'block' : 'none';
+		controls.appendChild(this.preserveCase.domNode);
+
+		this.domNode.appendChild(controls);

 		if (parent) {
 			parent.appendChild(this.domNode);
@@ -256,94 +341,6 @@ export class ReplaceInput extends Widget {
 		dom.addClass(this.domNode, 'highlight-' + (this._lastHighlightFindOptions));
 	}

-	private buildDomNode(history: string[], flexibleHeight: boolean, flexibleWidth: boolean, flexibleMaxHeight: number | undefined): void {
-		this.domNode = document.createElement('div');
-		dom.addClass(this.domNode, 'monaco-findInput');
-
-		this.inputBox = this._register(new HistoryInputBox(this.domNode, this.contextViewProvider, {
-			ariaLabel: this.label || '',
-			placeholder: this.placeholder || '',
-			validationOptions: {
-				validation: this.validation
-			},
-			inputBackground: this.inputBackground,
-			inputForeground: this.inputForeground,
-			inputBorder: this.inputBorder,
-			inputValidationInfoBackground: this.inputValidationInfoBackground,
-			inputValidationInfoForeground: this.inputValidationInfoForeground,
-			inputValidationInfoBorder: this.inputValidationInfoBorder,
-			inputValidationWarningBackground: this.inputValidationWarningBackground,
-			inputValidationWarningForeground: this.inputValidationWarningForeground,
-			inputValidationWarningBorder: this.inputValidationWarningBorder,
-			inputValidationErrorBackground: this.inputValidationErrorBackground,
-			inputValidationErrorForeground: this.inputValidationErrorForeground,
-			inputValidationErrorBorder: this.inputValidationErrorBorder,
-			history,
-			flexibleHeight,
-			flexibleWidth,
-			flexibleMaxHeight
-		}));
-
-		this.preserveCase = this._register(new PreserveCaseCheckbox({
-			appendTitle: '',
-			isChecked: false,
-			inputActiveOptionBorder: this.inputActiveOptionBorder,
-			inputActiveOptionBackground: this.inputActiveOptionBackground,
-		}));
-		this._register(this.preserveCase.onChange(viaKeyboard => {
-			this._onDidOptionChange.fire(viaKeyboard);
-			if (!viaKeyboard && this.fixFocusOnOptionClickEnabled) {
-				this.inputBox.focus();
-			}
-			this.validate();
-		}));
-		this._register(this.preserveCase.onKeyDown(e => {
-			this._onPreserveCaseKeyDown.fire(e);
-		}));
-
-		if (this._showOptionButtons) {
-			this.cachedOptionsWidth = this.preserveCase.width();
-		} else {
-			this.cachedOptionsWidth = 0;
-		}
-
-		// Arrow-Key support to navigate between options
-		let indexes = [this.preserveCase.domNode];
-		this.onkeydown(this.domNode, (event: IKeyboardEvent) => {
-			if (event.equals(KeyCode.LeftArrow) || event.equals(KeyCode.RightArrow) || event.equals(KeyCode.Escape)) {
-				let index = indexes.indexOf(<HTMLElement>document.activeElement);
-				if (index >= 0) {
-					let newIndex: number = -1;
-					if (event.equals(KeyCode.RightArrow)) {
-						newIndex = (index + 1) % indexes.length;
-					} else if (event.equals(KeyCode.LeftArrow)) {
-						if (index === 0) {
-							newIndex = indexes.length - 1;
-						} else {
-							newIndex = index - 1;
-						}
-					}
-
-					if (event.equals(KeyCode.Escape)) {
-						indexes[index].blur();
-					} else if (newIndex >= 0) {
-						indexes[newIndex].focus();
-					}
-
-					dom.EventHelper.stop(event, true);
-				}
-			}
-		});
-
-
-		let controls = document.createElement('div');
-		controls.className = 'controls';
-		controls.style.display = this._showOptionButtons ? 'block' : 'none';
-		controls.appendChild(this.preserveCase.domNode);
-
-		this.domNode.appendChild(controls);
-	}
-
 	public validate(): void {
 		if (this.inputBox) {
 			this.inputBox.validate();
--- a/src/vs/base/browser/ui/grid/grid.ts
+++ b/src/vs/base/browser/ui/grid/grid.ts
@@ -9,7 +9,6 @@ import { Disposable } from 'vs/base/common/lifecycle';
 import { tail2 as tail, equals } from 'vs/base/common/arrays';
 import { orthogonal, IView as IGridViewView, GridView, Sizing as GridViewSizing, Box, IGridViewStyles, IViewSize, IGridViewOptions } from './gridview';
 import { Event } from 'vs/base/common/event';
-import { InvisibleSizing } from 'vs/base/browser/ui/splitview/splitview';

 export { Orientation, Sizing as GridViewSizing, IViewSize, orthogonal, LayoutPriority } from './gridview';

--- a/src/vs/base/browser/ui/highlightedlabel/highlightedLabel.ts
+++ b/src/vs/base/browser/ui/highlightedlabel/highlightedLabel.ts
@@ -15,15 +15,15 @@ export interface IHighlight {
 export class HighlightedLabel {

 	private domNode: HTMLElement;
-	private text: string;
-	private title: string;
-	private highlights: IHighlight[];
-	private didEverRender: boolean;
+	private text: string = '';
+	private title: string = '';
+	private highlights: IHighlight[] = [];
+	private didEverRender: boolean = false;

-	constructor(container: HTMLElement, private supportOcticons: boolean) {
+	constructor(container: HTMLElement, private supportCodicons: boolean) {
 		this.domNode = document.createElement('span');
 		this.domNode.className = 'monaco-highlighted-label';
-		this.didEverRender = false;
+
 		container.appendChild(this.domNode);
 	}

@@ -65,13 +65,13 @@ export class HighlightedLabel {
 			if (pos < highlight.start) {
 				htmlContent += '<span>';
 				const substring = this.text.substring(pos, highlight.start);
-				htmlContent += this.supportOcticons ? renderCodicons(substring) : escape(substring);
+				htmlContent += this.supportCodicons ? renderCodicons(substring) : escape(substring);
 				htmlContent += '</span>';
 				pos = highlight.end;
 			}
 			htmlContent += '<span class="highlight">';
 			const substring = this.text.substring(highlight.start, highlight.end);
-			htmlContent += this.supportOcticons ? renderCodicons(substring) : escape(substring);
+			htmlContent += this.supportCodicons ? renderCodicons(substring) : escape(substring);
 			htmlContent += '</span>';
 			pos = highlight.end;
 		}
@@ -79,7 +79,7 @@ export class HighlightedLabel {
 		if (pos < this.text.length) {
 			htmlContent += '<span>';
 			const substring = this.text.substring(pos);
-			htmlContent += this.supportOcticons ? renderCodicons(substring) : escape(substring);
+			htmlContent += this.supportCodicons ? renderCodicons(substring) : escape(substring);
 			htmlContent += '</span>';
 		}

--- a/src/vs/base/browser/ui/iconLabel/iconLabel.ts
+++ b/src/vs/base/browser/ui/iconLabel/iconLabel.ts
@@ -12,7 +12,7 @@ import { Disposable } from 'vs/base/common/lifecycle';
 export interface IIconLabelCreationOptions {
 	supportHighlights?: boolean;
 	supportDescriptionHighlights?: boolean;
-	supportOcticons?: boolean;
+	supportCodicons?: boolean;
 }

 export interface IIconLabelValueOptions {
@@ -77,7 +77,7 @@ class FastLabelNode {
 		}

 		this._empty = empty;
-		this._element.style.marginLeft = empty ? '0' : null;
+		this._element.style.marginLeft = empty ? '0' : '';
 	}

 	dispose(): void {
@@ -99,14 +99,14 @@ export class IconLabel extends Disposable {

 		this.labelDescriptionContainer = this._register(new FastLabelNode(dom.append(this.domNode.element, dom.$('.monaco-icon-label-description-container'))));

-		if (options && options.supportHighlights) {
-			this.labelNode = new HighlightedLabel(dom.append(this.labelDescriptionContainer.element, dom.$('a.label-name')), !!options.supportOcticons);
+		if (options?.supportHighlights) {
+			this.labelNode = new HighlightedLabel(dom.append(this.labelDescriptionContainer.element, dom.$('a.label-name')), !!options.supportCodicons);
 		} else {
 			this.labelNode = this._register(new FastLabelNode(dom.append(this.labelDescriptionContainer.element, dom.$('a.label-name'))));
 		}

-		if (options && options.supportDescriptionHighlights) {
-			this.descriptionNodeFactory = () => new HighlightedLabel(dom.append(this.labelDescriptionContainer.element, dom.$('span.label-description')), !!options.supportOcticons);
+		if (options?.supportDescriptionHighlights) {
+			this.descriptionNodeFactory = () => new HighlightedLabel(dom.append(this.labelDescriptionContainer.element, dom.$('span.label-description')), !!options.supportCodicons);
 		} else {
 			this.descriptionNodeFactory = () => this._register(new FastLabelNode(dom.append(this.labelDescriptionContainer.element, dom.$('span.label-description'))));
 		}
@@ -129,10 +129,10 @@ export class IconLabel extends Disposable {
 		}

 		this.domNode.className = classes.join(' ');
-		this.domNode.title = options && options.title ? options.title : '';
+		this.domNode.title = options?.title || '';

 		if (this.labelNode instanceof HighlightedLabel) {
-			this.labelNode.set(label || '', options ? options.matches : undefined, options && options.title ? options.title : undefined, options && options.labelEscapeNewLines);
+			this.labelNode.set(label || '', options?.matches, options?.title, options?.labelEscapeNewLines);
 		} else {
 			this.labelNode.textContent = label || '';
 		}
@@ -144,14 +144,14 @@ export class IconLabel extends Disposable {

 			if (this.descriptionNode instanceof HighlightedLabel) {
 				this.descriptionNode.set(description || '', options ? options.descriptionMatches : undefined);
-				if (options && options.descriptionTitle) {
+				if (options?.descriptionTitle) {
 					this.descriptionNode.element.title = options.descriptionTitle;
 				} else {
 					this.descriptionNode.element.removeAttribute('title');
 				}
 			} else {
 				this.descriptionNode.textContent = description || '';
-				this.descriptionNode.title = options && options.descriptionTitle ? options.descriptionTitle : '';
+				this.descriptionNode.title = options?.descriptionTitle || '';
 				this.descriptionNode.empty = !description;
 			}
 		}
--- a/src/vs/base/browser/ui/iconLabel/iconlabel.css
+++ b/src/vs/base/browser/ui/iconLabel/iconlabel.css
@@ -55,7 +55,7 @@
 	opacity: 0.75;
 	font-size: 90%;
 	font-weight: 600;
-	padding: 0 12px 0 5px;
+	padding: 0 16px 0 5px;
 	margin-left: auto;
 	text-align: center;
 }
@@ -74,4 +74,4 @@
 .monaco-list-row.focused.selected .label-description,
 .monaco-list-row.selected .label-description {
 	opacity: .8;
-}
+}
--- a/src/vs/base/browser/ui/inputbox/inputBox.ts
+++ b/src/vs/base/browser/ui/inputbox/inputBox.ts
@@ -201,7 +201,7 @@ export class InputBox extends Widget {

 			const onSelectionChange = Event.filter(domEvent(document, 'selectionchange'), () => {
 				const selection = document.getSelection();
-				return !!selection && selection.anchorNode === wrapper;
+				return selection?.anchorNode === wrapper;
 			});

 			// from DOM to ScrollableElement
@@ -375,7 +375,7 @@ export class InputBox extends Widget {
 	}

 	private updateScrollDimensions(): void {
-		if (typeof this.cachedContentHeight !== 'number' || typeof this.cachedHeight !== 'number') {
+		if (typeof this.cachedContentHeight !== 'number' || typeof this.cachedHeight !== 'number' || !this.scrollableElement) {
 			return;
 		}

@@ -383,8 +383,8 @@ export class InputBox extends Widget {
 		const height = this.cachedHeight;
 		const scrollTop = this.input.scrollTop;

-		this.scrollableElement!.setScrollDimensions({ scrollHeight, height });
-		this.scrollableElement!.setScrollPosition({ scrollTop });
+		this.scrollableElement.setScrollDimensions({ scrollHeight, height });
+		this.scrollableElement.setScrollPosition({ scrollTop });
 	}

 	public showMessage(message: IMessage, force?: boolean): void {
@@ -397,7 +397,7 @@ export class InputBox extends Widget {
 		dom.addClass(this.element, this.classForType(message.type));

 		const styles = this.stylesForType(this.message.type);
-		this.element.style.border = styles.border ? `1px solid ${styles.border}` : null;
+		this.element.style.border = styles.border ? `1px solid ${styles.border}` : '';

 		// ARIA Support
 		let alertText: string;
@@ -507,9 +507,9 @@ export class InputBox extends Widget {
 				dom.addClass(spanElement, this.classForType(this.message.type));

 				const styles = this.stylesForType(this.message.type);
-				spanElement.style.backgroundColor = styles.background ? styles.background.toString() : null;
+				spanElement.style.backgroundColor = styles.background ? styles.background.toString() : '';
 				spanElement.style.color = styles.foreground ? styles.foreground.toString() : null;
-				spanElement.style.border = styles.border ? `1px solid ${styles.border}` : null;
+				spanElement.style.border = styles.border ? `1px solid ${styles.border}` : '';

 				dom.append(div, spanElement);

@@ -586,17 +586,17 @@ export class InputBox extends Widget {
 	}

 	protected applyStyles(): void {
-		const background = this.inputBackground ? this.inputBackground.toString() : null;
-		const foreground = this.inputForeground ? this.inputForeground.toString() : null;
-		const border = this.inputBorder ? this.inputBorder.toString() : null;
+		const background = this.inputBackground ? this.inputBackground.toString() : '';
+		const foreground = this.inputForeground ? this.inputForeground.toString() : '';
+		const border = this.inputBorder ? this.inputBorder.toString() : '';

 		this.element.style.backgroundColor = background;
 		this.element.style.color = foreground;
 		this.input.style.backgroundColor = background;
 		this.input.style.color = foreground;

-		this.element.style.borderWidth = border ? '1px' : null;
-		this.element.style.borderStyle = border ? 'solid' : null;
+		this.element.style.borderWidth = border ? '1px' : '';
+		this.element.style.borderStyle = border ? 'solid' : '';
 		this.element.style.borderColor = border;
 	}

--- a/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.ts
+++ b/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.ts
@@ -80,20 +80,20 @@ export class KeybindingLabel {
 	private renderPart(parent: HTMLElement, part: ResolvedKeybindingPart, match: PartMatches | null) {
 		const modifierLabels = UILabelProvider.modifierLabels[this.os];
 		if (part.ctrlKey) {
-			this.renderKey(parent, modifierLabels.ctrlKey, Boolean(match && match.ctrlKey), modifierLabels.separator);
+			this.renderKey(parent, modifierLabels.ctrlKey, Boolean(match?.ctrlKey), modifierLabels.separator);
 		}
 		if (part.shiftKey) {
-			this.renderKey(parent, modifierLabels.shiftKey, Boolean(match && match.shiftKey), modifierLabels.separator);
+			this.renderKey(parent, modifierLabels.shiftKey, Boolean(match?.shiftKey), modifierLabels.separator);
 		}
 		if (part.altKey) {
-			this.renderKey(parent, modifierLabels.altKey, Boolean(match && match.altKey), modifierLabels.separator);
+			this.renderKey(parent, modifierLabels.altKey, Boolean(match?.altKey), modifierLabels.separator);
 		}
 		if (part.metaKey) {
-			this.renderKey(parent, modifierLabels.metaKey, Boolean(match && match.metaKey), modifierLabels.separator);
+			this.renderKey(parent, modifierLabels.metaKey, Boolean(match?.metaKey), modifierLabels.separator);
 		}
 		const keyLabel = part.keyLabel;
 		if (keyLabel) {
-			this.renderKey(parent, keyLabel, Boolean(match && match.keyCode), '');
+			this.renderKey(parent, keyLabel, Boolean(match?.keyCode), '');
 		}
 	}

--- a/src/vs/base/browser/ui/list/list.ts
+++ b/src/vs/base/browser/ui/list/list.ts
@@ -115,3 +115,19 @@ export class ListError extends Error {
 		super(`ListError [${user}] ${message}`);
 	}
 }
+
+export abstract class CachedListVirtualDelegate<T extends object> implements IListVirtualDelegate<T> {
+
+	private cache = new WeakMap<T, number>();
+
+	getHeight(element: T): number {
+		return this.cache.get(element) ?? this.estimateHeight(element);
+	}
+
+	protected abstract estimateHeight(element: T): number;
+	abstract getTemplateId(element: T): string;
+
+	setDynamicHeight(element: T, height: number): void {
+		this.cache.set(element, height);
+	}
+}
--- a/src/vs/base/browser/ui/list/listPaging.ts
+++ b/src/vs/base/browser/ui/list/listPaging.ts
@@ -155,6 +155,14 @@ export class PagedList<T> implements IDisposable {
 		this.list.scrollTop = scrollTop;
 	}

+	get scrollLeft(): number {
+		return this.list.scrollLeft;
+	}
+
+	set scrollLeft(scrollLeft: number) {
+		this.list.scrollLeft = scrollLeft;
+	}
+
 	open(indexes: number[], browserEvent?: UIEvent): void {
 		this.list.open(indexes, browserEvent);
 	}
--- a/src/vs/base/browser/ui/list/listView.ts
+++ b/src/vs/base/browser/ui/list/listView.ts
@@ -14,8 +14,6 @@ import { ScrollEvent, ScrollbarVisibility, INewScrollDimensions } from 'vs/base/
 import { RangeMap, shift } from './rangeMap';
 import { IListVirtualDelegate, IListRenderer, IListMouseEvent, IListTouchEvent, IListGestureEvent, IListDragEvent, IListDragAndDrop, ListDragOverEffect } from './list';
 import { RowCache, IRow } from './rowCache';
-import { isWindows } from 'vs/base/common/platform';
-import * as browser from 'vs/base/browser/browser';
 import { ISpliceable } from 'vs/base/common/sequence';
 import { memoize } from 'vs/base/common/decorators';
 import { Range, IRange } from 'vs/base/common/range';
@@ -179,7 +177,6 @@ export class ListView<T> implements ISpliceable<T>, IDisposable {
 	private additionalScrollHeight: number;
 	private ariaProvider: IAriaProvider<T>;
 	private scrollWidth: number | undefined;
-	private canUseTranslate3d: boolean | undefined = undefined;

 	private dnd: IListViewDragAndDrop<T>;
 	private canDrop: boolean = false;
@@ -236,6 +233,7 @@ export class ListView<T> implements ISpliceable<T>, IDisposable {

 		this.rowsContainer = document.createElement('div');
 		this.rowsContainer.className = 'monaco-list-rows';
+		this.rowsContainer.style.willChange = 'transform';
 		this.disposables.add(Gesture.addTarget(this.rowsContainer));

 		this.scrollableElement = this.disposables.add(new ScrollableElement(this.rowsContainer, {
@@ -531,33 +529,13 @@ export class ListView<T> implements ISpliceable<T>, IDisposable {
 			}
 		}

-		const canUseTranslate3d = !isWindows && !browser.isFirefox && browser.getZoomLevel() === 0;
-
-		if (canUseTranslate3d) {
-			const transform = `translate3d(-${renderLeft}px, -${renderTop}px, 0px)`;
-			this.rowsContainer.style.transform = transform;
-			this.rowsContainer.style.webkitTransform = transform;
-
-			if (canUseTranslate3d !== this.canUseTranslate3d) {
-				this.rowsContainer.style.left = '0';
-				this.rowsContainer.style.top = '0';
-			}
-		} else {
-			this.rowsContainer.style.left = `-${renderLeft}px`;
-			this.rowsContainer.style.top = `-${renderTop}px`;
-
-			if (canUseTranslate3d !== this.canUseTranslate3d) {
-				this.rowsContainer.style.transform = '';
-				this.rowsContainer.style.webkitTransform = '';
-			}
-		}
+		this.rowsContainer.style.left = `-${renderLeft}px`;
+		this.rowsContainer.style.top = `-${renderTop}px`;

 		if (this.horizontalScrolling) {
 			this.rowsContainer.style.width = `${Math.max(scrollWidth, this.renderWidth)}px`;
 		}

-		this.canUseTranslate3d = canUseTranslate3d;
-
 		this.lastRenderTop = renderTop;
 		this.lastRenderHeight = renderHeight;
 	}
@@ -686,7 +664,7 @@ export class ListView<T> implements ISpliceable<T>, IDisposable {
 		return scrollPosition.scrollLeft;
 	}

-	setScrollLeftt(scrollLeft: number): void {
+	setScrollLeft(scrollLeft: number): void {
 		if (this.scrollableElementUpdateDisposable) {
 			this.scrollableElementUpdateDisposable.dispose();
 			this.scrollableElementUpdateDisposable = null;
--- a/src/vs/base/browser/ui/list/listWidget.ts
+++ b/src/vs/base/browser/ui/list/listWidget.ts
@@ -822,7 +822,7 @@ export interface IListOptions<T> extends IListStyles {
 	readonly automaticKeyboardNavigation?: boolean;
 	readonly keyboardNavigationLabelProvider?: IKeyboardNavigationLabelProvider<T>;
 	readonly keyboardNavigationDelegate?: IKeyboardNavigationDelegate;
-	readonly ariaRole?: ListAriaRootRole;
+	readonly ariaRole?: ListAriaRootRole | string;
 	readonly ariaLabel?: string;
 	readonly keyboardSupport?: boolean;
 	readonly multipleSelectionSupport?: boolean;
@@ -1198,11 +1198,7 @@ export class List<T> implements ISpliceable<T>, IDisposable {

 		this.view = new ListView(container, virtualDelegate, renderers, viewOptions);

-		if (typeof _options.ariaRole !== 'string') {
-			this.view.domNode.setAttribute('role', ListAriaRootRole.TREE);
-		} else {
-			this.view.domNode.setAttribute('role', _options.ariaRole);
-		}
+		this.updateAriaRole();

 		this.styleElement = DOM.createStyleSheet(this.view.domNode);

@@ -1316,7 +1312,7 @@ export class List<T> implements ISpliceable<T>, IDisposable {
 	}

 	set scrollLeft(scrollLeft: number) {
-		this.view.setScrollLeftt(scrollLeft);
+		this.view.setScrollLeft(scrollLeft);
 	}

 	get scrollHeight(): number {
@@ -1537,7 +1533,9 @@ export class List<T> implements ISpliceable<T>, IDisposable {
 			const viewItemBottom = elementTop + elementHeight;
 			const wrapperBottom = scrollTop + this.view.renderHeight;

-			if (elementTop < scrollTop) {
+			if (elementTop < scrollTop && viewItemBottom >= wrapperBottom) {
+				// The element is already overflowing the viewport, no-op
+			} else if (elementTop < scrollTop) {
 				this.view.setScrollTop(elementTop);
 			} else if (viewItemBottom >= wrapperBottom) {
 				this.view.setScrollTop(viewItemBottom - this.view.renderHeight);
@@ -1612,10 +1610,19 @@ export class List<T> implements ISpliceable<T>, IDisposable {
 			this.view.domNode.removeAttribute('aria-activedescendant');
 		}

-		this.view.domNode.setAttribute('role', 'tree');
+		this.updateAriaRole();
+
 		DOM.toggleClass(this.view.domNode, 'element-focused', focus.length > 0);
 	}

+	private updateAriaRole(): void {
+		if (typeof this.options.ariaRole !== 'string') {
+			this.view.domNode.setAttribute('role', ListAriaRootRole.TREE);
+		} else {
+			this.view.domNode.setAttribute('role', this.options.ariaRole);
+		}
+	}
+
 	private _onSelectionChange(): void {
 		const selection = this.selection.get();

--- a/src/vs/base/browser/ui/menu/menu.css
+++ b/src/vs/base/browser/ui/menu/menu.css
@@ -157,7 +157,7 @@
 	flex-wrap: wrap;
 }

-.fullscreen .menubar {
+.fullscreen .menubar:not(.compact) {
 	margin: 0px;
 	padding: 0px 5px;
 }
@@ -176,6 +176,7 @@
 .menubar.compact > .menubar-menu-button {
 	width: 100%;
 	height: 100%;
+	padding: 0px;
 }

 .menubar .menubar-menu-items-holder {
--- a/src/vs/base/browser/ui/menu/menu.ts
+++ b/src/vs/base/browser/ui/menu/menu.ts
@@ -16,7 +16,7 @@ import { DisposableStore } from 'vs/base/common/lifecycle';
 import { Color } from 'vs/base/common/color';
 import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
 import { ScrollbarVisibility, ScrollEvent } from 'vs/base/common/scrollable';
-import { Event, Emitter } from 'vs/base/common/event';
+import { Event } from 'vs/base/common/event';
 import { AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview';
 import { isLinux, isMacintosh } from 'vs/base/common/platform';

@@ -66,9 +66,6 @@ export class Menu extends ActionBar {
 	private readonly menuDisposables: DisposableStore;
 	private scrollableElement: DomScrollableElement;
 	private menuElement: HTMLElement;
-	private scrollTopHold: number | undefined;
-
-	private readonly _onScroll: Emitter<void>;

 	constructor(container: HTMLElement, actions: ReadonlyArray<IAction>, options: IMenuOptions = {}) {
 		addClass(container, 'monaco-menu-container');
@@ -88,8 +85,6 @@ export class Menu extends ActionBar {

 		this.menuElement = menuElement;

-		this._onScroll = this._register(new Emitter<void>());
-
 		this.actionsList.setAttribute('role', 'menu');

 		this.actionsList.tabIndex = 0;
@@ -113,7 +108,7 @@ export class Menu extends ActionBar {
 					const actions = this.mnemonics.get(key)!;

 					if (actions.length === 1) {
-						if (actions[0] instanceof SubmenuMenuActionViewItem) {
+						if (actions[0] instanceof SubmenuMenuActionViewItem && actions[0].container) {
 							this.focusItemByElement(actions[0].container);
 						}

@@ -122,7 +117,7 @@ export class Menu extends ActionBar {

 					if (actions.length > 1) {
 						const action = actions.shift();
-						if (action) {
+						if (action && action.container) {
 							this.focusItemByElement(action.container);
 							actions.push(action);
 						}
@@ -153,17 +148,11 @@ export class Menu extends ActionBar {
 			let relatedTarget = e.relatedTarget as HTMLElement;
 			if (!isAncestor(relatedTarget, this.domNode)) {
 				this.focusedItem = undefined;
-				this.scrollTopHold = this.menuElement.scrollTop;
 				this.updateFocus();
 				e.stopPropagation();
 			}
 		}));

-		this._register(addDisposableListener(this.domNode, EventType.MOUSE_UP, e => {
-			// Absorb clicks in menu dead space https://github.com/Microsoft/vscode/issues/63575
-			EventHelper.stop(e, true);
-		}));
-
 		this._register(addDisposableListener(this.actionsList, EventType.MOUSE_OVER, e => {
 			let target = e.target as HTMLElement;
 			if (!target || !isAncestor(target, this.actionsList) || target === this.actionsList) {
@@ -176,7 +165,6 @@ export class Menu extends ActionBar {

 			if (hasClass(target, 'action-item')) {
 				const lastFocusedItem = this.focusedItem;
-				this.scrollTopHold = this.menuElement.scrollTop;
 				this.setFocusedItem(target);

 				if (lastFocusedItem !== this.focusedItem) {
@@ -191,8 +179,6 @@ export class Menu extends ActionBar {

 		this.mnemonics = new Map<string, Array<BaseMenuActionViewItem>>();

-		this.push(actions, { icon: true, label: true, isMenu: true });
-
 		// Scroll Logic
 		this.scrollableElement = this._register(new DomScrollableElement(menuElement, {
 			alwaysConsumeMouseWheel: true,
@@ -204,21 +190,17 @@ export class Menu extends ActionBar {
 		}));

 		const scrollElement = this.scrollableElement.getDomNode();
-		scrollElement.style.position = null;
+		scrollElement.style.position = '';
+
+		this._register(addDisposableListener(scrollElement, EventType.MOUSE_UP, e => {
+			// Absorb clicks in menu dead space https://github.com/Microsoft/vscode/issues/63575
+			// We do this on the scroll element so the scroll bar doesn't dismiss the menu either
+			e.preventDefault();
+		}));

 		menuElement.style.maxHeight = `${Math.max(10, window.innerHeight - container.getBoundingClientRect().top - 30)}px`;

-		this.menuDisposables.add(this.scrollableElement.onScroll(() => {
-			this._onScroll.fire();
-		}, this));
-
-		this._register(addDisposableListener(this.menuElement, EventType.SCROLL, (e: ScrollEvent) => {
-			if (this.scrollTopHold !== undefined) {
-				this.menuElement.scrollTop = this.scrollTopHold;
-				this.scrollTopHold = undefined;
-			}
-			this.scrollableElement.scanDomNode();
-		}));
+		this.push(actions, { icon: true, label: true, isMenu: true });

 		container.appendChild(this.scrollableElement.getDomNode());
 		this.scrollableElement.scanDomNode();
@@ -231,10 +213,10 @@ export class Menu extends ActionBar {
 	style(style: IMenuStyles): void {
 		const container = this.getContainer();

-		const fgColor = style.foregroundColor ? `${style.foregroundColor}` : null;
-		const bgColor = style.backgroundColor ? `${style.backgroundColor}` : null;
-		const border = style.borderColor ? `2px solid ${style.borderColor}` : null;
-		const shadow = style.shadowColor ? `0 2px 4px ${style.shadowColor}` : null;
+		const fgColor = style.foregroundColor ? `${style.foregroundColor}` : '';
+		const bgColor = style.backgroundColor ? `${style.backgroundColor}` : '';
+		const border = style.borderColor ? `2px solid ${style.borderColor}` : '';
+		const shadow = style.shadowColor ? `0 2px 4px ${style.shadowColor}` : '';

 		container.style.border = border;
 		this.domNode.style.color = fgColor;
@@ -254,8 +236,8 @@ export class Menu extends ActionBar {
 		return this.scrollableElement.getDomNode();
 	}

-	get onScroll(): Event<void> {
-		return this._onScroll.event;
+	get onScroll(): Event<ScrollEvent> {
+		return this.scrollableElement.onScroll;
 	}

 	get scrollOffset(): number {
@@ -295,6 +277,19 @@ export class Menu extends ActionBar {
 		}
 	}

+	protected updateFocus(fromRight?: boolean): void {
+		super.updateFocus(fromRight, true);
+
+		if (typeof this.focusedItem !== 'undefined') {
+			// Workaround for #80047 caused by an issue in chromium
+			// https://bugs.chromium.org/p/chromium/issues/detail?id=414283
+			// When that's fixed, just call this.scrollableElement.scanDomNode()
+			this.scrollableElement.setScrollPosition({
+				scrollTop: Math.round(this.menuElement.scrollTop)
+			});
+		}
+	}
+
 	private doGetActionViewItem(action: IAction, options: IMenuOptions, parentData: ISubMenuData): BaseActionViewItem {
 		if (action instanceof Separator) {
 			return new MenuSeparatorActionViewItem(options.context, action, { icon: true });
@@ -356,17 +351,17 @@ interface IMenuItemOptions extends IActionViewItemOptions {

 class BaseMenuActionViewItem extends BaseActionViewItem {

-	public container: HTMLElement;
+	public container: HTMLElement | undefined;

 	protected options: IMenuItemOptions;
-	protected item: HTMLElement;
+	protected item: HTMLElement | undefined;

 	private runOnceToEnableMouseUp: RunOnceScheduler;
-	private label: HTMLElement;
-	private check: HTMLElement;
-	private mnemonic: string;
+	private label: HTMLElement | undefined;
+	private check: HTMLElement | undefined;
+	private mnemonic: string | undefined;
 	private cssClass: string;
-	protected menuStyle: IMenuStyles;
+	protected menuStyle: IMenuStyles | undefined;

 	constructor(ctx: any, action: IAction, options: IMenuItemOptions = {}) {
 		options.isMenu = true;
@@ -395,6 +390,10 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
 			}

 			this._register(addDisposableListener(this.element, EventType.MOUSE_UP, e => {
+				if (e.defaultPrevented) {
+					return;
+				}
+
 				EventHelper.stop(e, true);
 				this.onClick(e);
 			}));
@@ -449,13 +448,19 @@ class BaseMenuActionViewItem extends BaseActionViewItem {

 	focus(): void {
 		super.focus();
-		this.item.focus();
+
+		if (this.item) {
+			this.item.focus();
+		}
+
 		this.applyStyle();
 	}

 	updatePositionInSet(pos: number, setSize: number): void {
-		this.item.setAttribute('aria-posinset', `${pos}`);
-		this.item.setAttribute('aria-setsize', `${setSize}`);
+		if (this.item) {
+			this.item.setAttribute('aria-posinset', `${pos}`);
+			this.item.setAttribute('aria-setsize', `${setSize}`);
+		}
 	}

 	updateLabel(): void {
@@ -467,7 +472,9 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
 					label = cleanLabel;
 				}

-				this.label.setAttribute('aria-label', cleanLabel.replace(/&&/g, '&'));
+				if (this.label) {
+					this.label.setAttribute('aria-label', cleanLabel.replace(/&&/g, '&'));
+				}

 				const matches = MENU_MNEMONIC_REGEX.exec(label);

@@ -488,13 +495,17 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
 					}

 					label = label.replace(/&amp;&amp;/g, '&amp;');
-					this.item.setAttribute('aria-keyshortcuts', (!!matches[1] ? matches[1] : matches[3]).toLocaleLowerCase());
+					if (this.item) {
+						this.item.setAttribute('aria-keyshortcuts', (!!matches[1] ? matches[1] : matches[3]).toLocaleLowerCase());
+					}
 				} else {
 					label = label.replace(/&&/g, '&');
 				}
 			}

-			this.label.innerHTML = label.trim();
+			if (this.label) {
+				this.label.innerHTML = label.trim();
+			}
 		}
 	}

@@ -512,23 +523,23 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
 			}
 		}

-		if (title) {
+		if (title && this.item) {
 			this.item.title = title;
 		}
 	}

 	updateClass(): void {
-		if (this.cssClass) {
+		if (this.cssClass && this.item) {
 			removeClasses(this.item, this.cssClass);
 		}
-		if (this.options.icon) {
+		if (this.options.icon && this.label) {
 			this.cssClass = this.getAction().class || '';
 			addClass(this.label, 'icon');
 			if (this.cssClass) {
 				addClasses(this.label, this.cssClass);
 			}
 			this.updateEnabled();
-		} else {
+		} else if (this.label) {
 			removeClass(this.label, 'icon');
 		}
 	}
@@ -539,19 +550,27 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
 				removeClass(this.element, 'disabled');
 			}

-			removeClass(this.item, 'disabled');
-			this.item.tabIndex = 0;
+			if (this.item) {
+				removeClass(this.item, 'disabled');
+				this.item.tabIndex = 0;
+			}
 		} else {
 			if (this.element) {
 				addClass(this.element, 'disabled');
 			}

-			addClass(this.item, 'disabled');
-			removeTabIndexAndUpdateFocus(this.item);
+			if (this.item) {
+				addClass(this.item, 'disabled');
+				removeTabIndexAndUpdateFocus(this.item);
+			}
 		}
 	}

 	updateChecked(): void {
+		if (!this.item) {
+			return;
+		}
+
 		if (this.getAction().checked) {
 			addClass(this.item, 'checked');
 			this.item.setAttribute('role', 'menuitemcheckbox');
@@ -563,7 +582,7 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
 		}
 	}

-	getMnemonic(): string {
+	getMnemonic(): string | undefined {
 		return this.mnemonic;
 	}

@@ -575,12 +594,20 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
 		const isSelected = this.element && hasClass(this.element, 'focused');
 		const fgColor = isSelected && this.menuStyle.selectionForegroundColor ? this.menuStyle.selectionForegroundColor : this.menuStyle.foregroundColor;
 		const bgColor = isSelected && this.menuStyle.selectionBackgroundColor ? this.menuStyle.selectionBackgroundColor : this.menuStyle.backgroundColor;
-		const border = isSelected && this.menuStyle.selectionBorderColor ? `thin solid ${this.menuStyle.selectionBorderColor}` : null;
+		const border = isSelected && this.menuStyle.selectionBorderColor ? `thin solid ${this.menuStyle.selectionBorderColor}` : '';

-		this.item.style.color = fgColor ? `${fgColor}` : null;
-		this.check.style.backgroundColor = fgColor ? `${fgColor}` : null;
-		this.item.style.backgroundColor = bgColor ? `${bgColor}` : null;
-		this.container.style.border = border;
+		if (this.item) {
+			this.item.style.color = fgColor ? `${fgColor}` : null;
+			this.item.style.backgroundColor = bgColor ? `${bgColor}` : '';
+		}
+
+		if (this.check) {
+			this.check.style.backgroundColor = fgColor ? `${fgColor}` : '';
+		}
+
+		if (this.container) {
+			this.container.style.border = border;
+		}
 	}

 	style(style: IMenuStyles): void {
@@ -590,11 +617,11 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
 }

 class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
-	private mysubmenu: Menu | null;
+	private mysubmenu: Menu | null = null;
 	private submenuContainer: HTMLElement | undefined;
-	private submenuIndicator: HTMLElement;
+	private submenuIndicator: HTMLElement | undefined;
 	private readonly submenuDisposables = this._register(new DisposableStore());
-	private mouseOver: boolean;
+	private mouseOver: boolean = false;
 	private showScheduler: RunOnceScheduler;
 	private hideScheduler: RunOnceScheduler;
 	private expandDirection: Direction;
@@ -631,11 +658,13 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
 			return;
 		}

-		addClass(this.item, 'monaco-submenu-item');
-		this.item.setAttribute('aria-haspopup', 'true');
+		if (this.item) {
+			addClass(this.item, 'monaco-submenu-item');
+			this.item.setAttribute('aria-haspopup', 'true');

-		this.submenuIndicator = append(this.item, $('span.submenu-indicator'));
-		this.submenuIndicator.setAttribute('aria-hidden', 'true');
+			this.submenuIndicator = append(this.item, $('span.submenu-indicator'));
+			this.submenuIndicator.setAttribute('aria-hidden', 'true');
+		}

 		this._register(addDisposableListener(this.element, EventType.KEY_UP, e => {
 			let event = new StandardKeyboardEvent(e);
@@ -690,7 +719,7 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
 		EventHelper.stop(e, true);

 		this.cleanupExistingSubmenu(false);
-		this.createSubmenu(false);
+		this.createSubmenu(true);
 	}

 	private cleanupExistingSubmenu(force: boolean): void {
@@ -714,6 +743,12 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
 			this.submenuContainer = append(this.element, $('div.monaco-submenu'));
 			addClasses(this.submenuContainer, 'menubar-menu-items-holder', 'context-view');

+			// Set the top value of the menu container before construction
+			// This allows the menu constructor to calculate the proper max height
+			const computedStyles = getComputedStyle(this.parentData.parent.domNode);
+			const paddingTop = parseFloat(computedStyles.paddingTop || '0') || 0;
+			this.submenuContainer.style.top = `${this.element.offsetTop - this.parentData.parent.scrollOffset - paddingTop}px`;
+
 			this.parentData.submenu = new Menu(this.submenuContainer, this.submenuActions, this.submenuOptions);
 			if (this.menuStyle) {
 				this.parentData.submenu.style(this.menuStyle);
@@ -721,8 +756,6 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {

 			const boundingRect = this.element.getBoundingClientRect();
 			const childBoundingRect = this.submenuContainer.getBoundingClientRect();
-			const computedStyles = getComputedStyle(this.parentData.parent.domNode);
-			const paddingTop = parseFloat(computedStyles.paddingTop || '0') || 0;

 			if (this.expandDirection === Direction.Right) {
 				if (window.innerWidth <= boundingRect.right + childBoundingRect.width) {
@@ -793,7 +826,9 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
 		const isSelected = this.element && hasClass(this.element, 'focused');
 		const fgColor = isSelected && this.menuStyle.selectionForegroundColor ? this.menuStyle.selectionForegroundColor : this.menuStyle.foregroundColor;

-		this.submenuIndicator.style.backgroundColor = fgColor ? `${fgColor}` : null;
+		if (this.submenuIndicator) {
+			this.submenuIndicator.style.backgroundColor = fgColor ? `${fgColor}` : '';
+		}

 		if (this.parentData.submenu) {
 			this.parentData.submenu.style(this.menuStyle);
@@ -818,7 +853,9 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {

 class MenuSeparatorActionViewItem extends ActionViewItem {
 	style(style: IMenuStyles): void {
-		this.label.style.borderBottomColor = style.separatorColor ? `${style.separatorColor}` : null;
+		if (this.label) {
+			this.label.style.borderBottomColor = style.separatorColor ? `${style.separatorColor}` : '';
+		}
 	}
 }

--- a/src/vs/base/browser/ui/menu/menubar.ts
+++ b/src/vs/base/browser/ui/menu/menubar.ts
@@ -20,6 +20,7 @@ import { withNullAsUndefined } from 'vs/base/common/types';
 import { asArray } from 'vs/base/common/arrays';
 import { ScanCodeUtils, ScanCode } from 'vs/base/common/scanCode';
 import { isMacintosh } from 'vs/base/common/platform';
+import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';

 const $ = DOM.$;

@@ -55,7 +56,7 @@ export class MenuBar extends Disposable {
 		actions?: ReadonlyArray<IAction>;
 	}[];

-	private overflowMenu: {
+	private overflowMenu!: {
 		buttonElement: HTMLElement;
 		titleElement: HTMLElement;
 		label: string;
@@ -72,22 +73,22 @@ export class MenuBar extends Disposable {
 	private menuUpdater: RunOnceScheduler;

 	// Input-related
-	private _mnemonicsInUse: boolean;
-	private openedViaKeyboard: boolean;
-	private awaitingAltRelease: boolean;
-	private ignoreNextMouseUp: boolean;
+	private _mnemonicsInUse: boolean = false;
+	private openedViaKeyboard: boolean = false;
+	private awaitingAltRelease: boolean = false;
+	private ignoreNextMouseUp: boolean = false;
 	private mnemonics: Map<string, number>;

-	private updatePending: boolean;
+	private updatePending: boolean = false;
 	private _focusState: MenubarState;
 	private actionRunner: IActionRunner;

 	private readonly _onVisibilityChange: Emitter<boolean>;
 	private readonly _onFocusStateChange: Emitter<boolean>;

-	private numMenusShown: number;
-	private menuStyle: IMenuStyles;
-	private overflowLayoutScheduled: IDisposable | null;
+	private numMenusShown: number = 0;
+	private menuStyle: IMenuStyles | undefined;
+	private overflowLayoutScheduled: IDisposable | null = null;

 	constructor(private container: HTMLElement, private options: IMenuBarOptions = {}) {
 		super();
@@ -252,7 +253,14 @@ export class MenuBar extends Disposable {
 				e.stopPropagation();
 			}));

-			this._register(DOM.addDisposableListener(buttonElement, DOM.EventType.MOUSE_DOWN, (e) => {
+			this._register(DOM.addDisposableListener(buttonElement, DOM.EventType.MOUSE_DOWN, (e: MouseEvent) => {
+				// Ignore non-left-click
+				const mouseEvent = new StandardMouseEvent(e);
+				if (!mouseEvent.leftButton) {
+					e.preventDefault();
+					return;
+				}
+
 				if (!this.isOpen) {
 					// Open the menu with mouse down and ignore the following mouse up event
 					this.ignoreNextMouseUp = true;
@@ -266,6 +274,10 @@ export class MenuBar extends Disposable {
 			}));

 			this._register(DOM.addDisposableListener(buttonElement, DOM.EventType.MOUSE_UP, (e) => {
+				if (e.defaultPrevented) {
+					return;
+				}
+
 				if (!this.ignoreNextMouseUp) {
 					if (this.isFocused) {
 						this.onMenuTriggered(menuIndex, true);
@@ -337,6 +349,13 @@ export class MenuBar extends Disposable {
 		}));

 		this._register(DOM.addDisposableListener(buttonElement, DOM.EventType.MOUSE_DOWN, (e) => {
+			// Ignore non-left-click
+			const mouseEvent = new StandardMouseEvent(e);
+			if (!mouseEvent.leftButton) {
+				e.preventDefault();
+				return;
+			}
+
 			if (!this.isOpen) {
 				// Open the menu with mouse down and ignore the following mouse up event
 				this.ignoreNextMouseUp = true;
@@ -350,6 +369,10 @@ export class MenuBar extends Disposable {
 		}));

 		this._register(DOM.addDisposableListener(buttonElement, DOM.EventType.MOUSE_UP, (e) => {
+			if (e.defaultPrevented) {
+				return;
+			}
+
 			if (!this.ignoreNextMouseUp) {
 				if (this.isFocused) {
 					this.onMenuTriggered(MenuBar.OVERFLOW_INDEX, true);
@@ -462,9 +485,11 @@ export class MenuBar extends Disposable {
 				this.overflowMenu.actions.push(new SubmenuAction(this.menuCache[idx].label, this.menuCache[idx].actions || []));
 			}

-			DOM.removeNode(this.overflowMenu.buttonElement);
-			this.container.insertBefore(this.overflowMenu.buttonElement, this.menuCache[this.numMenusShown].buttonElement);
-			this.overflowMenu.buttonElement.style.visibility = 'visible';
+			if (this.overflowMenu.buttonElement.nextElementSibling !== this.menuCache[this.numMenusShown].buttonElement) {
+				DOM.removeNode(this.overflowMenu.buttonElement);
+				this.container.insertBefore(this.overflowMenu.buttonElement, this.menuCache[this.numMenusShown].buttonElement);
+				this.overflowMenu.buttonElement.style.visibility = 'visible';
+			}
 		} else {
 			DOM.removeNode(this.overflowMenu.buttonElement);
 			this.container.appendChild(this.overflowMenu.buttonElement);
@@ -913,7 +938,9 @@ export class MenuBar extends Disposable {
 		};

 		let menuWidget = this._register(new Menu(menuHolder, customMenu.actions, menuOptions));
-		menuWidget.style(this.menuStyle);
+		if (this.menuStyle) {
+			menuWidget.style(this.menuStyle);
+		}

 		this._register(menuWidget.onDidCancel(() => {
 			this.focusState = MenubarState.FOCUSED;
--- a/src/vs/base/browser/ui/octiconLabel/octiconLabel.mock.ts
+++ b/src/vs/base/browser/ui/octiconLabel/octiconLabel.mock.ts
@@ -1,24 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the Source EULA. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-import { escape } from 'vs/base/common/strings';
-
-export function renderOcticons(text: string): string {
-	return escape(text);
-}
-
-export class OcticonLabel {
-
-	private _container: HTMLElement;
-
-	constructor(container: HTMLElement) {
-		this._container = container;
-	}
-
-	set text(text: string) {
-		this._container.innerHTML = renderOcticons(text || '');
-	}
-
-}
--- a/src/vs/base/browser/ui/octiconLabel/octiconLabel.ts
+++ b/src/vs/base/browser/ui/octiconLabel/octiconLabel.ts
@@ -1,33 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the Source EULA. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-import 'vs/css!./octicons/octicons';
-import 'vs/css!./octicons/octicons-animations';
-import { escape } from 'vs/base/common/strings';
-
-function expand(text: string): string {
-	return text.replace(/\$\(((.+?)(~(.*?))?)\)/g, (_match, _g1, name, _g3, animation) => {
-		return `<span class="octicon octicon-${name} ${animation ? `octicon-animation-${animation}` : ''}"></span>`;
-	});
-}
-
-export function renderOcticons(label: string): string {
-	return expand(escape(label));
-}
-
-export class OcticonLabel {
-
-	constructor(
-		private readonly _container: HTMLElement
-	) { }
-
-	set text(text: string) {
-		this._container.innerHTML = renderOcticons(text || '');
-	}
-
-	set title(title: string) {
-		this._container.title = title;
-	}
-}
--- a/src/vs/base/browser/ui/octiconLabel/octicons/octicons-animations.css
+++ b/src/vs/base/browser/ui/octiconLabel/octicons/octicons-animations.css
@@ -1,14 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the Source EULA. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-@keyframes octicon-spin {
-	100% {
-		transform:rotate(360deg);
-	}
-}
-
-.octicon-animation-spin {
-	animation: octicon-spin 1.5s linear infinite;
-}
--- a/src/vs/base/browser/ui/octiconLabel/octicons/octicons.css
+++ b/src/vs/base/browser/ui/octiconLabel/octicons/octicons.css
@@ -1,251 +0,0 @@
-@font-face {
-    font-family: "octicons";
-    src: url("./octicons.ttf?1829db8570ee0fa5a4bef3bb41d5f62e") format("truetype");
-}
-
-.octicon, .mega-octicon {
-    font: normal normal normal 16px/1 octicons;
-    display: inline-block;
-    text-decoration: none;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.mega-octicon { font-size: 32px; }
-
-
-
-.octicon-alert:before { content: "\f02d" }
-.octicon-arrow-down:before { content: "\f03f" }
-.octicon-arrow-left:before { content: "\f040" }
-.octicon-arrow-right:before { content: "\f03e" }
-.octicon-arrow-small-down:before { content: "\f0a0" }
-.octicon-arrow-small-left:before { content: "\f0a1" }
-.octicon-arrow-small-right:before { content: "\f071" }
-.octicon-arrow-small-up:before { content: "\f09f" }
-.octicon-arrow-up:before { content: "\f03d" }
-.octicon-beaker:before { content: "\f0dd" }
-.octicon-bell:before { content: "\f0de" }
-.octicon-bold:before { content: "\f282" }
-.octicon-book:before { content: "\f007" }
-.octicon-bookmark:before { content: "\f07b" }
-.octicon-briefcase:before { content: "\f0d3" }
-.octicon-broadcast:before { content: "\f048" }
-.octicon-browser:before { content: "\f0c5" }
-.octicon-bug:before { content: "\f091" }
-.octicon-calendar:before { content: "\f068" }
-.octicon-check:before { content: "\f03a" }
-.octicon-checklist:before { content: "\f076" }
-.octicon-chevron-down:before { content: "\f0a3" }
-.octicon-chevron-left:before { content: "\f0a4" }
-.octicon-chevron-right:before { content: "\f078" }
-.octicon-chevron-up:before { content: "\f0a2" }
-.octicon-circle-slash:before { content: "\f084" }
-.octicon-circuit-board:before { content: "\f0d6" }
-.octicon-clippy:before { content: "\f035" }
-.octicon-clock:before { content: "\f046" }
-.octicon-clone:before { content: "\f0dc" }
-.octicon-cloud-download:before { content: "\f00b" }
-.octicon-cloud-upload:before { content: "\f00c" }
-.octicon-code:before { content: "\f05f" }
-.octicon-color-mode:before { content: "\f065" }
-.octicon-comment-add:before { content: "\f02b" }
-.octicon-comment-discussion:before { content: "\f04f" }
-.octicon-comment:before { content: "\f02b" }
-.octicon-credit-card:before { content: "\f045" }
-.octicon-dash:before { content: "\f0ca" }
-.octicon-dashboard:before { content: "\f07d" }
-.octicon-database:before { content: "\f096" }
-.octicon-desktop-download:before { content: "\f0dc" }
-.octicon-device-camera-video:before { content: "\f057" }
-.octicon-device-camera:before { content: "\f056" }
-.octicon-device-desktop:before { content: "\f27c" }
-.octicon-device-mobile:before { content: "\f038" }
-.octicon-diff-added:before { content: "\f06b" }
-.octicon-diff-ignored:before { content: "\f099" }
-.octicon-diff-modified:before { content: "\f06d" }
-.octicon-diff-removed:before { content: "\f06c" }
-.octicon-diff-renamed:before { content: "\f06e" }
-.octicon-diff:before { content: "\f04d" }
-.octicon-ellipsis:before { content: "\f09a" }
-.octicon-eye-unwatch:before { content: "\f04e" }
-.octicon-eye-watch:before { content: "\f04e" }
-.octicon-eye:before { content: "\f04e" }
-.octicon-file-add:before { content: "\f05d" }
-.octicon-file-binary:before { content: "\f094" }
-.octicon-file-code:before { content: "\f010" }
-.octicon-file-directory-create:before { content: "\f05d" }
-.octicon-file-directory:before { content: "\f016" }
-.octicon-file-media:before { content: "\f012" }
-.octicon-file-pdf:before { content: "\f014" }
-.octicon-file-submodule:before { content: "\f017" }
-.octicon-file-symlink-directory:before { content: "\f0b1" }
-.octicon-file-symlink-file:before { content: "\f0b0" }
-.octicon-file-text:before { content: "\f283" }
-.octicon-file-zip:before { content: "\f013" }
-.octicon-file:before { content: "\f283" }
-.octicon-flame:before { content: "\f0d2" }
-.octicon-fold:before { content: "\f0cc" }
-.octicon-gear:before { content: "\f02f" }
-.octicon-gift:before { content: "\f042" }
-.octicon-gist-fork:before { content: "\f002" }
-.octicon-gist-new:before { content: "\f05d" }
-.octicon-gist-private:before { content: "\f06a" }
-.octicon-gist-secret:before { content: "\f08c" }
-.octicon-gist:before { content: "\f00e" }
-.octicon-git-branch-create:before { content: "\f020" }
-.octicon-git-branch-delete:before { content: "\f020" }
-.octicon-git-branch:before { content: "\f020" }
-.octicon-git-commit:before { content: "\f01f" }
-.octicon-git-compare:before { content: "\f0ac" }
-.octicon-git-fork-private:before { content: "\f06a" }
-.octicon-git-merge:before { content: "\f023" }
-.octicon-git-pull-request-abandoned:before { content: "\f009" }
-.octicon-git-pull-request:before { content: "\f009" }
-.octicon-globe:before { content: "\f0b6" }
-.octicon-grabber:before { content: "\f284" }
-.octicon-graph:before { content: "\f043" }
-.octicon-heart:before { content: "\2665" }
-.octicon-history:before { content: "\f07e" }
-.octicon-home:before { content: "\f08d" }
-.octicon-horizontal-rule:before { content: "\f070" }
-.octicon-hubot:before { content: "\f09d" }
-.octicon-inbox:before { content: "\f0cf" }
-.octicon-info:before { content: "\f059" }
-.octicon-issue-closed:before { content: "\f028" }
-.octicon-issue-opened:before { content: "\f026" }
-.octicon-issue-reopened:before { content: "\f027" }
-.octicon-italic:before { content: "\f285" }
-.octicon-jersey:before { content: "\f019" }
-.octicon-kebab-horizontal:before { content: "\f286" }
-.octicon-kebab-vertical:before { content: "\f287" }
-.octicon-key:before { content: "\f049" }
-.octicon-keyboard:before { content: "\f00d" }
-.octicon-law:before { content: "\f0d8" }
-.octicon-light-bulb:before { content: "\f000" }
-.octicon-link-external:before { content: "\f07f" }
-.octicon-link:before { content: "\f05c" }
-.octicon-list-ordered:before { content: "\f062" }
-.octicon-list-unordered:before { content: "\f061" }
-.octicon-location:before { content: "\f060" }
-.octicon-lock:before { content: "\f06a" }
-.octicon-log-in:before { content: "\f036" }
-.octicon-log-out:before { content: "\f032" }
-.octicon-mail-read:before { content: "\f03c" }
-.octicon-mail-reply:before { content: "\f28c" }
-.octicon-mail:before { content: "\f03b" }
-.octicon-logo-gist:before { content: "\f00a" }
-.octicon-logo-github:before { content: "\f00a" }
-.octicon-mark-github:before { content: "\f00a" }
-.octicon-markdown:before { content: "\f0c9" }
-.octicon-megaphone:before { content: "\f077" }
-.octicon-mention:before { content: "\f0be" }
-.octicon-microscope:before { content: "\f0dd" }
-.octicon-milestone:before { content: "\f075" }
-.octicon-mirror-private:before { content: "\f06a" }
-.octicon-mirror-public:before { content: "\f024" }
-.octicon-mirror:before { content: "\f024" }
-.octicon-mortar-board:before { content: "\f0d7" }
-.octicon-mute:before { content: "\f080" }
-.octicon-no-newline:before { content: "\f09c" }
-.octicon-note:before { content: "\f289" }
-.octicon-octoface:before { content: "\f008" }
-.octicon-organization:before { content: "\f037" }
-.octicon-organization-filled:before { content: "\f037" }
-.octicon-organization-outline:before { content: "\f037" }
-.octicon-package:before { content: "\f0c4" }
-.octicon-paintcan:before { content: "\f0d1" }
-.octicon-pencil:before { content: "\f058" }
-.octicon-person-add:before { content: "\f018" }
-.octicon-person-follow:before { content: "\f018" }
-.octicon-person:before { content: "\f018" }
-.octicon-person-filled:before { content: "\f018" }
-.octicon-person-outline:before { content: "\f018" }
-.octicon-pin:before { content: "\f041" }
-.octicon-plug:before { content: "\f0d4" }
-.octicon-plus-small:before { content: "\f28a" }
-.octicon-plus:before { content: "\f05d" }
-.octicon-primitive-dot:before { content: "\f052" }
-.octicon-primitive-square:before { content: "\f053" }
-.octicon-project:before { content: "\f28b" }
-.octicon-pulse:before { content: "\f085" }
-.octicon-question:before { content: "\f02c" }
-.octicon-quote:before { content: "\f063" }
-.octicon-radio-tower:before { content: "\f030" }
-.octicon-remove-close:before { content: "\f081" }
-.octicon-reply:before { content: "\f28c" }
-.octicon-repo-clone:before { content: "\f04c" }
-.octicon-repo-create:before { content: "\f05d" }
-.octicon-repo-delete:before { content: "\f001" }
-.octicon-repo-force-push:before { content: "\f04a" }
-.octicon-repo-forked:before { content: "\f002" }
-.octicon-repo-pull:before { content: "\f006" }
-.octicon-repo-push:before { content: "\f005" }
-.octicon-repo-sync:before { content: "\f087" }
-.octicon-repo:before { content: "\f001" }
-.octicon-report:before { content: "\f28d" }
-.octicon-rocket:before { content: "\f033" }
-.octicon-rss:before { content: "\f034" }
-.octicon-ruby:before { content: "\f047" }
-.octicon-screen-full:before { content: "\f066" }
-.octicon-screen-normal:before { content: "\f067" }
-.octicon-search-save:before { content: "\f02e" }
-.octicon-search:before { content: "\f02e" }
-.octicon-server:before { content: "\f097" }
-.octicon-settings:before { content: "\f07c" }
-.octicon-shield:before { content: "\f0e1" }
-.octicon-sign-in:before { content: "\f036" }
-.octicon-sign-out:before { content: "\f032" }
-.octicon-smiley:before { content: "\26b2" }
-.octicon-squirrel:before { content: "\f0b2" }
-.octicon-star-add:before { content: "\f02a" }
-.octicon-star-delete:before { content: "\f02a" }
-.octicon-star:before { content: "\f02a" }
-.octicon-stop:before { content: "\f08f" }
-.octicon-sync:before { content: "\f087" }
-.octicon-tag-add:before { content: "\f015" }
-.octicon-tag-remove:before { content: "\f015" }
-.octicon-tag:before { content: "\f015" }
-.octicon-tasklist:before { content: "\f27e" }
-.octicon-telescope:before { content: "\f088" }
-.octicon-terminal:before { content: "\f0c8" }
-.octicon-text-size:before { content: "\f27f" }
-.octicon-three-bars:before { content: "\f05e" }
-.octicon-thumbsdown:before { content: "\f0db" }
-.octicon-thumbsup:before { content: "\f0da" }
-.octicon-tools:before { content: "\f031" }
-.octicon-trashcan:before { content: "\f0d0" }
-.octicon-triangle-down:before { content: "\f05b" }
-.octicon-triangle-left:before { content: "\f044" }
-.octicon-triangle-right:before { content: "\f05a" }
-.octicon-triangle-up:before { content: "\f0aa" }
-.octicon-unfold:before { content: "\f039" }
-.octicon-unmute:before { content: "\f0ba" }
-.octicon-unverified:before { content: "\f280" }
-.octicon-verified:before { content: "\f281" }
-.octicon-versions:before { content: "\f064" }
-.octicon-watch:before { content: "\f0e0" }
-.octicon-x:before { content: "\f081" }
-.octicon-zap:before { content: "\26a1" }
-.octicon-error:before { content: "\26b1" }
-.octicon-eye-closed:before { content: "\26a3" }
-.octicon-fold-down:before { content: "\26a4" }
-.octicon-fold-up:before { content: "\26a5" }
-.octicon-github-action:before { content: "\26a6" }
-.octicon-info-outline:before { content: "\26a7" }
-.octicon-play:before { content: "\26a8" }
-.octicon-remote:before { content: "\26a9" }
-.octicon-request-changes:before { content: "\26aa" }
-.octicon-smiley-outline:before { content: "\26b2" }
-.octicon-warning:before { content: "\f02d" }
-.octicon-controls:before { content: "\26ad" }
-.octicon-event:before { content: "\26ae" }
-.octicon-record-keys:before { content: "\26af" }
-.octicon-Vector:before { content: "\f101" }
-.octicon-archive:before { content: "\f102" }
-.octicon-arrow-both:before { content: "\f103" }
--- a/src/vs/base/browser/ui/octiconLabel/octicons/octicons.ttf
+++ b/src/vs/base/browser/ui/octiconLabel/octicons/octicons.ttf
--- a/src/vs/base/browser/ui/progressbar/progressbar.ts
+++ b/src/vs/base/browser/ui/progressbar/progressbar.ts
@@ -4,7 +4,6 @@
 *--------------------------------------------------------------------------------------------*/

 import 'vs/css!./progressbar';
-import * as assert from 'vs/base/common/assert';
 import { Disposable } from 'vs/base/common/lifecycle';
 import { Color } from 'vs/base/common/color';
 import { mixin } from 'vs/base/common/objects';
@@ -154,9 +153,7 @@ export class ProgressBar extends Disposable {
 	 * Tells the progress bar that an increment of work has been completed.
 	 */
 	worked(value: number): ProgressBar {
-		value = Number(value);
-		assert.ok(!isNaN(value), 'Value is not a number');
-		value = Math.max(1, value);
+		value = Math.max(1, Number(value));

 		return this.doSetWorked(this.workedVal + value);
 	}
@@ -165,16 +162,13 @@ export class ProgressBar extends Disposable {
 	 * Tells the progress bar the total amount of work that has been completed.
 	 */
 	setWorked(value: number): ProgressBar {
-		value = Number(value);
-		assert.ok(!isNaN(value), 'Value is not a number');
-		value = Math.max(1, value);
+		value = Math.max(1, Number(value));

 		return this.doSetWorked(value);
 	}

 	private doSetWorked(value: number): ProgressBar {
-		assert.ok(isNumber(this.totalWork), 'Total work not set');
-		const totalWork = this.totalWork!;
+		const totalWork = this.totalWork || 100;

 		this.workedVal = value;
 		this.workedVal = Math.min(totalWork, this.workedVal);
@@ -227,7 +221,7 @@ export class ProgressBar extends Disposable {

 	protected applyStyles(): void {
 		if (this.bit) {
-			const background = this.progressBarBackground ? this.progressBarBackground.toString() : null;
+			const background = this.progressBarBackground ? this.progressBarBackground.toString() : '';

 			this.bit.style.backgroundColor = background;
 		}
--- a/src/vs/base/browser/ui/selectBox/selectBox.ts
+++ b/src/vs/base/browser/ui/selectBox/selectBox.ts
@@ -83,7 +83,7 @@ export class SelectBox extends Widget implements ISelectBoxDelegate {
 		super();

 		// Default to native SelectBox for OSX unless overridden
-		if (isMacintosh && !(selectBoxOptions && selectBoxOptions.useCustomDrawn)) {
+		if (isMacintosh && !selectBoxOptions?.useCustomDrawn) {
 			this.selectBoxDelegate = new SelectBoxNative(options, selected, styles, selectBoxOptions);
 		} else {
 			this.selectBoxDelegate = new SelectBoxList(options, selected, contextViewProvider, styles, selectBoxOptions);
--- a/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts
+++ b/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts
@@ -381,22 +381,22 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
 		// Style parent select

 		// {{SQL CARBON EDIT}}
-		let background: Color | undefined = undefined;
-		let foreground: Color | undefined = undefined;
-		let border: Color | undefined = undefined;
+		let background = '';
+		let foreground = '';
+		let border = '';

 		if (this.selectElement) {
 			if (this.selectElement.disabled) {
-				background = (<any>this.styles).disabledSelectBackground;
-				foreground = (<any>this.styles).disabledSelectForeground;
+				background = (<any>this.styles).disabledSelectBackground ? (<any>this.styles).disabledSelectBackground.toString() : '';
+				foreground = (<any>this.styles).disabledSelectForeground ? (<any>this.styles).disabledSelectForeground.toString() : '';
 			} else {
-				background = this.styles.selectBackground;
-				foreground = this.styles.selectForeground;
-				border = this.styles.selectBorder;
+				background = this.styles.selectBackground ? this.styles.selectBackground.toString() : '';
+				foreground = this.styles.selectForeground ? this.styles.selectForeground.toString() : '';
+				border = this.styles.selectBorder ? this.styles.selectBorder.toString() : '';
 			}
-			this.selectElement.style.backgroundColor = background ? background.toString() : null;
-			this.selectElement.style.color = foreground ? foreground.toString() : null;
-			this.selectElement.style.borderColor = border ? border.toString() : null;
+			this.selectElement.style.backgroundColor = background;
+			this.selectElement.style.color = foreground;
+			this.selectElement.style.borderColor = border;
 		}

 		// Style drop down select list (non-native mode only)
@@ -408,10 +408,10 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi

 	private styleList() {
 		if (this.selectList) {
-			let background = this.styles.selectBackground ? this.styles.selectBackground.toString() : null;
+			const background = this.styles.selectBackground ? this.styles.selectBackground.toString() : '';
 			this.selectList.style({});

-			let listBackground = this.styles.selectListBackground ? this.styles.selectListBackground.toString() : background;
+			const listBackground = this.styles.selectListBackground ? this.styles.selectListBackground.toString() : background;
 			this.selectDropDownListContainer.style.backgroundColor = listBackground;
 			this.selectionDetailsPane.style.backgroundColor = listBackground;
 			const optionsBorder = this.styles.focusBorder ? this.styles.focusBorder.toString() : '';
--- a/src/vs/base/browser/ui/selectBox/selectBoxNative.ts
+++ b/src/vs/base/browser/ui/selectBox/selectBoxNative.ts
@@ -148,9 +148,9 @@ export class SelectBoxNative extends Disposable implements ISelectBoxDelegate {

 		// Style native select
 		if (this.selectElement) {
-			const background = this.styles.selectBackground ? this.styles.selectBackground.toString() : null;
-			const foreground = this.styles.selectForeground ? this.styles.selectForeground.toString() : null;
-			const border = this.styles.selectBorder ? this.styles.selectBorder.toString() : null;
+			const background = this.styles.selectBackground ? this.styles.selectBackground.toString() : '';
+			const foreground = this.styles.selectForeground ? this.styles.selectForeground.toString() : '';
+			const border = this.styles.selectBorder ? this.styles.selectBorder.toString() : '';

 			this.selectElement.style.backgroundColor = background;
 			this.selectElement.style.color = foreground;
--- a/src/vs/base/browser/ui/splitview/panelview.css
+++ b/src/vs/base/browser/ui/splitview/panelview.css
@@ -32,6 +32,7 @@
 	justify-content: center;
 	transform-origin: center;
 	color: inherit;
+	flex-shrink: 0;
 }

 .monaco-panel-view .panel > .panel-header.expanded > .twisties::before {
--- a/src/vs/base/browser/ui/splitview/panelview.ts
+++ b/src/vs/base/browser/ui/splitview/panelview.ts
@@ -9,7 +9,7 @@ import { Event, Emitter } from 'vs/base/common/event';
 import { domEvent } from 'vs/base/browser/event';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
-import { $, append, addClass, removeClass, toggleClass, trackFocus, scheduleAtNextAnimationFrame } from 'vs/base/browser/dom';
+import { $, append, addClass, removeClass, toggleClass, trackFocus } from 'vs/base/browser/dom';
 import { firstIndex } from 'vs/base/common/arrays';
 import { Color, RGBA } from 'vs/base/common/color';
 import { SplitView, IView } from './splitview';
@@ -58,6 +58,9 @@ export abstract class Panel extends Disposable implements IView {
 	private readonly _onDidChange = this._register(new Emitter<number | undefined>());
 	readonly onDidChange: Event<number | undefined> = this._onDidChange.event;

+	private readonly _onDidChangeExpansionState = this._register(new Emitter<boolean>());
+	readonly onDidChangeExpansionState: Event<boolean> = this._onDidChangeExpansionState.event;
+
 	get draggableElement(): HTMLElement {
 		return this.header;
 	}
@@ -144,6 +147,7 @@ export abstract class Panel extends Disposable implements IView {
 			}, 200);
 		}

+		this._onDidChangeExpansionState.fire(expanded);
 		this._onDidChange.fire(expanded ? this.expandedSize : undefined);
 		return true;
 	}
@@ -225,8 +229,8 @@ export abstract class Panel extends Disposable implements IView {
 		this.header.setAttribute('aria-expanded', String(expanded));

 		this.header.style.color = this.styles.headerForeground ? this.styles.headerForeground.toString() : null;
-		this.header.style.backgroundColor = this.styles.headerBackground ? this.styles.headerBackground.toString() : null;
-		this.header.style.borderTop = this.styles.headerBorder ? `1px solid ${this.styles.headerBorder}` : null;
+		this.header.style.backgroundColor = this.styles.headerBackground ? this.styles.headerBackground.toString() : '';
+		this.header.style.borderTop = this.styles.headerBorder ? `1px solid ${this.styles.headerBorder}` : '';
 		this._dropBackground = this.styles.dropBackground;
 	}

@@ -336,7 +340,7 @@ class PanelDraggable extends Disposable {
 			backgroundColor = (this.panel.dropBackground || PanelDraggable.DefaultDragOverBackgroundColor).toString();
 		}

-		this.panel.dropTargetElement.style.backgroundColor = backgroundColor;
+		this.panel.dropTargetElement.style.backgroundColor = backgroundColor || '';
 	}
 }

@@ -391,13 +395,7 @@ export class PanelView extends Disposable {

 	addPanel(panel: Panel, size: number, index = this.splitview.length): void {
 		const disposables = new DisposableStore();
-
-		// https://github.com/Microsoft/vscode/issues/59950
-		let shouldAnimate = false;
-		disposables.add(scheduleAtNextAnimationFrame(() => shouldAnimate = true));
-
-		disposables.add(Event.filter(panel.onDidChange, () => shouldAnimate)
-			(this.setupAnimation, this));
+		panel.onDidChangeExpansionState(this.setupAnimation, this, disposables);

 		const panelItem = { panel, disposable: disposables };
 		this.panelItems.splice(index, 0, panelItem);
--- a/src/vs/base/browser/ui/toolbar/toolbar.ts
+++ b/src/vs/base/browser/ui/toolbar/toolbar.ts
@@ -129,9 +129,9 @@ export class ToolBar extends Disposable {
 	}

 	private getKeybindingLabel(action: IAction): string | undefined {
-		const key = this.lookupKeybindings && this.options.getKeyBinding ? this.options.getKeyBinding(action) : undefined;
+		const key = this.lookupKeybindings ? this.options.getKeyBinding?.(action) : undefined;

-		return withNullAsUndefined(key && key.getLabel());
+		return withNullAsUndefined(key?.getLabel());
 	}

 	addPrimaryAction(primaryAction: IAction): () => void {
--- a/src/vs/base/browser/ui/tree/abstractTree.ts
+++ b/src/vs/base/browser/ui/tree/abstractTree.ts
@@ -238,7 +238,7 @@ class EventCollection<T> implements Collection<T> {

 class TreeRenderer<T, TFilterData, TRef, TTemplateData> implements IListRenderer<ITreeNode<T, TFilterData>, ITreeListTemplateData<TTemplateData>> {

-	private static DefaultIndent = 8;
+	private static readonly DefaultIndent = 8;

 	readonly templateId: string;
 	private renderedElements = new Map<T, ITreeNode<T, TFilterData>>();
@@ -250,7 +250,7 @@ class TreeRenderer<T, TFilterData, TRef, TTemplateData> implements IListRenderer
 	private activeIndentNodes = new Set<ITreeNode<T, TFilterData>>();
 	private indentGuidesDisposable: IDisposable = Disposable.None;

-	private disposables: IDisposable[] = [];
+	private readonly disposables = new DisposableStore();

 	constructor(
 		private renderer: ITreeRenderer<T, TFilterData, TTemplateData>,
@@ -458,7 +458,7 @@ class TreeRenderer<T, TFilterData, TRef, TTemplateData> implements IListRenderer
 		this.renderedNodes.clear();
 		this.renderedElements.clear();
 		this.indentGuidesDisposable.dispose();
-		this.disposables = dispose(this.disposables);
+		dispose(this.disposables);
 	}
 }

@@ -471,7 +471,7 @@ class TypeFilter<T> implements ITreeFilter<T, FuzzyScore>, IDisposable {

 	private _pattern: string = '';
 	private _lowercasePattern: string = '';
-	private disposables: IDisposable[] = [];
+	private readonly disposables = new DisposableStore();

 	set pattern(pattern: string) {
 		this._pattern = pattern;
@@ -546,7 +546,7 @@ class TypeFilter<T> implements ITreeFilter<T, FuzzyScore>, IDisposable {
 	}

 	dispose(): void {
-		this.disposables = dispose(this.disposables);
+		dispose(this.disposables);
 	}
 }

@@ -581,8 +581,8 @@ class TypeFilterController<T, TFilterData> implements IDisposable {
 	private readonly _onDidChangePattern = new Emitter<string>();
 	readonly onDidChangePattern = this._onDidChangePattern.event;

-	private enabledDisposables: IDisposable[] = [];
-	private disposables: IDisposable[] = [];
+	private readonly enabledDisposables = new DisposableStore();
+	private readonly disposables = new DisposableStore();

 	constructor(
 		private tree: AbstractTree<T, TFilterData, any>,
@@ -657,6 +657,7 @@ class TypeFilterController<T, TFilterData> implements IDisposable {

 		const onKeyDown = Event.chain(domEvent(this.view.getHTMLElement(), 'keydown'))
 			.filter(e => !isInputElement(e.target as HTMLElement) || e.target === this.filterOnTypeDomNode)
+			.filter(e => e.key !== 'Dead')
 			.map(e => new StandardKeyboardEvent(e))
 			.filter(this.keyboardNavigationEventFilter || (() => true))
 			.filter(() => this.automaticKeyboardNavigation || this.triggered)
@@ -682,7 +683,7 @@ class TypeFilterController<T, TFilterData> implements IDisposable {
 		}

 		this.domNode.remove();
-		this.enabledDisposables = dispose(this.enabledDisposables);
+		this.enabledDisposables.clear();
 		this.tree.refilter();
 		this.render();
 		this._enabled = false;
@@ -744,7 +745,7 @@ class TypeFilterController<T, TFilterData> implements IDisposable {
 		const containerWidth = container.clientWidth;
 		const midContainerWidth = containerWidth / 2;
 		const width = this.domNode.clientWidth;
-		const disposables: IDisposable[] = [];
+		const disposables = new DisposableStore();
 		let positionClassName = this.positionClassName;

 		const updatePosition = () => {
@@ -780,8 +781,8 @@ class TypeFilterController<T, TFilterData> implements IDisposable {
 		const onDragEnd = () => {
 			this.positionClassName = positionClassName;
 			this.domNode.className = `monaco-list-type-filter ${this.positionClassName}`;
-			this.domNode.style.top = null;
-			this.domNode.style.left = null;
+			this.domNode.style.top = '';
+			this.domNode.style.left = '';

 			dispose(disposables);
 		};
@@ -790,13 +791,13 @@ class TypeFilterController<T, TFilterData> implements IDisposable {
 		removeClass(this.domNode, positionClassName);

 		addClass(this.domNode, 'dragging');
-		disposables.push(toDisposable(() => removeClass(this.domNode, 'dragging')));
+		disposables.add(toDisposable(() => removeClass(this.domNode, 'dragging')));

 		domEvent(document, 'dragover')(onDragOver, null, disposables);
 		domEvent(this.domNode, 'dragend')(onDragEnd, null, disposables);

 		StaticDND.CurrentDragAndDropData = new DragAndDropData('vscode-ui');
-		disposables.push(toDisposable(() => StaticDND.CurrentDragAndDropData = undefined));
+		disposables.add(toDisposable(() => StaticDND.CurrentDragAndDropData = undefined));
 	}

 	private onDidSpliceModel(): void {
@@ -855,9 +856,15 @@ class TypeFilterController<T, TFilterData> implements IDisposable {
 	}

 	dispose() {
-		this.disable();
+		if (this._enabled) {
+			this.domNode.remove();
+			this.enabledDisposables.dispose();
+			this._enabled = false;
+			this.triggered = false;
+		}
+
 		this._onDidChangePattern.dispose();
-		this.disposables = dispose(this.disposables);
+		dispose(this.disposables);
 	}
 }

@@ -1175,7 +1182,7 @@ export abstract class AbstractTree<T, TFilterData, TRef> implements IDisposable
 	private typeFilterController?: TypeFilterController<T, TFilterData>;
 	private focusNavigationFilter: ((node: ITreeNode<T, TFilterData>) => boolean) | undefined;
 	private styleElement: HTMLStyleElement;
-	protected disposables: IDisposable[] = [];
+	protected readonly disposables = new DisposableStore();

 	get onDidScroll(): Event<ScrollEvent> { return this.view.onDidScroll; }

@@ -1224,16 +1231,17 @@ export abstract class AbstractTree<T, TFilterData, TRef> implements IDisposable
 		const onDidChangeCollapseStateRelay = new Relay<ICollapseStateChangeEvent<T, TFilterData>>();
 		const onDidChangeActiveNodes = new Relay<ITreeNode<T, TFilterData>[]>();
 		const activeNodes = new EventCollection(onDidChangeActiveNodes.event);
-
 		this.renderers = renderers.map(r => new TreeRenderer<T, TFilterData, TRef, any>(r, () => this.model, onDidChangeCollapseStateRelay.event, activeNodes, _options));
-		this.disposables.push(...this.renderers);
+		for (let r of this.renderers) {
+			this.disposables.add(r);
+		}

 		let filter: TypeFilter<T> | undefined;

 		if (_options.keyboardNavigationLabelProvider) {
 			filter = new TypeFilter(this, _options.keyboardNavigationLabelProvider, _options.filter as any as ITreeFilter<T, FuzzyScore>);
 			_options = { ..._options, filter: filter as ITreeFilter<T, TFilterData> }; // TODO need typescript help here
-			this.disposables.push(filter);
+			this.disposables.add(filter);
 		}

 		this.focus = new Trait(_options.identityProvider);
@@ -1287,7 +1295,7 @@ export abstract class AbstractTree<T, TFilterData, TRef> implements IDisposable
 			const delegate = _options.keyboardNavigationDelegate || DefaultKeyboardNavigationDelegate;
 			this.typeFilterController = new TypeFilterController(this, this.model, this.view, filter!, delegate);
 			this.focusNavigationFilter = node => this.typeFilterController!.shouldAllowFocus(node);
-			this.disposables.push(this.typeFilterController!);
+			this.disposables.add(this.typeFilterController!);
 		}

 		this.styleElement = createStyleSheet(this.view.getHTMLElement());
@@ -1362,7 +1370,7 @@ export abstract class AbstractTree<T, TFilterData, TRef> implements IDisposable
 	}

 	get scrollLeft(): number {
-		return this.view.scrollTop;
+		return this.view.scrollLeft;
 	}

 	set scrollLeft(scrollLeft: number) {
@@ -1641,7 +1649,7 @@ export abstract class AbstractTree<T, TFilterData, TRef> implements IDisposable
 	}

 	dispose(): void {
-		this.disposables = dispose(this.disposables);
+		dispose(this.disposables);
 		this.view.dispose();
 	}
 }
--- a/src/vs/base/browser/ui/tree/asyncDataTree.ts
+++ b/src/vs/base/browser/ui/tree/asyncDataTree.ts
@@ -7,7 +7,7 @@ import { ComposedTreeDelegate, IAbstractTreeOptions, IAbstractTreeOptionsUpdate
 import { ObjectTree, IObjectTreeOptions, CompressibleObjectTree, ICompressibleTreeRenderer, ICompressibleKeyboardNavigationLabelProvider, ICompressibleObjectTreeOptions } from 'vs/base/browser/ui/tree/objectTree';
 import { IListVirtualDelegate, IIdentityProvider, IListDragAndDrop, IListDragOverReaction } from 'vs/base/browser/ui/list/list';
 import { ITreeElement, ITreeNode, ITreeRenderer, ITreeEvent, ITreeMouseEvent, ITreeContextMenuEvent, ITreeSorter, ICollapseStateChangeEvent, IAsyncDataSource, ITreeDragAndDrop, TreeError, WeakMapper } from 'vs/base/browser/ui/tree/tree';
-import { IDisposable, dispose } from 'vs/base/common/lifecycle';
+import { IDisposable, dispose, DisposableStore } from 'vs/base/common/lifecycle';
 import { Emitter, Event } from 'vs/base/common/event';
 import { timeout, CancelablePromise, createCancelablePromise } from 'vs/base/common/async';
 import { IListStyles } from 'vs/base/browser/ui/list/listWidget';
@@ -88,7 +88,6 @@ class AsyncDataTreeRenderer<TInput, T, TFilterData, TTemplateData> implements IT

 	readonly templateId: string;
 	private renderedNodes = new Map<IAsyncDataTreeNode<TInput, T>, IDataTreeListTemplateData<TTemplateData>>();
-	private disposables: IDisposable[] = [];

 	constructor(
 		protected renderer: ITreeRenderer<T, TFilterData, TTemplateData>,
@@ -124,7 +123,6 @@ class AsyncDataTreeRenderer<TInput, T, TFilterData, TTemplateData> implements IT

 	dispose(): void {
 		this.renderedNodes.clear();
-		this.disposables = dispose(this.disposables);
 	}
 }

@@ -292,7 +290,7 @@ export class AsyncDataTree<TInput, T, TFilterData = void> implements IDisposable

 	protected readonly nodeMapper: AsyncDataTreeNodeMapper<TInput, T, TFilterData> = new WeakMapper(node => new AsyncDataTreeNodeWrapper(node));

-	protected readonly disposables: IDisposable[] = [];
+	protected readonly disposables = new DisposableStore();

 	get onDidScroll(): Event<ScrollEvent> { return this.tree.onDidScroll; }

@@ -930,7 +928,7 @@ export class AsyncDataTree<TInput, T, TFilterData = void> implements IDisposable
 	}

 	dispose(): void {
-		dispose(this.disposables);
+		this.disposables.dispose();
 	}
 }

--- a/src/vs/base/browser/ui/tree/objectTree.ts
+++ b/src/vs/base/browser/ui/tree/objectTree.ts
@@ -14,7 +14,7 @@ import { CompressibleObjectTreeModel, ElementMapper, ICompressedTreeNode, ICompr
 import { memoize } from 'vs/base/common/decorators';

 export interface IObjectTreeOptions<T, TFilterData = void> extends IAbstractTreeOptions<T, TFilterData> {
-	sorter?: ITreeSorter<T>;
+	readonly sorter?: ITreeSorter<T>;
 }

 export class ObjectTree<T extends NonNullable<any>, TFilterData = void> extends AbstractTree<T | null, TFilterData, T | null> {
@@ -59,10 +59,6 @@ interface ICompressedTreeNodeProvider<T, TFilterData> {
 	getCompressedTreeNode(element: T): ITreeNode<ICompressedTreeNode<T>, TFilterData>;
 }

-export interface ICompressibleObjectTreeOptions<T, TFilterData = void> extends IObjectTreeOptions<T, TFilterData> {
-	readonly elementMapper?: ElementMapper<T>;
-}
-
 export interface ICompressibleTreeRenderer<T, TFilterData = void, TTemplateData = void> extends ITreeRenderer<T, TFilterData, TTemplateData> {
 	renderCompressedElements(node: ITreeNode<ICompressedTreeNode<T>, TFilterData>, index: number, templateData: TTemplateData, height: number | undefined): void;
 	disposeCompressedElements?(node: ITreeNode<ICompressedTreeNode<T>, TFilterData>, index: number, templateData: TTemplateData, height: number | undefined): void;
@@ -136,6 +132,7 @@ export interface ICompressibleKeyboardNavigationLabelProvider<T> extends IKeyboa
 }

 export interface ICompressibleObjectTreeOptions<T, TFilterData = void> extends IObjectTreeOptions<T, TFilterData> {
+	readonly elementMapper?: ElementMapper<T>;
 	readonly keyboardNavigationLabelProvider?: ICompressibleKeyboardNavigationLabelProvider<T>;
 }

@@ -164,7 +161,7 @@ function asObjectTreeOptions<T, TFilterData>(compressedTreeNodeProvider: () => I

 export class CompressibleObjectTree<T extends NonNullable<any>, TFilterData = void> extends ObjectTree<T, TFilterData> implements ICompressedTreeNodeProvider<T, TFilterData> {

-	protected model: CompressibleObjectTreeModel<T, TFilterData>;
+	protected model!: CompressibleObjectTreeModel<T, TFilterData>;

 	constructor(
 		user: string,