add console resizing, count and bugfixes

src/index.html

@@ -104,7 +104,7 @@
 					<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>
+								<span class="code-wrap__header-label">Console (<span id="logCountEl">0</span>)</span>
 								<div class="code-wrap__header-right-options">
 									<a class="code-wrap__header-btn" title="Clear console (CTRL + L)" d-click="clearConsole">
 										<svg>
@@ -120,7 +120,7 @@
 							<svg width="18" height="18" fill="#346fd2">
 		  						<use xlink:href="#chevron-icon"></use>
 		  					</svg>
-							<input d-keyup="evalConsoleExpr" style="padding:5px;font-size:1.3em;flex:1;background: black; color: white; border:0;outline:0;">
+							<input d-keyup="evalConsoleExpr" class="console-exec-input">
 						</div>
 					</div>
 				</div>

src/script.js

@@ -5,7 +5,7 @@ addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal, notifica
 notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn, settingsBtn,
 onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
 onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
-runBtn, searchInput, consoleEl, consoleLogEl
+runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
 */
 /* eslint-disable no-extra-semi */
 ;(function (alertsService) {
@@ -71,6 +71,7 @@ runBtn, searchInput, consoleEl, consoleLogEl
 		, codeInPreview = { html: null, css: null, js: null }
 		, isSavedItemsPaneOpen = false
 		, editorWithFocus
+		, logCount = 0
 
 		// DOM nodes
 		, frame = $('#demo-frame')
@@ -460,11 +461,12 @@ runBtn, searchInput, consoleEl, consoleLogEl
 		scope.cm.html.setValue(currentItem.html);
 		scope.cm.css.setValue(currentItem.css);
 		scope.cm.js.setValue(currentItem.js);
-		scope.consoleCm.setValue('');
 		scope.cm.html.refresh();
 		scope.cm.css.refresh();
 		scope.cm.js.refresh();
 
+		scope.clearConsole();
+
 		// To have the library count updated
 		updateExternalLibUi();
 
@@ -1318,6 +1320,8 @@ runBtn, searchInput, consoleEl, consoleLogEl
 	};
 	scope.clearConsole = function () {
 		scope.consoleCm.setValue('');
+		logCount = 0;
+		logCountEl.textContent = logCount;
 	};
 	scope.evalConsoleExpr = function (e) {
 		// Clear console on CTRL + L
@@ -1334,9 +1338,11 @@ runBtn, searchInput, consoleEl, consoleLogEl
 			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.replaceRange(arg + ' ' + ((arg + '').match(/\[object \w+]/) ? JSON.stringify(arg) : '') + '\n', { line: Infinity });
 			scope.consoleCm.scrollTo(0, Infinity);
+			logCount++;
 		});
+		logCountEl.textContent = logCount;
 	};
 
 	function compileNodes() {
@@ -1490,6 +1496,7 @@ runBtn, searchInput, consoleEl, consoleLogEl
 			});
 		});
 
+		// Editor keyboard shortucuts
 		window.addEventListener('keydown', function (event) {
 			var selectedItemElement;
 			// Ctrl/⌘ + S
@@ -1591,6 +1598,25 @@ runBtn, searchInput, consoleEl, consoleLogEl
 		new TextareaAutoComplete(externalJsTextarea, (obj) => obj.latest.match(/\.js$/));
 		new TextareaAutoComplete(externalCssTextarea, (obj) => obj.latest.match(/\.css$/));
 
+		var consoleHeaderDragStartY;
+		var consoleInitialHeight;
+		function onConsoleHeaderDrag(e) {
+			consoleEl.style.height = (consoleInitialHeight + consoleHeaderDragStartY - e.pageY) + 'px';
+			utils.log(e.pageY, consoleHeaderDragStartY)
+		}
+		$('.js-console__header').addEventListener('mousedown', (e) => {
+			consoleHeaderDragStartY = e.pageY;
+			consoleInitialHeight = consoleEl.getBoundingClientRect().height;
+			$('#demo-frame').style.pointerEvents = 'none';
+			window.addEventListener('mousemove', onConsoleHeaderDrag);
+			utils.log('added')
+		});
+		$('.js-console__header').addEventListener('mouseup', () => {
+			window.removeEventListener('mousemove', onConsoleHeaderDrag);
+			$('#demo-frame').style.pointerEvents = 'auto';
+			utils.log('removed')
+		});
+
 		chrome.storage.local.get({
 			layoutMode: 1,
 			code: ''

src/style.css

@@ -120,6 +120,7 @@ select, input[type="text"], input[type="number"],  textarea {
 .demo-side {
 	flex-basis: inherit;
 	position: relative;
+	width: 50%;
 }
 .layout-3 .content-wrap {
 	flex-direction: row-reverse;
@@ -127,7 +128,6 @@ select, input[type="text"], input[type="number"],  textarea {
 .code-side {
 	display: flex;
 	flex-direction: column;
-	width: 50%;
 }
 .layout-2 .content-wrap {
 	flex-direction: column;
@@ -136,6 +136,9 @@ select, input[type="text"], input[type="number"],  textarea {
 	flex-direction: row;
 	width: auto;
 }
+.layout-2 .demo-side {
+	width: auto;
+}
 .layout-4 .code-side {
 	display: none;
 }
@@ -183,6 +186,7 @@ select, input[type="text"], input[type="number"],  textarea {
 	color: #888;
 	border-bottom: 1px solid rgba(0,0,0,0.3);
 	font-weight: bold;
+	user-select: none;
 }
 .code-wrap__header-label {
 	/*transform: translate(0px) scale(1.2);*/
@@ -191,7 +195,7 @@ select, input[type="text"], input[type="number"],  textarea {
 	opacity: 0.5;
 	/*transform-origin: left center;*/
 }
-.layout-2 .is-minimized .code-wrap__header {
+.layout-2 .code-side .is-minimized .code-wrap__header {
 	writing-mode: vertical-lr;
 	padding: 10px 5px;
 }
@@ -836,3 +840,15 @@ li.CodeMirror-hint-active {
 .console .Codemirror {
 	height: calc(100% - 55px);
 }
+.console-exec-input {
+	padding: 5px;
+	font-size: 1.3em;
+	flex: 1;
+	background: rgba(0,0,0,0.3);
+	color: white;
+	border: 0;
+	outline: 0;
+}
+.console .code-wrap__header {
+	cursor: ns-resize;
+}