Remove builder references from options dialog (#4774)

* remove more builder references; remove $ from declarations * fix jquery references * formatting * fixing backup * fix backup box
2026-02-05 09:35:39 -05:00 · 2019-04-02 13:49:50 -07:00
parent 72ef024678
commit 63485c8c78
29 changed files with 261 additions and 407 deletions
--- a/src/sql/base/browser/ui/scrollableSplitview/scrollableSplitview.ts
+++ b/src/sql/base/browser/ui/scrollableSplitview/scrollableSplitview.ts
@@ -41,7 +41,7 @@ const defaultStyles: ISplitViewStyles = {
 };

 const defaultOptions: ISplitViewOptions = {
-	enableResizing: true
+	enableResizing: false
 };

 export interface IView extends HeightIView {
--- a/src/sql/base/browser/ui/table/plugins/autoSizeColumns.plugin.ts
+++ b/src/sql/base/browser/ui/table/plugins/autoSizeColumns.plugin.ts
@@ -31,7 +31,7 @@ export class AutoColumnSize<T> implements Slick.Plugin<T> {
 			this.onPostEventHandler.subscribe(this._grid.onRendered, () => this.onPostRender());
 		}

-		this._$container = $(this._grid.getContainerNode());
+		this._$container = jQuery(this._grid.getContainerNode());
 		this._$container.on('dblclick.autosize', '.slick-resizable-handle', e => this.handleDoubleClick(e));
 		this._context = document.createElement('canvas').getContext('2d');
 	}
@@ -67,7 +67,7 @@ export class AutoColumnSize<T> implements Slick.Plugin<T> {
 			return;
 		}

-		let headerColumnsQuery = $(this._grid.getContainerNode()).find('.slick-header-columns');
+		let headerColumnsQuery = jQuery(this._grid.getContainerNode()).find('.slick-header-columns');
 		if (headerColumnsQuery && headerColumnsQuery.length) {
 			let headerColumns = headerColumnsQuery[0];
 			let origCols = this._grid.getColumns();
@@ -78,7 +78,7 @@ export class AutoColumnSize<T> implements Slick.Plugin<T> {
 			});
 			let change = false;
 			for (let i = 0; i <= headerColumns.children.length; i++) {
-				let headerEl = $(headerColumns.children.item(i));
+				let headerEl = jQuery(headerColumns.children.item(i));
 				let columnDef = headerEl.data('column');
 				if (columnDef) {
 					let headerWidth = this.getElementWidth(headerEl[0]);
@@ -100,7 +100,7 @@ export class AutoColumnSize<T> implements Slick.Plugin<T> {
 	}

 	private handleDoubleClick(e: JQuery.Event<HTMLElement, string>) {
-		let headerEl = $(e.currentTarget).closest('.slick-header-column');
+		let headerEl = jQuery(e.currentTarget).closest('.slick-header-column');
 		let columnDef = headerEl.data('column');

 		if (!columnDef || !columnDef.resizable) {
@@ -150,9 +150,9 @@ export class AutoColumnSize<T> implements Slick.Plugin<T> {
 	}

 	private getTemplateWidth(rowEl: JQuery, template: JQuery | HTMLElement): number {
-		let cell = $(rowEl.find('.slick-cell'));
+		let cell = jQuery(rowEl.find('.slick-cell'));
 		cell.append(template);
-		$(cell).find('*').css('position', 'relative');
+		jQuery(cell).find('*').css('position', 'relative');
 		return cell.outerWidth() + 1;
 	}

@@ -163,7 +163,7 @@ export class AutoColumnSize<T> implements Slick.Plugin<T> {
 		texts.forEach((text, index) => {
 			let template;
 			if (formatFun) {
-				template = $('<span>' + formatFun(index, colIndex, text, columnDef, data[index]) + '</span>');
+				template = jQuery('<span>' + formatFun(index, colIndex, text, columnDef, data[index]) + '</span>');
 				text = template.text() || text;
 			}
 			let length = text ? this.getElementWidthUsingCanvas(rowEl, text) : 0;
@@ -176,19 +176,19 @@ export class AutoColumnSize<T> implements Slick.Plugin<T> {
 	}

 	private createRow(columnDef): JQuery {
-		let rowEl = $('<div class="slick-row"><div class="slick-cell"></div></div>');
+		let rowEl = jQuery('<div class="slick-row"><div class="slick-cell"></div></div>');
 		rowEl.find('.slick-cell').css({
 			'visibility': 'hidden',
 			'text-overflow': 'initial',
 			'white-space': 'nowrap'
 		});
 		let gridCanvas = this._$container.find('.grid-canvas');
-		$(gridCanvas).append(rowEl);
+		jQuery(gridCanvas).append(rowEl);
 		return rowEl;
 	}

 	private deleteRow(rowEl: JQuery) {
-		$(rowEl).remove();
+		jQuery(rowEl).remove();
 	}

 	private getElementWidth(element: HTMLElement): number {
--- a/src/sql/base/browser/ui/table/plugins/cellRangeSelector.ts
+++ b/src/sql/base/browser/ui/table/plugins/cellRangeSelector.ts
@@ -92,8 +92,8 @@ export class CellRangeSelector<T> implements ICellRangeSelector<T> {
 		this.grid.setActiveCell(cell.row, cell.cell);

 		let start = this.grid.getCellFromPoint(
-			dd.startX - $(this.canvas).offset().left,
-			dd.startY - $(this.canvas).offset().top);
+			dd.startX - jQuery(this.canvas).offset().left,
+			dd.startY - jQuery(this.canvas).offset().top);

 		dd.range = { start: start, end: undefined };
 		this.currentlySelectedRange = dd.range;
@@ -108,8 +108,8 @@ export class CellRangeSelector<T> implements ICellRangeSelector<T> {
 		e.stopImmediatePropagation();

 		let end = this.grid.getCellFromPoint(
-			e.pageX - $(this.canvas).offset().left,
-			e.pageY - $(this.canvas).offset().top);
+			e.pageX - jQuery(this.canvas).offset().left,
+			e.pageY - jQuery(this.canvas).offset().top);

 		if (!this.grid.canCellBeSelected(end.row, end.cell)) {
 			return;
--- a/src/sql/base/browser/ui/table/plugins/checkboxSelectColumn.plugin.ts
+++ b/src/sql/base/browser/ui/table/plugins/checkboxSelectColumn.plugin.ts
@@ -108,7 +108,7 @@ export class CheckboxSelectColumn<T> implements Slick.Plugin<T> {

 	private handleClick(e: Event, args: Slick.OnClickEventArgs<T>): void {
 		// clicking on a row select checkbox
-		if (this._grid.getColumns()[args.cell].id === this._options.columnId && $(e.target).is('input[type="checkbox"]')) {
+		if (this._grid.getColumns()[args.cell].id === this._options.columnId && jQuery(e.target).is('input[type="checkbox"]')) {
 			// if editing, try to commit
 			if (this._grid.getEditorLock().isActive() && !this._grid.getEditorLock().commitCurrentEdit()) {
 				e.preventDefault();
@@ -131,7 +131,7 @@ export class CheckboxSelectColumn<T> implements Slick.Plugin<T> {
 	}

 	private handleHeaderClick(e: Event, args: Slick.OnHeaderClickEventArgs<T>): void {
-		if (!this._options.title && args.column.id === this._options.columnId && $(e.target).is('input[type="checkbox"]')) {
+		if (!this._options.title && args.column.id === this._options.columnId && jQuery(e.target).is('input[type="checkbox"]')) {
 			// if editing, try to commit
 			if (this._grid.getEditorLock().isActive() && !this._grid.getEditorLock().commitCurrentEdit()) {
 				e.preventDefault();
@@ -139,7 +139,7 @@ export class CheckboxSelectColumn<T> implements Slick.Plugin<T> {
 				return;
 			}

-			if ($(e.target).is('input[checked]')) {
+			if (jQuery(e.target).is('input[checked]')) {
 				let rows = [];
 				for (let i = 0; i < this._grid.getDataLength(); i++) {
 					rows.push(i);
--- a/src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts
+++ b/src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts
@@ -41,14 +41,14 @@ export class HeaderFilter {
 			.subscribe(this.grid.onKeyDown, (e) => this.handleKeyDown);
 		this.grid.setColumns(this.grid.getColumns());

-		$(document.body).bind('mousedown', this.handleBodyMouseDown);
-		$(document.body).bind('keydown', this.handleKeyDown);
+		jQuery(document.body).bind('mousedown', this.handleBodyMouseDown);
+		jQuery(document.body).bind('keydown', this.handleKeyDown);
 	}

 	public destroy() {
 		this.handler.unsubscribeAll();
-		$(document.body).unbind('mousedown', this.handleBodyMouseDown);
-		$(document.body).unbind('keydown', this.handleKeyDown);
+		jQuery(document.body).unbind('mousedown', this.handleBodyMouseDown);
+		jQuery(document.body).unbind('keydown', this.handleKeyDown);
 	}

 	private handleKeyDown = (e) => {
@@ -60,7 +60,7 @@ export class HeaderFilter {
 	}

 	private handleBodyMouseDown = (e) => {
-		if (this.$menu && this.$menu[0] !== e.target && !$.contains(this.$menu[0], e.target)) {
+		if (this.$menu && this.$menu[0] !== e.target && !jQuery.contains(this.$menu[0], e.target)) {
 			this.hideMenu();
 			e.preventDefault();
 			e.stopPropagation();
@@ -79,7 +79,7 @@ export class HeaderFilter {
 		if (column.id === '_detail_selector') {
 			return;
 		}
-		let $el = $('<div></div>')
+		let $el = jQuery('<div></div>')
 			.addClass('slick-header-menubutton')
 			.data('column', column);

@@ -87,19 +87,19 @@ export class HeaderFilter {
 	}

 	private handleBeforeHeaderCellDestroy(e, args) {
-		$(args.node)
+		jQuery(args.node)
 			.find('.slick-header-menubutton')
 			.remove();
 	}

 	private addMenuItem(menu, columnDef, title, command, image) {
-		let $item = $('<div class="slick-header-menuitem">')
+		let $item = jQuery('<div class="slick-header-menuitem">')
 			.data('command', command)
 			.data('column', columnDef)
 			.bind('click', (e) => this.handleMenuItemClick(e, command, columnDef))
 			.appendTo(menu);

-		let $icon = $('<div class="slick-header-menuicon">')
+		let $icon = jQuery('<div class="slick-header-menuicon">')
 			.appendTo($item);

 		if (title === 'Sort Ascending') {
@@ -108,17 +108,17 @@ export class HeaderFilter {
 			$icon.get(0).className += ' descending';
 		}

-		$('<span class="slick-header-menucontent">')
+		jQuery('<span class="slick-header-menucontent">')
 			.text(title)
 			.appendTo($item);
 	}

 	private addMenuInput(menu, columnDef) {
 		const self = this;
-		$('<input class="input" placeholder="Search" style="margin-top: 5px; width: 206px">')
+		jQuery('<input class="input" placeholder="Search" style="margin-top: 5px; width: 206px">')
 			.data('column', columnDef)
 			.bind('keyup', (e) => {
-				let filterVals = this.getFilterValuesByInput($(e.target));
+				let filterVals = this.getFilterValuesByInput(jQuery(e.target));
 				self.updateFilterInputs(menu, columnDef, filterVals);
 			})
 			.appendTo(menu);
@@ -139,15 +139,15 @@ export class HeaderFilter {
 				+ '/>' + filterItems[i] + '</label>';
 		}
 		let $filter = menu.find('.filter');
-		$filter.empty().append($(filterOptions));
+		$filter.empty().append(jQuery(filterOptions));

-		$(':checkbox', $filter).bind('click', (e) => {
-			this.workingFilters = this.changeWorkingFilter(filterItems, this.workingFilters, $(e.target));
+		jQuery(':checkbox', $filter).bind('click', (e) => {
+			this.workingFilters = this.changeWorkingFilter(filterItems, this.workingFilters, jQuery(e.target));
 		});
 	}

 	private showFilter(e) {
-		let $menuButton = $(e.target);
+		let $menuButton = jQuery(e.target);
 		this.columnDef = $menuButton.data('column');

 		this.columnDef.filterValues = this.columnDef.filterValues || [];
@@ -167,7 +167,7 @@ export class HeaderFilter {
 		}

 		if (!this.$menu) {
-			this.$menu = $('<div class="slick-header-menu">').appendTo(document.body);
+			this.$menu = jQuery('<div class="slick-header-menu">').appendTo(document.body);
 		}

 		this.$menu.empty();
@@ -186,15 +186,15 @@ export class HeaderFilter {
 					+ '/>' + escape(filterItems[i]) + '</label>';
 			}
 		}
-		let $filter = $('<div class="filter">')
-			.append($(filterOptions))
+		let $filter = jQuery('<div class="filter">')
+			.append(jQuery(filterOptions))
 			.appendTo(this.$menu);

 		this.okButton = new Button(this.$menu.get(0));
 		this.okButton.label = 'OK';
 		this.okButton.title = 'OK';
 		this.okButton.element.id = 'filter-ok-button';
-		let okElement = $('#filter-ok-button');
+		let okElement = jQuery('#filter-ok-button');
 		okElement.bind('click', (ev) => {
 			this.columnDef.filterValues = this.workingFilters.splice(0);
 			this.setButtonImage($menuButton, this.columnDef.filterValues.length > 0);
@@ -205,7 +205,7 @@ export class HeaderFilter {
 		this.clearButton.label = 'Clear';
 		this.clearButton.title = 'Clear';
 		this.clearButton.element.id = 'filter-clear-button';
-		let clearElement = $('#filter-clear-button');
+		let clearElement = jQuery('#filter-clear-button');
 		clearElement.bind('click', (ev) => {
 			this.columnDef.filterValues.length = 0;
 			this.setButtonImage($menuButton, false);
@@ -216,23 +216,23 @@ export class HeaderFilter {
 		this.cancelButton.label = 'Cancel';
 		this.cancelButton.title = 'Cancel';
 		this.cancelButton.element.id = 'filter-cancel-button';
-		let cancelElement = $('#filter-cancel-button');
+		let cancelElement = jQuery('#filter-cancel-button');
 		cancelElement.bind('click', () => this.hideMenu());
 		attachButtonStyler(this.okButton, this._themeService);
 		attachButtonStyler(this.clearButton, this._themeService);
 		attachButtonStyler(this.cancelButton, this._themeService);

-		$(':checkbox', $filter).bind('click', (e) => {
-			this.workingFilters = this.changeWorkingFilter(filterItems, this.workingFilters, $(e.target));
+		jQuery(':checkbox', $filter).bind('click', (e) => {
+			this.workingFilters = this.changeWorkingFilter(filterItems, this.workingFilters, jQuery(e.target));
 		});

-		let offset = $(e.target).offset();
-		let left = offset.left - this.$menu.width() + $(e.target).width() - 8;
+		let offset = jQuery(e.target).offset();
+		let left = offset.left - this.$menu.width() + jQuery(e.target).width() - 8;

-		let menutop = offset.top + $(e.target).height();
+		let menutop = offset.top + jQuery(e.target).height();

-		if (menutop + offset.top > $(window).height()) {
-			menutop -= (this.$menu.height() + $(e.target).height() + 8);
+		if (menutop + offset.top > jQuery(window).height()) {
+			menutop -= (this.$menu.height() + jQuery(e.target).height() + 8);
 		}
 		this.$menu.css('top', menutop)
 			.css('left', (left > 0 ? left : 0));
@@ -249,10 +249,10 @@ export class HeaderFilter {
 		if ($checkbox.val() < 0) {
 			// Select All
 			if ($checkbox.prop('checked')) {
-				$(':checkbox', $filter).prop('checked', true);
+				jQuery(':checkbox', $filter).prop('checked', true);
 				workingFilters = filterItems.slice(0);
 			} else {
-				$(':checkbox', $filter).prop('checked', false);
+				jQuery(':checkbox', $filter).prop('checked', false);
 				workingFilters.length = 0;
 			}
 		} else {
@@ -359,4 +359,4 @@ export class HeaderFilter {
 		e.preventDefault();
 		e.stopPropagation();
 	}
-}
+}
--- a/src/sql/base/browser/ui/table/plugins/rowDetailView.ts
+++ b/src/sql/base/browser/ui/table/plugins/rowDetailView.ts
@@ -60,12 +60,12 @@ export class RowDetailView {
 	}

 	public setOptions(options: any) {
-		this._options = $.extend(true, {}, this._options, options);
+		this._options = jQuery.extend(true, {}, this._options, options);
 	}

 	public handleClick(e: any, args: any): void {
 		// clicking on a row select checkbox
-		if (this._options.useRowClick || this._grid.getColumns()[args.cell].id === this._options.columnId && $(e.target).hasClass('detailView-toggle')) {
+		if (this._options.useRowClick || this._grid.getColumns()[args.cell].id === this._options.columnId && jQuery(e.target).hasClass('detailView-toggle')) {
 			// if editing, try to commit
 			if (this._grid.getEditorLock().isActive() && !this._grid.getEditorLock().commitCurrentEdit()) {
 				e.preventDefault();
@@ -151,9 +151,9 @@ export class RowDetailView {

 	// Saves the current state of the detail view
 	public saveDetailView(item) {
-		let view = $('#innerDetailView_' + item.id);
+		let view = jQuery('#innerDetailView_' + item.id);
 		if (view) {
-			let html = $('#innerDetailView_' + item.id).html();
+			let html = jQuery('#innerDetailView_' + item.id).html();
 			if (html !== undefined) {
 				item._detailContent = html;
 			}
--- a/src/sql/base/browser/ui/table/plugins/rowSelectionModel.plugin.ts
+++ b/src/sql/base/browser/ui/table/plugins/rowSelectionModel.plugin.ts
@@ -128,7 +128,7 @@ export class RowSelectionModel<T extends Slick.SlickData> implements Slick.Selec
 		}

 		let selection = this.rangesToRows(this._ranges);
-		let idx = $.inArray(cell.row, selection);
+		let idx = jQuery.inArray(cell.row, selection);

 		if (idx === -1 && (e.ctrlKey || e.metaKey)) {
 			selection.push(cell.row);
--- a/src/sql/parts/disasterRecovery/backup/backup.component.ts
+++ b/src/sql/parts/disasterRecovery/backup/backup.component.ts
@@ -11,7 +11,6 @@ import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox';
 import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
 import { ListBox } from 'sql/base/browser/ui/listBox/listBox';
 import { ModalFooterStyle } from 'sql/workbench/browser/modal/modal';
-import { CategoryView } from 'sql/workbench/browser/modal/optionsDialog';
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
 import { attachButtonStyler, attachListBoxStyler, attachInputBoxStyler, attachSelectBoxStyler, attachCheckboxStyler } from 'sql/platform/theme/common/styler';
 import { IConnectionProfile } from 'sql/platform/connection/common/interfaces';
@@ -19,20 +18,19 @@ import * as BackupConstants from 'sql/parts/disasterRecovery/backup/constants';
 import { IBackupService, TaskExecutionMode } from 'sql/platform/backup/common/backupService';
 import * as FileValidationConstants from 'sql/workbench/services/fileBrowser/common/fileValidationServiceConstants';
 import { IConnectionManagementService } from 'sql/platform/connection/common/connectionManagement';
-import { ScrollableSplitView } from 'sql/base/browser/ui/scrollableSplitview/scrollableSplitview';
 import { IFileBrowserDialogController } from 'sql/workbench/services/fileBrowser/common/fileBrowserDialogController';
 import { IBackupUiService } from 'sql/workbench/services/backup/common/backupUiService';

 import { MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
 import * as lifecycle from 'vs/base/common/lifecycle';
 import { localize } from 'vs/nls';
-import * as DOM from 'vs/base/browser/dom';
 import * as types from 'vs/base/common/types';
 import * as strings from 'vs/base/common/strings';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { ISelectOptionItem } from 'vs/base/browser/ui/selectBox/selectBox';

 export const BACKUP_SELECTOR: string = 'backup-component';

@@ -337,13 +335,6 @@ export class BackupComponent {
 	}

 	ngAfterViewInit() {
-		// Set category view for advanced options. This should be defined in ngAfterViewInit so that it correctly calculates the text height after data binding.
-		var splitview = new ScrollableSplitView(this.advancedOptionElement.nativeElement);
-		var advancedBodySize = DOM.getTotalHeight(this.advancedOptionBodyElement.nativeElement);
-		var categoryView = this.instantiationService.createInstance(CategoryView, this.advancedOptionBodyElement.nativeElement, advancedBodySize, { title: LocalizedStrings.ADVANCED_CONFIGURATION, id: LocalizedStrings.ADVANCED_CONFIGURATION, ariaHeaderLabel: LocalizedStrings.ADVANCED_CONFIGURATION });
-		splitview.addView(categoryView, 0);
-		splitview.layout(advancedBodySize + this._advancedHeaderSize);
-
 		this._backupUiService.onShowBackupDialog();
 	}

@@ -434,14 +425,14 @@ export class BackupComponent {

 			// Set backup path list
 			this.setDefaultBackupPaths();
-			var pathlist = [];
-			for (var i in this.backupPathTypePairs) {
-				pathlist.push(i);
+			let pathlist: ISelectOptionItem[] = [];
+			for (let i in this.backupPathTypePairs) {
+				pathlist.push({ text: i });
 			}
 			this.pathListBox.setOptions(pathlist, 0);

 			// Set encryption
-			var encryptorItems = this.populateEncryptorCombo();
+			let encryptorItems = this.populateEncryptorCombo();
 			this.encryptorSelectBox.setOptions(encryptorItems, 0);

 			if (encryptorItems.length === 0) {
@@ -729,9 +720,9 @@ export class BackupComponent {
 	}

 	private populateEncryptorCombo(): string[] {
-		var encryptorCombo = [];
+		let encryptorCombo = [];
 		this.backupEncryptors.forEach((encryptor) => {
-			var encryptorTypeStr = (encryptor.encryptorType === 0 ? BackupConstants.serverCertificate : BackupConstants.asymmetricKey);
+			let encryptorTypeStr = (encryptor.encryptorType === 0 ? BackupConstants.serverCertificate : BackupConstants.asymmetricKey);
 			encryptorCombo.push(encryptor.encryptorName + '(' + encryptorTypeStr + ')');
 		});
 		return encryptorCombo;
@@ -867,18 +858,18 @@ export class BackupComponent {
 	}

 	private createBackupInfo(): MssqlBackupInfo {
-		var backupPathArray = [];
-		for (var i in this.backupPathTypePairs) {
+		let backupPathArray = [];
+		for (let i in this.backupPathTypePairs) {
 			backupPathArray.push(i);
 		}

 		// get encryptor type and name
-		var encryptorName = '';
-		var encryptorType;
+		let encryptorName = '';
+		let encryptorType;

 		if (this.encryptCheckBox.checked && this.encryptorSelectBox.value !== '') {
-			var selectedEncryptor = this.encryptorSelectBox.value;
-			var encryptorTypeStr = selectedEncryptor.substring(selectedEncryptor.lastIndexOf('(') + 1, selectedEncryptor.lastIndexOf(')'));
+			let selectedEncryptor = this.encryptorSelectBox.value;
+			let encryptorTypeStr = selectedEncryptor.substring(selectedEncryptor.lastIndexOf('(') + 1, selectedEncryptor.lastIndexOf(')'));
 			encryptorType = (encryptorTypeStr === BackupConstants.serverCertificate ? 0 : 1);
 			encryptorName = selectedEncryptor.substring(0, selectedEncryptor.lastIndexOf('('));
 		}
--- a/src/sql/parts/grid/directives/mousedown.directive.ts
+++ b/src/sql/parts/grid/directives/mousedown.directive.ts
@@ -1,26 +0,0 @@
-/* --------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Licensed under the Source EULA. See License.txt in the project root for license information.
- * ------------------------------------------------------------------------------------------ */
-import { ElementRef, Directive, Inject, Output, EventEmitter, forwardRef } from '@angular/core';
-
-@Directive({
-  selector: '[mousedown]'
-})
-export class MouseDownDirective {
-    @Output('mousedown') onMouseDown = new EventEmitter();
-
-    constructor(@Inject(forwardRef(() => ElementRef)) private _el: ElementRef) {
-        const self = this;
-        setTimeout(() => {
-            let $gridCanvas = $(this._el.nativeElement).find('.grid-canvas');
-            $gridCanvas.on('mousedown', () => {
-                self.onMouseDown.emit();
-            });
-            let jQueryCast: any = $;
-            let mouseDownFuncs: any[] = jQueryCast._data($gridCanvas[0], 'events')['mousedown'];
-            // reverse the event array so that our event fires first.
-            mouseDownFuncs.reverse();
-        });
-    }
-}
--- a/src/sql/parts/grid/directives/scroll.directive.ts
+++ b/src/sql/parts/grid/directives/scroll.directive.ts
@@ -1,24 +0,0 @@
-/* --------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Licensed under the Source EULA. See License.txt in the project root for license information.
- * ------------------------------------------------------------------------------------------ */
-import { ElementRef, Directive, Input, Output, EventEmitter, forwardRef,
-    Inject } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
-
-@Directive({
-  selector: '[onScroll]'
-})
-export class ScrollDirective {
-    @Input() scrollEnabled: boolean = true;
-    @Output('onScroll') onScroll = new EventEmitter();
-
-    constructor(@Inject(forwardRef(() => ElementRef)) private _el: ElementRef) {
-        const self = this;
-        Observable.fromEvent(this._el.nativeElement, 'scroll').subscribe((event) => {
-            if (self.scrollEnabled) {
-                self.onScroll.emit(self._el.nativeElement.scrollTop);
-            }
-        });
-    }
-}
--- a/src/sql/parts/grid/views/editData/editData.component.ts
+++ b/src/sql/parts/grid/views/editData/editData.component.ts
@@ -173,7 +173,7 @@ export class EditDataComponent extends GridParentComponent implements OnInit, On
 		this.onActiveCellChanged = this.onCellSelect;

 		this.onCellEditEnd = (event: Slick.OnCellChangeEventArgs<any>): void => {
-			if(self.currentEditCellValue !== event.item[event.cell]) {
+			if (self.currentEditCellValue !== event.item[event.cell]) {
 				self.currentCell.isDirty = true;
 			}
 			// Store the value that was set
@@ -541,12 +541,12 @@ export class EditDataComponent extends GridParentComponent implements OnInit, On
 		let grid = slick._grid;
 		if (dirtyState) {
 			// Change cell color
-			$(grid.getCellNode(row, column)).addClass('dirtyCell').removeClass('selected');
+			jQuery(grid.getCellNode(row, column)).addClass('dirtyCell').removeClass('selected');
 			if (this.dirtyCells.indexOf(column) === -1) {
 				this.dirtyCells.push(column);
 			}
 		} else {
-			$(grid.getCellNode(row, column)).removeClass('dirtyCell');
+			jQuery(grid.getCellNode(row, column)).removeClass('dirtyCell');
 			if (this.dirtyCells.indexOf(column) !== -1) {
 				this.dirtyCells.splice(this.dirtyCells.indexOf(column), 1);
 			}
@@ -559,17 +559,17 @@ export class EditDataComponent extends GridParentComponent implements OnInit, On
 		let grid = slick._grid;
 		if (dirtyState) {
 			// Change row header color
-			$(grid.getCellNode(row, 0)).addClass('dirtyRowHeader');
+			jQuery(grid.getCellNode(row, 0)).addClass('dirtyRowHeader');
 		} else {
-			$(grid.getCellNode(row, 0)).removeClass('dirtyRowHeader');
+			jQuery(grid.getCellNode(row, 0)).removeClass('dirtyRowHeader');
 		}
 	}

 	// Sets CSS to clean the entire grid of dirty state cells and rows
 	private setGridClean(): void {
 		// Remove dirty classes from the entire table
-		let allRows = $($('.grid-canvas').children());
-		let allCells = $(allRows.children());
+		let allRows = jQuery(jQuery('.grid-canvas').children());
+		let allCells = jQuery(allRows.children());
 		allCells.removeClass('dirtyCell').removeClass('dirtyRowHeader');
 		this.dirtyCells = [];
 	}
@@ -720,7 +720,7 @@ export class EditDataComponent extends GridParentComponent implements OnInit, On

 	private setCurrentCell(row: number, column: number) {
 		// Only update if we're actually changing cells
-		if(this.currentCell && (row !== this.currentCell.row || column !== this.currentCell.column)) {
+		if (this.currentCell && (row !== this.currentCell.row || column !== this.currentCell.column)) {
 			this.currentCell = {
 				row: row,
 				column: column,
--- a/src/sql/parts/grid/views/gridParentComponent.ts
+++ b/src/sql/parts/grid/views/gridParentComponent.ts
@@ -519,7 +519,7 @@ export abstract class GridParentComponent {

 	private handleQueryPlanLink(cellRef: string, value: string): void {
 		const self = this;
-		$(cellRef).children('.xmlLink').click(function (): void {
+		jQuery(cellRef).children('.xmlLink').click(function (): void {
 			self.queryEditorService.newQueryPlanEditor(value);
 		});
 	}
@@ -527,7 +527,7 @@ export abstract class GridParentComponent {
 	private handleLink(cellRef: string, row: number, dataContext: JSON, colDef: any, linkType: string): void {
 		const self = this;
 		let value = self.getCellValueString(dataContext, colDef);
-		$(cellRef).children('.xmlLink').click(function (): void {
+		jQuery(cellRef).children('.xmlLink').click(function (): void {
 			self.dataService.openLink(value, colDef.name, linkType);
 		});
 	}
--- a/src/sql/parts/jobManagement/views/alertsView.component.ts
+++ b/src/sql/parts/jobManagement/views/alertsView.component.ts
@@ -144,8 +144,8 @@ export class AlertsViewComponent extends JobManagementView implements OnInit, On
 			panelRows: 1
 		});
 		columns.unshift(rowDetail.getColumnDefinition());
-		$(this._gridEl.nativeElement).empty();
-		$(this.actionBarContainer.nativeElement).empty();
+		jQuery(this._gridEl.nativeElement).empty();
+		jQuery(this.actionBarContainer.nativeElement).empty();
 		this.initActionBar();

 		this._table = new Table(this._gridEl.nativeElement, { columns }, this.options);
@@ -230,4 +230,4 @@ export class AlertsViewComponent extends JobManagementView implements OnInit, On
 		let ownerUri: string = this._commonService.connectionManagementService.connectionInfo.ownerUri;
 		this._commandService.executeCommand('agent.openAlertDialog', ownerUri, null, null);
 	}
-}
+}
--- a/src/sql/parts/jobManagement/views/jobHistory.component.ts
+++ b/src/sql/parts/jobManagement/views/jobHistory.component.ts
@@ -17,8 +17,10 @@ import { RunJobAction, StopJobAction, EditJobAction, JobsRefreshAction } from 's
 import { JobCacheObject } from 'sql/platform/jobManagement/common/jobManagementService';
 import { JobManagementUtilities } from 'sql/platform/jobManagement/common/jobManagementUtilities';
 import { IJobManagementService } from 'sql/platform/jobManagement/common/interfaces';
-import { JobHistoryController, JobHistoryDataSource,
-	JobHistoryRenderer, JobHistoryFilter, JobHistoryModel, JobHistoryRow } from 'sql/parts/jobManagement/views/jobHistoryTree';
+import {
+	JobHistoryController, JobHistoryDataSource,
+	JobHistoryRenderer, JobHistoryFilter, JobHistoryModel, JobHistoryRow
+} from 'sql/parts/jobManagement/views/jobHistoryTree';
 import { JobStepsViewRow } from 'sql/parts/jobManagement/views/jobStepsViewTree';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { attachListStyler } from 'vs/platform/theme/common/styler';
@@ -210,7 +212,7 @@ export class JobHistoryComponent extends JobManagementView implements OnInit {
 				});
 				self._stepRows.unshift(new JobStepsViewRow());
 				self._stepRows[0].rowID = 'stepsColumn' + self._agentJobInfo.jobId;
-				self._stepRows[0].stepId = nls.localize('stepRow.stepID','Step ID');
+				self._stepRows[0].stepId = nls.localize('stepRow.stepID', 'Step ID');
 				self._stepRows[0].stepName = nls.localize('stepRow.stepName', 'Step Name');
 				self._stepRows[0].message = nls.localize('stepRow.message', 'Message');
 				this._showSteps = self._stepRows.length > 1;
@@ -251,7 +253,7 @@ export class JobHistoryComponent extends JobManagementView implements OnInit {
 	}

 	private toggleCollapse(): void {
-		let arrow: HTMLElement = $('.resultsViewCollapsible').get(0);
+		let arrow: HTMLElement = jQuery('.resultsViewCollapsible').get(0);
 		let checkbox: any = document.getElementById('accordion');
 		if (arrow.className === 'resultsViewCollapsible' && checkbox.checked === false) {
 			arrow.className = 'resultsViewCollapsible collapsed';
@@ -318,8 +320,8 @@ export class JobHistoryComponent extends JobManagementView implements OnInit {
 	}

 	public layout() {
-		let historyDetails = $('.overview-container').get(0);
-		let statusBar = $('.part.statusbar').get(0);
+		let historyDetails = jQuery('.overview-container').get(0);
+		let statusBar = jQuery('.part.statusbar').get(0);
 		if (historyDetails && statusBar) {
 			let historyBottom = historyDetails.getBoundingClientRect().bottom;
 			let statusTop = statusBar.getBoundingClientRect().top;
--- a/src/sql/parts/jobManagement/views/jobStepsView.component.ts
+++ b/src/sql/parts/jobManagement/views/jobStepsView.component.ts
@@ -59,10 +59,10 @@ export class JobStepsViewComponent extends JobManagementView implements OnInit,
 	}

 	ngAfterContentChecked() {
-		$('.steps-tree .step-column-heading').closest('.monaco-tree-row').addClass('step-column-row');
+		jQuery('.steps-tree .step-column-heading').closest('.monaco-tree-row').addClass('step-column-row');
 		this.layout();
 		this._tree.onDidScroll(() => {
-			$('.steps-tree .step-column-heading').closest('.monaco-tree-row').addClass('step-column-row');
+			jQuery('.steps-tree .step-column-heading').closest('.monaco-tree-row').addClass('step-column-row');
 		});
 		this._treeController.onClick = (tree, element, event, origin = 'mouse') => {
 			const payload = { origin: origin };
@@ -80,12 +80,12 @@ export class JobStepsViewComponent extends JobManagementView implements OnInit,
 				tree.setFocus(element, payload);
 				tree.setSelection([element], payload);
 			}
-			$('.steps-tree .step-column-heading').closest('.monaco-tree-row').addClass('step-column-row');
+			jQuery('.steps-tree .step-column-heading').closest('.monaco-tree-row').addClass('step-column-row');
 			return true;
 		};
 		this._treeController.onKeyDown = (tree, event) => {
 			this._treeController.onKeyDownWrapper(tree, event);
-			$('.steps-tree .step-column-heading').closest('.monaco-tree-row').addClass('step-column-row');
+			jQuery('.steps-tree .step-column-heading').closest('.monaco-tree-row').addClass('step-column-row');
 			return true;
 		};
 		this._tree.onDidFocus(() => {
@@ -118,4 +118,3 @@ export class JobStepsViewComponent extends JobManagementView implements OnInit,
 		}
 	}
 }
-
--- a/src/sql/parts/jobManagement/views/jobsView.component.ts
+++ b/src/sql/parts/jobManagement/views/jobsView.component.ts
@@ -134,8 +134,8 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe
 	}

 	public layout() {
-		let jobsViewToolbar = $('jobsview-component .agent-actionbar-container').get(0);
-		let statusBar = $('.part.statusbar').get(0);
+		let jobsViewToolbar = jQuery('jobsview-component .agent-actionbar-container').get(0);
+		let statusBar = jQuery('.part.statusbar').get(0);
 		if (jobsViewToolbar && statusBar) {
 			let toolbarBottom = jobsViewToolbar.getBoundingClientRect().bottom + ACTIONBAR_PADDING;
 			let statusTop = statusBar.getBoundingClientRect().top;
@@ -181,8 +181,8 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe
 		columns.unshift(this.rowDetail.getColumnDefinition());
 		let filterPlugin = new HeaderFilter({}, this._themeService);
 		this.filterPlugin = filterPlugin;
-		$(this._gridEl.nativeElement).empty();
-		$(this.actionBarContainer.nativeElement).empty();
+		jQuery(this._gridEl.nativeElement).empty();
+		jQuery(this.actionBarContainer.nativeElement).empty();
 		this.initActionBar();
 		this._table = new Table(this._gridEl.nativeElement, { columns }, options);
 		this._table.grid.setData(this.dataView, true);
@@ -353,7 +353,7 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe

 		this.expandJobs(start);
 		// tooltip for job name
-		$('.jobview-jobnamerow').hover(e => {
+		jQuery('.jobview-jobnamerow').hover(e => {
 			let currentTarget = e.currentTarget;
 			currentTarget.title = currentTarget.innerText;
 		});
@@ -362,9 +362,9 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe
 		this._table.grid.onColumnsResized.subscribe((e, data: any) => {
 			let nameWidth: number = data.grid.getColumns()[1].width;
 			// adjust job name when resized
-			$('#jobsDiv .jobview-grid .slick-cell.l1.r1 .jobview-jobnametext').css('width', `${nameWidth - 10}px`);
+			jQuery('#jobsDiv .jobview-grid .slick-cell.l1.r1 .jobview-jobnametext').css('width', `${nameWidth - 10}px`);
 			// adjust error message when resized
-			$('#jobsDiv .jobview-grid .slick-cell.l1.r1.error-row .jobview-jobnametext').css('width', '100%');
+			jQuery('#jobsDiv .jobview-grid .slick-cell.l1.r1.error-row .jobview-jobnametext').css('width', '100%');

 			// generate job charts again
 			self.jobs.forEach(job => {
@@ -376,11 +376,11 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe
 			});
 		});

-		$('#jobsDiv .jobview-grid .monaco-table .slick-viewport .grid-canvas .ui-widget-content.slick-row').hover((e1) =>
+		jQuery('#jobsDiv .jobview-grid .monaco-table .slick-viewport .grid-canvas .ui-widget-content.slick-row').hover((e1) =>
 			this.highlightErrorRows(e1), (e2) => this.hightlightNonErrorRows(e2));

 		this._table.grid.onScroll.subscribe((e) => {
-			$('#jobsDiv .jobview-grid .monaco-table .slick-viewport .grid-canvas .ui-widget-content.slick-row').hover((e1) =>
+			jQuery('#jobsDiv .jobview-grid .monaco-table .slick-viewport .grid-canvas .ui-widget-content.slick-row').hover((e1) =>
 				this.highlightErrorRows(e1), (e2) => this.hightlightNonErrorRows(e2));
 		});

@@ -393,15 +393,15 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe
 	private highlightErrorRows(e) {
 		// highlight the error row as well if a failing job row is hovered
 		if (e.currentTarget.children.item(0).classList.contains('job-with-error')) {
-			let target = $(e.currentTarget);
-			let targetChildren = $(e.currentTarget.children);
+			let target = jQuery(e.currentTarget);
+			let targetChildren = jQuery(e.currentTarget.children);
 			let siblings = target.nextAll().toArray();
 			let top = parseInt(target.css('top'), 10);
 			for (let i = 0; i < siblings.length; i++) {
 				let sibling = siblings[i];
-				let siblingTop = parseInt($(sibling).css('top'), 10);
+				let siblingTop = parseInt(jQuery(sibling).css('top'), 10);
 				if (siblingTop === top + ROW_HEIGHT) {
-					$(sibling.children).addClass('hovered');
+					jQuery(sibling.children).addClass('hovered');
 					sibling.onmouseenter = (e) => {
 						targetChildren.addClass('hovered');
 					};
@@ -417,14 +417,14 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe
 	private hightlightNonErrorRows(e) {
 		// switch back to original background
 		if (e.currentTarget.children.item(0).classList.contains('job-with-error')) {
-			let target = $(e.currentTarget);
+			let target = jQuery(e.currentTarget);
 			let siblings = target.nextAll().toArray();
 			let top = parseInt(target.css('top'), 10);
 			for (let i = 0; i < siblings.length; i++) {
 				let sibling = siblings[i];
-				let siblingTop = parseInt($(sibling).css('top'), 10);
+				let siblingTop = parseInt(jQuery(sibling).css('top'), 10);
 				if (siblingTop === top + ROW_HEIGHT) {
-					$(sibling.children).removeClass('hovered');
+					jQuery(sibling.children).removeClass('hovered');
 					break;
 				}
 			}
@@ -622,7 +622,7 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe
 		let chartHeights = this.getChartHeights(jobHistories);
 		let runCharts = [];
 		for (let i = 0; i < chartHeights.length; i++) {
-			let runGraph = $(`table.jobprevruns#${jobId} > tbody > tr > td > div.bar${i}`);
+			let runGraph = jQuery(`table.jobprevruns#${jobId} > tbody > tr > td > div.bar${i}`);
 			if (runGraph.length > 0) {
 				runGraph.css('height', chartHeights[i]);
 				let bgColor = jobHistories[i].runStatus === 0 ? 'red' : 'green';
@@ -842,9 +842,9 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe
 		let bgColor = theme.getColor(tableBackground);
 		let cellColor = theme.getColor(cellBackground);
 		let borderColor = theme.getColor(cellBorderColor);
-		let headerColumns = $('#agentViewDiv .slick-header-column');
-		let cells = $('.grid-canvas .ui-widget-content.slick-row .slick-cell');
-		let cellDetails = $('#jobsDiv .dynamic-cell-detail');
+		let headerColumns = jQuery('#agentViewDiv .slick-header-column');
+		let cells = jQuery('.grid-canvas .ui-widget-content.slick-row .slick-cell');
+		let cellDetails = jQuery('#jobsDiv .dynamic-cell-detail');
 		headerColumns.toArray().forEach(col => {
 			col.style.background = bgColor.toString();
 		});
@@ -952,4 +952,4 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe
 		let ownerUri: string = this._commonService.connectionManagementService.connectionInfo.ownerUri;
 		await this._commandService.executeCommand('agent.openJobDialog', ownerUri);
 	}
-}
+}
--- a/src/sql/parts/jobManagement/views/operatorsView.component.ts
+++ b/src/sql/parts/jobManagement/views/operatorsView.component.ts
@@ -145,8 +145,8 @@ export class OperatorsViewComponent extends JobManagementView implements OnInit,
 		});
 		columns.unshift(rowDetail.getColumnDefinition());

-		$(this._gridEl.nativeElement).empty();
-		$(this.actionBarContainer.nativeElement).empty();
+		jQuery(this._gridEl.nativeElement).empty();
+		jQuery(this.actionBarContainer.nativeElement).empty();
 		this.initActionBar();
 		this._table = new Table(this._gridEl.nativeElement, { columns }, this.options);
 		this._table.grid.setData(this.dataView, true);
@@ -226,4 +226,4 @@ export class OperatorsViewComponent extends JobManagementView implements OnInit,
 		let ownerUri: string = this._commonService.connectionManagementService.connectionInfo.ownerUri;
 		this._commandService.executeCommand('agent.openOperatorDialog', ownerUri);
 	}
-}
+}
--- a/src/sql/parts/jobManagement/views/proxiesView.component.ts
+++ b/src/sql/parts/jobManagement/views/proxiesView.component.ts
@@ -148,8 +148,8 @@ export class ProxiesViewComponent extends JobManagementView implements OnInit, O
 		});
 		columns.unshift(rowDetail.getColumnDefinition());

-		$(this._gridEl.nativeElement).empty();
-		$(this.actionBarContainer.nativeElement).empty();
+		jQuery(this._gridEl.nativeElement).empty();
+		jQuery(this.actionBarContainer.nativeElement).empty();
 		this.initActionBar();
 		this._table = new Table(this._gridEl.nativeElement, { columns }, this.options);
 		this._table.grid.setData(this.dataView, true);
@@ -234,4 +234,4 @@ export class ProxiesViewComponent extends JobManagementView implements OnInit, O
 			}
 		});
 	}
-}
+}
--- a/src/sql/workbench/browser/modal/dialogHelper.ts
+++ b/src/sql/workbench/browser/modal/dialogHelper.ts
@@ -6,50 +6,38 @@
 'use strict';
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
 import { Button } from 'sql/base/browser/ui/button/button';
+import { append, $, addClass, addClasses } from 'vs/base/browser/dom';

-import { Builder } from 'sql/base/browser/builder';
 import * as types from 'vs/base/common/types';

 import * as azdata from 'azdata';

-export function appendRow(container: Builder, label: string, labelClass: string, cellContainerClass: string, rowContainerClass?: string): Builder {
-	let cellContainer: Builder;
-	let rowAttributes = rowContainerClass ? { class: rowContainerClass } : {};
-	container.element('tr', rowAttributes, (rowContainer) => {
-		rowContainer.element('td', { class: labelClass }, (labelCellContainer) => {
-			labelCellContainer.div({}, (labelContainer) => {
-				labelContainer.text(label);
-			});
-		});
-		rowContainer.element('td', { class: cellContainerClass }, (inputCellContainer) => {
-			cellContainer = inputCellContainer;
-		});
-	});
+export function appendRow(container: HTMLElement, label: string, labelClass: string, cellContainerClass: string, rowContainerClass?: string | Array<string>): HTMLElement {
+	let rowContainer = append(container, $('tr'));
+	if (rowContainerClass) {
+		if (types.isString(rowContainerClass)) {
+			addClass(rowContainer, rowContainerClass);
+		} else {
+			addClasses(rowContainer, ...rowContainerClass);
+		}
+	}
+	append(append(rowContainer, $(`td.${labelClass}`)), $('div')).innerText = label;
+	let inputCellContainer = append(rowContainer, $(`td.${cellContainerClass}`));

-	return cellContainer;
+	return inputCellContainer;
 }

-export function appendRowLink(container: Builder, label: string, labelClass: string, cellContainerClass: string): Builder {
-	let rowButton: Button;
-	container.element('tr', {}, (rowContainer) => {
-		rowContainer.element('td', { class: labelClass }, (labelCellContainer) => {
-			labelCellContainer.div({}, (labelContainer) => {
-				labelContainer.text(label);
-			});
-		});
-		rowContainer.element('td', { class: cellContainerClass }, (inputCellContainer) => {
-			inputCellContainer.element('div', {}, (rowContainer) => {
-				rowButton = new Button(rowContainer.getHTMLElement());
+export function appendRowLink(container: HTMLElement, label: string, labelClass: string, cellContainerClass: string): HTMLElement {
+	let rowContainer = append(container, $('tr'));
+	append(append(rowContainer, $(`td.${labelClass}`)), $('div')).innerText = label;
+	let buttonContainer = append(append(rowContainer, $(`td.${cellContainerClass}`)), $('div'));
+	let rowButton = new Button(buttonContainer);

-			});
-		});
-	});
-
-	return new Builder(rowButton.element);
+	return rowButton.element;
 }

-export function appendInputSelectBox(container: Builder, selectBox: SelectBox): SelectBox {
-	selectBox.render(container.getHTMLElement());
+export function appendInputSelectBox(container: HTMLElement, selectBox: SelectBox): SelectBox {
+	selectBox.render(container);
 	return selectBox;
 }

@@ -80,4 +68,4 @@ export function getCategoryName(categories: azdata.CategoryValue[], categoryDisp
 		}
 	});
 	return categoryName;
-}
+}
--- a/src/sql/workbench/browser/modal/optionsDialog.ts
+++ b/src/sql/workbench/browser/modal/optionsDialog.ts
@@ -26,7 +26,6 @@ import { IWorkbenchThemeService, IColorTheme } from 'vs/workbench/services/theme
 import { contrastBorder } from 'vs/platform/theme/common/colorRegistry';
 import * as styler from 'vs/platform/theme/common/styler';
 import { InputBox } from 'vs/base/browser/ui/inputbox/inputBox';
-import { Builder, $ } from 'sql/base/browser/builder';
 import { Widget } from 'vs/base/browser/ui/widget';
 import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
 import { IViewletPanelOptions, ViewletPanel } from 'vs/workbench/browser/parts/views/panelViewlet';
@@ -34,6 +33,7 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService';
+import { append, $ } from 'vs/base/browser/dom';

 export class CategoryView extends ViewletPanel {

@@ -68,9 +68,9 @@ export interface IOptionsDialogOptions extends IModalOptions {
 export class OptionsDialog extends Modal {
 	private _body: HTMLElement;
 	private _optionGroups: HTMLElement;
-	private _dividerBuilder: Builder;
-	private _optionTitle: Builder;
-	private _optionDescription: Builder;
+	private _dividerBuilder: HTMLElement;
+	private _optionTitle: HTMLElement;
+	private _optionDescription: HTMLElement;
 	private _optionElements: { [optionName: string]: OptionsDialogHelper.IOptionElement } = {};
 	private _optionValues: { [optionName: string]: string };
 	private _optionRowSize = 31;
@@ -116,23 +116,14 @@ export class OptionsDialog extends Modal {
 	}

 	protected renderBody(container: HTMLElement) {
-		new Builder(container).div({ class: 'optionsDialog-options' }, (bodyBuilder) => {
-			this._body = bodyBuilder.getHTMLElement();
-		});
+		this._body = append(container, $('div.optionsDialog-options'));

-		let builder = new Builder(this._body);
-		builder.div({}, (dividerContainer) => {
-			this._dividerBuilder = dividerContainer;
-		});
+		this._dividerBuilder = append(this._body, $('div'));

-		builder.div({ class: 'optionsDialog-description' }, (descriptionContainer) => {
-			descriptionContainer.div({ class: 'modal-title' }, (optionTitle) => {
-				this._optionTitle = optionTitle;
-			});
-			descriptionContainer.div({ class: 'optionsDialog-description-content' }, (optionDescription) => {
-				this._optionDescription = optionDescription;
-			});
-		});
+		let descriptionContainer = append(this._body, $('div.optionsDialog-description'));
+
+		this._optionTitle = append(descriptionContainer, $('div.modal-title'));
+		this._optionDescription = append(descriptionContainer, $('div.optionsDialog-description-content'));
 	}

 	// Update theming that is specific to options dialog flyout body
@@ -140,19 +131,19 @@ export class OptionsDialog extends Modal {
 		let borderColor = theme.getColor(contrastBorder);
 		let border = borderColor ? borderColor.toString() : null;
 		if (this._dividerBuilder) {
-			this._dividerBuilder.style('border-top-width', border ? '1px' : null);
-			this._dividerBuilder.style('border-top-style', border ? 'solid' : null);
-			this._dividerBuilder.style('border-top-color', border);
+			this._dividerBuilder.style.borderTopWidth = border ? '1px' : null;
+			this._dividerBuilder.style.borderTopStyle = border ? 'solid' : null;
+			this._dividerBuilder.style.borderTopColor = border;
 		}
 	}

 	private onOptionLinkClicked(optionName: string): void {
 		let option = this._optionElements[optionName].option;
-		this._optionTitle.text(option.displayName);
-		this._optionDescription.text(option.description);
+		this._optionTitle.innerText = option.displayName;
+		this._optionDescription.innerText = option.description;
 	}

-	private fillInOptions(container: Builder, options: azdata.ServiceOption[]): void {
+	private fillInOptions(container: HTMLElement, options: azdata.ServiceOption[]): void {
 		for (let i = 0; i < options.length; i++) {
 			let option: azdata.ServiceOption = options[i];
 			let rowContainer = DialogHelper.appendRow(container, option.displayName, 'optionsDialog-label', 'optionsDialog-input');
@@ -226,21 +217,16 @@ export class OptionsDialog extends Modal {
 	public open(options: azdata.ServiceOption[], optionValues: { [name: string]: any }) {
 		this._optionValues = optionValues;
 		let firstOption: string;
-		let containerGroup: Builder;
-		let optionsContentBuilder: Builder = $().div({ class: 'optionsDialog-options-groups monaco-panel-view' }, (container) => {
-			containerGroup = container;
-			this._optionGroups = container.getHTMLElement();
-		});
-		this.splitview = new ScrollableSplitView(containerGroup.getHTMLElement(), { enableResizing: false, scrollDebounce: 0 });
+		this._optionGroups = $('div.optionsDialog-options-groups.monaco-panel-view');
+		this.splitview = new ScrollableSplitView(this._optionGroups, { enableResizing: false, scrollDebounce: 0 });
 		let categoryMap = OptionsDialogHelper.groupOptionsByCategory(options);
 		for (let category in categoryMap) {
 			let serviceOptions: azdata.ServiceOption[] = categoryMap[category];
-			let bodyContainer = $().element('table', { class: 'optionsDialog-table' }, (tableContainer: Builder) => {
-				this.fillInOptions(tableContainer, serviceOptions);
-			});
+			let bodyContainer = $('table.optionsDialog-table');
+			this.fillInOptions(bodyContainer, serviceOptions);

 			let viewSize = this._optionCategoryPadding + serviceOptions.length * this._optionRowSize;
-			let categoryView = this._instantiationService.createInstance(CategoryView, bodyContainer.getHTMLElement(), viewSize, { title: category, ariaHeaderLabel: category, id: category });
+			let categoryView = this._instantiationService.createInstance(CategoryView, bodyContainer, viewSize, { title: category, ariaHeaderLabel: category, id: category });
 			this.splitview.addView(categoryView, viewSize);
 			categoryView.render();
 			attachPanelStyler(categoryView, this._themeService);
@@ -252,8 +238,7 @@ export class OptionsDialog extends Modal {
 		if (this.height) {
 			this.splitview.layout(this.height - 120);
 		}
-		let body = new Builder(this._body);
-		body.append(optionsContentBuilder.getHTMLElement(), 0);
+		append(this._body, this._optionGroups);
 		this.show();
 		let firstOptionWidget = this._optionElements[firstOption].optionWidget;
 		this.registerStyling();
--- a/src/sql/workbench/browser/modal/optionsDialogHelper.ts
+++ b/src/sql/workbench/browser/modal/optionsDialogHelper.ts
@@ -6,7 +6,6 @@
 'use strict';

 import * as DialogHelper from './dialogHelper';
-import { Builder } from 'sql/base/browser/builder';
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
 import { MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
@@ -22,7 +21,7 @@ export interface IOptionElement {
 	optionValue: any;
 }

-export function createOptionElement(option: azdata.ServiceOption, rowContainer: Builder, options: { [name: string]: any },
+export function createOptionElement(option: azdata.ServiceOption, rowContainer: HTMLElement, options: { [name: string]: any },
 	optionsMap: { [optionName: string]: IOptionElement }, contextViewService: IContextViewService, onFocus: (name) => void): void {
 	let possibleInputs: string[] = [];
 	let optionValue = getOptionValueAndCategoryValues(option, options, possibleInputs);
@@ -32,7 +31,7 @@ export function createOptionElement(option: azdata.ServiceOption, rowContainer:
 	let invalidInputMessage = localize('optionsDialog.invalidInput', 'Invalid input.  Numeric value expected.');

 	if (option.valueType === ServiceOptionType.number) {
-		optionWidget = new InputBox(rowContainer.getHTMLElement(), contextViewService, {
+		optionWidget = new InputBox(rowContainer, contextViewService, {
 			validationOptions: {
 				validation: (value: string) => {
 					if (!value && option.isRequired) {
@@ -53,7 +52,7 @@ export function createOptionElement(option: azdata.ServiceOption, rowContainer:
 		DialogHelper.appendInputSelectBox(rowContainer, optionWidget);
 		inputElement = findElement(rowContainer, 'monaco-select-box');
 	} else if (option.valueType === ServiceOptionType.string || option.valueType === ServiceOptionType.password) {
-		optionWidget = new InputBox(rowContainer.getHTMLElement(), contextViewService, {
+		optionWidget = new InputBox(rowContainer, contextViewService, {
 			validationOptions: {
 				validation: (value: string) => (!value && option.isRequired) ? ({ type: MessageType.ERROR, content: option.displayName + missingErrorMessage }) : null
 			},
@@ -149,16 +148,16 @@ export function updateOptions(options: { [optionName: string]: any }, optionsMap
 export let trueInputValue: string = 'True';
 export let falseInputValue: string = 'False';

-export function findElement(container: Builder, className: string): HTMLElement {
-	var elementBuilder: Builder = container;
-	while (elementBuilder.getHTMLElement()) {
-		var htmlElement = elementBuilder.getHTMLElement();
+export function findElement(container: HTMLElement, className: string): HTMLElement {
+	var elementBuilder = container;
+	while (elementBuilder) {
+		var htmlElement = elementBuilder;
 		if (htmlElement.className.startsWith(className)) {
 			break;
 		}
-		elementBuilder = elementBuilder.child(0);
+		elementBuilder = elementBuilder.firstChild as HTMLElement;
 	}
-	return elementBuilder.getHTMLElement();
+	return elementBuilder;
 }

 export function groupOptionsByCategory(options: azdata.ServiceOption[]): { [category: string]: azdata.ServiceOption[] } {
@@ -176,4 +175,4 @@ export function groupOptionsByCategory(options: azdata.ServiceOption[]): { [cate
 		}
 	});
 	return connectionOptionsMap;
-}
+}
--- a/src/sql/workbench/services/connection/browser/connectionDialogWidget.ts
+++ b/src/sql/workbench/services/connection/browser/connectionDialogWidget.ts
@@ -201,7 +201,7 @@ export class ConnectionDialogWidget extends Modal {
 		this._bodyBuilder.div({ class: 'connection-type' }, (modelTableContent) => {
 			modelTableContent.element('table', { class: 'connection-table-content' }, (tableContainer) => {
 				DialogHelper.appendInputSelectBox(
-					DialogHelper.appendRow(tableContainer, connectTypeLabel, 'connection-label', 'connection-input'), this._providerTypeSelectBox);
+					DialogHelper.appendRow(tableContainer.getHTMLElement(), connectTypeLabel, 'connection-label', 'connection-input'), this._providerTypeSelectBox);
 			});
 		});

--- a/src/sql/workbench/services/connection/browser/connectionWidget.ts
+++ b/src/sql/workbench/services/connection/browser/connectionWidget.ts
@@ -32,14 +32,13 @@ import { localize } from 'vs/nls';
 import * as DOM from 'vs/base/browser/dom';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { OS, OperatingSystem } from 'vs/base/common/platform';
-import { Builder, $ } from 'sql/base/browser/builder';
 import { MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
 import { endsWith, startsWith } from 'vs/base/common/strings';
 import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';

 export class ConnectionWidget {
-	private _builder: Builder;
+	private _container: HTMLElement;
 	private _serverGroupSelectBox: SelectBox;
 	private _previousGroupOption: string;
 	private _serverGroupOptions: IConnectionProfileGroup[];
@@ -52,7 +51,7 @@ export class ConnectionWidget {
 	private _rememberPasswordCheckBox: Checkbox;
 	private _azureAccountDropdown: SelectBox;
 	private _azureTenantDropdown: SelectBox;
-	private _refreshCredentialsLinkBuilder: Builder;
+	private _refreshCredentialsLink: HTMLLinkElement;
 	private _addAzureAccountMessage: string = localize('connectionWidget.AddAzureAccount', 'Add an account...');
 	private readonly _azureProviderId = 'azurePublicCloud';
 	private _azureTenantId: string;
@@ -62,7 +61,7 @@ export class ConnectionWidget {
 	private _authTypeSelectBox: SelectBox;
 	private _toDispose: lifecycle.IDisposable[];
 	private _optionsMaps: { [optionType: number]: azdata.ConnectionOption };
-	private _tableContainer: Builder;
+	private _tableContainer: HTMLElement;
 	private _focusedBeforeHandleOnConnection: HTMLElement;
 	private _providerName: string;
 	private _authTypeMap: { [providerName: string]: AuthenticationType[] } = {
@@ -130,11 +129,8 @@ export class ConnectionWidget {
 		this._serverGroupOptions = [this.DefaultServerGroup];
 		this._serverGroupSelectBox = new SelectBox(this._serverGroupOptions.map(g => g.name), this.DefaultServerGroup.name, this._contextViewService, undefined, { ariaLabel: this._serverGroupDisplayString });
 		this._previousGroupOption = this._serverGroupSelectBox.value;
-		this._builder = $().div({ class: 'connection-table' }, (modelTableContent) => {
-			modelTableContent.element('table', { class: 'connection-table-content' }, (tableContainer) => {
-				this._tableContainer = tableContainer;
-			});
-		});
+		this._container = DOM.append(container, DOM.$('div.connection-table'));
+		this._tableContainer = DOM.append(this._container, DOM.$('table.connection-table-content'));
 		this.fillInConnectionForm();
 		this.registerListeners();
 		if (this._authTypeSelectBox) {
@@ -144,8 +140,6 @@ export class ConnectionWidget {
 		DOM.addDisposableListener(container, 'paste', e => {
 			this._handleClipboard();
 		});
-
-		DOM.append(container, this._builder.getHTMLElement());
 	}

 	private _handleClipboard(): void {
@@ -166,8 +160,8 @@ export class ConnectionWidget {
 	private fillInConnectionForm(): void {
 		// Server name
 		let serverNameOption = this._optionsMaps[ConnectionOptionSpecialType.serverName];
-		let serverNameBuilder = DialogHelper.appendRow(this._tableContainer, serverNameOption.displayName, 'connection-label', 'connection-input');
-		this._serverNameInputBox = new InputBox(serverNameBuilder.getHTMLElement(), this._contextViewService, {
+		let serverName = DialogHelper.appendRow(this._tableContainer, serverNameOption.displayName, 'connection-label', 'connection-input');
+		this._serverNameInputBox = new InputBox(serverName, this._contextViewService, {
 			validationOptions: {
 				validation: (value: string) => {
 					if (!value) {
@@ -183,15 +177,15 @@ export class ConnectionWidget {

 		// Authentication type
 		if (this._optionsMaps[ConnectionOptionSpecialType.authType]) {
-			let authTypeBuilder = DialogHelper.appendRow(this._tableContainer, this._optionsMaps[ConnectionOptionSpecialType.authType].displayName, 'connection-label', 'connection-input');
-			DialogHelper.appendInputSelectBox(authTypeBuilder, this._authTypeSelectBox);
+			let authType = DialogHelper.appendRow(this._tableContainer, this._optionsMaps[ConnectionOptionSpecialType.authType].displayName, 'connection-label', 'connection-input');
+			DialogHelper.appendInputSelectBox(authType, this._authTypeSelectBox);
 		}

 		// Username
 		let self = this;
 		let userNameOption = this._optionsMaps[ConnectionOptionSpecialType.userName];
-		let userNameBuilder = DialogHelper.appendRow(this._tableContainer, userNameOption.displayName, 'connection-label', 'connection-input', 'username-password-row');
-		this._userNameInputBox = new InputBox(userNameBuilder.getHTMLElement(), this._contextViewService, {
+		let userName = DialogHelper.appendRow(this._tableContainer, userNameOption.displayName, 'connection-label', 'connection-input', 'username-password-row');
+		this._userNameInputBox = new InputBox(userName, this._contextViewService, {
 			validationOptions: {
 				validation: (value: string) => self.validateUsername(value, userNameOption.isRequired) ? ({ type: MessageType.ERROR, content: localize('connectionWidget.missingRequireField', '{0} is required.', userNameOption.displayName) }) : null
 			},
@@ -199,34 +193,36 @@ export class ConnectionWidget {
 		});
 		// Password
 		let passwordOption = this._optionsMaps[ConnectionOptionSpecialType.password];
-		let passwordBuilder = DialogHelper.appendRow(this._tableContainer, passwordOption.displayName, 'connection-label', 'connection-input', 'username-password-row');
-		this._passwordInputBox = new InputBox(passwordBuilder.getHTMLElement(), this._contextViewService, { ariaLabel: passwordOption.displayName });
+		let password = DialogHelper.appendRow(this._tableContainer, passwordOption.displayName, 'connection-label', 'connection-input', 'username-password-row');
+		this._passwordInputBox = new InputBox(password, this._contextViewService, { ariaLabel: passwordOption.displayName });
 		this._passwordInputBox.inputElement.type = 'password';
 		this._password = '';

 		// Remember password
 		let rememberPasswordLabel = localize('rememberPassword', 'Remember password');
-		this._rememberPasswordCheckBox = this.appendCheckbox(this._tableContainer, rememberPasswordLabel, 'connection-checkbox', 'connection-input', 'username-password-row', false);
+		this._rememberPasswordCheckBox = this.appendCheckbox(this._tableContainer, rememberPasswordLabel, 'connection-input', 'username-password-row', false);

 		// Azure account picker
 		let accountLabel = localize('connection.azureAccountDropdownLabel', 'Account');
-		let accountDropdownBuilder = DialogHelper.appendRow(this._tableContainer, accountLabel, 'connection-label', 'connection-input', 'azure-account-row');
-		this._azureAccountDropdown = new SelectBox([], undefined, this._contextViewService, accountDropdownBuilder.getContainer(), { ariaLabel: accountLabel });
-		DialogHelper.appendInputSelectBox(accountDropdownBuilder, this._azureAccountDropdown);
-		let refreshCredentialsBuilder = DialogHelper.appendRow(this._tableContainer, '', 'connection-label', 'connection-input', 'azure-account-row refresh-credentials-link');
-		this._refreshCredentialsLinkBuilder = refreshCredentialsBuilder.a({ href: '#' }).text(localize('connectionWidget.refreshAzureCredentials', 'Refresh account credentials'));
+		let accountDropdown = DialogHelper.appendRow(this._tableContainer, accountLabel, 'connection-label', 'connection-input', 'azure-account-row');
+		this._azureAccountDropdown = new SelectBox([], undefined, this._contextViewService, accountDropdown, { ariaLabel: accountLabel });
+		DialogHelper.appendInputSelectBox(accountDropdown, this._azureAccountDropdown);
+		let refreshCredentials = DialogHelper.appendRow(this._tableContainer, '', 'connection-label', 'connection-input', ['azure-account-row', 'refresh-credentials-link']);
+		this._refreshCredentialsLink = DOM.append(refreshCredentials, DOM.$('a'));
+		this._refreshCredentialsLink.href = '#';
+		this._refreshCredentialsLink.innerText = localize('connectionWidget.refreshAzureCredentials', 'Refresh account credentials');

 		// Azure tenant picker
 		let tenantLabel = localize('connection.azureTenantDropdownLabel', 'Azure AD tenant');
-		let tenantDropdownBuilder = DialogHelper.appendRow(this._tableContainer, tenantLabel, 'connection-label', 'connection-input', 'azure-account-row azure-tenant-row');
-		this._azureTenantDropdown = new SelectBox([], undefined, this._contextViewService, tenantDropdownBuilder.getContainer(), { ariaLabel: tenantLabel });
-		DialogHelper.appendInputSelectBox(tenantDropdownBuilder, this._azureTenantDropdown);
+		let tenantDropdown = DialogHelper.appendRow(this._tableContainer, tenantLabel, 'connection-label', 'connection-input', ['azure-account-row', 'azure-tenant-row']);
+		this._azureTenantDropdown = new SelectBox([], undefined, this._contextViewService, tenantDropdown, { ariaLabel: tenantLabel });
+		DialogHelper.appendInputSelectBox(tenantDropdown, this._azureTenantDropdown);

 		// Database
 		let databaseOption = this._optionsMaps[ConnectionOptionSpecialType.databaseName];
-		let databaseNameBuilder = DialogHelper.appendRow(this._tableContainer, databaseOption.displayName, 'connection-label', 'connection-input');
+		let databaseName = DialogHelper.appendRow(this._tableContainer, databaseOption.displayName, 'connection-label', 'connection-input');

-		this._databaseNameInputBox = new Dropdown(databaseNameBuilder.getHTMLElement(), this._contextViewService, {
+		this._databaseNameInputBox = new Dropdown(databaseName, this._contextViewService, {
 			values: [this._defaultDatabaseName, this._loadingDatabaseName],
 			strictSelection: false,
 			placeholder: this._defaultDatabaseName,
@@ -236,13 +232,13 @@ export class ConnectionWidget {
 		});

 		// Server group
-		let serverGroupBuilder = DialogHelper.appendRow(this._tableContainer, this._serverGroupDisplayString, 'connection-label', 'connection-input');
-		DialogHelper.appendInputSelectBox(serverGroupBuilder, this._serverGroupSelectBox);
+		let serverGroup = DialogHelper.appendRow(this._tableContainer, this._serverGroupDisplayString, 'connection-label', 'connection-input');
+		DialogHelper.appendInputSelectBox(serverGroup, this._serverGroupSelectBox);

 		// Connection name
 		let connectionNameOption = this._optionsMaps[ConnectionOptionSpecialType.connectionName];
 		let connectionNameBuilder = DialogHelper.appendRow(this._tableContainer, connectionNameOption.displayName, 'connection-label', 'connection-input');
-		this._connectionNameInputBox = new InputBox(connectionNameBuilder.getHTMLElement(), this._contextViewService, { ariaLabel: connectionNameOption.displayName });
+		this._connectionNameInputBox = new InputBox(connectionNameBuilder, this._contextViewService, { ariaLabel: connectionNameOption.displayName });

 		let AdvancedLabel = localize('advanced', 'Advanced...');
 		this._advancedButton = this.createAdvancedButton(this._tableContainer, AdvancedLabel);
@@ -258,33 +254,26 @@ export class ConnectionWidget {
 		return false;
 	}

-	private createAdvancedButton(container: Builder, title: string): Button {
-		let button;
-		container.element('tr', {}, (rowContainer) => {
-			rowContainer.element('td');
-			rowContainer.element('td', { align: 'right' }, (cellContainer) => {
-				cellContainer.div({ class: 'advanced-button' }, (divContainer) => {
-					button = new Button(divContainer.getHTMLElement());
-					button.label = title;
-					button.onDidClick(() => {
-						//open advanced page
-						this._callbacks.onAdvancedProperties();
-					});
-				});
-			});
+	private createAdvancedButton(container: HTMLElement, title: string): Button {
+		let rowContainer = DOM.append(container, DOM.$('tr'));
+		DOM.append(rowContainer, DOM.$('td'));
+		let cellContainer = DOM.append(rowContainer, DOM.$('td'));
+		cellContainer.setAttribute('align', 'right');
+		let divContainer = DOM.append(cellContainer, DOM.$('div.advanced-button'));
+		let button = new Button(divContainer);
+		button.label = title;
+		button.onDidClick(() => {
+			//open advanced page
+			this._callbacks.onAdvancedProperties();
 		});
 		return button;
 	}

-	private appendCheckbox(container: Builder, label: string, checkboxClass: string, cellContainerClass: string, rowContainerClass: string, isChecked: boolean): Checkbox {
-		let checkbox: Checkbox;
-		container.element('tr', { class: rowContainerClass }, (rowContainer) => {
-			rowContainer.element('td');
-			rowContainer.element('td', { class: cellContainerClass }, (inputCellContainer) => {
-				checkbox = new Checkbox(inputCellContainer.getHTMLElement(), { label, checked: isChecked, ariaLabel: label });
-			});
-		});
-		return checkbox;
+	private appendCheckbox(container: HTMLElement, label: string, cellContainerClass: string, rowContainerClass: string, isChecked: boolean): Checkbox {
+		let rowContainer = DOM.append(container, DOM.$(`tr.${rowContainerClass}`));
+		DOM.append(rowContainer, DOM.$('td'));
+		let checkboxContainer = DOM.append(rowContainer, DOM.$(`td.${cellContainerClass}`));
+		return new Checkbox(checkboxContainer, { label, checked: isChecked, ariaLabel: label });
 	}

 	private registerListeners(): void {
@@ -322,8 +311,8 @@ export class ConnectionWidget {
 			}));
 		}

-		if (this._refreshCredentialsLinkBuilder) {
-			this._toDispose.push(this._refreshCredentialsLinkBuilder.on(DOM.EventType.CLICK, async () => {
+		if (this._refreshCredentialsLink) {
+			this._toDispose.push(DOM.addDisposableListener(this._refreshCredentialsLink, DOM.EventType.CLICK, async () => {
 				let account = this._azureAccountList.find(account => account.key.accountId === this._azureAccountDropdown.value);
 				if (account) {
 					await this._accountManagementService.refreshAccount(account);
@@ -417,14 +406,12 @@ export class ConnectionWidget {
 		if (currentAuthType === AuthenticationType.AzureMFA) {
 			this.fillInAzureAccountOptions();
 			this._azureAccountDropdown.enable();
-			let tableContainer = this._tableContainer.getContainer();
-			tableContainer.classList.add('hide-username-password');
-			tableContainer.classList.remove('hide-azure-accounts');
+			DOM.addClass(this._tableContainer, 'hide-username-password');
+			DOM.removeClass(this._tableContainer, 'hide-azure-accounts');
 		} else {
 			this._azureAccountDropdown.disable();
-			let tableContainer = this._tableContainer.getContainer();
-			tableContainer.classList.remove('hide-username-password');
-			tableContainer.classList.add('hide-azure-accounts');
+			DOM.removeClass(this._tableContainer, 'hide-username-password');
+			DOM.addClass(this._tableContainer, 'hide-azure-accounts');
 			this._azureAccountDropdown.hideMessage();
 		}
 	}
@@ -446,9 +433,9 @@ export class ConnectionWidget {
 	private async updateRefreshCredentialsLink(): Promise<void> {
 		let chosenAccount = this._azureAccountList.find(account => account.key.accountId === this._azureAccountDropdown.value);
 		if (chosenAccount && chosenAccount.isStale) {
-			this._tableContainer.getContainer().classList.remove('hide-refresh-link');
+			DOM.removeClass(this._tableContainer, 'hide-refresh-link');
 		} else {
-			this._tableContainer.getContainer().classList.add('hide-refresh-link');
+			DOM.addClass(this._tableContainer, 'hide-refresh-link');
 		}
 	}

@@ -482,7 +469,7 @@ export class ConnectionWidget {
 			// There are multiple tenants available so let the user select one
 			let options = selectedAccount.properties.tenants.map(tenant => tenant.displayName);
 			this._azureTenantDropdown.setOptions(options);
-			this._tableContainer.getContainer().classList.remove(hideTenantsClassName);
+			DOM.removeClass(this._tableContainer, hideTenantsClassName);
 			this.onAzureTenantSelected(0);
 		} else {
 			if (selectedAccount && selectedAccount.properties.tenants && selectedAccount.properties.tenants.length === 1) {
@@ -490,7 +477,7 @@ export class ConnectionWidget {
 			} else {
 				this._azureTenantId = undefined;
 			}
-			this._tableContainer.getContainer().classList.add(hideTenantsClassName);
+			DOM.addClass(this._tableContainer, hideTenantsClassName);
 		}
 	}

@@ -589,9 +576,8 @@ export class ConnectionWidget {
 			if (this._authTypeSelectBox) {
 				this.onAuthTypeSelected(this._authTypeSelectBox.value);
 			} else {
-				let tableContainerElement = this._tableContainer.getContainer();
-				tableContainerElement.classList.remove('hide-username-password');
-				tableContainerElement.classList.add('hide-azure-accounts');
+				DOM.removeClass(this._tableContainer, 'hide-username-password');
+				DOM.addClass(this._tableContainer, 'hide-azure-accounts');
 			}

 			if (this.authType === AuthenticationType.AzureMFA) {
--- a/src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts
+++ b/src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts
@@ -19,7 +19,6 @@ import { FileBrowserTreeView } from 'sql/workbench/services/fileBrowser/browser/
 import { FileBrowserViewModel } from 'sql/workbench/services/fileBrowser/common/fileBrowserViewModel';

 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
-import { Builder } from 'sql/base/browser/builder';
 import { MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
 import { Event, Emitter } from 'vs/base/common/event';
 import { localize } from 'vs/nls';
@@ -36,7 +35,7 @@ import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/la

 export class FileBrowserDialog extends Modal {
 	private _viewModel: FileBrowserViewModel;
-	private _bodyBuilder: Builder;
+	private _body: HTMLElement;
 	private _filePathInputBox: InputBox;
 	private _fileFilterSelectBox: SelectBox;
 	private _okButton: Button;
@@ -44,7 +43,7 @@ export class FileBrowserDialog extends Modal {
 	private _onOk = new Emitter<string>();
 	public onOk: Event<string> = this._onOk.event;

-	private _treeContainer: Builder;
+	private _treeContainer: HTMLElement;
 	private _fileBrowserTreeView: FileBrowserTreeView;
 	private _selectedFilePath: string;
 	private _isFolderSelected: boolean;
@@ -68,9 +67,7 @@ export class FileBrowserDialog extends Modal {
 	}

 	protected renderBody(container: HTMLElement) {
-		new Builder(container).div({ 'class': 'file-browser-dialog' }, (bodyBuilder) => {
-			this._bodyBuilder = bodyBuilder;
-		});
+		this._body = DOM.append(container, DOM.$('.file-browser-dialog'));
 	}

 	public render() {
@@ -86,24 +83,19 @@ export class FileBrowserDialog extends Modal {
 			this._register(attachButtonStyler(this.backButton, this._themeService, { buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND }));
 		}

-		this._bodyBuilder.div({ class: 'tree-view' }, (treeContainer) => {
-			this._treeContainer = treeContainer;
+		this._treeContainer = DOM.append(this._body, DOM.$('.tree-view'));
+
+		let tableContainer: HTMLElement = DOM.append(DOM.append(this._body, DOM.$('.option-section')), DOM.$('table.file-table-content'));
+		let pathLabel = localize('filebrowser.filepath', 'Selected path');
+		let pathBuilder = DialogHelper.appendRow(tableContainer, pathLabel, 'file-input-label', 'file-input-box');
+		this._filePathInputBox = new InputBox(pathBuilder, this._contextViewService, {
+			ariaLabel: pathLabel
 		});

-		this._bodyBuilder.div({ class: 'option-section' }, (tableWrapper) => {
-			tableWrapper.element('table', { class: 'file-table-content' }, (tableContainer) => {
-				let pathLabel = localize('filebrowser.filepath', 'Selected path');
-				let pathBuilder = DialogHelper.appendRow(tableContainer, pathLabel, 'file-input-label', 'file-input-box');
-				this._filePathInputBox = new InputBox(pathBuilder.getHTMLElement(), this._contextViewService, {
-					ariaLabel: pathLabel
-				});
-
-				this._fileFilterSelectBox = new SelectBox(['*'], '*', this._contextViewService);
-				let filterLabel = localize('fileFilter', 'Files of type');
-				let filterBuilder = DialogHelper.appendRow(tableContainer, filterLabel, 'file-input-label', 'file-input-box');
-				DialogHelper.appendInputSelectBox(filterBuilder, this._fileFilterSelectBox);
-			});
-		});
+		this._fileFilterSelectBox = new SelectBox(['*'], '*', this._contextViewService);
+		let filterLabel = localize('fileFilter', 'Files of type');
+		let filterBuilder = DialogHelper.appendRow(tableContainer, filterLabel, 'file-input-label', 'file-input-box');
+		DialogHelper.appendInputSelectBox(filterBuilder, this._fileFilterSelectBox);

 		this._okButton = this.addFooterButton(localize('fileBrowser.ok', 'OK'), () => this.ok());
 		this._okButton.enabled = false;
@@ -209,9 +201,9 @@ export class FileBrowserDialog extends Modal {
 	}

 	private updateFileTree(rootNode: FileNode, selectedNode: FileNode, expandedNodes: FileNode[]): void {
-		this._fileBrowserTreeView.renderBody(this._treeContainer.getHTMLElement(), rootNode, selectedNode, expandedNodes);
+		this._fileBrowserTreeView.renderBody(this._treeContainer, rootNode, selectedNode, expandedNodes);
 		this._fileBrowserTreeView.setVisible(true);
-		this._fileBrowserTreeView.layout(DOM.getTotalHeight(this._treeContainer.getHTMLElement()));
+		this._fileBrowserTreeView.layout(DOM.getTotalHeight(this._treeContainer));
 	}

 	private onFilterSelectChanged(filterIndex) {
@@ -242,7 +234,7 @@ export class FileBrowserDialog extends Modal {
 	// Update theming that is specific to file browser
 	private updateTheme(): void {
 		if (this._treeContainer) {
-			this._treeContainer.style('background-color', this.headerAndFooterBackground);
+			this._treeContainer.style.backgroundColor = this.headerAndFooterBackground;
 		}
 	}
 }