From 5aaaf56380acf2e4a13607088bad9cc1859935c1 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Tue, 20 Sep 2022 01:56:34 +0300
Subject: [PATCH] add debug logging to autoscroll and experiment with using
 microtasks

---
 frontend/src/components/Messages.svelte | 34 +++++++++++++++++--------
 frontend/src/storage.js                 |  1 +
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Messages.svelte b/frontend/src/components/Messages.svelte
index 8276a39..bd1638f 100644
--- a/frontend/src/components/Messages.svelte
+++ b/frontend/src/components/Messages.svelte
@@ -1,9 +1,11 @@
 <script>
     import { afterUpdate } from "svelte";
-    import { getItem } from "../storage.js";
+    import logger from "../logging.js";
     import { messagesStoreProvider, smallViewport } from "../stores.js";
     import Message from "./Message.svelte";
 
+    const messagesLog = logger("Messages");
+
     export let channelId;
     let scrollTarget;
     let scrollAnchor;
@@ -14,17 +16,22 @@
     $: messages = messagesStoreProvider.getStore(channelId);
 
     afterUpdate(() => {
-        // hacky way to preserve scroll position when messages are pushed back
-        if (lastScrollHeight) {
-            scrollTarget.scrollTop = scrollTarget.scrollHeight - lastScrollHeight;
-            lastScrollHeight = null;
-            return;
-        }
-        if (shouldAutoscroll && scrollAnchor) {
-            queueMicrotask(() => {
+        messagesLog("[afterUpdate] reached, creating microtask...");
+        queueMicrotask(() => {
+            messagesLog("[afterUpdate] reached microtask");
+
+            // hacky way to preserve scroll position when messages are pushed back
+            if (lastScrollHeight) {
+                messagesLog("[afterUpdate] restoring scroll height...");
+                scrollTarget.scrollTop = scrollTarget.scrollHeight - lastScrollHeight;
+                lastScrollHeight = null;
+                return;
+            }
+            if (shouldAutoscroll && scrollAnchor) {
+                messagesLog("[afterUpdate] performing autoscroll...");
                 scrollAnchor.scrollIntoView(false);
-            });
-        }
+            }
+        });
     });
 
     const onScroll = (e) => {
@@ -33,10 +40,13 @@
             messages.setIsCollectingOldMessages(true);
             shouldAutoscroll = true;
             isScrolledToBottom = true;
+            messagesLog("[onScroll] user is scrolled to bottom, enabling autoscroll...");
         } else {
             shouldAutoscroll = false;
             isScrolledToBottom = false;
+            messagesLog("[onScroll] user is no longer scrolled to bottom, disabling autoscroll...");
             if (scrollTop === 0) {
+                messagesLog("[onScroll] user scrolled to top, loading older messages...");
                 // load older messages if the user scrolls to the top.
                 // save the current scroll height if the server returned any messages,
                 // before commiting them to the store. this is to provide the jank scroll height
@@ -55,8 +65,10 @@
         // showSidebar is false on small viewports
         // scrolling to bottom when the virtual keyboard pops up does not work on chromium purely based on isScrolledToBottom for some reason
         if (isScrolledToBottom || $smallViewport) {
+            messagesLog("[windowDidResize] window resized, queueing microtask to scroll to bottom...");
             queueMicrotask(() => {
                 scrollAnchor.scrollIntoView(false);
+                messagesLog("[windowDidResize] scroll to bottom microtask finished.");
             });
         }
     };
diff --git a/frontend/src/storage.js b/frontend/src/storage.js
index 2e21413..2de785b 100644
--- a/frontend/src/storage.js
+++ b/frontend/src/storage.js
@@ -7,6 +7,7 @@ const defaults = {
     "state:openChannelId": -1,
     "log:Gateway": false,
     "log:Store": false,
+    "log:Messages": false,
     "ui:stateful:presistSelectedChannel": true,
     "ui:showSidebarToggle": false,
     "ui:alwaysUseMobileChatBar": false,