From a3fae1e2d875d89d6423987683d10447f0fb05a2 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Fri, 8 Jun 2018 01:27:59 +0530 Subject: [PATCH] port console --- webmaker/src/components/AddLibrary.jsx | 3 +- webmaker/src/components/ContentWrap.jsx | 106 ++++++++++++++++++++- webmaker/src/components/SplitPane.jsx | 16 ++-- webmaker/src/components/UserCodeMirror.jsx | 4 +- webmaker/src/style.css | 2 +- 5 files changed, 116 insertions(+), 15 deletions(-) diff --git a/webmaker/src/components/AddLibrary.jsx b/webmaker/src/components/AddLibrary.jsx index 558f1dd..94df91f 100644 --- a/webmaker/src/components/AddLibrary.jsx +++ b/webmaker/src/components/AddLibrary.jsx @@ -1,5 +1,6 @@ import { h, Component } from 'preact'; import { jsLibs, cssLibs } from '../libraryList'; +import { trackEvent } from '../analytics'; export default class AddLibrary extends Component { constructor(props) { @@ -21,7 +22,7 @@ export default class AddLibrary extends Component { }); } - // trackEvent('ui', 'addLibrarySelect', target.selectedOptions[0].label); + trackEvent('ui', 'addLibrarySelect', target.selectedOptions[0].label); this.props.onChange({ js: this.state.js, css: this.state.css }); // Reset the select to the default value target.value = ''; diff --git a/webmaker/src/components/ContentWrap.jsx b/webmaker/src/components/ContentWrap.jsx index 1073a14..7b5ce73 100644 --- a/webmaker/src/components/ContentWrap.jsx +++ b/webmaker/src/components/ContentWrap.jsx @@ -6,6 +6,7 @@ import { log, writeFile, loadJS, getCompleteHtml } from '../utils'; import { SplitPane } from './SplitPane.jsx'; import { trackEvent } from '../analytics'; import CodeMirror from '../CodeMirror'; +import CodeMirrorBox from './CodeMirrorBox'; import { deferred } from '../deferred'; const BASE_PATH = chrome.extension || window.DEBUG ? '/' : '/app'; @@ -14,6 +15,9 @@ const minCodeWrapSize = 33; export default class ContentWrap extends Component { constructor(props) { super(props); + this.state = { + isConsoleOpen: false + }; this.updateTimer = null; this.updateDelay = 500; this.htmlMode = HtmlModes.HTML; @@ -24,6 +28,12 @@ export default class ContentWrap extends Component { this.codeInPreview = { html: null, css: null, js: null }; this.cmCodes = { html: props.currentItem.html, css: '', js: '' }; this.cm = {}; + this.logCount = 0; + + window.onMessageFromConsole = this.onMessageFromConsole.bind(this); + + // `clearConsole` is on window because it gets called from inside iframe also. + window.clearConsole = this.clearConsole.bind(this); } onHtmlCodeChange(editor, change) { @@ -188,6 +198,9 @@ export default class ContentWrap extends Component { return !!item.title; } componentDidUpdate() { + // HACK: becuase its a DOM manipulation + window.logCountEl.textContent = this.logCount; + // log('🚀', 'didupdate', this.props.currentItem); // if (this.isValidItem(this.props.currentItem)) { // this.refreshEditor(); @@ -330,6 +343,14 @@ export default class ContentWrap extends Component { this.toggleCodeWrapCollapse(codeWrapParent); trackEvent('ui', 'paneCollapseBtnClick', codeWrapParent.dataset.type); } + codeWrapHeaderDblClickHandler(e) { + if (!e.target.classList.contains('js-code-wrap__header')) { + return; + } + const codeWrapParent = e.target.parentElement; + this.toggleCodeWrapCollapse(codeWrapParent); + trackEvent('ui', 'paneHeaderDblClick', codeWrapParent.dataset.type); + } resetSplitting() { const codeSplitSizes = this.getCodeSplitSizes(); @@ -505,6 +526,64 @@ export default class ContentWrap extends Component { var intervalID = window.setInterval(checkWindow.bind(this), 500); } + onMessageFromConsole() { + const self = this; + /* eslint-disable no-param-reassign */ + [...arguments].forEach(arg => { + if ( + arg && + arg.indexOf && + arg.indexOf('filesystem:chrome-extension') !== -1 + ) { + arg = arg.replace( + /filesystem:chrome-extension.*\.js:(\d+):*(\d*)/g, + 'script $1:$2' + ); + } + try { + this.consoleCm.replaceRange( + arg + + ' ' + + ((arg + '').match(/\[object \w+]/) ? JSON.stringify(arg) : '') + + '\n', + { + line: Infinity + } + ); + } catch (e) { + this.consoleCm.replaceRange('🌀\n', { + line: Infinity + }); + } + this.consoleCm.scrollTo(0, Infinity); + this.logCount++; + }); + logCountEl.textContent = this.logCount; + + /* eslint-enable no-param-reassign */ + } + + toggleConsole() { + this.setState({ isConsoleOpen: !this.state.isConsoleOpen }); + trackEvent('ui', 'consoleToggle'); + } + consoleHeaderDblClickHandler(e) { + if (!e.target.classList.contains('js-console__header')) { + return; + } + trackEvent('ui', 'consoleToggleDblClick'); + this.toggleConsole(); + } + clearConsole() { + this.consoleCm.setValue(''); + this.logCount = 0; + window.logCountEl.textContent = this.logCount; + } + clearConsoleBtnClickHandler() { + this.clearConsole(); + trackEvent('ui', 'consoleClearBtnClick'); + } + render() { return (