Revert "Improve scroller performance"

This reverts commit 0fbd076a52.

.github/workflows/e2e.yaml

@@ -24,7 +24,6 @@ jobs:
       - name: Build vue app
         run: |
           make dev-setup
-          make patch-external
           make build-js-production
           zip -r vue.zip js/
 
@@ -41,8 +40,8 @@ jobs:
       # do not stop on another job's failure
       fail-fast: false
       matrix:
-        php-versions: ["7.4"]
+        php-versions: ['7.4']
-        server-versions: ["stable25"]
+        server-versions: ['stable25']
 
     services:
       mysql:
@@ -101,6 +100,7 @@ jobs:
           name: report-mysql-${{ matrix.php-versions }}-${{ matrix.server-versions }}
           path: apps/${{ env.APP_NAME }}/playwright-report
 
+
   pgsql:
     runs-on: ubuntu-latest
     needs: vue
@@ -109,8 +109,8 @@ jobs:
       # do not stop on another job's failure
       fail-fast: false
       matrix:
-        php-versions: ["7.4"]
+        php-versions: ['7.4']
-        server-versions: ["stable25"]
+        server-versions: ['stable25']
 
     services:
       postgres:
@@ -181,8 +181,8 @@ jobs:
       # do not stop on another job's failure
       fail-fast: false
       matrix:
-        php-versions: ["7.4"]
+        php-versions: ['7.4']
-        server-versions: ["stable25"]
+        server-versions: ['stable25']
 
     steps:
       - name: Checkout server
@@ -231,3 +231,4 @@ jobs:
         with:
           name: report-sqlite-${{ matrix.php-versions }}-${{ matrix.server-versions }}
           path: apps/${{ env.APP_NAME }}/playwright-report
+

.github/workflows/release.yaml

@@ -24,7 +24,6 @@ jobs:
     - name: Build
       run: |
         make dev-setup
-          make patch-external
         make build-js-production
         ./scripts/bundle.sh
 

Makefile

@@ -26,9 +26,6 @@ build-js:
 build-js-production:
 	rm -f js/* && npm run build
 
-patch-external:
-	patch -p1 < patches/scroller.patch
-
 watch-js:
 	npm run watch
 

package-lock.json

@@ -23,7 +23,7 @@
         "vue-material-design-icons": "^5.1.2",
         "vue-property-decorator": "^9.1.2",
         "vue-router": "^3.5.4",
-        "vue-virtual-scroller": "1.1.2",
+        "vue-virtual-scroller": "^1.1.2",
         "webdav": "^4.11.0"
       },
       "devDependencies": {

package.json

@@ -43,7 +43,7 @@
     "vue-material-design-icons": "^5.1.2",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.5.4",
-    "vue-virtual-scroller": "1.1.2",
+    "vue-virtual-scroller": "^1.1.2",
     "webdav": "^4.11.0"
   },
   "browserslist": [

patches/scroller.patch

@@ -1,54 +0,0 @@
---- ./node_modules/vue-virtual-scroller/dist/vue-virtual-scroller.esm.js	2022-10-29 15:40:12.517184534 -0700
-+++ ./node_modules/vue-virtual-scroller/dist/vue-virtual-scroller.esm.js	2022-10-29 15:40:42.814432774 -0700
-@@ -99,6 +99,10 @@
-       type: Boolean,
-       default: false
-     },
-+    updateInterval: {
-+      type: Number,
-+      default: 0,
-+    },
-     skipHover: {
-       type: Boolean,
-       default: false
-@@ -262,7 +266,9 @@
-     handleScroll(event) {
-       if (!this.$_scrollDirty) {
-         this.$_scrollDirty = true;
--        requestAnimationFrame(() => {
-+        if (this.$_updateTimeout) return
-+
-+        const requestUpdate = () => requestAnimationFrame(() => {
-           this.$_scrollDirty = false;
-           const {
-             continuous
-@@ -272,9 +278,19 @@
-           // When non continous scrolling is ending, we force a refresh
-           if (!continuous) {
-             clearTimeout(this.$_refreshTimout);
--            this.$_refreshTimout = setTimeout(this.handleScroll, 100);
-+            this.$_refreshTimout = setTimeout(this.handleScroll, this.updateInterval + 100);
-           }
-         });
-+
-+        requestUpdate()
-+
-+        // Schedule the next update with throttling
-+        if (this.updateInterval) {
-+          this.$_updateTimeout = setTimeout(() => {
-+            this.$_updateTimeout = 0
-+            if (this.$_scrollDirty) requestUpdate();
-+          }, this.updateInterval)
-+        }
-       }
-     },
-     handleVisibilityChange(isVisible, entry) {
-@@ -505,7 +521,7 @@
-       // After the user has finished scrolling
-       // Sort views so text selection is correct
-       clearTimeout(this.$_sortTimer);
--      this.$_sortTimer = setTimeout(this.sortViews, 300);
-+      this.$_sortTimer = setTimeout(this.sortViews, this.updateInterval + 300);
-       return {
-         continuous
-       };

src/components/ScrollerManager.vue

@@ -83,11 +83,9 @@ export default class ScrollerManager extends Mixins(GlobalMixin) {
   /** Scrolling recycler timer */
   private scrollingRecyclerTimer = null as number | null;
   /** View size reflow timer */
-  private reflowRequest!: boolean;
+  private reflowRequest = false;
   /** Tick adjust timer */
-  private adjustRequest!: boolean;
+  private adjustRequest = false;
-  /** Recycler scrolling throttle */
-  private recyclerScrollDirty!: boolean;
 
   /** Get the visible ticks */
   get visibleTicks() {
@@ -117,17 +115,6 @@ export default class ScrollerManager extends Mixins(GlobalMixin) {
 
   /** Recycler scroll event, must be called by timeline */
   public recyclerScrolled() {
-    if (!this.recyclerScrollDirty) {
-      this.recyclerScrollDirty = true;
-      window.setTimeout(() => {
-        this.recyclerScrollDirty = false;
-        requestAnimationFrame(this.updateFromRecyclerScroll);
-      }, 100);
-    }
-  }
-
-  /** Update cursor position from recycler scroll position */
-  public updateFromRecyclerScroll() {
     // Ignore if not initialized
     if (!this.ticks.length) return;
 
@@ -569,7 +556,6 @@ export default class ScrollerManager extends Mixins(GlobalMixin) {
     min-width: 100%;
     min-height: 1.5px;
     will-change: transform;
-    transition: transform 0.1s linear;
 
     &.st {
       font-size: 0.75em;
@@ -593,11 +579,8 @@ export default class ScrollerManager extends Mixins(GlobalMixin) {
       }
     }
   }
-  &:hover > .cursor {
+  &:hover > .cursor.st {
-    transition: none;
-    &.st {
     opacity: 1;
   }
 }
-}
 </style>

src/components/Timeline.vue

@@ -26,12 +26,11 @@
       :class="{ empty: list.length === 0 }"
       :items="list"
       :emit-update="true"
-      :buffer="800"
+      :buffer="400"
       :skipHover="true"
       key-field="id"
       size-field="size"
       type-field="type"
-      :updateInterval="100"
       @update="scrollChange"
       @resize="handleResizeWithDelay"
     >