Merge from master

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

@@ -3,18 +3,15 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-'use strict';
-
 import 'vs/css!./button';
 import * as DOM from 'vs/base/browser/dom';
-import { Builder, $ } from 'vs/base/browser/builder';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import { Color } from 'vs/base/common/color';
 import { mixin } from 'vs/base/common/objects';
 import { Event as BaseEvent, Emitter } from 'vs/base/common/event';
 import { Disposable } from 'vs/base/common/lifecycle';
-import { Gesture, EventType } from 'vs/base/browser/touch';
+import { Gesture } from 'vs/base/browser/touch';
 
 export interface IButtonOptions extends IButtonStyles {
 	title?: boolean;
@@ -36,13 +33,13 @@ const defaultOptions: IButtonStyles = {
 export class Button extends Disposable {
 
 	// {{SQL CARBON EDIT}} -- changed access modifier to protected
-	protected $el: Builder;
+	protected _element: HTMLElement;
 	private options: IButtonOptions;
 
-	private buttonBackground: Color;
-	private buttonHoverBackground: Color;
-	private buttonForeground: Color;
-	private buttonBorder: Color;
+	private buttonBackground: Color | undefined;
+	private buttonHoverBackground: Color | undefined;
+	private buttonForeground: Color | undefined;
+	private buttonBorder: Color | undefined;
 
 	private _onDidClick = this._register(new Emitter<any>());
 	get onDidClick(): BaseEvent<Event> { return this._onDidClick.event; }
@@ -60,50 +57,52 @@ export class Button extends Disposable {
 		this.buttonForeground = this.options.buttonForeground;
 		this.buttonBorder = this.options.buttonBorder;
 
-		this.$el = this._register($('a.monaco-button').attr({
-			'tabIndex': '0',
-			'role': 'button'
-		}).appendTo(container));
+		this._element = document.createElement('a');
+		DOM.addClass(this._element, 'monaco-button');
+		this._element.tabIndex = 0;
+		this._element.setAttribute('role', 'button');
 
-		Gesture.addTarget(this.$el.getHTMLElement());
+		container.appendChild(this._element);
 
-		this.$el.on([DOM.EventType.CLICK, EventType.Tap], e => {
+		Gesture.addTarget(this._element);
+
+		this._register(DOM.addDisposableListener(this._element, DOM.EventType.CLICK, e => {
 			if (!this.enabled) {
 				DOM.EventHelper.stop(e);
 				return;
 			}
 
 			this._onDidClick.fire(e);
-		});
+		}));
 
-		this.$el.on(DOM.EventType.KEY_DOWN, e => {
-			const event = new StandardKeyboardEvent(e as KeyboardEvent);
+		this._register(DOM.addDisposableListener(this._element, DOM.EventType.KEY_DOWN, e => {
+			const event = new StandardKeyboardEvent(e);
 			let eventHandled = false;
 			if (this.enabled && event.equals(KeyCode.Enter) || event.equals(KeyCode.Space)) {
 				this._onDidClick.fire(e);
 				eventHandled = true;
 			} else if (event.equals(KeyCode.Escape)) {
-				this.$el.domBlur();
+				this._element.blur();
 				eventHandled = true;
 			}
 
 			if (eventHandled) {
 				DOM.EventHelper.stop(event, true);
 			}
-		});
+		}));
 
-		this.$el.on(DOM.EventType.MOUSE_OVER, e => {
-			if (!this.$el.hasClass('disabled')) {
+		this._register(DOM.addDisposableListener(this._element, DOM.EventType.MOUSE_OVER, e => {
+			if (!DOM.hasClass(this._element, 'disabled')) {
 				this.setHoverBackground();
 			}
-		});
+		}));
 
-		this.$el.on(DOM.EventType.MOUSE_OUT, e => {
+		this._register(DOM.addDisposableListener(this._element, DOM.EventType.MOUSE_OUT, e => {
 			this.applyStyles(); // restore standard styles
-		});
+		}));
 
 		// Also set hover background when button is focused for feedback
-		this.focusTracker = this._register(DOM.trackFocus(this.$el.getHTMLElement()));
+		this.focusTracker = this._register(DOM.trackFocus(this._element));
 		this._register(this.focusTracker.onDidFocus(() => this.setHoverBackground()));
 		this._register(this.focusTracker.onDidBlur(() => this.applyStyles())); // restore standard styles
 
@@ -113,7 +112,7 @@ export class Button extends Disposable {
 	private setHoverBackground(): void {
 		const hoverBackground = this.buttonHoverBackground ? this.buttonHoverBackground.toString() : null;
 		if (hoverBackground) {
-			this.$el.style('background-color', hoverBackground);
+			this._element.style.backgroundColor = hoverBackground;
 		}
 	}
 
@@ -128,61 +127,59 @@ export class Button extends Disposable {
 
 	// {{SQL CARBON EDIT}} -- removed 'private' access modifier
 	applyStyles(): void {
-		if (this.$el) {
+		if (this._element) {
 			const background = this.buttonBackground ? this.buttonBackground.toString() : null;
 			const foreground = this.buttonForeground ? this.buttonForeground.toString() : null;
 			const border = this.buttonBorder ? this.buttonBorder.toString() : null;
 
-			this.$el.style('color', foreground);
-			this.$el.style('background-color', background);
+			this._element.style.color = foreground;
+			this._element.style.backgroundColor = background;
 
-			this.$el.style('border-width', border ? '1px' : null);
-			this.$el.style('border-style', border ? 'solid' : null);
-			this.$el.style('border-color', border);
+			this._element.style.borderWidth = border ? '1px' : null;
+			this._element.style.borderStyle = border ? 'solid' : null;
+			this._element.style.borderColor = border;
 		}
 	}
 
 	get element(): HTMLElement {
-		return this.$el.getHTMLElement();
+		return this._element;
 	}
 
 	set label(value: string) {
-		if (!this.$el.hasClass('monaco-text-button')) {
-			this.$el.addClass('monaco-text-button');
+		if (!DOM.hasClass(this._element, 'monaco-text-button')) {
+			DOM.addClass(this._element, 'monaco-text-button');
 		}
-		this.$el.text(value);
+		this._element.textContent = value;
 		//{{SQL CARBON EDIT}}
-		this.$el.attr('aria-label', value);
+		this._element.setAttribute('aria-label', value);
 		//{{END}}
 		if (this.options.title) {
-			this.$el.title(value);
+			this._element.title = value;
 		}
 	}
 
 	set icon(iconClassName: string) {
-		this.$el.addClass(iconClassName);
+		DOM.addClasses(this._element, ...iconClassName.split(' '));
 	}
 
 	set enabled(value: boolean) {
 		if (value) {
-			this.$el.removeClass('disabled');
-			this.$el.attr({
-				'aria-disabled': 'false',
-				'tabIndex': '0'
-			});
+			DOM.removeClass(this._element, 'disabled');
+			this._element.setAttribute('aria-disabled', String(false));
+			this._element.tabIndex = 0;
 		} else {
-			this.$el.addClass('disabled');
-			this.$el.attr('aria-disabled', String(true));
-			DOM.removeTabIndexAndUpdateFocus(this.$el.getHTMLElement());
+			DOM.addClass(this._element, 'disabled');
+			this._element.setAttribute('aria-disabled', String(true));
+			DOM.removeTabIndexAndUpdateFocus(this._element);
 		}
 	}
 
 	get enabled() {
-		return !this.$el.hasClass('disabled');
+		return !DOM.hasClass(this._element, 'disabled');
 	}
 
 	focus(): void {
-		this.$el.domFocus();
+		this._element.focus();
 	}
 }
 
@@ -206,12 +203,12 @@ export class ButtonGroup extends Disposable {
 
 			// Implement keyboard access in buttons if there are multiple
 			if (count > 1) {
-				$(button.element).on(DOM.EventType.KEY_DOWN, e => {
-					const event = new StandardKeyboardEvent(e as KeyboardEvent);
+				this._register(DOM.addDisposableListener(button.element, DOM.EventType.KEY_DOWN, e => {
+					const event = new StandardKeyboardEvent(e);
 					let eventHandled = true;
 
 					// Next / Previous Button
-					let buttonIndexToFocus: number;
+					let buttonIndexToFocus: number | undefined;
 					if (event.equals(KeyCode.LeftArrow)) {
 						buttonIndexToFocus = index > 0 ? index - 1 : this._buttons.length - 1;
 					} else if (event.equals(KeyCode.RightArrow)) {
@@ -220,11 +217,12 @@ export class ButtonGroup extends Disposable {
 						eventHandled = false;
 					}
 
-					if (eventHandled) {
+					if (eventHandled && typeof buttonIndexToFocus === 'number') {
 						this._buttons[buttonIndexToFocus].focus();
 						DOM.EventHelper.stop(e, true);
 					}
-				}, this.toDispose);
+
+				}));
 			}
 		}
 	}