Merge pull request #172 from iamandrewluca/master

Add option to toggle faster/lighter version of extension

src/index.html

@@ -460,7 +460,7 @@
 							</label>
 						</div>
 					</div>
-					<div class="ml-2">
+          <div class="ml-2">
 						<label class="line" title="Your Preview will refresh when you resize the preview split">
 							<input type="checkbox" d-change="updateSetting" data-setting="refreshOnResize"> Refresh preview on resize
 						</label>
@@ -482,9 +482,12 @@
 						<label class="line" title="Preserves the console logs across your preview refreshes">
 							<input type="checkbox" d-change="updateSetting" data-setting="preserveConsoleLogs"> Preserve console logs
 						</label>
+            <label class="line">
+						  <input type="checkbox" d-change="updateSetting" data-setting="lightVersion"> Toggle fast/light version (needs restart)
+					  </label>
 					</div>
 				</div>
-				
+        
 				<hr>
 
 				<h3>Fun</h3>

src/script.js

@@ -1618,6 +1618,11 @@ customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea
 		$('[data-setting=autoSave]').checked = prefs.autoSave;
 		$('[data-setting=autoComplete]').checked = prefs.autoComplete;
 		$('[data-setting=preserveConsoleLogs]').checked = prefs.preserveConsoleLogs;
+		$('[data-setting=lightVersion]').checked = prefs.lightVersion;
+
+		if (!prefs.lightVersion) {
+			document.body.classList.add('blur');
+		}
 	}
 
 	/**
@@ -2212,7 +2217,8 @@ customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea
 				editorCustomFont: '',
 				autoSave: true,
 				autoComplete: true,
-				preserveConsoleLogs: true
+				preserveConsoleLogs: true,
+				lightVersion: true
 			},
 			function syncGetCallback(result) {
 				if (result.preserveLastCode && lastCode) {
@@ -2249,6 +2255,7 @@ customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea
 				prefs.autoSave = result.autoSave;
 				prefs.autoComplete = result.autoComplete;
 				prefs.preserveConsoleLogs = result.preserveConsoleLogs;
+				prefs.lightVersion = result.lightVersion;
 
 				updateSettingsInUi();
 				scope.updateSetting();

src/style.css

@@ -118,7 +118,7 @@ select, input[type="text"], input[type="number"],  textarea {
 	will-change: -webkit-filter;
 	transition: 0.10s ease 0.2s;
 }
-.overlay-visible .main-container {
+.blur.overlay-visible .main-container {
 	transition-duration: 0.5s;
 	transition-delay: 0.4s;
 	-webkit-filter: blur(3px);