notifications - simple icons support

src/vs/workbench/electron-browser/actions.ts

@@ -1578,7 +1578,9 @@ export class ShowAboutDialogAction extends Action {
 	}
 
 	run(): TPromise<void> {
-		this.notificationService.notify(Severity.Info, 'This is a message with a [link](https://code.visualstudio.com).');
+		this.notificationService.notify(Severity.Info, 'This is a info message with a [link](https://code.visualstudio.com).');
+		this.notificationService.notify(Severity.Warning, 'This is a warning message with a [link](https://code.visualstudio.com).');
+		this.notificationService.notify(Severity.Error, 'This is a error message with a [link](https://code.visualstudio.com).');
 
 		return TPromise.as(undefined);
 	}

src/vs/workbench/services/notification/browser/media/notification-error-inverse.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16"><circle cx="8" cy="8" r="6" fill="#1E1E1E"/><path d="M8 3C5.238 3 3 5.238 3 8s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5zm3 7l-1 1-2-2-2 2-1-1 2-2.027L5 6l1-1 2 2 2-2 1 1-2 1.973L11 10z" fill="#F48771"/><path fill="#252526" d="M11 6l-1-1-2 2-2-2-1 1 2 1.973L5 10l1 1 2-2 2 2 1-1-2-2.027z"/></svg>
\ No newline at end of file

src/vs/workbench/services/notification/browser/media/notification-error.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" enable-background="new 0 0 16 16" height="16" width="16"><circle cx="8" cy="8" r="6" fill="#F6F6F6"/><path d="M8 3C5.238 3 3 5.238 3 8s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5zm3 7l-1 1-2-2-2 2-1-1 2-2.027L5 6l1-1 2 2 2-2 1 1-2 1.973L11 10z" fill="#E51400"/><path fill="#fff" d="M11 6l-1-1-2 2-2-2-1 1 2 1.973L5 10l1 1 2-2 2 2 1-1-2-2.027z"/></svg>
\ No newline at end of file

src/vs/workbench/services/notification/browser/media/notification-info-inverse.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" enable-background="new 0 0 16 16" height="16" width="16"><circle cx="8.5" cy="7.5" r="5.5" fill="#1E1E1E"/><path d="M8.5 3C6.015 3 4 5.015 4 7.5S6.015 12 8.5 12 13 9.985 13 7.5 10.985 3 8.5 3zm.5 8H8V6h1v5zm0-6H8V4h1v1z" fill="#1BA1E2"/><path d="M8 6h1v5H8V6zm0-2v1h1V4H8z" fill="#252526"/></svg>
\ No newline at end of file

src/vs/workbench/services/notification/browser/media/notification-info.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" enable-background="new 0 0 16 16" height="16" width="16"><circle cx="8.5" cy="7.5" r="5.5" fill="#F6F6F6"/><path d="M8.5 3C6.015 3 4 5.015 4 7.5S6.015 12 8.5 12 13 9.985 13 7.5 10.985 3 8.5 3zm.5 8H8V6h1v5zm0-6H8V4h1v1z" fill="#1BA1E2"/><path d="M8 6h1v5H8V6zm0-2v1h1V4H8z" fill="#fff"/></svg>
\ No newline at end of file

src/vs/workbench/services/notification/browser/media/notification-warning-inverse.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16"><path fill="#1E1E1E" d="M7.5 2L2 12l2 2h9l2-2L9.5 2z"/><path d="M9 3H8l-4.5 9 1 1h8l1-1L9 3zm0 9H8v-1h1v1zm0-2H8V6h1v4z" fill="#fc0"/><path d="M9 10H8V6h1v4zm0 1H8v1h1v-1z"/></svg>
\ No newline at end of file

src/vs/workbench/services/notification/browser/media/notification-warning.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" enable-background="new 0 0 16 16" height="16" width="16"><path fill="#F6F6F6" d="M7.5 2L2 12l2 2h9l2-2L9.5 2z"/><path d="M9 3H8l-4.5 9 1 1h8l1-1L9 3zm0 9H8v-1h1v1zm0-2H8V6h1v4z" fill="#fc0"/><path d="M9 10H8V6h1v4zm0 1H8v1h1v-1z"/></svg>
\ No newline at end of file

src/vs/workbench/services/notification/browser/media/notificationList.css

@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.notifications-list-container {
+.monaco-workbench > .notifications-list-container {
 	position: absolute;
 	width: 600px;
 	z-index: 1000;
@@ -12,6 +12,63 @@
 	display: none;
 }
 
-.notifications-list-container.visible {
+.monaco-workbench > .notifications-list-container.visible {
 	display: block;
+}
+
+.monaco-workbench > .notifications-list-container .monaco-list-row {
+	border-left: 3px solid grey; /* TODO make themable */
+	border-right: 3px solid grey;
+	border-bottom: 3px solid grey;
+}
+
+.monaco-workbench > .notifications-list-container .monaco-list-row:first {
+	border-top: 3px solid grey;
+}
+
+/** Notification: Container */
+
+.monaco-workbench > .notifications-list-container .notification-list-item {
+	display: flex;
+}
+
+/** Notification: Icon */
+
+.monaco-workbench > .notifications-list-container .notification-list-item > .notification-list-item-icon {
+	height: 22px;
+	margin-right: 4px;
+	margin-left: 4px;
+	background-position: center;
+	background-repeat: no-repeat;
+	flex: 0 0 16px;
+}
+
+.monaco-workbench > .notifications-list-container .notification-list-item > .notification-list-item-icon.icon-info {
+	background-image: url('notification-info.svg');
+}
+
+.monaco-workbench > .notifications-list-container .notification-list-item > .notification-list-item-icon.icon-warning {
+	background-image: url('notification-warning.svg');
+}
+
+.monaco-workbench > .notifications-list-container .notification-list-item > .notification-list-item-icon.icon-error {
+	background-image: url('notification-error.svg');
+}
+
+.vs-dark .monaco-workbench > .notifications-list-container .notification-list-item > .notification-list-item-icon.icon-info {
+	background-image: url('notification-info-inverse.svg');
+}
+
+.vs-dark .monaco-workbench > .notifications-list-container .notification-list-item > .notification-list-item-icon.icon-warning {
+	background-image: url('notification-warning-inverse.svg');
+}
+
+.vs-dark .monaco-workbench > .notifications-list-container .notification-list-item > .notification-list-item-icon.icon-error {
+	background-image: url('notification-error-inverse.svg');
+}
+
+/** Notification: Message */
+
+.monaco-workbench > .notifications-list-container .notification-list-item > .notification-list-item-message {
+
 }
\ No newline at end of file

src/vs/workbench/services/notification/browser/notificationList.ts

@@ -15,8 +15,8 @@ import { NotificationRenderer, NotificationsDelegate } from 'vs/workbench/servic
 import { IListOptions } from 'vs/base/browser/ui/list/listWidget';
 import { localize } from 'vs/nls';
 import { Themable, NOTIFICATIONS_BACKGROUND, NOTIFICATIONS_FOREGROUND } from 'vs/workbench/common/theme';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
-import { contrastBorder, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
+import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
+import { contrastBorder, widgetShadow, textLinkForeground } from 'vs/platform/theme/common/colorRegistry';
 import { IMarkdownString } from 'vs/base/common/htmlContent';
 
 export class NotificationList extends Themable {
@@ -75,4 +75,11 @@ export class NotificationList extends Themable {
 		this.list.splice(0, 0, [new NotificationViewItem(severity, { value: notification, isTrusted: true } as IMarkdownString)]);
 		this.list.layout();
 	}
-}
\ No newline at end of file
+}
+
+registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
+	const linkColor = theme.getColor(textLinkForeground);
+	if (linkColor) {
+		collector.addRule(`.monaco-workbench > .notifications-list-container .notification-list-item > .notification-list-item-message a { color: ${linkColor}; }`);
+	}
+});

src/vs/workbench/services/notification/browser/notificationViewer.ts

@@ -9,15 +9,16 @@ import 'vs/css!./media/notificationList';
 import { IDelegate, IRenderer } from 'vs/base/browser/ui/list/list';
 import { INotificationViewItem, NotificationViewItem } from 'vs/workbench/services/notification/common/notificationsModel';
 import { renderMarkdown } from 'vs/base/browser/htmlContentRenderer';
-import { clearNode } from 'vs/base/browser/dom';
+import { clearNode, addClass, removeClass } from 'vs/base/browser/dom';
 import { IOpenerService } from 'vs/platform/opener/common/opener';
 import URI from 'vs/base/common/uri';
 import { onUnexpectedError } from 'vs/base/common/errors';
+import { Severity } from 'vs/platform/message/common/message';
 
 export class NotificationsDelegate implements IDelegate<INotificationViewItem> {
 
 	public getHeight(element: INotificationViewItem): number {
-		return 22;
+		return 44;
 	}
 
 	public getTemplateId(element: INotificationViewItem): string {
@@ -31,6 +32,7 @@ export class NotificationsDelegate implements IDelegate<INotificationViewItem> {
 
 export interface INotificationTemplateData {
 	container: HTMLElement;
+	icon: HTMLElement;
 	message: HTMLElement;
 }
 
@@ -38,6 +40,7 @@ export class NotificationRenderer implements IRenderer<INotificationViewItem, IN
 
 	public static readonly ID = 'notification';
 
+	private static readonly SEVERITIES: ('info' | 'warning' | 'error')[] = ['info', 'warning', 'error'];
 	private static readonly MARKED_NOOP = (text?: string) => text || '';
 	private static readonly MARKED_NOOP_TARGETS = [
 		'blockquote', 'br', 'code', 'codespan', 'del', 'em', 'heading', 'hr', 'html',
@@ -59,17 +62,42 @@ export class NotificationRenderer implements IRenderer<INotificationViewItem, IN
 
 		// Container
 		data.container = document.createElement('div');
-		container.appendChild(data.container);
+		addClass(data.container, 'notification-list-item');
+
+		// Icon
+		data.icon = document.createElement('div');
+		addClass(data.icon, 'notification-list-item-icon');
 
 		// Message
-		data.message = document.createElement('span');
-		container.appendChild(data.message);
+		data.message = document.createElement('div');
+		addClass(data.message, 'notification-list-item-message');
+
+		container.appendChild(data.container);
+		data.container.appendChild(data.icon);
+		data.container.appendChild(data.message);
 
 		return data;
 	}
 
+	private toSeverity(severity: 'info' | 'warning' | 'error'): Severity {
+		switch (severity) {
+			case 'info':
+				return Severity.Info;
+			case 'warning':
+				return Severity.Warning;
+			case 'error':
+				return Severity.Error;
+		}
+	}
+
 	public renderElement(element: INotificationViewItem, index: number, data: INotificationTemplateData): void {
 
+		// Icon
+		NotificationRenderer.SEVERITIES.forEach(severity => {
+			const domAction = element.severity === this.toSeverity(severity) ? addClass : removeClass;
+			domAction(data.icon, `icon-${severity}`);
+		});
+
 		// Message (simple markdown with links support)
 		clearNode(data.message);
 		data.message.appendChild(renderMarkdown(element.message, {