From 88a49cd4c5d3377951dc3b0def6cc145fbb6cc66 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Sun, 7 May 2017 16:59:47 +0530 Subject: [PATCH] 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 += '