Improve RoomList performance via side-stepping React

package.json

@@ -67,7 +67,7 @@
     "react": "^15.4.0",
     "react-addons-css-transition-group": "15.3.2",
     "react-dom": "^15.4.0",
-    "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef",
+    "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#39d858c",
     "sanitize-html": "^1.11.1",
     "text-encoding-utf-8": "^1.0.1",
     "velocity-vector": "vector-im/velocity#059e3b2",

src/ConstantTimeDispatcher.js

@@ -0,0 +1,62 @@
+/*
+Copyright 2017 Vector Creations 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.
+*/
+
+// singleton which dispatches invocations of a given type & argument
+// rather than just a type (as per EventEmitter and Flux's dispatcher etc)
+//
+// This means you can have a single point which listens for an EventEmitter event
+// and then dispatches out to one of thousands of RoomTiles (for instance) rather than
+// having each RoomTile register for the EventEmitter event and having to 
+// iterate over all of them.
+class ConstantTimeDispatcher {
+    constructor() {
+        // type -> arg -> [ listener(arg, params) ]
+        this.listeners = {};
+    }
+
+    register(type, arg, listener) {
+        if (!this.listeners[type]) this.listeners[type] = {};
+        if (!this.listeners[type][arg]) this.listeners[type][arg] = [];
+        this.listeners[type][arg].push(listener);
+    }
+
+    unregister(type, arg, listener) {
+        if (this.listeners[type] && this.listeners[type][arg]) {
+            var i = this.listeners[type][arg].indexOf(listener);
+            if (i > -1) {
+                this.listeners[type][arg].splice(i, 1);
+            }
+        }
+        else {
+            console.warn("Unregistering unrecognised listener (type=" + type + ", arg=" + arg + ")");
+        }
+    }
+
+    dispatch(type, arg, params) {
+        if (!this.listeners[type] || !this.listeners[type][arg]) {
+            console.warn("No registered listeners for dispatch (type=" + type + ", arg=" + arg + ")");
+            return;
+        }
+        this.listeners[type][arg].forEach(listener=>{
+            listener.call(arg, params);
+        });
+    }
+}
+
+if (!global.constantTimeDispatcher) {
+    global.constantTimeDispatcher = new ConstantTimeDispatcher();
+}
+module.exports = global.constantTimeDispatcher;

src/KeyCode.js

@@ -32,4 +32,5 @@ module.exports = {
     DELETE: 46,
     KEY_D: 68,
     KEY_E: 69,
+    KEY_K: 75,
 };

src/components/structures/TimelinePanel.js

@@ -523,6 +523,7 @@ var TimelinePanel = React.createClass({
                 this.props.timelineSet.room.setUnreadNotificationCount('highlight', 0);
                 dis.dispatch({
                     action: 'on_room_read',
+                    room: this.props.timelineSet.room,
                 });
             }
         }

src/components/views/dialogs/QuestionDialog.js

@@ -47,6 +47,12 @@ export default React.createClass({
         this.props.onFinished(false);
     },
 
+    componentDidMount: function() {
+        if (this.props.focus) {
+            this.refs.button.focus();
+        }
+    },
+
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const cancelButton = this.props.hasCancelButton ? (
@@ -63,7 +69,7 @@ export default React.createClass({
                     {this.props.description}
                 </div>
                 <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={this.onOk} autoFocus={this.props.focus}>
+                    <button ref="button" className="mx_Dialog_primary" onClick={this.onOk}>
                         {this.props.button}
                     </button>
                     {this.props.extraButtons}