Merge pull request #225 from chinchang/2.9.3

2.9.3

.gitignore

@@ -1,3 +1,11 @@
-.sass-cache
+### OSX ###
+.DS_Store
+
+### PhPStorm / IntellJ IDEA ###
+.idea/
+*.iml
+
+### Misc ###
 node_modules/
 *.map
+.sass-cache

CONTRIBUTING.md

@@ -0,0 +1,18 @@
+## How to contribute to Web Maker
+
+Web Maker is written in vanilla JavaScript, CSS & HTML. It uses few open-source 3rd party JavaScript libraries for things like splitting panes, syntax highlighting etc. There is no build process involved in running Web Maker on your local system.
+
+### Run Web Maker locally on your machine
+
+- Clone the repo `git clone git@github.com:chinchang/web-maker.git`.
+- Go to Chrome extension settings page [chrome://extensions/](chrome://extensions/).
+- Click on **Load unpacked extension** button.
+- Select the `src` folder in the repo you just cloned.
+- Done! You'll now have a Web Maker icon added in your browser's right-top area. Click that and you'll run your local copy of Web Maker.
+
+### Code changes
+
+- Before starting any code work, run `npm install` in the repo folder. This is required to install some git hooks which do linting & formatting.
+- Also, create a new branch out of master branch with the name as `fix-{ISSUE_ID}-anything-more-here`. For example, if you are working on issue #23 regarding implementing a mobile mode, your branch could be called `fix-23-mobile-mode`.
+- Now you can simply make code changes inside `src/` folder and refresh in browser to see them.
+- Once you are done, open a pull request here by selecting right branch: [https://github.com/chinchang/web-maker/compare](https://github.com/chinchang/web-maker/compare).

README.md

@@ -13,7 +13,7 @@ Web-Maker ![Build](https://travis-ci.org/chinchang/web-maker.svg?branch=master)
 * Works offline
 * Inbuilt Console
 * Save and load your creations
-* Auto-save feture
+* Auto-save feature
 * Code auto-completion
 * Easy addition of popular JS & CSS libraries
 * Import & Export all creations anytime, anywhere

git-hooks/pre-commit

@@ -11,7 +11,7 @@ jsfiles=$(git diff --staged --name-only --diff-filter=ACM | grep '\.js$')
 [ -z "$jsfiles" ] && exit 0
 
 # ESLINT CHECK
-eslintresult=$(./node_modules/.bin/eslint --color $jsfiles)
+eslintresult=$(./node_modules/.bin/eslint --ignore-pattern '/src/lib/*' --color $jsfiles --quiet)
 
 if [[ $eslintresult != "" ]]; then
 	echo "$eslintresult"

package.json

@@ -10,7 +10,7 @@
 		"prettier": "^1.5.2"
 	},
 	"scripts": {
-		"install": "ln -s ../../git-hooks/pre-commit .git/hooks/pre-commit"
+		"install": "ln -sf ../../git-hooks/pre-commit .git/hooks/pre-commit"
 	},
 	"repository": {
 		"type": "git",

src/changelog.html

@@ -1,17 +1,47 @@
+<a d-click="onModalCloseBtnClick" href="" aria-label="Close notifications" title="Close" class="js-modal__close-btn  modal__close-btn">
+	<svg>
+		<use xlink:href="#cross-icon"></use>							
+	</svg>
+</a>
+
 <h1>Whats new?</h1>
 
+<div class="notification">
+	<span class="notification__version">2.9.3</span>
+	<ul>
+		<li>Choose the save location while exporting your saved creations. Now easily sync them to your Dropbox or any cloud storage.</li>
+		<li>All modals inside the app now have a close button.</li>
+		<li>Checkbox that showed on clicking a boolean value is now removed. Thanks <a href="https://github.com/gauravmuk" target="_blank">Gaurav Nanda</a>.</li>
+		<li><strong>Bugfix</strong> - Screenshots on retina device are now correct. Thanks <a href="https://github.com/AshBardhan" target="_blank">Ashish Bardhan</a>.</li>
+		<li><strong>Bugfix</strong> - Double console log in detached mode fixed.</li>
+		<li><strong>Bugfix</strong> - Console.clear now works in detached mode too.</li>
+		<li><strong>Bugfix</strong> - DOCTYPE added in preview.</li>
+		<li><strong>Bugfix</strong> - Typo correction in README. Thanks <a href="https://github.com/AdilMah" target="_blank">Adil Mahmood</a>.</li>
+		<li>gstatic.com is available to load external JavaScripts from.</li>
+		<li>Popular libraries list updated. Thanks <a href="https://github.com/diomed" target="_blank">diomed</a>.</li>
+		<li>Added <a href="https://github.com/chinchang/web-maker/blob/master/CONTRIBUTING.md" target="_blank">contribution guidelines</a> in the Github repository.</li>
+		
+		<br>
+		<li><strong>🚀 Announcement</strong>: Web Maker has a <a href="https://gitter.im/web-maker-app/Lobby" target="_blank">chat lobby on Gitter</a> now - incase you need any help or just want to say Hi!</li>
+		<li><a href="https://github.com/chinchang/web-maker/issues" target="_blank">Suggest features or report bugs.</a></li>
+		<li>Thank you for being a part of this community of thousands of awesome developers. If you find Web Maker helpful, <a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank" class="btn">Please rate Web Maker <span class="star"></span></a>			&nbsp; <a href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,editor,chrome,extension" target="_blank" target="_blank" class="btn">Share it</a>&nbsp; <a aria-label="Support the developer" href="https://www.paypal.me/kushagragour" target="_blank" class="btn btn-icon">Support the developer</a></li>
+	</ul>
+</div>
+
+<div class="notification">
+	<span class="notification__version">2.9.2</span>
+	<ul>
+		<li>Minor bug fixes.</li>
+	</ul>
+</div>
+
+
 <div class="notification">
 	<span class="notification__version">2.9.1</span>
 	<ul>
 		<li><a href="https://medium.com/web-maker/v2-9-lots-of-goodies-bd1e939571f6" target="_blank">Read blog post about last release.</a></li>
 		<li>Use Ctrl/Cmd+D to select next occurence of matching selection.</li>
 		<li>Improve onboard experience.</li>
-		
-		<br>
-		<li><strong>Good News</strong>: Web Maker is featured again on the homepage of Chrome Web Store!</li>
-		<li><strong>🚀 Announcement</strong>: Web Maker has a <a href="https://gitter.im/web-maker-app/Lobby" target="_blank">chat lobby on Gitter</a> now - incase you need any help or just want to say Hi!</li>
-		<li><a href="https://github.com/chinchang/web-maker/issues" target="_blank">Suggest features or report bugs.</a></li>
-		<li>Thank you for being a part of this community of thousands of awesome developers. If you find Web Maker helpful, <a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank" class="btn">Please rate Web Maker <span class="star"></span></a>			&nbsp; <a href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,editor,chrome,extension" target="_blank" target="_blank" class="btn">Share it</a>&nbsp; <a aria-label="Support the developer" href="https://www.paypal.me/kushagragour" target="_blank" class="btn btn-icon">Support the developer</a></li>
 	</ul>
 </div>
 

src/index.html

@@ -49,7 +49,7 @@
 						</svg>Run
 					</a>
 
-					<a id="js-add-library-btn" class="flex-v-center hint--rounded hint--bottom-left" aria-label="Add a JS/CSS library">
+					<a d-open-modal="addLibraryModal" data-event-category="ui" data-event-action="addLibraryButtonClick" class="flex-v-center hint--rounded hint--bottom-left" aria-label="Add a JS/CSS library">
 						Add library <span id="js-external-lib-count" style="display:none;" class="count-label"></span>
 					</a>
 
@@ -216,7 +216,7 @@
 						</svg>
 						<span class="notifications-btn__dot"></span>
 					</a>
-					<a id="settingsBtn" class="mode-btn  hint--top-left  hint--rounded" aria-label="Settings">
+					<a d-open-modal="settingsModal" data-event-category="ui" data-event-action="settingsBtnClick" class="mode-btn  hint--top-left  hint--rounded" aria-label="Settings">
 						<svg>
 							<use xlink:href="#settings-icon"></use>
 						</svg>
@@ -226,7 +226,7 @@
 
 				<a href="https://webmakerapp.com/" target="_blank"><div class="logo"></div></a>
 				&copy; Web Maker &nbsp;&nbsp;
-				<a id="helpBtn" class="footer__link  hint--rounded  hint--top-right" data-hint="Help">
+				<a d-open-modal="helpModal" data-event-category="ui" data-event-action="helpButtonClick" class="footer__link  hint--rounded  hint--top-right" data-hint="Help">
 					<svg style="width:20px; height:20px; vertical-align:text-bottom" viewBox="0 0 24 24">
 						<path d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,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" />
 					</svg>
@@ -243,6 +243,11 @@
 
 		<div class="modal" id="addLibraryModal">
 			<div class="modal__content">
+				<a d-click="onModalCloseBtnClick" href="" aria-label="Close add library modal" title="Close" class="js-modal__close-btn  modal__close-btn">
+					<svg>
+						<use xlink:href="#cross-icon"></use>							
+					</svg>
+				</a>
 				<h1>Add Library</h1>
 				<h3>JavaScript</h3>
 				<p style="font-size: 0.8em;opacity: 0.7;">Note: You can load external scripts from following domains: localhost, https://ajax.googleapis.com, https://code.jquery.com, https://cdnjs.cloudflare.com, https://unpkg.com, https://maxcdn.com, https://cdn77.com, https://maxcdn.bootstrapcdn.com, https://cdn.jsdelivr.net/, https://rawgit.com, https://wzrd.in</p>
@@ -268,6 +273,11 @@
 
 		<div class="modal" id="cssSettingsModal">
 			<div class="modal__content">
+				<a d-click="onModalCloseBtnClick" href="" aria-label="Close CSS settings modal" title="Close" class="js-modal__close-btn  modal__close-btn">
+					<svg>
+						<use xlink:href="#cross-icon"></use>							
+					</svg>
+				</a>
 				<h1>Atomic CSS Settings</h1>
 				<h3>Configure Atomizer settings. <a href="https://github.com/acss-io/atomizer#api" target="_blank">Read more</a> about available settings.</h3>
 				<div style="height: calc(100vh - 350px);">
@@ -278,6 +288,11 @@
 
 		<div class="modal" id="helpModal">
 			<div class="modal__content">
+				<a d-click="onModalCloseBtnClick" href="" aria-label="Close help modal" title="Close" class="js-modal__close-btn  modal__close-btn">
+					<svg>
+						<use xlink:href="#cross-icon"></use>
+					</svg>
+				</a>
 				<h1>Web Maker<small style="font-size:14px;"> v2.9.1</small></h1>
 				<div>
 					<p>Made with <span style="margin-right: 8px;">💖</span> & <span style="margin-right: 8px;">🙌</span> by <a href="https://twitter.com/chinchang457" target="_blank">Kushagra Gour</a></p>
@@ -371,6 +386,11 @@
 
 		<div class="modal modal--settings" id="settingsModal">
 			<div class="modal__content">
+				<a d-click="onModalCloseBtnClick" href="" aria-label="Close Settings" title="Close" class="js-modal__close-btn  modal__close-btn">
+					<svg>
+						<use xlink:href="#cross-icon"></use>							
+					</svg>
+				</a>
 				<h1>Settings</h1>
 
 				<h3>Indentation</h3>
@@ -583,6 +603,10 @@
 			</symbol>
 			<symbol id="gift-icon" viewBox="0 0 24 24">
 				<path d="M22,12V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V12A1,1 0 0,1 1,11V8A2,2 0 0,1 3,6H6.17C6.06,5.69 6,5.35 6,5A3,3 0 0,1 9,2C10,2 10.88,2.5 11.43,3.24V3.23L12,4L12.57,3.23V3.24C13.12,2.5 14,2 15,2A3,3 0 0,1 18,5C18,5.35 17.94,5.69 17.83,6H21A2,2 0 0,1 23,8V11A1,1 0 0,1 22,12M4,20H11V12H4V20M20,20V12H13V20H20M9,4A1,1 0 0,0 8,5A1,1 0 0,0 9,6A1,1 0 0,0 10,5A1,1 0 0,0 9,4M15,4A1,1 0 0,0 14,5A1,1 0 0,0 15,6A1,1 0 0,0 16,5A1,1 0 0,0 15,4M3,8V10H11V8H3M13,8V10H21V8H13Z" />
+			<symbol id="gift-icon" viewBox="0 0 24 24">
+			</symbol>
+			<symbol id="cross-icon" viewBox="0 0 24 24">
+				<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
 			</symbol>
 		</svg>
 

src/lib/screenlog.js

@@ -1,3 +1,6 @@
+var mainWindow = window.parent.onMessageFromConsole
+	? window.parent
+	: window.parent.opener;
 (function() {
 	var logEl,
 		isInitialized = false,
@@ -37,18 +40,27 @@
 			if (_options.proxyCallback) {
 				_options.proxyCallback.apply(null, arguments);
 			}
-			if (_options.noUi) { return; }
+			if (_options.noUi) {
-			var el = createElement('div', 'line-height:18px;min-height:18px;background:' +
+				return;
-				(logEl.children.length % 2 ? 'rgba(255,255,255,0.1)' : '') + ';color:' + color); // zebra lines
+			}
+			var el = createElement(
+				'div',
+				'line-height:18px;min-height:18px;background:' +
+					(logEl.children.length % 2 ? 'rgba(255,255,255,0.1)' : '') +
+					';color:' +
+					color
+			); // zebra lines
 			var val = [].slice.call(arguments).reduce(function(prev, arg) {
-				return prev + ' ' + (typeof arg === "object" ? JSON.stringify(arg) : arg);
+				return (
+					prev + ' ' + (typeof arg === 'object' ? JSON.stringify(arg) : arg)
+				);
 			}, '');
 			el.textContent = val;
 
 			logEl.appendChild(el);
 
 			// Scroll to last element, if autoScroll option is set.
-			if(_options.autoScroll) {
+			if (_options.autoScroll) {
 				logEl.scrollTop = logEl.scrollHeight - logEl.clientHeight;
 			}
 		};
@@ -56,7 +68,7 @@
 
 	function clear() {
 		if (_options.noUi) {
-			window.parent.clearConsole();
+			mainWindow.clearConsole();
 			return;
 		}
 		logEl.innerHTML = '';
@@ -79,18 +91,20 @@
 	}
 
 	function setOptions(options) {
-		for(var i in options)
+		for (var i in options)
-			if(options.hasOwnProperty(i) && _options.hasOwnProperty(i)) {
+			if (options.hasOwnProperty(i) && _options.hasOwnProperty(i)) {
 				_options[i] = options[i];
 			}
 	}
 
 	function init(options) {
-		if (isInitialized) { return; }
+		if (isInitialized) {
+			return;
+		}
 
 		isInitialized = true;
 
-		if(options) {
+		if (options) {
 			setOptions(options);
 		}
 
@@ -175,19 +189,18 @@
 		destroy: checkInitDecorator(destroy)
 	};
 })();
-var mainWindow = window.parent.onMessageFromConsole ? window.parent : window.parent.opener;
 screenLog.init({
 	noUi: true,
-	proxyCallback: function () {
+	proxyCallback: function() {
 		mainWindow.onMessageFromConsole.apply(null, arguments);
 	}
 });
 window._wmEvaluate = function _wmEvaluate(expr) {
 	try {
 		var result = eval(expr);
-	} catch(e) {
+	} catch (e) {
 		mainWindow.onMessageFromConsole.call(null, e);
 		return;
 	}
 	mainWindow.onMessageFromConsole.call(null, result);
-}
+};

src/library-list.js

@@ -42,7 +42,7 @@ window.jsLibs = [
 		type: 'js'
 	},
 	{
-		url: 'https://unpkg.com/vue@2.4.4/dist/vue.min.js',
+		url: 'https://unpkg.com/vue@2.5.0/dist/vue.min.js',
 		label: 'Vue.js',
 		type: 'js'
 	},
@@ -74,7 +74,7 @@ window.jsLibs = [
 	},
 	{
 		url:
-			'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/js/uikit.min.js',
+			'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.31/js/uikit.min.js',
 		label: 'UIkit 3',
 		type: 'js'
 	}
@@ -104,7 +104,7 @@ window.cssLibs = [
 		type: 'css'
 	},
 	{
-		url: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.2/css/bulma.min.css',
+		url: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css',
 		label: 'Bulma',
 		type: 'css'
 	},
@@ -122,7 +122,7 @@ window.cssLibs = [
 	},
 	{
 		url:
-			'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/css/uikit.min.css',
+			'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.31/css/uikit.min.css',
 		label: 'UIkit 3',
 		type: 'css'
 	},

src/manifest.json

@@ -6,7 +6,7 @@
 	"homepage_url": "https://webmakerapp.com",
 	"permissions": ["storage", "tabs", "<all_urls>"],
 	"optional_permissions": ["downloads"],
-	"content_security_policy": "script-src 'self' filesystem: http://localhost:* https://localhost:* https://ajax.googleapis.com https://code.jquery.com https://cdnjs.cloudflare.com https://unpkg.com https://maxcdn.com https://cdn77.com https://maxcdn.bootstrapcdn.com https://cdn.jsdelivr.net/ https://*.stripe.com/ https://builds.framerjs.com/ https://rawgit.com https://wzrd.in https://semantic-ui.com https://www.google-analytics.com 'unsafe-eval'; object-src 'self'",
+	"content_security_policy": "script-src 'self' filesystem: http://localhost:* https://localhost:* https://ajax.googleapis.com https://code.jquery.com https://cdnjs.cloudflare.com https://unpkg.com https://maxcdn.com https://cdn77.com https://maxcdn.bootstrapcdn.com https://cdn.jsdelivr.net/ https://*.stripe.com/ https://builds.framerjs.com/ https://rawgit.com https://wzrd.in https://www.gstatic.com https://semantic-ui.com https://www.google-analytics.com 'unsafe-eval'; object-src 'self'",
 	"options_ui": {
 		"page": "options.html",
 		"chrome_style": true

src/script.js

@@ -1,8 +1,8 @@
 /* global trackEvent */
 /* global layoutBtn1, layoutBtn2, layoutBtn3, helpModal, notificationsModal, addLibraryModal,
-onboardModal, layoutBtn1, layoutBtn2, layoutBtn3, layoutBtn4, helpBtn, onboardModal, onboardModal,
+onboardModal, layoutBtn1, layoutBtn2, layoutBtn3, layoutBtn4, onboardModal, onboardModal,
 addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal, notificationsModal,
-notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn, settingsBtn,
+notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn,
 onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
 onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
 runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate,
@@ -137,7 +137,6 @@ globalConsoleContainerEl
 		jsModelLabel = $('#js-js-mode-label'),
 		titleInput = $('#js-title-input'),
 		addLibrarySelect = $('#js-add-library-select'),
-		addLibraryBtn = $('#js-add-library-btn'),
 		externalJsTextarea = $('#js-external-js'),
 		externalCssTextarea = $('#js-external-css');
 
@@ -259,6 +258,7 @@ globalConsoleContainerEl
 		utils.log('onExternalLibChange');
 		updateExternalLibUi();
 		scope.setPreviewContent(true);
+		alertsService.add('Libraries updated.');
 	}
 
 	function updateExternalLibUi() {
@@ -954,6 +954,7 @@ globalConsoleContainerEl
 				);
 			}, '');
 		var contents =
+			'<!DOCTYPE html>\n' +
 			'<html>\n<head>\n' +
 			'<meta charset="UTF-8" />\n' +
 			externalCss +
@@ -1064,13 +1065,15 @@ globalConsoleContainerEl
 		// CSP from affecting it.
 		writeFile('script.js', blobjs, function() {
 			writeFile('preview.html', blob, function() {
-				frame.src =
+				const frameSrc =
 					'filesystem:chrome-extension://' +
 					chrome.i18n.getMessage('@@extension_id') +
 					'/temporary/' +
 					'preview.html';
 				if (scope.detachedWindow) {
 					scope.detachedWindow.postMessage(frame.src, '*');
+				} else {
+					frame.src = frameSrc;
 				}
 			});
 		});
@@ -1087,6 +1090,10 @@ globalConsoleContainerEl
 			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 (
@@ -1095,8 +1102,8 @@ globalConsoleContainerEl
 			currentCode.js === codeInPreview.js
 		) {
 			computeCss().then(function(css) {
-				if (frame.contentDocument.querySelector('#webmakerstyle')) {
+				if (targetFrame.contentDocument.querySelector('#webmakerstyle')) {
-					frame.contentDocument.querySelector(
+					targetFrame.contentDocument.querySelector(
 						'#webmakerstyle'
 					).textContent = css;
 				}
@@ -1294,6 +1301,7 @@ globalConsoleContainerEl
 		gutters: ['CodeMirror-foldgutter']
 	});
 
+	// DEPRECATED
 	function openSettings() {
 		scope.toggleModal(settingsModal);
 
@@ -1328,29 +1336,45 @@ globalConsoleContainerEl
 	};
 
 	scope.exportItems = function exportItems(e) {
-		fetchItems().then(function(items) {
+		handleDownloadsPermission().then(() => {
-			var d = new Date();
+			fetchItems().then(function(items) {
-			var fileName = [
+				var d = new Date();
-				'web-maker-export',
+				var fileName = [
-				d.getFullYear(),
+					'web-maker-export',
-				d.getMonth() + 1,
+					d.getFullYear(),
-				d.getDate(),
+					d.getMonth() + 1,
-				d.getHours(),
+					d.getDate(),
-				d.getMinutes(),
+					d.getHours(),
-				d.getSeconds()
+					d.getMinutes(),
-			].join('-');
+					d.getSeconds()
-			fileName += '.json';
+				].join('-');
-			var blob = new Blob([JSON.stringify(items, false, 2)], {
+				fileName += '.json';
-				type: 'application/json;charset=UTF-8'
+				var blob = new Blob([JSON.stringify(items, false, 2)], {
+					type: 'application/json;charset=UTF-8'
+				});
+
+				chrome.downloads.download(
+					{
+						url: window.URL.createObjectURL(blob),
+						filename: fileName,
+						saveAs: true
+					},
+					function() {
+						// If there was an error, just download the file using ANCHOR method.
+						if (chrome.runtime.lastError) {
+							var a = document.createElement('a');
+							a.href = window.URL.createObjectURL(blob);
+							a.download = fileName;
+							a.style.display = 'none';
+							document.body.appendChild(a);
+							a.click();
+							a.remove();
+						}
+					}
+				);
+
+				trackEvent('ui', 'exportBtnClicked');
 			});
-			var a = document.createElement('a');
-			a.href = window.URL.createObjectURL(blob);
-			a.download = fileName;
-			a.style.display = 'none';
-			document.body.appendChild(a);
-			a.click();
-			a.remove();
-			trackEvent('ui', 'exportBtnClicked');
 		});
 		e.preventDefault();
 	};
@@ -1567,12 +1591,14 @@ globalConsoleContainerEl
 				c.width = iframeBounds.width;
 				c.height = iframeBounds.height;
 				var ctx = c.getContext('2d');
+				var devicePixelRatio = window.devicePixelRatio || 1;
+
 				ctx.drawImage(
 					image,
-					iframeBounds.left,
+					iframeBounds.left * devicePixelRatio,
-					iframeBounds.top,
+					iframeBounds.top * devicePixelRatio,
-					iframeBounds.width,
+					iframeBounds.width * devicePixelRatio,
-					iframeBounds.height,
+					iframeBounds.height * devicePixelRatio,
 					0,
 					0,
 					iframeBounds.width,
@@ -1843,6 +1869,18 @@ globalConsoleContainerEl
 		attachListenerForEvent('input');
 		attachListenerForEvent('keyup');
 
+		// Compile d-open-modal directive
+		const modalTriggers = $all(`[d-open-modal]`);
+		modalTriggers.forEach(function(el) {
+			utils.onButtonClick(el, function() {
+				scope.toggleModal(window[el.getAttribute('d-open-modal')]);
+				trackEvent(
+					el.getAttribute('data-event-category'),
+					el.getAttribute('data-event-action')
+				);
+			});
+		});
+
 		// Compile d-html directive
 		const dHtmlNodes = $all(`[d-html]`);
 		dHtmlNodes.forEach(function(el) {
@@ -1885,6 +1923,8 @@ globalConsoleContainerEl
 				document.body.classList.remove('is-detached-mode');
 				$('#js-demo-side').insertBefore(consoleEl, null);
 				scope.detachedWindow = null;
+				// Update main frame preview
+				scope.setPreviewContent(true);
 			}
 		}
 		var intervalID = window.setInterval(checkWindow, 500);
@@ -1900,6 +1940,11 @@ globalConsoleContainerEl
 		trackEvent('ui', 'cssSettingsBtnClick');
 	};
 
+	scope.onModalCloseBtnClick = function(e) {
+		closeAllOverlays();
+		e.preventDefault();
+	};
+
 	function init() {
 		var lastCode;
 
@@ -1918,15 +1963,6 @@ globalConsoleContainerEl
 		layoutBtn3.addEventListener('click', getToggleLayoutButtonListener(3));
 		layoutBtn4.addEventListener('click', getToggleLayoutButtonListener(4));
 
-		utils.onButtonClick(helpBtn, function() {
-			scope.toggleModal(helpModal);
-			trackEvent('ui', 'helpButtonClick');
-		});
-		utils.onButtonClick(addLibraryBtn, function() {
-			scope.toggleModal(addLibraryModal);
-			trackEvent('ui', 'addLibraryButtonClick');
-		});
-
 		notificationsBtn.addEventListener('click', function() {
 			scope.toggleModal(notificationsModal);
 
@@ -2136,10 +2172,10 @@ globalConsoleContainerEl
 		});
 
 		window.addEventListener('click', function(e) {
-			if (
+			if (typeof e.target.className !== 'string') {
-				typeof e.target.className === 'string' &&
+				return;
-				e.target.className.indexOf('modal-overlay') !== -1
+			}
-			) {
+			if (e.target.className.indexOf('modal-overlay') !== -1) {
 				closeAllOverlays();
 			}
 		});
@@ -2156,11 +2192,6 @@ globalConsoleContainerEl
 			}
 		});
 
-		utils.onButtonClick(settingsBtn, function() {
-			openSettings();
-			trackEvent('ui', 'settingsBtnClick');
-		});
-
 		// Initialize add library select box
 		var libOptions = window.jsLibs.reduce(
 			(html, lib) =>

src/style.css

@@ -438,6 +438,20 @@ body > #demo-frame {
 		margin-left: -45vw;
 	}
 }
+.modal__close-btn {
+	position: absolute;
+	right: 10px;
+	top: 10px;
+	opacity: 0.3;
+transition: 0.25s ease;
+}
+.modal__close-btn > svg {
+	fill: black;
+	width:30px; height:30px;
+}
+.modal__close-btn:hover {
+	opacity: 0.7;
+}
 .modal__content {
 	background: #fdfdfd;
 	color: #444;