From 70e48eeb5257628b141a1f3a8d0d2d42f17942f2 Mon Sep 17 00:00:00 2001
From: Johannes Rieken <johannes.rieken@gmail.com>
Date: Fri, 8 Feb 2019 15:19:17 +0100
Subject: [PATCH] debt - more promise cleanup

---
 ...guage-services-hover-provider-example.html |   6 +-
 test/samples.js                               |  40 +-
 test/tokenization.html                        |   4 +-
 .../hover-provider-example/sample.js          |  10 +-
 website/playground/playground.js              | 718 +++++++++---------
 5 files changed, 386 insertions(+), 392 deletions(-)

diff --git a/test/playground.generated/extending-language-services-hover-provider-example.html b/test/playground.generated/extending-language-services-hover-provider-example.html
index 2b499d66..cf0efc19 100644
--- a/test/playground.generated/extending-language-services-hover-provider-example.html
+++ b/test/playground.generated/extending-language-services-hover-provider-example.html
@@ -60,7 +60,7 @@ monaco.editor.create(document.getElementById("container"), {
 
 function xhr(url) {
 	var req = null;
-	return new monaco.Promise(function(c,e,p) {
+	return new Promise(function(c,e) {
 		req = new XMLHttpRequest();
 		req.onreadystatechange = function () {
 			if (req._canceled) { return; }
@@ -72,8 +72,6 @@ function xhr(url) {
 					e(req);
 				}
 				req.onreadystatechange = function () { };
-			} else {
-				p(req);
 			}
 		};
 
@@ -92,4 +90,4 @@ function xhr(url) {
 });
 </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/test/samples.js b/test/samples.js
index 98885f79..28f59418 100644
--- a/test/samples.js
+++ b/test/samples.js
@@ -1,40 +1,40 @@
 /// <reference path="../node_modules/monaco-editor-core/monaco.d.ts" />
 
-define(['./samples-all.generated'], function(ALL_SAMPLES) {
+define(['./samples-all.generated'], function (ALL_SAMPLES) {
 
 	var XHR_SAMPLES = {};
-	ALL_SAMPLES.forEach(function(sample) {
+	ALL_SAMPLES.forEach(function (sample) {
 		XHR_SAMPLES[sample.name] = sample.content;
 	});
 
 	var samples = [];
 
-	var modesIds = monaco.languages.getLanguages().map(function(language) { return language.id; });
+	var modesIds = monaco.languages.getLanguages().map(function (language) { return language.id; });
 	modesIds.sort();
 
-	modesIds.forEach(function(modeId) {
+	modesIds.forEach(function (modeId) {
 		samples.push({
 			name: 'sample - ' + modeId,
 			mimeType: modeId,
-			loadText: function() {
-				return monaco.Promise.as(XHR_SAMPLES['sample.' + modeId + '.txt']);
+			loadText: function () {
+				return Promise.resolve(XHR_SAMPLES['sample.' + modeId + '.txt']);
 			}
 		});
 	});
 
 	function addXHRSample(name, modelUrl, mimeType, textModifier) {
-		textModifier = textModifier || function(text) { return text; };
+		textModifier = textModifier || function (text) { return text; };
 		samples.push({
 			name: name,
 			mimeType: mimeType,
-			loadText: function() {
-				return monaco.Promise.as(XHR_SAMPLES[modelUrl]).then(textModifier);
+			loadText: function () {
+				return Promise.resolve(XHR_SAMPLES[modelUrl]).then(textModifier);
 			}
 		});
 	}
 
 	function addStringPowerXHRSample(name, modelUrl, mimeType, power) {
-		addXHRSample(name, modelUrl, mimeType, function(text) {
+		addXHRSample(name, modelUrl, mimeType, function (text) {
 			var result = text;
 			for (var i = 0; i < power; ++i) {
 				result += "\n" + result;
@@ -47,8 +47,8 @@ define(['./samples-all.generated'], function(ALL_SAMPLES) {
 		samples.push({
 			name: name,
 			mimeType: mimeType,
-			loadText: function() {
-				return monaco.Promise.as(modelText);
+			loadText: function () {
+				return Promise.resolve(modelText);
 			}
 		});
 	}
@@ -65,7 +65,7 @@ define(['./samples-all.generated'], function(ALL_SAMPLES) {
 
 	addXHRSample('Z___jquery-min.js', 'run-editor-jquery-min-js.txt', 'text/javascript');
 
-	addXHRSample('Z___scrolling-strategy.js', 'run-editor-sample-js.txt', 'text/plain', function(text) {
+	addXHRSample('Z___scrolling-strategy.js', 'run-editor-sample-js.txt', 'text/plain', function (text) {
 		console.log('here I am');
 		var lines = text.split('\n');
 		var newLines = lines.slice(0);
@@ -98,7 +98,7 @@ define(['./samples-all.generated'], function(ALL_SAMPLES) {
 		'\uDBFF\uDFFF'
 	].join('\n'));
 
-	addSample('Z___easy-debug.js', 'text/plain', (function() {
+	addSample('Z___easy-debug.js', 'text/plain', (function () {
 		var myValue = "Line1";
 		for (var i = 2; i < 50; i++) {
 			myValue += "\nLine" + i;
@@ -106,7 +106,7 @@ define(['./samples-all.generated'], function(ALL_SAMPLES) {
 		return myValue;
 	})());
 
-	addSample('Z___copy-paste.txt', 'text/plain', (function() {
+	addSample('Z___copy-paste.txt', 'text/plain', (function () {
 		var i = 0, sampleCopyPasteLine = '';
 		while (sampleCopyPasteLine.length < 1000) {
 			i++;
@@ -119,7 +119,7 @@ define(['./samples-all.generated'], function(ALL_SAMPLES) {
 		return sampleCopyPaste;
 	})());
 
-	addSample('Z___xss', 'text/html', (function() {
+	addSample('Z___xss', 'text/html', (function () {
 		var xssRepresentations = [
 			'<',
 			'BAD\u2028CHARACTER',
@@ -196,7 +196,7 @@ define(['./samples-all.generated'], function(ALL_SAMPLES) {
 		return xssRepresentations.length + ':\n' + xssRepresentations.join('\n');
 	})());
 
-	addSample('Z___many-links.js', 'text/javascript', (function() {
+	addSample('Z___many-links.js', 'text/javascript', (function () {
 		var result = "bla bla a url: https://microsoft.com some more bla bla";
 		for (var i = 0; i < 13; ++i) {
 			result += "\n" + result;
@@ -204,7 +204,7 @@ define(['./samples-all.generated'], function(ALL_SAMPLES) {
 		return "/*" + result + "\n*/";
 	})());
 
-	addSample('Z___line-separators.js', 'text/javascript', (function() {
+	addSample('Z___line-separators.js', 'text/javascript', (function () {
 		return [
 			"var x = '1'; // And\u2028 here I have a nice comment.",
 			"",
@@ -216,7 +216,7 @@ define(['./samples-all.generated'], function(ALL_SAMPLES) {
 
 	addXHRSample('Z___intellisense.js', 'run-editor-intellisense-js.txt', 'text/javascript');
 
-	addSample('Z___recursion attack', 'text/html', (function() {
+	addSample('Z___recursion attack', 'text/html', (function () {
 		var arr = [];
 		for (var i = 0; i < 10000; i++) {
 			arr.push('\n<script type="text/html">');
@@ -238,7 +238,7 @@ define(['./samples-all.generated'], function(ALL_SAMPLES) {
 		}
 	});
 
-	addXHRSample('Z___f12___css','run-editor-sample-f12-css.txt','text/css');
+	addXHRSample('Z___f12___css', 'run-editor-sample-f12-css.txt', 'text/css');
 
 	return samples;
 });
diff --git a/test/tokenization.html b/test/tokenization.html
index e154d15a..e1aecd29 100644
--- a/test/tokenization.html
+++ b/test/tokenization.html
@@ -69,7 +69,7 @@
 			}
 
 			require(['./samples'], function(SAMPLES) {
-				monaco.Promise.join(
+				Promise.all(
 					SAMPLES.map(resolveSample)
 				).then(function(samples) {
 					renderSamples(samples);
@@ -323,4 +323,4 @@
 <div id="qunit"></div>
 <div id="qunit-fixture"></div>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/website/playground/new-samples/extending-language-services/hover-provider-example/sample.js b/website/playground/new-samples/extending-language-services/hover-provider-example/sample.js
index 2b99ea53..6366a59d 100644
--- a/website/playground/new-samples/extending-language-services/hover-provider-example/sample.js
+++ b/website/playground/new-samples/extending-language-services/hover-provider-example/sample.js
@@ -2,8 +2,8 @@
 monaco.languages.register({ id: 'mySpecialLanguage' });
 
 monaco.languages.registerHoverProvider('mySpecialLanguage', {
-	provideHover: function(model, position) {
-		return xhr('../playground.html').then(function(res) {
+	provideHover: function (model, position) {
+		return xhr('../playground.html').then(function (res) {
 			return {
 				range: new monaco.Range(1, 1, model.getLineCount(), model.getLineMaxColumn(model.getLineCount())),
 				contents: [
@@ -22,7 +22,7 @@ monaco.editor.create(document.getElementById("container"), {
 
 function xhr(url) {
 	var req = null;
-	return new monaco.Promise(function(c,e,p) {
+	return new Promise(function (c, e) {
 		req = new XMLHttpRequest();
 		req.onreadystatechange = function () {
 			if (req._canceled) { return; }
@@ -34,12 +34,10 @@ function xhr(url) {
 					e(req);
 				}
 				req.onreadystatechange = function () { };
-			} else {
-				p(req);
 			}
 		};
 
-		req.open("GET", url, true );
+		req.open("GET", url, true);
 		req.responseType = "";
 
 		req.send(null);
diff --git a/website/playground/playground.js b/website/playground/playground.js
index e6481283..4b777bcb 100644
--- a/website/playground/playground.js
+++ b/website/playground/playground.js
@@ -1,386 +1,384 @@
 /// <reference path="../../release/monaco.d.ts" />
 
-(function() {
+(function () {
 
-'use strict';
+	'use strict';
+
+	window.onload = function () {
+		require(['vs/editor/editor.main'], function () {
+			xhr('playground/monaco.d.ts.txt').then(function (response) {
+				monaco.languages.typescript.javascriptDefaults.addExtraLib(response.responseText, 'monaco.d.ts');
+				monaco.languages.typescript.javascriptDefaults.addExtraLib([
+					'declare var require: {',
+					'	toUrl(path: string): string;',
+					'	(moduleName: string): any;',
+					'	(dependencies: string[], callback: (...args: any[]) => any, errorback?: (err: any) => void): any;',
+					'	config(data: any): any;',
+					'	onError: Function;',
+					'};',
+				].join('\n'), 'require.d.ts');
+			});
+
+			var loading = document.getElementById('loading');
+			loading.parentNode.removeChild(loading);
+			load();
 
-window.onload = function() {
-	require(['vs/editor/editor.main'], function() {
-		xhr('playground/monaco.d.ts.txt').then(function(response) {
-			monaco.languages.typescript.javascriptDefaults.addExtraLib(response.responseText, 'monaco.d.ts');
-			monaco.languages.typescript.javascriptDefaults.addExtraLib([
-				'declare var require: {',
-				'	toUrl(path: string): string;',
-				'	(moduleName: string): any;',
-				'	(dependencies: string[], callback: (...args: any[]) => any, errorback?: (err: any) => void): any;',
-				'	config(data: any): any;',
-				'	onError: Function;',
-				'};',
-			].join('\n'), 'require.d.ts');
 		});
+	};
 
-		var loading = document.getElementById('loading');
-		loading.parentNode.removeChild(loading);
-		load();
+	var editor = null;
+	var data = {
+		js: {
+			model: null,
+			state: null
+		},
+		css: {
+			model: null,
+			state: null
+		},
+		html: {
+			model: null,
+			state: null
+		}
+	};
 
-	});
-};
+	function load() {
 
-var editor = null;
-var data = {
-	js: {
-		model: null,
-		state: null
-	},
-	css: {
-		model: null,
-		state: null
-	},
-	html: {
-		model: null,
-		state: null
-	}
-};
+		function layout() {
+			var GLOBAL_PADDING = 20;
 
-function load() {
+			var WIDTH = window.innerWidth - 2 * GLOBAL_PADDING;
+			var HEIGHT = window.innerHeight;
 
-	function layout() {
-		var GLOBAL_PADDING = 20;
+			var TITLE_HEIGHT = 110;
+			var FOOTER_HEIGHT = 80;
+			var TABS_HEIGHT = 20;
+			var INNER_PADDING = 20;
+			var SWITCHER_HEIGHT = 30;
 
-		var WIDTH = window.innerWidth - 2 * GLOBAL_PADDING;
-		var HEIGHT = window.innerHeight;
+			var HALF_WIDTH = Math.floor((WIDTH - INNER_PADDING) / 2);
+			var REMAINING_HEIGHT = HEIGHT - TITLE_HEIGHT - FOOTER_HEIGHT - SWITCHER_HEIGHT;
 
-		var TITLE_HEIGHT = 110;
-		var FOOTER_HEIGHT = 80;
-		var TABS_HEIGHT = 20;
-		var INNER_PADDING = 20;
-		var SWITCHER_HEIGHT = 30;
+			playgroundContainer.style.width = WIDTH + 'px';
+			playgroundContainer.style.height = (HEIGHT - FOOTER_HEIGHT) + 'px';
 
-		var HALF_WIDTH = Math.floor((WIDTH - INNER_PADDING) / 2);
-		var REMAINING_HEIGHT = HEIGHT - TITLE_HEIGHT - FOOTER_HEIGHT - SWITCHER_HEIGHT;
+			sampleSwitcher.style.position = 'absolute';
+			sampleSwitcher.style.top = TITLE_HEIGHT + 'px';
+			sampleSwitcher.style.left = GLOBAL_PADDING + 'px';
 
-		playgroundContainer.style.width = WIDTH + 'px';
-		playgroundContainer.style.height = (HEIGHT - FOOTER_HEIGHT) + 'px';
+			typingContainer.style.position = 'absolute';
+			typingContainer.style.top = GLOBAL_PADDING + TITLE_HEIGHT + SWITCHER_HEIGHT + 'px';
+			typingContainer.style.left = GLOBAL_PADDING + 'px';
+			typingContainer.style.width = HALF_WIDTH + 'px';
+			typingContainer.style.height = REMAINING_HEIGHT + 'px';
 
-		sampleSwitcher.style.position = 'absolute';
-		sampleSwitcher.style.top = TITLE_HEIGHT + 'px';
-		sampleSwitcher.style.left = GLOBAL_PADDING + 'px';
+			tabArea.style.position = 'absolute';
+			tabArea.style.boxSizing = 'border-box';
+			tabArea.style.top = 0;
+			tabArea.style.left = 0;
+			tabArea.style.width = HALF_WIDTH + 'px';
+			tabArea.style.height = TABS_HEIGHT + 'px';
 
-		typingContainer.style.position = 'absolute';
-		typingContainer.style.top = GLOBAL_PADDING + TITLE_HEIGHT + SWITCHER_HEIGHT + 'px';
-		typingContainer.style.left = GLOBAL_PADDING + 'px';
-		typingContainer.style.width = HALF_WIDTH + 'px';
-		typingContainer.style.height = REMAINING_HEIGHT + 'px';
+			editorContainer.style.position = 'absolute';
+			editorContainer.style.boxSizing = 'border-box';
+			editorContainer.style.top = TABS_HEIGHT + 'px';
+			editorContainer.style.left = 0;
+			editorContainer.style.width = HALF_WIDTH + 'px';
+			editorContainer.style.height = (REMAINING_HEIGHT - TABS_HEIGHT) + 'px';
 
-		tabArea.style.position = 'absolute';
-		tabArea.style.boxSizing = 'border-box';
-		tabArea.style.top = 0;
-		tabArea.style.left = 0;
-		tabArea.style.width = HALF_WIDTH + 'px';
-		tabArea.style.height = TABS_HEIGHT + 'px';
+			if (editor) {
+				editor.layout({
+					width: HALF_WIDTH - 2,
+					height: (REMAINING_HEIGHT - TABS_HEIGHT) - 1
+				});
+			}
 
-		editorContainer.style.position = 'absolute';
-		editorContainer.style.boxSizing = 'border-box';
-		editorContainer.style.top = TABS_HEIGHT + 'px';
-		editorContainer.style.left = 0;
-		editorContainer.style.width = HALF_WIDTH + 'px';
-		editorContainer.style.height = (REMAINING_HEIGHT - TABS_HEIGHT) + 'px';
+			runContainer.style.position = 'absolute';
+			runContainer.style.top = GLOBAL_PADDING + TITLE_HEIGHT + SWITCHER_HEIGHT + TABS_HEIGHT + 'px';
+			runContainer.style.left = GLOBAL_PADDING + INNER_PADDING + HALF_WIDTH + 'px';
+			runContainer.style.width = HALF_WIDTH + 'px';
+			runContainer.style.height = (REMAINING_HEIGHT - TABS_HEIGHT) + 'px';
 
-		if (editor) {
-			editor.layout({
-				width: HALF_WIDTH - 2,
-				height: (REMAINING_HEIGHT - TABS_HEIGHT) - 1
+			runIframeHeight = (REMAINING_HEIGHT - TABS_HEIGHT);
+			if (runIframe) {
+				runIframe.style.height = runIframeHeight + 'px';
+			}
+		}
+
+		function changeTab(selectedTabNode, desiredModelId) {
+			for (var i = 0; i < tabArea.childNodes.length; i++) {
+				var child = tabArea.childNodes[i];
+				if (/tab/.test(child.className)) {
+					child.className = 'tab';
+				}
+			}
+			selectedTabNode.className = 'tab active';
+
+			var currentState = editor.saveViewState();
+
+			var currentModel = editor.getModel();
+			if (currentModel === data.js.model) {
+				data.js.state = currentState;
+			} else if (currentModel === data.css.model) {
+				data.css.state = currentState;
+			} else if (currentModel === data.html.model) {
+				data.html.state = currentState;
+			}
+
+			editor.setModel(data[desiredModelId].model);
+			editor.restoreViewState(data[desiredModelId].state);
+			editor.focus();
+		}
+
+
+		// create the typing side
+		var typingContainer = document.createElement('div');
+		typingContainer.className = 'typingContainer';
+
+		var tabArea = (function () {
+			var tabArea = document.createElement('div');
+			tabArea.className = 'tabArea';
+
+			var jsTab = document.createElement('span');
+			jsTab.className = 'tab active';
+			jsTab.appendChild(document.createTextNode('JavaScript'));
+			jsTab.onclick = function () { changeTab(jsTab, 'js'); };
+			tabArea.appendChild(jsTab);
+
+			var cssTab = document.createElement('span');
+			cssTab.className = 'tab';
+			cssTab.appendChild(document.createTextNode('CSS'));
+			cssTab.onclick = function () { changeTab(cssTab, 'css'); };
+			tabArea.appendChild(cssTab);
+
+			var htmlTab = document.createElement('span');
+			htmlTab.className = 'tab';
+			htmlTab.appendChild(document.createTextNode('HTML'));
+			htmlTab.onclick = function () { changeTab(htmlTab, 'html'); };
+			tabArea.appendChild(htmlTab);
+
+			var runBtn = document.createElement('span');
+			runBtn.className = 'action run';
+			runBtn.appendChild(document.createTextNode('Run'));
+			runBtn.onclick = function () { run(); };
+			tabArea.appendChild(runBtn);
+
+			return tabArea;
+		})();
+
+		var editorContainer = document.createElement('div');
+		editorContainer.className = 'editor-container';
+
+		typingContainer.appendChild(tabArea);
+		typingContainer.appendChild(editorContainer);
+
+		var runContainer = document.createElement('div');
+		runContainer.className = 'run-container';
+
+		var sampleSwitcher = document.createElement('select');
+		var sampleChapter;
+		PLAY_SAMPLES.forEach(function (sample) {
+			if (!sampleChapter || sampleChapter.label !== sample.chapter) {
+				sampleChapter = document.createElement('optgroup');
+				sampleChapter.label = sample.chapter;
+				sampleSwitcher.appendChild(sampleChapter);
+			}
+			var sampleOption = document.createElement('option');
+			sampleOption.value = sample.id;
+			sampleOption.appendChild(document.createTextNode(sample.name));
+			sampleChapter.appendChild(sampleOption);
+		});
+		sampleSwitcher.className = 'sample-switcher';
+
+		var LOADED_SAMPLES = [];
+		function findLoadedSample(sampleId) {
+			for (var i = 0; i < LOADED_SAMPLES.length; i++) {
+				var sample = LOADED_SAMPLES[i];
+				if (sample.id === sampleId) {
+					return sample;
+				}
+			}
+			return null;
+		}
+
+		function findSamplePath(sampleId) {
+			for (var i = 0; i < PLAY_SAMPLES.length; i++) {
+				var sample = PLAY_SAMPLES[i];
+				if (sample.id === sampleId) {
+					return sample.path;
+				}
+			}
+			return null;
+		}
+
+		function loadSample(sampleId, callback) {
+			var sample = findLoadedSample(sampleId);
+			if (sample) {
+				return callback(null, sample);
+			}
+
+			var samplePath = findSamplePath(sampleId);
+			if (!samplePath) {
+				return callback(new Error('sample not found'));
+			}
+
+			samplePath = 'playground/new-samples/' + samplePath;
+
+			var js = xhr(samplePath + '/sample.js').then(function (response) { return response.responseText });
+			var css = xhr(samplePath + '/sample.css').then(function (response) { return response.responseText });
+			var html = xhr(samplePath + '/sample.html').then(function (response) { return response.responseText });
+			Promise.all([js, css, html]).then(function (_) {
+				var js = _[0];
+				var css = _[1];
+				var html = _[2];
+				LOADED_SAMPLES.push({
+					id: sampleId,
+					js: js,
+					css: css,
+					html: html
+				});
+				return callback(null, findLoadedSample(sampleId));
+			}, function (err) {
+				callback(err, null);
 			});
 		}
 
-		runContainer.style.position = 'absolute';
-		runContainer.style.top = GLOBAL_PADDING + TITLE_HEIGHT + SWITCHER_HEIGHT + TABS_HEIGHT + 'px';
-		runContainer.style.left = GLOBAL_PADDING + INNER_PADDING + HALF_WIDTH + 'px';
-		runContainer.style.width = HALF_WIDTH + 'px';
-		runContainer.style.height = (REMAINING_HEIGHT - TABS_HEIGHT) + 'px';
-
-		runIframeHeight = (REMAINING_HEIGHT - TABS_HEIGHT);
-		if (runIframe) {
-			runIframe.style.height = runIframeHeight + 'px';
-		}
-	}
-
-	function changeTab(selectedTabNode, desiredModelId) {
-		for (var i = 0; i < tabArea.childNodes.length; i++) {
-			var child = tabArea.childNodes[i];
-			if (/tab/.test(child.className)) {
-				child.className = 'tab';
-			}
-		}
-		selectedTabNode.className = 'tab active';
-
-		var currentState = editor.saveViewState();
-
-		var currentModel = editor.getModel();
-		if (currentModel === data.js.model) {
-			data.js.state = currentState;
-		} else if (currentModel === data.css.model) {
-			data.css.state = currentState;
-		} else if (currentModel === data.html.model) {
-			data.html.state = currentState;
-		}
-
-		editor.setModel(data[desiredModelId].model);
-		editor.restoreViewState(data[desiredModelId].state);
-		editor.focus();
-	}
-
-
-	// create the typing side
-	var typingContainer = document.createElement('div');
-	typingContainer.className = 'typingContainer';
-
-	var tabArea = (function() {
-		var tabArea = document.createElement('div');
-		tabArea.className = 'tabArea';
-
-		var jsTab = document.createElement('span');
-		jsTab.className = 'tab active';
-		jsTab.appendChild(document.createTextNode('JavaScript'));
-		jsTab.onclick = function() { changeTab(jsTab, 'js'); };
-		tabArea.appendChild(jsTab);
-
-		var cssTab = document.createElement('span');
-		cssTab.className = 'tab';
-		cssTab.appendChild(document.createTextNode('CSS'));
-		cssTab.onclick = function() { changeTab(cssTab, 'css'); };
-		tabArea.appendChild(cssTab);
-
-		var htmlTab = document.createElement('span');
-		htmlTab.className = 'tab';
-		htmlTab.appendChild(document.createTextNode('HTML'));
-		htmlTab.onclick = function() { changeTab(htmlTab, 'html'); };
-		tabArea.appendChild(htmlTab);
-
-		var runBtn = document.createElement('span');
-		runBtn.className = 'action run';
-		runBtn.appendChild(document.createTextNode('Run'));
-		runBtn.onclick = function() { run(); };
-		tabArea.appendChild(runBtn);
-
-		return tabArea;
-	})();
-
-	var editorContainer = document.createElement('div');
-	editorContainer.className = 'editor-container';
-
-	typingContainer.appendChild(tabArea);
-	typingContainer.appendChild(editorContainer);
-
-	var runContainer = document.createElement('div');
-	runContainer.className = 'run-container';
-
-	var sampleSwitcher = document.createElement('select');
-	var sampleChapter;
-	PLAY_SAMPLES.forEach(function (sample) {
-		if (!sampleChapter || sampleChapter.label !== sample.chapter) {
-			sampleChapter = document.createElement('optgroup');
-			sampleChapter.label = sample.chapter;
-			sampleSwitcher.appendChild(sampleChapter);
-		}
-		var sampleOption = document.createElement('option');
-		sampleOption.value = sample.id;
-		sampleOption.appendChild(document.createTextNode(sample.name));
-		sampleChapter.appendChild(sampleOption);
-	});
-	sampleSwitcher.className = 'sample-switcher';
-
-	var LOADED_SAMPLES = [];
-	function findLoadedSample(sampleId) {
-		for (var i = 0; i < LOADED_SAMPLES.length; i++) {
-			var sample = LOADED_SAMPLES[i];
-			if (sample.id === sampleId) {
-				return sample;
-			}
-		}
-		return null;
-	}
-
-	function findSamplePath(sampleId) {
-		for (var i = 0; i < PLAY_SAMPLES.length; i++) {
-			var sample = PLAY_SAMPLES[i];
-			if (sample.id === sampleId) {
-				return sample.path;
-			}
-		}
-		return null;
-	}
-
-	function loadSample(sampleId, callback) {
-		var sample = findLoadedSample(sampleId);
-		if (sample) {
-			return callback(null, sample);
-		}
-
-		var samplePath = findSamplePath(sampleId);
-		if (!samplePath) {
-			return callback(new Error('sample not found'));
-		}
-
-		samplePath = 'playground/new-samples/' + samplePath;
-
-		var js = xhr(samplePath + '/sample.js').then(function(response) { return response.responseText});
-		var css = xhr(samplePath + '/sample.css').then(function(response) { return response.responseText});
-		var html = xhr(samplePath + '/sample.html').then(function(response) { return response.responseText});
-		monaco.Promise.join([js, css, html]).then(function(_) {
-			var js = _[0];
-			var css = _[1];
-			var html = _[2];
-			LOADED_SAMPLES.push({
-				id: sampleId,
-				js: js,
-				css: css,
-				html: html
-			});
-			return callback(null, findLoadedSample(sampleId));
-		}, function(err) {
-			callback(err, null);
-		});
-	}
-
-	sampleSwitcher.onchange = function() {
-		var sampleId = sampleSwitcher.options[sampleSwitcher.selectedIndex].value;
-		window.location.hash = sampleId;
-	};
-
-	var playgroundContainer = document.getElementById('playground');
-
-	layout();
-	window.onresize = layout;
-
-	playgroundContainer.appendChild(sampleSwitcher);
-	playgroundContainer.appendChild(typingContainer);
-	playgroundContainer.appendChild(runContainer);
-
-	data.js.model = monaco.editor.createModel('console.log("hi")', 'javascript');
-	data.css.model = monaco.editor.createModel('css', 'css');
-	data.html.model = monaco.editor.createModel('html', 'html');
-
-	editor = monaco.editor.create(editorContainer, {
-		model: data.js.model,
-		minimap: {
-			enabled: false
-		}
-	});
-
-	var currentToken = 0;
-	function parseHash(firstTime) {
-		var sampleId = window.location.hash.replace(/^#/, '');
-		if (!sampleId) {
-			sampleId = PLAY_SAMPLES[0].id;
-		}
-
-		if (firstTime) {
-			for (var i = 0; i < sampleSwitcher.options.length; i++) {
-				var opt = sampleSwitcher.options[i];
-				if (opt.value === sampleId) {
-					sampleSwitcher.selectedIndex = i;
-					break;
-				}
-			}
-		}
-
-		var myToken = (++currentToken);
-		loadSample(sampleId, function(err, sample) {
-			if (err) {
-				alert('Sample not found! ' + err.message);
-				return;
-			}
-			if (myToken !== currentToken) {
-				return;
-			}
-			data.js.model.setValue(sample.js);
-			data.html.model.setValue(sample.html);
-			data.css.model.setValue(sample.css);
-			editor.setScrollTop(0);
-			run();
-		});
-	}
-	window.onhashchange = parseHash;
-	parseHash(true);
-
-	function run() {
-		doRun(runContainer);
-	}
-}
-
-var runIframe = null, runIframeHeight = 0;
-function doRun(runContainer) {
-	if (runIframe) {
-		// Unload old iframe
-		runContainer.removeChild(runIframe);
-	}
-
-	// Load new iframe
-	runIframe = document.createElement('iframe');
-	runIframe.id = 'runner';
-	runIframe.src = 'playground/playground-runner.html';
-	runIframe.className = 'run-iframe';
-	runIframe.style.boxSizing = 'border-box';
-	runIframe.style.height = runIframeHeight + 'px';
-	runIframe.style.width = '100%';
-	runIframe.style.border = '1px solid lightgrey';
-	runIframe.frameborder = '0';
-	runContainer.appendChild(runIframe);
-
-	var getLang = function(lang) {
-		return data[lang].model.getValue();
-	};
-
-	runIframe.addEventListener('load', function(e) {
-		runIframe.contentWindow.load(getLang('js'), getLang('html'), getLang('css'));
-	});
-}
-
-var preloaded = {};
-(function() {
-	var elements = Array.prototype.slice.call(document.querySelectorAll('pre[data-preload]'), 0);
-
-	elements.forEach(function(el) {
-		var path = el.getAttribute('data-preload');
-		preloaded[path] = el.innerText || el.textContent;
-		el.parentNode.removeChild(el);
-	});
-})();
-
-function xhr(url) {
-	if (preloaded[url]) {
-		return monaco.Promise.as({
-			responseText: preloaded[url]
-		});
-	}
-
-	var req = null;
-	return new monaco.Promise(function(c,e,p) {
-		req = new XMLHttpRequest();
-		req.onreadystatechange = function () {
-			if (req._canceled) { return; }
-
-			if (req.readyState === 4) {
-				if ((req.status >= 200 && req.status < 300) || req.status === 1223) {
-					c(req);
-				} else {
-					e(req);
-				}
-				req.onreadystatechange = function () { };
-			} else {
-				p(req);
-			}
+		sampleSwitcher.onchange = function () {
+			var sampleId = sampleSwitcher.options[sampleSwitcher.selectedIndex].value;
+			window.location.hash = sampleId;
 		};
 
-		req.open("GET", url, true );
-		req.responseType = "";
+		var playgroundContainer = document.getElementById('playground');
 
-		req.send(null);
-	}, function () {
-		req._canceled = true;
-		req.abort();
-	});
-}
+		layout();
+		window.onresize = layout;
 
-})();
\ No newline at end of file
+		playgroundContainer.appendChild(sampleSwitcher);
+		playgroundContainer.appendChild(typingContainer);
+		playgroundContainer.appendChild(runContainer);
+
+		data.js.model = monaco.editor.createModel('console.log("hi")', 'javascript');
+		data.css.model = monaco.editor.createModel('css', 'css');
+		data.html.model = monaco.editor.createModel('html', 'html');
+
+		editor = monaco.editor.create(editorContainer, {
+			model: data.js.model,
+			minimap: {
+				enabled: false
+			}
+		});
+
+		var currentToken = 0;
+		function parseHash(firstTime) {
+			var sampleId = window.location.hash.replace(/^#/, '');
+			if (!sampleId) {
+				sampleId = PLAY_SAMPLES[0].id;
+			}
+
+			if (firstTime) {
+				for (var i = 0; i < sampleSwitcher.options.length; i++) {
+					var opt = sampleSwitcher.options[i];
+					if (opt.value === sampleId) {
+						sampleSwitcher.selectedIndex = i;
+						break;
+					}
+				}
+			}
+
+			var myToken = (++currentToken);
+			loadSample(sampleId, function (err, sample) {
+				if (err) {
+					alert('Sample not found! ' + err.message);
+					return;
+				}
+				if (myToken !== currentToken) {
+					return;
+				}
+				data.js.model.setValue(sample.js);
+				data.html.model.setValue(sample.html);
+				data.css.model.setValue(sample.css);
+				editor.setScrollTop(0);
+				run();
+			});
+		}
+		window.onhashchange = parseHash;
+		parseHash(true);
+
+		function run() {
+			doRun(runContainer);
+		}
+	}
+
+	var runIframe = null, runIframeHeight = 0;
+	function doRun(runContainer) {
+		if (runIframe) {
+			// Unload old iframe
+			runContainer.removeChild(runIframe);
+		}
+
+		// Load new iframe
+		runIframe = document.createElement('iframe');
+		runIframe.id = 'runner';
+		runIframe.src = 'playground/playground-runner.html';
+		runIframe.className = 'run-iframe';
+		runIframe.style.boxSizing = 'border-box';
+		runIframe.style.height = runIframeHeight + 'px';
+		runIframe.style.width = '100%';
+		runIframe.style.border = '1px solid lightgrey';
+		runIframe.frameborder = '0';
+		runContainer.appendChild(runIframe);
+
+		var getLang = function (lang) {
+			return data[lang].model.getValue();
+		};
+
+		runIframe.addEventListener('load', function (e) {
+			runIframe.contentWindow.load(getLang('js'), getLang('html'), getLang('css'));
+		});
+	}
+
+	var preloaded = {};
+	(function () {
+		var elements = Array.prototype.slice.call(document.querySelectorAll('pre[data-preload]'), 0);
+
+		elements.forEach(function (el) {
+			var path = el.getAttribute('data-preload');
+			preloaded[path] = el.innerText || el.textContent;
+			el.parentNode.removeChild(el);
+		});
+	})();
+
+	function xhr(url) {
+		if (preloaded[url]) {
+			return Promise.resolve({
+				responseText: preloaded[url]
+			});
+		}
+
+		var req = null;
+		return new Promise(function (c, e) {
+			req = new XMLHttpRequest();
+			req.onreadystatechange = function () {
+				if (req._canceled) { return; }
+
+				if (req.readyState === 4) {
+					if ((req.status >= 200 && req.status < 300) || req.status === 1223) {
+						c(req);
+					} else {
+						e(req);
+					}
+					req.onreadystatechange = function () { };
+				}
+			};
+
+			req.open("GET", url, true);
+			req.responseType = "";
+
+			req.send(null);
+		}, function () {
+			req._canceled = true;
+			req.abort();
+		});
+	}
+
+})();