Merge VS Code 1.23.1 (#1520)

src/sql/base/browser/ui/checkbox/checkbox.ts

@@ -3,7 +3,7 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import { Widget } from 'vs/base/browser/ui/widget';
 

src/sql/base/browser/ui/dropdownList/dropdownList.ts

@@ -15,6 +15,7 @@ import { EventType as GestureEventType } from 'vs/base/browser/touch';
 import { List } from 'vs/base/browser/ui/list/listWidget';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
+import { Builder } from 'vs/base/browser/builder';
 
 import { Button } from 'sql/base/browser/ui/button/button';
 import { attachButtonStyler } from 'sql/common/theme/styler';
@@ -58,9 +59,9 @@ export class DropdownList extends Dropdown {
 			attachButtonStyler(button, this._themeService);
 		}
 
-		DOM.append(this.element.getHTMLElement(), DOM.$('div.dropdown-icon'));
+		DOM.append(this.element, DOM.$('div.dropdown-icon'));
 
-		this.toDispose.push(this.element.on([DOM.EventType.CLICK, DOM.EventType.MOUSE_DOWN, GestureEventType.Tap], (e: Event) => {
+		this.toDispose.push(new Builder(this.element).on([DOM.EventType.CLICK, DOM.EventType.MOUSE_DOWN, GestureEventType.Tap], (e: Event) => {
 			DOM.EventHelper.stop(e, true); // prevent default click behaviour to trigger
 		}).on([DOM.EventType.MOUSE_DOWN, GestureEventType.Tap], (e: Event) => {
 			// We want to show the context menu on dropdown so that as a user you can press and hold the
@@ -82,11 +83,11 @@ export class DropdownList extends Dropdown {
 
 		this.toDispose.push(this._list.onSelectionChange(() => {
 			// focus on the dropdown label then hide the dropdown list
-			this.element.getHTMLElement().focus();
+			this.element.focus();
 			this.hide();
 		}));
 
-		this.element.getHTMLElement().setAttribute('tabindex', '0');
+		this.element.setAttribute('tabindex', '0');
 	}
 
 	/**
@@ -94,7 +95,7 @@ export class DropdownList extends Dropdown {
 	 */
 	protected renderContents(container: HTMLElement): IDisposable {
 		let div = DOM.append(container, this._contentContainer);
-		div.style.width = DOM.getTotalWidth(this.element.getHTMLElement()) + 'px';
+		div.style.width = DOM.getTotalWidth(this.element) + 'px';
 		return null;
 	}
 
@@ -103,22 +104,22 @@ export class DropdownList extends Dropdown {
 	 */
 	public renderLabel(): void {
 		if (this._options.labelRenderer) {
-			this._options.labelRenderer(this.label.getHTMLElement());
+			this._options.labelRenderer(this.label);
 		}
 	}
 
 	protected onEvent(e: Event, activeElement: HTMLElement): void {
 		// If there is an event outside dropdown label and dropdown list, hide the dropdown list
-		if (!DOM.isAncestor(<HTMLElement>e.target, this.element.getHTMLElement()) && !DOM.isAncestor(<HTMLElement>e.target, this._contentContainer)) {
+		if (!DOM.isAncestor(<HTMLElement>e.target, this.element) && !DOM.isAncestor(<HTMLElement>e.target, this._contentContainer)) {
 			// focus on the dropdown label then hide the dropdown list
-			this.element.getHTMLElement().focus();
+			this.element.focus();
 			this.hide();
 			// If there is an keyboard event inside the list and key code is escape, hide the dropdown list
 		} else if (DOM.isAncestor(<HTMLElement>e.target, this._list.getHTMLElement()) && e instanceof KeyboardEvent) {
 			let event = new StandardKeyboardEvent(e);
 			if (event.equals(KeyCode.Escape)) {
 				// focus on the dropdown label then hide the dropdown list
-				this.element.getHTMLElement().focus();
+				this.element.focus();
 				this.hide();
 				e.stopPropagation();
 			}
@@ -138,7 +139,7 @@ export class DropdownList extends Dropdown {
 		const border = this.borderColor ? this.borderColor.toString() : null;
 		this.applyStylesOnElement(this._contentContainer, background, foreground, border);
 		if (this.label) {
-			this.applyStylesOnElement(this.element.getHTMLElement(), background, foreground, border);
+			this.applyStylesOnElement(this.element, background, foreground, border);
 		}
 	}
 

src/sql/base/browser/ui/dropdownList/media/dropdownList.css

@@ -3,7 +3,7 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.dropdown {
+.monaco-dropdown {
 	width: 100%;
 	/* TODO: Determine a more permanent fix; vs/dropdown is overwriting this selector in packaged builds */
 	display: flex !important;
@@ -11,15 +11,15 @@
 	cursor: pointer;
 }
 
-.dropdown > .dropdown-label {
+.monaco-dropdown > .dropdown-label {
 	width: 100%;
 }
 
-.dropdown > .dropdown-label:not(:empty) {
+.monaco-dropdown > .dropdown-label:not(:empty) {
 	padding: 0px;
 }
 
-.dropdown > .dropdown-icon {
+.monaco-dropdown > .dropdown-icon {
 	flex: 0 0 15px;
 	height: 10px;
 	width: 10px;
@@ -28,7 +28,7 @@
 	padding-right: 10px;
 }
 
-.vs-dark .dropdown > .dropdown-icon,
-.hc-black .dropdown > .dropdown-icon {
+.vs-dark .monaco-dropdown > .dropdown-icon,
+.hc-black .monaco-dropdown > .dropdown-icon {
 	content: url("dropdownarrow_inverse.svg");
 }

src/sql/base/browser/ui/editableDropdown/dropdown.ts

@@ -19,7 +19,7 @@ import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { Disposable } from 'vs/base/common/lifecycle';
 import { Color } from 'vs/base/common/color';
 import * as nls from 'vs/nls';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import { Tree } from 'vs/base/parts/tree/browser/treeImpl';
@@ -110,14 +110,14 @@ export class Dropdown extends Disposable {
 		super();
 		this._contextView = new ContextView(document.body);
 		this._options = mixin(opt, defaults, false) as IDropdownOptions;
-		this.$el = $('.dropdown').style('width', '100%').appendTo(container);
+		this.$el = $('.monaco-dropdown').style('width', '100%').appendTo(container);
 
 		this.$input = $('.dropdown-input').style('width', '100%').appendTo(this.$el);
 		this.$treeContainer = $('.dropdown-tree');
 
 		this._toggleAction = new ToggleDropdownAction(() => {
 			this._showList();
-			this._tree.DOMFocus();
+			this._tree.domFocus();
 			this._tree.focusFirst();
 		});
 
@@ -168,7 +168,7 @@ export class Dropdown extends Disposable {
 					if (!this.$treeContainer.getHTMLElement().parentElement) {
 						this._showList();
 					}
-					this._tree.DOMFocus();
+					this._tree.domFocus();
 					this._tree.focusFirst();
 					e.stopPropagation();
 					e.preventDefault();
@@ -195,17 +195,7 @@ export class Dropdown extends Disposable {
 		this._input.onDidChange(e => {
 			if (this._dataSource.options) {
 				this._filter.filterString = e;
-				let filteredLength = this._dataSource.options.reduce((p, i) => {
-					if (this._filter.isVisible(undefined, i)) {
-						return p + 1;
-					} else {
-						return p;
-					}
-				}, 0);
-				let height = filteredLength * this._renderer.getHeight(undefined, undefined) > this._options.maxHeight ? this._options.maxHeight : filteredLength * this._renderer.getHeight(undefined, undefined);
-				this.$treeContainer.style('height', height + 'px').style('width', DOM.getContentWidth(this.$input.getHTMLElement()) - 2 + 'px');
-				this._tree.layout(parseInt(this.$treeContainer.style('height')));
-				this._tree.refresh();
+				this._layoutTree();
 			}
 		});
 
@@ -221,11 +211,12 @@ export class Dropdown extends Disposable {
 	private _showList(): void {
 		if (this._input.isEnabled) {
 			this._onFocus.fire();
+			this._filter.filterString = '';
 			this._contextView.show({
 				getAnchor: () => this.$input.getHTMLElement(),
 				render: container => {
 					this.$treeContainer.appendTo(container);
-					this._tree.layout(parseInt(this.$treeContainer.style('height')));
+					this._layoutTree();
 					return { dispose: () => { } };
 				},
 				onDOMEvent: (e, activeElement) => {
@@ -239,6 +230,20 @@ export class Dropdown extends Disposable {
 		}
 	}
 
+	private _layoutTree(): void {
+		let filteredLength = this._dataSource.options.reduce((p, i) => {
+			if (this._filter.isVisible(undefined, i)) {
+				return p + 1;
+			} else {
+				return p;
+			}
+		}, 0);
+		let height = filteredLength * this._renderer.getHeight(undefined, undefined) > this._options.maxHeight ? this._options.maxHeight : filteredLength * this._renderer.getHeight(undefined, undefined);
+		this.$treeContainer.style('height', height + 'px').style('width', DOM.getContentWidth(this.$input.getHTMLElement()) - 2 + 'px');
+		this._tree.layout(parseInt(this.$treeContainer.style('height')));
+		this._tree.refresh();
+	}
+
 	public set values(vals: string[]) {
 		if (vals) {
 			this._filter.filterString = '';

src/sql/base/browser/ui/editableDropdown/dropdownTree.ts

@@ -9,7 +9,7 @@ import { Promise, TPromise } from 'vs/base/common/winjs.base';
 import { generateUuid } from 'vs/base/common/uuid';
 import * as DOM from 'vs/base/browser/dom';
 import { $ } from 'vs/base/browser/builder';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 
 export interface Template {

src/sql/base/browser/ui/editableDropdown/media/dropdownList.css

@@ -12,13 +12,13 @@
 	background-image: url("dropdownarrow_inverse.svg");
 }
 
-.dropdown .monaco-action-bar .action-label.icon.dropdown-arrow {
+.monaco-dropdown .monaco-action-bar .action-label.icon.dropdown-arrow {
 	padding: 0;
 	background-size: 10px;
 	background-position: 50%;
 }
 
-.dropdown .monaco-action-bar .action-item {
+.monaco-dropdown .monaco-action-bar .action-item {
 	margin: 0;
 }
 
@@ -38,7 +38,7 @@
 	overflow: hidden;
 }
 
-.connection-input .dropdown .monaco-action-bar .action-label.icon.dropdown-arrow {
+.connection-input .monaco-dropdown .monaco-action-bar .action-label.icon.dropdown-arrow {
 	background-position: 50%;
 	background-size: cover;
 }

src/sql/base/browser/ui/inputBox/inputBox.ts

@@ -7,7 +7,7 @@
 import { InputBox as vsInputBox, IInputOptions, IInputBoxStyles as vsIInputBoxStyles } from 'vs/base/browser/ui/inputbox/inputBox';
 import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
 import { Color } from 'vs/base/common/color';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 
 export interface OnLoseFocusParams {
 	value: string;

src/sql/base/browser/ui/listBox/listBox.ts

@@ -144,13 +144,11 @@ export class ListBox extends SelectBox {
 
 		for (let i = 0; i < indexes.length; i++) {
 			this.selectElement.remove(indexes[i]);
-			this.options.splice(indexes[i], 1);
 		}
 	}
 
 	public add(option: string): void {
 		this.selectElement.add(this.createOption(option));
-		this.options.push(option);
 	}
 
 	// Allow copy to clipboard

src/sql/base/browser/ui/modal/media/modal.css

@@ -119,7 +119,8 @@
 	color:  #3C3C3C;
 }
 
-.modal .select-box {
+.modal .select-box,
+.modal .monaco-select-box {
 	width: 100%;
 	height: 25px;
 	color: #6C6C6C;

src/sql/base/browser/ui/modal/modal.ts

@@ -11,7 +11,7 @@ import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
 import { mixin } from 'vs/base/common/objects';
 import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
-import { Builder, $, withElementById } from 'vs/base/browser/builder';
+import { Builder, $ } from 'vs/base/browser/builder';
 import * as DOM from 'vs/base/browser/dom';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { generateUuid } from 'vs/base/common/uuid';
@@ -285,7 +285,7 @@ export abstract class Modal extends Disposable implements IThemable {
 	 */
 	protected show() {
 		this._modalShowingContext.get().push(this._staticKey);
-		this._builder.appendTo(withElementById(this._partService.getWorkbenchElementId()).getHTMLElement().parentElement);
+		this._builder.appendTo(document.getElementById(this._partService.getWorkbenchElementId()).parentElement);
 
 		this.setFocusableElements();
 

src/sql/base/browser/ui/modal/optionsDialog.ts

@@ -16,7 +16,7 @@ import { attachButtonStyler, attachModalDialogStyler } from 'sql/common/theme/st
 
 import * as sqlops from 'sqlops';
 import { IPartService } from 'vs/workbench/services/part/common/partService';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';

src/sql/base/browser/ui/modal/optionsDialogHelper.ts

@@ -25,7 +25,7 @@ export interface IOptionElement {
 export function createOptionElement(option: sqlops.ServiceOption, rowContainer: Builder, options: { [name: string]: any },
 	optionsMap: { [optionName: string]: IOptionElement }, contextViewService: IContextViewService, onFocus: (name) => void): void {
 	let possibleInputs: string[] = [];
-	let optionValue = this.getOptionValueAndCategoryValues(option, options, possibleInputs);
+	let optionValue = getOptionValueAndCategoryValues(option, options, possibleInputs);
 	let optionWidget: any;
 	let inputElement: HTMLElement;
 	let missingErrorMessage = localize('optionsDialog.missingRequireField', ' is required.');
@@ -47,11 +47,11 @@ export function createOptionElement(option: sqlops.ServiceOption, rowContainer:
 			ariaLabel: option.displayName
 		});
 		optionWidget.value = optionValue;
-		inputElement = this.findElement(rowContainer, 'input');
+		inputElement = findElement(rowContainer, 'input');
 	} else if (option.valueType === ServiceOptionType.category || option.valueType === ServiceOptionType.boolean) {
 		optionWidget = new SelectBox(possibleInputs, optionValue.toString(), contextViewService);
 		DialogHelper.appendInputSelectBox(rowContainer, optionWidget);
-		inputElement = this.findElement(rowContainer, 'select-box');
+		inputElement = findElement(rowContainer, 'monaco-select-box');
 	} else if (option.valueType === ServiceOptionType.string || option.valueType === ServiceOptionType.password) {
 		optionWidget = new InputBox(rowContainer.getHTMLElement(), contextViewService, {
 			validationOptions: {
@@ -63,7 +63,7 @@ export function createOptionElement(option: sqlops.ServiceOption, rowContainer:
 		if (option.valueType === ServiceOptionType.password) {
 			optionWidget.inputElement.type = 'password';
 		}
-		inputElement = this.findElement(rowContainer, 'input');
+		inputElement = findElement(rowContainer, 'input');
 	}
 	optionsMap[option.name] = { optionWidget: optionWidget, option: option, optionValue: optionValue };
 	inputElement.onfocus = () => onFocus(option.name);
@@ -74,10 +74,10 @@ export function getOptionValueAndCategoryValues(option: sqlops.ServiceOption, op
 	if (options[option.name]) {
 		// if the value type is boolean, the option value can be either boolean or string
 		if (option.valueType === ServiceOptionType.boolean) {
-			if (options[option.name] === true || options[option.name] === this.trueInputValue) {
-				optionValue = this.trueInputValue;
+			if (options[option.name] === true || options[option.name] === trueInputValue) {
+				optionValue = trueInputValue;
 			} else {
-				optionValue = this.falseInputValue;
+				optionValue = falseInputValue;
 			}
 		} else {
 			optionValue = options[option.name];
@@ -91,7 +91,7 @@ export function getOptionValueAndCategoryValues(option: sqlops.ServiceOption, op
 		}
 
 		if (option.valueType === ServiceOptionType.boolean) {
-			possibleInputs.push(this.trueInputValue, this.falseInputValue);
+			possibleInputs.push(trueInputValue, falseInputValue);
 		} else {
 			option.categoryValues.map(c => possibleInputs.push(c.name));
 		}
@@ -136,7 +136,7 @@ export function updateOptions(options: { [optionName: string]: any }, optionsMap
 			}
 			if (optionElement.optionWidget.value) {
 				if (optionElement.option.valueType === ServiceOptionType.boolean) {
-					options[optionName] = (optionElement.optionWidget.value === this.trueInputValue) ? true : false;
+					options[optionName] = (optionElement.optionWidget.value === trueInputValue) ? true : false;
 				} else {
 					options[optionName] = optionElement.optionWidget.value;
 				}

src/sql/base/browser/ui/modal/webViewDialog.ts

@@ -13,15 +13,15 @@ import { attachButtonStyler, attachModalDialogStyler } from 'sql/common/theme/st
 import { Builder } from 'vs/base/browser/builder';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { IPartService, Parts } from 'vs/workbench/services/part/common/partService';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
 import { localize } from 'vs/nls';
-import { Webview } from 'vs/workbench/parts/html/browser/webview';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IEnvironmentService } from 'vs/platform/environment/common/environment';
 import { IDisposable, toDisposable } from 'vs/base/common/lifecycle';
+import { WebviewElement } from 'vs/workbench/parts/webview/electron-browser/webviewElement';
 
 export class WebViewDialog extends Modal {
 
@@ -29,7 +29,7 @@ export class WebViewDialog extends Modal {
 	private _okButton: Button;
 	private _okLabel: string;
 	private _closeLabel: string;
-	private _webview: Webview;
+	private _webview: WebviewElement;
 	private _html: string;
 	private _headerTitle: string;
 
@@ -89,8 +89,7 @@ export class WebViewDialog extends Modal {
 	protected renderBody(container: HTMLElement) {
 		new Builder(container).div({ 'class': 'webview-dialog' }, (bodyBuilder) => {
 			this._body = bodyBuilder.getHTMLElement();
-			this._webview = new Webview(
-				this._body,
+			this._webview = new WebviewElement(
 				this._webViewPartService.getContainer(Parts.EDITOR_PART),
 				this._themeService,
 				this._environmentService,
@@ -102,6 +101,7 @@ export class WebViewDialog extends Modal {
 					enableWrappedPostMessage: true
 				}
 			);
+			this._webview.mountTo(this._body);
 
 			this._webview.style(this._themeService.getTheme());
 

src/sql/base/browser/ui/panel/panel.ts

@@ -5,8 +5,9 @@
 
 import { IThemable } from 'vs/platform/theme/common/styler';
 import * as objects from 'sql/base/common/objects';
-import Event, { Emitter } from 'vs/base/common/event';
-import { Dimension, $, Builder } from 'vs/base/browser/builder';
+import { Event, Emitter } from 'vs/base/common/event';
+import { Dimension } from 'vs/base/browser/dom';
+import { $, Builder } from 'vs/base/browser/builder';
 import { EventType } from 'vs/base/browser/dom';
 import { IAction } from 'vs/base/common/actions';
 import { IActionOptions, ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
@@ -62,7 +63,7 @@ export class TabbedPanel extends Disposable implements IThemable {
 		this.$tabList.style('height', this.headersize + 'px');
 		this.$header.append(this.$tabList);
 		let actionbarcontainer = $('.title-actions');
-		this._actionbar = new ActionBar(actionbarcontainer);
+		this._actionbar = new ActionBar(actionbarcontainer.getHTMLElement());
 		this.$header.append(actionbarcontainer);
 		this.$parent.append(this.$header);
 		this.$body = $('tabBody');

src/sql/base/browser/ui/radioButton/radioButton.ts

@@ -8,7 +8,7 @@ import * as DOM from 'vs/base/browser/dom';
 import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
 import { Color } from 'vs/base/common/color';
 import { InputBox } from 'vs/base/browser/ui/inputbox/inputBox';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { Widget } from 'vs/base/browser/ui/widget';
 
 export interface IRadioButtonOptions {

src/sql/base/browser/ui/splitview/splitview.ts

@@ -14,7 +14,7 @@ import numbers = require('vs/base/common/numbers');
 import sash = require('vs/base/browser/ui/sash/sash');
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { Color } from 'vs/base/common/color';
 
 export enum Orientation {

src/sql/base/browser/ui/table/table.ts

@@ -12,7 +12,6 @@ import * as DOM from 'vs/base/browser/dom';
 import { Color } from 'vs/base/common/color';
 import { mixin } from 'vs/base/common/objects';
 import { IDisposable } from 'vs/base/common/lifecycle';
-import { Dimension } from 'vs/base/browser/builder';
 import { Orientation } from 'vs/base/browser/ui/splitview/splitview';
 import { Widget } from 'vs/base/browser/ui/widget';
 
@@ -136,7 +135,7 @@ export class Table<T extends Slick.SlickData> extends Widget implements IThemabl
 	onSelectedRowsChanged(fn: any): IDisposable {
 		this._grid.onSelectedRowsChanged.subscribe(fn);
 		return {
-			dispose() {
+			dispose: () => {
 				if (this._grid && this._grid.onSelectedRowsChanged) {
 					this._grid.onSelectedRowsChanged.unsubscribe(fn);
 				}
@@ -149,7 +148,7 @@ export class Table<T extends Slick.SlickData> extends Widget implements IThemabl
 	onContextMenu(fn: any): IDisposable {
 		this._grid.onContextMenu.subscribe(fn);
 		return {
-			dispose() {
+			dispose: () => {
 				this._grid.onContextMenu.unsubscribe(fn);
 			}
 		};
@@ -186,10 +185,10 @@ export class Table<T extends Slick.SlickData> extends Widget implements IThemabl
 		this._grid.resizeCanvas();
 	}
 
-	layout(dimension: Dimension): void;
+	layout(dimension: DOM.Dimension): void;
 	layout(size: number, orientation: Orientation): void;
-	layout(sizing: number | Dimension, orientation?: Orientation): void {
-		if (sizing instanceof Dimension) {
+	layout(sizing: number | DOM.Dimension, orientation?: Orientation): void {
+		if (sizing instanceof DOM.Dimension) {
 			this._container.style.width = sizing.width + 'px';
 			this._container.style.height = sizing.height + 'px';
 			this._tableContainer.style.width = sizing.width + 'px';

src/sql/base/browser/ui/table/tableDataView.ts

@@ -5,7 +5,7 @@
 import { Observable } from 'rxjs/Observable';
 import { Observer } from 'rxjs/Observer';
 
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { TPromise } from 'vs/base/common/winjs.base';
 import * as types from 'vs/base/common/types';
 

src/sql/base/browser/ui/views/browser/views.ts

@@ -280,7 +280,7 @@ export abstract class CollapsibleView extends AbstractCollapsibleView implements
 		}
 
 		// Pass Focus to Viewer
-		this.tree.DOMFocus();
+		this.tree.domFocus();
 	}
 }
 

src/sql/base/browser/ui/views/common/views.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { TPromise } from 'vs/base/common/winjs.base';
-import Event from 'vs/base/common/event';
+import { Event } from 'vs/base/common/event';
 import { Command } from 'vs/editor/common/modes';
 
 export type TreeViewItemHandleArg = {

src/sql/parts/accountManagement/accountDialog/accountDialog.ts

@@ -12,7 +12,7 @@ import { SplitView } from 'sql/base/browser/ui/splitview/splitview';
 import { List } from 'vs/base/browser/ui/list/listWidget';
 import { IListService, ListService } from 'vs/platform/list/browser/listService';
 import { IPartService } from 'vs/workbench/services/part/common/partService';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { localize } from 'vs/nls';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { attachListStyler } from 'vs/platform/theme/common/styler';

src/sql/parts/accountManagement/accountDialog/accountViewModel.ts

@@ -6,7 +6,7 @@
 'use strict';
 
 import * as sqlops from 'sqlops';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { IAccountManagementService } from 'sql/services/accountManagement/interfaces';
 import { AccountProviderAddedEventParams, UpdateAccountListEventParams } from 'sql/services/accountManagement/eventTypes';
 

src/sql/parts/accountManagement/accountPicker/accountPicker.ts

@@ -7,7 +7,7 @@
 import 'vs/css!./media/accountPicker';
 import { Builder } from 'vs/base/browser/builder';
 import * as DOM from 'vs/base/browser/dom';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { List } from 'vs/base/browser/ui/list/listWidget';
 import { IDropdownOptions } from 'vs/base/browser/ui/dropdown/dropdown';
 import { IListEvent } from 'vs/base/browser/ui/list/list';

src/sql/parts/accountManagement/accountPicker/accountPickerService.ts

@@ -5,7 +5,7 @@
 
 'use strict';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import * as sqlops from 'sqlops';
 
 import { IAccountPickerService } from 'sql/parts/accountManagement/common/interfaces';

src/sql/parts/accountManagement/accountPicker/accountPickerViewModel.ts

@@ -5,7 +5,7 @@
 
 'use strict';
 import * as sqlops from 'sqlops';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 
 import { IAccountManagementService } from 'sql/services/accountManagement/interfaces';
 import { UpdateAccountListEventParams } from 'sql/services/accountManagement/eventTypes';

src/sql/parts/accountManagement/autoOAuthDialog/autoOAuthDialog.ts

@@ -9,7 +9,7 @@ import { Builder, $ } from 'vs/base/browser/builder';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { attachInputBoxStyler } from 'vs/platform/theme/common/styler';
 import { IPartService } from 'vs/workbench/services/part/common/partService';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { localize } from 'vs/nls';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';

src/sql/parts/accountManagement/common/accountActions.ts

@@ -6,7 +6,7 @@
 'use strict';
 
 import * as sqlops from 'sqlops';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { localize } from 'vs/nls';
 import { TPromise } from 'vs/base/common/winjs.base';
 import { Action } from 'vs/base/common/actions';
@@ -14,7 +14,7 @@ import { Action } from 'vs/base/common/actions';
 import { error } from 'sql/base/common/log';
 import { IAccountManagementService } from 'sql/services/accountManagement/interfaces';
 import { IErrorMessageService } from 'sql/parts/connection/common/connectionManagement';
-import { IConfirmationService, IConfirmation } from 'vs/platform/dialogs/common/dialogs';
+import { IDialogService, IConfirmation } from 'vs/platform/dialogs/common/dialogs';
 import { INotificationService } from 'vs/platform/notification/common/notification';
 import Severity from 'vs/base/common/severity';
 
@@ -81,7 +81,7 @@ export class RemoveAccountAction extends Action {
 
 	constructor(
 		private _account: sqlops.Account,
-		@IConfirmationService private _confirmationService: IConfirmationService,
+		@IDialogService private _dialogService: IDialogService,
 		@INotificationService private _notificationService: INotificationService,
 		@IErrorMessageService private _errorMessageService: IErrorMessageService,
 		@IAccountManagementService private _accountManagementService: IAccountManagementService
@@ -100,7 +100,7 @@ export class RemoveAccountAction extends Action {
 			type: 'question'
 		};
 
-		return this._confirmationService.confirm(confirm).then(result => {
+		return this._dialogService.confirm(confirm).then(result => {
 			if (!result) {
 				return TPromise.as(false);
 			} else {

src/sql/parts/accountManagement/common/interfaces.ts

@@ -6,7 +6,7 @@
 'use strict';
 
 import { createDecorator } from 'vs/platform/instantiation/common/instantiation';
-import Event from 'vs/base/common/event';
+import { Event } from 'vs/base/common/event';
 import * as sqlops from 'sqlops';
 
 import { IConnectionProfile } from 'sql/parts/connection/common/interfaces';

src/sql/parts/accountManagement/firewallRuleDialog/firewallRuleDialog.ts

@@ -9,7 +9,7 @@ import 'vs/css!./media/firewallRuleDialog';
 import { Builder, $ } from 'vs/base/browser/builder';
 import * as DOM from 'vs/base/browser/dom';
 import { IPartService } from 'vs/workbench/services/part/common/partService';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { localize } from 'vs/nls';
 import { buttonBackground } from 'vs/platform/theme/common/colorRegistry';

src/sql/parts/admin/security/createLoginEditor.ts

@@ -4,8 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 
 import 'vs/css!sql/parts/query/editor/media/queryEditor';
+import * as DOM from 'vs/base/browser/dom';
 import { TPromise } from 'vs/base/common/winjs.base';
-import { Dimension, Builder } from 'vs/base/browser/builder';
 import { EditorOptions } from 'vs/workbench/common/editor';
 import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
@@ -37,9 +37,9 @@ export class CreateLoginEditor extends BaseEditor {
 	}
 
 	/**
-	 * Called to create the editor in the parent builder.
+	 * Called to create the editor in the parent element.
 	 */
-	public createEditor(parent: Builder): void {
+	public createEditor(parent: HTMLElement): void {
 	}
 
 	/**
@@ -52,7 +52,7 @@ export class CreateLoginEditor extends BaseEditor {
 	 * Updates the internal variable keeping track of the editor's size, and re-calculates the sash position.
 	 * To be called when the container of this editor changes size.
 	 */
-	public layout(dimension: Dimension): void {
+	public layout(dimension: DOM.Dimension): void {
 	}
 
 	public setInput(input: CreateLoginInput, options: EditorOptions): TPromise<void> {
@@ -63,7 +63,7 @@ export class CreateLoginEditor extends BaseEditor {
 		if (!input.hasInitialized) {
 			this.bootstrapAngular(input);
 		}
-		this.revealElementWithTagName(input.uniqueSelector, this.getContainer().getHTMLElement());
+		this.revealElementWithTagName(input.uniqueSelector, this.getContainer());
 
 		return super.setInput(input, options);
 	}
@@ -100,7 +100,7 @@ export class CreateLoginEditor extends BaseEditor {
 		};
 		let uniqueSelector = this.instantiationService.invokeFunction(bootstrapAngular,
 			CreateLoginModule,
-			this.getContainer().getHTMLElement(),
+			this.getContainer(),
 			CREATELOGIN_SELECTOR,
 			params);
 		input.setUniqueSelector(uniqueSelector);

src/sql/parts/connection/common/connectionActions.ts

@@ -6,13 +6,13 @@
 import nls = require('vs/nls');
 import { Action } from 'vs/base/common/actions';
 import { TPromise } from 'vs/base/common/winjs.base';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { IQuickOpenService } from 'vs/platform/quickOpen/common/quickOpen';
 import { IConnectionProfile } from 'sql/parts/connection/common/interfaces';
 import { IConnectionManagementService } from 'sql/parts/connection/common/connectionManagement';
 import { INotificationService, INotificationActions } from 'vs/platform/notification/common/notification';
 import Severity from 'vs/base/common/severity';
-import { IConfirmationService, IChoiceService, IConfirmation, IConfirmationResult, Choice } from 'vs/platform/dialogs/common/dialogs';
+import { IDialogService, IConfirmation, IConfirmationResult } from 'vs/platform/dialogs/common/dialogs';
 
 /**
  * Workbench action to clear the recent connnections list
@@ -34,7 +34,7 @@ export class ClearRecentConnectionsAction extends Action {
 		@IConnectionManagementService private _connectionManagementService: IConnectionManagementService,
 		@INotificationService private _notificationService: INotificationService,
 		@IQuickOpenService private _quickOpenService: IQuickOpenService,
-		@IConfirmationService private _confirmationService: IConfirmationService,
+		@IDialogService private _dialogService: IDialogService,
 	) {
 		super(id, label, ClearRecentConnectionsAction.ICON);
 		this.enabled = true;
@@ -47,7 +47,7 @@ export class ClearRecentConnectionsAction extends Action {
 	public run(): TPromise<void> {
 		if (this._useConfirmationMessage) {
 			return this.promptConfirmationMessage().then(result => {
-				if (result) {
+				if (result.confirmed) {
 					this._connectionManagementService.clearRecentConnectionsList();
 					this._onRecentConnectionsRemoved.fire();
 				}
@@ -84,7 +84,7 @@ export class ClearRecentConnectionsAction extends Action {
 		});
 	}
 
-	private promptConfirmationMessage(): TPromise<boolean> {
+	private promptConfirmationMessage(): TPromise<IConfirmationResult> {
 		let confirm: IConfirmation = {
 			message: nls.localize('clearRecentConnectionMessage', 'Are you sure you want to delete all the connections from the list?'),
 			primaryButton: nls.localize('connectionDialog.yes', 'Yes'),
@@ -92,8 +92,8 @@ export class ClearRecentConnectionsAction extends Action {
 			type: 'question'
 		};
 
-		return new TPromise<boolean>((resolve, reject) => {
-			this._confirmationService.confirm(confirm).then((confirmed) => {
+		return new TPromise<IConfirmationResult>((resolve, reject) => {
+			this._dialogService.confirm(confirm).then((confirmed) => {
 				resolve(confirmed);
 			});
 		});

src/sql/parts/connection/common/connectionManagement.ts

@@ -8,7 +8,7 @@
 import { IViewlet } from 'vs/workbench/common/viewlet';
 import { createDecorator } from 'vs/platform/instantiation/common/instantiation';
 import { TPromise } from 'vs/base/common/winjs.base';
-import Event from 'vs/base/common/event';
+import { Event } from 'vs/base/common/event';
 import { IAction } from 'vs/base/common/actions';
 import Severity from 'vs/base/common/severity';
 import * as sqlops from 'sqlops';

src/sql/parts/connection/common/connectionManagementService.ts

@@ -51,7 +51,7 @@ import { ConnectionProfileGroup, IConnectionProfileGroup } from './connectionPro
 import { ConfigurationEditingService } from 'vs/workbench/services/configuration/node/configurationEditingService';
 import { IWorkspaceConfigurationService } from 'vs/workbench/services/configuration/common/configuration';
 import { IQuickOpenService } from 'vs/platform/quickOpen/common/quickOpen';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { IEditorGroupService } from 'vs/workbench/services/group/common/groupService';
 import { EditorGroup } from 'vs/workbench/common/editor/editorStacksModel';
 import { EditorPart } from 'vs/workbench/browser/parts/editor/editorPart';

src/sql/parts/connection/connectionDialog/connectionDialogService.ts

@@ -22,7 +22,6 @@ import { entries } from 'sql/base/common/objects';
 import * as sqlops from 'sqlops';
 
 import { IPartService } from 'vs/workbench/services/part/common/partService';
-import { withElementById } from 'vs/base/browser/builder';
 import { TPromise } from 'vs/base/common/winjs.base';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import * as platform from 'vs/base/common/platform';
@@ -306,7 +305,7 @@ export class ConnectionDialogService implements IConnectionDialogService {
 
 	private doShowDialog(params: INewConnectionParams): TPromise<void> {
 		if (!this._connectionDialog) {
-			let container = withElementById(this._partService.getWorkbenchElementId()).getHTMLElement().parentElement;
+			let container = document.getElementById(this._partService.getWorkbenchElementId()).parentElement;
 			this._container = container;
 			this._connectionDialog = this._instantiationService.createInstance(ConnectionDialogWidget, this._providerTypes, this._providerNameToDisplayNameMap[this._model.providerName]);
 			this._connectionDialog.onCancel(() => {

src/sql/parts/connection/connectionDialog/connectionDialogWidget.ts

@@ -24,7 +24,7 @@ import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { IWorkbenchThemeService, IColorTheme } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { contrastBorder } from 'vs/platform/theme/common/colorRegistry';
 import { IPartService } from 'vs/workbench/services/part/common/partService';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { Builder, $ } from 'vs/base/browser/builder';
 import { ICancelableEvent } from 'vs/base/parts/tree/browser/treeDefaults';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
@@ -36,7 +36,6 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
 import * as styler from 'vs/platform/theme/common/styler';
 import { TPromise } from 'vs/base/common/winjs.base';
 import * as DOM from 'vs/base/browser/dom';
-import { DialogService } from 'vs/workbench/services/dialogs/electron-browser/dialogs';
 import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
 
 export interface OnShowUIResponse {
@@ -266,7 +265,7 @@ export class ConnectionDialogWidget extends Modal {
 					recentTitle.innerHtml(recentHistoryLabel);
 				});
 				container.div({ class: 'connection-history-actions' }, (actionsContainer) => {
-					this._actionbar = this._register(new ActionBar(actionsContainer, { animated: false }));
+					this._actionbar = this._register(new ActionBar(actionsContainer.getHTMLElement(), { animated: false }));
 					let clearAction = this._instantiationService.createInstance(ClearRecentConnectionsAction, ClearRecentConnectionsAction.ID, ClearRecentConnectionsAction.LABEL);
 					clearAction.useConfirmationMessage = true;
 					clearAction.onRecentConnectionsRemoved(() => this.open(false));

src/sql/parts/connection/connectionDialog/recentConnectionTreeController.ts

@@ -15,7 +15,7 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
 import { IConnectionManagementService } from 'sql/parts/connection/common/connectionManagement';
 import { ConnectionProfile } from 'sql/parts/connection/common/connectionProfile';
 import { IAction } from 'vs/base/common/actions';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import mouse = require('vs/base/browser/mouseEvent');
 import { IConnectionProfile } from 'sql/parts/connection/common/interfaces';
 
@@ -129,7 +129,7 @@ export class RecentConnectionTreeController extends DefaultController {
 			getActions: () => this.actionProvider.getActions(tree, element),
 			onHide: (wasCancelled?: boolean) => {
 				if (wasCancelled) {
-					tree.DOMFocus();
+					tree.domFocus();
 				}
 			},
 			getActionsContext: () => (actionContext)

src/sql/parts/dashboard/common/actions.ts

@@ -8,7 +8,7 @@ import { TPromise } from 'vs/base/common/winjs.base';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { IDisposable } from 'vs/base/common/lifecycle';
-import Event from 'vs/base/common/event';
+import { Event } from 'vs/base/common/event';
 
 import { IAngularEventingService, AngularEventType, IAngularEvent } from 'sql/services/angularEventing/angularEventingService';
 import { INewDashboardTabDialogService } from 'sql/parts/dashboard/newDashboardTabDialog/interface';

src/sql/parts/dashboard/common/dashboardPage.component.ts

@@ -35,7 +35,7 @@ import { IColorTheme } from 'vs/workbench/services/themes/common/workbenchThemeS
 import * as colors from 'vs/platform/theme/common/colorRegistry';
 import * as themeColors from 'vs/workbench/common/theme';
 import * as objects from 'vs/base/common/objects';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { Action } from 'vs/base/common/actions';
 import { ConfigurationTarget } from 'vs/platform/configuration/common/configuration';
 import Severity from 'vs/base/common/severity';

src/sql/parts/dashboard/common/interfaces.ts

@@ -5,7 +5,7 @@
 
 import { OnDestroy } from '@angular/core';
 
-import Event from 'vs/base/common/event';
+import { Event } from 'vs/base/common/event';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 
 import { AngularDisposable } from 'sql/base/common/lifecycle';

src/sql/parts/dashboard/containers/dashboardControlHostContainer.component.ts

@@ -6,7 +6,7 @@ import 'vs/css!./dashboardControlHostContainer';
 
 import { Component, forwardRef, Input, AfterContentInit, ViewChild, OnChanges } from '@angular/core';
 
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 
 import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
 import { TabConfig } from 'sql/parts/dashboard/common/dashboardWidget';

src/sql/parts/dashboard/containers/dashboardErrorContainer.component.ts

@@ -11,7 +11,7 @@ import { TabConfig } from 'sql/parts/dashboard/common/dashboardWidget';
 import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
 import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import * as nls from 'vs/nls';
 
 @Component({

src/sql/parts/dashboard/containers/dashboardGridContainer.component.ts

@@ -21,7 +21,7 @@ import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
 import { ConfigurationTarget } from 'vs/platform/configuration/common/configuration';
 import * as objects from 'vs/base/common/objects';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 
 export interface GridCellConfig {
 	id?: string;

src/sql/parts/dashboard/containers/dashboardModelViewContainer.component.ts

@@ -6,7 +6,7 @@ import 'vs/css!./dashboardWebviewContainer';
 
 import { Component, forwardRef, Input, AfterContentInit, ViewChild } from '@angular/core';
 
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 
 import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
 import { TabConfig } from 'sql/parts/dashboard/common/dashboardWidget';

src/sql/parts/dashboard/containers/dashboardNavSection.component.ts

@@ -18,7 +18,7 @@ import { GRID_CONTAINER } from 'sql/parts/dashboard/containers/dashboardGridCont
 import * as dashboardHelper from 'sql/parts/dashboard/common/dashboardHelper';
 
 import { Registry } from 'vs/platform/registry/common/platform';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import * as nls from 'vs/nls';
 
 @Component({

src/sql/parts/dashboard/containers/dashboardWebviewContainer.component.ts

@@ -6,7 +6,7 @@ import 'vs/css!./dashboardWebviewContainer';
 
 import { Component, forwardRef, Input, AfterContentInit, ViewChild } from '@angular/core';
 
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 
 import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
 import { TabConfig } from 'sql/parts/dashboard/common/dashboardWidget';

src/sql/parts/dashboard/containers/dashboardWidgetContainer.component.ts

@@ -19,7 +19,7 @@ import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
 import { ConfigurationTarget } from 'vs/platform/configuration/common/configuration';
 import * as objects from 'vs/base/common/objects';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 
 @Component({
 	selector: 'dashboard-widget-container',

src/sql/parts/dashboard/contents/controlHostContent.component.ts

@@ -6,7 +6,7 @@ import 'vs/css!./controlHostContent';
 
 import { Component, forwardRef, Input, OnInit, Inject, ChangeDetectorRef, ElementRef, ViewChild } from '@angular/core';
 
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { Parts } from 'vs/workbench/services/part/common/partService';
 import { IDisposable } from 'vs/base/common/lifecycle';
 

src/sql/parts/dashboard/contents/webviewContent.component.ts

@@ -6,8 +6,7 @@ import 'vs/css!./webviewContent';
 
 import { Component, forwardRef, Input, OnInit, Inject, ChangeDetectorRef, ElementRef } from '@angular/core';
 
-import Event, { Emitter } from 'vs/base/common/event';
-import { Webview } from 'vs/workbench/parts/html/browser/webview';
+import { Event, Emitter } from 'vs/base/common/event';
 import { Parts, IPartService } from 'vs/workbench/services/part/common/partService';
 import { IDisposable, Disposable } from 'vs/base/common/lifecycle';
 import { addDisposableListener, EventType } from 'vs/base/browser/dom';
@@ -15,6 +14,7 @@ import { memoize } from 'vs/base/common/decorators';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IEnvironmentService } from 'vs/platform/environment/common/environment';
+import { WebviewElement } from 'vs/workbench/parts/webview/electron-browser/webviewElement';
 
 import { TabConfig } from 'sql/parts/dashboard/common/dashboardWidget';
 import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
@@ -37,7 +37,7 @@ export class WebviewContent extends AngularDisposable implements OnInit, IDashbo
 	public readonly onMessage: Event<string> = this._onMessage.event;
 
 	private _onMessageDisposable: IDisposable;
-	private _webview: Webview;
+	private _webview: WebviewElement;
 	private _html: string;
 
 	constructor(
@@ -108,7 +108,7 @@ export class WebviewContent extends AngularDisposable implements OnInit, IDashbo
 			this._onMessageDisposable.dispose();
 		}
 
-		this._webview = new Webview(this._el.nativeElement,
+		this._webview = new WebviewElement(
 			this.partService.getContainer(Parts.EDITOR_PART),
 			this.themeService,
 			this.environmentService,
@@ -120,7 +120,7 @@ export class WebviewContent extends AngularDisposable implements OnInit, IDashbo
 				enableWrappedPostMessage: true
 			}
 		);
-
+		this._webview.mountTo(this._el.nativeElement);
 
 		this._onMessageDisposable = this._webview.onMessage(e => {
 			this._onMessage.fire(e);

src/sql/parts/dashboard/contents/widgetContent.component.ts

@@ -17,7 +17,7 @@ import { subscriptionToDisposable, AngularDisposable } from 'sql/base/common/lif
 import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
 import { ConfigurationTarget } from 'vs/platform/configuration/common/configuration';
 import * as objects from 'vs/base/common/objects';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { ScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
 import { ScrollbarVisibility } from 'vs/base/common/scrollable';
 import { getContentHeight, addDisposableListener, EventType } from 'vs/base/browser/dom';

src/sql/parts/dashboard/dashboardEditor.ts

@@ -5,7 +5,7 @@
 
 import * as DOM from 'vs/base/browser/dom';
 import { TPromise } from 'vs/base/common/winjs.base';
-import { Dimension, Builder, $ } from 'vs/base/browser/builder';
+import { $ } from 'vs/base/browser/builder';
 import { EditorOptions } from 'vs/workbench/common/editor';
 import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
@@ -46,9 +46,9 @@ export class DashboardEditor extends BaseEditor {
 	}
 
 	/**
-	 * Called to create the editor in the parent builder.
+	 * Called to create the editor in the parent element.
 	 */
-	public createEditor(parent: Builder): void {
+	public createEditor(parent: HTMLElement): void {
 	}
 
 	/**
@@ -70,7 +70,7 @@ export class DashboardEditor extends BaseEditor {
 	 * Updates the internal variable keeping track of the editor's size, and re-calculates the sash position.
 	 * To be called when the container of this editor changes size.
 	 */
-	public layout(dimension: Dimension): void {
+	public layout(dimension: DOM.Dimension): void {
 	}
 
 	public setInput(input: DashboardInput, options: EditorOptions): TPromise<void> {
@@ -78,7 +78,7 @@ export class DashboardEditor extends BaseEditor {
 			return TPromise.as(undefined);
 		}
 
-		const parentElement = this.getContainer().getHTMLElement();
+		const parentElement = this.getContainer();
 
 		super.setInput(input, options);
 

src/sql/parts/dashboard/newDashboardTabDialog/newDashboardTabDialog.ts

@@ -11,7 +11,7 @@ import * as DOM from 'vs/base/browser/dom';
 import { List } from 'vs/base/browser/ui/list/listWidget';
 import { IListService, ListService } from 'vs/platform/list/browser/listService';
 import { IPartService } from 'vs/workbench/services/part/common/partService';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { localize } from 'vs/nls';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { attachListStyler } from 'vs/platform/theme/common/styler';

src/sql/parts/dashboard/newDashboardTabDialog/newDashboardTabViewModel.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 'use strict';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 
 import { IDashboardTab } from 'sql/platform/dashboard/common/dashboardRegistry';
 

src/sql/parts/dashboard/services/dashboardServiceInterface.service.ts

@@ -40,7 +40,7 @@ import { IConfigurationService, ConfigurationTarget } from 'vs/platform/configur
 import { ConfigurationEditingService, IConfigurationValue } from 'vs/workbench/services/configuration/node/configurationEditingService';
 import { IWorkspaceContextService } from 'vs/platform/workspace/common/workspace';
 import { IStorageService } from 'vs/platform/storage/common/storage';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import Severity from 'vs/base/common/severity';
 import * as nls from 'vs/nls';
 import { IPartService } from 'vs/workbench/services/part/common/partService';

src/sql/parts/dashboard/widgets/insights/views/tableInsight.component.ts

@@ -4,8 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import { Component, Input, Inject, ChangeDetectorRef, forwardRef, ElementRef, OnInit } from '@angular/core';
 
-import { getContentHeight, getContentWidth } from 'vs/base/browser/dom';
-import { Dimension } from 'vs/base/browser/builder';
+import { getContentHeight, getContentWidth, Dimension } from 'vs/base/browser/dom';
 import { Disposable } from 'vs/base/common/lifecycle';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 

src/sql/parts/dashboard/widgets/webview/webviewWidget.component.ts

@@ -5,9 +5,8 @@
 
 import { Component, Inject, forwardRef, ChangeDetectorRef, OnInit, ViewChild, ElementRef } from '@angular/core';
 
-import { Webview } from 'vs/workbench/parts/html/browser/webview';
 import { Parts, IPartService } from 'vs/workbench/services/part/common/partService';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { IDisposable } from 'vs/base/common/lifecycle';
 import { memoize } from 'vs/base/common/decorators';
 
@@ -20,6 +19,7 @@ import * as sqlops from 'sqlops';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IEnvironmentService } from 'vs/platform/environment/common/environment';
+import { WebviewElement } from 'vs/workbench/parts/webview/electron-browser/webviewElement';
 
 interface IWebviewWidgetConfig {
 	id: string;
@@ -34,7 +34,7 @@ const selector = 'webview-widget';
 export class WebviewWidget extends DashboardWidget implements IDashboardWidget, OnInit, IDashboardWebview {
 
 	private _id: string;
-	private _webview: Webview;
+	private _webview: WebviewElement;
 	private _html: string;
 	private _onMessage = new Emitter<string>();
 	public readonly onMessage: Event<string> = this._onMessage.event;
@@ -105,8 +105,7 @@ export class WebviewWidget extends DashboardWidget implements IDashboardWidget,
 		if (this._onMessageDisposable) {
 			this._onMessageDisposable.dispose();
 		}
-		this._webview = new Webview(
-			this._el.nativeElement,
+		this._webview = new WebviewElement(
 			this.partService.getContainer(Parts.EDITOR_PART),
 			this.themeService,
 			this.environmentService,
@@ -118,6 +117,7 @@ export class WebviewWidget extends DashboardWidget implements IDashboardWidget,
 				enableWrappedPostMessage: true
 			}
 		);
+		this._webview.mountTo(this._el.nativeElement);
 		this._onMessageDisposable = this._webview.onMessage(e => {
 			this._onMessage.fire(e);
 		});

src/sql/parts/disasterRecovery/backup/common/backupService.ts

@@ -6,7 +6,7 @@
 'use strict';
 
 import { createDecorator } from 'vs/platform/instantiation/common/instantiation';
-import Event from 'vs/base/common/event';
+import { Event } from 'vs/base/common/event';
 import * as sqlops from 'sqlops';
 
 import { IDashboardComponentParams } from 'sql/services/bootstrap/bootstrapParams';

src/sql/parts/disasterRecovery/backup/common/backupServiceImp.ts

@@ -13,7 +13,7 @@ import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { IBackupService, TaskExecutionMode, IBackupUiService } from 'sql/parts/disasterRecovery/backup/common/backupService';
 import { BackupDialog } from 'sql/parts/disasterRecovery/backup/backupDialog';
 import { OptionsDialog } from 'sql/base/browser/ui/modal/optionsDialog';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { IDashboardComponentParams } from 'sql/services/bootstrap/bootstrapParams';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IPartService } from 'vs/workbench/services/part/common/partService';

src/sql/parts/disasterRecovery/backup/constants.ts

@@ -42,7 +42,7 @@ export const tripleDES = 'Triple DES';
 export const serverCertificate = "Server Certificate";
 export const asymmetricKey = "Asymmetric Key";
 
-export const fileFiltersSet: [ {label: string, filters: string[]} ] = [
+export const fileFiltersSet: {label: string, filters: string[]}[] = [
 	{ label: localize('backup.filterBackupFiles', "Backup Files"), filters: ['*.bak', '*.trn', '*.log'] },
 	{ label: localize('backup.allFiles', "All Files"), filters: ['*'] }
 ];

src/sql/parts/disasterRecovery/restore/restoreDialog.ts

@@ -7,7 +7,7 @@
 import 'vs/css!./media/restoreDialog';
 import { Builder, $ } from 'vs/base/browser/builder';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
 import { Widget } from 'vs/base/browser/ui/widget';
 import { MessageType, IInputOptions } from 'vs/base/browser/ui/inputbox/inputBox';

src/sql/parts/disasterRecovery/restore/restoreViewModel.ts

@@ -8,7 +8,7 @@ import * as sqlops from 'sqlops';
 import * as DialogHelper from 'sql/base/browser/ui/modal/dialogHelper';
 import * as types from 'vs/base/common/types';
 
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { ServiceOptionType } from 'sql/workbench/api/common/sqlExtHostTypes';
 
 export interface RestoreOptionsElement {

src/sql/parts/editData/common/editDataInput.ts

@@ -8,7 +8,7 @@ import { EditorInput, EditorModel, ConfirmResult, EncodingMode } from 'vs/workbe
 import { IConnectionManagementService, IConnectableInput, INewConnectionParams } from 'sql/parts/connection/common/connectionManagement';
 import { IQueryModelService } from 'sql/parts/query/execution/queryModel';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { EditSessionReadyParams, ISelectionData } from 'sqlops';
 import URI from 'vs/base/common/uri';
 import nls = require('vs/nls');

src/sql/parts/editData/editor/editDataEditor.ts

@@ -9,7 +9,7 @@ import { TPromise } from 'vs/base/common/winjs.base';
 import * as strings from 'vs/base/common/strings';
 import * as DOM from 'vs/base/browser/dom';
 import * as nls from 'vs/nls';
-import { Builder, Dimension, withElementById } from 'vs/base/browser/builder';
+import { Builder } from 'vs/base/browser/builder';
 
 import { EditorOptions, EditorInput } from 'vs/workbench/common/editor';
 import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor';
@@ -58,7 +58,7 @@ export class EditDataEditor extends BaseEditor {
 	private readonly _minEditorSize: number = 220;
 
 	private _sash: IFlexibleSash;
-	private _dimension: Dimension;
+	private _dimension: DOM.Dimension;
 
 	private _resultsEditor: EditDataResultsEditor;
 	private _resultsEditorContainer: HTMLElement;
@@ -142,10 +142,10 @@ export class EditDataEditor extends BaseEditor {
 	}
 
 	/**
-	 * Called to create the editor in the parent builder.
+	 * Called to create the editor in the parent element.
 	 */
-	public createEditor(parent: Builder): void {
-		const parentElement = parent.getHTMLElement();
+	public createEditor(parent: HTMLElement): void {
+		const parentElement = parent;
 		DOM.addClass(parentElement, 'side-by-side-editor');
 		this._createTaskbar(parentElement);
 	}
@@ -197,7 +197,7 @@ export class EditDataEditor extends BaseEditor {
 	 * Updates the internal variable keeping track of the editor's size, and re-calculates the sash position.
 	 * To be called when the container of this editor changes size.
 	 */
-	public layout(dimension: Dimension): void {
+	public layout(dimension: DOM.Dimension): void {
 		this._dimension = dimension;
 
 		if (this._sash) {
@@ -274,7 +274,7 @@ export class EditDataEditor extends BaseEditor {
 		}
 
 		let editor = descriptor.instantiate(this._instantiationService);
-		editor.create(new Builder(container));
+		editor.create(container);
 		editor.setVisible(this.isVisible(), this.position);
 		return TPromise.as(editor);
 	}
@@ -287,7 +287,7 @@ export class EditDataEditor extends BaseEditor {
 	private _createResultsEditorContainer() {
 		this._createSash();
 
-		const parentElement = this.getContainer().getHTMLElement();
+		const parentElement = this.getContainer();
 		let input = <EditDataInput>this.input;
 
 		if (!input.results.container) {
@@ -305,7 +305,7 @@ export class EditDataEditor extends BaseEditor {
 	 */
 	private _createSash(): void {
 		if (!this._sash) {
-			let parentElement: HTMLElement = this.getContainer().getHTMLElement();
+			let parentElement: HTMLElement = this.getContainer();
 
 			this._sash = this._register(new HorizontalFlexibleSash(parentElement, this._minEditorSize));
 			this._setSashDimension();
@@ -320,7 +320,7 @@ export class EditDataEditor extends BaseEditor {
 	 * Appends the HTML for the SQL editor. Creates new HTML every time.
 	 */
 	private _createSqlEditorContainer() {
-		const parentElement = this.getContainer().getHTMLElement();
+		const parentElement = this.getContainer();
 		this._sqlEditorContainer = DOM.append(parentElement, DOM.$('.details-editor-container'));
 		this._sqlEditorContainer.style.position = 'absolute';
 	}
@@ -382,7 +382,7 @@ export class EditDataEditor extends BaseEditor {
 			this._resultsEditor = null;
 		}
 
-		let thisEditorParent: HTMLElement = this.getContainer().getHTMLElement();
+		let thisEditorParent: HTMLElement = this.getContainer();
 
 		if (this._sqlEditorContainer) {
 			let sqlEditorParent: HTMLElement = this._sqlEditorContainer.parentElement;
@@ -420,7 +420,7 @@ export class EditDataEditor extends BaseEditor {
 
 	private _doLayoutHorizontal(): void {
 		let splitPointTop: number = this._sash.getSplitPoint();
-		let parent: ClientRect = this.getContainer().getHTMLElement().getBoundingClientRect();
+		let parent: ClientRect = this.getContainer().getBoundingClientRect();
 
 		let sqlEditorHeight: number;
 		let sqlEditorTop: number;
@@ -431,7 +431,7 @@ export class EditDataEditor extends BaseEditor {
 
 		this._resultsEditorContainer.hidden = false;
 
-		let titleBar = withElementById('workbench.parts.titlebar');
+		let titleBar = document.getElementById('workbench.parts.titlebar');
 		if (this.queryPaneEnabled()) {
 			this._sqlEditorContainer.hidden = false;
 
@@ -442,7 +442,7 @@ export class EditDataEditor extends BaseEditor {
 			resultsEditorHeight = parent.bottom - resultsEditorTop;
 
 			if (titleBar) {
-				sqlEditorHeight += DOM.getContentHeight(titleBar.getHTMLElement());
+				sqlEditorHeight += DOM.getContentHeight(titleBar);
 			}
 		} else {
 			this._sqlEditorContainer.hidden = true;
@@ -454,7 +454,7 @@ export class EditDataEditor extends BaseEditor {
 			resultsEditorHeight = parent.bottom - resultsEditorTop;
 
 			if (titleBar) {
-				resultsEditorHeight += DOM.getContentHeight(titleBar.getHTMLElement());
+				resultsEditorHeight += DOM.getContentHeight(titleBar);
 			}
 		}
 
@@ -466,8 +466,8 @@ export class EditDataEditor extends BaseEditor {
 		this._resultsEditorContainer.style.width = `${this._dimension.width}px`;
 		this._resultsEditorContainer.style.top = `${resultsEditorTop}px`;
 
-		this._sqlEditor.layout(new Dimension(this._dimension.width, sqlEditorHeight));
-		this._resultsEditor.layout(new Dimension(this._dimension.width, resultsEditorHeight));
+		this._sqlEditor.layout(new DOM.Dimension(this._dimension.width, sqlEditorHeight));
+		this._resultsEditor.layout(new DOM.Dimension(this._dimension.width, resultsEditorHeight));
 	}
 
 	private _doLayoutSql() {
@@ -492,7 +492,7 @@ export class EditDataEditor extends BaseEditor {
 			this._sqlEditorContainer.style.height = `${sqlEditorHeight}px`;
 			this._sqlEditorContainer.style.width = `${this._dimension.width}px`;
 
-			this._sqlEditor.layout(new Dimension(this._dimension.width, sqlEditorHeight));
+			this._sqlEditor.layout(new DOM.Dimension(this._dimension.width, sqlEditorHeight));
 		}
 	}
 

src/sql/parts/editData/editor/editDataResultsEditor.ts

@@ -3,8 +3,9 @@
 *  Licensed under the Source EULA. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
 
+import * as DOM from 'vs/base/browser/dom';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
-import { Dimension, Builder } from 'vs/base/browser/builder';
+import { Builder } from 'vs/base/browser/builder';
 import { EditorOptions } from 'vs/workbench/common/editor';
 import { TPromise } from 'vs/base/common/winjs.base';
 import { getZoomLevel } from 'vs/base/browser/browser';
@@ -13,7 +14,6 @@ import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor';
-import * as dom from 'vs/base/browser/dom';
 import * as types from 'vs/base/common/types';
 
 import { IQueryModelService } from 'sql/parts/query/execution/queryModel';
@@ -52,14 +52,14 @@ export class EditDataResultsEditor extends BaseEditor {
 		return this._input;
 	}
 
-	public createEditor(parent: Builder): void {
+	public createEditor(parent: HTMLElement): void {
 	}
 
 	public dispose(): void {
 		super.dispose();
 	}
 
-	public layout(dimension: Dimension): void {
+	public layout(dimension: DOM.Dimension): void {
 	}
 
 	public setInput(input: EditDataResultsInput, options: EditorOptions): TPromise<void> {
@@ -73,9 +73,9 @@ export class EditDataResultsEditor extends BaseEditor {
 
 	private _applySettings() {
 		if (this.input && this.input.container) {
-			Configuration.applyFontInfoSlow(this.getContainer().getHTMLElement(), this._rawOptions);
+			Configuration.applyFontInfoSlow(this.getContainer(), this._rawOptions);
 			if (!this.input.css) {
-				this.input.css = dom.createStyleSheet(this.input.container);
+				this.input.css = DOM.createStyleSheet(this.input.container);
 			}
 			let cssRuleText = '';
 			if (types.isNumber(this._rawOptions.cellPadding)) {

src/sql/parts/extensions/sqlExtensionsHelper.ts

@@ -5,7 +5,7 @@
 
 'use strict';
 
-import 'vs/css!vs/workbench/parts/extensions/browser/media/extensionEditor';
+import 'vs/css!vs/workbench/parts/extensions/electron-browser/media/extensionEditor';
 
 
 import { IExtensionManifest } from 'vs/platform/extensionManagement/common/extensionManagement';

src/sql/parts/fileBrowser/common/fileBrowserService.ts

@@ -12,7 +12,7 @@ import { FileNode } from 'sql/parts/fileBrowser/common/fileNode';
 import { IFileBrowserService } from 'sql/parts/fileBrowser/common/interfaces';
 import * as Constants from 'sql/common/constants';
 
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import Severity from 'vs/base/common/severity';
 import { localize } from 'vs/nls';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';

src/sql/parts/fileBrowser/common/interfaces.ts

@@ -8,7 +8,7 @@
 import * as sqlops from 'sqlops';
 import { FileBrowserTree } from 'sql/parts/fileBrowser/common/fileBrowserTree';
 import { FileNode } from 'sql/parts/fileBrowser/common/fileNode';
-import Event from 'vs/base/common/event';
+import { Event } from 'vs/base/common/event';
 import { createDecorator } from 'vs/platform/instantiation/common/instantiation';
 
 export const IFileBrowserDialogController = createDecorator<IFileBrowserDialogController>('fileBrowserDialogService');
@@ -19,7 +19,7 @@ export interface IFileBrowserDialogController {
 	 */
 	showDialog(ownerUri: string,
 		expandPath: string,
-		fileFilters: [{ label: string, filters: string[] }],
+		fileFilters: { label: string, filters: string[] }[],
 		fileValidationServiceType: string,
 		isWide: boolean,
 		handleOnOk: (path: string) => void): void;

src/sql/parts/fileBrowser/fileBrowserController.ts

@@ -31,7 +31,7 @@ export class FileBrowserController extends treedefaults.DefaultController {
 					event.preventDefault(); // we cannot preventDefault onMouseDown because this would break DND otherwise
 				}
 				event.stopPropagation();
-				tree.DOMFocus();
+				tree.domFocus();
 				tree.setSelection([element], payload);
 			}
 			return true;

src/sql/parts/fileBrowser/fileBrowserDialog.ts

@@ -22,7 +22,7 @@ import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { Builder } from 'vs/base/browser/builder';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import { localize } from 'vs/nls';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';

src/sql/parts/fileBrowser/fileBrowserRenderer.ts

@@ -11,6 +11,7 @@ import URI from 'vs/base/common/uri';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { FileLabel } from 'vs/workbench/browser/labels';
 import { IFileTemplateData } from 'vs/workbench/parts/files/electron-browser/views/explorerViewer';
+import { empty as EmptyDisposable } from 'vs/base/common/lifecycle';
 
 /**
  * Renders the tree items.
@@ -43,8 +44,9 @@ export class FileBrowserRenderer implements IRenderer {
 	 * Render template in a dom element based on template id
 	 */
 	public renderTemplate(tree: ITree, templateId: string, container: HTMLElement): IFileTemplateData {
+		const elementDisposable = EmptyDisposable;
 		const label = this.instantiationService.createInstance(FileLabel, container, void 0);
-		return { label, container };
+		return { elementDisposable, label, container };
 	}
 
 	/**

src/sql/parts/fileBrowser/fileBrowserTreeView.ts

@@ -45,7 +45,7 @@ export class FileBrowserTreeView {
 			this._toDispose.push(this._tree.onDidChangeSelection((event) => this.onSelected(event)));
 			this._toDispose.push(this._fileBrowserService.onExpandFolder(fileNode => this._tree.refresh(fileNode)));
 			this._toDispose.push(attachListStyler(this._tree, this._themeService));
-			this._tree.DOMFocus();
+			this._tree.domFocus();
 		}
 
 		if (rootNode) {
@@ -91,7 +91,7 @@ export class FileBrowserTreeView {
 		let targetsToExpand: any[];
 
 		// Focus
-		this._tree.DOMFocus();
+		this._tree.domFocus();
 
 		if (this._tree) {
 			let selection = this._tree.getSelection();

src/sql/parts/insights/common/insightsDialogModel.ts

@@ -7,7 +7,7 @@ import { IInsightsDialogModel, ListResource } from './interfaces';
 import { IInsightsConfigDetails, IInsightsLabel } from 'sql/parts/dashboard/widgets/insights/interfaces';
 import { Conditional } from 'sql/parts/dashboard/common/interfaces';
 
-import Event, { Emitter, debounceEvent } from 'vs/base/common/event';
+import { Event, Emitter, debounceEvent } from 'vs/base/common/event';
 
 export class InsightsDialogModel implements IInsightsDialogModel {
 	private _rows: string[][];

src/sql/parts/insights/common/interfaces.ts

@@ -2,7 +2,7 @@
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
-import Event from 'vs/base/common/event';
+import { Event } from 'vs/base/common/event';
 import { createDecorator } from 'vs/platform/instantiation/common/instantiation';
 
 import { IInsightsConfigDetails, IInsightsConfig } from 'sql/parts/dashboard/widgets/insights/interfaces';

src/sql/parts/jobManagement/views/jobHistoryTree.ts

@@ -25,7 +25,7 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
 import { generateUuid } from 'vs/base/common/uuid';
 import * as DOM from 'vs/base/browser/dom';
 import { OEAction } from 'sql/parts/objectExplorer/viewlet/objectExplorerActions';
-import { Builder, $, withElementById } from 'vs/base/browser/builder';
+import { $ } from 'vs/base/browser/builder';
 import { AgentJobHistoryInfo } from 'sqlops';
 import { Agent } from 'vs/base/node/request';
 import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent';

src/sql/parts/jobManagement/views/jobStepsViewTree.ts

@@ -24,7 +24,6 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
 import { generateUuid } from 'vs/base/common/uuid';
 import * as DOM from 'vs/base/browser/dom';
 import { OEAction } from 'sql/parts/objectExplorer/viewlet/objectExplorerActions';
-import { Builder, $, withElementById } from 'vs/base/browser/builder';
 import { AgentJobHistoryInfo } from 'sqlops';
 import { Agent } from 'vs/base/node/request';
 import { AgentJobUtilities } from 'sql/parts/jobManagement/common/agentJobUtilities';

src/sql/parts/modelComponents/button.component.ts

@@ -9,7 +9,7 @@ import {
 } from '@angular/core';
 
 import * as sqlops from 'sqlops';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 
 import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
 import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';

src/sql/parts/modelComponents/checkbox.component.ts

@@ -9,7 +9,7 @@ import {
 } from '@angular/core';
 
 import * as sqlops from 'sqlops';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 
 import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
 import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';

src/sql/parts/modelComponents/componentBase.ts

@@ -15,7 +15,7 @@ import { IComponent, IComponentDescriptor, IModelStore, IComponentEventArgs, Com
 import { FlexLayout, FlexItemLayout } from 'sqlops';
 import { ComponentHostDirective } from 'sql/parts/dashboard/common/componentHost.directive';
 import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { IDisposable, Disposable } from 'vs/base/common/lifecycle';
 import { ModelComponentWrapper } from 'sql/parts/modelComponents/modelComponentWrapper.component';
 

src/sql/parts/modelComponents/dropdown.component.ts

@@ -19,7 +19,7 @@ import { attachEditableDropdownStyler , attachSelectBoxStyler} from 'sql/common/
 
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { attachListStyler } from 'vs/platform/theme/common/styler';
 
 @Component({

src/sql/parts/modelComponents/inputbox.component.ts

@@ -18,7 +18,7 @@ import { IInputOptions, MessageType } from 'vs/base/browser/ui/inputbox/inputBox
 import { attachInputBoxStyler, attachListStyler } from 'vs/platform/theme/common/styler';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import * as nls from 'vs/nls';
 
 @Component({

src/sql/parts/modelComponents/interfaces.ts

@@ -5,7 +5,7 @@
 import { InjectionToken } from '@angular/core';
 
 import * as sqlops from 'sqlops';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { IDisposable } from 'vs/base/common/lifecycle';
 
 /**

src/sql/parts/modelComponents/modelEditor/modelViewEditor.ts

@@ -9,7 +9,6 @@ import { TPromise } from 'vs/base/common/winjs.base';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor';
-import { Dimension } from 'vs/workbench/services/part/common/partService';
 import { EditorOptions } from 'vs/workbench/common/editor';
 import * as DOM from 'vs/base/browser/dom';
 import { Position } from 'vs/platform/editor/common/editor';
@@ -31,10 +30,10 @@ export class ModelViewEditor extends BaseEditor {
 	}
 
 	/**
-	 * Called to create the editor in the parent builder.
+	 * Called to create the editor in the parent element.
 	 */
-	public createEditor(parent: Builder): void {
-		this._editorFrame = parent.getHTMLElement();
+	public createEditor(parent: HTMLElement): void {
+		this._editorFrame = parent;
 	}
 
 	/**
@@ -93,7 +92,7 @@ export class ModelViewEditor extends BaseEditor {
 	 * Updates the internal variable keeping track of the editor's size, and re-calculates the sash position.
 	 * To be called when the container of this editor changes size.
 	 */
-	public layout(dimension: Dimension): void {
+	public layout(dimension: DOM.Dimension): void {
 		if (this.input instanceof ModelViewInput) {
 			if (this.input.container && this.input.dialogPane) {
 				this.doUpdateContainer();

src/sql/parts/modelComponents/modelViewContent.component.ts

@@ -6,7 +6,7 @@
 
 import { Component, forwardRef, Input, OnInit, Inject, ChangeDetectorRef, ElementRef } from '@angular/core';
 
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { Parts } from 'vs/workbench/services/part/common/partService';
 import { IDisposable, Disposable } from 'vs/base/common/lifecycle';
 import { addDisposableListener, EventType } from 'vs/base/browser/dom';

src/sql/parts/modelComponents/radioButton.component.ts

@@ -10,7 +10,7 @@ import {
 } from '@angular/core';
 
 import * as sqlops from 'sqlops';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 
 import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
 import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';

src/sql/parts/modelComponents/table.component.ts

@@ -4,8 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import {
-	Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
-	ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList, AfterViewInit
+	Component, Input, Inject, ChangeDetectorRef, forwardRef, ViewChild, ElementRef, OnDestroy, AfterViewInit
 } from '@angular/core';
 
 import * as sqlops from 'sqlops';
@@ -18,10 +17,7 @@ import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
 import { attachTableStyler } from 'sql/common/theme/styler';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
-import Event, { Emitter } from 'vs/base/common/event';
-import { Dimension } from 'vs/base/browser/builder';
-import * as nls from 'vs/nls';
-import { getContentHeight, getContentWidth } from 'vs/base/browser/dom';
+import { getContentHeight, getContentWidth, Dimension } from 'vs/base/browser/dom';
 import { RowSelectionModel } from 'sql/base/browser/ui/table/plugins/rowSelectionModel.plugin';
 
 @Component({
@@ -40,9 +36,7 @@ export default class TableComponent extends ComponentBase implements IComponent,
 	@ViewChild('table', { read: ElementRef }) private _inputContainer: ElementRef;
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
-		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
-		@Inject(IContextViewService) private contextViewService: IContextViewService
-	) {
+		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService) {
 		super(changeRef);
 	}
 
@@ -140,7 +134,7 @@ export default class TableComponent extends ComponentBase implements IComponent,
 		this._changeRef.detectChanges();
 	}
 
-	public setLayout(layout: any): void {
+	public setLayout(): void {
 		// TODO allow configuring the look and feel
 		this.layout();
 	}

src/sql/parts/modelComponents/text.component.ts

@@ -10,7 +10,7 @@ import {
 } from '@angular/core';
 
 import * as sqlops from 'sqlops';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 
 import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
 import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';

src/sql/parts/modelComponents/viewBase.ts

@@ -16,7 +16,7 @@ import { IModelView } from 'sql/services/model/modelViewService';
 import { Extensions, IComponentRegistry } from 'sql/platform/dashboard/common/modelComponentRegistry';
 import { AngularDisposable } from 'sql/base/common/lifecycle';
 import { ModelStore } from 'sql/parts/modelComponents/modelStore';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 
 const componentRegistry = <IComponentRegistry>Registry.as(Extensions.ComponentContribution);
 

src/sql/parts/modelComponents/webview.component.ts

@@ -9,14 +9,14 @@ import {
 } from '@angular/core';
 
 import * as sqlops from 'sqlops';
-import Event, { Emitter } from 'vs/base/common/event';
-import { Webview } from 'vs/workbench/parts/html/browser/webview';
+import { Event, Emitter } from 'vs/base/common/event';
 import { addDisposableListener, EventType } from 'vs/base/browser/dom';
 import { Parts, IPartService } from 'vs/workbench/services/part/common/partService';
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
 import { IEnvironmentService } from 'vs/platform/environment/common/environment';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { WebviewElement } from 'vs/workbench/parts/webview/electron-browser/webviewElement';
 
 import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
 import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
@@ -29,7 +29,7 @@ export default class WebViewComponent extends ComponentBase implements IComponen
 	@Input() descriptor: IComponentDescriptor;
 	@Input() modelStore: IModelStore;
 
-	private _webview: Webview;
+	private _webview: WebviewElement;
 	private _onMessage = new Emitter<any>();
 	private _renderedHtml: string;
 
@@ -54,7 +54,7 @@ export default class WebViewComponent extends ComponentBase implements IComponen
 	}
 
 	private _createWebview(): void {
-		this._webview = this._register(new Webview(this._el.nativeElement,
+		this._webview = this._register(new WebviewElement(
 			this.partService.getContainer(Parts.EDITOR_PART),
 			this.themeService,
 			this.environmentService,
@@ -66,7 +66,7 @@ export default class WebViewComponent extends ComponentBase implements IComponen
 				enableWrappedPostMessage: true
 			}
 		));
-
+		this._webview.mountTo(this._el.nativeElement);
 
 		this._register(this._webview.onMessage(e => {
 			this._onEventEmitter.fire({

src/sql/parts/objectExplorer/common/objectExplorerService.ts

@@ -11,7 +11,7 @@ import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { createDecorator } from 'vs/platform/instantiation/common/instantiation';
 import { IConnectionManagementService } from 'sql/parts/connection/common/connectionManagement';
 import { IConnectionProfile } from 'sql/parts/connection/common/interfaces';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import * as sqlops from 'sqlops';
 import * as nls from 'vs/nls';
 import * as TelemetryKeys from 'sql/common/telemetryKeys';

src/sql/parts/objectExplorer/serverGroupDialog/serverGroupDialog.ts

@@ -14,7 +14,7 @@ import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { attachInputBoxStyler, attachCheckboxStyler } from 'vs/platform/theme/common/styler';
 import { IPartService } from 'vs/workbench/services/part/common/partService';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { localize } from 'vs/nls';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';

src/sql/parts/objectExplorer/viewlet/connectionViewlet.ts

@@ -6,13 +6,13 @@
 'use strict';
 
 import 'vs/css!./media/connectionViewlet';
+import * as DOM from 'vs/base/browser/dom';
 import { ThrottledDelayer } from 'vs/base/common/async';
 import { TPromise } from 'vs/base/common/winjs.base';
-import { Builder, Dimension } from 'vs/base/browser/builder';
+import { Builder } from 'vs/base/browser/builder';
 import { Viewlet } from 'vs/workbench/browser/viewlet';
 import { IViewletService } from 'vs/workbench/services/viewlet/browser/viewlet';
 import { IAction } from 'vs/base/common/actions';
-import { toggleClass } from 'vs/base/browser/dom';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { attachInputBoxStyler } from 'vs/platform/theme/common/styler';
@@ -81,11 +81,12 @@ export class ConnectionViewlet extends Viewlet implements IConnectionsViewlet {
 		});
 	}
 
-	public create(parent: Builder): TPromise<void> {
+	public create(parent: HTMLElement): TPromise<void> {
 		return new TPromise<void>((resolve) => {
 			super.create(parent);
-			this._root = parent.getHTMLElement();
-			parent.div({ class: 'server-explorer-viewlet' }, (viewletContainer) => {
+			this._root = parent;
+			let parentBuilder = new Builder(parent);
+			parentBuilder.div({ class: 'server-explorer-viewlet' }, (viewletContainer) => {
 				this._viewletContainer = viewletContainer;
 				viewletContainer.div({ class: 'search-box' }, (searchBoxContainer) => {
 					this._searchBoxContainer = searchBoxContainer;
@@ -147,10 +148,10 @@ export class ConnectionViewlet extends Viewlet implements IConnectionsViewlet {
 		super.focus();
 	}
 
-	public layout({ height, width }: Dimension): void {
+	public layout({ height, width }: DOM.Dimension): void {
 		this._searchBox.layout();
 		this._serverTreeView.layout(height - 36); // account for search box
-		toggleClass(this._root, 'narrow', width <= 350);
+		DOM.toggleClass(this._root, 'narrow', width <= 350);
 	}
 
 	public getOptimalWidth(): number {

src/sql/parts/objectExplorer/viewlet/serverTreeController.ts

@@ -103,7 +103,7 @@ export class ServerTreeController extends treedefaults.DefaultController {
 			getKeyBinding: (action) => this.keybindingService.lookupKeybinding(action.id),
 			onHide: (wasCancelled?: boolean) => {
 				if (wasCancelled) {
-					tree.DOMFocus();
+					tree.domFocus();
 				}
 			},
 			getActionsContext: () => (actionContext)

src/sql/parts/objectExplorer/viewlet/serverTreeView.ts

@@ -27,7 +27,7 @@ import { IConnectionProfile } from 'sql/parts/connection/common/interfaces';
 import { ICapabilitiesService } from 'sql/services/capabilities/capabilitiesService';
 import { Button } from 'sql/base/browser/ui/button/button';
 import { attachButtonStyler } from 'sql/common/theme/styler';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { TreeNode, TreeItemCollapsibleState } from 'sql/parts/objectExplorer/common/treeNode';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { SERVER_GROUP_CONFIG, SERVER_GROUP_AUTOEXPAND_CONFIG } from 'sql/parts/objectExplorer/serverGroupDialog/serverGroup.contribution';

src/sql/parts/objectExplorer/viewlet/treeUpdateUtils.ts

@@ -63,7 +63,7 @@ export class TreeUpdateUtils {
 		let targetsToExpand: any[];
 
 		// Focus
-		tree.DOMFocus();
+		tree.domFocus();
 
 		if (tree) {
 			let selection = tree.getSelection();

src/sql/parts/profiler/dialog/profilerColumnEditorDialog.ts

@@ -22,7 +22,7 @@ import * as DOM from 'vs/base/browser/dom';
 import { IDataSource, ITree, IRenderer } from 'vs/base/parts/tree/browser/tree';
 import { TPromise } from 'vs/base/common/winjs.base';
 import { attachListStyler } from 'vs/platform/theme/common/styler';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';

src/sql/parts/profiler/editor/controller/profilerTableEditor.ts

@@ -21,11 +21,12 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { IEditorAction } from 'vs/editor/common/editorCommon';
 import { IOverlayWidget } from 'vs/editor/browser/editorBrowser';
 import { FindReplaceState, FindReplaceStateChangedEvent } from 'vs/editor/contrib/find/findState';
-import { Dimension, Builder } from 'vs/base/browser/builder';
+import { Builder } from 'vs/base/browser/builder';
 import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { Dimension } from 'vs/base/browser/dom';
 
 export class ProfilerTableEditor extends BaseEditor implements IProfilerController, ITableController {
 
@@ -57,15 +58,15 @@ export class ProfilerTableEditor extends BaseEditor implements IProfilerControll
 		this._actionMap[ACTION_IDS.FIND_PREVIOUS] = this._instantiationService.createInstance(ProfilerFindPrevious, this);
 	}
 
-	public createEditor(parent: Builder): void {
+	public createEditor(parent: HTMLElement): void {
 
 		this._overlay = document.createElement('div');
 		this._overlay.className = 'overlayWidgets';
 		this._overlay.style.width = '100%';
 		this._overlay.style.zIndex = '4';
-		parent.getHTMLElement().appendChild(this._overlay);
+		parent.appendChild(this._overlay);
 
-		this._profilerTable = new Table(parent.getHTMLElement());
+		this._profilerTable = new Table(parent);
 		this._profilerTable.setSelectionModel(new RowSelectionModel());
 		attachTableStyler(this._profilerTable, this._themeService);
 

src/sql/parts/profiler/editor/profilerEditor.ts

@@ -19,7 +19,7 @@ import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
 
 import * as DOM from 'vs/base/browser/dom';
 import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor';
-import { Dimension, Builder } from 'vs/base/browser/builder';
+import { Builder } from 'vs/base/browser/builder';
 import { TPromise } from 'vs/base/common/winjs.base';
 import { EditorOptions } from 'vs/workbench/common/editor';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
@@ -138,13 +138,13 @@ export class ProfilerEditor extends BaseEditor {
 		this._profilerEditorContextKey = CONTEXT_PROFILER_EDITOR.bindTo(this._contextKeyService);
 	}
 
-	protected createEditor(parent: Builder): void {
+	protected createEditor(parent: HTMLElement): void {
 		// test backend
 		//this._profilerService.registerProvider('default', this._instantiationService.createInstance(ProfilerTestBackend));
 
 		this._container = document.createElement('div');
 		this._container.className = 'carbon-profiler';
-		parent.append(this._container);
+		parent.appendChild(this._container);
 
 		this._createHeader();
 
@@ -159,7 +159,7 @@ export class ProfilerEditor extends BaseEditor {
 			300,
 			tableContainer,
 			() => this._profilerTableEditor.focus(),
-			size => this._profilerTableEditor.layout(new Dimension(parseFloat(DOM.getComputedStyle(this._body).width), size)),
+			size => this._profilerTableEditor.layout(new DOM.Dimension(parseFloat(DOM.getComputedStyle(this._body).width), size)),
 			{}
 		));
 
@@ -167,7 +167,7 @@ export class ProfilerEditor extends BaseEditor {
 			300,
 			paneContainer,
 			() => this._tabbedPanel.focus(),
-			size => this._tabbedPanel.layout(new Dimension(DOM.getTotalWidth(this._body), size)),
+			size => this._tabbedPanel.layout(new DOM.Dimension(DOM.getTotalWidth(this._body), size)),
 			{ minimumSize: 35 }
 		);
 		this._panelView.headerSize = 35;
@@ -222,7 +222,7 @@ export class ProfilerEditor extends BaseEditor {
 		profilerTableContainer.style.overflow = 'hidden';
 		profilerTableContainer.style.position = 'relative';
 		this._profilerTableEditor = this._instantiationService.createInstance(ProfilerTableEditor);
-		this._profilerTableEditor.createEditor(new Builder(profilerTableContainer));
+		this._profilerTableEditor.createEditor(profilerTableContainer);
 		this._profilerTableEditor.onSelectedRowsChanged((e, args) => {
 			let data = this.input.data.getItem(args.rows[0]);
 			if (data) {
@@ -302,7 +302,7 @@ export class ProfilerEditor extends BaseEditor {
 		this._editor = this._instantiationService.createInstance(ProfilerResourceEditor);
 		let editorContainer = document.createElement('div');
 		editorContainer.className = 'profiler-editor';
-		this._editor.create(new Builder(editorContainer));
+		this._editor.create(editorContainer);
 		this._editor.setVisible(true);
 		this._editorInput = this._instantiationService.createInstance(UntitledEditorInput, URI.from({ scheme: Schemas.untitled }), false, 'sql', '', '');
 		this._editor.setInput(this._editorInput, undefined);
@@ -410,7 +410,7 @@ export class ProfilerEditor extends BaseEditor {
 		}
 	}
 
-	public layout(dimension: Dimension): void {
+	public layout(dimension: DOM.Dimension): void {
 		this._container.style.width = dimension.width + 'px';
 		this._container.style.height = dimension.height + 'px';
 		this._body.style.width = dimension.width + 'px';

src/sql/parts/profiler/editor/profilerInput.ts

@@ -14,7 +14,7 @@ import { TPromise } from 'vs/base/common/winjs.base';
 import { EditorInput } from 'vs/workbench/common/editor';
 import { IEditorModel } from 'vs/platform/editor/common/editor';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import { generateUuid } from 'vs/base/common/uuid';
 
 import * as nls from 'vs/nls';

src/sql/parts/profiler/editor/profilerResourceEditor.ts

@@ -5,7 +5,7 @@
 
 import { IEditorOptions } from 'vs/editor/common/config/editorOptions';
 import * as nls from 'vs/nls';
-import { Dimension, Builder } from 'vs/base/browser/builder';
+import * as DOM from 'vs/base/browser/dom';
 import { UntitledEditorInput } from 'vs/workbench/common/editor/untitledEditorInput';
 import { TPromise } from 'vs/base/common/winjs.base';
 import { ResourceEditorModel } from 'vs/workbench/common/editor/resourceEditorModel';
@@ -56,8 +56,8 @@ export class ProfilerResourceEditor extends BaseTextEditor {
 		super(ProfilerResourceEditor.ID, telemetryService, instantiationService, storageService, configurationService, themeService, textFileService, editorGroupService);
 	}
 
-	public createEditorControl(parent: Builder, configuration: IEditorOptions): editorCommon.IEditor {
-		return this.instantiationService.createInstance(ProfilerResourceCodeEditor, parent.getHTMLElement(), configuration);
+	public createEditorControl(parent: HTMLElement, configuration: IEditorOptions): editorCommon.IEditor {
+		return this.instantiationService.createInstance(ProfilerResourceCodeEditor, parent, configuration);
 	}
 
 	protected getConfigurationOverrides(): IEditorOptions {
@@ -90,7 +90,7 @@ export class ProfilerResourceEditor extends BaseTextEditor {
 		return nls.localize('profilerTextEditorAriaLabel', 'Profiler editor for event text. Readonly');
 	}
 
-	public layout(dimension: Dimension) {
+	public layout(dimension: DOM.Dimension) {
 		this.getControl().layout(dimension);
 	}
 }

src/sql/parts/query/common/queryInput.ts

@@ -10,7 +10,7 @@ import { UntitledEditorInput } from 'vs/workbench/common/editor/untitledEditorIn
 import { QueryResultsInput } from 'sql/parts/query/common/queryResultsInput';
 import { IQueryModelService } from 'sql/parts/query/execution/queryModel';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
-import Event, { Emitter } from 'vs/base/common/event';
+import { Event, Emitter } from 'vs/base/common/event';
 import URI from 'vs/base/common/uri';
 import { ISelectionData, ExecutionPlanOptions } from 'sqlops';
 import { IQueryEditorService } from 'sql/parts/query/common/queryEditorService';

src/sql/parts/query/editor/queryEditor.ts

@@ -7,7 +7,6 @@ import 'vs/css!sql/parts/query/editor/media/queryEditor';
 import { TPromise } from 'vs/base/common/winjs.base';
 import * as strings from 'vs/base/common/strings';
 import * as DOM from 'vs/base/browser/dom';
-import { Builder, Dimension, withElementById } from 'vs/base/browser/builder';
 
 import { EditorInput, EditorOptions } from 'vs/workbench/common/editor';
 import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor';
@@ -65,7 +64,7 @@ export class QueryEditor extends BaseEditor {
 	private _sash: IFlexibleSash;
 	private _editorTopOffset: number;
 	private _orientation: Orientation;
-	private _dimension: Dimension;
+	private _dimension: DOM.Dimension;
 
 	private _resultsEditor: QueryResultsEditor;
 	private _resultsEditorContainer: HTMLElement;
@@ -137,10 +136,10 @@ export class QueryEditor extends BaseEditor {
 	}
 
 	/**
-	 * Called to create the editor in the parent builder.
+	 * Called to create the editor in the parent element.
 	 */
-	public createEditor(parent: Builder): void {
-		const parentElement = parent.getHTMLElement();
+	public createEditor(parent: HTMLElement): void {
+		const parentElement = parent;
 		DOM.addClass(parentElement, 'side-by-side-editor');
 		this._createTaskbar(parentElement);
 	}
@@ -244,7 +243,7 @@ export class QueryEditor extends BaseEditor {
 	 * Updates the internal variable keeping track of the editor's size, and re-calculates the sash position.
 	 * To be called when the container of this editor changes size.
 	 */
-	public layout(dimension: Dimension): void {
+	public layout(dimension: DOM.Dimension): void {
 		this._dimension = dimension;
 
 		if (this._sash) {
@@ -301,7 +300,7 @@ export class QueryEditor extends BaseEditor {
 
 		this._createEditor(<QueryResultsInput>input.results, this._resultsEditorContainer)
 			.then(result => {
-				this._onResultsEditorCreated(<QueryResultsEditor>result, input.results, this.options);
+				this._onResultsEditorCreated(<any>result, input.results, this.options);
 				this.resultsEditorVisibility = true;
 				this.hideQueryResultsView = false;
 				this._doLayout(true);
@@ -571,7 +570,7 @@ export class QueryEditor extends BaseEditor {
 		}
 
 		let editor = descriptor.instantiate(this._instantiationService);
-		editor.create(new Builder(container));
+		editor.create(container);
 		editor.setVisible(this.isVisible(), this.position);
 		return TPromise.as(editor);
 	}
@@ -596,7 +595,7 @@ export class QueryEditor extends BaseEditor {
 	 * Appends the HTML for the SQL editor. Creates new HTML every time.
 	 */
 	private _createSqlEditorContainer() {
-		const parentElement = this.getContainer().getHTMLElement();
+		const parentElement = this.getContainer();
 		this._sqlEditorContainer = DOM.append(parentElement, DOM.$('.details-editor-container'));
 		this._sqlEditorContainer.style.position = 'absolute';
 	}
@@ -609,7 +608,7 @@ export class QueryEditor extends BaseEditor {
 	private _createResultsEditorContainer() {
 		this._createSash();
 
-		const parentElement = this.getContainer().getHTMLElement();
+		const parentElement = this.getContainer();
 		let input = <QueryInput>this.input;
 
 		if (!input.results.container) {
@@ -632,7 +631,7 @@ export class QueryEditor extends BaseEditor {
 	 */
 	private _createSash(): void {
 		if (!this._sash) {
-			let parentElement: HTMLElement = this.getContainer().getHTMLElement();
+			let parentElement: HTMLElement = this.getContainer();
 
 			if (this._orientation === Orientation.HORIZONTAL) {
 				this._sash = this._register(new HorizontalFlexibleSash(parentElement, this._minEditorSize));
@@ -655,7 +654,7 @@ export class QueryEditor extends BaseEditor {
 		if (this._orientation === Orientation.HORIZONTAL) {
 			this._sash.setDimenesion(this._dimension);
 		} else {
-			this._sash.setDimenesion(new Dimension(this._dimension.width, this._dimension.height - this.getTaskBarHeight()));
+			this._sash.setDimenesion(new DOM.Dimension(this._dimension.width, this._dimension.height - this.getTaskBarHeight()));
 		}
 
 	}
@@ -692,13 +691,13 @@ export class QueryEditor extends BaseEditor {
 
 	private _doLayoutHorizontal(): void {
 		let splitPointTop: number = this._sash.getSplitPoint();
-		let parent: ClientRect = this.getContainer().getHTMLElement().getBoundingClientRect();
+		let parent: ClientRect = this.getContainer().getBoundingClientRect();
 
 		let sqlEditorHeight = splitPointTop - (parent.top + this.getTaskBarHeight());
 
-		let titleBar = withElementById('workbench.parts.titlebar');
+		let titleBar = document.getElementById('workbench.parts.titlebar');
 		if (titleBar) {
-			sqlEditorHeight += DOM.getContentHeight(titleBar.getHTMLElement());
+			sqlEditorHeight += DOM.getContentHeight(titleBar);
 		}
 
 		let queryResultsEditorHeight = parent.bottom - splitPointTop;
@@ -711,13 +710,13 @@ export class QueryEditor extends BaseEditor {
 		this._resultsEditorContainer.style.width = `${this._dimension.width}px`;
 		this._resultsEditorContainer.style.top = `${splitPointTop}px`;
 
-		this._sqlEditor.layout(new Dimension(this._dimension.width, sqlEditorHeight));
-		this._resultsEditor.layout(new Dimension(this._dimension.width, queryResultsEditorHeight));
+		this._sqlEditor.layout(new DOM.Dimension(this._dimension.width, sqlEditorHeight));
+		this._resultsEditor.layout(new DOM.Dimension(this._dimension.width, queryResultsEditorHeight));
 	}
 
 	private _doLayoutVertical(): void {
 		let splitPointLeft: number = this._sash.getSplitPoint();
-		let parent: ClientRect = this.getContainer().getHTMLElement().getBoundingClientRect();
+		let parent: ClientRect = this.getContainer().getBoundingClientRect();
 
 		let sqlEditorWidth = splitPointLeft;
 		let queryResultsEditorWidth = parent.width - splitPointLeft;
@@ -732,8 +731,8 @@ export class QueryEditor extends BaseEditor {
 		this._resultsEditorContainer.style.height = `${this._dimension.height - taskbarHeight}px`;
 		this._resultsEditorContainer.style.left = `${splitPointLeft}px`;
 
-		this._sqlEditor.layout(new Dimension(sqlEditorWidth, this._dimension.height - taskbarHeight));
-		this._resultsEditor.layout(new Dimension(queryResultsEditorWidth, this._dimension.height - taskbarHeight));
+		this._sqlEditor.layout(new DOM.Dimension(sqlEditorWidth, this._dimension.height - taskbarHeight));
+		this._resultsEditor.layout(new DOM.Dimension(queryResultsEditorWidth, this._dimension.height - taskbarHeight));
 	}
 
 	private _doLayoutSql() {
@@ -745,7 +744,7 @@ export class QueryEditor extends BaseEditor {
 		}
 
 		if (this._dimension) {
-			this._sqlEditor.layout(new Dimension(this._dimension.width, this._dimension.height - this.getTaskBarHeight()));
+			this._sqlEditor.layout(new DOM.Dimension(this._dimension.width, this._dimension.height - this.getTaskBarHeight()));
 		}
 	}
 
@@ -769,7 +768,7 @@ export class QueryEditor extends BaseEditor {
 			this._resultsEditor = null;
 		}
 
-		let thisEditorParent: HTMLElement = this.getContainer().getHTMLElement();
+		let thisEditorParent: HTMLElement = this.getContainer();
 
 		if (this._sqlEditorContainer) {
 			let sqlEditorParent: HTMLElement = this._sqlEditorContainer.parentElement;