Merge VS Code 1.23.1 (#1520)

src/vs/base/parts/ipc/common/ipc.electron.ts

@@ -5,7 +5,7 @@
 
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { IMessagePassingProtocol } from 'vs/base/parts/ipc/common/ipc';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 
 export interface Sender {
 	send(channel: string, ...args: any[]): void;

src/vs/base/parts/ipc/common/ipc.ts

@@ -7,7 +7,7 @@
 
 import { Promise, TPromise } from 'vs/base/common/winjs.base';
 import { IDisposable, toDisposable } from 'vs/base/common/lifecycle';
-import Event, { Emitter, once, filterEvent } from 'vs/base/common/event';
+import { Event, Emitter, once, filterEvent } from 'vs/base/common/event';
 
 enum MessageType {
 	RequestCommon,
@@ -152,7 +152,7 @@ export class ChannelServer implements IChannelServer, IDisposable {
 					id, data: {
 						message: data.message,
 						name: data.name,
-						stack: data.stack ? data.stack.split('\n') : void 0
+						stack: data.stack ? (data.stack.split ? data.stack.split('\n') : data.stack) : void 0
 					}, type: MessageType.ResponseError
 				});
 			} else {

src/vs/base/parts/ipc/electron-main/ipc.electron-main.ts

@@ -3,7 +3,7 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import Event, { filterEvent, mapEvent, fromNodeEventEmitter } from 'vs/base/common/event';
+import { Event, filterEvent, mapEvent, fromNodeEventEmitter } from 'vs/base/common/event';
 import { IPCServer, ClientConnectionEvent } from 'vs/base/parts/ipc/common/ipc';
 import { Protocol } from 'vs/base/parts/ipc/common/ipc.electron';
 import { ipcMain } from 'electron';

src/vs/base/parts/ipc/node/ipc.net.ts

@@ -7,7 +7,7 @@
 
 import { Socket, Server as NetServer, createConnection, createServer } from 'net';
 import { TPromise } from 'vs/base/common/winjs.base';
-import Event, { Emitter, once, mapEvent, fromNodeEventEmitter } from 'vs/base/common/event';
+import { Event, Emitter, once, mapEvent, fromNodeEventEmitter } from 'vs/base/common/event';
 import { IMessagePassingProtocol, ClientConnectionEvent, IPCServer, IPCClient } from 'vs/base/parts/ipc/common/ipc';
 import { join } from 'path';
 import { tmpdir } from 'os';

src/vs/base/parts/ipc/test/node/ipc.perf.ts

@@ -106,9 +106,9 @@ suite('IPC performance', () => {
 				assert.strictEqual(hits, batches);
 				assert.strictEqual(count, batches * size);
 			}, err => assert.fail(err),
-			batch => {
-				hits++;
-				count += batch.length;
-			});
+				batch => {
+					hits++;
+					count += batch.length;
+				});
 	}
 });

src/vs/base/parts/ipc/test/node/testService.ts

@@ -6,7 +6,7 @@
 
 import { TPromise, PPromise } from 'vs/base/common/winjs.base';
 import { IChannel, eventToCall, eventFromCall } from 'vs/base/parts/ipc/common/ipc';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 
 export interface IMarcoPoloEvent {
 	answer: string;

src/vs/base/parts/quickopen/browser/quickOpenModel.ts

@@ -5,9 +5,9 @@
 
 'use strict';
 
-import nls = require('vs/nls');
+import * as nls from 'vs/nls';
 import { TPromise } from 'vs/base/common/winjs.base';
-import types = require('vs/base/common/types');
+import * as types from 'vs/base/common/types';
 import URI from 'vs/base/common/uri';
 import { ITree, IActionProvider } from 'vs/base/parts/tree/browser/tree';
 import { IconLabel, IIconLabelValueOptions } from 'vs/base/browser/ui/iconLabel/iconLabel';
@@ -16,7 +16,7 @@ import { Action, IAction, IActionRunner } from 'vs/base/common/actions';
 import { compareAnything } from 'vs/base/common/comparers';
 import { ActionBar, IActionItem } from 'vs/base/browser/ui/actionbar/actionbar';
 import { HighlightedLabel } from 'vs/base/browser/ui/highlightedlabel/highlightedLabel';
-import DOM = require('vs/base/browser/dom');
+import * as DOM from 'vs/base/browser/dom';
 import { IQuickOpenStyles } from 'vs/base/parts/quickopen/browser/quickOpenWidget';
 import { KeybindingLabel } from 'vs/base/browser/ui/keybindingLabel/keybindingLabel';
 import { OS } from 'vs/base/common/platform';

src/vs/base/parts/quickopen/browser/quickOpenWidget.ts

@@ -5,22 +5,22 @@
 'use strict';
 
 import 'vs/css!./quickopen';
-import nls = require('vs/nls');
+import * as nls from 'vs/nls';
 import { TPromise } from 'vs/base/common/winjs.base';
-import platform = require('vs/base/common/platform');
-import types = require('vs/base/common/types');
-import errors = require('vs/base/common/errors');
+import * as platform from 'vs/base/common/platform';
+import * as types from 'vs/base/common/types';
+import * as errors from 'vs/base/common/errors';
 import { IQuickNavigateConfiguration, IAutoFocus, IEntryRunContext, IModel, Mode, IKeyMods } from 'vs/base/parts/quickopen/common/quickOpen';
 import { Filter, Renderer, DataSource, IModelProvider, AccessibilityProvider } from 'vs/base/parts/quickopen/browser/quickOpenViewer';
-import { Dimension, Builder, $ } from 'vs/base/browser/builder';
-import { ISelectionEvent, IFocusEvent, ITree, ContextMenuEvent, IActionProvider, ITreeStyles, ITreeOptions, ITreeConfiguration } from 'vs/base/parts/tree/browser/tree';
+import { Builder, $ } from 'vs/base/browser/builder';
+import { ITree, ContextMenuEvent, IActionProvider, ITreeStyles, ITreeOptions, ITreeConfiguration } from 'vs/base/parts/tree/browser/tree';
 import { InputBox, MessageType, IInputBoxStyles, IRange } from 'vs/base/browser/ui/inputbox/inputBox';
 import Severity from 'vs/base/common/severity';
 import { Tree } from 'vs/base/parts/tree/browser/treeImpl';
 import { ProgressBar } from 'vs/base/browser/ui/progressbar/progressbar';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { DefaultController, ClickBehavior } from 'vs/base/parts/tree/browser/treeDefaults';
-import DOM = require('vs/base/browser/dom');
+import * as DOM from 'vs/base/browser/dom';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { ScrollbarVisibility } from 'vs/base/common/scrollable';
@@ -113,7 +113,7 @@ export class QuickOpenWidget implements IModelProvider {
 	private container: HTMLElement;
 	private treeElement: HTMLElement;
 	private inputElement: HTMLElement;
-	private layoutDimensions: Dimension;
+	private layoutDimensions: DOM.Dimension;
 	private model: IModel<any>;
 	private inputChangingTimeoutHandle: number;
 	private styles: IQuickOpenStyles;
@@ -130,8 +130,8 @@ export class QuickOpenWidget implements IModelProvider {
 		this.model = null;
 	}
 
-	public getElement(): Builder {
-		return $(this.builder);
+	public getElement(): HTMLElement {
+		return $(this.builder).getHTMLElement();
 	}
 
 	public getModel(): IModel<any> {
@@ -143,10 +143,10 @@ export class QuickOpenWidget implements IModelProvider {
 	}
 
 	public create(): HTMLElement {
-		this.builder = $().div((div: Builder) => {
+		this.builder = $().div(div => {
 
 			// Eventing
-			div.on(DOM.EventType.KEY_DOWN, (e) => {
+			div.on(DOM.EventType.KEY_DOWN, e => {
 				const keyboardEvent: StandardKeyboardEvent = new StandardKeyboardEvent(e as KeyboardEvent);
 				if (keyboardEvent.keyCode === KeyCode.Escape) {
 					DOM.EventHelper.stop(e, true);
@@ -160,10 +160,10 @@ export class QuickOpenWidget implements IModelProvider {
 
 			// Progress Bar
 			this.progressBar = new ProgressBar(div.clone(), { progressBarBackground: this.styles.progressBarBackground });
-			this.progressBar.getContainer().hide();
+			this.progressBar.hide();
 
 			// Input Field
-			div.div({ 'class': 'quick-open-input' }, (inputContainer) => {
+			div.div({ 'class': 'quick-open-input' }, inputContainer => {
 				this.inputContainer = inputContainer;
 				this.inputBox = new InputBox(inputContainer.getHTMLElement(), null, {
 					placeholder: this.options.inputPlaceHolder || '',
@@ -226,7 +226,7 @@ export class QuickOpenWidget implements IModelProvider {
 			// Tree
 			this.treeContainer = div.div({
 				'class': 'quick-open-tree'
-			}, (div: Builder) => {
+			}, div => {
 				const createTree = this.options.treeCreator || ((container, config, opts) => new Tree(container, config, opts));
 
 				this.tree = createTree(div.getHTMLElement(), {
@@ -240,6 +240,7 @@ export class QuickOpenWidget implements IModelProvider {
 						indentPixels: 0,
 						alwaysFocused: true,
 						verticalScrollMode: ScrollbarVisibility.Visible,
+						horizontalScrollMode: ScrollbarVisibility.Hidden,
 						ariaLabel: nls.localize('treeAriaLabel', "Quick Picker"),
 						keyboardSupport: this.options.keyboardSupport,
 						preventRootFocus: true
@@ -248,11 +249,11 @@ export class QuickOpenWidget implements IModelProvider {
 				this.treeElement = this.tree.getHTMLElement();
 
 				// Handle Focus and Selection event
-				this.toUnbind.push(this.tree.onDidChangeFocus((event: IFocusEvent) => {
+				this.toUnbind.push(this.tree.onDidChangeFocus(event => {
 					this.elementFocused(event.focus, event);
 				}));
 
-				this.toUnbind.push(this.tree.onDidChangeSelection((event: ISelectionEvent) => {
+				this.toUnbind.push(this.tree.onDidChangeSelection(event => {
 					if (event.selection && event.selection.length > 0) {
 						const mouseEvent: StandardMouseEvent = event.payload && event.payload.originalEvent instanceof StandardMouseEvent ? event.payload.originalEvent : void 0;
 						const shouldOpenInBackground = mouseEvent ? this.shouldOpenInBackground(mouseEvent) : false;
@@ -261,7 +262,7 @@ export class QuickOpenWidget implements IModelProvider {
 					}
 				}));
 			}).
-				on(DOM.EventType.KEY_DOWN, (e) => {
+				on(DOM.EventType.KEY_DOWN, e => {
 					const keyboardEvent: StandardKeyboardEvent = new StandardKeyboardEvent(e as KeyboardEvent);
 
 					// Only handle when in quick navigation mode
@@ -276,7 +277,7 @@ export class QuickOpenWidget implements IModelProvider {
 						this.navigateInTree(keyboardEvent.keyCode);
 					}
 				}).
-				on(DOM.EventType.KEY_UP, (e) => {
+				on(DOM.EventType.KEY_UP, e => {
 					const keyboardEvent: StandardKeyboardEvent = new StandardKeyboardEvent(e as KeyboardEvent);
 					const keyCode = keyboardEvent.keyCode;
 
@@ -287,7 +288,7 @@ export class QuickOpenWidget implements IModelProvider {
 
 					// Select element when keys are pressed that signal it
 					const quickNavKeys = this.quickNavigateConfiguration.keybindings;
-					const wasTriggerKeyPressed = keyCode === KeyCode.Enter || quickNavKeys.some((k) => {
+					const wasTriggerKeyPressed = keyCode === KeyCode.Enter || quickNavKeys.some(k => {
 						const [firstPart, chordPart] = k.getParts();
 						if (chordPart) {
 							return false;
@@ -327,7 +328,7 @@ export class QuickOpenWidget implements IModelProvider {
 		})
 
 			// Widget Attributes
-			.addClass('quick-open-widget')
+			.addClass('monaco-quick-open-widget')
 			.build(this.container);
 
 		// Support layout
@@ -447,7 +448,7 @@ export class QuickOpenWidget implements IModelProvider {
 			// Transition into quick navigate mode if not yet done
 			if (!this.quickNavigateConfiguration && quickNavigate) {
 				this.quickNavigateConfiguration = quickNavigate;
-				this.tree.DOMFocus();
+				this.tree.domFocus();
 			}
 
 			// Navigate
@@ -558,7 +559,7 @@ export class QuickOpenWidget implements IModelProvider {
 		if (this.quickNavigateConfiguration) {
 			this.inputContainer.hide();
 			this.builder.show();
-			this.tree.DOMFocus();
+			this.tree.domFocus();
 		}
 
 		// Otherwise use normal UI
@@ -779,11 +780,11 @@ export class QuickOpenWidget implements IModelProvider {
 		this.treeContainer.style({ height: (this.options.minItemsToShow ? this.options.minItemsToShow * 22 : 0) + 'px' });
 
 		// Clear any running Progress
-		this.progressBar.stop().getContainer().hide();
+		this.progressBar.stop().hide();
 
 		// Clear Focus
 		if (this.tree.isDOMFocused()) {
-			this.tree.DOMBlur();
+			this.tree.domBlur();
 		} else if (this.inputBox.hasFocus()) {
 			this.inputBox.blur();
 		}
@@ -810,11 +811,13 @@ export class QuickOpenWidget implements IModelProvider {
 		}
 	}
 
-	public setValue(value: string, selection?: [number, number]): void {
+	public setValue(value: string, selectionOrStableHint?: [number, number] | null): void {
 		if (this.inputBox) {
 			this.inputBox.value = value;
-			if (Array.isArray(selection)) {
-				const [start, end] = selection;
+			if (selectionOrStableHint === null) {
+				// null means stable-selection
+			} else if (Array.isArray(selectionOrStableHint)) {
+				const [start, end] = selectionOrStableHint;
 				this.inputBox.select({ start, end });
 			} else {
 				this.inputBox.select();
@@ -918,7 +921,7 @@ export class QuickOpenWidget implements IModelProvider {
 		return this.visible;
 	}
 
-	public layout(dimension: Dimension): void {
+	public layout(dimension: DOM.Dimension): void {
 		this.layoutDimensions = dimension;
 
 		// Apply to quick open width (height is dynamic by number of items to show)

src/vs/base/parts/quickopen/browser/quickopen.css

@@ -3,7 +3,7 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.quick-open-widget {
+.monaco-quick-open-widget {
 	position: absolute;
 	width: 600px;
 	z-index: 2000;
@@ -12,7 +12,7 @@
 	margin-left: -300px;
 }
 
-.quick-open-widget .progress-container {
+.monaco-quick-open-widget .monaco-progress-container {
 	position: absolute;
 	left: 0;
 	top: 38px;
@@ -20,34 +20,34 @@
 	height: 2px;
 }
 
-.quick-open-widget .progress-container .progress-bit {
+.monaco-quick-open-widget .monaco-progress-container .progress-bit {
 	height: 2px;
 }
 
-.quick-open-widget .quick-open-input {
+.monaco-quick-open-widget .quick-open-input {
 	width: 588px;
 	border: none;
 	margin: 6px;
 }
 
-.quick-open-widget .quick-open-input .monaco-inputbox {
+.monaco-quick-open-widget .quick-open-input .monaco-inputbox {
 	width: 100%;
 	height: 25px;
 }
 
-.quick-open-widget .quick-open-tree {
+.monaco-quick-open-widget .quick-open-tree {
 	line-height: 22px;
 }
 
-.quick-open-widget .quick-open-tree .monaco-tree-row  > .content > .sub-content {
+.monaco-quick-open-widget .quick-open-tree .monaco-tree-row  > .content > .sub-content {
 	overflow: hidden;
 }
 
-.quick-open-widget.content-changing .quick-open-tree .monaco-scrollable-element .slider {
+.monaco-quick-open-widget.content-changing .quick-open-tree .monaco-scrollable-element .slider {
 	display: none; /* scrollbar slider causes some hectic updates when input changes quickly, so hide it while quick open changes */
 }
 
-.quick-open-widget .quick-open-tree .quick-open-entry {
+.monaco-quick-open-widget .quick-open-tree .quick-open-entry {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	display: flex;
@@ -55,12 +55,12 @@
 	height: 100%;
 }
 
-.quick-open-widget .quick-open-tree .quick-open-entry > .quick-open-row {
+.monaco-quick-open-widget .quick-open-tree .quick-open-entry > .quick-open-row {
 	display: flex;
 	align-items: center;
 }
 
-.quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon {
+.monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon {
 	overflow: hidden;
 	width: 16px;
 	height: 16px;
@@ -70,39 +70,39 @@
 	flex-shrink: 0;
 }
 
-.quick-open-widget .quick-open-tree .monaco-icon-label,
-.quick-open-widget .quick-open-tree .monaco-icon-label .monaco-icon-label-description-container {
+.monaco-quick-open-widget .quick-open-tree .monaco-icon-label,
+.monaco-quick-open-widget .quick-open-tree .monaco-icon-label .monaco-icon-label-description-container {
 	flex: 1; /* make sure the icon label grows within the row */
 }
 
-.quick-open-widget .quick-open-tree .quick-open-entry .monaco-highlighted-label span {
+.monaco-quick-open-widget .quick-open-tree .quick-open-entry .monaco-highlighted-label span {
 	opacity: 1;
 }
 
-.quick-open-widget .quick-open-tree .quick-open-entry-meta {
+.monaco-quick-open-widget .quick-open-tree .quick-open-entry-meta {
 	opacity: 0.7;
 	line-height: normal;
 }
 
-.quick-open-widget .quick-open-tree .content.has-group-label .quick-open-entry-keybinding {
+.monaco-quick-open-widget .quick-open-tree .content.has-group-label .quick-open-entry-keybinding {
 	margin-right: 8px;
 }
 
-.quick-open-widget .quick-open-tree .quick-open-entry-keybinding .monaco-keybinding-key {
+.monaco-quick-open-widget .quick-open-tree .quick-open-entry-keybinding .monaco-keybinding-key {
 	vertical-align: text-bottom;
 }
 
-.quick-open-widget .quick-open-tree .results-group {
+.monaco-quick-open-widget .quick-open-tree .results-group {
 	margin-right: 18px;
 }
 
-.quick-open-widget .quick-open-tree .monaco-tree-row.focused > .content.has-actions > .results-group,
-.quick-open-widget .quick-open-tree .monaco-tree-row:hover:not(.highlighted) > .content.has-actions > .results-group,
-.quick-open-widget .quick-open-tree .focused .monaco-tree-row.focused > .content.has-actions > .results-group {
+.monaco-quick-open-widget .quick-open-tree .monaco-tree-row.focused > .content.has-actions > .results-group,
+.monaco-quick-open-widget .quick-open-tree .monaco-tree-row:hover:not(.highlighted) > .content.has-actions > .results-group,
+.monaco-quick-open-widget .quick-open-tree .focused .monaco-tree-row.focused > .content.has-actions > .results-group {
 	margin-right: 0px;
 }
 
-.quick-open-widget .quick-open-tree .results-group-separator {
+.monaco-quick-open-widget .quick-open-tree .results-group-separator {
 	border-top-width: 1px;
 	border-top-style: solid;
 	box-sizing: border-box;
@@ -154,6 +154,6 @@
 	height: 16px;
 }
 
-.quick-open-widget .quick-open-tree .monaco-highlighted-label .highlight {
+.monaco-quick-open-widget .quick-open-tree .monaco-highlighted-label .highlight {
 	font-weight: bold;
 }

src/vs/base/parts/quickopen/common/quickOpenScorer.ts

@@ -7,9 +7,9 @@
 
 import { compareAnything } from 'vs/base/common/comparers';
 import { matchesPrefix, IMatch, createMatches, matchesCamelCase, isUpper } from 'vs/base/common/filters';
-import { isEqual, nativeSep } from 'vs/base/common/paths';
-import { isWindows } from 'vs/base/common/platform';
-import { stripWildcards } from 'vs/base/common/strings';
+import { nativeSep } from 'vs/base/common/paths';
+import { isWindows, isLinux } from 'vs/base/common/platform';
+import { stripWildcards, equalsIgnoreCase } from 'vs/base/common/strings';
 import { CharCode } from 'vs/base/common/charCode';
 
 export type Score = [number /* score */, number[] /* match positions */];
@@ -313,7 +313,7 @@ export function prepareQuery(original: string): IPreparedQuery {
 	if (original) {
 		value = stripWildcards(original).replace(/\s/g, ''); // get rid of all wildcards and whitespace
 		if (isWindows) {
-			value = value.replace(/\//g, '\\'); // Help Windows users to search for paths when using slash
+			value = value.replace(/\//g, nativeSep); // Help Windows users to search for paths when using slash
 		}
 
 		lowercase = value.toLowerCase();
@@ -356,7 +356,7 @@ export function scoreItem<T>(item: T, query: IPreparedQuery, fuzzy: boolean, acc
 function doScoreItem(label: string, description: string, path: string, query: IPreparedQuery, fuzzy: boolean): IItemScore {
 
 	// 1.) treat identity matches on full path highest
-	if (path && isEqual(query.original, path, true)) {
+	if (path && isLinux ? query.original === path : equalsIgnoreCase(query.original, path)) {
 		return { score: PATH_IDENTITY_SCORE, labelMatch: [{ start: 0, end: label.length }], descriptionMatch: description ? [{ start: 0, end: description.length }] : void 0 };
 	}
 

src/vs/base/parts/tree/browser/tree.ts

@@ -4,13 +4,13 @@
  *--------------------------------------------------------------------------------------------*/
 'use strict';
 
-import WinJS = require('vs/base/common/winjs.base');
-import Touch = require('vs/base/browser/touch');
-import Mouse = require('vs/base/browser/mouseEvent');
-import Keyboard = require('vs/base/browser/keyboardEvent');
+import * as WinJS from 'vs/base/common/winjs.base';
+import * as Touch from 'vs/base/browser/touch';
+import * as Mouse from 'vs/base/browser/mouseEvent';
+import * as Keyboard from 'vs/base/browser/keyboardEvent';
 import { INavigator } from 'vs/base/common/iterator';
 import { ScrollbarVisibility } from 'vs/base/common/scrollable';
-import Event from 'vs/base/common/event';
+import { Event } from 'vs/base/common/event';
 import { IAction, IActionItem } from 'vs/base/common/actions';
 import { Color } from 'vs/base/common/color';
 import { IItemCollapseEvent, IItemExpandEvent } from 'vs/base/parts/tree/browser/treeModel';
@@ -60,7 +60,7 @@ export interface ITree {
 	/**
 	 * Sets DOM focus on the tree.
 	 */
-	DOMFocus(): void;
+	domFocus(): void;
 
 	/**
 	 * Returns whether the tree has DOM focus.
@@ -70,7 +70,7 @@ export interface ITree {
 	/**
 	 * Removes DOM focus from the tree.
 	 */
-	DOMBlur(): void;
+	domBlur(): void;
 
 	/**
 	 * Refreshes an element.
@@ -78,6 +78,11 @@ export interface ITree {
 	 */
 	refresh(element?: any, recursive?: boolean): WinJS.Promise;
 
+	/**
+	 * Updates an element's width.
+	 */
+	updateWidth(element: any): void;
+
 	/**
 	 * Expands an element.
 	 * The returned promise returns a boolean for whether the element was expanded or not.
@@ -674,6 +679,7 @@ export interface ITreeConfiguration {
 	filter?: IFilter;
 	sorter?: ISorter;
 	accessibilityProvider?: IAccessibilityProvider;
+	styler?: ITreeStyler;
 }
 
 export interface ITreeOptions extends ITreeStyles {
@@ -681,6 +687,7 @@ export interface ITreeOptions extends ITreeStyles {
 	showTwistie?: boolean;
 	indentPixels?: number;
 	verticalScrollMode?: ScrollbarVisibility;
+	horizontalScrollMode?: ScrollbarVisibility;
 	alwaysFocused?: boolean;
 	autoExpandSingleChildren?: boolean;
 	useShadows?: boolean;
@@ -690,6 +697,10 @@ export interface ITreeOptions extends ITreeStyles {
 	preventRootFocus?: boolean;
 }
 
+export interface ITreeStyler {
+	style(styles: ITreeStyles): void;
+}
+
 export interface ITreeStyles {
 	listFocusBackground?: Color;
 	listFocusForeground?: Color;

src/vs/base/parts/tree/browser/treeDefaults.ts

@@ -4,16 +4,16 @@
  *--------------------------------------------------------------------------------------------*/
 'use strict';
 
-import nls = require('vs/nls');
+import * as nls from 'vs/nls';
 import { TPromise } from 'vs/base/common/winjs.base';
 import { Action } from 'vs/base/common/actions';
-import platform = require('vs/base/common/platform');
-import touch = require('vs/base/browser/touch');
-import errors = require('vs/base/common/errors');
-import dom = require('vs/base/browser/dom');
-import mouse = require('vs/base/browser/mouseEvent');
+import * as platform from 'vs/base/common/platform';
+import * as touch from 'vs/base/browser/touch';
+import * as errors from 'vs/base/common/errors';
+import * as dom from 'vs/base/browser/dom';
+import * as mouse from 'vs/base/browser/mouseEvent';
 import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
-import _ = require('vs/base/parts/tree/browser/tree');
+import * as _ from 'vs/base/parts/tree/browser/tree';
 import { KeyCode, KeyMod, Keybinding, createKeybinding, SimpleKeybinding } from 'vs/base/common/keyCodes';
 
 export interface IKeyBindingCallback {
@@ -172,7 +172,7 @@ export class DefaultController implements _.IController {
 			}
 			eventish.stopPropagation();
 
-			tree.DOMFocus();
+			tree.domFocus();
 			tree.setSelection([element], payload);
 			tree.setFocus(element, payload);
 
@@ -447,6 +447,87 @@ export class DefaultAccessibilityProvider implements _.IAccessibilityProvider {
 	}
 }
 
+export class DefaultTreestyler implements _.ITreeStyler {
+
+	constructor(private styleElement: HTMLStyleElement, private selectorSuffix?: string) { }
+
+	style(styles: _.ITreeStyles): void {
+		const suffix = this.selectorSuffix ? `.${this.selectorSuffix}` : '';
+		const content: string[] = [];
+
+		if (styles.listFocusBackground) {
+			content.push(`.monaco-tree${suffix}.focused .monaco-tree-rows > .monaco-tree-row.focused:not(.highlighted) { background-color: ${styles.listFocusBackground}; }`);
+		}
+
+		if (styles.listFocusForeground) {
+			content.push(`.monaco-tree${suffix}.focused .monaco-tree-rows > .monaco-tree-row.focused:not(.highlighted) { color: ${styles.listFocusForeground}; }`);
+		}
+
+		if (styles.listActiveSelectionBackground) {
+			content.push(`.monaco-tree${suffix}.focused .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) { background-color: ${styles.listActiveSelectionBackground}; }`);
+		}
+
+		if (styles.listActiveSelectionForeground) {
+			content.push(`.monaco-tree${suffix}.focused .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) { color: ${styles.listActiveSelectionForeground}; }`);
+		}
+
+		if (styles.listFocusAndSelectionBackground) {
+			content.push(`
+				.monaco-tree-drag-image,
+				.monaco-tree${suffix}.focused .monaco-tree-rows > .monaco-tree-row.focused.selected:not(.highlighted) { background-color: ${styles.listFocusAndSelectionBackground}; }
+			`);
+		}
+
+		if (styles.listFocusAndSelectionForeground) {
+			content.push(`
+				.monaco-tree-drag-image,
+				.monaco-tree${suffix}.focused .monaco-tree-rows > .monaco-tree-row.focused.selected:not(.highlighted) { color: ${styles.listFocusAndSelectionForeground}; }
+			`);
+		}
+
+		if (styles.listInactiveSelectionBackground) {
+			content.push(`.monaco-tree${suffix} .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) { background-color: ${styles.listInactiveSelectionBackground}; }`);
+		}
+
+		if (styles.listInactiveSelectionForeground) {
+			content.push(`.monaco-tree${suffix} .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) { color: ${styles.listInactiveSelectionForeground}; }`);
+		}
+
+		if (styles.listHoverBackground) {
+			content.push(`.monaco-tree${suffix} .monaco-tree-rows > .monaco-tree-row:hover:not(.highlighted):not(.selected):not(.focused) { background-color: ${styles.listHoverBackground}; }`);
+		}
+
+		if (styles.listHoverForeground) {
+			content.push(`.monaco-tree${suffix} .monaco-tree-rows > .monaco-tree-row:hover:not(.highlighted):not(.selected):not(.focused) { color: ${styles.listHoverForeground}; }`);
+		}
+
+		if (styles.listDropBackground) {
+			content.push(`
+				.monaco-tree${suffix} .monaco-tree-wrapper.drop-target,
+				.monaco-tree${suffix} .monaco-tree-rows > .monaco-tree-row.drop-target { background-color: ${styles.listDropBackground} !important; color: inherit !important; }
+			`);
+		}
+
+		if (styles.listFocusOutline) {
+			content.push(`
+				.monaco-tree-drag-image																															{ border: 1px solid ${styles.listFocusOutline}; background: #000; }
+				.monaco-tree${suffix} .monaco-tree-rows > .monaco-tree-row 														{ border: 1px solid transparent; }
+				.monaco-tree${suffix}.focused .monaco-tree-rows > .monaco-tree-row.focused:not(.highlighted) 						{ border: 1px dotted ${styles.listFocusOutline}; }
+				.monaco-tree${suffix}.focused .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) 						{ border: 1px solid ${styles.listFocusOutline}; }
+				.monaco-tree${suffix} .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted)  							{ border: 1px solid ${styles.listFocusOutline}; }
+				.monaco-tree${suffix} .monaco-tree-rows > .monaco-tree-row:hover:not(.highlighted):not(.selected):not(.focused)  	{ border: 1px dashed ${styles.listFocusOutline}; }
+				.monaco-tree${suffix} .monaco-tree-wrapper.drop-target,
+				.monaco-tree${suffix} .monaco-tree-rows > .monaco-tree-row.drop-target												{ border: 1px dashed ${styles.listFocusOutline}; }
+			`);
+		}
+
+		const newStyles = content.join('\n');
+		if (newStyles !== this.styleElement.innerHTML) {
+			this.styleElement.innerHTML = newStyles;
+		}
+	}
+}
+
 export class CollapseAllAction extends Action {
 
 	constructor(private viewer: _.ITree, enabled: boolean) {
@@ -461,7 +542,7 @@ export class CollapseAllAction extends Action {
 		this.viewer.collapseAll();
 		this.viewer.clearSelection();
 		this.viewer.clearFocus();
-		this.viewer.DOMFocus();
+		this.viewer.domFocus();
 		this.viewer.focusFirst();
 
 		return TPromise.as(null);

src/vs/base/parts/tree/browser/treeDnd.ts

@@ -4,8 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 'use strict';
 
-import _ = require('vs/base/parts/tree/browser/tree');
-import Mouse = require('vs/base/browser/mouseEvent');
+import * as _ from 'vs/base/parts/tree/browser/tree';
+import * as Mouse from 'vs/base/browser/mouseEvent';
 
 export class ElementsDragAndDropData implements _.IDragAndDropData {
 

src/vs/base/parts/tree/browser/treeImpl.ts

@@ -5,17 +5,15 @@
 'use strict';
 
 import 'vs/css!./tree';
-import WinJS = require('vs/base/common/winjs.base');
-import TreeDefaults = require('vs/base/parts/tree/browser/treeDefaults');
-import Model = require('vs/base/parts/tree/browser/treeModel');
-import View = require('./treeView');
-import _ = require('vs/base/parts/tree/browser/tree');
+import * as WinJS from 'vs/base/common/winjs.base';
+import * as TreeDefaults from 'vs/base/parts/tree/browser/treeDefaults';
+import * as Model from 'vs/base/parts/tree/browser/treeModel';
+import * as View from './treeView';
+import * as _ from 'vs/base/parts/tree/browser/tree';
 import { INavigator, MappedNavigator } from 'vs/base/common/iterator';
-import Event, { Emitter, Relay } from 'vs/base/common/event';
+import { Event, Emitter, Relay } from 'vs/base/common/event';
 import { Color } from 'vs/base/common/color';
 import { mixin } from 'vs/base/common/objects';
-import { ISelectionEvent, IFocusEvent, IHighlightEvent } from 'vs/base/parts/tree/browser/tree';
-import { IItemCollapseEvent, IItemExpandEvent } from 'vs/base/parts/tree/browser/treeModel';
 
 export class TreeContext implements _.ITreeContext {
 
@@ -30,6 +28,7 @@ export class TreeContext implements _.ITreeContext {
 	public filter: _.IFilter;
 	public sorter: _.ISorter;
 	public accessibilityProvider: _.IAccessibilityProvider;
+	public styler: _.ITreeStyler;
 
 	constructor(tree: _.ITree, configuration: _.ITreeConfiguration, options: _.ITreeOptions = {}) {
 		this.tree = tree;
@@ -47,6 +46,7 @@ export class TreeContext implements _.ITreeContext {
 		this.filter = configuration.filter || new TreeDefaults.DefaultFilter();
 		this.sorter = configuration.sorter || null;
 		this.accessibilityProvider = configuration.accessibilityProvider || new TreeDefaults.DefaultAccessibilityProvider();
+		this.styler = configuration.styler || null;
 	}
 }
 
@@ -69,16 +69,16 @@ export class Tree implements _.ITree {
 	private model: Model.TreeModel;
 	private view: View.TreeView;
 
-	private _onDidChangeFocus = new Relay<IFocusEvent>();
-	readonly onDidChangeFocus: Event<IFocusEvent> = this._onDidChangeFocus.event;
-	private _onDidChangeSelection = new Relay<ISelectionEvent>();
-	readonly onDidChangeSelection: Event<ISelectionEvent> = this._onDidChangeSelection.event;
-	private _onHighlightChange = new Relay<IHighlightEvent>();
-	readonly onDidChangeHighlight: Event<IHighlightEvent> = this._onHighlightChange.event;
-	private _onDidExpandItem = new Relay<IItemExpandEvent>();
-	readonly onDidExpandItem: Event<IItemExpandEvent> = this._onDidExpandItem.event;
-	private _onDidCollapseItem = new Relay<IItemCollapseEvent>();
-	readonly onDidCollapseItem: Event<IItemCollapseEvent> = this._onDidCollapseItem.event;
+	private _onDidChangeFocus = new Relay<_.IFocusEvent>();
+	readonly onDidChangeFocus: Event<_.IFocusEvent> = this._onDidChangeFocus.event;
+	private _onDidChangeSelection = new Relay<_.ISelectionEvent>();
+	readonly onDidChangeSelection: Event<_.ISelectionEvent> = this._onDidChangeSelection.event;
+	private _onHighlightChange = new Relay<_.IHighlightEvent>();
+	readonly onDidChangeHighlight: Event<_.IHighlightEvent> = this._onHighlightChange.event;
+	private _onDidExpandItem = new Relay<Model.IItemExpandEvent>();
+	readonly onDidExpandItem: Event<Model.IItemExpandEvent> = this._onDidExpandItem.event;
+	private _onDidCollapseItem = new Relay<Model.IItemCollapseEvent>();
+	readonly onDidCollapseItem: Event<Model.IItemCollapseEvent> = this._onDidCollapseItem.event;
 	private _onDispose = new Emitter<void>();
 	readonly onDidDispose: Event<void> = this._onDispose.event;
 
@@ -122,11 +122,11 @@ export class Tree implements _.ITree {
 		return this.view.getHTMLElement();
 	}
 
-	public layout(height?: number): void {
-		this.view.layout(height);
+	public layout(height?: number, width?: number): void {
+		this.view.layout(height, width);
 	}
 
-	public DOMFocus(): void {
+	public domFocus(): void {
 		this.view.focus();
 	}
 
@@ -134,7 +134,7 @@ export class Tree implements _.ITree {
 		return this.view.isFocused();
 	}
 
-	public DOMBlur(): void {
+	public domBlur(): void {
 		this.view.blur();
 	}
 
@@ -158,6 +158,11 @@ export class Tree implements _.ITree {
 		return this.model.refresh(element, recursive);
 	}
 
+	public updateWidth(element: any): void {
+		let item = this.model.getItem(element);
+		return this.view.updateWidth(item);
+	}
+
 	public expand(element: any): WinJS.Promise {
 		return this.model.expand(element);
 	}
@@ -212,7 +217,7 @@ export class Tree implements _.ITree {
 	}
 
 	getContentHeight(): number {
-		return this.view.getTotalHeight();
+		return this.view.getContentHeight();
 	}
 
 	public setHighlight(element?: any, eventPayload?: any): void {

src/vs/base/parts/tree/browser/treeModel.ts

@@ -4,14 +4,14 @@
  *--------------------------------------------------------------------------------------------*/
 'use strict';
 
-import Assert = require('vs/base/common/assert');
+import * as Assert from 'vs/base/common/assert';
 import { onUnexpectedError } from 'vs/base/common/errors';
 import { IDisposable, combinedDisposable } from 'vs/base/common/lifecycle';
-import arrays = require('vs/base/common/arrays');
+import * as arrays from 'vs/base/common/arrays';
 import { INavigator } from 'vs/base/common/iterator';
-import WinJS = require('vs/base/common/winjs.base');
-import _ = require('./tree');
-import Event, { Emitter, once, EventMultiplexer, Relay } from 'vs/base/common/event';
+import * as WinJS from 'vs/base/common/winjs.base';
+import * as _ from './tree';
+import { Event, Emitter, once, EventMultiplexer, Relay } from 'vs/base/common/event';
 
 interface IMap<T> { [id: string]: T; }
 interface IItemMap extends IMap<Item> { }

src/vs/base/parts/tree/browser/treeView.ts

@@ -4,27 +4,28 @@
  *--------------------------------------------------------------------------------------------*/
 'use strict';
 
-import Platform = require('vs/base/common/platform');
-import Browser = require('vs/base/browser/browser');
-import WinJS = require('vs/base/common/winjs.base');
-import Lifecycle = require('vs/base/common/lifecycle');
-import DOM = require('vs/base/browser/dom');
-import Diff = require('vs/base/common/diff/diff');
-import Touch = require('vs/base/browser/touch');
-import strings = require('vs/base/common/strings');
-import Mouse = require('vs/base/browser/mouseEvent');
-import Keyboard = require('vs/base/browser/keyboardEvent');
-import Model = require('vs/base/parts/tree/browser/treeModel');
-import dnd = require('./treeDnd');
+import * as Platform from 'vs/base/common/platform';
+import * as Browser from 'vs/base/browser/browser';
+import * as WinJS from 'vs/base/common/winjs.base';
+import * as Lifecycle from 'vs/base/common/lifecycle';
+import * as DOM from 'vs/base/browser/dom';
+import * as Diff from 'vs/base/common/diff/diff';
+import * as Touch from 'vs/base/browser/touch';
+import * as strings from 'vs/base/common/strings';
+import * as Mouse from 'vs/base/browser/mouseEvent';
+import * as Keyboard from 'vs/base/browser/keyboardEvent';
+import * as Model from 'vs/base/parts/tree/browser/treeModel';
+import * as dnd from './treeDnd';
 import { ArrayIterator, MappedIterator } from 'vs/base/common/iterator';
 import { ScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
 import { ScrollbarVisibility } from 'vs/base/common/scrollable';
 import { HeightMap, IViewItem } from 'vs/base/parts/tree/browser/treeViewModel';
-import _ = require('vs/base/parts/tree/browser/tree');
+import * as _ from 'vs/base/parts/tree/browser/tree';
 import { KeyCode } from 'vs/base/common/keyCodes';
-import Event, { Emitter } from 'vs/base/common/event';
-import { IDomNodePagePosition } from 'vs/base/browser/dom';
+import { Event, Emitter } from 'vs/base/common/event';
 import { DataTransfers } from 'vs/base/browser/dnd';
+import { DefaultTreestyler } from './treeDefaults';
+import { Delayer } from 'vs/base/common/async';
 
 export interface IRow {
 	element: HTMLElement;
@@ -100,6 +101,7 @@ export class RowCache implements Lifecycle.IDisposable {
 
 export interface IViewContext extends _.ITreeContext {
 	cache: RowCache;
+	horizontalScrolling: boolean;
 }
 
 export class ViewItem implements IViewItem {
@@ -112,6 +114,7 @@ export class ViewItem implements IViewItem {
 
 	public top: number;
 	public height: number;
+	public width: number = 0;
 	public onDragStart: (e: DragEvent) => void;
 
 	public needsRender: boolean;
@@ -249,11 +252,35 @@ export class ViewItem implements IViewItem {
 			}
 		}
 
-		if (!skipUserRender) {
+		if (!skipUserRender && this.element) {
+			const style = window.getComputedStyle(this.element);
+			const paddingLeft = parseFloat(style.paddingLeft);
+
+			if (this.context.horizontalScrolling) {
+				this.element.style.width = 'fit-content';
+			}
+
 			this.context.renderer.renderElement(this.context.tree, this.model.getElement(), this.templateId, this.row.templateData);
+
+			if (this.context.horizontalScrolling) {
+				this.width = DOM.getContentWidth(this.element) + paddingLeft;
+				this.element.style.width = '';
+			}
 		}
 	}
 
+	updateWidth(): any {
+		if (!this.context.horizontalScrolling || !this.element) {
+			return;
+		}
+
+		const style = window.getComputedStyle(this.element);
+		const paddingLeft = parseFloat(style.paddingLeft);
+		this.element.style.width = 'fit-content';
+		this.width = DOM.getContentWidth(this.element) + paddingLeft;
+		this.element.style.width = '';
+	}
+
 	public insertInDOM(container: HTMLElement, afterElement: HTMLElement): void {
 		if (!this.row) {
 			this.row = this.context.cache.alloc(this.templateId);
@@ -378,12 +405,16 @@ export class TreeView extends HeightMap {
 	private domNode: HTMLElement;
 	private wrapper: HTMLElement;
 	private styleElement: HTMLStyleElement;
+	private treeStyler: _.ITreeStyler;
 	private rowsContainer: HTMLElement;
 	private scrollableElement: ScrollableElement;
 	private msGesture: MSGesture;
 	private lastPointerType: string;
 	private lastClickTimeStamp: number = 0;
 
+	private horizontalScrolling: boolean;
+	private contentWidthUpdateDelayer = new Delayer<void>(50);
+
 	private lastRenderTop: number;
 	private lastRenderHeight: number;
 
@@ -408,10 +439,10 @@ export class TreeView extends HeightMap {
 	private highlightedItemWasDraggable: boolean;
 	private onHiddenScrollTop: number;
 
-	private _onDOMFocus: Emitter<void> = new Emitter<void>();
+	private readonly _onDOMFocus: Emitter<void> = new Emitter<void>();
 	get onDOMFocus(): Event<void> { return this._onDOMFocus.event; }
 
-	private _onDOMBlur: Emitter<void> = new Emitter<void>();
+	private readonly _onDOMBlur: Emitter<void> = new Emitter<void>();
 	get onDOMBlur(): Event<void> { return this._onDOMBlur.event; }
 
 	constructor(context: _.ITreeContext, container: HTMLElement) {
@@ -420,6 +451,9 @@ export class TreeView extends HeightMap {
 		TreeView.counter++;
 		this.instance = TreeView.counter;
 
+		const horizontalScrollMode = typeof context.options.horizontalScrollMode === 'undefined' ? ScrollbarVisibility.Hidden : context.options.horizontalScrollMode;
+		this.horizontalScrolling = horizontalScrollMode !== ScrollbarVisibility.Hidden;
+
 		this.context = {
 			dataSource: context.dataSource,
 			renderer: context.renderer,
@@ -430,7 +464,8 @@ export class TreeView extends HeightMap {
 			tree: context.tree,
 			accessibilityProvider: context.accessibilityProvider,
 			options: context.options,
-			cache: new RowCache(context)
+			cache: new RowCache(context),
+			horizontalScrolling: this.horizontalScrolling
 		};
 
 		this.modelListeners = [];
@@ -446,6 +481,11 @@ export class TreeView extends HeightMap {
 
 		this.styleElement = DOM.createStyleSheet(this.domNode);
 
+		this.treeStyler = context.styler;
+		if (!this.treeStyler) {
+			this.treeStyler = new DefaultTreestyler(this.styleElement, `monaco-tree-instance-${this.instance}`);
+		}
+
 		// ARIA
 		this.domNode.setAttribute('role', 'tree');
 		if (this.context.options.ariaLabel) {
@@ -464,12 +504,12 @@ export class TreeView extends HeightMap {
 		this.wrapper.className = 'monaco-tree-wrapper';
 		this.scrollableElement = new ScrollableElement(this.wrapper, {
 			alwaysConsumeMouseWheel: true,
-			horizontal: ScrollbarVisibility.Hidden,
+			horizontal: horizontalScrollMode,
 			vertical: (typeof context.options.verticalScrollMode !== 'undefined' ? context.options.verticalScrollMode : ScrollbarVisibility.Auto),
 			useShadows: context.options.useShadows
 		});
 		this.scrollableElement.onScroll((e) => {
-			this.render(e.scrollTop, e.height);
+			this.render(e.scrollTop, e.height, e.scrollLeft, e.width, e.scrollWidth);
 		});
 
 		if (Browser.isIE) {
@@ -552,75 +592,7 @@ export class TreeView extends HeightMap {
 	}
 
 	public applyStyles(styles: _.ITreeStyles): void {
-		const content: string[] = [];
-
-		if (styles.listFocusBackground) {
-			content.push(`.monaco-tree.monaco-tree-instance-${this.instance}.focused .monaco-tree-rows > .monaco-tree-row.focused:not(.highlighted) { background-color: ${styles.listFocusBackground}; }`);
-		}
-
-		if (styles.listFocusForeground) {
-			content.push(`.monaco-tree.monaco-tree-instance-${this.instance}.focused .monaco-tree-rows > .monaco-tree-row.focused:not(.highlighted) { color: ${styles.listFocusForeground}; }`);
-		}
-
-		if (styles.listActiveSelectionBackground) {
-			content.push(`.monaco-tree.monaco-tree-instance-${this.instance}.focused .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) { background-color: ${styles.listActiveSelectionBackground}; }`);
-		}
-
-		if (styles.listActiveSelectionForeground) {
-			content.push(`.monaco-tree.monaco-tree-instance-${this.instance}.focused .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) { color: ${styles.listActiveSelectionForeground}; }`);
-		}
-
-		if (styles.listFocusAndSelectionBackground) {
-			content.push(`
-				.monaco-tree-drag-image,
-				.monaco-tree.monaco-tree-instance-${this.instance}.focused .monaco-tree-rows > .monaco-tree-row.focused.selected:not(.highlighted) { background-color: ${styles.listFocusAndSelectionBackground}; }
-			`);
-		}
-
-		if (styles.listFocusAndSelectionForeground) {
-			content.push(`
-				.monaco-tree-drag-image,
-				.monaco-tree.monaco-tree-instance-${this.instance}.focused .monaco-tree-rows > .monaco-tree-row.focused.selected:not(.highlighted) { color: ${styles.listFocusAndSelectionForeground}; }
-			`);
-		}
-
-		if (styles.listInactiveSelectionBackground) {
-			content.push(`.monaco-tree.monaco-tree-instance-${this.instance} .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) { background-color: ${styles.listInactiveSelectionBackground}; }`);
-		}
-
-		if (styles.listInactiveSelectionForeground) {
-			content.push(`.monaco-tree.monaco-tree-instance-${this.instance} .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) { color: ${styles.listInactiveSelectionForeground}; }`);
-		}
-
-		if (styles.listHoverBackground) {
-			content.push(`.monaco-tree.monaco-tree-instance-${this.instance} .monaco-tree-rows > .monaco-tree-row:hover:not(.highlighted):not(.selected):not(.focused) { background-color: ${styles.listHoverBackground}; }`);
-		}
-
-		if (styles.listHoverForeground) {
-			content.push(`.monaco-tree.monaco-tree-instance-${this.instance} .monaco-tree-rows > .monaco-tree-row:hover:not(.highlighted):not(.selected):not(.focused) { color: ${styles.listHoverForeground}; }`);
-		}
-
-		if (styles.listDropBackground) {
-			content.push(`
-				.monaco-tree.monaco-tree-instance-${this.instance} .monaco-tree-wrapper.drop-target,
-				.monaco-tree.monaco-tree-instance-${this.instance} .monaco-tree-rows > .monaco-tree-row.drop-target { background-color: ${styles.listDropBackground} !important; color: inherit !important; }
-			`);
-		}
-
-		if (styles.listFocusOutline) {
-			content.push(`
-				.monaco-tree-drag-image																															{ border: 1px solid ${styles.listFocusOutline}; background: #000; }
-				.monaco-tree.monaco-tree-instance-${this.instance} .monaco-tree-rows > .monaco-tree-row 														{ border: 1px solid transparent; }
-				.monaco-tree.monaco-tree-instance-${this.instance}.focused .monaco-tree-rows > .monaco-tree-row.focused:not(.highlighted) 						{ border: 1px dotted ${styles.listFocusOutline}; }
-				.monaco-tree.monaco-tree-instance-${this.instance}.focused .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) 						{ border: 1px solid ${styles.listFocusOutline}; }
-				.monaco-tree.monaco-tree-instance-${this.instance} .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted)  							{ border: 1px solid ${styles.listFocusOutline}; }
-				.monaco-tree.monaco-tree-instance-${this.instance} .monaco-tree-rows > .monaco-tree-row:hover:not(.highlighted):not(.selected):not(.focused)  	{ border: 1px dashed ${styles.listFocusOutline}; }
-				.monaco-tree.monaco-tree-instance-${this.instance} .monaco-tree-wrapper.drop-target,
-				.monaco-tree.monaco-tree-instance-${this.instance} .monaco-tree-rows > .monaco-tree-row.drop-target												{ border: 1px dashed ${styles.listFocusOutline}; }
-			`);
-		}
-
-		this.styleElement.innerHTML = content.join('\n');
+		this.treeStyler.style(styles);
 	}
 
 	protected createViewItem(item: Model.Item): IViewItem {
@@ -664,15 +636,20 @@ export class TreeView extends HeightMap {
 		return this.onHiddenScrollTop === null;
 	}
 
-	public layout(height?: number): void {
+	public layout(height?: number, width?: number): void {
 		if (!this.isTreeVisible()) {
 			return;
 		}
 
 		this.viewHeight = height || DOM.getContentHeight(this.wrapper); // render
+		this.scrollHeight = this.getContentHeight();
+
+		if (this.horizontalScrolling) {
+			this.viewWidth = width || DOM.getContentWidth(this.wrapper);
+		}
 	}
 
-	private render(scrollTop: number, viewHeight: number): void {
+	private render(scrollTop: number, viewHeight: number, scrollLeft: number, viewWidth: number, scrollWidth: number): void {
 		var i: number;
 		var stop: number;
 
@@ -706,6 +683,11 @@ export class TreeView extends HeightMap {
 			this.rowsContainer.style.top = (topItem.top - renderTop) + 'px';
 		}
 
+		if (this.horizontalScrolling) {
+			this.rowsContainer.style.left = -scrollLeft + 'px';
+			this.rowsContainer.style.width = `${Math.max(scrollWidth, viewWidth)}px`;
+		}
+
 		this.lastRenderTop = renderTop;
 		this.lastRenderHeight = renderBottom - renderTop;
 	}
@@ -746,6 +728,24 @@ export class TreeView extends HeightMap {
 		}
 
 		this.scrollTop = scrollTop;
+		this.updateScrollWidth();
+	}
+
+	private updateScrollWidth(): void {
+		if (!this.horizontalScrolling) {
+			return;
+		}
+
+		this.contentWidthUpdateDelayer.trigger(() => {
+			const keys = Object.keys(this.items);
+			let scrollWidth = 0;
+
+			for (const key of keys) {
+				scrollWidth = Math.max(scrollWidth, this.items[key].width);
+			}
+
+			this.scrollWidth = scrollWidth + 10 /* scrollbar */;
+		});
 	}
 
 	public focusNextPage(eventPayload?: any): void {
@@ -803,11 +803,25 @@ export class TreeView extends HeightMap {
 		return scrollDimensions.height;
 	}
 
-	public set viewHeight(viewHeight: number) {
-		this.scrollableElement.setScrollDimensions({
-			height: viewHeight,
-			scrollHeight: this.getTotalHeight()
-		});
+	public set viewHeight(height: number) {
+		this.scrollableElement.setScrollDimensions({ height });
+	}
+
+	private set scrollHeight(scrollHeight: number) {
+		this.scrollableElement.setScrollDimensions({ scrollHeight });
+	}
+
+	public get viewWidth(): number {
+		const scrollDimensions = this.scrollableElement.getScrollDimensions();
+		return scrollDimensions.width;
+	}
+
+	public set viewWidth(viewWidth: number) {
+		this.scrollableElement.setScrollDimensions({ width: viewWidth });
+	}
+
+	private set scrollWidth(scrollWidth: number) {
+		this.scrollableElement.setScrollDimensions({ scrollWidth });
 	}
 
 	public get scrollTop(): number {
@@ -817,7 +831,7 @@ export class TreeView extends HeightMap {
 
 	public set scrollTop(scrollTop: number) {
 		this.scrollableElement.setScrollDimensions({
-			scrollHeight: this.getTotalHeight()
+			scrollHeight: this.getContentHeight()
 		});
 		this.scrollableElement.setScrollPosition({
 			scrollTop: scrollTop
@@ -825,12 +839,12 @@ export class TreeView extends HeightMap {
 	}
 
 	public getScrollPosition(): number {
-		const height = this.getTotalHeight() - this.viewHeight;
+		const height = this.getContentHeight() - this.viewHeight;
 		return height <= 0 ? 1 : this.scrollTop / height;
 	}
 
 	public setScrollPosition(pos: number): void {
-		const height = this.getTotalHeight() - this.viewHeight;
+		const height = this.getContentHeight() - this.viewHeight;
 		this.scrollTop = height * pos;
 	}
 
@@ -999,6 +1013,21 @@ export class TreeView extends HeightMap {
 		}
 	}
 
+	public updateWidth(item: Model.Item): void {
+		if (!item || !item.isVisible()) {
+			return;
+		}
+
+		const viewItem = this.items[item.id];
+
+		if (!viewItem) {
+			return;
+		}
+
+		viewItem.updateWidth();
+		this.updateScrollWidth();
+	}
+
 	public getRelativeTop(item: Model.Item): number {
 		if (item && item.isVisible()) {
 			var viewItem = this.items[item.id];
@@ -1222,7 +1251,7 @@ export class TreeView extends HeightMap {
 			var keyboardEvent = new Keyboard.StandardKeyboardEvent(<KeyboardEvent>event);
 			element = this.model.getFocus();
 
-			var position: IDomNodePagePosition;
+			var position: DOM.IDomNodePagePosition;
 
 			if (!element) {
 				element = this.model.getInput();
@@ -1652,6 +1681,11 @@ export class TreeView extends HeightMap {
 		}
 		this.domNode = null;
 
+		if (this.items) {
+			Object.keys(this.items).forEach(key => this.items[key].removeFromDOM());
+			this.items = null;
+		}
+
 		if (this.context.cache) {
 			this.context.cache.dispose();
 			this.context.cache = null;

src/vs/base/parts/tree/browser/treeViewModel.ts

@@ -10,6 +10,7 @@ export interface IViewItem {
 	model: Item;
 	top: number;
 	height: number;
+	width: number;
 }
 
 export class HeightMap {
@@ -22,7 +23,7 @@ export class HeightMap {
 		this.indexes = {};
 	}
 
-	public getTotalHeight(): number {
+	public getContentHeight(): number {
 		var last = this.heightMap[this.heightMap.length - 1];
 		return !last ? 0 : last.top + last.height;
 	}

src/vs/base/parts/tree/test/browser/treeViewModel.test.ts

@@ -5,7 +5,7 @@
 
 'use strict';
 
-import assert = require('assert');
+import * as assert from 'assert';
 import { ArrayIterator } from 'vs/base/common/iterator';
 import { HeightMap, IViewItem } from 'vs/base/parts/tree/browser/treeViewModel';
 
@@ -45,7 +45,8 @@ class TestHeightMap extends HeightMap {
 		return {
 			model: item,
 			top: 0,
-			height: item.getHeight()
+			height: item.getHeight(),
+			width: 0
 		};
 	}
 }