From 88a49cd4c5d3377951dc3b0def6cc145fbb6cc66 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Sun, 7 May 2017 16:59:47 +0530 Subject: [PATCH 01/13] add chrome like dev console! fixes #56 --- src/index.html | 24 +++++++ src/screenlog.js | 174 +++++++++++++++++++++++++++++++++++++++++++++++ src/script.js | 39 ++++++++++- src/style.css | 28 +++++++- 4 files changed, 261 insertions(+), 4 deletions(-) create mode 100644 src/screenlog.js diff --git a/src/index.html b/src/index.html index 82accc3..40947a4 100644 --- a/src/index.html +++ b/src/index.html @@ -101,6 +101,25 @@
+
+
+
+ Console +
+ + + + + + + +
+
+
+
+ +
+
@@ -577,6 +596,11 @@ + + + + + diff --git a/src/screenlog.js b/src/screenlog.js new file mode 100644 index 0000000..8a23762 --- /dev/null +++ b/src/screenlog.js @@ -0,0 +1,174 @@ +(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() { + 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 () { + window.parent.onMessageFromConsole.apply(null, arguments); + } +}); \ No newline at end of file diff --git a/src/script.js b/src/script.js index 9a02383..de98319 100644 --- a/src/script.js +++ b/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 +runBtn, searchInput, consoleEl, consoleLogEl */ /* eslint-disable no-extra-semi */ ;(function (alertsService) { @@ -91,6 +91,7 @@ runBtn, searchInput ; scope.cm = {}; + scope.consoleCm; scope.demoFrameDocument = frame.contentDocument || frame.contentWindow.document; // Check all the code wrap if they are minimized or not @@ -734,6 +735,9 @@ runBtn, searchInput + '\n' + html + '\n' + externalJs + '\n'; + contents += ''; + if (js) { contents += ' diff --git a/src/screenlog.js b/src/screenlog.js index 8a23762..8d9d67a 100644 --- a/src/screenlog.js +++ b/src/screenlog.js @@ -171,4 +171,13 @@ screenLog.init({ proxyCallback: function () { window.parent.onMessageFromConsole.apply(null, arguments); } -}); \ No newline at end of file +}); +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); +} \ No newline at end of file diff --git a/src/script.js b/src/script.js index de98319..3841336 100644 --- a/src/script.js +++ b/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 () { diff --git a/src/style.css b/src/style.css index c02108a..393e9ef 100644 --- a/src/style.css +++ b/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); } \ No newline at end of file From d7bfe24a0a3a431320fcfdd47224c479a0621044 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Mon, 8 May 2017 02:21:22 +0530 Subject: [PATCH 03/13] add console clear kbd shortcut and minor fixes. --- src/index.html | 4 ++-- src/script.js | 12 +++++++----- src/style.css | 4 +++- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/index.html b/src/index.html index f8d4dc2..abf7c34 100644 --- a/src/index.html +++ b/src/index.html @@ -106,7 +106,7 @@
Console
- + @@ -120,7 +120,7 @@ - +
diff --git a/src/script.js b/src/script.js index 3841336..aed5612 100644 --- a/src/script.js +++ b/src/script.js @@ -91,7 +91,6 @@ runBtn, searchInput, consoleEl, consoleLogEl ; scope.cm = {}; - scope.consoleCm; scope.frame = frame; scope.demoFrameDocument = frame.contentDocument || frame.contentWindow.document; @@ -1311,7 +1310,10 @@ runBtn, searchInput, consoleEl, consoleLogEl scope.consoleCm.setValue(''); }; scope.evalConsoleExpr = function (e) { - if (e.which === 13) { + // Clear console on CTRL + L + if (((e.which === 76 || e.which === 12) && e.ctrlKey)) { + scope.clearConsole(); + } else if (e.which === 13) { window.onMessageFromConsole('> ' + e.target.value); frame.contentWindow._wmEvaluate(e.target.value); e.target.value = ''; @@ -1322,10 +1324,10 @@ 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('\n' + arg + ' ' + ((arg + '').match(/\[object \w+]/) ? JSON.stringify(arg) : ''), { line: Infinity }); scope.consoleCm.scrollTo(0, Infinity); }); - } + }; function compileNodes() { function attachListenerForEvent(eventName) { @@ -1339,7 +1341,7 @@ runBtn, searchInput, consoleEl, consoleLogEl attachListenerForEvent('click'); attachListenerForEvent('change'); attachListenerForEvent('input'); - attachListenerForEvent('keypress'); + attachListenerForEvent('keyup'); } function init () { diff --git a/src/style.css b/src/style.css index 393e9ef..303d941 100644 --- a/src/style.css +++ b/src/style.css @@ -279,9 +279,11 @@ li.CodeMirror-hint-active { background-color: rgb(18, 19, 27); color: rgba(255, 255, 255, 0.45); border-top: 1px solid rgba(255,255,255,0.14); - z-index: 1; /*line-height: 20px;*/ } +.footer { + z-index: 1; +} .main-header { border: 0; border-bottom: 1px solid rgba(255,255,255,0.14); From 1c82dcaafddd3b497bca6ccfa17ef13425c5cd03 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Mon, 8 May 2017 02:53:13 +0530 Subject: [PATCH 04/13] modal refactor and some style fixes --- src/index.html | 2 +- src/script.js | 20 +++++++++++++------- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/index.html b/src/index.html index abf7c34..aa90b85 100644 --- a/src/index.html +++ b/src/index.html @@ -23,7 +23,7 @@ Run - + Add library diff --git a/src/script.js b/src/script.js index aed5612..0341b28 100644 --- a/src/script.js +++ b/src/script.js @@ -985,7 +985,7 @@ runBtn, searchInput, consoleEl, consoleLogEl }); function openSettings() { - settingsModal.classList.toggle('is-modal-visible'); + scope.toggleModal(settingsModal); /* if (chrome.runtime.openOptionsPage) { // New way to open options pages, if supported (Chrome 42+). @@ -1289,6 +1289,14 @@ runBtn, searchInput, consoleEl, consoleLogEl trackEvent('ui', 'saveBtnClick', currentItem.id ? 'saved' : 'new'); saveItem(); }; + /** + * Toggles a modal and logs an event. + * @param {Node} modal modal to be toggled + */ + scope.toggleModal = function (modal) { + modal.classList.toggle('is-modal-visible'); + document.body.classList[modal.classList.contains('is-modal-visible') ? 'add' : 'remove']('overlay-visible'); + }; scope.onSearchInputChange = function (e) { const text = e.target.value; let el; @@ -1363,19 +1371,17 @@ runBtn, searchInput, consoleEl, consoleLogEl layoutBtn4.addEventListener('click', getToggleLayoutButtonListener(4)); utils.onButtonClick(helpBtn, function () { - helpModal.classList.toggle('is-modal-visible'); - document.body.classList[helpModal.classList.contains('is-modal-visible') ? 'add' : 'remove']('overlay-visible'); + scope.toggleModal(helpModal); trackEvent('ui', 'helpButtonClick'); }); utils.onButtonClick(addLibraryBtn, function () { - addLibraryModal.classList.toggle('is-modal-visible'); - document.body.classList[addLibraryModal.classList.contains('is-modal-visible') ? 'add' : 'remove']('overlay-visible'); + scope.toggleModal(addLibraryModal); trackEvent('ui', 'addLibraryButtonClick'); }); notificationsBtn.addEventListener('click', function () { - notificationsModal.classList.toggle('is-modal-visible'); - document.body.classList[notificationsModal.classList.contains('is-modal-visible') ? 'add' : 'remove']('overlay-visible'); + scope.toggleModal(notificationsModal); + if (notificationsModal.classList.contains('is-modal-visible') && !hasSeenNotifications) { hasSeenNotifications = true; notificationsBtn.classList.remove('has-new'); From c2621d0adb4c83ec70d7bf21e5078c102e9afcab Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Mon, 8 May 2017 02:53:53 +0530 Subject: [PATCH 05/13] fix console codemirror height --- src/index.html | 4 ++-- src/script.js | 2 +- src/style.css | 6 +++--- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/index.html b/src/index.html index aa90b85..c192495 100644 --- a/src/index.html +++ b/src/index.html @@ -116,11 +116,11 @@ -
+
- +
diff --git a/src/script.js b/src/script.js index 0341b28..cbf55d6 100644 --- a/src/script.js +++ b/src/script.js @@ -980,7 +980,6 @@ runBtn, searchInput, consoleEl, consoleLogEl theme: 'monokai', foldGutter: true, readOnly: true, - viewportMargin: Infinity, gutters: [ 'CodeMirror-foldgutter' ] }); @@ -1247,6 +1246,7 @@ runBtn, searchInput, consoleEl, consoleLogEl htmlCode.querySelector('.CodeMirror').style.fontSize = prefs.fontSize; cssCode.querySelector('.CodeMirror').style.fontSize = prefs.fontSize; jsCode.querySelector('.CodeMirror').style.fontSize = prefs.fontSize; + consoleEl.querySelector('.CodeMirror').style.fontSize = prefs.fontSize; // Update indentation count when slider is updated indentationSizeValueEl.textContent = $('[data-setting=indentSize]').value; diff --git a/src/style.css b/src/style.css index 303d941..7143cca 100644 --- a/src/style.css +++ b/src/style.css @@ -204,6 +204,7 @@ select, input[type="text"], input[type="number"], textarea { .code-wrap__header-btn { display: inline-block; vertical-align: top; + margin-left: 8px; } .code-wrap__header-btn, .code-wrap__header-btn > svg { @@ -830,9 +831,8 @@ li.CodeMirror-hint-active { transition: transform 0.4s cubic-bezier(0.76, 0.01, 0.13, 0.9); } .console.is-minimized { - transform: translateY(calc(100% - 30px)); + transform: translateY(calc(100% - 29px)); } .console .Codemirror { - height: auto; - max-height: calc(100% - 70px); + height: calc(100% - 55px); } \ No newline at end of file From ba055a0b92782f44335f6b6a066b855506cb217b Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Mon, 8 May 2017 03:12:43 +0530 Subject: [PATCH 06/13] more fixes for console --- src/index.html | 2 +- src/script.js | 4 +++- src/style.css | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/index.html b/src/index.html index c192495..650b454 100644 --- a/src/index.html +++ b/src/index.html @@ -246,7 +246,7 @@

Awesome libraries used