release: v2.3.2

CHANGELOG.md

@@ -1,3 +1,11 @@
+## v2.3.2 (29 Apr 2020)
+
+* fix(console): scroll performance
+
+## v2.3.1 (28 Apr 2020)
+
+* fix(elements): content highlight
+
 ## v2.3.0 (28 Apr 2020)
 
 * feat: refresh notification

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eruda",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "Console for Mobile Browsers",
   "main": "eruda.js",
   "scripts": {

src/Console/Console.hbs

@@ -9,10 +9,10 @@
     <span {{{class 'icon-search search'}}}></span>
   </div>
   <div {{{class 'logs-container'}}}>
-    <div {{{class 'top-space'}}}></div>
-    <ul {{{class 'fake-logs'}}}></ul>
-    <ul {{{class 'logs'}}}></ul>
-    <div {{{class 'bottom-space'}}}></div>
+    <div {{{class 'logs-space'}}}>
+      <ul {{{class 'fake-logs'}}}></ul>
+      <ul {{{class 'logs'}}}></ul>
+    </div>
   </div>
   <div {{{class 'js-input'}}}>
     <div {{{class 'buttons'}}}>

src/Console/Log.js

@@ -143,9 +143,10 @@ export default class Log extends Emitter {
   }
   updateSize(silent = true) {
     const height = this.el.offsetHeight
-    if (this.height !== height) {
-      this.height = this.el.offsetHeight
-      this.width = this.el.offsetWidth
+    const width = this.el.offsetWidth
+    if (this.height !== height || this.width !== width) {
+      this.height = height
+      this.width = width
       if (!silent) this.emit('updateSize')
     }
   }

src/Console/Logger.js

@@ -4,6 +4,7 @@ import {
   isNum,
   isUndef,
   perfNow,
+  now,
   isStr,
   extend,
   uniqId,
@@ -40,12 +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 = {}
@@ -59,10 +61,9 @@ export default class Logger extends Emitter {
     this._asyncTimer = null
     this._isAtBottom = true
     this._groupStack = new Stack()
-    this._ignoreScroll = false
 
-    this.renderViewport = throttle(force => {
-      this._renderViewport(force)
+    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
@@ -616,11 +621,6 @@ export default class Logger extends Emitter {
       })
 
     this._$container.on('scroll', () => {
-      if (this._ignoreScroll) {
-        this._ignoreScroll = false
-        return
-      }
-
       const { scrollHeight, offsetHeight, scrollTop } = this._container
       // safari bounce effect
       if (scrollTop < 0) return
@@ -634,33 +634,60 @@ export default class Logger extends Emitter {
       }
       this._isAtBottom = isAtBottom
 
+      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 &&
-        this._topSpaceHeight + this._el.offsetHeight > scrollTo + offsetHeight
+        this._topSpaceHeight < scrollTop - topTolerance &&
+        this._topSpaceHeight + this._el.offsetHeight >
+          scrollTop + offsetHeight + bottomTolerance
       ) {
         return
       }
 
-      this.renderViewport(false)
+      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, offsetWidth, offsetHeight } = container
-    let top = scrollTop
-    let bottom = scrollTop + offsetHeight
+    const { scrollTop, clientWidth, offsetHeight } = container
+    const top = scrollTop - topTolerance
+    const bottom = scrollTop + offsetHeight + bottomTolerance
 
     const displayLogs = this._displayLogs
-    const tolerance = 1000
-    top -= tolerance
-    bottom += tolerance
 
     let topSpaceHeight = 0
     let bottomSpaceHeight = 0
     let currentHeight = 0
 
-    this._el.innerHTML = ''
     const len = displayLogs.length
 
     const fakeEl = this._fakeEl
@@ -669,7 +696,7 @@ export default class Logger extends Emitter {
     for (let i = 0; i < len; i++) {
       const log = displayLogs[i]
       const { width, height } = log
-      if (height === 0 || width !== offsetWidth) {
+      if (height === 0 || width !== clientWidth) {
         fakeFrag.appendChild(log.el)
         logs.push(log)
       }
@@ -697,20 +724,19 @@ export default class Logger extends Emitter {
 
       currentHeight += height
     }
-    this._el.appendChild(frag)
 
+    this._updateSpace(currentHeight)
     this._updateTopSpace(topSpaceHeight)
     this._updateBottomSpace(bottomSpaceHeight)
+    el.innerHTML = ''
+    el.appendChild(frag)
 
     const { scrollHeight } = container
-    if (this._isAtBottom && scrollTop !== scrollHeight - offsetHeight) {
-      container.scrollTop = scrollHeight - offsetHeight
-      this.renderViewport()
+    if (this._isAtBottom && scrollTop <= scrollHeight - offsetHeight) {
+      container.scrollTop = 10000000
     } else {
       container.scrollTop = scrollTop
     }
-
-    this._ignoreScroll = true
   }
 }
 

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;

src/Elements/Highlight.js

@@ -99,7 +99,7 @@ export default class Highlight {
 
     this._$content.css({
       left: bl + pl,
-      top: bl + pt,
+      top: bt + pt,
       width: pw - pl - pr,
       height: ph - pt - pb,
       background: contentColor