diff --git a/src/Console/Console.hbs b/src/Console/Console.hbs index 7c0ea4d..d4334cf 100644 --- a/src/Console/Console.hbs +++ b/src/Console/Console.hbs @@ -9,10 +9,10 @@
-
- - -
+
+ + +
diff --git a/src/Console/Logger.js b/src/Console/Logger.js index 5f5a7ed..adb0379 100644 --- a/src/Console/Logger.js +++ b/src/Console/Logger.js @@ -4,6 +4,7 @@ import { isNum, isUndef, perfNow, + now, isStr, extend, uniqId, @@ -40,13 +41,13 @@ export default class Logger extends Emitter { this._el = this._$el.get(0) this._$fakeEl = $container.find('ul.eruda-fake-logs') this._fakeEl = this._$fakeEl.get(0) - this._$topSpace = $container.find('.eruda-top-space') - this._topSpace = this._$topSpace.get(0) - this._$bottomSpace = $container.find('.eruda-bottom-space') - this._bottomSpace = this._$bottomSpace.get(0) + this._$space = $container.find('.eruda-logs-space') + this._space = this._$space.get(0) + this._spaceHeight = 0 this._topSpaceHeight = 0 this._bottomSpaceHeight = 0 this._lastScrollTop = 0 + this._lastTimestamp = 0 this._logs = [] this._displayLogs = [] this._timer = {} @@ -61,8 +62,8 @@ export default class Logger extends Emitter { this._isAtBottom = true this._groupStack = new Stack() - this.renderViewport = throttle(() => { - this._renderViewport() + this.renderViewport = throttle(options => { + this._renderViewport(options) }, 16) // https://developers.google.cn/web/tools/chrome-devtools/console/utilities @@ -392,11 +393,15 @@ export default class Logger extends Emitter { } _updateTopSpace(height) { this._topSpaceHeight = height - this._topSpace.style.height = height + 'px' + this._el.style.top = height + 'px' } _updateBottomSpace(height) { this._bottomSpaceHeight = height - this._bottomSpace.style.height = height + 'px' + } + _updateSpace(height) { + if (this._spaceHeight === height) return + this._spaceHeight = height + this._space.style.height = height + 'px' } _updateLogSize(log) { const fakeEl = this._fakeEl @@ -629,38 +634,56 @@ export default class Logger extends Emitter { } this._isAtBottom = isAtBottom - const tolerance = 500 + const lastScrollTop = this._lastScrollTop + const lastTimestamp = this._lastTimestamp + + const timestamp = now() + const duration = timestamp - lastTimestamp + const distance = scrollTop - lastScrollTop + const speed = Math.abs(distance / duration) + let speedTolerance = speed * 800 + if (duration > 1000) { + speedTolerance = 1000 + } + if (speedTolerance > 4000) speedTolerance = 4000 + if (speedTolerance < 500) speedTolerance = 1000 + this._lastScrollTop = scrollTop + this._lastTimestamp = timestamp + + let topTolerance = 0 + let bottomTolerance = 0 + if (lastScrollTop < scrollTop) { + topTolerance = 500 + bottomTolerance = speedTolerance + } else { + topTolerance = speedTolerance + bottomTolerance = 500 + } + if ( - this._topSpaceHeight < scrollTop - tolerance && + this._topSpaceHeight < scrollTop - topTolerance && this._topSpaceHeight + this._el.offsetHeight > - scrollTop + offsetHeight + tolerance + scrollTop + offsetHeight + bottomTolerance ) { return } - this.renderViewport() + this.renderViewport({ + topTolerance: topTolerance * 2, + bottomTolerance: bottomTolerance * 2 + }) }) } - _renderViewport() { + _renderViewport({ topTolerance = 500, bottomTolerance = 500 } = {}) { const container = this._container const el = this._el if (isHidden(container)) return const { scrollTop, clientWidth, offsetHeight } = container - let top = scrollTop - let bottom = scrollTop + offsetHeight + const top = scrollTop - topTolerance + const bottom = scrollTop + offsetHeight + bottomTolerance const displayLogs = this._displayLogs - const lastScrollTop = this._lastScrollTop - if (lastScrollTop < scrollTop) { - top -= 500 - bottom += 2000 - } else { - top -= 2000 - bottom += 500 - } - this._lastScrollTop = scrollTop - let topSpaceHeight = 0 let bottomSpaceHeight = 0 let currentHeight = 0 @@ -702,6 +725,7 @@ export default class Logger extends Emitter { currentHeight += height } + this._updateSpace(currentHeight) this._updateTopSpace(topSpaceHeight) this._updateBottomSpace(bottomSpaceHeight) el.innerHTML = '' diff --git a/src/Console/Logger.scss b/src/Console/Logger.scss index bc64bbd..319edad 100644 --- a/src/Console/Logger.scss +++ b/src/Console/Logger.scss @@ -24,6 +24,8 @@ .logs { font-size: $font-size; padding-top: 1px; + position: absolute; + width: 100%; } .log-container { box-sizing: content-box;