debt - reduce usage of Builder pattern

src/vs/base/browser/builder.ts

@@ -43,43 +43,13 @@ export interface QuickBuilder {
 	(builder: Builder): Builder;
 }
 
-/**
- * Create a new builder from the element that is uniquely identified by the given identifier. If the
- *  second parameter "offdom" is set to true, the created elements will only be added to the provided
- *  element when the build() method is called.
- */
-export function withElementById(id: string, offdom?: boolean): Builder {
-	assert.ok(types.isString(id), 'Expected String as parameter');
-
-	let element = document.getElementById(id);
-	if (element) {
-		return new Builder(element, offdom);
-	}
-
-	return null;
-}
-
-export const Build = {
-	withElementById: withElementById
-};
-
 // --- Implementation starts here
 
 let MS_DATA_KEY = '_msDataKey';
 let DATA_BINDING_ID = '__$binding';
 let LISTENER_BINDING_ID = '__$listeners';
 let VISIBILITY_BINDING_ID = '__$visibility';
 
-export class Dimension {
-	public width: number;
-	public height: number;
-
-	constructor(width: number, height: number) {
-		this.width = width;
-		this.height = height;
-	}
-}
-
 function data(element: any): any {
 	if (!element[MS_DATA_KEY]) {
 		element[MS_DATA_KEY] = {};
@@ -1206,39 +1176,18 @@ export class Builder implements IDisposable {
 	/**
 	 *  Gets the size (in pixels) of an element, including the margin.
 	 */
-	public getTotalSize(): Dimension {
+	public getTotalSize(): DOM.Dimension {
 		let totalWidth = DOM.getTotalWidth(this.currentElement);
 		let totalHeight = DOM.getTotalHeight(this.currentElement);
 
-		return new Dimension(totalWidth, totalHeight);
+		return new DOM.Dimension(totalWidth, totalHeight);
 	}
 
 	/**
 	 *  Another variant of getting the inner dimensions of an element.
 	 */
-	public getClientArea(): Dimension {
-
-		// 0.) Try with DOM clientWidth / clientHeight
-		if (this.currentElement !== document.body) {
-			return new Dimension(this.currentElement.clientWidth, this.currentElement.clientHeight);
-		}
-
-		// 1.) Try innerWidth / innerHeight
-		if (window.innerWidth && window.innerHeight) {
-			return new Dimension(window.innerWidth, window.innerHeight);
-		}
-
-		// 2.) Try with document.body.clientWidth / document.body.clientHeigh
-		if (document.body && document.body.clientWidth && document.body.clientWidth) {
-			return new Dimension(document.body.clientWidth, document.body.clientHeight);
-		}
-
-		// 3.) Try with document.documentElement.clientWidth / document.documentElement.clientHeight
-		if (document.documentElement && document.documentElement.clientWidth && document.documentElement.clientHeight) {
-			return new Dimension(document.documentElement.clientWidth, document.documentElement.clientHeight);
-		}
-
-		throw new Error('Unable to figure out browser width and height');
+	public getClientArea(): DOM.Dimension {
+		return DOM.getClientArea(this.currentElement);
 	}
 }
 
@@ -1484,7 +1433,3 @@ export const $: QuickBuilder = function (arg?: any): Builder {
 		throw new Error('Bad use of $');
 	}
 };
-
-(<any>$).Dimension = Dimension;
-(<any>$).Builder = Builder;
-(<any>$).Build = Build;

src/vs/base/browser/dnd.ts

@@ -5,28 +5,33 @@
 
 'use strict';
 
-import { $ } from 'vs/base/browser/builder';
+import { IDisposable, dispose } from 'vs/base/common/lifecycle';
+import { addDisposableListener } from 'vs/base/browser/dom';
 
 /**
  * A helper that will execute a provided function when the provided HTMLElement receives
  *  dragover event for 800ms. If the drag is aborted before, the callback will not be triggered.
  */
 export class DelayedDragHandler {
-
+	private toDispose: IDisposable[] = [];
 	private timeout: number;
 
 	constructor(container: HTMLElement, callback: () => void) {
-		$(container).on('dragover', () => {
+		this.toDispose.push(addDisposableListener(container, 'dragover', () => {
 			if (!this.timeout) {
 				this.timeout = setTimeout(() => {
 					callback();
 
 					this.timeout = null;
 				}, 800);
 			}
-		});
+		}));
 
-		$(container).on(['dragleave', 'drop', 'dragend'], () => this.clearDragTimeout());
+		['dragleave', 'drop', 'dragend'].forEach(type => {
+			this.toDispose.push(addDisposableListener(container, type, () => {
+				this.clearDragTimeout();
+			}));
+		});
 	}
 
 	private clearDragTimeout(): void {
@@ -37,6 +42,7 @@ export class DelayedDragHandler {
 	}
 
 	public dispose(): void {
+		this.toDispose = dispose(this.toDispose);
 		this.clearDragTimeout();
 	}
 }

src/vs/base/browser/dom.ts

@@ -35,7 +35,9 @@ export function isInDOM(node: Node): boolean {
 interface IDomClassList {
 	hasClass(node: HTMLElement, className: string): boolean;
 	addClass(node: HTMLElement, className: string): void;
+	addClasses(node: HTMLElement, ...classNames: string[]): void;
 	removeClass(node: HTMLElement, className: string): void;
+	removeClasses(node: HTMLElement, ...classNames: string[]): void;
 	toggleClass(node: HTMLElement, className: string, shouldHaveIt?: boolean): void;
 }
 
@@ -110,6 +112,10 @@ const _manualClassList = new class implements IDomClassList {
 		return this._lastStart !== -1;
 	}
 
+	addClasses(node: HTMLElement, ...classNames: string[]): void {
+		classNames.forEach(nameValue => nameValue.split(' ').forEach(name => this.addClass(node, name)));
+	}
+
 	addClass(node: HTMLElement, className: string): void {
 		if (!node.className) { // doesn't have it for sure
 			node.className = className;
@@ -130,6 +136,10 @@ const _manualClassList = new class implements IDomClassList {
 		}
 	}
 
+	removeClasses(node: HTMLElement, ...classNames: string[]): void {
+		classNames.forEach(nameValue => nameValue.split(' ').forEach(name => this.removeClass(node, name)));
+	}
+
 	toggleClass(node: HTMLElement, className: string, shouldHaveIt?: boolean): void {
 		this._findClassName(node, className);
 		if (this._lastStart !== -1 && (shouldHaveIt === void 0 || !shouldHaveIt)) {
@@ -146,6 +156,10 @@ const _nativeClassList = new class implements IDomClassList {
 		return className && node.classList && node.classList.contains(className);
 	}
 
+	addClasses(node: HTMLElement, ...classNames: string[]): void {
+		classNames.forEach(nameValue => nameValue.split(' ').forEach(name => this.addClass(node, name)));
+	}
+
 	addClass(node: HTMLElement, className: string): void {
 		if (className && node.classList) {
 			node.classList.add(className);
@@ -158,6 +172,10 @@ const _nativeClassList = new class implements IDomClassList {
 		}
 	}
 
+	removeClasses(node: HTMLElement, ...classNames: string[]): void {
+		classNames.forEach(nameValue => nameValue.split(' ').forEach(name => this.removeClass(node, name)));
+	}
+
 	toggleClass(node: HTMLElement, className: string, shouldHaveIt?: boolean): void {
 		if (node.classList) {
 			node.classList.toggle(className, shouldHaveIt);
@@ -170,7 +188,9 @@ const _nativeClassList = new class implements IDomClassList {
 const _classList: IDomClassList = browser.isIE ? _manualClassList : _nativeClassList;
 export const hasClass: (node: HTMLElement, className: string) => boolean = _classList.hasClass.bind(_classList);
 export const addClass: (node: HTMLElement, className: string) => void = _classList.addClass.bind(_classList);
+export const addClasses: (node: HTMLElement, ...classNames: string[]) => void = _classList.addClasses.bind(_classList);
 export const removeClass: (node: HTMLElement, className: string) => void = _classList.removeClass.bind(_classList);
+export const removeClasses: (node: HTMLElement, ...classNames: string[]) => void = _classList.removeClasses.bind(_classList);
 export const toggleClass: (node: HTMLElement, className: string, shouldHaveIt?: boolean) => void = _classList.toggleClass.bind(_classList);
 
 class DomListener implements IDisposable {
@@ -454,6 +474,31 @@ function getDimension(element: HTMLElement, cssPropertyName: string, jsPropertyN
 	return convertToPixels(element, value);
 }
 
+export function getClientArea(element: HTMLElement): Dimension {
+
+	// Try with DOM clientWidth / clientHeight
+	if (element !== document.body) {
+		return new Dimension(element.clientWidth, element.clientHeight);
+	}
+
+	// Try innerWidth / innerHeight
+	if (window.innerWidth && window.innerHeight) {
+		return new Dimension(window.innerWidth, window.innerHeight);
+	}
+
+	// Try with document.body.clientWidth / document.body.clientHeigh
+	if (document.body && document.body.clientWidth && document.body.clientWidth) {
+		return new Dimension(document.body.clientWidth, document.body.clientHeight);
+	}
+
+	// Try with document.documentElement.clientWidth / document.documentElement.clientHeight
+	if (document.documentElement && document.documentElement.clientWidth && document.documentElement.clientHeight) {
+		return new Dimension(document.documentElement.clientWidth, document.documentElement.clientHeight);
+	}
+
+	throw new Error('Unable to figure out browser width and height');
+}
+
 const sizeUtils = {
 
 	getBorderLeftWidth: function (element: HTMLElement): number {
@@ -500,6 +545,16 @@ const sizeUtils = {
 // ----------------------------------------------------------------------------------------
 // Position & Dimension
 
+export class Dimension {
+	public width: number;
+	public height: number;
+
+	constructor(width: number, height: number) {
+		this.width = width;
+		this.height = height;
+	}
+}
+
 export function getTopLeftOffset(element: HTMLElement): { left: number; top: number; } {
 	// Adapted from WinJS.Utilities.getPosition
 	// and added borders to the mix

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

@@ -386,7 +386,7 @@ export class ActionBar implements IActionRunner {
 	private _onDidRun = new Emitter<IRunEvent>();
 	private _onDidBeforeRun = new Emitter<IRunEvent>();
 
-	constructor(container: HTMLElement | Builder, options: IActionBarOptions = defaultOptions) {
+	constructor(container: HTMLElement, options: IActionBarOptions = defaultOptions) {
 		this.options = options;
 		this._context = options.context;
 		this.toDispose = [];
@@ -496,7 +496,7 @@ export class ActionBar implements IActionRunner {
 
 		this.domNode.appendChild(this.actionsList);
 
-		((container instanceof Builder) ? container.getHTMLElement() : container).appendChild(this.domNode);
+		container.appendChild(this.domNode);
 	}
 
 	public get onDidBlur(): Event<void> {
@@ -553,8 +553,8 @@ export class ActionBar implements IActionRunner {
 		}
 	}
 
-	public getContainer(): Builder {
-		return $(this.domNode);
+	public getContainer(): HTMLElement {
+		return this.domNode;
 	}
 
 	public push(arg: IAction | IAction[], options: IActionOptions = {}): void {
@@ -748,7 +748,7 @@ export class ActionBar implements IActionRunner {
 
 		this.toDispose = lifecycle.dispose(this.toDispose);
 
-		this.getContainer().destroy();
+		$(this.getContainer()).destroy();
 	}
 }
 

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

@@ -48,9 +48,7 @@ export class Button {
 
 	private focusTracker: DOM.IFocusTracker;
 
-	constructor(container: Builder, options?: IButtonOptions);
-	constructor(container: HTMLElement, options?: IButtonOptions);
-	constructor(container: any, options?: IButtonOptions) {
+	constructor(container: HTMLElement, options?: IButtonOptions) {
 		this.options = options || Object.create(null);
 		mixin(this.options, defaultOptions, false);
 
@@ -197,9 +195,7 @@ export class ButtonGroup {
 	private _buttons: Button[];
 	private toDispose: IDisposable[];
 
-	constructor(container: Builder, count: number, options?: IButtonOptions);
-	constructor(container: HTMLElement, count: number, options?: IButtonOptions);
-	constructor(container: any, count: number, options?: IButtonOptions) {
+	constructor(container: HTMLElement, count: number, options?: IButtonOptions) {
 		this._buttons = [];
 		this.toDispose = [];
 
@@ -210,9 +206,7 @@ export class ButtonGroup {
 		return this._buttons;
 	}
 
-	private create(container: Builder, count: number, options?: IButtonOptions): void;
-	private create(container: HTMLElement, count: number, options?: IButtonOptions): void;
-	private create(container: any, count: number, options?: IButtonOptions): void {
+	private create(container: HTMLElement, count: number, options?: IButtonOptions): void {
 		for (let index = 0; index < count; index++) {
 			const button = new Button(container, options);
 			this._buttons.push(button);

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

@@ -3,7 +3,6 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-
 'use strict';
 
 import 'vs/css!./contextview';