Optimize loading speed of the website pages

.vscode/settings.json

@@ -5,5 +5,6 @@
 		"**/node_modules": true,
 		"**/bower_components": true,
 		"**/release": true
-	}
+	},
+	"typescript.tsdk": "./node_modules/typescript/lib"
 }

gulpfile.js

@@ -8,6 +8,8 @@ var rimraf = require('rimraf');
 var cp = require('child_process');
 var httpServer = require('http-server');
 var typedoc = require("gulp-typedoc");
+var CleanCSS = require('clean-css');
+var uncss = require('uncss');
 
 var WEBSITE_GENERATED_PATH = path.join(__dirname, 'website/playground/new-samples');
 var MONACO_EDITOR_VERSION = (function() {
@@ -247,6 +249,16 @@ function addPluginThirdPartyNotices() {
 gulp.task('clean-website', function(cb) { rimraf('../monaco-editor-website', { maxBusyTries: 1 }, cb); });
 gulp.task('website', ['clean-website'], function() {
 
+	function replaceWithRelativeResource(dataPath, contents, regex, callback) {
+		return contents.replace(regex, function(_, m0) {
+			var filePath = path.join(path.dirname(dataPath), m0);
+			return callback(m0, fs.readFileSync(filePath));
+		});
+	}
+
+	var waiting = 0;
+	var done = false;
+
 	return (
 		es.merge(
 			gulp.src([
@@ -254,7 +266,7 @@ gulp.task('website', ['clean-website'], function() {
 				'!website/typedoc-theme/**'
 			], { dot: true })
 			.pipe(es.through(function(data) {
-				if (!data.contents || !/\.(html)$/.test(data.path)) {
+				if (!data.contents || !/\.(html)$/.test(data.path) || /new-samples/.test(data.path)) {
 					return this.emit('data', data);
 				}
 
@@ -263,13 +275,73 @@ gulp.task('website', ['clean-website'], function() {
 				contents = contents.replace(/{{version}}/g, MONACO_EDITOR_VERSION);
 				// contents = contents.replace('© 2016 Microsoft', '© 2016 Microsoft [' + builtTime + ']');
 
-				data.contents = new Buffer(contents);
+				// Preload xhr contents
+				contents = replaceWithRelativeResource(data.path, contents, /<pre data-preload="([^"]+)".*/g, function(m0, fileContents) {
+					return (
+						'<pre data-preload="' + m0 + '" style="display:none">'
+						+ fileContents.toString('utf8')
+							.replace(/&/g, '&amp;')
+							.replace(/</g, '&lt;')
+							.replace(/>/g, '&gt;')
+						+ '</pre>'
+					);
+				});
 
-				this.emit('data', data);
+				// Inline fork.png
+				contents = replaceWithRelativeResource(data.path, contents, /src="(\.\/fork.png)"/g, function(m0, fileContents) {
+					return (
+						'src="data:image/png;base64,' + fileContents.toString('base64') + '"'
+					);
+				});
+
+				var allCSS = '';
+				var tmpcontents = replaceWithRelativeResource(data.path, contents, /<link data-inline="yes-please" href="([^"]+)".*/g, function(m0, fileContents) {
+					allCSS += fileContents.toString('utf8');
+					return '';
+				});
+				tmpcontents = tmpcontents.replace(/<script.*/g, '');
+				tmpcontents = tmpcontents.replace(/<link.*/g, '');
+
+				waiting++;
+				uncss(tmpcontents, {
+					raw: allCSS,
+					ignore: [/\.alert\b/, /\.alert-error\b/, /\.playground-page\b/]
+				}, function(err, output) {
+					waiting--;
+
+					if (!err) {
+						output = new CleanCSS().minify(output).styles;
+						var isFirst = true;
+						contents = contents.replace(/<link data-inline="yes-please" href="([^"]+)".*/g, function(_, m0) {
+							if (isFirst) {
+								isFirst = false;
+								return '<style>' + output + '</style>';
+							}
+							return '';
+						});
+					}
+
+					// Inline javascript
+					contents = replaceWithRelativeResource(data.path, contents, /<script data-inline="yes-please" src="([^"]+)".*/g, function(m0, fileContents) {
+						return '<script>' + fileContents.toString('utf8') + '</script>';
+					});
+
+					data.contents = new Buffer(contents.split(/\r\n|\r|\n/).join('\n'));
+					this.emit('data', data);
+
+					if (done && waiting === 0) {
+						this.emit('end');
+					}
+				}.bind(this));
+
+			}, function() {
+				done = true;
+				if (waiting === 0) {
+					this.emit('end');
+				}
 			}))
 			.pipe(gulp.dest('../monaco-editor-website')),
 
-			// node_modules\.bin\typedoc --mode file --out out src\monaco.d.ts --includeDeclarations --theme default --entryPoint monaco --name "Monaco Editor v0.7.0 API" --readme none --hideGenerator
 			gulp.src('monaco.d.ts')
 			.pipe(typedoc({
 				mode: 'file',

package.json

@@ -16,6 +16,7 @@
     "url": "https://github.com/Microsoft/monaco-editor"
   },
   "devDependencies": {
+    "clean-css": "^3.4.20",
     "event-stream": "^3.3.2",
     "gulp": "^3.9.1",
     "gulp-typedoc": "^2.0.0",
@@ -27,6 +28,7 @@
     "monaco-languages": "0.6.0",
     "monaco-typescript": "2.0.1",
     "rimraf": "^2.5.2",
-    "typedoc": "^0.5.0"
+    "typedoc": "^0.5.0",
+    "uncss": "^0.14.1"
   }
 }

website/all.css

@@ -225,6 +225,21 @@ body > section > .container {
 
 }
 
+#gh-link {
+  display: none;
+  position: fixed;
+  top: 0;
+  right: 0;
+  border: 0;
+  margin:0;
+  z-index: 1000;
+}
+@media (min-width: 980px) {
+  #gh-link {
+    display: block;
+  }
+}
+
 @media (min-width: 980px) {
   .navbar .nav {
     float: right;

website/index.html

@@ -9,17 +9,20 @@
 
 	<title>Monaco Editor</title>
 
-	<link href="./lib/bootstrap-cosmo.css" rel="stylesheet">
+	<link data-inline="yes-please" href="./lib/bootstrap-cosmo.css" rel="stylesheet">
-	<link href="./lib/bootstrap-responsive.min.css" rel="stylesheet">
+	<link data-inline="yes-please" href="./lib/bootstrap-responsive.min.css" rel="stylesheet">
-	<link href="./all.css" rel="stylesheet" type="text/css">
+	<link data-inline="yes-please" href="./all.css" rel="stylesheet">
-	<link href="./lib/bootstrap-select.min.css" rel="stylesheet" type="text/css">
+	<link data-inline="yes-please" href="./index/index.css" rel="stylesheet">
 
-	<link href="./index/index.css" rel="stylesheet" type="text/css">
+	<link data-name="vs/editor/editor.main" rel="stylesheet" href="../release/dev/vs/editor/editor.main.css">
 </head>
 
 <body>
-	<a href="https://github.com/Microsoft/monaco-editor"><img style="position: fixed; top: 0; right: 0; border: 0; margin:0; z-index: 1000" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
+	<pre data-preload="index/samples/sample.typescript.txt"></pre>
-
+	<pre data-preload="index/samples/diff.lhs.txt"></pre>
+	<pre data-preload="index/samples/diff.rhs.txt"></pre>
+	<a id="gh-link" href="https://github.com/Microsoft/monaco-editor"><img
+		width="149" height="149" alt="Fork me on GitHub" src="./fork.png"/></a>
 	<nav class="navbar navbar-inverse navbar-fixed-top">
 		<div class="navbar-inner">
 			<div class="container">
@@ -78,10 +81,10 @@
 			<div class="editor row">
 				<div class="span3">
 					<h4 title="Syntax colorization plus support for errors, warnings, IntelliSense, formatting and outlining">Rich IntelliSense, Validation</h4>
-					<p>TypeScript, JavaScript, CSS, LESS</p>
+					<p>TypeScript, JavaScript, CSS, LESS, SCSS, JSON, HTML</p>
 					<br>
 					<h4 title="Syntax colorization">Basic Syntax Colorization</h4>
-					<p>HTML, XML, PHP, C#, C++, Razor, Markdown, Diff, Java, VB, CoffeeScript, Handlebars, Batch, Jade, F#, Lua, Powershell,
+					<p>XML, PHP, C#, C++, Razor, Markdown, Diff, Java, VB, CoffeeScript, Handlebars, Batch, Jade, F#, Lua, Powershell,
 						Python, SASS, R, Objective-C</p>
 					<br>
 					<p>Colorizers are implemented using <a href="monarch.html"
@@ -151,19 +154,14 @@
 		</p>
 	</footer>
 
-	<script src="./lib/jquery-1.9.1.min.js" type="text/javascript"></script>
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script>
-	<script src="./lib/bootstrap.min.js"></script>
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/bootstrap.min.js" integrity="sha256-u+l2mGjpmGK/mFgUncmMcFKdMijvV+J3odlDJZSNUu8=" crossorigin="anonymous"></script>
-	<script src="./lib/bootstrap-select.min.js" type="text/javascript"></script>
 
-	<script type="text/javascript" src="../release/dev/vs/loader.js"></script>
+	<script>var require = { paths: { 'vs': '../release/dev/vs' } };</script>
-	<script type="text/javascript">
+	<script src="../release/dev/vs/loader.js"></script>
-		require.config({
+	<script src="../release/dev/vs/editor/editor.main.nls.js"></script>
-			paths: {
+	<script src="../release/dev/vs/editor/editor.main.js"></script>
-				vs: '../release/dev/vs'
+	<script data-inline="yes-please" src="./index/index.js" type="text/javascript"></script>
-			}
-		});
-	</script>
-	<script src="./index/index.js" type="text/javascript"></script>
 
 </body>
 </html>

website/index/index.css

@@ -134,52 +134,6 @@
 	opacity: 1;
 }
 
-.try .editor.row .bootstrap-select {
-	width: 200px;
-}
-
-.try .editor.row .bootstrap-select .btn {
-	background: none;
-	color: #555;
-	border: 1px solid #ddd;
-	width: 100%;
-}
-
-.try .editor.row .bootstrap-select .open .btn {
-	background-color: #0072C6;
-	color: #FFF;
-}
-
-.try .editor.row .bootstrap-select .open .btn .caret {
-	border-top-color: #FFF;
-}
-
-.try .editor.row .bootstrap-select .btn:focus {
-	outline: 0 auto #0072C6 !important;
-}
-
-.try .editor.row .bootstrap-select .btn:active,
-.try .editor.row .bootstrap-select.btn-group.open .dropdown-toggle {
-	-webkit-box-shadow: none;
-	-moz-box-shadow: none;
-	box-shadow: none;
-}
-
-.try .editor.row .bootstrap-select .dropdown-menu > li > a {
-	color: #555;
-}
-
-.try .editor.row .bootstrap-select .dropdown-menu > li > a:hover {
-	background: none;
-	background-color: #CDE7F9;
-}
-
-.try .editor.row .bootstrap-select .dropdown-menu {
-    margin: 0;
-    border-top: 0
-}
-
-
 .try .editor .editor-frame {
 	position: relative;
 }
@@ -248,15 +202,6 @@
 		width: 50%;
 	}
 
-	.try .editor > .span9 .row .bootstrap-select {
-		display: block;
-		width: 90%;
-	}
-
-	.try .editor > .span9 .row .bootstrap-select .btn {
-		width: 90%;
-	}
-
 	.try .editor h4 {
 		margin-top: 0;
 	}

website/index/index.js

@@ -18,25 +18,24 @@ $(document).ready(function() {
 			});
 		})();
 
+		var startModeIndex = 0;
 		for (var i = 0; i < MODES.length; i++) {
 			var o = document.createElement('option');
 			o.textContent = MODES[i].modeId;
+			if (MODES[i].modeId === 'typescript') {
+				startModeIndex = i;
+			}
 			$(".language-picker").append(o);
 		}
+		$(".language-picker")[0].selectedIndex = startModeIndex;
+		loadSample(MODES[startModeIndex]);
 		$(".language-picker").change(function() {
 			loadSample(MODES[this.selectedIndex]);
 		});
-		$('.language-picker').selectpicker({
-			size: 10
-		});
-		loadSample(MODES[0]);
 
 		$(".theme-picker").change(function() {
 			changeTheme(this.selectedIndex);
 		});
-		$('.theme-picker').selectpicker({
-			size: 3
-		});
 
 		loadDiffSample();
 
@@ -57,15 +56,37 @@ $(document).ready(function() {
 	};
 });
 
-function loadSample(mode) {
+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, cb) {
+	if (preloaded[url]) {
+		return cb(null, preloaded[url]);
+	}
 	$.ajax({
 		type: 'GET',
-		url: mode.sampleURL,
+		url: url,
 		dataType: 'text',
-		beforeSend: function() {
-			$('.loading.editor').show();
-		},
 		error: function () {
+			cb(this, null);
+		}
+	}).done(function(data) {
+		cb(null, data);
+	});
+}
+
+function loadSample(mode) {
+	$('.loading.editor').show();
+	xhr(mode.sampleURL, function(err, data) {
+		if (err) {
 			if (editor) {
 				if (editor.getModel()) {
 					editor.getModel().dispose();
@@ -76,8 +97,9 @@ function loadSample(mode) {
 			$('.loading.editor').fadeOut({ duration: 200 });
 			$('#editor').empty();
 			$('#editor').append('<p class="alert alert-error">Failed to load ' + mode.modeId + ' sample</p>');
+			return;
 		}
-	}).done(function (data) {
+
 		if (!editor) {
 			$('#editor').empty();
 			editor = monaco.editor.create(document.getElementById('editor'), {
@@ -92,7 +114,7 @@ function loadSample(mode) {
 			oldModel.dispose();
 		}
 		$('.loading.editor').fadeOut({ duration: 300 });
-	});
+	})
 }
 
 function loadDiffSample() {
@@ -106,25 +128,20 @@ function loadDiffSample() {
 
 	var lhsData = null, rhsData = null, jsMode = null;
 
-	$.ajax({
+	xhr('index/samples/diff.lhs.txt', function(err, data) {
-		type: 'GET',
+		if (err) {
-		url: 'index/samples/diff.lhs.txt',
+			return onError();
-		dataType: 'text',
+		}
-		error: onError
-	}).done(function (data) {
 		lhsData = data;
 		onProgress();
-	});
+	})
-
+	xhr('index/samples/diff.rhs.txt', function(err, data) {
-	$.ajax({
+		if (err) {
-		type: 'GET',
+			return onError();
-		url: 'index/samples/diff.rhs.txt',
+		}
-		dataType: 'text',
-		error: onError
-	}).done(function (data) {
 		rhsData = data;
 		onProgress();
-	});
+	})
 
 	function onProgress() {
 		if (lhsData && rhsData) {

website/lib/bootstrap-cosmo.css

@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,600,700');
-
 /*!
  * Bootstrap v2.3.0
  *

website/lib/bootstrap-select.min.css

@@ -1 +0,0 @@
-.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}.bootstrap-select.btn-group,.bootstrap-select.btn-group[class*="span"]{float:none;display:inline-block;margin-bottom:10px;margin-left:0}.bootstrap-select{width:220px}.bootstrap-select .btn{width:220px}.bootstrap-select .btn:focus{outline:thin dotted #333!important;outline:5px auto -webkit-focus-ring-color!important;outline-offset:-2px}.bootstrap-select.btn-group .btn .filter-option{overflow:hidden;position:absolute;left:12px;right:25px;text-align:left}.bootstrap-select.btn-group .btn .caret{position:absolute;right:12px}.bootstrap-select.btn-group>.disabled,.bootstrap-select.btn-group .dropdown-menu li.disabled>a{cursor:not-allowed}.bootstrap-select.btn-group[class*="span"] .btn{width:100%}.bootstrap-select.btn-group .dropdown-menu{min-width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.bootstrap-select.btn-group .dropdown-menu dt{display:block;padding:3px 20px;cursor:default}.bootstrap-select.btn-group .div-contain{overflow:hidden}.bootstrap-select.btn-group .dropdown-menu li>a.opt{padding-left:35px}.bootstrap-select.btn-group .dropdown-menu li>a{min-height:20px}.bootstrap-select.btn-group .dropdown-menu li small{padding-left:.5em}.bootstrap-select.btn-group .dropdown-menu li:not(.disabled)>a:hover small{color:#64b1d8;color:rgba(255,255,255,0.4)}.bootstrap-select.btn-group .dropdown-menu li>dt small{font-weight:normal}

website/monarch.html

@@ -9,11 +9,12 @@
 
 	<title>Monaco Editor Monarch</title>
 
-	<link href="./lib/bootstrap-cosmo.css" rel="stylesheet">
+	<link data-inline="yes-please" href="./lib/bootstrap-cosmo.css" rel="stylesheet">
-	<link href="./lib/bootstrap-responsive.min.css" rel="stylesheet">
+	<link data-inline="yes-please" href="./lib/bootstrap-responsive.min.css" rel="stylesheet">
-	<link href="./all.css" rel="stylesheet" type="text/css">
+	<link data-inline="yes-please" href="./all.css" rel="stylesheet" type="text/css">
+	<link data-inline="yes-please" href="./monarch/monarch.css" rel="stylesheet" />
 
-	<link rel="stylesheet" href="./monarch/monarch.css" />
+	<link data-name="vs/editor/editor.main" rel="stylesheet" href="../release/dev/vs/editor/editor.main.css">
 </head>
 <body>
 
@@ -4294,17 +4295,14 @@ return {
 		</p>
 	</footer>
 
-	<script src="./lib/jquery-1.9.1.min.js" type="text/javascript"></script>
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script>
-	<script src="./lib/bootstrap.min.js"></script>
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/bootstrap.min.js" integrity="sha256-u+l2mGjpmGK/mFgUncmMcFKdMijvV+J3odlDJZSNUu8=" crossorigin="anonymous"></script>
 
-	<script type="text/javascript" src="../release/dev/vs/loader.js"></script>
+	<script>var require = { paths: { 'vs': '../release/dev/vs' } };</script>
-	<script type="text/javascript">
+	<script src="../release/dev/vs/loader.js"></script>
-		require.config({
+	<script src="../release/dev/vs/editor/editor.main.nls.js"></script>
-			paths: {
+	<script src="../release/dev/vs/editor/editor.main.js"></script>
-				vs: "../release/dev/vs"
+
-			}
+	<script data-inline="yes-please" src="./monarch/monarch.js" type="text/javascript"></script>
-		});
-	</script>
-	<script type="text/javascript" src="./monarch/monarch.js"></script>
 </body>
 </html>

website/playground.html

@@ -9,15 +9,21 @@
 
 	<title>Monaco Editor Playground</title>
 
-	<link href="./lib/bootstrap-cosmo.css" rel="stylesheet">
+	<link data-inline="yes-please" href="./lib/bootstrap-cosmo.css" rel="stylesheet" />
-	<link href="./lib/bootstrap-responsive.min.css" rel="stylesheet">
+	<link data-inline="yes-please" href="./lib/bootstrap-responsive.min.css" rel="stylesheet" />
-	<link href="./all.css" rel="stylesheet" type="text/css">
+	<link data-inline="yes-please" href="./all.css" rel="stylesheet" type="text/css" />
+	<link data-inline="yes-please" href="./playground/spinner.css" rel="stylesheet" />
+	<link data-inline="yes-please" href="./playground/playground.css" rel="stylesheet" />
 
-	<link rel="stylesheet" href="./playground/spinner.css" />
+	<link data-name="vs/editor/editor.main" rel="stylesheet" href="../release/dev/vs/editor/editor.main.css">
-	<link rel="stylesheet" href="./playground/playground.css" />
 </head>
-<body>
+<body class="playground-page">
-	<a href="https://github.com/Microsoft/monaco-editor"><img style="position: fixed; top: 0; right: 0; border: 0; margin:0; z-index: 1000" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
+	<pre data-preload="playground/new-samples/creating-the-editor/hello-world/sample.js"></pre>
+	<pre data-preload="playground/new-samples/creating-the-editor/hello-world/sample.css"></pre>
+	<pre data-preload="playground/new-samples/creating-the-editor/hello-world/sample.html"></pre>
+
+	<a id="gh-link" href="https://github.com/Microsoft/monaco-editor"><img
+		width="149" height="149" alt="Fork me on GitHub" src="./fork.png"/></a>
 
 	<nav class="navbar navbar-inverse navbar-fixed-top">
 		<div class="navbar-inner">
@@ -65,18 +71,15 @@
 		</p>
 	</footer>
 
-	<script src="./lib/jquery-1.9.1.min.js" type="text/javascript"></script>
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script>
-	<script src="./lib/bootstrap.min.js"></script>
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/bootstrap.min.js" integrity="sha256-u+l2mGjpmGK/mFgUncmMcFKdMijvV+J3odlDJZSNUu8=" crossorigin="anonymous"></script>
 
-	<script type="text/javascript" src="../release/dev/vs/loader.js"></script>
+	<script>var require = { paths: { 'vs': '../release/dev/vs' } };</script>
-	<script type="text/javascript">
+	<script src="../release/dev/vs/loader.js"></script>
-		require.config({
+	<script src="../release/dev/vs/editor/editor.main.nls.js"></script>
-			paths: {
+	<script src="../release/dev/vs/editor/editor.main.js"></script>
-				vs: "../release/dev/vs"
+
-			}
+	<script data-inline="yes-please" src="./playground/new-samples/all.js" type="text/javascript"></script>
-		});
+	<script data-inline="yes-please" src="./playground/playground.js" type="text/javascript"></script>
-	</script>
-	<script type="text/javascript" src="./playground/new-samples/all.js"></script>
-	<script type="text/javascript" src="./playground/playground.js"></script>
 </body>
 </html>

website/playground/new-samples/creating-the-editor/hello-world/sample.css

@@ -0,0 +1 @@
+

website/playground/playground-runner.html

@@ -2,17 +2,22 @@
 <html style="height:100%">
 <head>
 
-	<link rel="stylesheet" href="./spinner.css" />
+	<link data-inline="yes-please" href="./spinner.css" rel="stylesheet" />
+
+	<link data-name="vs/editor/editor.main" rel="stylesheet" href="../../release/dev/vs/editor/editor.main.css" />
 
 	<style type="text/css">
 		body { margin: 0; padding: 0; border: 0; }
 		.monaco-editor { overflow: hidden; }
 	</style>
 
-	<script type="text/javascript" src="../../release/dev/vs/loader.js"></script>
+	<script>var require = { paths: { 'vs': '../../release/dev/vs' } };</script>
-	<script type="text/javascript">
+	<script src="../../release/dev/vs/loader.js"></script>
-		var geval = eval;
+	<script src="../../release/dev/vs/editor/editor.main.nls.js"></script>
+	<script src="../../release/dev/vs/editor/editor.main.js"></script>
 
+
+	<script type="text/javascript">
 		var receivedCall = null;
 		window.load = function (js, html, css) {
 			receivedCall = {
@@ -21,12 +26,21 @@
 				css: css
 			};
 		};
+	</script>
+</head>
+<body>
+	<div id="loading">
+		<div class="spinner">
+			<div class="rect1"></div>
+			<div class="rect2"></div>
+			<div class="rect3"></div>
+			<div class="rect4"></div>
+			<div class="rect5"></div>
+		</div>
+	</div>
 
-		require.config({
+	<script type="text/javascript">
-			paths: {
+		var geval = eval;
-				vs: "../../release/dev/vs"
-			}
-		});
 
 		require(['require', 'vs/editor/editor.main'], function (require) {
 			"use strict";
@@ -65,16 +79,5 @@
 			}
 		});
 	</script>
-</head>
-<body>
-	<div id="loading">
-		<div class="spinner">
-			<div class="rect1"></div>
-			<div class="rect2"></div>
-			<div class="rect3"></div>
-			<div class="rect4"></div>
-			<div class="rect5"></div>
-		</div>
-	</div>
 </body>
 </html>

website/playground/playground.css

@@ -10,18 +10,18 @@ select {
 	width: initial;
 }
 
-.title {
+.playground-page .title {
 	font-family: "Segoe UI Light","HelveticaNeue-UltraLight", sans-serif;
 	font-weight: 100;
 	font-size: 1.8em;
 }
 
-.tabArea {
+.playground-page .tabArea {
 	height: 20px;
 	box-sizing: border-box;
 	border-bottom: 1px solid #999;
 }
-.tab {
+.playground-page .tab {
 	height: 20px;
 	line-height: 20px;
 	box-sizing: border-box;
@@ -32,11 +32,11 @@ select {
 	cursor: pointer;
 	float: left;
 }
-.tab.active {
+.playground-page .tab.active {
 	color: black;
 	border-bottom: 1px solid white;
 }
-.action {
+.playground-page .action {
 	height: 20px;
 	line-height: 20px;
 	box-sizing: border-box;
@@ -48,10 +48,10 @@ select {
 	float: right;
 	padding-left: 16px;
 }
-.action.run {
+.playground-page .action.run {
-	background: url('run.png') no-repeat left center;
+	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAE1JREFUOE9jKCsrY6AEU6QZZPHgNeA/0Hn7gdiBUPjg8gLIABjGaxAxBuA1iBQDYAalIXuLFAOweoUYA8gOA4pigegERrRCXOlhGBgAAGmggVf7bEk0AAAAAElFTkSuQmCC') no-repeat left center;
 }
-.editor-container {
+.playground-page .editor-container {
 	border: 1px solid #999;
 	border-top: 0;
 }

website/playground/playground.js

@@ -17,11 +17,12 @@ window.onload = function() {
 				'	onError: Function;',
 				'};',
 			].join('\n'), 'require.d.ts');
-
-			var loading = document.getElementById('loading');
-			loading.parentNode.removeChild(loading);
-			load();
 		});
+
+		var loading = document.getElementById('loading');
+		loading.parentNode.removeChild(loading);
+		load();
+
 	});
 };
 
@@ -333,7 +334,24 @@ function doRun(runContainer) {
 	});
 }
 
+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();