diff --git a/src/Console/Log.hbs b/src/Console/Log.hbs index fd34330..6ee5061 100644 --- a/src/Console/Log.hbs +++ b/src/Console/Log.hbs @@ -1,28 +1,26 @@ -
  • - {{#if displayHeader}} -
    - {{#repeat group.indentLevel}} -
    - {{/repeat}} -
    - {{time}} {{from}} -
    -
    - {{/if}} -
    +{{#if displayHeader}} +
    {{#repeat group.indentLevel}}
    {{/repeat}} - {{#if icon}} -
    - -
    - {{/if}} -
    -
    -
    -
    -
    {{{msg}}}
    +
    + {{time}} {{from}}
    -
    • \ No newline at end of file +{{/if}} +
    + {{#repeat group.indentLevel}} +
    + {{/repeat}} + {{#if icon}} +
    + +
    + {{/if}} +
    +
    +
    +
    +
    {{{msg}}}
    +
    +
    \ No newline at end of file diff --git a/src/Console/Log.js b/src/Console/Log.js index cfa8e29..72ae0bf 100644 --- a/src/Console/Log.js +++ b/src/Console/Log.js @@ -30,7 +30,8 @@ import { each, trim, lowerCase, - keys + keys, + $ } from '../lib/util' export default class Log { @@ -52,6 +53,8 @@ export default class Log { this.displayHeader = displayHeader this.ignoreFilter = ignoreFilter this.collapsed = false + this.el = null + this._$el = null if (displayHeader) { this.time = getCurTime() @@ -83,87 +86,69 @@ export default class Log { } else { this.show() } - return true - } else { - return false } } hide() { - let msg = this._formattedMsg + this._$el.addClass('eruda-hidden') - msg = msg.replace( - '"eruda-log-container"', - '"eruda-log-container eruda-hidden"' - ) - - this._formattedMsg = msg + return this } show() { - let msg = this._formattedMsg + this._$el.rmClass('eruda-hidden') - msg = msg.replace( - '"eruda-log-container eruda-hidden"', - '"eruda-log-container"' - ) - - this._formattedMsg = msg + return this } updateIcon(icon) { - let msg = this._formattedMsg + const $icon = this._$el.find('.eruda-icon') - msg = msg.replace( - /"eruda-icon eruda-icon-[\w-]+"/, - `"eruda-icon eruda-icon-${icon}"` - ) - - this._formattedMsg = msg + $icon.rmAttr('class').addClass(['eruda-icon', `eruda-icon-${icon}`]) return this } addCount() { this.count++ const count = this.count - let msg = this._formattedMsg + const $el = this._$el + const $container = $el.find('.eruda-count-container') + const $icon = $el.find('.eruda-icon-container') + const $count = $container.find('.eruda-count') if (count === 2) { - msg = msg.replace( - 'eruda-count-container eruda-hidden', - 'eruda-count-container' - ) + $container.rmClass('eruda-hidden') } - msg = msg.replace(/data-mark="count">\d*/, 'data-mark="count">' + count) - msg = msg.replace( - 'class="eruda-icon-container"', - 'class="eruda-icon-container eruda-hidden"' - ) - - this._formattedMsg = msg + $count.text(count) + $icon.addClass('.eruda-hidden') return this } groupEnd() { - let msg = this._formattedMsg + const $el = this._$el + const $lastNesting = $el + .find('.eruda-nesting-level:not(.eruda-group-closed)') + .last() - const mark = '"eruda-nesting-level"' - const lastIdx = msg.lastIndexOf(mark) - const len = lastIdx + mark.length - 1 - msg = msg.slice(0, len) + ' eruda-group-closed"' + msg.slice(len) - this._formattedMsg = msg + $lastNesting.addClass('eruda-group-closed') return this } updateTime(time) { - let msg = this._formattedMsg + const $el = this._$el + const $container = $el.find('.eruda-time-container') if (this.time) { - msg = msg.replace(/data-mark="time">(.*?)${time}<`) + $container + .find('span') + .eq(0) + .text(time) this.time = time - this._formattedMsg = msg } return this } - content() { - return this._formattedMsg + html() { + return this.el.outerHTML + } + text() { + return this.el.textContent } _needSrc() { const { type, args } = this @@ -193,6 +178,12 @@ export default class Log { ) } } + destroy() { + this.detach() + } + detach() { + this._$el.remove() + } _formatMsg() { let { args } = this const { type, id, displayHeader, time, from, group } = this @@ -270,7 +261,14 @@ export default class Log { if (!this._needSrc() || !Log.lazyEvaluation) { delete this.args } - this._formattedMsg = msg + + const $el = $(document.createElement('li')) + $el + .addClass('eruda-log-container') + .data({ id, type }) + .html(msg) + this._$el = $el + this.el = $el.get(0) } static click(type, log, $el, logger) { switch (type) { diff --git a/src/Console/Logger.js b/src/Console/Logger.js index 3708d03..983bf8e 100644 --- a/src/Console/Logger.js +++ b/src/Console/Logger.js @@ -10,7 +10,6 @@ import { uniqId, isRegExp, isFn, - stripHtmlTag, $, Stack, isEmpty, @@ -27,6 +26,7 @@ export default class Logger extends Emitter { this._style = evalCss(require('./Logger.scss')) this._$el = $el + this._el = $el.get(0) this._logs = [] this._timer = {} this._count = {} @@ -215,7 +215,6 @@ export default class Logger extends Emitter { const lastLog = this._lastLog lastLog.groupEnd() this._groupStack.pop() - this._refreshLogUi(lastLog) } input(jsCode) { this.insert({ @@ -247,25 +246,21 @@ export default class Logger extends Emitter { return this.insert('html', args) } render() { - let html = '' - let logs = this._logs - - logs = this._filterLogs(logs) + const logs = this._filterLogs(this._logs) + this._$el.html('') for (let i = 0, len = logs.length; i < len; i++) { - html += logs[i].content() + this._el.appendChild(logs[i].el) } - this._$el.html(html) this.scrollToBottom() return this } insert(type, args) { const logs = this._logs - const $el = this._$el const groupStack = this._groupStack - const el = $el.get(0) + const el = this._el const isAtBottom = el.scrollTop === el.scrollHeight - el.offsetHeight @@ -303,7 +298,7 @@ export default class Logger extends Emitter { lastLog.addCount() if (log.time) lastLog.updateTime(log.time) log = lastLog - this._rmLogUi(lastLog) + lastLog.detach() } else { logs.push(log) this._lastLog = log @@ -311,12 +306,12 @@ export default class Logger extends Emitter { if (this._maxNum !== 'infinite' && logs.length > this._maxNum) { const firstLog = logs[0] - this._rmLogUi(firstLog) + firstLog.destroy() logs.shift() } if (this._filterLog(log)) { - $el.append(log.content()) + el.appendChild(log.el) } this.emit('insert', log) @@ -362,19 +357,6 @@ export default class Logger extends Emitter { return ret } - _rmLogUi(log) { - const $container = this._$el.find(`li[data-id="${log.id}"]`) - if ($container.length > 0) { - $container.remove() - } - } - _refreshLogUi(log) { - const $container = this._$el.find(`li[data-id="${log.id}"]`) - if ($container.length > 0) { - $container.after(log.content()) - $container.remove() - } - } _filterLogs(logs) { const filter = this._filter @@ -386,7 +368,7 @@ export default class Logger extends Emitter { return logs.filter(log => { if (log.ignoreFilter) return true if (isFilterFn) return filter(log) - if (isFilterRegExp) return filter.test(stripHtmlTag(log.content())) + if (isFilterRegExp) return filter.test(log.text()) return log.type === filter }) } @@ -400,7 +382,7 @@ export default class Logger extends Emitter { if (log.ignoreFilter) return true if (isFilterFn) return filter(log) - if (isFilterRegExp) return filter.test(stripHtmlTag(log.content())) + if (isFilterRegExp) return filter.test(log.text()) return log.type === filter } @@ -419,7 +401,6 @@ export default class Logger extends Emitter { const { targetGroup } = log targetGroup.collapsed = true log.updateIcon('caret-right') - this._refreshLogUi(log) this._updateGroup(log) } @@ -427,7 +408,6 @@ export default class Logger extends Emitter { const { targetGroup } = log targetGroup.collapsed = false log.updateIcon('caret-down') - this._refreshLogUi(log) this._updateGroup(log) } @@ -438,9 +418,8 @@ export default class Logger extends Emitter { let i = logs.indexOf(log) + 1 while (i < len) { const log = logs[i] - if (log.checkGroup()) { - this._refreshLogUi(log) - } else if (log.group === targetGroup) { + log.checkGroup() + if (log.group === targetGroup) { break } i++ diff --git a/test/manual.html b/test/manual.html index ee793b8..f3f5f0b 100644 --- a/test/manual.html +++ b/test/manual.html @@ -166,7 +166,7 @@ console.log(arr); }); addClickEvent('heavy-log', () => { - for (let i = 0; i < 1000; i++) { + for (let i = 0; i < 5000; i++) { console.log(location, i); } });