Merge from vscode a4177f50c475fc0fa278a78235e3bee9ffdec781 (#8649)

* Merge from vscode a4177f50c475fc0fa278a78235e3bee9ffdec781

* distro

* fix tests

src/vs/base/browser/markdownRenderer.ts

@@ -15,6 +15,7 @@ import { cloneAndChange } from 'vs/base/common/objects';
 import { escape } from 'vs/base/common/strings';
 import { URI } from 'vs/base/common/uri';
 import { Schemas } from 'vs/base/common/network';
+import { renderCodicons, markdownEscapeEscapedCodicons } from 'vs/base/common/codicons';
 
 export interface MarkdownRenderOptions extends FormattedTextRenderOptions {
 	codeBlockRenderer?: (modeId: string, value: string) => Promise<string>;
@@ -118,7 +119,7 @@ export function renderMarkdown(markdown: IMarkdownString, options: MarkdownRende
 		}
 	};
 	renderer.paragraph = (text): string => {
-		return `<p>${text}</p>`;
+		return `<p>${markdown.supportThemeIcons ? renderCodicons(text) : text}</p>`;
 	};
 
 	if (options.codeBlockRenderer) {
@@ -192,7 +193,13 @@ export function renderMarkdown(markdown: IMarkdownString, options: MarkdownRende
 		allowedSchemes.push(Schemas.command);
 	}
 
-	const renderedMarkdown = marked.parse(markdown.value, markedOptions);
+	const renderedMarkdown = marked.parse(
+		markdown.supportThemeIcons
+			? markdownEscapeEscapedCodicons(markdown.value)
+			: markdown.value,
+		markedOptions
+	);
+
 	element.innerHTML = insane(renderedMarkdown, {
 		allowedSchemes,
 		allowedAttributes: {

src/vs/base/browser/ui/checkbox/check-dark.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15 3.76345L5.80687 11.9351L5.08584 11.8927L1 7.29614L1.76345 6.61752L5.50997 10.8324L14.3214 3L15 3.76345Z" fill="#C5C5C5"/>
-</svg>

src/vs/base/browser/ui/checkbox/check-light.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15 3.76345L5.80687 11.9351L5.08584 11.8927L1 7.29614L1.76345 6.61752L5.50997 10.8324L14.3214 3L15 3.76345Z" fill="#424242"/>
-</svg>

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

@@ -44,10 +44,7 @@
 	background-size: 16px !important;
 }
 
-.monaco-custom-checkbox.monaco-simple-checkbox.checked {
-	background: url('check-light.svg') center center no-repeat;
-}
-
-.monaco-custom-checkbox.monaco-simple-checkbox.checked {
-	background: url('check-dark.svg') center center no-repeat;
+/* hide check when unchecked */
+.monaco-custom-checkbox.monaco-simple-checkbox.unchecked:not(.checked)::before {
+	visibility: hidden;;
 }

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

@@ -192,7 +192,7 @@ export class SimpleCheckbox extends Widget {
 	constructor(private title: string, private isChecked: boolean) {
 		super();
 
-		this.checkbox = new Checkbox({ title: this.title, isChecked: this.isChecked, actionClassName: 'monaco-simple-checkbox' });
+		this.checkbox = new Checkbox({ title: this.title, isChecked: this.isChecked, actionClassName: 'monaco-simple-checkbox codicon-check' });
 
 		this.domNode = this.checkbox.domNode;
 

src/vs/base/browser/ui/codiconLabel/codicon/codicon.css

@@ -395,9 +395,9 @@
 .codicon-debug-breakpoint-function-unverified:before { content: "\eb87" }
 .codicon-debug-breakpoint-function:before { content: "\eb88" }
 .codicon-debug-breakpoint-function-disabled:before { content: "\eb88" }
-.codicon-debug-breakpoint-stackframe-active:before { content: "\eb89" }
-.codicon-debug-breakpoint-stackframe:before { content: "\eb8b" }
-.codicon-debug-breakpoint-stackframe-focused:before { content: "\eb8b" }
+.codicon-debug-stackframe-active:before { content: "\eb89" }
+.codicon-debug-stackframe:before { content: "\eb8b" }
+.codicon-debug-stackframe-focused:before { content: "\eb8b" }
 .codicon-debug-breakpoint-unsupported:before { content: "\eb8c" }
 .codicon-symbol-string:before { content: "\eb8d" }
 .codicon-debug-reverse-continue:before { content: "\eb8e" }

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

@@ -6,16 +6,7 @@
 import 'vs/css!./codicon/codicon';
 import 'vs/css!./codicon/codicon-animations';
 import { escape } from 'vs/base/common/strings';
-
-function expand(text: string): string {
-	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>`;
-	});
-}
-
-export function renderCodicons(label: string): string {
-	return expand(escape(label));
-}
+import { renderCodicons } from 'vs/base/common/codicons';
 
 export class CodiconLabel {
 
@@ -24,7 +15,7 @@ export class CodiconLabel {
 	) { }
 
 	set text(text: string) {
-		this._container.innerHTML = renderCodicons(text || '');
+		this._container.innerHTML = renderCodicons(escape(text ?? ''));
 	}
 
 	set title(title: string) {

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

@@ -5,5 +5,5 @@
 
 .context-view {
 	position: absolute;
-	z-index: 2000;
-}
+	z-index: 2500;
+}

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

@@ -28,6 +28,7 @@
 	max-width: 90%;
 	min-height: 75px;
 	padding: 10px;
+	transform: translate3d(0px, 0px, 0px);
 }
 
 /** Dialog: Title Actions Row */

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

@@ -46,6 +46,7 @@ interface ButtonMapEntry {
 
 export class Dialog extends Disposable {
 	private element: HTMLElement | undefined;
+	private shadowElement: HTMLElement | undefined;
 	private modal: HTMLElement | undefined;
 	private buttonsContainer: HTMLElement | undefined;
 	private messageDetailElement: HTMLElement | undefined;
@@ -61,7 +62,8 @@ export class Dialog extends Disposable {
 	constructor(private container: HTMLElement, private message: string, buttons: string[], private options: IDialogOptions) {
 		super();
 		this.modal = this.container.appendChild($(`.dialog-modal-block${options.type === 'pending' ? '.dimmed' : ''}`));
-		this.element = this.modal.appendChild($('.dialog-box'));
+		this.shadowElement = this.modal.appendChild($('.dialog-shadow'));
+		this.element = this.shadowElement.appendChild($('.dialog-box'));
 		hide(this.element);
 
 		// If no button is provided, default to OK
@@ -249,10 +251,13 @@ export class Dialog extends Disposable {
 			const shadowColor = style.dialogShadow ? `0 0px 8px ${style.dialogShadow}` : '';
 			const border = style.dialogBorder ? `1px solid ${style.dialogBorder}` : '';
 
+			if (this.shadowElement) {
+				this.shadowElement.style.boxShadow = shadowColor;
+			}
+
 			if (this.element) {
 				this.element.style.color = fgColor;
 				this.element.style.backgroundColor = bgColor;
-				this.element.style.boxShadow = shadowColor;
 				this.element.style.border = border;
 
 				if (this.buttonGroup) {

src/vs/base/browser/ui/highlightedlabel/highlightedLabel.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as objects from 'vs/base/common/objects';
-import { renderCodicons } from 'vs/base/browser/ui/codiconLabel/codiconLabel';
+import { renderCodicons } from 'vs/base/common/codicons';
 import { escape } from 'vs/base/common/strings';
 
 export interface IHighlight {
@@ -65,13 +65,13 @@ export class HighlightedLabel {
 			if (pos < highlight.start) {
 				htmlContent += '<span>';
 				const substring = this.text.substring(pos, highlight.start);
-				htmlContent += this.supportCodicons ? renderCodicons(substring) : escape(substring);
+				htmlContent += this.supportCodicons ? renderCodicons(escape(substring)) : escape(substring);
 				htmlContent += '</span>';
 				pos = highlight.end;
 			}
 			htmlContent += '<span class="highlight">';
 			const substring = this.text.substring(highlight.start, highlight.end);
-			htmlContent += this.supportCodicons ? renderCodicons(substring) : escape(substring);
+			htmlContent += this.supportCodicons ? renderCodicons(escape(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.supportCodicons ? renderCodicons(substring) : escape(substring);
+			htmlContent += this.supportCodicons ? renderCodicons(escape(substring)) : escape(substring);
 			htmlContent += '</span>';
 		}
 

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

@@ -593,7 +593,7 @@ 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 bgColor = isSelected && this.menuStyle.selectionBackgroundColor ? this.menuStyle.selectionBackgroundColor : undefined;
 		const border = isSelected && this.menuStyle.selectionBorderColor ? `thin solid ${this.menuStyle.selectionBorderColor}` : '';
 
 		if (this.item) {

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

@@ -1298,7 +1298,7 @@ export abstract class AbstractTree<T, TFilterData, TRef> implements IDisposable
 		onDidModelSplice(() => null, null, this.disposables);
 
 		// Active nodes can change when the model changes or when focus or selection change.
-		// We debouce it with 0 delay since these events may fire in the same stack and we only
+		// We debounce it with 0 delay since these events may fire in the same stack and we only
 		// want to run this once. It also doesn't matter if it runs on the next tick since it's only
 		// a nice to have UI feature.
 		onDidChangeActiveNodes.input = Event.chain(Event.any<any>(onDidModelSplice, this.focus.onDidChange, this.selection.onDidChange))