hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

add debug logging to autoscroll and experiment with using microtasks

Browse source
This commit is contained in:
hippoz 2022-09-20 01:56:34 +03:00
parent 10d25445c5
commit 5aaaf56380
No known key found for this signature in database
GPG key ID: 7C52899193467641
2 changed files with 24 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
frontend/src/components/Messages.svelte
View file

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

1
frontend/src/storage.js
View file

@ -7,6 +7,7 @@ const defaults = {
"state:openChannelId": -1, "state:openChannelId": -1,
"log:Gateway": false, "log:Gateway": false,
"log:Store": false, "log:Store": false,
"log:Messages": false,
"ui:stateful:presistSelectedChannel": true, "ui:stateful:presistSelectedChannel": true,
"ui:showSidebarToggle": false, "ui:showSidebarToggle": false,
"ui:alwaysUseMobileChatBar": false, "ui:alwaysUseMobileChatBar": false,