[UX] Further rendering and tab-switching performance improvement for very large site lists.

Author: hackademix

src/ui/options.js

@@ -207,7 +207,7 @@ document.querySelector("#version").textContent = _("Version",
       UI.updateSettings({policy, contextStore});
     }
 
-    presetsUI.render([""]);
+    await presetsUI.render([""]);
     window.setTimeout(() => {
       let def = parent.querySelector('input.preset[value="DEFAULT"]');
       def.checked = true;
@@ -337,17 +337,18 @@ document.querySelector("#version").textContent = _("Version",
     validate();
     newSiteInput.addEventListener("input", validate);
 
-    newSiteForm.addEventListener("submit", e => {
+    newSiteForm.addEventListener("submit", async (e) => {
       e.preventDefault();
       e.stopPropagation();
       let site = newSiteInput.value.trim();
       let valid = Sites.isValid(site);
       if (valid && canAdd(site)) {
         currentPolicy.set(site, currentPolicy.TRUSTED);
         UI.updateSettings({policy, contextStore});
-        newSiteInput.value = "";
-        sitesUI.render(currentPolicy.sites);
-        sitesUI.hilite(site);
+        const rendering = sitesUI.render(currentPolicy.sites);
+        validate(); // apply filter and disable button
+        await rendering;
+        sitesUI.hilite(site); // display and focus
         sitesUI.onChange();
       }
     }, true);

src/ui/popup.js

@@ -548,7 +548,7 @@ addEventListener("unload", e => {
         });
       }
 
-      sitesUI.render(sites);
+      await sitesUI.render(sites);
       window.scrollTo(0, 0);
       window.setTimeout(() => sitesUI.focus(), 10);
     }

src/ui/ui.css

@@ -354,7 +354,6 @@ span.preset {
   font-size: 1em;
   vertical-align: baseline;
 }
-
 .presets label.preset {
   letter-spacing: -0.06em;
   width: 0;
@@ -393,7 +392,9 @@ span.preset {
 .site.filtered, site.filtered {
   display: none;
 }
-
+.site.overflown {
+  display: none;
+}
 .site-controls {
   display: flex;
   flex-direction: row;

src/ui/ui.js

@@ -253,10 +253,10 @@ var UI = (() => {
 
     hilite(el) {
       el.classList.add("hilite");
+      el.scrollIntoView();
       window.setTimeout(() => {
           el.classList.remove("hilite");
           el.classList.add("hilite-end");
-          el.scrollIntoView();
           window.setTimeout(() => {
             el.classList.remove("hilite-end");
           }, 1000)
@@ -934,49 +934,94 @@ var UI = (() => {
     }
 
     render(sites = this.sites, sorter = this.sorter) {
-      if (sites) this._populate(sites, sorter);
-      requestAnimationFrame(() => {
-        const { parentNode } = this;
-        parentNode.innerHTML = "";
-        if (!sites) return;
-        parentNode.appendChild(this.fragment);
-        const root = parentNode.querySelector(".sites");
-        if (!root.wiredBy) {
-          root.addEventListener("keydown", (e) => this._keyNavHandler(e), true);
-          root.addEventListener(
-            "keyup",
-            (e) => {
-              // we use a keyup listener to open the customizer from other presets
-              // because space repetition may lead to unintendedly "click" on the
-              // first cap checkbox once focused from keydown
-              switch (e.code) {
-                case "Space": {
-                  let focused = document.activeElement;
-                  if (focused.matches(".site .preset")) {
-                    focused
-                      .closest(".site")
-                      .querySelector(".preset[value='CUSTOM']")
-                      .click();
-                    e.preventDefault();
-                  }
+      if (sites) {
+        this._populate(sites, sorter);
+      }
+      return new Promise(resolve => {
+        requestAnimationFrame(() => {
+          const { parentNode } = this;
+          parentNode.innerHTML = "";
+          if (!sites) {
+            resolve();
+            return;
+          }
+
+          const PAGE_SIZE = 50;
+          const unfiltered = this.list.querySelectorAll(".site:not(.filtered)");
+          if (unfiltered.length > PAGE_SIZE) {
+            let timeout;
+            let overflowIdx;
+            const resetOverflow = () => {
+              clearTimeout(timeout);
+              overflowIdx = PAGE_SIZE;
+              for (let j = unfiltered.length; j-- > overflowIdx;) {
+                unfiltered[j].classList.add("overflown");
+              }
+            };
+            resetOverflow();
+
+            const updateOverflow = () => {
+              clearTimeout(timeout);
+              requestAnimationFrame(() => {
+                const end = Math.min(unfiltered.length, overflowIdx + PAGE_SIZE);
+                for (let j = overflowIdx; j < end; j++) {
+                  unfiltered[j].classList.remove("overflown");
+                }
+                if (end <= unfiltered.length) {
+                  overflowIdx += PAGE_SIZE;
+                  timeout = setTimeout(updateOverflow, 10);
                 }
+              });
+            };
+            timeout = setTimeout(updateOverflow, 20);
+
+            (this.resizeObserver || new ResizeObserver(entries => {
+              if (entries[0].contentRect.height == 0) {
+                resetOverflow();
+              } else {
+                updateOverflow();
               }
-            },
-            true
-          );
-          root.addEventListener("click", this, true);
-          root.addEventListener("change", this, true);
-          root.wiredBy = this;
-
-          if (!UA.mobile) {
-            return;
+            })).observe(this.list);
           }
-          const siteWidth = root.querySelector(".site")?.offsetWidth + 12;
-          const viewportWidth = document.documentElement.clientWidth;
-          if (viewportWidth < siteWidth) {
-            document.documentElement.style.zoom = viewportWidth / siteWidth;
+          parentNode.appendChild(this.fragment);
+          resolve();
+          const root = parentNode.querySelector(".sites");
+          if (!root.wiredBy) {
+            root.addEventListener("keydown", (e) => this._keyNavHandler(e), true);
+            root.addEventListener(
+              "keyup",
+              (e) => {
+                // we use a keyup listener to open the customizer from other presets
+                // because space repetition may lead to unintendedly "click" on the
+                // first cap checkbox once focused from keydown
+                switch (e.code) {
+                  case "Space": {
+                    let focused = document.activeElement;
+                    if (focused.matches(".site .preset")) {
+                      focused
+                        .closest(".site")
+                        .querySelector(".preset[value='CUSTOM']")
+                        .click();
+                      e.preventDefault();
+                    }
+                  }
+                }
+              },
+              true
+            );
+            root.addEventListener("click", this, true);
+            root.addEventListener("change", this, true);
+            root.wiredBy = this;
+            if (!UA.mobile) {
+              return;
+            }
+            const siteWidth = root.querySelector(".site")?.offsetWidth + 12;
+            const viewportWidth = document.documentElement.clientWidth;
+            if (viewportWidth < siteWidth) {
+              document.documentElement.style.zoom = viewportWidth / siteWidth;
+            }
           }
-        }
+        });
       });
     }