Builder removal #57196

src/vs/workbench/parts/watermark/electron-browser/watermark.ts

@@ -5,7 +5,6 @@
 'use strict';
 
 import 'vs/css!./watermark';
-import { $, Builder } from 'vs/base/browser/builder';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { assign } from 'vs/base/common/objects';
 import { isMacintosh } from 'vs/base/common/platform';
@@ -27,6 +26,9 @@ import { FindInFilesActionId } from 'vs/workbench/parts/search/common/constants'
 import { escape } from 'vs/base/common/strings';
 import { QUICKOPEN_ACTION_ID } from 'vs/workbench/browser/parts/quickopen/quickopen';
 import { TERMINAL_COMMAND_ID } from 'vs/workbench/parts/terminal/common/terminalCommands';
+import * as dom from 'vs/base/browser/dom';
+
+const $ = dom.$;
 
 interface WatermarkEntry {
 	text: string;
@@ -104,7 +106,7 @@ const WORKBENCH_TIPS_ENABLED_KEY = 'workbench.tips.enabled';
 export class WatermarkContribution implements IWorkbenchContribution {
 
 	private toDispose: IDisposable[] = [];
-	private watermark: Builder;
+	private watermark: HTMLElement;
 	private enabled: boolean;
 	private workbenchState: WorkbenchState;
 
@@ -149,35 +151,31 @@ export class WatermarkContribution implements IWorkbenchContribution {
 		const container = this.partService.getContainer(Parts.EDITOR_PART);
 		container.classList.add('has-watermark');
 
-		this.watermark = $()
-			.div({ 'class': 'watermark' });
-		const box = $(this.watermark)
-			.div({ 'class': 'watermark-box' });
+		this.watermark = $('.watermark');
+		const box = dom.append(this.watermark, $('.watermark-box'));
 		const folder = this.workbenchState !== WorkbenchState.EMPTY;
 		const selected = folder ? folderEntries : noFolderEntries
 			.filter(entry => !('mac' in entry) || entry.mac === isMacintosh);
 		const update = () => {
-			const builder = $(box);
-			builder.clearChildren();
+			dom.clearNode(box);
 			selected.map(entry => {
-				builder.element('dl', {}, dl => {
-					dl.element('dt', {}, dt => dt.text(entry.text));
-					dl.element('dd', {}, dd => dd.innerHtml(
-						entry.ids
-							.map(id => {
-								let k = this.keybindingService.lookupKeybinding(id);
-								if (k) {
-									return `<span class="shortcuts">${escape(k.getLabel())}</span>`;
-								}
-								return `<span class="unbound">${escape(UNBOUND)}</span>`;
-							})
-							.join(' / ')
-					));
-				});
+				const dl = dom.append(box, $('dl'));
+				const dt = dom.append(dl, $('dt'));
+				dt.textContent = entry.text;
+				const dd = dom.append(dl, $('dd'));
+				dd.innerHTML = entry.ids
+					.map(id => {
+						let k = this.keybindingService.lookupKeybinding(id);
+						if (k) {
+							return `<span class="shortcuts">${escape(k.getLabel())}</span>`;
+						}
+						return `<span class="unbound">${escape(UNBOUND)}</span>`;
+					})
+					.join(' / ');
 			});
 		};
 		update();
-		this.watermark.build(container.firstElementChild as HTMLElement, 0);
+		dom.prepend(container.firstElementChild as HTMLElement, this.watermark);
 		this.toDispose.push(this.keybindingService.onDidUpdateKeybindings(update));
 		this.toDispose.push(this.partService.onEditorLayout(({ height }: IDimension) => {
 			container.classList[height <= 478 ? 'add' : 'remove']('max-height-478px');
@@ -186,7 +184,7 @@ export class WatermarkContribution implements IWorkbenchContribution {
 
 	private destroy(): void {
 		if (this.watermark) {
-			this.watermark.destroy();
+			dom.removeNode(this.watermark);
 			this.partService.getContainer(Parts.EDITOR_PART).classList.remove('has-watermark');
 			this.dispose();
 		}

src/vs/workbench/parts/welcome/overlay/browser/welcomeOverlay.ts

@@ -5,7 +5,6 @@
 'use strict';
 
 import 'vs/css!./welcomeOverlay';
-import { $, Builder } from 'vs/base/browser/builder';
 import * as dom from 'vs/base/browser/dom';
 import { Registry } from 'vs/platform/registry/common/platform';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
@@ -26,6 +25,8 @@ import { registerThemingParticipant } from 'vs/platform/theme/common/themeServic
 import { textPreformatForeground, foreground } from 'vs/platform/theme/common/colorRegistry';
 import { Color } from 'vs/base/common/color';
 
+const $ = dom.$;
+
 interface Key {
 	id: string;
 	arrow?: string;
@@ -155,7 +156,7 @@ class WelcomeOverlay {
 
 	private _toDispose: IDisposable[] = [];
 	private _overlayVisible: IContextKey<boolean>;
-	private _overlay: Builder;
+	private _overlay: HTMLElement;
 
 	constructor(
 		@IPartService private partService: IPartService,
@@ -172,40 +173,39 @@ class WelcomeOverlay {
 		const container = this.partService.getContainer(Parts.EDITOR_PART);
 
 		const offset = this.partService.getTitleBarOffset();
-		this._overlay = $(container.parentElement)
-			.div({ 'class': 'welcomeOverlay' })
-			.style({ top: `${offset}px` })
-			.style({ height: `calc(100% - ${offset}px)` })
-			.display('none');
+		this._overlay = dom.append(container.parentElement, $('.welcomeOverlay'));
+		this._overlay.style.top = `${offset}px`;
+		this._overlay.style.height = `calc(100% - ${offset}px)`;
+		this._overlay.style.display = 'none';
 
-		this._overlay.on('click', () => this.hide(), this._toDispose);
+		this._toDispose.push(dom.addStandardDisposableListener(this._overlay, 'click', () => this.hide()));
 		this.commandService.onWillExecuteCommand(() => this.hide());
 
-		$(this._overlay).div({ 'class': 'commandPalettePlaceholder' });
+		dom.append(this._overlay, $('.commandPalettePlaceholder'));
 
 		const editorOpen = !!this.editorService.visibleEditors.length;
 		keys.filter(key => !('withEditor' in key) || key.withEditor === editorOpen)
 			.forEach(({ id, arrow, label, command, arrowLast }) => {
-				const div = $(this._overlay).div({ 'class': ['key', id] });
+				const div = dom.append(this._overlay, $(`.key.${id}`));
 				if (arrow && !arrowLast) {
-					$(div).span({ 'class': 'arrow' }).innerHtml(arrow);
+					dom.append(div, $('span.arrow')).innerHTML = arrow;
 				}
-				$(div).span({ 'class': 'label' }).text(label);
+				dom.append(div, $('span.label')).textContent = label;
 				if (command) {
 					const shortcut = this.keybindingService.lookupKeybinding(command);
 					if (shortcut) {
-						$(div).span({ 'class': 'shortcut' }).text(shortcut.getLabel());
+						dom.append(div, $('span.shortcut')).textContent = shortcut.getLabel();
 					}
 				}
 				if (arrow && arrowLast) {
-					$(div).span({ 'class': 'arrow' }).innerHtml(arrow);
+					dom.append(div, $('span.arrow')).innerHTML = arrow;
 				}
 			});
 	}
 
 	public show() {
-		if (this._overlay.style('display') !== 'block') {
-			this._overlay.display('block');
+		if (this._overlay.style.display !== 'block') {
+			this._overlay.style.display = 'block';
 			const workbench = document.querySelector('.monaco-workbench') as HTMLElement;
 			dom.addClass(workbench, 'blur-background');
 			this._overlayVisible.set(true);
@@ -215,10 +215,10 @@ class WelcomeOverlay {
 
 	private updateProblemsKey() {
 		const problems = document.querySelector('.task-statusbar-item');
-		const key = this._overlay.getHTMLElement().querySelector('.key.problems') as HTMLElement;
+		const key = this._overlay.querySelector('.key.problems') as HTMLElement;
 		if (problems instanceof HTMLElement) {
 			const target = problems.getBoundingClientRect();
-			const bounds = this._overlay.getHTMLElement().getBoundingClientRect();
+			const bounds = this._overlay.getBoundingClientRect();
 			const bottom = bounds.bottom - target.top + 3;
 			const left = (target.left + target.right) / 2 - bounds.left;
 			key.style.bottom = bottom + 'px';
@@ -230,8 +230,8 @@ class WelcomeOverlay {
 	}
 
 	public hide() {
-		if (this._overlay.style('display') !== 'none') {
-			this._overlay.display('none');
+		if (this._overlay.style.display !== 'none') {
+			this._overlay.style.display = 'none';
 			const workbench = document.querySelector('.monaco-workbench') as HTMLElement;
 			dom.removeClass(workbench, 'blur-background');
 			this._overlayVisible.reset();