stop using legacyrenderer, also nuke (newly) unused left-right-widget, #27705

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

-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-.monaco-left-right-widget > .left {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	display: block;
-}
-
-.monaco-left-right-widget > .right {
-	float: right;
-}

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

-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-'use strict';
-
-import 'vs/css!./leftRightWidget';
-import { Builder, $ } from 'vs/base/browser/builder';
-import { IDisposable } from 'vs/base/common/lifecycle';
-
-export interface IRenderer {
-	(container: HTMLElement): IDisposable;
-}
-
-export class LeftRightWidget {
-
-	private $el: Builder;
-	private toDispose: IDisposable[];
-
-	constructor(container: Builder, renderLeftFn: IRenderer, renderRightFn: IRenderer);
-	constructor(container: HTMLElement, renderLeftFn: IRenderer, renderRightFn: IRenderer);
-	constructor(container: any, renderLeftFn: IRenderer, renderRightFn: IRenderer) {
-		this.$el = $('.monaco-left-right-widget').appendTo(container);
-
-		this.toDispose = [
-			renderRightFn($('.right').appendTo(this.$el).getHTMLElement()),
-			renderLeftFn($('span.left').appendTo(this.$el).getHTMLElement())
-		].filter(x => !!x);
-	}
-
-	public dispose() {
-		if (this.$el) {
-			this.$el.destroy();
-			this.$el = null;
-		}
-	}
-}

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

@@ -37,17 +37,21 @@
 }
 
 .monaco-editor .reference-zone-widget .ref-tree .reference-file {
-	position: relative;
-	line-height: 22px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
 }
 
 .monaco-editor .reference-zone-widget .monaco-count-badge {
-	margin-right: 12px;
+	margin-right: .5em;
+	height: 15px;
+	padding: 0 .5em .5em .5em
 }
 
 /* High Contrast Theming */
 
 .monaco-editor.hc-black .reference-zone-widget .ref-tree .reference-file {
-	line-height: 20px;
 	font-weight: bold;
-}
\ No newline at end of file
+	display: flex;
+	justify-content: space-between;
+}

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

@@ -23,9 +23,8 @@ 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 { LeftRightWidget } from 'vs/base/browser/ui/leftRightWidget/leftRightWidget';
 import * as tree from 'vs/base/parts/tree/browser/tree';
-import { DefaultController, LegacyRenderer } from 'vs/base/parts/tree/browser/treeDefaults';
+import { DefaultController } from 'vs/base/parts/tree/browser/treeDefaults';
 import { Tree } from 'vs/base/parts/tree/browser/treeImpl';
 import { IInstantiationService, optional } from 'vs/platform/instantiation/common/instantiation';
 import { ServiceCollection } from 'vs/platform/instantiation/common/serviceCollection';
@@ -45,6 +44,7 @@ import { IModelDecorationsChangedEvent } from 'vs/editor/common/model/textModelE
 import { IEditorOptions } from 'vs/editor/common/config/editorOptions';
 import { IEnvironmentService } from 'vs/platform/environment/common/environment';
 import { ModelDecorationOptions } from 'vs/editor/common/model/textModelWithDecorations';
+import URI from 'vs/base/common/uri';
 
 class DecorationsManager implements IDisposable {
 
@@ -344,81 +344,120 @@ class Controller extends DefaultController {
 	}
 }
 
-class Renderer extends LegacyRenderer {
-	private _contextService: IWorkspaceContextService;
-	private _themeService: IThemeService;
-	private _environmentService: IEnvironmentService;
+class FileReferencesTemplate {
+
+	readonly file: FileLabel;
+	readonly badge: CountBadge;
+	readonly dispose: () => void;
 
 	constructor(
-		@IWorkspaceContextService contextService: IWorkspaceContextService,
+		container: HTMLElement,
+		@IWorkspaceContextService private _contextService: IWorkspaceContextService,
+		@optional(IEnvironmentService) private _environmentService: IEnvironmentService,
 		@IThemeService themeService: IThemeService,
-		@optional(IEnvironmentService) environmentService: IEnvironmentService
 	) {
-		super();
-
-		this._contextService = contextService;
-		this._themeService = themeService;
-		this._environmentService = environmentService;
-	}
-
-	public getHeight(tree: tree.ITree, element: any): number {
-		return 22;
+		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(parent);
+		const styler = attachBadgeStyler(this.badge, themeService);
+		this.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));
+		}
 	}
+}
 
-	protected render(tree: tree.ITree, element: FileReferences | OneReference, container: HTMLElement): tree.IElementCallback {
-
-		const toDispose: IDisposable[] = [];
-		dom.clearNode(container);
+class OneReferenceTemplate {
 
-		if (element instanceof FileReferences) {
-			const fileReferencesContainer = $('.reference-file');
+	readonly before: HTMLSpanElement;
+	readonly inside: HTMLSpanElement;
+	readonly after: HTMLSpanElement;
 
-			/* tslint:disable:no-unused-expression */
-			new LeftRightWidget(fileReferencesContainer, (left: HTMLElement) => {
-
-				const label = new FileLabel(left, element.uri, this._contextService, this._environmentService);
-				toDispose.push(label);
-				return <IDisposable>null;
+	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);
+	}
 
-			}, (right: HTMLElement) => {
+	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);
+	}
+}
 
-				const len = element.children.length;
-				const badge = new CountBadge(right, { count: len });
-				toDispose.push(attachBadgeStyler(badge, this._themeService));
+class Renderer implements tree.IRenderer {
 
-				if (element.failure) {
-					badge.setTitleFormat(nls.localize('referencesFailre', "Failed to resolve file."));
-				} else if (len > 1) {
-					badge.setTitleFormat(nls.localize('referencesCount', "{0} references", len));
-				} else {
-					badge.setTitleFormat(nls.localize('referenceCount', "{0} reference", len));
-				}
+	private static _ids = {
+		FileReferences: 'FileReferences',
+		OneReference: 'OneReference'
+	};
 
-				return null;
-			});
-			/* tslint:enable:no-unused-expression */
+	constructor(
+		@IWorkspaceContextService private _contextService: IWorkspaceContextService,
+		@IThemeService private _themeService: IThemeService,
+		@optional(IEnvironmentService) private _environmentService: IEnvironmentService
+	) {
+		//
+	}
 
-			fileReferencesContainer.appendTo(container);
+	getHeight(tree: tree.ITree, element: FileReferences | OneReference): number {
+		return 22;
+	}
 
+	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;
+	}
 
-			const preview = element.parent.preview.preview(element.range);
-
-			if (!preview) {
-				return undefined;
-			}
+	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;
+	}
 
-			$('.reference').innerHtml(
-				strings.format(
-					'<span>{0}</span><span class="referenceMatch">{1}</span><span>{2}</span>',
-					strings.escape(preview.before),
-					strings.escape(preview.inside),
-					strings.escape(preview.after))).appendTo(container);
+	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;
 		}
+	}
 
-		return () => {
-			dispose(toDispose);
-		};
+	disposeTemplate(tree: tree.ITree, templateId: string, templateData: any): void {
+		if (templateData instanceof FileReferencesTemplate) {
+			templateData.dispose();
+		}
 	}
 }