add on demand mode loading to cm.

src/deferred.js

@@ -0,0 +1,10 @@
+function deferred() {
+	var d = {};
+	var promise = new Promise(function (resolve, reject) {
+		d.resolve = resolve;
+		d.reject = reject;
+	});
+
+	d.promise = promise;
+	return Object.assign(d, promise);
+}

src/dropdown.js

@@ -0,0 +1,30 @@
+// Dropdown.js
+
+(function($all) {
+	var openDropdown;
+
+	// Closes all dropdowns except the passed one.
+	function closeOpenDropdown(except) {
+		if (openDropdown && (!except || except !== openDropdown)) {
+			openDropdown.classList.remove('open');
+			openDropdown = null;
+		}
+	}
+	function init() {
+		var dropdowns = [].slice.call($all('[dropdown]'));
+		dropdowns.forEach(function (dropdown) {
+			dropdown.addEventListener('click', function (e) {
+				closeOpenDropdown(e.currentTarget);
+				e.currentTarget.classList.toggle('open');
+				openDropdown = e.currentTarget;
+				e.stopPropagation();
+			});
+		});
+
+		document.addEventListener('click', function () {
+			closeOpenDropdown();
+		});
+	}
+
+	init();
+})($all);

src/index.html

@@ -496,6 +496,7 @@
 		<script src="lib/codemirror/addon/edit/matchbrackets.js"></script>
 		<script src="lib/codemirror/addon/edit/closebrackets.js"></script>
 		<script src="lib/codemirror/addon/edit/closetag.js"></script>
+		<script src="lib/codemirror/addon/mode/loadmode.js"></script>
 
 		<script src="lib/codemirror/mode/xml/xml.js"></script>
 		<script src="lib/codemirror/mode/javascript/javascript.js"></script>
@@ -511,6 +512,7 @@
 		<script src="lib/coffee-script.js"></script>
 		<script src="lib/split.js"></script>
 
+		<script src="deferred.js"></script>
 		<script src="script.js"></script>
 		<script src="dropdown.js"></script>
 

src/loader.js

@@ -0,0 +1,81 @@
+// https://github.com/filamentgroup/loadCSS/blob/master/src/loadCSS.js
+var loadCSS = function( href, before, media ){
+	// Arguments explained:
+	// `href` [REQUIRED] is the URL for your CSS file.
+	// `before` [OPTIONAL] is the element the script should use as a reference for injecting our stylesheet <link> before
+		// By default, loadCSS attempts to inject the link after the last stylesheet or script in the DOM. However, you might desire a more specific location in your document.
+	// `media` [OPTIONAL] is the media type or query of the stylesheet. By default it will be 'all'
+	var doc = w.document;
+	var ss = doc.createElement( "link" );
+	var ref;
+	if( before ){
+		ref = before;
+	}
+	else {
+		var refs = ( doc.body || doc.getElementsByTagName( "head" )[ 0 ] ).childNodes;
+		ref = refs[ refs.length - 1];
+	}
+
+	var sheets = doc.styleSheets;
+	ss.rel = "stylesheet";
+	ss.href = href;
+	// temporarily set media to something inapplicable to ensure it'll fetch without blocking render
+	ss.media = "only x";
+
+	// wait until body is defined before injecting link. This ensures a non-blocking load in IE11.
+	function ready( cb ){
+		if( doc.body ){
+			return cb();
+		}
+		setTimeout(function(){
+			ready( cb );
+		});
+	}
+	// Inject link
+		// Note: the ternary preserves the existing behavior of "before" argument, but we could choose to change the argument to "after" in a later release and standardize on ref.nextSibling for all refs
+		// Note: `insertBefore` is used instead of `appendChild`, for safety re: http://www.paulirish.com/2011/surefire-dom-element-insertion/
+	ready( function(){
+		ref.parentNode.insertBefore( ss, ( before ? ref : ref.nextSibling ) );
+	});
+	// A method (exposed on return object for external use) that mimics onload by polling document.styleSheets until it includes the new sheet.
+	var onloadcssdefined = function( cb ){
+		var resolvedHref = ss.href;
+		var i = sheets.length;
+		while( i-- ){
+			if( sheets[ i ].href === resolvedHref ){
+				return cb();
+			}
+		}
+		setTimeout(function() {
+			onloadcssdefined( cb );
+		});
+	};
+
+	function loadCB(){
+		if( ss.addEventListener ){
+			ss.removeEventListener( "load", loadCB );
+		}
+		ss.media = media || "all";
+	}
+
+	// once loaded, set link's media back to `all` so that the stylesheet applies once it loads
+	if( ss.addEventListener ){
+		ss.addEventListener( "load", loadCB);
+	}
+	ss.onloadcssdefined = onloadcssdefined;
+	onloadcssdefined( loadCB );
+	return true;
+};
+
+var loadJS = function( src, cb ) {
+	var d = deferred();
+	var ref = w.document.getElementsByTagName( "script" )[ 0 ];
+	var script = w.document.createElement( "script" );
+	script.src = src;
+	script.async = true;
+	ref.parentNode.insertBefore( script, ref );
+	script.onload = function () {
+		d.resolve();
+	};
+	return d.promise;
+};

src/script.js

@@ -18,6 +18,14 @@
 		SCSS: 'scss',
 		LESS: 'less'
 	};
+	var modes = {};
+	modes[JsModes.JS] = { label: 'JS', cmMode: 'javascript' };
+	modes[JsModes.COFFEESCRIPT] = { label: 'CoffeeScript', cmMode: 'coffeescript' };
+	modes[JsModes.ES6] = { label: 'ES6 (Babel)', cmMode: 'javascript' };
+	modes[CssModes.CSS] = { label: 'CSS', cmMode: 'css' };
+	modes[CssModes.SCSS] = { label: 'SCSS', cmMode: 'sass' };
+	modes[CssModes.LESS] = { label: 'LESS', cmMode: 'css' };
+
 	var updateTimer
 		, updateDelay = 500
 		, currentLayoutMode
@@ -61,16 +69,6 @@
 		}
 		return 0;
 	}
-	function deferred() {
-		var d = {};
-		var promise = new Promise(function (resolve, reject) {
-			d.resolve = resolve;
-			d.reject = reject;
-		});
-
-		d.promise = promise;
-		return Object.assign(d, promise);
-	}
 
 	function resetSplitting() {
 		var gutters = $all('.gutter');
@@ -126,16 +124,16 @@
 
 	function updateCssMode(value) {
 		cssMode = value;
-		cssModelLabel.textContent = value;
+		cssModelLabel.textContent = modes[value].label;
-		editur.cm.css.setOption('mode', value);
+		CodeMirror.autoLoadMode(editur.cm.css, modes[value].cmMode);
 		chrome.storage.sync.set({
 			cssMode: value
 		}, function () {});
 	}
 	function updateJsMode(value) {
 		jsMode = value;
-		jsModelLabel.textContent = value;
+		jsModelLabel.textContent = modes[value].label;
-		editur.cm.js.setOption('mode', value);
+		CodeMirror.autoLoadMode(editur.cm.js, modes[value].cmMode);
 		chrome.storage.sync.set({
 			jsMode: value
 		}, function () {});
@@ -277,6 +275,7 @@
 	function init () {
 		var lastCode;
 
+		CodeMirror.modeURL = "lib/codemirror/mode/%N/%N.js";
 		window.sass = new Sass('lib/sass.worker.js');
 
 		layoutBtn1.addEventListener('click', function () { saveSetting('layoutMode', 1); toggleLayout(1); return false; });