Merge from master

src/vs/base/browser/ui/progressbar/progressbar.css

@@ -24,10 +24,6 @@
 .monaco-progress-container.discrete .progress-bit {
 	left: 0;
 	transition: width 100ms linear;
-	-webkit-transition: width 100ms linear;
-	-o-transition: width 100ms linear;
-	-moz-transition: width 100ms linear;
-	-ms-transition: width 100ms linear;
 }
 
 .monaco-progress-container.discrete.done .progress-bit {

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

@@ -3,16 +3,13 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-'use strict';
-
 import 'vs/css!./progressbar';
-import { TPromise, ValueCallback } from 'vs/base/common/winjs.base';
 import * as assert from 'vs/base/common/assert';
-import { Builder, $ } from 'vs/base/browser/builder';
-import * as DOM from 'vs/base/browser/dom';
 import { Disposable } from 'vs/base/common/lifecycle';
 import { Color } from 'vs/base/common/color';
 import { mixin } from 'vs/base/common/objects';
+import { removeClasses, addClass, hasClass, addClasses, removeClass, hide, show } from 'vs/base/browser/dom';
+import { RunOnceScheduler } from 'vs/base/common/async';
 
 const css_done = 'done';
 const css_active = 'active';
@@ -38,11 +35,11 @@ const defaultOpts = {
 export class ProgressBar extends Disposable {
 	private options: IProgressBarOptions;
 	private workedVal: number;
-	private element: Builder;
+	private element: HTMLElement;
 	private bit: HTMLElement;
-	private totalWork: number;
-	private animationStopToken: ValueCallback;
-	private progressBarBackground: Color;
+	private totalWork: number | undefined;
+	private progressBarBackground: Color | undefined;
+	private showDelayedScheduler: RunOnceScheduler;
 
 	constructor(container: HTMLElement, options?: IProgressBarOptions) {
 		super();
@@ -54,26 +51,19 @@ export class ProgressBar extends Disposable {
 
 		this.progressBarBackground = this.options.progressBarBackground;
 
+		this._register(this.showDelayedScheduler = new RunOnceScheduler(() => show(this.element), 0));
+
 		this.create(container);
 	}
 
 	private create(container: HTMLElement): void {
-		$(container).div({ 'class': css_progress_container }, builder => {
-			this.element = builder.clone();
+		this.element = document.createElement('div');
+		addClass(this.element, css_progress_container);
+		container.appendChild(this.element);
 
-			builder.div({ 'class': css_progress_bit }).on([DOM.EventType.ANIMATION_START, DOM.EventType.ANIMATION_END, DOM.EventType.ANIMATION_ITERATION], (e: Event) => {
-				switch (e.type) {
-					case DOM.EventType.ANIMATION_ITERATION:
-						if (this.animationStopToken) {
-							this.animationStopToken(null);
-						}
-						break;
-				}
-
-			}, this.toDispose);
-
-			this.bit = builder.getHTMLElement();
-		});
+		this.bit = document.createElement('div');
+		addClass(this.bit, css_progress_bit);
+		this.element.appendChild(this.bit);
 
 		this.applyStyles();
 	}
@@ -81,9 +71,7 @@ export class ProgressBar extends Disposable {
 	private off(): void {
 		this.bit.style.width = 'inherit';
 		this.bit.style.opacity = '1';
-		this.element.removeClass(css_active);
-		this.element.removeClass(css_infinite);
-		this.element.removeClass(css_discrete);
+		removeClasses(this.element, css_active, css_infinite, css_discrete);
 
 		this.workedVal = 0;
 		this.totalWork = undefined;
@@ -104,14 +92,14 @@ export class ProgressBar extends Disposable {
 	}
 
 	private doDone(delayed: boolean): ProgressBar {
-		this.element.addClass(css_done);
+		addClass(this.element, css_done);
 
 		// let it grow to 100% width and hide afterwards
-		if (!this.element.hasClass(css_infinite)) {
+		if (!hasClass(this.element, css_infinite)) {
 			this.bit.style.width = 'inherit';
 
 			if (delayed) {
-				TPromise.timeout(200).then(() => this.off());
+				setTimeout(() => this.off(), 200);
 			} else {
 				this.off();
 			}
@@ -121,7 +109,7 @@ export class ProgressBar extends Disposable {
 		else {
 			this.bit.style.opacity = '0';
 			if (delayed) {
-				TPromise.timeout(200).then(() => this.off());
+				setTimeout(() => this.off(), 200);
 			} else {
 				this.off();
 			}
@@ -137,10 +125,8 @@ export class ProgressBar extends Disposable {
 		this.bit.style.width = '2%';
 		this.bit.style.opacity = '1';
 
-		this.element.removeClass(css_discrete);
-		this.element.removeClass(css_done);
-		this.element.addClass(css_active);
-		this.element.addClass(css_infinite);
+		removeClasses(this.element, css_discrete, css_done);
+		addClasses(this.element, css_active, css_infinite);
 
 		return this;
 	}
@@ -160,7 +146,7 @@ export class ProgressBar extends Disposable {
 	 * Finds out if this progress bar is configured with total work
 	 */
 	hasTotal(): boolean {
-		return !isNaN(this.totalWork);
+		return !isNaN(this.totalWork as number);
 	}
 
 	/**
@@ -186,46 +172,49 @@ export class ProgressBar extends Disposable {
 	}
 
 	private doSetWorked(value: number): ProgressBar {
-		assert.ok(!isNaN(this.totalWork), 'Total work not set');
+		assert.ok(!isNaN(this.totalWork as number), 'Total work not set');
 
 		this.workedVal = value;
-		this.workedVal = Math.min(this.totalWork, this.workedVal);
+		this.workedVal = Math.min(this.totalWork as number, this.workedVal);
 
-		if (this.element.hasClass(css_infinite)) {
-			this.element.removeClass(css_infinite);
+		if (hasClass(this.element, css_infinite)) {
+			removeClass(this.element, css_infinite);
 		}
 
-		if (this.element.hasClass(css_done)) {
-			this.element.removeClass(css_done);
+		if (hasClass(this.element, css_done)) {
+			removeClass(this.element, css_done);
 		}
 
-		if (!this.element.hasClass(css_active)) {
-			this.element.addClass(css_active);
+		if (!hasClass(this.element, css_active)) {
+			addClass(this.element, css_active);
 		}
 
-		if (!this.element.hasClass(css_discrete)) {
-			this.element.addClass(css_discrete);
+		if (!hasClass(this.element, css_discrete)) {
+			addClass(this.element, css_discrete);
 		}
 
-		this.bit.style.width = 100 * (this.workedVal / this.totalWork) + '%';
+		this.bit.style.width = 100 * (this.workedVal / (this.totalWork as number)) + '%';
 
 		return this;
 	}
 
 	getContainer(): HTMLElement {
-		return this.element.getHTMLElement();
+		return this.element;
 	}
 
 	show(delay?: number): void {
+		this.showDelayedScheduler.cancel();
+
 		if (typeof delay === 'number') {
-			this.element.showDelayed(delay);
+			this.showDelayedScheduler.schedule(delay);
 		} else {
-			this.element.show();
+			show(this.element);
 		}
 	}
 
 	hide(): void {
-		this.element.hide();
+		hide(this.element);
+		this.showDelayedScheduler.cancel();
 	}
 
 	style(styles: IProgressBarStyles): void {