Merge VS Code 1.23.1 (#1520)

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

@@ -6,19 +6,20 @@
 'use strict';
 
 import 'vs/css!./actionbar';
-import nls = require('vs/nls');
-import lifecycle = require('vs/base/common/lifecycle');
+import * as platform from 'vs/base/common/platform';
+import * as nls from 'vs/nls';
+import * as lifecycle from 'vs/base/common/lifecycle';
 import { TPromise } from 'vs/base/common/winjs.base';
 import { Builder, $ } from 'vs/base/browser/builder';
 import { SelectBox } from 'vs/base/browser/ui/selectBox/selectBox';
 import { IAction, IActionRunner, Action, IActionChangeEvent, ActionRunner, IRunEvent } from 'vs/base/common/actions';
-import DOM = require('vs/base/browser/dom');
-import types = require('vs/base/common/types');
+import * as DOM from 'vs/base/browser/dom';
+import * as types from 'vs/base/common/types';
 import { EventType, Gesture } from 'vs/base/browser/touch';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
 import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 
 export interface IActionItem {
 	actionRunner: IActionRunner;
@@ -139,7 +140,7 @@ export class BaseActionItem implements IActionItem {
 			if (this.options && this.options.isMenu) {
 				this.onClick(e);
 			} else {
-				setImmediate(() => this.onClick(e));
+				platform.setImmediate(() => this.onClick(e));
 			}
 		});
 
@@ -386,7 +387,7 @@ export class ActionBar implements IActionRunner {
 	private _onDidRun = new Emitter<IRunEvent>();
 	private _onDidBeforeRun = new Emitter<IRunEvent>();
 
-	constructor(container: HTMLElement | Builder, options: IActionBarOptions = defaultOptions) {
+	constructor(container: HTMLElement, options: IActionBarOptions = defaultOptions) {
 		this.options = options;
 		this._context = options.context;
 		this.toDispose = [];
@@ -496,7 +497,7 @@ export class ActionBar implements IActionRunner {
 
 		this.domNode.appendChild(this.actionsList);
 
-		((container instanceof Builder) ? container.getHTMLElement() : container).appendChild(this.domNode);
+		container.appendChild(this.domNode);
 	}
 
 	public get onDidBlur(): Event<void> {
@@ -553,8 +554,8 @@ export class ActionBar implements IActionRunner {
 		}
 	}
 
-	public getContainer(): Builder {
-		return $(this.domNode);
+	public getContainer(): HTMLElement {
+		return this.domNode;
 	}
 
 	public push(arg: IAction | IAction[], options: IActionOptions = {}): void {
@@ -748,7 +749,7 @@ export class ActionBar implements IActionRunner {
 
 		this.toDispose = lifecycle.dispose(this.toDispose);
 
-		this.getContainer().destroy();
+		$(this.getContainer()).destroy();
 	}
 }
 
@@ -766,8 +767,8 @@ export class SelectActionItem extends BaseActionItem {
 		this.registerListeners();
 	}
 
-	public setOptions(options: string[], selected?: number): void {
-		this.selectBox.setOptions(options, selected);
+	public setOptions(options: string[], selected?: number, disabled?: number): void {
+		this.selectBox.setOptions(options, selected, disabled);
 	}
 
 	public select(index: number): void {

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

@@ -4,6 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 
 .monaco-aria-container {
-	position: absolute; /* try to hide from workbench but not from screen readers */
+	position: absolute; /* try to hide from window but not from screen readers */
 	left:-999em;
 }

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

@@ -6,7 +6,7 @@
 'use strict';
 
 import 'vs/css!./aria';
-import nls = require('vs/nls');
+import * as nls from 'vs/nls';
 import { isMacintosh } from 'vs/base/common/platform';
 import * as dom from 'vs/base/browser/dom';
 

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

@@ -6,14 +6,15 @@
 'use strict';
 
 import 'vs/css!./button';
-import DOM = require('vs/base/browser/dom');
+import * as DOM from 'vs/base/browser/dom';
 import { Builder, $ } from 'vs/base/browser/builder';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import { Color } from 'vs/base/common/color';
 import { mixin } from 'vs/base/common/objects';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event as BaseEvent, Emitter } from 'vs/base/common/event';
 import { dispose, IDisposable } from 'vs/base/common/lifecycle';
+import { Gesture, EventType } from 'vs/base/browser/touch';
 
 export interface IButtonOptions extends IButtonStyles {
 	title?: boolean;
@@ -44,13 +45,11 @@ export class Button {
 	private buttonBorder: Color;
 
 	private _onDidClick = new Emitter<any>();
-	readonly onDidClick: Event<any> = this._onDidClick.event;
+	readonly onDidClick: BaseEvent<Event> = this._onDidClick.event;
 
 	private focusTracker: DOM.IFocusTracker;
 
-	constructor(container: Builder, options?: IButtonOptions);
-	constructor(container: HTMLElement, options?: IButtonOptions);
-	constructor(container: any, options?: IButtonOptions) {
+	constructor(container: HTMLElement, options?: IButtonOptions) {
 		this.options = options || Object.create(null);
 		mixin(this.options, defaultOptions, false);
 
@@ -64,7 +63,9 @@ export class Button {
 			'role': 'button'
 		}).appendTo(container);
 
-		this.$el.on(DOM.EventType.CLICK, e => {
+		Gesture.addTarget(this.$el.getHTMLElement());
+
+		this.$el.on([DOM.EventType.CLICK, EventType.Tap], e => {
 			if (!this.enabled) {
 				DOM.EventHelper.stop(e);
 				return;
@@ -196,9 +197,7 @@ export class ButtonGroup {
 	private _buttons: Button[];
 	private toDispose: IDisposable[];
 
-	constructor(container: Builder, count: number, options?: IButtonOptions);
-	constructor(container: HTMLElement, count: number, options?: IButtonOptions);
-	constructor(container: any, count: number, options?: IButtonOptions) {
+	constructor(container: HTMLElement, count: number, options?: IButtonOptions) {
 		this._buttons = [];
 		this.toDispose = [];
 
@@ -209,9 +208,7 @@ export class ButtonGroup {
 		return this._buttons;
 	}
 
-	private create(container: Builder, count: number, options?: IButtonOptions): void;
-	private create(container: HTMLElement, count: number, options?: IButtonOptions): void;
-	private create(container: any, count: number, options?: IButtonOptions): void {
+	private create(container: HTMLElement, count: number, options?: IButtonOptions): void {
 		for (let index = 0; index < count; index++) {
 			const button = new Button(container, options);
 			this._buttons.push(button);

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

@@ -7,7 +7,7 @@
 
 import 'vs/css!./checkbox';
 
-import DOM = require('vs/base/browser/dom');
+import * as DOM from 'vs/base/browser/dom';
 import * as objects from 'vs/base/common/objects';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import { Widget } from 'vs/base/browser/ui/widget';
@@ -15,11 +15,11 @@ import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { Color } from 'vs/base/common/color';
 
 export interface ICheckboxOpts extends ICheckboxStyles {
-	actionClassName: string;
-	title: string;
-	isChecked: boolean;
-	onChange: (viaKeyboard: boolean) => void;
-	onKeyDown?: (e: IKeyboardEvent) => void;
+	readonly actionClassName: string;
+	readonly title: string;
+	readonly isChecked: boolean;
+	readonly onChange: (viaKeyboard: boolean) => void;
+	readonly onKeyDown?: (e: IKeyboardEvent) => void;
 }
 
 export interface ICheckboxStyles {
@@ -32,8 +32,8 @@ const defaultOpts = {
 
 export class Checkbox extends Widget {
 
-	private _opts: ICheckboxOpts;
-	public domNode: HTMLElement;
+	private readonly _opts: ICheckboxOpts;
+	public readonly domNode: HTMLElement;
 
 	private _checked: boolean;
 

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

@@ -3,12 +3,11 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-
 'use strict';
 
 import 'vs/css!./contextview';
 import { Builder, $ } from 'vs/base/browser/builder';
-import DOM = require('vs/base/browser/dom');
+import * as DOM from 'vs/base/browser/dom';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 
 export interface IAnchor {

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

@@ -13,6 +13,7 @@ import { mixin } from 'vs/base/common/objects';
 
 export interface ICountBadgeOptions extends ICountBadgetyles {
 	count?: number;
+	countFormat?: string;
 	titleFormat?: string;
 }
 
@@ -31,6 +32,7 @@ export class CountBadge {
 
 	private element: HTMLElement;
 	private count: number;
+	private countFormat: string;
 	private titleFormat: string;
 
 	private badgeBackground: Color;
@@ -48,6 +50,7 @@ export class CountBadge {
 		this.badgeBorder = this.options.badgeBorder;
 
 		this.element = append(container, $('.monaco-count-badge'));
+		this.countFormat = this.options.countFormat || '{0}';
 		this.titleFormat = this.options.titleFormat || '';
 		this.setCount(this.options.count || 0);
 	}
@@ -57,13 +60,18 @@ export class CountBadge {
 		this.render();
 	}
 
+	setCountFormat(countFormat: string) {
+		this.countFormat = countFormat;
+		this.render();
+	}
+
 	setTitleFormat(titleFormat: string) {
 		this.titleFormat = titleFormat;
 		this.render();
 	}
 
 	private render() {
-		this.element.textContent = '' + this.count;
+		this.element.textContent = format(this.countFormat, this.count);
 		this.element.title = format(this.titleFormat, this.count);
 
 		this.applyStyles();

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

@@ -3,30 +3,29 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.dropdown {
+.monaco-dropdown {
 	height: 100%;
-}
-
-.dropdown, .dropdown-group {
 	display: inline-block;
 	padding: 0;
 }
 
-.dropdown > .dropdown-label, .dropdown > .dropdown-action {
+.monaco-dropdown > .dropdown-label,
+.monaco-dropdown > .dropdown-action {
 	display: inline-block;
 	cursor: pointer;
 	height: 100%;
 }
 
-.dropdown > .dropdown-action {
+.monaco-dropdown > .dropdown-action {
 	vertical-align: top;
 }
 
-.dropdown > .dropdown-action > .action-label:hover {
+.monaco-dropdown > .dropdown-action > .action-label:hover {
 	color: inherit;
 	text-decoration: none;
 }
 
-.dropdown > .dropdown-action, .dropdown > .dropdown-action > .action-label {
+.monaco-dropdown > .dropdown-action,
+.monaco-dropdown > .dropdown-action > .action-label {
 	display: inline-block;
 }

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

@@ -12,10 +12,10 @@ import { Gesture, EventType as GestureEventType } from 'vs/base/browser/touch';
 import { ActionRunner, IAction, IActionRunner } from 'vs/base/common/actions';
 import { 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 { IContextViewProvider, IAnchor } from 'vs/base/browser/ui/contextview/contextview';
 import { IMenuOptions } from 'vs/base/browser/ui/menu/menu';
 import { ResolvedKeybinding } from 'vs/base/common/keyCodes';
-import { EventHelper, EventType } from 'vs/base/browser/dom';
+import { EventHelper, EventType, removeClass, addClass } from 'vs/base/browser/dom';
 import { IContextMenuDelegate } from 'vs/base/browser/contextmenu';
 
 export interface ILabelRenderer {
@@ -33,13 +33,14 @@ export class BaseDropdown extends ActionRunner {
 	private $boxContainer: Builder;
 	private $label: Builder;
 	private $contents: Builder;
+	private visible: boolean;
 
 	constructor(container: HTMLElement, options: IBaseDropdownOptions) {
 		super();
 
 		this._toDispose = [];
 
-		this.$el = $('.dropdown').appendTo(container);
+		this.$el = $('.monaco-dropdown').appendTo(container);
 
 		this.$label = $('.dropdown-label');
 
@@ -58,7 +59,11 @@ export class BaseDropdown extends ActionRunner {
 				return; // prevent multiple clicks to open multiple context menus (https://github.com/Microsoft/vscode/issues/41363)
 			}
 
-			this.show();
+			if (this.visible) {
+				this.hide();
+			} else {
+				this.show();
+			}
 		}).appendTo(this.$el);
 
 		let cleanupFn = labelRenderer(this.$label.getHTMLElement());
@@ -74,12 +79,12 @@ export class BaseDropdown extends ActionRunner {
 		return this._toDispose;
 	}
 
-	public get element(): Builder {
-		return this.$el;
+	public get element(): HTMLElement {
+		return this.$el.getHTMLElement();
 	}
 
-	public get label(): Builder {
-		return this.$label;
+	public get label(): HTMLElement {
+		return this.$label.getHTMLElement();
 	}
 
 	public set tooltip(tooltip: string) {
@@ -87,11 +92,11 @@ export class BaseDropdown extends ActionRunner {
 	}
 
 	public show(): void {
-		// noop
+		this.visible = true;
 	}
 
 	public hide(): void {
-		// noop
+		this.visible = false;
 	}
 
 	protected onEvent(e: Event, activeElement: HTMLElement): void {
@@ -135,10 +140,12 @@ export class Dropdown extends BaseDropdown {
 	}
 
 	public show(): void {
-		this.element.addClass('active');
+		super.show();
+
+		addClass(this.element, 'active');
 
 		this.contextViewProvider.showContextView({
-			getAnchor: () => this.element.getHTMLElement(),
+			getAnchor: () => this.getAnchor(),
 
 			render: (container) => {
 				return this.renderContents(container);
@@ -148,13 +155,21 @@ export class Dropdown extends BaseDropdown {
 				this.onEvent(e, activeElement);
 			},
 
-			onHide: () => {
-				this.element.removeClass('active');
-			}
+			onHide: () => this.onHide()
 		});
 	}
 
+	protected getAnchor(): HTMLElement | IAnchor {
+		return this.element;
+	}
+
+	protected onHide(): void {
+		removeClass(this.element, 'active');
+	}
+
 	public hide(): void {
+		super.hide();
+
 		if (this.contextViewProvider) {
 			this.contextViewProvider.hideContextView();
 		}
@@ -217,22 +232,24 @@ export class DropdownMenu extends BaseDropdown {
 	}
 
 	public show(): void {
-		this.element.addClass('active');
+		super.show();
+
+		addClass(this.element, 'active');
 
 		this._contextMenuProvider.showContextMenu({
-			getAnchor: () => this.element.getHTMLElement(),
+			getAnchor: () => this.element,
 			getActions: () => TPromise.as(this.actions),
 			getActionsContext: () => this.menuOptions ? this.menuOptions.context : null,
 			getActionItem: (action) => this.menuOptions && this.menuOptions.actionItemProvider ? this.menuOptions.actionItemProvider(action) : null,
 			getKeyBinding: (action: IAction) => this.menuOptions && this.menuOptions.getKeyBinding ? this.menuOptions.getKeyBinding(action) : null,
 			getMenuClassName: () => this.menuClassName,
-			onHide: () => this.element.removeClass('active'),
+			onHide: () => removeClass(this.element, 'active'),
 			actionRunner: this.menuOptions ? this.menuOptions.actionRunner : null
 		});
 	}
 
 	public hide(): void {
-		// noop
+		super.hide();
 	}
 }
 

src/vs/base/browser/ui/findinput/findInput.css

@@ -14,14 +14,6 @@
 	height: 25px;
 }
 
-.fl:after {
-	clear: both;
-	content: '';
-	display: block;
-	visibility: hidden;
-	height: 0;
-}
-
 .monaco-findInput > .controls {
 	position: absolute;
 	top: 3px;

src/vs/base/browser/ui/findinput/findInput.ts

@@ -11,7 +11,7 @@ import * as dom from 'vs/base/browser/dom';
 import { IMessage as InputBoxMessage, IInputValidator, InputBox, IInputBoxStyles } from 'vs/base/browser/ui/inputbox/inputBox';
 import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
 import { Widget } from 'vs/base/browser/ui/widget';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { IMouseEvent } from 'vs/base/browser/mouseEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
@@ -20,14 +20,14 @@ import { Color } from 'vs/base/common/color';
 import { ICheckboxStyles } from 'vs/base/browser/ui/checkbox/checkbox';
 
 export interface IFindInputOptions extends IFindInputStyles {
-	placeholder?: string;
-	width?: number;
-	validation?: IInputValidator;
-	label: string;
+	readonly placeholder?: string;
+	readonly width?: number;
+	readonly validation?: IInputValidator;
+	readonly label: string;
 
-	appendCaseSensitiveLabel?: string;
-	appendWholeWordsLabel?: string;
-	appendRegexLabel?: string;
+	readonly appendCaseSensitiveLabel?: string;
+	readonly appendWholeWordsLabel?: string;
+	readonly appendRegexLabel?: string;
 }
 
 export interface IFindInputStyles extends IInputBoxStyles {
@@ -38,7 +38,7 @@ const NLS_DEFAULT_LABEL = nls.localize('defaultLabel', "input");
 
 export class FindInput extends Widget {
 
-	static OPTION_CHANGE: string = 'optionChange';
+	static readonly OPTION_CHANGE: string = 'optionChange';
 
 	private contextViewProvider: IContextViewProvider;
 	private width: number;
@@ -64,23 +64,23 @@ export class FindInput extends Widget {
 	public domNode: HTMLElement;
 	public inputBox: InputBox;
 
-	private _onDidOptionChange = this._register(new Emitter<boolean>());
-	public onDidOptionChange: Event<boolean /* via keyboard */> = this._onDidOptionChange.event;
+	private readonly _onDidOptionChange = this._register(new Emitter<boolean>());
+	public readonly onDidOptionChange: Event<boolean /* via keyboard */> = this._onDidOptionChange.event;
 
-	private _onKeyDown = this._register(new Emitter<IKeyboardEvent>());
-	public onKeyDown: Event<IKeyboardEvent> = this._onKeyDown.event;
+	private readonly _onKeyDown = this._register(new Emitter<IKeyboardEvent>());
+	public readonly onKeyDown: Event<IKeyboardEvent> = this._onKeyDown.event;
 
-	private _onMouseDown = this._register(new Emitter<IMouseEvent>());
-	public onMouseDown: Event<IMouseEvent> = this._onMouseDown.event;
+	private readonly _onMouseDown = this._register(new Emitter<IMouseEvent>());
+	public readonly onMouseDown: Event<IMouseEvent> = this._onMouseDown.event;
 
-	private _onInput = this._register(new Emitter<void>());
-	public onInput: Event<void> = this._onInput.event;
+	private readonly _onInput = this._register(new Emitter<void>());
+	public readonly onInput: Event<void> = this._onInput.event;
 
-	private _onKeyUp = this._register(new Emitter<IKeyboardEvent>());
-	public onKeyUp: Event<IKeyboardEvent> = this._onKeyUp.event;
+	private readonly _onKeyUp = this._register(new Emitter<IKeyboardEvent>());
+	public readonly onKeyUp: Event<IKeyboardEvent> = this._onKeyUp.event;
 
 	private _onCaseSensitiveKeyDown = this._register(new Emitter<IKeyboardEvent>());
-	public onCaseSensitiveKeyDown: Event<IKeyboardEvent> = this._onCaseSensitiveKeyDown.event;
+	public readonly onCaseSensitiveKeyDown: Event<IKeyboardEvent> = this._onCaseSensitiveKeyDown.event;
 
 	constructor(parent: HTMLElement, contextViewProvider: IContextViewProvider, options?: IFindInputOptions) {
 		super();

src/vs/base/browser/ui/findinput/findInputCheckboxes.ts

@@ -12,11 +12,11 @@ import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { Color } from 'vs/base/common/color';
 
 export interface IFindInputCheckboxOpts {
-	appendTitle: string;
-	isChecked: boolean;
-	onChange: (viaKeyboard: boolean) => void;
-	onKeyDown?: (e: IKeyboardEvent) => void;
-	inputActiveOptionBorder?: Color;
+	readonly appendTitle: string;
+	readonly isChecked: boolean;
+	readonly onChange: (viaKeyboard: boolean) => void;
+	readonly onKeyDown?: (e: IKeyboardEvent) => void;
+	readonly inputActiveOptionBorder?: Color;
 }
 
 const NLS_CASE_SENSITIVE_CHECKBOX_LABEL = nls.localize('caseDescription', "Match Case");

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

@@ -7,7 +7,7 @@
 import { IDisposable } from 'vs/base/common/lifecycle';
 import * as dom from 'vs/base/browser/dom';
 import * as objects from 'vs/base/common/objects';
-import { render as renderOcticons } from 'vs/base/browser/ui/octiconLabel/octiconLabel';
+import { renderOcticons } from 'vs/base/browser/ui/octiconLabel/octiconLabel';
 
 export interface IHighlight {
 	start: number;

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

@@ -6,11 +6,11 @@
 'use strict';
 
 import 'vs/css!./iconlabel';
-import dom = require('vs/base/browser/dom');
+import * as dom from 'vs/base/browser/dom';
 import { HighlightedLabel } from 'vs/base/browser/ui/highlightedlabel/highlightedLabel';
 import { IMatch } from 'vs/base/common/filters';
 import uri from 'vs/base/common/uri';
-import paths = require('vs/base/common/paths');
+import * as paths from 'vs/base/common/paths';
 import { IWorkspaceFolderProvider, getPathLabel, IUserHomeProvider, getBaseLabel } from 'vs/base/common/labels';
 import { IDisposable, combinedDisposable } from 'vs/base/common/lifecycle';
 

src/vs/base/browser/ui/inputbox/inputBox.ts

@@ -6,15 +6,15 @@
 
 import 'vs/css!./inputBox';
 
-import nls = require('vs/nls');
+import * as nls from 'vs/nls';
 import * as Bal from 'vs/base/browser/browser';
 import * as dom from 'vs/base/browser/dom';
 import { RenderOptions, renderFormattedText, renderText } from 'vs/base/browser/htmlContentRenderer';
-import aria = require('vs/base/browser/ui/aria/aria');
+import * as aria from 'vs/base/browser/ui/aria/aria';
 import { IAction } from 'vs/base/common/actions';
 import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
 import { IContextViewProvider, AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { Widget } from 'vs/base/browser/ui/widget';
 import { Color } from 'vs/base/common/color';
 import { mixin } from 'vs/base/common/objects';
@@ -112,10 +112,10 @@ export class InputBox extends Widget {
 	private inputValidationErrorBackground: Color;
 
 	private _onDidChange = this._register(new Emitter<string>());
-	public onDidChange: Event<string> = this._onDidChange.event;
+	public readonly onDidChange: Event<string> = this._onDidChange.event;
 
 	private _onDidHeightChange = this._register(new Emitter<number>());
-	public onDidHeightChange: Event<number> = this._onDidHeightChange.event;
+	public readonly onDidHeightChange: Event<number> = this._onDidHeightChange.event;
 
 	constructor(container: HTMLElement, contextViewProvider: IContextViewProvider, options?: IInputOptions) {
 		super();
@@ -351,30 +351,27 @@ export class InputBox extends Widget {
 	}
 
 	public validate(): boolean {
-		let result: IMessage = null;
+		let errorMsg: IMessage = null;
 
 		if (this.validation) {
-			result = this.validation(this.value);
+			errorMsg = this.validation(this.value);
 
 			// {{SQL CARBON EDIT}}
-			if (!result && this.options.useDefaultValidation && this.inputElement.validationMessage) {
-				result = {
+			if (!errorMsg && this.options.useDefaultValidation && this.inputElement.validationMessage) {
+				errorMsg = {
 					content: this.inputElement.validationMessage,
 					type: MessageType.ERROR
 				};
 			}
 
-			if (!result) {
+			if (!errorMsg) {
 				this.inputElement.removeAttribute('aria-invalid');
 				this.hideMessage();
-			} else {
-				this.inputElement.setAttribute('aria-invalid', 'true');
-				this.showMessage(result);
 			}
 		}
 
 		// {{SQL CARBON EDIT}} Canidate for addition to vscode
-		return result ? result.type !== MessageType.ERROR : true;
+		return errorMsg ? errorMsg.type !== MessageType.ERROR : true;
 	}
 
 	private stylesForType(type: MessageType): { border: Color; background: Color } {

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

@@ -9,7 +9,7 @@ import { range } from 'vs/base/common/arrays';
 import { IDelegate, IRenderer, IListEvent, IListOpenEvent } from './list';
 import { List, IListStyles, IListOptions } from './listWidget';
 import { IPagedModel } from 'vs/base/common/paging';
-import Event, { mapEvent } from 'vs/base/common/event';
+import { Event, mapEvent } from 'vs/base/common/event';
 
 export interface IPagedRenderer<TElement, TTemplateData> extends IRenderer<TElement, TTemplateData> {
 	renderPlaceholder(index: number, templateData: TTemplateData): void;
@@ -58,7 +58,7 @@ class PagedRenderer<TElement, TTemplateData> implements IRenderer<number, ITempl
 	}
 }
 
-export class PagedList<T> {
+export class PagedList<T> implements IDisposable {
 
 	private list: List<number>;
 	private _model: IPagedModel<T>;
@@ -81,6 +81,10 @@ export class PagedList<T> {
 		return this.list.getHTMLElement() === document.activeElement;
 	}
 
+	domFocus(): void {
+		this.list.domFocus();
+	}
+
 	get onDidFocus(): Event<void> {
 		return this.list.onDidFocus;
 	}
@@ -93,6 +97,10 @@ export class PagedList<T> {
 		return this.list;
 	}
 
+	get onDidDispose(): Event<void> {
+		return this.list.onDidDispose;
+	}
+
 	get onFocusChange(): Event<IListEvent<T>> {
 		return mapEvent(this.list.onFocusChange, ({ elements, indexes }) => ({ elements: elements.map(e => this._model.get(e)), indexes }));
 	}
@@ -185,4 +193,8 @@ export class PagedList<T> {
 	style(styles: IListStyles): void {
 		this.list.style(styles);
 	}
-}
+
+	dispose(): void {
+		this.list.dispose();
+	}
+}

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

@@ -7,7 +7,7 @@ import { getOrDefault } from 'vs/base/common/objects';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { Gesture, EventType as TouchEventType, GestureEvent } from 'vs/base/browser/touch';
 import * as DOM from 'vs/base/browser/dom';
-import Event, { mapEvent, filterEvent } from 'vs/base/common/event';
+import { Event, mapEvent, filterEvent } from 'vs/base/common/event';
 import { domEvent } from 'vs/base/browser/event';
 import { ScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
 import { ScrollEvent, ScrollbarVisibility } from 'vs/base/common/scrollable';
@@ -360,19 +360,22 @@ export class ListView<T> implements ISpliceable<T>, IDisposable {
 
 	private toMouseEvent(browserEvent: MouseEvent): IListMouseEvent<T> {
 		const index = this.getItemIndexFromEventTarget(browserEvent.target);
-		const element = index < 0 ? undefined : this.items[index].element;
+		const item = index < 0 ? undefined : this.items[index];
+		const element = item && item.element;
 		return { browserEvent, index, element };
 	}
 
 	private toTouchEvent(browserEvent: TouchEvent): IListTouchEvent<T> {
 		const index = this.getItemIndexFromEventTarget(browserEvent.target);
-		const element = index < 0 ? undefined : this.items[index].element;
+		const item = index < 0 ? undefined : this.items[index];
+		const element = item && item.element;
 		return { browserEvent, index, element };
 	}
 
 	private toGestureEvent(browserEvent: GestureEvent): IListGestureEvent<T> {
 		const index = this.getItemIndexFromEventTarget(browserEvent.initialTarget);
-		const element = index < 0 ? undefined : this.items[index].element;
+		const item = index < 0 ? undefined : this.items[index];
+		const element = item && item.element;
 		return { browserEvent, index, element };
 	}
 

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

@@ -13,7 +13,7 @@ import * as platform from 'vs/base/common/platform';
 import { Gesture } from 'vs/base/browser/touch';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
-import Event, { Emitter, EventBufferer, chain, mapEvent, anyEvent } from 'vs/base/common/event';
+import { Event, Emitter, EventBufferer, chain, mapEvent, anyEvent } from 'vs/base/common/event';
 import { domEvent } from 'vs/base/browser/event';
 import { IDelegate, IRenderer, IListEvent, IListContextMenuEvent, IListMouseEvent, IListTouchEvent, IListGestureEvent, IListOpenEvent } from './list';
 import { ListView, IListViewOptions } from './listView';
@@ -142,7 +142,7 @@ class Trait<T> implements ISpliceable<boolean>, IDisposable {
 		const end = start + deleteCount;
 		const indexes = [
 			...this.indexes.filter(i => i < start),
-			...elements.reduce((r, hasTrait, i) => hasTrait ? [...r, i + start] : r, []),
+			...elements.map((hasTrait, i) => hasTrait ? i + start : -1).filter(i => i !== -1),
 			...this.indexes.filter(i => i >= end).map(i => i + diff)
 		];
 
@@ -388,7 +388,7 @@ const DefaultMultipleSelectionContoller = {
 	isSelectionRangeChangeEvent
 };
 
-const DefaultOpenController = {
+const DefaultOpenController: IOpenController = {
 	shouldOpen: (event: UIEvent) => {
 		if (event instanceof MouseEvent) {
 			return !isMouseRightClick(event);
@@ -396,7 +396,7 @@ const DefaultOpenController = {
 
 		return true;
 	}
-} as IOpenController;
+};
 
 class MouseController<T> implements IDisposable {
 
@@ -580,6 +580,89 @@ export interface IOpenController {
 	shouldOpen(event: UIEvent): boolean;
 }
 
+export interface IStyleController {
+	style(styles: IListStyles): void;
+}
+
+export class DefaultStyleController implements IStyleController {
+
+	constructor(private styleElement: HTMLStyleElement, private selectorSuffix?: string) { }
+
+	style(styles: IListStyles): void {
+		const suffix = this.selectorSuffix ? `.${this.selectorSuffix}` : '';
+		const content: string[] = [];
+
+		if (styles.listFocusBackground) {
+			content.push(`.monaco-list${suffix}:focus .monaco-list-row.focused { background-color: ${styles.listFocusBackground}; }`);
+			content.push(`.monaco-list${suffix}:focus .monaco-list-row.focused:hover { background-color: ${styles.listFocusBackground}; }`); // overwrite :hover style in this case!
+		}
+
+		if (styles.listFocusForeground) {
+			content.push(`.monaco-list${suffix}:focus .monaco-list-row.focused { color: ${styles.listFocusForeground}; }`);
+		}
+
+		if (styles.listActiveSelectionBackground) {
+			content.push(`.monaco-list${suffix}:focus .monaco-list-row.selected { background-color: ${styles.listActiveSelectionBackground}; }`);
+			content.push(`.monaco-list${suffix}:focus .monaco-list-row.selected:hover { background-color: ${styles.listActiveSelectionBackground}; }`); // overwrite :hover style in this case!
+		}
+
+		if (styles.listActiveSelectionForeground) {
+			content.push(`.monaco-list${suffix}:focus .monaco-list-row.selected { color: ${styles.listActiveSelectionForeground}; }`);
+		}
+
+		if (styles.listFocusAndSelectionBackground) {
+			content.push(`.monaco-list${suffix}:focus .monaco-list-row.selected.focused { background-color: ${styles.listFocusAndSelectionBackground}; }`);
+		}
+
+		if (styles.listFocusAndSelectionForeground) {
+			content.push(`.monaco-list${suffix}:focus .monaco-list-row.selected.focused { color: ${styles.listFocusAndSelectionForeground}; }`);
+		}
+
+		if (styles.listInactiveFocusBackground) {
+			content.push(`.monaco-list${suffix} .monaco-list-row.focused { background-color:  ${styles.listInactiveFocusBackground}; }`);
+			content.push(`.monaco-list${suffix} .monaco-list-row.focused:hover { background-color:  ${styles.listInactiveFocusBackground}; }`); // overwrite :hover style in this case!
+		}
+
+		if (styles.listInactiveSelectionBackground) {
+			content.push(`.monaco-list${suffix} .monaco-list-row.selected { background-color:  ${styles.listInactiveSelectionBackground}; }`);
+			content.push(`.monaco-list${suffix} .monaco-list-row.selected:hover { background-color:  ${styles.listInactiveSelectionBackground}; }`); // overwrite :hover style in this case!
+		}
+
+		if (styles.listInactiveSelectionForeground) {
+			content.push(`.monaco-list${suffix} .monaco-list-row.selected { color: ${styles.listInactiveSelectionForeground}; }`);
+		}
+
+		if (styles.listHoverBackground) {
+			content.push(`.monaco-list${suffix} .monaco-list-row:hover { background-color:  ${styles.listHoverBackground}; }`);
+		}
+
+		if (styles.listHoverForeground) {
+			content.push(`.monaco-list${suffix} .monaco-list-row:hover { color:  ${styles.listHoverForeground}; }`);
+		}
+
+		if (styles.listSelectionOutline) {
+			content.push(`.monaco-list${suffix} .monaco-list-row.selected { outline: 1px dotted ${styles.listSelectionOutline}; outline-offset: -1px; }`);
+		}
+
+		if (styles.listFocusOutline) {
+			content.push(`.monaco-list${suffix}:focus .monaco-list-row.focused { outline: 1px solid ${styles.listFocusOutline}; outline-offset: -1px; }`);
+		}
+
+		if (styles.listInactiveFocusOutline) {
+			content.push(`.monaco-list${suffix} .monaco-list-row.focused { outline: 1px dotted ${styles.listInactiveFocusOutline}; outline-offset: -1px; }`);
+		}
+
+		if (styles.listHoverOutline) {
+			content.push(`.monaco-list${suffix} .monaco-list-row:hover { outline: 1px dashed ${styles.listHoverOutline}; outline-offset: -1px; }`);
+		}
+
+		const newStyles = content.join('\n');
+		if (newStyles !== this.styleElement.innerHTML) {
+			this.styleElement.innerHTML = newStyles;
+		}
+	}
+}
+
 export interface IListOptions<T> extends IListViewOptions, IListStyles {
 	identityProvider?: IIdentityProvider<T>;
 	ariaLabel?: string;
@@ -591,6 +674,7 @@ export interface IListOptions<T> extends IListViewOptions, IListStyles {
 	multipleSelectionSupport?: boolean;
 	multipleSelectionController?: IMultipleSelectionController<T>;
 	openController?: IOpenController;
+	styleController?: IStyleController;
 }
 
 export interface IListStyles {
@@ -737,7 +821,7 @@ class PipelineRenderer<T> implements IRenderer<T, any> {
 		let i = 0;
 
 		for (const renderer of this.renderers) {
-			renderer.disposeTemplate(templateData[i]);
+			renderer.disposeTemplate(templateData[i++]);
 		}
 	}
 }
@@ -754,6 +838,7 @@ export class List<T> implements ISpliceable<T>, IDisposable {
 	private spliceable: ISpliceable<T>;
 	protected disposables: IDisposable[];
 	private styleElement: HTMLStyleElement;
+	private styleController: IStyleController;
 	private mouseController: MouseController<T>;
 
 	@memoize get onFocusChange(): Event<IListEvent<T>> {
@@ -767,9 +852,7 @@ export class List<T> implements ISpliceable<T>, IDisposable {
 	readonly onContextMenu: Event<IListContextMenuEvent<T>> = Event.None;
 
 	private _onOpen = new Emitter<IListOpenEvent<T>>();
-	@memoize get onOpen(): Event<IListOpenEvent<T>> {
-		return this._onOpen.event;
-	}
+	readonly onOpen: Event<IListOpenEvent<T>> = this._onOpen.event;
 
 	private _onPin = new Emitter<number[]>();
 	@memoize get onPin(): Event<IListEvent<T>> {
@@ -816,6 +899,11 @@ export class List<T> implements ISpliceable<T>, IDisposable {
 
 		this.styleElement = DOM.createStyleSheet(this.view.domNode);
 
+		this.styleController = options.styleController;
+		if (!this.styleController) {
+			this.styleController = new DefaultStyleController(this.styleElement, this.idPrefix);
+		}
+
 		this.spliceable = new CombinedSpliceable([
 			new TraitSpliceable(this.focus, this.view, options.identityProvider),
 			new TraitSpliceable(this.selection, this.view, options.identityProvider),
@@ -1087,73 +1175,7 @@ export class List<T> implements ISpliceable<T>, IDisposable {
 	}
 
 	style(styles: IListStyles): void {
-		const content: string[] = [];
-
-		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) {
-			content.push(`.monaco-list.${this.idPrefix}:focus .monaco-list-row.focused { color: ${styles.listFocusForeground}; }`);
-		}
-
-		if (styles.listActiveSelectionBackground) {
-			content.push(`.monaco-list.${this.idPrefix}:focus .monaco-list-row.selected { background-color: ${styles.listActiveSelectionBackground}; }`);
-			content.push(`.monaco-list.${this.idPrefix}:focus .monaco-list-row.selected:hover { background-color: ${styles.listActiveSelectionBackground}; }`); // overwrite :hover style in this case!
-		}
-
-		if (styles.listActiveSelectionForeground) {
-			content.push(`.monaco-list.${this.idPrefix}:focus .monaco-list-row.selected { color: ${styles.listActiveSelectionForeground}; }`);
-		}
-
-		if (styles.listFocusAndSelectionBackground) {
-			content.push(`.monaco-list.${this.idPrefix}:focus .monaco-list-row.selected.focused { background-color: ${styles.listFocusAndSelectionBackground}; }`);
-		}
-
-		if (styles.listFocusAndSelectionForeground) {
-			content.push(`.monaco-list.${this.idPrefix}:focus .monaco-list-row.selected.focused { color: ${styles.listFocusAndSelectionForeground}; }`);
-		}
-
-		if (styles.listInactiveFocusBackground) {
-			content.push(`.monaco-list.${this.idPrefix} .monaco-list-row.focused { background-color:  ${styles.listInactiveFocusBackground}; }`);
-			content.push(`.monaco-list.${this.idPrefix} .monaco-list-row.focused:hover { background-color:  ${styles.listInactiveFocusBackground}; }`); // overwrite :hover style in this case!
-		}
-
-		if (styles.listInactiveSelectionBackground) {
-			content.push(`.monaco-list.${this.idPrefix} .monaco-list-row.selected { background-color:  ${styles.listInactiveSelectionBackground}; }`);
-			content.push(`.monaco-list.${this.idPrefix} .monaco-list-row.selected:hover { background-color:  ${styles.listInactiveSelectionBackground}; }`); // overwrite :hover style in this case!
-		}
-
-		if (styles.listInactiveSelectionForeground) {
-			content.push(`.monaco-list.${this.idPrefix} .monaco-list-row.selected { color: ${styles.listInactiveSelectionForeground}; }`);
-		}
-
-		if (styles.listHoverBackground) {
-			content.push(`.monaco-list.${this.idPrefix} .monaco-list-row:hover { background-color:  ${styles.listHoverBackground}; }`);
-		}
-
-		if (styles.listHoverForeground) {
-			content.push(`.monaco-list.${this.idPrefix} .monaco-list-row:hover { color:  ${styles.listHoverForeground}; }`);
-		}
-
-		if (styles.listSelectionOutline) {
-			content.push(`.monaco-list.${this.idPrefix} .monaco-list-row.selected { outline: 1px dotted ${styles.listSelectionOutline}; outline-offset: -1px; }`);
-		}
-
-		if (styles.listFocusOutline) {
-			content.push(`.monaco-list.${this.idPrefix}:focus .monaco-list-row.focused { outline: 1px solid ${styles.listFocusOutline}; outline-offset: -1px; }`);
-		}
-
-		if (styles.listInactiveFocusOutline) {
-			content.push(`.monaco-list.${this.idPrefix} .monaco-list-row.focused { outline: 1px dotted ${styles.listInactiveFocusOutline}; outline-offset: -1px; }`);
-		}
-
-		if (styles.listHoverOutline) {
-			content.push(`.monaco-list.${this.idPrefix} .monaco-list-row:hover { outline: 1px dashed ${styles.listHoverOutline}; outline-offset: -1px; }`);
-		}
-
-		this.styleElement.innerHTML = content.join('\n');
+		this.styleController.style(styles);
 	}
 
 	private toListEvent({ indexes }: ITraitChangeEvent) {

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

@@ -7,11 +7,11 @@
 
 import 'vs/css!./menu';
 import { IDisposable } from 'vs/base/common/lifecycle';
-import { $ } from 'vs/base/browser/builder';
 import { IActionRunner, IAction } from 'vs/base/common/actions';
 import { ActionBar, IActionItemProvider, ActionsOrientation } from 'vs/base/browser/ui/actionbar/actionbar';
 import { ResolvedKeybinding } from 'vs/base/common/keyCodes';
-import Event from 'vs/base/common/event';
+import { Event } from 'vs/base/common/event';
+import { addClass } from 'vs/base/browser/dom';
 
 export interface IMenuOptions {
 	context?: any;
@@ -26,11 +26,13 @@ export class Menu {
 	private listener: IDisposable;
 
 	constructor(container: HTMLElement, actions: IAction[], options: IMenuOptions = {}) {
-		$(container).addClass('monaco-menu-container');
+		addClass(container, 'monaco-menu-container');
 
-		let $menu = $('.monaco-menu').appendTo(container);
+		let menuContainer = document.createElement('div');
+		addClass(menuContainer, 'monaco-menu');
+		container.appendChild(menuContainer);
 
-		this.actionBar = new ActionBar($menu, {
+		this.actionBar = new ActionBar(menuContainer, {
 			orientation: ActionsOrientation.VERTICAL,
 			actionItemProvider: options.actionItemProvider,
 			context: options.context,

src/vs/base/browser/ui/octiconLabel/octiconLabel.mock.ts

@@ -2,14 +2,14 @@
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
-import octiconLabel = require('vs/base/browser/ui/octiconLabel/octiconLabel');
+
 import { escape } from 'vs/base/common/strings';
 
-function render(text: string): string {
+export function renderOcticons(text: string): string {
 	return escape(text);
 }
 
-class MockOcticonLabel {
+export class OcticonLabel {
 
 	private _container: HTMLElement;
 
@@ -18,13 +18,7 @@ class MockOcticonLabel {
 	}
 
 	set text(text: string) {
-		this._container.innerHTML = render(text || '');
+		this._container.innerHTML = renderOcticons(text || '');
 	}
 
 }
-
-var mock: typeof octiconLabel = {
-	render: render,
-	OcticonLabel: <any>MockOcticonLabel
-};
-export = mock;

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

@@ -14,20 +14,20 @@ function expand(text: string): string {
 	});
 }
 
-export function render(label: string): string {
+export function renderOcticons(label: string): string {
 	return expand(escape(label));
 }
 
 export class OcticonLabel {
 
-	private _container: HTMLElement;
+	private readonly _container: HTMLElement;
 
 	constructor(container: HTMLElement) {
 		this._container = container;
 	}
 
 	set text(text: string) {
-		this._container.innerHTML = render(text || '');
+		this._container.innerHTML = renderOcticons(text || '');
 	}
 
 	set title(title: string) {

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

@@ -2,12 +2,14 @@
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
-.progress-container {
+
+.monaco-progress-container {
 	width: 100%;
 	height: 5px;
+	overflow: hidden; /* keep progress bit in bounds */
 }
 
-.progress-container .progress-bit {
+.monaco-progress-container .progress-bit {
 	width: 2%;
 	height: 5px;
 	position: absolute;
@@ -15,11 +17,11 @@
 	display: none;
 }
 
-.progress-container.active .progress-bit {
+.monaco-progress-container.active .progress-bit {
 	display: inherit;
 }
 
-.progress-container.discrete .progress-bit {
+.monaco-progress-container.discrete .progress-bit {
 	left: 0;
 	transition: width 100ms linear;
 	-webkit-transition: width 100ms linear;
@@ -28,11 +30,11 @@
 	-ms-transition: width 100ms linear;
 }
 
-.progress-container.discrete.done .progress-bit {
+.monaco-progress-container.discrete.done .progress-bit {
 	width: 100%;
 }
 
-.progress-container.infinite .progress-bit {
+.monaco-progress-container.infinite .progress-bit {
 	animation-name: progress;
 	animation-duration: 4s;
 	animation-iteration-count: infinite;
@@ -49,11 +51,17 @@
 	-moz-animation-duration: 4s;
 	-moz-animation-iteration-count: infinite;
 	-moz-animation-timing-function: linear;
+	will-change: transform;
 }
 
-@keyframes progress { from { left: 0; width: 2%; }	50% { left: 50%; width: 5%; } to { left: 98%; width: 2%; } }
-@-ms-keyframes progress { from { left: 0; width: 2%; }	50% { left: 50%; width: 5%; } to { left: 98%; width: 2%; } }
-@-webkit-keyframes progress { from { left: 0; width: 2%; }	50% { left: 50%; width: 5%; } to { left: 98%; width: 2%; } }
-@-moz-keyframes progress { from { left: 0; width: 2%; }	50% { left: 50%; width: 5%; } to { left: 98%; width: 2%; } }
-
-
+/**
+ * The progress bit has a width: 2% (1/50) of the parent container. The animation moves it from 0% to 100% of
+ * that container. Since translateX is relative to the progress bit size, we have to multiple it with
+ * its relative size to the parent container:
+ *  50%: 50 * 50 = 2500%
+ * 100%: 50 * 100 - 50 (do not overflow): 4950%
+ */
+@keyframes progress { from { transform: translateX(0%) scaleX(1) } 50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4950%) scaleX(1) } }
+@-ms-keyframes progress { from { transform: translateX(0%) scaleX(1) }	50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4950%) scaleX(1) } }
+@-webkit-keyframes progress { from { transform: translateX(0%) scaleX(1) }	50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4950%) scaleX(1) } }
+@-moz-keyframes progress { from { transform: translateX(0%) scaleX(1) }	50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4950%) scaleX(1) } }

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

@@ -7,9 +7,9 @@
 
 import 'vs/css!./progressbar';
 import { TPromise, ValueCallback } from 'vs/base/common/winjs.base';
-import assert = require('vs/base/common/assert');
+import * as assert from 'vs/base/common/assert';
 import { Builder, $ } from 'vs/base/browser/builder';
-import DOM = require('vs/base/browser/dom');
+import * as DOM from 'vs/base/browser/dom';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { Color } from 'vs/base/common/color';
 import { mixin } from 'vs/base/common/objects';
@@ -18,7 +18,7 @@ const css_done = 'done';
 const css_active = 'active';
 const css_infinite = 'infinite';
 const css_discrete = 'discrete';
-const css_progress_container = 'progress-container';
+const css_progress_container = 'monaco-progress-container';
 const css_progress_bit = 'progress-bit';
 
 export interface IProgressBarOptions extends IProgressBarStyles {
@@ -45,9 +45,7 @@ export class ProgressBar {
 	private animationStopToken: ValueCallback;
 	private progressBarBackground: Color;
 
-	constructor(container: Builder, options?: IProgressBarOptions);
-	constructor(container: HTMLElement, options?: IProgressBarOptions);
-	constructor(container: any, options?: IProgressBarOptions) {
+	constructor(container: HTMLElement, options?: IProgressBarOptions) {
 		this.options = options || Object.create(null);
 		mixin(this.options, defaultOpts, false);
 
@@ -59,10 +57,8 @@ export class ProgressBar {
 		this.create(container);
 	}
 
-	private create(container: Builder): void;
-	private create(container: HTMLElement): void;
-	private create(container: any): void {
-		$(container).div({ 'class': css_progress_container }, (builder) => {
+	private create(container: HTMLElement): 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) => {
@@ -201,11 +197,20 @@ export class ProgressBar {
 		return this;
 	}
 
-	/**
-	 * Returns the builder this progress bar is building in.
-	 */
-	public getContainer(): Builder {
-		return $(this.element);
+	public getContainer(): HTMLElement {
+		return this.element.getHTMLElement();
+	}
+
+	public show(delay?: number): void {
+		if (typeof delay === 'number') {
+			this.element.showDelayed(delay);
+		} else {
+			this.element.show();
+		}
+	}
+
+	public hide(): void {
+		this.element.hide();
 	}
 
 	public style(styles: IProgressBarStyles): void {

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

@@ -25,22 +25,12 @@
 	cursor: default !important;
 }
 
-.vertical-cursor-container {
-	cursor: ew-resize;
-}
-
-.horizontal-cursor-container {
-	cursor: ns-resize;
-}
-
 /** Custom Mac Cursor */
 
-.monaco-sash.mac.vertical,
-.vertical-cursor-container-mac {
+.monaco-sash.mac.vertical {
 	cursor: col-resize;
 }
 
-.monaco-sash.mac.horizontal,
-.horizontal-cursor-container-mac {
+.monaco-sash.mac.horizontal {
 	cursor: row-resize;
 }

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

@@ -7,14 +7,14 @@
 
 import 'vs/css!./sash';
 import { IDisposable, Disposable, dispose } from 'vs/base/common/lifecycle';
-import { Builder, $, Dimension } from 'vs/base/browser/builder';
+import { Builder, $ } from 'vs/base/browser/builder';
 import { isIPad } from 'vs/base/browser/browser';
 import { isMacintosh } from 'vs/base/common/platform';
-import types = require('vs/base/common/types');
-import DOM = require('vs/base/browser/dom');
+import * as types from 'vs/base/common/types';
 import { EventType, GestureEvent, Gesture } from 'vs/base/browser/touch';
 import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
+import { getElementsByTagName, EventHelper, EventType as DOMEventType, createStyleSheet, addDisposableListener, Dimension } from 'vs/base/browser/dom';
 
 export interface ISashLayoutProvider { }
 
@@ -63,15 +63,14 @@ export class Sash {
 	private _onDidEnd = new Emitter<void>();
 
 	constructor(container: HTMLElement, layoutProvider: ISashLayoutProvider, options: ISashOptions = {}) {
-
 		this.$e = $('.monaco-sash').appendTo(container);
 
 		if (isMacintosh) {
 			this.$e.addClass('mac');
 		}
 
-		this.$e.on(DOM.EventType.MOUSE_DOWN, (e) => { this.onMouseDown(e as MouseEvent); });
-		this.$e.on(DOM.EventType.DBLCLICK, (e) => this._onDidReset.fire());
+		this.$e.on(DOMEventType.MOUSE_DOWN, (e) => { this.onMouseDown(e as MouseEvent); });
+		this.$e.on(DOMEventType.DBLCLICK, (e) => this._onDidReset.fire());
 		Gesture.addTarget(this.$e.getHTMLElement());
 		this.$e.on(EventType.Start, (e) => { this.onTouchStart(e as GestureEvent); });
 
@@ -127,23 +126,23 @@ export class Sash {
 	}
 
 	private onMouseDown(e: MouseEvent): void {
-		DOM.EventHelper.stop(e, false);
+		EventHelper.stop(e, false);
 
 		if (this.isDisabled) {
 			return;
 		}
 
-		const iframes = $(DOM.getElementsByTagName('iframe'));
+		const iframes = $(getElementsByTagName('iframe'));
 		if (iframes) {
 			iframes.style('pointer-events', 'none'); // disable mouse events on iframes as long as we drag the sash
 		}
 
-		let mouseDownEvent = new StandardMouseEvent(e);
-		let startX = mouseDownEvent.posx;
-		let startY = mouseDownEvent.posy;
+		const mouseDownEvent = new StandardMouseEvent(e);
+		const startX = mouseDownEvent.posx;
+		const startY = mouseDownEvent.posy;
 		const altKey = mouseDownEvent.altKey;
 
-		let startEvent: ISashEvent = {
+		const startEvent: ISashEvent = {
 			startX: startX,
 			currentX: startX,
 			startY: startY,
@@ -154,14 +153,21 @@ export class Sash {
 		this.$e.addClass('active');
 		this._onDidStart.fire(startEvent);
 
-		let $window = $(window);
-		let containerCSSClass = `${this.getOrientation()}-cursor-container${isMacintosh ? '-mac' : ''}`;
+		const $window = $(window);
+
+		// fix https://github.com/Microsoft/vscode/issues/21675
+		const globalStyle = createStyleSheet(this.$e.getHTMLElement());
+		if (this.orientation === Orientation.HORIZONTAL) {
+			globalStyle.innerHTML = `* { cursor: ${isMacintosh ? 'row-resize' : 'ns-resize'}; }`;
+		} else {
+			globalStyle.innerHTML = `* { cursor: ${isMacintosh ? 'col-resize' : 'ew-resize'}; }`;
+		}
 
 		$window.on('mousemove', (e) => {
-			DOM.EventHelper.stop(e, false);
-			let mouseMoveEvent = new StandardMouseEvent(e as MouseEvent);
+			EventHelper.stop(e, false);
+			const mouseMoveEvent = new StandardMouseEvent(e as MouseEvent);
 
-			let event: ISashEvent = {
+			const event: ISashEvent = {
 				startX: startX,
 				currentX: mouseMoveEvent.posx,
 				startY: startY,
@@ -171,29 +177,29 @@ export class Sash {
 
 			this._onDidChange.fire(event);
 		}).once('mouseup', (e) => {
-			DOM.EventHelper.stop(e, false);
+			EventHelper.stop(e, false);
+
+			this.$e.getHTMLElement().removeChild(globalStyle);
+
 			this.$e.removeClass('active');
 			this._onDidEnd.fire();
 
 			$window.off('mousemove');
-			document.body.classList.remove(containerCSSClass);
 
-			const iframes = $(DOM.getElementsByTagName('iframe'));
+			const iframes = $(getElementsByTagName('iframe'));
 			if (iframes) {
 				iframes.style('pointer-events', 'auto');
 			}
 		});
-
-		document.body.classList.add(containerCSSClass);
 	}
 
 	private onTouchStart(event: GestureEvent): void {
-		DOM.EventHelper.stop(event);
+		EventHelper.stop(event);
 
-		let listeners: IDisposable[] = [];
+		const listeners: IDisposable[] = [];
 
-		let startX = event.pageX;
-		let startY = event.pageY;
+		const startX = event.pageX;
+		const startY = event.pageY;
 		const altKey = event.altKey;
 
 
@@ -205,7 +211,7 @@ export class Sash {
 			altKey
 		});
 
-		listeners.push(DOM.addDisposableListener(this.$e.getHTMLElement(), EventType.Change, (event: GestureEvent) => {
+		listeners.push(addDisposableListener(this.$e.getHTMLElement(), EventType.Change, (event: GestureEvent) => {
 			if (types.isNumber(event.pageX) && types.isNumber(event.pageY)) {
 				this._onDidChange.fire({
 					startX: startX,
@@ -217,7 +223,7 @@ export class Sash {
 			}
 		}));
 
-		listeners.push(DOM.addDisposableListener(this.$e.getHTMLElement(), EventType.End, (event: GestureEvent) => {
+		listeners.push(addDisposableListener(this.$e.getHTMLElement(), EventType.End, (event: GestureEvent) => {
 			this._onDidEnd.fire();
 			dispose(listeners);
 		}));
@@ -227,7 +233,7 @@ export class Sash {
 		let style: { top?: string; left?: string; height?: string; width?: string; };
 
 		if (this.orientation === Orientation.VERTICAL) {
-			let verticalProvider = (<IVerticalSashLayoutProvider>this.layoutProvider);
+			const verticalProvider = (<IVerticalSashLayoutProvider>this.layoutProvider);
 			style = { left: verticalProvider.getVerticalSashLeft(this) - (this.size / 2) + 'px' };
 
 			if (verticalProvider.getVerticalSashTop) {
@@ -238,7 +244,7 @@ export class Sash {
 				style.height = verticalProvider.getVerticalSashHeight(this) + 'px';
 			}
 		} else {
-			let horizontalProvider = (<IHorizontalSashLayoutProvider>this.layoutProvider);
+			const horizontalProvider = (<IHorizontalSashLayoutProvider>this.layoutProvider);
 			style = { top: horizontalProvider.getHorizontalSashTop(this) - (this.size / 2) + 'px' };
 
 			if (horizontalProvider.getHorizontalSashLeft) {
@@ -294,18 +300,18 @@ export class Sash {
  * Triggers onPositionChange event when the position is changed
  */
 export class VSash extends Disposable implements IVerticalSashLayoutProvider {
-
 	private sash: Sash;
 	private ratio: number;
 	private startPosition: number;
 	private position: number;
 	private dimension: Dimension;
 
-	private _onPositionChange: Emitter<number> = new Emitter<number>();
+	private readonly _onPositionChange: Emitter<number> = new Emitter<number>();
 	public get onPositionChange(): Event<number> { return this._onPositionChange.event; }
 
 	constructor(container: HTMLElement, private minWidth: number) {
 		super();
+
 		this.ratio = 0.5;
 		this.sash = new Sash(container, this);
 
@@ -357,9 +363,9 @@ export class VSash extends Disposable implements IVerticalSashLayoutProvider {
 	}
 
 	private computeSashPosition(sashRatio: number = this.ratio) {
-		let contentWidth = this.dimension.width;
+		const contentWidth = this.dimension.width;
 		let sashPosition = Math.floor((sashRatio || 0.5) * contentWidth);
-		let midPoint = Math.floor(0.5 * contentWidth);
+		const midPoint = Math.floor(0.5 * contentWidth);
 
 		if (contentWidth > this.minWidth * 2) {
 			if (sashPosition < this.minWidth) {

src/vs/base/browser/ui/scrollbar/scrollableElement.ts

@@ -18,7 +18,7 @@ import { Widget } from 'vs/base/browser/ui/widget';
 import { TimeoutTimer } from 'vs/base/common/async';
 import { FastDomNode, createFastDomNode } from 'vs/base/browser/fastDomNode';
 import { ScrollbarHost } from 'vs/base/browser/ui/scrollbar/abstractScrollbar';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 
 const HIDE_TIMEOUT = 500;
 const SCROLL_WHEEL_SENSITIVITY = 50;
@@ -164,7 +164,7 @@ export abstract class AbstractScrollableElement extends Widget {
 	private _shouldRender: boolean;
 
 	private readonly _onScroll = this._register(new Emitter<ScrollEvent>());
-	public onScroll: Event<ScrollEvent> = this._onScroll.event;
+	public readonly onScroll: Event<ScrollEvent> = this._onScroll.event;
 
 	protected constructor(element: HTMLElement, options: ScrollableElementCreationOptions, scrollable?: Scrollable) {
 		super();
@@ -336,16 +336,6 @@ export abstract class AbstractScrollableElement extends Widget {
 				deltaY = 0;
 			}
 
-			if (Platform.isMacintosh) {
-				// Give preference to vertical scrolling
-				if (deltaY && Math.abs(deltaX) < 0.2) {
-					deltaX = 0;
-				}
-				if (Math.abs(deltaY) > Math.abs(deltaX) * 0.5) {
-					deltaX = 0;
-				}
-			}
-
 			const futureScrollPosition = this._scrollable.getFutureScrollPosition();
 
 			let desiredScrollPosition: INewScrollPosition = {};

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

@@ -3,7 +3,6 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.monaco-workbench .select-box {
+.monaco-select-box {
 	width: 100%;
-	height: 20px;
-}
+}

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

@@ -6,7 +6,7 @@
 import 'vs/css!./selectBox';
 
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event } from 'vs/base/common/event';
 import { Widget } from 'vs/base/browser/ui/widget';
 import { Color } from 'vs/base/common/color';
 import { deepClone, mixin } from 'vs/base/common/objects';
@@ -34,6 +34,10 @@ export interface ISelectBoxDelegate {
 	applyStyles(): void;
 }
 
+export interface ISelectBoxOptions {
+	minBottomMargin?: number;
+}
+
 export interface ISelectBoxStyles extends IListStyles {
 	selectBackground?: Color;
 	selectListBackground?: Color;
@@ -54,21 +58,16 @@ export interface ISelectData {
 }
 
 export class SelectBox extends Widget implements ISelectBoxDelegate {
-	protected options: string[];
-	private selected: number;
-	private _onDidSelect: Emitter<ISelectData>;
-
 	// {{SQL CARBON EDIT}}
 	protected selectElement: HTMLSelectElement;
 	protected selectBackground: Color;
 	protected selectForeground: Color;
 	protected selectBorder: Color;
 	private toDispose: IDisposable[];
-
 	private styles: ISelectBoxStyles;
 	private selectBoxDelegate: ISelectBoxDelegate;
 
-	constructor(options: string[], selected: number, contextViewProvider: IContextViewProvider, styles: ISelectBoxStyles = deepClone(defaultStyles)) {
+	constructor(options: string[], selected: number, contextViewProvider: IContextViewProvider, styles: ISelectBoxStyles = deepClone(defaultStyles), selectBoxOptions?: ISelectBoxOptions) {
 		super();
 
 		this.toDispose = [];
@@ -79,7 +78,7 @@ export class SelectBox extends Widget implements ISelectBoxDelegate {
 		if (isMacintosh) {
 			this.selectBoxDelegate = new SelectBoxNative(options, selected, styles);
 		} else {
-			this.selectBoxDelegate = new SelectBoxList(options, selected, contextViewProvider, styles);
+			this.selectBoxDelegate = new SelectBoxList(options, selected, contextViewProvider, styles, selectBoxOptions);
 		}
 
 		// {{SQL CARBON EDIT}}

src/vs/base/browser/ui/selectBox/selectBoxCustom.css

@@ -3,13 +3,11 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-/* Require .monaco-shell for ContextView dropdown */
-
-.monaco-shell .select-box-dropdown-container {
+.monaco-select-box-dropdown-container {
 	display: none;
 }
 
-.monaco-shell .select-box-dropdown-container.visible {
+.monaco-select-box-dropdown-container.visible {
 	display: flex;
 	flex-direction: column;
 	text-align: left;
@@ -17,7 +15,7 @@
 	overflow: hidden;
 }
 
-.monaco-shell .select-box-dropdown-container > .select-box-dropdown-list-container {
+.monaco-select-box-dropdown-container > .select-box-dropdown-list-container {
 	flex: 0 0 auto;
 	align-self: flex-start;
 	padding-bottom: 1px;
@@ -33,30 +31,30 @@
 	box-sizing:			border-box;
 }
 
-.monaco-shell.hc-black .select-box-dropdown-container > .select-box-dropdown-list-container {
+.hc-black .monaco-select-box-dropdown-container > .select-box-dropdown-list-container {
 	padding-bottom: 4px;
 	padding-top: 3px;
 }
 
-.monaco-shell .select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .option-text {
+.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .option-text {
 	text-overflow: ellipsis;
 	overflow: hidden;
 	padding-left: 3.5px;
 	white-space: nowrap;
 }
 
-.monaco-shell .select-box-dropdown-container > .select-box-dropdown-container-width-control {
+.monaco-select-box-dropdown-container > .select-box-dropdown-container-width-control {
 	flex: 1 1 auto;
 	align-self: flex-start;
 	opacity: 0;
 }
 
-.monaco-shell .select-box-dropdown-container > .select-box-dropdown-container-width-control > .width-control-div {
+.monaco-select-box-dropdown-container > .select-box-dropdown-container-width-control > .width-control-div {
 	overflow: hidden;
 	max-height: 0px;
 }
 
-.monaco-shell .select-box-dropdown-container > .select-box-dropdown-container-width-control > .width-control-div > .option-text-width-control {
+.monaco-select-box-dropdown-container > .select-box-dropdown-container-width-control > .width-control-div > .option-text-width-control {
 	padding-left: 4px;
 	padding-right: 8px;
 	white-space: nowrap;

src/vs/base/browser/ui/selectBox/selectBoxCustom.ts

@@ -7,7 +7,7 @@ import 'vs/css!./selectBoxCustom';
 
 import * as nls from 'vs/nls';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
-import Event, { Emitter, chain } from 'vs/base/common/event';
+import { Event, Emitter, chain } from 'vs/base/common/event';
 import { KeyCode, KeyCodeUtils } from 'vs/base/common/keyCodes';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import * as dom from 'vs/base/browser/dom';
@@ -17,7 +17,7 @@ import { List } from 'vs/base/browser/ui/list/listWidget';
 import { IDelegate, IRenderer } from 'vs/base/browser/ui/list/list';
 import { domEvent } from 'vs/base/browser/event';
 import { ScrollbarVisibility } from 'vs/base/common/scrollable';
-import { ISelectBoxDelegate, ISelectBoxStyles, ISelectData } from 'vs/base/browser/ui/selectBox/selectBox';
+import { ISelectBoxDelegate, ISelectBoxOptions, ISelectBoxStyles, ISelectData } from 'vs/base/browser/ui/selectBox/selectBox';
 import { isMacintosh } from 'vs/base/common/platform';
 
 const $ = dom.$;
@@ -61,6 +61,9 @@ class SelectListRenderer implements IRenderer<ISelectOptionItem, ISelectListTemp
 		// pseudo-select disabled option
 		if (optionDisabled) {
 			dom.addClass((<HTMLElement>data.root), 'option-disabled');
+		} else {
+			// Make sure we do class removal from prior template rendering
+			dom.removeClass((<HTMLElement>data.root), 'option-disabled');
 		}
 	}
 
@@ -71,15 +74,16 @@ class SelectListRenderer implements IRenderer<ISelectOptionItem, ISelectListTemp
 
 export class SelectBoxList implements ISelectBoxDelegate, IDelegate<ISelectOptionItem> {
 
-	private static SELECT_DROPDOWN_BOTTOM_MARGIN = 10;
+	private static readonly DEFAULT_DROPDOWN_MINIMUM_BOTTOM_MARGIN = 32;
 
 	private _isVisible: boolean;
+	private selectBoxOptions: ISelectBoxOptions;
 	// {{SQL CARBON EDIT}}
 	public selectElement: HTMLSelectElement;
 	private options: string[];
 	private selected: number;
 	private disabledOptionIndex: number;
-	private _onDidSelect: Emitter<ISelectData>;
+	private readonly _onDidSelect: Emitter<ISelectData>;
 	private toDispose: IDisposable[];
 	private styles: ISelectBoxStyles;
 	private listRenderer: SelectListRenderer;
@@ -91,13 +95,20 @@ export class SelectBoxList implements ISelectBoxDelegate, IDelegate<ISelectOptio
 	private widthControlElement: HTMLElement;
 	private _currentSelection: number;
 
-	constructor(options: string[], selected: number, contextViewProvider: IContextViewProvider, styles: ISelectBoxStyles) {
+	constructor(options: string[], selected: number, contextViewProvider: IContextViewProvider, styles: ISelectBoxStyles, selectBoxOptions?: ISelectBoxOptions) {
 
 		this.toDispose = [];
 		this._isVisible = false;
+		this.selectBoxOptions = selectBoxOptions || Object.create(null);
+
+		if (typeof this.selectBoxOptions.minBottomMargin !== 'number') {
+			this.selectBoxOptions.minBottomMargin = SelectBoxList.DEFAULT_DROPDOWN_MINIMUM_BOTTOM_MARGIN;
+		} else if (this.selectBoxOptions.minBottomMargin < 0) {
+			this.selectBoxOptions.minBottomMargin = 0;
+		}
 
 		this.selectElement = document.createElement('select');
-		this.selectElement.className = 'select-box';
+		this.selectElement.className = 'monaco-select-box';
 
 		this._onDidSelect = new Emitter<ISelectData>();
 		this.styles = styles;
@@ -122,7 +133,7 @@ export class SelectBoxList implements ISelectBoxDelegate, IDelegate<ISelectOptio
 
 		// SetUp ContextView container to hold select Dropdown
 		this.contextViewProvider = contextViewProvider;
-		this.selectDropDownContainer = dom.$('.select-box-dropdown-container');
+		this.selectDropDownContainer = dom.$('.monaco-select-box-dropdown-container');
 
 		// Setup list for drop-down select
 		this.createSelectList(this.selectDropDownContainer);
@@ -235,6 +246,10 @@ export class SelectBoxList implements ISelectBoxDelegate, IDelegate<ISelectOptio
 
 		if (index >= 0 && index < this.options.length) {
 			this.selected = index;
+		} else if (index > this.options.length - 1) {
+			// Adjust index to end of list
+			// This could make client out of sync with the select
+			this.select(this.options.length - 1);
 		} else if (this.selected < 0) {
 			this.selected = 0;
 		}
@@ -271,33 +286,33 @@ export class SelectBoxList implements ISelectBoxDelegate, IDelegate<ISelectOptio
 		// Style non-native select mode
 
 		if (this.styles.listFocusBackground) {
-			content.push(`.monaco-shell .select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row.focused { background-color: ${this.styles.listFocusBackground} !important; }`);
+			content.push(`.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row.focused { background-color: ${this.styles.listFocusBackground} !important; }`);
 		}
 
 		if (this.styles.listFocusForeground) {
-			content.push(`.monaco-shell .select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row.focused:not(:hover) { color: ${this.styles.listFocusForeground} !important; }`);
+			content.push(`.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row.focused:not(:hover) { color: ${this.styles.listFocusForeground} !important; }`);
 		}
 
 		// Hover foreground - ignore for disabled options
 		if (this.styles.listHoverForeground) {
-			content.push(`.monaco-shell .select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row:hover { color: ${this.styles.listHoverForeground} !important; }`);
-			content.push(`.monaco-shell .select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row.option-disabled:hover { background-color: ${this.styles.listActiveSelectionForeground} !important; }`);
+			content.push(`.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row:hover { color: ${this.styles.listHoverForeground} !important; }`);
+			content.push(`.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row.option-disabled:hover { background-color: ${this.styles.listActiveSelectionForeground} !important; }`);
 		}
 
 		// Hover background - ignore for disabled options
 		if (this.styles.listHoverBackground) {
-			content.push(`.monaco-shell .select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row:not(.option-disabled):not(.focused):hover { background-color: ${this.styles.listHoverBackground} !important; }`);
-			content.push(`.monaco-shell .select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row.option-disabled:hover { background-color: ${this.styles.selectBackground} !important; }`);
+			content.push(`.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row:not(.option-disabled):not(.focused):hover { background-color: ${this.styles.listHoverBackground} !important; }`);
+			content.push(`.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row.option-disabled:hover { background-color: ${this.styles.selectBackground} !important; }`);
 		}
 
 		// Match quickOpen outline styles - ignore for disabled options
 		if (this.styles.listFocusOutline) {
-			content.push(`.monaco-shell .select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row.focused { outline: 1.6px dotted ${this.styles.listFocusOutline} !important; outline-offset: -1.6px !important; }`);
+			content.push(`.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row.focused { outline: 1.6px dotted ${this.styles.listFocusOutline} !important; outline-offset: -1.6px !important; }`);
 		}
 
 		if (this.styles.listHoverOutline) {
-			content.push(`.monaco-shell .select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row:hover:not(.focused) { outline: 1.6px dashed ${this.styles.listHoverOutline} !important; outline-offset: -1.6px !important; }`);
-			content.push(`.monaco-shell .select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row.option-disabled:hover { outline: none !important; }`);
+			content.push(`.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row:hover:not(.focused) { outline: 1.6px dashed ${this.styles.listHoverOutline} !important; outline-offset: -1.6px !important; }`);
+			content.push(`.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row.option-disabled:hover { outline: none !important; }`);
 		}
 
 		this.styleElement.innerHTML = content.join('\n');
@@ -379,9 +394,12 @@ export class SelectBoxList implements ISelectBoxDelegate, IDelegate<ISelectOptio
 	}
 
 	private renderSelectDropDown(container: HTMLElement): IDisposable {
-		dom.append(container, this.selectDropDownContainer);
+		container.appendChild(this.selectDropDownContainer);
+
 		this.layoutSelectDropDown();
-		return null;
+		return {
+			dispose: () => container.removeChild(this.selectDropDownContainer) // remove to take out the CSS rules we add
+		};
 	}
 
 	private layoutSelectDropDown() {
@@ -395,9 +413,12 @@ export class SelectBoxList implements ISelectBoxDelegate, IDelegate<ISelectOptio
 		const selectWidth = dom.getTotalWidth(this.selectElement);
 		const selectPosition = dom.getDomNodePagePosition(this.selectElement);
 
-		// Set container height to max from select bottom to margin above status bar
-		const statusBarHeight = dom.getTotalHeight(document.getElementById('workbench.parts.statusbar'));
-		const maxSelectDropDownHeight = (window.innerHeight - selectPosition.top - selectPosition.height - statusBarHeight - SelectBoxList.SELECT_DROPDOWN_BOTTOM_MARGIN);
+		// Set container height to max from select bottom to margin (default/minBottomMargin)
+		let maxSelectDropDownHeight = (window.innerHeight - selectPosition.top - selectPosition.height - this.selectBoxOptions.minBottomMargin);
+
+		if (maxSelectDropDownHeight < 0) {
+			maxSelectDropDownHeight = 0;
+		}
 
 		// SetUp list dimensions and layout - account for container padding
 		if (this.selectList) {

src/vs/base/browser/ui/selectBox/selectBoxNative.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import * as dom from 'vs/base/browser/dom';
 import * as arrays from 'vs/base/common/arrays';
@@ -17,7 +17,7 @@ export class SelectBoxNative implements ISelectBoxDelegate {
 	public selectElement: HTMLSelectElement;
 	private options: string[];
 	private selected: number;
-	private _onDidSelect: Emitter<ISelectData>;
+	private readonly _onDidSelect: Emitter<ISelectData>;
 	private toDispose: IDisposable[];
 	private styles: ISelectBoxStyles;
 
@@ -26,7 +26,7 @@ export class SelectBoxNative implements ISelectBoxDelegate {
 		this.toDispose = [];
 
 		this.selectElement = document.createElement('select');
-		this.selectElement.className = 'select-box';
+		this.selectElement.className = 'monaco-select-box';
 
 		this._onDidSelect = new Emitter<ISelectData>();
 
@@ -92,6 +92,10 @@ export class SelectBoxNative implements ISelectBoxDelegate {
 	public select(index: number): void {
 		if (index >= 0 && index < this.options.length) {
 			this.selected = index;
+		} else if (index > this.options.length - 1) {
+			// Adjust index to end of list
+			// This could make client out of sync with the select
+			this.select(this.options.length - 1);
 		} else if (this.selected < 0) {
 			this.selected = 0;
 		}

src/vs/base/browser/ui/splitview/grid.ts

@@ -5,7 +5,7 @@
 
 'use strict';
 
-import Event, { anyEvent } from 'vs/base/common/event';
+import { Event, anyEvent } from 'vs/base/common/event';
 import { Orientation } from 'vs/base/browser/ui/sash/sash';
 import { append, $ } from 'vs/base/browser/dom';
 import { SplitView, IView } from 'vs/base/browser/ui/splitview/splitview';

src/vs/base/browser/ui/splitview/panelview.ts

@@ -7,7 +7,7 @@
 
 import 'vs/css!./panelview';
 import { IDisposable, dispose, combinedDisposable } from 'vs/base/common/lifecycle';
-import Event, { Emitter, chain } from 'vs/base/common/event';
+import { Event, Emitter, chain } 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';
@@ -239,7 +239,7 @@ class PanelDraggable implements IDisposable {
 	private _onDidDrop = new Emitter<{ from: Panel, to: Panel }>();
 	readonly onDidDrop = this._onDidDrop.event;
 
-	constructor(private panel: Panel, private context: IDndContext) {
+	constructor(private panel: Panel, private dnd: IPanelDndController, private context: IDndContext) {
 		panel.draggableElement.draggable = true;
 		domEvent(panel.draggableElement, 'dragstart')(this.onDragStart, this, this.disposables);
 		domEvent(panel.dropTargetElement, 'dragenter')(this.onDragEnter, this, this.disposables);
@@ -249,6 +249,12 @@ class PanelDraggable implements IDisposable {
 	}
 
 	private onDragStart(e: DragEvent): void {
+		if (!this.dnd.canDrag(this.panel)) {
+			e.preventDefault();
+			e.stopPropagation();
+			return;
+		}
+
 		e.dataTransfer.effectAllowed = 'move';
 
 		const dragImage = append(document.body, $('.monaco-panel-drag-image', {}, this.panel.draggableElement.textContent));
@@ -263,6 +269,10 @@ class PanelDraggable implements IDisposable {
 			return;
 		}
 
+		if (!this.dnd.canDrop(this.context.draggable.panel, this.panel)) {
+			return;
+		}
+
 		this.dragOverCounter++;
 		this.render();
 	}
@@ -272,6 +282,10 @@ class PanelDraggable implements IDisposable {
 			return;
 		}
 
+		if (!this.dnd.canDrop(this.context.draggable.panel, this.panel)) {
+			return;
+		}
+
 		this.dragOverCounter--;
 
 		if (this.dragOverCounter === 0) {
@@ -297,7 +311,7 @@ class PanelDraggable implements IDisposable {
 		this.dragOverCounter = 0;
 		this.render();
 
-		if (this.context.draggable !== this) {
+		if (this.dnd.canDrop(this.context.draggable.panel, this.panel) && this.context.draggable !== this) {
 			this._onDidDrop.fire({ from: this.context.draggable.panel, to: this.panel });
 		}
 
@@ -319,8 +333,24 @@ class PanelDraggable implements IDisposable {
 	}
 }
 
-export class IPanelViewOptions {
-	dnd?: boolean;
+export interface IPanelDndController {
+	canDrag(panel: Panel): boolean;
+	canDrop(panel: Panel, overPanel: Panel): boolean;
+}
+
+export class DefaultPanelDndController implements IPanelDndController {
+
+	canDrag(panel: Panel): boolean {
+		return true;
+	}
+
+	canDrop(panel: Panel, overPanel: Panel): boolean {
+		return true;
+	}
+}
+
+export interface IPanelViewOptions {
+	dnd?: IPanelDndController;
 }
 
 interface IPanelItem {
@@ -330,7 +360,7 @@ interface IPanelItem {
 
 export class PanelView implements IDisposable {
 
-	private dnd: boolean;
+	private dnd: IPanelDndController | null;
 	private dndContext: IDndContext = { draggable: null };
 	private el: HTMLElement;
 	private panelItems: IPanelItem[] = [];
@@ -343,7 +373,7 @@ export class PanelView implements IDisposable {
 	readonly onDidSashChange: Event<void>;
 
 	constructor(container: HTMLElement, options: IPanelViewOptions = {}) {
-		this.dnd = !!options.dnd;
+		this.dnd = options.dnd;
 		this.el = append(container, $('.monaco-panel-view'));
 		this.splitview = new SplitView(this.el);
 		this.onDidSashChange = this.splitview.onDidSashChange;
@@ -358,7 +388,7 @@ export class PanelView implements IDisposable {
 		this.splitview.addView(panel, size, index);
 
 		if (this.dnd) {
-			const draggable = new PanelDraggable(panel, this.dndContext);
+			const draggable = new PanelDraggable(panel, this.dnd, this.dndContext);
 			disposables.push(draggable);
 			draggable.onDidDrop(this._onDidDrop.fire, this._onDidDrop, disposables);
 		}

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

@@ -10,15 +10,20 @@
 	height: 100%;
 }
 
-.monaco-split-view2 > .split-view-view {
+.monaco-split-view2 > .split-view-container {
+	width: 100%;
+	height: 100%;
+}
+
+.monaco-split-view2 > .split-view-container > .split-view-view {
 	overflow: hidden;
 }
 
-.monaco-split-view2.vertical > .split-view-view {
+.monaco-split-view2.vertical > .split-view-container > .split-view-view {
 	width: 100%;
 }
 
-.monaco-split-view2.horizontal > .split-view-view {
+.monaco-split-view2.horizontal > .split-view-container > .split-view-view {
 	height: 100%;
 	display: inline-block;
 }

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

@@ -7,9 +7,9 @@
 
 import 'vs/css!./splitview';
 import { IDisposable, combinedDisposable, toDisposable } from 'vs/base/common/lifecycle';
-import Event, { mapEvent, Emitter } from 'vs/base/common/event';
-import types = require('vs/base/common/types');
-import dom = require('vs/base/browser/dom');
+import { Event, mapEvent, Emitter } from 'vs/base/common/event';
+import * as types from 'vs/base/common/types';
+import * as dom from 'vs/base/browser/dom';
 import { clamp } from 'vs/base/common/numbers';
 import { range, firstIndex } from 'vs/base/common/arrays';
 import { Sash, Orientation, ISashEvent as IBaseSashEvent } from 'vs/base/browser/ui/sash/sash';
@@ -82,6 +82,7 @@ export class SplitView implements IDisposable {
 
 	private orientation: Orientation;
 	private el: HTMLElement;
+	private viewContainer: HTMLElement;
 	private size = 0;
 	private contentSize = 0;
 	private viewItems: IViewItem[] = [];
@@ -105,6 +106,10 @@ export class SplitView implements IDisposable {
 		dom.addClass(this.el, 'monaco-split-view2');
 		dom.addClass(this.el, this.orientation === Orientation.VERTICAL ? 'vertical' : 'horizontal');
 		container.appendChild(this.el);
+
+		this.viewContainer = document.createElement('div');
+		dom.addClass(this.viewContainer, 'split-view-container');
+		this.el.appendChild(this.viewContainer);
 	}
 
 	addView(view: IView, size: number, index = this.viewItems.length): void {
@@ -118,13 +123,13 @@ export class SplitView implements IDisposable {
 		const container = dom.$('.split-view-view');
 
 		if (index === this.viewItems.length) {
-			this.el.appendChild(container);
+			this.viewContainer.appendChild(container);
 		} else {
-			this.el.insertBefore(container, this.el.children.item(index));
+			this.viewContainer.insertBefore(container, this.viewContainer.children.item(index));
 		}
 
 		const onChangeDisposable = view.onDidChange(size => this.onViewChange(item, size));
-		const containerDisposable = toDisposable(() => this.el.removeChild(container));
+		const containerDisposable = toDisposable(() => this.viewContainer.removeChild(container));
 		const disposable = combinedDisposable([onChangeDisposable, containerDisposable]);
 
 		const layoutContainer = this.orientation === Orientation.VERTICAL
@@ -218,9 +223,9 @@ export class SplitView implements IDisposable {
 		this.viewItems.splice(to, 0, viewItem);
 
 		if (to + 1 < this.viewItems.length) {
-			this.el.insertBefore(viewItem.container, this.viewItems[to + 1].container);
+			this.viewContainer.insertBefore(viewItem.container, this.viewItems[to + 1].container);
 		} else {
-			this.el.appendChild(viewItem.container);
+			this.viewContainer.appendChild(viewItem.container);
 		}
 
 		this.layoutViews();

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

@@ -6,9 +6,8 @@
 'use strict';
 
 import 'vs/css!./toolbar';
-import nls = require('vs/nls');
+import * as nls from 'vs/nls';
 import { TPromise } from 'vs/base/common/winjs.base';
-import { Builder, $ } from 'vs/base/browser/builder';
 import { Action, IActionRunner, IAction } from 'vs/base/common/actions';
 import { ActionBar, ActionsOrientation, IActionItemProvider } from 'vs/base/browser/ui/actionbar/actionbar';
 import { IContextMenuProvider, DropdownMenuActionItem } from 'vs/base/browser/ui/dropdown/dropdown';
@@ -45,7 +44,7 @@ export class ToolBar {
 		element.className = 'monaco-toolbar';
 		container.appendChild(element);
 
-		this.actionBar = new ActionBar($(element), {
+		this.actionBar = new ActionBar(element, {
 			orientation: options.orientation,
 			ariaLabel: options.ariaLabel,
 			actionRunner: options.actionRunner,
@@ -94,10 +93,18 @@ export class ToolBar {
 		}
 	}
 
-	public getContainer(): Builder {
+	public getContainer(): HTMLElement {
 		return this.actionBar.getContainer();
 	}
 
+	public getItemsWidth(): number {
+		let itemsWidth = 0;
+		for (let i = 0; i < this.actionBar.length(); i++) {
+			itemsWidth += this.actionBar.getWidth(i);
+		}
+		return itemsWidth;
+	}
+
 	public setAriaLabel(label: string): void {
 		this.actionBar.setAriaLabel(label);
 	}