diff --git a/src/script.js b/src/script.js
index d5dee8d..81bdd36 100644
--- a/src/script.js
+++ b/src/script.js
@@ -1,17 +1,5 @@
-/* global trackEvent */
-/* global layoutBtn1, layoutBtn2, layoutBtn3, helpModal, notificationsModal, addLibraryModal,
-onboardModal, layoutBtn1, layoutBtn2, layoutBtn3, layoutBtn4, layoutBtn5, onboardModal,
-onboardModal, addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal,
-notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn,
-onboardModal, settingsModal, notificationsBtn, editorThemeLinkTag, TextareaAutoComplete,
-savedItemCountEl, indentationSizeValueEl, pledgeModal
-runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate,
-customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea,
-globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal, headerAvatarImg,
-loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askToImportModal
-*/
 /* eslint-disable no-extra-semi */
-(function(alertsService, itemService) {
+(function (alertsService, itemService) {
 	/* eslint-enable no-extra-semi */
 	var scope = scope || {};
 	var version = '3.2.0';
@@ -20,119 +8,12 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 		window.scope = scope;
 	}
 
-	const defaultSettings = {
-		preserveLastCode: true,
-		replaceNewTab: false,
-		htmlMode: 'html',
-		jsMode: 'js',
-		cssMode: 'css',
-		isCodeBlastOn: false,
-		indentWith: 'spaces',
-		indentSize: 2,
-		editorTheme: 'monokai',
-		keymap: 'sublime',
-		fontSize: 16,
-		refreshOnResize: false,
-		autoPreview: true,
-		editorFont: 'FiraCode',
-		editorCustomFont: '',
-		autoSave: true,
-		autoComplete: true,
-		preserveConsoleLogs: true,
-		lightVersion: false,
-		lineWrap: true,
-		infiniteLoopTimeout: 1000
-	};
-	var HtmlModes = {
-		HTML: 'html',
-		MARKDOWN: 'markdown',
-		JADE: 'jade' // unsafe eval is put in manifest for this file
-	};
-	var CssModes = {
-		CSS: 'css',
-		SCSS: 'scss',
-		SASS: 'sass',
-		LESS: 'less',
-		STYLUS: 'stylus',
-		ACSS: 'acss'
-	};
-	var JsModes = {
-		JS: 'js',
-		ES6: 'es6',
-		COFFEESCRIPT: 'coffee',
-		TS: 'typescript'
-	};
-	var modes = {};
-	modes[HtmlModes.HTML] = {
-		label: 'HTML',
-		cmMode: 'htmlmixed',
-		codepenVal: 'none'
-	};
-	modes[HtmlModes.MARKDOWN] = {
-		label: 'Markdown',
-		cmMode: 'markdown',
-		codepenVal: 'markdown'
-	};
-	modes[HtmlModes.JADE] = { label: 'Pug', cmMode: 'pug', codepenVal: 'pug' };
-	modes[JsModes.JS] = { label: 'JS', cmMode: 'javascript', codepenVal: 'none' };
-	modes[JsModes.COFFEESCRIPT] = {
-		label: 'CoffeeScript',
-		cmMode: 'coffeescript',
-		codepenVal: 'coffeescript'
-	};
-	modes[JsModes.ES6] = {
-		label: 'ES6 (Babel)',
-		cmMode: 'jsx',
-		codepenVal: 'babel'
-	};
-	modes[JsModes.TS] = {
-		label: 'TypeScript',
-		cmPath: 'jsx',
-		cmMode: 'text/typescript-jsx',
-		codepenVal: 'typescript'
-	};
-	modes[CssModes.CSS] = {
-		label: 'CSS',
-		cmPath: 'css',
-		cmMode: 'css',
-		codepenVal: 'none'
-	};
-	modes[CssModes.SCSS] = {
-		label: 'SCSS',
-		cmPath: 'css',
-		cmMode: 'text/x-scss',
-		codepenVal: 'scss'
-	};
-	modes[CssModes.SASS] = { label: 'SASS', cmMode: 'sass', codepenVal: 'sass' };
-	modes[CssModes.LESS] = {
-		label: 'LESS',
-		cmPath: 'css',
-		cmMode: 'text/x-less',
-		codepenVal: 'less'
-	};
-	modes[CssModes.STYLUS] = {
-		label: 'Stylus',
-		cmMode: 'stylus',
-		codepenVal: 'stylus'
-	};
-	modes[CssModes.ACSS] = {
-		label: 'Atomic CSS',
-		cmPath: 'css',
-		cmMode: 'css',
-		codepenVal: 'notsupported',
-		cmDisable: true,
-		hasSettings: true
-	};
 
-	const AUTO_SAVE_INTERVAL = 15000; // 15 seconds
+
 	const BASE_PATH = chrome.extension || window.DEBUG ? '/' : '/app';
 	const DEFAULT_PROFILE_IMG =
 		"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z' /%3E%3C/svg%3E";
 
-	const LocalStorageKeys = {
-		LOGIN_AND_SAVE_MESSAGE_SEEN: 'loginAndsaveMessageSeen',
-		ASKED_TO_IMPORT_CREATIONS: 'askedToImportCreations'
-	};
 	var updateTimer,
 		updateDelay = 500,
 		autoSaveInterval,
@@ -149,93 +30,26 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 		minCodeWrapSize = 33,
 		mainSplitInstance,
 		codeSplitInstance,
-		prefs = {},
-		codeInPreview = { html: null, css: null, js: null },
-		isSavedItemsPaneOpen = false,
 		editorWithFocus,
 		logCount = 0,
-		isAutoSavingEnabled,
-		// DOM nodes
-		frame = $('#demo-frame'),
-		htmlCode = $('#js-html-code'),
-		cssCode = $('#js-css-code'),
-		jsCode = $('#js-js-code'),
-		codepenForm = $('#js-codepen-form'),
-		savedItemsPane = $('#js-saved-items-pane'),
-		savedItemsPaneCloseBtn = $('#js-saved-items-pane-close-btn'),
-		htmlModelLabel = $('#js-html-mode-label'),
-		cssModelLabel = $('#js-css-mode-label'),
-		jsModelLabel = $('#js-js-mode-label'),
-		titleInput = $('#js-title-input'),
-		addLibrarySelect = $('#js-add-library-select'),
-		externalJsTextarea = $('#js-external-js'),
-		externalCssTextarea = $('#js-external-css');
 
-	scope.cm = {};
-	scope.frame = frame;
-	scope.demoFrameDocument =
-		frame.contentDocument || frame.contentWindow.document;
 
-	// Check all the code wrap if they are minimized or maximized
-	function updateCodeWrapCollapseStates() {
-		// This is debounced!
-		clearTimeout(updateCodeWrapCollapseStates.timeout);
-		updateCodeWrapCollapseStates.timeout = setTimeout(function() {
-			const prop =
-				currentLayoutMode === 2 || currentLayoutMode === 5 ? 'width' : 'height';
-			[htmlCode, cssCode, jsCode].forEach(function(el) {
-				const bounds = el.getBoundingClientRect();
-				const size = bounds[prop];
-				if (size < 100) {
-					el.classList.add('is-minimized');
-				} else {
-					el.classList.remove('is-minimized');
-				}
-				if (el.style[prop].indexOf(`100% - ${minCodeWrapSize * 2}px`) !== -1) {
-					el.classList.add('is-maximized');
-				} else {
-					el.classList.remove('is-maximized');
-				}
-			});
-		}, 50);
-	}
 
-	function toggleCodeWrapCollapse(codeWrapEl) {
-		if (
-			codeWrapEl.classList.contains('is-minimized') ||
-			codeWrapEl.classList.contains('is-maximized')
-		) {
-			codeWrapEl.classList.remove('is-minimized');
-			codeWrapEl.classList.remove('is-maximized');
-			codeSplitInstance.setSizes([33.3, 33.3, 33.3]);
-		} else {
-			const id = parseInt(codeWrapEl.dataset.codeWrapId, 10);
-			var arr = [
-				`${minCodeWrapSize}px`,
-				`${minCodeWrapSize}px`,
-				`${minCodeWrapSize}px`
-			];
-			arr[id] = `calc(100% - ${minCodeWrapSize * 2}px)`;
 
-			codeSplitInstance.setSizes(arr);
-			codeWrapEl.classList.add('is-maximized');
+		// Returns the sizes of main code & preview panes.
+		function getMainSplitSizesToApply() {
+			var mainSplitSizes;
+			if (currentItem && currentItem.mainSizes) {
+				// For layout mode 3, main panes are reversed using flex-direction.
+				// So we need to apply the saved sizes in reverse order.
+				mainSplitSizes =
+					currentLayoutMode === 3 ? [currentItem.mainSizes[1], currentItem.mainSizes[0]] :
+					currentItem.mainSizes;
+			} else {
+				mainSplitSizes = currentLayoutMode === 5 ? [75, 25] : [50, 50];
+			}
+			return mainSplitSizes;
 		}
-	}
-	// Returns the sizes of main code & preview panes.
-	function getMainSplitSizesToApply() {
-		var mainSplitSizes;
-		if (currentItem && currentItem.mainSizes) {
-			// For layout mode 3, main panes are reversed using flex-direction.
-			// So we need to apply the saved sizes in reverse order.
-			mainSplitSizes =
-				currentLayoutMode === 3
-					? [currentItem.mainSizes[1], currentItem.mainSizes[0]]
-					: currentItem.mainSizes;
-		} else {
-			mainSplitSizes = currentLayoutMode === 5 ? [75, 25] : [50, 50];
-		}
-		return mainSplitSizes;
-	}
 
 	function resetSplitting() {
 		if (codeSplitInstance) {
@@ -246,16 +60,14 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 		}
 
 		var options = {
-			direction:
-				currentLayoutMode === 2 || currentLayoutMode === 5
-					? 'horizontal'
-					: 'vertical',
+			direction: currentLayoutMode === 2 || currentLayoutMode === 5 ?
+				'horizontal' : 'vertical',
 			minSize: minCodeWrapSize,
 			gutterSize: 6,
-			onDragStart: function() {
+			onDragStart: function () {
 				document.body.classList.add('is-dragging');
 			},
-			onDragEnd: function() {
+			onDragEnd: function () {
 				updateCodeWrapCollapseStates();
 				document.body.classList.remove('is-dragging');
 			}
@@ -275,63 +87,18 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 			minSize: 150,
 			gutterSize: 6,
 			sizes: getMainSplitSizesToApply(),
-			onDragEnd: function() {
+			onDragEnd: function () {
 				if (prefs.refreshOnResize) {
 					// Running preview updation in next call stack, so that error there
 					// doesn't affect this dragend listener.
-					setTimeout(function() {
+					setTimeout(function () {
 						scope.setPreviewContent(true);
 					}, 1);
 				}
 			}
 		});
 	}
-	function toggleLayout(mode) {
-		/* eslint-disable no-param-reassign */
-		mode = window.innerWidth < 500 ? 2 : mode;
 
-		if (currentLayoutMode === mode) {
-			mainSplitInstance.setSizes(getMainSplitSizesToApply());
-			codeSplitInstance.setSizes(currentItem.sizes || [33.33, 33.33, 33.33]);
-			currentLayoutMode = mode;
-			return;
-		}
-		currentLayoutMode = mode;
-		// Remove all layout classes
-		[1, 2, 3, 4, 5].forEach(layoutNumber => {
-			window[`layoutBtn${layoutNumber}`].classList.remove('selected');
-			document.body.classList.remove(`layout-${layoutNumber}`);
-		});
-		$('#layoutBtn' + mode).classList.add('selected');
-		document.body.classList.add('layout-' + mode);
-
-		resetSplitting();
-		scope.setPreviewContent(true);
-	}
-
-	function onExternalLibChange() {
-		utils.log('onExternalLibChange');
-		updateExternalLibUi();
-		scope.setPreviewContent(true);
-		alertsService.add('Libraries updated.');
-	}
-
-	function updateExternalLibUi() {
-		// Calculate no. of external libs
-		var noOfExternalLibs = 0;
-		noOfExternalLibs += externalJsTextarea.value
-			.split('\n')
-			.filter(lib => !!lib).length;
-		noOfExternalLibs += externalCssTextarea.value
-			.split('\n')
-			.filter(lib => !!lib).length;
-		if (noOfExternalLibs) {
-			$('#js-external-lib-count').textContent = noOfExternalLibs;
-			$('#js-external-lib-count').style.display = 'inline';
-		} else {
-			$('#js-external-lib-count').style.display = 'none';
-		}
-	}
 
 	function saveSetting(setting, value) {
 		const d = deferred();
@@ -342,51 +109,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 		return d.promise;
 	}
 
-	// Save current item to storage
-	function saveItem() {
-		if (
-			!window.user &&
-			!window.localStorage[LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN]
-		) {
-			const answer = confirm(
-				'Saving without signing in will save your work only on this machine and this browser. If you want it to be secure & available anywhere, please login in your account and then save.\n\nDo you still want to continue saving locally?'
-			);
-			window.localStorage[LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN] = true;
-			if (!answer) {
-				trackEvent('ui', LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN, 'login');
-				closeAllOverlays();
-				loginModal.classList.add('is-modal-visible');
-				return;
-			}
-			trackEvent('ui', LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN, 'local');
-		}
-		var isNewItem = !currentItem.id;
-		currentItem.id = currentItem.id || 'item-' + utils.generateRandomId();
-		saveBtn.classList.add('is-loading');
-		saveCode().then(() => {
-			saveBtn.classList.remove('is-loading');
-			// If this is the first save, and auto-saving settings is enabled,
-			// then start auto-saving from now on.
-			// This is done in `saveCode()` completion so that the
-			// auto-save notification overrides the `saveCode` function's notification.
-			if (!isAutoSavingEnabled && prefs.autoSave) {
-				isAutoSavingEnabled = true;
-				alertsService.add('Auto-save enabled.');
-			}
-		});
-		// Push into the items hash if its a new item being saved
-		if (isNewItem) {
-			itemService.setItemForUser(currentItem.id);
-		}
-	}
 
-	// Keeps getting called after certain interval to auto-save current creation
-	// if it needs to be.
-	function autoSaveLoop() {
-		if (isAutoSavingEnabled && unsavedEditCount) {
-			saveItem();
-		}
-	}
 
 	// Calculates the sizes of html, css & js code panes.
 	function getCodePaneSizes() {
@@ -414,10 +137,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 		var sizes;
 		var dimensionProperty = currentLayoutMode === 2 ? 'height' : 'width';
 		try {
-			sizes = [
-				+$('#js-code-side').style[dimensionProperty].match(/([\d.]+)%/)[1],
-				+$('#js-demo-side').style[dimensionProperty].match(/([\d.]+)%/)[1]
-			];
+			sizes = [+$('#js-code-side').style[dimensionProperty].match(/([\d.]+)%/)[1], +$('#js-demo-side').style[dimensionProperty].match(/([\d.]+)%/)[1]];
 		} catch (e) {
 			sizes = [50, 50];
 		} finally {
@@ -428,237 +148,6 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 		}
 	}
 
-	function saveCode(key) {
-		currentItem.title = titleInput.value;
-		currentItem.html = scope.cm.html.getValue();
-		currentItem.css = scope.cm.css.getValue();
-		currentItem.js = scope.cm.js.getValue();
-		currentItem.htmlMode = htmlMode;
-		currentItem.cssMode = cssMode;
-		currentItem.jsMode = jsMode;
-		if (modes[cssMode].hasSettings) {
-			currentItem.cssSettings = {
-				acssConfig: scope.acssSettingsCm.getValue()
-			};
-		}
-		currentItem.updatedOn = Date.now();
-		currentItem.layoutMode = currentLayoutMode;
-		currentItem.externalLibs = {
-			js: externalJsTextarea.value,
-			css: externalCssTextarea.value
-		};
-
-		currentItem.sizes = getCodePaneSizes();
-		currentItem.mainSizes = getMainPaneSizes();
-
-		utils.log('saving key', key || currentItem.id, currentItem);
-
-		function onSaveComplete() {
-			if (window.user && !navigator.onLine) {
-				alertsService.add(
-					'Item saved locally. Will save to account when you are online.'
-				);
-			} else {
-				alertsService.add('Item saved.');
-			}
-			unsavedEditCount = 0;
-			saveBtn.classList.remove('is-marked');
-		}
-
-		return itemService
-			.setItem(key || currentItem.id, currentItem)
-			.then(onSaveComplete);
-	}
-
-	function populateItemsInSavedPane(items) {
-		var html = '';
-		if (items.length) {
-			// TODO: sort desc. by updation date
-			items.sort(function(a, b) {
-				return b.updatedOn - a.updatedOn;
-			});
-			items.forEach(function(item) {
-				html +=
-					'<div class="js-saved-item-tile saved-item-tile" data-item-id="' +
-					item.id +
-					'">' +
-					'<div class="saved-item-tile__btns"><a class="js-saved-item-tile__fork-btn  saved-item-tile__btn hint--left hint--medium" aria-label="Creates a duplicate of this creation (Ctrl/⌘ + F)">Fork<span class="show-when-selected">(Ctrl/⌘ + F)</span></a><a class="js-saved-item-tile__remove-btn  saved-item-tile__btn hint--left" aria-label="Remove">X</a></div>' +
-					'<h3 class="saved-item-tile__title">' +
-					item.title +
-					'</h3><span class="saved-item-tile__meta">Last updated: ' +
-					utils.getHumanDate(item.updatedOn) +
-					'</span></div>';
-			});
-			savedItemCountEl.textContent = '(' + items.length + ')';
-			savedItemCountEl.style.display = 'inline';
-		} else {
-			html += '<h2 class="opacity--30">Nothing saved here.</h2>';
-			savedItemCountEl.style.display = 'none';
-		}
-		savedItemsPane.querySelector('#js-saved-items-wrap').innerHTML = html;
-		toggleSavedItemsPane();
-		// HACK: Set overflow after sometime so that the items can animate without getting cropped.
-		// setTimeout(() => $('#js-saved-items-wrap').style.overflowY = 'auto', 1000);
-	}
-
-	function toggleSavedItemsPane(shouldOpen) {
-		if (shouldOpen === false) {
-			savedItemsPane.classList.remove('is-open');
-		} else {
-			savedItemsPane.classList.toggle('is-open');
-		}
-		isSavedItemsPaneOpen = savedItemsPane.classList.contains('is-open');
-		if (isSavedItemsPaneOpen) {
-			searchInput.focus();
-		} else {
-			searchInput.value = '';
-			// Give last focused editor, focus again
-			if (editorWithFocus) {
-				editorWithFocus.focus();
-			}
-		}
-		document.body.classList[isSavedItemsPaneOpen ? 'add' : 'remove'](
-			'overlay-visible'
-		);
-	}
-
-	/**
-	 * Fetches all items from storage
-	 * @param  {boolean} shouldSaveGlobally Whether to store the fetched items in global arr for later use.
-	 * @return {promise}                    Promise.
-	 */
-	async function fetchItems(shouldSaveGlobally, shouldFetchLocally) {
-		var d = deferred();
-		savedItems = {};
-		var items = [];
-		if (window.user && !shouldFetchLocally) {
-			items = await itemService.getAllItems();
-			utils.log('got items');
-			if (shouldSaveGlobally) {
-				items.forEach(item => {
-					savedItems[item.id] = item;
-				});
-			}
-			d.resolve(items);
-			return d.promise;
-		}
-		db.local.get('items', function(result) {
-			var itemIds = Object.getOwnPropertyNames(result.items || {});
-			if (!itemIds.length) {
-				d.resolve([]);
-			}
-
-			trackEvent('fn', 'fetchItems', itemIds.length);
-			for (let i = 0; i < itemIds.length; i++) {
-				/* eslint-disable no-loop-func */
-				db.local.get(itemIds[i], function(itemResult) {
-					if (shouldSaveGlobally) {
-						savedItems[itemIds[i]] = itemResult[itemIds[i]];
-					}
-					items.push(itemResult[itemIds[i]]);
-					// Check if we have all items now.
-					if (itemIds.length === items.length) {
-						d.resolve(items);
-					}
-				});
-
-				/* eslint-enable no-loop-func */
-			}
-		});
-		return d.promise;
-	}
-
-	function openSavedItemsPane() {
-		openItemsBtn.classList.add('is-loading');
-		fetchItems(true).then(function(items) {
-			openItemsBtn.classList.remove('is-loading');
-			populateItemsInSavedPane(items);
-		});
-	}
-	function setCurrentItem(item) {
-		currentItem = item;
-		utils.log('Current Item set', item);
-
-		// Reset auto-saving flag
-		isAutoSavingEnabled = false;
-		// Reset unsaved count, in UI also.
-		unsavedEditCount = 0;
-		saveBtn.classList.remove('is-marked');
-	}
-	// Creates a new item with passed item's contents
-	function forkItem(sourceItem) {
-		if (unsavedEditCount) {
-			var shouldDiscard = confirm(
-				'You have unsaved changes in your current work. Do you want to discard unsaved changes and continue?'
-			);
-			if (!shouldDiscard) {
-				return;
-			}
-		}
-		const fork = JSON.parse(JSON.stringify(sourceItem));
-		delete fork.id;
-		fork.title = '(Forked) ' + sourceItem.title;
-		fork.updatedOn = Date.now();
-		setCurrentItem(fork);
-		refreshEditor();
-		alertsService.add(`"${sourceItem.title}" was forked`);
-		trackEvent('fn', 'itemForked');
-	}
-	function createNewItem() {
-		var d = new Date();
-		setCurrentItem({
-			title:
-				'Untitled ' +
-				d.getDate() +
-				'-' +
-				(d.getMonth() + 1) +
-				'-' +
-				d.getHours() +
-				':' +
-				d.getMinutes(),
-			html: '',
-			css: '',
-			js: '',
-			externalLibs: { js: '', css: '' },
-			layoutMode: currentLayoutMode
-		});
-		refreshEditor();
-		alertsService.add('New item created');
-	}
-	function openItem(itemId) {
-		setCurrentItem(savedItems[itemId]);
-		refreshEditor();
-		alertsService.add('Saved item loaded');
-	}
-	function removeItem(itemId) {
-		var itemTile = document.querySelector(
-			'.js-saved-item-tile[data-item-id="' + itemId + '"]'
-		);
-		var answer = confirm(
-			`Are you sure you want to delete "${savedItems[itemId].title}"?`
-		);
-		if (!answer) {
-			return;
-		}
-
-		itemTile.remove();
-		// Remove from items list
-		itemService.unsetItemForUser(itemId);
-
-		// Remove individual item too.
-		itemService.removeItem(itemId).then(() => {
-			alertsService.add('Item removed.');
-			// This item is open in the editor. Lets open a new one.
-			if (currentItem.id === itemId) {
-				createNewItem();
-			}
-		});
-
-		// Remove from cached list
-		delete savedItems[itemId];
-
-		trackEvent('fn', 'itemRemoved');
-	}
 
 	function refreshEditor() {
 		titleInput.value = currentItem.title || 'Untitled';
@@ -718,63 +207,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 		document.dispatchEvent(new Event('overlaysClosed'));
 	}
 
-	/**
-	 * Loaded the code comiler based on the mode selected
-	 */
-	function handleModeRequirements(mode) {
-		const baseTranspilerPath = 'lib/transpilers';
-		// Exit if already loaded
-		var d = deferred();
-		if (modes[mode].hasLoaded) {
-			d.resolve();
-			return d.promise;
-		}
 
-		function setLoadedFlag() {
-			modes[mode].hasLoaded = true;
-			d.resolve();
-		}
-
-		if (mode === HtmlModes.JADE) {
-			loadJS(`${baseTranspilerPath}/jade.js`).then(setLoadedFlag);
-		} else if (mode === HtmlModes.MARKDOWN) {
-			loadJS(`${baseTranspilerPath}/marked.js`).then(setLoadedFlag);
-		} else if (mode === CssModes.LESS) {
-			loadJS(`${baseTranspilerPath}/less.min.js`).then(setLoadedFlag);
-		} else if (mode === CssModes.SCSS || mode === CssModes.SASS) {
-			loadJS(`${baseTranspilerPath}/sass.js`).then(function() {
-				sass = new Sass(`${baseTranspilerPath}/sass.worker.js`);
-				setLoadedFlag();
-			});
-		} else if (mode === CssModes.STYLUS) {
-			loadJS(`${baseTranspilerPath}/stylus.min.js`).then(setLoadedFlag);
-		} else if (mode === CssModes.ACSS) {
-			loadJS(`${baseTranspilerPath}/atomizer.browser.js`).then(setLoadedFlag);
-		} else if (mode === JsModes.COFFEESCRIPT) {
-			loadJS(`${baseTranspilerPath}/coffee-script.js`).then(setLoadedFlag);
-		} else if (mode === JsModes.ES6) {
-			loadJS(`${baseTranspilerPath}/babel.min.js`).then(setLoadedFlag);
-		} else if (mode === JsModes.TS) {
-			loadJS(`${baseTranspilerPath}/typescript.js`).then(setLoadedFlag);
-		} else {
-			d.resolve();
-		}
-
-		return d.promise;
-	}
-
-	function updateHtmlMode(value) {
-		htmlMode = value;
-		htmlModelLabel.textContent = modes[value].label;
-		// FIXME - use a better selector for the mode selectbox
-		htmlModelLabel.parentElement.querySelector('select').value = value;
-		scope.cm.html.setOption('mode', modes[value].cmMode);
-		CodeMirror.autoLoadMode(
-			scope.cm.html,
-			modes[value].cmPath || modes[value].cmMode
-		);
-		return handleModeRequirements(value);
-	}
 	function updateCssMode(value) {
 		cssMode = value;
 		cssModelLabel.textContent = modes[value].label;
@@ -791,228 +224,17 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 		);
 		return handleModeRequirements(value);
 	}
-	function updateJsMode(value) {
-		jsMode = value;
-		jsModelLabel.textContent = modes[value].label;
-		// FIXME - use a better selector for the mode selectbox
-		jsModelLabel.parentElement.querySelector('select').value = value;
-		scope.cm.js.setOption('mode', modes[value].cmMode);
-		CodeMirror.autoLoadMode(
-			scope.cm.js,
-			modes[value].cmPath || modes[value].cmMode
-		);
-		return handleModeRequirements(value);
-	}
 
-	// computeHtml, computeCss & computeJs evaluate the final code according
-	// to whatever mode is selected and resolve the returned promise with the code.
-	function computeHtml() {
-		var d = deferred();
-		var code = scope.cm.html.getValue();
-		if (htmlMode === HtmlModes.HTML) {
-			d.resolve(code);
-		} else if (htmlMode === HtmlModes.MARKDOWN) {
-			d.resolve(marked ? marked(code) : code);
-		} else if (htmlMode === HtmlModes.JADE) {
-			d.resolve(window.jade ? jade.render(code) : code);
-		}
 
-		return d.promise;
-	}
-	function computeCss() {
-		var d = deferred();
-		var code = scope.cm.css.getValue();
-		cleanupErrors('css');
 
-		if (cssMode === CssModes.CSS) {
-			d.resolve(code);
-		} else if (cssMode === CssModes.SCSS || cssMode === CssModes.SASS) {
-			if (sass && code) {
-				sass.compile(
-					code,
-					{ indentedSyntax: cssMode === CssModes.SASS },
-					function(result) {
-						// Something was wrong
-						if (result.line && result.message) {
-							showErrors('css', [
-								{ lineNumber: result.line - 1, message: result.message }
-							]);
-						}
-						d.resolve(result.text);
-					}
-				);
-			} else {
-				d.resolve(code);
-			}
-		} else if (cssMode === CssModes.LESS) {
-			less.render(code).then(
-				function(result) {
-					d.resolve(result.css);
-				},
-				function(error) {
-					showErrors('css', [
-						{ lineNumber: error.line, message: error.message }
-					]);
-				}
-			);
-		} else if (cssMode === CssModes.STYLUS) {
-			stylus(code).render(function(error, result) {
-				if (error) {
-					window.err = error;
-					// Last line of message is the actual message
-					var tempArr = error.message.split('\n');
-					tempArr.pop(); // This is empty string in the end
-					showErrors('css', [
-						{
-							lineNumber: +error.message.match(/stylus:(\d+):/)[1] - 298,
-							message: tempArr.pop()
-						}
-					]);
-				}
-				d.resolve(result);
-			});
-		} else if (cssMode === CssModes.ACSS) {
-			if (!window.atomizer) {
-				d.resolve('');
-			} else {
-				const html = scope.cm.html.getValue();
-				const foundClasses = atomizer.findClassNames(html);
-				var finalConfig;
-				try {
-					finalConfig = atomizer.getConfig(
-						foundClasses,
-						JSON.parse(scope.acssSettingsCm.getValue())
-					);
-				} catch (e) {
-					finalConfig = atomizer.getConfig(foundClasses, {});
-				}
-				const acss = atomizer.getCss(finalConfig);
-				scope.cm.css.setValue(acss);
-				d.resolve(acss);
-			}
-		}
-
-		return d.promise;
-	}
-	function computeJs(shouldPreventInfiniteLoops) {
-		var d = deferred();
-		var code = scope.cm.js.getValue();
-
-		cleanupErrors('js');
-		if (!code) {
-			d.resolve('');
-			return d.promise;
-		}
-
-		if (jsMode === JsModes.JS) {
-			try {
-				esprima.parse(code, {
-					tolerant: true
-				});
-			} catch (e) {
-				showErrors('js', [
-					{ lineNumber: e.lineNumber - 1, message: e.description }
-				]);
-			} finally {
-				if (shouldPreventInfiniteLoops !== false) {
-					code = utils.addInfiniteLoopProtection(code, {
-						timeout: prefs.infiniteLoopTimeout
-					});
-				}
-				d.resolve(code);
-			}
-		} else if (jsMode === JsModes.COFFEESCRIPT) {
-			if (!window.CoffeeScript) {
-				d.resolve('');
-				return d.promise;
-			}
-			try {
-				code = CoffeeScript.compile(code, { bare: true });
-			} catch (e) {
-				showErrors('js', [
-					{ lineNumber: e.location.first_line, message: e.message }
-				]);
-			} finally {
-				if (shouldPreventInfiniteLoops !== false) {
-					code = utils.addInfiniteLoopProtection(code, {
-						timeout: prefs.infiniteLoopTimeout
-					});
-				}
-				d.resolve(code);
-			}
-		} else if (jsMode === JsModes.ES6) {
-			if (!window.Babel) {
-				d.resolve('');
-				return d.promise;
-			}
-			try {
-				esprima.parse(code, {
-					tolerant: true,
-					jsx: true
-				});
-			} catch (e) {
-				showErrors('js', [
-					{ lineNumber: e.lineNumber - 1, message: e.description }
-				]);
-			} finally {
-				code = Babel.transform(code, {
-					presets: ['latest', 'stage-2', 'react']
-				}).code;
-				if (shouldPreventInfiniteLoops !== false) {
-					code = utils.addInfiniteLoopProtection(code, {
-						timeout: prefs.infiniteLoopTimeout
-					});
-				}
-				d.resolve(code);
-			}
-		} else if (jsMode === JsModes.TS) {
-			try {
-				if (!window.ts) {
-					d.resolve('');
-					return d.promise;
-				}
-				code = ts.transpileModule(code, {
-					reportDiagnostics: true,
-					compilerOptions: {
-						noEmitOnError: true,
-						diagnostics: true,
-						module: ts.ModuleKind.ES2015
-					}
-				});
-				if (code.diagnostics.length) {
-					/* eslint-disable no-throw-literal */
-					throw {
-						description: code.diagnostics[0].messageText,
-						lineNumber: ts.getLineOfLocalPosition(
-							code.diagnostics[0].file,
-							code.diagnostics[0].start
-						)
-					};
-				}
-				if (shouldPreventInfiniteLoops !== false) {
-					code = utils.addInfiniteLoopProtection(code.outputText, {
-						timeout: prefs.infiniteLoopTimeout
-					});
-				}
-				d.resolve(code);
-			} catch (e) {
-				showErrors('js', [
-					{ lineNumber: e.lineNumber - 1, message: e.description }
-				]);
-			}
-		}
-
-		return d.promise;
-	}
-
-	window.previewException = function(error) {
+	window.previewException = function (error) {
 		console.error('Possible infinite loop detected.', error.stack);
 		window.onMessageFromConsole(
 			'Possible infinite loop detected.',
 			error.stack
 		);
 	};
-	window.onunload = function() {
+	window.onunload = function () {
 		saveCode('code');
 		if (scope.detachedWindow) {
 			scope.detachedWindow.close();
@@ -1022,10 +244,11 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 	function cleanupErrors(lang) {
 		scope.cm[lang].clearGutter('error-gutter');
 	}
+
 	function showErrors(lang, errors) {
 		var editor = scope.cm[lang];
-		errors.forEach(function(e) {
-			editor.operation(function() {
+		errors.forEach(function (e) {
+			editor.operation(function () {
 				var n = document.createElement('div');
 				n.setAttribute('data-title', e.message);
 				n.classList.add('gutter-error-marker');
@@ -1034,225 +257,13 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 		});
 	}
 
-	/* eslint max-params: ["error", 4] */
-	function getCompleteHtml(html, css, js, isForExport) {
-		var externalJs = externalJsTextarea.value
-			.split('\n')
-			.reduce(function(scripts, url) {
-				return scripts + (url ? '\n<script src="' + url + '"></script>' : '');
-			}, '');
-		var externalCss = externalCssTextarea.value
-			.split('\n')
-			.reduce(function(links, url) {
-				return (
-					links +
-					(url ? '\n<link rel="stylesheet" href="' + url + '"></link>' : '')
-				);
-			}, '');
-		var contents =
-			'<!DOCTYPE html>\n' +
-			'<html>\n<head>\n' +
-			'<meta charset="UTF-8" />\n' +
-			externalCss +
-			'\n' +
-			'<style id="webmakerstyle">\n' +
-			css +
-			'\n</style>\n' +
-			'</head>\n' +
-			'<body>\n' +
-			html +
-			'\n' +
-			externalJs +
-			'\n';
 
-		if (!isForExport) {
-			contents +=
-				'<script src="' +
-				(chrome.extension
-					? chrome.extension.getURL('lib/screenlog.js')
-					: `${location.origin}${BASE_PATH}/lib/screenlog.js`) +
-				'"></script>';
-		}
-
-		if (jsMode === JsModes.ES6) {
-			contents +=
-				'<script src="' +
-				(chrome.extension
-					? chrome.extension.getURL('lib/transpilers/babel-polyfill.min.js')
-					: `${
-							location.origin
-						}${BASE_PATH}/lib/transpilers/babel-polyfill.min.js`) +
-				'"></script>';
-		}
-
-		if (typeof js === 'string') {
-			contents += '<script>\n' + js + '\n//# sourceURL=userscript.js';
-		} else {
-			var origin = chrome.i18n.getMessage()
-				? `chrome-extension://${chrome.i18n.getMessage('@@extension_id')}`
-				: `${location.origin}`;
-			contents +=
-				'<script src="' + `filesystem:${origin}/temporary/script.js` + '">';
-		}
-		contents += '\n</script>\n</body>\n</html>';
-
-		return contents;
-	}
-
-	function writeFile(name, blob, cb) {
-		var fileWritten = false;
-		function getErrorHandler(type) {
-			return function() {
-				utils.log(arguments);
-				trackEvent('fn', 'error', type);
-				// When there are too many write errors, show a message.
-				writeFile.errorCount = (writeFile.errorCount || 0) + 1;
-				if (writeFile.errorCount === 4) {
-					setTimeout(function() {
-						alert(
-							"Oops! Seems like your preview isn't updating. It's recommended to switch to the web app: https://webmakerapp.com/app/.\n\n If you still want to get the extension working, please try the following steps until it fixes:\n - Refresh Web Maker\n - Restart browser\n - Update browser\n - Reinstall Web Maker (don't forget to export all your creations from saved items pane (click the OPEN button) before reinstalling)\n\nIf nothing works, please tweet out to @webmakerApp."
-						);
-						trackEvent('ui', 'writeFileMessageSeen');
-					}, 1000);
-				}
-			};
-		}
-
-		// utils.log('writing file ', name);
-		window.webkitRequestFileSystem(
-			window.TEMPORARY,
-			1024 * 1024 * 5,
-			function(fs) {
-				fs.root.getFile(
-					name,
-					{ create: true },
-					function(fileEntry) {
-						fileEntry.createWriter(fileWriter => {
-							function onWriteComplete() {
-								if (fileWritten) {
-									// utils.log('file written ', name);
-									return cb();
-								}
-								fileWritten = true;
-								// Set the write pointer to starting of file
-								fileWriter.seek(0);
-								fileWriter.write(blob);
-								return false;
-							}
-							fileWriter.onwriteend = onWriteComplete;
-							// Empty the file contents
-							fileWriter.truncate(0);
-							// utils.log('truncating file ', name);
-						}, getErrorHandler('createWriterFail'));
-					},
-					getErrorHandler('getFileFail')
-				);
-			},
-			getErrorHandler('webkitRequestFileSystemFail')
-		);
-	}
-
-	function createPreviewFile(html, css, js) {
-		const shouldInlineJs =
-			!window.webkitRequestFileSystem || !window.IS_EXTENSION;
-		var contents = getCompleteHtml(html, css, shouldInlineJs ? js : null);
-		var blob = new Blob([contents], { type: 'text/plain;charset=UTF-8' });
-		var blobjs = new Blob([js], { type: 'text/plain;charset=UTF-8' });
-
-		// Track if people have written code.
-		if (!trackEvent.hasTrackedCode && (html || css || js)) {
-			trackEvent('fn', 'hasCode');
-			trackEvent.hasTrackedCode = true;
-		}
-
-		if (shouldInlineJs) {
-			if (scope.detachedWindow) {
-				utils.log('✉️ Sending message to detached window');
-				scope.detachedWindow.postMessage({ contents }, '*');
-			} else {
-				frame.src = frame.src;
-				setTimeout(() => {
-					frame.contentDocument.open();
-					frame.contentDocument.write(contents);
-					frame.contentDocument.close();
-				}, 10);
-			}
-		} else {
-			// we need to store user script in external JS file to prevent inline-script
-			// CSP from affecting it.
-			writeFile('script.js', blobjs, function() {
-				writeFile('preview.html', blob, function() {
-					var origin = chrome.i18n.getMessage()
-						? `chrome-extension://${chrome.i18n.getMessage('@@extension_id')}`
-						: `${location.origin}`;
-					var src = `filesystem:${origin}/temporary/preview.html`;
-					if (scope.detachedWindow) {
-						scope.detachedWindow.postMessage(src, '*');
-					} else {
-						frame.src = src;
-					}
-				});
-			});
-		}
-	}
-
-	/**
-	 * Generates the preview from the current code.
-	 * @param {boolean} isForced Should refresh everything without any check or not
-	 * @param {boolean} isManual Is this a manual preview request from user?
-	 */
-	scope.setPreviewContent = function(isForced, isManual) {
-		if (!prefs.autoPreview && !isManual) {
-			return;
-		}
-
-		if (!prefs.preserveConsoleLogs) {
-			scope.clearConsole();
-		}
-
-		var currentCode = {
-			html: scope.cm.html.getValue(),
-			css: scope.cm.css.getValue(),
-			js: scope.cm.js.getValue()
-		};
-		utils.log('🔎 setPreviewContent', isForced);
-		const targetFrame = scope.detachedWindow
-			? scope.detachedWindow.document.querySelector('iframe')
-			: frame;
-
-		// If just CSS was changed (and everything shudn't be empty),
-		// change the styles inside the iframe.
-		if (
-			!isForced &&
-			currentCode.html === codeInPreview.html &&
-			currentCode.js === codeInPreview.js
-		) {
-			computeCss().then(function(css) {
-				if (targetFrame.contentDocument.querySelector('#webmakerstyle')) {
-					targetFrame.contentDocument.querySelector(
-						'#webmakerstyle'
-					).textContent = css;
-				}
-			});
-		} else {
-			var htmlPromise = computeHtml();
-			var cssPromise = computeCss();
-			var jsPromise = computeJs();
-			Promise.all([htmlPromise, cssPromise, jsPromise]).then(function(result) {
-				createPreviewFile(result[0], result[1], result[2]);
-			});
-		}
-
-		codeInPreview.html = currentCode.html;
-		codeInPreview.css = currentCode.css;
-		codeInPreview.js = currentCode.js;
-	};
 
 	function saveFile() {
 		var htmlPromise = computeHtml();
 		var cssPromise = computeCss();
 		var jsPromise = computeJs(false);
-		Promise.all([htmlPromise, cssPromise, jsPromise]).then(function(result) {
+		Promise.all([htmlPromise, cssPromise, jsPromise]).then(function (result) {
 			var html = result[0],
 				css = result[1],
 				js = result[2];
@@ -1275,154 +286,15 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 			}
 			fileName += '.html';
 
-			var blob = new Blob([fileContent], { type: 'text/html;charset=UTF-8' });
+			var blob = new Blob([fileContent], {
+				type: 'text/html;charset=UTF-8'
+			});
 			utils.downloadFile(fileName, blob);
 
 			trackEvent('fn', 'saveFileComplete');
 		});
 	}
 
-	function initEditor(element, options) {
-		var cm = CodeMirror(element, {
-			mode: options.mode,
-			lineNumbers: true,
-			lineWrapping: true,
-			autofocus: options.autofocus || false,
-			autoCloseBrackets: true,
-			autoCloseTags: true,
-			matchBrackets: true,
-			matchTags: options.matchTags || false,
-			tabMode: 'indent',
-			keyMap: 'sublime',
-			theme: 'monokai',
-			lint: !!options.lint,
-			tabSize: 2,
-			foldGutter: true,
-			styleActiveLine: true,
-			gutters: options.gutters || [],
-			// cursorScrollMargin: '20', has issue with scrolling
-			profile: options.profile || '',
-			extraKeys: {
-				Up: function(editor) {
-					// Stop up/down keys default behavior when saveditempane is open
-					if (isSavedItemsPaneOpen) {
-						return;
-					}
-					CodeMirror.commands.goLineUp(editor);
-				},
-				Down: function(editor) {
-					if (isSavedItemsPaneOpen) {
-						return;
-					}
-					CodeMirror.commands.goLineDown(editor);
-				},
-				'Shift-Tab': function(editor) {
-					CodeMirror.commands.indentAuto(editor);
-				},
-				Tab: function(editor) {
-					if (options.emmet) {
-						const didEmmetWork = editor.execCommand('emmetExpandAbbreviation');
-						if (didEmmetWork === true) {
-							return;
-						}
-					}
-					const input = $('[data-setting=indentWith]:checked');
-					if (
-						!editor.somethingSelected() &&
-						(!input || input.value === 'spaces')
-					) {
-						// softtabs adds spaces. This is required because by default tab key will put tab, but we want
-						// to indent with spaces if `spaces` is preferred mode of indentation.
-						// `somethingSelected` needs to be checked otherwise, all selected code is replaced with softtab.
-						CodeMirror.commands.insertSoftTab(editor);
-					} else {
-						CodeMirror.commands.defaultTab(editor);
-					}
-				},
-				Enter: 'emmetInsertLineBreak'
-			}
-		});
-		cm.on('focus', editor => {
-			editorWithFocus = editor;
-		});
-		cm.on('change', function onChange(editor, change) {
-			clearTimeout(updateTimer);
-
-			updateTimer = setTimeout(function() {
-				// This is done so that multiple simultaneous setValue don't trigger too many preview refreshes
-				// and in turn too many file writes on a single file (eg. preview.html).
-				if (change.origin !== 'setValue') {
-					// Specifically checking for false so that the condition doesn't get true even
-					// on absent key - possible when the setting key hasn't been fetched yet.
-					if (prefs.autoPreview !== false) {
-						scope.setPreviewContent();
-					}
-
-					saveBtn.classList.add('is-marked');
-					unsavedEditCount += 1;
-					if (
-						unsavedEditCount % unsavedEditWarningCount === 0 &&
-						unsavedEditCount >= unsavedEditWarningCount
-					) {
-						saveBtn.classList.add('animated');
-						saveBtn.classList.add('wobble');
-						saveBtn.addEventListener('animationend', () => {
-							saveBtn.classList.remove('animated');
-							saveBtn.classList.remove('wobble');
-						});
-					}
-
-					// Track when people actually are working.
-					trackEvent.previewCount = (trackEvent.previewCount || 0) + 1;
-					if (trackEvent.previewCount === 4) {
-						trackEvent('fn', 'usingPreview');
-					}
-				}
-			}, updateDelay);
-		});
-		cm.addKeyMap({
-			'Ctrl-Space': 'autocomplete'
-		});
-		if (!options.noAutocomplete) {
-			cm.on('inputRead', function onChange(editor, input) {
-				if (
-					!prefs.autoComplete ||
-					input.origin !== '+input' ||
-					input.text[0] === ';' ||
-					input.text[0] === ',' ||
-					input.text[0] === ' '
-				) {
-					return;
-				}
-				CodeMirror.commands.autocomplete(cm, null, { completeSingle: false });
-			});
-		}
-		return cm;
-	}
-
-	scope.cm.html = initEditor(htmlCode, {
-		mode: 'htmlmixed',
-		profile: 'xhtml',
-		gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
-		noAutocomplete: true,
-		matchTags: { bothTags: true },
-		emmet: true
-	});
-	scope.cm.css = initEditor(cssCode, {
-		mode: 'css',
-		gutters: [
-			'error-gutter',
-			'CodeMirror-linenumbers',
-			'CodeMirror-foldgutter'
-		],
-		emmet: true
-	});
-	Inlet(scope.cm.css);
-	scope.cm.js = initEditor(jsCode, {
-		mode: 'javascript',
-		gutters: ['error-gutter', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter']
-	});
-	Inlet(scope.cm.js);
 
 	// Initialize codemirror in console
 	scope.consoleCm = CodeMirror(consoleLogEl, {
@@ -1434,23 +306,6 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 		gutters: ['CodeMirror-foldgutter']
 	});
 
-	// DEPRECATED
-	function openSettings() {
-		scope.toggleModal(settingsModal);
-
-		/* if (chrome.runtime.openOptionsPage) {
-			// New way to open options pages, if supported (Chrome 42+).
-			// Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=601997
-			// Until this bug fixes, use the
-			// fallback.
-			chrome.runtime.openOptionsPage();
-		} else {
-			// Fallback.
-			chrome.tabs.create({
-				url: 'chrome://extensions?options=' + chrome.i18n.getMessage('@@extension_id')
-			});
-		} */
-	}
 
 	scope.onModalSettingsLinkClick = function onModalSettingsLinkClick() {
 		openSettings();
@@ -1466,7 +321,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 
 	scope.exportItems = function exportItems(e) {
 		handleDownloadsPermission().then(() => {
-			fetchItems().then(function(items) {
+			fetchItems().then(function (items) {
 				var d = new Date();
 				var fileName = [
 					'web-maker-export',
@@ -1510,7 +365,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 		if (existingItemIds.length) {
 			var shouldReplace = confirm(
 				existingItemIds.length +
-					' creations already exist. Do you want to replace them?'
+				' creations already exist. Do you want to replace them?'
 			);
 			if (shouldReplace) {
 				utils.log('shouldreplace', shouldReplace);
@@ -1541,7 +396,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 		var file = e.target.files[0];
 
 		var reader = new FileReader();
-		reader.onload = function(progressEvent) {
+		reader.onload = function (progressEvent) {
 			var items;
 			try {
 				items = JSON.parse(progressEvent.target.result);
@@ -1589,7 +444,9 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 		}
 
 		// create a blob for writing to a file
-		var blob = new Blob([ab], { type: mimeString });
+		var blob = new Blob([ab], {
+			type: mimeString
+		});
 		var size = blob.size + 1024 / 2;
 
 		var d = new Date();
@@ -1611,11 +468,10 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 				'/temporary/' +
 				fileName;
 
-			chrome.downloads.download(
-				{
+			chrome.downloads.download({
 					url: filePath
 				},
-				function() {
+				function () {
 					// If there was an error, just open the screenshot in a tab.
 					// This happens in incognito mode where extension cannot access filesystem.
 					if (chrome.runtime.lastError) {
@@ -1635,8 +491,9 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 			size,
 			fs => {
 				fs.root.getFile(
-					fileName,
-					{ create: true },
+					fileName, {
+						create: true
+					},
 					fileEntry => {
 						fileEntry.createWriter(fileWriter => {
 							fileWriter.onwriteend = onWriteEnd;
@@ -1656,19 +513,17 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 			d.resolve();
 			return d.promise;
 		}
-		chrome.permissions.contains(
-			{
+		chrome.permissions.contains({
 				permissions: ['downloads']
 			},
-			function(result) {
+			function (result) {
 				if (result) {
 					d.resolve();
 				} else {
-					chrome.permissions.request(
-						{
+					chrome.permissions.request({
 							permissions: ['downloads']
 						},
-						function(granted) {
+						function (granted) {
 							if (granted) {
 								trackEvent('fn', 'downloadsPermGiven');
 								d.resolve();
@@ -1683,7 +538,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 		return d.promise;
 	}
 
-	scope.takeScreenshot = function(e) {
+	scope.takeScreenshot = function (e) {
 		handleDownloadsPermission().then(() => {
 			// Hide tooltips so that they don't show in the screenshot
 			var s = document.createElement('style');
@@ -1716,9 +571,11 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 
 			setTimeout(() => {
 				chrome.tabs.captureVisibleTab(
-					null,
-					{ format: 'png', quality: 100 },
-					function(dataURI) {
+					null, {
+						format: 'png',
+						quality: 100
+					},
+					function (dataURI) {
 						s.remove();
 						if (dataURI) {
 							var image = new Image();
@@ -1735,163 +592,9 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 		e.preventDefault();
 	};
 
-	// Populate the settings in the settings UI
-	function updateSettingsInUi() {
-		$('[data-setting=preserveLastCode]').checked = prefs.preserveLastCode;
-		$('[data-setting=replaceNewTab]').checked = prefs.replaceNewTab;
-		$('[data-setting=htmlMode]').value = prefs.htmlMode;
-		$('[data-setting=cssMode]').value = prefs.cssMode;
-		$('[data-setting=jsMode]').value = prefs.jsMode;
-		$('[data-setting=indentSize]').value = prefs.indentSize;
-		indentationSizeValueEl.textContent = prefs.indentSize;
-		$(
-			'[data-setting=indentWith][value=' + (prefs.indentWith || 'spaces') + ']'
-		).checked = true;
-		$('[data-setting=isCodeBlastOn]').checked = prefs.isCodeBlastOn;
-		$('[data-setting=editorTheme]').value = prefs.editorTheme;
-		$(
-			'[data-setting=keymap][value=' + (prefs.keymap || 'sublime') + ']'
-		).checked = true;
-		$('[data-setting=fontSize]').value = prefs.fontSize || 16;
-		$('[data-setting=refreshOnResize]').checked = prefs.refreshOnResize;
-		$('[data-setting=autoPreview]').checked = prefs.autoPreview;
-		$('[data-setting=editorFont]').value = prefs.editorFont;
-		$('[data-setting=editorCustomFont]').value = prefs.editorCustomFont;
-		$('[data-setting=autoSave]').checked = prefs.autoSave;
-		$('[data-setting=autoComplete]').checked = prefs.autoComplete;
-		$('[data-setting=preserveConsoleLogs]').checked = prefs.preserveConsoleLogs;
-		$('[data-setting=lightVersion]').checked = prefs.lightVersion;
-		$('[data-setting=lineWrap]').checked = prefs.lineWrap;
-		$('[data-setting=infiniteLoopTimeout]').value =
-			prefs.infiniteLoopTimeout;
-	}
 
-	/**
-	 * Handles all user triggered preference changes in the UI.
-	 */
-	scope.updateSetting = function updateSetting(e) {
-		// If this was triggered from user interaction, save the setting
-		if (e) {
-			var settingName = e.target.dataset.setting;
-			var obj = {};
-			var el = e.target;
-			utils.log(settingName, el.type === 'checkbox' ? el.checked : el.value);
-			prefs[settingName] = el.type === 'checkbox' ? el.checked : el.value;
-			obj[settingName] = prefs[settingName];
 
-			// We always save locally so that it gets fetched
-			// faster on future loads.
-			db.sync.set(obj, function() {
-				alertsService.add('Setting saved');
-			});
-			if (window.user) {
-				window.db.getDb().then(remoteDb => {
-					remoteDb
-						.collection('users')
-						.doc(window.user.uid)
-						.update({
-							[`settings.${settingName}`]: prefs[settingName]
-						})
-						.then(arg => {
-							utils.log(`Setting "${settingName}" for user`, arg);
-						})
-						.catch(error => utils.log(error));
-				});
-			}
-			trackEvent('ui', 'updatePref-' + settingName, prefs[settingName]);
-		}
-
-		// Show/hide RUN button based on autoPreview setting.
-		runBtn.classList[prefs.autoPreview ? 'add' : 'remove']('hide');
-
-		htmlCode.querySelector('.CodeMirror').style.fontSize = prefs.fontSize;
-		cssCode.querySelector('.CodeMirror').style.fontSize = prefs.fontSize;
-		jsCode.querySelector('.CodeMirror').style.fontSize = prefs.fontSize;
-		consoleEl.querySelector('.CodeMirror').style.fontSize = prefs.fontSize;
-
-		// Update indentation count when slider is updated
-		indentationSizeValueEl.textContent = $('[data-setting=indentSize]').value;
-
-		// Replace correct css file in LINK tags's href
-		editorThemeLinkTag.href = `lib/codemirror/theme/${prefs.editorTheme}.css`;
-		fontStyleTag.textContent = fontStyleTemplate.textContent.replace(
-			/fontname/g,
-			(prefs.editorFont === 'other'
-				? prefs.editorCustomFont
-				: prefs.editorFont) || 'FiraCode'
-		);
-		customEditorFontInput.classList[
-			prefs.editorFont === 'other' ? 'remove' : 'add'
-		]('hide');
-
-		['html', 'js', 'css'].forEach(type => {
-			scope.cm[type].setOption(
-				'indentWithTabs',
-				$('[data-setting=indentWith]:checked').value !== 'spaces'
-			);
-			scope.cm[type].setOption(
-				'blastCode',
-				$('[data-setting=isCodeBlastOn]').checked
-					? { effect: 2, shake: false }
-					: false
-			);
-			scope.cm[type].setOption(
-				'indentUnit',
-				+$('[data-setting=indentSize]').value
-			);
-			scope.cm[type].setOption(
-				'tabSize',
-				+$('[data-setting=indentSize]').value
-			);
-			scope.cm[type].setOption('theme', $('[data-setting=editorTheme]').value);
-
-			scope.cm[type].setOption(
-				'keyMap',
-				$('[data-setting=keymap]:checked').value
-			);
-			scope.cm[type].setOption(
-				'lineWrapping',
-				$('[data-setting=lineWrap]').checked
-			);
-			scope.cm[type].refresh();
-		});
-		scope.consoleCm.setOption('theme', $('[data-setting=editorTheme]').value);
-		scope.acssSettingsCm.setOption(
-			'theme',
-			$('[data-setting=editorTheme]').value
-		);
-		if (prefs.autoSave) {
-			if (!autoSaveInterval) {
-				autoSaveInterval = setInterval(autoSaveLoop, AUTO_SAVE_INTERVAL);
-			}
-		} else {
-			clearInterval(autoSaveInterval);
-			autoSaveInterval = null;
-		}
-
-		document.body.classList[prefs.lightVersion ? 'add' : 'remove'](
-			'light-version'
-		);
-	};
-
-	scope.onNewBtnClick = function() {
-		trackEvent('ui', 'newBtnClick');
-		if (unsavedEditCount) {
-			var shouldDiscard = confirm(
-				'You have unsaved changes. Do you still want to create something new?'
-			);
-			if (shouldDiscard) {
-				createNewItem();
-			}
-		} else {
-			createNewItem();
-		}
-	};
-	scope.onOpenBtnClick = function() {
-		trackEvent('ui', 'openBtnClick');
-		openSavedItemsPane();
-	};
-	scope.onSaveBtnClick = function() {
+	scope.onSaveBtnClick = function () {
 		trackEvent('ui', 'saveBtnClick', currentItem.id ? 'saved' : 'new');
 		saveItem();
 	};
@@ -1900,7 +603,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 	 * Toggles a modal and logs an event.
 	 * @param  {Node} modal     modal to be toggled
 	 */
-	scope.toggleModal = function(modal) {
+	scope.toggleModal = function (modal) {
 		modal.classList.toggle('is-modal-visible');
 		const hasOpened = modal.classList.contains('is-modal-visible');
 		document.body.classList[hasOpened ? 'add' : 'remove']('overlay-visible');
@@ -1920,7 +623,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 				.addEventListener('transitionend', onTransitionEnd);
 		}
 	};
-	scope.onSearchInputChange = function(e) {
+	scope.onSearchInputChange = function (e) {
 		const text = e.target.value;
 		let el;
 		for (const [itemId, item] of Object.entries(savedItems)) {
@@ -1934,21 +637,21 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 		trackEvent('ui', 'searchInputType');
 	};
 
-	scope.toggleConsole = function() {
+	scope.toggleConsole = function () {
 		consoleEl.classList.toggle('is-minimized');
 		trackEvent('ui', 'consoleToggle');
 	};
 	// `clearConsole` is on window because it gets called from inside iframe also.
-	scope.clearConsole = window.clearConsole = function() {
+	scope.clearConsole = window.clearConsole = function () {
 		scope.consoleCm.setValue('');
 		logCount = 0;
 		logCountEl.textContent = logCount;
 	};
-	scope.onClearConsoleBtnClick = function() {
+	scope.onClearConsoleBtnClick = function () {
 		scope.clearConsole();
 		trackEvent('ui', 'consoleClearBtnClick');
 	};
-	scope.evalConsoleExpr = function(e) {
+	scope.evalConsoleExpr = function (e) {
 		// Clear console on CTRL + L
 		if ((e.which === 76 || e.which === 12) && e.ctrlKey) {
 			scope.clearConsole();
@@ -1965,9 +668,9 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 			trackEvent('fn', 'evalConsoleExpr');
 		}
 	};
-	window.onMessageFromConsole = function() {
+	window.onMessageFromConsole = function () {
 		/* eslint-disable no-param-reassign */
-		[...arguments].forEach(function(arg) {
+		[...arguments].forEach(function (arg) {
 			if (
 				arg &&
 				arg.indexOf &&
@@ -1981,13 +684,16 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 			try {
 				scope.consoleCm.replaceRange(
 					arg +
-						' ' +
-						((arg + '').match(/\[object \w+]/) ? JSON.stringify(arg) : '') +
-						'\n',
-					{ line: Infinity }
+					' ' +
+					((arg + '').match(/\[object \w+]/) ? JSON.stringify(arg) : '') +
+					'\n', {
+						line: Infinity
+					}
 				);
 			} catch (e) {
-				scope.consoleCm.replaceRange('🌀\n', { line: Infinity });
+				scope.consoleCm.replaceRange('🌀\n', {
+					line: Infinity
+				});
 			}
 			scope.consoleCm.scrollTo(0, Infinity);
 			logCount++;
@@ -2012,8 +718,8 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 
 		function attachListenerForEvent(eventName) {
 			const nodes = query(`[d-${eventName}]`);
-			nodes.forEach(function(el) {
-				el.addEventListener(eventName, function(e) {
+			nodes.forEach(function (el) {
+				el.addEventListener(eventName, function (e) {
 					scope[el.getAttribute(`d-${eventName}`)].call(window, e);
 				});
 			});
@@ -2025,8 +731,8 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 
 		// Compile d-open-modal directive
 		const modalTriggers = query(`[d-open-modal]`);
-		modalTriggers.forEach(function(el) {
-			utils.onButtonClick(el, function() {
+		modalTriggers.forEach(function (el) {
+			utils.onButtonClick(el, function () {
 				scope.toggleModal(window[el.getAttribute('d-open-modal')]);
 				trackEvent(
 					el.getAttribute('data-event-category'),
@@ -2037,7 +743,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 
 		// Compile d-html directive
 		const dHtmlNodes = query(`[d-html]`);
-		dHtmlNodes.forEach(function(el) {
+		dHtmlNodes.forEach(function (el) {
 			fetch(el.getAttribute('d-html')).then(response => {
 				// Stop further compilation because of future recursion, by removing attribute.
 				el.removeAttribute('d-html');
@@ -2052,48 +758,13 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 		});
 	}
 
-	scope.onRunBtnClick = function() {
+	scope.onRunBtnClick = function () {
 		scope.setPreviewContent(true, true);
 		trackEvent('ui', 'runBtnClick');
 	};
 
-	scope.openDetachedPreview = function() {
-		trackEvent('ui', 'detachPreviewBtnClick');
 
-		if (scope.detachedWindow) {
-			scope.detachedWindow.focus();
-			return;
-		}
-		var iframeBounds = frame.getBoundingClientRect();
-		const iframeWidth = iframeBounds.width;
-		const iframeHeight = iframeBounds.height;
-		document.body.classList.add('is-detached-mode');
-		globalConsoleContainerEl.insertBefore(consoleEl, null);
-
-		scope.detachedWindow = window.open(
-			'./preview.html',
-			'Web Maker',
-			`width=${iframeWidth},height=${iframeHeight},resizable,scrollbars=yes,status=1`
-		);
-		// Trigger initial render in detached window
-		setTimeout(() => {
-			scope.setPreviewContent(true);
-		}, 1500);
-		function checkWindow() {
-			if (scope.detachedWindow && scope.detachedWindow.closed) {
-				clearInterval(intervalID);
-				document.body.classList.remove('is-detached-mode');
-				$('#js-demo-side').insertBefore(consoleEl, null);
-				scope.detachedWindow = null;
-				// Update main frame preview to get latest changes (which were not
-				// getting reflected while detached window was open)
-				scope.setPreviewContent(true);
-			}
-		}
-		var intervalID = window.setInterval(checkWindow, 500);
-	};
-
-	scope.openCssSettingsModal = function() {
+	scope.openCssSettingsModal = function () {
 		scope.toggleModal(cssSettingsModal);
 		setTimeout(() => {
 			// Refresh is required because codemirror gets scaled inside modal and loses alignement.
@@ -2103,12 +774,8 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 		trackEvent('ui', 'cssSettingsBtnClick');
 	};
 
-	scope.onModalCloseBtnClick = function(e) {
-		closeAllOverlays();
-		e.preventDefault();
-	};
 
-	scope.openSupportDeveloperModal = function(e) {
+	scope.openSupportDeveloperModal = function (e) {
 		closeAllOverlays();
 		scope.toggleModal(pledgeModal);
 		if (e) {
@@ -2116,41 +783,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 		}
 	};
 
-	scope.updateProfileUi = () => {
-		if (window.user) {
-			document.body.classList.add('is-logged-in');
-			headerAvatarImg.src = profileAvatarImg.src =
-				window.user.photoURL || DEFAULT_PROFILE_IMG;
-			profileUserName.textContent =
-				window.user.displayName || 'Anonymous Creator';
-		} else {
-			document.body.classList.remove('is-logged-in');
-			headerAvatarImg.src = profileAvatarImg.src = '';
-			profileUserName.textContent = 'Anonymous Creator';
-		}
-	};
 
-	scope.login = e => {
-		const provider = e.target.dataset.authProvider;
-		trackEvent('ui', 'loginProviderClick', provider);
-		window.login(provider);
-		if (e) {
-			e.preventDefault();
-		}
-	};
-	scope.logout = e => {
-		e.preventDefault();
-		if (unsavedEditCount) {
-			var shouldDiscard = confirm(
-				'You have unsaved changes. Do you still want to logout?'
-			);
-			if (!shouldDiscard) {
-				return;
-			}
-		}
-		trackEvent('fn', 'loggedOut');
-		window.logout();
-	};
 
 	/**
 	 * Called from inside ask-to-import-modal
@@ -2174,55 +807,14 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 	};
 
 	function init() {
-		var config = {
-			apiKey: 'AIzaSyBl8Dz7ZOE7aP75mipYl2zKdLSRzBU2fFc',
-			authDomain: 'web-maker-app.firebaseapp.com',
-			databaseURL: 'https://web-maker-app.firebaseio.com',
-			projectId: 'web-maker-app',
-			storageBucket: 'web-maker-app.appspot.com',
-			messagingSenderId: '560473480645'
-		};
-		firebase.initializeApp(config);
 
-		firebase.auth().onAuthStateChanged(function(user) {
-			scope.closeAllOverlays();
-			if (user) {
-				utils.log('You are -> ', user);
-				alertsService.add('You are now logged in!');
-				scope.user = window.user = user;
-				if (
-					!window.localStorage[LocalStorageKeys.ASKED_TO_IMPORT_CREATIONS] &&
-					window.oldSavedCreationsCountEl
-				) {
-					fetchItems(false, true).then(items => {
-						if (!items.length) {
-							return;
-						}
-						scope.oldSavedItems = items;
-						window.oldSavedCreationsCountEl.textContent = items.length;
-						scope.toggleModal(askToImportModal);
-						trackEvent('ui', 'askToImportModalSeen');
-					});
-				}
-				window.db.getUser(user.uid).then(customUser => {
-					if (customUser) {
-						Object.assign(prefs, user.settings);
-						updateSettingsInUi();
-						scope.updateSetting();
-					}
-				});
-			} else {
-				delete window.user;
-				// User is signed out.
-			}
-			scope.updateProfileUi();
-		});
+
 
 		var lastCode;
 
-		CodeMirror.modeURL = `lib/codemirror/mode/%N/%N.js`;
-
-		window.db.local.get({ lastAuthProvider: '' }, result => {
+		window.db.local.get({
+			lastAuthProvider: ''
+		}, result => {
 			if (result.lastAuthProvider) {
 				document.body.classList.add(`last-login-${result.lastAuthProvider}`);
 			}
@@ -2230,21 +822,9 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 
 		document.body.style.height = `${window.innerHeight}px`;
 
-		function getToggleLayoutButtonListener(mode) {
-			return function() {
-				saveSetting('layoutMode', mode);
-				trackEvent('ui', 'toggleLayoutClick', mode);
-				toggleLayout(mode);
-				return false;
-			};
-		}
-		layoutBtn1.addEventListener('click', getToggleLayoutButtonListener(1));
-		layoutBtn2.addEventListener('click', getToggleLayoutButtonListener(2));
-		layoutBtn3.addEventListener('click', getToggleLayoutButtonListener(3));
-		layoutBtn4.addEventListener('click', getToggleLayoutButtonListener(4));
-		layoutBtn5.addEventListener('click', getToggleLayoutButtonListener(5));
 
-		notificationsBtn.addEventListener('click', function() {
+
+		notificationsBtn.addEventListener('click', function () {
 			scope.toggleModal(notificationsModal);
 
 			if (
@@ -2259,7 +839,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 			return false;
 		});
 
-		codepenBtn.addEventListener('click', function(e) {
+		codepenBtn.addEventListener('click', function (e) {
 			if (cssMode === CssModes.ACSS) {
 				alert("Oops! CodePen doesn't supports Atomic CSS currently.");
 				e.preventDefault();
@@ -2291,16 +871,16 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 			e.preventDefault();
 		});
 
-		utils.onButtonClick(saveHtmlBtn, function() {
+		utils.onButtonClick(saveHtmlBtn, function () {
 			saveFile();
 			trackEvent('ui', 'saveHtmlClick');
 		});
 
 		utils.onButtonClick(savedItemsPaneCloseBtn, toggleSavedItemsPane);
-		utils.onButtonClick(savedItemsPane, function(e) {
+		utils.onButtonClick(savedItemsPane, function (e) {
 			// TODO: warn about unsaved changes in current item
 			if (e.target.classList.contains('js-saved-item-tile')) {
-				setTimeout(function() {
+				setTimeout(function () {
 					openItem(e.target.dataset.itemId);
 				}, 350);
 				toggleSavedItemsPane();
@@ -2309,7 +889,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 				removeItem(e.target.parentElement.parentElement.dataset.itemId);
 			} else if (e.target.classList.contains('js-saved-item-tile__fork-btn')) {
 				toggleSavedItemsPane();
-				setTimeout(function() {
+				setTimeout(function () {
 					forkItem(
 						savedItems[e.target.parentElement.parentElement.dataset.itemId]
 					);
@@ -2317,37 +897,11 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 			}
 		});
 
-		titleInput.addEventListener('blur', function() {
-			if (currentItem.id) {
-				saveItem();
-				trackEvent('ui', 'titleChanged');
-			}
-		});
-
-		// Attach listeners on mode change menu items
-		$all('.js-mode-select').forEach(selectBox => {
-			selectBox.addEventListener('change', function(e) {
-				var mode = e.target.value;
-				var type = e.target.dataset.type;
-				var currentMode =
-					type === 'html' ? htmlMode : type === 'css' ? cssMode : jsMode;
-				if (currentMode !== mode) {
-					if (type === 'html') {
-						updateHtmlMode(mode).then(() => scope.setPreviewContent(true));
-					} else if (type === 'js') {
-						updateJsMode(mode).then(() => scope.setPreviewContent(true));
-					} else if (type === 'css') {
-						updateCssMode(mode).then(() => scope.setPreviewContent(true));
-					}
-					trackEvent('ui', 'updateCodeMode', mode);
-				}
-			});
-		});
 
 		// Collapse btn event listeners
 		var collapseBtns = $all('.js-code-collapse-btn');
-		collapseBtns.forEach(function(btn) {
-			btn.addEventListener('click', function(e) {
+		collapseBtns.forEach(function (btn) {
+			btn.addEventListener('click', function (e) {
 				var codeWrapParent =
 					e.currentTarget.parentElement.parentElement.parentElement;
 				toggleCodeWrapCollapse(codeWrapParent);
@@ -2358,14 +912,14 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 
 		// Update code wrap collapse states whenever any of them transitions due to any
 		// reason.
-		[htmlCode, cssCode, jsCode].forEach(function(el) {
-			el.addEventListener('transitionend', function() {
+		[htmlCode, cssCode, jsCode].forEach(function (el) {
+			el.addEventListener('transitionend', function () {
 				updateCodeWrapCollapseStates();
 			});
 		});
 
 		// Editor keyboard shortucuts
-		window.addEventListener('keydown', function(event) {
+		window.addEventListener('keydown', function (event) {
 			// TODO: refactor common listener code
 			// Ctrl/⌘ + S
 			if ((event.ctrlKey || event.metaKey) && event.keyCode === 83) {
@@ -2401,7 +955,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 			}
 		});
 
-		savedItemsPane.addEventListener('keydown', function(event) {
+		savedItemsPane.addEventListener('keydown', function (event) {
 			if (!isSavedItemsPaneOpen) {
 				return;
 			}
@@ -2430,7 +984,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 			}
 
 			if (isEnterKeyPressed && selectedItemElement) {
-				setTimeout(function() {
+				setTimeout(function () {
 					openItem(selectedItemElement.dataset.itemId);
 				}, 350);
 				toggleSavedItemsPane();
@@ -2439,7 +993,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 			// Fork shortcut inside saved creations panel with Ctrl/⌘ + F
 			if (isForkKeyPressed) {
 				event.preventDefault();
-				setTimeout(function() {
+				setTimeout(function () {
 					forkItem(savedItems[selectedItemElement.dataset.itemId]);
 				}, 350);
 				toggleSavedItemsPane();
@@ -2447,7 +1001,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 			}
 		});
 
-		window.addEventListener('click', function(e) {
+		window.addEventListener('click', function (e) {
 			if (typeof e.target.className !== 'string') {
 				return;
 			}
@@ -2458,7 +1012,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 				closeAllOverlays();
 			}
 		});
-		window.addEventListener('dblclick', function(e) {
+		window.addEventListener('dblclick', function (e) {
 			var target = e.target;
 			if (target.classList.contains('js-console__header')) {
 				scope.toggleConsole();
@@ -2474,8 +1028,8 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 		// Initialize add library select box
 		var libOptions = window.jsLibs.reduce(
 			(html, lib) =>
-				html +
-				`<option data-type="${lib.type}" value="${lib.url}">${
+			html +
+			`<option data-type="${lib.type}" value="${lib.url}">${
 					lib.label
 				}</option>`,
 			''
@@ -2483,8 +1037,8 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 		addLibrarySelect.children[1].innerHTML = libOptions;
 		libOptions = window.cssLibs.reduce(
 			(html, lib) =>
-				html +
-				`<option data-type="${lib.type}" value="${lib.url}">${
+			html +
+			`<option data-type="${lib.type}" value="${lib.url}">${
 					lib.label
 				}</option>`,
 			''
@@ -2513,9 +1067,9 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 		});
 		new TextareaAutoComplete(externalLibrarySearchInput, {
 			selectedCallback: value => {
-				const textarea = value.match(/\.js$/)
-					? externalJsTextarea
-					: externalCssTextarea;
+				const textarea = value.match(/\.js$/) ?
+					externalJsTextarea :
+					externalCssTextarea;
 				textarea.value = `${textarea.value}\n${value}`;
 				externalLibrarySearchInput.value = '';
 			}
@@ -2524,6 +1078,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 		// Console header drag resize logic
 		var consoleHeaderDragStartY;
 		var consoleInitialHeight;
+
 		function onConsoleHeaderDrag(e) {
 			consoleEl.style.height =
 				consoleInitialHeight + consoleHeaderDragStartY - e.pageY + 'px';
@@ -2539,80 +1094,9 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 			$('#demo-frame').classList.remove('pointer-none');
 		});
 
-		db.local.get(
-			{
-				layoutMode: 1,
-				code: ''
-			},
-			function localGetCallback(result) {
-				toggleLayout(result.layoutMode);
-				prefs.layoutMode = result.layoutMode;
-				if (result.code) {
-					lastCode = result.code;
-				}
-			}
-		);
 
-		// Get synced `preserveLastCode` setting to get back last code (or not).
-		db.getSettings(defaultSettings).then(result => {
-			if (result.preserveLastCode && lastCode) {
-				unsavedEditCount = 0;
-				// For web app environment we don't fetch item from localStorage,
-				// because the item isn't stored in the localStorage.
-				if (lastCode.id && window.IS_EXTENSION) {
-					db.local.get(lastCode.id, function(itemResult) {
-						if (itemResult[lastCode.id]) {
-							utils.log('Load item ', lastCode.id);
-							currentItem = itemResult[lastCode.id];
-							refreshEditor();
-						}
-					});
-				} else {
-					utils.log('Load last unsaved item', lastCode);
-					currentItem = lastCode;
-					refreshEditor();
-				}
-			} else {
-				createNewItem();
-			}
-			Object.assign(prefs, result);
 
-			updateSettingsInUi();
-			scope.updateSetting();
-		});
 
-		// Check for new version notifications
-		db.getUserLastSeenVersion().then(lastSeenVersion => {
-			// Check if new user
-			if (!lastSeenVersion) {
-				onboardModal.classList.add('is-modal-visible');
-				if (document.cookie.indexOf('onboarded') === -1) {
-					trackEvent('ui', 'onboardModalSeen', version);
-					document.cookie = 'onboarded=1';
-				}
-				window.db.setUserLastSeenVersion(version);
-				// set some initial preferences on closing the onboard modal
-				// Old onboarding.
-				// utils.once(document, 'overlaysClosed', function() {});
-			}
-			// If its an upgrade
-			if (
-				lastSeenVersion &&
-				utils.semverCompare(lastSeenVersion, version) === -1 &&
-				!window.localStorage.pledgeModalSeen
-			) {
-				scope.openSupportDeveloperModal();
-				window.localStorage.pledgeModalSeen = true;
-			}
-
-			if (
-				!lastSeenVersion ||
-				utils.semverCompare(lastSeenVersion, version) === -1
-			) {
-				notificationsBtn.classList.add('has-new');
-				hasSeenNotifications = false;
-			}
-		});
 
 		scope.acssSettingsCm = CodeMirror.fromTextArea(acssSettingsTextarea, {
 			mode: 'application/ld+json'
@@ -2621,63 +1105,6 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 			scope.setPreviewContent(true);
 		});
 
-		var options = '';
-		[
-			'3024-day',
-			'3024-night',
-			'abcdef',
-			'ambiance',
-			'base2tone-meadow-dark',
-			'base16-dark',
-			'base16-light',
-			'bespin',
-			'blackboard',
-			'cobalt',
-			'colorforth',
-			'dracula',
-			'duotone-dark',
-			'duotone-light',
-			'eclipse',
-			'elegant',
-			'erlang-dark',
-			'hopscotch',
-			'icecoder',
-			'isotope',
-			'lesser-dark',
-			'liquibyte',
-			'material',
-			'mbo',
-			'mdn-like',
-			'midnight',
-			'monokai',
-			'neat',
-			'neo',
-			'night',
-			'panda-syntax',
-			'paraiso-dark',
-			'paraiso-light',
-			'pastel-on-dark',
-			'railscasts',
-			'rubyblue',
-			'seti',
-			'solarized dark',
-			'solarized light',
-			'the-matrix',
-			'tomorrow-night-bright',
-			'tomorrow-night-eighties',
-			'ttcn',
-			'twilight',
-			'vibrant-ink',
-			'xq-dark',
-			'xq-light',
-			'yeti',
-			'zenburn'
-		].forEach(theme => {
-			options += '<option value="' + theme + '">' + theme + '</option>';
-		});
-		document.querySelector('[data-setting="editorTheme"]').innerHTML = options;
-
-		requestAnimationFrame(compileNodes);
 
 		window.addEventListener('focusin', e => {
 			if (document.body.classList.contains('overlay-visible')) {
@@ -2693,8 +1120,6 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 		});
 	}
 
-	// Set few stuff on a 'scope' object so that they can be referenced dynamically.
-	scope.closeAllOverlays = closeAllOverlays;
 
 	init();
 })(window.alertsService, window.itemService);