add sash to reference search widget

src/vs/editor/contrib/referenceSearch/browser/referenceSearchWidget.css

@@ -33,10 +33,6 @@
 	padding: 3em 0;
 }
 
-.monaco-editor .reference-zone-widget .preview {
-	width: 80%;
-}
-
 .monaco-editor .reference-zone-widget,
 .monaco-editor .reference-zone-widget .preview .monaco-editor,
 .monaco-editor .reference-zone-widget .preview .glyph-margin,
@@ -52,7 +48,6 @@
 
 .monaco-editor .reference-zone-widget .ref-tree {
 	background-color: #F3F3F3;
-	width: 20%;
 	color: #646465;
 	line-height: 22px;
 	font-size: 13px;

src/vs/editor/contrib/referenceSearch/browser/referenceSearchWidget.ts

@@ -10,13 +10,14 @@ import * as collections from 'vs/base/common/collections';
 import {onUnexpectedError} from 'vs/base/common/errors';
 import {getPathLabel} from 'vs/base/common/labels';
 import Event, {Emitter} from 'vs/base/common/event';
-import {IDisposable, cAll, dispose} from 'vs/base/common/lifecycle';
+import {IDisposable, cAll, dispose, Disposables} from 'vs/base/common/lifecycle';
 import {Schemas} from 'vs/base/common/network';
 import * as strings from 'vs/base/common/strings';
 import URI from 'vs/base/common/uri';
 import {TPromise} from 'vs/base/common/winjs.base';
 import {$, Builder} from 'vs/base/browser/builder';
 import * as dom from 'vs/base/browser/dom';
+import {Sash, ISashEvent, IVerticalSashLayoutProvider} from 'vs/base/browser/ui/sash/sash';
 import {IKeyboardEvent} from 'vs/base/browser/keyboardEvent';
 import {IMouseEvent} from 'vs/base/browser/mouseEvent';
 import {CountBadge} from 'vs/base/browser/ui/countBadge/countBadge';
@@ -365,6 +366,65 @@ class Renderer extends LegacyRenderer {
 
 }
 
+class VSash {
+
+	private _disposables = new Disposables();
+	private _sash: Sash;
+	private _ratio: number;
+	private _height: number;
+	private _width: number;
+	private _onDidChangePercentages = new Emitter<VSash>();
+
+	constructor(container: HTMLElement, ratio:number) {
+		this._ratio = ratio;
+		this._sash = new Sash(container, <IVerticalSashLayoutProvider>{
+			getVerticalSashLeft: () => this._width * this._ratio,
+			getVerticalSashHeight: () => this._height
+		});
+
+		let data: { startX: number, startRatio: number };
+		this._disposables.add(this._sash.addListener2('start', (e: ISashEvent) => {
+			data = { startX: e.startX, startRatio: this._ratio };
+		}));
+
+		this._disposables.add(this._sash.addListener2('change', (e: ISashEvent) => {
+			let {currentX} = e;
+			let newRatio = data.startRatio * (currentX / data.startX);
+			if (newRatio > .05 && newRatio < .95) {
+				this._ratio = newRatio;
+				this._sash.layout();
+				this._onDidChangePercentages.fire(this);
+			}
+		}));
+	}
+
+	dispose() {
+		this._sash.dispose();
+		this._onDidChangePercentages.dispose();
+		this._disposables.dispose();
+	}
+
+	get onDidChangePercentages() {
+		return this._onDidChangePercentages.event;
+	}
+
+	set width(value: number) {
+		this._width = value;
+		this._sash.layout();
+	}
+
+	set height(value: number) {
+		this._height = value;
+		this._sash.layout();
+	}
+
+	get percentages() {
+		let left = 100 * this._ratio;
+		let right = 100 - left;
+		return [`${left}%`, `${right}%`];
+	}
+}
+
 /**
  * ZoneWidget that is shown inside the editor
  */
@@ -383,6 +443,7 @@ export class ReferenceWidget extends PeekViewWidget {
 
 	private _tree: Tree;
 	private _treeContainer: Builder;
+	private _sash: VSash;
 	private _preview: ICodeEditor;
 	private _previewNotAvailableMessage: Model;
 	private _previewContainer: Builder;
@@ -413,6 +474,12 @@ export class ReferenceWidget extends PeekViewWidget {
 		this.create();
 	}
 
+	public dispose(): void {
+		this.setModel(null);
+		dispose<IDisposable>(this._preview, this._previewNotAvailableMessage, this._tree, this._sash);
+		super.dispose();
+	}
+
 	get onDidDoubleClick():Event<{ reference: URI, range: Range, originalEvent: MouseEvent }> {
 		return this._onDidDoubleClick.event;
 	}
@@ -452,6 +519,16 @@ export class ReferenceWidget extends PeekViewWidget {
 			this._previewNotAvailableMessage = new Model(nls.localize('missingPreviewMessage', "no preview available"), Model.DEFAULT_CREATION_OPTIONS, null);
 		});
 
+		// sash
+		this._sash = new VSash(containerElement, .8);
+		this._sash.onDidChangePercentages(() => {
+			let [left, right] = this._sash.percentages;
+			this._previewContainer.style({ width: left});
+			this._treeContainer.style({ width: right });
+			this._preview.layout();
+			this._tree.layout();
+		});
+
 		// tree
 		container.div({ 'class': 'ref-tree inline' }, (div: Builder) => {
 			var config = {
@@ -472,26 +549,31 @@ export class ReferenceWidget extends PeekViewWidget {
 		});
 	}
 
-	protected _doLayoutBody(heightInPixel: number): void {
-		super._doLayoutBody(heightInPixel);
+	protected _doLayoutBody(heightInPixel: number, widthInPixel: number): void {
+		super._doLayoutBody(heightInPixel, widthInPixel);
 
-		var h = heightInPixel + 'px';
-		if (h === this._lastHeight) {
+		const height = heightInPixel + 'px';
+		if (height === this._lastHeight) {
 			return;
 		}
 
-		// set height
-		this._treeContainer.style({ height: h });
-		this._previewContainer.style({ height: h });
+		this._sash.height = heightInPixel;
+		this._sash.width = widthInPixel;
+
+		// set height/width
+		const [left, right] = this._sash.percentages;
+		this._previewContainer.style({ height, width: left});
+		this._treeContainer.style({ height, width: right });
 
 		// forward
 		this._tree.layout(heightInPixel);
 		this._preview.layout();
 
-		this._lastHeight = h;
+		this._lastHeight = height;
 	}
 
 	public onWidth(widthInPixel: number): void {
+		this._sash.width = widthInPixel;
 		this._preview.layout();
 	}
 
@@ -618,9 +700,4 @@ export class ReferenceWidget extends PeekViewWidget {
 			.done(null, onUnexpectedError);
 	}
 
-	public dispose(): void {
-		this.setModel(null);
-		dispose(<IDisposable[]>[this._preview, this._previewNotAvailableMessage, this._tree]);
-		super.dispose();
-	}
 }

src/vs/editor/contrib/zoneWidget/browser/peekViewWidget.css

@@ -49,6 +49,7 @@
 .monaco-editor .peekview-widget > .body {
 	border-top: 1px solid #007ACC;
 	border-bottom: 1px solid #007ACC;
+	position: relative;
 }
 
 /* Dark Theme */

src/vs/editor/contrib/zoneWidget/browser/peekViewWidget.ts

@@ -140,7 +140,7 @@ export class PeekViewWidget extends ZoneWidget implements IPeekViewService {
 		// implement me
 	}
 
-	public doLayout(heightInPixel: number): void {
+	public doLayout(heightInPixel: number, widthInPixel: number): void {
 
 		if (heightInPixel < 0) {
 			// Looks like the view zone got folded away!
@@ -152,16 +152,16 @@ export class PeekViewWidget extends ZoneWidget implements IPeekViewService {
 		var headHeight = Math.ceil(this.editor.getConfiguration().lineHeight * 1.2),
 			bodyHeight = heightInPixel - (headHeight + 2 /* the border-top/bottom width*/);
 
-		this._doLayoutHead(headHeight);
-		this._doLayoutBody(bodyHeight);
+		this._doLayoutHead(headHeight, widthInPixel);
+		this._doLayoutBody(bodyHeight, widthInPixel);
 	}
 
-	protected _doLayoutHead(heightInPixel: number): void {
+	protected _doLayoutHead(heightInPixel: number, widthInPixel: number): void {
 		this._headElement.style.height = strings.format('{0}px', heightInPixel);
 		this._headElement.style.lineHeight = this._headElement.style.height;
 	}
 
-	protected _doLayoutBody(heightInPixel: number): void {
+	protected _doLayoutBody(heightInPixel: number, widthInPixel: number): void {
 		this._bodyElement.style.height = strings.format('{0}px', heightInPixel);
 	}
 }

src/vs/editor/contrib/zoneWidget/browser/zoneWidget.ts

@@ -93,7 +93,7 @@ export class ZoneWidget implements IHorizontalSashLayoutProvider {
 
 	private _viewZone: ViewZoneDelegate = null;
 	private _overlayWidget: OverlayWidgetDelegate = null;
-	private _sash: Sash;
+	private _resizeSash: Sash;
 	private _disposables = new Disposables();
 
 	public container: HTMLElement = null;
@@ -144,9 +144,9 @@ export class ZoneWidget implements IHorizontalSashLayoutProvider {
 
 		let containerHeight = height - this._decoratingElementsHeight();
 		this.container.style.height = `${containerHeight}px`;
-		this.doLayout(containerHeight);
+		this.doLayout(containerHeight, this._getWidth());
 
-		this._sash.layout();
+		this._resizeSash.layout();
 	}
 
 	public show(rangeOrPos: IRange | IPosition, heightInLines: number): void {
@@ -180,7 +180,8 @@ export class ZoneWidget implements IHorizontalSashLayoutProvider {
 			column: where.startColumn
 		};
 
-		this.domNode.style.width = this._getWidth() + 'px';
+		const width = this._getWidth();
+		this.domNode.style.width = `${width}px`;
 
 		// Reveal position, to get the line rendered, such that the arrow can be positioned properly
 		this.editor.revealPosition(position);
@@ -247,7 +248,7 @@ export class ZoneWidget implements IHorizontalSashLayoutProvider {
 		this.container.style.overflow = 'hidden';
 
 
-		this.doLayout(containerHeight);
+		this.doLayout(containerHeight, width);
 
 		this.editor.setSelection(where);
 
@@ -283,22 +284,22 @@ export class ZoneWidget implements IHorizontalSashLayoutProvider {
 		// implement in subclass
 	}
 
-	public doLayout(heightInPixel: number): void {
+	public doLayout(heightInPixel: number, widthInPixel: number): void {
 		// implement in subclass
 	}
 
 	// --- sash
 
 	private _initSash(): void{
-		this._sash = new Sash(this.domNode, this, { orientation: Orientation.HORIZONTAL });
+		this._resizeSash = new Sash(this.domNode, this, { orientation: Orientation.HORIZONTAL });
 
 		if (!this.options.isResizeable) {
-			this._sash.hide();
-			this._sash.disable();
+			this._resizeSash.hide();
+			this._resizeSash.disable();
 		}
 
 		let data: { startY: number; heightInLines: number; };
-		this._disposables.add(this._sash.addListener2('start', (e: ISashEvent) => {
+		this._disposables.add(this._resizeSash.addListener2('start', (e: ISashEvent) => {
 			if (this._viewZone) {
 				data = {
 					startY: e.startY,
@@ -307,11 +308,11 @@ export class ZoneWidget implements IHorizontalSashLayoutProvider {
 			}
 		}));
 
-		this._disposables.add(this._sash.addListener2('end', () => {
+		this._disposables.add(this._resizeSash.addListener2('end', () => {
 			data = undefined;
 		}));
 
-		this._disposables.add(this._sash.addListener2('change', (evt: ISashEvent) => {
+		this._disposables.add(this._resizeSash.addListener2('change', (evt: ISashEvent) => {
 			if (data) {
 				let lineDelta = (evt.currentY - data.startY) / this.editor.getConfiguration().lineHeight;
 				let roundedLineDelta = lineDelta < 0 ? Math.ceil(lineDelta) : Math.floor(lineDelta);