misc fixes

src/auth.js

@@ -1,8 +1,6 @@
-import {
-	trackEvent
-} from './analytics';
-
-import firebase from 'firebase/app'
+import { trackEvent } from './analytics';
+import firebase from 'firebase/app';
+import { log } from './utils';
 
 export const auth = {
 	logout() {
@@ -24,15 +22,15 @@ export const auth = {
 		return firebase
 			.auth()
 			.signInWithPopup(provider)
-			.then(function () {
+			.then(function() {
 				trackEvent('fn', 'loggedIn', providerName);
 				// Save to recommend next time
 				window.db.local.set({
 					lastAuthProvider: providerName
 				});
 			})
-			.catch(function (error) {
-				utils.log(error);
+			.catch(function(error) {
+				log(error);
 				if (error.code === 'auth/account-exists-with-different-credential') {
 					alert(
 						'You have already signed up with the same email using different social login'
@@ -40,4 +38,4 @@ export const auth = {
 				}
 			});
 	}
-}
+};

src/components/AddLibrary.jsx

@@ -81,7 +81,7 @@ export default class AddLibrary extends Component {
 					<small>Powered by cdnjs</small>
 				</div>
 				<div style="margin:20px 0;">
-					Choose from popular libraries:
+					Choose from popular libraries:{' '}
 					<select
 						name=""
 						id="js-add-library-select"

src/components/MainHeader.jsx

@@ -34,7 +34,7 @@ export function MainHeader(props) {
 					class="flex-v-center hint--rounded hint--bottom-left"
 					aria-label="Add a JS/CSS library"
 				>
-					Add library
+					Add library{' '}
 					<span
 						id="js-external-lib-count"
 						style={`display:${props.externalLibCount ? 'inline' : 'none'}`}

src/components/SavedItemPane.jsx

@@ -3,6 +3,7 @@ import { log, getHumanDate } from '../utils';
 import { trackEvent } from '../analytics';
 import { itemService } from '../itemService';
 import { alertsService } from '../notifications';
+import { deferred } from '../deferred';
 
 export default class SavedItemPane extends Component {
 	constructor(props) {
@@ -23,6 +24,11 @@ export default class SavedItemPane extends Component {
 			});
 		}
 	}
+	componentDidUpdate(prevProps) {
+		if (this.props.isOpen && !prevProps.isOpen) {
+			window.searchInput.value = '';
+		}
+	}
 	onCloseIntent() {
 		this.props.closeHandler();
 	}
@@ -124,8 +130,7 @@ export default class SavedItemPane extends Component {
 		} else {
 			d.resolve();
 		}
-		// FIXME: Move from here
-		// toggleSavedItemsPane(false);
+		this.props.closeHandler();
 
 		return d.promise;
 	}
@@ -216,7 +221,6 @@ export default class SavedItemPane extends Component {
 					</div>
 				</div>
 				<input
-					type=""
 					id="searchInput"
 					class="search-input"
 					onInput={this.searchInputHandler.bind(this)}

src/components/Settings.jsx

@@ -19,7 +19,7 @@ function CheckboxSetting({
 				checked={pref}
 				onChange={onChange}
 				data-setting={name}
-			/>
+			/>{' '}
 			{label}
 		</label>
 	);

src/components/app.jsx

@@ -234,6 +234,7 @@ export default class App extends Component {
 		this.toggleLayout(
 			this.state.currentItem.layoutMode || this.state.prefs.layoutMode
 		);
+		this.updateExternalLibCount();
 		this.contentWrap.refreshEditor();
 	}
 	// Creates a new item with passed item's contents
@@ -822,7 +823,9 @@ export default class App extends Component {
 	}
 	codepenBtnClickHandler(e) {
 		if (this.state.currentItem.cssMode === CssModes.ACSS) {
-			alert("Oops! CodePen doesn't supports Atomic CSS currently.");
+			alert(
+				"Oops! CodePen doesn't supports Atomic CSS currently. \nHere is something you can still do -> https://medium.com/web-maker/sharing-your-atomic-css-work-on-codepen-a402001b26ab"
+			);
 			e.preventDefault();
 			return;
 		}
@@ -934,6 +937,9 @@ export default class App extends Component {
 	editorFocusHandler(editor) {
 		this.editorWithFocus = editor;
 	}
+	modalOverlayClickHandler() {
+		this.closeAllOverlays();
+	}
 
 	render() {
 		return (
@@ -1103,7 +1109,10 @@ export default class App extends Component {
 				/>
 
 				<Portal into="body">
-					<div class="modal-overlay" />
+					<div
+						class="modal-overlay"
+						onClick={this.modalOverlayClickHandler.bind(this)}
+					/>
 				</Portal>
 
 				<Icons />

src/db.js

@@ -1,13 +1,9 @@
 import './firebaseInit';
 import firebase from 'firebase/app';
 import 'firebase/firestore';
-import {
-	deferred
-} from './deferred';
-import {
-	trackEvent
-} from './analytics';
-
+import { deferred } from './deferred';
+import { trackEvent } from './analytics';
+import { log } from './utils';
 
 (() => {
 	const FAUX_DELAY = 1;
@@ -54,7 +50,7 @@ import {
 		if (dbPromise) {
 			return dbPromise;
 		}
-		utils.log('Initializing firestore');
+		log('Initializing firestore');
 		dbPromise = new Promise((resolve, reject) => {
 			if (db) {
 				return resolve(db);
@@ -62,17 +58,17 @@ import {
 			return firebase
 				.firestore()
 				.enablePersistence()
-				.then(function () {
+				.then(function() {
 					// Initialize Cloud Firestore through firebase
 					db = firebase.firestore();
 					// const settings = {
 					// 	timestampsInSnapshots: true
 					// };
 					// db.settings(settings);
-					utils.log('firebase db ready', db);
+					log('firebase db ready', db);
 					resolve(db);
 				})
-				.catch(function (err) {
+				.catch(function(err) {
 					reject(err.code);
 					if (err.code === 'failed-precondition') {
 						// Multiple tabs open, persistence can only be enabled
@@ -95,7 +91,8 @@ import {
 		const d = deferred();
 		// Will be chrome.storage.sync in extension environment,
 		// otherwise will fallback to localstorage
-		dbSyncAlias.get({
+		dbSyncAlias.get(
+			{
 				lastSeenVersion: ''
 			},
 			result => {
@@ -111,18 +108,17 @@ import {
 		// Setting the `lastSeenVersion` in localStorage(sync for extension) always
 		// because next time we need to fetch it irrespective of the user being
 		// logged in or out quickly from local storage.
-		dbSyncAlias.set({
+		dbSyncAlias.set(
+			{
 				lastSeenVersion: version
 			},
-			function () {}
+			function() {}
 		);
 		if (window.user) {
 			const remoteDb = await getDb();
-			remoteDb
-				.doc(`users/${window.user.uid}`)
-				.update({
-					lastSeenVersion: version
-				});
+			remoteDb.doc(`users/${window.user.uid}`).update({
+				lastSeenVersion: version
+			});
 		}
 	}
 
@@ -133,9 +129,12 @@ import {
 			.get()
 			.then(doc => {
 				if (!doc.exists)
-					return remoteDb.doc(`users/${userId}`).set({}, {
-						merge: true
-					});
+					return remoteDb.doc(`users/${userId}`).set(
+						{},
+						{
+							merge: true
+						}
+					);
 				const user = doc.data();
 				Object.assign(window.user, user);
 				return user;

src/itemService.js

@@ -1,9 +1,7 @@
-import {
-	deferred
-} from './deferred';
+import { deferred } from './deferred';
+import { log } from 'util';
 
 export const itemService = {
-
 	async getItem(id) {
 		var remoteDb = await window.db.getDb();
 		return remoteDb
@@ -32,11 +30,11 @@ export const itemService = {
 	},
 
 	async getAllItems() {
-		var t = Date.now()
+		var t = Date.now();
 		var d = deferred();
 		let itemIds = await this.getUserItemIds();
 		itemIds = Object.getOwnPropertyNames(itemIds || {});
-		utils.log('itemids', itemIds);
+		log('itemids', itemIds);
 
 		if (!itemIds.length) {
 			d.resolve([]);
@@ -46,16 +44,19 @@ export const itemService = {
 		remoteDb
 			.collection('items')
 			.where('createdBy', '==', window.user.uid)
-			.onSnapshot(function (querySnapshot) {
-				querySnapshot.forEach(function (doc) {
-					items.push(doc.data());
-				});
-				utils.log('Items fetched in ', Date.now() - t, 'ms')
+			.onSnapshot(
+				function(querySnapshot) {
+					querySnapshot.forEach(function(doc) {
+						items.push(doc.data());
+					});
+					log('Items fetched in ', Date.now() - t, 'ms');
 
-				d.resolve(items);
-			}, function () {
-				d.resolve([])
-			});
+					d.resolve(items);
+				},
+				function() {
+					d.resolve([]);
+				}
+			);
 		return d.promise;
 	},
 
@@ -91,7 +92,7 @@ export const itemService = {
 		}
 		if (window.user) {
 			var remoteDb = await window.db.getDb();
-			utils.log(`Starting to save item ${id}`);
+			log(`Starting to save item ${id}`);
 			item.createdBy = window.user.uid;
 			remotePromise = remoteDb
 				.collection('items')
@@ -100,7 +101,7 @@ export const itemService = {
 					merge: true
 				})
 				.then(arg => {
-					utils.log('Document written', arg);
+					log('Document written', arg);
 					d.resolve();
 				})
 				.catch(d.reject);
@@ -120,10 +121,11 @@ export const itemService = {
 			// save new items
 			window.db.local.set(items, d.resolve);
 			// Push in new item IDs
-			window.db.local.get({
+			window.db.local.get(
+				{
 					items: {}
 				},
-				function (result) {
+				function(result) {
 					/* eslint-disable guard-for-in */
 					for (var id in items) {
 						result.items[id] = true;
@@ -163,24 +165,25 @@ export const itemService = {
 			return d.promise;
 		}
 		const remoteDb = await window.db.getDb();
-		utils.log(`Starting to save item ${id}`);
+		log(`Starting to save item ${id}`);
 		return remoteDb
 			.collection('items')
 			.doc(id)
 			.delete()
 			.then(arg => {
-				utils.log('Document removed', arg);
+				log('Document removed', arg);
 			})
-			.catch(error => utils.log(error));
+			.catch(error => log(error));
 	},
 
 	async setItemForUser(itemId) {
 		// When not logged in
 		if (!window.user) {
-			return window.db.local.get({
+			return window.db.local.get(
+				{
 					items: {}
 				},
-				function (result) {
+				function(result) {
 					result.items[itemId] = true;
 					window.db.local.set({
 						items: result.items
@@ -196,20 +199,21 @@ export const itemService = {
 				[`items.${itemId}`]: true
 			})
 			.then(arg => {
-				utils.log(`Item ${itemId} set for user`, arg);
+				log(`Item ${itemId} set for user`, arg);
 				window.user.items = window.user.items || {};
 				window.user.items[itemId] = true;
 			})
-			.catch(error => utils.log(error));
+			.catch(error => log(error));
 	},
 
 	async unsetItemForUser(itemId) {
 		// When not logged in
 		if (!window.user) {
-			return window.db.local.get({
+			return window.db.local.get(
+				{
 					items: {}
 				},
-				function (result) {
+				function(result) {
 					delete result.items[itemId];
 					window.db.local.set({
 						items: result.items
@@ -226,8 +230,8 @@ export const itemService = {
 			})
 			.then(arg => {
 				delete window.user.items[itemId];
-				utils.log(`Item ${itemId} unset for user`, arg);
+				log(`Item ${itemId} unset for user`, arg);
 			})
-			.catch(error => utils.log(error));
+			.catch(error => log(error));
 	}
-}
+};

src/takeScreenshot.js

@@ -1,4 +1,4 @@
-import { handleDownloadsPermission } from './utils';
+import { handleDownloadsPermission, log } from './utils';
 import { trackEvent } from './analytics';
 
 function saveScreenshot(dataURI) {
@@ -59,7 +59,7 @@ function saveScreenshot(dataURI) {
 	}
 
 	function errorHandler(e) {
-		utils.log(e);
+		log(e);
 	}
 
 	// create a blob for writing to a file

src/utils.js

@@ -1,18 +1,8 @@
-import {
-	trackEvent
-} from './analytics';
+import { trackEvent } from './analytics';
 
-import {
-	computeHtml,
-	computeCss,
-	computeJs
-} from './computes';
-import {
-	JsModes
-} from './codeModes';
-import {
-	deferred
-} from './deferred';
+import { computeHtml, computeCss, computeJs } from './computes';
+import { JsModes } from './codeModes';
+import { deferred } from './deferred';
 const esprima = require('esprima');
 
 window.DEBUG = document.cookie.indexOf('wmdebug') > -1;
@@ -37,7 +27,7 @@ var alphaNum = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
  * @param  Selector that should match for next siblings
  * @return element Next element that mathes `selector`
  */
-Node.prototype.nextUntil = function (selector) {
+Node.prototype.nextUntil = function(selector) {
 	const siblings = Array.from(this.parentNode.querySelectorAll(selector));
 	const index = siblings.indexOf(this);
 	return siblings[index + 1];
@@ -47,7 +37,7 @@ Node.prototype.nextUntil = function (selector) {
  * @param  Selector that should match for next siblings
  * @return element Next element that mathes `selector`
  */
-Node.prototype.previousUntil = function (selector) {
+Node.prototype.previousUntil = function(selector) {
 	const siblings = Array.from(this.parentNode.querySelectorAll(selector));
 	const index = siblings.indexOf(this);
 	return siblings[index - 1];
@@ -56,7 +46,7 @@ Node.prototype.previousUntil = function (selector) {
 // Safari doesn't have this!
 window.requestIdleCallback =
 	window.requestIdleCallback ||
-	function (fn) {
+	function(fn) {
 		setTimeout(fn, 10);
 	};
 
@@ -86,7 +76,7 @@ export function semverCompare(a, b) {
 export function generateRandomId(len) {
 	var length = len || 10;
 	var id = '';
-	for (var i = length; i--;) {
+	for (var i = length; i--; ) {
 		id += alphaNum[~~(Math.random() * alphaNum.length)];
 	}
 	return id;
@@ -110,9 +100,7 @@ export function log() {
  * Contributed by Ariya Hidayat!
  * @param code {string}	Code to be protected from infinite loops.
  */
-export function addInfiniteLoopProtection(code, {
-	timeout
-}) {
+export function addInfiniteLoopProtection(code, { timeout }) {
 	var loopId = 1;
 	var patches = [];
 	var varPrefix = '_wmloopvar';
@@ -120,12 +108,13 @@ export function addInfiniteLoopProtection(code, {
 	var checkStr = `\nif (Date.now() - %d > ${timeout}) { window.top.previewException(new Error("Infinite loop")); break;}\n`;
 
 	esprima.parse(
-		code, {
+		code,
+		{
 			tolerant: true,
 			range: true,
 			jsx: true
 		},
-		function (node) {
+		function(node) {
 			switch (node.type) {
 				case 'DoWhileStatement':
 				case 'ForStatement':
@@ -167,10 +156,10 @@ export function addInfiniteLoopProtection(code, {
 
 	/* eslint-disable no-param-reassign */
 	patches
-		.sort(function (a, b) {
+		.sort(function(a, b) {
 			return b.pos - a.pos;
 		})
-		.forEach(function (patch) {
+		.forEach(function(patch) {
 			code = code.slice(0, patch.pos) + patch.str + code.slice(patch.pos);
 		});
 
@@ -182,7 +171,8 @@ export function getHumanDate(timestamp) {
 	var d = new Date(timestamp);
 	var retVal =
 		d.getDate() +
-		' ' + [
+		' ' +
+		[
 			'January',
 			'February',
 			'March',
@@ -204,7 +194,7 @@ export function getHumanDate(timestamp) {
 // create a one-time event
 export function once(node, type, callback) {
 	// create event
-	node.addEventListener(type, function (e) {
+	node.addEventListener(type, function(e) {
 		// remove event
 		e.target.removeEventListener(type, arguments.callee);
 		// call handler
@@ -223,7 +213,8 @@ export function downloadFile(fileName, blob) {
 		a.remove();
 	}
 	if (window.IS_EXTENSION) {
-		chrome.downloads.download({
+		chrome.downloads.download(
+			{
 				url: window.URL.createObjectURL(blob),
 				filename: fileName,
 				saveAs: true
@@ -244,13 +235,13 @@ export function writeFile(name, blob, cb) {
 	var fileWritten = false;
 
 	function getErrorHandler(type) {
-		return function () {
+		return function() {
 			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 () {
+				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."
 					);
@@ -264,12 +255,13 @@ export function writeFile(name, blob, cb) {
 	window.webkitRequestFileSystem(
 		window.TEMPORARY,
 		1024 * 1024 * 5,
-		function (fs) {
+		function(fs) {
 			fs.root.getFile(
-				name, {
+				name,
+				{
 					create: true
 				},
-				function (fileEntry) {
+				function(fileEntry) {
 					fileEntry.createWriter(fileWriter => {
 						function onWriteComplete() {
 							if (fileWritten) {
@@ -302,7 +294,7 @@ export function loadJS(src) {
 	script.src = src;
 	script.async = true;
 	ref.parentNode.insertBefore(script, ref);
-	script.onload = function () {
+	script.onload = function() {
 		d.resolve();
 	};
 	return d.promise;
@@ -314,12 +306,12 @@ export function getCompleteHtml(html, css, js, item, isForExport) {
 	}
 	var externalJs = item.externalLibs.js
 		.split('\n')
-		.reduce(function (scripts, url) {
+		.reduce(function(scripts, url) {
 			return scripts + (url ? '\n<script src="' + url + '"></script>' : '');
 		}, '');
 	var externalCss = item.externalLibs.css
 		.split('\n')
-		.reduce(function (links, url) {
+		.reduce(function(links, url) {
 			return (
 				links +
 				(url ? '\n<link rel="stylesheet" href="' + url + '"></link>' : '')
@@ -344,29 +336,29 @@ export function getCompleteHtml(html, css, js, item, isForExport) {
 	if (!isForExport) {
 		contents +=
 			'<script src="' +
-			(chrome.extension ?
-				chrome.extension.getURL('lib/screenlog.js') :
-				`${location.origin}${BASE_PATH}/lib/screenlog.js`) +
+			(chrome.extension
+				? chrome.extension.getURL('lib/screenlog.js')
+				: `${location.origin}${BASE_PATH}/lib/screenlog.js`) +
 			'"></script>';
 	}
 
 	if (item.jsMode === JsModes.ES6) {
 		contents +=
 			'<script src="' +
-			(chrome.extension ?
-				chrome.extension.getURL('lib/transpilers/babel-polyfill.min.js') :
-				`${
+			(chrome.extension
+				? chrome.extension.getURL('lib/transpilers/babel-polyfill.min.js')
+				: `${
 						location.origin
-					}${BASE_PATH}/lib/transpilers/babel-polyfill.min.js`) +
+				  }${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}`;
+		var origin = chrome.i18n.getMessage()
+			? `chrome-extension://${chrome.i18n.getMessage('@@extension_id')}`
+			: `${location.origin}`;
 		contents +=
 			'<script src="' + `filesystem:${origin}/temporary/script.js` + '">';
 	}
@@ -379,10 +371,10 @@ export function saveAsHtml(item) {
 	var htmlPromise = computeHtml(item.html, item.htmlMode);
 	var cssPromise = computeCss(item.css, item.cssMode);
 	var jsPromise = computeJs(item.js, item.jsMode, false);
-	Promise.all([htmlPromise, cssPromise, jsPromise]).then(function (result) {
-		var html = result[0],
-			css = result[1],
-			js = result[2];
+	Promise.all([htmlPromise, cssPromise, jsPromise]).then(function(result) {
+		var html = result[0].code,
+			css = result[1].code,
+			js = result[2].code;
 
 		var fileContent = getCompleteHtml(html, css, js, item, true);
 
@@ -417,17 +409,19 @@ export function handleDownloadsPermission() {
 		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();