Merge pull request #85065 from microsoft/misolori/icon-font-dialog

Adopt icon font in custom dialogs

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

-<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="M8.00001 8.70714L11.6465 12.3536L12.3536 11.6465L8.70711 8.00004L12.3536 4.35359L11.6465 3.64648L8.00001 7.29293L4.35356 3.64648L3.64645 4.35359L7.2929 8.00004L3.64645 11.6465L4.35356 12.3536L8.00001 8.70714Z" fill="#C5C5C5"/>
-</svg>

src/vs/base/browser/ui/dialog/close-light.svg

-<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="M8.00001 8.70714L11.6465 12.3536L12.3536 11.6465L8.70711 8.00004L12.3536 4.35359L11.6465 3.64648L8.00001 7.29293L4.35356 3.64648L3.64645 4.35359L7.2929 8.00004L3.64645 11.6465L4.35356 12.3536L8.00001 8.70714Z" fill="#424242"/>
-</svg>

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

@@ -46,15 +46,6 @@
 }
 
 
-.monaco-workbench .dialog-box .dialog-close-action {
-	background: url('close-light.svg') center center no-repeat;
-}
-
-.vs-dark .monaco-workbench .dialog-box .dialog-close-action,
-.hc-black .monaco-workbench .dialog-box .dialog-close-action {
-	background: url('close-dark.svg') center center no-repeat;
-}
-
 /** Dialog: Message Row */
 .monaco-workbench .dialog-box .dialog-message-row {
 	display: flex;
@@ -63,56 +54,11 @@
 	padding: 0 10px;
 }
 
-.monaco-workbench .dialog-box .dialog-message-row .dialog-icon {
+.monaco-workbench .dialog-box .dialog-message-row > .codicon {
 	flex: 0 0 48px;
 	height: 48px;
 	align-self: baseline;
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: 48px;
-}
-
-.vs .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-pending {
-	background-image: url('pending.svg');
-}
-
-.vs .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-info {
-	background-image: url('info-light.svg');
-}
-
-.vs .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-warning {
-	background-image: url('warning-light.svg');
-}
-
-.vs .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-error {
-	background-image: url('error-light.svg');
-}
-
-.vs-dark .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-pending {
-	background-image: url('pending-dark.svg');
-}
-
-.vs-dark .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-info,
-.hc-black .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-info {
-	background-image: url('info-dark.svg');
-}
-
-.vs-dark .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-warning,
-.hc-black .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-warning {
-	background-image: url('warning-dark.svg');
-}
-
-.vs-dark .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-error,
-.hc-black .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-error {
-	background-image: url('error-dark.svg');
-}
-
-.hc-black .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-pending {
-	background-image: url('pending-hc.svg');
-}
-
-.monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-pending {
-	background-size: 30px;
+	font-size: 48px;
 }
 
 /** Dialog: Message Container */
@@ -136,6 +82,10 @@
 	flex: 1; /* let the message always grow */
 	white-space: normal;
 	word-wrap: break-word; /* never overflow long words, but break to next line */
+	min-height: 48px; /* matches icon height */
+	margin-bottom: 8px;
+	display: flex;
+	align-items: center;
 }
 
 /** Dialog: Details */
@@ -143,7 +93,6 @@
 	line-height: 22px;
 	flex: 1; /* let the message always grow */
 	opacity: .9;
-	margin-top: 8px;
 }
 
 .monaco-workbench .dialog-box .dialog-message-row .dialog-message-container .dialog-message a:focus {

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

@@ -6,7 +6,7 @@
 import 'vs/css!./dialog';
 import * as nls from 'vs/nls';
 import { Disposable } from 'vs/base/common/lifecycle';
-import { $, hide, show, EventHelper, clearNode, removeClasses, addClass, removeNode, isAncestor, addDisposableListener, EventType } from 'vs/base/browser/dom';
+import { $, hide, show, EventHelper, clearNode, removeClasses, addClass, addClasses, removeNode, isAncestor, addDisposableListener, EventType } from 'vs/base/browser/dom';
 import { domEvent } from 'vs/base/browser/event';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
@@ -75,7 +75,8 @@ export class Dialog extends Disposable {
 
 		if (this.options.detail) {
 			const messageElement = messageContainer.appendChild($('.dialog-message'));
-			messageElement.innerText = this.message;
+			const messageTextElement = messageElement.appendChild($('.dialog-message-text'));
+			messageTextElement.innerText = this.message;
 		}
 
 		this.messageDetailElement = messageContainer.appendChild($('.dialog-message-detail'));
@@ -199,29 +200,30 @@ export class Dialog extends Disposable {
 				}
 			}));
 
-			removeClasses(this.iconElement, 'icon-error', 'icon-warning', 'icon-info');
+			addClass(this.iconElement, 'codicon');
+			removeClasses(this.iconElement, 'codicon-alert', 'codicon-warning', 'codicon-info');
 
 			switch (this.options.type) {
 				case 'error':
-					addClass(this.iconElement, 'icon-error');
+					addClass(this.iconElement, 'codicon-error');
 					break;
 				case 'warning':
-					addClass(this.iconElement, 'icon-warning');
+					addClass(this.iconElement, 'codicon-warning');
 					break;
 				case 'pending':
-					addClass(this.iconElement, 'icon-pending');
+					addClasses(this.iconElement, 'codicon-loading', 'codicon-animation-spin');
 					break;
 				case 'none':
 				case 'info':
 				case 'question':
 				default:
-					addClass(this.iconElement, 'icon-info');
+					addClass(this.iconElement, 'codicon-info');
 					break;
 			}
 
 			const actionBar = new ActionBar(this.toolbarContainer, {});
 
-			const action = new Action('dialog.close', nls.localize('dialogClose', "Close Dialog"), 'dialog-close-action', true, () => {
+			const action = new Action('dialog.close', nls.localize('dialogClose', "Close Dialog"), 'codicon codicon-close', true, () => {
 				resolve({ button: this.options.cancelId || 0, checkboxChecked: this.checkbox ? this.checkbox.checked : undefined });
 				return Promise.resolve();
 			});

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

-<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="M8.58318 2.02842C9.96435 2.16331 11.2561 2.77279 12.2383 3.75307C13.3643 4.87923 13.9978 6.40584 14 7.99829C14.0004 9.38617 13.5196 10.7313 12.6396 11.8045C11.7595 12.8778 10.5345 13.6127 9.17333 13.8841C7.81215 14.1556 6.39895 13.9467 5.1745 13.2931C3.95005 12.6394 2.99008 11.5815 2.45814 10.2995C1.92619 9.0175 1.85517 7.59072 2.25717 6.26222C2.65917 4.93373 3.50933 3.7857 4.66282 3.0137C5.8163 2.24171 7.20177 1.89351 8.58318 2.02842ZM8.68038 1.03316C10.292 1.19055 11.7993 1.90184 12.9453 3.04585C14.2587 4.35938 14.9976 6.14013 15 7.99764C15.0005 9.61695 14.4396 11.1864 13.4129 12.4385C12.3861 13.6907 10.9569 14.5482 9.36889 14.8648C7.78084 15.1815 6.13211 14.9378 4.70359 14.1752C3.27506 13.4127 2.1551 12.1784 1.53449 10.6828C0.913887 9.18708 0.831027 7.52251 1.30003 5.97259C1.76903 4.42268 2.76089 3.08331 4.10662 2.18265C5.45236 1.28199 7.06873 0.875761 8.68038 1.03316ZM5.52498 5L8.00004 7.47506L10.4751 5L11.1822 5.70711L8.70714 8.18217L11.1818 10.6569L10.4747 11.364L8.00004 8.88927L5.52535 11.364L4.81824 10.6569L7.29293 8.18217L4.81787 5.70711L5.52498 5Z" fill="#F48771"/>
-</svg>

src/vs/base/browser/ui/dialog/error-light.svg

-<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="M8.58318 2.02842C9.96435 2.16331 11.2561 2.77279 12.2383 3.75307C13.3643 4.87923 13.9978 6.40584 14 7.99829C14.0004 9.38617 13.5196 10.7313 12.6396 11.8045C11.7595 12.8778 10.5345 13.6127 9.17333 13.8841C7.81215 14.1556 6.39895 13.9467 5.1745 13.2931C3.95005 12.6394 2.99008 11.5815 2.45814 10.2995C1.92619 9.0175 1.85517 7.59072 2.25717 6.26222C2.65917 4.93373 3.50933 3.7857 4.66282 3.0137C5.8163 2.24171 7.20177 1.89351 8.58318 2.02842ZM8.68038 1.03316C10.292 1.19055 11.7993 1.90184 12.9453 3.04585C14.2587 4.35938 14.9976 6.14013 15 7.99764C15.0005 9.61695 14.4396 11.1864 13.4129 12.4385C12.3861 13.6907 10.9569 14.5482 9.36889 14.8648C7.78084 15.1815 6.13211 14.9378 4.70359 14.1752C3.27506 13.4127 2.1551 12.1784 1.53449 10.6828C0.913887 9.18708 0.831027 7.52251 1.30003 5.97259C1.76903 4.42268 2.76089 3.08331 4.10662 2.18265C5.45236 1.28199 7.06873 0.875761 8.68038 1.03316ZM5.52498 5L8.00004 7.47506L10.4751 5L11.1822 5.70711L8.70714 8.18217L11.1818 10.6569L10.4747 11.364L8.00004 8.88927L5.52535 11.364L4.81824 10.6569L7.29293 8.18217L4.81787 5.70711L5.52498 5Z" fill="#A1260D"/>
-</svg>

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

-<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="M3 7.5C3 4.46243 5.46243 2 8.5 2C11.5376 2 14 4.46243 14 7.5C14 10.5376 11.5376 13 8.5 13C5.46243 13 3 10.5376 3 7.5ZM2 7.5C2 3.91015 4.91015 1 8.5 1C12.0899 1 15 3.91015 15 7.5C15 11.0899 12.0899 14 8.5 14C4.91015 14 2 11.0899 2 7.5ZM8 4V5H9V4H8ZM8 6L8 10H9L9 6H8Z" fill="#75BEFF"/>
-</svg>

src/vs/base/browser/ui/dialog/info-light.svg

-<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="M3 7.5C3 4.46243 5.46243 2 8.5 2C11.5376 2 14 4.46243 14 7.5C14 10.5376 11.5376 13 8.5 13C5.46243 13 3 10.5376 3 7.5ZM2 7.5C2 3.91015 4.91015 1 8.5 1C12.0899 1 15 3.91015 15 7.5C15 11.0899 12.0899 14 8.5 14C4.91015 14 2 11.0899 2 7.5ZM8 4V5H9V4H8ZM8 6L8 10H9L9 6H8Z" fill="#007ACC"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3 7.5C3 4.46243 5.46243 2 8.5 2C11.5376 2 14 4.46243 14 7.5C14 10.5376 11.5376 13 8.5 13C5.46243 13 3 10.5376 3 7.5ZM2 7.5C2 3.91015 4.91015 1 8.5 1C12.0899 1 15 3.91015 15 7.5C15 11.0899 12.0899 14 8.5 14C4.91015 14 2 11.0899 2 7.5ZM8 4V5H9V4H8ZM8 6L8 10H9L9 6H8Z" fill="#007ACC"/>
-</svg>

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

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

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

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

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

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

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

-<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="M14.12 13.9725L15 12.5L9.37927 2H7.61924L1.9985 12.5L2.87852 13.9725H14.12ZM2.87852 12.9725L8.49925 2.47249L14.12 12.9725H2.87852ZM7.98952 6H8.98802V10H7.98952V6ZM7.98952 11H8.98802V12H7.98952V11Z" fill="#FFCC00"/>
-</svg>

src/vs/base/browser/ui/dialog/warning-light.svg

-<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="M14.12 13.9725L15 12.5L9.37927 2H7.61924L1.9985 12.5L2.87852 13.9725H14.12ZM2.87852 12.9725L8.49925 2.47249L14.12 12.9725H2.87852ZM7.98952 6H8.98802V10H7.98952V6ZM7.98952 11H8.98802V12H7.98952V11Z" fill="#FFCC00"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.12 13.9725L15 12.5L9.37927 2H7.61924L1.9985 12.5L2.87852 13.9725H14.12ZM2.87852 12.9725L8.49925 2.47249L14.12 12.9725H2.87852ZM7.98952 6H8.98802V10H7.98952V6ZM7.98952 11H8.98802V12H7.98952V11Z" fill="#DDB100"/>
-</svg>

src/vs/platform/severityIcon/common/severityIcon.ts

@@ -31,7 +31,8 @@ registerThemingParticipant((theme, collector) => {
 		collector.addRule(`
 			.monaco-workbench .zone-widget .codicon-error,
 			.monaco-workbench .markers-panel .marker-icon.codicon-error,
-			.monaco-workbench .extensions-viewlet > .extensions .codicon-error {
+			.monaco-workbench .extensions-viewlet > .extensions .codicon-error,
+			.monaco-workbench .dialog-box .dialog-message-row .codicon-error {
 				color: ${errorIconForeground};
 			}
 		`);
@@ -43,7 +44,8 @@ registerThemingParticipant((theme, collector) => {
 			.monaco-workbench .zone-widget .codicon-warning,
 			.monaco-workbench .markers-panel .marker-icon.codicon-warning,
 			.monaco-workbench .extensions-viewlet > .extensions .codicon-warning,
-			.monaco-workbench .extension-editor .codicon-warning {
+			.monaco-workbench .extension-editor .codicon-warning,
+			.monaco-workbench .dialog-box .dialog-message-row .codicon-warning {
 				color: ${warningIconForeground};
 			}
 		`);
@@ -55,7 +57,8 @@ registerThemingParticipant((theme, collector) => {
 			.monaco-workbench .zone-widget .codicon-info,
 			.monaco-workbench .markers-panel .marker-icon.codicon-info,
 			.monaco-workbench .extensions-viewlet > .extensions .codicon-info,
-			.monaco-workbench .extension-editor .codicon-info {
+			.monaco-workbench .extension-editor .codicon-info,
+			.monaco-workbench .dialog-box .dialog-message-row .codicon-info {
 				color: ${infoIconForeground};
 			}
 		`);