build

app/index.html

@@ -82,10 +82,9 @@
 					<a class="show-when-app hide-on-login flex  flex-v-center  hint--rounded  hint--bottom-left" aria-label="Login/Signup" d-open-modal="loginModal">
 						Login/Signup
 					</a>
-					<a class="hide-on-logout flex  flex-v-center  hint--rounded  hint--bottom-left" aria-label="Logout" d-click="logout">
+					<a d-open-modal="profileModal" aria-label="See profile or Logout" class="hide-on-logout">
-						Logout
+						<img id="headerAvatarImg" width="20" src="" class="main-header__avatar-img"/>
 					</a>
-					<img id="headerAvatarImg" width="20" src="" class="hide-on-logout main-header__avatar-img ml-1"/>
 				</div>
 			</div>
 			<div class="content-wrap  flex  flex-grow">
@@ -292,7 +291,7 @@
 				</div>
 
 				<h3>JavaScript</h3>
-				<p style="font-size: 0.8em;" class="opacity--70">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>
+				<p style="font-size: 0.8em;" class="show-when-extension opacity--70">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>
 				<textarea id="js-external-js" class="full-width" id="" cols="30" rows="5" placeholder="Start typing name of a library. Put each library in new line"></textarea>
 
 				<h3>CSS</h3>
@@ -332,6 +331,23 @@
 			<div class="modal__content" d-html="partials/login-modal.html"></div>
 		</div>
 
+		<div class="modal" id="profileModal">
+			<div class="modal__content">
+				<a d-click="onModalCloseBtnClick" href="" aria-label="Close logout modal" title="Close" class="js-modal__close-btn  modal__close-btn">
+					<svg>
+						<use xlink:href="#cross-icon"></use>
+					</svg>
+				</a>
+				<div class="tac">
+					<img height="80" class="profile-modal__avatar-img" src="" id="profileAvatarImg" alt="Profile image">
+					<h3 id="profileUserName" class="mb-2"></h3>
+					<p>
+						<button class="btn" aria-label="Logout from your account" d-click="logout">Logout</button>
+					</p>
+				</div>
+			</div>
+		</div>
+
 		<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">

app/lib/screenlog.js

@@ -1,206 +1 @@
-var mainWindow = window.parent.onMessageFromConsole
+var mainWindow=window.parent.onMessageFromConsole?window.parent:window.parent.opener;(function(){function a(a,b){var c=document.createElement(a);return c.style.cssText=b,c}function b(){var b=a('div','z-index:2147483647;font-family:Helvetica,Arial,sans-serif;font-size:10px;font-weight:bold;padding:5px;text-align:left;opacity:0.8;position:fixed;right:0;top:0;min-width:200px;max-height:50vh;overflow:auto;background:'+_options.bgColor+';'+_options.css);return b}function c(b){return function(){if(_options.proxyCallback&&_options.proxyCallback.apply(null,arguments),!_options.noUi){var c=a('div','line-height:18px;min-height:18px;background:'+(m.children.length%2?'rgba(255,255,255,0.1)':'')+';color:'+b),d=[].slice.call(arguments).reduce(function(a,b){return a+' '+('object'==typeof b?JSON.stringify(b):b)},'');c.textContent=d,m.appendChild(c),_options.autoScroll&&(m.scrollTop=m.scrollHeight-m.clientHeight)}}}function d(){return _options.noUi?void mainWindow.clearConsole():void(m.innerHTML='')}function e(){return c(_options.logColor).apply(null,arguments)}function f(){return c(_options.infoColor).apply(null,arguments)}function g(){return c(_options.warnColor).apply(null,arguments)}function h(){return c(_options.errorColor).apply(null,arguments)}function i(a){for(var b in a)a.hasOwnProperty(b)&&_options.hasOwnProperty(b)&&(_options[b]=a[b])}function j(){if(!n)throw'You need to call `screenLog.init()` first.'}function k(a){return function(){return j(),a.apply(this,arguments)}}function l(a,b){return function(){a.apply(this,arguments),'function'==typeof o[b]&&o[b].apply(console,arguments)}}var m,n=!1,o={};_options={bgColor:'black',logColor:'lightgreen',infoColor:'blue',warnColor:'orange',errorColor:'red',freeConsole:!1,css:'',autoScroll:!0,proxyCallback:null,noUi:!1},window.addEventListener('error',function(){c(_options.errorColor).call(null,arguments[0].error.stack)}),window.screenLog={init:function(a){n||(n=!0,a&&i(a),!_options.noUi&&(m=b(),document.body.appendChild(m)),!_options.freeConsole&&(o.log=console.log,o.clear=console.clear,o.info=console.info,o.warn=console.warn,o.error=console.error,console.log=l(e,'log'),console.clear=l(d,'clear'),console.info=l(f,'info'),console.warn=l(g,'warn'),console.error=l(h,'error')))},log:l(k(e),'log'),clear:l(k(d),'clear'),info:l(k(d),'info'),warn:l(k(g),'warn'),error:l(k(h),'error'),destroy:k(function(){n=!1,console.log=o.log,console.clear=o.clear,console.info=o.info,console.warn=o.warn,console.error=o.error,m.remove()})}})(),screenLog.init({noUi:!0,proxyCallback:function(){mainWindow.onMessageFromConsole.apply(null,arguments)}}),window._wmEvaluate=function(a){try{var b=eval(a)}catch(a){return void mainWindow.onMessageFromConsole.call(null,a)}mainWindow.onMessageFromConsole.call(null,b)};
-	? window.parent
-	: window.parent.opener;
-(function() {
-	var logEl,
-		isInitialized = false,
-		_console = {}; // backup console obj to contain references of overridden fns.
-	_options = {
-		bgColor: 'black',
-		logColor: 'lightgreen',
-		infoColor: 'blue',
-		warnColor: 'orange',
-		errorColor: 'red',
-		freeConsole: false,
-		css: '',
-		autoScroll: true,
-		proxyCallback: null,
-		noUi: false
-	};
-
-	function createElement(tag, css) {
-		var element = document.createElement(tag);
-		element.style.cssText = css;
-		return element;
-	}
-
-	function createPanel() {
-		var div = createElement(
-			'div',
-			'z-index:2147483647;font-family:Helvetica,Arial,sans-serif;font-size:10px;font-weight:bold;padding:5px;text-align:left;opacity:0.8;position:fixed;right:0;top:0;min-width:200px;max-height:50vh;overflow:auto;background:' +
-				_options.bgColor +
-				';' +
-				_options.css
-		);
-		return div;
-	}
-
-	function genericLogger(color) {
-		return function() {
-			if (_options.proxyCallback) {
-				_options.proxyCallback.apply(null, arguments);
-			}
-			if (_options.noUi) {
-				return;
-			}
-			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)
-				);
-			}, '');
-			el.textContent = val;
-
-			logEl.appendChild(el);
-
-			// Scroll to last element, if autoScroll option is set.
-			if (_options.autoScroll) {
-				logEl.scrollTop = logEl.scrollHeight - logEl.clientHeight;
-			}
-		};
-	}
-
-	function clear() {
-		if (_options.noUi) {
-			mainWindow.clearConsole();
-			return;
-		}
-		logEl.innerHTML = '';
-	}
-
-	function log() {
-		return genericLogger(_options.logColor).apply(null, arguments);
-	}
-
-	function info() {
-		return genericLogger(_options.infoColor).apply(null, arguments);
-	}
-
-	function warn() {
-		return genericLogger(_options.warnColor).apply(null, arguments);
-	}
-
-	function error() {
-		return genericLogger(_options.errorColor).apply(null, arguments);
-	}
-
-	function setOptions(options) {
-		for (var i in options)
-			if (options.hasOwnProperty(i) && _options.hasOwnProperty(i)) {
-				_options[i] = options[i];
-			}
-	}
-
-	function init(options) {
-		if (isInitialized) {
-			return;
-		}
-
-		isInitialized = true;
-
-		if (options) {
-			setOptions(options);
-		}
-
-		if (!_options.noUi) {
-			logEl = createPanel();
-			document.body.appendChild(logEl);
-		}
-
-		if (!_options.freeConsole) {
-			// Backup actual fns to keep it working together
-			_console.log = console.log;
-			_console.clear = console.clear;
-			_console.info = console.info;
-			_console.warn = console.warn;
-			_console.error = console.error;
-			console.log = originalFnCallDecorator(log, 'log');
-			console.clear = originalFnCallDecorator(clear, 'clear');
-			console.info = originalFnCallDecorator(info, 'info');
-			console.warn = originalFnCallDecorator(warn, 'warn');
-			console.error = originalFnCallDecorator(error, 'error');
-		}
-	}
-
-	function destroy() {
-		isInitialized = false;
-		console.log = _console.log;
-		console.clear = _console.clear;
-		console.info = _console.info;
-		console.warn = _console.warn;
-		console.error = _console.error;
-		logEl.remove();
-	}
-
-	/**
-	 * Checking if isInitialized is set
-	 */
-	function checkInitialized() {
-		if (!isInitialized) {
-			throw 'You need to call `screenLog.init()` first.';
-		}
-	}
-
-	/**
-	 * Decorator for checking if isInitialized is set
-	 * @param  {Function} fn Fn to decorate
-	 * @return {Function}      Decorated fn.
-	 */
-	function checkInitDecorator(fn) {
-		return function() {
-			checkInitialized();
-			return fn.apply(this, arguments);
-		};
-	}
-
-	/**
-	 * Decorator for calling the original console's fn at the end of
-	 * our overridden fn definitions.
-	 * @param  {Function} fn Fn to decorate
-	 * @param  {string} fn Name of original function
-	 * @return {Function}      Decorated fn.
-	 */
-	function originalFnCallDecorator(fn, fnName) {
-		return function() {
-			fn.apply(this, arguments);
-			if (typeof _console[fnName] === 'function') {
-				_console[fnName].apply(console, arguments);
-			}
-		};
-	}
-	window.addEventListener('error', function() {
-		genericLogger(_options.errorColor).call(null, arguments[0].error.stack);
-	});
-
-	// Public API
-	window.screenLog = {
-		init: init,
-		log: originalFnCallDecorator(checkInitDecorator(log), 'log'),
-		clear: originalFnCallDecorator(checkInitDecorator(clear), 'clear'),
-		info: originalFnCallDecorator(checkInitDecorator(clear), 'info'),
-		warn: originalFnCallDecorator(checkInitDecorator(warn), 'warn'),
-		error: originalFnCallDecorator(checkInitDecorator(error), 'error'),
-		destroy: checkInitDecorator(destroy)
-	};
-})();
-screenLog.init({
-	noUi: true,
-	proxyCallback: function() {
-		mainWindow.onMessageFromConsole.apply(null, arguments);
-	}
-});
-window._wmEvaluate = function _wmEvaluate(expr) {
-	try {
-		var result = eval(expr);
-	} catch (e) {
-		mainWindow.onMessageFromConsole.call(null, e);
-		return;
-	}
-	mainWindow.onMessageFromConsole.call(null, result);
-};