fix scrolling jumping to bottom on new messages

stylesheets/_session_constants.scss

@@ -187,7 +187,6 @@ $session-subtle-factor: 0.6;
 // Default Components
 $session-search-input-height: 34px;
 $main-view-header-height: 63px;
-$session-conversation-header-height: 60px;
 $session-left-pane-width: 300px;
 
 // Various Components

ts/components/session/conversation/SessionMessagesListContainer.tsx

@@ -65,12 +65,31 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
     }
   }
 
-  public componentDidUpdate(prevProps: Props) {
+  public componentDidUpdate(
+    prevProps: Props,
+    _prevState: any,
+    snapShot: { fakeScrollTop: number; realScrollTop: number; scrollHeight: number }
+  ) {
+    // this was hard to write, it should be hard to read
+    // just make sure you don't remove that as a bug in chrome makes the column-reverse do bad things
+    // https://bugs.chromium.org/p/chromium/issues/detail?id=1189195&q=column-reverse&can=2#makechanges
+    const currentRef = this.props.messageContainerRef.current;
     const isSameConvo = prevProps.conversationKey === this.props.conversationKey;
-    if (
-      !isSameConvo ||
-      (prevProps.messagesProps.length === 0 && this.props.messagesProps.length !== 0)
-    ) {
+    const prevMsgLength = prevProps.messagesProps.length;
+    const newMsgLength = this.props.messagesProps.length;
+
+    const prevFirstMesssageId = prevProps.messagesProps[0]?.propsForMessage.id;
+    const newFirstMesssageId = this.props.messagesProps[0]?.propsForMessage.id;
+    const messageAddedWasMoreRecentOne = prevFirstMesssageId !== newFirstMesssageId;
+
+    if (isSameConvo && snapShot?.realScrollTop && prevMsgLength !== newMsgLength) {
+      if (messageAddedWasMoreRecentOne) {
+        currentRef.scrollTop = -(currentRef.scrollHeight - snapShot.realScrollTop);
+      } else {
+        currentRef.scrollTop = snapShot.fakeScrollTop;
+      }
+    }
+    if (!isSameConvo || (prevMsgLength === 0 && newMsgLength !== 0)) {
       this.setupTimeoutResetQuotedHighlightedMessage(this.props.animateQuotedMessageId);
 
       // displayed conversation changed. We have a bit of cleaning to do here
@@ -78,6 +97,23 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
     }
   }
 
+  public getSnapshotBeforeUpdate() {
+    const messageContainer = this.props.messageContainerRef.current;
+
+    const scrollTop = messageContainer.scrollTop;
+    const scrollHeight = messageContainer.scrollHeight;
+
+    // as we use column-reverse for displaying message list
+    // the top is < 0
+    // tslint:disable-next-line: restrict-plus-operands
+    const realScrollTop = scrollHeight + scrollTop;
+    return {
+      realScrollTop,
+      fakeScrollTop: scrollTop,
+      scrollHeight: scrollHeight,
+    };
+  }
+
   public render() {
     const { conversationKey, conversation } = this.props;
 

ts/receiver/queuedJob.ts

@@ -384,7 +384,9 @@ export async function handleMessageJob(
   source: string
 ) {
   window?.log?.info(
-    `Starting handleDataMessage for message ${message.idForLogging()} in conversation ${conversation.idForLogging()}`
+    `Starting handleDataMessage for message ${message.idForLogging()}, ${message.get(
+      'serverTimestamp'
+    ) || message.get('timestamp')} in conversation ${conversation.idForLogging()}`
   );
 
   try {