From 04ef0262af6f77b898d307d87a49488afda0059a Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 20 Apr 2016 22:21:07 +0100
Subject: [PATCH 01/13] Various fixes to the velociraptor

* handle having a single child, rather than an array of children

* Correctly animate children which are added at the same time as the
  Velociraptor, rather than added afterwards

* Set the child to hidden at the end of the initial animation, if that is
  required by the style property.
---
 src/Velociraptor.js | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/Velociraptor.js b/src/Velociraptor.js
index 066b1e2d05..a3e013a2b4 100644
--- a/src/Velociraptor.js
+++ b/src/Velociraptor.js
@@ -13,25 +13,24 @@ module.exports = React.createClass({
     displayName: 'Velociraptor',
 
     propTypes: {
-        children: React.PropTypes.array,
+        // either a list of child nodes, or a single child.
+        children: React.PropTypes.any,
+
+        // optional transition information for changing existing children
         transition: React.PropTypes.object,
-        container: React.PropTypes.string
     },
 
     componentWillMount: function() {
         this.children = {};
         this.nodes = {};
-        var self = this;
-        React.Children.map(this.props.children, function(c) {
-            self.children[c.key] = c;
-        });
+        this.componentWillReceiveProps(this.props);
     },
 
     componentWillReceiveProps: function(nextProps) {
         var self = this;
         var oldChildren = this.children;
         this.children = {};
-        React.Children.map(nextProps.children, function(c) {
+        React.Children.toArray(nextProps.children).forEach(function(c) {
             if (oldChildren[c.key]) {
                 var old = oldChildren[c.key];
                 var oldNode = ReactDom.findDOMNode(self.nodes[old.key]);
@@ -92,22 +91,23 @@ module.exports = React.createClass({
                 //console.log("start: "+JSON.stringify(startStyles[i]));
             }
             // and then we animate to the resting state
-            Velocity(domNode, node.props._restingStyle, transitionOpts[i-1]);
+            Velocity(domNode, node.props._restingStyle,
+                     transitionOpts[i-1])
+            .then(() => {
+                // once we've reached the resting state, hide the element if
+                // appropriate
+                domNode.style.visibility = node.props._restingStyle.visibility;
+            });
+
             //console.log("enter: "+JSON.stringify(node.props._restingStyle));
         }
         this.nodes[k] = node;
     },
 
     render: function() {
-        var self = this;
-        var childList = Object.keys(this.children).map(function(k) {
-            return React.cloneElement(self.children[k], {
-                ref: self.collectNode.bind(self, self.children[k].key)
-            });
-        });
         return (
             <span>
-                {childList}
+                {Object.values(this.children)}
             </span>
         );
     },

From fa34dee09179c0fd08a26ea8e5f13b7a19d1c7e3 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 20 Apr 2016 23:03:05 +0100
Subject: [PATCH 02/13] Rewrite Read-receipt animation

... hopefully fixing https://github.com/vector-im/vector-web/issues/1437 in the
process.

The idea here is that, when we remove a read-receipt from the DOM, we stash its
position in a map. Then, when the read-receipt appears again attached to
another event, we know where to start the transition.
---
 src/component-index.js                        |   3 +-
 src/components/structures/MessagePanel.js     |   5 +
 src/components/views/rooms/EventTile.js       |  91 ++++------
 .../views/rooms/ReadReceiptMarker.js          | 166 ++++++++++++++++++
 4 files changed, 208 insertions(+), 57 deletions(-)
 create mode 100644 src/components/views/rooms/ReadReceiptMarker.js

diff --git a/src/component-index.js b/src/component-index.js
index 0cb7e257a0..967cc5d685 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -64,11 +64,11 @@ module.exports.components['views.login.LoginHeader'] = require('./components/vie
 module.exports.components['views.login.PasswordLogin'] = require('./components/views/login/PasswordLogin');
 module.exports.components['views.login.RegistrationForm'] = require('./components/views/login/RegistrationForm');
 module.exports.components['views.login.ServerConfig'] = require('./components/views/login/ServerConfig');
+module.exports.components['views.messages.MAudioBody'] = require('./components/views/messages/MAudioBody');
 module.exports.components['views.messages.MFileBody'] = require('./components/views/messages/MFileBody');
 module.exports.components['views.messages.MImageBody'] = require('./components/views/messages/MImageBody');
 module.exports.components['views.messages.MVideoBody'] = require('./components/views/messages/MVideoBody');
 module.exports.components['views.messages.MessageEvent'] = require('./components/views/messages/MessageEvent');
-module.exports.components['views.messages.MAudioBody'] = require('./components/views/messages/MAudioBody');
 module.exports.components['views.messages.TextualBody'] = require('./components/views/messages/TextualBody');
 module.exports.components['views.messages.TextualEvent'] = require('./components/views/messages/TextualEvent');
 module.exports.components['views.messages.UnknownBody'] = require('./components/views/messages/UnknownBody');
@@ -85,6 +85,7 @@ module.exports.components['views.rooms.MemberTile'] = require('./components/view
 module.exports.components['views.rooms.MessageComposer'] = require('./components/views/rooms/MessageComposer');
 module.exports.components['views.rooms.MessageComposerInput'] = require('./components/views/rooms/MessageComposerInput');
 module.exports.components['views.rooms.PresenceLabel'] = require('./components/views/rooms/PresenceLabel');
+module.exports.components['views.rooms.ReadReceiptMarker'] = require('./components/views/rooms/ReadReceiptMarker');
 module.exports.components['views.rooms.RoomHeader'] = require('./components/views/rooms/RoomHeader');
 module.exports.components['views.rooms.RoomList'] = require('./components/views/rooms/RoomList');
 module.exports.components['views.rooms.RoomNameEditor'] = require('./components/views/rooms/RoomNameEditor');
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index defc8151a9..49f4783eaa 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -81,6 +81,10 @@ module.exports = React.createClass({
         // the event after which we are showing a disappearing read marker
         // animation
         this.currentGhostEventId = null;
+
+        // opaque readreceipt info for each userId; used by ReadReceiptMarker
+        // to manage its animations
+        this._readReceiptMap = {};
     },
 
     /* get the DOM node representing the given event */
@@ -346,6 +350,7 @@ module.exports = React.createClass({
                     <EventTile mxEvent={mxEv} continuation={continuation}
                         onWidgetLoad={this._onWidgetLoad}
                         readReceipts={readReceipts}
+                        readReceiptMap={this._readReceiptMap}
                         eventSendStatus={mxEv.status}
                         last={last} isSelectedEvent={highlight}/>
                 </li>
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 3fe6a08f97..5c70c9da10 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -17,7 +17,6 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
-var ReactDom = require('react-dom');
 var classNames = require("classnames");
 
 var sdk = require('../../../index');
@@ -25,8 +24,6 @@ var MatrixClientPeg = require('../../../MatrixClientPeg')
 var TextForEvent = require('../../../TextForEvent');
 
 var ContextualMenu = require('../../../ContextualMenu');
-var Velociraptor = require('../../../Velociraptor');
-require('../../../VelocityBounce');
 var dispatcher = require("../../../dispatcher");
 
 var ObjectUtils = require('../../../ObjectUtils');
@@ -113,6 +110,12 @@ module.exports = React.createClass({
         /* a list of Room Members whose read-receipts we should show */
         readReceipts: React.PropTypes.arrayOf(React.PropTypes.object),
 
+        /* opaque readreceipt info for each userId; used by ReadReceiptMarker
+         * to manage its animations. Should be an empty object when the room
+         * first loads
+         */
+        readReceiptMap: React.PropTypes.object,
+
         /* the status of this event - ie, mxEvent.status. Denormalised to here so
          * that we can tell when it changes. */
         eventSendStatus: React.PropTypes.string,
@@ -122,6 +125,15 @@ module.exports = React.createClass({
         return {menu: false, allReadAvatars: false};
     },
 
+    componentWillMount: function() {
+        // don't do RR animations until we are mounted
+        this._suppressReadReceiptAnimation = true;
+    },
+
+    componentDidMount: function() {
+        this._suppressReadReceiptAnimation = false;
+    },
+
     shouldComponentUpdate: function (nextProps, nextState) {
         if (!ObjectUtils.shallowEqual(this.state, nextState)) {
             return true;
@@ -217,80 +229,53 @@ module.exports = React.createClass({
     },
 
     getReadAvatars: function() {
+        var ReadReceiptMarker = sdk.getComponent('rooms.ReadReceiptMarker');
         var avatars = [];
-        var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
 
         var left = 0;
 
-        var reorderTransitionOpts = {
-            duration: 100,
-            easing: 'easeOut'
-        };
-
         var receipts = this.props.readReceipts || [];
         for (var i = 0; i < receipts.length; ++i) {
             var member = receipts[i];
 
-            // Using react refs here would mean both getting Velociraptor to expose
-            // them and making them scoped to the whole RoomView. Not impossible, but
-            // getElementById seems simpler at least for a first cut.
-            var oldAvatarDomNode = document.getElementById('mx_readAvatar'+member.userId);
-            var startStyles = [];
-            var enterTransitionOpts = [];
-            var oldNodeTop = -15; // For avatars that weren't on screen, act as if they were just off the top
-            if (oldAvatarDomNode) {
-                oldNodeTop = oldAvatarDomNode.getBoundingClientRect().top;
+            var hidden = true;
+            if ((i < MAX_READ_AVATARS) || this.state.allReadAvatars) {
+                hidden = false;
             }
 
-            if (this.readAvatarNode) {
-                var topOffset = oldNodeTop - this.readAvatarNode.getBoundingClientRect().top;
+            var userId = member.userId;
+            var readReceiptInfo;
 
-                if (oldAvatarDomNode && oldAvatarDomNode.style.left !== '0px') {
-                    var leftOffset = oldAvatarDomNode.style.left;
-                    // start at the old height and in the old h pos
-                    startStyles.push({ top: topOffset, left: leftOffset });
-                    enterTransitionOpts.push(reorderTransitionOpts);
+            if (this.props.readReceiptMap) {
+                readReceiptInfo = this.props.readReceiptMap[userId];
+                if (!readReceiptInfo) {
+                    readReceiptInfo = {};
+                    this.props.readReceiptMap[userId] = readReceiptInfo;
                 }
-
-                // then shift to the rightmost column,
-                // and then it will drop down to its resting position
-                startStyles.push({ top: topOffset, left: '0px' });
-                enterTransitionOpts.push({
-                    duration: bounce ? Math.min(Math.log(Math.abs(topOffset)) * 200, 3000) : 300,
-                    easing: bounce ? 'easeOutBounce' : 'easeOutCubic',
-                });
             }
 
-            var style = {
-                left: left+'px',
-                top: '0px',
-                visibility: ((i < MAX_READ_AVATARS) || this.state.allReadAvatars) ? 'visible' : 'hidden'
-            };
-
             //console.log("i = " + i + ", MAX_READ_AVATARS = " + MAX_READ_AVATARS + ", allReadAvatars = " + this.state.allReadAvatars + " visibility = " + style.visibility);
 
             // add to the start so the most recent is on the end (ie. ends up rightmost)
             avatars.unshift(
-                <MemberAvatar key={member.userId} member={member}
-                    width={14} height={14} resizeMethod="crop"
-                    style={style}
-                    startStyle={startStyles}
-                    enterTransitionOpts={enterTransitionOpts}
-                    id={'mx_readAvatar'+member.userId}
+                <ReadReceiptMarker key={userId} member={member}
+                    leftOffset={left} hidden={hidden}
+                    readReceiptInfo={readReceiptInfo}
+                    suppressAnimation={this._suppressReadReceiptAnimation}
                     onClick={this.toggleAllReadAvatars}
                 />
             );
+
             // TODO: we keep the extra read avatars in the dom to make animation simpler
             // we could optimise this to reduce the dom size.
-            if (i < MAX_READ_AVATARS - 1 || this.state.allReadAvatars) { // XXX: where does this -1 come from? is it to make the max'th avatar animate properly?
+            if (!hidden) {
                 left -= 15;
             }
         }
         var editButton;
+        var remText;
         if (!this.state.allReadAvatars) {
             var remainder = receipts.length - MAX_READ_AVATARS;
-            var remText;
-            if (i >= MAX_READ_AVATARS - 1) left -= 15;
             if (remainder > 0) {
                 remText = <span className="mx_EventTile_readAvatarRemainder"
                     onClick={this.toggleAllReadAvatars}
@@ -305,19 +290,13 @@ module.exports = React.createClass({
             );
         }
 
-        return <span className="mx_EventTile_readAvatars" ref={this.collectReadAvatarNode}>
+        return <span className="mx_EventTile_readAvatars">
             { editButton }
             { remText }
-            <Velociraptor transition={ reorderTransitionOpts }>
-                { avatars }
-            </Velociraptor>
+            { avatars }
         </span>;
     },
 
-    collectReadAvatarNode: function(node) {
-        this.readAvatarNode = ReactDom.findDOMNode(node);
-    },
-
     onMemberAvatarClick: function(event) {
         dispatcher.dispatch({
             action: 'view_user',
diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js
new file mode 100644
index 0000000000..bc433b8bd0
--- /dev/null
+++ b/src/components/views/rooms/ReadReceiptMarker.js
@@ -0,0 +1,166 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+var sdk = require('../../../index');
+
+var Velociraptor = require('../../../Velociraptor');
+require('../../../VelocityBounce');
+
+var bounce = false;
+try {
+    if (global.localStorage) {
+        bounce = global.localStorage.getItem('avatar_bounce') == 'true';
+    }
+} catch (e) {
+}
+
+module.exports = React.createClass({
+    displayName: 'ReadReceiptMarker',
+
+    propTypes: {
+        // the RoomMember to show the RR for
+        member: React.PropTypes.object.isRequired,
+
+        // number of pixels to offset the avatar from the right of its parent;
+        // typically a negative value.
+        leftOffset: React.PropTypes.number,
+
+        // true to hide the avatar (it will still be animated)
+        hidden: React.PropTypes.bool,
+
+        // don't animate this RR into position
+        suppressAnimation: React.PropTypes.bool,
+
+        // an opaque object for storing information about this user's RR in
+        // this room
+        readReceiptInfo: React.PropTypes.object,
+
+        // callback for clicks on this RR
+        onClick: React.PropTypes.func,
+    },
+
+    getDefaultProps: function() {
+        return {
+            leftOffset: 0,
+        }
+    },
+
+    getInitialState: function() {
+        // if we are going to animate the RR, we don't show it on first render,
+        // and instead just add a placeholder to the DOM; once we've been
+        // mounted, we start an animation which moves the RR from its old
+        // position.
+        return {
+            suppressDisplay: !this.props.suppressAnimation,
+        }
+    },
+
+    componentWillUnmount: function() {
+        // before we remove the rr, store its location in the map, so that if
+        // it reappears, it can be animated from the right place.
+        var rrInfo = this.props.readReceiptInfo;
+        if (!rrInfo) {
+            return;
+        }
+
+        var avatarNode = ReactDOM.findDOMNode(this);
+        rrInfo.top = avatarNode.offsetTop;
+        rrInfo.left = avatarNode.offsetLeft;
+        rrInfo.parent = avatarNode.offsetParent;
+    },
+
+    componentDidMount: function() {
+        if (!this.state.suppressDisplay) {
+            // we've already done our display - nothing more to do.
+            return;
+        }
+
+        // treat new RRs as though they were off the top of the screen
+        var oldTop = -15;
+
+        var oldInfo = this.props.readReceiptInfo;
+        if (oldInfo && oldInfo.parent) {
+            oldTop = oldInfo.top + oldInfo.parent.getBoundingClientRect().top;
+        }
+
+        var newElement = ReactDOM.findDOMNode(this);
+        var startTopOffset = oldTop - newElement.offsetParent.getBoundingClientRect().top;
+
+        var startStyles = [];
+        var enterTransitionOpts = [];
+
+        if (oldInfo && oldInfo.left) {
+            // start at the old height and in the old h pos
+
+            var leftOffset = oldInfo.left;
+            startStyles.push({ top: startTopOffset+"px",
+                               left: oldInfo.left+"px" });
+
+            var reorderTransitionOpts = {
+                duration: 100,
+                easing: 'easeOut'
+            };
+
+            enterTransitionOpts.push(reorderTransitionOpts);
+        }
+
+        // then shift to the rightmost column,
+        // and then it will drop down to its resting position
+        startStyles.push({ top: startTopOffset+'px', left: '0px' });
+        enterTransitionOpts.push({
+            duration: bounce ? Math.min(Math.log(Math.abs(startTopOffset)) * 200, 3000) : 300,
+            easing: bounce ? 'easeOutBounce' : 'easeOutCubic',
+        });
+
+        this.setState({
+            suppressDisplay: false,
+            startStyles: startStyles,
+            enterTransitionOpts: enterTransitionOpts,
+        });
+    },
+
+
+    render: function() {
+        var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+        if (this.state.suppressDisplay) {
+            return <div/>;
+        }
+
+        var style = {
+            left: this.props.leftOffset+'px',
+            top: '0px',
+            visibility: this.props.hidden ? 'hidden' : 'visible',
+        };
+
+        return (
+            <Velociraptor>
+                <MemberAvatar
+                    member={this.props.member}
+                    width={14} height={14} resizeMethod="crop"
+                    style={style}
+                    startStyle={this.state.startStyles}
+                    enterTransitionOpts={this.state.enterTransitionOpts}
+                    onClick={this.props.onClick}
+                />
+            </Velociraptor>
+        );
+    },
+});

From e5e9a3819e1a909cfe67f9d4e9be164418a678b9 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 21 Apr 2016 08:09:40 +0100
Subject: [PATCH 03/13] Load babel-polyfill in tests

Object.values() isn't available natively, so use polyfill for it.
---
 package.json        | 1 +
 test/skinned-sdk.js | 8 ++++++++
 2 files changed, 9 insertions(+)

diff --git a/package.json b/package.json
index c956560739..731ae6cfbb 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "babel": "^5.8.23",
     "babel-core": "^5.8.38",
     "babel-loader": "^5.4.0",
+    "babel-polyfill": "^6.5.0",
     "expect": "^1.16.0",
     "json-loader": "^0.5.3",
     "karma": "^0.13.22",
diff --git a/test/skinned-sdk.js b/test/skinned-sdk.js
index 5d3526b797..869902dcf6 100644
--- a/test/skinned-sdk.js
+++ b/test/skinned-sdk.js
@@ -5,6 +5,14 @@
  * application to provide
  */
 
+/* this is a convenient place to ensure we load the compatibility libraries we expect our
+ * app to provide
+ */
+
+// for ES6 stuff like startsWith() and Object.values() that babel doesn't do by
+// default
+require('babel-polyfill');
+
 var sdk = require("../src/index");
 
 var skin = require('../src/component-index.js');

From f09861794d41c62238a9dbbeea4ffcc171114d18 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 21 Apr 2016 14:14:08 +0100
Subject: [PATCH 04/13] Avoid having react interface methods call each other

Factor out the common bits of componentWillMount and componentWillReceiveProps
to a common function.
---
 src/Velociraptor.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/Velociraptor.js b/src/Velociraptor.js
index a3e013a2b4..ad12d1323b 100644
--- a/src/Velociraptor.js
+++ b/src/Velociraptor.js
@@ -21,16 +21,22 @@ module.exports = React.createClass({
     },
 
     componentWillMount: function() {
-        this.children = {};
         this.nodes = {};
-        this.componentWillReceiveProps(this.props);
+        this._updateChildren(this.props.children);
     },
 
     componentWillReceiveProps: function(nextProps) {
+        this._updateChildren(nextProps.children);
+    },
+
+    /**
+     * update `this.children` according to the new list of children given
+     */
+    _updateChildren: function(newChildren) {
         var self = this;
-        var oldChildren = this.children;
+        var oldChildren = this.children || {};
         this.children = {};
-        React.Children.toArray(nextProps.children).forEach(function(c) {
+        React.Children.toArray(newChildren).forEach(function(c) {
             if (oldChildren[c.key]) {
                 var old = oldChildren[c.key];
                 var oldNode = ReactDom.findDOMNode(self.nodes[old.key]);

From 2f435f483628b7887fe9970b092087b0c3c5c475 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 21 Apr 2016 13:37:31 +0100
Subject: [PATCH 05/13] Fix bug which stopped us scrolling down after we
 scrolled up

Make sure that, if we scroll up enough to move the timelinewindow away from the
end of the timeline, we reset the canForwardPaginate flag.
---
 src/components/structures/TimelinePanel.js    | 18 ++++-
 .../structures/TimelinePanel-test.js          | 68 +++++++++++++++++++
 test/test-utils.js                            |  8 ++-
 3 files changed, 89 insertions(+), 5 deletions(-)

diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index 5367b4208a..1f7c98b0b1 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -241,11 +241,25 @@ var TimelinePanel = React.createClass({
             if (this.unmounted) { return; }
 
             debuglog("TimelinePanel: paginate complete backwards:"+backwards+"; success:"+r);
-            this.setState({
+
+            var newState = {
                 [paginatingKey]: false,
                 [canPaginateKey]: r,
                 events: this._getEvents(),
-            });
+            };
+
+            // moving the window in this direction may mean that we can now
+            // paginate in the other where we previously could not.
+            var otherDirection = backwards ? EventTimeline.FORWARDS : EventTimeline.BACKWARDS;
+            var canPaginateOtherWayKey = backwards ? 'canForwardPaginate' : 'canBackPaginate';
+            if (!this.state[canPaginateOtherWayKey] &&
+                    this._timelineWindow.canPaginate(otherDirection)) {
+                debuglog('TimelinePanel: can now', otherDirection, 'paginate again');
+                newState[canPaginateOtherWayKey] = true;
+            }
+
+            this.setState(newState);
+
             return r;
         });
     },
diff --git a/test/components/structures/TimelinePanel-test.js b/test/components/structures/TimelinePanel-test.js
index 671d5c7774..fe916f0f5d 100644
--- a/test/components/structures/TimelinePanel-test.js
+++ b/test/components/structures/TimelinePanel-test.js
@@ -204,4 +204,72 @@ describe('TimelinePanel', function() {
             }, 0);
         }, 0);
     });
+
+    it("should let you scroll down again after you've scrolled up", function(done) {
+        var N_EVENTS = 600;
+
+        // sadly, loading all those events takes a while
+        this.timeout(N_EVENTS * 20);
+
+        // client.getRoom is called a /lot/ in this test, so replace
+        // sinon's spy with a fast noop.
+        client.getRoom = function(id) { return null; };
+
+        // fill the timeline with lots of events
+        for (var i = 0; i < N_EVENTS; i++) {
+            timeline.addEvent(mkMessage());
+        }
+
+        var scrollDefer;
+        var panel = ReactDOM.render(
+            <TimelinePanel room={room} onScroll={()=>{scrollDefer.resolve()}} />,
+            parentDiv
+        );
+
+        var messagePanel = ReactTestUtils.findRenderedComponentWithType(
+            panel, sdk.getComponent('structures.MessagePanel'));
+        var scrollingDiv = ReactTestUtils.findRenderedDOMComponentWithClass(
+            panel, "gm-scroll-view");
+
+        // helper function which will return a promise which resolves when
+        // the TimelinePanel fires a scroll event
+        var awaitScroll = function() {
+            scrollDefer = q.defer();
+            return scrollDefer.promise;
+        };
+
+        function backPaginate() {
+            scrollingDiv.scrollTop = 0;
+            return awaitScroll().then(() => {
+                if(scrollingDiv.scrollTop > 0) {
+                    // need to go further
+                    return backPaginate();
+                }
+
+                // hopefully, we got to the start of the timeline
+                expect(messagePanel.props.backPaginating).toBe(false);
+            });
+        }
+
+        // let the first round of pagination finish off
+        awaitScroll().then(() => {
+            // we should now have loaded the first few events
+            expect(messagePanel.props.backPaginating).toBe(false);
+            expect(messagePanel.props.suppressFirstDateSeparator).toBe(true);
+
+            // back-paginate until we hit the start
+            return backPaginate();
+        }).then(() => {
+            expect(messagePanel.props.suppressFirstDateSeparator).toBe(false);
+            var events = scryEventTiles(panel);
+            expect(events[0].props.mxEvent).toBe(timeline.getEvents()[0])
+
+            // we should now be able to scroll down, and paginate in the other
+            // direction.
+            scrollingDiv.scrollTop = scrollingDiv.scrollHeight;
+            return awaitScroll();
+        }).then(() => {
+            console.log("done");
+        }).done(done, done);
+    });
 });
diff --git a/test/test-utils.js b/test/test-utils.js
index a077722678..cbb8fabe18 100644
--- a/test/test-utils.js
+++ b/test/test-utils.js
@@ -42,8 +42,8 @@ module.exports.stubClient = function() {
         sendReadReceipt: sinon.stub().returns(q()),
     };
 
-    // create the peg
-
+    // stub out the methods in MatrixClientPeg
+    //
     // 'sandbox.restore()' doesn't work correctly on inherited methods,
     // so we do this for each method
     var methods = ['get', 'unset', 'replaceUsingUrls',
@@ -51,7 +51,9 @@ module.exports.stubClient = function() {
     for (var i = 0; i < methods.length; i++) {
         sandbox.stub(peg, methods[i]);
     }
-    peg.get.returns(client);
+    // MatrixClientPeg.get() is called a /lot/, so implement it with our own
+    // fast stub function rather than a sinon stub
+    peg.get = function() { return client; };
     return sandbox;
 }
 

From 9fcf8d00b4b2362bf247dff144d7060b13bcffad Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 21 Apr 2016 13:40:43 +0100
Subject: [PATCH 06/13] Silence some 404s from the tests

Add an edit.png so we don't get a 404 every time we load some event tiles
---
 karma.conf.js     |   9 +++++++++
 test/img/edit.png | Bin 0 -> 460 bytes
 2 files changed, 9 insertions(+)
 create mode 100644 test/img/edit.png

diff --git a/karma.conf.js b/karma.conf.js
index 52eea45f12..1ae2494add 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -51,8 +51,17 @@ module.exports = function (config) {
         files: [
             testFile,
             gsCss,
+
+            // some images to reduce noise from the tests
+            {pattern: 'test/img/*', watched: false, included: false,
+             served: true, nocache: false},
         ],
 
+        // redirect img links to the karma server
+        proxies: {
+            "/img/": "/base/test/img/",
+        },
+
         // list of files to exclude
         //
         // This doesn't work. It turns out that it's webpack which does the
diff --git a/test/img/edit.png b/test/img/edit.png
new file mode 100644
index 0000000000000000000000000000000000000000..6f373d3f3dc7dfbb4186e4347fad43920bd04279
GIT binary patch
literal 460
zcmV;-0W<!IP)<h;3K|Lk000e1NJLTq000gE000gM1^@s6A4o0H00001b5ch_0Itp)
z=>Px$hDk(0R45gVlCf&SP!xv$Tx)R<B%3%0jY1+0U3HR9ox2tK2udHp!Dp~<U{~!M
zh?6c3MFayH7eNa`6hxt7()*{qA&3;ukbA@VzjMw#=V*vnu~@vV)oRsbGWnuunn{=M
z`}S_Pdv7+IZ{zX!Tgf$bX*3%5hGBH_`TSijmqRL*3S8Um7PHw5)9G~XIL=eOUjI}K
z2({a7Z@FB`1ec9IYN#c6!}6G^TrO+rbUF;CE~nE8gTVl@bWpS3?>myQVlu+3ygXZ$
zrL^HmsMqUZu~<OYbrcE(91aIPo6Wj{jo_QkO+m6mWHK3)N~J(TEg8Y?sYWRH9I8|*
z5JCiQYRUZmDMFtAK@k~*?4iw;)2@N2B_lXo&WR>x1@)$Ad4coqLoFF_9IaN%;hfg%
zwLh6me3|*;FsY%IjNlq^Bl`Wme>@&xnr7IDXr|R_1!|}z6Qi@+?S9E9ADhkQk#kBU
z5{Sp+@H`K$>tZw-VK^MlZQFiOD;Mr61F(c^m;46@h9Cq<lTzpa0000<MNUMnLSTYK
Ck<2du

literal 0
HcmV?d00001


From f551317b5dcee7993cbfd9b26144a5aac1b6e10f Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 21 Apr 2016 13:41:25 +0100
Subject: [PATCH 07/13] Unmount TimelinePanel when test completes

... mostly because it seems like a nice idea.
---
 test/components/structures/TimelinePanel-test.js | 3 ++-
 test/test-utils.js                               | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/test/components/structures/TimelinePanel-test.js b/test/components/structures/TimelinePanel-test.js
index 671d5c7774..d314e7db94 100644
--- a/test/components/structures/TimelinePanel-test.js
+++ b/test/components/structures/TimelinePanel-test.js
@@ -76,7 +76,8 @@ describe('TimelinePanel', function() {
 
     afterEach(function() {
         if (parentDiv) {
-            document.body.removeChild(parentDiv);
+            ReactDOM.unmountComponentAtNode(parentDiv);
+            parentDiv.remove();
             parentDiv = null;
         }
         sandbox.restore();
diff --git a/test/test-utils.js b/test/test-utils.js
index a077722678..d2e40e0ee0 100644
--- a/test/test-utils.js
+++ b/test/test-utils.js
@@ -37,6 +37,7 @@ module.exports.stubClient = function() {
         getRoom: sinon.stub(),
         loginFlows: sinon.stub(),
         on: sinon.stub(),
+        removeListener: sinon.stub(),
 
         paginateEventTimeline: sinon.stub().returns(q()),
         sendReadReceipt: sinon.stub().returns(q()),

From c5a76dec1ca64231ac2181dd694c41dd9e20d74e Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 21 Apr 2016 17:14:27 +0100
Subject: [PATCH 08/13] add heuristics to hide URL previews other than for URLs
 where the user has explicitly identified the target as a link: i.e. by
 including a URI scheme prefix, or by including URI path components, or by
 doing an explicit markdown hyperlink. ignore previews of URLs within pre or
 code blocks

---
 src/components/views/messages/TextualBody.js | 27 ++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 631caadac2..006bdf0951 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -84,11 +84,34 @@ module.exports = React.createClass({
     findLink: function(nodes) {
         for (var i = 0; i < nodes.length; i++) {
             var node = nodes[i];
-            if (node.tagName === "A" && node.getAttribute("href") && 
+            if (node.tagName === "A" && node.getAttribute("href") &&
                 (node.getAttribute("href").startsWith("http://") ||
                  node.getAttribute("href").startsWith("https://")))
             {
-                return node;
+                // as a random heuristic to avoid highlighting things like "foo.pl"
+                // we require the linked text to either include a / (either from http:// )
+                // or from a full foo.bar/baz style schemeless URL - or be a markdown-style
+                // link, in which case we check the target text differs from the link value.
+                // TODO: make this configurable?
+                if (node.textContent.indexOf("/") > -1)
+                {
+                    return node;
+                }
+                else {
+                    var url = node.getAttribute("href");
+                    var host = url.match(/^https?:\/\/(.*?)(\/|$)/)[1];
+                    if (node.textContent.trim().startsWith(host)) {
+                        // it's a "foo.pl" style link
+                        return;
+                    }
+                    else {
+                        // it's a [foo bar](http://foo.com) style link
+                        return node;
+                    }
+                }
+            }
+            else if (node.tagName === "PRE" || node.tagName === "CODE") {
+                return;
             }
             else if (node.children && node.children.length) {
                 return this.findLink(node.children)

From ee11838537def7f152d252ce230904b045d24280 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 21 Apr 2016 17:19:24 +0100
Subject: [PATCH 09/13] fix comment paren

---
 src/components/views/messages/TextualBody.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 006bdf0951..c06ad67150 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -89,8 +89,8 @@ module.exports = React.createClass({
                  node.getAttribute("href").startsWith("https://")))
             {
                 // as a random heuristic to avoid highlighting things like "foo.pl"
-                // we require the linked text to either include a / (either from http:// )
-                // or from a full foo.bar/baz style schemeless URL - or be a markdown-style
+                // we require the linked text to either include a / (either from http://
+                // or from a full foo.bar/baz style schemeless URL) - or be a markdown-style
                 // link, in which case we check the target text differs from the link value.
                 // TODO: make this configurable?
                 if (node.textContent.indexOf("/") > -1)

From 4d399a3640348d0e63b9c8162a49be6af4db04a9 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 21 Apr 2016 18:00:39 +0100
Subject: [PATCH 10/13] Refactor out isLinkPreviewable

---
 src/components/views/messages/TextualBody.js | 57 +++++++++++---------
 1 file changed, 33 insertions(+), 24 deletions(-)

diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index c06ad67150..223eabdc36 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -84,31 +84,9 @@ module.exports = React.createClass({
     findLink: function(nodes) {
         for (var i = 0; i < nodes.length; i++) {
             var node = nodes[i];
-            if (node.tagName === "A" && node.getAttribute("href") &&
-                (node.getAttribute("href").startsWith("http://") ||
-                 node.getAttribute("href").startsWith("https://")))
+            if (node.tagName === "A" && node.getAttribute("href"))
             {
-                // as a random heuristic to avoid highlighting things like "foo.pl"
-                // we require the linked text to either include a / (either from http://
-                // or from a full foo.bar/baz style schemeless URL) - or be a markdown-style
-                // link, in which case we check the target text differs from the link value.
-                // TODO: make this configurable?
-                if (node.textContent.indexOf("/") > -1)
-                {
-                    return node;
-                }
-                else {
-                    var url = node.getAttribute("href");
-                    var host = url.match(/^https?:\/\/(.*?)(\/|$)/)[1];
-                    if (node.textContent.trim().startsWith(host)) {
-                        // it's a "foo.pl" style link
-                        return;
-                    }
-                    else {
-                        // it's a [foo bar](http://foo.com) style link
-                        return node;
-                    }
-                }
+                return this.isLinkPreviewable(node) ? node : undefined;
             }
             else if (node.tagName === "PRE" || node.tagName === "CODE") {
                 return;
@@ -119,6 +97,37 @@ module.exports = React.createClass({
         }
     },
 
+    isLinkPreviewable: function(node) {
+        // don't try to preview relative links
+        if (!node.getAttribute("href").startsWith("http://") &&
+            !node.getAttribute("href").startsWith("https://"))
+        {
+            return false;
+        }
+
+        // as a random heuristic to avoid highlighting things like "foo.pl"
+        // we require the linked text to either include a / (either from http://
+        // or from a full foo.bar/baz style schemeless URL) - or be a markdown-style
+        // link, in which case we check the target text differs from the link value.
+        // TODO: make this configurable?
+        if (node.textContent.indexOf("/") > -1)
+        {
+            return node;
+        }
+        else {
+            var url = node.getAttribute("href");
+            var host = url.match(/^https?:\/\/(.*?)(\/|$)/)[1];
+            if (node.textContent.trim().startsWith(host)) {
+                // it's a "foo.pl" style link
+                return;
+            }
+            else {
+                // it's a [foo bar](http://foo.com) style link
+                return node;
+            }
+        }
+    },
+
     onCancelClick: function(event) {
         this.setState({ widgetHidden: true });
         // FIXME: persist this somewhere smarter than local storage

From afb301ffb78c019a50e40caa5d9042ad39c117fe Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Fri, 22 Apr 2016 11:07:58 +0100
Subject: [PATCH 11/13] Reduce timeline limit to 250 events

... maybe this will help improve responsiveness in firefox.
---
 CHANGELOG.md                               | 4 ++++
 src/components/structures/TimelinePanel.js | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9086006376..e673b18f99 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+Changes in <unreleased>
+=======================
+ * Reduce number of events shown in a room to 250, to improve responsiveness
+
 Changes in [0.5.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.5.1) (2016-04-19)
 ===================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.4.0...v0.5.1)
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index 1f7c98b0b1..289dd4be25 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -31,7 +31,7 @@ var KeyCode = require('../../KeyCode');
 
 var PAGINATE_SIZE = 20;
 var INITIAL_SIZE = 20;
-var TIMELINE_CAP = 500; // the most events to show in a timeline
+var TIMELINE_CAP = 250; // the most events to show in a timeline
 
 var DEBUG = false;
 

From 330ab98f64dd5488f118ce1de4ca1bc32d563014 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Fri, 22 Apr 2016 11:21:31 +0100
Subject: [PATCH 12/13] Prepare changelog for v0.5.2

---
 CHANGELOG.md | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e673b18f99..262d55c6da 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,28 @@
-Changes in <unreleased>
-=======================
- * Reduce number of events shown in a room to 250, to improve responsiveness
+Changes in [0.5.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.5.2) (2016-04-22)
+===================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.5.1...v0.5.2)
+
+Performance improvements:
+
+ * Reduce number of events shown in a room to 250
+   [afb301f](https://github.com/matrix-org/matrix-react-sdk/commit/afb301ffb78c019a50e40caa5d9042ad39c117fe)
+ * add heuristics to hide URL previews...
+   [\#284](https://github.com/matrix-org/matrix-react-sdk/pull/284)
+ * Fix bug which stopped us scrolling down after we scrolled up
+   [\#283](https://github.com/matrix-org/matrix-react-sdk/pull/283)
+ * Don't relayout scrollpanels every time something changes
+   [\#280](https://github.com/matrix-org/matrix-react-sdk/pull/280)
+ * Reduce number of renders on received events
+   [\#279](https://github.com/matrix-org/matrix-react-sdk/pull/279)
+ * Avoid rerendering EventTiles when not necessary
+   [\#278](https://github.com/matrix-org/matrix-react-sdk/pull/278)
+ * Speed up processing of TimelinePanel updates on new events
+   [\#277](https://github.com/matrix-org/matrix-react-sdk/pull/277)
+
+Other bug fixes:
+ * Fix read-receipt animation
+   [\#282](https://github.com/matrix-org/matrix-react-sdk/pull/282),
+   [\#281](https://github.com/matrix-org/matrix-react-sdk/pull/281)
 
 Changes in [0.5.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.5.1) (2016-04-19)
 ===================================================================================================

From 412512570b59e66138f90d2219c6bc621de7e46c Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Fri, 22 Apr 2016 11:21:32 +0100
Subject: [PATCH 13/13] 0.5.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 731ae6cfbb..3f4a862f6f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {