add console exec feature

src/index.html

@@ -101,7 +101,7 @@
 				</div>
 				<div class="demo-side" id="js-demo-side">
 					<iframe src="about://blank" frameborder="0" id="demo-frame"></iframe>
-					<div id="consoleEl" class="console">
+					<div id="consoleEl" class="console is-minimize">
 						<div id="consoleLogEl" class="console__log" class="code">
 							<div class="js-console__header  code-wrap__header" title="Double click to toggle console">
 								<span class="code-wrap__header-label">Console</span>
@@ -117,7 +117,10 @@
 							</div>
 						</div>
 						<div id="consolePromptEl" class="console__prompt">
-							<input type="" name="" class="full-width" style="background: none;border:0;">
+							<svg width="18" height="18" fill="#346fd2">
+		  						<use xlink:href="#chevron-icon"></use>
+		  					</svg>
+							<input d-keypress="evalConsoleExpr" style="padding:3px;font-size:inherit;width:calc(100% - 30px); background: black; color: white; border:0;">
 						</div>
 					</div>
 				</div>
@@ -601,6 +604,11 @@
 					<path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.85 4.63,15.55 5.68,16.91L16.91,5.68C15.55,4.63 13.85,4 12,4M12,20A8,8 0 0,0 20,12C20,10.15 19.37,8.45 18.32,7.09L7.09,18.32C8.45,19.37 10.15,20 12,20Z" />
 				</svg>
 			</symbol>
+			<symbol id="chevron-icon" viewBox="0 0 24 24">
+				<svg>
+				<path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
+				</svg>
+			</symbol>
 		</svg>
 
 		<script src="lib/codemirror/lib/codemirror.js"></script>

src/screenlog.js

@@ -171,4 +171,13 @@ screenLog.init({
 	proxyCallback: function () {
 		window.parent.onMessageFromConsole.apply(null, arguments);
 	}
-});
+});
+window._wmEvaluate = function _wmEvaluate(expr) {
+	try {
+		var result = eval(expr);
+	} catch(e) {
+		window.parent.onMessageFromConsole.call(null, e);
+		return;
+	}
+	window.parent.onMessageFromConsole.call(null, result);
+}

src/script.js

@@ -92,6 +92,7 @@ runBtn, searchInput, consoleEl, consoleLogEl
 
 	scope.cm = {};
 	scope.consoleCm;
+	scope.frame = frame;
 	scope.demoFrameDocument = frame.contentDocument || frame.contentWindow.document;
 
 	// Check all the code wrap if they are minimized or not
@@ -1304,23 +1305,29 @@ runBtn, searchInput, consoleEl, consoleLogEl
 	};
 
 	scope.toggleConsole = function () {
-		consoleEl.classList.toggle('is-open');
+		consoleEl.classList.toggle('is-minimized');
 	};
 	scope.clearConsole = function () {
 		scope.consoleCm.setValue('');
 	};
-
+	scope.evalConsoleExpr = function (e) {
+		if (e.which === 13) {
+			window.onMessageFromConsole('> ' + e.target.value);
+			frame.contentWindow._wmEvaluate(e.target.value);
+			e.target.value = '';
+		}
+	};
 	window.onMessageFromConsole = function() {
 		[...arguments].forEach(function(arg) {
-			if (arg.indexOf && arg.indexOf('filesystem:chrome-extension') !== -1) {
+			if (arg && arg.indexOf && arg.indexOf('filesystem:chrome-extension') !== -1) {
 				arg = arg.replace(/filesystem:chrome-extension.*\.js:(\d+):(\d+)/g, 'script $1:$2');
 			}
 			scope.consoleCm.replaceRange('\n' + arg + ((arg + '').match(/\[object \w+\]/) ? JSON.stringify(arg) : '') + ' ', {line: Infinity});
+			scope.consoleCm.scrollTo(0, Infinity);
 		});
 	}
 
 	function compileNodes() {
-
 		function attachListenerForEvent(eventName) {
 			const nodes = $all(`[d-${eventName}]`);
 			nodes.forEach(function (el) {
@@ -1332,6 +1339,7 @@ runBtn, searchInput, consoleEl, consoleLogEl
 		attachListenerForEvent('click');
 		attachListenerForEvent('change');
 		attachListenerForEvent('input');
+		attachListenerForEvent('keypress');
 	}
 
 	function init () {

src/style.css

@@ -824,13 +824,13 @@ li.CodeMirror-hint-active {
 	height: 30vh;
 	left: 0;
 	right: 0;
-	transform: translateY(calc(100% - 30px));
-	transition: transform 0.4s cubic-bezier(0.77,-0.1,0.13,0.9);
-}
-.console.is-open {
 	transform: translateY(0);
+	transition: transform 0.4s cubic-bezier(0.76, 0.01, 0.13, 0.9);
+}
+.console.is-minimized {
+	transform: translateY(calc(100% - 30px));
 }
 .console .Codemirror {
 	height: auto;
-	max-height: calc(100% - 50px);
+	max-height: calc(100% - 70px);
 }