Implementation of new read-marker semantics

Separate the read-up-to marker from the read-receipts, and show a status bar
when the read marker is above the screen. Move the read-marker down when it is
on the screen and there is user activity.

(This requires corresponding changes in vector-web, to provide the CSS and img)

src/components/structures/RoomView.js

@@ -90,6 +90,8 @@ module.exports = React.createClass({
             // the end of the live timeline. It has the effect of hiding the
             // 'scroll to bottom' knob, among a couple of other things.
             atEndOfLiveTimeline: true,
+
+            showTopUnreadMessagesBar: false,
         }
     },
 
@@ -553,6 +555,7 @@ module.exports = React.createClass({
                 atEndOfLiveTimeline: false,
             });
         }
+        this._updateTopUnreadMessagesBar();
     },
 
     onDragOver: function(ev) {
@@ -873,6 +876,30 @@ module.exports = React.createClass({
         this.refs.messagePanel.jumpToLiveTimeline();
     },
 
+    // jump up to wherever our read marker is
+    jumpToReadMarker: function() {
+        this.refs.messagePanel.jumpToReadMarker();
+    },
+
+    // update the read marker to match the read-receipt
+    forgetReadMarker: function() {
+        this.refs.messagePanel.forgetReadMarker();
+    },
+
+    // decide whether or not the top 'unread messages' bar should be shown
+    _updateTopUnreadMessagesBar: function() {
+        if (!this.refs.messagePanel)
+            return;
+
+        var pos = this.refs.messagePanel.getReadMarkerPosition();
+
+        // we want to show the bar if the read-marker is off the top of the
+        // screen.
+        var showBar = (pos < 0);
+
+        this.setState({showTopUnreadMessagesBar: showBar});
+    },
+
     // get the current scroll position of the room, so that it can be
     // restored when we switch back to it.
     //
@@ -1272,8 +1299,22 @@ module.exports = React.createClass({
                                   this.props.ConferenceHandler.isConferenceUser :
                                   null }
                 onScroll={ this.onMessageListScroll }
+                onReadMarkerUpdated={ this._updateTopUnreadMessagesBar }
             />);
 
+        var topUnreadMessagesBar = null;
+        if (this.state.showTopUnreadMessagesBar) {
+            var TopUnreadMessagesBar = sdk.getComponent('rooms.TopUnreadMessagesBar');
+            topUnreadMessagesBar = (
+                <div className="mx_RoomView_topUnreadMessagesBar">
+                    <TopUnreadMessagesBar
+                       onScrollUpClick={this.jumpToReadMarker}
+                       onCloseClick={this.forgetReadMarker}
+                    />
+                </div>
+            );
+        }
+
         return (
             <div className={ "mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "") } ref="roomView">
                 <RoomHeader ref="header" room={this.state.room} searchInfo={searchInfo}
@@ -1295,6 +1336,7 @@ module.exports = React.createClass({
                     { conferenceCallNotification }
                     { aux }
                 </div>
+                { topUnreadMessagesBar }
                 { messagePanel }
                 { searchResultsPanel }
                 <div className="mx_RoomView_statusArea">