From 50b489478ce1a26284bbb2b002f16911b40c5241 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Mon, 11 Dec 2017 23:25:41 +0300
Subject: [PATCH] prefetch next page on scroll past midpage

---
 popup/search-results.css |  4 ++--
 popup/search-results.js  | 38 +++++++++++++++++++++++++++++---------
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/popup/search-results.css b/popup/search-results.css
index f77ed449..bacbb417 100755
--- a/popup/search-results.css
+++ b/popup/search-results.css
@@ -3,7 +3,7 @@ body.search-results-shown {
   overflow-x: hidden;
 }
 
-#search-results:before {
+#search-results:not([data-empty]):before {
   background-image: linear-gradient(transparent, rgba(0, 0, 0, .3) 200px);
   content: "";
   top: -50px;
@@ -236,7 +236,7 @@ body.search-results-shown {
 
 #search-results .search-results-nav button:disabled {
   cursor: auto;
-  opacity: .5;
+  opacity: .25;
   pointer-events: none;
 }
 
diff --git a/popup/search-results.js b/popup/search-results.js
index 4b0b0212..d49cf82c 100755
--- a/popup/search-results.js
+++ b/popup/search-results.js
@@ -91,6 +91,8 @@ window.addEventListener('showStyles:done', function _() {
     $('#find-styles-inline-group').classList.add('hidden');
 
     dom.container = $('#search-results');
+    dom.container.dataset.empty = '';
+
     dom.error = $('#search-results-error');
 
     dom.nav = {};
@@ -108,6 +110,8 @@ window.addEventListener('showStyles:done', function _() {
 
     dom.list = $('#search-results-list');
 
+    addEventListener('scroll', loadMoreIfNeeded, {passive: true});
+
     addEventListener('styleDeleted', ({detail}) => {
       const entries = [...dom.list.children];
       const entry = entries.find(el => el._result.installedStyleId === detail.id);
@@ -233,8 +237,19 @@ window.addEventListener('showStyles:done', function _() {
       .catch(error);
   }
 
-  function loadMoreIfNeeded() {
-    if (processedResults.length < (displayedPage + 1) * DISPLAY_PER_PAGE) {
+  function loadMoreIfNeeded(event) {
+    let prefetchPages = 0;
+    if (event instanceof Event) {
+      const scroller = document.scrollingElement;
+      if (scroller.scrollTop > scroller.scrollHeight / 2 &&
+          (loadMoreIfNeeded.prefetchedPage || 0) <= displayedPage) {
+        prefetchPages = 1;
+        loadMoreIfNeeded.prefetchedPage = displayedPage + 1;
+      } else {
+        return;
+      }
+    }
+    if (processedResults.length < (displayedPage + prefetchPages) * DISPLAY_PER_PAGE) {
       setTimeout(load, DELAY_BEFORE_SEARCHING_STYLES);
     }
   }
@@ -328,14 +343,19 @@ window.addEventListener('showStyles:done', function _() {
       dom.list.lastElementChild.remove();
     }
 
-    if (scrollToFirstResult &&
-        dom.container.getBoundingClientRect().bottom > window.innerHeight * 2) {
+    if (processedResults.length && 'empty' in dom.container.dataset) {
+      delete dom.container.dataset.empty;
+    }
+
+    if (scrollToFirstResult && (!FIREFOX || FIREFOX >= 55)) {
+      debounce(doScrollToFirstResult);
+    }
+  }
+
+  function doScrollToFirstResult() {
+    if (dom.container.scrollHeight > window.innerHeight * 2) {
       scrollToFirstResult = false;
-      if (!FIREFOX || FIREFOX >= 55) {
-        setTimeout(() => {
-          dom.container.scrollIntoView({behavior: 'smooth', block: 'start'});
-        });
-      }
+      dom.container.scrollIntoView({behavior: 'smooth', block: 'start'});
     }
   }