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() {
@@ -32,7 +30,7 @@ export const auth = {
 				});
 			})
 			.catch(function(error) {
-				utils.log(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);
@@ -69,7 +65,7 @@ import {
 					// 	timestampsInSnapshots: true
 					// };
 					// db.settings(settings);
-					utils.log('firebase db ready', db);
+					log('firebase db ready', db);
 					resolve(db);
 				})
 				.catch(function(err) {
@@ -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,16 +108,15 @@ 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() {}
 		);
 		if (window.user) {
 			const remoteDb = await getDb();
-			remoteDb
-				.doc(`users/${window.user.uid}`)
-				.update({
+			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({}, {
+					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) {
+			.onSnapshot(
+				function(querySnapshot) {
 					querySnapshot.forEach(function(doc) {
 						items.push(doc.data());
 					});
-				utils.log('Items fetched in ', Date.now() - t, 'ms')
+					log('Items fetched in ', Date.now() - t, 'ms');
 
 					d.resolve(items);
-			}, function () {
-				d.resolve([])
-			});
+				},
+				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,7 +121,8 @@ 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) {
@@ -163,21 +165,22 @@ 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) {
@@ -196,17 +199,18 @@ 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) {
@@ -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;
@@ -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,7 +108,8 @@ 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
@@ -182,7 +171,8 @@ export function getHumanDate(timestamp) {
 	var d = new Date(timestamp);
 	var retVal =
 		d.getDate() +
-		' ' + [
+		' ' +
+		[
 			'January',
 			'February',
 			'March',
@@ -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
@@ -266,7 +257,8 @@ export function writeFile(name, blob, cb) {
 		1024 * 1024 * 5,
 		function(fs) {
 			fs.root.getFile(
-				name, {
+				name,
+				{
 					create: true
 				},
 				function(fileEntry) {
@@ -344,18 +336,18 @@ 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`) +
 			'"></script>';
@@ -364,9 +356,9 @@ export function getCompleteHtml(html, css, js, item, isForExport) {
 	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` + '">';
 	}
@@ -380,9 +372,9 @@ export function saveAsHtml(item) {
 	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];
+		var html = result[0].code,
+			css = result[1].code,
+			js = result[2].code;
 
 		var fileContent = getCompleteHtml(html, css, js, item, true);
 
@@ -417,14 +409,16 @@ export function handleDownloadsPermission() {
 		d.resolve();
 		return d.promise;
 	}
-	chrome.permissions.contains({
+	chrome.permissions.contains(
+		{
 			permissions: ['downloads']
 		},
 		function(result) {
 			if (result) {
 				d.resolve();
 			} else {
-				chrome.permissions.request({
+				chrome.permissions.request(
+					{
 						permissions: ['downloads']
 					},
 					function(granted) {