Merge pull request #2766 from matrix-org/bwindels/scrolling

Scroll investigation changes

src/components/structures/MessagePanel.js

@@ -387,7 +387,7 @@ module.exports = React.createClass({
 
                 ret.push(<MemberEventListSummary key={key}
                     events={summarisedEvents}
-                    onToggle={this._onWidgetLoad} // Update scroll state
+                    onToggle={this._onHeightChanged} // Update scroll state
                     startExpanded={highlightInMels}
                 >
                         { eventTiles }
@@ -517,7 +517,7 @@ module.exports = React.createClass({
                         data-scroll-tokens={scrollToken}>
                     <EventTile mxEvent={mxEv} continuation={continuation}
                         isRedacted={mxEv.isRedacted()}
-                        onWidgetLoad={this._onWidgetLoad}
+                        onHeightChanged={this._onHeightChanged}
                         readReceipts={readReceipts}
                         readReceiptMap={this._readReceiptMap}
                         showUrlPreview={this.props.showUrlPreview}
@@ -625,7 +625,7 @@ module.exports = React.createClass({
 
     // once dynamic content in the events load, make the scrollPanel check the
     // scroll offsets.
-    _onWidgetLoad: function() {
+    _onHeightChanged: function() {
         const scrollPanel = this.refs.scrollPanel;
         if (scrollPanel) {
             scrollPanel.forceUpdate();

src/components/structures/RoomView.js

@@ -1186,7 +1186,7 @@ module.exports = React.createClass({
 
         // once dynamic content in the search results load, make the scrollPanel check
         // the scroll offsets.
-        const onWidgetLoad = () => {
+        const onHeightChanged = () => {
             const scrollPanel = this.refs.searchResultsPanel;
             if (scrollPanel) {
                 scrollPanel.checkScroll();
@@ -1231,7 +1231,7 @@ module.exports = React.createClass({
                      searchHighlights={this.state.searchHighlights}
                      resultLink={resultLink}
                      permalinkCreator={this.state.permalinkCreator}
-                     onWidgetLoad={onWidgetLoad} />);
+                     onHeightChanged={onHeightChanged} />);
         }
         return ret;
     },

src/components/structures/ScrollPanel.js

@@ -79,26 +79,6 @@ if (DEBUG_SCROLL) {
  * offset as normal.
  */
 
-
-function createTimelineResizeDetector(scrollNode, itemlist, callback) {
-    if (typeof ResizeObserver !== "undefined") {
-        const ro = new ResizeObserver(callback);
-        ro.observe(itemlist);
-        return ro;
-    } else if (typeof IntersectionObserver !== "undefined") {
-        const threshold = [];
-        for (let i = 0; i <= 1000; ++i) {
-            threshold.push(i / 1000);
-        }
-        const io = new IntersectionObserver(
-            callback,
-            {root: scrollNode, threshold},
-        );
-        io.observe(itemlist);
-        return io;
-    }
-}
-
 module.exports = React.createClass({
     displayName: 'ScrollPanel',
 
@@ -181,12 +161,6 @@ module.exports = React.createClass({
 
     componentDidMount: function() {
         this.checkScroll();
-
-        this._timelineSizeObserver = createTimelineResizeDetector(
-            this._getScrollNode(),
-            this.refs.itemlist,
-            () => { this._restoreSavedScrollState(); },
-        );
     },
 
     componentDidUpdate: function() {
@@ -204,10 +178,6 @@ module.exports = React.createClass({
         //
         // (We could use isMounted(), but facebook have deprecated that.)
         this.unmounted = true;
-        if (this._timelineSizeObserver) {
-            this._timelineSizeObserver.disconnect();
-            this._timelineSizeObserver = null;
-        }
     },
 
     onScroll: function(ev) {
@@ -601,16 +571,17 @@ module.exports = React.createClass({
         }
 
         const scrollNode = this._getScrollNode();
-        const scrollBottom = scrollNode.scrollTop + scrollNode.clientHeight;
-
+        const scrollTop = scrollNode.scrollTop;
+        const viewportBottom = scrollTop + scrollNode.clientHeight;
         const nodeBottom = node.offsetTop + node.clientHeight;
-        const scrollDelta = nodeBottom + pixelOffset - scrollBottom;
+        const intendedViewportBottom = nodeBottom + pixelOffset;
+        const scrollDelta = intendedViewportBottom - viewportBottom;
 
         debuglog("ScrollPanel: scrolling to token '" + scrollToken + "'+" +
                  pixelOffset + " (delta: "+scrollDelta+")");
 
-        if (scrollDelta != 0) {
-            this._setScrollTop(scrollNode.scrollTop + scrollDelta);
+        if (scrollDelta !== 0) {
+            this._setScrollTop(scrollTop + scrollDelta);
         }
     },
 
@@ -622,7 +593,7 @@ module.exports = React.createClass({
         }
 
         const scrollNode = this._getScrollNode();
-        const scrollBottom = scrollNode.scrollTop + scrollNode.clientHeight;
+        const viewportBottom = scrollNode.scrollTop + scrollNode.clientHeight;
 
         const itemlist = this.refs.itemlist;
         const messages = itemlist.children;
@@ -636,7 +607,7 @@ module.exports = React.createClass({
             node = messages[i];
             // break at the first message (coming from the bottom)
             // that has it's offsetTop above the bottom of the viewport.
-            if (node.offsetTop < scrollBottom) {
+            if (node.offsetTop < viewportBottom) {
                 // Use this node as the scrollToken
                 break;
             }
@@ -652,7 +623,7 @@ module.exports = React.createClass({
         this.scrollState = {
             stuckAtBottom: false,
             trackedScrollToken: node.dataset.scrollTokens.split(',')[0],
-            pixelOffset: scrollBottom - nodeBottom,
+            pixelOffset: viewportBottom - nodeBottom,
         };
     },