From b0adb1945fdc5d2ab4aecc165c8e022064c7f2ba Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 24 Dec 2015 00:12:37 +0000
Subject: [PATCH 01/14] Expose onHighlightClick on the event tiles

---
 src/components/views/messages/MessageEvent.js |  3 +-
 src/components/views/messages/TextualBody.js  |  3 +-
 src/components/views/rooms/EventTile.js       | 29 ++++++++++++++++++-
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js
index 164bf11930..63e77e9652 100644
--- a/src/components/views/messages/MessageEvent.js
+++ b/src/components/views/messages/MessageEvent.js
@@ -47,6 +47,7 @@ module.exports = React.createClass({
             TileType = tileTypes[msgtype];
         }
 
-        return <TileType mxEvent={this.props.mxEvent} highlights={this.props.highlights} />;
+        return <TileType mxEvent={this.props.mxEvent} highlights={this.props.highlights} 
+                    onHighlightClick={this.props.onHighlightClick} />;
     },
 });
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 7134d5faf4..ac9fcd2e5e 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -49,7 +49,8 @@ module.exports = React.createClass({
     render: function() {
         var mxEvent = this.props.mxEvent;
         var content = mxEvent.getContent();
-        var body = HtmlUtils.bodyToHtml(content, this.props.highlights);
+        var body = HtmlUtils.bodyToHtml(content, this.props.highlights,
+                                       {onHighlightClick: this.props.onHighlightClick});
 
         switch (content.msgtype) {
             case "m.emote":
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 0b26000207..94a144ef55 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -74,6 +74,32 @@ module.exports = React.createClass({
         }
     },
 
+    propTypes: {
+        /* the MatrixEvent to show */
+        mxEvent: React.PropTypes.object.isRequired,
+
+        /* true if this is a continuation of the previous event (which has the
+         * effect of not showing another avatar/displayname
+         */
+        continuation: React.PropTypes.bool,
+
+        /* true if this is the last event in the timeline (which has the effect
+         * of always showing the timestamp)
+         */
+        last: React.PropTypes.bool,
+
+        /* true if this is search context (which has the effect of greying out
+         * the text
+         */
+        contextual: React.PropTypes.bool,
+
+        /* a list of words to highlight */
+        highlights: React.PropTypes.array,
+
+        /* a function to be called when the highlight is clicked */
+        onHighlightClick: React.PropTypes.func,
+    },
+
     getInitialState: function() {
         return {menu: false, allReadAvatars: false};
     },
@@ -280,7 +306,8 @@ module.exports = React.createClass({
                 { avatar }
                 { sender }
                 <div className="mx_EventTile_line">
-                    <EventTileType mxEvent={this.props.mxEvent} highlights={this.props.highlights} />
+                    <EventTileType mxEvent={this.props.mxEvent} highlights={this.props.highlights} 
+                          onHighlightClick={this.props.onHighlightClick} />
                 </div>
             </div>
         );

From f2a24521dc4b7f9e1568755c8ea5ed529a41e12a Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 24 Dec 2015 00:10:21 +0000
Subject: [PATCH 02/14] Make ScrollPanel keep track of when fill requests are
 happening

The dance to avoid doing repeated fill requests on every update is common, so
add it to ScrollPanel. Let onFillRequest return a promise, which prevents any
updates until it completes.
---
 src/components/structures/RoomView.js    | 27 +++++-----
 src/components/structures/ScrollPanel.js | 63 +++++++++++++++++++++++-
 2 files changed, 72 insertions(+), 18 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 127fe2fdb8..fc909f69ab 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -330,8 +330,6 @@ module.exports = React.createClass({
 
         this.scrollToBottom();
         this.sendReadReceipt();
-
-        this.refs.messagePanel.checkFillState();
     },
 
     componentDidUpdate: function() {
@@ -353,30 +351,25 @@ module.exports = React.createClass({
         });
 
         this.setState({paginating: false});
-
-        // we might not have got enough (or, indeed, any) results from the
-        // pagination request, so give the messagePanel a chance to set off
-        // another.
-
-        this.refs.messagePanel.checkFillState();
     },
 
     onSearchResultsFillRequest: function(backwards) {
-        if (!backwards || this.state.searchInProgress)
-            return;
+        if (!backwards)
+            return false;
 
         if (this.nextSearchBatch) {
             if (DEBUG_SCROLL) console.log("requesting more search results");
-            this._getSearchBatch(this.state.searchTerm,
-                                 this.state.searchScope);
+            return this._getSearchBatch(this.state.searchTerm,
+                                 this.state.searchScope).then(true);
         } else {
             if (DEBUG_SCROLL) console.log("no more search results");
+            return false;
         }
     },
 
     // set off a pagination request.
     onMessageListFillRequest: function(backwards) {
-        if (!backwards || this.state.paginating)
+        if (!backwards)
             return;
 
         // Either wind back the message cap (if there are enough events in the
@@ -386,11 +379,13 @@ module.exports = React.createClass({
             var cap = Math.min(this.state.messageCap + PAGINATE_SIZE, this.state.room.timeline.length);
             if (DEBUG_SCROLL) console.log("winding back message cap to", cap);
             this.setState({messageCap: cap});
+            return true;
         } else if(this.state.room.oldState.paginationToken) {
             var cap = this.state.messageCap + PAGINATE_SIZE;
             if (DEBUG_SCROLL) console.log("starting paginate to cap", cap);
             this.setState({messageCap: cap, paginating: true});
-            MatrixClientPeg.get().scrollback(this.state.room, PAGINATE_SIZE).finally(this._paginateCompleted).done();
+            return MatrixClientPeg.get().scrollback(this.state.room, PAGINATE_SIZE).
+                finally(this._paginateCompleted).then(true);
         }
     },
 
@@ -515,8 +510,8 @@ module.exports = React.createClass({
         var self = this;
 
         if (DEBUG_SCROLL) console.log("sending search request");
-        MatrixClientPeg.get().search({ body: this._getSearchCondition(term, scope),
-                                       next_batch: this.nextSearchBatch })
+        return MatrixClientPeg.get().search({ body: this._getSearchCondition(term, scope),
+                                              next_batch: this.nextSearchBatch })
         .then(function(data) {
             if (DEBUG_SCROLL) console.log("search complete");
             if (!self.state.searching || self.searchId != searchId) {
diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js
index 2c68562ada..fc0b630f26 100644
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.js
@@ -17,6 +17,7 @@ limitations under the License.
 var React = require("react");
 var ReactDOM = require("react-dom");
 var GeminiScrollbar = require('react-gemini-scrollbar');
+var q = require("q");
 
 var DEBUG_SCROLL = false;
 
@@ -51,7 +52,15 @@ module.exports = React.createClass({
 
         /* onFillRequest(backwards): a callback which is called on scroll when
          * the user nears the start (backwards = true) or end (backwards =
-         * false) of the list
+         * false) of the list.
+         *
+         * This should return true if the pagination was successful, or false if
+         * there is no more data in this directon (at this time) - which will
+         * stop the pagination cycle until the user scrolls again.
+         *
+         * This can return a promise; if it does, no more calls will be made
+         * until the promise completes. The promise should resolve to true or
+         * false as above.
          */
         onFillRequest: React.PropTypes.func,
 
@@ -77,14 +86,22 @@ module.exports = React.createClass({
     },
 
     componentWillMount: function() {
+        this._pendingFillRequests = {b: null, f: null};
         this.resetScrollState();
     },
 
+    componentDidMount: function() {
+        this.checkFillState();
+    },
+
     componentDidUpdate: function() {
         // after adding event tiles, we may need to tweak the scroll (either to
         // keep at the bottom of the timeline, or to maintain the view after
         // adding events to the top).
         this._restoreSavedScrollState();
+
+        // we also re-check the fill state, in case the paginate was inadequate
+        this.checkFillState();
     },
 
     onScroll: function(ev) {
@@ -131,10 +148,52 @@ module.exports = React.createClass({
         if (sn.scrollTop < sn.clientHeight) {
             // there's less than a screenful of messages left - try to get some
             // more messages.
-            this.props.onFillRequest(true);
+            this._maybeFill(true);
         }
     },
 
+    // check if there is already a pending fill request. If not, set one off.
+    _maybeFill: function(backwards) {
+        var dir = backwards ? 'b' : 'f';
+        if (this._pendingFillRequests[dir]) {
+            if (DEBUG_SCROLL) {
+                console.log("ScrollPanel: Already a "+dir+" fill in progress - not starting another");
+            }
+            return;
+        }
+
+        if (DEBUG_SCROLL) {
+            console.log("ScrollPanel: starting "+dir+" fill");
+        }
+
+        // onFillRequest can end up calling us recursively (via onScroll
+        // events) so make sure we set this before firing off the call. That
+        // does present the risk that we might not ever actually fire off the
+        // fill request, so wrap it in a try/catch.
+        this._pendingFillRequests[dir] = true;
+        var r;
+        try {
+             r = this.props.onFillRequest(backwards);
+        } catch (e) {
+            this._pendingFillRequests[dir] = false;
+            throw e;
+        }
+
+        q.finally(r, () => {
+            if (DEBUG_SCROLL) {
+                console.log("ScrollPanel: "+dir+" fill complete");
+            }
+            this._pendingFillRequests[dir] = false;
+        }).then((res) => {
+            if (res) {
+                // further pagination requests have been disabled until now, so
+                // it's time to check the fill state again in case the pagination
+                // was insufficient.
+                this.checkFillState();
+            }
+        }).done();
+    },
+
     // get the current scroll position of the room, so that it can be
     // restored later
     getScrollState: function() {

From 93e7f90ae4f286394391857175803d3ed4c73012 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 24 Dec 2015 00:08:17 +0000
Subject: [PATCH 03/14] ScrollPanel: implement forward-fill

---
 src/components/structures/ScrollPanel.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js
index fc0b630f26..80d35aea65 100644
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.js
@@ -150,6 +150,9 @@ module.exports = React.createClass({
             // more messages.
             this._maybeFill(true);
         }
+        if (sn.scrollTop > sn.scrollHeight - sn.clientHeight * 2) {
+            this._maybeFill(false);
+        }
     },
 
     // check if there is already a pending fill request. If not, set one off.

From bd498b47b340431793cc897c751b7cbcd6148745 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Mon, 28 Dec 2015 02:36:18 +0000
Subject: [PATCH 04/14] fix 'this' scoping bug that could never have worked...

---
 src/components/views/create_room/RoomAlias.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/views/create_room/RoomAlias.js b/src/components/views/create_room/RoomAlias.js
index 9a30d3fbff..cc7382aadb 100644
--- a/src/components/views/create_room/RoomAlias.js
+++ b/src/components/views/create_room/RoomAlias.js
@@ -56,8 +56,9 @@ module.exports = React.createClass({
 
         if (this.props.homeserver) {
             if (curr_val == "") {
+                var self = this;
                 setTimeout(function() {
-                    target.value = "#:" + this.props.homeserver;
+                    target.value = "#:" + self.props.homeserver;
                     target.setSelectionRange(1, 1);
                 }, 0);
             } else {

From 50ac0ab4cf289b4887b06f052b51e7dc43b24b01 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Mon, 28 Dec 2015 02:36:28 +0000
Subject: [PATCH 05/14] wire up RoomAlias's homeserver as intended

---
 src/components/structures/CreateRoom.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/CreateRoom.js b/src/components/structures/CreateRoom.js
index d6002fb84c..f520318a0a 100644
--- a/src/components/structures/CreateRoom.js
+++ b/src/components/structures/CreateRoom.js
@@ -251,13 +251,15 @@ module.exports = React.createClass({
             var UserSelector = sdk.getComponent("elements.UserSelector");
             var RoomHeader = sdk.getComponent("rooms.RoomHeader");
 
+            var domain = MatrixClientPeg.get().credentials.userId.replace(/^.*:/, '');
+
             return (
             <div className="mx_CreateRoom">
                 <RoomHeader simpleHeader="Create room" />
                 <div className="mx_CreateRoom_body">
                     <input type="text" ref="room_name" value={this.state.room_name} onChange={this.onNameChange} placeholder="Name"/> <br />
                     <textarea className="mx_CreateRoom_description" ref="topic" value={this.state.topic} onChange={this.onTopicChange} placeholder="Topic"/> <br />
-                    <RoomAlias ref="alias" alias={this.state.alias} onChange={this.onAliasChanged}/> <br />
+                    <RoomAlias ref="alias" alias={this.state.alias} homeserver={ domain } onChange={this.onAliasChanged}/> <br />
                     <UserSelector ref="user_selector" selected_users={this.state.invited_users} onChange={this.onInviteChanged}/> <br />
                     <Presets ref="presets" onChange={this.onPresetChanged} preset={this.state.preset}/> <br />
                     <div>

From 424540e57aeb19cf3ef0d91ed8d11e12271a011b Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Mon, 28 Dec 2015 02:40:17 +0000
Subject: [PATCH 06/14] fix NPE if messagePanel isn't yet defined

---
 src/components/structures/RoomView.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 127fe2fdb8..56dd41d929 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -358,7 +358,9 @@ module.exports = React.createClass({
         // pagination request, so give the messagePanel a chance to set off
         // another.
 
-        this.refs.messagePanel.checkFillState();
+        if (this.refs.messagePanel) {
+            this.refs.messagePanel.checkFillState();
+        }
     },
 
     onSearchResultsFillRequest: function(backwards) {

From 970bc84bb6f677317cc182f0b7dc541e34434680 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Mon, 28 Dec 2015 02:58:40 +0000
Subject: [PATCH 07/14] explicitly rejoin parted rooms

---
 src/SlashCommands.js | 40 ++++++++++++++++++++++------------------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/SlashCommands.js b/src/SlashCommands.js
index e6ea7533dc..f5eaff9066 100644
--- a/src/SlashCommands.js
+++ b/src/SlashCommands.js
@@ -99,29 +99,33 @@ var commands = {
                 }
 
                 // Try to find a room with this alias
+                // XXX: do we need to do this? Doesn't the JS SDK suppress duplicate attempts to join the same room?
                 var foundRoom = MatrixTools.getRoomForAlias(
                     MatrixClientPeg.get().getRooms(),
                     room_alias
                 );
-                if (foundRoom) { // we've already joined this room, view it.
-                    dis.dispatch({
-                        action: 'view_room',
-                        room_id: foundRoom.roomId
-                    });
-                    return success();
-                }
-                else {
-                    // attempt to join this alias.
-                    return success(
-                        MatrixClientPeg.get().joinRoom(room_alias).then(
-                        function(room) {
-                            dis.dispatch({
-                                action: 'view_room',
-                                room_id: room.roomId
-                            });
-                        })
-                    );
+
+                if (foundRoom) { // we've already joined this room, view it if it's not archived.
+                    var me = foundRoom.getMember(MatrixClientPeg.get().credentials.userId);
+                    if (me && me.membership !== "leave") {
+                        dis.dispatch({
+                            action: 'view_room',
+                            room_id: foundRoom.roomId
+                        });
+                        return success();                        
+                    }
                 }
+
+                // otherwise attempt to join this alias.
+                return success(
+                    MatrixClientPeg.get().joinRoom(room_alias).then(
+                    function(room) {
+                        dis.dispatch({
+                            action: 'view_room',
+                            room_id: room.roomId
+                        });
+                    })
+                );
             }
         }
         return reject("Usage: /join <room_alias>");

From 15f19be408d17d27824b67d5bc53786ff90f645c Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Mon, 28 Dec 2015 03:14:50 +0000
Subject: [PATCH 08/14] highlight case insensitively

---
 src/HtmlUtils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/HtmlUtils.js b/src/HtmlUtils.js
index 196b87a972..e194f4a3bd 100644
--- a/src/HtmlUtils.js
+++ b/src/HtmlUtils.js
@@ -69,7 +69,7 @@ class Highlighter {
         // HTML and plain-text highlighting.
 
         var safeHighlight = this.html ? sanitizeHtml(highlights[0], sanitizeHtmlParams) : highlights[0];
-        while ((offset = safeSnippet.indexOf(safeHighlight, lastOffset)) >= 0) {
+        while ((offset = safeSnippet.toLowerCase().indexOf(safeHighlight.toLowerCase(), lastOffset)) >= 0) {
             // handle preamble
             if (offset > lastOffset) {
                 var subSnippet = safeSnippet.substring(lastOffset, offset);

From 441a9540cae44e8275a3783cb9a1c6471577a646 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sun, 3 Jan 2016 00:11:11 +0000
Subject: [PATCH 09/14] sync CSS classnames with current react component names

---
 src/HtmlUtils.js                              |  2 +-
 src/components/views/messages/MFileBody.js    |  6 +++---
 src/components/views/messages/MImageBody.js   | 10 +++++-----
 src/components/views/messages/MVideoBody.js   |  4 ++--
 src/components/views/messages/TextualBody.js  |  6 +++---
 src/components/views/messages/TextualEvent.js |  2 +-
 src/components/views/messages/UnknownBody.js  |  2 +-
 7 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/HtmlUtils.js b/src/HtmlUtils.js
index e194f4a3bd..95c6a46458 100644
--- a/src/HtmlUtils.js
+++ b/src/HtmlUtils.js
@@ -150,7 +150,7 @@ module.exports = {
 
         var body;
         if (highlights && highlights.length > 0) {
-            var highlighter = new Highlighter(isHtml, "mx_MessageTile_searchHighlight", opts.onHighlightClick);
+            var highlighter = new Highlighter(isHtml, "mx_EventTile_searchHighlight", opts.onHighlightClick);
             body = highlighter.applyHighlights(safeBody, highlights);
         }
         else {
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index be7f2f0593..193cafe255 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -54,8 +54,8 @@ module.exports = React.createClass({
 
         if (httpUrl) {
             return (
-                <span className="mx_MFileTile">
-                    <div className="mx_MImageTile_download">
+                <span className="mx_MFileBody">
+                    <div className="mx_MImageBody_download">
                         <a href={cli.mxcUrlToHttp(content.url)} target="_blank">
                             <img src="img/download.png" width="10" height="12"/>
                             Download {text}
@@ -65,7 +65,7 @@ module.exports = React.createClass({
             );
         } else {
             var extra = text ? ': '+text : '';
-            return <span className="mx_MFileTile">
+            return <span className="mx_MFileBody">
                 Invalid file{extra}
             </span>
         }
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 02ac50ca15..6afdddc307 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -109,14 +109,14 @@ module.exports = React.createClass({
         var thumbUrl = this._getThumbUrl();
         if (thumbUrl) {
             return (
-                <span className="mx_MImageTile">
+                <span className="mx_MImageBody">
                     <a href={cli.mxcUrlToHttp(content.url)} onClick={ this.onClick }>
-                        <img className="mx_MImageTile_thumbnail" src={thumbUrl}
+                        <img className="mx_MImageBody_thumbnail" src={thumbUrl}
                             alt={content.body} style={imgStyle}
                             onMouseEnter={this.onImageEnter}
                             onMouseLeave={this.onImageLeave} />
                     </a>
-                    <div className="mx_MImageTile_download">
+                    <div className="mx_MImageBody_download">
                         <a href={cli.mxcUrlToHttp(content.url)} target="_blank">
                             <img src="img/download.png" width="10" height="12"/>
                             Download {content.body} ({ content.info && content.info.size ? filesize(content.info.size) : "Unknown size" })
@@ -126,13 +126,13 @@ module.exports = React.createClass({
             );
         } else if (content.body) {
             return (
-                <span className="mx_MImageTile">
+                <span className="mx_MImageBody">
                     Image '{content.body}' cannot be displayed.
                 </span>
             );
         } else {
             return (
-                <span className="mx_MImageTile">
+                <span className="mx_MImageBody">
                     This image cannot be displayed.
                 </span>
             );
diff --git a/src/components/views/messages/MVideoBody.js b/src/components/views/messages/MVideoBody.js
index 0d022f1648..ddd3dceca7 100644
--- a/src/components/views/messages/MVideoBody.js
+++ b/src/components/views/messages/MVideoBody.js
@@ -70,8 +70,8 @@ module.exports = React.createClass({
         }
 
         return (
-            <span className="mx_MVideoTile">
-                <video className="mx_MVideoTile" src={cli.mxcUrlToHttp(content.url)} alt={content.body}
+            <span className="mx_MVideoBody">
+                <video className="mx_MVideoBody" src={cli.mxcUrlToHttp(content.url)} alt={content.body}
                     controls preload={preload} autoPlay="0"
                     height={height} width={width} poster={poster}>
                 </video>
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 7134d5faf4..7dd7a46842 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -55,19 +55,19 @@ module.exports = React.createClass({
             case "m.emote":
                 var name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
                 return (
-                    <span ref="content" className="mx_MEmoteTile mx_MessageTile_content">
+                    <span ref="content" className="mx_MEmoteBody mx_EventTile_content">
                         * { name } { body }
                     </span>
                 );
             case "m.notice":
                 return (
-                    <span ref="content" className="mx_MNoticeTile mx_MessageTile_content">
+                    <span ref="content" className="mx_MNoticeBody mx_EventTile_content">
                         { body }
                     </span>
                 );
             default: // including "m.text"
                 return (
-                    <span ref="content" className="mx_MTextTile mx_MessageTile_content">
+                    <span ref="content" className="mx_MTextBody mx_EventTile_content">
                         { body }
                     </span>
                 );
diff --git a/src/components/views/messages/TextualEvent.js b/src/components/views/messages/TextualEvent.js
index 5a9a1408c5..a2db21cfae 100644
--- a/src/components/views/messages/TextualEvent.js
+++ b/src/components/views/messages/TextualEvent.js
@@ -34,7 +34,7 @@ module.exports = React.createClass({
         if (text == null || text.length == 0) return null;
 
         return (
-            <div className="mx_EventAsTextTile">
+            <div className="mx_TextualEvent">
                 {TextForEvent.textForEvent(this.props.mxEvent)}
             </div>
         );
diff --git a/src/components/views/messages/UnknownBody.js b/src/components/views/messages/UnknownBody.js
index ae49af198d..f831e08a2c 100644
--- a/src/components/views/messages/UnknownBody.js
+++ b/src/components/views/messages/UnknownBody.js
@@ -24,7 +24,7 @@ module.exports = React.createClass({
     render: function() {
         var content = this.props.mxEvent.getContent();
         return (
-            <span className="mx_UnknownMessageTile">
+            <span className="mx_UnknownBody">
                 {content.body}
             </span>
         );

From 640aa45956675907c100756989d6f5050e5126e6 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sun, 3 Jan 2016 00:40:05 +0000
Subject: [PATCH 10/14] fix comedy bug where dates in timestamps were
 spectacularly wrong

---
 src/DateUtils.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/DateUtils.js b/src/DateUtils.js
index fe363586ab..3b11b82ccf 100644
--- a/src/DateUtils.js
+++ b/src/DateUtils.js
@@ -35,10 +35,10 @@ module.exports = {
             return days[date.getDay()] + " " + pad(date.getHours()) + ':' + pad(date.getMinutes());
         }
         else if (now.getFullYear() === date.getFullYear()) {
-            return days[date.getDay()] + ", " + months[date.getMonth()] + " " + (date.getDay()+1) + " " + pad(date.getHours()) + ':' + pad(date.getMinutes());
+            return days[date.getDay()] + ", " + months[date.getMonth()] + " " + date.getDate() + " " + pad(date.getHours()) + ':' + pad(date.getMinutes());
         }
         else {
-            return days[date.getDay()] + ", " + months[date.getMonth()] + " " + (date.getDay()+1) + " " + date.getFullYear() + " " + pad(date.getHours()) + ':' + pad(date.getMinutes());
+            return days[date.getDay()] + ", " + months[date.getMonth()] + " " + date.getDate() + " " + date.getFullYear() + " " + pad(date.getHours()) + ':' + pad(date.getMinutes());
         }
     }
 }

From 75ad96c8ba0f22e35cd04efdb5d617e99d244853 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Mon, 4 Jan 2016 10:11:42 +0000
Subject: [PATCH 11/14] Null guard getMember

---
 src/components/views/rooms/EventTile.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 0b26000207..69efa4a991 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -134,6 +134,9 @@ module.exports = React.createClass({
 
         for (var i = 0; i < receipts.length; ++i) {
             var member = room.getMember(receipts[i].userId);
+            if (!member) {
+                continue;
+            }
 
             // Using react refs here would mean both getting Velociraptor to expose
             // them and making them scoped to the whole RoomView. Not impossible, but

From b5eae891b4f148f9988d7524f97455420bd9aa77 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Mon, 4 Jan 2016 16:28:32 +0000
Subject: [PATCH 12/14] Address review comments

Make onFillRequest always return a promise
---
 src/components/structures/RoomView.js    | 33 +++++----
 src/components/structures/ScrollPanel.js | 88 +++++++++++++++---------
 2 files changed, 77 insertions(+), 44 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index fc909f69ab..150c39fb70 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -43,6 +43,13 @@ var INITIAL_SIZE = 20;
 
 var DEBUG_SCROLL = false;
 
+if (DEBUG_SCROLL) {
+    // using bind means that we get to keep useful line numbers in the console
+    var debuglog = console.log.bind(console);
+} else {
+    var debuglog = function () {};
+}
+
 module.exports = React.createClass({
     displayName: 'RoomView',
     propTypes: {
@@ -344,7 +351,7 @@ module.exports = React.createClass({
     },
 
     _paginateCompleted: function() {
-        if (DEBUG_SCROLL) console.log("paginate complete");
+        debuglog("paginate complete");
 
         this.setState({
             room: MatrixClientPeg.get().getRoom(this.props.roomId)
@@ -355,34 +362,34 @@ module.exports = React.createClass({
 
     onSearchResultsFillRequest: function(backwards) {
         if (!backwards)
-            return false;
+            return q(false);
 
         if (this.nextSearchBatch) {
-            if (DEBUG_SCROLL) console.log("requesting more search results");
+            debuglog("requesting more search results");
             return this._getSearchBatch(this.state.searchTerm,
                                  this.state.searchScope).then(true);
         } else {
-            if (DEBUG_SCROLL) console.log("no more search results");
-            return false;
+            debuglog("no more search results");
+            return q(false);
         }
     },
 
     // set off a pagination request.
     onMessageListFillRequest: function(backwards) {
         if (!backwards)
-            return;
+            return q(false);
 
         // Either wind back the message cap (if there are enough events in the
         // timeline to do so), or fire off a pagination request.
 
         if (this.state.messageCap < this.state.room.timeline.length) {
             var cap = Math.min(this.state.messageCap + PAGINATE_SIZE, this.state.room.timeline.length);
-            if (DEBUG_SCROLL) console.log("winding back message cap to", cap);
+            debuglog("winding back message cap to", cap);
             this.setState({messageCap: cap});
-            return true;
+            return q(true);
         } else if(this.state.room.oldState.paginationToken) {
             var cap = this.state.messageCap + PAGINATE_SIZE;
-            if (DEBUG_SCROLL) console.log("starting paginate to cap", cap);
+            debuglog("starting paginate to cap", cap);
             this.setState({messageCap: cap, paginating: true});
             return MatrixClientPeg.get().scrollback(this.state.room, PAGINATE_SIZE).
                 finally(this._paginateCompleted).then(true);
@@ -492,7 +499,7 @@ module.exports = React.createClass({
         }
 
         this.nextSearchBatch = null;
-        this._getSearchBatch(term, scope);
+        this._getSearchBatch(term, scope).done();
     },
 
     // fire off a request for a batch of search results
@@ -509,11 +516,11 @@ module.exports = React.createClass({
 
         var self = this;
 
-        if (DEBUG_SCROLL) console.log("sending search request");
+        debuglog("sending search request");
         return MatrixClientPeg.get().search({ body: this._getSearchCondition(term, scope),
                                               next_batch: this.nextSearchBatch })
         .then(function(data) {
-            if (DEBUG_SCROLL) console.log("search complete");
+            debuglog("search complete");
             if (!self.state.searching || self.searchId != searchId) {
                 console.error("Discarding stale search results");
                 return;
@@ -559,7 +566,7 @@ module.exports = React.createClass({
             self.setState({
                 searchInProgress: false
             });
-        }).done();
+        });
     },
 
     _getSearchCondition: function(term, scope) {
diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js
index 80d35aea65..072d397d10 100644
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.js
@@ -21,6 +21,13 @@ var q = require("q");
 
 var DEBUG_SCROLL = false;
 
+if (DEBUG_SCROLL) {
+    // using bind means that we get to keep useful line numbers in the console
+    var debuglog = console.log.bind(console);
+} else {
+    var debuglog = function () {};
+}
+
 /* This component implements an intelligent scrolling list.
  *
  * It wraps a list of <li> children; when items are added to the start or end
@@ -54,13 +61,14 @@ module.exports = React.createClass({
          * the user nears the start (backwards = true) or end (backwards =
          * false) of the list.
          *
-         * This should return true if the pagination was successful, or false if
-         * there is no more data in this directon (at this time) - which will
-         * stop the pagination cycle until the user scrolls again.
+         * This should return a promise; no more calls will be made until the
+         * promise completes.
          *
-         * This can return a promise; if it does, no more calls will be made
-         * until the promise completes. The promise should resolve to true or
-         * false as above.
+         * The promise should resolve to true if there is more data to be
+         * retrieved in this direction (in which case onFillRequest may be
+         * called again immediately), or false if there is no more data in this
+         * directon (at this time) - which will stop the pagination cycle until
+         * the user scrolls again.
          */
         onFillRequest: React.PropTypes.func,
 
@@ -80,7 +88,7 @@ module.exports = React.createClass({
     getDefaultProps: function() {
         return {
             stickyBottom: true,
-            onFillRequest: function(backwards) {},
+            onFillRequest: function(backwards) { return q(false); },
             onScroll: function() {},
         };
     },
@@ -106,7 +114,7 @@ module.exports = React.createClass({
 
     onScroll: function(ev) {
         var sn = this._getScrollNode();
-        if (DEBUG_SCROLL) console.log("Scroll event: offset now:", sn.scrollTop, "recentEventScroll:", this.recentEventScroll);
+        debuglog("Scroll event: offset now:", sn.scrollTop, "recentEventScroll:", this.recentEventScroll);
 
         // Sometimes we see attempts to write to scrollTop essentially being
         // ignored. (Or rather, it is successfully written, but on the next
@@ -130,7 +138,7 @@ module.exports = React.createClass({
         }
 
         this.scrollState = this._calculateScrollState();
-        if (DEBUG_SCROLL) console.log("Saved scroll state", this.scrollState);
+        debuglog("Saved scroll state", this.scrollState);
 
         this.props.onScroll(ev);
 
@@ -145,12 +153,36 @@ module.exports = React.createClass({
     checkFillState: function() {
         var sn = this._getScrollNode();
 
+        // if there is less than a screenful of messages above or below the
+        // viewport, try to get some more messages.
+        //
+        // scrollTop is the number of pixels between the top of the content and
+        //     the top of the viewport.
+        //
+        // scrollHeight is the total height of the content.
+        //
+        // clientHeight is the height of the viewport (excluding borders,
+        // margins, and scrollbars).
+        //
+        //
+        //   .---------.          -                 -
+        //   |         |          |  scrollTop      |
+        // .-+---------+-.    -   -                 |
+        // | |         | |    |                     |
+        // | |         | |    |  clientHeight       | scrollHeight
+        // | |         | |    |                     |
+        // `-+---------+-'    -                     |
+        //   |         |                            |
+        //   |         |                            |
+        //   `---------'                            -
+        //
+
         if (sn.scrollTop < sn.clientHeight) {
-            // there's less than a screenful of messages left - try to get some
-            // more messages.
+            // need to back-fill
             this._maybeFill(true);
         }
         if (sn.scrollTop > sn.scrollHeight - sn.clientHeight * 2) {
+            // need to forward-fill
             this._maybeFill(false);
         }
     },
@@ -159,36 +191,30 @@ module.exports = React.createClass({
     _maybeFill: function(backwards) {
         var dir = backwards ? 'b' : 'f';
         if (this._pendingFillRequests[dir]) {
-            if (DEBUG_SCROLL) {
-                console.log("ScrollPanel: Already a "+dir+" fill in progress - not starting another");
-            }
+            debuglog("ScrollPanel: Already a "+dir+" fill in progress - not starting another");
             return;
         }
 
-        if (DEBUG_SCROLL) {
-            console.log("ScrollPanel: starting "+dir+" fill");
-        }
+        debuglog("ScrollPanel: starting "+dir+" fill");
 
         // onFillRequest can end up calling us recursively (via onScroll
         // events) so make sure we set this before firing off the call. That
         // does present the risk that we might not ever actually fire off the
         // fill request, so wrap it in a try/catch.
         this._pendingFillRequests[dir] = true;
-        var r;
+        var fillPromise;
         try {
-             r = this.props.onFillRequest(backwards);
+             fillPromise = this.props.onFillRequest(backwards);
         } catch (e) {
             this._pendingFillRequests[dir] = false;
             throw e;
         }
 
-        q.finally(r, () => {
-            if (DEBUG_SCROLL) {
-                console.log("ScrollPanel: "+dir+" fill complete");
-            }
+        q.finally(fillPromise, () => {
+            debuglog("ScrollPanel: "+dir+" fill complete");
             this._pendingFillRequests[dir] = false;
-        }).then((res) => {
-            if (res) {
+        }).then((hasMoreResults) => {
+            if (hasMoreResults) {
                 // further pagination requests have been disabled until now, so
                 // it's time to check the fill state again in case the pagination
                 // was insufficient.
@@ -218,13 +244,13 @@ module.exports = React.createClass({
 
     scrollToTop: function() {
         this._getScrollNode().scrollTop = 0;
-        if (DEBUG_SCROLL) console.log("Scrolled to top");
+        debuglog("Scrolled to top");
     },
 
     scrollToBottom: function() {
         var scrollNode = this._getScrollNode();
         scrollNode.scrollTop = scrollNode.scrollHeight;
-        if (DEBUG_SCROLL) console.log("Scrolled to bottom; offset now", scrollNode.scrollTop);
+        debuglog("Scrolled to bottom; offset now", scrollNode.scrollTop);
     },
 
     // scroll the message list to the node with the given scrollToken. See
@@ -261,10 +287,10 @@ module.exports = React.createClass({
             this.recentEventScroll = scrollNode.scrollTop;
         }
 
-        if (DEBUG_SCROLL) {
-            console.log("Scrolled to token", node.dataset.scrollToken, "+", pixelOffset+":", scrollNode.scrollTop, "(delta: "+scrollDelta+")");
-            console.log("recentEventScroll now "+this.recentEventScroll);
-        }
+        debuglog("Scrolled to token", node.dataset.scrollToken, "+",
+                 pixelOffset+":", scrollNode.scrollTop, 
+                 "(delta: "+scrollDelta+")");
+        debuglog("recentEventScroll now "+this.recentEventScroll);
     },
 
     _calculateScrollState: function() {

From 2b169b06f5659c1f348054c75cb390ef470f58b9 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Tue, 5 Jan 2016 10:58:01 +0000
Subject: [PATCH 13/14] Make ScrollPanel.isAtBottom more reliable

Given we want to use isAtBottom to figure out whether to show 'unread messages'
counts, we ought to return the current scroll state, rather than the saved one.

This fixes vector-im/vector-web#576
---
 src/components/structures/ScrollPanel.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js
index 2c68562ada..4a45bf5a39 100644
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.js
@@ -120,8 +120,15 @@ module.exports = React.createClass({
         this.checkFillState();
     },
 
+    // return true if the content is fully scrolled down right now; else false.
+    //
+    // Note that if the content hasn't yet been fully populated, this may
+    // spuriously return true even if the user wanted to be looking at earlier
+    // content. So don't call it in render() cycles.
     isAtBottom: function() {
-        return this.scrollState && this.scrollState.atBottom;
+        var sn = this._getScrollNode();
+        // + 1 here to avoid fractional pixel rounding errors
+        return sn.scrollHeight - sn.scrollTop <= sn.clientHeight + 1;
     },
 
     // check the scroll state and send out backfill requests if necessary.
@@ -213,9 +220,7 @@ module.exports = React.createClass({
         // attribute. It is this token which is stored as the
         // 'lastDisplayedScrollToken'.
 
-        var sn = this._getScrollNode();
-        // + 1 here to avoid fractional pixel rounding errors
-        var atBottom = sn.scrollHeight - sn.scrollTop <= sn.clientHeight + 1;
+        var atBottom = this.isAtBottom();
 
         var itemlist = this.refs.itemlist;
         var wrapperRect = ReactDOM.findDOMNode(this).getBoundingClientRect();

From a9f7bf63ffe94df4be5c113da8782b1d8fb96a34 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Mon, 21 Dec 2015 09:56:50 +0000
Subject: [PATCH 14/14] spell out we're doing 3PID invites

---
 src/components/views/rooms/MemberList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js
index 8ca24f8992..719e4af9b3 100644
--- a/src/components/views/rooms/MemberList.js
+++ b/src/components/views/rooms/MemberList.js
@@ -254,7 +254,7 @@ module.exports = React.createClass({
         } else {
             return (
                 <form onSubmit={this.onPopulateInvite}>
-                    <input className="mx_MemberList_invite" ref="invite" placeholder="Invite another user"/>
+                    <input className="mx_MemberList_invite" ref="invite" placeholder="Invite user (email)"/>
                 </form>
             );
         }