Merge from master

src/vs/editor/contrib/referenceSearch/media/referencesWidget.css

@@ -36,6 +36,10 @@
 	height: 100%;
 }
 
+.monaco-editor .reference-zone-widget .ref-tree .monaco-list:focus .selected .reference-file {
+	color: inherit !important;
+}
+
 .monaco-editor .reference-zone-widget .ref-tree .reference-file .count {
 	margin-right: 12px;
 	margin-left: auto;

src/vs/editor/contrib/referenceSearch/peekViewWidget.ts

@@ -3,24 +3,22 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-'use strict';
-
-import 'vs/css!./media/peekViewWidget';
-import * as nls from 'vs/nls';
-import { Action } from 'vs/base/common/actions';
-import * as strings from 'vs/base/common/strings';
-import * as objects from 'vs/base/common/objects';
-import { $ } from 'vs/base/browser/builder';
-import { Event, Emitter } from 'vs/base/common/event';
 import * as dom from 'vs/base/browser/dom';
+import { IMouseEvent } from 'vs/base/browser/mouseEvent';
 import { ActionBar, IActionBarOptions } from 'vs/base/browser/ui/actionbar/actionbar';
-import { ServicesAccessor } from 'vs/platform/instantiation/common/instantiation';
-import { ICodeEditorService } from 'vs/editor/browser/services/codeEditorService';
-import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
-import { IOptions, ZoneWidget, IStyles } from 'vs/editor/contrib/zoneWidget/zoneWidget';
-import { EmbeddedCodeEditorWidget } from 'vs/editor/browser/widget/embeddedCodeEditorWidget';
-import { ContextKeyExpr, RawContextKey } from 'vs/platform/contextkey/common/contextkey';
+import { Action } from 'vs/base/common/actions';
 import { Color } from 'vs/base/common/color';
+import { Emitter, Event } from 'vs/base/common/event';
+import * as objects from 'vs/base/common/objects';
+import * as strings from 'vs/base/common/strings';
+import 'vs/css!./media/peekViewWidget';
+import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
+import { ICodeEditorService } from 'vs/editor/browser/services/codeEditorService';
+import { EmbeddedCodeEditorWidget } from 'vs/editor/browser/widget/embeddedCodeEditorWidget';
+import { IOptions, IStyles, ZoneWidget } from 'vs/editor/contrib/zoneWidget/zoneWidget';
+import * as nls from 'vs/nls';
+import { ContextKeyExpr, RawContextKey } from 'vs/platform/contextkey/common/contextkey';
+import { ServicesAccessor } from 'vs/platform/instantiation/common/instantiation';
 
 export namespace PeekContext {
 	export const inPeekEditor = new RawContextKey<boolean>('inReferenceSearchEditor', true);
@@ -111,8 +109,8 @@ export abstract class PeekViewWidget extends ZoneWidget {
 	protected _fillContainer(container: HTMLElement): void {
 		this.setCssClass('peekview-widget');
 
-		this._headElement = <HTMLDivElement>$('.head').getHTMLElement();
-		this._bodyElement = <HTMLDivElement>$('.body').getHTMLElement();
+		this._headElement = dom.$('.head');
+		this._bodyElement = dom.$('.body');
 
 		this._fillHead(this._headElement);
 		this._fillBody(this._bodyElement);
@@ -122,18 +120,20 @@ export abstract class PeekViewWidget extends ZoneWidget {
 	}
 
 	protected _fillHead(container: HTMLElement): void {
-		const titleElement = $('.peekview-title').
-			on(dom.EventType.CLICK, e => this._onTitleClick(<MouseEvent>e)).
-			appendTo(this._headElement).
-			getHTMLElement();
+		const titleElement = dom.$('.peekview-title');
+		dom.append(this._headElement, titleElement);
+		dom.addStandardDisposableListener(titleElement, 'click', event => this._onTitleClick(event));
 
-		this._primaryHeading = $('span.filename').appendTo(titleElement).getHTMLElement();
-		this._secondaryHeading = $('span.dirname').appendTo(titleElement).getHTMLElement();
-		this._metaHeading = $('span.meta').appendTo(titleElement).getHTMLElement();
+		this._primaryHeading = dom.$('span.filename');
+		this._secondaryHeading = dom.$('span.dirname');
+		this._metaHeading = dom.$('span.meta');
+		dom.append(titleElement, this._primaryHeading, this._secondaryHeading, this._metaHeading);
+
+		const actionsContainer = dom.$('.peekview-actions');
+		dom.append(this._headElement, actionsContainer);
 
-		const actionsContainer = $('.peekview-actions').appendTo(this._headElement);
 		const actionBarOptions = this._getActionBarOptions();
-		this._actionbarWidget = new ActionBar(actionsContainer.getHTMLElement(), actionBarOptions);
+		this._actionbarWidget = new ActionBar(actionsContainer, actionBarOptions);
 		this._disposables.push(this._actionbarWidget);
 
 		this._actionbarWidget.push(new Action('peekview.close', nls.localize('label.close', "Close"), 'close-peekview-action', true, () => {
@@ -146,15 +146,15 @@ export abstract class PeekViewWidget extends ZoneWidget {
 		return {};
 	}
 
-	protected _onTitleClick(event: MouseEvent): void {
+	protected _onTitleClick(event: IMouseEvent): void {
 		// implement me
 	}
 
 	public setTitle(primaryHeading: string, secondaryHeading?: string): void {
-		$(this._primaryHeading).safeInnerHtml(primaryHeading);
+		this._primaryHeading.innerHTML = strings.escape(primaryHeading);
 		this._primaryHeading.setAttribute('aria-label', primaryHeading);
 		if (secondaryHeading) {
-			$(this._secondaryHeading).safeInnerHtml(secondaryHeading);
+			this._secondaryHeading.innerHTML = strings.escape(secondaryHeading);
 		} else {
 			dom.clearNode(this._secondaryHeading);
 		}
@@ -162,7 +162,7 @@ export abstract class PeekViewWidget extends ZoneWidget {
 
 	public setMetaTitle(value: string): void {
 		if (value) {
-			$(this._metaHeading).safeInnerHtml(value);
+			this._metaHeading.innerHTML = strings.escape(value);
 		} else {
 			dom.clearNode(this._metaHeading);
 		}

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

@@ -2,11 +2,9 @@
  *  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 * as nls from 'vs/nls';
 import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
-import { TPromise } from 'vs/base/common/winjs.base';
 import { IContextKeyService, ContextKeyExpr } from 'vs/platform/contextkey/common/contextkey';
 import { KeybindingsRegistry, KeybindingWeight } from 'vs/platform/keybinding/common/keybindingsRegistry';
 import { Position, IPosition } from 'vs/editor/common/core/position';
@@ -17,7 +15,7 @@ import { Range } from 'vs/editor/common/core/range';
 import { PeekContext, getOuterEditor } from './peekViewWidget';
 import { ReferencesController, RequestOptions, ctxReferenceSearchVisible } from './referencesController';
 import { ReferencesModel, OneReference } from './referencesModel';
-import { asWinJsPromise, createCancelablePromise } from 'vs/base/common/async';
+import { createCancelablePromise } from 'vs/base/common/async';
 import { onUnexpectedExternalError } from 'vs/base/common/errors';
 import { EditorContextKeys } from 'vs/editor/common/editorContextKeys';
 import { EmbeddedCodeEditorWidget } from 'vs/editor/browser/widget/embeddedCodeEditorWidget';
@@ -26,7 +24,7 @@ import { ITextModel } from 'vs/editor/common/model';
 import { IListService } from 'vs/platform/list/browser/listService';
 import { ctxReferenceWidgetSearchTreeFocused } from 'vs/editor/contrib/referenceSearch/referencesWidget';
 import { CommandsRegistry, ICommandHandler } from 'vs/platform/commands/common/commands';
-import URI from 'vs/base/common/uri';
+import { URI } from 'vs/base/common/uri';
 import { ICodeEditorService } from 'vs/editor/browser/services/codeEditorService';
 import { CancellationToken } from 'vs/base/common/cancellation';
 
@@ -62,8 +60,8 @@ export class ReferenceAction extends EditorAction {
 	constructor() {
 		super({
 			id: 'editor.action.referenceSearch.trigger',
-			label: nls.localize('references.action.label', "Find All References"),
-			alias: 'Find All References',
+			label: nls.localize('references.action.label', "Peek References"),
+			alias: 'Find All References', // leave the alias?
 			precondition: ContextKeyExpr.and(
 				EditorContextKeys.hasReferenceProvider,
 				PeekContext.notInPeekEditor,
@@ -117,7 +115,7 @@ let findReferencesCommand: ICommandHandler = (accessor: ServicesAccessor, resour
 
 		let references = createCancelablePromise(token => provideReferences(control.getModel(), Position.lift(position), token).then(references => new ReferencesModel(references)));
 		let range = new Range(position.lineNumber, position.column, position.lineNumber, position.column);
-		return TPromise.as(controller.toggleWidget(range, references, defaultReferenceSearchOptions));
+		return Promise.resolve(controller.toggleWidget(range, references, defaultReferenceSearchOptions));
 	});
 };
 
@@ -126,6 +124,10 @@ let showReferencesCommand: ICommandHandler = (accessor: ServicesAccessor, resour
 		throw new Error('illegal argument, uri expected');
 	}
 
+	if (!references) {
+		throw new Error('missing references');
+	}
+
 	const codeEditorService = accessor.get(ICodeEditorService);
 	return codeEditorService.openCodeEditor({ resource }, codeEditorService.getFocusedCodeEditor()).then(control => {
 		if (!isCodeEditor(control)) {
@@ -137,7 +139,7 @@ let showReferencesCommand: ICommandHandler = (accessor: ServicesAccessor, resour
 			return undefined;
 		}
 
-		return TPromise.as(controller.toggleWidget(
+		return Promise.resolve(controller.toggleWidget(
 			new Range(position.lineNumber, position.column, position.lineNumber, position.column),
 			createCancelablePromise(_ => Promise.resolve(new ReferencesModel(references))),
 			defaultReferenceSearchOptions)).then(() => true);
@@ -272,9 +274,7 @@ export function provideReferences(model: ITextModel, position: Position, token:
 
 	// collect references from all providers
 	const promises = ReferenceProviderRegistry.ordered(model).map(provider => {
-		return asWinJsPromise((token) => {
-			return provider.provideReferences(model, position, { includeDeclaration: true }, token);
-		}).then(result => {
+		return Promise.resolve(provider.provideReferences(model, position, { includeDeclaration: true }, token)).then(result => {
 			if (Array.isArray(result)) {
 				return <Location[]>result;
 			}

src/vs/editor/contrib/referenceSearch/referencesController.ts

@@ -2,17 +2,15 @@
  *  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 * as nls from 'vs/nls';
 import { onUnexpectedError } from 'vs/base/common/errors';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
-import { TPromise } from 'vs/base/common/winjs.base';
 import { ICodeEditorService } from 'vs/editor/browser/services/codeEditorService';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IContextKey, IContextKeyService, RawContextKey } from 'vs/platform/contextkey/common/contextkey';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
-import { IStorageService } from 'vs/platform/storage/common/storage';
+import { IStorageService, StorageScope } from 'vs/platform/storage/common/storage';
 import * as editorCommon from 'vs/editor/common/editorCommon';
 import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
 import { ReferencesModel } from './referencesModel';
@@ -27,7 +25,7 @@ export const ctxReferenceSearchVisible = new RawContextKey<boolean>('referenceSe
 
 export interface RequestOptions {
 	getMetaTitle(model: ReferencesModel): string;
-	onGoto?: (reference: Location) => TPromise<any>;
+	onGoto?: (reference: Location) => Thenable<any>;
 }
 
 export abstract class ReferencesController implements editorCommon.IEditorContribution {
@@ -97,14 +95,14 @@ export abstract class ReferencesController implements editorCommon.IEditorContri
 			}
 		}));
 		const storageKey = 'peekViewLayout';
-		const data = <LayoutData>JSON.parse(this._storageService.get(storageKey, undefined, '{}'));
+		const data = <LayoutData>JSON.parse(this._storageService.get(storageKey, StorageScope.GLOBAL, '{}'));
 		this._widget = this._instantiationService.createInstance(ReferenceWidget, this._editor, this._defaultTreeKeyboardSupport, data);
 		this._widget.setTitle(nls.localize('labelLoading', "Loading..."));
 		this._widget.show(range);
 		this._disposables.push(this._widget.onDidClose(() => {
 			modelPromise.cancel();
 
-			this._storageService.store(storageKey, JSON.stringify(this._widget.layoutData));
+			this._storageService.store(storageKey, JSON.stringify(this._widget.layoutData), StorageScope.GLOBAL);
 			this._widget = null;
 			this.closeWidget();
 		}));
@@ -194,7 +192,7 @@ export abstract class ReferencesController implements editorCommon.IEditorContri
 		this._requestIdPool += 1; // Cancel pending requests
 	}
 
-	private _gotoReference(ref: Location): TPromise<any> {
+	private _gotoReference(ref: Location): Thenable<any> {
 		this._widget.hide();
 
 		this._ignoreModelChangeEvent = true;
@@ -228,15 +226,15 @@ export abstract class ReferencesController implements editorCommon.IEditorContri
 	}
 
 	public openReference(ref: Location, sideBySide: boolean): void {
+		// clear stage
+		if (!sideBySide) {
+			this.closeWidget();
+		}
+
 		const { uri, range } = ref;
 		this._editorService.openCodeEditor({
 			resource: uri,
 			options: { selection: range }
 		}, this._editor, sideBySide);
-
-		// clear stage
-		if (!sideBySide) {
-			this.closeWidget();
-		}
 	}
 }

src/vs/editor/contrib/referenceSearch/referencesModel.ts

@@ -2,60 +2,46 @@
  *  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 { localize } from 'vs/nls';
 import { Event, Emitter } from 'vs/base/common/event';
 import { basename } from 'vs/base/common/paths';
 import { IDisposable, dispose, IReference } from 'vs/base/common/lifecycle';
 import * as strings from 'vs/base/common/strings';
-import URI from 'vs/base/common/uri';
+import { URI } from 'vs/base/common/uri';
 import { defaultGenerator } from 'vs/base/common/idGenerator';
-import { TPromise } from 'vs/base/common/winjs.base';
 import { Range, IRange } from 'vs/editor/common/core/range';
 import { Location } from 'vs/editor/common/modes';
 import { ITextModelService, ITextEditorModel } from 'vs/editor/common/services/resolverService';
 import { Position } from 'vs/editor/common/core/position';
 
 export class OneReference {
-	private _id: string;
-	private _onRefChanged = new Emitter<this>();
+	readonly id: string;
 
+	private readonly _onRefChanged = new Emitter<this>();
 	readonly onRefChanged: Event<this> = this._onRefChanged.event;
 
 	constructor(
-		private _parent: FileReferences,
+		readonly parent: FileReferences,
 		private _range: IRange
 	) {
-		this._id = defaultGenerator.nextId();
+		this.id = defaultGenerator.nextId();
 	}
 
-	public get id(): string {
-		return this._id;
+	get uri(): URI {
+		return this.parent.uri;
 	}
 
-	public get model(): FileReferences {
-		return this._parent;
-	}
-
-	public get parent(): FileReferences {
-		return this._parent;
-	}
-
-	public get uri(): URI {
-		return this._parent.uri;
-	}
-
-	public get range(): IRange {
+	get range(): IRange {
 		return this._range;
 	}
 
-	public set range(value: IRange) {
+	set range(value: IRange) {
 		this._range = value;
 		this._onRefChanged.fire(this);
 	}
 
-	public getAriaMessage(): string {
+	getAriaMessage(): string {
 		return localize(
 			'aria.oneReference', "symbol in {0} on line {1} at column {2}",
 			basename(this.uri.fsPath), this.range.startLineNumber, this.range.startColumn
@@ -65,14 +51,17 @@ export class OneReference {
 
 export class FilePreview implements IDisposable {
 
-	constructor(private _modelReference: IReference<ITextEditorModel>) {
-
+	constructor(
+		private readonly _modelReference: IReference<ITextEditorModel>
+	) {
 	}
 
-	private get _model() { return this._modelReference.object.textEditorModel; }
+	dispose(): void {
+		dispose(this._modelReference);
+	}
 
-	public preview(range: IRange, n: number = 8): { before: string; inside: string; after: string } {
-		const model = this._model;
+	preview(range: IRange, n: number = 8): { before: string; inside: string; after: string } | undefined {
+		const model = this._modelReference.object.textEditorModel;
 
 		if (!model) {
 			return undefined;
@@ -91,47 +80,40 @@ export class FilePreview implements IDisposable {
 
 		return ret;
 	}
-
-	dispose(): void {
-		if (this._modelReference) {
-			this._modelReference.dispose();
-			this._modelReference = null;
-		}
-	}
 }
 
 export class FileReferences implements IDisposable {
 
 	private _children: OneReference[];
-	private _preview: FilePreview;
+	private _preview?: FilePreview;
 	private _resolved: boolean;
 	private _loadFailure: any;
 
-	constructor(private _parent: ReferencesModel, private _uri: URI) {
+	constructor(private readonly _parent: ReferencesModel, private _uri: URI) {
 		this._children = [];
 	}
 
-	public get id(): string {
+	get id(): string {
 		return this._uri.toString();
 	}
 
-	public get parent(): ReferencesModel {
+	get parent(): ReferencesModel {
 		return this._parent;
 	}
 
-	public get children(): OneReference[] {
+	get children(): OneReference[] {
 		return this._children;
 	}
 
-	public get uri(): URI {
+	get uri(): URI {
 		return this._uri;
 	}
 
-	public get preview(): FilePreview {
+	get preview(): FilePreview | undefined {
 		return this._preview;
 	}
 
-	public get failure(): any {
+	get failure(): any {
 		return this._loadFailure;
 	}
 
@@ -144,13 +126,13 @@ export class FileReferences implements IDisposable {
 		}
 	}
 
-	public resolve(textModelResolverService: ITextModelService): TPromise<FileReferences> {
+	resolve(textModelResolverService: ITextModelService): Promise<FileReferences> {
 
 		if (this._resolved) {
-			return TPromise.as(this);
+			return Promise.resolve(this);
 		}
 
-		return textModelResolverService.createModelReference(this._uri).then(modelReference => {
+		return Promise.resolve(textModelResolverService.createModelReference(this._uri).then(modelReference => {
 			const model = modelReference.object;
 
 			if (!model) {
@@ -168,13 +150,13 @@ export class FileReferences implements IDisposable {
 			this._resolved = true;
 			this._loadFailure = err;
 			return this;
-		});
+		}));
 	}
 
 	dispose(): void {
 		if (this._preview) {
 			this._preview.dispose();
-			this._preview = null;
+			this._preview = undefined;
 		}
 	}
 }
@@ -182,18 +164,18 @@ export class FileReferences implements IDisposable {
 export class ReferencesModel implements IDisposable {
 
 	private readonly _disposables: IDisposable[];
-	private _groups: FileReferences[] = [];
-	private _references: OneReference[] = [];
-	private _onDidChangeReferenceRange = new Emitter<OneReference>();
+	readonly groups: FileReferences[] = [];
+	readonly references: OneReference[] = [];
 
-	onDidChangeReferenceRange: Event<OneReference> = this._onDidChangeReferenceRange.event;
+	readonly _onDidChangeReferenceRange = new Emitter<OneReference>();
+	readonly onDidChangeReferenceRange: Event<OneReference> = this._onDidChangeReferenceRange.event;
 
 	constructor(references: Location[]) {
 		this._disposables = [];
 		// grouping and sorting
 		references.sort(ReferencesModel._compareReferences);
 
-		let current: FileReferences;
+		let current: FileReferences | undefined;
 		for (let ref of references) {
 			if (!current || current.uri.toString() !== ref.uri.toString()) {
 				// new group
@@ -207,22 +189,14 @@ export class ReferencesModel implements IDisposable {
 
 				let oneRef = new OneReference(current, ref.range);
 				this._disposables.push(oneRef.onRefChanged((e) => this._onDidChangeReferenceRange.fire(e)));
-				this._references.push(oneRef);
+				this.references.push(oneRef);
 				current.children.push(oneRef);
 			}
 		}
 	}
 
-	public get empty(): boolean {
-		return this._groups.length === 0;
-	}
-
-	public get references(): OneReference[] {
-		return this._references;
-	}
-
-	public get groups(): FileReferences[] {
-		return this._groups;
+	get empty(): boolean {
+		return this.groups.length === 0;
 	}
 
 	getAriaMessage(): string {
@@ -237,7 +211,7 @@ export class ReferencesModel implements IDisposable {
 		}
 	}
 
-	public nextOrPreviousReference(reference: OneReference, next: boolean): OneReference {
+	nextOrPreviousReference(reference: OneReference, next: boolean): OneReference {
 
 		let { parent } = reference;
 
@@ -265,9 +239,9 @@ export class ReferencesModel implements IDisposable {
 		}
 	}
 
-	public nearestReference(resource: URI, position: Position): OneReference {
+	nearestReference(resource: URI, position: Position): OneReference | undefined {
 
-		const nearest = this._references.map((ref, idx) => {
+		const nearest = this.references.map((ref, idx) => {
 			return {
 				idx,
 				prefixLen: strings.commonPrefixLength(ref.uri.toString(), resource.toString()),
@@ -288,14 +262,15 @@ export class ReferencesModel implements IDisposable {
 		})[0];
 
 		if (nearest) {
-			return this._references[nearest.idx];
+			return this.references[nearest.idx];
 		}
 		return undefined;
 	}
 
 	dispose(): void {
-		this._groups = dispose(this._groups);
+		dispose(this.groups);
 		dispose(this._disposables);
+		this.groups.length = 0;
 		this._disposables.length = 0;
 	}
 

src/vs/editor/contrib/referenceSearch/referencesTree.ts

@@ -0,0 +1,214 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+
+import { ReferencesModel, FileReferences, OneReference } from './referencesModel';
+import { IDataSource } from 'vs/base/browser/ui/tree/asyncDataTree';
+import { ITextModelService } from 'vs/editor/common/services/resolverService';
+import { ITreeRenderer, ITreeNode } from 'vs/base/browser/ui/tree/tree';
+import { IconLabel } from 'vs/base/browser/ui/iconLabel/iconLabel';
+import { CountBadge } from 'vs/base/browser/ui/countBadge/countBadge';
+import { ILabelService } from 'vs/platform/label/common/label';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { attachBadgeStyler } from 'vs/platform/theme/common/styler';
+import * as dom from 'vs/base/browser/dom';
+import { localize } from 'vs/nls';
+import { getBaseLabel } from 'vs/base/common/labels';
+import { dirname } from 'vs/base/common/resources';
+import { escape } from 'vs/base/common/strings';
+import { Disposable } from 'vs/base/common/lifecycle';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { IAccessibilityProvider } from 'vs/base/browser/ui/list/listWidget';
+import { IListVirtualDelegate } from 'vs/base/browser/ui/list/list';
+
+//#region data source
+
+export type TreeElement = FileReferences | OneReference;
+
+export class DataSource implements IDataSource<TreeElement> {
+
+	root: ReferencesModel | FileReferences;
+
+	constructor(
+		@ITextModelService private readonly _resolverService: ITextModelService,
+	) {
+		//
+	}
+
+	hasChildren(element: TreeElement): boolean {
+		if (!element) {
+			return true;
+		}
+		if (element instanceof FileReferences && !element.failure) {
+			return true;
+		}
+		return false;
+	}
+
+	getChildren(element: TreeElement): Thenable<TreeElement[]> {
+		if (!element && this.root instanceof FileReferences) {
+			element = this.root;
+		}
+		if (element instanceof FileReferences) {
+			return element.resolve(this._resolverService).then(val => {
+				// if (element.failure) {
+				// 	// refresh the element on failure so that
+				// 	// we can update its rendering
+				// 	return tree.refresh(element).then(() => val.children);
+				// }
+				return val.children;
+			});
+		}
+		if (this.root instanceof ReferencesModel) {
+			return Promise.resolve(this.root.groups);
+		}
+		throw new Error('bad tree');
+	}
+}
+
+//#endregion
+
+export class Delegate implements IListVirtualDelegate<TreeElement> {
+	getHeight(): number {
+		return 23;
+	}
+	getTemplateId(element: FileReferences | OneReference): string {
+		if (element instanceof FileReferences) {
+			return FileReferencesRenderer.id;
+		} else {
+			return OneReferenceRenderer.id;
+		}
+	}
+}
+
+//#region render: File
+
+class FileReferencesTemplate extends Disposable {
+
+	readonly file: IconLabel;
+	readonly badge: CountBadge;
+
+	constructor(
+		container: HTMLElement,
+		@ILabelService private readonly _uriLabel: ILabelService,
+		@IThemeService themeService: IThemeService,
+	) {
+		super();
+		const parent = document.createElement('div');
+		dom.addClass(parent, 'reference-file');
+		this.file = this._register(new IconLabel(parent));
+
+		this.badge = new CountBadge(dom.append(parent, dom.$('.count')));
+		this._register(attachBadgeStyler(this.badge, themeService));
+
+		container.appendChild(parent);
+	}
+
+	set(element: FileReferences) {
+		let parent = dirname(element.uri);
+		this.file.setValue(getBaseLabel(element.uri), parent ? this._uriLabel.getUriLabel(parent, { relative: true }) : undefined, { title: this._uriLabel.getUriLabel(element.uri) });
+		const len = element.children.length;
+		this.badge.setCount(len);
+		if (element.failure) {
+			this.badge.setTitleFormat(localize('referencesFailre', "Failed to resolve file."));
+		} else if (len > 1) {
+			this.badge.setTitleFormat(localize('referencesCount', "{0} references", len));
+		} else {
+			this.badge.setTitleFormat(localize('referenceCount', "{0} reference", len));
+		}
+	}
+}
+
+export class FileReferencesRenderer implements ITreeRenderer<FileReferences, void, FileReferencesTemplate> {
+
+	static readonly id = 'FileReferencesRenderer';
+
+	readonly templateId: string = FileReferencesRenderer.id;
+
+	constructor(@IInstantiationService private readonly _instantiationService: IInstantiationService) { }
+
+	renderTemplate(container: HTMLElement): FileReferencesTemplate {
+		return this._instantiationService.createInstance(FileReferencesTemplate, container);
+	}
+	renderElement(node: ITreeNode<FileReferences, void>, index: number, template: FileReferencesTemplate): void {
+		template.set(node.element);
+	}
+	disposeElement(element: ITreeNode<FileReferences, void>, index: number, templateData: FileReferencesTemplate): void {
+		//
+	}
+	disposeTemplate(templateData: FileReferencesTemplate): void {
+		templateData.dispose();
+	}
+}
+
+//#endregion
+
+//#region render: Reference
+class OneReferenceTemplate {
+
+	readonly before: HTMLSpanElement;
+	readonly inside: HTMLSpanElement;
+	readonly after: HTMLSpanElement;
+
+	constructor(container: HTMLElement) {
+		const parent = document.createElement('div');
+		this.before = document.createElement('span');
+		this.inside = document.createElement('span');
+		this.after = document.createElement('span');
+		dom.addClass(this.inside, 'referenceMatch');
+		dom.addClass(parent, 'reference');
+		parent.appendChild(this.before);
+		parent.appendChild(this.inside);
+		parent.appendChild(this.after);
+		container.appendChild(parent);
+	}
+
+	set(element: OneReference): void {
+		const filePreview = element.parent.preview;
+		const preview = filePreview && filePreview.preview(element.range);
+		if (preview) {
+			const { before, inside, after } = preview;
+			this.before.innerHTML = escape(before);
+			this.inside.innerHTML = escape(inside);
+			this.after.innerHTML = escape(after);
+		}
+	}
+}
+
+export class OneReferenceRenderer implements ITreeRenderer<OneReference, void, OneReferenceTemplate> {
+
+	static readonly id = 'OneReferenceRenderer';
+
+	readonly templateId: string = OneReferenceRenderer.id;
+
+	renderTemplate(container: HTMLElement): OneReferenceTemplate {
+		return new OneReferenceTemplate(container);
+	}
+	renderElement(element: ITreeNode<OneReference, void>, index: number, templateData: OneReferenceTemplate): void {
+		templateData.set(element.element);
+	}
+	disposeElement(): void {
+		//
+	}
+	disposeTemplate(): void {
+		//
+	}
+}
+
+//#endregion
+
+
+export class AriaProvider implements IAccessibilityProvider<FileReferences | OneReference> {
+
+	getAriaLabel(element: FileReferences | OneReference): string | null {
+		if (element instanceof FileReferences) {
+			return element.getAriaMessage();
+		} else if (element instanceof OneReference) {
+			return element.getAriaMessage();
+		} else {
+			return null;
+		}
+	}
+}

src/vs/editor/contrib/referenceSearch/referencesWidget.ts

@@ -2,50 +2,35 @@
  *  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!./media/referencesWidget';
-import * as nls from 'vs/nls';
-import { onUnexpectedError } from 'vs/base/common/errors';
-import { Event, Emitter } from 'vs/base/common/event';
-import { IDisposable, dispose, IReference } from 'vs/base/common/lifecycle';
-import { Schemas } from 'vs/base/common/network';
-import * as strings from 'vs/base/common/strings';
-import { TPromise } from 'vs/base/common/winjs.base';
-import { Color } from 'vs/base/common/color';
-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 { GestureEvent } from 'vs/base/browser/touch';
-import { CountBadge } from 'vs/base/browser/ui/countBadge/countBadge';
-import { FileLabel } from 'vs/base/browser/ui/iconLabel/iconLabel';
-import * as tree from 'vs/base/parts/tree/browser/tree';
-import { IInstantiationService, optional } from 'vs/platform/instantiation/common/instantiation';
-import { IWorkspaceContextService } from 'vs/platform/workspace/common/workspace';
-import { Range, IRange } from 'vs/editor/common/core/range';
-import * as editorCommon from 'vs/editor/common/editorCommon';
-import { TextModel, ModelDecorationOptions } from 'vs/editor/common/model/textModel';
+import { ISashEvent, IVerticalSashLayoutProvider, Sash } from 'vs/base/browser/ui/sash/sash';
+import { Color } from 'vs/base/common/color';
+import { Emitter, Event } from 'vs/base/common/event';
+import { dispose, IDisposable, IReference } from 'vs/base/common/lifecycle';
+import { Schemas } from 'vs/base/common/network';
+import { basenameOrAuthority, dirname } from 'vs/base/common/resources';
+import 'vs/css!./media/referencesWidget';
 import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
 import { EmbeddedCodeEditorWidget } from 'vs/editor/browser/widget/embeddedCodeEditorWidget';
+import { IEditorOptions } from 'vs/editor/common/config/editorOptions';
+import { IRange, Range } from 'vs/editor/common/core/range';
+import * as editorCommon from 'vs/editor/common/editorCommon';
+import { IModelDeltaDecoration, TrackedRangeStickiness } from 'vs/editor/common/model';
+import { ModelDecorationOptions, TextModel } from 'vs/editor/common/model/textModel';
+import { Location } from 'vs/editor/common/modes';
+import { ITextEditorModel, ITextModelService } from 'vs/editor/common/services/resolverService';
+import { AriaProvider, DataSource, Delegate, FileReferencesRenderer, OneReferenceRenderer, TreeElement } from 'vs/editor/contrib/referenceSearch/referencesTree';
+import * as nls from 'vs/nls';
+import { RawContextKey } from 'vs/platform/contextkey/common/contextkey';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { ILabelService } from 'vs/platform/label/common/label';
+import { WorkbenchAsyncDataTree } from 'vs/platform/list/browser/listService';
+import { activeContrastBorder, contrastBorder, registerColor } from 'vs/platform/theme/common/colorRegistry';
+import { ITheme, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { PeekViewWidget } from './peekViewWidget';
 import { FileReferences, OneReference, ReferencesModel } from './referencesModel';
-import { ITextModelService, ITextEditorModel } from 'vs/editor/common/services/resolverService';
-import { registerColor, activeContrastBorder, contrastBorder } from 'vs/platform/theme/common/colorRegistry';
-import { registerThemingParticipant, ITheme, IThemeService } from 'vs/platform/theme/common/themeService';
-import { attachBadgeStyler } from 'vs/platform/theme/common/styler';
-import { IEditorOptions } from 'vs/editor/common/config/editorOptions';
-import { IEnvironmentService } from 'vs/platform/environment/common/environment';
-import URI from 'vs/base/common/uri';
-import { TrackedRangeStickiness, IModelDeltaDecoration } from 'vs/editor/common/model';
-import { WorkbenchTree, WorkbenchTreeController } from 'vs/platform/list/browser/listService';
-import { RawContextKey } from 'vs/platform/contextkey/common/contextkey';
-import { Location } from 'vs/editor/common/modes';
-import { ClickBehavior } from 'vs/base/parts/tree/browser/treeDefaults';
-import { IUriDisplayService } from 'vs/platform/uriDisplay/common/uriDisplay';
-import { dirname, basenameOrAuthority } from 'vs/base/common/resources';
-
 
 class DecorationsManager implements IDisposable {
 
@@ -158,276 +143,6 @@ class DecorationsManager implements IDisposable {
 	}
 }
 
-class DataSource implements tree.IDataSource {
-
-	constructor(
-		@ITextModelService private readonly _textModelResolverService: ITextModelService
-	) {
-		//
-	}
-
-	public getId(tree: tree.ITree, element: any): string {
-		if (element instanceof ReferencesModel) {
-			return 'root';
-		} else if (element instanceof FileReferences) {
-			return (<FileReferences>element).id;
-		} else if (element instanceof OneReference) {
-			return (<OneReference>element).id;
-		}
-		return undefined;
-	}
-
-	public hasChildren(tree: tree.ITree, element: any): boolean {
-		if (element instanceof ReferencesModel) {
-			return true;
-		}
-		if (element instanceof FileReferences && !(<FileReferences>element).failure) {
-			return true;
-		}
-		return false;
-	}
-
-	public getChildren(tree: tree.ITree, element: ReferencesModel | FileReferences): TPromise<any[]> {
-		if (element instanceof ReferencesModel) {
-			return TPromise.as(element.groups);
-		} else if (element instanceof FileReferences) {
-			return element.resolve(this._textModelResolverService).then(val => {
-				if (element.failure) {
-					// refresh the element on failure so that
-					// we can update its rendering
-					return tree.refresh(element).then(() => val.children);
-				}
-				return val.children;
-			});
-		} else {
-			return TPromise.as([]);
-		}
-	}
-
-	public getParent(tree: tree.ITree, element: any): TPromise<any> {
-		let result: any = null;
-		if (element instanceof FileReferences) {
-			result = (<FileReferences>element).parent;
-		} else if (element instanceof OneReference) {
-			result = (<OneReference>element).parent;
-		}
-		return TPromise.as(result);
-	}
-}
-
-class Controller extends WorkbenchTreeController {
-
-	private _onDidFocus = new Emitter<any>();
-	readonly onDidFocus: Event<any> = this._onDidFocus.event;
-
-	private _onDidSelect = new Emitter<any>();
-	readonly onDidSelect: Event<any> = this._onDidSelect.event;
-
-	private _onDidOpenToSide = new Emitter<any>();
-	readonly onDidOpenToSide: Event<any> = this._onDidOpenToSide.event;
-
-	public onTap(tree: tree.ITree, element: any, event: GestureEvent): boolean {
-		if (element instanceof FileReferences) {
-			event.preventDefault();
-			event.stopPropagation();
-			return this._expandCollapse(tree, element);
-		}
-
-		let result = super.onTap(tree, element, event);
-
-		this._onDidFocus.fire(element);
-		return result;
-	}
-
-	public onMouseDown(tree: tree.ITree, element: any, event: IMouseEvent): boolean {
-		let isDoubleClick = event.detail === 2;
-		if (event.leftButton) {
-			if (element instanceof FileReferences) {
-				if (this.openOnSingleClick || isDoubleClick || this.isClickOnTwistie(event)) {
-					event.preventDefault();
-					event.stopPropagation();
-					return this._expandCollapse(tree, element);
-				}
-			}
-
-			let result = super.onClick(tree, element, event);
-			let openToSide = event.ctrlKey || event.metaKey || event.altKey;
-			if (openToSide && (isDoubleClick || this.openOnSingleClick)) {
-				this._onDidOpenToSide.fire(element);
-			} else if (isDoubleClick) {
-				this._onDidSelect.fire(element);
-			} else if (this.openOnSingleClick) {
-				this._onDidFocus.fire(element);
-			}
-			return result;
-		}
-
-		return false;
-	}
-
-	public onClick(tree: tree.ITree, element: any, event: IMouseEvent): boolean {
-		if (event.leftButton) {
-			return false; // Already handled by onMouseDown
-		}
-
-		return super.onClick(tree, element, event);
-	}
-
-	private _expandCollapse(tree: tree.ITree, element: any): boolean {
-
-		if (tree.isExpanded(element)) {
-			tree.collapse(element).done(null, onUnexpectedError);
-		} else {
-			tree.expand(element).done(null, onUnexpectedError);
-		}
-		return true;
-	}
-
-	public onEscape(tree: tree.ITree, event: IKeyboardEvent): boolean {
-		return false;
-	}
-
-	dispose(): void {
-		this._onDidFocus.dispose();
-		this._onDidSelect.dispose();
-		this._onDidOpenToSide.dispose();
-	}
-}
-
-class FileReferencesTemplate {
-
-	readonly file: FileLabel;
-	readonly badge: CountBadge;
-	readonly dispose: () => void;
-
-	constructor(
-		container: HTMLElement,
-		@IWorkspaceContextService private readonly _contextService: IWorkspaceContextService,
-		@optional(IEnvironmentService) private _environmentService: IEnvironmentService,
-		@IThemeService themeService: IThemeService,
-	) {
-		const parent = document.createElement('div');
-		dom.addClass(parent, 'reference-file');
-		container.appendChild(parent);
-		this.file = new FileLabel(parent, URI.parse('no:file'), this._contextService, this._environmentService);
-
-		this.badge = new CountBadge($('.count').appendTo(parent).getHTMLElement());
-		const styler = attachBadgeStyler(this.badge, themeService);
-
-		this.dispose = () => {
-			this.file.dispose();
-			styler.dispose();
-		};
-	}
-
-	set(element: FileReferences) {
-		this.file.setFile(element.uri, this._contextService, this._environmentService);
-		const len = element.children.length;
-		this.badge.setCount(len);
-		if (element.failure) {
-			this.badge.setTitleFormat(nls.localize('referencesFailre', "Failed to resolve file."));
-		} else if (len > 1) {
-			this.badge.setTitleFormat(nls.localize('referencesCount', "{0} references", len));
-		} else {
-			this.badge.setTitleFormat(nls.localize('referenceCount', "{0} reference", len));
-		}
-	}
-}
-
-class OneReferenceTemplate {
-
-	readonly before: HTMLSpanElement;
-	readonly inside: HTMLSpanElement;
-	readonly after: HTMLSpanElement;
-
-	constructor(container: HTMLElement) {
-		const parent = document.createElement('div');
-		this.before = document.createElement('span');
-		this.inside = document.createElement('span');
-		this.after = document.createElement('span');
-		dom.addClass(this.inside, 'referenceMatch');
-		dom.addClass(parent, 'reference');
-		parent.appendChild(this.before);
-		parent.appendChild(this.inside);
-		parent.appendChild(this.after);
-		container.appendChild(parent);
-	}
-
-	set(element: OneReference): void {
-		const { before, inside, after } = element.parent.preview.preview(element.range);
-		this.before.innerHTML = strings.escape(before);
-		this.inside.innerHTML = strings.escape(inside);
-		this.after.innerHTML = strings.escape(after);
-	}
-}
-
-class Renderer implements tree.IRenderer {
-
-	private static readonly _ids = {
-		FileReferences: 'FileReferences',
-		OneReference: 'OneReference'
-	};
-
-	constructor(
-		@IWorkspaceContextService private readonly _contextService: IWorkspaceContextService,
-		@IThemeService private readonly _themeService: IThemeService,
-		@optional(IEnvironmentService) private _environmentService: IEnvironmentService,
-	) {
-		//
-	}
-
-	getHeight(tree: tree.ITree, element: FileReferences | OneReference): number {
-		return 23;
-	}
-
-	getTemplateId(tree: tree.ITree, element: FileReferences | OneReference): string {
-		if (element instanceof FileReferences) {
-			return Renderer._ids.FileReferences;
-		} else if (element instanceof OneReference) {
-			return Renderer._ids.OneReference;
-		}
-		throw element;
-	}
-
-	renderTemplate(tree: tree.ITree, templateId: string, container: HTMLElement) {
-		if (templateId === Renderer._ids.FileReferences) {
-			return new FileReferencesTemplate(container, this._contextService, this._environmentService, this._themeService);
-		} else if (templateId === Renderer._ids.OneReference) {
-			return new OneReferenceTemplate(container);
-		}
-		throw templateId;
-	}
-
-	renderElement(tree: tree.ITree, element: FileReferences | OneReference, templateId: string, templateData: any): void {
-		if (element instanceof FileReferences) {
-			(<FileReferencesTemplate>templateData).set(element);
-		} else if (element instanceof OneReference) {
-			(<OneReferenceTemplate>templateData).set(element);
-		} else {
-			throw templateId;
-		}
-	}
-
-	disposeTemplate(tree: tree.ITree, templateId: string, templateData: FileReferencesTemplate | OneReferenceTemplate): void {
-		if (templateData instanceof FileReferencesTemplate) {
-			templateData.dispose();
-		}
-	}
-}
-
-class AriaProvider implements tree.IAccessibilityProvider {
-
-	getAriaLabel(tree: tree.ITree, element: FileReferences | OneReference): string {
-		if (element instanceof FileReferences) {
-			return element.getAriaMessage();
-		} else if (element instanceof OneReference) {
-			return element.getAriaMessage();
-		} else {
-			return undefined;
-		}
-	}
-}
-
 class VSash {
 
 	private _disposables: IDisposable[] = [];
@@ -519,23 +234,24 @@ export class ReferenceWidget extends PeekViewWidget {
 	private _callOnDispose: IDisposable[] = [];
 	private _onDidSelectReference = new Emitter<SelectionEvent>();
 
-	private _tree: WorkbenchTree;
-	private _treeContainer: Builder;
+	private _treeDataSource: DataSource;
+	private _tree: WorkbenchAsyncDataTree<TreeElement>;
+	private _treeContainer: HTMLElement;
 	private _sash: VSash;
 	private _preview: ICodeEditor;
 	private _previewModelReference: IReference<ITextEditorModel>;
 	private _previewNotAvailableMessage: TextModel;
-	private _previewContainer: Builder;
-	private _messageContainer: Builder;
+	private _previewContainer: HTMLElement;
+	private _messageContainer: HTMLElement;
 
 	constructor(
 		editor: ICodeEditor,
 		private _defaultTreeKeyboardSupport: boolean,
 		public layoutData: LayoutData,
 		@IThemeService themeService: IThemeService,
-		@ITextModelService private _textModelResolverService: ITextModelService,
-		@IInstantiationService private _instantiationService: IInstantiationService,
-		@IUriDisplayService private _uriDisplay: IUriDisplayService
+		@ITextModelService private readonly _textModelResolverService: ITextModelService,
+		@IInstantiationService private readonly _instantiationService: IInstantiationService,
+		@ILabelService private readonly _uriLabel: ILabelService
 	) {
 		super(editor, { showFrame: false, showArrow: true, isResizeable: true, isAccessible: true });
 
@@ -545,7 +261,7 @@ export class ReferenceWidget extends PeekViewWidget {
 	}
 
 	private _applyTheme(theme: ITheme) {
-		let borderColor = theme.getColor(peekViewBorder) || Color.transparent;
+		const borderColor = theme.getColor(peekViewBorder) || Color.transparent;
 		this.style({
 			arrowColor: borderColor,
 			frameColor: borderColor,
@@ -575,7 +291,7 @@ export class ReferenceWidget extends PeekViewWidget {
 		this._tree.domFocus();
 	}
 
-	protected _onTitleClick(e: MouseEvent): void {
+	protected _onTitleClick(e: IMouseEvent): void {
 		if (this._preview && this._preview.getModel()) {
 			this._onDidSelectReference.fire({
 				element: this._getFocusedReference(),
@@ -586,96 +302,102 @@ export class ReferenceWidget extends PeekViewWidget {
 	}
 
 	protected _fillBody(containerElement: HTMLElement): void {
-		let container = $(containerElement);
-
 		this.setCssClass('reference-zone-widget');
 
 		// message pane
-		container.div({ 'class': 'messages' }, div => {
-			this._messageContainer = div.hide();
-		});
+		this._messageContainer = dom.append(containerElement, dom.$('div.messages'));
+		dom.hide(this._messageContainer);
 
 		// editor
-		container.div({ 'class': 'preview inline' }, (div: Builder) => {
-
-			let options: IEditorOptions = {
-				scrollBeyondLastLine: false,
-				scrollbar: {
-					verticalScrollbarSize: 14,
-					horizontal: 'auto',
-					useShadows: true,
-					verticalHasArrows: false,
-					horizontalHasArrows: false
-				},
-				overviewRulerLanes: 2,
-				fixedOverflowWidgets: true,
-				minimap: {
-					enabled: false
-				}
-			};
-
-			this._preview = this._instantiationService.createInstance(EmbeddedCodeEditorWidget, div.getHTMLElement(), options, this.editor);
-			this._previewContainer = div.hide();
-			this._previewNotAvailableMessage = TextModel.createFromString(nls.localize('missingPreviewMessage', "no preview available"));
-		});
+		this._previewContainer = dom.append(containerElement, dom.$('div.preview.inline'));
+		let options: IEditorOptions = {
+			scrollBeyondLastLine: false,
+			scrollbar: {
+				verticalScrollbarSize: 14,
+				horizontal: 'auto',
+				useShadows: true,
+				verticalHasArrows: false,
+				horizontalHasArrows: false
+			},
+			overviewRulerLanes: 2,
+			fixedOverflowWidgets: true,
+			minimap: {
+				enabled: false
+			}
+		};
+		this._preview = this._instantiationService.createInstance(EmbeddedCodeEditorWidget, this._previewContainer, options, this.editor);
+		dom.hide(this._previewContainer);
+		this._previewNotAvailableMessage = TextModel.createFromString(nls.localize('missingPreviewMessage', "no preview available"));
 
 		// sash
 		this._sash = new VSash(containerElement, this.layoutData.ratio || .8);
 		this._sash.onDidChangePercentages(() => {
 			let [left, right] = this._sash.percentages;
-			this._previewContainer.style({ width: left });
-			this._treeContainer.style({ width: right });
+			this._previewContainer.style.width = left;
+			this._treeContainer.style.width = right;
 			this._preview.layout();
 			this._tree.layout();
 			this.layoutData.ratio = this._sash.ratio;
 		});
 
 		// tree
-		container.div({ 'class': 'ref-tree inline' }, (div: Builder) => {
-			let controller = this._instantiationService.createInstance(Controller, { keyboardSupport: this._defaultTreeKeyboardSupport, clickBehavior: ClickBehavior.ON_MOUSE_UP /* our controller already deals with this */ });
-			this._callOnDispose.push(controller);
+		this._treeContainer = dom.append(containerElement, dom.$('div.ref-tree.inline'));
 
-			let config = <tree.ITreeConfiguration>{
-				dataSource: this._instantiationService.createInstance(DataSource),
-				renderer: this._instantiationService.createInstance(Renderer),
-				controller,
-				accessibilityProvider: new AriaProvider()
-			};
+		const renderer = [
+			this._instantiationService.createInstance(FileReferencesRenderer),
+			this._instantiationService.createInstance(OneReferenceRenderer),
+		];
 
-			let options: tree.ITreeOptions = {
-				twistiePixels: 20,
-				ariaLabel: nls.localize('treeAriaLabel', "References")
-			};
+		const treeOptions = {
+			ariaLabel: nls.localize('treeAriaLabel', "References"),
+			keyboardSupport: this._defaultTreeKeyboardSupport,
+			accessibilityProvider: new AriaProvider()
+		};
 
-			this._tree = this._instantiationService.createInstance(WorkbenchTree, div.getHTMLElement(), config, options);
+		this._treeDataSource = this._instantiationService.createInstance(DataSource);
 
-			ctxReferenceWidgetSearchTreeFocused.bindTo(this._tree.contextKeyService);
+		this._tree = this._instantiationService.createInstance(
+			WorkbenchAsyncDataTree, this._treeContainer, new Delegate(),
+			renderer as any,
+			this._treeDataSource,
+			treeOptions
+		) as any as WorkbenchAsyncDataTree<TreeElement>;
 
-			// listen on selection and focus
-			let onEvent = (element: any, kind: 'show' | 'goto' | 'side') => {
-				if (element instanceof OneReference) {
-					if (kind === 'show') {
-						this._revealReference(element, false);
-					}
-					this._onDidSelectReference.fire({ element, kind, source: 'tree' });
+		ctxReferenceWidgetSearchTreeFocused.bindTo(this._tree.contextKeyService);
+
+		// listen on selection and focus
+		let onEvent = (element: any, kind: 'show' | 'goto' | 'side') => {
+			if (element instanceof OneReference) {
+				if (kind === 'show') {
+					this._revealReference(element, false);
 				}
-			};
-			this._disposables.push(this._tree.onDidChangeFocus(event => {
-				if (event && event.payload && event.payload.origin === 'keyboard') {
-					onEvent(event.focus, 'show'); // only handle events from keyboard, mouse/touch is handled by other listeners below
-				}
-			}));
-			this._disposables.push(this._tree.onDidChangeSelection(event => {
-				if (event && event.payload && event.payload.origin === 'keyboard') {
-					onEvent(event.selection[0], 'goto'); // only handle events from keyboard, mouse/touch is handled by other listeners below
-				}
-			}));
-			this._disposables.push(controller.onDidFocus(element => onEvent(element, 'show')));
-			this._disposables.push(controller.onDidSelect(element => onEvent(element, 'goto')));
-			this._disposables.push(controller.onDidOpenToSide(element => onEvent(element, 'side')));
-
-			this._treeContainer = div.hide();
+				this._onDidSelectReference.fire({ element, kind, source: 'tree' });
+			}
+		};
+		this._tree.onDidChangeFocus(e => {
+			onEvent(e.elements[0], 'show');
 		});
+		this._tree.onDidChangeSelection(e => {
+			let aside = false;
+			let goto = false;
+			if (e.browserEvent instanceof KeyboardEvent) {
+				// todo@joh make this a command
+				goto = true;
+
+			} else if (e.browserEvent instanceof MouseEvent) {
+				aside = e.browserEvent.metaKey || e.browserEvent.metaKey || e.browserEvent.altKey;
+				goto = e.browserEvent.detail === 2;
+			}
+			if (aside) {
+				onEvent(e.elements[0], 'side');
+			} else if (goto) {
+				onEvent(e.elements[0], 'goto');
+			} else {
+				onEvent(e.elements[0], 'show');
+			}
+		});
+
+		dom.hide(this._treeContainer);
 	}
 
 	protected _doLayoutBody(heightInPixel: number, widthInPixel: number): void {
@@ -687,9 +409,10 @@ export class ReferenceWidget extends PeekViewWidget {
 
 		// set height/width
 		const [left, right] = this._sash.percentages;
-		this._previewContainer.style({ height, width: left });
-		this._treeContainer.style({ height, width: right });
-
+		this._previewContainer.style.height = height;
+		this._previewContainer.style.width = left;
+		this._treeContainer.style.height = height;
+		this._treeContainer.style.width = right;
 		// forward
 		this._tree.layout(heightInPixel);
 		this._preview.layout();
@@ -708,14 +431,17 @@ export class ReferenceWidget extends PeekViewWidget {
 
 	public setSelection(selection: OneReference): Promise<any> {
 		return this._revealReference(selection, true).then(() => {
-
+			if (!this._model) {
+				// disposed
+				return;
+			}
 			// show in tree
 			this._tree.setSelection([selection]);
-			this._tree.setFocus(selection);
+			this._tree.setFocus([selection]);
 		});
 	}
 
-	public setModel(newModel: ReferencesModel): TPromise<any> {
+	public setModel(newModel: ReferencesModel): Thenable<any> {
 		// clean up
 		this._disposeOnNewModel = dispose(this._disposeOnNewModel);
 		this._model = newModel;
@@ -725,15 +451,16 @@ export class ReferenceWidget extends PeekViewWidget {
 		return undefined;
 	}
 
-	private _onNewModel(): TPromise<any> {
+	private _onNewModel(): Thenable<any> {
 
 		if (this._model.empty) {
 			this.setTitle('');
-			this._messageContainer.innerHtml(nls.localize('noResults', "No results")).show();
-			return TPromise.as(void 0);
+			this._messageContainer.innerHTML = nls.localize('noResults', "No results");
+			dom.show(this._messageContainer);
+			return Promise.resolve(void 0);
 		}
 
-		this._messageContainer.hide();
+		dom.hide(this._messageContainer);
 		this._decorationsManager = new DecorationsManager(this._preview, this._model);
 		this._disposeOnNewModel.push(this._decorationsManager);
 
@@ -743,30 +470,35 @@ export class ReferenceWidget extends PeekViewWidget {
 		// listen on editor
 		this._disposeOnNewModel.push(this._preview.onMouseDown(e => {
 			const { event, target } = e;
-			if (event.detail === 2) {
-				this._onDidSelectReference.fire({
-					element: { uri: this._getFocusedReference().uri, range: target.range },
-					kind: (event.ctrlKey || event.metaKey || event.altKey) ? 'side' : 'open',
-					source: 'editor'
-				});
+			if (event.detail !== 2) {
+				return;
 			}
+			const element = this._getFocusedReference();
+			if (!element) {
+				return;
+			}
+			this._onDidSelectReference.fire({
+				element: { uri: element.uri, range: target.range },
+				kind: (event.ctrlKey || event.metaKey || event.altKey) ? 'side' : 'open',
+				source: 'editor'
+			});
 		}));
 
 		// make sure things are rendered
 		dom.addClass(this.container, 'results-loaded');
-		this._treeContainer.show();
-		this._previewContainer.show();
+		dom.show(this._treeContainer);
+		dom.show(this._previewContainer);
 		this._preview.layout();
 		this._tree.layout();
 		this.focus();
 
 		// pick input and a reference to begin with
-		const input = this._model.groups.length === 1 ? this._model.groups[0] : this._model;
-		return this._tree.setInput(input);
+		this._treeDataSource.root = this._model.groups.length === 1 ? this._model.groups[0] : this._model;
+		return this._tree.refresh(null);
 	}
 
 	private _getFocusedReference(): OneReference {
-		const element = this._tree.getFocus();
+		const [element] = this._tree.getFocus();
 		if (element instanceof OneReference) {
 			return element;
 		} else if (element instanceof FileReferences) {
@@ -777,46 +509,58 @@ export class ReferenceWidget extends PeekViewWidget {
 		return undefined;
 	}
 
+	private _revealedReference?: OneReference;
+
 	private async _revealReference(reference: OneReference, revealParent: boolean): Promise<void> {
 
+		// check if there is anything to do...
+		if (this._revealedReference === reference) {
+			return;
+		}
+		this._revealedReference = reference;
+
 		// Update widget header
 		if (reference.uri.scheme !== Schemas.inMemory) {
-			this.setTitle(basenameOrAuthority(reference.uri), this._uriDisplay.getLabel(dirname(reference.uri), false));
+			this.setTitle(basenameOrAuthority(reference.uri), this._uriLabel.getUriLabel(dirname(reference.uri)));
 		} else {
 			this.setTitle(nls.localize('peekView.alternateTitle', "References"));
 		}
 
 		const promise = this._textModelResolverService.createModelReference(reference.uri);
 
-		if (revealParent) {
-			await this._tree.reveal(reference.parent);
+		if (this._treeDataSource.root === reference.parent) {
+			this._tree.reveal(reference);
+		} else {
+			if (revealParent) {
+				this._tree.reveal(reference.parent);
+			}
+			await this._tree.expand(reference.parent);
+			this._tree.reveal(reference);
 		}
 
-		return TPromise.join([promise, this._tree.reveal(reference)]).then(values => {
-			const ref = values[0];
+		const ref = await promise;
 
-			if (!this._model) {
-				ref.dispose();
-				// disposed
-				return;
-			}
+		if (!this._model) {
+			// disposed
+			ref.dispose();
+			return;
+		}
 
-			dispose(this._previewModelReference);
+		dispose(this._previewModelReference);
 
-			// show in editor
-			const model = ref.object;
-			if (model) {
-				this._previewModelReference = ref;
-				let isSameModel = (this._preview.getModel() === model.textEditorModel);
-				this._preview.setModel(model.textEditorModel);
-				let sel = Range.lift(reference.range).collapseToStart();
-				this._preview.setSelection(sel);
-				this._preview.revealRangeInCenter(sel, isSameModel ? editorCommon.ScrollType.Smooth : editorCommon.ScrollType.Immediate);
-			} else {
-				this._preview.setModel(this._previewNotAvailableMessage);
-				ref.dispose();
-			}
-		}, onUnexpectedError);
+		// show in editor
+		const model = ref.object;
+		if (model) {
+			const scrollType = this._preview.getModel() === model.textEditorModel ? editorCommon.ScrollType.Smooth : editorCommon.ScrollType.Immediate;
+			const sel = Range.lift(reference.range).collapseToStart();
+			this._previewModelReference = ref;
+			this._preview.setModel(model.textEditorModel);
+			this._preview.setSelection(sel);
+			this._preview.revealRangeInCenter(sel, scrollType);
+		} else {
+			this._preview.setModel(this._previewNotAvailableMessage);
+			ref.dispose();
+		}
 	}
 }
 
@@ -841,43 +585,43 @@ export const peekViewEditorMatchHighlightBorder = registerColor('peekViewEditor.
 
 
 registerThemingParticipant((theme, collector) => {
-	let findMatchHighlightColor = theme.getColor(peekViewResultsMatchHighlight);
+	const findMatchHighlightColor = theme.getColor(peekViewResultsMatchHighlight);
 	if (findMatchHighlightColor) {
 		collector.addRule(`.monaco-editor .reference-zone-widget .ref-tree .referenceMatch { background-color: ${findMatchHighlightColor}; }`);
 	}
-	let referenceHighlightColor = theme.getColor(peekViewEditorMatchHighlight);
+	const referenceHighlightColor = theme.getColor(peekViewEditorMatchHighlight);
 	if (referenceHighlightColor) {
 		collector.addRule(`.monaco-editor .reference-zone-widget .preview .reference-decoration { background-color: ${referenceHighlightColor}; }`);
 	}
-	let referenceHighlightBorder = theme.getColor(peekViewEditorMatchHighlightBorder);
+	const referenceHighlightBorder = theme.getColor(peekViewEditorMatchHighlightBorder);
 	if (referenceHighlightBorder) {
 		collector.addRule(`.monaco-editor .reference-zone-widget .preview .reference-decoration { border: 2px solid ${referenceHighlightBorder}; box-sizing: border-box; }`);
 	}
-	let hcOutline = theme.getColor(activeContrastBorder);
+	const hcOutline = theme.getColor(activeContrastBorder);
 	if (hcOutline) {
 		collector.addRule(`.monaco-editor .reference-zone-widget .ref-tree .referenceMatch { border: 1px dotted ${hcOutline}; box-sizing: border-box; }`);
 	}
-	let resultsBackground = theme.getColor(peekViewResultsBackground);
+	const resultsBackground = theme.getColor(peekViewResultsBackground);
 	if (resultsBackground) {
 		collector.addRule(`.monaco-editor .reference-zone-widget .ref-tree { background-color: ${resultsBackground}; }`);
 	}
-	let resultsMatchForeground = theme.getColor(peekViewResultsMatchForeground);
+	const resultsMatchForeground = theme.getColor(peekViewResultsMatchForeground);
 	if (resultsMatchForeground) {
 		collector.addRule(`.monaco-editor .reference-zone-widget .ref-tree { color: ${resultsMatchForeground}; }`);
 	}
-	let resultsFileForeground = theme.getColor(peekViewResultsFileForeground);
+	const resultsFileForeground = theme.getColor(peekViewResultsFileForeground);
 	if (resultsFileForeground) {
 		collector.addRule(`.monaco-editor .reference-zone-widget .ref-tree .reference-file { color: ${resultsFileForeground}; }`);
 	}
-	let resultsSelectedBackground = theme.getColor(peekViewResultsSelectionBackground);
+	const resultsSelectedBackground = theme.getColor(peekViewResultsSelectionBackground);
 	if (resultsSelectedBackground) {
-		collector.addRule(`.monaco-editor .reference-zone-widget .ref-tree .monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) { background-color: ${resultsSelectedBackground}; }`);
+		collector.addRule(`.monaco-editor .reference-zone-widget .ref-tree .monaco-list:focus .monaco-list-rows > .monaco-list-row.selected:not(.highlighted) { background-color: ${resultsSelectedBackground}; }`);
 	}
-	let resultsSelectedForeground = theme.getColor(peekViewResultsSelectionForeground);
+	const resultsSelectedForeground = theme.getColor(peekViewResultsSelectionForeground);
 	if (resultsSelectedForeground) {
-		collector.addRule(`.monaco-editor .reference-zone-widget .ref-tree .monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) { color: ${resultsSelectedForeground} !important; }`);
+		collector.addRule(`.monaco-editor .reference-zone-widget .ref-tree .monaco-list:focus .monaco-list-rows > .monaco-list-row.selected:not(.highlighted) { color: ${resultsSelectedForeground} !important; }`);
 	}
-	let editorBackground = theme.getColor(peekViewEditorBackground);
+	const editorBackground = theme.getColor(peekViewEditorBackground);
 	if (editorBackground) {
 		collector.addRule(
 			`.monaco-editor .reference-zone-widget .preview .monaco-editor .monaco-editor-background,` +
@@ -885,7 +629,7 @@ registerThemingParticipant((theme, collector) => {
 			`	background-color: ${editorBackground};` +
 			`}`);
 	}
-	let editorGutterBackground = theme.getColor(peekViewEditorGutterBackground);
+	const editorGutterBackground = theme.getColor(peekViewEditorGutterBackground);
 	if (editorGutterBackground) {
 		collector.addRule(
 			`.monaco-editor .reference-zone-widget .preview .monaco-editor .margin {` +

src/vs/editor/contrib/referenceSearch/test/referencesModel.test.ts

@@ -2,17 +2,15 @@
  *  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 * as assert from 'assert';
-import URI from 'vs/base/common/uri';
+import { URI } from 'vs/base/common/uri';
 import { Range } from 'vs/editor/common/core/range';
 import { Position } from 'vs/editor/common/core/position';
 import { ReferencesModel } from 'vs/editor/contrib/referenceSearch/referencesModel';
 
 suite('references', function () {
 
-	test('nearestReference', function () {
+	test('nearestReference', () => {
 		const model = new ReferencesModel([{
 			uri: URI.file('/out/obj/can'),
 			range: new Range(1, 1, 1, 1)