Merge VS Code 1.26.1 (#2394)

* Squash merge commits for 1.26 (#1) (#2323) * Polish tag search as per feedback (#55269) * Polish tag search as per feedback * Updated regex * Allow users to opt-out of features that send online requests in the background (#55097) * settings sweep #54690 * Minor css tweaks to enable eoverflow elipsis in more places (#55277) * fix an issue with titlebarheight when not scaling with zoom * Settings descriptions update #54690 * fixes #55209 * Settings editor - many padding fixes * More space above level 2 label * Fixing Cannot debug npm script using Yarn #55103 * Settings editor - show ellipsis when description overflows * Settings editor - ... fix measuring around links, relayout * Setting descriptions * Settings editor - fix ... for some short lines, fix select container width * Settings editor - overlay trees so scrollable shadow is full width * Fix #54133 - missing extension settings after reload * Settings color token description tweak * Settings editor - disable overflow indicator temporarily, needs to be faster * Added command to Run the selected npm script * fixes #54452 * fixes #54929 * fixes #55248 * prefix command with extension name * Contribute run selected to the context menu * node-debug@1.26.6 * Allow terminal rendererType to be swapped out at runtime Part of #53274 Fixes #55344 * Settings editor - fix not focusing search when restoring editor setInput must be actually async. Will be fixed naturally when we aren't using winJS promises... * Settings editor - TOC should only expand the section with a selected item * Bump node-debug2 * Settings editor - Tree focus outlines * Settings editor - don't blink the scrollbar when toc selection changes And hide TOC correctly when the editor is narrow * Settings editor - header rows should not be selectable * fixes #54877 * change debug assignee to isi * Settings sweep (#54690) * workaround for #55051 * Settings sweep (#54690) * settings sweep #54690 * Don't try closing tags when you type > after another > * Describe what implementation code lens does Fixes #55370 * fix javadoc formatter setting description * fixes #55325 * update to officical TS version * Settings editor - Even more padding, use semibold instead of bold * Fix #55357 - fix TOC twistie * fixes #55288 * explorer: refresh on di change file system provider registration fixes #53256 * Disable push to Linux repo to test standalone publisher * New env var to notify log level to extensions #54001 * Disable snippets in extension search (when not in suggest dropdown) (#55281) * Disable snippits in extension search (when not in suggest dropdown) * Add monaco input contributions * Fix bug preventing snippetSuggestions from taking effect in sub-editors * Latest emmet helper to fix #52366 * Fix comment updates for threads within same file * Allow extensions to log telemetry to log files #54001 * Pull latest css grammar * files.exclude control - use same style for "add" vs "edit" * files.exclude control - focus/keyboard behavior * don't show menubar too early * files.exclude - better styling * Place cursor at end of extensions search box on autofill (#55254) * Place cursor at end of extensions search box on autofill * Use position instead of selection * fix linux build issue (empty if block) * Settings editor - fix extension category prefixes * Settings editor - add simple ellipsis for first line that overflows, doesn't cover case when first line does not overflow but there is more text, TODO * File/Text search provider docs * Fixes #52655 * Include epoch (#55008) * Fixes #53385 * Fixes #49480 * VS Code Insiders (Users) not opening Fixes #55353 * Better handling of the case when the extension host fails to start * Fixes #53966 * Remove confusing Start from wordPartLeft commands ID * vscode-xterm@3.6.0-beta12 Fixes #55488 * Initial size is set to infinity!! Fixes #55461 * Polish embeddedEditorBackground * configuration service misses event * Fix #55224 - fix duplicate results in multiroot workspace from splitting the diskseach query * Select all not working in issue reporter on mac, fixes #55424 * Disable fuzzy matching for extensions autosuggest (#55498) * Fix clipping of extensions search border in some third party themes (#55504) * fixes #55538 * Fix bug causing an aria alert to not be shown the third time (and odd numbers thereafter) * Settings editor - work around rendering glitch with webkit-line-clamp * Settings editor - revert earlier '...' changes * Settings editor - move enumDescription to its own div, because it disturbs -webkit-line-clamp for some reason * Settings editor - better overflow indicator * Don't show existing filters in autocomplete (#55495) * Dont show existing filters in autocomplete * Simplify * Settings Editor: Add aria labels for input elements Fixes: #54836 (#55543) * fixes #55223 * Update vscode-css-languageservice to 3.0.10-next.1 * Fix #55509 - settings navigation * Fix #55519 * Fix #55520 * FIx #55524 * Fix #55556 - include wordSeparators in all search queries, so findTextInFiles can respect isWordMatch correctly * oss updates for endgame * Fix unit tests * fixes #55522 * Avoid missing manifest error from bubbling up #54757 * Settings format crawl * Search provider - Fix FileSearchProvider to return array, not progress * Fix #55598 * Settings editor - fix NPE rendering settings with no description * dont render inden guides in search box (#55600) * fixes #55454 * More settings crawl * Another change for #55598 - maxResults applies to FileSearch and TextSearch but not FileIndex * Fix FileSearchProvider unit tests for progress change * fixes #55561 * Settings description update for #54690 * Update setting descriptions for online services * Minor edits * fixes #55513 * fixes #55451 * Fix #55612 - fix findTextInFiles cancellation * fixes #55539 * More setting description tweaks * Setting to disable online experiments #54354 * fixes #55507 * fixes #55515 * Show online services action only in Insiders for now * Settings editor - change toc behavior default to 'filter' * Settings editor - nicer filter count style during search * Fix #55617 - search viewlet icons * Settings editor - better styling for element count indicator * SearchProvider - fix NPE when searching extraFileResources * Allow extends to work without json suffix Fixes #16905 * Remove accessability options logic entirely Follow up on #55451 * use latest version of DAP * fixes #55490 * fixes #55122 * fixes #52332 * Avoid assumptions about git: URIs (fixes #36236) * relative path for descriptions * resourece: get rid of isFile context key fixes #48275 * Register previous ids for compatibility (#53497) * more tuning for #48275 * no need to always re-read "files explorer" fixes #52003 * read out active composites properly fixes #51967 * Update link colors for hc theme to meet color contrast ratio, fixes #55651 Also updated link color for `textLinkActiveForeground` to be the same as `textLinkForeground` as it wasn't properly updated * detect 'winpty-agent.exe'; fixes #55672 * node-debug@1.26.7 * reset counter on new label * Settings editor - fix multiple setting links in one description * Settings editor - color code blocks in setting descriptions, fix #55532 * Settings editor - hover color in TOC * Settings editor - fix navigation NPE * Settings editor - fix text control width * Settings editor - maybe fix #55684 * Fix bug causing cursor to not move on paste * fixes #53582 * Use ctrlCmd instead of ctrl for go down from search box * fixes #55264 * fixes #55456 * filter for spcaes before triggering search (#55611) * Fix #55698 - don't lose filtered TOC counts when refreshing TOC * fixes #55421 * fixes #28979 * fixes #55576 * only add check for updates to windows/linux help * readonly files: append decoration to label fixes #53022 * debug: do not show toolbar while initialising fixes #55026 * Opening launch.json should not activate debug extensions fixes #55029 * fixes #55435 * fixes #55434 * fixes #55439 * trigger menu only on altkey up * Fix #50555 - fix settings editor memory leak * Fix #55712 - no need to focus 'a' anymore when restoring control focus after tree render * fixes #55335 * proper fix for readonly model fixes #53022 * improve FoldingRangeKind spec (for #55686) * Use class with static fields (fixes #55494) * Fixes #53671 * fixes #54630 * [html] should disable ionic suggestions by default. Currently forces deprecated Ionic v1 suggestions in .html files while typing. Fixes #53324 * cleanup deps * debug issues back to andre * update electron for smoketest * Fix #55757 - prevent settings tabs from overflowing * Fix #53897 - revert setting menu defaults to old editor * Add enum descriptions to `typescript.preferences.importModuleSpecifier` * Fix #55767 - leaking style elements from settings editor * Fix #55521 - prevent flashing when clicking in exclude control * Update Git modified color for contrast ratio, fixes #53140 * Revert "Merge branch 'master' of github.com:Microsoft/vscode" This reverts commit bf46b6bfbae0cab99c2863e1244a916181fa9fbc, reversing changes made to e275a424483dfb4ed33b428c97d5e2c441d6b917. * Revert "Revert "Merge branch 'master' of github.com:Microsoft/vscode"" This reverts commit 53949d963f39e40757557c6526332354a31d9154. * don't ask to install an incomplete menu * Fix NPE in terminal AccessibilityManager Fixes #55744 * don't display fallback menu unless we've closed the last window * fixes #55547 * Fix smoke tests for extension search box * Update OSSREADME.json for Electron 2.0.5 * Update distro Includes Chromium license changes * fix #55455 * fix #55865 * fixes #55893 * Fix bug causing workspace recommendations to go away upon ignoring a recommendation (#55805) * Fix bug causing workspace recommendations to go away upon ignoring a recommendation * ONly show on @recommended or @recommended:workspace * Make more consistant * Fix #55911 * Understand json activity (#55926) * Understand json file activity * Refactoring * adding composer.json * Distro update for experiments * use terminal.processId for auto-attach; fixes #55918 * Reject invalid URI with vscode.openFolder (for #55891) * improve win32 setup system vs user detection fixes #55840 fixes #55840 delay winreg import related to #55840 show notification earlier related to #55840 fix #55840 update inno setup message related to #55840 * Fix #55593 - this code only operates on local paths, so use fsPath and Uri.file instead * Bring back the old menu due to electron 2.0 issues (#55913) * add the old menu back for native menus * make menu labels match * `vscode.openFolder`: treat missing URI schema gracefully (for #55891) * delay EH reattach; fixes #55955 * Mark all json files under appSettingsHome as settings * Use localized strings for telemetry opt-out * Exception when saving file editor opened from remote file provider (fixes #55051) * Remove terminal menu from stable Fixes 56003 * VSCode Insiders crashes on open with TypeError: Cannot read property 'lastIndexOf' of undefined. Fixes #54933 * improve fix for #55891 * fix #55916 * Improve #55891 * increase EH debugging restart delay; fixes #55955 * Revert "Don't include non-resource entries in history quick pick" This reverts commit 37209a838e9f7e9abe6dc53ed73cdf1e03b72060. * Diff editor: horizontal scrollbar height is smaller (fixes #56062) * improve openFolder uri fix (correctly treat backslashes) * fixes #56116 repair ipc for native menubar keybindings * Fix #56240 - Open the JSON settings editor instead of the UI editor * Fix #55536 * uriDisplay: if no formatter is registered fall back to getPathlabel fixes #56104 * VSCode hangs when opening python file. Fixes #56377 * VS Code Hangs When Opening Specific PowerShell File. Fixes #56430 * Fix #56433 - search extraFileResources even when no folders open * Workaround #55649 * Fix in master #56371 * Fix tests #56371 * Fix in master #56317 * increase version to 1.26.1 * Fixes #56387: Handle SIGPIPE in extension host * fixes #56185 * Fix merge issues (part 1) * Fix build breaks (part 1) * Build breaks (part 2) * Build breaks (part 3) * More build breaks (part 4) * Fix build breaks (part 5) * WIP * Fix menus * Render query result and message panels (#2363) * Put back query editor hot exit changes * Fix grid changes that broke profiler (#2365) * Update APIs for saving query editor state * Fix restore view state for profiler and edit data * Updating custom default themes to support 4.5:1 contrast ratio * Test updates * Fix Extension Manager and Windows Setup * Update license headers * Add appveyor and travis files back * Fix hidden modal dropdown issue
2026-02-12 02:58:31 -05:00 · 2018-09-04 14:55:00 -07:00
parent 3763278366
commit 81329fa7fa
2638 changed files with 118456 additions and 64012 deletions
--- a/src/vs/base/browser/ui/grid/grid.ts
+++ b/src/vs/base/browser/ui/grid/grid.ts
@@ -0,0 +1,630 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+import 'vs/css!./gridview';
+import { Orientation } from 'vs/base/browser/ui/sash/sash';
+import { IDisposable, dispose } from 'vs/base/common/lifecycle';
+import { tail2 as tail } from 'vs/base/common/arrays';
+import { orthogonal, IView, GridView, Sizing as GridViewSizing, Box, IGridViewStyles } from './gridview';
+import { Event } from 'vs/base/common/event';
+
+export { Orientation } from './gridview';
+
+export enum Direction {
+	Up,
+	Down,
+	Left,
+	Right
+}
+
+function oppositeDirection(direction: Direction): Direction {
+	switch (direction) {
+		case Direction.Up: return Direction.Down;
+		case Direction.Down: return Direction.Up;
+		case Direction.Left: return Direction.Right;
+		case Direction.Right: return Direction.Left;
+	}
+}
+
+export interface GridLeafNode<T extends IView> {
+	readonly view: T;
+	readonly box: Box;
+}
+
+export interface GridBranchNode<T extends IView> {
+	readonly children: GridNode<T>[];
+	readonly box: Box;
+}
+
+export type GridNode<T extends IView> = GridLeafNode<T> | GridBranchNode<T>;
+
+export function isGridBranchNode<T extends IView>(node: GridNode<T>): node is GridBranchNode<T> {
+	return !!(node as any).children;
+}
+
+function getGridNode<T extends IView>(node: GridNode<T>, location: number[]): GridNode<T> {
+	if (location.length === 0) {
+		return node;
+	}
+
+	if (!isGridBranchNode(node)) {
+		throw new Error('Invalid location');
+	}
+
+	const [index, ...rest] = location;
+	return getGridNode(node.children[index], rest);
+}
+
+interface Range {
+	readonly start: number;
+	readonly end: number;
+}
+
+function intersects(one: Range, other: Range): boolean {
+	return !(one.start >= other.end || other.start >= one.end);
+}
+
+interface Boundary {
+	readonly offset: number;
+	readonly range: Range;
+}
+
+function getBoxBoundary(box: Box, direction: Direction): Boundary {
+	const orientation = getDirectionOrientation(direction);
+	const offset = direction === Direction.Up ? box.top :
+		direction === Direction.Right ? box.left + box.width :
+			direction === Direction.Down ? box.top + box.height :
+				box.left;
+
+	const range = {
+		start: orientation === Orientation.HORIZONTAL ? box.top : box.left,
+		end: orientation === Orientation.HORIZONTAL ? box.top + box.height : box.left + box.width
+	};
+
+	return { offset, range };
+}
+
+function findAdjacentBoxLeafNodes<T extends IView>(boxNode: GridNode<T>, direction: Direction, boundary: Boundary): GridLeafNode<T>[] {
+	const result: GridLeafNode<T>[] = [];
+
+	function _(boxNode: GridNode<T>, direction: Direction, boundary: Boundary): void {
+		if (isGridBranchNode(boxNode)) {
+			for (const child of boxNode.children) {
+				_(child, direction, boundary);
+			}
+		} else {
+			const { offset, range } = getBoxBoundary(boxNode.box, direction);
+
+			if (offset === boundary.offset && intersects(range, boundary.range)) {
+				result.push(boxNode);
+			}
+		}
+	}
+
+	_(boxNode, direction, boundary);
+	return result;
+}
+
+function getLocationOrientation(rootOrientation: Orientation, location: number[]): Orientation {
+	return location.length % 2 === 0 ? orthogonal(rootOrientation) : rootOrientation;
+}
+
+function getDirectionOrientation(direction: Direction): Orientation {
+	return direction === Direction.Up || direction === Direction.Down ? Orientation.VERTICAL : Orientation.HORIZONTAL;
+}
+
+function getSize(dimensions: { width: number; height: number; }, orientation: Orientation) {
+	return orientation === Orientation.HORIZONTAL ? dimensions.width : dimensions.height;
+}
+
+export function getRelativeLocation(rootOrientation: Orientation, location: number[], direction: Direction): number[] {
+	const orientation = getLocationOrientation(rootOrientation, location);
+	const directionOrientation = getDirectionOrientation(direction);
+
+	if (orientation === directionOrientation) {
+		let [rest, index] = tail(location);
+
+		if (direction === Direction.Right || direction === Direction.Down) {
+			index += 1;
+		}
+
+		return [...rest, index];
+	} else {
+		const index = (direction === Direction.Right || direction === Direction.Down) ? 1 : 0;
+		return [...location, index];
+	}
+}
+
+function indexInParent(element: HTMLElement): number {
+	const parentElement = element.parentElement;
+	let el = parentElement.firstElementChild;
+	let index = 0;
+
+	while (el !== element && el !== parentElement.lastElementChild) {
+		el = el.nextElementSibling;
+		index++;
+	}
+
+	return index;
+}
+
+/**
+ * Find the grid location of a specific DOM element by traversing the parent
+ * chain and finding each child index on the way.
+ *
+ * This will break as soon as DOM structures of the Splitview or Gridview change.
+ */
+function getGridLocation(element: HTMLElement): number[] {
+	if (/\bmonaco-grid-view\b/.test(element.parentElement.className)) {
+		return [];
+	}
+
+	const index = indexInParent(element.parentElement);
+	const ancestor = element.parentElement.parentElement.parentElement.parentElement;
+	return [...getGridLocation(ancestor), index];
+}
+
+export enum Sizing {
+	Distribute = 'distribute',
+	Split = 'split'
+}
+
+export interface IGridStyles extends IGridViewStyles { }
+
+export interface IGridOptions {
+	styles?: IGridStyles;
+}
+
+export class Grid<T extends IView> implements IDisposable {
+
+	protected gridview: GridView;
+	private views = new Map<T, HTMLElement>();
+	private disposables: IDisposable[] = [];
+
+	get orientation(): Orientation { return this.gridview.orientation; }
+	set orientation(orientation: Orientation) { this.gridview.orientation = orientation; }
+
+	get width(): number { return this.gridview.width; }
+	get height(): number { return this.gridview.height; }
+
+	get minimumWidth(): number { return this.gridview.minimumWidth; }
+	get minimumHeight(): number { return this.gridview.minimumHeight; }
+	get maximumWidth(): number { return this.gridview.maximumWidth; }
+	get maximumHeight(): number { return this.gridview.maximumHeight; }
+	get onDidChange(): Event<{ width: number; height: number; }> { return this.gridview.onDidChange; }
+
+	get element(): HTMLElement { return this.gridview.element; }
+
+	sashResetSizing: Sizing = Sizing.Distribute;
+
+	constructor(view: T, options: IGridOptions = {}) {
+		this.gridview = new GridView(options);
+		this.disposables.push(this.gridview);
+
+		this.gridview.onDidSashReset(this.doResetViewSize, this, this.disposables);
+
+		this._addView(view, 0, [0]);
+	}
+
+	style(styles: IGridStyles): void {
+		this.gridview.style(styles);
+	}
+
+	layout(width: number, height: number): void {
+		this.gridview.layout(width, height);
+	}
+
+	addView(newView: T, size: number | Sizing, referenceView: T, direction: Direction): void {
+		if (this.views.has(newView)) {
+			throw new Error('Can\'t add same view twice');
+		}
+
+		const orientation = getDirectionOrientation(direction);
+
+		if (this.views.size === 1 && this.orientation !== orientation) {
+			this.orientation = orientation;
+		}
+
+		const referenceLocation = this.getViewLocation(referenceView);
+		const location = getRelativeLocation(this.gridview.orientation, referenceLocation, direction);
+
+		let viewSize: number | GridViewSizing;
+
+		if (size === Sizing.Split) {
+			const [, index] = tail(referenceLocation);
+			viewSize = GridViewSizing.Split(index);
+		} else if (size === Sizing.Distribute) {
+			viewSize = GridViewSizing.Distribute;
+		} else {
+			viewSize = size;
+		}
+
+		this._addView(newView, viewSize, location);
+	}
+
+	protected _addView(newView: T, size: number | GridViewSizing, location): void {
+		this.views.set(newView, newView.element);
+		this.gridview.addView(newView, size, location);
+	}
+
+	removeView(view: T, sizing?: Sizing): void {
+		if (this.views.size === 1) {
+			throw new Error('Can\'t remove last view');
+		}
+
+		if (!this.views.has(view)) {
+			throw new Error('View not found');
+		}
+
+		const location = this.getViewLocation(view);
+		this.gridview.removeView(location, sizing === Sizing.Distribute ? GridViewSizing.Distribute : undefined);
+		this.views.delete(view);
+	}
+
+	swapViews(from: T, to: T): void {
+		const fromLocation = this.getViewLocation(from);
+		const toLocation = this.getViewLocation(to);
+		return this.gridview.swapViews(fromLocation, toLocation);
+	}
+
+	resizeView(view: T, size: number): void {
+		const location = this.getViewLocation(view);
+		return this.gridview.resizeView(location, size);
+	}
+
+	getViewSize(view: T): number {
+		const location = this.getViewLocation(view);
+		const viewSize = this.gridview.getViewSize(location);
+		return getLocationOrientation(this.orientation, location) === Orientation.HORIZONTAL ? viewSize.width : viewSize.height;
+	}
+
+	// TODO@joao cleanup
+	getViewSize2(view: T): { width: number; height: number; } {
+		const location = this.getViewLocation(view);
+		return this.gridview.getViewSize(location);
+	}
+
+	maximizeViewSize(view: T): void {
+		const location = this.getViewLocation(view);
+		this.gridview.maximizeViewSize(location);
+	}
+
+	distributeViewSizes(): void {
+		this.gridview.distributeViewSizes();
+	}
+
+	getViews(): GridBranchNode<T> {
+		return this.gridview.getViews() as GridBranchNode<T>;
+	}
+
+	getNeighborViews(view: T, direction: Direction, wrap: boolean = false): T[] {
+		const location = this.getViewLocation(view);
+		const root = this.getViews();
+		const node = getGridNode(root, location);
+		let boundary = getBoxBoundary(node.box, direction);
+
+		if (wrap) {
+			if (direction === Direction.Up && node.box.top === 0) {
+				boundary = { offset: root.box.top + root.box.height, range: boundary.range };
+			} else if (direction === Direction.Right && node.box.left + node.box.width === root.box.width) {
+				boundary = { offset: 0, range: boundary.range };
+			} else if (direction === Direction.Down && node.box.top + node.box.height === root.box.height) {
+				boundary = { offset: 0, range: boundary.range };
+			} else if (direction === Direction.Left && node.box.left === 0) {
+				boundary = { offset: root.box.left + root.box.width, range: boundary.range };
+			}
+		}
+
+		return findAdjacentBoxLeafNodes(root, oppositeDirection(direction), boundary)
+			.map(node => node.view);
+	}
+
+	private getViewLocation(view: T): number[] {
+		const element = this.views.get(view);
+
+		if (!element) {
+			throw new Error('View not found');
+		}
+
+		return getGridLocation(element);
+	}
+
+	private doResetViewSize(location: number[]): void {
+		if (this.sashResetSizing === Sizing.Split) {
+			const orientation = getLocationOrientation(this.orientation, location);
+			const firstViewSize = getSize(this.gridview.getViewSize(location), orientation);
+			const [parentLocation, index] = tail(location);
+			const secondViewSize = getSize(this.gridview.getViewSize([...parentLocation, index + 1]), orientation);
+			const totalSize = firstViewSize + secondViewSize;
+			this.gridview.resizeView(location, Math.floor(totalSize / 2));
+
+		} else {
+			const [parentLocation,] = tail(location);
+			this.gridview.distributeViewSizes(parentLocation);
+		}
+	}
+
+	dispose(): void {
+		this.disposables = dispose(this.disposables);
+	}
+}
+
+export interface ISerializableView extends IView {
+	toJSON(): object;
+}
+
+export interface IViewDeserializer<T extends ISerializableView> {
+	fromJSON(json: object): T;
+}
+
+interface InitialLayoutContext<T extends ISerializableView> {
+	width: number;
+	height: number;
+	root: GridBranchNode<T>;
+}
+
+export interface ISerializedLeafNode {
+	type: 'leaf';
+	data: object;
+	size: number;
+}
+
+export interface ISerializedBranchNode {
+	type: 'branch';
+	data: ISerializedNode[];
+	size: number;
+}
+
+export type ISerializedNode = ISerializedLeafNode | ISerializedBranchNode;
+
+export interface ISerializedGrid {
+	root: ISerializedNode;
+	orientation: Orientation;
+	width: number;
+	height: number;
+}
+
+export class SerializableGrid<T extends ISerializableView> extends Grid<T> {
+
+	private static serializeNode<T extends ISerializableView>(node: GridNode<T>, orientation: Orientation): ISerializedNode {
+		const size = orientation === Orientation.VERTICAL ? node.box.width : node.box.height;
+
+		if (!isGridBranchNode(node)) {
+			return { type: 'leaf', data: node.view.toJSON(), size };
+		}
+
+		return { type: 'branch', data: node.children.map(c => SerializableGrid.serializeNode(c, orthogonal(orientation))), size };
+	}
+
+	private static deserializeNode<T extends ISerializableView>(json: ISerializedNode, orientation: Orientation, box: Box, deserializer: IViewDeserializer<T>): GridNode<T> {
+		if (!json || typeof json !== 'object') {
+			throw new Error('Invalid JSON');
+		}
+
+		const type = json.type;
+		const data = json.data;
+
+		if (type === 'branch') {
+			if (!Array.isArray(data)) {
+				throw new Error('Invalid JSON: \'data\' property of branch must be an array.');
+			}
+
+			const children: GridNode<T>[] = [];
+			let offset = 0;
+
+			for (const child of data) {
+				if (typeof child.size !== 'number') {
+					throw new Error('Invalid JSON: \'size\' property of node must be a number.');
+				}
+
+				const childBox: Box = orientation === Orientation.HORIZONTAL
+					? { top: box.top, left: box.left + offset, width: child.size, height: box.height }
+					: { top: box.top + offset, left: box.left, width: box.width, height: child.size };
+
+				children.push(SerializableGrid.deserializeNode(child, orthogonal(orientation), childBox, deserializer));
+				offset += child.size;
+			}
+
+			return { children, box };
+
+		} else if (type === 'leaf') {
+			const view = deserializer.fromJSON(data) as T;
+			return { view, box };
+		}
+
+		throw new Error('Invalid JSON: \'type\' property must be either \'branch\' or \'leaf\'.');
+	}
+
+	private static getFirstLeaf<T extends IView>(node: GridNode<T>): GridLeafNode<T> | undefined {
+		if (!isGridBranchNode(node)) {
+			return node;
+		}
+
+		return SerializableGrid.getFirstLeaf(node.children[0]);
+	}
+
+	static deserialize<T extends ISerializableView>(json: ISerializedGrid, deserializer: IViewDeserializer<T>, options: IGridOptions = {}): SerializableGrid<T> {
+		if (typeof json.orientation !== 'number') {
+			throw new Error('Invalid JSON: \'orientation\' property must be a number.');
+		} else if (typeof json.width !== 'number') {
+			throw new Error('Invalid JSON: \'width\' property must be a number.');
+		} else if (typeof json.height !== 'number') {
+			throw new Error('Invalid JSON: \'height\' property must be a number.');
+		}
+
+		const orientation = json.orientation as Orientation;
+		const width = json.width as number;
+		const height = json.height as number;
+		const box: Box = { top: 0, left: 0, width, height };
+
+		const root = SerializableGrid.deserializeNode(json.root, orientation, box, deserializer) as GridBranchNode<T>;
+		const firstLeaf = SerializableGrid.getFirstLeaf(root);
+
+		if (!firstLeaf) {
+			throw new Error('Invalid serialized state, first leaf not found');
+		}
+
+		const result = new SerializableGrid<T>(firstLeaf.view, options);
+		result.orientation = orientation;
+		result.restoreViews(firstLeaf.view, orientation, root);
+		result.initialLayoutContext = { width, height, root };
+
+		return result;
+	}
+
+	/**
+	 * Useful information in order to proportionally restore view sizes
+	 * upon the very first layout call.
+	 */
+	private initialLayoutContext: InitialLayoutContext<T> | undefined;
+
+	serialize(): ISerializedGrid {
+		return {
+			root: SerializableGrid.serializeNode(this.getViews(), this.orientation),
+			orientation: this.orientation,
+			width: this.width,
+			height: this.height
+		};
+	}
+
+	layout(width: number, height: number): void {
+		super.layout(width, height);
+
+		if (this.initialLayoutContext) {
+			const widthScale = width / this.initialLayoutContext.width;
+			const heightScale = height / this.initialLayoutContext.height;
+
+			this.restoreViewsSize([], this.initialLayoutContext.root, this.orientation, widthScale, heightScale);
+			this.initialLayoutContext = undefined;
+
+			this.gridview.trySet2x2();
+		}
+	}
+
+	/**
+	 * Recursively restores views which were just deserialized.
+	 */
+	private restoreViews(referenceView: T, orientation: Orientation, node: GridNode<T>): void {
+		if (!isGridBranchNode(node)) {
+			return;
+		}
+
+		const direction = orientation === Orientation.VERTICAL ? Direction.Down : Direction.Right;
+		const firstLeaves = node.children.map(c => SerializableGrid.getFirstLeaf(c));
+
+		for (let i = 1; i < firstLeaves.length; i++) {
+			const size = orientation === Orientation.VERTICAL ? firstLeaves[i].box.height : firstLeaves[i].box.width;
+			this.addView(firstLeaves[i].view, size, referenceView, direction);
+			referenceView = firstLeaves[i].view;
+		}
+
+		for (let i = 0; i < node.children.length; i++) {
+			this.restoreViews(firstLeaves[i].view, orthogonal(orientation), node.children[i]);
+		}
+	}
+
+	/**
+	 * Recursively restores view sizes.
+	 * This should be called only after the very first layout call.
+	 */
+	private restoreViewsSize(location: number[], node: GridNode<T>, orientation: Orientation, widthScale: number, heightScale: number): void {
+		if (!isGridBranchNode(node)) {
+			return;
+		}
+
+		const scale = orientation === Orientation.VERTICAL ? heightScale : widthScale;
+
+		for (let i = 0; i < node.children.length; i++) {
+			const child = node.children[i];
+			const childLocation = [...location, i];
+
+			if (i < node.children.length - 1) {
+				const size = orientation === Orientation.VERTICAL ? child.box.height : child.box.width;
+				this.gridview.resizeView(childLocation, Math.floor(size * scale));
+			}
+
+			this.restoreViewsSize(childLocation, child, orthogonal(orientation), widthScale, heightScale);
+		}
+	}
+}
+
+export type GridNodeDescriptor = { size?: number, groups?: GridNodeDescriptor[] };
+export type GridDescriptor = { orientation: Orientation, groups?: GridNodeDescriptor[] };
+
+export function sanitizeGridNodeDescriptor(nodeDescriptor: GridNodeDescriptor): void {
+	if (nodeDescriptor.groups && nodeDescriptor.groups.length === 0) {
+		nodeDescriptor.groups = undefined;
+	}
+
+	if (!nodeDescriptor.groups) {
+		return;
+	}
+
+	let totalDefinedSize = 0;
+	let totalDefinedSizeCount = 0;
+
+	for (const child of nodeDescriptor.groups) {
+		sanitizeGridNodeDescriptor(child);
+
+		if (child.size) {
+			totalDefinedSize += child.size;
+			totalDefinedSizeCount++;
+		}
+	}
+
+	const totalUndefinedSize = totalDefinedSizeCount > 0 ? totalDefinedSize : 1;
+	const totalUndefinedSizeCount = nodeDescriptor.groups.length - totalDefinedSizeCount;
+	const eachUndefinedSize = totalUndefinedSize / totalUndefinedSizeCount;
+
+	for (const child of nodeDescriptor.groups) {
+		if (!child.size) {
+			child.size = eachUndefinedSize;
+		}
+	}
+}
+
+function createSerializedNode(nodeDescriptor: GridNodeDescriptor): ISerializedNode {
+	if (nodeDescriptor.groups) {
+		return { type: 'branch', data: nodeDescriptor.groups.map(c => createSerializedNode(c)), size: nodeDescriptor.size! };
+	} else {
+		return { type: 'leaf', data: null, size: nodeDescriptor.size! };
+	}
+}
+
+function getDimensions(node: ISerializedNode, orientation: Orientation): { width?: number, height?: number } {
+	if (node.type === 'branch') {
+		const childrenDimensions = node.data.map(c => getDimensions(c, orthogonal(orientation)));
+
+		if (orientation === Orientation.VERTICAL) {
+			const width = node.size || (childrenDimensions.length === 0 ? undefined : Math.max(...childrenDimensions.map(d => d.width || 0)));
+			const height = childrenDimensions.length === 0 ? undefined : childrenDimensions.reduce((r, d) => r + d.height, 0);
+			return { width, height };
+		} else {
+			const width = childrenDimensions.length === 0 ? undefined : childrenDimensions.reduce((r, d) => r + d.width, 0);
+			const height = node.size || (childrenDimensions.length === 0 ? undefined : Math.max(...childrenDimensions.map(d => d.height || 0)));
+			return { width, height };
+		}
+	} else {
+		const width = orientation === Orientation.VERTICAL ? node.size : undefined;
+		const height = orientation === Orientation.VERTICAL ? undefined : node.size;
+		return { width, height };
+	}
+}
+
+export function createSerializedGrid(gridDescriptor: GridDescriptor): ISerializedGrid {
+	sanitizeGridNodeDescriptor(gridDescriptor);
+
+	const root = createSerializedNode(gridDescriptor);
+	const { width, height } = getDimensions(root, gridDescriptor.orientation);
+
+	return {
+		root,
+		orientation: gridDescriptor.orientation,
+		width: width || 1,
+		height: height || 1
+	};
+}
--- a/src/vs/base/browser/ui/grid/gridview.css
+++ b/src/vs/base/browser/ui/grid/gridview.css
@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.monaco-grid-view {
+	position: relative;
+	overflow: hidden;
+	width: 100%;
+	height: 100%;
+}
+
+.monaco-grid-branch-node {
+	width: 100%;
+	height: 100%;
+}
--- a/src/vs/base/browser/ui/grid/gridview.ts
+++ b/src/vs/base/browser/ui/grid/gridview.ts
@@ -0,0 +1,809 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+import 'vs/css!./gridview';
+import { Event, anyEvent, Emitter, mapEvent, Relay } from 'vs/base/common/event';
+import { Orientation, Sash } from 'vs/base/browser/ui/sash/sash';
+import { SplitView, IView as ISplitView, Sizing, ISplitViewStyles } from 'vs/base/browser/ui/splitview/splitview';
+import { Disposable, IDisposable, toDisposable } from 'vs/base/common/lifecycle';
+import { $ } from 'vs/base/browser/dom';
+import { tail2 as tail } from 'vs/base/common/arrays';
+import { Color } from 'vs/base/common/color';
+
+export { Sizing } from 'vs/base/browser/ui/splitview/splitview';
+export { Orientation } from 'vs/base/browser/ui/sash/sash';
+
+export interface IView {
+	readonly element: HTMLElement;
+	readonly minimumWidth: number;
+	readonly maximumWidth: number;
+	readonly minimumHeight: number;
+	readonly maximumHeight: number;
+	readonly onDidChange: Event<{ width: number; height: number; }>;
+	layout(width: number, height: number): void;
+}
+
+export function orthogonal(orientation: Orientation): Orientation {
+	return orientation === Orientation.VERTICAL ? Orientation.HORIZONTAL : Orientation.VERTICAL;
+}
+
+export interface Box {
+	top: number;
+	left: number;
+	width: number;
+	height: number;
+}
+
+export interface GridLeafNode {
+	readonly view: IView;
+	readonly box: Box;
+}
+
+export interface GridBranchNode {
+	readonly children: GridNode[];
+	readonly box: Box;
+}
+
+export type GridNode = GridLeafNode | GridBranchNode;
+
+export function isGridBranchNode(node: GridNode): node is GridBranchNode {
+	return !!(node as any).children;
+}
+
+export interface IGridViewStyles extends ISplitViewStyles { }
+
+const defaultStyles: IGridViewStyles = {
+	separatorBorder: Color.transparent
+};
+
+export interface IGridViewOptions {
+	styles?: IGridViewStyles;
+}
+
+class BranchNode implements ISplitView, IDisposable {
+
+	readonly element: HTMLElement;
+	readonly children: Node[] = [];
+	private splitview: SplitView;
+
+	private _size: number;
+	get size(): number { return this._size; }
+
+	private _orthogonalSize: number;
+	get orthogonalSize(): number { return this._orthogonalSize; }
+
+	private _styles: IGridViewStyles;
+	get styles(): IGridViewStyles { return this._styles; }
+
+	get width(): number {
+		return this.orientation === Orientation.HORIZONTAL ? this.size : this.orthogonalSize;
+	}
+
+	get height(): number {
+		return this.orientation === Orientation.HORIZONTAL ? this.orthogonalSize : this.size;
+	}
+
+	get minimumSize(): number {
+		return this.children.length === 0 ? 0 : Math.max(...this.children.map(c => c.minimumOrthogonalSize));
+	}
+
+	get maximumSize(): number {
+		return Math.min(...this.children.map(c => c.maximumOrthogonalSize));
+	}
+
+	get minimumOrthogonalSize(): number {
+		return this.splitview.minimumSize;
+	}
+
+	get maximumOrthogonalSize(): number {
+		return this.splitview.maximumSize;
+	}
+
+	get minimumWidth(): number {
+		return this.orientation === Orientation.HORIZONTAL ? this.minimumOrthogonalSize : this.minimumSize;
+	}
+
+	get minimumHeight(): number {
+		return this.orientation === Orientation.HORIZONTAL ? this.minimumSize : this.minimumOrthogonalSize;
+	}
+
+	get maximumWidth(): number {
+		return this.orientation === Orientation.HORIZONTAL ? this.maximumOrthogonalSize : this.maximumSize;
+	}
+
+	get maximumHeight(): number {
+		return this.orientation === Orientation.HORIZONTAL ? this.maximumSize : this.maximumOrthogonalSize;
+	}
+
+	private _onDidChange = new Emitter<number | undefined>();
+	readonly onDidChange: Event<number | undefined> = this._onDidChange.event;
+
+	private childrenChangeDisposable: IDisposable = Disposable.None;
+
+	private _onDidSashReset = new Emitter<number[]>();
+	readonly onDidSashReset: Event<number[]> = this._onDidSashReset.event;
+	private splitviewSashResetDisposable: IDisposable = Disposable.None;
+	private childrenSashResetDisposable: IDisposable = Disposable.None;
+
+	get orthogonalStartSash(): Sash | undefined { return this.splitview.orthogonalStartSash; }
+	set orthogonalStartSash(sash: Sash | undefined) { this.splitview.orthogonalStartSash = sash; }
+	get orthogonalEndSash(): Sash | undefined { return this.splitview.orthogonalEndSash; }
+	set orthogonalEndSash(sash: Sash | undefined) { this.splitview.orthogonalEndSash = sash; }
+
+	constructor(
+		readonly orientation: Orientation,
+		styles: IGridViewStyles,
+		size: number = 0,
+		orthogonalSize: number = 0
+	) {
+		this._styles = styles;
+		this._size = size;
+		this._orthogonalSize = orthogonalSize;
+
+		this.element = $('.monaco-grid-branch-node');
+		this.splitview = new SplitView(this.element, { orientation, styles });
+		this.splitview.layout(size);
+
+		const onDidSashReset = mapEvent(this.splitview.onDidSashReset, i => [i]);
+		this.splitviewSashResetDisposable = onDidSashReset(this._onDidSashReset.fire, this._onDidSashReset);
+	}
+
+	style(styles: IGridViewStyles): void {
+		this._styles = styles;
+		this.splitview.style(styles);
+
+		for (const child of this.children) {
+			if (child instanceof BranchNode) {
+				child.style(styles);
+			}
+		}
+	}
+
+	layout(size: number): void {
+		this._orthogonalSize = size;
+
+		for (const child of this.children) {
+			child.orthogonalLayout(size);
+		}
+	}
+
+	orthogonalLayout(size: number): void {
+		this._size = size;
+		this.splitview.layout(size);
+	}
+
+	addChild(node: Node, size: number | Sizing, index: number): void {
+		if (index < 0 || index > this.children.length) {
+			throw new Error('Invalid index');
+		}
+
+		const first = index === 0;
+		const last = index === this.splitview.length;
+		this.splitview.addView(node, size, index);
+		this.children.splice(index, 0, node);
+		node.orthogonalStartSash = this.splitview.sashes[index - 1];
+		node.orthogonalEndSash = this.splitview.sashes[index];
+
+		if (!first) {
+			this.children[index - 1].orthogonalEndSash = this.splitview.sashes[index - 1];
+		}
+
+		if (!last) {
+			this.children[index + 1].orthogonalStartSash = this.splitview.sashes[index];
+		}
+
+		this.onDidChildrenChange();
+	}
+
+	removeChild(index: number, sizing?: Sizing): void {
+		if (index < 0 || index >= this.children.length) {
+			throw new Error('Invalid index');
+		}
+
+		const first = index === 0;
+		const last = index === this.splitview.length - 1;
+		this.splitview.removeView(index, sizing);
+		this.children.splice(index, 1);
+
+		if (!first) {
+			this.children[index - 1].orthogonalEndSash = this.splitview.sashes[index - 1];
+		}
+
+		if (!last) { // [0,1,2,3] (2) => [0,1,3]
+			this.children[index].orthogonalStartSash = this.splitview.sashes[Math.max(index - 1, 0)];
+		}
+
+		this.onDidChildrenChange();
+	}
+
+	swapChildren(from: number, to: number): void {
+		if (from === to) {
+			return;
+		}
+
+		if (from < 0 || from >= this.children.length) {
+			throw new Error('Invalid from index');
+		}
+
+		if (to < 0 || to >= this.children.length) {
+			throw new Error('Invalid to index');
+		}
+
+		this.splitview.swapViews(from, to);
+		[this.children[from].orthogonalStartSash, this.children[from].orthogonalEndSash, this.children[to].orthogonalStartSash, this.children[to].orthogonalEndSash] = [this.children[to].orthogonalStartSash, this.children[to].orthogonalEndSash, this.children[from].orthogonalStartSash, this.children[from].orthogonalEndSash];
+		[this.children[from], this.children[to]] = [this.children[to], this.children[from]];
+	}
+
+	resizeChild(index: number, size: number): void {
+		if (index < 0 || index >= this.children.length) {
+			throw new Error('Invalid index');
+		}
+
+		this.splitview.resizeView(index, size);
+	}
+
+	distributeViewSizes(recursive = false): void {
+		this.splitview.distributeViewSizes();
+
+		if (recursive) {
+			for (const child of this.children) {
+				if (child instanceof BranchNode) {
+					child.distributeViewSizes(true);
+				}
+			}
+		}
+	}
+
+	getChildSize(index: number): number {
+		if (index < 0 || index >= this.children.length) {
+			throw new Error('Invalid index');
+		}
+
+		return this.splitview.getViewSize(index);
+	}
+
+	private onDidChildrenChange(): void {
+		const onDidChildrenChange = anyEvent(...this.children.map(c => c.onDidChange));
+		this.childrenChangeDisposable.dispose();
+		this.childrenChangeDisposable = onDidChildrenChange(this._onDidChange.fire, this._onDidChange);
+
+		const onDidChildrenSashReset = anyEvent(...this.children.map((c, i) => mapEvent(c.onDidSashReset, location => [i, ...location])));
+		this.childrenSashResetDisposable.dispose();
+		this.childrenSashResetDisposable = onDidChildrenSashReset(this._onDidSashReset.fire, this._onDidSashReset);
+
+		this._onDidChange.fire();
+	}
+
+	trySet2x2(other: BranchNode): IDisposable {
+		if (this.children.length !== 2 || other.children.length !== 2) {
+			return Disposable.None;
+		}
+
+		if (this.getChildSize(0) !== other.getChildSize(0)) {
+			return Disposable.None;
+		}
+
+		const [firstChild, secondChild] = this.children;
+		const [otherFirstChild, otherSecondChild] = other.children;
+
+		if (!(firstChild instanceof LeafNode) || !(secondChild instanceof LeafNode)) {
+			return Disposable.None;
+		}
+
+		if (!(otherFirstChild instanceof LeafNode) || !(otherSecondChild instanceof LeafNode)) {
+			return Disposable.None;
+		}
+
+		if (this.orientation === Orientation.VERTICAL) {
+			secondChild.linkedWidthNode = otherFirstChild.linkedHeightNode = firstChild;
+			firstChild.linkedWidthNode = otherSecondChild.linkedHeightNode = secondChild;
+			otherSecondChild.linkedWidthNode = firstChild.linkedHeightNode = otherFirstChild;
+			otherFirstChild.linkedWidthNode = secondChild.linkedHeightNode = otherSecondChild;
+		} else {
+			otherFirstChild.linkedWidthNode = secondChild.linkedHeightNode = firstChild;
+			otherSecondChild.linkedWidthNode = firstChild.linkedHeightNode = secondChild;
+			firstChild.linkedWidthNode = otherSecondChild.linkedHeightNode = otherFirstChild;
+			secondChild.linkedWidthNode = otherFirstChild.linkedHeightNode = otherSecondChild;
+		}
+
+		const mySash = this.splitview.sashes[0];
+		const otherSash = other.splitview.sashes[0];
+		mySash.linkedSash = otherSash;
+		otherSash.linkedSash = mySash;
+
+		this._onDidChange.fire();
+		other._onDidChange.fire();
+
+		return toDisposable(() => {
+			mySash.linkedSash = otherSash.linkedSash = undefined;
+			firstChild.linkedHeightNode = firstChild.linkedWidthNode = undefined;
+			secondChild.linkedHeightNode = secondChild.linkedWidthNode = undefined;
+			otherFirstChild.linkedHeightNode = otherFirstChild.linkedWidthNode = undefined;
+			otherSecondChild.linkedHeightNode = otherSecondChild.linkedWidthNode = undefined;
+		});
+	}
+
+	dispose(): void {
+		for (const child of this.children) {
+			child.dispose();
+		}
+
+		this.splitviewSashResetDisposable.dispose();
+		this.childrenSashResetDisposable.dispose();
+		this.childrenChangeDisposable.dispose();
+		this.splitview.dispose();
+	}
+}
+
+class LeafNode implements ISplitView, IDisposable {
+
+	private _size: number = 0;
+	get size(): number { return this._size; }
+
+	private _orthogonalSize: number;
+	get orthogonalSize(): number { return this._orthogonalSize; }
+
+	readonly onDidSashReset: Event<number[]> = Event.None;
+
+	private _onDidLinkedWidthNodeChange = new Relay<number | undefined>();
+	private _linkedWidthNode: LeafNode | undefined = undefined;
+	get linkedWidthNode(): LeafNode | undefined { return this._linkedWidthNode; }
+	set linkedWidthNode(node: LeafNode | undefined) {
+		this._onDidLinkedWidthNodeChange.input = node ? node._onDidViewChange : Event.None;
+		this._linkedWidthNode = node;
+		this._onDidSetLinkedNode.fire();
+	}
+
+	private _onDidLinkedHeightNodeChange = new Relay<number | undefined>();
+	private _linkedHeightNode: LeafNode | undefined = undefined;
+	get linkedHeightNode(): LeafNode | undefined { return this._linkedHeightNode; }
+	set linkedHeightNode(node: LeafNode | undefined) {
+		this._onDidLinkedHeightNodeChange.input = node ? node._onDidViewChange : Event.None;
+		this._linkedHeightNode = node;
+		this._onDidSetLinkedNode.fire();
+	}
+
+	private _onDidSetLinkedNode = new Emitter<number | undefined>();
+	private _onDidViewChange: Event<number | undefined>;
+	readonly onDidChange: Event<number | undefined>;
+
+	constructor(
+		readonly view: IView,
+		readonly orientation: Orientation,
+		orthogonalSize: number = 0
+	) {
+		this._orthogonalSize = orthogonalSize;
+
+		this._onDidViewChange = mapEvent(this.view.onDidChange, this.orientation === Orientation.HORIZONTAL ? e => e && e.width : e => e && e.height);
+		this.onDidChange = anyEvent(this._onDidViewChange, this._onDidSetLinkedNode.event, this._onDidLinkedWidthNodeChange.event, this._onDidLinkedHeightNodeChange.event);
+	}
+
+	get width(): number {
+		return this.orientation === Orientation.HORIZONTAL ? this.orthogonalSize : this.size;
+	}
+
+	get height(): number {
+		return this.orientation === Orientation.HORIZONTAL ? this.size : this.orthogonalSize;
+	}
+
+	get element(): HTMLElement {
+		return this.view.element;
+	}
+
+	private get minimumWidth(): number {
+		return this.linkedWidthNode ? Math.max(this.linkedWidthNode.view.minimumWidth, this.view.minimumWidth) : this.view.minimumWidth;
+	}
+
+	private get maximumWidth(): number {
+		return this.linkedWidthNode ? Math.min(this.linkedWidthNode.view.maximumWidth, this.view.maximumWidth) : this.view.maximumWidth;
+	}
+
+	private get minimumHeight(): number {
+		return this.linkedHeightNode ? Math.max(this.linkedHeightNode.view.minimumHeight, this.view.minimumHeight) : this.view.minimumHeight;
+	}
+
+	private get maximumHeight(): number {
+		return this.linkedHeightNode ? Math.min(this.linkedHeightNode.view.maximumHeight, this.view.maximumHeight) : this.view.maximumHeight;
+	}
+
+	get minimumSize(): number {
+		return this.orientation === Orientation.HORIZONTAL ? this.minimumHeight : this.minimumWidth;
+	}
+
+	get maximumSize(): number {
+		return this.orientation === Orientation.HORIZONTAL ? this.maximumHeight : this.maximumWidth;
+	}
+
+	get minimumOrthogonalSize(): number {
+		return this.orientation === Orientation.HORIZONTAL ? this.minimumWidth : this.minimumHeight;
+	}
+
+	get maximumOrthogonalSize(): number {
+		return this.orientation === Orientation.HORIZONTAL ? this.maximumWidth : this.maximumHeight;
+	}
+
+	set orthogonalStartSash(sash: Sash) {
+		// noop
+	}
+
+	set orthogonalEndSash(sash: Sash) {
+		// noop
+	}
+
+	layout(size: number): void {
+		this._size = size;
+		return this.view.layout(this.width, this.height);
+	}
+
+	orthogonalLayout(size: number): void {
+		this._orthogonalSize = size;
+		return this.view.layout(this.width, this.height);
+	}
+
+	dispose(): void { }
+}
+
+type Node = BranchNode | LeafNode;
+
+function flipNode<T extends Node>(node: T, size: number, orthogonalSize: number): T {
+	if (node instanceof BranchNode) {
+		const result = new BranchNode(orthogonal(node.orientation), node.styles, size, orthogonalSize);
+
+		let totalSize = 0;
+
+		for (let i = node.children.length - 1; i >= 0; i--) {
+			const child = node.children[i];
+			const childSize = child instanceof BranchNode ? child.orthogonalSize : child.size;
+
+			let newSize = node.size === 0 ? 0 : Math.round((size * childSize) / node.size);
+			totalSize += newSize;
+
+			// The last view to add should adjust to rounding errors
+			if (i === 0) {
+				newSize += size - totalSize;
+			}
+
+			result.addChild(flipNode(child, orthogonalSize, newSize), newSize, 0);
+		}
+
+		return result as T;
+	} else {
+		return new LeafNode((node as LeafNode).view, orthogonal(node.orientation), orthogonalSize) as T;
+	}
+}
+
+export class GridView implements IDisposable {
+
+	readonly element: HTMLElement;
+	private styles: IGridViewStyles;
+
+	private _root: BranchNode;
+	private onDidSashResetRelay = new Relay<number[]>();
+	readonly onDidSashReset: Event<number[]> = this.onDidSashResetRelay.event;
+
+	private disposable2x2: IDisposable = Disposable.None;
+
+	private get root(): BranchNode {
+		return this._root;
+	}
+
+	private set root(root: BranchNode) {
+		const oldRoot = this._root;
+
+		if (oldRoot) {
+			this.element.removeChild(oldRoot.element);
+			oldRoot.dispose();
+		}
+
+		this._root = root;
+		this.element.appendChild(root.element);
+		this.onDidSashResetRelay.input = root.onDidSashReset;
+		this._onDidChange.input = mapEvent(root.onDidChange, () => undefined); // TODO
+	}
+
+	get orientation(): Orientation {
+		return this._root.orientation;
+	}
+
+	set orientation(orientation: Orientation) {
+		if (this._root.orientation === orientation) {
+			return;
+		}
+
+		const { size, orthogonalSize } = this._root;
+		this.root = flipNode(this._root, orthogonalSize, size);
+		this.root.layout(size);
+		this.root.orthogonalLayout(orthogonalSize);
+	}
+
+	get width(): number { return this.root.width; }
+	get height(): number { return this.root.height; }
+
+	get minimumWidth(): number { return this.root.minimumWidth; }
+	get minimumHeight(): number { return this.root.minimumHeight; }
+	get maximumWidth(): number { return this.root.maximumHeight; }
+	get maximumHeight(): number { return this.root.maximumHeight; }
+
+	private _onDidChange = new Relay<{ width: number; height: number; }>();
+	readonly onDidChange = this._onDidChange.event;
+
+	constructor(options: IGridViewOptions = {}) {
+		this.element = $('.monaco-grid-view');
+		this.styles = options.styles || defaultStyles;
+		this.root = new BranchNode(Orientation.VERTICAL, this.styles);
+	}
+
+	style(styles: IGridViewStyles): void {
+		this.styles = styles;
+		this.root.style(styles);
+	}
+
+	layout(width: number, height: number): void {
+		const [size, orthogonalSize] = this.root.orientation === Orientation.HORIZONTAL ? [height, width] : [width, height];
+		this.root.layout(size);
+		this.root.orthogonalLayout(orthogonalSize);
+	}
+
+	addView(view: IView, size: number | Sizing, location: number[]): void {
+		this.disposable2x2.dispose();
+		this.disposable2x2 = Disposable.None;
+
+		const [rest, index] = tail(location);
+		const [pathToParent, parent] = this.getNode(rest);
+
+		if (parent instanceof BranchNode) {
+			const node = new LeafNode(view, orthogonal(parent.orientation), parent.orthogonalSize);
+			parent.addChild(node, size, index);
+
+		} else {
+			const [, grandParent] = tail(pathToParent);
+			const [, parentIndex] = tail(rest);
+			grandParent.removeChild(parentIndex);
+
+			const newParent = new BranchNode(parent.orientation, this.styles, parent.size, parent.orthogonalSize);
+			grandParent.addChild(newParent, parent.size, parentIndex);
+			newParent.orthogonalLayout(parent.orthogonalSize);
+
+			const newSibling = new LeafNode(parent.view, grandParent.orientation, parent.size);
+			newParent.addChild(newSibling, 0, 0);
+
+			if (typeof size !== 'number' && size.type === 'split') {
+				size = Sizing.Split(0);
+			}
+
+			const node = new LeafNode(view, grandParent.orientation, parent.size);
+			newParent.addChild(node, size, index);
+		}
+	}
+
+	removeView(location: number[], sizing?: Sizing): IView {
+		this.disposable2x2.dispose();
+		this.disposable2x2 = Disposable.None;
+
+		const [rest, index] = tail(location);
+		const [pathToParent, parent] = this.getNode(rest);
+
+		if (!(parent instanceof BranchNode)) {
+			throw new Error('Invalid location');
+		}
+
+		const node = parent.children[index];
+
+		if (!(node instanceof LeafNode)) {
+			throw new Error('Invalid location');
+		}
+
+		parent.removeChild(index, sizing);
+
+		if (parent.children.length === 0) {
+			throw new Error('Invalid grid state');
+		}
+
+		if (parent.children.length > 1) {
+			return node.view;
+		}
+
+		if (pathToParent.length === 0) { // parent is root
+			const sibling = parent.children[0];
+
+			if (sibling instanceof LeafNode) {
+				return node.view;
+			}
+
+			// we must promote sibling to be the new root
+			parent.removeChild(0);
+			this.root = sibling;
+			return node.view;
+		}
+
+		const [, grandParent] = tail(pathToParent);
+		const [, parentIndex] = tail(rest);
+
+		const sibling = parent.children[0];
+		parent.removeChild(0);
+
+		const sizes = grandParent.children.map((_, i) => grandParent.getChildSize(i));
+		grandParent.removeChild(parentIndex, sizing);
+
+		if (sibling instanceof BranchNode) {
+			sizes.splice(parentIndex, 1, ...sibling.children.map(c => c.size));
+
+			for (let i = 0; i < sibling.children.length; i++) {
+				const child = sibling.children[i];
+				grandParent.addChild(child, child.size, parentIndex + i);
+			}
+		} else {
+			const newSibling = new LeafNode(sibling.view, orthogonal(sibling.orientation), sibling.size);
+			grandParent.addChild(newSibling, sibling.orthogonalSize, parentIndex);
+		}
+
+		for (let i = 0; i < sizes.length; i++) {
+			grandParent.resizeChild(i, sizes[i]);
+		}
+
+		return node.view;
+	}
+
+	swapViews(from: number[], to: number[]): void {
+		const [fromRest, fromIndex] = tail(from);
+		const [, fromParent] = this.getNode(fromRest);
+
+		if (!(fromParent instanceof BranchNode)) {
+			throw new Error('Invalid from location');
+		}
+
+		const fromSize = fromParent.getChildSize(fromIndex);
+		const fromNode = fromParent.children[fromIndex];
+
+		if (!(fromNode instanceof LeafNode)) {
+			throw new Error('Invalid from location');
+		}
+
+		const [toRest, toIndex] = tail(to);
+		const [, toParent] = this.getNode(toRest);
+
+		if (!(toParent instanceof BranchNode)) {
+			throw new Error('Invalid to location');
+		}
+
+		const toSize = toParent.getChildSize(toIndex);
+		const toNode = toParent.children[toIndex];
+
+		if (!(toNode instanceof LeafNode)) {
+			throw new Error('Invalid to location');
+		}
+
+		if (fromParent === toParent) {
+			fromParent.swapChildren(fromIndex, toIndex);
+		} else {
+			fromParent.removeChild(fromIndex);
+			toParent.removeChild(toIndex);
+
+			fromParent.addChild(toNode, fromSize, fromIndex);
+			toParent.addChild(fromNode, toSize, toIndex);
+
+			fromParent.layout(fromParent.orthogonalSize);
+			toParent.layout(toParent.orthogonalSize);
+		}
+	}
+
+	resizeView(location: number[], size: number): void {
+		const [rest, index] = tail(location);
+		const [, parent] = this.getNode(rest);
+
+		if (!(parent instanceof BranchNode)) {
+			throw new Error('Invalid location');
+		}
+
+		parent.resizeChild(index, size);
+	}
+
+	getViewSize(location: number[]): { width: number; height: number; } {
+		const [, node] = this.getNode(location);
+		return { width: node.width, height: node.height };
+	}
+
+	maximizeViewSize(location: number[]): void {
+		const [ancestors, node] = this.getNode(location);
+
+		if (!(node instanceof LeafNode)) {
+			throw new Error('Invalid location');
+		}
+
+		for (let i = 0; i < ancestors.length; i++) {
+			ancestors[i].resizeChild(location[i], Number.POSITIVE_INFINITY);
+		}
+	}
+
+	distributeViewSizes(location?: number[]): void {
+		if (!location) {
+			this.root.distributeViewSizes(true);
+			return;
+		}
+
+		const [, node] = this.getNode(location);
+
+		if (!(node instanceof BranchNode)) {
+			throw new Error('Invalid location');
+		}
+
+		node.distributeViewSizes();
+	}
+
+	getViews(): GridBranchNode {
+		return this._getViews(this.root, this.orientation, { top: 0, left: 0, width: this.width, height: this.height }) as GridBranchNode;
+	}
+
+	private _getViews(node: Node, orientation: Orientation, box: Box): GridNode {
+		if (node instanceof LeafNode) {
+			return { view: node.view, box };
+		}
+
+		const children: GridNode[] = [];
+		let offset = 0;
+
+		for (let i = 0; i < node.children.length; i++) {
+			const child = node.children[i];
+			const childOrientation = orthogonal(orientation);
+			const childBox: Box = orientation === Orientation.HORIZONTAL
+				? { top: box.top, left: box.left + offset, width: child.width, height: box.height }
+				: { top: box.top + offset, left: box.left, width: box.width, height: child.height };
+
+			children.push(this._getViews(child, childOrientation, childBox));
+			offset += orientation === Orientation.HORIZONTAL ? child.width : child.height;
+		}
+
+		return { children, box };
+	}
+
+	private getNode(location: number[], node: Node = this.root, path: BranchNode[] = []): [BranchNode[], Node] {
+		if (location.length === 0) {
+			return [path, node];
+		}
+
+		if (!(node instanceof BranchNode)) {
+			throw new Error('Invalid location');
+		}
+
+		const [index, ...rest] = location;
+
+		if (index < 0 || index >= node.children.length) {
+			throw new Error('Invalid location');
+		}
+
+		const child = node.children[index];
+		path.push(node);
+
+		return this.getNode(rest, child, path);
+	}
+
+	trySet2x2(): void {
+		this.disposable2x2.dispose();
+		this.disposable2x2 = Disposable.None;
+
+		if (this.root.children.length !== 2) {
+			return;
+		}
+
+		const [first, second] = this.root.children;
+
+		if (!(first instanceof BranchNode) || !(second instanceof BranchNode)) {
+			return;
+		}
+
+		this.disposable2x2 = first.trySet2x2(second);
+	}
+
+	dispose(): void {
+		this.onDidSashResetRelay.dispose();
+		this.root.dispose();
+
+		if (this.element && this.element.parentElement) {
+			this.element.parentElement.removeChild(this.element);
+		}
+	}
+}