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 + +
+
+
+ +
+
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