Implement new notifications UX

build/lib/i18n.resources.json

@@ -146,6 +146,10 @@
 			"name": "vs/workbench/services/crashReporter",
 			"project": "vscode-workbench"
 		},
+		{
+			"name": "vs/workbench/services/dialogs",
+			"project": "vscode-workbench"
+		},
 		{
 			"name": "vs/workbench/services/editor",
 			"project": "vscode-workbench"
@@ -162,10 +166,6 @@
 			"name": "vs/workbench/services/keybinding",
 			"project": "vscode-workbench"
 		},
-		{
-			"name": "vs/workbench/services/message",
-			"project": "vscode-workbench"
-		},
 		{
 			"name": "vs/workbench/services/mode",
 			"project": "vscode-workbench"

extensions/typescript/src/utils/projectStatus.ts

@@ -33,7 +33,7 @@ class ExcludeHintItem {
 	constructor(
 		private readonly telemetryReporter: TelemetryReporter
 	) {
-		this._item = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, Number.MIN_VALUE);
+		this._item = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 98 /* to the right of typescript version status (99) */);
 		this._item.command = 'js.projectStatus.command';
 	}
 

extensions/typescript/src/utils/versionStatus.ts

@@ -14,7 +14,7 @@ export default class VersionStatus {
 	constructor(
 		private readonly normalizePath: (resource: vscode.Uri) => string | null
 	) {
-		this.versionBarEntry = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, Number.MIN_VALUE);
+		this.versionBarEntry = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 99 /* to the right of editor status (100) */);
 		this.onChangeEditorSub = vscode.window.onDidChangeActiveTextEditor(this.showHideStatus, this);
 	}
 

src/vs/base/browser/htmlContentRenderer.ts

@@ -9,15 +9,17 @@ import * as DOM from 'vs/base/browser/dom';
 import { defaultGenerator } from 'vs/base/common/idGenerator';
 import { escape } from 'vs/base/common/strings';
 import { removeMarkdownEscapes, IMarkdownString } from 'vs/base/common/htmlContent';
-import { marked } from 'vs/base/common/marked/marked';
+import { marked, MarkedRenderer, MarkedOptions } from 'vs/base/common/marked/marked';
 import { IMouseEvent } from 'vs/base/browser/mouseEvent';
+import { assign } from 'vs/base/common/objects';
 
 export interface RenderOptions {
 	className?: string;
 	inline?: boolean;
 	actionCallback?: (content: string, event?: IMouseEvent) => void;
 	codeBlockRenderer?: (modeId: string, value: string) => Thenable<string>;
 	codeBlockRenderCallback?: () => void;
+	joinRendererConfiguration?: (renderer: MarkedRenderer) => MarkedOptions;
 }
 
 function createElement(options: RenderOptions): HTMLElement {
@@ -108,7 +110,7 @@ export function renderMarkdown(markdown: IMarkdownString, options: RenderOptions
 			return text;
 
 		} else {
-			return `<a href="#" data-href="${href}" title="${title || text}">${text}</a>`;
+			return `<a href="#" data-href="${href}" title="${title || href}">${text}</a>`;
 		}
 	};
 	renderer.paragraph = (text): string => {
@@ -156,10 +158,19 @@ export function renderMarkdown(markdown: IMarkdownString, options: RenderOptions
 		});
 	}
 
-	element.innerHTML = marked(markdown.value, {
+	const markedOptions: MarkedOptions = {
 		sanitize: true,
 		renderer
-	});
+	};
+
+	if (options.joinRendererConfiguration) {
+		const additionalMarkedOptions = options.joinRendererConfiguration(renderer);
+		if (additionalMarkedOptions) {
+			assign(markedOptions, additionalMarkedOptions);
+		}
+	}
+
+	element.innerHTML = marked(markdown.value, markedOptions);
 	signalInnerHTML();
 
 	return element;

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

@@ -20,11 +20,4 @@
 .monaco-button.disabled {
 	opacity: 0.4;
 	cursor: default;
-}
-
-/* Theming support */
-
-.vs .monaco-text-button:focus,
-.vs-dark .monaco-text-button:focus {
-	outline-color: rgba(255, 255, 255, .5); /* buttons have a blue color, so focus indication needs to be different */
 }

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

@@ -43,6 +43,8 @@ export class Button {
 	private _onDidClick = new Emitter<any>();
 	readonly onDidClick: Event<any> = this._onDidClick.event;
 
+	private focusTracker: DOM.IFocusTracker;
+
 	constructor(container: Builder, options?: IButtonOptions);
 	constructor(container: HTMLElement, options?: IButtonOptions);
 	constructor(container: any, options?: IButtonOptions) {
@@ -86,20 +88,29 @@ export class Button {
 
 		this.$el.on(DOM.EventType.MOUSE_OVER, (e) => {
 			if (!this.$el.hasClass('disabled')) {
-				const hoverBackground = this.buttonHoverBackground ? this.buttonHoverBackground.toString() : null;
-				if (hoverBackground) {
-					this.$el.style('background-color', hoverBackground);
-				}
+				this.setHoverBackground();
 			}
 		});
 
 		this.$el.on(DOM.EventType.MOUSE_OUT, (e) => {
 			this.applyStyles(); // restore standard styles
 		});
 
+		// Also set hover background when button is focused for feedback
+		this.focusTracker = DOM.trackFocus(this.$el.getHTMLElement());
+		this.focusTracker.onDidFocus(() => this.setHoverBackground());
+		this.focusTracker.onDidBlur(() => this.applyStyles()); // restore standard styles
+
 		this.applyStyles();
 	}
 
+	private setHoverBackground(): void {
+		const hoverBackground = this.buttonHoverBackground ? this.buttonHoverBackground.toString() : null;
+		if (hoverBackground) {
+			this.$el.style('background-color', hoverBackground);
+		}
+	}
+
 	style(styles: IButtonStyles): void {
 		this.buttonForeground = styles.buttonForeground;
 		this.buttonBackground = styles.buttonBackground;
@@ -165,6 +176,9 @@ export class Button {
 		if (this.$el) {
 			this.$el.dispose();
 			this.$el = null;
+
+			this.focusTracker.dispose();
+			this.focusTracker = null;
 		}
 
 		this._onDidClick.dispose();

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

@@ -29,8 +29,4 @@
 
 .dropdown > .dropdown-action, .dropdown > .dropdown-action > .action-label {
 	display: inline-block;
-}
-
-.dropdown > .dropdown-label:not(:empty) {
-	padding: 0 .5em;
 }

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

@@ -9,8 +9,8 @@ import 'vs/css!./dropdown';
 import { Builder, $ } from 'vs/base/browser/builder';
 import { TPromise } from 'vs/base/common/winjs.base';
 import { Gesture, EventType as GestureEventType } from 'vs/base/browser/touch';
-import { ActionRunner, IAction } from 'vs/base/common/actions';
-import { IActionItem } from 'vs/base/browser/ui/actionbar/actionbar';
+import { ActionRunner, IAction, IActionRunner } from 'vs/base/common/actions';
+import { IActionItem, BaseActionItem, IActionItemProvider } from 'vs/base/browser/ui/actionbar/actionbar';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
 import { IMenuOptions } from 'vs/base/browser/ui/menu/menu';
@@ -242,4 +242,83 @@ export class DropdownMenu extends BaseDropdown {
 	public hide(): void {
 		// noop
 	}
+}
+
+export class DropdownMenuActionItem extends BaseActionItem {
+	private menuActionsOrProvider: any;
+	private dropdownMenu: DropdownMenu;
+	private contextMenuProvider: IContextMenuProvider;
+	private actionItemProvider: IActionItemProvider;
+	private keybindings: (action: IAction) => ResolvedKeybinding;
+	private clazz: string;
+
+	constructor(action: IAction, menuActions: IAction[], contextMenuProvider: IContextMenuProvider, actionItemProvider: IActionItemProvider, actionRunner: IActionRunner, keybindings: (action: IAction) => ResolvedKeybinding, clazz: string);
+	constructor(action: IAction, actionProvider: IActionProvider, contextMenuProvider: IContextMenuProvider, actionItemProvider: IActionItemProvider, actionRunner: IActionRunner, keybindings: (action: IAction) => ResolvedKeybinding, clazz: string);
+	constructor(action: IAction, menuActionsOrProvider: any, contextMenuProvider: IContextMenuProvider, actionItemProvider: IActionItemProvider, actionRunner: IActionRunner, keybindings: (action: IAction) => ResolvedKeybinding, clazz: string) {
+		super(null, action);
+
+		this.menuActionsOrProvider = menuActionsOrProvider;
+		this.contextMenuProvider = contextMenuProvider;
+		this.actionItemProvider = actionItemProvider;
+		this.actionRunner = actionRunner;
+		this.keybindings = keybindings;
+		this.clazz = clazz;
+	}
+
+	public render(container: HTMLElement): void {
+		let labelRenderer: ILabelRenderer = (el: HTMLElement): IDisposable => {
+			this.builder = $('a.action-label').attr({
+				tabIndex: '0',
+				role: 'button',
+				'aria-haspopup': 'true',
+				title: this._action.label || '',
+				class: this.clazz
+			});
+
+			this.builder.appendTo(el);
+
+			return null;
+		};
+
+		let options: IDropdownMenuOptions = {
+			contextMenuProvider: this.contextMenuProvider,
+			labelRenderer: labelRenderer
+		};
+
+		// Render the DropdownMenu around a simple action to toggle it
+		if (Array.isArray(this.menuActionsOrProvider)) {
+			options.actions = this.menuActionsOrProvider;
+		} else {
+			options.actionProvider = this.menuActionsOrProvider;
+		}
+
+		this.dropdownMenu = new DropdownMenu(container, options);
+
+		this.dropdownMenu.menuOptions = {
+			actionItemProvider: this.actionItemProvider,
+			actionRunner: this.actionRunner,
+			getKeyBinding: this.keybindings,
+			context: this._context
+		};
+	}
+
+	public setActionContext(newContext: any): void {
+		super.setActionContext(newContext);
+
+		if (this.dropdownMenu) {
+			this.dropdownMenu.menuOptions.context = newContext;
+		}
+	}
+
+	public show(): void {
+		if (this.dropdownMenu) {
+			this.dropdownMenu.show();
+		}
+	}
+
+	public dispose(): void {
+		this.dropdownMenu.dispose();
+
+		super.dispose();
+	}
 }

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

@@ -1019,6 +1019,7 @@ export class List<T> implements ISpliceable<T>, IDisposable {
 
 		if (styles.listFocusBackground) {
 			content.push(`.monaco-list.${this.idPrefix}:focus .monaco-list-row.focused { background-color: ${styles.listFocusBackground}; }`);
+			content.push(`.monaco-list.${this.idPrefix}:focus .monaco-list-row.focused:hover { background-color: ${styles.listFocusBackground}; }`); // overwrite :hover style in this case!
 		}
 
 		if (styles.listFocusForeground) {

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

@@ -45,7 +45,9 @@ export class ProgressBar {
 	private animationStopToken: ValueCallback;
 	private progressBarBackground: Color;
 
-	constructor(builder: Builder, options?: IProgressBarOptions) {
+	constructor(container: Builder, options?: IProgressBarOptions);
+	constructor(container: HTMLElement, options?: IProgressBarOptions);
+	constructor(container: any, options?: IProgressBarOptions) {
 		this.options = options || Object.create(null);
 		mixin(this.options, defaultOpts, false);
 
@@ -54,11 +56,13 @@ export class ProgressBar {
 
 		this.progressBarBackground = this.options.progressBarBackground;
 
-		this.create(builder);
+		this.create(container);
 	}
 
-	private create(parent: Builder): void {
-		parent.div({ 'class': css_progress_container }, (builder) => {
+	private create(container: Builder): void;
+	private create(container: HTMLElement): void;
+	private create(container: any): void {
+		$(container).div({ 'class': css_progress_container }, (builder) => {
 			this.element = builder.clone();
 
 			builder.div({ 'class': css_progress_bit }).on([DOM.EventType.ANIMATION_START, DOM.EventType.ANIMATION_END, DOM.EventType.ANIMATION_ITERATION], (e: Event) => {

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

@@ -3,10 +3,6 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.monaco-toolbar .dropdown > .dropdown-label:not(:empty) {
-	padding: 0;
-}
-
 .monaco-toolbar .toolbar-toggle-more {
 	display: inline-block;
 	padding: 0;