From 0e8a49ebb7e6826bc84ab79623bf9d13dcb57ffd Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Mon, 14 Nov 2016 16:00:24 +0000
Subject: [PATCH 001/289] Update EventTile to use WithMatrixClient instead of
 MatrixClientPeg

---
 src/components/views/rooms/EventTile.js | 51 ++++++++++++-------------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index f4167b32f6..375c00fed7 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -21,8 +21,8 @@ var classNames = require("classnames");
 var Modal = require('../../../Modal');
 
 var sdk = require('../../../index');
-var MatrixClientPeg = require('../../../MatrixClientPeg')
 var TextForEvent = require('../../../TextForEvent');
+import WithMatrixClient from '../../../wrappers/WithMatrixClient';
 
 var ContextualMenu = require('../../structures/ContextualMenu');
 var dispatcher = require("../../../dispatcher");
@@ -63,22 +63,13 @@ var MAX_READ_AVATARS = 5;
 // |    '--------------------------------------'              |
 // '----------------------------------------------------------'
 
-module.exports = React.createClass({
+module.exports = WithMatrixClient(React.createClass({
     displayName: 'EventTile',
 
-    statics: {
-        haveTileForEvent: function(e) {
-            if (e.isRedacted()) return false;
-            if (eventTileTypes[e.getType()] == undefined) return false;
-            if (eventTileTypes[e.getType()] == 'messages.TextualEvent') {
-                return TextForEvent.textForEvent(e) !== '';
-            } else {
-                return true;
-            }
-        }
-    },
-
     propTypes: {
+        /* MatrixClient instance for sender verification etc */
+        matrixClient: React.PropTypes.object.isRequired,
+
         /* the MatrixEvent to show */
         mxEvent: React.PropTypes.object.isRequired,
 
@@ -153,7 +144,7 @@ module.exports = React.createClass({
 
     componentDidMount: function() {
         this._suppressReadReceiptAnimation = false;
-        MatrixClientPeg.get().on("deviceVerificationChanged",
+        this.props.matrixClient.on("deviceVerificationChanged",
                                  this.onDeviceVerificationChanged);
     },
 
@@ -176,11 +167,9 @@ module.exports = React.createClass({
     },
 
     componentWillUnmount: function() {
-        var client = MatrixClientPeg.get();
-        if (client) {
-            client.removeListener("deviceVerificationChanged",
-                                  this.onDeviceVerificationChanged);
-        }
+        var client = this.props.matrixClient;
+        client.removeListener("deviceVerificationChanged",
+                              this.onDeviceVerificationChanged);
     },
 
     onDeviceVerificationChanged: function(userId, device) {
@@ -193,7 +182,7 @@ module.exports = React.createClass({
         var verified = null;
 
         if (mxEvent.isEncrypted()) {
-            verified = MatrixClientPeg.get().isEventSenderVerified(mxEvent);
+            verified = this.props.matrixClient.isEventSenderVerified(mxEvent);
         }
 
         this.setState({
@@ -246,11 +235,11 @@ module.exports = React.createClass({
     },
 
     shouldHighlight: function() {
-        var actions = MatrixClientPeg.get().getPushActionsForEvent(this.props.mxEvent);
+        var actions = this.props.matrixClient.getPushActionsForEvent(this.props.mxEvent);
         if (!actions || !actions.tweaks) { return false; }
 
         // don't show self-highlights from another of our clients
-        if (this.props.mxEvent.getSender() === MatrixClientPeg.get().credentials.userId)
+        if (this.props.mxEvent.getSender() === this.props.matrixClient.credentials.userId)
         {
             return false;
         }
@@ -387,7 +376,7 @@ module.exports = React.createClass({
             throw new Error("Event type not supported");
         }
 
-        var e2eEnabled = MatrixClientPeg.get().isRoomEncrypted(this.props.mxEvent.getRoomId());
+        var e2eEnabled = this.props.matrixClient.isRoomEncrypted(this.props.mxEvent.getRoomId());
         var isSending = (['sending', 'queued', 'encrypting'].indexOf(this.props.eventSendStatus) !== -1);
 
         var classes = classNames({
@@ -481,7 +470,7 @@ module.exports = React.createClass({
         }
 
         if (this.props.tileShape === "notif") {
-            var room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+            var room = this.props.matrixClient.getRoom(this.props.mxEvent.getRoomId());
 
             return (
                 <div className={classes}>
@@ -554,4 +543,14 @@ module.exports = React.createClass({
             );
         }
     },
-});
+}));
+
+module.exports.haveTileForEvent = function(e) {
+    if (e.isRedacted()) return false;
+    if (eventTileTypes[e.getType()] == undefined) return false;
+    if (eventTileTypes[e.getType()] == 'messages.TextualEvent') {
+        return TextForEvent.textForEvent(e) !== '';
+    } else {
+        return true;
+    }
+};

From 22757cfcd3a2b769c2748ef9e21512ed7c34c8d2 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Mon, 14 Nov 2016 18:20:15 +0000
Subject: [PATCH 002/289] Inject MatrixClient into React context in tests

Now that EventTile expects MatrixClient in the context, we had better provide
it.
---
 .../structures/MessagePanel-test.js           | 40 ++++++++++------
 .../structures/TimelinePanel-test.js          | 34 +++++++++++---
 test/test-utils.js                            | 46 ++++++++++++-------
 3 files changed, 83 insertions(+), 37 deletions(-)

diff --git a/test/components/structures/MessagePanel-test.js b/test/components/structures/MessagePanel-test.js
index d16371b368..a96d0ed5d1 100644
--- a/test/components/structures/MessagePanel-test.js
+++ b/test/components/structures/MessagePanel-test.js
@@ -20,30 +20,44 @@ var TestUtils = require('react-addons-test-utils');
 var expect = require('expect');
 
 var sdk = require('matrix-react-sdk');
-var MatrixClientPeg = require('MatrixClientPeg');
 
 var MessagePanel = sdk.getComponent('structures.MessagePanel');
 
 var test_utils = require('test-utils');
 var mockclock = require('mock-clock');
 
+var client;
+
+// wrap MessagePanel with a component which provides the MatrixClient in the context.
+const WrappedMessagePanel = React.createClass({
+    childContextTypes: {
+        matrixClient: React.PropTypes.object,
+    },
+
+    getChildContext: function() {
+        return {
+            matrixClient: client,
+        };
+    },
+
+    render: function() {
+        return <MessagePanel {...this.props} />;
+    },
+});
+
 describe('MessagePanel', function () {
-    var sandbox;
     var clock = mockclock.clock();
     var realSetTimeout = window.setTimeout;
     var events = mkEvents();
 
     beforeEach(function() {
         test_utils.beforeEach(this);
-        sandbox = test_utils.stubClient(sandbox);
-
-        var client = MatrixClientPeg.get();
+        client = test_utils.createTestClient();
         client.credentials = {userId: '@me:here'};
     });
 
     afterEach(function () {
         clock.uninstall();
-        sandbox.restore();
     });
 
     function mkEvents() {
@@ -61,7 +75,7 @@ describe('MessagePanel', function () {
 
     it('should show the events', function() {
         var res = TestUtils.renderIntoDocument(
-                <MessagePanel className="cls" events={events} />
+                <WrappedMessagePanel className="cls" events={events} />
         );
 
         // just check we have the right number of tiles for now
@@ -72,7 +86,7 @@ describe('MessagePanel', function () {
 
     it('should show the read-marker in the right place', function() {
         var res = TestUtils.renderIntoDocument(
-                <MessagePanel className="cls" events={events} readMarkerEventId={events[4].getId()}
+                <WrappedMessagePanel className="cls" events={events} readMarkerEventId={events[4].getId()}
                     readMarkerVisible={true} />
         );
 
@@ -96,7 +110,7 @@ describe('MessagePanel', function () {
 
         // first render with the RM in one place
         var mp = ReactDOM.render(
-                <MessagePanel className="cls" events={events} readMarkerEventId={events[4].getId()}
+                <WrappedMessagePanel className="cls" events={events} readMarkerEventId={events[4].getId()}
                     readMarkerVisible={true}
                 />, parentDiv);
 
@@ -112,7 +126,7 @@ describe('MessagePanel', function () {
 
         // now move the RM
         mp = ReactDOM.render(
-                <MessagePanel className="cls" events={events} readMarkerEventId={events[6].getId()}
+                <WrappedMessagePanel className="cls" events={events} readMarkerEventId={events[6].getId()}
                     readMarkerVisible={true}
                 />, parentDiv);
 
@@ -147,7 +161,7 @@ describe('MessagePanel', function () {
 
         // first render with the RM in one place
         var mp = ReactDOM.render(
-                <MessagePanel className="cls" events={events} readMarkerEventId={events[4].getId()}
+                <WrappedMessagePanel className="cls" events={events} readMarkerEventId={events[4].getId()}
                     readMarkerVisible={true}
                 />, parentDiv);
 
@@ -159,7 +173,7 @@ describe('MessagePanel', function () {
 
         // now move the RM
         mp = ReactDOM.render(
-                <MessagePanel className="cls" events={events} readMarkerEventId={events[6].getId()}
+                <WrappedMessagePanel className="cls" events={events} readMarkerEventId={events[6].getId()}
                     readMarkerVisible={true}
                 />, parentDiv);
 
@@ -175,7 +189,7 @@ describe('MessagePanel', function () {
 
         // and move the RM again
         mp = ReactDOM.render(
-                <MessagePanel className="cls" events={events} readMarkerEventId={events[8].getId()}
+                <WrappedMessagePanel className="cls" events={events} readMarkerEventId={events[8].getId()}
                     readMarkerVisible={true}
                 />, parentDiv);
 
diff --git a/test/components/structures/TimelinePanel-test.js b/test/components/structures/TimelinePanel-test.js
index d8ded918f6..9c78a56359 100644
--- a/test/components/structures/TimelinePanel-test.js
+++ b/test/components/structures/TimelinePanel-test.js
@@ -33,6 +33,24 @@ var test_utils = require('test-utils');
 var ROOM_ID = '!room:localhost';
 var USER_ID = '@me:localhost';
 
+// wrap TimelinePanel with a component which provides the MatrixClient in the context.
+const WrappedTimelinePanel = React.createClass({
+    childContextTypes: {
+        matrixClient: React.PropTypes.object,
+    },
+
+    getChildContext: function() {
+        return {
+            matrixClient: peg.get(),
+        };
+    },
+
+    render: function() {
+        return <TimelinePanel ref="panel" {...this.props} />;
+    },
+});
+
+
 describe('TimelinePanel', function() {
     var sandbox;
     var timelineSet;
@@ -105,11 +123,12 @@ describe('TimelinePanel', function() {
         }
 
         var scrollDefer;
-        var panel = ReactDOM.render(
-                <TimelinePanel timelineSet={timelineSet} onScroll={() => {scrollDefer.resolve()}}
+        var rendered = ReactDOM.render(
+                <WrappedTimelinePanel timelineSet={timelineSet} onScroll={() => {scrollDefer.resolve()}}
                 />,
                 parentDiv,
         );
+        var panel = rendered.refs.panel;
         var scrollingDiv = ReactTestUtils.findRenderedDOMComponentWithClass(
             panel, "gm-scroll-view");
 
@@ -188,10 +207,11 @@ describe('TimelinePanel', function() {
             return q(true);
         });
 
-        var panel = ReactDOM.render(
-            <TimelinePanel timelineSet={timelineSet}/>,
+        var rendered = ReactDOM.render(
+            <WrappedTimelinePanel timelineSet={timelineSet}/>,
             parentDiv
         );
+        var panel = rendered.refs.panel;
 
         var messagePanel = ReactTestUtils.findRenderedComponentWithType(
             panel, sdk.getComponent('structures.MessagePanel'));
@@ -236,14 +256,14 @@ describe('TimelinePanel', function() {
         console.log("added events to timeline");
 
         var scrollDefer;
-        var panel = ReactDOM.render(
-            <TimelinePanel timelineSet={timelineSet} onScroll={() => {scrollDefer.resolve()}}
+        var rendered = ReactDOM.render(
+            <WrappedTimelinePanel timelineSet={timelineSet} onScroll={() => {scrollDefer.resolve()}}
                 timelineCap={TIMELINE_CAP}
             />,
             parentDiv
         );
         console.log("TimelinePanel rendered");
-
+        var panel = rendered.refs.panel;
         var messagePanel = ReactTestUtils.findRenderedComponentWithType(
             panel, sdk.getComponent('structures.MessagePanel'));
         var scrollingDiv = ReactTestUtils.findRenderedDOMComponentWithClass(
diff --git a/test/test-utils.js b/test/test-utils.js
index 1201daefe0..db405c2e1a 100644
--- a/test/test-utils.js
+++ b/test/test-utils.js
@@ -24,23 +24,49 @@ export function beforeEach(context) {
  * Stub out the MatrixClient, and configure the MatrixClientPeg object to
  * return it when get() is called.
  *
+ * TODO: once the components are updated to get their MatrixClients from
+ * the react context, we can get rid of this and just inject a test client
+ * via the context instead.
+ *
  * @returns {sinon.Sandbox}; remember to call sandbox.restore afterwards.
  */
 export function stubClient() {
     var sandbox = sinon.sandbox.create();
 
-    var client = {
+    var client = createTestClient();
+
+    // 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', 'replaceUsingCreds'];
+    for (var i = 0; i < methods.length; i++) {
+        sandbox.stub(peg, methods[i]);
+    }
+    // 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;
+}
+
+/**
+ * Create a stubbed-out MatrixClient
+ *
+ * @returns {object} MatrixClient stub
+ */
+export function createTestClient() {
+    return {
         getHomeserverUrl: sinon.stub(),
         getIdentityServerUrl: sinon.stub(),
 
         getPushActionsForEvent: sinon.stub(),
-        getRoom: sinon.stub().returns(this.mkStubRoom()),
+        getRoom: sinon.stub().returns(mkStubRoom()),
         getRooms: sinon.stub().returns([]),
         loginFlows: sinon.stub(),
         on: sinon.stub(),
         removeListener: sinon.stub(),
         isRoomEncrypted: sinon.stub().returns(false),
-        peekInRoom: sinon.stub().returns(q(this.mkStubRoom())),
+        peekInRoom: sinon.stub().returns(q(mkStubRoom())),
 
         paginateEventTimeline: sinon.stub().returns(q()),
         sendReadReceipt: sinon.stub().returns(q()),
@@ -59,22 +85,8 @@ export function stubClient() {
         sendHtmlMessage: () => q({}),
         getSyncState: () => "SYNCING",
     };
-
-    // 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', 'replaceUsingCreds'];
-    for (var i = 0; i < methods.length; i++) {
-        sandbox.stub(peg, methods[i]);
-    }
-    // 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;
 }
 
-
 /**
  * Create an Event.
  * @param {Object} opts Values for the event.

From b209cc551e0610624947347081044428f14dda85 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Tue, 15 Nov 2016 11:12:52 +0000
Subject: [PATCH 003/289] Update eventtiles when the events are decrypted

Events are sometimes decrypted after they arrive, so add an eventlistener for
it and update the tile.
---
 src/components/views/rooms/EventTile.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 375c00fed7..410ad2b953 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -146,6 +146,7 @@ module.exports = WithMatrixClient(React.createClass({
         this._suppressReadReceiptAnimation = false;
         this.props.matrixClient.on("deviceVerificationChanged",
                                  this.onDeviceVerificationChanged);
+        this.props.mxEvent.on("Event.decrypted", this._onDecrypted);
     },
 
     componentWillReceiveProps: function (nextProps) {
@@ -170,6 +171,15 @@ module.exports = WithMatrixClient(React.createClass({
         var client = this.props.matrixClient;
         client.removeListener("deviceVerificationChanged",
                               this.onDeviceVerificationChanged);
+        this.props.mxEvent.removeListener("Event.decrypted", this._onDecrypted);
+    },
+
+    /** called when the event is decrypted after we show it.
+     */
+    _onDecrypted: function() {
+        // we need to re-verify the sending device.
+        this._verifyEvent(this.props.mxEvent);
+        this.forceUpdate();
     },
 
     onDeviceVerificationChanged: function(userId, device) {

From 13f28e53e1d7e55157e8ae00936b355579004f60 Mon Sep 17 00:00:00 2001
From: Mark Haines <mjark@negativecurvature.net>
Date: Tue, 15 Nov 2016 11:22:39 +0000
Subject: [PATCH 004/289] Generate thumbnails when sending m.image and m.video
 messages. (#555)

* Send a thumbnail when sending a m.image

* Use the 'thumbnail_file' when displaying encrypted images

* Whitespace

* Generate thumbnails for m.video

* Fix docstring, remove unused vars, use const

* Don't change the upload promise behaviour

* Polyfill for Canvas.toBlob to support older browsers

* Lowercase for integer types in jsdoc
---
 package.json                                |   1 +
 src/ContentMessages.js                      | 260 +++++++++++++++-----
 src/components/views/messages/MImageBody.js |  25 +-
 3 files changed, 219 insertions(+), 67 deletions(-)

diff --git a/package.json b/package.json
index 34bb87eb79..7d822fae89 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
   },
   "dependencies": {
     "babel-runtime": "^6.11.6",
+    "blueimp-canvas-to-blob": "^3.5.0",
     "browser-encrypt-attachment": "^0.1.0",
     "browser-request": "^0.3.3",
     "classnames": "^2.1.2",
diff --git a/src/ContentMessages.js b/src/ContentMessages.js
index 28c28e875e..e2f9086f66 100644
--- a/src/ContentMessages.js
+++ b/src/ContentMessages.js
@@ -25,22 +25,87 @@ var Modal = require('./Modal');
 
 var encrypt = require("browser-encrypt-attachment");
 
-function infoForImageFile(imageFile) {
-    var deferred = q.defer();
+// Polyfill for Canvas.toBlob API using Canvas.toDataURL
+require("blueimp-canvas-to-blob");
+
+const MAX_WIDTH = 800;
+const MAX_HEIGHT = 600;
+
+
+/**
+ * Create a thumbnail for a image DOM element.
+ * The image will be smaller than MAX_WIDTH and MAX_HEIGHT.
+ * The thumbnail will have the same aspect ratio as the original.
+ * Draws the element into a canvas using CanvasRenderingContext2D.drawImage
+ * Then calls Canvas.toBlob to get a blob object for the image data.
+ *
+ * Since it needs to calculate the dimensions of the source image and the
+ * thumbnailed image it returns an info object filled out with information
+ * about the original image and the thumbnail.
+ *
+ * @param {HTMLElement} element The element to thumbnail.
+ * @param {integer} inputWidth The width of the image in the input element.
+ * @param {integer} inputHeight the width of the image in the input element.
+ * @param {String} mimeType The mimeType to save the blob as.
+ * @return {Promise} A promise that resolves with an object with an info key
+ *  and a thumbnail key.
+ */
+function createThumbnail(element, inputWidth, inputHeight, mimeType) {
+    const deferred = q.defer();
+
+    var targetWidth = inputWidth;
+    var targetHeight = inputHeight;
+    if (targetHeight > MAX_HEIGHT) {
+        targetWidth = Math.floor(targetWidth * (MAX_HEIGHT / targetHeight));
+        targetHeight = MAX_HEIGHT;
+    }
+    if (targetWidth > MAX_WIDTH) {
+        targetHeight = Math.floor(targetHeight * (MAX_WIDTH / targetWidth));
+        targetWidth = MAX_WIDTH;
+    }
+
+    const canvas = document.createElement("canvas");
+    canvas.width = targetWidth;
+    canvas.height = targetHeight;
+    canvas.getContext("2d").drawImage(element, 0, 0, targetWidth, targetHeight);
+    canvas.toBlob(function(thumbnail) {
+        deferred.resolve({
+            info: {
+                thumbnail_info: {
+                    w: targetWidth,
+                    h: targetHeight,
+                    mimetype: thumbnail.type,
+                    size: thumbnail.size,
+                },
+                w: inputWidth,
+                h: inputHeight,
+            },
+            thumbnail: thumbnail
+        });
+    }, mimeType);
+
+    return deferred.promise;
+}
+
+/**
+ * Load a file into a newly created image element.
+ *
+ * @param {File} file The file to load in an image element.
+ * @return {Promise} A promise that resolves with the html image element.
+ */
+function loadImageElement(imageFile) {
+    const deferred = q.defer();
 
     // Load the file into an html element
-    var img = document.createElement("img");
+    const img = document.createElement("img");
 
-    var reader = new FileReader();
+    const reader = new FileReader();
     reader.onload = function(e) {
         img.src = e.target.result;
 
-        // Once ready, returns its size
+        // Once ready, create a thumbnail
         img.onload = function() {
-            deferred.resolve({
-                w: img.width,
-                h: img.height
-            });
+            deferred.resolve(img);
         };
         img.onerror = function(e) {
             deferred.reject(e);
@@ -54,22 +119,53 @@ function infoForImageFile(imageFile) {
     return deferred.promise;
 }
 
-function infoForVideoFile(videoFile) {
-    var deferred = q.defer();
+/**
+ * Read the metadata for an image file and create and upload a thumbnail of the image.
+ *
+ * @param {MatrixClient} matrixClient A matrixClient to upload the thumbnail with.
+ * @param {String} roomId The ID of the room the image will be uploaded in.
+ * @param {File} The image to read and thumbnail.
+ * @return {Promise} A promise that resolves with the attachment info.
+ */
+function infoForImageFile(matrixClient, roomId, imageFile) {
+    var thumbnailType = "image/png";
+    if (imageFile.type == "image/jpeg") {
+        thumbnailType = "image/jpeg";
+    }
+
+    var imageInfo;
+    return loadImageElement(imageFile).then(function(img) {
+        return createThumbnail(img, img.width, img.height, thumbnailType);
+    }).then(function(result) {
+        imageInfo = result.info;
+        return uploadFile(matrixClient, roomId, result.thumbnail);
+    }).then(function(result) {
+        imageInfo.thumbnail_url = result.url;
+        imageInfo.thumbnail_file = result.file;
+        return imageInfo;
+    });
+}
+
+/**
+ * Load a file into a newly created video element.
+ *
+ * @param {File} file The file to load in an video element.
+ * @return {Promise} A promise that resolves with the video image element.
+ */
+function loadVideoElement(videoFile) {
+    const deferred = q.defer();
 
     // Load the file into an html element
-    var video = document.createElement("video");
+    const video = document.createElement("video");
 
-    var reader = new FileReader();
+    const reader = new FileReader();
     reader.onload = function(e) {
         video.src = e.target.result;
 
         // Once ready, returns its size
-        video.onloadedmetadata = function() {
-            deferred.resolve({
-                w: video.videoWidth,
-                h: video.videoHeight
-            });
+        // Wait until we have enough data to thumbnail the first frame.
+        video.onloadeddata = function() {
+            deferred.resolve(video);
         };
         video.onerror = function(e) {
             deferred.reject(e);
@@ -83,6 +179,30 @@ function infoForVideoFile(videoFile) {
     return deferred.promise;
 }
 
+/**
+ * Read the metadata for a video file and create and upload a thumbnail of the video.
+ *
+ * @param {MatrixClient} matrixClient A matrixClient to upload the thumbnail with.
+ * @param {String} roomId The ID of the room the video will be uploaded to.
+ * @param {File} The video to read and thumbnail.
+ * @return {Promise} A promise that resolves with the attachment info.
+ */
+function infoForVideoFile(matrixClient, roomId, videoFile) {
+    const thumbnailType = "image/jpeg";
+
+    var videoInfo;
+    return loadVideoElement(videoFile).then(function(video) {
+        return createThumbnail(video, video.videoWidth, video.videoHeight, thumbnailType);
+    }).then(function(result) {
+        videoInfo = result.info;
+        return uploadFile(matrixClient, roomId, result.thumbnail);
+    }).then(function(result) {
+        videoInfo.thumbnail_url = result.url;
+        videoInfo.thumbnail_file = result.file;
+        return videoInfo;
+    });
+}
+
 /**
  * Read the file as an ArrayBuffer.
  * @return {Promise} A promise that resolves with an ArrayBuffer when the file
@@ -101,6 +221,48 @@ function readFileAsArrayBuffer(file) {
     return deferred.promise;
 }
 
+/**
+ * Upload the file to the content repository.
+ * If the room is encrypted then encrypt the file before uploading.
+ *
+ * @param {MatrixClient} matrixClient The matrix client to upload the file with.
+ * @param {String} roomId The ID of the room being uploaded to.
+ * @param {File} file The file to upload.
+ * @return {Promise} A promise that resolves with an object.
+ *  If the file is unencrypted then the object will have a "url" key.
+ *  If the file is encrypted then the object will have a "file" key.
+ */
+function uploadFile(matrixClient, roomId, file) {
+    if (matrixClient.isRoomEncrypted(roomId)) {
+        // If the room is encrypted then encrypt the file before uploading it.
+        // First read the file into memory.
+        return readFileAsArrayBuffer(file).then(function(data) {
+            // Then encrypt the file.
+            return encrypt.encryptAttachment(data);
+        }).then(function(encryptResult) {
+            // Record the information needed to decrypt the attachment.
+            const encryptInfo = encryptResult.info;
+            // Pass the encrypted data as a Blob to the uploader.
+            const blob = new Blob([encryptResult.data]);
+            return matrixClient.uploadContent(blob).then(function(url) {
+                // If the attachment is encrypted then bundle the URL along
+                // with the information needed to decrypt the attachment and
+                // add it under a file key.
+                encryptInfo.url = url;
+                if (file.type) {
+                    encryptInfo.mimetype = file.type;
+                }
+                return {"file": encryptInfo};
+            });
+        });
+    } else {
+        return matrixClient.uploadContent(file).then(function(url) {
+            // If the attachment isn't encrypted then include the URL directly.
+            return {"url": url};
+        });
+    }
+}
+
 
 class ContentMessages {
     constructor() {
@@ -109,7 +271,7 @@ class ContentMessages {
     }
 
     sendContentToRoom(file, roomId, matrixClient) {
-        var content = {
+        const content = {
             body: file.name,
             info: {
                 size: file.size,
@@ -121,13 +283,14 @@ class ContentMessages {
             content.info.mimetype = file.type;
         }
 
-        var def = q.defer();
+        const def = q.defer();
         if (file.type.indexOf('image/') == 0) {
             content.msgtype = 'm.image';
-            infoForImageFile(file).then(imageInfo=>{
+            infoForImageFile(matrixClient, roomId, file).then(imageInfo=>{
                 extend(content.info, imageInfo);
                 def.resolve();
             }, error=>{
+                console.error(error);
                 content.msgtype = 'm.file';
                 def.resolve();
             });
@@ -136,7 +299,7 @@ class ContentMessages {
             def.resolve();
         } else if (file.type.indexOf('video/') == 0) {
             content.msgtype = 'm.video';
-            infoForVideoFile(file).then(videoInfo=>{
+            infoForVideoFile(matrixClient, roomId, file).then(videoInfo=>{
                 extend(content.info, videoInfo);
                 def.resolve();
             }, error=>{
@@ -148,35 +311,23 @@ class ContentMessages {
             def.resolve();
         }
 
-        var upload = {
+        const upload = {
             fileName: file.name,
             roomId: roomId,
             total: 0,
-            loaded: 0
+            loaded: 0,
         };
         this.inprogress.push(upload);
         dis.dispatch({action: 'upload_started'});
 
-        var encryptInfo = null;
         var error;
-        var self = this;
         return def.promise.then(function() {
-            if (matrixClient.isRoomEncrypted(roomId)) {
-                // If the room is encrypted then encrypt the file before uploading it.
-                // First read the file into memory.
-                upload.promise = readFileAsArrayBuffer(file).then(function(data) {
-                    // Then encrypt the file.
-                    return encrypt.encryptAttachment(data);
-                }).then(function(encryptResult) {
-                    // Record the information needed to decrypt the attachment.
-                    encryptInfo = encryptResult.info;
-                    // Pass the encrypted data as a Blob to the uploader.
-                    var blob = new Blob([encryptResult.data]);
-                    return matrixClient.uploadContent(blob);
-                });
-            } else {
-                upload.promise = matrixClient.uploadContent(file);
-            }
+            upload.promise = uploadFile(
+                matrixClient, roomId, file
+            ).then(function(result) {
+                content.file = result.file;
+                content.url = result.url;
+            });
             return upload.promise;
         }).progress(function(ev) {
             if (ev) {
@@ -185,19 +336,6 @@ class ContentMessages {
                 dis.dispatch({action: 'upload_progress', upload: upload});
             }
         }).then(function(url) {
-            if (encryptInfo === null) {
-                // If the attachment isn't encrypted then include the URL directly.
-                content.url = url;
-            } else {
-                // If the attachment is encrypted then bundle the URL along
-                // with the information needed to decrypt the attachment and
-                // add it under a file key.
-                encryptInfo.url = url;
-                if (file.type) {
-                    encryptInfo.mimetype = file.type;
-                }
-                content.file = encryptInfo;
-            }
             return matrixClient.sendMessage(roomId, content);
         }, function(err) {
             error = err;
@@ -212,12 +350,12 @@ class ContentMessages {
                     description: desc
                 });
             }
-        }).finally(function() {
-            var inprogressKeys = Object.keys(self.inprogress);
-            for (var i = 0; i < self.inprogress.length; ++i) {
+        }).finally(() => {
+            const inprogressKeys = Object.keys(this.inprogress);
+            for (var i = 0; i < this.inprogress.length; ++i) {
                 var k = inprogressKeys[i];
-                if (self.inprogress[k].promise === upload.promise) {
-                    self.inprogress.splice(k, 1);
+                if (this.inprogress[k].promise === upload.promise) {
+                    this.inprogress.splice(k, 1);
                     break;
                 }
             }
@@ -235,7 +373,7 @@ class ContentMessages {
     }
 
     cancelUpload(promise) {
-        var inprogressKeys = Object.keys(this.inprogress);
+        const inprogressKeys = Object.keys(this.inprogress);
         var upload;
         for (var i = 0; i < this.inprogress.length; ++i) {
             var k = inprogressKeys[i];
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 4a5dbab51e..6f46544bf4 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -24,6 +24,7 @@ import Modal from '../../../Modal';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import {decryptFile} from '../../../utils/DecryptFile';
+import q from 'q';
 
 module.exports = React.createClass({
     displayName: 'MImageBody',
@@ -36,6 +37,7 @@ module.exports = React.createClass({
     getInitialState: function() {
         return {
             decryptedUrl: null,
+            decryptedThumbnailUrl: null,
         };
     },
 
@@ -94,7 +96,9 @@ module.exports = React.createClass({
     _getThumbUrl: function() {
         const content = this.props.mxEvent.getContent();
         if (content.file !== undefined) {
-            // TODO: Decrypt and use the thumbnail file if one is present.
+            if (this.state.decryptedThumbnailUrl) {
+                return this.state.decryptedThumbnailUrl;
+            }
             return this.state.decryptedUrl;
         } else {
             return MatrixClientPeg.get().mxcUrlToHttp(content.url, 800, 600);
@@ -106,15 +110,24 @@ module.exports = React.createClass({
         this.fixupHeight();
         const content = this.props.mxEvent.getContent();
         if (content.file !== undefined && this.state.decryptedUrl === null) {
-            decryptFile(content.file).done((url) => {
-                this.setState({
-                    decryptedUrl: url,
+            var thumbnailPromise = q(null);
+            if (content.info.thumbnail_file) {
+                thumbnailPromise = decryptFile(
+                    content.info.thumbnail_file
+                );
+            }
+            thumbnailPromise.then((thumbnailUrl) => {
+                decryptFile(content.file).then((contentUrl) => {
+                    this.setState({
+                        decryptedUrl: contentUrl,
+                        decryptedThumbnailUrl: thumbnailUrl,
+                    });
                 });
-            }, (err) => {
+            }).catch((err) => {
                 console.warn("Unable to decrypt attachment: ", err)
                 // Set a placeholder image when we can't decrypt the image.
                 this.refs.image.src = "img/warning.svg";
-            });
+            }).done();
         }
     },
 

From a3d4ed5aee53942561d49350c783e3d9a2597cfd Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Tue, 15 Nov 2016 12:31:17 +0000
Subject: [PATCH 005/289] Show an open padlock for unencrypted rooms

Also, add a tooltip, and enlarge the img to 12px wide, because the open padlock
looked silly at 10px and they both look fine at 12px
---
 src/components/views/rooms/MessageComposer.js | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index e78cf0b13e..ee9c49d52a 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -222,13 +222,22 @@ export default class MessageComposer extends React.Component {
             </div>
         );
 
+        let e2eimg, e2etitle;
+
         if (MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId)) {
             // FIXME: show a /!\ if there are untrusted devices in the room...
-            controls.push(
-                <img key="e2eIcon" className="mx_MessageComposer_e2eIcon" src="img/e2e-verified.svg" width="10" height="12" alt="Encrypted room"/>
-            );
+            e2eimg = 'img/e2e-verified.svg';
+            e2etitle = 'Encrypted room';
+        } else {
+            e2eimg = 'img/e2e-unencrypted.svg';
+            e2etitle = 'Unencrypted room';
         }
 
+        controls.push(
+            <img key="e2eIcon" className="mx_MessageComposer_e2eIcon" src={e2eimg} width="12" height="12"
+                alt={e2etitle} title={e2etitle}
+            />
+        );
         var callButton, videoCallButton, hangupButton;
         if (this.props.callState && this.props.callState !== 'ended') {
             hangupButton =

From 595493e5bb3354d81654bbcda136c4cc68f30c7a Mon Sep 17 00:00:00 2001
From: Mark Haines <mjark@negativecurvature.net>
Date: Tue, 15 Nov 2016 15:54:14 +0000
Subject: [PATCH 006/289] Clean up MFileBody.presentableTextForFile

---
 src/components/views/messages/MFileBody.js | 30 +++++++++++++---------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index e8c97e5f44..3f29915561 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -32,24 +32,30 @@ module.exports = React.createClass({
         };
     },
 
+    /**
+     * Extracts a human readable label for the file attachment to use as
+     * link text.
+     *
+     * @params {Object} content The "content" key of the matrix event.
+     * @return {string} the human readable link text for the attachment.
+     */
     presentableTextForFile: function(content) {
         var linkText = 'Attachment';
         if (content.body && content.body.length > 0) {
+            // The content body should be the name of the file including a
+            // file extension.
             linkText = content.body;
         }
 
-        var additionals = [];
-        if (content.info) {
-            // if (content.info.mimetype && content.info.mimetype.length > 0) {
-            //    additionals.push(content.info.mimetype);
-            // }
-            if (content.info.size) {
-                additionals.push(filesize(content.info.size));
-            }
-        }
-
-        if (additionals.length > 0) {
-            linkText += ' (' + additionals.join(', ') + ')';
+        if (content.info && content.info.size) {
+            // If we know the size of the file then add it as human readable
+            // string to the end of the link text so that the user knows how
+            // big a file they are downloading.
+            // The content.info also contains a MIME-type but we don't display
+            // it since it is "ugly", users generally aren't aware what it
+            // means and the type of the attachment can usually be inferrered
+            // from the file extension.
+            linkText += ' (' + filesize(content.info.size) + ')';
         }
         return linkText;
     },

From 6ccc825f0d833c0e0c6f92ccce1e8bd50b0c2f81 Mon Sep 17 00:00:00 2001
From: Mark Haines <mjark@negativecurvature.net>
Date: Wed, 16 Nov 2016 14:16:51 +0000
Subject: [PATCH 007/289] Cache the tinted SVGs for MFileBody as data URLs
 (#559)

* Use a list of callbacks for things that need tinting.

Rather than gutwrenching the internals of TintableSVG inside the Tinter.

* Share a data: url for the tinted download svg in MFileBody

* Check image exists before tinting

* Add comments

* Use fetch+DomParser rather than XMLHttpRequest

* Remove comment about XMLHttpRequest
---
 src/Tinter.js                                | 29 +++++++---
 src/components/views/elements/TintableSvg.js |  9 ++++
 src/components/views/messages/MFileBody.js   | 56 +++++++++++++++++++-
 3 files changed, 85 insertions(+), 9 deletions(-)

diff --git a/src/Tinter.js b/src/Tinter.js
index 336fb90fa2..534a1d810b 100644
--- a/src/Tinter.js
+++ b/src/Tinter.js
@@ -153,7 +153,25 @@ function rgbToHex(rgb) {
     return '#' + (0x1000000 + val).toString(16).slice(1)
 }
 
+// List of functions to call when the tint changes.
+const tintables = [];
+
 module.exports = {
+    /**
+     * Register a callback to fire when the tint changes.
+     * This is used to rewrite the tintable SVGs with the new tint.
+     *
+     * It's not possible to unregister a tintable callback. So this can only be
+     * used to register a static callback. If a set of tintables will change
+     * over time then the best bet is to register a single callback for the
+     * entire set.
+     *
+     * @param {Function} tintable Function to call when the tint changes.
+     */
+    registerTintable : function(tintable) {
+        tintables.push(tintable);
+    },
+
     tint: function(primaryColor, secondaryColor, tertiaryColor) {
 
         if (!cached) {
@@ -201,12 +219,9 @@ module.exports = {
 
         // tell all the SVGs to go fix themselves up
         // we don't do this as a dispatch otherwise it will visually lag
-        var TintableSvg = sdk.getComponent("elements.TintableSvg");
-        if (TintableSvg.mounts) {
-            Object.keys(TintableSvg.mounts).forEach((id) => {
-                TintableSvg.mounts[id].tint();
-            });
-        }
+        tintables.forEach(function(tintable) {
+            tintable();
+        });
     },
 
     // XXX: we could just move this all into TintableSvg, but as it's so similar
@@ -265,5 +280,5 @@ module.exports = {
             svgFixup.node.setAttribute(svgFixup.attr, colors[svgFixup.index]);
         }
         if (DEBUG) console.log("applySvgFixups end");
-    },
+    }
 };
diff --git a/src/components/views/elements/TintableSvg.js b/src/components/views/elements/TintableSvg.js
index e8be5f3415..0157131506 100644
--- a/src/components/views/elements/TintableSvg.js
+++ b/src/components/views/elements/TintableSvg.js
@@ -74,4 +74,13 @@ var TintableSvg = React.createClass({
     }
 });
 
+// Register with the Tinter so that we will be told if the tint changes
+Tinter.registerTintable(function() {
+    if (TintableSvg.mounts) {
+        Object.keys(TintableSvg.mounts).forEach((id) => {
+            TintableSvg.mounts[id].tint();
+        });
+    }
+});
+
 module.exports = TintableSvg;
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 3f29915561..60b0653f1f 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -21,7 +21,42 @@ import filesize from 'filesize';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import sdk from '../../../index';
 import {decryptFile} from '../../../utils/DecryptFile';
+import Tinter from '../../../Tinter';
+import 'isomorphic-fetch';
+import q from 'q';
 
+// A cached tinted copy of "img/download.svg"
+var tintedDownloadImageURL;
+// Track a list of mounted MFileBody instances so that we can update
+// the "img/download.svg" when the tint changes.
+var nextMountId = 0;
+const mounts = {};
+
+/**
+ * Updates the tinted copy of "img/download.svg" when the tint changes.
+ */
+function updateTintedDownloadImage() {
+    // Download the svg as an XML document.
+    // We could cache the XML response here, but since the tint rarely changes
+    // it's probably not worth it.
+    q(fetch("img/download.svg")).then(function(response) {
+        return response.text();
+    }).then(function(svgText) {
+        const svg = new DOMParser().parseFromString(svgText, "image/svg+xml");
+        // Apply the fixups to the XML.
+        const fixups = Tinter.calcSvgFixups([{contentDocument: svg}]);
+        Tinter.applySvgFixups(fixups);
+        // Encoded the fixed up SVG as a data URL.
+        const svgString = new XMLSerializer().serializeToString(svg);
+        tintedDownloadImageURL = "data:image/svg+xml;base64," + window.btoa(svgString);
+        // Notify each mounted MFileBody that the URL has changed.
+        Object.keys(mounts).forEach(function(id) {
+            mounts[id].tint();
+        });
+    }).done();
+}
+
+Tinter.registerTintable(updateTintedDownloadImage);
 
 module.exports = React.createClass({
     displayName: 'MFileBody',
@@ -70,6 +105,12 @@ module.exports = React.createClass({
     },
 
     componentDidMount: function() {
+        // Add this to the list of mounted components to receive notifications
+        // when the tint changes.
+        this.id = nextMountId++;
+        mounts[this.id] = this;
+        this.tint();
+        // Check whether we need to decrypt the file content.
         const content = this.props.mxEvent.getContent();
         if (content.file !== undefined && this.state.decryptedUrl === null) {
             decryptFile(content.file).done((url) => {
@@ -84,12 +125,23 @@ module.exports = React.createClass({
         }
     },
 
+    componentWillUnmount: function() {
+        // Remove this from the list of mounted components
+        delete mounts[this.id];
+    },
+
+    tint: function() {
+        // Update our tinted copy of "img/download.svg"
+        if (this.refs.downloadImage) {
+            this.refs.downloadImage.src = tintedDownloadImageURL;
+        }
+    },
+
     render: function() {
         const content = this.props.mxEvent.getContent();
 
         const text = this.presentableTextForFile(content);
 
-        var TintableSvg = sdk.getComponent("elements.TintableSvg");
         if (content.file !== undefined && this.state.decryptedUrl === null) {
 
             // Need to decrypt the attachment
@@ -155,7 +207,7 @@ module.exports = React.createClass({
                     <span className="mx_MFileBody">
                         <div className="mx_MImageBody_download">
                             <a href={contentUrl} target="_blank" rel="noopener" download={downloadAttr}>
-                                <TintableSvg src="img/download.svg" width="12" height="14"/>
+                                <img src={tintedDownloadImageURL} width="12" height="14" ref="downloadImage"/>
                                 Download {text}
                             </a>
                         </div>

From b718f1542c188a59b668d22a9434d8b77532d678 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukebarnard1@users.noreply.github.com>
Date: Wed, 16 Nov 2016 14:25:52 +0000
Subject: [PATCH 008/289] Fix infinite loop when there are a lot of invisible
 events (#554)

Instead of using a window of a fixed number of events, unpaginate based on the distance of the viewport from the end of the scroll range.

The ScrollPanel uses the scrollTokens to convey to its parent (the TimelinePanel, in this case) the point to unpaginate up to. The TimelinePanel then takes a chunk of events off the front or back of `this.state.events` using `timelineWindow.unpaginate`.

Fixes https://github.com/vector-im/vector-web/issues/2020
---
 src/components/structures/MessagePanel.js     |   8 +-
 src/components/structures/ScrollPanel.js      | 102 +++++++++++++++++-
 src/components/structures/TimelinePanel.js    |  29 ++++-
 .../structures/TimelinePanel-test.js          |   4 +-
 4 files changed, 137 insertions(+), 6 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index ef4d10e66b..ee9d5f1ff4 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -321,8 +321,11 @@ module.exports = React.createClass({
                 }
 
                 ret.push(
-                    <MemberEventListSummary key={mxEv.getId()} events={summarisedEvents}>
-                        {eventTiles}
+                    <MemberEventListSummary
+                        key={mxEv.getId()}
+                        events={summarisedEvents}
+                        data-scroll-token={eventId}>
+                            {eventTiles}
                     </MemberEventListSummary>
                 );
                 continue;
@@ -564,6 +567,7 @@ module.exports = React.createClass({
                     onScroll={ this.props.onScroll }
                     onResize={ this.onResize }
                     onFillRequest={ this.props.onFillRequest }
+                    onUnfillRequest={ this.props.onUnfillRequest }
                     style={ style }
                     stickyBottom={ this.props.stickyBottom }>
                 {topSpinner}
diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js
index 6970cd190c..36dbf041e8 100644
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.js
@@ -23,6 +23,10 @@ var KeyCode = require('../../KeyCode');
 var DEBUG_SCROLL = false;
 // var DEBUG_SCROLL = true;
 
+// The amount of extra scroll distance to allow prior to unfilling.
+// See _getExcessHeight.
+const UNPAGINATION_PADDING = 500;
+
 if (DEBUG_SCROLL) {
     // using bind means that we get to keep useful line numbers in the console
     var debuglog = console.log.bind(console);
@@ -101,6 +105,17 @@ module.exports = React.createClass({
          */
         onFillRequest: React.PropTypes.func,
 
+        /* onUnfillRequest(backwards): a callback which is called on scroll when
+         * there are children elements that are far out of view and could be removed
+         * without causing pagination to occur.
+         *
+         * This function should accept a boolean, which is true to indicate the back/top
+         * of the panel and false otherwise, and a scroll token, which refers to the
+         * first element to remove if removing from the front/bottom, and last element
+         * to remove if removing from the back/top.
+         */
+        onUnfillRequest: React.PropTypes.func,
+
         /* onScroll: a callback which is called whenever any scroll happens.
          */
         onScroll: React.PropTypes.func,
@@ -124,6 +139,7 @@ module.exports = React.createClass({
             stickyBottom: true,
             startAtBottom: true,
             onFillRequest: function(backwards) { return q(false); },
+            onUnfillRequest: function(backwards, scrollToken) {},
             onScroll: function() {},
         };
     },
@@ -226,6 +242,46 @@ module.exports = React.createClass({
         return sn.scrollHeight - Math.ceil(sn.scrollTop) <= sn.clientHeight + 3;
     },
 
+    // returns the vertical height in the given direction that can be removed from
+    // the content box (which has a height of scrollHeight, see checkFillState) without
+    // pagination occuring.
+    //
+    // padding* = UNPAGINATION_PADDING
+    //
+    // ### Region determined as excess.
+    //
+    //   .---------.                        -              -
+    //   |#########|                        |              |
+    //   |#########|   -                    |  scrollTop   |
+    //   |         |   | padding*           |              |
+    //   |         |   |                    |              |
+    // .-+---------+-. -  -                 |              |
+    // : |         | :    |                 |              |
+    // : |         | :    |  clientHeight   |              |
+    // : |         | :    |                 |              |
+    // .-+---------+-.    -                 -              |
+    // | |         | |    |                                |
+    // | |         | |    |  clientHeight                  | scrollHeight
+    // | |         | |    |                                |
+    // `-+---------+-'    -                                |
+    // : |         | :    |                                |
+    // : |         | :    |  clientHeight                  |
+    // : |         | :    |                                |
+    // `-+---------+-' -  -                                |
+    //   |         |   | padding*                          |
+    //   |         |   |                                   |
+    //   |#########|   -                                   |
+    //   |#########|                                       |
+    //   `---------'                                       -
+    _getExcessHeight: function(backwards) {
+        var sn = this._getScrollNode();
+        if (backwards) {
+            return sn.scrollTop - sn.clientHeight - UNPAGINATION_PADDING;
+        } else {
+            return sn.scrollHeight - (sn.scrollTop + 2*sn.clientHeight) - UNPAGINATION_PADDING;
+        }
+    },
+
     // check the scroll state and send out backfill requests if necessary.
     checkFillState: function() {
         if (this.unmounted) {
@@ -268,6 +324,47 @@ module.exports = React.createClass({
         }
     },
 
+    // check if unfilling is possible and send an unfill request if necessary
+    _checkUnfillState: function(backwards) {
+        let excessHeight = this._getExcessHeight(backwards);
+        if (excessHeight <= 0) {
+            return;
+        }
+        var itemlist = this.refs.itemlist;
+        var tiles = itemlist.children;
+
+        // The scroll token of the first/last tile to be unpaginated
+        let markerScrollToken = null;
+
+        // Subtract clientHeights to simulate the events being unpaginated whilst counting
+        // the events to be unpaginated.
+        if (backwards) {
+            // Iterate forwards from start of tiles, subtracting event tile height
+            let i = 0;
+            while (i < tiles.length && excessHeight > tiles[i].clientHeight) {
+                excessHeight -= tiles[i].clientHeight;
+                if (tiles[i].dataset.scrollToken) {
+                    markerScrollToken = tiles[i].dataset.scrollToken;
+                }
+                i++;
+            }
+        } else {
+            // Iterate backwards from end of tiles, subtracting event tile height
+            let i = tiles.length - 1;
+            while (i > 0 && excessHeight > tiles[i].clientHeight) {
+                excessHeight -= tiles[i].clientHeight;
+                if (tiles[i].dataset.scrollToken) {
+                    markerScrollToken = tiles[i].dataset.scrollToken;
+                }
+                i--;
+            }
+        }
+
+        if (markerScrollToken) {
+            this.props.onUnfillRequest(backwards, markerScrollToken);
+        }
+    },
+
     // check if there is already a pending fill request. If not, set one off.
     _maybeFill: function(backwards) {
         var dir = backwards ? 'b' : 'f';
@@ -285,7 +382,7 @@ module.exports = React.createClass({
         this._pendingFillRequests[dir] = true;
         var fillPromise;
         try {
-             fillPromise = this.props.onFillRequest(backwards);
+            fillPromise = this.props.onFillRequest(backwards);
         } catch (e) {
             this._pendingFillRequests[dir] = false;
             throw e;
@@ -294,6 +391,9 @@ module.exports = React.createClass({
         q.finally(fillPromise, () => {
             this._pendingFillRequests[dir] = false;
         }).then((hasMoreResults) => {
+            // Unpaginate once filling is complete
+            this._checkUnfillState(!backwards);
+
             debuglog("ScrollPanel: "+dir+" fill complete; hasMoreResults:"+hasMoreResults);
             if (hasMoreResults) {
                 // further pagination requests have been disabled until now, so
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index 06e38ffb5a..7101a8b80c 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -108,7 +108,9 @@ var TimelinePanel = React.createClass({
 
     getDefaultProps: function() {
         return {
-            timelineCap: 250,
+            // By default, disable the timelineCap in favour of unpaginating based on
+            // event tile heights. (See _unpaginateEvents)
+            timelineCap: Number.MAX_VALUE,
             className: 'mx_RoomView_messagePanel',
         };
     },
@@ -245,6 +247,30 @@ var TimelinePanel = React.createClass({
         }
     },
 
+    onMessageListUnfillRequest: function(backwards, scrollToken) {
+        let dir = backwards ? EventTimeline.BACKWARDS : EventTimeline.FORWARDS;
+        debuglog("TimelinePanel: unpaginating events in direction", dir);
+
+        // All tiles are inserted by MessagePanel to have a scrollToken === eventId
+        let eventId = scrollToken;
+
+        let marker = this.state.events.findIndex(
+            (ev) => {
+                return ev.getId() === eventId;
+            }
+        );
+
+        let count = backwards ? marker + 1 : this.state.events.length - marker;
+
+        if (count > 0) {
+            debuglog("TimelinePanel: Unpaginating", count, "in direction", dir);
+            this._timelineWindow._unpaginate(count, backwards);
+            this.setState({
+                events: this._getEvents(),
+            });
+        }
+    },
+
     // set off a pagination request.
     onMessageListFillRequest: function(backwards) {
         var dir = backwards ? EventTimeline.BACKWARDS : EventTimeline.FORWARDS;
@@ -984,6 +1010,7 @@ var TimelinePanel = React.createClass({
                     stickyBottom={ stickyBottom }
                     onScroll={ this.onMessageListScroll }
                     onFillRequest={ this.onMessageListFillRequest }
+                    onUnfillRequest={ this.onMessageListUnfillRequest }
                     opacity={ this.props.opacity }
                     className={ this.props.className }
                     tileShape={ this.props.tileShape }
diff --git a/test/components/structures/TimelinePanel-test.js b/test/components/structures/TimelinePanel-test.js
index 9c78a56359..a6d2e3f184 100644
--- a/test/components/structures/TimelinePanel-test.js
+++ b/test/components/structures/TimelinePanel-test.js
@@ -321,7 +321,7 @@ describe('TimelinePanel', function() {
             expect(messagePanel.props.suppressFirstDateSeparator).toBe(false);
             var events = scryEventTiles(panel);
             expect(events[0].props.mxEvent).toBe(timeline.getEvents()[0]);
-            expect(events.length).toEqual(TIMELINE_CAP);
+            expect(events.length).toBeLessThanOrEqualTo(TIMELINE_CAP);
 
             // we should now be able to scroll down, and paginate in the other
             // direction.
@@ -339,7 +339,7 @@ describe('TimelinePanel', function() {
             expect(messagePanel.props.suppressFirstDateSeparator).toBe(true);
 
             var events = scryEventTiles(panel);
-            expect(events.length).toEqual(TIMELINE_CAP);
+            expect(events.length).toBeLessThanOrEqualTo(TIMELINE_CAP);
 
             // we don't really know what the first event tile will be, since that
             // depends on how much the timelinepanel decides to paginate.

From beecbc7cd720dc3e255220d314a79d9dd362c566 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukebarnard1@users.noreply.github.com>
Date: Wed, 16 Nov 2016 14:42:30 +0000
Subject: [PATCH 009/289] Fix join/part collapsing regressions (#553)

* Fix join/part collapsing regressions

* Simplify loop

* Explain e,e

* Explain return null in _renderSummary

* Kill it properly

* Move . to _renderSummary

* Only use the first and last events to decide whether a net change has occured

* Do not sort events by TS before summarising

* fix loop and comment

* remove data-number-events

* Better explanation comment in _renderSummary

* Less tortuous comment
---
 src/components/structures/MessagePanel.js     | 32 ++++++++++-----
 src/components/views/avatars/MemberAvatar.js  |  4 +-
 .../views/elements/MemberEventListSummary.js  | 41 ++++++++++++++-----
 3 files changed, 53 insertions(+), 24 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index ee9d5f1ff4..1e0db2321d 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -229,6 +229,7 @@ module.exports = React.createClass({
 
     _getEventTiles: function() {
         var EventTile = sdk.getComponent('rooms.EventTile');
+        var DateSeparator = sdk.getComponent('messages.DateSeparator');
         const MemberEventListSummary = sdk.getComponent('views.elements.MemberEventListSummary');
 
         this.eventNodes = {};
@@ -278,8 +279,8 @@ module.exports = React.createClass({
 
         var isMembershipChange = (e) =>
             e.getType() === 'm.room.member'
-            && ['join', 'leave'].indexOf(e.event.content.membership) !== -1
-            && (!e.event.prev_content || e.event.content.membership  !== e.event.prev_content.membership);
+            && ['join', 'leave'].indexOf(e.getContent().membership) !== -1
+            && (!e.getPrevContent() || e.getContent().membership  !== e.getPrevContent().membership);
 
         for (i = 0; i < this.props.events.length; i++) {
             var mxEv = this.props.events[i];
@@ -294,23 +295,32 @@ module.exports = React.createClass({
 
             // Wrap consecutive member events in a ListSummary
             if (isMembershipChange(mxEv)) {
-                let summarisedEvents = [mxEv];
-                i++;
-                for (;i < this.props.events.length; i++) {
-                    let collapsedMxEv = this.props.events[i];
+                let ts1 = mxEv.getTs();
 
-                    if (!isMembershipChange(collapsedMxEv)) {
-                        i--;
+                if (this._wantsDateSeparator(prevEvent, ts1)) {
+                    let dateSeparator = <li key={ts1+'~'}><DateSeparator key={ts1+'~'} ts={ts1}/></li>;
+                    ret.push(dateSeparator);
+                }
+
+                let summarisedEvents = [mxEv];
+                for (;i + 1 < this.props.events.length; i++) {
+                    let collapsedMxEv = this.props.events[i + 1];
+
+                    if (!isMembershipChange(collapsedMxEv) ||
+                        this._wantsDateSeparator(this.props.events[i], collapsedMxEv.getTs())) {
                         break;
                     }
                     summarisedEvents.push(collapsedMxEv);
                 }
-                // At this point, i = this.props.events.length OR i = the index of the last
-                // MembershipChange in a sequence of MembershipChanges
+                // At this point, i = the index of the last event in the summary sequence
 
                 let eventTiles = summarisedEvents.map(
                     (e) => {
-                        let ret = this._getTilesForEvent(prevEvent, e);
+                        // In order to prevent DateSeparators from appearing in the expanded form
+                        // of MemberEventListSummary, render each member event as if the previous
+                        // one was itself. This way, the timestamp of the previous event === the
+                        // timestamp of the current event, and no DateSeperator is inserted.
+                        let ret = this._getTilesForEvent(e, e);
                         prevEvent = e;
                         return ret;
                     }
diff --git a/src/components/views/avatars/MemberAvatar.js b/src/components/views/avatars/MemberAvatar.js
index 161c37ef55..1f6736138d 100644
--- a/src/components/views/avatars/MemberAvatar.js
+++ b/src/components/views/avatars/MemberAvatar.js
@@ -69,9 +69,9 @@ module.exports = React.createClass({
     render: function() {
         var BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
 
-        var {member, onClick, ...otherProps} = this.props;
+        var {member, onClick, viewUserOnClick, ...otherProps} = this.props;
 
-        if (this.props.viewUserOnClick) {
+        if (viewUserOnClick) {
             onClick = () => {
                 dispatcher.dispatch({
                     action: 'view_user',
diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index f50f56ffb4..4a4e8bfd1e 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -107,10 +107,20 @@ module.exports = React.createClass({
                 </span>
             );
         }
+
+        // The joinEvents and leaveEvents are representative of the net movement
+        // per-user, and so it is possible that the total net movement is nil,
+        // whilst there are some events in the expanded list. If the total net
+        // movement is nil, then neither joinSummary nor leaveSummary will be
+        // truthy, so return null.
+        if (!joinSummary && !leaveSummary) {
+            return null;
+        }
+
         return (
             <span>
                 {joinSummary}{joinSummary && leaveSummary?'; ':''}
-                {leaveSummary}
+                {leaveSummary}.&nbsp;
             </span>
         );
     },
@@ -140,15 +150,24 @@ module.exports = React.createClass({
         // Reorder events so that joins come before leaves
         let eventsToRender = this.props.events;
 
-        // Filter out those who joined, then left
-        let filteredEvents = eventsToRender.filter(
-            (e) => {
-                return eventsToRender.filter(
-                    (e2) => {
-                        return e.getSender() === e2.getSender()
-                            && e.event.content.membership !== e2.event.content.membership;
-                    }
-                ).length === 0;
+        // Create an array of events that are not "cancelled-out" by another
+        // A join of sender S is cancelled out by a leave of sender S etc.
+        let filteredEvents = [];
+        let senders = new Set(eventsToRender.map((e) => e.getSender()));
+        senders.forEach(
+            (userId) => {
+                // Only push the last event if it isn't the same membership as the first
+
+                let userEvents = eventsToRender.filter((e) => {
+                    return e.getSender() === userId;
+                });
+
+                let firstEvent = userEvents[0];
+                let lastEvent = userEvents[userEvents.length - 1];
+
+                if (firstEvent.getContent().membership !== lastEvent.getContent().membership) {
+                    filteredEvents.push(lastEvent);
+                }
             }
         );
 
@@ -194,7 +213,7 @@ module.exports = React.createClass({
                             {avatars}
                         </span>
                         <span className="mx_TextualEvent mx_MemberEventListSummary_summary">
-                            {summary}{joinAndLeft? '. ' + joinAndLeft + ' ' + noun + ' joined and left' : ''}
+                            {summary}{joinAndLeft ? joinAndLeft + ' ' + noun + ' joined and left' : ''}
                         </span>&nbsp;
                         {toggleButton}
                     </div>

From 324448563acbb07b58944409106c4f097524ade9 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 16 Nov 2016 16:07:19 +0000
Subject: [PATCH 010/289] If only one mevent, return than one

Also, the net change of nil is detected as having the first and last events being _different_. The summary should only include those that have their first and last events being the _same_ because that is a net change (within the block of member events).
---
 src/components/views/elements/MemberEventListSummary.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index 4a4e8bfd1e..b460a3513e 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -162,10 +162,15 @@ module.exports = React.createClass({
                     return e.getSender() === userId;
                 });
 
+                if (userEvents.length === 1) {
+                    filteredEvents.push(userEvents[0]);
+                    return;
+                }
+
                 let firstEvent = userEvents[0];
                 let lastEvent = userEvents[userEvents.length - 1];
 
-                if (firstEvent.getContent().membership !== lastEvent.getContent().membership) {
+                if (firstEvent.getContent().membership === lastEvent.getContent().membership) {
                     filteredEvents.push(lastEvent);
                 }
             }

From 3618b4998238044cffe72ddc256ff46093003c5e Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 16 Nov 2016 16:10:23 +0000
Subject: [PATCH 011/289] Use new js-sdk public unpaginate

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

diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index 7101a8b80c..3d204be510 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -264,7 +264,7 @@ var TimelinePanel = React.createClass({
 
         if (count > 0) {
             debuglog("TimelinePanel: Unpaginating", count, "in direction", dir);
-            this._timelineWindow._unpaginate(count, backwards);
+            this._timelineWindow.unpaginate(count, backwards);
             this.setState({
                 events: this._getEvents(),
             });

From 7e88f0083ddf9c68cd389448a3bd5689b7be2c1d Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 16 Nov 2016 16:26:24 +0000
Subject: [PATCH 012/289] Fix more join-part collapsing regressions

Use the previous content of the first event known for a user in a block of membership changes. This means single events are not special cased.
---
 .../views/elements/MemberEventListSummary.js     | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index b460a3513e..69bcd7c203 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -156,21 +156,21 @@ module.exports = React.createClass({
         let senders = new Set(eventsToRender.map((e) => e.getSender()));
         senders.forEach(
             (userId) => {
-                // Only push the last event if it isn't the same membership as the first
-
                 let userEvents = eventsToRender.filter((e) => {
                     return e.getSender() === userId;
                 });
 
-                if (userEvents.length === 1) {
-                    filteredEvents.push(userEvents[0]);
-                    return;
-                }
-
+                // NB: These may be the same event, in which case the lastEvent is used
+                // because prev_content should != content
                 let firstEvent = userEvents[0];
                 let lastEvent = userEvents[userEvents.length - 1];
 
-                if (firstEvent.getContent().membership === lastEvent.getContent().membership) {
+                // Membership BEFORE eventsToRender
+                let previousMembership = firstEvent.getPrevContent().membership || "leave";
+
+                // Otherwise, if the last membership event differs from previousMembership,
+                // use that.
+                if (previousMembership !== lastEvent.getContent().membership) {
                     filteredEvents.push(lastEvent);
                 }
             }

From 3ef0a08493ea342b62a3487ae57a41128edbade3 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Wed, 16 Nov 2016 17:58:43 +0000
Subject: [PATCH 013/289] Pin to 15.3.2 because 15.4.0 is broken and fails with
 missing CSSProperty file

---
 package.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 7d822fae89..f89ebca20e 100644
--- a/package.json
+++ b/package.json
@@ -62,9 +62,9 @@
     "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
     "optimist": "^0.6.1",
     "q": "^1.4.1",
-    "react": "^15.2.1",
-    "react-addons-css-transition-group": "^15.2.1",
-    "react-dom": "^15.2.1",
+    "react": "15.3.2",
+    "react-addons-css-transition-group": "15.3.2",
+    "react-dom": "15.3.2",
     "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef",
     "sanitize-html": "^1.11.1",
     "velocity-vector": "vector-im/velocity#059e3b2",
@@ -100,7 +100,7 @@
     "karma-webpack": "^1.7.0",
     "mocha": "^2.4.5",
     "phantomjs-prebuilt": "^2.1.7",
-    "react-addons-test-utils": "^15.0.1",
+    "react-addons-test-utils": "15.3.2",
     "require-json": "0.0.1",
     "rimraf": "^2.4.3",
     "sinon": "^1.17.3",

From d3c97921269911ce31f5c9ea6a22e5aa30d51963 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 17 Nov 2016 10:15:10 +0000
Subject: [PATCH 014/289] Remove pin on react 15.3 and bump
 draft-js-export-html instead

draft-js-export-html have fixed the incompatibility with react 15.4, so we can
now update.
---
 package.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index f89ebca20e..bca4fa99f5 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "browser-request": "^0.3.3",
     "classnames": "^2.1.2",
     "draft-js": "^0.8.1",
-    "draft-js-export-html": "^0.4.0",
+    "draft-js-export-html": "^0.5.0",
     "draft-js-export-markdown": "^0.2.0",
     "emojione": "2.2.3",
     "filesize": "^3.1.2",
@@ -62,9 +62,9 @@
     "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
     "optimist": "^0.6.1",
     "q": "^1.4.1",
-    "react": "15.3.2",
+    "react": "^15.4.0",
     "react-addons-css-transition-group": "15.3.2",
-    "react-dom": "15.3.2",
+    "react-dom": "^15.4.0",
     "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef",
     "sanitize-html": "^1.11.1",
     "velocity-vector": "vector-im/velocity#059e3b2",
@@ -100,7 +100,7 @@
     "karma-webpack": "^1.7.0",
     "mocha": "^2.4.5",
     "phantomjs-prebuilt": "^2.1.7",
-    "react-addons-test-utils": "15.3.2",
+    "react-addons-test-utils": "^15.4.0",
     "require-json": "0.0.1",
     "rimraf": "^2.4.3",
     "sinon": "^1.17.3",

From 341175ea5847c2b15f2515ed7848f85637a170e0 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukebarnard1@users.noreply.github.com>
Date: Fri, 18 Nov 2016 11:15:14 +0000
Subject: [PATCH 015/289] Fix pagination issue where recent events are lost
 (#563)

Fix pagination issue where recent events are lost

Scrolling up a few pages followed by scrolling down to the most recent events previously caused some events to go missing. A test has been modified in conjunction with this fix to make sure that this failure mode is tested for in future. This commit should fix the issue, and the most recent events should be paginated back in.
---
 src/components/structures/TimelinePanel.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index 3d204be510..4311f683df 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -265,7 +265,11 @@ var TimelinePanel = React.createClass({
         if (count > 0) {
             debuglog("TimelinePanel: Unpaginating", count, "in direction", dir);
             this._timelineWindow.unpaginate(count, backwards);
+
+            // We can now paginate in the unpaginated direction
+            const canPaginateKey = (backwards) ? 'canBackPaginate' : 'canForwardPaginate';
             this.setState({
+                [canPaginateKey]: true,
                 events: this._getEvents(),
             });
         }

From cf411556105032b8fc9e2d2b5531cb32beb524e6 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukebarnard1@users.noreply.github.com>
Date: Fri, 18 Nov 2016 11:44:45 +0000
Subject: [PATCH 016/289] Test TimelinePanel canForwardPaginate (#561)

Fix scroll up, down pagination test

NB: this test may not fail on Travis, although it did fail locally without a fix: #563.

Once the test has scrolled the panel to the top, to the earliest events, it should be able to forward paginate, because some degree of unpagination occurs. This does assume that unpagination will occur when scrolling to the beginning of the events and that unpagination should allow pagination again in the same direction.

Instead of checking that the first event is no longer the first event (varies due to unpagination), check instead that the most recent event can be seen when scrolling all the way down to the bottom of the TimelinePanel.

Scrolling past the bottom of content seems to have strange behaviour, which isn't a useful part of the test. So now the test will scroll down until the last event instead.
---
 .../structures/TimelinePanel-test.js          | 56 +++++++++++--------
 1 file changed, 33 insertions(+), 23 deletions(-)

diff --git a/test/components/structures/TimelinePanel-test.js b/test/components/structures/TimelinePanel-test.js
index a6d2e3f184..52b9185f18 100644
--- a/test/components/structures/TimelinePanel-test.js
+++ b/test/components/structures/TimelinePanel-test.js
@@ -238,9 +238,8 @@ describe('TimelinePanel', function() {
         }, 0);
     });
 
-    it("should let you scroll down again after you've scrolled up", function(done) {
-        var TIMELINE_CAP = 100; // needs to be more than we can fit in the div
-        var N_EVENTS = 120;     // needs to be more than TIMELINE_CAP
+    it("should let you scroll down to the bottom after you've scrolled up", function(done) {
+        var N_EVENTS = 120; // the number of events to simulate being added to the timeline
 
         // sadly, loading all those events takes a while
         this.timeout(N_EVENTS * 50);
@@ -257,9 +256,7 @@ describe('TimelinePanel', function() {
 
         var scrollDefer;
         var rendered = ReactDOM.render(
-            <WrappedTimelinePanel timelineSet={timelineSet} onScroll={() => {scrollDefer.resolve()}}
-                timelineCap={TIMELINE_CAP}
-            />,
+            <WrappedTimelinePanel timelineSet={timelineSet} onScroll={() => {scrollDefer.resolve()}}/>,
             parentDiv
         );
         console.log("TimelinePanel rendered");
@@ -273,6 +270,7 @@ describe('TimelinePanel', function() {
         // the TimelinePanel fires a scroll event
         var awaitScroll = function() {
             scrollDefer = q.defer();
+
             return scrollDefer.promise.then(() => {
                 console.log("got scroll event; scrollTop now " +
                             scrollingDiv.scrollTop);
@@ -306,6 +304,27 @@ describe('TimelinePanel', function() {
             });
         }
 
+        function scrollDown() {
+            // Scroll the bottom of the viewport to the bottom of the panel
+            setScrollTop(scrollingDiv.scrollHeight - scrollingDiv.clientHeight);
+            console.log("scrolling down... " + scrollingDiv.scrollTop);
+            return awaitScroll().delay(0).then(() => {
+
+                let eventTiles = scryEventTiles(panel);
+                let events = timeline.getEvents();
+
+                let lastEventInPanel = eventTiles[eventTiles.length - 1].props.mxEvent;
+                let lastEventInTimeline = events[events.length - 1];
+
+                // Scroll until the last event in the panel = the last event in the timeline
+                if(lastEventInPanel.getId() !== lastEventInTimeline.getId()) {
+                    // need to go further
+                    return scrollDown();
+                }
+                console.log("paginated to end.");
+            });
+        }
+
         // let the first round of pagination finish off
         awaitScroll().then(() => {
             // we should now have loaded the first few events
@@ -321,31 +340,22 @@ describe('TimelinePanel', function() {
             expect(messagePanel.props.suppressFirstDateSeparator).toBe(false);
             var events = scryEventTiles(panel);
             expect(events[0].props.mxEvent).toBe(timeline.getEvents()[0]);
-            expect(events.length).toBeLessThanOrEqualTo(TIMELINE_CAP);
 
-            // we should now be able to scroll down, and paginate in the other
-            // direction.
-            setScrollTop(scrollingDiv.scrollHeight);
-            scrollingDiv.scrollTop = scrollingDiv.scrollHeight;
+            // Expect to be able to paginate forwards, having unpaginated a few events
+            expect(panel.state.canForwardPaginate).toBe(true);
 
-            // the delay() below is a heinous hack to deal with the fact that,
-            // without it, we may or may not get control back before the
-            // forward pagination completes. The delay means that it should
-            // have completed.
-            return awaitScroll().delay(0);
+            // scroll all the way to the bottom
+            return scrollDown();
         }).then(() => {
             expect(messagePanel.props.backPaginating).toBe(false);
             expect(messagePanel.props.forwardPaginating).toBe(false);
-            expect(messagePanel.props.suppressFirstDateSeparator).toBe(true);
 
             var events = scryEventTiles(panel);
-            expect(events.length).toBeLessThanOrEqualTo(TIMELINE_CAP);
 
-            // we don't really know what the first event tile will be, since that
-            // depends on how much the timelinepanel decides to paginate.
-            //
-            // just check that the first tile isn't event 0.
-            expect(events[0].props.mxEvent).toNotBe(timeline.getEvents()[0]);
+            // Expect to be able to see the most recent event
+            var lastEventInPanel = events[events.length - 1].props.mxEvent;
+            var lastEventInTimeline = timeline.getEvents()[timeline.getEvents().length - 1];
+            expect(lastEventInPanel.getContent()).toBe(lastEventInTimeline.getContent());
 
             console.log("done");
         }).done(done, done);

From 7cb3c0935b597a28a07b60bed7edbe9b7bc9a93c Mon Sep 17 00:00:00 2001
From: Mark Haines <mjark@negativecurvature.net>
Date: Fri, 18 Nov 2016 20:08:26 +0000
Subject: [PATCH 017/289] Make the spinner smaller, don't decrypt files as
 eagerly (#564)

---
 src/components/views/messages/MAudioBody.js | 26 ++++++++----
 src/components/views/messages/MFileBody.js  | 45 ++++++++++++++-------
 src/components/views/messages/MImageBody.js | 26 ++++++++++--
 src/components/views/messages/MVideoBody.js | 26 ++++++++++--
 4 files changed, 93 insertions(+), 30 deletions(-)

diff --git a/src/components/views/messages/MAudioBody.js b/src/components/views/messages/MAudioBody.js
index ff753621c7..393bf549ae 100644
--- a/src/components/views/messages/MAudioBody.js
+++ b/src/components/views/messages/MAudioBody.js
@@ -29,6 +29,7 @@ export default class MAudioBody extends React.Component {
         this.state = {
             playing: false,
             decryptedUrl: null,
+            error: null,
         }
     }
     onPlayToggle() {
@@ -51,27 +52,38 @@ export default class MAudioBody extends React.Component {
         if (content.file !== undefined && this.state.decryptedUrl === null) {
             decryptFile(content.file).done((url) => {
                 this.setState({
-                    decryptedUrl: url
+                    decryptedUrl: url,
                 });
             }, (err) => {
-                console.warn("Unable to decrypt attachment: ", err)
-                // Set a placeholder image when we can't decrypt the image.
-                this.refs.image.src = "img/warning.svg";
+                console.warn("Unable to decrypt attachment: ", err);
+                this.setState({
+                    error: err,
+                });
             });
         }
     }
 
     render() {
+
         const content = this.props.mxEvent.getContent();
 
+        if (this.state.error !== null) {
+            return (
+                <span className="mx_MAudioBody" ref="body">
+                    <img src="img/warning.svg" width="16" height="16"/>
+                    Error decrypting audio
+                </span>
+            );
+        }
+
         if (content.file !== undefined && this.state.decryptedUrl === null) {
             // Need to decrypt the attachment
             // The attachment is decrypted in componentDidMount.
-            // For now add an img tag with a spinner.
+            // For now add an img tag with a 16x16 spinner.
+            // Not sure how tall the audio player is so not sure how tall it should actually be.
             return (
                 <span className="mx_MAudioBody">
-                <img src="img/spinner.gif" ref="image"
-                    alt={content.body} />
+                    <img src="img/spinner.gif" alt={content.body} width="16" height="16"/>
                 </span>
             );
         }
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 60b0653f1f..32b53e3b7d 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -24,6 +24,8 @@ import {decryptFile} from '../../../utils/DecryptFile';
 import Tinter from '../../../Tinter';
 import 'isomorphic-fetch';
 import q from 'q';
+import Modal from '../../../Modal';
+
 
 // A cached tinted copy of "img/download.svg"
 var tintedDownloadImageURL;
@@ -110,19 +112,6 @@ module.exports = React.createClass({
         this.id = nextMountId++;
         mounts[this.id] = this;
         this.tint();
-        // Check whether we need to decrypt the file content.
-        const content = this.props.mxEvent.getContent();
-        if (content.file !== undefined && this.state.decryptedUrl === null) {
-            decryptFile(content.file).done((url) => {
-                this.setState({
-                    decryptedUrl: url,
-                });
-            }, (err) => {
-                console.warn("Unable to decrypt attachment: ", err)
-                // Set a placeholder image when we can't decrypt the image.
-                this.refs.image.src = "img/warning.svg";
-            });
-        }
     },
 
     componentWillUnmount: function() {
@@ -141,16 +130,42 @@ module.exports = React.createClass({
         const content = this.props.mxEvent.getContent();
 
         const text = this.presentableTextForFile(content);
+        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
 
         if (content.file !== undefined && this.state.decryptedUrl === null) {
 
+            var decrypting = false;
+            const decrypt = () => {
+                if (decrypting) {
+                    return false;
+                }
+                decrypting = true;
+                decryptFile(content.file).then((url) => {
+                    this.setState({
+                        decryptedUrl: url,
+                    });
+                }).catch((err) => {
+                    console.warn("Unable to decrypt attachment: ", err)
+                    // Set a placeholder image when we can't decrypt the image
+                    Modal.createDialog(ErrorDialog, {
+                        description: "Error decrypting attachment"
+                    });
+                }).finally(function() {
+                    decrypting = false;
+                }).done();
+                return false;
+            };
+
             // Need to decrypt the attachment
             // The attachment is decrypted in componentDidMount.
             // For now add an img tag with a spinner.
             return (
                 <span className="mx_MFileBody" ref="body">
-                <img src="img/spinner.gif" ref="image"
-                    alt={content.body} />
+                    <div className="mx_MImageBody_download">
+                        <a href="javascript:void(0)" onClick={decrypt}>
+                            Decrypt {text}
+                        </a>
+                    </div>
                 </span>
             );
         }
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 6f46544bf4..63fd119335 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -38,6 +38,7 @@ module.exports = React.createClass({
         return {
             decryptedUrl: null,
             decryptedThumbnailUrl: null,
+            error: null
         };
     },
 
@@ -124,9 +125,11 @@ module.exports = React.createClass({
                     });
                 });
             }).catch((err) => {
-                console.warn("Unable to decrypt attachment: ", err)
+                console.warn("Unable to decrypt attachment: ", err);
                 // Set a placeholder image when we can't decrypt the image.
-                this.refs.image.src = "img/warning.svg";
+                this.setState({
+                    error: err,
+                });
             }).done();
         }
     },
@@ -165,6 +168,15 @@ module.exports = React.createClass({
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const content = this.props.mxEvent.getContent();
 
+        if (this.state.error !== null) {
+            return (
+                <span className="mx_MImageBody" ref="body">
+                    <img src="img/warning.svg" width="16" height="16"/>
+                    Error decrypting image
+                </span>
+            );
+        }
+
         if (content.file !== undefined && this.state.decryptedUrl === null) {
 
             // Need to decrypt the attachment
@@ -172,8 +184,14 @@ module.exports = React.createClass({
             // For now add an img tag with a spinner.
             return (
                 <span className="mx_MImageBody" ref="body">
-                <img className="mx_MImageBody_thumbnail" src="img/spinner.gif" ref="image"
-                    alt={content.body} />
+                    <div className="mx_MImageBody_thumbnail" ref="image" style={{
+                        "display": "flex",
+                        "align-items": "center",
+                        "justify-items": "center",
+                        "width": "100%",
+                    }}>
+                        <img src="img/spinner.gif" alt={content.body} width="16" height="16"/>
+                    </div>
                 </span>
             );
         }
diff --git a/src/components/views/messages/MVideoBody.js b/src/components/views/messages/MVideoBody.js
index a32348ea1a..a0dbb141ac 100644
--- a/src/components/views/messages/MVideoBody.js
+++ b/src/components/views/messages/MVideoBody.js
@@ -31,6 +31,7 @@ module.exports = React.createClass({
         return {
             decryptedUrl: null,
             decryptedThumbnailUrl: null,
+            error: null,
         };
     },
 
@@ -95,7 +96,9 @@ module.exports = React.createClass({
             }).catch((err) => {
                 console.warn("Unable to decrypt attachment: ", err)
                 // Set a placeholder image when we can't decrypt the image.
-                this.refs.image.src = "img/warning.svg";
+                this.setState({
+                    error: err,
+                });
             }).done();
         }
     },
@@ -103,14 +106,29 @@ module.exports = React.createClass({
     render: function() {
         const content = this.props.mxEvent.getContent();
 
+        if (this.state.error !== null) {
+            return (
+                <span className="mx_MVideoBody" ref="body">
+                    <img src="img/warning.svg" width="16" height="16"/>
+                    Error decrypting video
+                </span>
+            );
+        }
+
         if (content.file !== undefined && this.state.decryptedUrl === null) {
             // Need to decrypt the attachment
             // The attachment is decrypted in componentDidMount.
             // For now add an img tag with a spinner.
             return (
-                <span className="mx_MImageBody" ref="body">
-                <img className="mx_MImageBody_thumbnail" src="img/spinner.gif" ref="image"
-                    alt={content.body} />
+                <span className="mx_MVideoBody" ref="body">
+                    <div className="mx_MImageBody_thumbnail" ref="image" style={{
+                        "display": "flex",
+                        "align-items": "center",
+                        "justify-items": "center",
+                        "width": "100%",
+                    }}>
+                        <img src="img/spinner.gif" alt={content.body} width="16" height="16"/>
+                    </div>
                 </span>
             );
         }

From 617f0e6568e87aa10c21849888f06e03e89deb15 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 19 Nov 2016 02:01:42 +0200
Subject: [PATCH 018/289] Prepare changelog for v0.8.0

---
 CHANGELOG.md | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 57d6c38d01..90b3231e95 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,54 @@
+Changes in [0.8.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.8.0) (2016-11-19)
+===================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.7.5...v0.8.0)
+
+ * Fix more membership change collapsing bugs
+   [\#560](https://github.com/matrix-org/matrix-react-sdk/pull/560)
+ * Show an open padlock for unencrypted rooms
+   [\#557](https://github.com/matrix-org/matrix-react-sdk/pull/557)
+ * Clean up MFileBody.presentableTextForFile
+   [\#558](https://github.com/matrix-org/matrix-react-sdk/pull/558)
+ * Update eventtiles when the events are decrypted
+   [\#556](https://github.com/matrix-org/matrix-react-sdk/pull/556)
+ * Update EventTile to use WithMatrixClient instead of MatrixClientPeg
+   [\#552](https://github.com/matrix-org/matrix-react-sdk/pull/552)
+ * Disable conference calling for encrypted rooms
+   [\#549](https://github.com/matrix-org/matrix-react-sdk/pull/549)
+ * Encrypt attachments in encrypted rooms
+   [\#548](https://github.com/matrix-org/matrix-react-sdk/pull/548)
+ * Fix MemberAvatar PropTypes & MemberEventListSummary key
+   [\#547](https://github.com/matrix-org/matrix-react-sdk/pull/547)
+ * Revert "Encrypt attachments in encrypted rooms,"
+   [\#546](https://github.com/matrix-org/matrix-react-sdk/pull/546)
+ * Fix the vector web version in UserSettings
+   [\#542](https://github.com/matrix-org/matrix-react-sdk/pull/542)
+ * Truncate consecutive member events
+   [\#544](https://github.com/matrix-org/matrix-react-sdk/pull/544)
+ * Encrypt attachments in encrypted rooms,
+   [\#533](https://github.com/matrix-org/matrix-react-sdk/pull/533)
+ * Fix the ctrl+e mute camera shortcut
+   [\#545](https://github.com/matrix-org/matrix-react-sdk/pull/545)
+ * Show the error that occured when trying to reach scalar
+   [\#543](https://github.com/matrix-org/matrix-react-sdk/pull/543)
+ * Don't do URL previews for matrix.to
+   [\#541](https://github.com/matrix-org/matrix-react-sdk/pull/541)
+ * Fix NPE in LoggedInView
+   [\#540](https://github.com/matrix-org/matrix-react-sdk/pull/540)
+ * Make room alias & user ID links matrix.to links
+   [\#538](https://github.com/matrix-org/matrix-react-sdk/pull/538)
+ * Make MemberInfo use the matrixclient from the context
+   [\#537](https://github.com/matrix-org/matrix-react-sdk/pull/537)
+ * Add the MatrixClient to the react context
+   [\#536](https://github.com/matrix-org/matrix-react-sdk/pull/536)
+ * Factor out LoggedInView from MatrixChat
+   [\#535](https://github.com/matrix-org/matrix-react-sdk/pull/535)
+ * Move 'new version' support into Platform
+   [\#532](https://github.com/matrix-org/matrix-react-sdk/pull/532)
+ * Move Notifications into Platform
+   [\#534](https://github.com/matrix-org/matrix-react-sdk/pull/534)
+ * Move platform-specific functionality into Platform
+   [\#531](https://github.com/matrix-org/matrix-react-sdk/pull/531)
+
 Changes in [0.7.5](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.7.5) (2016-11-04)
 ===================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.7.5-rc.1...v0.7.5)

From 09105608ab979761a13c7ec258870be73affb829 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 19 Nov 2016 02:01:43 +0200
Subject: [PATCH 019/289] v0.8.0

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index bca4fa99f5..c58a878a47 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "0.7.5",
+  "version": "0.8.0",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -59,7 +59,7 @@
     "linkifyjs": "^2.1.3",
     "lodash": "^4.13.1",
     "marked": "^0.3.5",
-    "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
+    "matrix-js-sdk": "0.7.0",
     "optimist": "^0.6.1",
     "q": "^1.4.1",
     "react": "^15.4.0",

From 2e691240ae95d91ae4b56c9c1322bbcc26d4525a Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 19 Nov 2016 02:44:36 +0200
Subject: [PATCH 020/289] fix e2e disclaimer

---
 src/components/views/rooms/RoomSettings.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/views/rooms/RoomSettings.js b/src/components/views/rooms/RoomSettings.js
index 6d365ddc0a..bf20422a53 100644
--- a/src/components/views/rooms/RoomSettings.js
+++ b/src/components/views/rooms/RoomSettings.js
@@ -462,11 +462,10 @@ module.exports = React.createClass({
             description: (
                 <div>
                     <p>End-to-end encryption is in beta and may not be reliable.</p>
-                    <p>You should <b>not</b> yet trust it to secure data.  File transfers and calls are not yet encrypted.</p>
+                    <p>You should <b>not</b> yet trust it to secure data.</p>
                     <p>Devices will <b>not</b> yet be able to decrypt history from before they joined the room.</p>
                     <p>Once encryption is enabled for a room it <b>cannot</b> be turned off again (for now).</p>
-                    <p>Encrypted messages will not be visible on clients that do not yet implement encryption<br/>
-                       (e.g. Riot/iOS and Riot/Android).</p>
+                    <p>Encrypted messages will not be visible on clients that do not yet implement encryption.</p>
                 </div>
             ),
             onFinished: confirm=>{

From 03988015aaaadde5a848e5ece595f5effd5a9cd1 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Mon, 21 Nov 2016 09:19:40 +0000
Subject: [PATCH 021/289] Fix 'Quote' for e2e messages

Fixes https://github.com/vector-im/vector-web/issues/2612
---
 src/components/views/rooms/MessageComposerInput.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index b33b5098b7..37d937d6f5 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -272,7 +272,7 @@ export default class MessageComposerInput extends React.Component {
             break;
 
             case 'quote': {
-                let {event: {content: {body, formatted_body}}} = payload.event || {};
+                let {body, formatted_body} = payload.event.getContent();
                 formatted_body = formatted_body || escape(body);
                 if (formatted_body) {
                     let content = RichText.HTMLtoContentState(`<blockquote>${formatted_body}</blockquote>`);

From 4476b09ce7ca33b35c487e41310416ed2fae4283 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Mon, 21 Nov 2016 10:25:48 +0000
Subject: [PATCH 022/289] Get rid of always-on labs settings

If the setting is on by default, it's not much use as a Labs setting. The E2e
setting was only confusing everyone anyway.
---
 src/UserSettingsStore.js                     | 10 ----
 src/components/views/messages/TextualBody.js | 12 ----
 src/components/views/rooms/MemberInfo.js     |  7 +--
 src/components/views/rooms/RoomSettings.js   | 60 +++++++++-----------
 4 files changed, 28 insertions(+), 61 deletions(-)

diff --git a/src/UserSettingsStore.js b/src/UserSettingsStore.js
index 845e81de36..e5dba62ee7 100644
--- a/src/UserSettingsStore.js
+++ b/src/UserSettingsStore.js
@@ -30,16 +30,6 @@ module.exports = {
             id: 'rich_text_editor',
             default: false,
         },
-        {
-            name: 'End-to-End Encryption',
-            id: 'e2e_encryption',
-            default: true,
-        },
-        {
-            name: 'Integration Management',
-            id: 'integration_management',
-            default: true,
-        },
     ],
 
     loadProfileInfo: function() {
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 7540d40dc2..d005ef0cca 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -27,7 +27,6 @@ var sdk = require('../../../index');
 var ScalarAuthClient = require("../../../ScalarAuthClient");
 var Modal = require("../../../Modal");
 var SdkConfig = require('../../../SdkConfig');
-var UserSettingsStore = require('../../../UserSettingsStore');
 
 linkifyMatrix(linkify);
 
@@ -213,16 +212,6 @@ module.exports = React.createClass({
         // which requires the user to click through and THEN we can open the link in a new tab because
         // the window.open command occurs in the same stack frame as the onClick callback.
 
-        let integrationsEnabled = UserSettingsStore.isFeatureEnabled("integration_management");
-        if (!integrationsEnabled) {
-            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createDialog(ErrorDialog, {
-                title: "Integrations disabled",
-                description: "You need to enable the Labs option 'Integrations Management' in your Riot user settings first.",
-            });
-            return;
-        }
-
         // Go fetch a scalar token
         let scalarClient = new ScalarAuthClient();
         scalarClient.connect().then(() => {
@@ -304,4 +293,3 @@ module.exports = React.createClass({
         }
     },
 });
-
diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js
index 52edd494b2..d57bf4bce1 100644
--- a/src/components/views/rooms/MemberInfo.js
+++ b/src/components/views/rooms/MemberInfo.js
@@ -30,7 +30,6 @@ var classNames = require('classnames');
 var dis = require("../../../dispatcher");
 var Modal = require("../../../Modal");
 var sdk = require('../../../index');
-var UserSettingsStore = require('../../../UserSettingsStore');
 var createRoom = require('../../../createRoom');
 var DMRoomMap = require('../../../utils/DMRoomMap');
 var Unread = require('../../../Unread');
@@ -71,10 +70,8 @@ module.exports = WithMatrixClient(React.createClass({
     componentWillMount: function() {
         this._cancelDeviceList = null;
 
-        // only display the devices list if our client supports E2E *and* the
-        // feature is enabled in the user settings
-        this._enableDevices = this.props.matrixClient.isCryptoEnabled() &&
-            UserSettingsStore.isFeatureEnabled("e2e_encryption");
+        // only display the devices list if our client supports E2E
+        this._enableDevices = this.props.matrixClient.isCryptoEnabled();
 
         const cli = this.props.matrixClient;
         cli.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
diff --git a/src/components/views/rooms/RoomSettings.js b/src/components/views/rooms/RoomSettings.js
index bf20422a53..04ea05843d 100644
--- a/src/components/views/rooms/RoomSettings.js
+++ b/src/components/views/rooms/RoomSettings.js
@@ -24,7 +24,6 @@ var ObjectUtils = require("../../../ObjectUtils");
 var dis = require("../../../dispatcher");
 var ScalarAuthClient = require("../../../ScalarAuthClient");
 var ScalarMessaging = require('../../../ScalarMessaging');
-var UserSettingsStore = require('../../../UserSettingsStore');
 
 // parse a string as an integer; if the input is undefined, or cannot be parsed
 // as an integer, return a default.
@@ -81,16 +80,14 @@ module.exports = React.createClass({
             console.error("Failed to get room visibility: " + err);
         });
 
-        if (UserSettingsStore.isFeatureEnabled("integration_management")) {
-            this.scalarClient = new ScalarAuthClient();
-            this.scalarClient.connect().done(() => {
-                this.forceUpdate();
-            }, (err) => {
-                this.setState({
-                    scalar_error: err
-                });
-            })
-        }
+        this.scalarClient = new ScalarAuthClient();
+        this.scalarClient.connect().done(() => {
+            this.forceUpdate();
+        }, (err) => {
+            this.setState({
+                scalar_error: err
+            });
+        });
 
         dis.dispatch({
             action: 'ui_opacity',
@@ -477,10 +474,6 @@ module.exports = React.createClass({
     },
 
     _renderEncryptionSection: function() {
-        if (!UserSettingsStore.isFeatureEnabled("e2e_encryption")) {
-            return null;
-        }
-
         var cli = MatrixClientPeg.get();
         var roomState = this.props.room.currentState;
         var isEncrypted = cli.isRoomEncrypted(this.props.room.roomId);
@@ -684,27 +677,26 @@ module.exports = React.createClass({
                 </span>
             );
         }
-        if (UserSettingsStore.isFeatureEnabled("integration_management")) {
-            if (this.scalarClient.hasCredentials()) {
-                integrationsButton = (
+
+        if (this.scalarClient.hasCredentials()) {
+            integrationsButton = (
                     <div className="mx_RoomSettings_integrationsButton" onClick={ this.onManageIntegrations }>
-                        Manage Integrations
-                    </div>
-                );
-            } else if (this.state.scalar_error) {
-                integrationsButton = (
+                    Manage Integrations
+                </div>
+            );
+        } else if (this.state.scalar_error) {
+            integrationsButton = (
                     <div className="mx_RoomSettings_integrationsButton_error" onClick={ this.onShowIntegrationsError }>
-                        Integrations Error <img src="img/warning.svg" width="17"/>
-                        { integrationsError }
-                    </div>
-                );
-            } else {
-                integrationsButton = (
+                    Integrations Error <img src="img/warning.svg" width="17"/>
+                    { integrationsError }
+                </div>
+            );
+        } else {
+            integrationsButton = (
                     <div className="mx_RoomSettings_integrationsButton" style={{ opacity: 0.5 }}>
-                        Manage Integrations
-                    </div>
-                );
-            }
+                    Manage Integrations
+                </div>
+            );
         }
 
         return (
@@ -795,7 +787,7 @@ module.exports = React.createClass({
                     roomId={this.props.room.roomId}
                     canSetCanonicalAlias={ roomState.mayClientSendStateEvent("m.room.canonical_alias", cli) }
                     canSetAliases={
-                        true 
+                        true
                         /* Originally, we arbitrarily restricted creating aliases to room admins: roomState.mayClientSendStateEvent("m.room.aliases", cli) */
                     }
                     canonicalAliasEvent={this.props.room.currentState.getStateEvents('m.room.canonical_alias', '')}

From d1a5d94916806d4dee2a940ca782f3b5d4f88043 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 22 Nov 2016 16:47:56 +0000
Subject: [PATCH 023/289] Make the unpagination process less aggressive

This increases `UNPAGINATION_PADDING` (see the ASCII on ScrollPanel.js, `_getExcessHeight`), and also debounces unfilling requests made for 200ms. This forces unfilling requests not to be sent unless the next 200ms has no scrolling, effectively.
---
 src/components/structures/ScrollPanel.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js
index 36dbf041e8..f7f954bc0f 100644
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.js
@@ -25,7 +25,7 @@ var DEBUG_SCROLL = false;
 
 // The amount of extra scroll distance to allow prior to unfilling.
 // See _getExcessHeight.
-const UNPAGINATION_PADDING = 500;
+const UNPAGINATION_PADDING = 1500;
 
 if (DEBUG_SCROLL) {
     // using bind means that we get to keep useful line numbers in the console
@@ -361,7 +361,14 @@ module.exports = React.createClass({
         }
 
         if (markerScrollToken) {
-            this.props.onUnfillRequest(backwards, markerScrollToken);
+            // Use a debouncer to prevent multiple unfill calls in quick succession
+            // This is to make the unfilling process less aggressive
+            if (this._unfillDebouncer) {
+                clearTimeout(this._unfillDebouncer);
+            }
+            this._unfillDebouncer = setTimeout(() => {
+                this.props.onUnfillRequest(backwards, markerScrollToken);
+            }, 200);
         }
     },
 

From 42fc7b1b66f4dbedf0af82213016fb7713f56fa4 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 22 Nov 2016 17:23:06 +0000
Subject: [PATCH 024/289] Use UNFILL_REQUEST_DEBOUNCE_MS constant, reset
 unfillDebouncer timeout reference.

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

diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js
index f7f954bc0f..31ac59c730 100644
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.js
@@ -26,6 +26,9 @@ var DEBUG_SCROLL = false;
 // The amount of extra scroll distance to allow prior to unfilling.
 // See _getExcessHeight.
 const UNPAGINATION_PADDING = 1500;
+// The number of milliseconds to debounce calls to onUnfillRequest, to prevent
+// many scroll events causing many unfilling requests.
+const UNFILL_REQUEST_DEBOUNCE_MS = 200;
 
 if (DEBUG_SCROLL) {
     // using bind means that we get to keep useful line numbers in the console
@@ -367,8 +370,9 @@ module.exports = React.createClass({
                 clearTimeout(this._unfillDebouncer);
             }
             this._unfillDebouncer = setTimeout(() => {
+                this._unfillDebouncer = null;
                 this.props.onUnfillRequest(backwards, markerScrollToken);
-            }, 200);
+            }, UNFILL_REQUEST_DEBOUNCE_MS);
         }
     },
 

From 8a6ed1d7e9ff158bf3e8ed720cfebb4176e03220 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 22 Nov 2016 17:43:45 +0000
Subject: [PATCH 025/289] Do not assume unpagination will occur during scroll
 test

---
 test/components/structures/TimelinePanel-test.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/test/components/structures/TimelinePanel-test.js b/test/components/structures/TimelinePanel-test.js
index 52b9185f18..b2cdfbd590 100644
--- a/test/components/structures/TimelinePanel-test.js
+++ b/test/components/structures/TimelinePanel-test.js
@@ -341,8 +341,9 @@ describe('TimelinePanel', function() {
             var events = scryEventTiles(panel);
             expect(events[0].props.mxEvent).toBe(timeline.getEvents()[0]);
 
-            // Expect to be able to paginate forwards, having unpaginated a few events
-            expect(panel.state.canForwardPaginate).toBe(true);
+            // At this point, we make no assumption that unpagination has happened. This doesn't
+            // mean that we shouldn't be able to scroll all the way down to the bottom to see the
+            // most recent event in the timeline.
 
             // scroll all the way to the bottom
             return scrollDown();

From b67fcf8109395cad5b3fbd886842cd7a06e50eb2 Mon Sep 17 00:00:00 2001
From: Mark Haines <mjark@negativecurvature.net>
Date: Tue, 22 Nov 2016 18:18:16 +0000
Subject: [PATCH 026/289] Bump browser-encrypt-attachment to v0.2.0

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

diff --git a/package.json b/package.json
index c58a878a47..eab94077e6 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
   "dependencies": {
     "babel-runtime": "^6.11.6",
     "blueimp-canvas-to-blob": "^3.5.0",
-    "browser-encrypt-attachment": "^0.1.0",
+    "browser-encrypt-attachment": "^0.2.0",
     "browser-request": "^0.3.3",
     "classnames": "^2.1.2",
     "draft-js": "^0.8.1",

From 6842544cd7fff95fb72243b4608ad7519ce4cf7e Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Tue, 22 Nov 2016 22:12:50 +0000
Subject: [PATCH 027/289] Unpin js-sdk

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

diff --git a/package.json b/package.json
index eab94077e6..a25260e35d 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
     "linkifyjs": "^2.1.3",
     "lodash": "^4.13.1",
     "marked": "^0.3.5",
-    "matrix-js-sdk": "0.7.0",
+    "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
     "optimist": "^0.6.1",
     "q": "^1.4.1",
     "react": "^15.4.0",

From 6e6bcf8b7880d4b4c91236076696de0e01a35c2d Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 23 Nov 2016 10:56:16 +0000
Subject: [PATCH 028/289] Reinstate missing sections from the UserSettings

The 'devices' and 'cryptography' sections got removed from UserSettings by #566.
---
 src/components/structures/UserSettings.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index c6efc55607..b82f2f5958 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -338,10 +338,6 @@ module.exports = React.createClass({
     },
 
     _renderCryptoInfo: function() {
-        if (!UserSettingsStore.isFeatureEnabled("e2e_encryption")) {
-            return null;
-        }
-
         var client = MatrixClientPeg.get();
         var deviceId = client.deviceId;
         var identityKey = client.getDeviceEd25519Key() || "<not supported>";
@@ -362,9 +358,6 @@ module.exports = React.createClass({
     },
 
     _renderDevicesPanel: function() {
-        if (!UserSettingsStore.isFeatureEnabled("e2e_encryption")) {
-            return null;
-        }
         var DevicesPanel = sdk.getComponent('settings.DevicesPanel');
         return (
             <div>

From 0bc4659fe03e580f5eacf7b26fc730d87fb75920 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 24 Nov 2016 12:33:31 +0000
Subject: [PATCH 029/289] Fix crash on logging in

If you arrived at the page via a link to a room.

Fixes https://github.com/vector-im/vector-web/issues/2634
---
 src/components/structures/MatrixChat.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 945088106b..e632d9a4c5 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -75,6 +75,9 @@ module.exports = React.createClass({
             loading: true,
             screen: undefined,
 
+            // What the LoggedInView would be showing if visible
+            page_type: PageTypes.RoomDirectory,
+
             // If we are viewing a room by alias, this contains the alias
             currentRoomAlias: null,
 
@@ -235,6 +238,7 @@ module.exports = React.createClass({
     setStateForNewScreen: function(state) {
         const newState = {
             screen: undefined,
+            page_type: PageTypes.RoomDirectory,
             currentRoomAlias: null,
             currentRoomId: null,
             viewUserId: null,

From 00693936506c021c1df98ca033d11d9513e79628 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 24 Nov 2016 13:28:51 +0000
Subject: [PATCH 030/289] Go back to same room after logging in

---
 src/components/structures/MatrixChat.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index e632d9a4c5..4d3ddc5634 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -238,9 +238,6 @@ module.exports = React.createClass({
     setStateForNewScreen: function(state) {
         const newState = {
             screen: undefined,
-            page_type: PageTypes.RoomDirectory,
-            currentRoomAlias: null,
-            currentRoomId: null,
             viewUserId: null,
             logged_in: false,
             ready: false,

From 2aba646acd706608778d0e2c04eaf4f86ca6c6fa Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 24 Nov 2016 14:58:37 +0000
Subject: [PATCH 031/289] Clear room alias etc. on logout

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

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 4d3ddc5634..7fa7c9f152 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -598,6 +598,9 @@ module.exports = React.createClass({
             ready: false,
             collapse_lhs: false,
             collapse_rhs: false,
+            currentRoomAlias: null,
+            currentRoomId: null,
+            page_type: PageTypes.RoomDirectory,
         });
     },
 

From 8547d00f32b14af6be7be118e3e2eb1f8ed2c739 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 24 Nov 2016 16:39:48 +0000
Subject: [PATCH 032/289] Don't default the page_type to room directory

As it breaks the behaviour of redirecting to /#/directory
---
 src/components/structures/MatrixChat.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 7fa7c9f152..2a31850f68 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -76,7 +76,7 @@ module.exports = React.createClass({
             screen: undefined,
 
             // What the LoggedInView would be showing if visible
-            page_type: PageTypes.RoomDirectory,
+            page_type: null,
 
             // If we are viewing a room by alias, this contains the alias
             currentRoomAlias: null,

From 21d65d2ad16c942c866513223b9853eba4e9baad Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 25 Nov 2016 23:19:20 +0000
Subject: [PATCH 033/289] Fix the download icon on attachments

---
 src/components/views/messages/MFileBody.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 32b53e3b7d..c7c0881cbb 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -22,7 +22,7 @@ import MatrixClientPeg from '../../../MatrixClientPeg';
 import sdk from '../../../index';
 import {decryptFile} from '../../../utils/DecryptFile';
 import Tinter from '../../../Tinter';
-import 'isomorphic-fetch';
+import request from 'browser-request';
 import q from 'q';
 import Modal from '../../../Modal';
 
@@ -41,10 +41,13 @@ function updateTintedDownloadImage() {
     // Download the svg as an XML document.
     // We could cache the XML response here, but since the tint rarely changes
     // it's probably not worth it.
-    q(fetch("img/download.svg")).then(function(response) {
-        return response.text();
-    }).then(function(svgText) {
-        const svg = new DOMParser().parseFromString(svgText, "image/svg+xml");
+    // Also note that we can't use fetch here because fetch doesn't support
+    // file URLs, which the download image will be if we're running from
+    // the filesystem (like in an Electron wrapper).
+    request({uri: "img/download.svg"}, (err, response, body) => {
+        if (err) return;
+
+        const svg = new DOMParser().parseFromString(body, "image/svg+xml");
         // Apply the fixups to the XML.
         const fixups = Tinter.calcSvgFixups([{contentDocument: svg}]);
         Tinter.applySvgFixups(fixups);
@@ -55,7 +58,7 @@ function updateTintedDownloadImage() {
         Object.keys(mounts).forEach(function(id) {
             mounts[id].tint();
         });
-    }).done();
+    });
 }
 
 Tinter.registerTintable(updateTintedDownloadImage);

From c7fb83ed2dfeb39d27369faa9373bcc0801fd25d Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Tue, 29 Nov 2016 18:25:26 +0000
Subject: [PATCH 034/289] s/block/blacklist for e2e

Fixes https://github.com/vector-im/vector-web/issues/2315
---
 .../views/dialogs/EncryptedEventDialog.js     |  2 +-
 .../views/elements/DeviceVerifyButtons.js     | 28 +++++++++----------
 .../views/rooms/MemberDeviceInfo.js           |  4 +--
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/views/dialogs/EncryptedEventDialog.js b/src/components/views/dialogs/EncryptedEventDialog.js
index c86b1d20f8..ba706e0aa5 100644
--- a/src/components/views/dialogs/EncryptedEventDialog.js
+++ b/src/components/views/dialogs/EncryptedEventDialog.js
@@ -83,7 +83,7 @@ module.exports = React.createClass({
 
         var verificationStatus = (<b>NOT verified</b>);
         if (device.isBlocked()) {
-            verificationStatus = (<b>Blocked</b>);
+            verificationStatus = (<b>Blacklisted</b>);
         } else if (device.isVerified()) {
             verificationStatus = "verified";
         }
diff --git a/src/components/views/elements/DeviceVerifyButtons.js b/src/components/views/elements/DeviceVerifyButtons.js
index 90af1635c9..aeb93e866c 100644
--- a/src/components/views/elements/DeviceVerifyButtons.js
+++ b/src/components/views/elements/DeviceVerifyButtons.js
@@ -49,7 +49,7 @@ export default React.createClass({
                     <p>
                         If it matches, press the verify button below.
                         If it doesnt, then someone else is intercepting this device
-                        and you probably want to press the block button instead.
+                        and you probably want to press the blacklist button instead.
                     </p>
                     <p>
                         In future this verification process will be more sophisticated.
@@ -73,33 +73,33 @@ export default React.createClass({
         );
     },
 
-    onBlockClick: function() {
+    onBlacklistClick: function() {
         MatrixClientPeg.get().setDeviceBlocked(
             this.props.userId, this.props.device.deviceId, true
         );
     },
 
-    onUnblockClick: function() {
+    onUnblacklistClick: function() {
         MatrixClientPeg.get().setDeviceBlocked(
             this.props.userId, this.props.device.deviceId, false
         );
     },
 
     render: function() {
-        var blockButton = null, verifyButton = null;
+        var blacklistButton = null, verifyButton = null;
 
         if (this.props.device.isBlocked()) {
-            blockButton = (
-                <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_unblock"
-                  onClick={this.onUnblockClick}>
-                    Unblock
+            blacklistButton = (
+                <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_unblacklist"
+                  onClick={this.onUnblacklistClick}>
+                    Unblacklist
                 </button>
             );
         } else {
-            blockButton = (
-                <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_block"
-                  onClick={this.onBlockClick}>
-                    Block
+            blacklistButton = (
+                <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_blacklist"
+                  onClick={this.onBlacklistClick}>
+                    Blacklist
                 </button>
             );
         }
@@ -115,7 +115,7 @@ export default React.createClass({
             verifyButton = (
                 <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_verify"
                   onClick={this.onVerifyClick}>
-                    Verify
+                    Verify...
                 </button>
             );
         }
@@ -124,7 +124,7 @@ export default React.createClass({
         return (
             <div className="mx_MemberDeviceInfo mx_DeviceVerifyButtons" >
                 { verifyButton }
-                { blockButton }
+                { blacklistButton }
             </div>
         );
     },
diff --git a/src/components/views/rooms/MemberDeviceInfo.js b/src/components/views/rooms/MemberDeviceInfo.js
index 51bf7d3637..1e7850ab44 100644
--- a/src/components/views/rooms/MemberDeviceInfo.js
+++ b/src/components/views/rooms/MemberDeviceInfo.js
@@ -24,8 +24,8 @@ export default class MemberDeviceInfo extends React.Component {
 
         if (this.props.device.isBlocked()) {
             indicator = (
-                    <div className="mx_MemberDeviceInfo_blocked">
-                    <img src="img/e2e-blocked.svg" width="12" height="12" style={{ marginLeft: "-1px" }} alt="Blocked"/>
+                    <div className="mx_MemberDeviceInfo_blacklisted">
+                    <img src="img/e2e-blocked.svg" width="12" height="12" style={{ marginLeft: "-1px" }} alt="Blacklisted"/>
                     </div>
             );
         } else if (this.props.device.isVerified()) {

From 4d2926485b914843b3b462403c5825f6fa21adf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20L=C3=B6thberg?= <johannes@kyriasis.com>
Date: Tue, 29 Nov 2016 20:56:48 +0100
Subject: [PATCH 035/289] Replace marked with commonmark
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Marked has some annoying bugs, and the author is inactive, so replace it
with commonmark.js, which is the reference JavaScript implementation of
CommonMark.  CommonMark is also preferable since it has a specification,
and a conformance test suite to make sure that parsers are correct.

Signed-off-by: Johannes Löthberg <johannes@kyriasis.com>
---
 package.json    |  2 +-
 src/Markdown.js | 92 +++++++++++++------------------------------------
 2 files changed, 24 insertions(+), 70 deletions(-)

diff --git a/package.json b/package.json
index a25260e35d..e93aadf8d1 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
     "isomorphic-fetch": "^2.2.1",
     "linkifyjs": "^2.1.3",
     "lodash": "^4.13.1",
-    "marked": "^0.3.5",
+    "commonmark": "^0.27.0",
     "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
     "optimist": "^0.6.1",
     "q": "^1.4.1",
diff --git a/src/Markdown.js b/src/Markdown.js
index a7b267b110..80805144e2 100644
--- a/src/Markdown.js
+++ b/src/Markdown.js
@@ -14,20 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import marked from 'marked';
-
-// marked only applies the default options on the high
-// level marked() interface, so we do it here.
-const marked_options = Object.assign({}, marked.defaults, {
-    gfm: true,
-    tables: true,
-    breaks: true,
-    pedantic: false,
-    sanitize: true,
-    smartLists: true,
-    smartypants: false,
-    xhtml: true, // return self closing tags (ie. <br /> not <br>)
-});
+import commonmark from 'commonmark';
 
 /**
  * Class that wraps marked, adding the ability to see whether
@@ -36,16 +23,7 @@ const marked_options = Object.assign({}, marked.defaults, {
  */
 export default class Markdown {
     constructor(input) {
-        const lexer = new marked.Lexer(marked_options);
-        this.tokens = lexer.lex(input);
-    }
-
-    _copyTokens() {
-        // copy tokens (the parser modifies its input arg)
-        const tokens_copy = this.tokens.slice();
-        // it also has a 'links' property, because this is javascript
-        // and why wouldn't you have an array that also has properties?
-        return Object.assign(tokens_copy, this.tokens);
+        this.input = input
     }
 
     isPlainText() {
@@ -64,65 +42,41 @@ export default class Markdown {
             is_plain = false;
         }
 
-        const dummy_renderer = {};
-        for (const k of Object.keys(marked.Renderer.prototype)) {
+        const dummy_renderer = new commonmark.HtmlRenderer();
+        for (const k of Object.keys(commonmark.HtmlRenderer.prototype)) {
             dummy_renderer[k] = setNotPlain;
         }
         // text and paragraph are just text
-        dummy_renderer.text = function(t){return t;}
-        dummy_renderer.paragraph = function(t){return t;}
+        dummy_renderer.text = function(t) { return t; }
+        dummy_renderer.paragraph = function(t) { return t; }
 
-        // ignore links where text is just the url:
-        // this ignores plain URLs that markdown has
-        // detected whilst preserving markdown syntax links
-        dummy_renderer.link = function(href, title, text) {
-            if (text != href) {
-                is_plain = false;
-            }
-        }
-
-        const dummy_options = Object.assign({}, marked_options, {
-            renderer: dummy_renderer,
-        });
-        const dummy_parser = new marked.Parser(dummy_options);
-        dummy_parser.parse(this._copyTokens());
+        const dummy_parser = new commonmark.Parser();
+        dummy_renderer.render(dummy_parser.parse(this.input));
 
         return is_plain;
     }
 
     toHTML() {
-        const real_renderer = new marked.Renderer();
-        real_renderer.link = function(href, title, text) {
-            // prevent marked from turning plain URLs
-            // into links, because its algorithm is fairly
-            // poor. Let's send plain URLs rather than
-            // badly linkified ones (the linkifier Vector
-            // uses on message display is way better, eg.
-            // handles URLs with closing parens at the end).
-            if (text == href) {
-                return href;
-            }
-            return marked.Renderer.prototype.link.apply(this, arguments);
-        }
+        const parser = new commonmark.Parser();
 
-        real_renderer.paragraph = (text) => {
-            // The tokens at the top level are the 'blocks', so if we
-            // have more than one, there are multiple 'paragraphs'.
-            // If there is only one top level token, just return the
+        const renderer = new commonmark.HtmlRenderer({safe: true});
+        const real_paragraph = renderer.paragraph;
+        renderer.paragraph = function(node, entering) {
+            // If there is only one top level node, just return the
             // bare text: it's a single line of text and so should be
-            // 'inline', rather than necessarily wrapped in its own
-            // p tag. If, however, we have multiple tokens, each gets
+            // 'inline', rather than unnecessarily wrapped in its own
+            // p tag. If, however, we have multiple nodes, each gets
             // its own p tag to keep them as separate paragraphs.
-            if (this.tokens.length == 1) {
-                return text;
+            var par = node;
+            while (par.parent) {
+                par = par.parent
+            }
+            if (par.firstChild != par.lastChild) {
+                real_paragraph.bind(this)(node, entering);
             }
-            return '<p>' + text + '</p>';
         }
 
-        const real_options = Object.assign({}, marked_options, {
-            renderer: real_renderer,
-        });
-        const real_parser = new marked.Parser(real_options);
-        return real_parser.parse(this._copyTokens());
+        var parsed = parser.parse(this.input);
+        return renderer.render(parsed);
     }
 }

From 5f160d2e7f86f435db73b7d17799a8a35bb83514 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20L=C3=B6thberg?= <johannes@kyriasis.com>
Date: Wed, 30 Nov 2016 01:03:05 +0100
Subject: [PATCH 036/289] Markdown: Use .call instead of .bind
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Johannes Löthberg <johannes@kyriasis.com>
---
 src/Markdown.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Markdown.js b/src/Markdown.js
index 80805144e2..18c888b541 100644
--- a/src/Markdown.js
+++ b/src/Markdown.js
@@ -72,7 +72,7 @@ export default class Markdown {
                 par = par.parent
             }
             if (par.firstChild != par.lastChild) {
-                real_paragraph.bind(this)(node, entering);
+                real_paragraph.call(this, node, entering);
             }
         }
 

From 5d03543f8589f6648a1da49c4bb9c5b8aa28326e Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Wed, 30 Nov 2016 10:49:40 +0000
Subject: [PATCH 037/289] Make cut operations update the tab complete list

---
 src/TabComplete.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/TabComplete.js b/src/TabComplete.js
index 65441c9381..a0380f36c4 100644
--- a/src/TabComplete.js
+++ b/src/TabComplete.js
@@ -227,8 +227,20 @@ class TabComplete {
 
             // pressing any key at all (except tab) restarts the automatic tab-complete timer
             if (this.opts.autoEnterTabComplete) {
+                const cachedText = ev.target.value;
                 clearTimeout(this.enterTabCompleteTimerId);
                 this.enterTabCompleteTimerId = setTimeout(() => {
+                    if (this.completing) {
+                        // If you highlight text and CTRL+X it, tab-completing will not be reset.
+                        // This check makes sure that if something like a cut operation has been
+                        // done, that we correctly refresh the tab-complete list. Normal backspace
+                        // operations get caught by the stopTabCompleting() section above, but
+                        // because the CTRL key is held, this does not execute for CTRL+X.
+                        if (cachedText !== this.textArea.value) {
+                            this.stopTabCompleting();
+                        }
+                    }
+
                     if (!this.completing) {
                         this.handleTabPress(true, false);
                     }

From 3aa1e0dd9ed3432a665c6a278397d3a23f2155fa Mon Sep 17 00:00:00 2001
From: Mark Haines <mjark@negativecurvature.net>
Date: Thu, 1 Dec 2016 13:12:22 +0000
Subject: [PATCH 038/289] Update browser-encrypt-attachment to v0.3.0 (#570)

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

diff --git a/package.json b/package.json
index a25260e35d..5b5c41c53e 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
   "dependencies": {
     "babel-runtime": "^6.11.6",
     "blueimp-canvas-to-blob": "^3.5.0",
-    "browser-encrypt-attachment": "^0.2.0",
+    "browser-encrypt-attachment": "^0.3.0",
     "browser-request": "^0.3.3",
     "classnames": "^2.1.2",
     "draft-js": "^0.8.1",

From 5665a0ef370f63654f2305e43f57d962db3cf9d2 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Fri, 2 Dec 2016 11:11:35 +0000
Subject: [PATCH 039/289] Fix scroll jump on image decryption

`onWidgetLoad` is now being called when an image has been decrypted so that the ScrollPanel maintains its scroll position (whether it's stuckAtBottom or not). This attempts to fix https://github.com/vector-im/riot-web/issues/2624
---
 src/components/views/messages/MImageBody.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 63fd119335..08969114f9 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -32,6 +32,9 @@ module.exports = React.createClass({
     propTypes: {
         /* the MatrixEvent to show */
         mxEvent: React.PropTypes.object.isRequired,
+
+        /* called when the image has loaded */
+        onWidgetLoad: React.PropTypes.func.isRequired,
     },
 
     getInitialState: function() {
@@ -123,6 +126,7 @@ module.exports = React.createClass({
                         decryptedUrl: contentUrl,
                         decryptedThumbnailUrl: thumbnailUrl,
                     });
+                    this.props.onWidgetLoad();
                 });
             }).catch((err) => {
                 console.warn("Unable to decrypt attachment: ", err);
@@ -186,11 +190,12 @@ module.exports = React.createClass({
                 <span className="mx_MImageBody" ref="body">
                     <div className="mx_MImageBody_thumbnail" ref="image" style={{
                         "display": "flex",
-                        "align-items": "center",
-                        "justify-items": "center",
+                        "alignItems": "center",
                         "width": "100%",
                     }}>
-                        <img src="img/spinner.gif" alt={content.body} width="16" height="16"/>
+                        <img src="img/spinner.gif" alt={content.body} width="32" height="32" style={{
+                            "margin": "auto",
+                        }}/>
                     </div>
                 </span>
             );

From 81e429eb143ae99e25af80462570d8f77653a026 Mon Sep 17 00:00:00 2001
From: Mark Haines <mjark@negativecurvature.net>
Date: Fri, 2 Dec 2016 14:21:07 +0000
Subject: [PATCH 040/289] Fix e2e attachment download by using iframes. (#562)

* Render attachments inside iframes.

* Fix up the image and video views

* Fix m.audio

* Comments, and only use the cross domain renderer if the attachment is encrypted

* Fix whitespace

* Don't decrypt file attachments immediately

* Use https://usercontent.riot.im/v1.html by default

* typos

* Put the config in the React context.

Use it in MFileBody to configure the cross origin renderer URL.

* Call it appConfig in the context

* Return the promises so they don't get dropped
---
 src/components/structures/MatrixChat.js     |  10 +
 src/components/views/messages/MAudioBody.js |  12 +-
 src/components/views/messages/MFileBody.js  | 280 +++++++++++++++-----
 src/components/views/messages/MImageBody.js |  16 +-
 src/components/views/messages/MVideoBody.js |  16 +-
 src/utils/DecryptFile.js                    |   4 +-
 6 files changed, 253 insertions(+), 85 deletions(-)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 2a31850f68..ff5a44e016 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -66,10 +66,20 @@ module.exports = React.createClass({
         defaultDeviceDisplayName: React.PropTypes.string,
     },
 
+    childContextTypes: {
+        appConfig: React.PropTypes.object,
+    },
+
     AuxPanel: {
         RoomSettings: "room_settings",
     },
 
+    getChildContext: function() {
+        return {
+            appConfig: this.props.config,
+        }
+    },
+
     getInitialState: function() {
         var s = {
             loading: true,
diff --git a/src/components/views/messages/MAudioBody.js b/src/components/views/messages/MAudioBody.js
index 393bf549ae..7e338e8466 100644
--- a/src/components/views/messages/MAudioBody.js
+++ b/src/components/views/messages/MAudioBody.js
@@ -21,7 +21,7 @@ import MFileBody from './MFileBody';
 
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import sdk from '../../../index';
-import { decryptFile } from '../../../utils/DecryptFile';
+import { decryptFile, readBlobAsDataUri } from '../../../utils/DecryptFile';
 
 export default class MAudioBody extends React.Component {
     constructor(props) {
@@ -29,6 +29,7 @@ export default class MAudioBody extends React.Component {
         this.state = {
             playing: false,
             decryptedUrl: null,
+            decryptedBlob: null,
             error: null,
         }
     }
@@ -50,9 +51,14 @@ export default class MAudioBody extends React.Component {
     componentDidMount() {
         var content = this.props.mxEvent.getContent();
         if (content.file !== undefined && this.state.decryptedUrl === null) {
-            decryptFile(content.file).done((url) => {
+            var decryptedBlob;
+            decryptFile(content.file).then(function(blob) {
+                decryptedBlob = blob;
+                return readBlobAsDataUri(decryptedBlob);
+            }).done((url) => {
                 this.setState({
                     decryptedUrl: url,
+                    decryptedBlob: decryptedBlob,
                 });
             }, (err) => {
                 console.warn("Unable to decrypt attachment: ", err);
@@ -93,7 +99,7 @@ export default class MAudioBody extends React.Component {
         return (
             <span className="mx_MAudioBody">
                 <audio src={contentUrl} controls />
-                <MFileBody {...this.props} decryptedUrl={this.state.decryptedUrl} />
+                <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} />
             </span>
         );
     }
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index c7c0881cbb..4f5ca2d3be 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -63,15 +63,137 @@ function updateTintedDownloadImage() {
 
 Tinter.registerTintable(updateTintedDownloadImage);
 
+// User supplied content can contain scripts, we have to be careful that
+// we don't accidentally run those script within the same origin as the
+// client. Otherwise those scripts written by remote users can read
+// the access token and end-to-end keys that are in local storage.
+//
+// For attachments downloaded directly from the homeserver we can use
+// Content-Security-Policy headers to disable script execution.
+//
+// But attachments with end-to-end encryption are more difficult to handle.
+// We need to decrypt the attachment on the client and then display it.
+// To display the attachment we need to turn the decrypted bytes into a URL.
+//
+// There are two ways to turn bytes into URLs, data URL and blob URLs.
+// Data URLs aren't suitable for downloading a file because Chrome has a
+// 2MB limit on the size of URLs that can be viewed in the browser or
+// downloaded. This limit does not seem to apply when the url is used as
+// the source attribute of an image tag.
+//
+// Blob URLs are generated using window.URL.createObjectURL and unforuntately
+// for our purposes they inherit the origin of the page that created them.
+// This means that any scripts that run when the URL is viewed will be able
+// to access local storage.
+//
+// The easiest solution is to host the code that generates the blob URL on
+// a different domain to the client.
+// Another possibility is to generate the blob URL within a sandboxed iframe.
+// The downside of using a second domain is that it complicates hosting,
+// the downside of using a sandboxed iframe is that the browers are overly
+// restrictive in what you are allowed to do with the generated URL.
+//
+// For now given how unusable the blobs generated in sandboxed iframes are we
+// default to using a renderer hosted on "usercontent.riot.im". This is
+// overridable so that people running their own version of the client can
+// choose a different renderer.
+//
+// To that end the first version of the blob generation will be the following
+// html:
+//
+//      <html><head><script>
+//      window.onmessage=function(e){eval("("+e.data.code+")")(e)}
+//      </script></head><body></body></html>
+//
+// This waits to receive a message event sent using the window.postMessage API.
+// When it receives the event it evals a javascript function in data.code and
+// runs the function passing the event as an argument.
+//
+// In particular it means that the rendering function can be written as a
+// ordinary javascript function which then is turned into a string using
+// toString().
+//
+const DEFAULT_CROSS_ORIGIN_RENDERER = "https://usercontent.riot.im/v1.html";
+
+/**
+ * Render the attachment inside the iframe.
+ * We can't use imported libraries here so this has to be vanilla JS.
+ */
+function remoteRender(event) {
+    const data = event.data;
+
+    const img = document.createElement("img");
+    img.id = "img";
+    img.src = data.imgSrc;
+
+    const a = document.createElement("a");
+    a.id = "a";
+    a.rel = data.rel;
+    a.target = data.target;
+    a.download = data.download;
+    a.style = data.style;
+    a.href = window.URL.createObjectURL(data.blob);
+    a.appendChild(img);
+    a.appendChild(document.createTextNode(data.textContent));
+
+    const body = document.body;
+    // Don't display scrollbars if the link takes more than one line
+    // to display.
+    body.style = "margin: 0px; overflow: hidden";
+    body.appendChild(a);
+}
+
+/**
+ * Update the tint inside the iframe.
+ * We can't use imported libraries here so this has to be vanilla JS.
+ */
+function remoteSetTint(event) {
+    const data = event.data;
+
+    const img = document.getElementById("img");
+    img.src = data.imgSrc;
+    img.style = data.imgStyle;
+
+    const a = document.getElementById("a");
+    a.style = data.style;
+}
+
+
+/**
+ * Get the current CSS style for a DOMElement.
+ * @param {HTMLElement} element The element to get the current style of.
+ * @return {string} The CSS style encoded as a string.
+ */
+function computedStyle(element) {
+    if (!element) {
+        return "";
+    }
+    const style = window.getComputedStyle(element, null);
+    var cssText = style.cssText;
+    if (cssText == "") {
+        // Firefox doesn't implement ".cssText" for computed styles.
+        // https://bugzilla.mozilla.org/show_bug.cgi?id=137687
+        for (var i = 0; i < style.length; i++) {
+            cssText += style[i] + ":";
+            cssText += style.getPropertyValue(style[i]) + ";";
+        }
+    }
+    return cssText;
+}
+
 module.exports = React.createClass({
     displayName: 'MFileBody',
 
     getInitialState: function() {
         return {
-            decryptedUrl: (this.props.decryptedUrl ? this.props.decryptedUrl : null),
+            decryptedBlob: (this.props.decryptedBlob ? this.props.decryptedBlob : null),
         };
     },
 
+    contextTypes: {
+        appConfig: React.PropTypes.object,
+    },
+
     /**
      * Extracts a human readable label for the file attachment to use as
      * link text.
@@ -102,11 +224,7 @@ module.exports = React.createClass({
 
     _getContentUrl: function() {
         const content = this.props.mxEvent.getContent();
-        if (content.file !== undefined) {
-            return this.state.decryptedUrl;
-        } else {
-            return MatrixClientPeg.get().mxcUrlToHttp(content.url);
-        }
+        return MatrixClientPeg.get().mxcUrlToHttp(content.url);
     },
 
     componentDidMount: function() {
@@ -127,90 +245,108 @@ module.exports = React.createClass({
         if (this.refs.downloadImage) {
             this.refs.downloadImage.src = tintedDownloadImageURL;
         }
+        if (this.refs.iframe) {
+            // If the attachment is encrypted then the download image
+            // will be inside the iframe so we wont be able to update
+            // it directly.
+            this.refs.iframe.contentWindow.postMessage({
+                code: remoteSetTint.toString(),
+                imgSrc: tintedDownloadImageURL,
+                style: computedStyle(this.refs.dummyLink),
+            }, "*");
+        }
     },
 
     render: function() {
         const content = this.props.mxEvent.getContent();
-
         const text = this.presentableTextForFile(content);
+        const isEncrypted = content.file !== undefined;
+        const fileName = content.body && content.body.length > 0 ? content.body : "Attachment";
+        const contentUrl = this._getContentUrl();
         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
 
-        if (content.file !== undefined && this.state.decryptedUrl === null) {
+        if (isEncrypted) {
+            if (this.state.decryptedBlob === null) {
+                // Need to decrypt the attachment
+                // Wait for the user to click on the link before downloading
+                // and decrypting the attachment.
+                var decrypting = false;
+                const decrypt = () => {
+                    if (decrypting) {
+                        return false;
+                    }
+                    decrypting = true;
+                    decryptFile(content.file).then((blob) => {
+                        this.setState({
+                            decryptedBlob: blob,
+                        });
+                    }).catch((err) => {
+                        console.warn("Unable to decrypt attachment: ", err)
+                        Modal.createDialog(ErrorDialog, {
+                            description: "Error decrypting attachment"
+                        });
+                    }).finally(() => {
+                        decrypting = false;
+                        return;
+                    });
+                };
 
-            var decrypting = false;
-            const decrypt = () => {
-                if (decrypting) {
-                    return false;
-                }
-                decrypting = true;
-                decryptFile(content.file).then((url) => {
-                    this.setState({
-                        decryptedUrl: url,
-                    });
-                }).catch((err) => {
-                    console.warn("Unable to decrypt attachment: ", err)
-                    // Set a placeholder image when we can't decrypt the image
-                    Modal.createDialog(ErrorDialog, {
-                        description: "Error decrypting attachment"
-                    });
-                }).finally(function() {
-                    decrypting = false;
-                }).done();
-                return false;
+                return (
+                    <span className="mx_MFileBody" ref="body">
+                        <div className="mx_MImageBody_download">
+                            <a href="javascript:void(0)" onClick={decrypt}>
+                                Decrypt {text}
+                            </a>
+                        </div>
+                    </span>
+                );
+            }
+
+            // When the iframe loads we tell it to render a download link
+            const onIframeLoad = (ev) => {
+                ev.target.contentWindow.postMessage({
+                    code: remoteRender.toString(),
+                    imgSrc: tintedDownloadImageURL,
+                    style: computedStyle(this.refs.dummyLink),
+                    blob: this.state.decryptedBlob,
+                    // Set a download attribute for encrypted files so that the file
+                    // will have the correct name when the user tries to download it.
+                    // We can't provide a Content-Disposition header like we would for HTTP.
+                    download: fileName,
+                    target: "_blank",
+                    textContent: "Download " + text,
+                }, "*");
             };
 
-            // Need to decrypt the attachment
-            // The attachment is decrypted in componentDidMount.
-            // For now add an img tag with a spinner.
+            // If the attachment is encryped then put the link inside an iframe.
+            let renderer_url = DEFAULT_CROSS_ORIGIN_RENDERER;
+            if (this.context.appConfig && this.context.appConfig.cross_origin_renderer_url) {
+                renderer_url = this.context.appConfig.cross_origin_renderer_url;
+            }
             return (
-                <span className="mx_MFileBody" ref="body">
+                <span className="mx_MFileBody">
                     <div className="mx_MImageBody_download">
-                        <a href="javascript:void(0)" onClick={decrypt}>
-                            Decrypt {text}
-                        </a>
+                        <div style={{display: "none"}}>
+                            {/*
+                              * Add dummy copy of the "a" tag
+                              * We'll use it to learn how the download link
+                              * would have been styled if it was rendered inline.
+                              */}
+                            <a ref="dummyLink"/>
+                        </div>
+                        <iframe src={renderer_url} onLoad={onIframeLoad} ref="iframe"/>
                     </div>
                 </span>
             );
-        }
-
-        const contentUrl = this._getContentUrl();
-
-        const fileName = content.body && content.body.length > 0 ? content.body : "Attachment";
-
-        var downloadAttr = undefined;
-        if (this.state.decryptedUrl) {
-            // If the file is encrypted then we MUST download it rather than displaying it
-            // because Firefox is vunerable to XSS attacks in data:// URLs
-            // and all browsers are vunerable to XSS attacks in blob: URLs
-            // created with window.URL.createObjectURL
-            // See https://bugzilla.mozilla.org/show_bug.cgi?id=255107
-            // See https://w3c.github.io/FileAPI/#originOfBlobURL
-            //
-            // This is not a problem for unencrypted links because they are
-            // either fetched from a different domain so are safe because of
-            // the same-origin policy or they are fetch from the same domain,
-            // in which case we trust that the homeserver will set a
-            // Content-Security-Policy that disables script execution.
-            // It is reasonable to trust the homeserver in that case since
-            // it is the same domain that controls this javascript.
-            //
-            // We can't apply the same workaround for encrypted files because
-            // we can't supply HTTP headers when the user clicks on a blob:
-            // or data:// uri.
-            //
-            // We should probably provide a download attribute anyway so that
-            // the file will have the correct name when the user tries to
-            // download it. We can't provide a Content-Disposition header
-            // like we would for HTTP.
-            downloadAttr = fileName;
-        }
-
-        if (contentUrl) {
+        } else if (contentUrl) {
+            // If the attachment is not encrypted then we check whether we
+            // are being displayed in the room timeline or in a list of
+            // files in the right hand side of the screen.
             if (this.props.tileShape === "file_grid") {
                 return (
                     <span className="mx_MFileBody">
                         <div className="mx_MImageBody_download">
-                            <a className="mx_ImageBody_downloadLink" href={contentUrl} target="_blank" rel="noopener" download={downloadAttr}>
+                            <a className="mx_ImageBody_downloadLink" href={contentUrl} target="_blank">
                                 { fileName }
                             </a>
                             <div className="mx_MImageBody_size">
@@ -224,7 +360,7 @@ module.exports = React.createClass({
                 return (
                     <span className="mx_MFileBody">
                         <div className="mx_MImageBody_download">
-                            <a href={contentUrl} target="_blank" rel="noopener" download={downloadAttr}>
+                            <a href={contentUrl} target="_blank" rel="noopener">
                                 <img src={tintedDownloadImageURL} width="12" height="14" ref="downloadImage"/>
                                 Download {text}
                             </a>
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 08969114f9..5e7cb6e800 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -23,7 +23,7 @@ import ImageUtils from '../../../ImageUtils';
 import Modal from '../../../Modal';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
-import {decryptFile} from '../../../utils/DecryptFile';
+import { decryptFile, readBlobAsDataUri } from '../../../utils/DecryptFile';
 import q from 'q';
 
 module.exports = React.createClass({
@@ -41,6 +41,7 @@ module.exports = React.createClass({
         return {
             decryptedUrl: null,
             decryptedThumbnailUrl: null,
+            decryptedBlob: null,
             error: null
         };
     },
@@ -118,13 +119,20 @@ module.exports = React.createClass({
             if (content.info.thumbnail_file) {
                 thumbnailPromise = decryptFile(
                     content.info.thumbnail_file
-                );
+                ).then(function (blob) {
+                    return readBlobAsDataUri(blob);
+                });
             }
+            var decryptedBlob;
             thumbnailPromise.then((thumbnailUrl) => {
-                decryptFile(content.file).then((contentUrl) => {
+                return decryptFile(content.file).then(function(blob) {
+                    decryptedBlob = blob;
+                    return readBlobAsDataUri(blob);
+                }).then((contentUrl) => {
                     this.setState({
                         decryptedUrl: contentUrl,
                         decryptedThumbnailUrl: thumbnailUrl,
+                        decryptedBlob: decryptedBlob,
                     });
                     this.props.onWidgetLoad();
                 });
@@ -213,7 +221,7 @@ module.exports = React.createClass({
                             onMouseEnter={this.onImageEnter}
                             onMouseLeave={this.onImageLeave} />
                     </a>
-                    <MFileBody {...this.props} decryptedUrl={this.state.decryptedUrl} />
+                    <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} />
                 </span>
             );
         } else if (content.body) {
diff --git a/src/components/views/messages/MVideoBody.js b/src/components/views/messages/MVideoBody.js
index a0dbb141ac..7279f5c325 100644
--- a/src/components/views/messages/MVideoBody.js
+++ b/src/components/views/messages/MVideoBody.js
@@ -21,7 +21,7 @@ import MFileBody from './MFileBody';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import Model from '../../../Modal';
 import sdk from '../../../index';
-import { decryptFile } from '../../../utils/DecryptFile';
+import { decryptFile, readBlobAsDataUri } from '../../../utils/DecryptFile';
 import q from 'q';
 
 module.exports = React.createClass({
@@ -31,6 +31,7 @@ module.exports = React.createClass({
         return {
             decryptedUrl: null,
             decryptedThumbnailUrl: null,
+            decryptedBlob: null,
             error: null,
         };
     },
@@ -84,13 +85,20 @@ module.exports = React.createClass({
             if (content.info.thumbnail_file) {
                 thumbnailPromise = decryptFile(
                     content.info.thumbnail_file
-                );
+                ).then(function(blob) {
+                    return readBlobAsDataUri(blob);
+                });
             }
+            var decryptedBlob;
             thumbnailPromise.then((thumbnailUrl) => {
-                decryptFile(content.file).then((contentUrl) => {
+                return decryptFile(content.file).then(function(blob) {
+                    decryptedBlob = blob;
+                    return readBlobAsDataUri(blob);
+                }).then((contentUrl) => {
                     this.setState({
                         decryptedUrl: contentUrl,
                         decryptedThumbnailUrl: thumbnailUrl,
+                        decryptedBlob: decryptedBlob,
                     });
                 });
             }).catch((err) => {
@@ -159,7 +167,7 @@ module.exports = React.createClass({
                     controls preload={preload} autoPlay={false}
                     height={height} width={width} poster={poster}>
                 </video>
-                <MFileBody {...this.props} decryptedUrl={this.state.decryptedUrl} />
+                <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} />
             </span>
         );
     },
diff --git a/src/utils/DecryptFile.js b/src/utils/DecryptFile.js
index 38eab1d073..8b5f014f2c 100644
--- a/src/utils/DecryptFile.js
+++ b/src/utils/DecryptFile.js
@@ -27,7 +27,7 @@ import q from 'q';
  * Read blob as a data:// URI.
  * @return {Promise} A promise that resolves with the data:// URI.
  */
-function readBlobAsDataUri(file) {
+export function readBlobAsDataUri(file) {
     var deferred = q.defer();
     var reader = new FileReader();
     reader.onload = function(e) {
@@ -62,6 +62,6 @@ export function decryptFile(file) {
     }).then(function(dataArray) {
         // Turn the array into a Blob and give it the correct MIME-type.
         var blob = new Blob([dataArray], {type: file.mimetype});
-        return readBlobAsDataUri(blob);
+        return blob;
     });
 }

From f321c6c346b31b47d44a7976537978a56c6790c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20L=C3=B6thberg?= <johannes@kyriasis.com>
Date: Sat, 3 Dec 2016 01:20:50 +0100
Subject: [PATCH 041/289] Strip (IRC) when clicking on username
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes vector-im/riot-web#2072.

Signed-off-by: Johannes Löthberg <johannes@kyriasis.com>
---
 src/components/views/rooms/EventTile.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 410ad2b953..8dd84f9364 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -351,7 +351,7 @@ module.exports = WithMatrixClient(React.createClass({
         var mxEvent = this.props.mxEvent;
         dispatcher.dispatch({
             action: 'insert_displayname',
-            displayname: mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender(),
+            displayname: (mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender()).replace(' (IRC)', ''),
         });
     },
 

From 6693817cdb4eba6db6153c900e11178c08c7945a Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 5 Dec 2016 17:47:54 +0000
Subject: [PATCH 042/289] released js-sdk

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

diff --git a/package.json b/package.json
index 5b5c41c53e..e8c47b9e0a 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
     "linkifyjs": "^2.1.3",
     "lodash": "^4.13.1",
     "marked": "^0.3.5",
-    "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
+    "matrix-js-sdk": "0.7.1-rc.1",
     "optimist": "^0.6.1",
     "q": "^1.4.1",
     "react": "^15.4.0",

From b348dfa382daca8feb1c76d68b3ab987739425df Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 5 Dec 2016 17:51:03 +0000
Subject: [PATCH 043/289] Prepare changelog for v0.8.1-rc.1

---
 CHANGELOG.md | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 90b3231e95..be93d748b7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,32 @@
+Changes in [0.8.1-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.8.1-rc.1) (2016-12-05)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.8.0...v0.8.1-rc.1)
+
+ * Strip (IRC) when clicking on username
+   [\#579](https://github.com/matrix-org/matrix-react-sdk/pull/579)
+ * Fix scroll jump on image decryption
+   [\#577](https://github.com/matrix-org/matrix-react-sdk/pull/577)
+ * Make cut operations update the tab complete list
+   [\#576](https://github.com/matrix-org/matrix-react-sdk/pull/576)
+ * s/block/blacklist for e2e
+   [\#574](https://github.com/matrix-org/matrix-react-sdk/pull/574)
+ * Fix the download icon on attachments
+   [\#573](https://github.com/matrix-org/matrix-react-sdk/pull/573)
+ * Don't default the page_type to room directory
+   [\#572](https://github.com/matrix-org/matrix-react-sdk/pull/572)
+ * Fix crash on logging in
+   [\#571](https://github.com/matrix-org/matrix-react-sdk/pull/571)
+ * Reinstate missing sections from the UserSettings
+   [\#569](https://github.com/matrix-org/matrix-react-sdk/pull/569)
+ * Bump browser-encrypt-attachment to v0.2.0
+   [\#568](https://github.com/matrix-org/matrix-react-sdk/pull/568)
+ * Make the unpagination process less aggressive
+   [\#567](https://github.com/matrix-org/matrix-react-sdk/pull/567)
+ * Get rid of always-on labs settings
+   [\#566](https://github.com/matrix-org/matrix-react-sdk/pull/566)
+ * Fix 'Quote' for e2e messages
+   [\#565](https://github.com/matrix-org/matrix-react-sdk/pull/565)
+
 Changes in [0.8.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.8.0) (2016-11-19)
 ===================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.7.5...v0.8.0)

From 66f72e674b56843b4024f68483e5aaed64e48511 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 5 Dec 2016 17:51:04 +0000
Subject: [PATCH 044/289] v0.8.1-rc.1

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

diff --git a/package.json b/package.json
index e8c47b9e0a..e6be0d9a6c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "0.8.0",
+  "version": "0.8.1-rc.1",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {

From 8ffe14881e94b0b7b8fc05ce2a650cc8f2c425cf Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 5 Dec 2016 18:33:38 +0000
Subject: [PATCH 045/289] Don't throw an exception entering settings page

if end to end encryption is disabled (eg. if you're a guest and
the server is too old to support e2e for guests).
---
 src/components/structures/UserSettings.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index b82f2f5958..c15f58013e 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -338,7 +338,16 @@ module.exports = React.createClass({
     },
 
     _renderCryptoInfo: function() {
-        var client = MatrixClientPeg.get();
+        const client = MatrixClientPeg.get();
+        if (!client.isCryptoEnabled()) {
+            return <div>
+                <h3>Cryptography</h3>
+                <div className="mx_UserSettings_section mx_UserSettings_cryptoSection error">
+                    End-to-end encryption is disabled
+                </div>
+            </div>;
+        }
+
         var deviceId = client.deviceId;
         var identityKey = client.getDeviceEd25519Key() || "<not supported>";
 

From 6777e07a41f69697df9e495fb752343daa3b3530 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 5 Dec 2016 20:03:43 +0000
Subject: [PATCH 046/289] Remove device name from crypto section

As it was getting it by assuming our device was the first one,
which is just not a valid assumption.
---
 src/components/structures/UserSettings.js | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index c15f58013e..49674957bc 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -339,25 +339,14 @@ module.exports = React.createClass({
 
     _renderCryptoInfo: function() {
         const client = MatrixClientPeg.get();
-        if (!client.isCryptoEnabled()) {
-            return <div>
-                <h3>Cryptography</h3>
-                <div className="mx_UserSettings_section mx_UserSettings_cryptoSection error">
-                    End-to-end encryption is disabled
-                </div>
-            </div>;
-        }
+        const deviceId = client.deviceId;
+        const identityKey = client.getDeviceEd25519Key() || "<not supported>";
 
-        var deviceId = client.deviceId;
-        var identityKey = client.getDeviceEd25519Key() || "<not supported>";
-
-        var myDevice = client.getStoredDevicesForUser(MatrixClientPeg.get().credentials.userId)[0];
         return (
             <div>
                 <h3>Cryptography</h3>
                 <div className="mx_UserSettings_section mx_UserSettings_cryptoSection">
                     <ul>
-                        <li><label>Device name:</label> <span>{ myDevice.getDisplayName() }</span></li>
                         <li><label>Device ID:</label>   <span><code>{deviceId}</code></span></li>
                         <li><label>Device key:</label>  <span><code><b>{identityKey}</b></code></span></li>
                     </ul>

From 28e663dd48dde71a717a12dc61fc08e0c47ffc01 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 6 Dec 2016 13:27:36 +0000
Subject: [PATCH 047/289] Pass the room object into displayNotification

It needs it to do the view_room if the notification is clicked.
---
 src/BasePlatform.js | 2 +-
 src/Notifier.js     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/BasePlatform.js b/src/BasePlatform.js
index 897a1a2dc8..b8c400c6e3 100644
--- a/src/BasePlatform.js
+++ b/src/BasePlatform.js
@@ -63,7 +63,7 @@ export default class BasePlatform {
     requestNotificationPermission() : Promise<string> {
     }
 
-    displayNotification(title: string, msg: string, avatarUrl: string) {
+    displayNotification(title: string, msg: string, avatarUrl: string, room: Object) {
     }
 
     /**
diff --git a/src/Notifier.js b/src/Notifier.js
index b9260a046d..a58fc0132f 100644
--- a/src/Notifier.js
+++ b/src/Notifier.js
@@ -73,7 +73,7 @@ var Notifier = {
             ev.sender, 40, 40, 'crop'
         ) : null;
 
-        const notif = plaf.displayNotification(title, msg, avatarUrl);
+        const notif = plaf.displayNotification(title, msg, avatarUrl, room);
 
         // if displayNotification returns non-null,  the platform supports
         // clearing notifications later, so keep track of this.

From ef1cb9530fd6b1c94638d4fd3239afee33f58451 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 6 Dec 2016 14:30:21 +0000
Subject: [PATCH 048/289] Allow integration UI URLs with paths

The postMessage API assumed that event origins contained paths of their window origins, but they do not (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage). This changes the origin check such that the integrations UI URL must start with the event origin.
---
 src/ScalarMessaging.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/ScalarMessaging.js b/src/ScalarMessaging.js
index db2baa433b..75062daaa2 100644
--- a/src/ScalarMessaging.js
+++ b/src/ScalarMessaging.js
@@ -292,12 +292,15 @@ const onMessage = function(event) {
         event.origin = event.originalEvent.origin;
     }
 
-    // check it is from the integrations UI URL (remove trailing spaces)
+    // Check that the integrations UI URL starts with the origin of the event
+    // This means the URL could contain a path (like /develop) and still be used
+    // to validate event origins, which do not specify paths.
+    // (See https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)
+    //
+    // All strings start with the empty string, so for sanity return if the length
+    // of the event origin is 0.
     let url = SdkConfig.get().integrations_ui_url;
-    if (url.endsWith("/")) {
-        url = url.substr(0, url.length - 1);
-    }
-    if (url !== event.origin) {
+    if (event.origin.length === 0 || !url.startsWith(event.origin)) {
         return; // don't log this - debugging APIs like to spam postMessage which floods the log otherwise
     }
 

From a3ab59832e647a45747cc9010ce3c1538a0f206a Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 6 Dec 2016 14:40:09 +0000
Subject: [PATCH 049/289] Give the search box field a name

Should fix https://github.com/vector-im/riot-web/issues/2462
---
 src/components/views/elements/DirectorySearchBox.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/elements/DirectorySearchBox.js b/src/components/views/elements/DirectorySearchBox.js
index a453dfb62a..3ea0d16336 100644
--- a/src/components/views/elements/DirectorySearchBox.js
+++ b/src/components/views/elements/DirectorySearchBox.js
@@ -89,7 +89,7 @@ export default class DirectorySearchBox extends React.Component {
 
         return <span className={classnames(searchbox_classes)}>
             <div className="mx_DirectorySearchBox_container">
-                <input type="text" value={this.state.value}
+                <input type="text" name="dirsearch" value={this.state.value}
                     className="mx_DirectorySearchBox_input"
                     ref={this._collectInput}
                     onChange={this._onChange} onKeyUp={this._onKeyUp}

From 9e3c94edf4dfe64ff495dbdb2a7f52da5c40dd14 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 6 Dec 2016 14:59:10 +0000
Subject: [PATCH 050/289] Fix exception when clearing room dir search

Needed more isMounted checks after promises return.
---
 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 31ac59c730..a9e16d364c 100644
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.js
@@ -402,6 +402,9 @@ module.exports = React.createClass({
         q.finally(fillPromise, () => {
             this._pendingFillRequests[dir] = false;
         }).then((hasMoreResults) => {
+            if (this.unmounted) {
+                return;
+            }
             // Unpaginate once filling is complete
             this._checkUnfillState(!backwards);
 

From a8a07a01de4a324a183463fd9e2eaf32e057a3f1 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 6 Dec 2016 16:04:05 +0000
Subject: [PATCH 051/289] Prepare changelog for v0.8.1-rc.2

---
 CHANGELOG.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index be93d748b7..727e4e0d30 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,18 @@
+Changes in [0.8.1-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.8.1-rc.2) (2016-12-06)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.8.1-rc.1...v0.8.1-rc.2)
+
+ * Fix exception when clearing room dir search
+   [\#585](https://github.com/matrix-org/matrix-react-sdk/pull/585)
+ * Allow integration UI URLs with paths
+   [\#583](https://github.com/matrix-org/matrix-react-sdk/pull/583)
+ * Give the search box field a name
+   [\#584](https://github.com/matrix-org/matrix-react-sdk/pull/584)
+ * Pass the room object into displayNotification
+   [\#582](https://github.com/matrix-org/matrix-react-sdk/pull/582)
+ * Don't throw an exception entering settings page
+   [\#581](https://github.com/matrix-org/matrix-react-sdk/pull/581)
+
 Changes in [0.8.1-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.8.1-rc.1) (2016-12-05)
 =============================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.8.0...v0.8.1-rc.1)

From a297015d2704412825128f964b72cea0847cadb5 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 6 Dec 2016 16:04:05 +0000
Subject: [PATCH 052/289] v0.8.1-rc.2

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

diff --git a/package.json b/package.json
index e6be0d9a6c..b71df01227 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "0.8.1-rc.1",
+  "version": "0.8.1-rc.2",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {

From bd7553d1ea5a35462d72eb99f8d2a80a48439677 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Thu, 8 Dec 2016 16:23:20 +0000
Subject: [PATCH 053/289] Add read receipt times to the hovertip of read
 markers

Fixes #2709. Surprisingly, this data was never passed down to
ReadReceiptMarker.
---
 src/components/views/avatars/MemberAvatar.js    |  3 ++-
 src/components/views/rooms/EventTile.js         | 15 +++++++++++++++
 src/components/views/rooms/ReadReceiptMarker.js | 10 ++++++++++
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/components/views/avatars/MemberAvatar.js b/src/components/views/avatars/MemberAvatar.js
index 1f6736138d..c8a9abb4fe 100644
--- a/src/components/views/avatars/MemberAvatar.js
+++ b/src/components/views/avatars/MemberAvatar.js
@@ -33,6 +33,7 @@ module.exports = React.createClass({
         onClick: React.PropTypes.func,
         // Whether the onClick of the avatar should be overriden to dispatch 'view_user'
         viewUserOnClick: React.PropTypes.bool,
+        title: React.PropTypes.string,
     },
 
     getDefaultProps: function() {
@@ -58,7 +59,7 @@ module.exports = React.createClass({
         }
         return {
             name: props.member.name,
-            title: props.member.userId,
+            title: props.title || props.member.userId,
             imageUrl: Avatar.avatarUrlForMember(props.member,
                                          props.width,
                                          props.height,
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 8dd84f9364..9da3f7b265 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -290,6 +290,18 @@ module.exports = WithMatrixClient(React.createClass({
 
         var left = 0;
 
+        var readReceiptData = Object.create(null);
+        var room = this.props.matrixClient.getRoom(this.props.mxEvent.getRoomId());
+        if (room) {
+            // [ {type/userId/data} ]
+            room.getReceiptsForEvent(this.props.mxEvent).forEach(function(r) {
+                if (r.type !== "m.read" || !r.data.ts) {
+                    return;
+                }
+                readReceiptData[r.userId] = r.data;
+            })
+        }
+
         var receipts = this.props.readReceipts || [];
         for (var i = 0; i < receipts.length; ++i) {
             var member = receipts[i];
@@ -312,6 +324,8 @@ module.exports = WithMatrixClient(React.createClass({
 
             //console.log("i = " + i + ", MAX_READ_AVATARS = " + MAX_READ_AVATARS + ", allReadAvatars = " + this.state.allReadAvatars + " visibility = " + style.visibility);
 
+            var rData = readReceiptData[member.userId];
+
             // add to the start so the most recent is on the end (ie. ends up rightmost)
             avatars.unshift(
                 <ReadReceiptMarker key={userId} member={member}
@@ -320,6 +334,7 @@ module.exports = WithMatrixClient(React.createClass({
                     checkUnmounting={this.props.checkUnmounting}
                     suppressAnimation={this._suppressReadReceiptAnimation}
                     onClick={this.toggleAllReadAvatars}
+                    timestamp={rData ? rData.ts : null}
                 />
             );
 
diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js
index 91ba201683..ddf271d6f4 100644
--- a/src/components/views/rooms/ReadReceiptMarker.js
+++ b/src/components/views/rooms/ReadReceiptMarker.js
@@ -60,6 +60,9 @@ module.exports = React.createClass({
 
         // callback for clicks on this RR
         onClick: React.PropTypes.func,
+
+        // Timestamp when the receipt was read
+        timestamp: React.PropTypes.number,
     },
 
     getDefaultProps: function() {
@@ -162,6 +165,12 @@ module.exports = React.createClass({
             visibility: this.props.hidden ? 'hidden' : 'visible',
         };
 
+        var title;
+        if (this.props.timestamp) {
+            // "7:05:45 PM (@alice:matrix.org)"
+            title = new Date(this.props.timestamp).toLocaleTimeString() + " (" + this.props.member.userId + ")";
+        }
+
         return (
             <Velociraptor
                     startStyles={this.state.startStyles}
@@ -170,6 +179,7 @@ module.exports = React.createClass({
                     member={this.props.member}
                     width={14} height={14} resizeMethod="crop"
                     style={style}
+                    title={title}
                     onClick={this.props.onClick}
                 />
             </Velociraptor>

From 289f8ab439c4d4154fd2c0e23522372e7a7382f3 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 8 Dec 2016 18:44:38 +0000
Subject: [PATCH 054/289] Fix failing test

For some reason, update webpack causes the promise to no longer
complete by the next tick. Change the test to not depend on how
fast the promise goes through.
---
 test/components/structures/RoomView-test.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/test/components/structures/RoomView-test.js b/test/components/structures/RoomView-test.js
index a41490d596..3522c41e32 100644
--- a/test/components/structures/RoomView-test.js
+++ b/test/components/structures/RoomView-test.js
@@ -60,14 +60,13 @@ describe('RoomView', function () {
         peg.get().getProfileInfo.returns(q({displayname: "foo"}));
         var roomView = ReactDOM.render(<RoomView roomAddress="#alias:ser.ver" />, parentDiv);
 
-        peg.get().joinRoom = sinon.spy();
+        peg.get().joinRoom = function(x) {
+            expect(x).toEqual('#alias:ser.ver');
+            done();
+        }
 
         process.nextTick(function() {
             roomView.onJoinButtonClicked();
-            process.nextTick(function() {
-                expect(peg.get().joinRoom.calledWith('#alias:ser.ver')).toExist();
-                done();
-            });
         });
     });
 });

From 8d1095bc267dbfdbf5f8b95bbd687835dd0d7058 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 9 Dec 2016 10:32:56 +0000
Subject: [PATCH 055/289] Don't throw exception on stop if no DMRoomMap

Prevents an exception when running the riot 'loading' tests in
isolation
---
 src/Lifecycle.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Lifecycle.js b/src/Lifecycle.js
index 62fbe5f929..0a61dc6105 100644
--- a/src/Lifecycle.js
+++ b/src/Lifecycle.js
@@ -356,7 +356,7 @@ export function stopMatrixClient() {
     Notifier.stop();
     UserActivity.stop();
     Presence.stop();
-    DMRoomMap.shared().stop();
+    if (DMRoomMap.shared()) DMRoomMap.shared().stop();
     var cli = MatrixClientPeg.get();
     if (cli) {
         cli.stopClient();

From e52907a46212dfb7f0f03ae772e88dacab94c81b Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 9 Dec 2016 10:59:05 +0000
Subject: [PATCH 056/289] Missed semicolon

---
 test/components/structures/RoomView-test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/components/structures/RoomView-test.js b/test/components/structures/RoomView-test.js
index 3522c41e32..58db29b1ee 100644
--- a/test/components/structures/RoomView-test.js
+++ b/test/components/structures/RoomView-test.js
@@ -63,7 +63,7 @@ describe('RoomView', function () {
         peg.get().joinRoom = function(x) {
             expect(x).toEqual('#alias:ser.ver');
             done();
-        }
+        };
 
         process.nextTick(function() {
             roomView.onJoinButtonClicked();

From 49010c3e93cf86d203e2f377111b127ac722227f Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Fri, 9 Dec 2016 11:24:10 +0000
Subject: [PATCH 057/289] Refactor how 'readReceipts' are passed into
 EventTiles

Instead of passing a list of RoomMembers, pass a list of records with a
`roomMember` prop and a `ts` prop so we can display the timestamp on hover.
---
 src/components/structures/MessagePanel.js | 34 +++++++++++++----------
 src/components/views/rooms/EventTile.js   | 28 ++++---------------
 2 files changed, 26 insertions(+), 36 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 1e0db2321d..53bf560673 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -471,27 +471,33 @@ module.exports = React.createClass({
                 !== new Date(nextEventTs).toDateString());
     },
 
-    // get a list of the userids whose read receipts should
-    // be shown next to this event
+    // get a list of read receipts that should be shown next to this event
+    // Receipts are objects which have a 'roomMember' and 'ts'.
     _getReadReceiptsForEvent: function(event) {
-        var myUserId = MatrixClientPeg.get().credentials.userId;
+        const myUserId = MatrixClientPeg.get().credentials.userId;
 
         // get list of read receipts, sorted most recent first
-        var room = MatrixClientPeg.get().getRoom(event.getRoomId());
+        const room = MatrixClientPeg.get().getRoom(event.getRoomId());
         if (!room) {
-            // huh.
             return null;
         }
+        let receipts = [];
+        room.getReceiptsForEvent(event).forEach((r) => {
+            if (!r.userId || r.type !== "m.read" || r.userId === myUserId) {
+                return; // ignore non-read receipts and receipts from self.
+            }
+            let member = room.getMember(r.userId);
+            if (!member) {
+                return; // ignore unknown user IDs
+            }
+            receipts.push({
+                roomMember: member,
+                ts: r.data ? r.data.ts : 0,
+            });
+        });
 
-        return room.getReceiptsForEvent(event).filter(function(r) {
-            return r.type === "m.read" && r.userId != myUserId;
-        }).sort(function(r1, r2) {
-            return r2.data.ts - r1.data.ts;
-        }).map(function(r) {
-            return room.getMember(r.userId);
-        }).filter(function(m) {
-            // check that the user is a known room member
-            return m;
+        return receipts.sort((r1, r2) => {
+            return r2.ts - r1.ts;
         });
     },
 
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 9da3f7b265..85020b564a 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -103,7 +103,7 @@ module.exports = WithMatrixClient(React.createClass({
         /* callback called when dynamic content in events are loaded */
         onWidgetLoad: React.PropTypes.func,
 
-        /* a list of Room Members whose read-receipts we should show */
+        /* a list of read-receipts we should show. Each object has a 'roomMember' and 'ts'. */
         readReceipts: React.PropTypes.arrayOf(React.PropTypes.object),
 
         /* opaque readreceipt info for each userId; used by ReadReceiptMarker
@@ -231,7 +231,7 @@ module.exports = WithMatrixClient(React.createClass({
                     return false;
                 }
                 for (var j = 0; j < rA.length; j++) {
-                    if (rA[j].userId !== rB[j].userId) {
+                    if (rA[j].roomMember.userId !== rB[j].roomMember.userId) {
                         return false;
                     }
                 }
@@ -287,31 +287,18 @@ module.exports = WithMatrixClient(React.createClass({
     getReadAvatars: function() {
         var ReadReceiptMarker = sdk.getComponent('rooms.ReadReceiptMarker');
         var avatars = [];
-
         var left = 0;
 
-        var readReceiptData = Object.create(null);
-        var room = this.props.matrixClient.getRoom(this.props.mxEvent.getRoomId());
-        if (room) {
-            // [ {type/userId/data} ]
-            room.getReceiptsForEvent(this.props.mxEvent).forEach(function(r) {
-                if (r.type !== "m.read" || !r.data.ts) {
-                    return;
-                }
-                readReceiptData[r.userId] = r.data;
-            })
-        }
-
         var receipts = this.props.readReceipts || [];
         for (var i = 0; i < receipts.length; ++i) {
-            var member = receipts[i];
+            var receipt = receipts[i];
 
             var hidden = true;
             if ((i < MAX_READ_AVATARS) || this.state.allReadAvatars) {
                 hidden = false;
             }
 
-            var userId = member.userId;
+            var userId = receipt.roomMember.userId;
             var readReceiptInfo;
 
             if (this.props.readReceiptMap) {
@@ -323,18 +310,15 @@ module.exports = WithMatrixClient(React.createClass({
             }
 
             //console.log("i = " + i + ", MAX_READ_AVATARS = " + MAX_READ_AVATARS + ", allReadAvatars = " + this.state.allReadAvatars + " visibility = " + style.visibility);
-
-            var rData = readReceiptData[member.userId];
-
             // add to the start so the most recent is on the end (ie. ends up rightmost)
             avatars.unshift(
-                <ReadReceiptMarker key={userId} member={member}
+                <ReadReceiptMarker key={userId} member={receipt.roomMember}
                     leftOffset={left} hidden={hidden}
                     readReceiptInfo={readReceiptInfo}
                     checkUnmounting={this.props.checkUnmounting}
                     suppressAnimation={this._suppressReadReceiptAnimation}
                     onClick={this.toggleAllReadAvatars}
-                    timestamp={rData ? rData.ts : null}
+                    timestamp={receipt.ts}
                 />
             );
 

From 5d99d68a64ec0c81b42c5a8e6959376dab798feb Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Fri, 9 Dec 2016 11:43:23 +0000
Subject: [PATCH 058/289] Show the full date and time if the receipt was sent
 days after the event

---
 src/components/views/rooms/EventTile.js         | 11 +++++++++++
 src/components/views/rooms/ReadReceiptMarker.js | 17 ++++++++++++++---
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 85020b564a..42dbe78630 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -289,6 +289,16 @@ module.exports = WithMatrixClient(React.createClass({
         var avatars = [];
         var left = 0;
 
+        // It's possible that the receipt was sent several days AFTER the event.
+        // If it is, we want to display the complete date along with the HH:MM:SS,
+        // rather than just HH:MM:SS.
+        let dayAfterEvent = new Date(this.props.mxEvent.getTs());
+        dayAfterEvent.setDate(dayAfterEvent.getDate() + 1)
+        dayAfterEvent.setHours(0);
+        dayAfterEvent.setMinutes(0);
+        dayAfterEvent.setSeconds(0);
+        let dayAfterEventTime = dayAfterEvent.getTime();
+
         var receipts = this.props.readReceipts || [];
         for (var i = 0; i < receipts.length; ++i) {
             var receipt = receipts[i];
@@ -319,6 +329,7 @@ module.exports = WithMatrixClient(React.createClass({
                     suppressAnimation={this._suppressReadReceiptAnimation}
                     onClick={this.toggleAllReadAvatars}
                     timestamp={receipt.ts}
+                    showFullTimestamp={receipt.ts >= dayAfterEventTime}
                 />
             );
 
diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js
index ddf271d6f4..37d4661f5d 100644
--- a/src/components/views/rooms/ReadReceiptMarker.js
+++ b/src/components/views/rooms/ReadReceiptMarker.js
@@ -63,6 +63,9 @@ module.exports = React.createClass({
 
         // Timestamp when the receipt was read
         timestamp: React.PropTypes.number,
+
+        // True to show the full date/time rather than just the time
+        showFullTimestamp: React.PropTypes.bool,
     },
 
     getDefaultProps: function() {
@@ -165,10 +168,18 @@ module.exports = React.createClass({
             visibility: this.props.hidden ? 'hidden' : 'visible',
         };
 
-        var title;
+        let title;
         if (this.props.timestamp) {
-            // "7:05:45 PM (@alice:matrix.org)"
-            title = new Date(this.props.timestamp).toLocaleTimeString() + " (" + this.props.member.userId + ")";
+            let suffix = " (" + this.props.member.userId + ")";
+            let ts = new Date(this.props.timestamp);
+            if (this.props.showFullTimestamp) {
+                // "15/12/2016, 7:05:45 PM (@alice:matrix.org)"
+                title = ts.toLocaleString() + suffix;
+            }
+            else {
+                // "7:05:45 PM (@alice:matrix.org)"
+                title = ts.toLocaleTimeString() + suffix;
+            }
         }
 
         return (

From d0850d67cd511c3558e13a0eab1ddff29ffa4d4e Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 9 Dec 2016 19:32:27 +0000
Subject: [PATCH 059/289] js-sdk 0.7.1

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

diff --git a/package.json b/package.json
index b71df01227..59ada5d575 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
     "linkifyjs": "^2.1.3",
     "lodash": "^4.13.1",
     "marked": "^0.3.5",
-    "matrix-js-sdk": "0.7.1-rc.1",
+    "matrix-js-sdk": "0.7.1",
     "optimist": "^0.6.1",
     "q": "^1.4.1",
     "react": "^15.4.0",

From eb6492200dd614355f54354d42293c0f559dbb92 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 9 Dec 2016 19:34:21 +0000
Subject: [PATCH 060/289] Prepare changelog for v0.8.1

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 727e4e0d30..89d64b8f02 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+Changes in [0.8.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.8.1) (2016-12-09)
+===================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.8.1-rc.2...v0.8.1)
+
+No changes
+
 Changes in [0.8.1-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.8.1-rc.2) (2016-12-06)
 =============================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.8.1-rc.1...v0.8.1-rc.2)

From 56d51687f96ab4f84ea892d8646f182e5225c040 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 9 Dec 2016 19:34:21 +0000
Subject: [PATCH 061/289] v0.8.1

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

diff --git a/package.json b/package.json
index 59ada5d575..41707f8193 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "0.8.1-rc.2",
+  "version": "0.8.1",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {

From 3ddeece61905271cb106b29a70aaf037fa09e4ee Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 9 Dec 2016 19:47:28 +0000
Subject: [PATCH 062/289] Back to rc temporarily

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

diff --git a/package.json b/package.json
index 41707f8193..59ada5d575 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "0.8.1",
+  "version": "0.8.1-rc.2",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {

From fb95b71f7bdd75bfb48c56caf972524fc59d6ac2 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 9 Dec 2016 19:48:27 +0000
Subject: [PATCH 063/289] v0.8.1

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

diff --git a/package.json b/package.json
index 59ada5d575..41707f8193 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "0.8.1-rc.2",
+  "version": "0.8.1",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {

From 15f556406fef9c024744fb61114e157a2667f35e Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 9 Dec 2016 19:50:02 +0000
Subject: [PATCH 064/289] One more try...

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

diff --git a/package.json b/package.json
index 41707f8193..59ada5d575 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "0.8.1",
+  "version": "0.8.1-rc.2",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {

From 8ea299bceaa27b56cdbf8d595ca18efef7d0264c Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 9 Dec 2016 19:51:27 +0000
Subject: [PATCH 065/289] v0.8.1

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

diff --git a/package.json b/package.json
index 59ada5d575..41707f8193 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "0.8.1-rc.2",
+  "version": "0.8.1",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {

From fc39b3536979a5f431b707ceb78463c30078883e Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 9 Dec 2016 19:52:40 +0000
Subject: [PATCH 066/289] One more, one more try

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

diff --git a/package.json b/package.json
index 41707f8193..59ada5d575 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "0.8.1",
+  "version": "0.8.1-rc.2",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {

From 57c56992f1e9443db2400c589cccdee877907fd8 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 9 Dec 2016 19:53:27 +0000
Subject: [PATCH 067/289] v0.8.1

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

diff --git a/package.json b/package.json
index 59ada5d575..41707f8193 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "0.8.1-rc.2",
+  "version": "0.8.1",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {

From 1fbc938f87ced85c457ba4d09cebc1bb546dbbc0 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 9 Dec 2016 19:57:44 +0000
Subject: [PATCH 068/289] js-sdk develop

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

diff --git a/package.json b/package.json
index 41707f8193..db1dda5109 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
     "linkifyjs": "^2.1.3",
     "lodash": "^4.13.1",
     "marked": "^0.3.5",
-    "matrix-js-sdk": "0.7.1",
+    "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
     "optimist": "^0.6.1",
     "q": "^1.4.1",
     "react": "^15.4.0",

From 1d4591ce68624f0a28055e1ffa40b7226ad44f2d Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Wed, 14 Dec 2016 15:01:50 +0000
Subject: [PATCH 069/289] Add UI in UserSettings for bulk rejecting invites

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

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 49674957bc..a33095b8e8 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -280,6 +280,10 @@ module.exports = React.createClass({
         Modal.createDialog(DeactivateAccountDialog, {});
     },
 
+    _onRejectAllInvitesClicked: function() {
+        console.log("yup");
+    },
+
     _renderUserInterfaceSettings: function() {
         var client = MatrixClientPeg.get();
 
@@ -418,6 +422,24 @@ module.exports = React.createClass({
         </div>;
     },
 
+    _renderBulkOptions: function() {
+        let invitedRooms = MatrixClientPeg.get().getRooms().filter((r) => {
+            return r.hasMembershipState(this._me, "invite");
+        });
+        if (invitedRooms.length === 0) {
+            return null;
+        }
+        return <div>
+            <h3>Bulk Options</h3>
+                <div className="mx_UserSettings_section">
+                    <button className="mx_UserSettings_button danger"
+                        onClick={this._onRejectAllInvitesClicked}>
+                            Reject all {invitedRooms.length} invites
+                    </button>
+                </div>
+        </div>;
+    },
+
     render: function() {
         var self = this;
         var Loader = sdk.getComponent("elements.Spinner");
@@ -580,6 +602,7 @@ module.exports = React.createClass({
                 {this._renderLabs()}
                 {this._renderDevicesPanel()}
                 {this._renderCryptoInfo()}
+                {this._renderBulkOptions()}
 
                 <h3>Advanced</h3>
 

From c07e5d4992c35382a2e502cb305c28a6d8300820 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 14 Dec 2016 15:31:35 +0000
Subject: [PATCH 070/289] Improve the performance of MemberEventListSummary

- The MessagePanel now uses the same key for the MELS instances rendered so that entirely new instances are not created, they are simply passed new props (namely when new events arrive).
- MELS itself now uses `shouldComponentUpdate` so that it only updates if it is given a different number of events to previous or if it is toggled to expand.
---
 src/components/structures/MessagePanel.js     |   8 +-
 .../views/elements/MemberEventListSummary.js  | 158 ++++++++++--------
 2 files changed, 95 insertions(+), 71 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 53bf560673..a2e6c1bc7e 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -296,6 +296,12 @@ module.exports = React.createClass({
             // Wrap consecutive member events in a ListSummary
             if (isMembershipChange(mxEv)) {
                 let ts1 = mxEv.getTs();
+                // Ensure that the key of the MemberEventListSummary does not change with new
+                // member events. This will prevent it from being re-created necessarily, and
+                // instead will allow new props to be provided. In turn, the shouldComponentUpdate
+                // method on MELS can be used to prevent unnecessary renderings.
+                // `prevEvent` at this point is a non-member event or null.
+                const key = "memberlistsummary-" + (prevEvent ? prevEvent.getId() : "");
 
                 if (this._wantsDateSeparator(prevEvent, ts1)) {
                     let dateSeparator = <li key={ts1+'~'}><DateSeparator key={ts1+'~'} ts={ts1}/></li>;
@@ -332,7 +338,7 @@ module.exports = React.createClass({
 
                 ret.push(
                     <MemberEventListSummary
-                        key={mxEv.getId()}
+                        key={key}
                         events={summarisedEvents}
                         data-scroll-token={eventId}>
                             {eventTiles}
diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index 69bcd7c203..50fd93f01c 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -42,7 +42,7 @@ module.exports = React.createClass({
         return {
             summaryLength: 3,
             threshold: 3,
-            avatarsMaxLength: 5
+            avatarsMaxLength: 5,
         };
     },
 
@@ -144,88 +144,106 @@ module.exports = React.createClass({
         );
     },
 
-    render: function() {
-        let summary = null;
-
-        // Reorder events so that joins come before leaves
-        let eventsToRender = this.props.events;
-
-        // Create an array of events that are not "cancelled-out" by another
-        // A join of sender S is cancelled out by a leave of sender S etc.
-        let filteredEvents = [];
-        let senders = new Set(eventsToRender.map((e) => e.getSender()));
-        senders.forEach(
-            (userId) => {
-                let userEvents = eventsToRender.filter((e) => {
-                    return e.getSender() === userId;
-                });
-
-                // NB: These may be the same event, in which case the lastEvent is used
-                // because prev_content should != content
-                let firstEvent = userEvents[0];
-                let lastEvent = userEvents[userEvents.length - 1];
-
-                // Membership BEFORE eventsToRender
-                let previousMembership = firstEvent.getPrevContent().membership || "leave";
-
-                // Otherwise, if the last membership event differs from previousMembership,
-                // use that.
-                if (previousMembership !== lastEvent.getContent().membership) {
-                    filteredEvents.push(lastEvent);
-                }
-            }
+    shouldComponentUpdate: function(nextProps, nextState) {
+        return (
+            nextProps.events.length !== this.props.events.length ||
+            nextState.expanded !== this.state.expanded
         );
+    },
 
-        let joinAndLeft = (eventsToRender.length - filteredEvents.length) / 2;
-        if (joinAndLeft <= 0 || joinAndLeft % 1 !== 0) {
-            joinAndLeft = null;
-        }
-
-        let joinEvents = filteredEvents.filter((ev) => {
-            return ev.event.content.membership === 'join';
-        });
-
-        let leaveEvents = filteredEvents.filter((ev) => {
-            return ev.event.content.membership === 'leave';
-        });
-
+    render: function() {
+        let eventsToRender = this.props.events;
         let fewEvents = eventsToRender.length < this.props.threshold;
         let expanded = this.state.expanded || fewEvents;
-        let expandedEvents = null;
 
+        let expandedEvents = null;
         if (expanded) {
             expandedEvents = this.props.children;
         }
 
-        let avatars = this._renderAvatars(joinEvents.concat(leaveEvents));
-
-        let toggleButton = null;
-        let summaryContainer = null;
-        if (!fewEvents) {
-            summary = this._renderSummary(joinEvents, leaveEvents);
-            toggleButton = (
-                <a className="mx_MemberEventListSummary_toggle" onClick={this._toggleSummary}>
-                    {expanded ? 'collapse' : 'expand'}
-                </a>
-            );
-            let plural = (joinEvents.length + leaveEvents.length > 0) ? 'others' : 'users';
-            let noun = (joinAndLeft === 1 ? 'user' : plural);
-
-            summaryContainer = (
-                <div className="mx_EventTile_line">
-                    <div className="mx_EventTile_info">
-                        <span className="mx_MemberEventListSummary_avatars">
-                            {avatars}
-                        </span>
-                        <span className="mx_TextualEvent mx_MemberEventListSummary_summary">
-                            {summary}{joinAndLeft ? joinAndLeft + ' ' + noun + ' joined and left' : ''}
-                        </span>&nbsp;
-                        {toggleButton}
-                    </div>
+        if (fewEvents) {
+            return (
+                <div className="mx_MemberEventListSummary">
+                    {expandedEvents}
                 </div>
             );
         }
 
+        // Map user IDs to the first and last member events in eventsToRender for each user
+        let userEvents = {
+            // $userId : {first : e0, last : e1}
+        };
+
+        eventsToRender.forEach((e) => {
+            const userId = e.getSender();
+            // Initialise a user's events
+            if (!userEvents[userId]) {
+                userEvents[userId] = {first: null, last: null};
+            }
+            if (!userEvents[userId].first) {
+                userEvents[userId].first = e;
+            } else {
+                userEvents[userId].last = e;
+            }
+        });
+
+        // Populate the join/leave event arrays with events that represent what happened
+        // overall to a user's membership. If no events are added to either array for a
+        // particular user, they will be considered a user that "joined and left".
+        let joinEvents = [];
+        let leaveEvents = [];
+        let joinedAndLeft = 0;
+        let senders = Object.keys(userEvents);
+        senders.forEach(
+            (userId) => {
+                let firstEvent = userEvents[userId].first;
+                let lastEvent = userEvents[userId].last;
+                // Only one membership event was recorded for this userId
+                if (!lastEvent) {
+                    lastEvent = firstEvent;
+                }
+
+                // Membership BEFORE eventsToRender
+                let previousMembership = firstEvent.getPrevContent().membership || "leave";
+
+                // If the last membership event differs from previousMembership, use that.
+                if (previousMembership !== lastEvent.getContent().membership) {
+                    if (lastEvent.event.content.membership === 'join') {
+                        joinEvents.push(lastEvent);
+                    } else if (lastEvent.event.content.membership === 'leave') {
+                        leaveEvents.push(lastEvent);
+                    }
+                } else {
+                    // Increment the number of users whose membership change was nil overall
+                    joinedAndLeft++;
+                }
+            }
+        );
+
+        let avatars = this._renderAvatars(joinEvents.concat(leaveEvents));
+        let summary = this._renderSummary(joinEvents, leaveEvents);
+        let toggleButton = (
+            <a className="mx_MemberEventListSummary_toggle" onClick={this._toggleSummary}>
+                {expanded ? 'collapse' : 'expand'}
+            </a>
+        );
+        let plural = (joinEvents.length + leaveEvents.length > 0) ? 'others' : 'users';
+        let noun = (joinedAndLeft === 1 ? 'user' : plural);
+
+        let summaryContainer = (
+            <div className="mx_EventTile_line">
+                <div className="mx_EventTile_info">
+                    <span className="mx_MemberEventListSummary_avatars">
+                        {avatars}
+                    </span>
+                    <span className="mx_TextualEvent mx_MemberEventListSummary_summary">
+                        {summary}{joinedAndLeft ? joinedAndLeft + ' ' + noun + ' joined and left' : ''}
+                    </span>&nbsp;
+                    {toggleButton}
+                </div>
+            </div>
+        );
+
         return (
             <div className="mx_MemberEventListSummary">
                 {summaryContainer}

From 13dfe9ef0fee67980633f03b37c273a79964ffb1 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Wed, 14 Dec 2016 16:00:50 +0000
Subject: [PATCH 071/289] Implement bulk invite rejects

---
 src/components/structures/UserSettings.js | 49 ++++++++++++++++++++---
 1 file changed, 43 insertions(+), 6 deletions(-)

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index a33095b8e8..6454515c29 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -61,6 +61,7 @@ module.exports = React.createClass({
             phase: "UserSettings.LOADING", // LOADING, DISPLAY
             email_add_pending: false,
             vectorVersion: null,
+            rejectingInvites: false,
         };
     },
 
@@ -80,6 +81,12 @@ module.exports = React.createClass({
             });
         }
 
+        // Bulk rejecting invites:
+        // /sync won't have had time to return when UserSettings re-renders from state changes, so getRooms()
+        // will still return rooms with invites. To get around this, add a listener for
+        // membership updates and kick the UI.
+        MatrixClientPeg.get().on("RoomMember.membership", this._onInviteStateChange);
+
         dis.dispatch({
             action: 'ui_opacity',
             sideOpacity: 0.3,
@@ -101,6 +108,7 @@ module.exports = React.createClass({
             middleOpacity: 1.0,
         });
         dis.unregister(this.dispatcherRef);
+        MatrixClientPeg.get().removeListener("RoomMember.membership", this._onInviteStateChange);
     },
 
     _refreshFromServer: function() {
@@ -280,8 +288,27 @@ module.exports = React.createClass({
         Modal.createDialog(DeactivateAccountDialog, {});
     },
 
-    _onRejectAllInvitesClicked: function() {
-        console.log("yup");
+    _onInviteStateChange: function(event, member, oldMembership) {
+        if (member.userId === this._me && oldMembership === "invite") {
+            this.forceUpdate();
+        }
+    },
+
+    _onRejectAllInvitesClicked: function(rooms, ev) {
+        this.setState({
+            rejectingInvites: true
+        });
+        // reject the invites
+        let promises = rooms.map((room) => {
+            return MatrixClientPeg.get().leave(room.roomId);
+        });
+        // purposefully drop errors to the floor: we'll just have a non-zero number on the UI
+        // after trying to reject all the invites.
+        q.allSettled(promises).then(() => {
+            this.setState({
+                rejectingInvites: false
+            });
+        });
     },
 
     _renderUserInterfaceSettings: function() {
@@ -429,13 +456,23 @@ module.exports = React.createClass({
         if (invitedRooms.length === 0) {
             return null;
         }
+
+        let Spinner = sdk.getComponent("elements.Spinner");
+
+        let reject = <Spinner />;
+        if (!this.state.rejectingInvites) {
+            reject = (
+                <button className="mx_UserSettings_button danger"
+                onClick={this._onRejectAllInvitesClicked.bind(this, invitedRooms)}>
+                    Reject all {invitedRooms.length} invites
+                </button>
+            );
+        }
+
         return <div>
             <h3>Bulk Options</h3>
                 <div className="mx_UserSettings_section">
-                    <button className="mx_UserSettings_button danger"
-                        onClick={this._onRejectAllInvitesClicked}>
-                            Reject all {invitedRooms.length} invites
-                    </button>
+                    {reject}
                 </div>
         </div>;
     },

From b908e7ef29bfcbfbd6627ff4881693bb70b1db8a Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 14 Dec 2016 16:01:32 +0000
Subject: [PATCH 072/289] Fix performance issues with wantsDateSeperator

This was causing rendering of MemberEventListSummary to be quite slow. Instead of creating two date objects, just check to see if they represent timestamps that happened on different days.
---
 src/components/structures/MessagePanel.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 53bf560673..4dc5229029 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -21,6 +21,8 @@ var sdk = require('../../index');
 
 var MatrixClientPeg = require('../../MatrixClientPeg')
 
+const MILLIS_IN_DAY = 86400000;
+
 /* (almost) stateless UI component which builds the event tiles in the room timeline.
  */
 module.exports = React.createClass({
@@ -466,9 +468,7 @@ module.exports = React.createClass({
             // here.
             return !this.props.suppressFirstDateSeparator;
         }
-
-        return (new Date(prevEvent.getTs()).toDateString()
-                !== new Date(nextEventTs).toDateString());
+        return Math.floor(prevEvent.getTs() / MILLIS_IN_DAY) !== Math.floor(nextEventTs / MILLIS_IN_DAY);
     },
 
     // get a list of read receipts that should be shown next to this event

From 8f42134d9fa6da65a9dd3fff2103ecbc3ffe4869 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Wed, 14 Dec 2016 16:04:20 +0000
Subject: [PATCH 073/289] Explain why binding

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

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 6454515c29..43c60c59da 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -461,6 +461,8 @@ module.exports = React.createClass({
 
         let reject = <Spinner />;
         if (!this.state.rejectingInvites) {
+            // bind() the invited rooms so any new invites that may come in as this button is clicked
+            // don't inadvertently get rejected as well.
             reject = (
                 <button className="mx_UserSettings_button danger"
                 onClick={this._onRejectAllInvitesClicked.bind(this, invitedRooms)}>

From 86739e7d1e72478c59bdaa029ba62e1c9fd1143f Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 15 Dec 2016 13:15:00 +0000
Subject: [PATCH 074/289] Simplify handling of only one member event

---
 src/components/views/elements/MemberEventListSummary.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index 50fd93f01c..7811044fda 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -182,9 +182,8 @@ module.exports = React.createClass({
             }
             if (!userEvents[userId].first) {
                 userEvents[userId].first = e;
-            } else {
-                userEvents[userId].last = e;
             }
+            userEvents[userId].last = e;
         });
 
         // Populate the join/leave event arrays with events that represent what happened
@@ -198,10 +197,6 @@ module.exports = React.createClass({
             (userId) => {
                 let firstEvent = userEvents[userId].first;
                 let lastEvent = userEvents[userId].last;
-                // Only one membership event was recorded for this userId
-                if (!lastEvent) {
-                    lastEvent = firstEvent;
-                }
 
                 // Membership BEFORE eventsToRender
                 let previousMembership = firstEvent.getPrevContent().membership || "leave";

From e7564f4dc531a76726d47d0c236dfcde9a78c96a Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 15 Dec 2016 13:16:36 +0000
Subject: [PATCH 075/289] Spelling

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

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index a2e6c1bc7e..edd227b58e 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -297,7 +297,7 @@ module.exports = React.createClass({
             if (isMembershipChange(mxEv)) {
                 let ts1 = mxEv.getTs();
                 // Ensure that the key of the MemberEventListSummary does not change with new
-                // member events. This will prevent it from being re-created necessarily, and
+                // member events. This will prevent it from being re-created unnecessarily, and
                 // instead will allow new props to be provided. In turn, the shouldComponentUpdate
                 // method on MELS can be used to prevent unnecessary renderings.
                 // `prevEvent` at this point is a non-member event or null.

From 8a511ed54ba6cc9ff1e22bb9c1dfbff829b111fe Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Thu, 15 Dec 2016 14:17:29 +0000
Subject: [PATCH 076/289] Add .done() to catch exceptions which may be thrown
 in setState

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

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 43c60c59da..c19f884b2a 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -308,7 +308,7 @@ module.exports = React.createClass({
             this.setState({
                 rejectingInvites: false
             });
-        });
+        }).done();
     },
 
     _renderUserInterfaceSettings: function() {

From 55f85befc1c3e512cb63477e08ea884bf8a99778 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 15 Dec 2016 14:43:44 +0000
Subject: [PATCH 077/289] Allow component to update if currently expanded or if
 about to collapse

---
 src/components/views/elements/MemberEventListSummary.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index 7811044fda..27c50fe97c 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -145,9 +145,13 @@ module.exports = React.createClass({
     },
 
     shouldComponentUpdate: function(nextProps, nextState) {
+        // Update if
+        //  - The number of summarised events has changed
+        //  - or if the summary is currently expanded
+        //  - or if the summary is about to toggle to become collapsed
         return (
             nextProps.events.length !== this.props.events.length ||
-            nextState.expanded !== this.state.expanded
+            this.state.expanded || nextState.expanded
         );
     },
 

From ec41fc284a87a2aefbf91ef1ca8b9703196747a6 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Thu, 15 Dec 2016 16:13:09 +0000
Subject: [PATCH 078/289] Null guard on componentWillUnmount

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

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index c19f884b2a..337384b118 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -108,7 +108,10 @@ module.exports = React.createClass({
             middleOpacity: 1.0,
         });
         dis.unregister(this.dispatcherRef);
-        MatrixClientPeg.get().removeListener("RoomMember.membership", this._onInviteStateChange);
+        let cli = MatrixClientPeg.get();
+        if (cli) {
+            cli.removeListener("RoomMember.membership", this._onInviteStateChange);
+        }
     },
 
     _refreshFromServer: function() {

From 88aeb6417e8d233e041096ffc0096f9eed879f5d Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 15 Dec 2016 18:23:54 +0000
Subject: [PATCH 079/289] Use the first member event ID or "initial" in the
 MELS key

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

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index edd227b58e..9eacca2139 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -301,7 +301,7 @@ module.exports = React.createClass({
                 // instead will allow new props to be provided. In turn, the shouldComponentUpdate
                 // method on MELS can be used to prevent unnecessary renderings.
                 // `prevEvent` at this point is a non-member event or null.
-                const key = "memberlistsummary-" + (prevEvent ? prevEvent.getId() : "");
+                const key = "memberlistsummary-" + (prevEvent ? mxEv.getId() : "initial");
 
                 if (this._wantsDateSeparator(prevEvent, ts1)) {
                     let dateSeparator = <li key={ts1+'~'}><DateSeparator key={ts1+'~'} ts={ts1}/></li>;

From 6b52b247e729e586134e8be34bfadd8c7643beac Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 15 Dec 2016 18:26:41 +0000
Subject: [PATCH 080/289] Update comment on MELS key

---
 src/components/structures/MessagePanel.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 9eacca2139..c681f5105d 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -300,8 +300,11 @@ module.exports = React.createClass({
                 // member events. This will prevent it from being re-created unnecessarily, and
                 // instead will allow new props to be provided. In turn, the shouldComponentUpdate
                 // method on MELS can be used to prevent unnecessary renderings.
-                // `prevEvent` at this point is a non-member event or null.
-                const key = "memberlistsummary-" + (prevEvent ? mxEv.getId() : "initial");
+                //
+                // Whilst back-paginating with a MELS at the top of the panel, prevEvent will be null,
+                // so use the key "membereventlistsummary-initial". Otherwise, use the ID of the first
+                // membership event, which will not change during forward pagination.
+                const key = "membereventlistsummary-" + (prevEvent ? mxEv.getId() : "initial");
 
                 if (this._wantsDateSeparator(prevEvent, ts1)) {
                     let dateSeparator = <li key={ts1+'~'}><DateSeparator key={ts1+'~'} ts={ts1}/></li>;

From 7475056bb443a0da4e88dc5082643ed28564e4d4 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 15 Dec 2016 18:33:13 +0000
Subject: [PATCH 081/289] MELS component should update if there are fewEvents,
 effectively expanding the summary

---
 src/components/views/elements/MemberEventListSummary.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index 27c50fe97c..bff2ce3d05 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -149,9 +149,11 @@ module.exports = React.createClass({
         //  - The number of summarised events has changed
         //  - or if the summary is currently expanded
         //  - or if the summary is about to toggle to become collapsed
+        //  - or if there are fewEvents, meaning the child eventTiles are shown as-is
         return (
             nextProps.events.length !== this.props.events.length ||
-            this.state.expanded || nextState.expanded
+            this.state.expanded || nextState.expanded ||
+            nextProps.events.length < this.props.threshold
         );
     },
 

From 4be14080e1d3a9621eee6fb3fbfe554e97b3269b Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 16 Dec 2016 17:11:28 +0000
Subject: [PATCH 082/289] Fix cancel button on uploads

---
 src/ContentMessages.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/ContentMessages.js b/src/ContentMessages.js
index e2f9086f66..c169ce64b5 100644
--- a/src/ContentMessages.js
+++ b/src/ContentMessages.js
@@ -256,10 +256,14 @@ function uploadFile(matrixClient, roomId, file) {
             });
         });
     } else {
-        return matrixClient.uploadContent(file).then(function(url) {
+        const basePromise =  matrixClient.uploadContent(file);
+        const promise1 = basePromise.then(function(url) {
             // If the attachment isn't encrypted then include the URL directly.
             return {"url": url};
         });
+        // XXX: copy over the abort method to the new promise
+        promise1.abort = basePromise.abort;
+        return promise1;
     }
 }
 
@@ -322,13 +326,16 @@ class ContentMessages {
 
         var error;
         return def.promise.then(function() {
+            // XXX: upload.promise must be the promise that
+            // is returned by uploadFile as it has an abort()
+            // method hacked onto it.
             upload.promise = uploadFile(
                 matrixClient, roomId, file
-            ).then(function(result) {
+            );
+            return upload.promise.then(function(result) {
                 content.file = result.file;
                 content.url = result.url;
             });
-            return upload.promise;
         }).progress(function(ev) {
             if (ev) {
                 upload.total = ev.total;

From 03d9d2820592e5baee854c10220e9c76a7f55fcc Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 16 Dec 2016 17:24:17 +0000
Subject: [PATCH 083/289] matrix-js-sdk 0.7.2

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

diff --git a/package.json b/package.json
index db1dda5109..6f16255db6 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
     "linkifyjs": "^2.1.3",
     "lodash": "^4.13.1",
     "marked": "^0.3.5",
-    "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
+    "matrix-js-sdk": "0.7.2",
     "optimist": "^0.6.1",
     "q": "^1.4.1",
     "react": "^15.4.0",

From 0b767010febb705ed98ae10e29b84e1049fb0528 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 16 Dec 2016 17:26:12 +0000
Subject: [PATCH 084/289] Prepare changelog for v0.8.2

---
 CHANGELOG.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 89d64b8f02..60f7f62b05 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,20 @@
+Changes in [0.8.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.8.2) (2016-12-16)
+===================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.8.1...v0.8.2)
+
+ * Improve the performance of MemberEventListSummary
+   [\#590](https://github.com/matrix-org/matrix-react-sdk/pull/590)
+ * Implement bulk invite rejections
+   [\#592](https://github.com/matrix-org/matrix-react-sdk/pull/592)
+ * Fix performance issues with wantsDateSeperator
+   [\#591](https://github.com/matrix-org/matrix-react-sdk/pull/591)
+ * Add read receipt times to the hovertip of read markers
+   [\#586](https://github.com/matrix-org/matrix-react-sdk/pull/586)
+ * Don't throw exception on stop if no DMRoomMap
+   [\#589](https://github.com/matrix-org/matrix-react-sdk/pull/589)
+ * Fix failing test
+   [\#587](https://github.com/matrix-org/matrix-react-sdk/pull/587)
+
 Changes in [0.8.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.8.1) (2016-12-09)
 ===================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.8.1-rc.2...v0.8.1)

From 29a05dda2051213094e332441c3bba3c9946dc57 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 16 Dec 2016 17:26:13 +0000
Subject: [PATCH 085/289] v0.8.2

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

diff --git a/package.json b/package.json
index 6f16255db6..d67838f2a2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {

From 70c7facb6f26b6d0c9633b2bfeb97b47dd8dac56 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 16 Dec 2016 17:30:43 +0000
Subject: [PATCH 086/289] matrix-js-sdk dev

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

diff --git a/package.json b/package.json
index d67838f2a2..15174f22b7 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
     "linkifyjs": "^2.1.3",
     "lodash": "^4.13.1",
     "marked": "^0.3.5",
-    "matrix-js-sdk": "0.7.2",
+    "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
     "optimist": "^0.6.1",
     "q": "^1.4.1",
     "react": "^15.4.0",

From d0d056e308db27d193d59cd4b38cdecba9c3ce2d Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 20 Dec 2016 02:26:23 +0000
Subject: [PATCH 087/289] hide read markers

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

diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js
index 37d4661f5d..47875bd7fb 100644
--- a/src/components/views/rooms/ReadReceiptMarker.js
+++ b/src/components/views/rooms/ReadReceiptMarker.js
@@ -188,6 +188,7 @@ module.exports = React.createClass({
                     enterTransitionOpts={this.state.enterTransitionOpts} >
                 <MemberAvatar
                     member={this.props.member}
+                    aria-hidden="true"
                     width={14} height={14} resizeMethod="crop"
                     style={style}
                     title={title}

From 2658cd09b59bdafb59f110a4ee31633cacb32a0c Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 20 Dec 2016 12:33:07 +0000
Subject: [PATCH 088/289] Fix scroll jumping when a video is decrypted

Call the `onWidgetLoad` prop on MVideoBody to notify the scroll panel to keep it's position when the size of the video widget updates.
---
 src/components/views/messages/MVideoBody.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/views/messages/MVideoBody.js b/src/components/views/messages/MVideoBody.js
index 7279f5c325..18552a973d 100644
--- a/src/components/views/messages/MVideoBody.js
+++ b/src/components/views/messages/MVideoBody.js
@@ -27,6 +27,14 @@ import q from 'q';
 module.exports = React.createClass({
     displayName: 'MVideoBody',
 
+    propTypes: {
+        /* the MatrixEvent to show */
+        mxEvent: React.PropTypes.object.isRequired,
+
+        /* called when the video has loaded */
+        onWidgetLoad: React.PropTypes.func.isRequired,
+    },
+
     getInitialState: function() {
         return {
             decryptedUrl: null,
@@ -100,6 +108,7 @@ module.exports = React.createClass({
                         decryptedThumbnailUrl: thumbnailUrl,
                         decryptedBlob: decryptedBlob,
                     });
+                    this.props.onWidgetLoad();
                 });
             }).catch((err) => {
                 console.warn("Unable to decrypt attachment: ", err)

From 4804fb3a1c32cfd12c179b5a47d712275454b5e8 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 21 Dec 2016 09:48:41 +0000
Subject: [PATCH 089/289] Revert "Fix performance issues with
 wantsDateSeperator"

This change broke timezone handling, so that date-separators are shown at the
wrong time of day.

This reverts commit b908e7ef29bfcbfbd6627ff4881693bb70b1db8a.
---
 src/components/structures/MessagePanel.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index ff25a4e35a..c681f5105d 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -21,8 +21,6 @@ var sdk = require('../../index');
 
 var MatrixClientPeg = require('../../MatrixClientPeg')
 
-const MILLIS_IN_DAY = 86400000;
-
 /* (almost) stateless UI component which builds the event tiles in the room timeline.
  */
 module.exports = React.createClass({
@@ -477,7 +475,9 @@ module.exports = React.createClass({
             // here.
             return !this.props.suppressFirstDateSeparator;
         }
-        return Math.floor(prevEvent.getTs() / MILLIS_IN_DAY) !== Math.floor(nextEventTs / MILLIS_IN_DAY);
+
+        return (new Date(prevEvent.getTs()).toDateString()
+                !== new Date(nextEventTs).toDateString());
     },
 
     // get a list of read receipts that should be shown next to this event

From 5e10ec4ecec326b040e67d4a9ef4b00e021555d7 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 21 Dec 2016 18:49:38 +0000
Subject: [PATCH 090/289] Add support for deleting threepids

---
 src/components/structures/UserSettings.js | 33 ++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 337384b118..3a90903b7b 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -248,6 +248,31 @@ module.exports = React.createClass({
         this.setState({email_add_pending: true});
     },
 
+    onRemoveThreepidClicked: function(threepid) {
+        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+        Modal.createDialog(QuestionDialog, {
+            title: "Remove Contact Information?",
+            description: "Remove " + threepid.address + "?",
+            button: 'Remove',
+            onFinished: (submit) => {
+                if (submit) {
+                    this.setState({
+                        phase: "UserSettings.LOADING",
+                    });
+                    MatrixClientPeg.get().deleteThreePid(threepid.medium, threepid.address).then(() => {
+                        return this._refreshFromServer();
+                    }).catch((e) => {
+                        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                        Modal.createDialog(ErrorDialog, {
+                            title: "Unable to remove contact information",
+                            description: err.toString(),
+                        });
+                    }).done();
+                }
+            },
+        });
+    },
+
     onEmailDialogFinished: function(ok) {
         if (ok) {
             this.verifyEmailAddress();
@@ -483,7 +508,6 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var self = this;
         var Loader = sdk.getComponent("elements.Spinner");
         switch (this.state.phase) {
             case "UserSettings.LOADING":
@@ -507,7 +531,7 @@ module.exports = React.createClass({
             this.state.avatarUrl ? MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl) : null
         );
 
-        var threepidsSection = this.state.threepids.map(function(val, pidIndex) {
+        var threepidsSection = this.state.threepids.map((val, pidIndex) => {
             var id = "email-" + val.address;
             return (
                 <div className="mx_UserSettings_profileTableRow" key={pidIndex}>
@@ -517,6 +541,9 @@ module.exports = React.createClass({
                     <div className="mx_UserSettings_profileInputCell">
                         <input key={val.address} id={id} value={val.address} disabled />
                     </div>
+                    <div className="mx_UserSettings_threepidButton">
+                        <img src="img/icon_context_delete.svg" width="14" height="14" alt="Remove" onClick={this.onRemoveThreepidClicked.bind(this, val)} />
+                    </div>
                 </div>
             );
         });
@@ -537,7 +564,7 @@ module.exports = React.createClass({
                             blurToCancel={ false }
                             onValueChanged={ this.onAddThreepidClicked } />
                     </div>
-                    <div className="mx_UserSettings_addThreepid">
+                    <div className="mx_UserSettings_threepidButton">
                          <img src="img/plus.svg" width="14" height="14" alt="Add" onClick={ this.onAddThreepidClicked.bind(this, undefined, true) }/>
                     </div>
                 </div>

From 3dfffa385eb7a621460d04a4a455f55fa4a11812 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 21 Dec 2016 18:56:50 +0000
Subject: [PATCH 091/289] Display msisdn threepids as 'Phone'

rather than pretending only email exists
---
 src/components/structures/UserSettings.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 337384b118..45f42fea54 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -482,6 +482,11 @@ module.exports = React.createClass({
         </div>;
     },
 
+    nameForMedium: function(medium) {
+        if (medium == 'msisdn') return 'Phone';
+        return medium[0].toUpperCase() + medium.slice(1);
+    },
+
     render: function() {
         var self = this;
         var Loader = sdk.getComponent("elements.Spinner");
@@ -512,7 +517,7 @@ module.exports = React.createClass({
             return (
                 <div className="mx_UserSettings_profileTableRow" key={pidIndex}>
                     <div className="mx_UserSettings_profileLabelCell">
-                        <label htmlFor={id}>Email</label>
+                        <label htmlFor={id}>{this.nameForMedium(val.medium)}</label>
                     </div>
                     <div className="mx_UserSettings_profileInputCell">
                         <input key={val.address} id={id} value={val.address} disabled />

From 7c841a86ef9e1586d47c603e55f15a37e328cca3 Mon Sep 17 00:00:00 2001
From: Daniel Dent <sourcecode@contactdaniel.net>
Date: Wed, 21 Dec 2016 14:25:46 -0800
Subject: [PATCH 092/289] Unbranded error messages

---
 src/CallHandler.js                           | 2 +-
 src/components/structures/TimelinePanel.js   | 2 +-
 src/components/structures/login/Login.js     | 2 +-
 src/components/views/rooms/RoomPreviewBar.js | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/CallHandler.js b/src/CallHandler.js
index 2f931d8e3f..a7845f6bea 100644
--- a/src/CallHandler.js
+++ b/src/CallHandler.js
@@ -280,7 +280,7 @@ function _onAction(payload) {
                 var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
                 Modal.createDialog(QuestionDialog, {
                     title: "Warning!",
-                    description: "Conference calling in Riot is in development and may not be reliable.",
+                    description: "Conference calling is in development and may not be reliable.",
                     onFinished: confirm=>{
                         if (confirm) {
                             ConferenceHandler.createNewMatrixCall(
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index 4311f683df..bf31f44315 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -810,7 +810,7 @@ var TimelinePanel = React.createClass({
                     });
                 };
             }
-            var message = "Riot was trying to load a specific point in this room's timeline but ";
+            var message = "Tried to load a specific point in this room's timeline, but ";
             if (error.errcode == 'M_FORBIDDEN') {
                 message += "you do not have permission to view the message in question.";
             } else {
diff --git a/src/components/structures/login/Login.js b/src/components/structures/login/Login.js
index e8b1a35213..c0d0c08d2c 100644
--- a/src/components/structures/login/Login.js
+++ b/src/components/structures/login/Login.js
@@ -203,7 +203,7 @@ module.exports = React.createClass({
                  !this.state.enteredHomeserverUrl.startsWith("http")))
             {
                 errorText = <span>
-                    Can't connect to homeserver via HTTP when using Riot served by HTTPS.
+                    Can't connect to homeserver via HTTP when an HTTPS URL is in your browser bar.
                     Either use HTTPS or <a href='https://www.google.com/search?&q=enable%20unsafe%20scripts'>enable unsafe scripts</a>
                 </span>;
             }
diff --git a/src/components/views/rooms/RoomPreviewBar.js b/src/components/views/rooms/RoomPreviewBar.js
index baeae4807d..b9912b6fcc 100644
--- a/src/components/views/rooms/RoomPreviewBar.js
+++ b/src/components/views/rooms/RoomPreviewBar.js
@@ -94,7 +94,7 @@ module.exports = React.createClass({
             if (this.props.invitedEmail) {
                 if (this.state.threePidFetchError) {
                     emailMatchBlock = <div className="error">
-                        Riot was unable to ascertain that the address this invite was
+                        Unable to ascertain that the address this invite was
                         sent to matches one associated with your account.
                     </div>
                 } else if (this.state.invitedEmailMxid != MatrixClientPeg.get().credentials.userId) {

From 197c68c2471fb429d441274d7c43f547689d702a Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 21 Dec 2016 22:45:57 +0000
Subject: [PATCH 093/289] s/vector/riot/g

---
 README.md | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index dfc1a6e6ec..3627225299 100644
--- a/README.md
+++ b/README.md
@@ -12,17 +12,17 @@ a 'skin'. A skin provides:
  * Zero or more 'modules' containing non-UI functionality
 
 **WARNING: As of July 2016, the skinning abstraction is broken due to rapid
-development of `matrix-react-sdk` to meet the needs of Vector, the first app
-to be built on top of the SDK** (https://github.com/vector-im/vector-web).
-Right now `matrix-react-sdk` depends on some functionality from `vector-web`
-(e.g. CSS), and `matrix-react-sdk` contains some Vector specific behaviour
-(grep for 'vector').  This layering will be fixed asap once Vector development
+development of `matrix-react-sdk` to meet the needs of Riot (codenamed Vector), the first app
+to be built on top of the SDK** (https://github.com/vector-im/riot-web).
+Right now `matrix-react-sdk` depends on some functionality from `riot-web`
+(e.g. CSS), and `matrix-react-sdk` contains some Riot specific behaviour
+(grep for 'vector').  This layering will be fixed asap once Riot development
 has stabilised, but for now we do not advise trying to create new skins for
 matrix-react-sdk until the layers are clearly separated again.
 
-In the interim, `vector-im/vector-web` and `matrix-org/matrix-react-sdk` should
+In the interim, `vector-im/riot-web` and `matrix-org/matrix-react-sdk` should
 be considered as a single project (for instance, matrix-react-sdk bugs
-are currently filed against vector-im/vector-web rather than this project).
+are currently filed against vector-im/riot-web rather than this project).
 
 Developer Guide
 ===============
@@ -44,15 +44,15 @@ https://github.com/matrix-org/synapse/tree/master/CONTRIBUTING.rst
 Please follow the Matrix JS/React code style as per:
 https://github.com/matrix-org/matrix-react-sdk/tree/master/code_style.rst
 
-Whilst the layering separation between matrix-react-sdk and Vector is broken
+Whilst the layering separation between matrix-react-sdk and Riot is broken
 (as of July 2016), code should be committed as follows:
  * All new components: https://github.com/matrix-org/matrix-react-sdk/tree/master/src/components
- * Vector-specific components: https://github.com/vector-im/vector-web/tree/master/src/components
+ * Riot-specific components: https://github.com/vector-im/riot-web/tree/master/src/components
    * In practice, `matrix-react-sdk` is still evolving so fast that the maintenance
-     burden of customising and overriding these components for Vector can seriously
-     impede development.  So right now, there should be very few (if any) customisations for Vector.
- * CSS for Matrix SDK components: https://github.com/vector-im/vector-web/tree/master/src/skins/vector/css/matrix-react-sdk
- * CSS for Vector-specific overrides and components: https://github.com/vector-im/vector-web/tree/master/src/skins/vector/css/vector-web
+     burden of customising and overriding these components for Riot can seriously
+     impede development.  So right now, there should be very few (if any) customisations for Riot.
+ * CSS for Matrix SDK components: https://github.com/vector-im/riot-web/tree/master/src/skins/vector/css/matrix-react-sdk
+ * CSS for Riot-specific overrides and components: https://github.com/vector-im/riot-web/tree/master/src/skins/vector/css/riot-web
 
 React components in matrix-react-sdk are come in two different flavours:
 'structures' and 'views'.  Structures are stateful components which handle the
@@ -76,7 +76,7 @@ practices that anyone working with the SDK needs to be be aware of and uphold:
 
   * The view's CSS file MUST have the same name (e.g. view/rooms/MessageTile.css).
     CSS for matrix-react-sdk currently resides in
-    https://github.com/vector-im/vector-web/tree/master/src/skins/vector/css/matrix-react-sdk.
+    https://github.com/vector-im/riot-web/tree/master/src/skins/vector/css/matrix-react-sdk.
 
   * Per-view CSS is optional - it could choose to inherit all its styling from
     the context of the rest of the app, although this is unusual for any but
@@ -129,7 +129,7 @@ from it.
 Github Issues
 =============
 
-All issues should be filed under https://github.com/vector-im/vector-web/issues
+All issues should be filed under https://github.com/vector-im/riot-web/issues
 for now.
 
 OUTDATED: To Create Your Own Skin

From 57412b3315ce74b20fb05de53cf1ec112d60b2c3 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 22 Dec 2016 14:06:42 +0000
Subject: [PATCH 094/289] released matrix-js-sdk

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

diff --git a/package.json b/package.json
index 15174f22b7..d67838f2a2 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
     "linkifyjs": "^2.1.3",
     "lodash": "^4.13.1",
     "marked": "^0.3.5",
-    "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
+    "matrix-js-sdk": "0.7.2",
     "optimist": "^0.6.1",
     "q": "^1.4.1",
     "react": "^15.4.0",

From df1d48b6a69169ba686079a03dced9f83ebf142f Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 22 Dec 2016 14:09:42 +0000
Subject: [PATCH 095/289] Prepare changelog for v0.8.3

---
 CHANGELOG.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 60f7f62b05..0e76fcd1a4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,14 @@
+Changes in [0.8.3](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.8.3) (2016-12-22)
+===================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.8.2...v0.8.3)
+
+ * Revert performance fix for wantsDateSeperator which was causing date separators to
+   be shown at the wrong time of day.
+ * Unbranded error messages
+   [\#599](https://github.com/matrix-org/matrix-react-sdk/pull/599)
+ * Fix scroll jumping when a video is decrypted
+   [\#594](https://github.com/matrix-org/matrix-react-sdk/pull/594)
+
 Changes in [0.8.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.8.2) (2016-12-16)
 ===================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.8.1...v0.8.2)

From 9bf98161a2dd0730b0c3e39f813c5622b4ce07cb Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 22 Dec 2016 14:09:42 +0000
Subject: [PATCH 096/289] v0.8.3

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

diff --git a/package.json b/package.json
index d67838f2a2..ed982bed72 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {

From 9cbe401866172a21e783aa1907873b746de93dde Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 22 Dec 2016 14:13:48 +0000
Subject: [PATCH 097/289] Back to js-sdk develop

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

diff --git a/package.json b/package.json
index ed982bed72..c617c923d3 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
     "linkifyjs": "^2.1.3",
     "lodash": "^4.13.1",
     "marked": "^0.3.5",
-    "matrix-js-sdk": "0.7.2",
+    "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
     "optimist": "^0.6.1",
     "q": "^1.4.1",
     "react": "^15.4.0",

From 98b22460ec1b471a269ad29fd4c4fee6f1fac754 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 22 Dec 2016 15:03:24 +0000
Subject: [PATCH 098/289] They're not all emails anymore

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

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 3a90903b7b..54f876abe0 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -532,7 +532,7 @@ module.exports = React.createClass({
         );
 
         var threepidsSection = this.state.threepids.map((val, pidIndex) => {
-            var id = "email-" + val.address;
+            const id = "3pid-" + val.address;
             return (
                 <div className="mx_UserSettings_profileTableRow" key={pidIndex}>
                     <div className="mx_UserSettings_profileLabelCell">

From a6fdbda011cb5db6f66e970238047aaca4e4d570 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 22 Dec 2016 15:26:08 +0000
Subject: [PATCH 099/289] Get variable name right

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

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 54f876abe0..58e550a82d 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -261,7 +261,7 @@ module.exports = React.createClass({
                     });
                     MatrixClientPeg.get().deleteThreePid(threepid.medium, threepid.address).then(() => {
                         return this._refreshFromServer();
-                    }).catch((e) => {
+                    }).catch((err) => {
                         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                         Modal.createDialog(ErrorDialog, {
                             title: "Unable to remove contact information",

From 2a630173729058b277a44a74eca9f941f6ee8f19 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukebarnard1@users.noreply.github.com>
Date: Thu, 22 Dec 2016 17:54:30 +0000
Subject: [PATCH 100/289] Account for timezone in date separator calculation
 (#595)

* Account for timezone in date separator calculation

Decide on date separators using MatrixEvent.getDate(). This requires matrix-org/matrix-js-sdk#311
---
 src/components/structures/MessagePanel.js | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index c681f5105d..affa33a3e8 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -21,6 +21,8 @@ var sdk = require('../../index');
 
 var MatrixClientPeg = require('../../MatrixClientPeg')
 
+const MILLIS_IN_DAY = 86400000;
+
 /* (almost) stateless UI component which builds the event tiles in the room timeline.
  */
 module.exports = React.createClass({
@@ -306,7 +308,7 @@ module.exports = React.createClass({
                 // membership event, which will not change during forward pagination.
                 const key = "membereventlistsummary-" + (prevEvent ? mxEv.getId() : "initial");
 
-                if (this._wantsDateSeparator(prevEvent, ts1)) {
+                if (this._wantsDateSeparator(prevEvent, mxEv.getDate())) {
                     let dateSeparator = <li key={ts1+'~'}><DateSeparator key={ts1+'~'} ts={ts1}/></li>;
                     ret.push(dateSeparator);
                 }
@@ -316,7 +318,7 @@ module.exports = React.createClass({
                     let collapsedMxEv = this.props.events[i + 1];
 
                     if (!isMembershipChange(collapsedMxEv) ||
-                        this._wantsDateSeparator(this.props.events[i], collapsedMxEv.getTs())) {
+                        this._wantsDateSeparator(this.props.events[i], collapsedMxEv.getDate())) {
                         break;
                     }
                     summarisedEvents.push(collapsedMxEv);
@@ -427,12 +429,14 @@ module.exports = React.createClass({
         // local echoes have a fake date, which could even be yesterday. Treat them
         // as 'today' for the date separators.
         var ts1 = mxEv.getTs();
+        var eventDate = mxEv.getDate();
         if (mxEv.status) {
-            ts1 = new Date();
+            eventDate = new Date();
+            ts1 = eventDate.getTime();
         }
 
         // do we need a date separator since the last event?
-        if (this._wantsDateSeparator(prevEvent, ts1)) {
+        if (this._wantsDateSeparator(prevEvent, eventDate)) {
             var dateSeparator = <li key={ts1}><DateSeparator key={ts1} ts={ts1}/></li>;
             ret.push(dateSeparator);
             continuation = false;
@@ -469,15 +473,19 @@ module.exports = React.createClass({
         return ret;
     },
 
-    _wantsDateSeparator: function(prevEvent, nextEventTs) {
+    _wantsDateSeparator: function(prevEvent, nextEventDate) {
         if (prevEvent == null) {
             // first event in the panel: depends if we could back-paginate from
             // here.
             return !this.props.suppressFirstDateSeparator;
         }
+        // Return early for events that are > 24h apart
+        if (Math.abs(prevEvent.getTs() - nextEventDate.getTime()) > MILLIS_IN_DAY) {
+            return true;
+        }
 
-        return (new Date(prevEvent.getTs()).toDateString()
-                !== new Date(nextEventTs).toDateString());
+        // Compare weekdays
+        return prevEvent.getDate().getDay() !== nextEventDate.getDay();
     },
 
     // get a list of read receipts that should be shown next to this event

From b1c4c759f417d014067561bb069aa65b9c9a78c4 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 23 Dec 2016 14:35:40 +0000
Subject: [PATCH 101/289] blind fix for captcha on electron

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

diff --git a/src/components/views/login/CaptchaForm.js b/src/components/views/login/CaptchaForm.js
index 0e5922f464..16012837a2 100644
--- a/src/components/views/login/CaptchaForm.js
+++ b/src/components/views/login/CaptchaForm.js
@@ -54,8 +54,9 @@ module.exports = React.createClass({
             console.log("Loading recaptcha script...");
             var scriptTag = document.createElement('script');
             window.mx_on_recaptcha_loaded = () => {this._onCaptchaLoaded()};
+            var protocol = global.location.protocol === "file:" ? "https:" : global.location.protocol;
             scriptTag.setAttribute(
-                'src', global.location.protocol+"//www.google.com/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit"
+                'src', protocol+"//www.google.com/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit"
             );
             this.refs.recaptchaContainer.appendChild(scriptTag);
         }

From 69b277b28285eec9ab4c9f9fabcef194996db9bf Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 24 Dec 2016 03:15:30 +0000
Subject: [PATCH 102/289] ask electron users to do captchas in a web browser.
 This will happen anyway when they follow email verification links. make
 captchas poll for success so if they are completed elsewhere, electron moves
 on

---
 src/Signup.js                                 |  2 +-
 src/SignupStages.js                           | 21 +++++++++-------
 .../structures/login/Registration.js          |  1 +
 src/components/views/login/CaptchaForm.js     | 24 ++++++++++++++-----
 4 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/Signup.js b/src/Signup.js
index a76919f34e..f148ac2419 100644
--- a/src/Signup.js
+++ b/src/Signup.js
@@ -191,7 +191,7 @@ class Register extends Signup {
                     }
                 }
                 if (poll_for_success) {
-                    return q.delay(5000).then(function() {
+                    return q.delay(2000).then(function() {
                         return self._tryRegister(client, authDict, poll_for_success);
                     });
                 } else {
diff --git a/src/SignupStages.js b/src/SignupStages.js
index 283b11afef..06401da218 100644
--- a/src/SignupStages.js
+++ b/src/SignupStages.js
@@ -52,7 +52,13 @@ DummyStage.TYPE = "m.login.dummy";
 class RecaptchaStage extends Stage {
     constructor(matrixClient, signupInstance) {
         super(RecaptchaStage.TYPE, matrixClient, signupInstance);
-        this.defer = q.defer(); // resolved with the captcha response
+        this.authDict = {
+            auth: {
+                type: 'm.login.recaptcha',
+                // we'll add in the response param if we get one from the local user.
+            },
+            poll_for_success: true,
+        };
     }
 
     // called when the recaptcha has been completed.
@@ -60,16 +66,15 @@ class RecaptchaStage extends Stage {
         if (!data || !data.response) {
             return;
         }
-        this.defer.resolve({
-            auth: {
-                type: 'm.login.recaptcha',
-                response: data.response,
-            }
-        });
+        this.authDict.response = data.response;
     }
 
     complete() {
-        return this.defer.promise;
+        // we return the authDict with no response, telling Signup to keep polling
+        // the server in case the captcha is filled in on another window (e.g. by
+        // following a nextlink from an email signup).  If the user completes the
+        // captcha locally, then we return at the next poll.
+        return q(this.authDict);
     }
 }
 RecaptchaStage.TYPE = "m.login.recaptcha";
diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js
index 5071a6b4c6..269aabed9b 100644
--- a/src/components/structures/login/Registration.js
+++ b/src/components/structures/login/Registration.js
@@ -273,6 +273,7 @@ module.exports = React.createClass({
                 if (serverParams && serverParams["m.login.recaptcha"]) {
                     publicKey = serverParams["m.login.recaptcha"].public_key;
                 }
+
                 registerStep = (
                     <CaptchaForm sitePublicKey={publicKey}
                         onCaptchaResponse={this.onCaptchaResponse}
diff --git a/src/components/views/login/CaptchaForm.js b/src/components/views/login/CaptchaForm.js
index 16012837a2..6b39d18c45 100644
--- a/src/components/views/login/CaptchaForm.js
+++ b/src/components/views/login/CaptchaForm.js
@@ -52,13 +52,24 @@ module.exports = React.createClass({
             this._onCaptchaLoaded();
         } else {
             console.log("Loading recaptcha script...");
-            var scriptTag = document.createElement('script');
             window.mx_on_recaptcha_loaded = () => {this._onCaptchaLoaded()};
-            var protocol = global.location.protocol === "file:" ? "https:" : global.location.protocol;
-            scriptTag.setAttribute(
-                'src', protocol+"//www.google.com/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit"
-            );
-            this.refs.recaptchaContainer.appendChild(scriptTag);
+            var protocol = global.location.protocol;
+            if (protocol === "file:") {
+                var warning = document.createElement('div');
+                // XXX: fix hardcoded app URL.  Better solutions include:
+                // * jumping straight to a hosted captcha page (but we don't support that yet)
+                // * embedding the captcha in an iframe (if that works)
+                // * using a better captcha lib
+                warning.innerHTML = "Robot check is currently unavailable on desktop - please sign up <a href='https://riot.im/app'>using a web browser</a>.";
+                this.refs.recaptchaContainer.appendChild(warning);
+            }
+            else {
+                var scriptTag = document.createElement('script');
+                scriptTag.setAttribute(
+                    'src', protocol+"//www.google.com/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit"
+                );
+                this.refs.recaptchaContainer.appendChild(scriptTag);
+            }
         }
     },
 
@@ -107,6 +118,7 @@ module.exports = React.createClass({
         return (
             <div ref="recaptchaContainer">
                 This Home Server would like to make sure you are not a robot
+                <br/>
                 <div id={DIV_ID}></div>
                 {error}
             </div>

From e2e3bc063712f345fa2d07406b1e2e84fa616bae Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 24 Dec 2016 18:40:04 +0000
Subject: [PATCH 103/289] improve captcha warning

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

diff --git a/src/components/views/login/CaptchaForm.js b/src/components/views/login/CaptchaForm.js
index 6b39d18c45..d50e0dee26 100644
--- a/src/components/views/login/CaptchaForm.js
+++ b/src/components/views/login/CaptchaForm.js
@@ -60,7 +60,7 @@ module.exports = React.createClass({
                 // * jumping straight to a hosted captcha page (but we don't support that yet)
                 // * embedding the captcha in an iframe (if that works)
                 // * using a better captcha lib
-                warning.innerHTML = "Robot check is currently unavailable on desktop - please sign up <a href='https://riot.im/app'>using a web browser</a>.";
+                warning.innerHTML = "Robot check is currently unavailable on desktop - please use a <a href='https://riot.im/app'>web browser</a>.";
                 this.refs.recaptchaContainer.appendChild(warning);
             }
             else {

From 1b46ab7a8068cff04452d7c85fb65eab45987048 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 23 Dec 2016 14:35:40 +0000
Subject: [PATCH 104/289] blind fix for captcha on electron

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

diff --git a/src/components/views/login/CaptchaForm.js b/src/components/views/login/CaptchaForm.js
index 0e5922f464..16012837a2 100644
--- a/src/components/views/login/CaptchaForm.js
+++ b/src/components/views/login/CaptchaForm.js
@@ -54,8 +54,9 @@ module.exports = React.createClass({
             console.log("Loading recaptcha script...");
             var scriptTag = document.createElement('script');
             window.mx_on_recaptcha_loaded = () => {this._onCaptchaLoaded()};
+            var protocol = global.location.protocol === "file:" ? "https:" : global.location.protocol;
             scriptTag.setAttribute(
-                'src', global.location.protocol+"//www.google.com/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit"
+                'src', protocol+"//www.google.com/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit"
             );
             this.refs.recaptchaContainer.appendChild(scriptTag);
         }

From 386770a22a1047adcd55b1da21160806594fb736 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 24 Dec 2016 03:15:30 +0000
Subject: [PATCH 105/289] ask electron users to do captchas in a web browser.
 This will happen anyway when they follow email verification links. make
 captchas poll for success so if they are completed elsewhere, electron moves
 on

---
 src/Signup.js                                 |  2 +-
 src/SignupStages.js                           | 21 +++++++++-------
 .../structures/login/Registration.js          |  1 +
 src/components/views/login/CaptchaForm.js     | 24 ++++++++++++++-----
 4 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/Signup.js b/src/Signup.js
index a76919f34e..f148ac2419 100644
--- a/src/Signup.js
+++ b/src/Signup.js
@@ -191,7 +191,7 @@ class Register extends Signup {
                     }
                 }
                 if (poll_for_success) {
-                    return q.delay(5000).then(function() {
+                    return q.delay(2000).then(function() {
                         return self._tryRegister(client, authDict, poll_for_success);
                     });
                 } else {
diff --git a/src/SignupStages.js b/src/SignupStages.js
index 283b11afef..06401da218 100644
--- a/src/SignupStages.js
+++ b/src/SignupStages.js
@@ -52,7 +52,13 @@ DummyStage.TYPE = "m.login.dummy";
 class RecaptchaStage extends Stage {
     constructor(matrixClient, signupInstance) {
         super(RecaptchaStage.TYPE, matrixClient, signupInstance);
-        this.defer = q.defer(); // resolved with the captcha response
+        this.authDict = {
+            auth: {
+                type: 'm.login.recaptcha',
+                // we'll add in the response param if we get one from the local user.
+            },
+            poll_for_success: true,
+        };
     }
 
     // called when the recaptcha has been completed.
@@ -60,16 +66,15 @@ class RecaptchaStage extends Stage {
         if (!data || !data.response) {
             return;
         }
-        this.defer.resolve({
-            auth: {
-                type: 'm.login.recaptcha',
-                response: data.response,
-            }
-        });
+        this.authDict.response = data.response;
     }
 
     complete() {
-        return this.defer.promise;
+        // we return the authDict with no response, telling Signup to keep polling
+        // the server in case the captcha is filled in on another window (e.g. by
+        // following a nextlink from an email signup).  If the user completes the
+        // captcha locally, then we return at the next poll.
+        return q(this.authDict);
     }
 }
 RecaptchaStage.TYPE = "m.login.recaptcha";
diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js
index 5071a6b4c6..269aabed9b 100644
--- a/src/components/structures/login/Registration.js
+++ b/src/components/structures/login/Registration.js
@@ -273,6 +273,7 @@ module.exports = React.createClass({
                 if (serverParams && serverParams["m.login.recaptcha"]) {
                     publicKey = serverParams["m.login.recaptcha"].public_key;
                 }
+
                 registerStep = (
                     <CaptchaForm sitePublicKey={publicKey}
                         onCaptchaResponse={this.onCaptchaResponse}
diff --git a/src/components/views/login/CaptchaForm.js b/src/components/views/login/CaptchaForm.js
index 16012837a2..6b39d18c45 100644
--- a/src/components/views/login/CaptchaForm.js
+++ b/src/components/views/login/CaptchaForm.js
@@ -52,13 +52,24 @@ module.exports = React.createClass({
             this._onCaptchaLoaded();
         } else {
             console.log("Loading recaptcha script...");
-            var scriptTag = document.createElement('script');
             window.mx_on_recaptcha_loaded = () => {this._onCaptchaLoaded()};
-            var protocol = global.location.protocol === "file:" ? "https:" : global.location.protocol;
-            scriptTag.setAttribute(
-                'src', protocol+"//www.google.com/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit"
-            );
-            this.refs.recaptchaContainer.appendChild(scriptTag);
+            var protocol = global.location.protocol;
+            if (protocol === "file:") {
+                var warning = document.createElement('div');
+                // XXX: fix hardcoded app URL.  Better solutions include:
+                // * jumping straight to a hosted captcha page (but we don't support that yet)
+                // * embedding the captcha in an iframe (if that works)
+                // * using a better captcha lib
+                warning.innerHTML = "Robot check is currently unavailable on desktop - please sign up <a href='https://riot.im/app'>using a web browser</a>.";
+                this.refs.recaptchaContainer.appendChild(warning);
+            }
+            else {
+                var scriptTag = document.createElement('script');
+                scriptTag.setAttribute(
+                    'src', protocol+"//www.google.com/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit"
+                );
+                this.refs.recaptchaContainer.appendChild(scriptTag);
+            }
         }
     },
 
@@ -107,6 +118,7 @@ module.exports = React.createClass({
         return (
             <div ref="recaptchaContainer">
                 This Home Server would like to make sure you are not a robot
+                <br/>
                 <div id={DIV_ID}></div>
                 {error}
             </div>

From 7d42ef90d64a6b6e35b347d053238e9de746cec1 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 24 Dec 2016 18:40:04 +0000
Subject: [PATCH 106/289] improve captcha warning

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

diff --git a/src/components/views/login/CaptchaForm.js b/src/components/views/login/CaptchaForm.js
index 6b39d18c45..d50e0dee26 100644
--- a/src/components/views/login/CaptchaForm.js
+++ b/src/components/views/login/CaptchaForm.js
@@ -60,7 +60,7 @@ module.exports = React.createClass({
                 // * jumping straight to a hosted captcha page (but we don't support that yet)
                 // * embedding the captcha in an iframe (if that works)
                 // * using a better captcha lib
-                warning.innerHTML = "Robot check is currently unavailable on desktop - please sign up <a href='https://riot.im/app'>using a web browser</a>.";
+                warning.innerHTML = "Robot check is currently unavailable on desktop - please use a <a href='https://riot.im/app'>web browser</a>.";
                 this.refs.recaptchaContainer.appendChild(warning);
             }
             else {

From 2e888f7f271e350bcbde7089c8ac801d39129e48 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 24 Dec 2016 18:53:24 +0000
Subject: [PATCH 107/289] Prepare changelog for v0.8.3-electron

---
 CHANGELOG.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0e76fcd1a4..66b3002c4d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+Changes in [0.8.3-electron](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.8.3-electron) (2016-12-24)
+=====================================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.8.3...v0.8.3-electron)
+
+ * Fix signup by working around the fact that reCapture doesn't work on electron
+ * Fix windows shortcut link
+
 Changes in [0.8.3](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.8.3) (2016-12-22)
 ===================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.8.2...v0.8.3)

From 1976bb70bd5091c4b0852ef9eb690e4834d4ca60 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 24 Dec 2016 18:53:24 +0000
Subject: [PATCH 108/289] v0.8.3-electron

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

diff --git a/package.json b/package.json
index ed982bed72..dadf39e6d2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "0.8.3",
+  "version": "0.8.3-electron",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {

From b88afab7af22496f6945374685caede0be416f93 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 24 Dec 2016 19:03:07 +0000
Subject: [PATCH 109/289] Prepare changelog for v0.8.4

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 66b3002c4d..9673c3e820 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
-Changes in [0.8.3-electron](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.8.3-electron) (2016-12-24)
-=====================================================================================================================
-[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.8.3...v0.8.3-electron)
+Changes in [0.8.4](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.8.4) (2016-12-24)
+===================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.8.3...v0.8.4)
 
  * Fix signup by working around the fact that reCapture doesn't work on electron
  * Fix windows shortcut link

From 45bfb93f17b79d0ffba3e901f312efce8caf1f34 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 24 Dec 2016 19:03:08 +0000
Subject: [PATCH 110/289] v0.8.4

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

diff --git a/package.json b/package.json
index dadf39e6d2..7c76c6125e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "0.8.3-electron",
+  "version": "0.8.4",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {

From 9c4671568d55a1f55f7d79dc39f5841a7eb6dffe Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 24 Dec 2016 22:33:04 +0000
Subject: [PATCH 111/289] fix disasterous thinko in
 https://github.com/matrix-org/matrix-react-sdk/pull/601/commits/69b277b28285eec9ab4c9f9fabcef194996db9bf

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

diff --git a/src/SignupStages.js b/src/SignupStages.js
index 06401da218..6bdc331566 100644
--- a/src/SignupStages.js
+++ b/src/SignupStages.js
@@ -66,7 +66,7 @@ class RecaptchaStage extends Stage {
         if (!data || !data.response) {
             return;
         }
-        this.authDict.response = data.response;
+        this.authDict.auth.response = data.response;
     }
 
     complete() {

From 42de77e588b8bd1c854baf0313b4aaace70a4158 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Tue, 27 Dec 2016 19:16:54 +0000
Subject: [PATCH 112/289] Remove "Cannot re-join empty room" error

This is a lying error message. burn it with fire
---
 src/components/structures/RoomView.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 2d71943bce..8059cd9372 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -810,11 +810,6 @@ module.exports = React.createClass({
             } else {
                 var msg = error.message ? error.message : JSON.stringify(error);
                 var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                if (msg === "No known servers") {
-                    // minging kludge until https://matrix.org/jira/browse/SYN-678 is fixed
-                    // 'Error when trying to join an empty room should be more explicit'
-                    msg = "It is not currently possible to re-join an empty room.";
-                }
                 Modal.createDialog(ErrorDialog, {
                     title: "Failed to join room",
                     description: msg

From 13a5337e0f62497b2510575910d01124ab7593bf Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 10 Jan 2017 15:16:39 +0000
Subject: [PATCH 113/289] Fix 'create account' link in 'forgot password'

Fixes https://github.com/vector-im/riot-web/issues/2853
---
 src/components/structures/MatrixChat.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index ff5a44e016..c47109db94 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -1021,6 +1021,7 @@ module.exports = React.createClass({
                     customHsUrl={this.getCurrentHsUrl()}
                     customIsUrl={this.getCurrentIsUrl()}
                     onComplete={this.onLoginClick}
+                    onRegisterClick={this.onRegisterClick}
                     onLoginClick={this.onLoginClick} />
             );
         } else {

From a16aae1124281ad982e79d0ca46f5468ab82e2b3 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 10 Jan 2017 18:37:57 +0000
Subject: [PATCH 114/289] Move screen sharing error check into platform

Because on the browser it depends on HTTPS, on electron it doesn't
matter.
---
 src/BasePlatform.js | 9 +++++++++
 src/CallHandler.js  | 7 +++++++
 2 files changed, 16 insertions(+)

diff --git a/src/BasePlatform.js b/src/BasePlatform.js
index b8c400c6e3..815133c334 100644
--- a/src/BasePlatform.js
+++ b/src/BasePlatform.js
@@ -73,4 +73,13 @@ export default class BasePlatform {
     getAppVersion() {
         throw new Error("getAppVersion not implemented!");
     }
+
+    /*
+     * If it's not expected that capturing the screen will work
+     * with getUserMedia, return a string explaining why not.
+     * Otherwise, return null.
+     */
+    screenCaptureErrorString() {
+        return "Not implemented";
+    }
 }
diff --git a/src/CallHandler.js b/src/CallHandler.js
index a7845f6bea..4442219686 100644
--- a/src/CallHandler.js
+++ b/src/CallHandler.js
@@ -52,6 +52,7 @@ limitations under the License.
  */
 
 var MatrixClientPeg = require('./MatrixClientPeg');
+var PlatformPeg = require("./PlatformPeg");
 var Modal = require('./Modal');
 var sdk = require('./index');
 var Matrix = require("matrix-js-sdk");
@@ -187,6 +188,12 @@ function _onAction(payload) {
             );
         }
         else if (payload.type === 'screensharing') {
+            const screenCapErrorString = PlatformPeg.get().screenCaptureErrorString();
+            if (screenCapErrorString) {
+                _setCallState(undefined, newCall.roomId, "ended");
+                console.log("Can't capture screen: " + screenCapErrorString);
+                return;
+            }
             newCall.placeScreenSharingCall(
                 payload.remote_element,
                 payload.local_element

From 37d9108ceb69f595f08921f407ce35fcd1078bc9 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 11 Jan 2017 10:06:48 +0000
Subject: [PATCH 115/289] Add error popup if screen sharing fails

---
 src/CallHandler.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/CallHandler.js b/src/CallHandler.js
index 4442219686..31b52b65a3 100644
--- a/src/CallHandler.js
+++ b/src/CallHandler.js
@@ -192,6 +192,11 @@ function _onAction(payload) {
             if (screenCapErrorString) {
                 _setCallState(undefined, newCall.roomId, "ended");
                 console.log("Can't capture screen: " + screenCapErrorString);
+                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                Modal.createDialog(ErrorDialog, {
+                    title: "Unable to capture screen",
+                    description: screenCapErrorString
+                });
                 return;
             }
             newCall.placeScreenSharingCall(

From 6e2a75bbee54540d69c0d03057d20e850556e200 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 11 Jan 2017 11:27:07 +0000
Subject: [PATCH 116/289] Fix redacted member events being visible

This was due to the `MemberEventListSummary` not ignoring redacted joins/leaves. This was also causing bug #2765.
---
 src/components/structures/MessagePanel.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index affa33a3e8..c04bec4b35 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -295,8 +295,8 @@ module.exports = React.createClass({
 
             var last = (i == lastShownEventIndex);
 
-            // Wrap consecutive member events in a ListSummary
-            if (isMembershipChange(mxEv)) {
+            // Wrap consecutive member events in a ListSummary, ignore if redacted
+            if (isMembershipChange(mxEv) && EventTile.haveTileForEvent(mxEv)) {
                 let ts1 = mxEv.getTs();
                 // Ensure that the key of the MemberEventListSummary does not change with new
                 // member events. This will prevent it from being re-created unnecessarily, and
@@ -317,6 +317,11 @@ module.exports = React.createClass({
                 for (;i + 1 < this.props.events.length; i++) {
                     let collapsedMxEv = this.props.events[i + 1];
 
+                    // Ignore redacted member events
+                    if (!EventTile.haveTileForEvent(collapsedMxEv)) {
+                        continue;
+                    }
+
                     if (!isMembershipChange(collapsedMxEv) ||
                         this._wantsDateSeparator(this.props.events[i], collapsedMxEv.getDate())) {
                         break;

From baaf827c48c5c0eda422006b4b964ed628fc205b Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 11 Jan 2017 17:03:14 +0000
Subject: [PATCH 117/289] Use `getStateKey` instead of `getSender`

This makes sure that the kickee is not the user used for the MemberEventListSummary
---
 src/components/views/elements/MemberEventListSummary.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index bff2ce3d05..518439b1c7 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -181,7 +181,7 @@ module.exports = React.createClass({
         };
 
         eventsToRender.forEach((e) => {
-            const userId = e.getSender();
+            const userId = e.getStateKey();
             // Initialise a user's events
             if (!userEvents[userId]) {
                 userEvents[userId] = {first: null, last: null};

From a4aa74e85ae2d029fee211042af39d5cd8df1e62 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 11 Jan 2017 17:18:37 +0000
Subject: [PATCH 118/289] Build the js-sdk in the CI script

now it's transpiled
---
 jenkins.sh | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/jenkins.sh b/jenkins.sh
index b318b586e2..1e281fa016 100755
--- a/jenkins.sh
+++ b/jenkins.sh
@@ -12,6 +12,9 @@ set -x
 # install the other dependencies
 npm install
 
+# we may be using a dev branch of js-sdk in which case we need to build it
+(cd node_modules/matrix-js-sdk && npm run build)
+
 # run the mocha tests
 npm run test
 

From 5142cb63c85b7e2bef41276adf40d48fc00d4423 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 11 Jan 2017 18:18:46 +0000
Subject: [PATCH 119/289] s/build/compile/ for js sdk

---
 jenkins.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/jenkins.sh b/jenkins.sh
index 1e281fa016..788f5f03d8 100755
--- a/jenkins.sh
+++ b/jenkins.sh
@@ -13,7 +13,7 @@ set -x
 npm install
 
 # we may be using a dev branch of js-sdk in which case we need to build it
-(cd node_modules/matrix-js-sdk && npm run build)
+(cd node_modules/matrix-js-sdk && npm run compile)
 
 # run the mocha tests
 npm run test

From fcc40ee37275b8a76a7d3c5ed7a92324a689a0a8 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 11 Jan 2017 19:03:20 +0000
Subject: [PATCH 120/289] It's now just build

---
 jenkins.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/jenkins.sh b/jenkins.sh
index 788f5f03d8..1e281fa016 100755
--- a/jenkins.sh
+++ b/jenkins.sh
@@ -13,7 +13,7 @@ set -x
 npm install
 
 # we may be using a dev branch of js-sdk in which case we need to build it
-(cd node_modules/matrix-js-sdk && npm run compile)
+(cd node_modules/matrix-js-sdk && npm run build)
 
 # run the mocha tests
 npm run test

From cc8b3d4ba400e49ba5b95575b9becab5cf664174 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 12 Jan 2017 13:46:12 +0000
Subject: [PATCH 121/289] spell out email invites better

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

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index aa694f6838..e9a041357f 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -48,7 +48,7 @@ module.exports = React.createClass({
             title: "Start a chat",
             description: "Who would you like to communicate with?",
             value: "",
-            placeholder: "User ID, Name or email",
+            placeholder: "Email, name or matrix ID",
             button: "Start Chat",
             focus: true
         };

From 2708859b34b588ef335b60bdce439f830fdc0808 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 12 Jan 2017 16:38:48 +0000
Subject: [PATCH 123/289] npm install the js-sdk

otherwise we don't have uglifyjs
---
 jenkins.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/jenkins.sh b/jenkins.sh
index 1e281fa016..3b4e31fd7f 100755
--- a/jenkins.sh
+++ b/jenkins.sh
@@ -13,7 +13,7 @@ set -x
 npm install
 
 # we may be using a dev branch of js-sdk in which case we need to build it
-(cd node_modules/matrix-js-sdk && npm run build)
+(cd node_modules/matrix-js-sdk && npm install)
 
 # run the mocha tests
 npm run test

From 4ca4441f77b331f06f6098b79a702793c5d2a7e1 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 12 Jan 2017 17:09:49 +0000
Subject: [PATCH 125/289] Build js-sdk in travis too

---
 .travis.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.travis.yml b/.travis.yml
index 9d6a114391..2221b7295d 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,3 +1,6 @@
 language: node_js
 node_js:
     - node # Latest stable version of nodejs.
+install:
+    - npm install
+    - (cd node_modules/matrix-react-sdk && npm install)

From 3706d6e32ad4e17861804c2e2b92d80ffc9991ef Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 12 Jan 2017 17:14:51 +0000
Subject: [PATCH 126/289] js-sdk, not react-sdk

---
 .travis.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index 2221b7295d..6d68b66a1c 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -3,4 +3,4 @@ node_js:
     - node # Latest stable version of nodejs.
 install:
     - npm install
-    - (cd node_modules/matrix-react-sdk && npm install)
+    - (cd node_modules/matrix-js-sdk && npm install)

From d2d78919cefda89c37c3abb8d20700793bde3cd3 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 12 Jan 2017 18:55:53 +0000
Subject: [PATCH 127/289] Overhaul MELS to deal with causality, kicks, etc.

The MELS can now deal with arbitrary sequences of transitions per user, where a transition is a change in membership. A transition can be joined, left, invite_reject, invite_withdrawal, invited, banned, unbanned or kicked.

Repeated segments (modulo 1 and 2), such as joined,left,joined,left,joined will be handled and will be rendered as " ... and 10 others joined and left 2 times and then joined". The repeated segments are assumed to be at the beginning of the sequence. This could be improved to handle arbitrary repeated sequences.
---
 src/components/structures/MessagePanel.js     |   1 -
 .../views/elements/MemberEventListSummary.js  | 247 +++++++++++-------
 2 files changed, 150 insertions(+), 98 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index c04bec4b35..6cbf708252 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -281,7 +281,6 @@ module.exports = React.createClass({
 
         var isMembershipChange = (e) =>
             e.getType() === 'm.room.member'
-            && ['join', 'leave'].indexOf(e.getContent().membership) !== -1
             && (!e.getPrevContent() || e.getContent().membership  !== e.getPrevContent().membership);
 
         for (i = 0; i < this.props.events.length; i++) {
diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index 518439b1c7..ab4a89eb69 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -24,7 +24,7 @@ module.exports = React.createClass({
         events: React.PropTypes.array.isRequired,
         // An array of EventTiles to render when expanded
         children: React.PropTypes.array.isRequired,
-        // The maximum number of names to show in either the join or leave summaries
+        // The maximum number of names to show in either each summary e.g. 2 would result "A, B and 234 others left"
         summaryLength: React.PropTypes.number,
         // The maximum number of avatars to display in the summary
         avatarsMaxLength: React.PropTypes.number,
@@ -40,7 +40,7 @@ module.exports = React.createClass({
 
     getDefaultProps: function() {
         return {
-            summaryLength: 3,
+            summaryLength: 1,
             threshold: 3,
             avatarsMaxLength: 5,
         };
@@ -52,88 +52,122 @@ module.exports = React.createClass({
         });
     },
 
-    _getEventSenderName: function(ev) {
-        if (!ev) {
-            return 'undefined';
-        }
-        return ev.sender.name || ev.event.content.displayname || ev.getSender();
-    },
-
-    _renderNameList: function(events) {
-        if (events.length === 0) {
+    _renderNameList: function(users) {
+        if (users.length === 0) {
             return null;
         }
-        let originalNumber = events.length;
-        events = events.slice(0, this.props.summaryLength);
-        let lastEvent = events.pop();
+        let originalNumber = users.length;
 
-        let names = events.map((ev) => {
-            return this._getEventSenderName(ev);
-        }).join(', ');
-
-        let lastName = this._getEventSenderName(lastEvent);
-        if (names.length === 0) {
-            // special-case for a single event
-            return lastName;
-        }
+        users = users.slice(0, this.props.summaryLength);
 
         let remaining = originalNumber - this.props.summaryLength;
-        if (remaining > 0) {
-            //  name1, name2, name3, and 100 others
-            return names + ', ' + lastName + ', and ' + remaining + ' others';
+        if (remaining < 0) {
+            remaining = 0;
+        }
+        let other = " other" + (remaining > 1 ? "s" : "");
+
+        return this._renderCommaSeparatedList(users, remaining) + (remaining ? ' and ' + remaining + other : '');
+    },
+
+    // Test whether the first n items repeat for the duration
+    // e.g. [1,2,3,4,1,2,3] would resolve true for n = 4
+    _isRepeatedSequence: function(transitions, n) {
+        let count = 0;
+        for (let i = 0; i < transitions.length; i++) {
+            if (transitions[i % n] !== transitions[i]) {
+                return null;
+            }
+        }
+        return true;
+    },
+
+    _renderCommaSeparatedList(items, disableAnd) {
+        if (disableAnd) {
+            return items.join(', ');
+        }
+        if (items.length === 0) {
+            return "";
+        } else if (items.length === 1) {
+            return items[0];
         } else {
-            //  name1, name2 and name3
-            return names + ' and ' + lastName;
+            let last = items.pop();
+            return items.join(', ') + ' and ' + last;
         }
     },
 
-    _renderSummary: function(joinEvents, leaveEvents) {
-        let joiners = this._renderNameList(joinEvents);
-        let leavers = this._renderNameList(leaveEvents);
+    _getDescriptionForTransition(t, plural) {
+        let beConjugated = plural ? "were" : "was";
+        let invitation = plural ? "invitations" : "an invitation";
 
-        let joinSummary = null;
-        if (joiners) {
-            joinSummary = (
-                <span>
-                    {joiners} joined the room
-                </span>
-            );
-        }
-        let leaveSummary = null;
-        if (leavers) {
-            leaveSummary = (
-                <span>
-                    {leavers} left the room
-                </span>
-            );
+        switch (t) {
+            case 'joined':  return "joined";
+            case 'left':    return "left";
+            case 'invite_reject':     return "rejected " + invitation;
+            case 'invite_withdrawal': return "withdrew " + invitation;
+            case 'invited':     return beConjugated + " invited";
+            case 'banned':      return beConjugated + " banned";
+            case 'unbanned':    return beConjugated + " unbanned";
+            case 'kicked':      return beConjugated + " kicked";
         }
 
-        // The joinEvents and leaveEvents are representative of the net movement
-        // per-user, and so it is possible that the total net movement is nil,
-        // whilst there are some events in the expanded list. If the total net
-        // movement is nil, then neither joinSummary nor leaveSummary will be
-        // truthy, so return null.
-        if (!joinSummary && !leaveSummary) {
+        return null;
+    },
+
+    _renderSummary: function(eventAggregates) {
+        let summaries = Object.keys(eventAggregates).map((transitions) => {
+            let nameList = this._renderNameList(eventAggregates[transitions]);
+
+            let repeats = 1;
+            let repeatExtra = 0;
+
+            let splitTransitions = transitions.split(',');
+            let describedTransitions = splitTransitions;
+            let plural = eventAggregates[transitions].length > 1;
+
+            for (let modulus = 1; modulus <= 2; modulus++) {
+                // Sequences that are repeating through modulus transitions will be truncated
+                if (this._isRepeatedSequence(describedTransitions, modulus)) {
+                    // Extra repeating sequence on the end that should be treated separately
+                    // so as to avoid j,l,j,l,j => "... joined and left 2.5 times"
+                    repeatExtra = describedTransitions.length % modulus;
+
+                    repeats = (describedTransitions.length - repeatExtra) / modulus;
+                    describedTransitions = describedTransitions.slice(0, modulus);
+                    break;
+                }
+            }
+
+            let numberOfTimes = repeats > 1 ? " " + repeats + " times" : "";
+
+            let descs = describedTransitions.map((t) => {
+                return this._getDescriptionForTransition(t, plural);
+            });
+
+            let afterRepeatDescs = splitTransitions.slice(splitTransitions.length - repeatExtra).map((t) => {
+                return this._getDescriptionForTransition(t, plural);
+            });
+
+            let desc = this._renderCommaSeparatedList(descs);
+            let afterRepeatDesc = this._renderCommaSeparatedList(afterRepeatDescs);
+
+            return nameList + " " + desc + numberOfTimes + (afterRepeatDesc ? " and then " + afterRepeatDesc : "");
+        });
+
+        if (!summaries) {
             return null;
         }
 
         return (
             <span>
-                {joinSummary}{joinSummary && leaveSummary?'; ':''}
-                {leaveSummary}.&nbsp;
+                {summaries.join(", ")}
             </span>
         );
     },
 
-    _renderAvatars: function(events) {
-        let avatars = events.slice(0, this.props.avatarsMaxLength).map((e) => {
+    _renderAvatars: function(roomMembers) {
+        let avatars = roomMembers.slice(0, this.props.avatarsMaxLength).map((m) => {
             return (
-                <MemberAvatar
-                    key={e.getId()}
-                    member={e.sender}
-                    width={14}
-                    height={14}
-                />
+                <MemberAvatar key={m.userId} member={m} width={14} height={14} />
             );
         });
 
@@ -157,6 +191,32 @@ module.exports = React.createClass({
         );
     },
 
+    _getTransition: function(e) {
+        switch (e.getContent().membership) {
+            case 'invite': return 'invited';
+            case 'ban': return 'banned';
+            case 'join': return 'joined';
+            case 'leave':
+                if (e.getSender() === e.getStateKey()) {
+                    switch (e.getPrevContent().membership) {
+                        case 'invite':  return 'invite_reject';
+                        default:        return 'left';
+                    }
+                }
+                switch (e.getPrevContent().membership) {
+                    case 'invite':  return 'invite_withdrawal';
+                    case 'ban':     return 'unbanned';
+                    case 'join':    return 'kicked';
+                    default:        return 'left';
+                }
+            default: return null;
+        }
+    },
+
+    _getTransitionSequence: function(events) {
+        return events.map(this._getTransition);
+    },
+
     render: function() {
         let eventsToRender = this.props.events;
         let fewEvents = eventsToRender.length < this.props.threshold;
@@ -175,61 +235,54 @@ module.exports = React.createClass({
             );
         }
 
-        // Map user IDs to the first and last member events in eventsToRender for each user
+        // Map user IDs to all of the user's member events in eventsToRender
         let userEvents = {
-            // $userId : {first : e0, last : e1}
+            // $userId : []
         };
 
         eventsToRender.forEach((e) => {
             const userId = e.getStateKey();
             // Initialise a user's events
             if (!userEvents[userId]) {
-                userEvents[userId] = {first: null, last: null};
+                userEvents[userId] = [];
             }
-            if (!userEvents[userId].first) {
-                userEvents[userId].first = e;
-            }
-            userEvents[userId].last = e;
+            userEvents[userId].push(e);
         });
 
-        // Populate the join/leave event arrays with events that represent what happened
-        // overall to a user's membership. If no events are added to either array for a
-        // particular user, they will be considered a user that "joined and left".
-        let joinEvents = [];
-        let leaveEvents = [];
-        let joinedAndLeft = 0;
-        let senders = Object.keys(userEvents);
-        senders.forEach(
+        // A map of agregate type to arrays of display names. Each aggregate type
+        // is a comma-delimited string of transitions, e.g. "joined,left,kicked".
+        // The array of display names is the array of users who went through that
+        // sequence during eventsToRender.
+        let aggregate = {
+            // $aggregateType : []:string
+        };
+        let avatarMembers = [];
+
+        let users = Object.keys(userEvents);
+        users.forEach(
             (userId) => {
-                let firstEvent = userEvents[userId].first;
-                let lastEvent = userEvents[userId].last;
+                let displayName = userEvents[userId][0].getContent().displayname || userId;
 
-                // Membership BEFORE eventsToRender
-                let previousMembership = firstEvent.getPrevContent().membership || "leave";
-
-                // If the last membership event differs from previousMembership, use that.
-                if (previousMembership !== lastEvent.getContent().membership) {
-                    if (lastEvent.event.content.membership === 'join') {
-                        joinEvents.push(lastEvent);
-                    } else if (lastEvent.event.content.membership === 'leave') {
-                        leaveEvents.push(lastEvent);
-                    }
-                } else {
-                    // Increment the number of users whose membership change was nil overall
-                    joinedAndLeft++;
+                let seq = this._getTransitionSequence(userEvents[userId]);
+                if (!aggregate[seq]) {
+                    aggregate[seq] = [];
                 }
+
+                // Assumes display names are unique
+                if (aggregate[seq].indexOf(displayName) === -1) {
+                    aggregate[seq].push(displayName);
+                }
+                avatarMembers.push(userEvents[userId][0].target);
             }
         );
 
-        let avatars = this._renderAvatars(joinEvents.concat(leaveEvents));
-        let summary = this._renderSummary(joinEvents, leaveEvents);
+        let avatars = this._renderAvatars(avatarMembers);
+        let summary = this._renderSummary(aggregate);
         let toggleButton = (
             <a className="mx_MemberEventListSummary_toggle" onClick={this._toggleSummary}>
                 {expanded ? 'collapse' : 'expand'}
             </a>
         );
-        let plural = (joinEvents.length + leaveEvents.length > 0) ? 'others' : 'users';
-        let noun = (joinedAndLeft === 1 ? 'user' : plural);
 
         let summaryContainer = (
             <div className="mx_EventTile_line">
@@ -238,7 +291,7 @@ module.exports = React.createClass({
                         {avatars}
                     </span>
                     <span className="mx_TextualEvent mx_MemberEventListSummary_summary">
-                        {summary}{joinedAndLeft ? joinedAndLeft + ' ' + noun + ' joined and left' : ''}
+                        {summary}
                     </span>&nbsp;
                     {toggleButton}
                 </div>

From 57652c06e3a0ead99d4feaebfa32f91d418667a3 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 13 Jan 2017 11:13:17 +0000
Subject: [PATCH 128/289] released js-sdk

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

diff --git a/package.json b/package.json
index 1eaee39c41..1f40e4ed34 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
     "linkifyjs": "^2.1.3",
     "lodash": "^4.13.1",
     "marked": "^0.3.5",
-    "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
+    "matrix-js-sdk": "0.7.4-rc.1",
     "optimist": "^0.6.1",
     "q": "^1.4.1",
     "react": "^15.4.0",

From 08020d1c394a69ab4d53dda3b545ae72e4b28a0e Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 13 Jan 2017 11:14:25 +0000
Subject: [PATCH 129/289] Prepare changelog for v0.8.5-rc.1

---
 CHANGELOG.md | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9673c3e820..3c7d0930b7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,24 @@
+Changes in [0.8.5-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.8.5-rc.1) (2017-01-13)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.8.4...v0.8.5-rc.1)
+
+ * Build the js-sdk in the CI script
+   [\#612](https://github.com/matrix-org/matrix-react-sdk/pull/612)
+ * Fix redacted member events being visible
+   [\#609](https://github.com/matrix-org/matrix-react-sdk/pull/609)
+ * Use `getStateKey` instead of `getSender`
+   [\#611](https://github.com/matrix-org/matrix-react-sdk/pull/611)
+ * Move screen sharing error check into platform
+   [\#608](https://github.com/matrix-org/matrix-react-sdk/pull/608)
+ * Fix 'create account' link in 'forgot password'
+   [\#606](https://github.com/matrix-org/matrix-react-sdk/pull/606)
+ * Let electron users complete captchas in a web browser
+   [\#601](https://github.com/matrix-org/matrix-react-sdk/pull/601)
+ * Add support for deleting threepids
+   [\#597](https://github.com/matrix-org/matrix-react-sdk/pull/597)
+ * Display msisdn threepids as 'Phone'
+   [\#598](https://github.com/matrix-org/matrix-react-sdk/pull/598)
+
 Changes in [0.8.4](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.8.4) (2016-12-24)
 ===================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.8.3...v0.8.4)

From 3ac9ed7f8fea807ad764af2064040e54ceec44f6 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 13 Jan 2017 11:14:26 +0000
Subject: [PATCH 130/289] v0.8.5-rc.1

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

diff --git a/package.json b/package.json
index 1f40e4ed34..491dcb30b9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "0.8.4",
+  "version": "0.8.5-rc.1",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {

From e196cfaf910a9faff96c53a7ac84eb8fe33c2b00 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Fri, 13 Jan 2017 14:51:01 +0000
Subject: [PATCH 131/289] Show the error dialog when requests to PUT power
 levels fail

This is why I dislike Q.
---
 src/components/views/rooms/MemberInfo.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js
index d57bf4bce1..5ccb633d8a 100644
--- a/src/components/views/rooms/MemberInfo.js
+++ b/src/components/views/rooms/MemberInfo.js
@@ -376,6 +376,7 @@ module.exports = WithMatrixClient(React.createClass({
                 // get out of sync if we force setState here!
                 console.log("Power change success");
             }, function(err) {
+                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createDialog(ErrorDialog, {
                     title: "Failure to change power level",
                     description: err.message

From dcd0acb2b5f0f6ed50bb96fd750482d6b59ccf8d Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Fri, 13 Jan 2017 15:17:34 +0000
Subject: [PATCH 132/289] Review comments

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

diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js
index 5ccb633d8a..1f4d392461 100644
--- a/src/components/views/rooms/MemberInfo.js
+++ b/src/components/views/rooms/MemberInfo.js
@@ -376,7 +376,7 @@ module.exports = WithMatrixClient(React.createClass({
                 // get out of sync if we force setState here!
                 console.log("Power change success");
             }, function(err) {
-                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createDialog(ErrorDialog, {
                     title: "Failure to change power level",
                     description: err.message
@@ -384,7 +384,7 @@ module.exports = WithMatrixClient(React.createClass({
             }
         ).finally(()=>{
             this.setState({ updating: this.state.updating - 1 });
-        });
+        }).done();
         this.props.onFinished();
     },
 

From 77ae04140746779b5654662575fdaaf393e92d3d Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Fri, 13 Jan 2017 16:40:33 +0000
Subject: [PATCH 133/289] Order names by order of first events for users

---
 src/components/views/elements/MemberEventListSummary.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index ab4a89eb69..89c7835671 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -239,12 +239,15 @@ module.exports = React.createClass({
         let userEvents = {
             // $userId : []
         };
+        // Array of userIds ordered by the same ordering as the first event of each user
+        let users = [];
 
         eventsToRender.forEach((e) => {
             const userId = e.getStateKey();
             // Initialise a user's events
             if (!userEvents[userId]) {
                 userEvents[userId] = [];
+                users.push(userId);
             }
             userEvents[userId].push(e);
         });
@@ -258,7 +261,6 @@ module.exports = React.createClass({
         };
         let avatarMembers = [];
 
-        let users = Object.keys(userEvents);
         users.forEach(
             (userId) => {
                 let displayName = userEvents[userId][0].getContent().displayname || userId;

From ad072cc1792e82759a9b40d0d4c32c31e1f7bb4a Mon Sep 17 00:00:00 2001
From: Jani Mustonen <janijohannes@kapsi.fi>
Date: Fri, 6 Jan 2017 01:37:27 +0200
Subject: [PATCH 134/289] Turned buttons from divs to links. Makes it possible
 for screen readers and hotkeys to recognize the buttons.

---
 src/components/structures/UserSettings.js     |  4 ++--
 .../views/dialogs/ChatInviteDialog.js         |  4 ++--
 src/components/views/rooms/RoomHeader.js      | 20 +++++++++----------
 src/components/views/rooms/RoomTile.js        |  4 ++--
 .../views/rooms/SimpleRoomHeader.js           |  2 +-
 .../views/settings/ChangePassword.js          |  4 ++--
 6 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index a41eab3a76..cd07a91475 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -663,9 +663,9 @@ module.exports = React.createClass({
 
                 <div className="mx_UserSettings_section">
 
-                    <div className="mx_UserSettings_logout mx_UserSettings_button" onClick={this.onLogoutClicked}>
+                    <a tabindex="0" className="mx_UserSettings_logout mx_UserSettings_button" onClick={this.onLogoutClicked}>
                         Sign out
-                    </div>
+                    </a>
 
                     {accountJsx}
                 </div>
diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index e9a041357f..5c6c627d58 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -409,9 +409,9 @@ module.exports = React.createClass({
                 <div className="mx_Dialog_title">
                     {this.props.title}
                 </div>
-                <div className="mx_ChatInviteDialog_cancel" onClick={this.onCancel} >
+                <a tabindex="0" className="mx_ChatInviteDialog_cancel" onClick={this.onCancel} >
                     <TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
-                </div>
+                </a>
                 <div className="mx_ChatInviteDialog_label">
                     <label htmlFor="textinput">{ this.props.description }</label>
                 </div>
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index db3c7bb3d9..bfcaa6b172 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -182,8 +182,8 @@ module.exports = React.createClass({
                 'm.room.name', user_id
             );
 
-            save_button = <div className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save</div>
-            cancel_button = <div className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </div>
+            save_button = <a tabindex="0" className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save</a>
+            cancel_button = <a tabindex="0" className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </a>
         }
 
         if (this.props.saving) {
@@ -275,9 +275,9 @@ module.exports = React.createClass({
         var settings_button;
         if (this.props.onSettingsClick) {
             settings_button =
-                <div className="mx_RoomHeader_button" onClick={this.props.onSettingsClick} title="Settings">
+                <a tabindex="0" className="mx_RoomHeader_button" onClick={this.props.onSettingsClick} title="Settings">
                     <TintableSvg src="img/icons-settings-room.svg" width="16" height="16"/>
-                </div>;
+                </a>;
         }
 
 //        var leave_button;
@@ -291,17 +291,17 @@ module.exports = React.createClass({
         var forget_button;
         if (this.props.onForgetClick) {
             forget_button =
-                <div className="mx_RoomHeader_button" onClick={this.props.onForgetClick} title="Forget room">
+                <a tabindex="0" className="mx_RoomHeader_button" onClick={this.props.onForgetClick} title="Forget room">
                     <TintableSvg src="img/leave.svg" width="26" height="20"/>
-                </div>;
+                </a>;
         }
 
         var rightPanel_buttons;
         if (this.props.collapsedRhs) {
             rightPanel_buttons =
-                <div className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title="<">
+                <a tabindex="0" className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title="<">
                     <TintableSvg src="img/minimise.svg" width="10" height="16"/>
-                </div>
+                </a>
         }
 
         var right_row;
@@ -310,9 +310,9 @@ module.exports = React.createClass({
                 <div className="mx_RoomHeader_rightRow">
                     { settings_button }
                     { forget_button }
-                    <div className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
+                    <a tabindex="0" className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
                         <TintableSvg src="img/icons-search.svg" width="35" height="35"/>
-                    </div>
+                    </a>
                     { rightPanel_buttons }
                 </div>;
         }
diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index 84916f8ab8..fce2868d50 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/src/components/views/rooms/RoomTile.js
@@ -287,7 +287,7 @@ module.exports = React.createClass({
         var connectDropTarget = this.props.connectDropTarget;
 
         let ret = (
-            <div className={classes} onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+            <a tabindex="0" className={classes} onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
                 <div className={avatarClasses}>
                     <div className="mx_RoomTile_avatar_menu" onClick={this.onAvatarClicked}>
                         <div className={avatarContainerClasses}>
@@ -302,7 +302,7 @@ module.exports = React.createClass({
                 </div>
                 {/* { incomingCallBox } */}
                 { tooltip }
-            </div>
+            </a>
         );
 
         if (connectDropTarget) ret = connectDropTarget(ret);
diff --git a/src/components/views/rooms/SimpleRoomHeader.js b/src/components/views/rooms/SimpleRoomHeader.js
index 7f2bb0048a..84c6802b3d 100644
--- a/src/components/views/rooms/SimpleRoomHeader.js
+++ b/src/components/views/rooms/SimpleRoomHeader.js
@@ -44,7 +44,7 @@ module.exports = React.createClass({
 
         var cancelButton;
         if (this.props.onCancelClick) {
-            cancelButton = <div className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </div>
+            cancelButton = <a tabindex="0" className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </a>
         }
 
         var showRhsButton;
diff --git a/src/components/views/settings/ChangePassword.js b/src/components/views/settings/ChangePassword.js
index 1ef3eff205..74658a09e5 100644
--- a/src/components/views/settings/ChangePassword.js
+++ b/src/components/views/settings/ChangePassword.js
@@ -136,9 +136,9 @@ module.exports = React.createClass({
                                 <input id="password2" type="password" ref="confirm_input" />
                             </div>
                         </div>
-                        <div className={buttonClassName} onClick={this.onClickChange}>
+                        <a tabindex="0" className={buttonClassName} onClick={this.onClickChange}>
                             Change Password
-                        </div>
+                        </a>
                     </div>
                 );
             case this.Phases.Uploading:

From 8d79716421253002ae3a640ad7f6dcf77d885e3e Mon Sep 17 00:00:00 2001
From: Jani Mustonen <janijohannes@kapsi.fi>
Date: Fri, 6 Jan 2017 16:41:35 +0200
Subject: [PATCH 135/289] Turned the links to buttons to comply with MDN's
 recommendations

---
 src/components/structures/UserSettings.js     |  4 ++--
 .../views/dialogs/ChatInviteDialog.js         |  4 ++--
 src/components/views/rooms/RoomHeader.js      | 20 +++++++++----------
 src/components/views/rooms/RoomTile.js        |  4 ++--
 .../views/rooms/SimpleRoomHeader.js           |  2 +-
 .../views/settings/ChangePassword.js          |  4 ++--
 6 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index cd07a91475..b104352096 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -663,9 +663,9 @@ module.exports = React.createClass({
 
                 <div className="mx_UserSettings_section">
 
-                    <a tabindex="0" className="mx_UserSettings_logout mx_UserSettings_button" onClick={this.onLogoutClicked}>
+                    <button className="mx_UserSettings_logout mx_UserSettings_button" onClick={this.onLogoutClicked}>
                         Sign out
-                    </a>
+                    </button>
 
                     {accountJsx}
                 </div>
diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index 5c6c627d58..fe33ea6d1c 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -409,9 +409,9 @@ module.exports = React.createClass({
                 <div className="mx_Dialog_title">
                     {this.props.title}
                 </div>
-                <a tabindex="0" className="mx_ChatInviteDialog_cancel" onClick={this.onCancel} >
+                <button className="mx_ChatInviteDialog_cancel" onClick={this.onCancel} >
                     <TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
-                </a>
+                </button>
                 <div className="mx_ChatInviteDialog_label">
                     <label htmlFor="textinput">{ this.props.description }</label>
                 </div>
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index bfcaa6b172..92cc6c64fd 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -182,8 +182,8 @@ module.exports = React.createClass({
                 'm.room.name', user_id
             );
 
-            save_button = <a tabindex="0" className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save</a>
-            cancel_button = <a tabindex="0" className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </a>
+            save_button = <button className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save</button>
+            cancel_button = <button className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </button>
         }
 
         if (this.props.saving) {
@@ -275,9 +275,9 @@ module.exports = React.createClass({
         var settings_button;
         if (this.props.onSettingsClick) {
             settings_button =
-                <a tabindex="0" className="mx_RoomHeader_button" onClick={this.props.onSettingsClick} title="Settings">
+                <button className="mx_RoomHeader_button" onClick={this.props.onSettingsClick} title="Settings">
                     <TintableSvg src="img/icons-settings-room.svg" width="16" height="16"/>
-                </a>;
+                </button>;
         }
 
 //        var leave_button;
@@ -291,17 +291,17 @@ module.exports = React.createClass({
         var forget_button;
         if (this.props.onForgetClick) {
             forget_button =
-                <a tabindex="0" className="mx_RoomHeader_button" onClick={this.props.onForgetClick} title="Forget room">
+                <button className="mx_RoomHeader_button" onClick={this.props.onForgetClick} title="Forget room">
                     <TintableSvg src="img/leave.svg" width="26" height="20"/>
-                </a>;
+                </button>;
         }
 
         var rightPanel_buttons;
         if (this.props.collapsedRhs) {
             rightPanel_buttons =
-                <a tabindex="0" className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title="<">
+                <button className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title="<">
                     <TintableSvg src="img/minimise.svg" width="10" height="16"/>
-                </a>
+                </button>
         }
 
         var right_row;
@@ -310,9 +310,9 @@ module.exports = React.createClass({
                 <div className="mx_RoomHeader_rightRow">
                     { settings_button }
                     { forget_button }
-                    <a tabindex="0" className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
+                    <button className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
                         <TintableSvg src="img/icons-search.svg" width="35" height="35"/>
-                    </a>
+                    </button>
                     { rightPanel_buttons }
                 </div>;
         }
diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index fce2868d50..6cd9795bdc 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/src/components/views/rooms/RoomTile.js
@@ -287,7 +287,7 @@ module.exports = React.createClass({
         var connectDropTarget = this.props.connectDropTarget;
 
         let ret = (
-            <a tabindex="0" className={classes} onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+            <button className={classes} onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
                 <div className={avatarClasses}>
                     <div className="mx_RoomTile_avatar_menu" onClick={this.onAvatarClicked}>
                         <div className={avatarContainerClasses}>
@@ -302,7 +302,7 @@ module.exports = React.createClass({
                 </div>
                 {/* { incomingCallBox } */}
                 { tooltip }
-            </a>
+            </button>
         );
 
         if (connectDropTarget) ret = connectDropTarget(ret);
diff --git a/src/components/views/rooms/SimpleRoomHeader.js b/src/components/views/rooms/SimpleRoomHeader.js
index 84c6802b3d..3c08fac821 100644
--- a/src/components/views/rooms/SimpleRoomHeader.js
+++ b/src/components/views/rooms/SimpleRoomHeader.js
@@ -44,7 +44,7 @@ module.exports = React.createClass({
 
         var cancelButton;
         if (this.props.onCancelClick) {
-            cancelButton = <a tabindex="0" className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </a>
+            cancelButton = <button className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </button>
         }
 
         var showRhsButton;
diff --git a/src/components/views/settings/ChangePassword.js b/src/components/views/settings/ChangePassword.js
index 74658a09e5..84f049fdad 100644
--- a/src/components/views/settings/ChangePassword.js
+++ b/src/components/views/settings/ChangePassword.js
@@ -136,9 +136,9 @@ module.exports = React.createClass({
                                 <input id="password2" type="password" ref="confirm_input" />
                             </div>
                         </div>
-                        <a tabindex="0" className={buttonClassName} onClick={this.onClickChange}>
+                        <button className={buttonClassName} onClick={this.onClickChange}>
                             Change Password
-                        </a>
+                        </button>
                     </div>
                 );
             case this.Phases.Uploading:

From d2ff2715ce276f4dd477a545a594698d4068422d Mon Sep 17 00:00:00 2001
From: Jani Mustonen <janijohannes@kapsi.fi>
Date: Fri, 6 Jan 2017 22:01:37 +0200
Subject: [PATCH 136/289] Buttonified almost everything. Stylesheet is broken.

---
 src/components/views/avatars/BaseAvatar.js | 28 +++++++++++++++-------
 src/components/views/rooms/EntityTile.js   |  4 ++--
 src/components/views/rooms/MemberInfo.js   | 22 ++++++++---------
 3 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/src/components/views/avatars/BaseAvatar.js b/src/components/views/avatars/BaseAvatar.js
index 47f0a76891..38a700eb7e 100644
--- a/src/components/views/avatars/BaseAvatar.js
+++ b/src/components/views/avatars/BaseAvatar.js
@@ -138,7 +138,7 @@ module.exports = React.createClass({
 
         const {
             name, idName, title, url, urls, width, height, resizeMethod,
-            defaultToInitialLetter,
+            defaultToInitialLetter, onClick,
             ...otherProps
         } = this.props;
 
@@ -156,12 +156,24 @@ module.exports = React.createClass({
                 </span>
             );
         }
-        return (
-            <img className="mx_BaseAvatar mx_BaseAvatar_image" src={imageUrl}
-                onError={this.onError}
-                width={width} height={height}
-                title={title} alt=""
-                {...otherProps} />
-        );
+        if (onClick != null) {
+            return (
+                <button className="mx_BaseAvatar" onClick={onClick}>
+                    <img className="mx_BaseAvatar_image" src={imageUrl}
+                        onError={this.onError}
+                        width={width} height={height}
+                        title={title} alt=""
+                        {...otherProps} />
+                </button>
+            );
+        } else {
+            return (
+                <img className="mx_BaseAvatar mx_BaseAvatar_image" src={imageUrl}
+                    onError={this.onError}
+                    width={width} height={height}
+                    title={title} alt=""
+                    {...otherProps} />
+            );
+        }
     }
 });
diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.js
index d29137ffc2..058359706e 100644
--- a/src/components/views/rooms/EntityTile.js
+++ b/src/components/views/rooms/EntityTile.js
@@ -152,7 +152,7 @@ module.exports = React.createClass({
         var av = this.props.avatarJsx || <BaseAvatar name={this.props.name} width={36} height={36} />;
 
         return (
-            <div className={mainClassName} title={ this.props.title }
+            <button className={mainClassName} title={ this.props.title }
                     onClick={ this.props.onClick } onMouseEnter={ this.mouseEnter }
                     onMouseLeave={ this.mouseLeave }>
                 <div className="mx_EntityTile_avatar">
@@ -161,7 +161,7 @@ module.exports = React.createClass({
                 </div>
                 { nameEl }
                 { inviteButton }
-            </div>
+            </button>
         );
     }
 });
diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js
index 1f4d392461..40f85c9e63 100644
--- a/src/components/views/rooms/MemberInfo.js
+++ b/src/components/views/rooms/MemberInfo.js
@@ -612,7 +612,7 @@ module.exports = WithMatrixClient(React.createClass({
                 mx_MemberInfo_createRoom_label: true,
                 mx_RoomTile_name: true,
             });
-            const startNewChat = <div
+            const startNewChat = <button
                 className="mx_MemberInfo_createRoom"
                 onClick={this.onNewDMClick}
             >
@@ -620,7 +620,7 @@ module.exports = WithMatrixClient(React.createClass({
                     <img src="img/create-big.svg" width="26" height="26" />
                 </div>
                 <div className={labelClasses}><i>Start new chat</i></div>
-            </div>
+            </button>
 
             startChat = <div>
                 <h3>Direct chats</h3>
@@ -635,26 +635,26 @@ module.exports = WithMatrixClient(React.createClass({
         }
 
         if (this.state.can.kick) {
-            kickButton = <div className="mx_MemberInfo_field" onClick={this.onKick}>
+            kickButton = <button className="mx_MemberInfo_field" onClick={this.onKick}>
                 { this.props.member.membership === "invite" ? "Disinvite" : "Kick" }
-            </div>;
+            </button>;
         }
         if (this.state.can.ban) {
-            banButton = <div className="mx_MemberInfo_field" onClick={this.onBan}>
+            banButton = <button className="mx_MemberInfo_field" onClick={this.onBan}>
                 Ban
-            </div>;
+            </button>;
         }
         if (this.state.can.mute) {
             var muteLabel = this.state.muted ? "Unmute" : "Mute";
-            muteButton = <div className="mx_MemberInfo_field" onClick={this.onMuteToggle}>
+            muteButton = <button className="mx_MemberInfo_field" onClick={this.onMuteToggle}>
                 {muteLabel}
-            </div>;
+            </button>;
         }
         if (this.state.can.toggleMod) {
             var giveOpLabel = this.state.isTargetMod ? "Revoke Moderator" : "Make Moderator";
-            giveModButton = <div className="mx_MemberInfo_field" onClick={this.onModToggle}>
+            giveModButton = <button className="mx_MemberInfo_field" onClick={this.onModToggle}>
                 {giveOpLabel}
-            </div>
+            </button>
         }
 
         // TODO: we should have an invite button if this MemberInfo is showing a user who isn't actually in the current room yet
@@ -682,7 +682,7 @@ module.exports = WithMatrixClient(React.createClass({
         const EmojiText = sdk.getComponent('elements.EmojiText');
         return (
             <div className="mx_MemberInfo">
-                <img className="mx_MemberInfo_cancel" src="img/cancel.svg" width="18" height="18" onClick={this.onCancel}/>
+                <button className="mx_MemberInfo_cancel" onClick={this.onCancel}> <img src="img/cancel.svg" width="18" height="18"/></button>
                 <div className="mx_MemberInfo_avatar">
                     <MemberAvatar onClick={this.onMemberAvatarClick} member={this.props.member} width={48} height={48} />
                 </div>

From 041196d7298d72381b66c7ce2aefa4ed924324ec Mon Sep 17 00:00:00 2001
From: Jani Mustonen <janijohannes@kapsi.fi>
Date: Sat, 7 Jan 2017 17:53:45 +0200
Subject: [PATCH 137/289] Added quick search functionality

---
 src/components/views/elements/TintableSvg.js | 1 +
 src/components/views/rooms/RoomTile.js       | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/views/elements/TintableSvg.js b/src/components/views/elements/TintableSvg.js
index 0157131506..401a11c1cb 100644
--- a/src/components/views/elements/TintableSvg.js
+++ b/src/components/views/elements/TintableSvg.js
@@ -69,6 +69,7 @@ var TintableSvg = React.createClass({
                     width={ this.props.width }
                     height={ this.props.height }
                     onLoad={ this.onLoad }
+                    tabIndex="-1"
                 />
         );
     }
diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index 6cd9795bdc..9f592868b4 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/src/components/views/rooms/RoomTile.js
@@ -287,7 +287,7 @@ module.exports = React.createClass({
         var connectDropTarget = this.props.connectDropTarget;
 
         let ret = (
-            <button className={classes} onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+            <button className={classes} tabIndex="0" onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
                 <div className={avatarClasses}>
                     <div className="mx_RoomTile_avatar_menu" onClick={this.onAvatarClicked}>
                         <div className={avatarContainerClasses}>

From 959163f2ef0cd77bf0999061e810e17030766624 Mon Sep 17 00:00:00 2001
From: Jani Mustonen <janijohannes@kapsi.fi>
Date: Fri, 13 Jan 2017 18:25:26 +0200
Subject: [PATCH 138/289] Proper accessible buttons

---
 src/components/structures/UserSettings.js     | 13 ++++++-----
 src/components/views/avatars/BaseAvatar.js    |  5 ++--
 .../views/dialogs/ChatInviteDialog.js         |  5 ++--
 src/components/views/rooms/EntityTile.js      |  5 ++--
 src/components/views/rooms/MemberInfo.js      | 23 ++++++++++---------
 .../views/rooms/ReadReceiptMarker.js          |  2 +-
 src/components/views/rooms/RoomHeader.js      | 21 +++++++++--------
 src/components/views/rooms/RoomTile.js        |  8 +++++--
 .../views/rooms/SimpleRoomHeader.js           |  3 ++-
 .../views/settings/ChangePassword.js          |  5 ++--
 10 files changed, 51 insertions(+), 39 deletions(-)

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index b104352096..aa5673fd12 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -26,6 +26,7 @@ var UserSettingsStore = require('../../UserSettingsStore');
 var GeminiScrollbar = require('react-gemini-scrollbar');
 var Email = require('../../email');
 var AddThreepid = require('../../AddThreepid');
+var AccessibleButton = require('../views/elements/AccessibleButton');
 
 // if this looks like a release, use the 'version' from package.json; else use
 // the git sha.
@@ -470,9 +471,9 @@ module.exports = React.createClass({
         return <div>
             <h3>Deactivate Account</h3>
                 <div className="mx_UserSettings_section">
-                    <button className="mx_UserSettings_button danger"
+                    <AccessibleButton className="mx_UserSettings_button danger"
                         onClick={this._onDeactivateAccountClicked}>Deactivate my account
-                    </button>
+                    </AccessibleButton>
                 </div>
         </div>;
     },
@@ -492,10 +493,10 @@ module.exports = React.createClass({
             // bind() the invited rooms so any new invites that may come in as this button is clicked
             // don't inadvertently get rejected as well.
             reject = (
-                <button className="mx_UserSettings_button danger"
+                <AccessibleButton className="mx_UserSettings_button danger"
                 onClick={this._onRejectAllInvitesClicked.bind(this, invitedRooms)}>
                     Reject all {invitedRooms.length} invites
-                </button>
+                </AccessibleButton>
             );
         }
 
@@ -663,9 +664,9 @@ module.exports = React.createClass({
 
                 <div className="mx_UserSettings_section">
 
-                    <button className="mx_UserSettings_logout mx_UserSettings_button" onClick={this.onLogoutClicked}>
+                    <AccessibleButton className="mx_UserSettings_logout mx_UserSettings_button" onClick={this.onLogoutClicked}>
                         Sign out
-                    </button>
+                    </AccessibleButton>
 
                     {accountJsx}
                 </div>
diff --git a/src/components/views/avatars/BaseAvatar.js b/src/components/views/avatars/BaseAvatar.js
index 38a700eb7e..906325268f 100644
--- a/src/components/views/avatars/BaseAvatar.js
+++ b/src/components/views/avatars/BaseAvatar.js
@@ -19,6 +19,7 @@ limitations under the License.
 var React = require('react');
 var AvatarLogic = require("../../../Avatar");
 import sdk from '../../../index';
+var AccessibleButton = require('../elements/AccessibleButton');
 
 module.exports = React.createClass({
     displayName: 'BaseAvatar',
@@ -158,13 +159,13 @@ module.exports = React.createClass({
         }
         if (onClick != null) {
             return (
-                <button className="mx_BaseAvatar" onClick={onClick}>
+                <AccessibleButton className="mx_BaseAvatar" onClick={onClick}>
                     <img className="mx_BaseAvatar_image" src={imageUrl}
                         onError={this.onError}
                         width={width} height={height}
                         title={title} alt=""
                         {...otherProps} />
-                </button>
+                </AccessibleButton>
             );
         } else {
             return (
diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index fe33ea6d1c..a54651b2db 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -24,6 +24,7 @@ var DMRoomMap = require('../../../utils/DMRoomMap');
 var rate_limited_func = require("../../../ratelimitedfunc");
 var dis = require("../../../dispatcher");
 var Modal = require('../../../Modal');
+var AccessibleButton = require('../elements/AccessibleButton');
 
 const TRUNCATE_QUERY_LIST = 40;
 
@@ -409,9 +410,9 @@ module.exports = React.createClass({
                 <div className="mx_Dialog_title">
                     {this.props.title}
                 </div>
-                <button className="mx_ChatInviteDialog_cancel" onClick={this.onCancel} >
+                <AccessibleButton className="mx_ChatInviteDialog_cancel" onClick={this.onCancel} >
                     <TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
-                </button>
+                </AccessibleButton>
                 <div className="mx_ChatInviteDialog_label">
                     <label htmlFor="textinput">{ this.props.description }</label>
                 </div>
diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.js
index 058359706e..64de431d9d 100644
--- a/src/components/views/rooms/EntityTile.js
+++ b/src/components/views/rooms/EntityTile.js
@@ -20,6 +20,7 @@ var React = require('react');
 
 var MatrixClientPeg = require('../../../MatrixClientPeg');
 var sdk = require('../../../index');
+var AccessibleButton = require('../elements/AccessibleButton');
 
 
 var PRESENCE_CLASS = {
@@ -152,7 +153,7 @@ module.exports = React.createClass({
         var av = this.props.avatarJsx || <BaseAvatar name={this.props.name} width={36} height={36} />;
 
         return (
-            <button className={mainClassName} title={ this.props.title }
+            <AccessibleButton className={mainClassName} title={ this.props.title }
                     onClick={ this.props.onClick } onMouseEnter={ this.mouseEnter }
                     onMouseLeave={ this.mouseLeave }>
                 <div className="mx_EntityTile_avatar">
@@ -161,7 +162,7 @@ module.exports = React.createClass({
                 </div>
                 { nameEl }
                 { inviteButton }
-            </button>
+            </AccessibleButton>
         );
     }
 });
diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js
index 40f85c9e63..4863bad5ed 100644
--- a/src/components/views/rooms/MemberInfo.js
+++ b/src/components/views/rooms/MemberInfo.js
@@ -35,6 +35,7 @@ var DMRoomMap = require('../../../utils/DMRoomMap');
 var Unread = require('../../../Unread');
 var Receipt = require('../../../utils/Receipt');
 var WithMatrixClient = require('../../../wrappers/WithMatrixClient');
+var AccessibleButton = require('../elements/AccessibleButton');
 
 module.exports = WithMatrixClient(React.createClass({
     displayName: 'MemberInfo',
@@ -612,7 +613,7 @@ module.exports = WithMatrixClient(React.createClass({
                 mx_MemberInfo_createRoom_label: true,
                 mx_RoomTile_name: true,
             });
-            const startNewChat = <button
+            const startNewChat = <AccessibleButton
                 className="mx_MemberInfo_createRoom"
                 onClick={this.onNewDMClick}
             >
@@ -620,7 +621,7 @@ module.exports = WithMatrixClient(React.createClass({
                     <img src="img/create-big.svg" width="26" height="26" />
                 </div>
                 <div className={labelClasses}><i>Start new chat</i></div>
-            </button>
+            </AccessibleButton>
 
             startChat = <div>
                 <h3>Direct chats</h3>
@@ -635,26 +636,26 @@ module.exports = WithMatrixClient(React.createClass({
         }
 
         if (this.state.can.kick) {
-            kickButton = <button className="mx_MemberInfo_field" onClick={this.onKick}>
+            kickButton = <AccessibleButton className="mx_MemberInfo_field" onClick={this.onKick}>
                 { this.props.member.membership === "invite" ? "Disinvite" : "Kick" }
-            </button>;
+            </AccessibleButton>;
         }
         if (this.state.can.ban) {
-            banButton = <button className="mx_MemberInfo_field" onClick={this.onBan}>
+            banButton = <AccessibleButton className="mx_MemberInfo_field" onClick={this.onBan}>
                 Ban
-            </button>;
+            </AccessibleButton>;
         }
         if (this.state.can.mute) {
             var muteLabel = this.state.muted ? "Unmute" : "Mute";
-            muteButton = <button className="mx_MemberInfo_field" onClick={this.onMuteToggle}>
+            muteButton = <AccessibleButton className="mx_MemberInfo_field" onClick={this.onMuteToggle}>
                 {muteLabel}
-            </button>;
+            </AccessibleButton>;
         }
         if (this.state.can.toggleMod) {
             var giveOpLabel = this.state.isTargetMod ? "Revoke Moderator" : "Make Moderator";
-            giveModButton = <button className="mx_MemberInfo_field" onClick={this.onModToggle}>
+            giveModButton = <AccessibleButton className="mx_MemberInfo_field" onClick={this.onModToggle}>
                 {giveOpLabel}
-            </button>
+            </AccessibleButton>
         }
 
         // TODO: we should have an invite button if this MemberInfo is showing a user who isn't actually in the current room yet
@@ -682,7 +683,7 @@ module.exports = WithMatrixClient(React.createClass({
         const EmojiText = sdk.getComponent('elements.EmojiText');
         return (
             <div className="mx_MemberInfo">
-                <button className="mx_MemberInfo_cancel" onClick={this.onCancel}> <img src="img/cancel.svg" width="18" height="18"/></button>
+                <AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel}> <img src="img/cancel.svg" width="18" height="18"/></AccessibleButton>
                 <div className="mx_MemberInfo_avatar">
                     <MemberAvatar onClick={this.onMemberAvatarClick} member={this.props.member} width={48} height={48} />
                 </div>
diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js
index 47875bd7fb..1618e4440d 100644
--- a/src/components/views/rooms/ReadReceiptMarker.js
+++ b/src/components/views/rooms/ReadReceiptMarker.js
@@ -192,9 +192,9 @@ module.exports = React.createClass({
                     width={14} height={14} resizeMethod="crop"
                     style={style}
                     title={title}
-                    onClick={this.props.onClick}
                 />
             </Velociraptor>
         );
+        /* onClick={this.props.onClick} */
     },
 });
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 92cc6c64fd..b67acefc52 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -26,6 +26,7 @@ var rate_limited_func = require('../../../ratelimitedfunc');
 var linkify = require('linkifyjs');
 var linkifyElement = require('linkifyjs/element');
 var linkifyMatrix = require('../../../linkify-matrix');
+var AccessibleButton = require('../elements/AccessibleButton');
 
 linkifyMatrix(linkify);
 
@@ -182,8 +183,8 @@ module.exports = React.createClass({
                 'm.room.name', user_id
             );
 
-            save_button = <button className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save</button>
-            cancel_button = <button className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </button>
+            save_button = <AccessibleButton className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save</AccessibleButton>
+            cancel_button = <AccessibleButton className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </AccessibleButton>
         }
 
         if (this.props.saving) {
@@ -275,9 +276,9 @@ module.exports = React.createClass({
         var settings_button;
         if (this.props.onSettingsClick) {
             settings_button =
-                <button className="mx_RoomHeader_button" onClick={this.props.onSettingsClick} title="Settings">
+                <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSettingsClick} title="Settings">
                     <TintableSvg src="img/icons-settings-room.svg" width="16" height="16"/>
-                </button>;
+                </AccessibleButton>;
         }
 
 //        var leave_button;
@@ -291,17 +292,17 @@ module.exports = React.createClass({
         var forget_button;
         if (this.props.onForgetClick) {
             forget_button =
-                <button className="mx_RoomHeader_button" onClick={this.props.onForgetClick} title="Forget room">
+                <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onForgetClick} title="Forget room">
                     <TintableSvg src="img/leave.svg" width="26" height="20"/>
-                </button>;
+                </AccessibleButton>;
         }
 
         var rightPanel_buttons;
         if (this.props.collapsedRhs) {
             rightPanel_buttons =
-                <button className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title="<">
+                <AccessibleButton className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title="<">
                     <TintableSvg src="img/minimise.svg" width="10" height="16"/>
-                </button>
+                </AccessibleButton>
         }
 
         var right_row;
@@ -310,9 +311,9 @@ module.exports = React.createClass({
                 <div className="mx_RoomHeader_rightRow">
                     { settings_button }
                     { forget_button }
-                    <button className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
+                    <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
                         <TintableSvg src="img/icons-search.svg" width="35" height="35"/>
-                    </button>
+                    </AccessibleButton>
                     { rightPanel_buttons }
                 </div>;
         }
diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index 9f592868b4..07790181c5 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/src/components/views/rooms/RoomTile.js
@@ -26,6 +26,7 @@ var sdk = require('../../../index');
 var ContextualMenu = require('../../structures/ContextualMenu');
 var RoomNotifs = require('../../../RoomNotifs');
 var FormattingUtils = require('../../../utils/FormattingUtils');
+var AccessibleButton = require('../elements/AccessibleButton');
 
 module.exports = React.createClass({
     displayName: 'RoomTile',
@@ -286,8 +287,10 @@ module.exports = React.createClass({
         var connectDragSource = this.props.connectDragSource;
         var connectDropTarget = this.props.connectDropTarget;
 
+        
         let ret = (
-            <button className={classes} tabIndex="0" onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+            <div> { /* Only native elements can be wrapped in a DnD object. */}
+            <AccessibleButton className={classes} tabIndex="0" onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
                 <div className={avatarClasses}>
                     <div className="mx_RoomTile_avatar_menu" onClick={this.onAvatarClicked}>
                         <div className={avatarContainerClasses}>
@@ -302,7 +305,8 @@ module.exports = React.createClass({
                 </div>
                 {/* { incomingCallBox } */}
                 { tooltip }
-            </button>
+            </AccessibleButton>
+            </div>
         );
 
         if (connectDropTarget) ret = connectDropTarget(ret);
diff --git a/src/components/views/rooms/SimpleRoomHeader.js b/src/components/views/rooms/SimpleRoomHeader.js
index 3c08fac821..dbb27deb73 100644
--- a/src/components/views/rooms/SimpleRoomHeader.js
+++ b/src/components/views/rooms/SimpleRoomHeader.js
@@ -19,6 +19,7 @@ limitations under the License.
 var React = require('react');
 var sdk = require('../../../index');
 var dis = require("../../../dispatcher");
+var AccessibleButton = require('../elements/AccessibleButton');
 
 /*
  * A stripped-down room header used for things like the user settings
@@ -44,7 +45,7 @@ module.exports = React.createClass({
 
         var cancelButton;
         if (this.props.onCancelClick) {
-            cancelButton = <button className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </button>
+            cancelButton = <AccessibleButton className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </AccessibleButton>
         }
 
         var showRhsButton;
diff --git a/src/components/views/settings/ChangePassword.js b/src/components/views/settings/ChangePassword.js
index 84f049fdad..8882c1e048 100644
--- a/src/components/views/settings/ChangePassword.js
+++ b/src/components/views/settings/ChangePassword.js
@@ -19,6 +19,7 @@ limitations under the License.
 var React = require('react');
 var MatrixClientPeg = require("../../../MatrixClientPeg");
 var sdk = require("../../../index");
+var AccessibleButton = require('../elements/AccessibleButton');
 
 module.exports = React.createClass({
     displayName: 'ChangePassword',
@@ -136,9 +137,9 @@ module.exports = React.createClass({
                                 <input id="password2" type="password" ref="confirm_input" />
                             </div>
                         </div>
-                        <button className={buttonClassName} onClick={this.onClickChange}>
+                        <AccessibleButton className={buttonClassName} onClick={this.onClickChange}>
                             Change Password
-                        </button>
+                        </AccessibleButton>
                     </div>
                 );
             case this.Phases.Uploading:

From 5e013860eee729c7131d5dcde47e4feff5b8037a Mon Sep 17 00:00:00 2001
From: Jani Mustonen <janijohannes@kapsi.fi>
Date: Fri, 13 Jan 2017 18:26:59 +0200
Subject: [PATCH 139/289] Definition for AccessibleButton

---
 .../views/elements/AccessibleButton.js        | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 src/components/views/elements/AccessibleButton.js

diff --git a/src/components/views/elements/AccessibleButton.js b/src/components/views/elements/AccessibleButton.js
new file mode 100644
index 0000000000..91a9b99333
--- /dev/null
+++ b/src/components/views/elements/AccessibleButton.js
@@ -0,0 +1,44 @@
+/*
+ Copyright 2016 Aviral Dasgupta
+
+ 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.
+ */
+
+import React from 'react';
+
+export default function AccessibleButton(props) {
+    const {element, onClick, children, ...restProps} = props;
+    restProps.onClick = onClick;
+    restProps.onKeyDown = function(e) {
+        if (e.keyCode == 13 || e.keyCode == 32) return onClick();
+    };
+    restProps.tabIndex = restProps.tabIndex || "0"; 
+    restProps.role = "button";
+    if (Array.isArray(children)) {
+        return React.createElement(element, restProps, ...children);
+    } else {
+        return React.createElement(element, restProps, children);
+    }
+}
+
+AccessibleButton.propTypes = {
+    children: React.PropTypes.node,
+    element: React.PropTypes.string,
+    onClick: React.PropTypes.func.isRequired,
+};
+
+AccessibleButton.defaultProps = {
+    element: 'div'
+};
+
+AccessibleButton.displayName = "AccessibleButton";

From b323551f2210dea5842647a213b3486f34342e73 Mon Sep 17 00:00:00 2001
From: Jani Mustonen <janijohannes@kapsi.fi>
Date: Fri, 13 Jan 2017 19:34:53 +0200
Subject: [PATCH 140/289] Adhered to code review

---
 .../views/elements/AccessibleButton.js         | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/views/elements/AccessibleButton.js b/src/components/views/elements/AccessibleButton.js
index 91a9b99333..3ff5d7a38a 100644
--- a/src/components/views/elements/AccessibleButton.js
+++ b/src/components/views/elements/AccessibleButton.js
@@ -1,5 +1,5 @@
 /*
- Copyright 2016 Aviral Dasgupta
+ Copyright 2016 Jani Mustonen
 
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
@@ -16,6 +16,10 @@
 
 import React from 'react';
 
+/**
+ * AccessibleButton is a generic wrapper for any element that should be treated as a button.
+ * Identifies the element as a button, setting proper tab indexing and keyboard activation behavior.
+ */
 export default function AccessibleButton(props) {
     const {element, onClick, children, ...restProps} = props;
     restProps.onClick = onClick;
@@ -24,13 +28,15 @@ export default function AccessibleButton(props) {
     };
     restProps.tabIndex = restProps.tabIndex || "0"; 
     restProps.role = "button";
-    if (Array.isArray(children)) {
-        return React.createElement(element, restProps, ...children);
-    } else {
-        return React.createElement(element, restProps, children);
-    }
+    return React.createElement(element, restProps, children);
 }
 
+/**
+ * children: React's magic prop. Represents all children given to the element.
+ * element:  (optional) The base element type. "div" by default.
+ * onClick:  (required) Event handler for button activation. Should be
+ *           implemented exactly like a normal onClick handler.
+ */
 AccessibleButton.propTypes = {
     children: React.PropTypes.node,
     element: React.PropTypes.string,

From 1d5d44d63d2c07ac51f9886eb426c8ee8f9a22ab Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 12 Jan 2017 11:45:47 +0000
Subject: [PATCH 141/289] TextEncoder polyfill

Apparently Safari doesn't sport a TextEncoder, so here's a polyfill for it.
---
 src/utils/TextDecoderPolyfill.js       | 131 +++++++++++++++++++++++++
 src/utils/TextEncoderPolyfill.js       |  78 +++++++++++++++
 test/utils/TextDecoderPolyfill-test.js |  85 ++++++++++++++++
 test/utils/TextEncoderPolyfill-test.js |  39 ++++++++
 4 files changed, 333 insertions(+)
 create mode 100644 src/utils/TextDecoderPolyfill.js
 create mode 100644 src/utils/TextEncoderPolyfill.js
 create mode 100644 test/utils/TextDecoderPolyfill-test.js
 create mode 100644 test/utils/TextEncoderPolyfill-test.js

diff --git a/src/utils/TextDecoderPolyfill.js b/src/utils/TextDecoderPolyfill.js
new file mode 100644
index 0000000000..e203676bb7
--- /dev/null
+++ b/src/utils/TextDecoderPolyfill.js
@@ -0,0 +1,131 @@
+/*
+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.
+*/
+
+"use strict";
+
+// Polyfill for TextDecoder.
+
+const REPLACEMENT_CHAR = '\uFFFD';
+
+export default class TextDecoder {
+    /**
+     * Decode a UTF-8 byte array as a javascript string
+     *
+     * @param {Uint8Array} u8Array UTF-8-encoded onput
+     * @return {str}
+     */
+    decode(u8Array) {
+        let u0, u1, u2, u3;
+
+        let str = '';
+        let idx = 0;
+        while (idx < u8Array.length) {
+            u0 = u8Array[idx++];
+            if (!(u0 & 0x80)) {
+                str += String.fromCharCode(u0);
+                continue;
+            }
+
+            if ((u0 & 0xC0) != 0xC0) {
+                // continuation byte where we expect a leading byte
+                str += REPLACEMENT_CHAR;
+                continue;
+            }
+
+            if (u0 > 0xF4) {
+                // this would imply a 5-byte or longer encoding, which is
+                // invalid and unsupported here.
+                str += REPLACEMENT_CHAR;
+                continue;
+            }
+
+            u1 = u8Array[idx++];
+            if (u1 === undefined) {
+                str += REPLACEMENT_CHAR;
+                continue;
+            }
+
+            if ((u1 & 0xC0) != 0x80) {
+                // leading byte where we expect a continuation byte
+                str += REPLACEMENT_CHAR.repeat(2);
+                continue;
+            }
+            u1 &= 0x3F;
+            if (!(u0 & 0x20)) {
+                const u = ((u0 & 0x1F) << 6) | u1;
+                if (u < 0x80) {
+                    // over-long
+                    str += REPLACEMENT_CHAR.repeat(2);
+                } else {
+                    str += String.fromCharCode(u);
+                }
+                continue;
+            }
+
+            u2 = u8Array[idx++];
+            if (u2 === undefined) {
+                str += REPLACEMENT_CHAR.repeat(2);
+                continue;
+            }
+            if ((u2 & 0xC0) != 0x80) {
+                // leading byte where we expect a continuation byte
+                str += REPLACEMENT_CHAR.repeat(3);
+                continue;
+            }
+            u2 &= 0x3F;
+            if (!(u0 & 0x10)) {
+                const u = ((u0 & 0x0F) << 12) | (u1 << 6) | u2;
+                if (u < 0x800) {
+                    // over-long
+                    str += REPLACEMENT_CHAR.repeat(3);
+                } else if (u == 0xFEFF && idx == 3) {
+                    // byte-order mark: do not add to output
+                } else {
+                    str += String.fromCharCode(u);
+                }
+                continue;
+            }
+
+            u3 = u8Array[idx++];
+            if (u3 === undefined) {
+                str += REPLACEMENT_CHAR.repeat(3);
+                continue;
+            }
+            if ((u3 & 0xC0) != 0x80) {
+                // leading byte where we expect a continuation byte
+                str += REPLACEMENT_CHAR.repeat(4);
+                continue;
+            }
+            u3 &= 0x3F;
+            const u = ((u0 & 7) << 18) | (u1 << 12) | (u2 << 6) | u3;
+            if (u < 0x10000) {
+                // over-long
+                str += REPLACEMENT_CHAR.repeat(4);
+                continue;
+            }
+            if (u > 0x1FFFF) {
+                // unicode stops here.
+                str += REPLACEMENT_CHAR.repeat(4);
+                continue;
+            }
+
+            // encode as utf-16
+            const v = u - 0x10000;
+            str += String.fromCharCode(0xD800 | (v >> 10), 0xDC00 | (v & 0x3FF));
+        }
+        return str;
+    }
+}
diff --git a/src/utils/TextEncoderPolyfill.js b/src/utils/TextEncoderPolyfill.js
new file mode 100644
index 0000000000..2da09710f2
--- /dev/null
+++ b/src/utils/TextEncoderPolyfill.js
@@ -0,0 +1,78 @@
+/*
+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.
+*/
+
+"use strict";
+
+// Polyfill for TextEncoder. Based on emscripten's stringToUTF8Array.
+
+function utf8len(str) {
+    var len = 0;
+    for (var i = 0; i < str.length; ++i) {
+        var u = str.charCodeAt(i);
+        if (u >= 0xD800 && u <= 0xDFFF && i < str.length-1) {
+            // lead surrogate - combine with next surrogate
+            u = 0x10000 + ((u & 0x3FF) << 10) | (str.charCodeAt(++i) & 0x3FF);
+        }
+
+        if (u <= 0x7F) {
+            ++len;
+        } else if (u <= 0x7FF) {
+            len += 2;
+        } else if (u <= 0xFFFF) {
+            len += 3;
+        } else {
+            len += 4;
+        }
+    }
+    return len;
+}
+
+export default class TextEncoder {
+    /**
+     * Encode a javascript string as utf-8
+     *
+     * @param {String} str String to encode
+     * @return {Uint8Array} UTF-8-encoded output
+     */
+    encode(str) {
+        const outU8Array = new Uint8Array(utf8len(str));
+        var outIdx = 0;
+        for (var i = 0; i < str.length; ++i) {
+            var u = str.charCodeAt(i);
+            if (u >= 0xD800 && u <= 0xDFFF && i < str.length-1) {
+                // lead surrogate - combine with next surrogate
+                u = 0x10000 + ((u & 0x3FF) << 10) | (str.charCodeAt(++i) & 0x3FF);
+            }
+
+            if (u <= 0x7F) {
+                outU8Array[outIdx++] = u;
+            } else if (u <= 0x7FF) {
+                outU8Array[outIdx++] = 0xC0 | (u >> 6);
+                outU8Array[outIdx++] = 0x80 | (u & 63);
+            } else if (u <= 0xFFFF) {
+                outU8Array[outIdx++] = 0xE0 | (u >> 12);
+                outU8Array[outIdx++] = 0x80 | ((u >> 6) & 63);
+                outU8Array[outIdx++] = 0x80 | (u & 63);
+            } else {
+                outU8Array[outIdx++] = 0xF0 | (u >> 18);
+                outU8Array[outIdx++] = 0x80 | ((u >> 12) & 63);
+                outU8Array[outIdx++] = 0x80 | ((u >> 6) & 63);
+                outU8Array[outIdx++] = 0x80 | (u & 63);
+            }
+        }
+        return outU8Array;
+    }
+}
diff --git a/test/utils/TextDecoderPolyfill-test.js b/test/utils/TextDecoderPolyfill-test.js
new file mode 100644
index 0000000000..84f5edf187
--- /dev/null
+++ b/test/utils/TextDecoderPolyfill-test.js
@@ -0,0 +1,85 @@
+/*
+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.
+*/
+
+"use strict";
+
+import TextDecoderPolyfill from 'utils/TextDecoderPolyfill';
+
+import * as testUtils from '../test-utils';
+import expect from 'expect';
+
+describe('textDecoderPolyfill', function() {
+    beforeEach(function() {
+        testUtils.beforeEach(this);
+    });
+
+    it('should correctly decode a range of strings', function() {
+        const decoder = new TextDecoderPolyfill();
+
+        expect(decoder.decode(Uint8Array.of(65, 66, 67))).toEqual('ABC');
+        expect(decoder.decode(Uint8Array.of(0xC3, 0xA6))).toEqual('æ');
+        expect(decoder.decode(Uint8Array.of(0xE2, 0x82, 0xAC))).toEqual('€');
+        expect(decoder.decode(Uint8Array.of(0xF0, 0x9F, 0x92, 0xA9))).toEqual('\uD83D\uDCA9');
+    });
+
+    it('should ignore byte-order marks', function() {
+        const decoder = new TextDecoderPolyfill();
+        expect(decoder.decode(Uint8Array.of(0xEF, 0xBB, 0xBF, 65)))
+            .toEqual('A');
+    });
+
+    it('should not ignore byte-order marks in the middle of the array', function() {
+        const decoder = new TextDecoderPolyfill();
+        expect(decoder.decode(Uint8Array.of(65, 0xEF, 0xBB, 0xBF, 66)))
+            .toEqual('A\uFEFFB');
+    });
+
+    it('should reject overlong encodings', function() {
+        const decoder = new TextDecoderPolyfill();
+
+        // euro, as 4 bytes
+        expect(decoder.decode(Uint8Array.of(65, 0xF0, 0x82, 0x82, 0xAC, 67)))
+            .toEqual('A\uFFFD\uFFFD\uFFFD\uFFFDC');
+    });
+
+    it('should reject 5 and 6-byte encodings', function() {
+        const decoder = new TextDecoderPolyfill();
+
+        expect(decoder.decode(Uint8Array.of(65, 0xF8, 0x82, 0x82, 0x82, 0x82, 67)))
+            .toEqual('A\uFFFD\uFFFD\uFFFD\uFFFD\uFFFDC');
+    });
+
+    it('should reject code points beyond 0x10000', function() {
+        const decoder = new TextDecoderPolyfill();
+
+        expect(decoder.decode(Uint8Array.of(0xF4, 0xA0, 0x80, 0x80)))
+            .toEqual('\uFFFD\uFFFD\uFFFD\uFFFD');
+    });
+
+    it('should cope with end-of-string', function() {
+        const decoder = new TextDecoderPolyfill();
+
+        expect(decoder.decode(Uint8Array.of(65, 0xC3)))
+            .toEqual('A\uFFFD');
+
+        expect(decoder.decode(Uint8Array.of(65, 0xE2, 0x82)))
+            .toEqual('A\uFFFD\uFFFD');
+
+        expect(decoder.decode(Uint8Array.of(65, 0xF0, 0x9F, 0x92)))
+            .toEqual('A\uFFFD\uFFFD\uFFFD');
+    });
+
+});
diff --git a/test/utils/TextEncoderPolyfill-test.js b/test/utils/TextEncoderPolyfill-test.js
new file mode 100644
index 0000000000..4f422ec375
--- /dev/null
+++ b/test/utils/TextEncoderPolyfill-test.js
@@ -0,0 +1,39 @@
+/*
+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.
+*/
+
+"use strict";
+
+import TextEncoderPolyfill from 'utils/TextEncoderPolyfill';
+
+import * as testUtils from '../test-utils';
+import expect from 'expect';
+
+describe('textEncoderPolyfill', function() {
+    beforeEach(function() {
+        testUtils.beforeEach(this);
+    });
+
+    it('should correctly encode a range of strings', function() {
+        const encoder = new TextEncoderPolyfill();
+
+        expect(encoder.encode('ABC')).toEqual(Uint8Array.of(65, 66, 67));
+        expect(encoder.encode('æ')).toEqual(Uint8Array.of(0xC3, 0xA6));
+        expect(encoder.encode('€')).toEqual(Uint8Array.of(0xE2, 0x82, 0xAC));
+
+        // PILE OF POO (💩)
+        expect(encoder.encode('\uD83D\uDCA9')).toEqual(Uint8Array.of(0xF0, 0x9F, 0x92, 0xA9));
+    });
+});

From f8e56778ea5b0577d0d594f4416305b79ee6d281 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 11 Jan 2017 22:22:11 +0000
Subject: [PATCH 142/289] Encryption and decryption for megolm backups

---
 src/utils/MegolmExportEncryption.js        | 312 +++++++++++++++++++++
 test/utils/MegolmExportEncryption-test.js  | 115 ++++++++
 test/utils/generate-megolm-test-vectors.py | 117 ++++++++
 3 files changed, 544 insertions(+)
 create mode 100644 src/utils/MegolmExportEncryption.js
 create mode 100644 test/utils/MegolmExportEncryption-test.js
 create mode 100755 test/utils/generate-megolm-test-vectors.py

diff --git a/src/utils/MegolmExportEncryption.js b/src/utils/MegolmExportEncryption.js
new file mode 100644
index 0000000000..5b2e16ef29
--- /dev/null
+++ b/src/utils/MegolmExportEncryption.js
@@ -0,0 +1,312 @@
+/*
+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.
+*/
+
+"use strict";
+
+// polyfill textencoder if necessary
+let TextEncoder = window.TextEncoder;
+if (!TextEncoder) {
+    TextEncoder = require('./TextEncoderPolyfill');
+}
+let TextDecoder = window.TextDecoder;
+if (TextDecoder) {
+    TextDecoder = require('./TextDecoderPolyfill');
+}
+
+const subtleCrypto = window.crypto.subtle || window.crypto.webkitSubtle;
+
+/**
+ * Decrypt a megolm key file
+ *
+ * @param {ArrayBuffer} file
+ * @param {String} password
+ * @return {Promise<String>} promise for decrypted output
+ */
+export function decryptMegolmKeyFile(data, password) {
+    const body = unpackMegolmKeyFile(data);
+
+    // check we have a version byte
+    if (body.length < 1) {
+        throw new Error('Invalid file: too short');
+    }
+
+    const version = body[0];
+    if (version !== 1) {
+        throw new Error('Unsupported version');
+    }
+
+    const ciphertextLength = body.length-(1+16+16+4+32);
+    if (body.length < 0) {
+        throw new Error('Invalid file: too short');
+    }
+
+    const salt = body.subarray(1, 1+16);
+    const iv = body.subarray(17, 17+16);
+    const iterations = body[33] << 24 | body[34] << 16 | body[35] << 8 | body[36];
+    const ciphertext = body.subarray(37, 37+ciphertextLength);
+    const hmac = body.subarray(-32);
+
+    return deriveKeys(salt, iterations, password).then((keys) => {
+        const [aes_key, sha_key] = keys;
+
+        const toVerify = body.subarray(0, -32);
+        return subtleCrypto.verify(
+            {name: 'HMAC'},
+            sha_key,
+            hmac,
+            toVerify,
+        ).then((isValid) => {
+            if (!isValid) {
+                throw new Error('Authentication check failed: incorrect password?')
+            }
+
+            return subtleCrypto.decrypt(
+                {
+                    name: "AES-CTR",
+                    counter: iv,
+                    length: 64,
+                },
+                aes_key,
+                ciphertext,
+            );
+        });
+    }).then((plaintext) => {
+        return new TextDecoder().decode(new Uint8Array(plaintext));
+    });
+}
+
+
+/**
+ * Encrypt a megolm key file
+ *
+ * @param {String} data
+ * @param {String} password
+ * @param {Object=} options
+ * @param {Nunber=} options.kdf_rounds Number of iterations to perform of the
+ *    key-derivation function.
+ * @return {Promise<ArrayBuffer>} promise for encrypted output
+ */
+export function encryptMegolmKeyFile(data, password, options) {
+    options = options || {};
+    const kdf_rounds = options.kdf_rounds || 100000;
+
+    const salt = new Uint8Array(16);
+    window.crypto.getRandomValues(salt);
+    const iv = new Uint8Array(16);
+    window.crypto.getRandomValues(iv);
+
+    return deriveKeys(salt, kdf_rounds, password).then((keys) => {
+        const [aes_key, sha_key] = keys;
+
+        return subtleCrypto.encrypt(
+            {
+                name: "AES-CTR",
+                counter: iv,
+                length: 64,
+            },
+            aes_key,
+            new TextEncoder().encode(data),
+        ).then((ciphertext) => {
+            const cipherArray = new Uint8Array(ciphertext);
+            const bodyLength = (1+salt.length+iv.length+4+cipherArray.length+32);
+            const resultBuffer = new Uint8Array(bodyLength);
+            let idx = 0;
+            resultBuffer[idx++] = 1; // version
+            resultBuffer.set(salt, idx); idx += salt.length;
+            resultBuffer.set(iv, idx); idx += iv.length;
+            resultBuffer[idx++] = kdf_rounds >> 24;
+            resultBuffer[idx++] = (kdf_rounds >> 16) & 0xff;
+            resultBuffer[idx++] = (kdf_rounds >> 8) & 0xff;
+            resultBuffer[idx++] = kdf_rounds & 0xff;
+            resultBuffer.set(cipherArray, idx); idx += cipherArray.length;
+
+            const toSign = resultBuffer.subarray(0, idx);
+
+            return subtleCrypto.sign(
+                {name: 'HMAC'},
+                sha_key,
+                toSign,
+            ).then((hmac) => {
+                hmac = new Uint8Array(hmac);
+                resultBuffer.set(hmac, idx);
+                return packMegolmKeyFile(resultBuffer);
+            });
+        });
+    });
+}
+
+/**
+ * Derive the AES and SHA keys for the file
+ *
+ * @param {Unit8Array} salt  salt for pbkdf
+ * @param {Number} iterations number of pbkdf iterations
+ * @param {String} password  password
+ * @return {Promise<[CryptoKey, CryptoKey]>} promise for [aes key, sha key]
+ */
+function deriveKeys(salt, iterations, password) {
+    return subtleCrypto.importKey(
+        'raw',
+        new TextEncoder().encode(password),
+        {name: 'PBKDF2'},
+        false,
+        ['deriveBits']
+    ).then((key) => {
+        return subtleCrypto.deriveBits(
+            {
+                name: 'PBKDF2',
+                salt: salt,
+                iterations: iterations,
+                hash: 'SHA-512',
+            },
+            key,
+            512
+        );
+    }).then((keybits) => {
+        const aes_key = keybits.slice(0, 32);
+        const sha_key = keybits.slice(32);
+
+        const aes_prom = subtleCrypto.importKey(
+            'raw',
+            aes_key,
+            {name: 'AES-CTR'},
+            false,
+            ['encrypt', 'decrypt']
+        );
+        const sha_prom = subtleCrypto.importKey(
+            'raw',
+            sha_key,
+            {
+                name: 'HMAC',
+                hash: {name: 'SHA-256'},
+            },
+            false,
+            ['sign', 'verify']
+        );
+        return Promise.all([aes_prom, sha_prom]);
+    });
+}
+
+const HEADER_LINE = '-----BEGIN MEGOLM SESSION DATA-----';
+const TRAILER_LINE = '-----END MEGOLM SESSION DATA-----';
+
+/**
+ * Unbase64 an ascii-armoured megolm key file
+ *
+ * Strips the header and trailer lines, and unbase64s the content
+ *
+ * @param {ArrayBuffer} data  input file
+ * @return {Uint8Array} unbase64ed content
+ */
+function unpackMegolmKeyFile(data) {
+    // parse the file as a great big String. This should be safe, because there
+    // should be no non-ASCII characters, and it means that we can do string
+    // comparisons to find the header and footer, and feed it into window.atob.
+    const fileStr = new TextDecoder().decode(new Uint8Array(data));
+
+    // look for the start line
+    let lineStart = 0;
+    while (1) {
+        const lineEnd = fileStr.indexOf('\n', lineStart);
+        if (lineEnd < 0) {
+            throw new Error('Header line not found');
+        }
+        const line = fileStr.slice(lineStart, lineEnd).trim();
+
+        // start the next line after the newline
+        lineStart = lineEnd+1;
+
+        if (line === HEADER_LINE) {
+            break;
+        }
+    }
+
+    const dataStart = lineStart;
+
+    // look for the end line
+    while (1) {
+        const lineEnd = fileStr.indexOf('\n', lineStart);
+        const line = fileStr.slice(lineStart, lineEnd < 0 ? undefined : lineEnd)
+              .trim();
+        if (line === TRAILER_LINE) {
+            break;
+        }
+
+        if (lineEnd < 0) {
+            throw new Error('Trailer line not found');
+        }
+
+        // start the next line after the newline
+        lineStart = lineEnd+1;
+    }
+
+    const dataEnd = lineStart;
+    return decodeBase64(fileStr.slice(dataStart, dataEnd));
+}
+
+/**
+ * ascii-armour a  megolm key file
+ *
+ * base64s the content, and adds header and trailer lines
+ *
+ * @param {Uint8Array} data  raw data
+ * @return {ArrayBuffer} formatted file
+ */
+function packMegolmKeyFile(data) {
+    // we split into lines before base64ing, because encodeBase64 doesn't deal
+    // terribly well with large arrays.
+    const LINE_LENGTH = (72 * 4 / 3);
+    const nLines = Math.ceil(data.length / LINE_LENGTH);
+    const lines = new Array(nLines + 3);
+    lines[0] = HEADER_LINE;
+    let o = 0;
+    let i;
+    for (i = 1; i <= nLines; i++) {
+        lines[i] = encodeBase64(data.subarray(o, o+LINE_LENGTH));
+        o += LINE_LENGTH;
+    }
+    lines[i++] = TRAILER_LINE;
+    lines[i] = '';
+    return (new TextEncoder().encode(lines.join('\n'))).buffer;
+}
+
+/**
+ * Encode a typed array of uint8 as base64.
+ * @param {Uint8Array} uint8Array The data to encode.
+ * @return {string} The base64.
+ */
+function encodeBase64(uint8Array) {
+    // Misinterpt the Uint8Array as Latin-1.
+    // window.btoa expects a unicode string with codepoints in the range 0-255.
+    var latin1String = String.fromCharCode.apply(null, uint8Array);
+    // Use the builtin base64 encoder.
+    return window.btoa(latin1String);
+}
+
+/**
+ * Decode a base64 string to a typed array of uint8.
+ * @param {string} base64 The base64 to decode.
+ * @return {Uint8Array} The decoded data.
+ */
+function decodeBase64(base64) {
+    // window.atob returns a unicode string with codepoints in the range 0-255.
+    var latin1String = window.atob(base64);
+    // Encode the string as a Uint8Array
+    var uint8Array = new Uint8Array(latin1String.length);
+    for (var i = 0; i < latin1String.length; i++) {
+        uint8Array[i] = latin1String.charCodeAt(i);
+    }
+    return uint8Array;
+}
diff --git a/test/utils/MegolmExportEncryption-test.js b/test/utils/MegolmExportEncryption-test.js
new file mode 100644
index 0000000000..fa51d83c6d
--- /dev/null
+++ b/test/utils/MegolmExportEncryption-test.js
@@ -0,0 +1,115 @@
+/*
+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.
+*/
+
+"use strict";
+
+import * as MegolmExportEncryption from 'utils/MegolmExportEncryption';
+
+import * as testUtils from '../test-utils';
+import expect from 'expect';
+
+// polyfill textencoder if necessary
+let TextEncoder = window.TextEncoder;
+if (!TextEncoder) {
+    TextEncoder = require('utils/TextEncoderPolyfill');
+}
+
+const TEST_VECTORS=[
+    [
+        "plain",
+        "password",
+        "-----BEGIN MEGOLM SESSION DATA-----\nAXNhbHRzYWx0c2FsdHNhbHSIiIiIiIiIiIiIiIiIiIiIAAAACmIRUW2OjZ3L2l6j9h0lHlV3M2dx\ncissyYBxjsfsAndErh065A8=\n-----END MEGOLM SESSION DATA-----"
+    ],
+    [
+        "Hello, World",
+        "betterpassword",
+        "-----BEGIN MEGOLM SESSION DATA-----\nAW1vcmVzYWx0bW9yZXNhbHT//////////wAAAAAAAAAAAAAD6KyBpe1Niv5M5NPm4ZATsJo5nghk\nKYu63a0YQ5DRhUWEKk7CcMkrKnAUiZny\n-----END MEGOLM SESSION DATA-----"
+    ],
+    [
+        "alphanumericallyalphanumericallyalphanumericallyalphanumerically",
+        "SWORDFISH",
+        "-----BEGIN MEGOLM SESSION DATA-----\nAXllc3NhbHR5Z29vZG5lc3P//////////wAAAAAAAAAAAAAD6OIW+Je7gwvjd4kYrb+49gKCfExw\nMgJBMD4mrhLkmgAngwR1pHjbWXaoGybtiAYr0moQ93GrBQsCzPbvl82rZhaXO3iH5uHo/RCEpOqp\nPgg29363BGR+/Ripq/VCLKGNbw==\n-----END MEGOLM SESSION DATA-----"
+    ],
+    [
+        "alphanumericallyalphanumericallyalphanumericallyalphanumerically",
+        "passwordpasswordpasswordpasswordpasswordpasswordpasswordpasswordpasswordpasswordpasswordpasswordpasswordpasswordpasswordpasswordpasswordpasswordpasswordpasswordpasswordpasswordpasswordpasswordpasswordpasswordpasswordpasswordpasswordpasswordpasswordpassword",
+        "-----BEGIN MEGOLM SESSION DATA-----\nAf//////////////////////////////////////////AAAD6IAZJy7IQ7Y0idqSw/bmpngEEVVh\ngsH+8ptgqxw6ZVWQnohr8JsuwH9SwGtiebZuBu5smPCO+RFVWH2cQYslZijXv/BEH/txvhUrrtCd\nbWnSXS9oymiqwUIGs08sXI33ZA==\n-----END MEGOLM SESSION DATA-----"
+    ]
+]
+;
+
+function stringToArray(s) {
+    return new TextEncoder().encode(s).buffer;
+}
+
+describe('MegolmExportEncryption', function() {
+    beforeEach(function() {
+        testUtils.beforeEach(this);
+    });
+
+    describe('decrypt', function() {
+        it('should handle missing header', function() {
+            const input=stringToArray(`-----`);
+            expect(()=>{MegolmExportEncryption.decryptMegolmKeyFile(input, '')})
+                .toThrow('Header line not found');
+        });
+
+        it('should handle missing trailer', function() {
+            const input=stringToArray(`-----BEGIN MEGOLM SESSION DATA-----
+-----`);
+            expect(()=>{MegolmExportEncryption.decryptMegolmKeyFile(input, '')})
+                .toThrow('Trailer line not found');
+        });
+
+        it('should decrypt a range of inputs', function(done) {
+            function next(i) {
+                if (i >= TEST_VECTORS.length) {
+                    done();
+                    return;
+                }
+
+                const [plain, password, input] = TEST_VECTORS[i];
+                return MegolmExportEncryption.decryptMegolmKeyFile(
+                    stringToArray(input), password
+                ).then((decrypted) => {
+                    expect(decrypted).toEqual(plain);
+                    return next(i+1);
+                })
+            };
+            return next(0).catch(done);
+        });
+    });
+
+    describe('encrypt', function() {
+        it('should round-trip', function(done) {
+            const input =
+                  'words words many words in plain text here'.repeat(100);
+
+            const password = 'my super secret passphrase';
+
+            return MegolmExportEncryption.encryptMegolmKeyFile(
+                input, password, {kdf_rounds: 1000},
+            ).then((ciphertext) => {
+                return MegolmExportEncryption.decryptMegolmKeyFile(
+                    ciphertext, password
+                );
+            }).then((plaintext) => {
+                expect(plaintext).toEqual(input);
+                done();
+            }).catch(done);
+        });
+    });
+});
diff --git a/test/utils/generate-megolm-test-vectors.py b/test/utils/generate-megolm-test-vectors.py
new file mode 100755
index 0000000000..0ce5f5e4b3
--- /dev/null
+++ b/test/utils/generate-megolm-test-vectors.py
@@ -0,0 +1,117 @@
+#!/usr/bin/env python
+
+from __future__ import print_function
+
+import base64
+import json
+import struct
+
+from cryptography.hazmat import backends
+from cryptography.hazmat.primitives import ciphers, hashes, hmac
+from cryptography.hazmat.primitives.kdf import pbkdf2
+from cryptography.hazmat.primitives.ciphers import algorithms, modes
+
+backend = backends.default_backend()
+
+def parse_u128(s):
+    a, b = struct.unpack(">QQ", s)
+    return (a << 64) | b
+
+def encrypt_ctr(key, iv, plaintext, counter_bits=64):
+    alg = algorithms.AES(key)
+
+    # Some AES-CTR implementations treat some parts of the IV as a nonce (which
+    # remains constant throughought encryption), and some as a counter (which
+    # increments every block, ie 16 bytes, and wraps after a while).  Different
+    # implmententations use different amounts of the IV for each part.
+    #
+    # The python cryptography library uses the whole IV as a counter; to make
+    # it match other implementations with a given counter size, we manually
+    # implement wrapping the counter.
+
+    # number of AES blocks between each counter wrap
+    limit = 1 << counter_bits
+
+    # parse IV as a 128-bit int
+    parsed_iv = parse_u128(iv)
+
+    # split IV into counter and nonce
+    counter = parsed_iv & (limit - 1)
+    nonce = parsed_iv & ~(limit - 1)
+
+    # encrypt up to the first counter wraparound
+    size = 16 * (limit - counter)
+    encryptor = ciphers.Cipher(
+        alg,
+        modes.CTR(iv),
+        backend=backend
+    ).encryptor()
+    input = plaintext[:size]
+    result = encryptor.update(input) + encryptor.finalize()
+    offset = size
+
+    # do remaining data starting with a counter of zero
+    iv = struct.pack(">QQ", nonce >> 64, nonce & ((1 << 64) - 1))
+    size = 16 * limit
+
+    while offset < len(plaintext):
+        encryptor = ciphers.Cipher(
+            alg,
+            modes.CTR(iv),
+            backend=backend
+        ).encryptor()
+        input = plaintext[offset:offset+size]
+        result += encryptor.update(input) + encryptor.finalize()
+        offset += size
+
+    return result
+
+def hmac_sha256(key, message):
+     h = hmac.HMAC(key, hashes.SHA256(), backend=backend)
+     h.update(message)
+     return h.finalize()
+
+def encrypt(key, iv, salt, plaintext, iterations=1000):
+    """
+    Returns:
+       (bytes) ciphertext
+    """
+    if len(salt) != 16:
+        raise Exception("Expected 128 bits of salt - got %i bits" % len((salt) * 8))
+    if len(iv) != 16:
+        raise Exception("Expected 128 bits of IV - got %i bits" % (len(iv) * 8))
+
+    sha = hashes.SHA512()
+    kdf = pbkdf2.PBKDF2HMAC(sha, 64, salt, iterations, backend)
+    k = kdf.derive(key)
+
+    aes_key = k[0:32]
+    sha_key = k[32:]
+
+    packed_file = (
+        b"\x01"     # version
+        + salt
+        + iv
+        + struct.pack(">L", iterations)
+        + encrypt_ctr(aes_key, iv, plaintext)
+    )
+    packed_file += hmac_sha256(sha_key, packed_file)
+
+    return (
+        b"-----BEGIN MEGOLM SESSION DATA-----\n" +
+        base64.encodestring(packed_file) +
+        b"-----END MEGOLM SESSION DATA-----"
+    )
+
+def gen(password, iv, salt, plaintext, iterations=1000):
+    ciphertext = encrypt(
+        password.encode('utf-8'), iv, salt, plaintext.encode('utf-8'), iterations
+    )
+    return (plaintext, password, ciphertext.decode('utf-8'))
+
+print (json.dumps([
+    gen("password", b"\x88"*16, b"saltsaltsaltsalt", "plain", 10),
+    gen("betterpassword", b"\xFF"*8 + b"\x00"*8, b"moresaltmoresalt", "Hello, World"),
+    gen("SWORDFISH", b"\xFF"*8 + b"\x00"*8, b"yessaltygoodness", "alphanumerically" * 4),
+    gen("password"*32, b"\xFF"*16, b"\xFF"*16, "alphanumerically" * 4),
+], indent=4))

From d63f7e83599937a8b9e5dbff638b0a93efa7fafa Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Sat, 14 Jan 2017 01:21:26 +0000
Subject: [PATCH 143/289] Expose megolm import/export via the devtools

---
 src/index.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/index.js b/src/index.js
index 4b920d95d4..5d4145a39b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -28,3 +28,27 @@ module.exports.getComponent = function(componentName) {
     return Skinner.getComponent(componentName);
 };
 
+
+/* hacky functions for megolm import/export until we give it a UI */
+import * as MegolmExportEncryption from './utils/MegolmExportEncryption';
+import MatrixClientPeg from './MatrixClientPeg';
+
+window.exportKeys = function(password) {
+    return MatrixClientPeg.get().exportRoomKeys().then((k) => {
+        return MegolmExportEncryption.encryptMegolmKeyFile(
+            JSON.stringify(k), password
+        );
+    }).then((f) => {
+        console.log(new TextDecoder().decode(new Uint8Array(f)));
+    }).done();
+};
+
+window.importKeys = function(password, data) {
+    const arrayBuffer = new TextEncoder().encode(data).buffer;
+    return MegolmExportEncryption.decryptMegolmKeyFile(
+        arrayBuffer, password
+    ).then((j) => {
+        const k = JSON.parse(j);
+        return MatrixClientPeg.get().importRoomKeys(k);
+    });
+};

From e37bf6b7be824caade5019da1bc1a4b92c9d6114 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Sat, 14 Jan 2017 01:41:48 +0000
Subject: [PATCH 144/289] Skip crypto tests on PhantomJS

---
 test/utils/MegolmExportEncryption-test.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/test/utils/MegolmExportEncryption-test.js b/test/utils/MegolmExportEncryption-test.js
index fa51d83c6d..db38a931ed 100644
--- a/test/utils/MegolmExportEncryption-test.js
+++ b/test/utils/MegolmExportEncryption-test.js
@@ -56,6 +56,13 @@ function stringToArray(s) {
 }
 
 describe('MegolmExportEncryption', function() {
+    before(function() {
+        // if we don't have subtlecrypto, go home now
+        if (!window.crypto.subtle && !window.crypto.webkitSubtle) {
+            this.skip();
+        }
+    })
+
     beforeEach(function() {
         testUtils.beforeEach(this);
     });

From fb68fff536a9dec35d8cf14c786b93e2d8f471ff Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Mon, 16 Jan 2017 13:45:42 +0100
Subject: [PATCH 145/289] Refactor renderCommaSeparated for reuse

---
 .../views/elements/MemberEventListSummary.js  | 21 +++++++------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index ab4a89eb69..975e2aebf3 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -56,17 +56,8 @@ module.exports = React.createClass({
         if (users.length === 0) {
             return null;
         }
-        let originalNumber = users.length;
 
-        users = users.slice(0, this.props.summaryLength);
-
-        let remaining = originalNumber - this.props.summaryLength;
-        if (remaining < 0) {
-            remaining = 0;
-        }
-        let other = " other" + (remaining > 1 ? "s" : "");
-
-        return this._renderCommaSeparatedList(users, remaining) + (remaining ? ' and ' + remaining + other : '');
+        return this._renderCommaSeparatedList(users, this.props.summaryLength);
     },
 
     // Test whether the first n items repeat for the duration
@@ -81,14 +72,16 @@ module.exports = React.createClass({
         return true;
     },
 
-    _renderCommaSeparatedList(items, disableAnd) {
-        if (disableAnd) {
-            return items.join(', ');
-        }
+    _renderCommaSeparatedList(items, itemLimit) {
+        const remaining = itemLimit === undefined ? 0 : Math.max(items.length - itemLimit, 0);
         if (items.length === 0) {
             return "";
         } else if (items.length === 1) {
             return items[0];
+        } else if (remaining) {
+            items = items.slice(0, itemLimit);
+            const other = " other" + (remaining > 1 ? "s" : "");
+            return items.join(', ') + ' and ' + remaining + other;
         } else {
             let last = items.pop();
             return items.join(', ') + ' and ' + last;

From 3679e470028137da21782b8d248cb8af78d2a846 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 16 Jan 2017 13:19:24 +0000
Subject: [PATCH 146/289] js-sdk 0.7.4

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

diff --git a/package.json b/package.json
index 491dcb30b9..c30cf0da7a 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
     "linkifyjs": "^2.1.3",
     "lodash": "^4.13.1",
     "marked": "^0.3.5",
-    "matrix-js-sdk": "0.7.4-rc.1",
+    "matrix-js-sdk": "0.7.4",
     "optimist": "^0.6.1",
     "q": "^1.4.1",
     "react": "^15.4.0",

From 834c8d0890524a8ea2d40d3ed2f4b71f169adbfb Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 16 Jan 2017 13:21:34 +0000
Subject: [PATCH 147/289] Prepare changelog for v0.8.5

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3c7d0930b7..4f1e33e61c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+Changes in [0.8.5](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.8.5) (2017-01-16)
+===================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.8.5-rc.1...v0.8.5)
+
+ * Pull in newer matrix-js-sdk for video calling fix
+
 Changes in [0.8.5-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.8.5-rc.1) (2017-01-13)
 =============================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.8.4...v0.8.5-rc.1)

From a9256b0ab1f546fe9f60c791439e2b81f1bb0f60 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 16 Jan 2017 13:21:34 +0000
Subject: [PATCH 148/289] v0.8.5

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

diff --git a/package.json b/package.json
index c30cf0da7a..34e22d7c70 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "0.8.5-rc.1",
+  "version": "0.8.5",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {

From 1d5112db5d6cc568713f5d81456dd4a0af399e60 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 16 Jan 2017 13:22:57 +0000
Subject: [PATCH 149/289] Back to develop js-sdk

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

diff --git a/package.json b/package.json
index 34e22d7c70..47d6c9aced 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
     "linkifyjs": "^2.1.3",
     "lodash": "^4.13.1",
     "marked": "^0.3.5",
-    "matrix-js-sdk": "0.7.4",
+    "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
     "optimist": "^0.6.1",
     "q": "^1.4.1",
     "react": "^15.4.0",

From 82d6805a718f4e7f1616c7552dae85e968091c74 Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Mon, 16 Jan 2017 14:49:07 +0100
Subject: [PATCH 150/289] Canonicalise certain transition pairs, handle
 arbitrary consecutive transitions

Transition pairs joined,left and left,joined are now transformed into single meta-transitions "joined_and_left" and "left_and_joined" respectively. These are described as "joined and left", "left and rejoined".

Treat consecutive sequences of transitions as repetitions, and handle any arbitrary repetitions of transitions:

...,joined,left,joined,left,joined,left,...

is canonicalised into
...,joined_and_left, joined_and_left, joined_and_left,...

which is truncated and described as
... , joined and left 3 times, ...

This also works if there are multiple consecutive sequences separated by other transitions:

..., banned, banned, banned, joined, unbanned, unbanned, unbanned,...

becomes
... was banned 3 times, joined, was unbanned 3 times ...
---
 .../views/elements/MemberEventListSummary.js  | 113 ++++++++++++------
 1 file changed, 78 insertions(+), 35 deletions(-)

diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index 975e2aebf3..dc16127017 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -88,62 +88,105 @@ module.exports = React.createClass({
         }
     },
 
-    _getDescriptionForTransition(t, plural) {
+    _getDescriptionForTransition(t, plural, repeats) {
         let beConjugated = plural ? "were" : "was";
         let invitation = plural ? "invitations" : "an invitation";
 
-        switch (t) {
-            case 'joined':  return "joined";
-            case 'left':    return "left";
-            case 'invite_reject':     return "rejected " + invitation;
-            case 'invite_withdrawal': return "withdrew " + invitation;
-            case 'invited':     return beConjugated + " invited";
-            case 'banned':      return beConjugated + " banned";
-            case 'unbanned':    return beConjugated + " unbanned";
-            case 'kicked':      return beConjugated + " kicked";
+        let res = null;
+        let map = {
+            "joined": "joined",
+            "left": "left",
+            "joined_and_left": "joined and left",
+            "left_and_joined": "left and rejoined",
+            "invite_reject": "rejected " + invitation,
+            "invite_withdrawal": "withdrew " + invitation,
+            "invited": beConjugated + " invited",
+            "banned": beConjugated + " banned",
+            "unbanned": beConjugated + " unbanned",
+            "kicked": beConjugated + " kicked",
+        };
+
+        if (Object.keys(map).includes(t)) {
+            res = map[t] + (repeats > 1 ? " " + repeats + " times" : "" );
         }
 
-        return null;
+        return res;
+    },
+
+    _getCanonicalTransitions: function(transitions) {
+        let modMap = {
+            'joined' : {
+                'after' : 'left',
+                'newTransition' : 'joined_and_left',
+            },
+            'left' : {
+                'after' : 'joined',
+                'newTransition' : 'left_and_joined',
+            },
+            // $currentTransition : {
+            //     'after' : $nextTransition,
+            //     'newTransition' : 'new_transition_type',
+            // },
+        };
+        const res = [];
+
+        for (let i = 0; i < transitions.length; i++) {
+            let t = transitions[i];
+            let t2 = transitions[i + 1];
+
+            let transition = t;
+
+            if (i < transitions.length - 1 && modMap[t] && modMap[t].after === t2) {
+                transition = modMap[t].newTransition;
+                i++;
+            }
+
+            res.push(transition);
+        }
+        return res;
+    },
+
+    _getTruncatedTransitions: function(transitions) {
+        let res = [];
+        for (let i = 0; i < transitions.length; i++) {
+            if (res.length > 0 && res[res.length - 1].transitionType === transitions[i]) {
+                res[res.length - 1].repeats += 1;
+            } else {
+                res.push({
+                    transitionType: transitions[i],
+                    repeats: 1,
+                });
+            }
+        }
+        // returns [{
+        //     transitionType: "joined_and_left"
+        //     repeats: 123
+        // }, ... ]
+        return res;
     },
 
     _renderSummary: function(eventAggregates) {
         let summaries = Object.keys(eventAggregates).map((transitions) => {
             let nameList = this._renderNameList(eventAggregates[transitions]);
+            let plural = eventAggregates[transitions].length > 1;
 
             let repeats = 1;
             let repeatExtra = 0;
 
             let splitTransitions = transitions.split(',');
-            let describedTransitions = splitTransitions;
-            let plural = eventAggregates[transitions].length > 1;
 
-            for (let modulus = 1; modulus <= 2; modulus++) {
-                // Sequences that are repeating through modulus transitions will be truncated
-                if (this._isRepeatedSequence(describedTransitions, modulus)) {
-                    // Extra repeating sequence on the end that should be treated separately
-                    // so as to avoid j,l,j,l,j => "... joined and left 2.5 times"
-                    repeatExtra = describedTransitions.length % modulus;
+            // Some pairs of transitions are common and are repeated a lot, so canonicalise them into "pair" transitions
+            let canonicalTransitions = this._getCanonicalTransitions(splitTransitions);
+            // Remove consecutive repetitions of the same transition (like 5 consecutive 'join_and_leave's)
+            let truncatedTransitions = this._getTruncatedTransitions(canonicalTransitions);
 
-                    repeats = (describedTransitions.length - repeatExtra) / modulus;
-                    describedTransitions = describedTransitions.slice(0, modulus);
-                    break;
-                }
-            }
-
-            let numberOfTimes = repeats > 1 ? " " + repeats + " times" : "";
-
-            let descs = describedTransitions.map((t) => {
-                return this._getDescriptionForTransition(t, plural);
-            });
-
-            let afterRepeatDescs = splitTransitions.slice(splitTransitions.length - repeatExtra).map((t) => {
-                return this._getDescriptionForTransition(t, plural);
+            let descs = truncatedTransitions.map((t) => {
+                return this._getDescriptionForTransition(t.transitionType, plural, t.repeats);
             });
 
             let desc = this._renderCommaSeparatedList(descs);
-            let afterRepeatDesc = this._renderCommaSeparatedList(afterRepeatDescs);
 
-            return nameList + " " + desc + numberOfTimes + (afterRepeatDesc ? " and then " + afterRepeatDesc : "");
+            return nameList + " " + desc;
         });
 
         if (!summaries) {

From 4be444d52482883b4b87d6fc5cac851626b4cb50 Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Mon, 16 Jan 2017 15:12:00 +0100
Subject: [PATCH 151/289] Move shouldComponentUpdate

---
 .../views/elements/MemberEventListSummary.js  | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index dc16127017..5474865117 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -46,6 +46,19 @@ module.exports = React.createClass({
         };
     },
 
+    shouldComponentUpdate: function(nextProps, nextState) {
+        // Update if
+        //  - The number of summarised events has changed
+        //  - or if the summary is currently expanded
+        //  - or if the summary is about to toggle to become collapsed
+        //  - or if there are fewEvents, meaning the child eventTiles are shown as-is
+        return (
+            nextProps.events.length !== this.props.events.length ||
+            this.state.expanded || nextState.expanded ||
+            nextProps.events.length < this.props.threshold
+        );
+    },
+
     _toggleSummary: function() {
         this.setState({
             expanded: !this.state.expanded,
@@ -214,19 +227,6 @@ module.exports = React.createClass({
         );
     },
 
-    shouldComponentUpdate: function(nextProps, nextState) {
-        // Update if
-        //  - The number of summarised events has changed
-        //  - or if the summary is currently expanded
-        //  - or if the summary is about to toggle to become collapsed
-        //  - or if there are fewEvents, meaning the child eventTiles are shown as-is
-        return (
-            nextProps.events.length !== this.props.events.length ||
-            this.state.expanded || nextState.expanded ||
-            nextProps.events.length < this.props.threshold
-        );
-    },
-
     _getTransition: function(e) {
         switch (e.getContent().membership) {
             case 'invite': return 'invited';

From ac22803ba004b519d88a16a37487efb833575ce9 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Mon, 16 Jan 2017 17:01:26 +0000
Subject: [PATCH 152/289] Allow Modal to be used with async-loaded components

Add Modal.createDialogAsync, which can be used to display asynchronously-loaded
React components. Also make EncryptedEventDialog use it as a handy
demonstration.
---
 src/Modal.js                                  | 73 ++++++++++++++++++-
 .../views/dialogs/EncryptedEventDialog.js     |  0
 src/component-index.js                        |  2 -
 src/components/views/rooms/EventTile.js       |  5 +-
 4 files changed, 74 insertions(+), 6 deletions(-)
 rename src/{components => async-components}/views/dialogs/EncryptedEventDialog.js (100%)

diff --git a/src/Modal.js b/src/Modal.js
index 44072b9278..c2ce04c4e8 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -19,6 +19,53 @@ limitations under the License.
 
 var React = require('react');
 var ReactDOM = require('react-dom');
+import sdk from './index';
+
+/**
+ * Wrap an asynchronous loader function with a react component which shows a
+ * spinner until the real component loads.
+ */
+const AsyncWrapper = React.createClass({
+    propTypes: {
+        /** A function which takes a 'callback' argument which it will call
+         * with the real component once it loads.
+         */
+        loader: React.PropTypes.func.isRequired,
+    },
+
+    getInitialState: function() {
+        return {
+            component: null,
+        }
+    },
+
+    componentWillMount: function() {
+        this._unmounted = false;
+        this.props.loader((e) => {
+            if (this._unmounted) {
+                return;
+            }
+            this.setState({component: e});
+        });
+    },
+
+    componentWillUnmount: function() {
+        this._unmounted = true;
+    },
+
+    render: function() {
+        const {loader, ...otherProps} = this.props;
+
+        if (this.state.component) {
+            const Component = this.state.component;
+            return <Component {...otherProps} />;
+        } else {
+            // show a spinner until the component is loaded.
+            const Spinner = sdk.getComponent("elements.Spinner");
+            return <Spinner />;
+        }
+    },
+});
 
 module.exports = {
     DialogContainerId: "mx_Dialog_Container",
@@ -36,8 +83,30 @@ module.exports = {
     },
 
     createDialog: function (Element, props, className) {
-        var self = this;
+        return this.createDialogAsync((cb) => {cb(Element)}, props, className);
+    },
 
+    /**
+     * Open a modal view.
+     *
+     * This can be used to display a react component which is loaded as an asynchronous
+     * webpack component. To do this, set 'loader' as:
+     *
+     *   (cb) => {
+     *       require(['<module>'], cb);
+     *   }
+     *
+     * @param {Function} loader   a function which takes a 'callback' argument,
+     *   which it should call with a React component which will be displayed as
+     *   the modal view.
+     *
+     * @param {Object} props   properties to pass to the displayed
+     *    component. (We will also pass an 'onFinished' property.)
+     *
+     * @param {String} className   CSS class to apply to the modal wrapper
+     */
+    createDialogAsync: function (loader, props, className) {
+        var self = this;
         // never call this via modal.close() from onFinished() otherwise it will loop
         var closeDialog = function() {
             if (props && props.onFinished) props.onFinished.apply(null, arguments);
@@ -49,7 +118,7 @@ module.exports = {
         var dialog = (
             <div className={"mx_Dialog_wrapper " + className}>
                 <div className="mx_Dialog">
-                    <Element {...props} onFinished={closeDialog}/>
+                     <AsyncWrapper loader={loader} {...props} onFinished={closeDialog}/>
                 </div>
                 <div className="mx_Dialog_background" onClick={ closeDialog.bind(this, false) }></div>
             </div>
diff --git a/src/components/views/dialogs/EncryptedEventDialog.js b/src/async-components/views/dialogs/EncryptedEventDialog.js
similarity index 100%
rename from src/components/views/dialogs/EncryptedEventDialog.js
rename to src/async-components/views/dialogs/EncryptedEventDialog.js
diff --git a/src/component-index.js b/src/component-index.js
index bc3d698cac..e83de8739d 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -75,8 +75,6 @@ import views$dialogs$ChatInviteDialog from './components/views/dialogs/ChatInvit
 views$dialogs$ChatInviteDialog && (module.exports.components['views.dialogs.ChatInviteDialog'] = views$dialogs$ChatInviteDialog);
 import views$dialogs$DeactivateAccountDialog from './components/views/dialogs/DeactivateAccountDialog';
 views$dialogs$DeactivateAccountDialog && (module.exports.components['views.dialogs.DeactivateAccountDialog'] = views$dialogs$DeactivateAccountDialog);
-import views$dialogs$EncryptedEventDialog from './components/views/dialogs/EncryptedEventDialog';
-views$dialogs$EncryptedEventDialog && (module.exports.components['views.dialogs.EncryptedEventDialog'] = views$dialogs$EncryptedEventDialog);
 import views$dialogs$ErrorDialog from './components/views/dialogs/ErrorDialog';
 views$dialogs$ErrorDialog && (module.exports.components['views.dialogs.ErrorDialog'] = views$dialogs$ErrorDialog);
 import views$dialogs$InteractiveAuthDialog from './components/views/dialogs/InteractiveAuthDialog';
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 42dbe78630..d5a2acfdd6 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -366,10 +366,11 @@ module.exports = WithMatrixClient(React.createClass({
     },
 
     onCryptoClicked: function(e) {
-        var EncryptedEventDialog = sdk.getComponent("dialogs.EncryptedEventDialog");
         var event = this.props.mxEvent;
 
-        Modal.createDialog(EncryptedEventDialog, {
+        Modal.createDialogAsync((cb) => {
+            require(['../../../async-components/views/dialogs/EncryptedEventDialog'], cb)
+        }, {
             event: event,
         });
     },

From f168f9cd063c2597878fb11d7e3c75c8d389d574 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Mon, 16 Jan 2017 17:25:44 +0000
Subject: [PATCH 153/289] Fix vector-im/riot-web#2833 : Fail nicely when people
 try to register numeric user IDs

---
 src/Signup.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/Signup.js b/src/Signup.js
index f148ac2419..5d1c7062d5 100644
--- a/src/Signup.js
+++ b/src/Signup.js
@@ -203,7 +203,19 @@ class Register extends Signup {
                 } else if (error.errcode == 'M_INVALID_USERNAME') {
                     throw new Error("User names may only contain alphanumeric characters, underscores or dots!");
                 } else if (error.httpStatus >= 400 && error.httpStatus < 500) {
-                    throw new Error(`Registration failed! (${error.httpStatus})`);
+                    let msg = null;
+                    if (error.message) {
+                        msg = error.message;
+                    }
+                    else if (error.errcode) {
+                        msg = error.errcode;
+                    }
+                    if (msg) {
+                        throw new Error(`Registration failed! (${error.httpStatus}) - ${msg}`);
+                    }
+                    else {
+                        throw new Error(`Registration failed! (${error.httpStatus}) - That's all we know.`);
+                    }
                 } else if (error.httpStatus >= 500 && error.httpStatus < 600) {
                     throw new Error(
                         `Server error during registration! (${error.httpStatus})`

From a79dc886ba5a146633aaf478587efb6ea35d1c90 Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Mon, 16 Jan 2017 18:46:17 +0100
Subject: [PATCH 154/289] Order sequences by occurance of the first event in
 each sequence

---
 .../views/elements/MemberEventListSummary.js  | 44 ++++++++++++++-----
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index 5474865117..7adc4c2f85 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -178,8 +178,8 @@ module.exports = React.createClass({
         return res;
     },
 
-    _renderSummary: function(eventAggregates) {
-        let summaries = Object.keys(eventAggregates).map((transitions) => {
+    _renderSummary: function(eventAggregates, orderedTransitionSequences) {
+        let summaries = orderedTransitionSequences.map((transitions) => {
             let nameList = this._renderNameList(eventAggregates[transitions]);
             let plural = eventAggregates[transitions].length > 1;
 
@@ -228,18 +228,18 @@ module.exports = React.createClass({
     },
 
     _getTransition: function(e) {
-        switch (e.getContent().membership) {
+        switch (e.mxEvent.getContent().membership) {
             case 'invite': return 'invited';
             case 'ban': return 'banned';
             case 'join': return 'joined';
             case 'leave':
-                if (e.getSender() === e.getStateKey()) {
-                    switch (e.getPrevContent().membership) {
+                if (e.mxEvent.getSender() === e.mxEvent.getStateKey()) {
+                    switch (e.mxEvent.getPrevContent().membership) {
                         case 'invite':  return 'invite_reject';
                         default:        return 'left';
                     }
                 }
-                switch (e.getPrevContent().membership) {
+                switch (e.mxEvent.getPrevContent().membership) {
                     case 'invite':  return 'invite_withdrawal';
                     case 'ban':     return 'unbanned';
                     case 'join':    return 'kicked';
@@ -276,44 +276,64 @@ module.exports = React.createClass({
             // $userId : []
         };
 
-        eventsToRender.forEach((e) => {
+        eventsToRender.forEach((e, index) => {
             const userId = e.getStateKey();
             // Initialise a user's events
             if (!userEvents[userId]) {
                 userEvents[userId] = [];
             }
-            userEvents[userId].push(e);
+            userEvents[userId].push({
+                mxEvent: e,
+                displayName: e.getContent().displayname || userId,
+                index: index,
+            });
         });
 
-        // A map of agregate type to arrays of display names. Each aggregate type
+        // A map of aggregate type to arrays of display names. Each aggregate type
         // is a comma-delimited string of transitions, e.g. "joined,left,kicked".
         // The array of display names is the array of users who went through that
         // sequence during eventsToRender.
         let aggregate = {
             // $aggregateType : []:string
         };
+        // A map of aggregate types to the indices that order them (the index of
+        // the first event for a given transition sequence)
+        let aggregateIndices = {
+            // $aggregateType : int
+        };
+
         let avatarMembers = [];
 
         let users = Object.keys(userEvents);
         users.forEach(
             (userId) => {
-                let displayName = userEvents[userId][0].getContent().displayname || userId;
+                let firstEvent = userEvents[userId][0];
+                let displayName = firstEvent.displayName;
 
                 let seq = this._getTransitionSequence(userEvents[userId]);
                 if (!aggregate[seq]) {
                     aggregate[seq] = [];
+                    aggregateIndices[seq] = -1;
                 }
 
                 // Assumes display names are unique
                 if (aggregate[seq].indexOf(displayName) === -1) {
                     aggregate[seq].push(displayName);
                 }
-                avatarMembers.push(userEvents[userId][0].target);
+
+                if (aggregateIndices[seq] === -1 || firstEvent.index < aggregateIndices[seq]) {
+                    aggregateIndices[seq] = firstEvent.index;
+                }
+
+                avatarMembers.push(firstEvent.mxEvent.target);
             }
         );
 
+        // Sort types by order of lowest event index within sequence
+        let orderedTransitionSequences = Object.keys(aggregate).sort((seq1, seq2) => aggregateIndices[seq1] > aggregateIndices[seq2]);
+
         let avatars = this._renderAvatars(avatarMembers);
-        let summary = this._renderSummary(aggregate);
+        let summary = this._renderSummary(aggregate, orderedTransitionSequences);
         let toggleButton = (
             <a className="mx_MemberEventListSummary_toggle" onClick={this._toggleSummary}>
                 {expanded ? 'collapse' : 'expand'}

From 5ab287fa1ad1f2f5456bf160b988a15b4d882a4c Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Mon, 16 Jan 2017 18:57:49 +0100
Subject: [PATCH 155/289] Use pre-calculated displaynames to handle dupes

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

diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index 7adc4c2f85..425404dab9 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -284,7 +284,7 @@ module.exports = React.createClass({
             }
             userEvents[userId].push({
                 mxEvent: e,
-                displayName: e.getContent().displayname || userId,
+                displayName: e.target.name || userId,
                 index: index,
             });
         });

From aa6e168505ef139c67d66270bf69cf3750a7e85e Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Mon, 16 Jan 2017 18:58:53 +0100
Subject: [PATCH 156/289] Remove comment

---
 src/components/views/elements/MemberEventListSummary.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index 425404dab9..e9ec793953 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -316,7 +316,6 @@ module.exports = React.createClass({
                     aggregateIndices[seq] = -1;
                 }
 
-                // Assumes display names are unique
                 if (aggregate[seq].indexOf(displayName) === -1) {
                     aggregate[seq].push(displayName);
                 }

From 09ce74cc767a5f98021f5980ce7f4e2b2aece7c4 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Mon, 16 Jan 2017 18:44:46 +0000
Subject: [PATCH 157/289] Fix a couple of minor review comments

---
 src/utils/MegolmExportEncryption.js | 20 ++++++++++----------
 src/utils/TextEncoderPolyfill.js    | 12 ++++++------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/utils/MegolmExportEncryption.js b/src/utils/MegolmExportEncryption.js
index 5b2e16ef29..351f58aaa6 100644
--- a/src/utils/MegolmExportEncryption.js
+++ b/src/utils/MegolmExportEncryption.js
@@ -60,12 +60,12 @@ export function decryptMegolmKeyFile(data, password) {
     const hmac = body.subarray(-32);
 
     return deriveKeys(salt, iterations, password).then((keys) => {
-        const [aes_key, sha_key] = keys;
+        const [aes_key, hmac_key] = keys;
 
         const toVerify = body.subarray(0, -32);
         return subtleCrypto.verify(
             {name: 'HMAC'},
-            sha_key,
+            hmac_key,
             hmac,
             toVerify,
         ).then((isValid) => {
@@ -109,7 +109,7 @@ export function encryptMegolmKeyFile(data, password, options) {
     window.crypto.getRandomValues(iv);
 
     return deriveKeys(salt, kdf_rounds, password).then((keys) => {
-        const [aes_key, sha_key] = keys;
+        const [aes_key, hmac_key] = keys;
 
         return subtleCrypto.encrypt(
             {
@@ -137,7 +137,7 @@ export function encryptMegolmKeyFile(data, password, options) {
 
             return subtleCrypto.sign(
                 {name: 'HMAC'},
-                sha_key,
+                hmac_key,
                 toSign,
             ).then((hmac) => {
                 hmac = new Uint8Array(hmac);
@@ -149,12 +149,12 @@ export function encryptMegolmKeyFile(data, password, options) {
 }
 
 /**
- * Derive the AES and SHA keys for the file
+ * Derive the AES and HMAC-SHA-256 keys for the file
  *
  * @param {Unit8Array} salt  salt for pbkdf
  * @param {Number} iterations number of pbkdf iterations
  * @param {String} password  password
- * @return {Promise<[CryptoKey, CryptoKey]>} promise for [aes key, sha key]
+ * @return {Promise<[CryptoKey, CryptoKey]>} promise for [aes key, hmac key]
  */
 function deriveKeys(salt, iterations, password) {
     return subtleCrypto.importKey(
@@ -176,7 +176,7 @@ function deriveKeys(salt, iterations, password) {
         );
     }).then((keybits) => {
         const aes_key = keybits.slice(0, 32);
-        const sha_key = keybits.slice(32);
+        const hmac_key = keybits.slice(32);
 
         const aes_prom = subtleCrypto.importKey(
             'raw',
@@ -185,9 +185,9 @@ function deriveKeys(salt, iterations, password) {
             false,
             ['encrypt', 'decrypt']
         );
-        const sha_prom = subtleCrypto.importKey(
+        const hmac_prom = subtleCrypto.importKey(
             'raw',
-            sha_key,
+            hmac_key,
             {
                 name: 'HMAC',
                 hash: {name: 'SHA-256'},
@@ -195,7 +195,7 @@ function deriveKeys(salt, iterations, password) {
             false,
             ['sign', 'verify']
         );
-        return Promise.all([aes_prom, sha_prom]);
+        return Promise.all([aes_prom, hmac_prom]);
     });
 }
 
diff --git a/src/utils/TextEncoderPolyfill.js b/src/utils/TextEncoderPolyfill.js
index 2da09710f2..41ee4782a9 100644
--- a/src/utils/TextEncoderPolyfill.js
+++ b/src/utils/TextEncoderPolyfill.js
@@ -61,16 +61,16 @@ export default class TextEncoder {
                 outU8Array[outIdx++] = u;
             } else if (u <= 0x7FF) {
                 outU8Array[outIdx++] = 0xC0 | (u >> 6);
-                outU8Array[outIdx++] = 0x80 | (u & 63);
+                outU8Array[outIdx++] = 0x80 | (u & 0x3F);
             } else if (u <= 0xFFFF) {
                 outU8Array[outIdx++] = 0xE0 | (u >> 12);
-                outU8Array[outIdx++] = 0x80 | ((u >> 6) & 63);
-                outU8Array[outIdx++] = 0x80 | (u & 63);
+                outU8Array[outIdx++] = 0x80 | ((u >> 6) & 0x3F);
+                outU8Array[outIdx++] = 0x80 | (u & 0x3F);
             } else {
                 outU8Array[outIdx++] = 0xF0 | (u >> 18);
-                outU8Array[outIdx++] = 0x80 | ((u >> 12) & 63);
-                outU8Array[outIdx++] = 0x80 | ((u >> 6) & 63);
-                outU8Array[outIdx++] = 0x80 | (u & 63);
+                outU8Array[outIdx++] = 0x80 | ((u >> 12) & 0x3F);
+                outU8Array[outIdx++] = 0x80 | ((u >> 6) & 0x3F);
+                outU8Array[outIdx++] = 0x80 | (u & 0x3F);
             }
         }
         return outU8Array;

From 4f860b4c6dc42f7783c0e61611eb76462850ccd4 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Tue, 17 Jan 2017 10:50:44 +0000
Subject: [PATCH 158/289] Review comments: If-statement style

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

diff --git a/src/Signup.js b/src/Signup.js
index 5d1c7062d5..d3643bd749 100644
--- a/src/Signup.js
+++ b/src/Signup.js
@@ -206,14 +206,12 @@ class Register extends Signup {
                     let msg = null;
                     if (error.message) {
                         msg = error.message;
-                    }
-                    else if (error.errcode) {
+                    } else if (error.errcode) {
                         msg = error.errcode;
                     }
                     if (msg) {
                         throw new Error(`Registration failed! (${error.httpStatus}) - ${msg}`);
-                    }
-                    else {
+                    } else {
                         throw new Error(`Registration failed! (${error.httpStatus}) - That's all we know.`);
                     }
                 } else if (error.httpStatus >= 500 && error.httpStatus < 600) {

From 45655f4de3611ce9391175abc22988d719cbf8ec Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Tue, 17 Jan 2017 12:01:19 +0100
Subject: [PATCH 159/289] Modified desc for invitation rejections, withdrawals

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

diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index e9ec793953..1f05ba000e 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -103,7 +103,7 @@ module.exports = React.createClass({
 
     _getDescriptionForTransition(t, plural, repeats) {
         let beConjugated = plural ? "were" : "was";
-        let invitation = plural ? "invitations" : "an invitation";
+        let invitation = "their invitation" + (plural || (repeats > 1) ? "s" : "");
 
         let res = null;
         let map = {
@@ -112,7 +112,7 @@ module.exports = React.createClass({
             "joined_and_left": "joined and left",
             "left_and_joined": "left and rejoined",
             "invite_reject": "rejected " + invitation,
-            "invite_withdrawal": "withdrew " + invitation,
+            "invite_withdrawal": "had " + invitation + " withdrawn",
             "invited": beConjugated + " invited",
             "banned": beConjugated + " banned",
             "unbanned": beConjugated + " unbanned",

From ade7c65617cb43bf654f3421a64a75afbc0f393e Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Tue, 17 Jan 2017 12:01:54 +0100
Subject: [PATCH 160/289] Add test for MemberEventListSummary

---
 .../elements/MemberEventListSummary-test.js   | 556 ++++++++++++++++++
 1 file changed, 556 insertions(+)
 create mode 100644 test/components/views/elements/MemberEventListSummary-test.js

diff --git a/test/components/views/elements/MemberEventListSummary-test.js b/test/components/views/elements/MemberEventListSummary-test.js
new file mode 100644
index 0000000000..af4d92fa61
--- /dev/null
+++ b/test/components/views/elements/MemberEventListSummary-test.js
@@ -0,0 +1,556 @@
+const expect = require('expect');
+const React = require('react');
+const ReactDOM = require("react-dom");
+const ReactTestUtils = require('react-addons-test-utils');
+const sdk = require('matrix-react-sdk');
+const MemberEventListSummary = sdk.getComponent('views.elements.MemberEventListSummary');
+
+const testUtils = require('../../../test-utils');
+describe.only('MemberEventListSummary', function() {
+    let sandbox;
+    let parentDiv;
+
+    const generateTiles = (events) => {
+        return events.map((e) => {
+            return (
+                <div key={e.getId()} className="event_tile">
+                    Expanded membership
+                </div>
+            );
+        });
+    };
+
+    const generateMembershipEvent = (eventId, parameters) => {
+        let membership = parameters.membership;
+        let userId = parameters.userId;
+        let prevMembership = parameters.prevMembership;
+        let senderId = parameters.senderId;
+        return {
+            content: {
+                membership: membership,
+            },
+            target: {
+                name: userId.match(/@([^:]*):/)[1],
+                getAvatarUrl: () => {
+                    return "avatar.jpeg";
+                },
+                userId: userId,
+            },
+            getId: () => {
+                return eventId;
+            },
+            getContent: function() {
+                return this.content;
+            },
+            getPrevContent: function() {
+                return {
+                    membership: prevMembership ? prevMembership : this.content,
+                };
+            },
+            getSender: () => {
+                return senderId || userId;
+            },
+            getStateKey: () => {
+                return userId;
+            },
+        };
+    };
+
+    const generateEvents = (parameters) => {
+        const res = [];
+        for (let i = 0; i < parameters.length; i++) {
+            res.push(generateMembershipEvent(`event${i}`, parameters[i]));
+        }
+        return res;
+    };
+
+    const generateEventsForUsers = (userIdTemplate, n, events) => {
+        let eventsForUsers = [];
+        let userId = "";
+        for (let i = 0; i < n; i++) {
+            userId = userIdTemplate.replace('$', i);
+            events.forEach((e) => {
+                e.userId = userId;
+                return e;
+            });
+            eventsForUsers = eventsForUsers.concat(generateEvents(events));
+        }
+        return eventsForUsers;
+    };
+
+    beforeEach(function() {
+        testUtils.beforeEach(this);
+        sandbox = testUtils.stubClient();
+        parentDiv = document.createElement('div');
+        document.body.appendChild(parentDiv);
+    });
+
+    afterEach(function() {
+        sandbox.restore();
+    });
+
+    it('renders expanded events if there are less than props.threshold', function(done) {
+        const events = generateEvents([
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+        ]);
+        const props = {
+            events : events,
+            children : generateTiles(events),
+            summaryLength : 1,
+            avatarsMaxLength : 5,
+            threshold : 3,
+        };
+
+        const renderer = ReactTestUtils.createRenderer();
+        renderer.render(<MemberEventListSummary {...props} />);
+        const result = renderer.getRenderOutput();
+
+        expect(result.type).toBe('div');
+        expect(result.props.children).toEqual([
+          <div className="event_tile" key="event0">Expanded membership</div>,
+        ]);
+        done();
+    });
+
+    it('renders expanded events if there are less than props.threshold', function(done) {
+        const events = generateEvents([
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+        ]);
+        const props = {
+            events : events,
+            children : generateTiles(events),
+            summaryLength : 1,
+            avatarsMaxLength : 5,
+            threshold : 3,
+        };
+
+        const renderer = ReactTestUtils.createRenderer();
+        renderer.render(<MemberEventListSummary {...props} />);
+        const result = renderer.getRenderOutput();
+
+        expect(result.type).toBe('div');
+        expect(result.props.children).toEqual([
+          <div className="event_tile" key="event0">Expanded membership</div>,
+          <div className="event_tile" key="event1">Expanded membership</div>,
+        ]);
+        done();
+    });
+
+    it('renders collapsed events if events.length = props.threshold', function(done) {
+        const events = generateEvents([
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+        ]);
+        const props = {
+            events : events,
+            children : generateTiles(events),
+            summaryLength : 1,
+            avatarsMaxLength : 5,
+            threshold : 3,
+        };
+
+        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const summaryText = summary.innerText;
+
+        expect(summaryText).toBe("user_1 joined and left and joined");
+
+        done();
+    });
+
+    it('truncates long join,leave repetitions', function(done) {
+        const events = generateEvents([
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+        ]);
+        const props = {
+            events : events,
+            children : generateTiles(events),
+            summaryLength : 1,
+            avatarsMaxLength : 5,
+            threshold : 3,
+        };
+
+        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const summaryText = summary.innerText;
+
+        expect(summaryText).toBe("user_1 joined and left 7 times");
+
+        done();
+    });
+
+    it('truncates long join,leave repetitions inbetween other events', function(done) {
+        const events = generateEvents([
+            {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "invite", senderId: "@some_other_user:some.domain"},
+        ]);
+        const props = {
+            events : events,
+            children : generateTiles(events),
+            summaryLength : 1,
+            avatarsMaxLength : 5,
+            threshold : 3,
+        };
+
+        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const summaryText = summary.innerText;
+
+        expect(summaryText).toBe("user_1 was unbanned, joined and left 7 times and was invited");
+
+        done();
+    });
+
+    it('truncates multiple sequences of repetitions with other events inbetween', function(done) {
+        const events = generateEvents([
+            {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"},
+            {userId : "@user_1:some.domain", prevMembership: "ban", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "invite", senderId: "@some_other_user:some.domain"},
+        ]);
+        const props = {
+            events : events,
+            children : generateTiles(events),
+            summaryLength : 1,
+            avatarsMaxLength : 5,
+            threshold : 3,
+        };
+
+        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const summaryText = summary.innerText;
+
+        expect(summaryText).toBe("user_1 was unbanned, joined and left 2 times, was banned, joined and left 3 times and was invited");
+
+        done();
+    });
+
+    it('handles multple users following the same sequence of memberships', function(done) {
+        const events = generateEvents([
+            // user_1
+            {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"},
+            // user_2
+            {userId : "@user_2:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
+            {userId : "@user_2:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_2:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_2:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_2:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_2:some.domain", prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"},
+        ]);
+        const props = {
+            events : events,
+            children : generateTiles(events),
+            summaryLength : 1,
+            avatarsMaxLength : 5,
+            threshold : 3,
+        };
+
+        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const summaryText = summary.innerText;
+
+        expect(summaryText).toBe("user_1 and 1 other were unbanned, joined and left 2 times and were banned");
+
+        done();
+    });
+
+    it('handles multple users following the same sequence of memberships', function(done) {
+        const events = generateEvents([
+            // user_1
+            {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"},
+            // user_2
+            {userId : "@user_2:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
+            {userId : "@user_2:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_2:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_2:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_2:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_2:some.domain", prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"},
+        ]);
+        const props = {
+            events : events,
+            children : generateTiles(events),
+            summaryLength : 1,
+            avatarsMaxLength : 5,
+            threshold : 3,
+        };
+
+        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const summaryText = summary.innerText;
+
+        expect(summaryText).toBe("user_1 and 1 other were unbanned, joined and left 2 times and were banned");
+
+        done();
+    });
+
+    it('handles many users following the same sequence of memberships', function(done) {
+        const events = generateEventsForUsers("@user_$:some.domain", 20, [
+            {prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
+            {prevMembership: "leave", membership: "join"},
+            {prevMembership: "join", membership: "leave"},
+            {prevMembership: "leave", membership: "join"},
+            {prevMembership: "join", membership: "leave"},
+            {prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"},
+        ]);
+        const props = {
+            events : events,
+            children : generateTiles(events),
+            summaryLength : 1,
+            avatarsMaxLength : 5,
+            threshold : 3,
+        };
+
+        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const summaryText = summary.innerText;
+
+        expect(summaryText).toBe("user_0 and 19 others were unbanned, joined and left 2 times and were banned");
+
+        done();
+    });
+
+    it('correctly orders sequences of transitions by the order of their first event', function(done) {
+        const events = generateEvents([
+            {userId : "@user_2:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
+            {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"},
+            {userId : "@user_2:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_2:some.domain", prevMembership: "join", membership: "leave"},
+            {userId : "@user_2:some.domain", prevMembership: "leave", membership: "join"},
+            {userId : "@user_2:some.domain", prevMembership: "join", membership: "leave"},
+        ]);
+        const props = {
+            events : events,
+            children : generateTiles(events),
+            summaryLength : 1,
+            avatarsMaxLength : 5,
+            threshold : 3,
+        };
+
+        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const summaryText = summary.innerText;
+
+        expect(summaryText).toBe(
+            "user_2 was unbanned and joined and left 2 times, user_1 was unbanned, joined and left 2 times and was banned"
+        );
+
+        done();
+    });
+
+    it('correctly identifies transitions', function(done) {
+        const events = generateEvents([
+            // invited
+            {userId : "@user_1:some.domain", membership: "invite"},
+            // banned
+            {userId : "@user_1:some.domain", membership: "ban"},
+            // joined
+            {userId : "@user_1:some.domain", membership: "join"},
+            // invite_reject
+            {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave"},
+            // left
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            // invite_withdrawal
+            {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave", senderId: "@some_other_user:some.domain"},
+            // unbanned
+            {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
+            // kicked
+            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave", senderId: "@some_other_user:some.domain"},
+            // default = left
+            {userId : "@user_1:some.domain", prevMembership: "????", membership: "leave", senderId: "@some_other_user:some.domain"},
+        ]);
+        const props = {
+            events : events,
+            children : generateTiles(events),
+            summaryLength : 1,
+            avatarsMaxLength : 5,
+            threshold : 3,
+        };
+
+        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const summaryText = summary.innerText;
+
+        expect(summaryText).toBe(
+            "user_1 was invited, was banned, joined, rejected their invitation, left, had their invitation withdrawn, was unbanned, was kicked and left"
+        );
+
+        done();
+    });
+
+    it('handles invitation plurals correctly when there are multiple users', function(done) {
+        const events = generateEvents([
+            {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave", senderId: "@some_other_user:some.domain"},
+            {userId : "@user_2:some.domain", prevMembership: "invite", membership: "leave"},
+            {userId : "@user_2:some.domain", prevMembership: "invite", membership: "leave", senderId: "@some_other_user:some.domain"},
+        ]);
+        const props = {
+            events : events,
+            children : generateTiles(events),
+            summaryLength : 1,
+            avatarsMaxLength : 5,
+            threshold : 3,
+        };
+
+        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const summaryText = summary.innerText;
+
+        expect(summaryText).toBe(
+            "user_1 and 1 other rejected their invitations and had their invitations withdrawn"
+        );
+
+        done();
+    });
+
+    it('handles invitation plurals correctly when there are multiple invites', function(done) {
+        const events = generateEvents([
+            {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave"},
+            {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave"},
+        ]);
+        const props = {
+            events : events,
+            children : generateTiles(events),
+            summaryLength : 1,
+            avatarsMaxLength : 5,
+            threshold : 1, // threshold = 1 to force collapse
+        };
+
+        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const summaryText = summary.innerText;
+
+        expect(summaryText).toBe(
+            "user_1 rejected their invitations 2 times"
+        );
+
+        done();
+    });
+
+    it('handles a summary length = 2, with no "others"', function(done) {
+        const events = generateEvents([
+            {userId : "@user_1:some.domain", membership: "join"},
+            {userId : "@user_1:some.domain", membership: "join"},
+            {userId : "@user_2:some.domain", membership: "join"},
+            {userId : "@user_2:some.domain", membership: "join"},
+        ]);
+        const props = {
+            events : events,
+            children : generateTiles(events),
+            summaryLength : 2,
+            avatarsMaxLength : 5,
+            threshold : 3,
+        };
+
+        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const summaryText = summary.innerText;
+
+        expect(summaryText).toBe(
+            "user_1 and user_2 joined 2 times"
+        );
+
+        done();
+    });
+
+    it('handles a summary length = 2, with 1 "other"', function(done) {
+        const events = generateEvents([
+            {userId : "@user_1:some.domain", membership: "join"},
+            {userId : "@user_2:some.domain", membership: "join"},
+            {userId : "@user_3:some.domain", membership: "join"},
+        ]);
+        const props = {
+            events : events,
+            children : generateTiles(events),
+            summaryLength : 2,
+            avatarsMaxLength : 5,
+            threshold : 3,
+        };
+
+        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const summaryText = summary.innerText;
+
+        expect(summaryText).toBe(
+            "user_1, user_2 and 1 other joined"
+        );
+
+        done();
+    });
+
+    it('handles a summary length = 2, with many "others"', function(done) {
+        const events = generateEventsForUsers("@user_$:some.domain", 20, [
+            {membership: "join"},
+        ]);
+        const props = {
+            events : events,
+            children : generateTiles(events),
+            summaryLength : 2,
+            avatarsMaxLength : 5,
+            threshold : 3,
+        };
+
+        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const summaryText = summary.innerText;
+
+        expect(summaryText).toBe(
+            "user_0, user_1 and 18 others joined"
+        );
+
+        done();
+    });
+});
\ No newline at end of file

From 203172c886b326782e66bf53d8dbd8d00104ff3c Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 17 Jan 2017 14:11:01 +0000
Subject: [PATCH 161/289] typos

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

diff --git a/src/components/structures/ContextualMenu.js b/src/components/structures/ContextualMenu.js
index fecb2a1841..da419897dc 100644
--- a/src/components/structures/ContextualMenu.js
+++ b/src/components/structures/ContextualMenu.js
@@ -67,7 +67,7 @@ module.exports = {
             chevronOffset.top = props.chevronOffset;
         }
 
-        // To overide the deafult chevron colour, if it's been set
+        // To override the default chevron colour, if it's been set
         var chevronCSS = "";
         if (props.menuColour) {
             chevronCSS = `

From a18d94099e76232454ed3feefa837cfe8da532ab Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 17 Jan 2017 14:11:15 +0000
Subject: [PATCH 162/289] switch to using <span/> for edit button

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

diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 42dbe78630..ef578d47db 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -263,7 +263,7 @@ module.exports = WithMatrixClient(React.createClass({
 
         // The window X and Y offsets are to adjust position when zoomed in to page
         var x = buttonRect.right + window.pageXOffset;
-        var y = (buttonRect.top + (e.target.height / 2) + window.pageYOffset) - 19;
+        var y = (buttonRect.top + (buttonRect.height / 2) + window.pageYOffset) - 19;
         var self = this;
         ContextualMenu.createMenu(MessageContextMenu, {
             chevronOffset: 10,
@@ -465,7 +465,7 @@ module.exports = WithMatrixClient(React.createClass({
         }
 
         var editButton = (
-            <img className="mx_EventTile_editButton" src="img/icon_context_message.svg" width="19" height="19" alt="Options" title="Options" onClick={this.onEditClicked} />
+            <span className="mx_EventTile_editButton" title="Options" onClick={this.onEditClicked} />
         );
 
         var e2e;

From 0b67fd5b4ef834355dfaf9f8f6c4ac2dc62a5a01 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 17 Jan 2017 14:48:50 +0000
Subject: [PATCH 163/289] Add 'searching known users' to the user picker

So it's more obvious it's only finding people you've already seen

Fixes https://github.com/vector-im/riot-web/issues/2931
---
 src/components/views/dialogs/ChatInviteDialog.js | 7 ++++++-
 src/components/views/elements/AddressSelector.js | 4 ++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index e9a041357f..7fee741e47 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -396,11 +396,16 @@ module.exports = React.createClass({
         if (this.state.error) {
             error = <div className="mx_ChatInviteDialog_error">You have entered an invalid contact. Try using their Matrix ID or email address.</div>
         } else {
+            const addressSelectorHeader = <div className="mx_ChatInviteDialog_addressSelectHeader">
+                Searching known users
+            </div>;
             addressSelector = (
                 <AddressSelector ref={(ref) => {this.addressSelector = ref}}
                     addressList={ this.state.queryList }
                     onSelected={ this.onSelected }
-                    truncateAt={ TRUNCATE_QUERY_LIST } />
+                    truncateAt={ TRUNCATE_QUERY_LIST }
+                    header={ addressSelectorHeader }
+                />
             );
         }
 
diff --git a/src/components/views/elements/AddressSelector.js b/src/components/views/elements/AddressSelector.js
index 2c2d7e2d61..8b2855e99d 100644
--- a/src/components/views/elements/AddressSelector.js
+++ b/src/components/views/elements/AddressSelector.js
@@ -28,6 +28,9 @@ module.exports = React.createClass({
         addressList: React.PropTypes.array.isRequired,
         truncateAt: React.PropTypes.number.isRequired,
         selected: React.PropTypes.number,
+
+        // Element to put as a header on top of the list
+        header: React.PropTypes.node,
     },
 
     getInitialState: function() {
@@ -147,6 +150,7 @@ module.exports = React.createClass({
 
         return (
             <div className={classes} ref={(ref) => {this.scrollElement = ref}}>
+                { this.props.header }
                 { this.createAddressListTiles() }
             </div>
         );

From 893a5c971fd43186637f50cb3725eefa09b6d365 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20L=C3=B6thberg?= <johannes@kyriasis.com>
Date: Fri, 2 Dec 2016 19:58:35 +0100
Subject: [PATCH 164/289] Fix escaping markdown by rendering plaintext
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We still need to parse "plaintext" messages through the markdown
renderer so that escappes are rendered properly.

Fixes vector-im/riot-web#2870.

Signed-off-by: Johannes Löthberg <johannes@kyriasis.com>
---
 src/Markdown.js                               | 32 ++++++++++++-------
 .../views/rooms/MessageComposerInput.js       |  8 +++--
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/Markdown.js b/src/Markdown.js
index 18c888b541..2eb84b9041 100644
--- a/src/Markdown.js
+++ b/src/Markdown.js
@@ -56,23 +56,31 @@ export default class Markdown {
         return is_plain;
     }
 
-    toHTML() {
+    render(html) {
         const parser = new commonmark.Parser();
 
         const renderer = new commonmark.HtmlRenderer({safe: true});
         const real_paragraph = renderer.paragraph;
-        renderer.paragraph = function(node, entering) {
-            // If there is only one top level node, just return the
-            // bare text: it's a single line of text and so should be
-            // 'inline', rather than unnecessarily wrapped in its own
-            // p tag. If, however, we have multiple nodes, each gets
-            // its own p tag to keep them as separate paragraphs.
-            var par = node;
-            while (par.parent) {
-                par = par.parent
+        if (html) {
+            renderer.paragraph = function(node, entering) {
+                // If there is only one top level node, just return the
+                // bare text: it's a single line of text and so should be
+                // 'inline', rather than unnecessarily wrapped in its own
+                // p tag. If, however, we have multiple nodes, each gets
+                // its own p tag to keep them as separate paragraphs.
+                var par = node;
+                while (par.parent) {
+                    par = par.parent
+                }
+                if (par.firstChild != par.lastChild) {
+                    real_paragraph.call(this, node, entering);
+                }
             }
-            if (par.firstChild != par.lastChild) {
-                real_paragraph.call(this, node, entering);
+        } else {
+            renderer.paragraph = function(node, entering) {
+                if (entering) {
+                    this.lit('\n\n');
+                }
             }
         }
 
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 37d937d6f5..5e8df592da 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -401,7 +401,7 @@ export default class MessageComposerInput extends React.Component {
         let contentState = null;
         if (enabled) {
             const md = new Markdown(this.state.editorState.getCurrentContent().getPlainText());
-            contentState = RichText.HTMLtoContentState(md.toHTML());
+            contentState = RichText.HTMLtoContentState(md.render(true));
         } else {
             let markdown = stateToMarkdown(this.state.editorState.getCurrentContent());
             if (markdown[markdown.length - 1] === '\n') {
@@ -523,8 +523,10 @@ export default class MessageComposerInput extends React.Component {
             );
         } else {
             const md = new Markdown(contentText);
-            if (!md.isPlainText()) {
-                contentHTML = md.toHTML();
+            if (md.isPlainText()) {
+                contentText = md.render(false);
+            } else {
+                contentHTML = md.render(true);
             }
         }
 

From 49f2b9df88c33187020900174e1ced591d66e035 Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Tue, 17 Jan 2017 18:53:38 +0100
Subject: [PATCH 165/289] Remove duplicate test

---
 .../elements/MemberEventListSummary-test.js   | 36 +------------------
 1 file changed, 1 insertion(+), 35 deletions(-)

diff --git a/test/components/views/elements/MemberEventListSummary-test.js b/test/components/views/elements/MemberEventListSummary-test.js
index af4d92fa61..39a79eaf6c 100644
--- a/test/components/views/elements/MemberEventListSummary-test.js
+++ b/test/components/views/elements/MemberEventListSummary-test.js
@@ -263,41 +263,7 @@ describe.only('MemberEventListSummary', function() {
         done();
     });
 
-    it('handles multple users following the same sequence of memberships', function(done) {
-        const events = generateEvents([
-            // user_1
-            {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"},
-            // user_2
-            {userId : "@user_2:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
-            {userId : "@user_2:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_2:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_2:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_2:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_2:some.domain", prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"},
-        ]);
-        const props = {
-            events : events,
-            children : generateTiles(events),
-            summaryLength : 1,
-            avatarsMaxLength : 5,
-            threshold : 3,
-        };
-
-        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
-        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
-        const summaryText = summary.innerText;
-
-        expect(summaryText).toBe("user_1 and 1 other were unbanned, joined and left 2 times and were banned");
-
-        done();
-    });
-
-    it('handles multple users following the same sequence of memberships', function(done) {
+    it('handles multiple users following the same sequence of memberships', function(done) {
         const events = generateEvents([
             // user_1
             {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},

From 9574a0b663f9e4e6e4e013e6fe73707f2d41d831 Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Tue, 17 Jan 2017 18:56:57 +0100
Subject: [PATCH 166/289] Remove pointless length guard

---
 src/components/views/elements/MemberEventListSummary.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index 1f05ba000e..945a5c28fd 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -66,10 +66,6 @@ module.exports = React.createClass({
     },
 
     _renderNameList: function(users) {
-        if (users.length === 0) {
-            return null;
-        }
-
         return this._renderCommaSeparatedList(users, this.props.summaryLength);
     },
 

From 3ba9f5087320122f4af807b123b00224d4d23e0a Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Tue, 17 Jan 2017 19:07:45 +0100
Subject: [PATCH 167/289] Move functions around, remove redundancies, add docs

---
 .../views/elements/MemberEventListSummary.js  | 159 +++++++++---------
 .../elements/MemberEventListSummary-test.js   |   2 +-
 2 files changed, 81 insertions(+), 80 deletions(-)

diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index 945a5c28fd..0c2861a023 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -69,57 +69,44 @@ module.exports = React.createClass({
         return this._renderCommaSeparatedList(users, this.props.summaryLength);
     },
 
-    // Test whether the first n items repeat for the duration
-    // e.g. [1,2,3,4,1,2,3] would resolve true for n = 4
-    _isRepeatedSequence: function(transitions, n) {
-        let count = 0;
-        for (let i = 0; i < transitions.length; i++) {
-            if (transitions[i % n] !== transitions[i]) {
-                return null;
-            }
+    _renderSummary: function(eventAggregates, orderedTransitionSequences) {
+        let summaries = orderedTransitionSequences.map((transitions) => {
+            let nameList = this._renderNameList(eventAggregates[transitions]);
+            let plural = eventAggregates[transitions].length > 1;
+
+            let splitTransitions = transitions.split(',');
+
+            // Some pairs of transitions are common and are repeated a lot, so canonicalise them into "pair" transitions
+            let canonicalTransitions = this._getCanonicalTransitions(splitTransitions);
+            // Remove consecutive repetitions of the same transition (like 5 consecutive 'join_and_leave's)
+            let truncatedTransitions = this._getTruncatedTransitions(canonicalTransitions);
+
+            let descs = truncatedTransitions.map((t) => {
+                return this._getDescriptionForTransition(t.transitionType, plural, t.repeats);
+            });
+
+            let desc = this._renderCommaSeparatedList(descs);
+
+            return nameList + " " + desc;
+        });
+
+        if (!summaries) {
+            return null;
         }
-        return true;
+
+        return (
+            <span>
+                {summaries.join(", ")}
+            </span>
+        );
     },
 
-    _renderCommaSeparatedList(items, itemLimit) {
-        const remaining = itemLimit === undefined ? 0 : Math.max(items.length - itemLimit, 0);
-        if (items.length === 0) {
-            return "";
-        } else if (items.length === 1) {
-            return items[0];
-        } else if (remaining) {
-            items = items.slice(0, itemLimit);
-            const other = " other" + (remaining > 1 ? "s" : "");
-            return items.join(', ') + ' and ' + remaining + other;
-        } else {
-            let last = items.pop();
-            return items.join(', ') + ' and ' + last;
-        }
-    },
-
-    _getDescriptionForTransition(t, plural, repeats) {
-        let beConjugated = plural ? "were" : "was";
-        let invitation = "their invitation" + (plural || (repeats > 1) ? "s" : "");
-
-        let res = null;
-        let map = {
-            "joined": "joined",
-            "left": "left",
-            "joined_and_left": "joined and left",
-            "left_and_joined": "left and rejoined",
-            "invite_reject": "rejected " + invitation,
-            "invite_withdrawal": "had " + invitation + " withdrawn",
-            "invited": beConjugated + " invited",
-            "banned": beConjugated + " banned",
-            "unbanned": beConjugated + " unbanned",
-            "kicked": beConjugated + " kicked",
-        };
-
-        if (Object.keys(map).includes(t)) {
-            res = map[t] + (repeats > 1 ? " " + repeats + " times" : "" );
+    _renderNameList: function(users) {
+        if (users.length === 0) {
+            return null;
         }
 
-        return res;
+        return this._renderCommaSeparatedList(users, this.props.summaryLength);
     },
 
     _getCanonicalTransitions: function(transitions) {
@@ -174,39 +161,53 @@ module.exports = React.createClass({
         return res;
     },
 
-    _renderSummary: function(eventAggregates, orderedTransitionSequences) {
-        let summaries = orderedTransitionSequences.map((transitions) => {
-            let nameList = this._renderNameList(eventAggregates[transitions]);
-            let plural = eventAggregates[transitions].length > 1;
+    /**
+     * For a certain transition, t, describe what happened to the users that
+     * underwent the transition.
+     * @param {string} t the transition type
+     * @param {boolean} plural whether there were multiple users undergoing the same transition
+     * @param {number} repeats the number of times the transition was repeated in a row
+     * @returns {string} the spoken English equivalent of the transition
+     */
+    _getDescriptionForTransition(t, plural, repeats) {
+        let beConjugated = plural ? "were" : "was";
+        let invitation = "their invitation" + (plural || (repeats > 1) ? "s" : "");
 
-            let repeats = 1;
-            let repeatExtra = 0;
+        let res = null;
+        let map = {
+            "joined": "joined",
+            "left": "left",
+            "joined_and_left": "joined and left",
+            "left_and_joined": "left and rejoined",
+            "invite_reject": "rejected " + invitation,
+            "invite_withdrawal": "had " + invitation + " withdrawn",
+            "invited": beConjugated + " invited",
+            "banned": beConjugated + " banned",
+            "unbanned": beConjugated + " unbanned",
+            "kicked": beConjugated + " kicked",
+        };
 
-            let splitTransitions = transitions.split(',');
-
-            // Some pairs of transitions are common and are repeated a lot, so canonicalise them into "pair" transitions
-            let canonicalTransitions = this._getCanonicalTransitions(splitTransitions);
-            // Remove consecutive repetitions of the same transition (like 5 consecutive 'join_and_leave's)
-            let truncatedTransitions = this._getTruncatedTransitions(canonicalTransitions);
-
-            let descs = truncatedTransitions.map((t) => {
-                return this._getDescriptionForTransition(t.transitionType, plural, t.repeats);
-            });
-
-            let desc = this._renderCommaSeparatedList(descs);
-
-            return nameList + " " + desc;
-        });
-
-        if (!summaries) {
-            return null;
+        if (Object.keys(map).includes(t)) {
+            res = map[t] + (repeats > 1 ? " " + repeats + " times" : "" );
         }
 
-        return (
-            <span>
-                {summaries.join(", ")}
-            </span>
-        );
+        return res;
+    },
+
+    _renderCommaSeparatedList(items, itemLimit) {
+        const remaining = itemLimit === undefined ? 0 : Math.max(items.length - itemLimit, 0);
+        if (items.length === 0) {
+            return "";
+        } else if (items.length === 1) {
+            return items[0];
+        } else if (remaining) {
+            items = items.slice(0, itemLimit);
+            const other = " other" + (remaining > 1 ? "s" : "");
+            return items.join(', ') + ' and ' + remaining + other;
+        } else {
+            let last = items.pop();
+            return items.join(', ') + ' and ' + last;
+        }
     },
 
     _renderAvatars: function(roomMembers) {
@@ -223,6 +224,10 @@ module.exports = React.createClass({
         );
     },
 
+    _getTransitionSequence: function(events) {
+        return events.map(this._getTransition);
+    },
+
     _getTransition: function(e) {
         switch (e.mxEvent.getContent().membership) {
             case 'invite': return 'invited';
@@ -245,10 +250,6 @@ module.exports = React.createClass({
         }
     },
 
-    _getTransitionSequence: function(events) {
-        return events.map(this._getTransition);
-    },
-
     render: function() {
         let eventsToRender = this.props.events;
         let fewEvents = eventsToRender.length < this.props.threshold;
diff --git a/test/components/views/elements/MemberEventListSummary-test.js b/test/components/views/elements/MemberEventListSummary-test.js
index 39a79eaf6c..61e0f9627b 100644
--- a/test/components/views/elements/MemberEventListSummary-test.js
+++ b/test/components/views/elements/MemberEventListSummary-test.js
@@ -6,7 +6,7 @@ const sdk = require('matrix-react-sdk');
 const MemberEventListSummary = sdk.getComponent('views.elements.MemberEventListSummary');
 
 const testUtils = require('../../../test-utils');
-describe.only('MemberEventListSummary', function() {
+describe('MemberEventListSummary', function() {
     let sandbox;
     let parentDiv;
 

From a87e7d66170bcae5c28075aef6aae3de696703ae Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 17 Jan 2017 18:17:51 +0000
Subject: [PATCH 168/289] Make user search do a bit better on word boundary

---
 .../views/dialogs/ChatInviteDialog.js         | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index e9a041357f..59e95d1538 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -27,6 +27,10 @@ var Modal = require('../../../Modal');
 
 const TRUNCATE_QUERY_LIST = 40;
 
+function escapeRegExp(str) {
+  return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
+}
+
 module.exports = React.createClass({
     displayName: "ChatInviteDialog",
     propTypes: {
@@ -315,13 +319,18 @@ module.exports = React.createClass({
             return true;
         }
 
-        // split spaces in name and try matching constituent parts
-        var parts = name.split(" ");
-        for (var i = 0; i < parts.length; i++) {
-            if (parts[i].indexOf(query) === 0) {
-                return true;
-            }
+        // Try to find the query following a "word boundary", except that
+        // this does avoids using \b because it only considers letters from
+        // the roman alphabet to be word characters.
+        // Instead, we look for the query following either:
+        //  * The start of the string
+        //  * Whitespace, or
+        //  * A fixed number of punctuation characters
+        let expr = new RegExp("(?:^|[\\s\\('\",\.-])" + escapeRegExp(query));
+        if (expr.test(name)) {
+            return true;
         }
+
         return false;
     },
 

From c2cdb626bdf3b8156168a6594ba1c8462d482c2f Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 17 Jan 2017 19:13:04 +0000
Subject: [PATCH 169/289] let the tinter handle 'white' highlights of SVGs too

---
 src/Tinter.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/Tinter.js b/src/Tinter.js
index 534a1d810b..c18d3068a7 100644
--- a/src/Tinter.js
+++ b/src/Tinter.js
@@ -42,6 +42,7 @@ var keyHex = [
     "#76CFA6", // Vector Green
     "#EAF5F0", // Vector Light Green
     "#D3EFE1", // BottomLeftMenu overlay (20% Vector Green overlaid on Vector Light Green)
+    "#FFFFFF", // white highlights of the SVGs (for switching to dark theme)
 ];
 
 // cache of our replacement colours
@@ -50,6 +51,7 @@ var colors = [
     keyHex[0],
     keyHex[1],
     keyHex[2],
+    keyHex[3],
 ];
 
 var cssFixups = [
@@ -172,7 +174,7 @@ module.exports = {
         tintables.push(tintable);
     },
 
-    tint: function(primaryColor, secondaryColor, tertiaryColor) {
+    tint: function(primaryColor, secondaryColor, tertiaryColor, whiteColor) {
 
         if (!cached) {
             calcCssFixups();
@@ -203,14 +205,19 @@ module.exports = {
             tertiaryColor = rgbToHex(rgb1);
         }
 
+        if (!whiteColor) {
+            whiteColor = colors[3];
+        }
+
         if (colors[0] === primaryColor &&
             colors[1] === secondaryColor &&
-            colors[2] === tertiaryColor)
+            colors[2] === tertiaryColor &&
+            colors[3] === whiteColor)
         {
             return;
         }
 
-        colors = [primaryColor, secondaryColor, tertiaryColor];
+        colors = [primaryColor, secondaryColor, tertiaryColor, whiteColor];
 
         if (DEBUG) console.log("Tinter.tint");
 

From 8288eb730c0ddd7239dbb542031dd6b56de4eeac Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 17 Jan 2017 19:13:23 +0000
Subject: [PATCH 170/289] a rather hacky implementation of theme switching

---
 src/components/structures/MatrixChat.js   | 42 +++++++++++++++
 src/components/structures/UserSettings.js | 63 ++++++++++++++++++-----
 2 files changed, 93 insertions(+), 12 deletions(-)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index c47109db94..79e93bb990 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -25,6 +25,7 @@ var SdkConfig = require("../../SdkConfig");
 var ContextualMenu = require("./ContextualMenu");
 var RoomListSorter = require("../../RoomListSorter");
 var UserActivity = require("../../UserActivity");
+var UserSettingsStore = require('../../UserSettingsStore');
 var Presence = require("../../Presence");
 var dis = require("../../dispatcher");
 
@@ -456,6 +457,9 @@ module.exports = React.createClass({
                     middleOpacity: payload.middleOpacity,
                 });
                 break;
+            case 'set_theme':
+                this._onSetTheme(payload.value);
+                break;
             case 'on_logged_in':
                 this._onLoggedIn();
                 break;
@@ -584,6 +588,44 @@ module.exports = React.createClass({
     _onLoadCompleted: function() {
         this.props.onLoadCompleted();
         this.setState({loading: false});
+
+        // set up the right theme.
+        // XXX: this will temporarily flicker the wrong CSS.
+        dis.dispatch({
+            action: 'set_theme',
+            value: UserSettingsStore.getSyncedSetting('theme')
+        });
+    },
+
+    /**
+     * Called whenever someone changes the theme
+     */
+    _onSetTheme: function(theme) {
+        if (!theme) {
+            theme = 'light';
+        }
+
+        var i, a;
+        for (i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
+            var href = a.getAttribute("href");
+            if (href.startsWith("theme-")) {
+                if (href.startsWith("theme-" + theme + ".")) {
+                    a.disabled = false;
+                }
+                else {
+                    a.disabled = true;
+                }
+            }
+        }
+
+        if (theme === 'dark') {
+            // abuse the tinter to change all the SVG's #fff to #2d2d2d
+            // XXX: obviously this shouldn't be hardcoded here.
+            Tinter.tint(undefined, undefined, undefined, '#2d2d2d');
+        }
+        else {
+            Tinter.tint(undefined, undefined, undefined, '#ffffff');
+        }
     },
 
     /**
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index a41eab3a76..ebfd6dc0a7 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -363,7 +363,23 @@ module.exports = React.createClass({
         */
         ];
 
+        var themes = [
+            {
+                id: 'theme',
+                label: 'Light theme',
+                value: 'light',
+            },
+            {
+                id: 'theme',
+                label: 'Dark theme',
+                value: 'dark',
+            }
+        ];
+
         var syncedSettings = UserSettingsStore.getSyncedSettings();
+        if (!syncedSettings.theme) {
+            syncedSettings.theme = 'light';
+        }
 
         return (
             <div>
@@ -379,19 +395,42 @@ module.exports = React.createClass({
                             Disable inline URL previews by default
                         </label>
                     </div>
+                    { settingsLabels.map( setting => {
+                        return <div className="mx_UserSettings_toggle" key={ setting.id }>
+                            <input id={ setting.id }
+                                   type="checkbox"
+                                   defaultChecked={ syncedSettings[setting.id] }
+                                   onChange={ e => UserSettingsStore.setSyncedSetting(setting.id, e.target.checked) }
+                            />
+                            <label htmlFor={ setting.id }>
+                                { setting.label }
+                            </label>
+                        </div>
+                    })}
+                    { themes.map( setting => {
+                        return <div className="mx_UserSettings_toggle" key={ setting.id + "_" + setting.value }>
+                            <input id={ setting.id + "_" + setting.value }
+                                   type="radio"
+                                   name={ setting.id }
+                                   value={ setting.value }
+                                   defaultChecked={ syncedSettings[setting.id] === setting.value }
+                                   onChange={ e => {
+                                            if (e.target.checked) {
+                                                UserSettingsStore.setSyncedSetting(setting.id, setting.value)
+                                            }
+                                            dis.dispatch({
+                                                action: 'set_theme',
+                                                value: setting.value,
+                                            });
+                                        }
+                                   }
+                            />
+                            <label htmlFor={ setting.id + "_" + setting.value }>
+                                { setting.label }
+                            </label>
+                        </div>
+                    })}
                 </div>
-                { settingsLabels.forEach( setting => {
-                    <div className="mx_UserSettings_toggle">
-                        <input id={ setting.id }
-                               type="checkbox"
-                               defaultChecked={ syncedSettings[setting.id] }
-                               onChange={ e => UserSettingsStore.setSyncedSetting(setting.id, e.target.checked) }
-                        />
-                        <label htmlFor={ setting.id }>
-                            { settings.label }
-                        </label>
-                    </div>
-                })}
             </div>
         );
     },

From 35d70f0b35aeefa4af43379078b63922f0f70afe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20L=C3=B6thberg?= <johannes@kyriasis.com>
Date: Tue, 17 Jan 2017 20:32:06 +0100
Subject: [PATCH 171/289] markdown: Only add \n\n on multiple paragraphs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Johannes Löthberg <johannes@kyriasis.com>
---
 src/Markdown.js | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/Markdown.js b/src/Markdown.js
index 2eb84b9041..17723e42f8 100644
--- a/src/Markdown.js
+++ b/src/Markdown.js
@@ -78,8 +78,20 @@ export default class Markdown {
             }
         } else {
             renderer.paragraph = function(node, entering) {
-                if (entering) {
-                    this.lit('\n\n');
+                // If there is only one top level node, just return the
+                // bare text: it's a single line of text and so should be
+                // 'inline', rather than unnecessarily wrapped in its own
+                // p tag. If, however, we have multiple nodes, each gets
+                // its own p tag to keep them as separate paragraphs.
+                var par = node;
+                while (par.parent) {
+                    node = par;
+                    par = par.parent;
+                }
+                if (node != par.lastChild) {
+                    if (!entering) {
+                        this.lit('\n\n');
+                    }
                 }
             }
         }

From c819b433a247ca502daf600c3bc763f138262f5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20L=C3=B6thberg?= <johannes@kyriasis.com>
Date: Tue, 17 Jan 2017 20:37:27 +0100
Subject: [PATCH 172/289] Make old message composer use new markdown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Johannes Löthberg <johannes@kyriasis.com>
---
 src/components/views/rooms/MessageComposerInputOld.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/views/rooms/MessageComposerInputOld.js b/src/components/views/rooms/MessageComposerInputOld.js
index 28e3186c50..3b0100278b 100644
--- a/src/components/views/rooms/MessageComposerInputOld.js
+++ b/src/components/views/rooms/MessageComposerInputOld.js
@@ -325,12 +325,13 @@ module.exports = React.createClass({
         }
 
         if (send_markdown) {
-            const htmlText = mdown.toHTML();
+            const htmlText = mdown.render(true);
             sendMessagePromise = isEmote ?
                 MatrixClientPeg.get().sendHtmlEmote(this.props.room.roomId, contentText, htmlText) :
                 MatrixClientPeg.get().sendHtmlMessage(this.props.room.roomId, contentText, htmlText);
         }
         else {
+            const contentText = mdown.render(false);
             sendMessagePromise = isEmote ?
                 MatrixClientPeg.get().sendEmoteMessage(this.props.room.roomId, contentText) :
                 MatrixClientPeg.get().sendTextMessage(this.props.room.roomId, contentText);

From 49d60ff879aa677e5befb10c831b0d89e9952d0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20L=C3=B6thberg?= <johannes@kyriasis.com>
Date: Tue, 17 Jan 2017 21:04:12 +0100
Subject: [PATCH 173/289] Markdown: softbreak is not HTML
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Johannes Löthberg <johannes@kyriasis.com>
---
 src/Markdown.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Markdown.js b/src/Markdown.js
index 17723e42f8..ad7ec5ef0c 100644
--- a/src/Markdown.js
+++ b/src/Markdown.js
@@ -48,6 +48,7 @@ export default class Markdown {
         }
         // text and paragraph are just text
         dummy_renderer.text = function(t) { return t; }
+        dummy_renderer.softbreak = function(t) { return t; }
         dummy_renderer.paragraph = function(t) { return t; }
 
         const dummy_parser = new commonmark.Parser();

From 2e3bdcf5c697009b0d7b6b82ab5f902ec49115de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20L=C3=B6thberg?= <johannes@kyriasis.com>
Date: Tue, 17 Jan 2017 22:20:05 +0100
Subject: [PATCH 174/289] Markdown: Don't XML escape the output when not HTML
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Johannes Löthberg <johannes@kyriasis.com>
---
 src/Markdown.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/Markdown.js b/src/Markdown.js
index ad7ec5ef0c..e6f5f59f01 100644
--- a/src/Markdown.js
+++ b/src/Markdown.js
@@ -78,6 +78,10 @@ export default class Markdown {
                 }
             }
         } else {
+            renderer.out = function(s) {
+                this.lit(s);
+            }
+
             renderer.paragraph = function(node, entering) {
                 // If there is only one top level node, just return the
                 // bare text: it's a single line of text and so should be

From 484549e50be36266c581d4583c84c9c55db1e5cf Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Wed, 18 Jan 2017 10:26:25 +0100
Subject: [PATCH 175/289] Refactor a few things and document everything

---
 .../views/elements/MemberEventListSummary.js  | 108 +++++++++++++-----
 1 file changed, 82 insertions(+), 26 deletions(-)

diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index 0c2861a023..41307969d6 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -65,20 +65,27 @@ module.exports = React.createClass({
         });
     },
 
-    _renderNameList: function(users) {
-        return this._renderCommaSeparatedList(users, this.props.summaryLength);
-    },
-
+    /**
+     * Render the JSX for users aggregated by their transition sequences (`eventAggregates`) where
+     * the sequences are ordered by `orderedTransitionSequences`.
+     * @param {object[]} eventAggregates a map of transition sequence to array of user display names
+     * or user IDs.
+     * @param {string[]} orderedTransitionSequences an array which is some ordering of
+     * `Object.keys(eventAggregates)`.
+     * @returns {ReactElement} a single <span> containing the textual summary of the aggregated
+     * events that occurred.
+     */
     _renderSummary: function(eventAggregates, orderedTransitionSequences) {
         let summaries = orderedTransitionSequences.map((transitions) => {
-            let nameList = this._renderNameList(eventAggregates[transitions]);
-            let plural = eventAggregates[transitions].length > 1;
+            let userNames = eventAggregates[transitions];
+            let nameList = this._renderNameList(userNames);
+            let plural = userNames.length > 1;
 
             let splitTransitions = transitions.split(',');
 
-            // Some pairs of transitions are common and are repeated a lot, so canonicalise them into "pair" transitions
+            // Some neighbouring transitions are common, so canonicalise some into "pair" transitions
             let canonicalTransitions = this._getCanonicalTransitions(splitTransitions);
-            // Remove consecutive repetitions of the same transition (like 5 consecutive 'join_and_leave's)
+            // Transform into consecutive repetitions of the same transition (like 5 consecutive 'joined_and_left's)
             let truncatedTransitions = this._getTruncatedTransitions(canonicalTransitions);
 
             let descs = truncatedTransitions.map((t) => {
@@ -101,14 +108,30 @@ module.exports = React.createClass({
         );
     },
 
+    /**
+     * @param {string[]} users an array of user display names or user IDs.
+     * @returns {string} a comma-separated list that ends with "and [n] others" if there are
+     * more items in `users` than `this.props.summaryLength`, which is the number of names
+     * included before "and [n] others".
+     */
     _renderNameList: function(users) {
-        if (users.length === 0) {
-            return null;
-        }
-
         return this._renderCommaSeparatedList(users, this.props.summaryLength);
     },
 
+    /**
+     * Canonicalise an array of transitions into an array of transitions and how many times
+     * they are repeated consecutively.
+     *
+     * An array of 123 "joined_and_left" transitions, would result in:
+     * ```
+     * [{
+     *   transitionType: "joined_and_left"
+     *   repeats: 123
+     * }, ... ]
+     * ```
+     * @param {string[]} transitions the array of transitions to transform.
+     * @returns {object[]} an array of truncated transitions.
+     */
     _getCanonicalTransitions: function(transitions) {
         let modMap = {
             'joined' : {
@@ -142,6 +165,20 @@ module.exports = React.createClass({
         return res;
     },
 
+    /**
+     * Transform an array of transitions into an array of transitions and how many times
+     * they are repeated consecutively.
+     *
+     * An array of 123 "joined_and_left" transitions, would result in:
+     * ```
+     * [{
+     *   transitionType: "joined_and_left"
+     *   repeats: 123
+     * }, ... ]
+     * ```
+     * @param {string[]} transitions the array of transitions to transform.
+     * @returns {object[]} an array of truncated transitions.
+     */
     _getTruncatedTransitions: function(transitions) {
         let res = [];
         for (let i = 0; i < transitions.length; i++) {
@@ -154,20 +191,16 @@ module.exports = React.createClass({
                 });
             }
         }
-        // returns [{
-        //     transitionType: "joined_and_left"
-        //     repeats: 123
-        // }, ... ]
         return res;
     },
 
     /**
      * For a certain transition, t, describe what happened to the users that
      * underwent the transition.
-     * @param {string} t the transition type
-     * @param {boolean} plural whether there were multiple users undergoing the same transition
-     * @param {number} repeats the number of times the transition was repeated in a row
-     * @returns {string} the spoken English equivalent of the transition
+     * @param {string} t the transition type.
+     * @param {boolean} plural whether there were multiple users undergoing the same transition.
+     * @param {number} repeats the number of times the transition was repeated in a row.
+     * @returns {string} the written English equivalent of the transition.
      */
     _getDescriptionForTransition(t, plural, repeats) {
         let beConjugated = plural ? "were" : "was";
@@ -194,6 +227,16 @@ module.exports = React.createClass({
         return res;
     },
 
+    /**
+     * Constructs a written English string representing `items`, with an optional limit on the number
+     * of items included in the result. If specified and if the length of `items` is greater than the
+     * limit, the string "and n others" will be appended onto the result.
+     * If `items` is empty, returns the empty string. If there is only one item, return it.
+     * @param {string[]} items the items to construct a string from.
+     * @param {number?} itemLimit the number by which to limit the list.
+     * @returns {string} a string constructed by joining `items` with a comma between each
+     * item, but with the last item appended as " and [lastItem]".
+     */
     _renderCommaSeparatedList(items, itemLimit) {
         const remaining = itemLimit === undefined ? 0 : Math.max(items.length - itemLimit, 0);
         if (items.length === 0) {
@@ -228,6 +271,14 @@ module.exports = React.createClass({
         return events.map(this._getTransition);
     },
 
+    /**
+     * Enumerate a given membership event, `e`, where `getContent().membership` has
+     * changed for each transition allowed by the Matrix protocol. This attempts to
+     * enumerate the membership changes that occur in `../../../TextForEvent.js`.
+     * @param {MatrixEvent} e the membership change event to enumerate.
+     * @returns {string?} the transition type given to this event. This defaults to `null`
+     * if a transition is not recognised.
+     */
     _getTransition: function(e) {
         switch (e.mxEvent.getContent().membership) {
             case 'invite': return 'invited';
@@ -268,16 +319,25 @@ module.exports = React.createClass({
             );
         }
 
-        // Map user IDs to all of the user's member events in eventsToRender
+        // Map user IDs to an array of objects:
         let userEvents = {
-            // $userId : []
+            // $userId : [{
+            //     // The original event
+            //     mxEvent: e,
+            //     // The display name of the user (if not, then user ID)
+            //     displayName: e.target.name || userId,
+            //     // The original index of the event in this.props.events
+            //     index: index,
+            // }]
         };
+        let avatarMembers = [];
 
         eventsToRender.forEach((e, index) => {
             const userId = e.getStateKey();
             // Initialise a user's events
             if (!userEvents[userId]) {
                 userEvents[userId] = [];
+                avatarMembers.push(e.target);
             }
             userEvents[userId].push({
                 mxEvent: e,
@@ -299,8 +359,6 @@ module.exports = React.createClass({
             // $aggregateType : int
         };
 
-        let avatarMembers = [];
-
         let users = Object.keys(userEvents);
         users.forEach(
             (userId) => {
@@ -320,8 +378,6 @@ module.exports = React.createClass({
                 if (aggregateIndices[seq] === -1 || firstEvent.index < aggregateIndices[seq]) {
                     aggregateIndices[seq] = firstEvent.index;
                 }
-
-                avatarMembers.push(firstEvent.mxEvent.target);
             }
         );
 

From 5dd1512ff27e7299d89d604a91ebfbedff441780 Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Wed, 18 Jan 2017 10:59:19 +0100
Subject: [PATCH 176/289] Move aggregation code to dedicated function

---
 .../views/elements/MemberEventListSummary.js  | 79 ++++++++++---------
 .../elements/MemberEventListSummary-test.js   |  2 +-
 2 files changed, 44 insertions(+), 37 deletions(-)

diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index 41307969d6..57686344ed 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -301,6 +301,46 @@ module.exports = React.createClass({
         }
     },
 
+    _getAggregate: function(userEvents) {
+        // A map of aggregate type to arrays of display names. Each aggregate type
+        // is a comma-delimited string of transitions, e.g. "joined,left,kicked".
+        // The array of display names is the array of users who went through that
+        // sequence during eventsToRender.
+        let aggregate = {
+            // $aggregateType : []:string
+        };
+        // A map of aggregate types to the indices that order them (the index of
+        // the first event for a given transition sequence)
+        let aggregateIndices = {
+            // $aggregateType : int
+        };
+
+        let users = Object.keys(userEvents);
+        users.forEach(
+            (userId) => {
+                let firstEvent = userEvents[userId][0];
+                let displayName = firstEvent.displayName;
+
+                let seq = this._getTransitionSequence(userEvents[userId]);
+                if (!aggregate[seq]) {
+                    aggregate[seq] = [];
+                    aggregateIndices[seq] = -1;
+                }
+
+                aggregate[seq].push(displayName);
+
+                if (aggregateIndices[seq] === -1 || firstEvent.index < aggregateIndices[seq]) {
+                    aggregateIndices[seq] = firstEvent.index;
+                }
+            }
+        );
+
+        return {
+            names: aggregate,
+            indices: aggregateIndices,
+        };
+    },
+
     render: function() {
         let eventsToRender = this.props.events;
         let fewEvents = eventsToRender.length < this.props.threshold;
@@ -346,46 +386,13 @@ module.exports = React.createClass({
             });
         });
 
-        // A map of aggregate type to arrays of display names. Each aggregate type
-        // is a comma-delimited string of transitions, e.g. "joined,left,kicked".
-        // The array of display names is the array of users who went through that
-        // sequence during eventsToRender.
-        let aggregate = {
-            // $aggregateType : []:string
-        };
-        // A map of aggregate types to the indices that order them (the index of
-        // the first event for a given transition sequence)
-        let aggregateIndices = {
-            // $aggregateType : int
-        };
-
-        let users = Object.keys(userEvents);
-        users.forEach(
-            (userId) => {
-                let firstEvent = userEvents[userId][0];
-                let displayName = firstEvent.displayName;
-
-                let seq = this._getTransitionSequence(userEvents[userId]);
-                if (!aggregate[seq]) {
-                    aggregate[seq] = [];
-                    aggregateIndices[seq] = -1;
-                }
-
-                if (aggregate[seq].indexOf(displayName) === -1) {
-                    aggregate[seq].push(displayName);
-                }
-
-                if (aggregateIndices[seq] === -1 || firstEvent.index < aggregateIndices[seq]) {
-                    aggregateIndices[seq] = firstEvent.index;
-                }
-            }
-        );
+        let aggregate = this._getAggregate(userEvents);
 
         // Sort types by order of lowest event index within sequence
-        let orderedTransitionSequences = Object.keys(aggregate).sort((seq1, seq2) => aggregateIndices[seq1] > aggregateIndices[seq2]);
+        let orderedTransitionSequences = Object.keys(aggregate.names).sort((seq1, seq2) => aggregate.indices[seq1] > aggregate.indices[seq2]);
 
         let avatars = this._renderAvatars(avatarMembers);
-        let summary = this._renderSummary(aggregate, orderedTransitionSequences);
+        let summary = this._renderSummary(aggregate.names, orderedTransitionSequences);
         let toggleButton = (
             <a className="mx_MemberEventListSummary_toggle" onClick={this._toggleSummary}>
                 {expanded ? 'collapse' : 'expand'}
diff --git a/test/components/views/elements/MemberEventListSummary-test.js b/test/components/views/elements/MemberEventListSummary-test.js
index 61e0f9627b..39a79eaf6c 100644
--- a/test/components/views/elements/MemberEventListSummary-test.js
+++ b/test/components/views/elements/MemberEventListSummary-test.js
@@ -6,7 +6,7 @@ const sdk = require('matrix-react-sdk');
 const MemberEventListSummary = sdk.getComponent('views.elements.MemberEventListSummary');
 
 const testUtils = require('../../../test-utils');
-describe('MemberEventListSummary', function() {
+describe.only('MemberEventListSummary', function() {
     let sandbox;
     let parentDiv;
 

From 78e2c787e08b7fef7d50cf02cf9aceb907d8670a Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Wed, 18 Jan 2017 11:53:17 +0100
Subject: [PATCH 177/289] Refactor and document test helpers.

---
 .../elements/MemberEventListSummary-test.js   | 64 ++++++++++---------
 test/test-utils.js                            | 12 +++-
 2 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/test/components/views/elements/MemberEventListSummary-test.js b/test/components/views/elements/MemberEventListSummary-test.js
index 39a79eaf6c..93c085f88c 100644
--- a/test/components/views/elements/MemberEventListSummary-test.js
+++ b/test/components/views/elements/MemberEventListSummary-test.js
@@ -4,12 +4,15 @@ const ReactDOM = require("react-dom");
 const ReactTestUtils = require('react-addons-test-utils');
 const sdk = require('matrix-react-sdk');
 const MemberEventListSummary = sdk.getComponent('views.elements.MemberEventListSummary');
+var jssdk = require('matrix-js-sdk');
+var MatrixEvent = jssdk.MatrixEvent;
 
 const testUtils = require('../../../test-utils');
 describe.only('MemberEventListSummary', function() {
     let sandbox;
     let parentDiv;
 
+    // Generate dummy event tiles for use in simulating an expanded MELS
     const generateTiles = (events) => {
         return events.map((e) => {
             return (
@@ -20,42 +23,41 @@ describe.only('MemberEventListSummary', function() {
         });
     };
 
+    /**
+     * Generates a membership event with the target of the event set as a mocked RoomMember based
+     * on `parameters.userId`.
+     * @param {string} eventId the ID of the event.
+     * @param {object} parameters the parameters to use to create the event.
+     * @param {string} parameters.membership the membership to assign to `content.membership`
+     * @param {string} parameters.userId the state key and target userId of the event. If
+     * `parameters.senderId` is not specified, this is also used as the event sender.
+     * @param {string} parameters.prevMembership the membership to assign to
+     * `prev_content.membership`.
+     * @param {string} parameters.senderId the user ID of the sender of the event. Optional.
+     * Defaults to `parameters.userId`.
+     * @returns {MatrixEvent} the event created.
+     */
     const generateMembershipEvent = (eventId, parameters) => {
-        let membership = parameters.membership;
-        let userId = parameters.userId;
-        let prevMembership = parameters.prevMembership;
-        let senderId = parameters.senderId;
-        return {
-            content: {
-                membership: membership,
-            },
-            target: {
-                name: userId.match(/@([^:]*):/)[1],
+        let e = testUtils.mkMembership({
+            event: true,
+            user: parameters.senderId || parameters.userId,
+            skey: parameters.userId,
+            mship: parameters.membership,
+            prevMship: parameters.prevMembership,
+            target : {
+                name: parameters.userId.match(/@([^:]*):/)[1], // Use localpart as display name
+                userId: parameters.userId,
                 getAvatarUrl: () => {
                     return "avatar.jpeg";
                 },
-                userId: userId,
             },
-            getId: () => {
-                return eventId;
-            },
-            getContent: function() {
-                return this.content;
-            },
-            getPrevContent: function() {
-                return {
-                    membership: prevMembership ? prevMembership : this.content,
-                };
-            },
-            getSender: () => {
-                return senderId || userId;
-            },
-            getStateKey: () => {
-                return userId;
-            },
-        };
+        });
+        // Override random event ID
+        e.event.event_id = eventId;
+        return e;
     };
 
+    // Generate mock MatrixEvents from the array of parameters
     const generateEvents = (parameters) => {
         const res = [];
         for (let i = 0; i < parameters.length; i++) {
@@ -64,6 +66,9 @@ describe.only('MemberEventListSummary', function() {
         return res;
     };
 
+    // Generate the same sequence of `events` for `n` users, where each user ID
+    // is created by replacing the first "$" in userIdTemplate with `i` for
+    // `i = 0 .. n`.
     const generateEventsForUsers = (userIdTemplate, n, events) => {
         let eventsForUsers = [];
         let userId = "";
@@ -71,7 +76,6 @@ describe.only('MemberEventListSummary', function() {
             userId = userIdTemplate.replace('$', i);
             events.forEach((e) => {
                 e.userId = userId;
-                return e;
             });
             eventsForUsers = eventsForUsers.concat(generateEvents(events));
         }
diff --git a/test/test-utils.js b/test/test-utils.js
index db405c2e1a..cdfae4421c 100644
--- a/test/test-utils.js
+++ b/test/test-utils.js
@@ -108,6 +108,7 @@ export function mkEvent(opts) {
         room_id: opts.room,
         sender: opts.user,
         content: opts.content,
+        prev_content: opts.prev_content,
         event_id: "$" + Math.random() + "-" + Math.random(),
         origin_server_ts: opts.ts,
     };
@@ -150,7 +151,9 @@ export function mkPresence(opts) {
  * @param {Object} opts Values for the membership.
  * @param {string} opts.room The room ID for the event.
  * @param {string} opts.mship The content.membership for the event.
+ * @param {string} opts.prevMship The prev_content.membership for the event.
  * @param {string} opts.user The user ID for the event.
+ * @param {RoomMember} opts.target The target of the event.
  * @param {string} opts.skey The other user ID for the event if applicable
  * e.g. for invites/bans.
  * @param {string} opts.name The content.displayname for the event.
@@ -169,9 +172,16 @@ export function mkMembership(opts) {
     opts.content = {
         membership: opts.mship
     };
+    if (opts.prevMship) {
+        opts.prev_content = { membership: opts.prevMship };
+    }
     if (opts.name) { opts.content.displayname = opts.name; }
     if (opts.url) { opts.content.avatar_url = opts.url; }
-    return mkEvent(opts);
+    let e = mkEvent(opts);
+    if (opts.target) {
+        e.target = opts.target;
+    }
+    return e;
 };
 
 /**

From 867a532e5e5aa5bce40e2eec68c79d7c6c5b5352 Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Wed, 18 Jan 2017 11:58:54 +0100
Subject: [PATCH 178/289] Remove parentDiv from tests

---
 .../elements/MemberEventListSummary-test.js   | 29 +++++++++----------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/test/components/views/elements/MemberEventListSummary-test.js b/test/components/views/elements/MemberEventListSummary-test.js
index 93c085f88c..325b1d6b17 100644
--- a/test/components/views/elements/MemberEventListSummary-test.js
+++ b/test/components/views/elements/MemberEventListSummary-test.js
@@ -10,7 +10,6 @@ var MatrixEvent = jssdk.MatrixEvent;
 const testUtils = require('../../../test-utils');
 describe.only('MemberEventListSummary', function() {
     let sandbox;
-    let parentDiv;
 
     // Generate dummy event tiles for use in simulating an expanded MELS
     const generateTiles = (events) => {
@@ -85,8 +84,6 @@ describe.only('MemberEventListSummary', function() {
     beforeEach(function() {
         testUtils.beforeEach(this);
         sandbox = testUtils.stubClient();
-        parentDiv = document.createElement('div');
-        document.body.appendChild(parentDiv);
     });
 
     afterEach(function() {
@@ -155,7 +152,7 @@ describe.only('MemberEventListSummary', function() {
             threshold : 3,
         };
 
-        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
         const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
         const summaryText = summary.innerText;
 
@@ -189,7 +186,7 @@ describe.only('MemberEventListSummary', function() {
             threshold : 3,
         };
 
-        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
         const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
         const summaryText = summary.innerText;
 
@@ -225,7 +222,7 @@ describe.only('MemberEventListSummary', function() {
             threshold : 3,
         };
 
-        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
         const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
         const summaryText = summary.innerText;
 
@@ -258,7 +255,7 @@ describe.only('MemberEventListSummary', function() {
             threshold : 3,
         };
 
-        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
         const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
         const summaryText = summary.innerText;
 
@@ -292,7 +289,7 @@ describe.only('MemberEventListSummary', function() {
             threshold : 3,
         };
 
-        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
         const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
         const summaryText = summary.innerText;
 
@@ -318,7 +315,7 @@ describe.only('MemberEventListSummary', function() {
             threshold : 3,
         };
 
-        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
         const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
         const summaryText = summary.innerText;
 
@@ -349,7 +346,7 @@ describe.only('MemberEventListSummary', function() {
             threshold : 3,
         };
 
-        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
         const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
         const summaryText = summary.innerText;
 
@@ -389,7 +386,7 @@ describe.only('MemberEventListSummary', function() {
             threshold : 3,
         };
 
-        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
         const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
         const summaryText = summary.innerText;
 
@@ -415,7 +412,7 @@ describe.only('MemberEventListSummary', function() {
             threshold : 3,
         };
 
-        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
         const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
         const summaryText = summary.innerText;
 
@@ -439,7 +436,7 @@ describe.only('MemberEventListSummary', function() {
             threshold : 1, // threshold = 1 to force collapse
         };
 
-        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
         const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
         const summaryText = summary.innerText;
 
@@ -465,7 +462,7 @@ describe.only('MemberEventListSummary', function() {
             threshold : 3,
         };
 
-        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
         const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
         const summaryText = summary.innerText;
 
@@ -490,7 +487,7 @@ describe.only('MemberEventListSummary', function() {
             threshold : 3,
         };
 
-        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
         const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
         const summaryText = summary.innerText;
 
@@ -513,7 +510,7 @@ describe.only('MemberEventListSummary', function() {
             threshold : 3,
         };
 
-        const instance = ReactDOM.render(<MemberEventListSummary {...props} />, parentDiv);
+        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
         const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
         const summaryText = summary.innerText;
 

From 41d2697e28719bd45ff041ca33c45d6867588ee8 Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Wed, 18 Jan 2017 12:03:38 +0100
Subject: [PATCH 179/289] Remove `done`, const instead of var for `requier`s

---
 .../elements/MemberEventListSummary-test.js   | 62 +++++--------------
 1 file changed, 17 insertions(+), 45 deletions(-)

diff --git a/test/components/views/elements/MemberEventListSummary-test.js b/test/components/views/elements/MemberEventListSummary-test.js
index 325b1d6b17..7094520f7b 100644
--- a/test/components/views/elements/MemberEventListSummary-test.js
+++ b/test/components/views/elements/MemberEventListSummary-test.js
@@ -4,8 +4,8 @@ const ReactDOM = require("react-dom");
 const ReactTestUtils = require('react-addons-test-utils');
 const sdk = require('matrix-react-sdk');
 const MemberEventListSummary = sdk.getComponent('views.elements.MemberEventListSummary');
-var jssdk = require('matrix-js-sdk');
-var MatrixEvent = jssdk.MatrixEvent;
+const jssdk = require('matrix-js-sdk');
+const MatrixEvent = jssdk.MatrixEvent;
 
 const testUtils = require('../../../test-utils');
 describe.only('MemberEventListSummary', function() {
@@ -90,7 +90,7 @@ describe.only('MemberEventListSummary', function() {
         sandbox.restore();
     });
 
-    it('renders expanded events if there are less than props.threshold', function(done) {
+    it('renders expanded events if there are less than props.threshold', function() {
         const events = generateEvents([
             {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
         ]);
@@ -110,10 +110,9 @@ describe.only('MemberEventListSummary', function() {
         expect(result.props.children).toEqual([
           <div className="event_tile" key="event0">Expanded membership</div>,
         ]);
-        done();
     });
 
-    it('renders expanded events if there are less than props.threshold', function(done) {
+    it('renders expanded events if there are less than props.threshold', function() {
         const events = generateEvents([
             {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
             {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
@@ -135,10 +134,9 @@ describe.only('MemberEventListSummary', function() {
           <div className="event_tile" key="event0">Expanded membership</div>,
           <div className="event_tile" key="event1">Expanded membership</div>,
         ]);
-        done();
     });
 
-    it('renders collapsed events if events.length = props.threshold', function(done) {
+    it('renders collapsed events if events.length = props.threshold', function() {
         const events = generateEvents([
             {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
             {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
@@ -157,11 +155,9 @@ describe.only('MemberEventListSummary', function() {
         const summaryText = summary.innerText;
 
         expect(summaryText).toBe("user_1 joined and left and joined");
-
-        done();
     });
 
-    it('truncates long join,leave repetitions', function(done) {
+    it('truncates long join,leave repetitions', function() {
         const events = generateEvents([
             {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
             {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
@@ -191,11 +187,9 @@ describe.only('MemberEventListSummary', function() {
         const summaryText = summary.innerText;
 
         expect(summaryText).toBe("user_1 joined and left 7 times");
-
-        done();
     });
 
-    it('truncates long join,leave repetitions inbetween other events', function(done) {
+    it('truncates long join,leave repetitions inbetween other events', function() {
         const events = generateEvents([
             {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
             {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
@@ -227,11 +221,9 @@ describe.only('MemberEventListSummary', function() {
         const summaryText = summary.innerText;
 
         expect(summaryText).toBe("user_1 was unbanned, joined and left 7 times and was invited");
-
-        done();
     });
 
-    it('truncates multiple sequences of repetitions with other events inbetween', function(done) {
+    it('truncates multiple sequences of repetitions with other events inbetween', function() {
         const events = generateEvents([
             {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
             {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
@@ -260,11 +252,9 @@ describe.only('MemberEventListSummary', function() {
         const summaryText = summary.innerText;
 
         expect(summaryText).toBe("user_1 was unbanned, joined and left 2 times, was banned, joined and left 3 times and was invited");
-
-        done();
     });
 
-    it('handles multiple users following the same sequence of memberships', function(done) {
+    it('handles multiple users following the same sequence of memberships', function() {
         const events = generateEvents([
             // user_1
             {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
@@ -294,11 +284,9 @@ describe.only('MemberEventListSummary', function() {
         const summaryText = summary.innerText;
 
         expect(summaryText).toBe("user_1 and 1 other were unbanned, joined and left 2 times and were banned");
-
-        done();
     });
 
-    it('handles many users following the same sequence of memberships', function(done) {
+    it('handles many users following the same sequence of memberships', function() {
         const events = generateEventsForUsers("@user_$:some.domain", 20, [
             {prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
             {prevMembership: "leave", membership: "join"},
@@ -320,11 +308,9 @@ describe.only('MemberEventListSummary', function() {
         const summaryText = summary.innerText;
 
         expect(summaryText).toBe("user_0 and 19 others were unbanned, joined and left 2 times and were banned");
-
-        done();
     });
 
-    it('correctly orders sequences of transitions by the order of their first event', function(done) {
+    it('correctly orders sequences of transitions by the order of their first event', function() {
         const events = generateEvents([
             {userId : "@user_2:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
             {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
@@ -353,11 +339,9 @@ describe.only('MemberEventListSummary', function() {
         expect(summaryText).toBe(
             "user_2 was unbanned and joined and left 2 times, user_1 was unbanned, joined and left 2 times and was banned"
         );
-
-        done();
     });
 
-    it('correctly identifies transitions', function(done) {
+    it('correctly identifies transitions', function() {
         const events = generateEvents([
             // invited
             {userId : "@user_1:some.domain", membership: "invite"},
@@ -393,11 +377,9 @@ describe.only('MemberEventListSummary', function() {
         expect(summaryText).toBe(
             "user_1 was invited, was banned, joined, rejected their invitation, left, had their invitation withdrawn, was unbanned, was kicked and left"
         );
-
-        done();
     });
 
-    it('handles invitation plurals correctly when there are multiple users', function(done) {
+    it('handles invitation plurals correctly when there are multiple users', function() {
         const events = generateEvents([
             {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave"},
             {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave", senderId: "@some_other_user:some.domain"},
@@ -419,11 +401,9 @@ describe.only('MemberEventListSummary', function() {
         expect(summaryText).toBe(
             "user_1 and 1 other rejected their invitations and had their invitations withdrawn"
         );
-
-        done();
     });
 
-    it('handles invitation plurals correctly when there are multiple invites', function(done) {
+    it('handles invitation plurals correctly when there are multiple invites', function() {
         const events = generateEvents([
             {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave"},
             {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave"},
@@ -443,11 +423,9 @@ describe.only('MemberEventListSummary', function() {
         expect(summaryText).toBe(
             "user_1 rejected their invitations 2 times"
         );
-
-        done();
     });
 
-    it('handles a summary length = 2, with no "others"', function(done) {
+    it('handles a summary length = 2, with no "others"', function() {
         const events = generateEvents([
             {userId : "@user_1:some.domain", membership: "join"},
             {userId : "@user_1:some.domain", membership: "join"},
@@ -469,11 +447,9 @@ describe.only('MemberEventListSummary', function() {
         expect(summaryText).toBe(
             "user_1 and user_2 joined 2 times"
         );
-
-        done();
     });
 
-    it('handles a summary length = 2, with 1 "other"', function(done) {
+    it('handles a summary length = 2, with 1 "other"', function() {
         const events = generateEvents([
             {userId : "@user_1:some.domain", membership: "join"},
             {userId : "@user_2:some.domain", membership: "join"},
@@ -494,11 +470,9 @@ describe.only('MemberEventListSummary', function() {
         expect(summaryText).toBe(
             "user_1, user_2 and 1 other joined"
         );
-
-        done();
     });
 
-    it('handles a summary length = 2, with many "others"', function(done) {
+    it('handles a summary length = 2, with many "others"', function() {
         const events = generateEventsForUsers("@user_$:some.domain", 20, [
             {membership: "join"},
         ]);
@@ -517,7 +491,5 @@ describe.only('MemberEventListSummary', function() {
         expect(summaryText).toBe(
             "user_0, user_1 and 18 others joined"
         );
-
-        done();
     });
 });
\ No newline at end of file

From 31df78f946ef64f73007c6183d17e1c4dc326448 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 18 Jan 2017 11:39:44 +0000
Subject: [PATCH 180/289] Use text-encoding-utf-8 as a TextEncoder polyfill

Somebody else seems to have done a good job of polyfilling TextEncoder, so
let's use that.
---
 package.json                                  |   1 +
 .../views/dialogs/ExportE2eKeysDialog.js      |  84 +++++++++++
 src/utils/MegolmExportEncryption.js           |   7 +-
 src/utils/TextDecoderPolyfill.js              | 131 ------------------
 src/utils/TextEncoderPolyfill.js              |  78 -----------
 test/utils/TextDecoderPolyfill-test.js        |  85 ------------
 test/utils/TextEncoderPolyfill-test.js        |  39 ------
 7 files changed, 89 insertions(+), 336 deletions(-)
 create mode 100644 src/async-components/views/dialogs/ExportE2eKeysDialog.js
 delete mode 100644 src/utils/TextDecoderPolyfill.js
 delete mode 100644 src/utils/TextEncoderPolyfill.js
 delete mode 100644 test/utils/TextDecoderPolyfill-test.js
 delete mode 100644 test/utils/TextEncoderPolyfill-test.js

diff --git a/package.json b/package.json
index 1eaee39c41..e0cfb72148 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "react-dom": "^15.4.0",
     "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef",
     "sanitize-html": "^1.11.1",
+    "text-encoding-utf-8": "^1.0.1",
     "velocity-vector": "vector-im/velocity#059e3b2",
     "whatwg-fetch": "^1.0.0"
   },
diff --git a/src/async-components/views/dialogs/ExportE2eKeysDialog.js b/src/async-components/views/dialogs/ExportE2eKeysDialog.js
new file mode 100644
index 0000000000..284d299f4b
--- /dev/null
+++ b/src/async-components/views/dialogs/ExportE2eKeysDialog.js
@@ -0,0 +1,84 @@
+/*
+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.
+*/
+
+import React from 'react';
+
+import sdk from '../../../index';
+
+import * as MegolmExportEncryption from '../../../utils/MegolmExportEncryption';
+
+export default React.createClass({
+    displayName: 'ExportE2eKeysDialog',
+
+    getInitialState: function() {
+        return {
+            collectedPassword: false,
+        };
+    },
+
+    _onPassphraseFormSubmit: function(ev) {
+        ev.preventDefault();
+        console.log(this.refs.passphrase1.value);
+        return false;
+    },
+
+    render: function() {
+        let content;
+        if (!this.state.collectedPassword) {
+            content = (
+                <div className="mx_Dialog_content">
+                    <p>
+                        This process will allow you to export the keys for messages
+                        you have received in encrypted rooms to a local file. You
+                        will then be able to import the file into another Matrix
+                        client in the future, so that client will also be able to
+                        decrypt these messages.
+                    </p>
+                    <p>
+                        The exported file will allow anyone who can read it to decrypt
+                        any encrypted messages that you can see, so you should be
+                        careful to keep it secure. To help with this, you should enter
+                        a passphrase below, which will be used to encrypt the exported
+                        data. It will only be possible to import the data by using the
+                        same passphrase.
+                    </p>
+                    <form onSubmit={this._onPassphraseFormSubmit}>
+                        <div className="mx_TextInputDialog_label">
+                            <label htmlFor="passphrase1">Enter passphrase</label>
+                        </div>
+                        <div>
+                            <input ref="passphrase1" id="passphrase1"
+                                className="mx_TextInputDialog_input"
+                                autoFocus={true} size="64" type="password"/>
+                        </div>
+                        <div className="mx_Dialog_buttons">
+                            <input className="mx_Dialog_primary" type="submit" value="Export" />
+                        </div>
+                    </form>
+                </div>
+            );
+        }
+
+        return (
+            <div className="mx_exportE2eKeysDialog">
+                <div className="mx_Dialog_title">
+                    Export room keys
+                </div>
+                {content}
+            </div>
+        );
+    },
+});
diff --git a/src/utils/MegolmExportEncryption.js b/src/utils/MegolmExportEncryption.js
index 351f58aaa6..e3ca7e68f2 100644
--- a/src/utils/MegolmExportEncryption.js
+++ b/src/utils/MegolmExportEncryption.js
@@ -17,13 +17,14 @@ limitations under the License.
 "use strict";
 
 // polyfill textencoder if necessary
+import * as TextEncodingUtf8 from 'text-encoding-utf-8';
 let TextEncoder = window.TextEncoder;
 if (!TextEncoder) {
-    TextEncoder = require('./TextEncoderPolyfill');
+    TextEncoder = TextEncodingUtf8.TextEncoder;
 }
 let TextDecoder = window.TextDecoder;
-if (TextDecoder) {
-    TextDecoder = require('./TextDecoderPolyfill');
+if (!TextDecoder) {
+    TextDecoder = TextEncodingUtf8.TextDecoder;
 }
 
 const subtleCrypto = window.crypto.subtle || window.crypto.webkitSubtle;
diff --git a/src/utils/TextDecoderPolyfill.js b/src/utils/TextDecoderPolyfill.js
deleted file mode 100644
index e203676bb7..0000000000
--- a/src/utils/TextDecoderPolyfill.js
+++ /dev/null
@@ -1,131 +0,0 @@
-/*
-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.
-*/
-
-"use strict";
-
-// Polyfill for TextDecoder.
-
-const REPLACEMENT_CHAR = '\uFFFD';
-
-export default class TextDecoder {
-    /**
-     * Decode a UTF-8 byte array as a javascript string
-     *
-     * @param {Uint8Array} u8Array UTF-8-encoded onput
-     * @return {str}
-     */
-    decode(u8Array) {
-        let u0, u1, u2, u3;
-
-        let str = '';
-        let idx = 0;
-        while (idx < u8Array.length) {
-            u0 = u8Array[idx++];
-            if (!(u0 & 0x80)) {
-                str += String.fromCharCode(u0);
-                continue;
-            }
-
-            if ((u0 & 0xC0) != 0xC0) {
-                // continuation byte where we expect a leading byte
-                str += REPLACEMENT_CHAR;
-                continue;
-            }
-
-            if (u0 > 0xF4) {
-                // this would imply a 5-byte or longer encoding, which is
-                // invalid and unsupported here.
-                str += REPLACEMENT_CHAR;
-                continue;
-            }
-
-            u1 = u8Array[idx++];
-            if (u1 === undefined) {
-                str += REPLACEMENT_CHAR;
-                continue;
-            }
-
-            if ((u1 & 0xC0) != 0x80) {
-                // leading byte where we expect a continuation byte
-                str += REPLACEMENT_CHAR.repeat(2);
-                continue;
-            }
-            u1 &= 0x3F;
-            if (!(u0 & 0x20)) {
-                const u = ((u0 & 0x1F) << 6) | u1;
-                if (u < 0x80) {
-                    // over-long
-                    str += REPLACEMENT_CHAR.repeat(2);
-                } else {
-                    str += String.fromCharCode(u);
-                }
-                continue;
-            }
-
-            u2 = u8Array[idx++];
-            if (u2 === undefined) {
-                str += REPLACEMENT_CHAR.repeat(2);
-                continue;
-            }
-            if ((u2 & 0xC0) != 0x80) {
-                // leading byte where we expect a continuation byte
-                str += REPLACEMENT_CHAR.repeat(3);
-                continue;
-            }
-            u2 &= 0x3F;
-            if (!(u0 & 0x10)) {
-                const u = ((u0 & 0x0F) << 12) | (u1 << 6) | u2;
-                if (u < 0x800) {
-                    // over-long
-                    str += REPLACEMENT_CHAR.repeat(3);
-                } else if (u == 0xFEFF && idx == 3) {
-                    // byte-order mark: do not add to output
-                } else {
-                    str += String.fromCharCode(u);
-                }
-                continue;
-            }
-
-            u3 = u8Array[idx++];
-            if (u3 === undefined) {
-                str += REPLACEMENT_CHAR.repeat(3);
-                continue;
-            }
-            if ((u3 & 0xC0) != 0x80) {
-                // leading byte where we expect a continuation byte
-                str += REPLACEMENT_CHAR.repeat(4);
-                continue;
-            }
-            u3 &= 0x3F;
-            const u = ((u0 & 7) << 18) | (u1 << 12) | (u2 << 6) | u3;
-            if (u < 0x10000) {
-                // over-long
-                str += REPLACEMENT_CHAR.repeat(4);
-                continue;
-            }
-            if (u > 0x1FFFF) {
-                // unicode stops here.
-                str += REPLACEMENT_CHAR.repeat(4);
-                continue;
-            }
-
-            // encode as utf-16
-            const v = u - 0x10000;
-            str += String.fromCharCode(0xD800 | (v >> 10), 0xDC00 | (v & 0x3FF));
-        }
-        return str;
-    }
-}
diff --git a/src/utils/TextEncoderPolyfill.js b/src/utils/TextEncoderPolyfill.js
deleted file mode 100644
index 41ee4782a9..0000000000
--- a/src/utils/TextEncoderPolyfill.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/*
-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.
-*/
-
-"use strict";
-
-// Polyfill for TextEncoder. Based on emscripten's stringToUTF8Array.
-
-function utf8len(str) {
-    var len = 0;
-    for (var i = 0; i < str.length; ++i) {
-        var u = str.charCodeAt(i);
-        if (u >= 0xD800 && u <= 0xDFFF && i < str.length-1) {
-            // lead surrogate - combine with next surrogate
-            u = 0x10000 + ((u & 0x3FF) << 10) | (str.charCodeAt(++i) & 0x3FF);
-        }
-
-        if (u <= 0x7F) {
-            ++len;
-        } else if (u <= 0x7FF) {
-            len += 2;
-        } else if (u <= 0xFFFF) {
-            len += 3;
-        } else {
-            len += 4;
-        }
-    }
-    return len;
-}
-
-export default class TextEncoder {
-    /**
-     * Encode a javascript string as utf-8
-     *
-     * @param {String} str String to encode
-     * @return {Uint8Array} UTF-8-encoded output
-     */
-    encode(str) {
-        const outU8Array = new Uint8Array(utf8len(str));
-        var outIdx = 0;
-        for (var i = 0; i < str.length; ++i) {
-            var u = str.charCodeAt(i);
-            if (u >= 0xD800 && u <= 0xDFFF && i < str.length-1) {
-                // lead surrogate - combine with next surrogate
-                u = 0x10000 + ((u & 0x3FF) << 10) | (str.charCodeAt(++i) & 0x3FF);
-            }
-
-            if (u <= 0x7F) {
-                outU8Array[outIdx++] = u;
-            } else if (u <= 0x7FF) {
-                outU8Array[outIdx++] = 0xC0 | (u >> 6);
-                outU8Array[outIdx++] = 0x80 | (u & 0x3F);
-            } else if (u <= 0xFFFF) {
-                outU8Array[outIdx++] = 0xE0 | (u >> 12);
-                outU8Array[outIdx++] = 0x80 | ((u >> 6) & 0x3F);
-                outU8Array[outIdx++] = 0x80 | (u & 0x3F);
-            } else {
-                outU8Array[outIdx++] = 0xF0 | (u >> 18);
-                outU8Array[outIdx++] = 0x80 | ((u >> 12) & 0x3F);
-                outU8Array[outIdx++] = 0x80 | ((u >> 6) & 0x3F);
-                outU8Array[outIdx++] = 0x80 | (u & 0x3F);
-            }
-        }
-        return outU8Array;
-    }
-}
diff --git a/test/utils/TextDecoderPolyfill-test.js b/test/utils/TextDecoderPolyfill-test.js
deleted file mode 100644
index 84f5edf187..0000000000
--- a/test/utils/TextDecoderPolyfill-test.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
-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.
-*/
-
-"use strict";
-
-import TextDecoderPolyfill from 'utils/TextDecoderPolyfill';
-
-import * as testUtils from '../test-utils';
-import expect from 'expect';
-
-describe('textDecoderPolyfill', function() {
-    beforeEach(function() {
-        testUtils.beforeEach(this);
-    });
-
-    it('should correctly decode a range of strings', function() {
-        const decoder = new TextDecoderPolyfill();
-
-        expect(decoder.decode(Uint8Array.of(65, 66, 67))).toEqual('ABC');
-        expect(decoder.decode(Uint8Array.of(0xC3, 0xA6))).toEqual('æ');
-        expect(decoder.decode(Uint8Array.of(0xE2, 0x82, 0xAC))).toEqual('€');
-        expect(decoder.decode(Uint8Array.of(0xF0, 0x9F, 0x92, 0xA9))).toEqual('\uD83D\uDCA9');
-    });
-
-    it('should ignore byte-order marks', function() {
-        const decoder = new TextDecoderPolyfill();
-        expect(decoder.decode(Uint8Array.of(0xEF, 0xBB, 0xBF, 65)))
-            .toEqual('A');
-    });
-
-    it('should not ignore byte-order marks in the middle of the array', function() {
-        const decoder = new TextDecoderPolyfill();
-        expect(decoder.decode(Uint8Array.of(65, 0xEF, 0xBB, 0xBF, 66)))
-            .toEqual('A\uFEFFB');
-    });
-
-    it('should reject overlong encodings', function() {
-        const decoder = new TextDecoderPolyfill();
-
-        // euro, as 4 bytes
-        expect(decoder.decode(Uint8Array.of(65, 0xF0, 0x82, 0x82, 0xAC, 67)))
-            .toEqual('A\uFFFD\uFFFD\uFFFD\uFFFDC');
-    });
-
-    it('should reject 5 and 6-byte encodings', function() {
-        const decoder = new TextDecoderPolyfill();
-
-        expect(decoder.decode(Uint8Array.of(65, 0xF8, 0x82, 0x82, 0x82, 0x82, 67)))
-            .toEqual('A\uFFFD\uFFFD\uFFFD\uFFFD\uFFFDC');
-    });
-
-    it('should reject code points beyond 0x10000', function() {
-        const decoder = new TextDecoderPolyfill();
-
-        expect(decoder.decode(Uint8Array.of(0xF4, 0xA0, 0x80, 0x80)))
-            .toEqual('\uFFFD\uFFFD\uFFFD\uFFFD');
-    });
-
-    it('should cope with end-of-string', function() {
-        const decoder = new TextDecoderPolyfill();
-
-        expect(decoder.decode(Uint8Array.of(65, 0xC3)))
-            .toEqual('A\uFFFD');
-
-        expect(decoder.decode(Uint8Array.of(65, 0xE2, 0x82)))
-            .toEqual('A\uFFFD\uFFFD');
-
-        expect(decoder.decode(Uint8Array.of(65, 0xF0, 0x9F, 0x92)))
-            .toEqual('A\uFFFD\uFFFD\uFFFD');
-    });
-
-});
diff --git a/test/utils/TextEncoderPolyfill-test.js b/test/utils/TextEncoderPolyfill-test.js
deleted file mode 100644
index 4f422ec375..0000000000
--- a/test/utils/TextEncoderPolyfill-test.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
-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.
-*/
-
-"use strict";
-
-import TextEncoderPolyfill from 'utils/TextEncoderPolyfill';
-
-import * as testUtils from '../test-utils';
-import expect from 'expect';
-
-describe('textEncoderPolyfill', function() {
-    beforeEach(function() {
-        testUtils.beforeEach(this);
-    });
-
-    it('should correctly encode a range of strings', function() {
-        const encoder = new TextEncoderPolyfill();
-
-        expect(encoder.encode('ABC')).toEqual(Uint8Array.of(65, 66, 67));
-        expect(encoder.encode('æ')).toEqual(Uint8Array.of(0xC3, 0xA6));
-        expect(encoder.encode('€')).toEqual(Uint8Array.of(0xE2, 0x82, 0xAC));
-
-        // PILE OF POO (💩)
-        expect(encoder.encode('\uD83D\uDCA9')).toEqual(Uint8Array.of(0xF0, 0x9F, 0x92, 0xA9));
-    });
-});

From 5ef5204c8c974b8ada599e573515031e5dd2fc47 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukebarnard1@users.noreply.github.com>
Date: Wed, 18 Jan 2017 12:48:28 +0100
Subject: [PATCH 181/289] Implement simple team-based registration (#620)

* Implement simple team-based registration

Config required goes in the `teams` top-level property in config.json. This consists of an array of team objects:
```json
{
  "name": "University of Bath",
  "emailSuffix": "bath.ac.uk"
}
```
These can be selected on registration and require a user to have a certain email address in order to register as part of a team. This is for vector-im/riot-web#2940. The next step would be sending users with emails matching the emailSuffix of a team to the correct welcome page as in vector-im/riot-web#2430.
---
 src/components/structures/MatrixChat.js       |   1 +
 .../structures/login/Registration.js          |  11 ++
 .../views/login/RegistrationForm.js           | 108 ++++++++++++++++--
 3 files changed, 108 insertions(+), 12 deletions(-)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index c47109db94..4d98e3f09e 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -1003,6 +1003,7 @@ module.exports = React.createClass({
                     defaultHsUrl={this.getDefaultHsUrl()}
                     defaultIsUrl={this.getDefaultIsUrl()}
                     brand={this.props.config.brand}
+                    teamsConfig={this.props.config.teamsConfig}
                     customHsUrl={this.getCurrentHsUrl()}
                     customIsUrl={this.getCurrentIsUrl()}
                     registrationUrl={this.props.registrationUrl}
diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js
index 269aabed9b..fb24b61504 100644
--- a/src/components/structures/login/Registration.js
+++ b/src/components/structures/login/Registration.js
@@ -49,6 +49,16 @@ module.exports = React.createClass({
         email: React.PropTypes.string,
         username: React.PropTypes.string,
         guestAccessToken: React.PropTypes.string,
+        teamsConfig: React.PropTypes.shape({
+            // Email address to request new teams
+            supportEmail: React.PropTypes.string,
+            teams: React.PropTypes.arrayOf(React.PropTypes.shape({
+                // The displayed name of the team
+                "name": React.PropTypes.string,
+                // The suffix with which every team email address ends
+                "emailSuffix": React.PropTypes.string,
+            })).required,
+        }),
 
         defaultDeviceDisplayName: React.PropTypes.string,
 
@@ -254,6 +264,7 @@ module.exports = React.createClass({
                         defaultUsername={this.state.formVals.username}
                         defaultEmail={this.state.formVals.email}
                         defaultPassword={this.state.formVals.password}
+                        teamsConfig={this.props.teamsConfig}
                         guestUsername={this.props.username}
                         minPasswordLength={MIN_PASSWORD_LENGTH}
                         onError={this.onFormValidationFailed}
diff --git a/src/components/views/login/RegistrationForm.js b/src/components/views/login/RegistrationForm.js
index 33809fbfd6..3e07302a91 100644
--- a/src/components/views/login/RegistrationForm.js
+++ b/src/components/views/login/RegistrationForm.js
@@ -38,6 +38,16 @@ module.exports = React.createClass({
         defaultEmail: React.PropTypes.string,
         defaultUsername: React.PropTypes.string,
         defaultPassword: React.PropTypes.string,
+        teamsConfig: React.PropTypes.shape({
+            // Email address to request new teams
+            supportEmail: React.PropTypes.string,
+            teams: React.PropTypes.arrayOf(React.PropTypes.shape({
+                // The displayed name of the team
+                "name": React.PropTypes.string,
+                // The suffix with which every team email address ends
+                "emailSuffix": React.PropTypes.string,
+            })).required,
+        }),
 
         // A username that will be used if no username is entered.
         // Specifying this param will also warn the user that entering
@@ -62,7 +72,8 @@ module.exports = React.createClass({
 
     getInitialState: function() {
         return {
-            fieldValid: {}
+            fieldValid: {},
+            selectedTeam: null,
         };
     },
 
@@ -119,6 +130,25 @@ module.exports = React.createClass({
         }
     },
 
+    onSelectTeam: function(teamIndex) {
+        let team = this._getSelectedTeam(teamIndex);
+        if (team) {
+            this.refs.email.value = this.refs.email.value.split("@")[0];
+        }
+        this.setState({
+            selectedTeam: team,
+            showSupportEmail: teamIndex === "other",
+        });
+    },
+
+    _getSelectedTeam: function(teamIndex) {
+        if (this.props.teamsConfig &&
+            this.props.teamsConfig.teams[teamIndex]) {
+            return this.props.teamsConfig.teams[teamIndex];
+        }
+        return null;
+    },
+
     /**
      * Returns true if all fields were valid last time
      * they were validated.
@@ -139,11 +169,15 @@ module.exports = React.createClass({
 
         switch (field_id) {
             case FIELD_EMAIL:
-                this.markFieldValid(
-                    field_id,
-                    this.refs.email.value == '' || Email.looksValid(this.refs.email.value),
-                    "RegistrationForm.ERR_EMAIL_INVALID"
-                );
+                let email = this.refs.email.value;
+                if (this.props.teamsConfig) {
+                    let team = this.state.selectedTeam;
+                    if (team) {
+                        email = email + "@" + team.emailSuffix;
+                    }
+                }
+                let valid = email === '' || Email.looksValid(email);
+                this.markFieldValid(field_id, valid, "RegistrationForm.ERR_EMAIL_INVALID");
                 break;
             case FIELD_USERNAME:
                 // XXX: SPEC-1
@@ -222,17 +256,64 @@ module.exports = React.createClass({
         return cls;
     },
 
+    _renderEmailInputSuffix: function() {
+        let suffix = null;
+        if (!this.state.selectedTeam) {
+            return suffix;
+        }
+        let team = this.state.selectedTeam;
+        if (team) {
+            suffix = "@" + team.emailSuffix;
+        }
+        return suffix;
+    },
+
     render: function() {
         var self = this;
-        var emailSection, registerButton;
+        var emailSection, teamSection, teamAdditionSupport, registerButton;
         if (this.props.showEmail) {
+            let emailSuffix = this._renderEmailInputSuffix();
             emailSection = (
-                <input type="text" ref="email"
-                    autoFocus={true} placeholder="Email address (optional)"
-                    defaultValue={this.props.defaultEmail}
-                    className={this._classForField(FIELD_EMAIL, 'mx_Login_field')}
-                    onBlur={function() {self.validateField(FIELD_EMAIL)}} />
+                <div>
+                    <input type="text" ref="email"
+                        autoFocus={true} placeholder="Email address (optional)"
+                        defaultValue={this.props.defaultEmail}
+                        className={this._classForField(FIELD_EMAIL, 'mx_Login_field')}
+                        onBlur={function() {self.validateField(FIELD_EMAIL)}}
+                        value={self.state.email}/>
+                    {emailSuffix ? <input className="mx_Login_field" value={emailSuffix} disabled/> : null }
+                </div>
             );
+            if (this.props.teamsConfig) {
+                teamSection = (
+                    <select
+                        defaultValue="-1"
+                        className="mx_Login_field"
+                        onBlur={function() {self.validateField(FIELD_EMAIL)}}
+                        onChange={function(ev) {self.onSelectTeam(ev.target.value)}}
+                    >
+                        <option key="-1" value="-1">No team</option>
+                        {this.props.teamsConfig.teams.map((t, index) => {
+                            return (
+                                <option key={index} value={index}>
+                                    {t.name}
+                                </option>
+                            );
+                        })}
+                        <option key="-2" value="other">Other</option>
+                    </select>
+                );
+                if (this.props.teamsConfig.supportEmail && this.state.showSupportEmail) {
+                    teamAdditionSupport = (
+                        <span>
+                            If your team is not listed, email&nbsp;
+                            <a href={"mailto:" + this.props.teamsConfig.supportEmail}>
+                                {this.props.teamsConfig.supportEmail}
+                            </a>
+                        </span>
+                    );
+                }
+            }
         }
         if (this.props.onRegisterClick) {
             registerButton = (
@@ -248,6 +329,9 @@ module.exports = React.createClass({
         return (
             <div>
                 <form onSubmit={this.onSubmit}>
+                    {teamSection}
+                    {teamAdditionSupport}
+                    <br />
                     {emailSection}
                     <br />
                     <input type="text" ref="username"

From 6d2e521421d03032a3e7c5001bec42545c469512 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20L=C3=B6thberg?= <johannes@kyriasis.com>
Date: Wed, 18 Jan 2017 14:25:11 +0100
Subject: [PATCH 182/289] Markdown: Add comment about out function override
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Johannes Löthberg <johannes@kyriasis.com>
---
 src/Markdown.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/Markdown.js b/src/Markdown.js
index e6f5f59f01..35ae42f770 100644
--- a/src/Markdown.js
+++ b/src/Markdown.js
@@ -78,6 +78,9 @@ export default class Markdown {
                 }
             }
         } else {
+            // The default `out` function only sends the input through an XML
+            // escaping function, which causes messages to be entity encoded,
+            // which we don't want in this case.
             renderer.out = function(s) {
                 this.lit(s);
             }

From 3d30553b7fa21f5884abd26c27212626f38d2ce2 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 18 Jan 2017 14:06:47 +0000
Subject: [PATCH 183/289] review fixes, plus unbreak to work with new webpack
 layout

---
 src/Tinter.js                             |  26 ++-
 src/components/structures/MatrixChat.js   |   9 +-
 src/components/structures/UserSettings.js | 184 ++++++++++++----------
 3 files changed, 123 insertions(+), 96 deletions(-)

diff --git a/src/Tinter.js b/src/Tinter.js
index c18d3068a7..4a5e4e453c 100644
--- a/src/Tinter.js
+++ b/src/Tinter.js
@@ -174,7 +174,7 @@ module.exports = {
         tintables.push(tintable);
     },
 
-    tint: function(primaryColor, secondaryColor, tertiaryColor, whiteColor) {
+    tint: function(primaryColor, secondaryColor, tertiaryColor) {
 
         if (!cached) {
             calcCssFixups();
@@ -205,19 +205,16 @@ module.exports = {
             tertiaryColor = rgbToHex(rgb1);
         }
 
-        if (!whiteColor) {
-            whiteColor = colors[3];
-        }
-
         if (colors[0] === primaryColor &&
             colors[1] === secondaryColor &&
-            colors[2] === tertiaryColor &&
-            colors[3] === whiteColor)
+            colors[2] === tertiaryColor)
         {
             return;
         }
 
-        colors = [primaryColor, secondaryColor, tertiaryColor, whiteColor];
+        colors[0] = primaryColor;
+        colors[1] = secondaryColor;
+        colors[2] = tertiaryColor;
 
         if (DEBUG) console.log("Tinter.tint");
 
@@ -231,6 +228,19 @@ module.exports = {
         });
     },
 
+    tintSvgWhite: function(whiteColor) {
+        if (!whiteColor) {
+            whiteColor = colors[3];
+        }
+        if (colors[3] === whiteColor) {
+            return;
+        }
+        colors[3] = whiteColor;
+        tintables.forEach(function(tintable) {
+            tintable();
+        });
+    },
+
     // XXX: we could just move this all into TintableSvg, but as it's so similar
     // to the CSS fixup stuff in Tinter (just that the fixups are stored in TintableSvg)
     // keeping it here for now.
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 7d74e2ee02..8917f0535e 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -608,8 +608,9 @@ module.exports = React.createClass({
         var i, a;
         for (i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
             var href = a.getAttribute("href");
-            if (href.startsWith("theme-")) {
-                if (href.startsWith("theme-" + theme + ".")) {
+            var match = href.match(/^bundles\/.*\/theme-(.*)\.css$/);
+            if (match) {
+                if (match[1] === theme) {
                     a.disabled = false;
                 }
                 else {
@@ -621,10 +622,10 @@ module.exports = React.createClass({
         if (theme === 'dark') {
             // abuse the tinter to change all the SVG's #fff to #2d2d2d
             // XXX: obviously this shouldn't be hardcoded here.
-            Tinter.tint(undefined, undefined, undefined, '#2d2d2d');
+            Tinter.tintSvgWhite('#2d2d2d');
         }
         else {
-            Tinter.tint(undefined, undefined, undefined, '#ffffff');
+            Tinter.tintSvgWhite('#ffffff');
         }
     },
 
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index ebfd6dc0a7..a120d365d1 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -32,6 +32,47 @@ var AddThreepid = require('../../AddThreepid');
 const REACT_SDK_VERSION =
       'dist' in package_json ? package_json.version : package_json.gitHead || "<local>";
 
+
+// Enumerate some simple 'flip a bit' UI settings (if any)
+const SETTINGS_LABELS = [
+/*
+    {
+        id: 'alwaysShowTimestamps',
+        label: 'Always show message timestamps',
+    },
+    {
+        id: 'showTwelveHourTimestamps',
+        label: 'Show timestamps in 12 hour format (e.g. 2:30pm)',
+    },
+    {
+        id: 'useCompactLayout',
+        label: 'Use compact timeline layout',
+    },
+    {
+        id: 'useFixedWidthFont',
+        label: 'Use fixed width font',
+    },
+*/
+];
+
+// Enumerate the available themes, with a nice human text label.
+// XXX: Ideally we would have a theme manifest or something and they'd be nicely
+// packaged up in a single directory, and/or located at the application layer.
+// But for now for expedience we just hardcode them here.
+const THEMES = [
+    {
+        id: 'theme',
+        label: 'Light theme',
+        value: 'light',
+    },
+    {
+        id: 'theme',
+        label: 'Dark theme',
+        value: 'dark',
+    }
+];
+
+
 module.exports = React.createClass({
     displayName: 'UserSettings',
 
@@ -93,6 +134,12 @@ module.exports = React.createClass({
             middleOpacity: 0.3,
         });
         this._refreshFromServer();
+
+        var syncedSettings = UserSettingsStore.getSyncedSettings();
+        if (!syncedSettings.theme) {
+            syncedSettings.theme = 'light';
+        }
+        this._syncedSettings = syncedSettings;
     },
 
     componentDidMount: function() {
@@ -342,99 +389,68 @@ module.exports = React.createClass({
     _renderUserInterfaceSettings: function() {
         var client = MatrixClientPeg.get();
 
-        var settingsLabels = [
-        /*
-            {
-                id: 'alwaysShowTimestamps',
-                label: 'Always show message timestamps',
-            },
-            {
-                id: 'showTwelveHourTimestamps',
-                label: 'Show timestamps in 12 hour format (e.g. 2:30pm)',
-            },
-            {
-                id: 'useCompactLayout',
-                label: 'Use compact timeline layout',
-            },
-            {
-                id: 'useFixedWidthFont',
-                label: 'Use fixed width font',
-            },
-        */
-        ];
-
-        var themes = [
-            {
-                id: 'theme',
-                label: 'Light theme',
-                value: 'light',
-            },
-            {
-                id: 'theme',
-                label: 'Dark theme',
-                value: 'dark',
-            }
-        ];
-
-        var syncedSettings = UserSettingsStore.getSyncedSettings();
-        if (!syncedSettings.theme) {
-            syncedSettings.theme = 'light';
-        }
-
         return (
             <div>
                 <h3>User Interface</h3>
                 <div className="mx_UserSettings_section">
-                    <div className="mx_UserSettings_toggle">
-                        <input id="urlPreviewsDisabled"
-                               type="checkbox"
-                               defaultChecked={ UserSettingsStore.getUrlPreviewsDisabled() }
-                               onChange={ e => UserSettingsStore.setUrlPreviewsDisabled(e.target.checked) }
-                        />
-                        <label htmlFor="urlPreviewsDisabled">
-                            Disable inline URL previews by default
-                        </label>
-                    </div>
-                    { settingsLabels.map( setting => {
-                        return <div className="mx_UserSettings_toggle" key={ setting.id }>
-                            <input id={ setting.id }
-                                   type="checkbox"
-                                   defaultChecked={ syncedSettings[setting.id] }
-                                   onChange={ e => UserSettingsStore.setSyncedSetting(setting.id, e.target.checked) }
-                            />
-                            <label htmlFor={ setting.id }>
-                                { setting.label }
-                            </label>
-                        </div>
-                    })}
-                    { themes.map( setting => {
-                        return <div className="mx_UserSettings_toggle" key={ setting.id + "_" + setting.value }>
-                            <input id={ setting.id + "_" + setting.value }
-                                   type="radio"
-                                   name={ setting.id }
-                                   value={ setting.value }
-                                   defaultChecked={ syncedSettings[setting.id] === setting.value }
-                                   onChange={ e => {
-                                            if (e.target.checked) {
-                                                UserSettingsStore.setSyncedSetting(setting.id, setting.value)
-                                            }
-                                            dis.dispatch({
-                                                action: 'set_theme',
-                                                value: setting.value,
-                                            });
-                                        }
-                                   }
-                            />
-                            <label htmlFor={ setting.id + "_" + setting.value }>
-                                { setting.label }
-                            </label>
-                        </div>
-                    })}
+                    { this._renderUrlPreviewSelector() }
+                    { SETTINGS_LABELS.map( this._renderSyncedSetting ) }
+                    { THEMES.map( this._renderThemeSelector ) }
                 </div>
             </div>
         );
     },
 
+    _renderUrlPreviewSelector: function() {
+        return <div className="mx_UserSettings_toggle">
+            <input id="urlPreviewsDisabled"
+                   type="checkbox"
+                   defaultChecked={ UserSettingsStore.getUrlPreviewsDisabled() }
+                   onChange={ e => UserSettingsStore.setUrlPreviewsDisabled(e.target.checked) }
+            />
+            <label htmlFor="urlPreviewsDisabled">
+                Disable inline URL previews by default
+            </label>
+        </div>
+    },
+
+    _renderSyncedSetting: function(setting) {
+        return <div className="mx_UserSettings_toggle" key={ setting.id }>
+            <input id={ setting.id }
+                   type="checkbox"
+                   defaultChecked={ this._syncedSettings[setting.id] }
+                   onChange={ e => UserSettingsStore.setSyncedSetting(setting.id, e.target.checked) }
+            />
+            <label htmlFor={ setting.id }>
+                { setting.label }
+            </label>
+        </div>
+    },
+
+    _renderThemeSelector: function(setting) {
+        return <div className="mx_UserSettings_toggle" key={ setting.id + "_" + setting.value }>
+            <input id={ setting.id + "_" + setting.value }
+                   type="radio"
+                   name={ setting.id }
+                   value={ setting.value }
+                   defaultChecked={ this._syncedSettings[setting.id] === setting.value }
+                   onChange={ e => {
+                            if (e.target.checked) {
+                                UserSettingsStore.setSyncedSetting(setting.id, setting.value)
+                            }
+                            dis.dispatch({
+                                action: 'set_theme',
+                                value: setting.value,
+                            });
+                        }
+                   }
+            />
+            <label htmlFor={ setting.id + "_" + setting.value }>
+                { setting.label }
+            </label>
+        </div>
+    },
+
     _renderCryptoInfo: function() {
         const client = MatrixClientPeg.get();
         const deviceId = client.deviceId;

From de621902fc3acc6075d48b57e8123753ac26422a Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 18 Jan 2017 15:21:50 +0000
Subject: [PATCH 184/289] Better feedback in invite dialog

Show feedback if you enter a valid but unknown email address
or mxid

Fixes https://github.com/vector-im/riot-web/issues/2933
---
 src/Invite.js                                  |  7 +++++--
 .../views/dialogs/ChatInviteDialog.js          | 18 +++++++++++++++---
 .../views/elements/AddressSelector.js          |  4 +++-
 src/components/views/elements/AddressTile.js   |  4 +++-
 4 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/Invite.js b/src/Invite.js
index 6422812734..6cb04b1b19 100644
--- a/src/Invite.js
+++ b/src/Invite.js
@@ -19,9 +19,12 @@ import MultiInviter from './utils/MultiInviter';
 
 const emailRegex = /^\S+@\S+\.\S+$/;
 
+// We allow localhost for mxids to avoid confusion
+const mxidRegex = /^@\S+:(?:\S+\.\S+|localhost)$/
+
 export function getAddressType(inputText) {
-    const isEmailAddress = /^\S+@\S+\.\S+$/.test(inputText);
-    const isMatrixId = inputText[0] === '@' && inputText.indexOf(":") > 0;
+    const isEmailAddress = emailRegex.test(inputText);
+    const isMatrixId = mxidRegex.test(inputText);
 
     // sanity check the input for user IDs
     if (isEmailAddress) {
diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index e9a041357f..f6d7c17898 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -154,14 +154,26 @@ module.exports = React.createClass({
     },
 
     onQueryChanged: function(ev) {
-        var query = ev.target.value;
-        var queryList = [];
+        const query = ev.target.value;
+        let queryList = [];
 
         // Only do search if there is something to search
-        if (query.length > 0) {
+        if (query.length > 0 && query != '@') {
+            // filter the known users list
             queryList = this._userList.filter((user) => {
                 return this._matches(query, user);
+            }).map((user) => {
+                return user.userId;
             });
+
+            // If the query isn't a user we know about, but is a
+            // valid address, add an entry for that
+            if (queryList.length == 0) {
+                const addrType = Invite.getAddressType(query);
+                if (addrType !== null) {
+                    queryList.push(query);
+                }
+            }
         }
 
         this.setState({
diff --git a/src/components/views/elements/AddressSelector.js b/src/components/views/elements/AddressSelector.js
index 2c2d7e2d61..853b8db144 100644
--- a/src/components/views/elements/AddressSelector.js
+++ b/src/components/views/elements/AddressSelector.js
@@ -25,6 +25,8 @@ module.exports = React.createClass({
 
     propTypes: {
         onSelected: React.PropTypes.func.isRequired,
+
+        // List of strings: the addresses to display
         addressList: React.PropTypes.array.isRequired,
         truncateAt: React.PropTypes.number.isRequired,
         selected: React.PropTypes.number,
@@ -125,7 +127,7 @@ module.exports = React.createClass({
                 // method, how far to scroll when using the arrow keys
                 addressList.push(
                     <div className={classes} onClick={this.onClick(i)} onMouseEnter={this.onMouseEnter(i)} onMouseLeave={this.onMouseLeave} key={i} ref={(ref) => { this.addressListElement = ref; }} >
-                        <AddressTile address={this.props.addressList[i].userId} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />
+                        <AddressTile address={this.props.addressList[i]} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />
                     </div>
                 );
             }
diff --git a/src/components/views/elements/AddressTile.js b/src/components/views/elements/AddressTile.js
index 2799f10a41..b49a84cedd 100644
--- a/src/components/views/elements/AddressTile.js
+++ b/src/components/views/elements/AddressTile.js
@@ -71,6 +71,8 @@ module.exports = React.createClass({
             imgUrl = "img/avatar-error.svg";
         }
 
+        // Removing networks for now as they're not really supported
+        /*
         var network;
         if (this.props.networkUrl !== "") {
             network = (
@@ -79,6 +81,7 @@ module.exports = React.createClass({
                 </div>
             );
         }
+        */
 
         var info;
         var error = false;
@@ -145,7 +148,6 @@ module.exports = React.createClass({
 
         return (
             <div className={classes}>
-                { network }
                 <div className="mx_AddressTile_avatar">
                     <BaseAvatar width={25} height={25} name={name} title={name} url={imgUrl} />
                 </div>

From fc630672378bb292dcde1188255deb830a486596 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 18 Jan 2017 16:36:27 +0000
Subject: [PATCH 185/289] improve commentary

---
 src/components/structures/UserSettings.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index a120d365d1..5ce9ab1a15 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -33,7 +33,9 @@ const REACT_SDK_VERSION =
       'dist' in package_json ? package_json.version : package_json.gitHead || "<local>";
 
 
-// Enumerate some simple 'flip a bit' UI settings (if any)
+// Enumerate some simple 'flip a bit' UI settings (if any).
+// 'id' gives the key name in the im.vector.web.settings account data event
+// 'label' is how we describe it in the UI.
 const SETTINGS_LABELS = [
 /*
     {
@@ -56,6 +58,10 @@ const SETTINGS_LABELS = [
 ];
 
 // Enumerate the available themes, with a nice human text label.
+// 'id' gives the key name in the im.vector.web.settings account data event
+// 'value' is the value for that key in the event
+// 'label' is how we describe it in the UI.
+//
 // XXX: Ideally we would have a theme manifest or something and they'd be nicely
 // packaged up in a single directory, and/or located at the application layer.
 // But for now for expedience we just hardcode them here.

From f105ec279451cf8866fc1a202a546458fb5cde50 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 18 Jan 2017 17:51:39 +0000
Subject: [PATCH 186/289] Attempt to sanitize ChatInviteDialog a bit

 * Use binds rather than onFoo functions which aren't actually
   handler functions themselves but return them
 * Rename onKeyUp to moveSelectionDown etc,, reserving onKeyUp
   for "a key has been released" rather than, "the up arrow key
   has been pressed"
---
 .../views/dialogs/ChatInviteDialog.js         |  6 ++---
 .../views/elements/AddressSelector.js         | 24 +++++++------------
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index e9a041357f..9ca3ff635d 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -119,15 +119,15 @@ module.exports = React.createClass({
         } else if (e.keyCode === 38) { // up arrow
             e.stopPropagation();
             e.preventDefault();
-            this.addressSelector.onKeyUp();
+            this.addressSelector.moveSelectionUp();
         } else if (e.keyCode === 40) { // down arrow
             e.stopPropagation();
             e.preventDefault();
-            this.addressSelector.onKeyDown();
+            this.addressSelector.moveSelectionDown();
         } else if (this.state.queryList.length > 0 && (e.keyCode === 188, e.keyCode === 13 || e.keyCode === 9)) { // comma or enter or tab
             e.stopPropagation();
             e.preventDefault();
-            this.addressSelector.onKeySelect();
+            this.addressSelector.chooseSelection();
         } else if (this.refs.textinput.value.length === 0 && this.state.inviteList.length && e.keyCode === 8) { // backspace
             e.stopPropagation();
             e.preventDefault();
diff --git a/src/components/views/elements/AddressSelector.js b/src/components/views/elements/AddressSelector.js
index 2c2d7e2d61..c477b8e7eb 100644
--- a/src/components/views/elements/AddressSelector.js
+++ b/src/components/views/elements/AddressSelector.js
@@ -55,7 +55,7 @@ module.exports = React.createClass({
         }
     },
 
-    onKeyUp: function() {
+    moveSelectionUp: function() {
         if (this.state.selected > 0) {
             this.setState({
                 selected: this.state.selected - 1,
@@ -64,7 +64,7 @@ module.exports = React.createClass({
         }
     },
 
-    onKeyDown: function() {
+    moveSelectionDown: function() {
         if (this.state.selected < this._maxSelected(this.props.addressList)) {
             this.setState({
                 selected: this.state.selected + 1,
@@ -73,25 +73,19 @@ module.exports = React.createClass({
         }
     },
 
-    onKeySelect: function() {
+    chooseSelection: function() {
         this.selectAddress(this.state.selected);
     },
 
     onClick: function(index) {
-        var self = this;
-        return function() {
-            self.selectAddress(index);
-        };
+        this.selectAddress(index);
     },
 
     onMouseEnter: function(index) {
-        var self = this;
-        return function() {
-            self.setState({
-                selected: index,
-                hover: true,
-            });
-        };
+        this.setState({
+            selected: index,
+            hover: true,
+        });
     },
 
     onMouseLeave: function() {
@@ -124,7 +118,7 @@ module.exports = React.createClass({
                 // Saving the addressListElement so we can use it to work out, in the componentDidUpdate
                 // method, how far to scroll when using the arrow keys
                 addressList.push(
-                    <div className={classes} onClick={this.onClick(i)} onMouseEnter={this.onMouseEnter(i)} onMouseLeave={this.onMouseLeave} key={i} ref={(ref) => { this.addressListElement = ref; }} >
+                    <div className={classes} onClick={this.onClick.bind(this, i)} onMouseEnter={this.onMouseEnter.bind(this, i)} onMouseLeave={this.onMouseLeave} key={i} ref={(ref) => { this.addressListElement = ref; }} >
                         <AddressTile address={this.props.addressList[i].userId} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />
                     </div>
                 );

From 30bd01cdf2a2548cf536c7edc72a8950d1238175 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20L=C3=B6thberg?= <johannes@kyriasis.com>
Date: Wed, 18 Jan 2017 19:29:11 +0100
Subject: [PATCH 187/289] Markdown: Split up render function into
 toHTML/toPlaintext
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Johannes Löthberg <johannes@kyriasis.com>
---
 src/Markdown.js                               | 98 +++++++++++--------
 .../views/rooms/MessageComposerInput.js       |  6 +-
 .../views/rooms/MessageComposerInputOld.js    |  4 +-
 3 files changed, 61 insertions(+), 47 deletions(-)

diff --git a/src/Markdown.js b/src/Markdown.js
index 35ae42f770..80d1aa4335 100644
--- a/src/Markdown.js
+++ b/src/Markdown.js
@@ -23,7 +23,9 @@ import commonmark from 'commonmark';
  */
 export default class Markdown {
     constructor(input) {
-        this.input = input
+        this.input = input;
+        this.parser = new commonmark.Parser();
+        this.renderer = new commonmark.HtmlRenderer({safe: false});
     }
 
     isPlainText() {
@@ -57,54 +59,66 @@ export default class Markdown {
         return is_plain;
     }
 
-    render(html) {
-        const parser = new commonmark.Parser();
+    toHTML(html) {
+        const real_paragraph = this.renderer.paragraph;
 
-        const renderer = new commonmark.HtmlRenderer({safe: true});
-        const real_paragraph = renderer.paragraph;
-        if (html) {
-            renderer.paragraph = function(node, entering) {
-                // If there is only one top level node, just return the
-                // bare text: it's a single line of text and so should be
-                // 'inline', rather than unnecessarily wrapped in its own
-                // p tag. If, however, we have multiple nodes, each gets
-                // its own p tag to keep them as separate paragraphs.
-                var par = node;
-                while (par.parent) {
-                    par = par.parent
-                }
-                if (par.firstChild != par.lastChild) {
-                    real_paragraph.call(this, node, entering);
-                }
+        this.renderer.paragraph = function(node, entering) {
+            // If there is only one top level node, just return the
+            // bare text: it's a single line of text and so should be
+            // 'inline', rather than unnecessarily wrapped in its own
+            // p tag. If, however, we have multiple nodes, each gets
+            // its own p tag to keep them as separate paragraphs.
+            var par = node;
+            while (par.parent) {
+                par = par.parent
             }
-        } else {
-            // The default `out` function only sends the input through an XML
-            // escaping function, which causes messages to be entity encoded,
-            // which we don't want in this case.
-            renderer.out = function(s) {
-                this.lit(s);
+            if (par.firstChild != par.lastChild) {
+                real_paragraph.call(this, node, entering);
             }
+        }
 
-            renderer.paragraph = function(node, entering) {
-                // If there is only one top level node, just return the
-                // bare text: it's a single line of text and so should be
-                // 'inline', rather than unnecessarily wrapped in its own
-                // p tag. If, however, we have multiple nodes, each gets
-                // its own p tag to keep them as separate paragraphs.
-                var par = node;
-                while (par.parent) {
-                    node = par;
-                    par = par.parent;
-                }
-                if (node != par.lastChild) {
-                    if (!entering) {
-                        this.lit('\n\n');
-                    }
+        var parsed = this.parser.parse(this.input);
+        var rendered = this.renderer.render(parsed);
+
+        this.renderer.paragraph = real_paragraph;
+
+        return rendered;
+    }
+
+    toPlaintext() {
+        const real_paragraph = this.renderer.paragraph;
+
+        // The default `out` function only sends the input through an XML
+        // escaping function, which causes messages to be entity encoded,
+        // which we don't want in this case.
+        this.renderer.out = function(s) {
+            // The `lit` function adds a string literal to the output buffer.
+            this.lit(s);
+        }
+
+        this.renderer.paragraph = function(node, entering) {
+            // If there is only one top level node, just return the
+            // bare text: it's a single line of text and so should be
+            // 'inline', rather than unnecessarily wrapped in its own
+            // p tag. If, however, we have multiple nodes, each gets
+            // its own p tag to keep them as separate paragraphs.
+            var par = node;
+            while (par.parent) {
+                node = par;
+                par = par.parent;
+            }
+            if (node != par.lastChild) {
+                if (!entering) {
+                    this.lit('\n\n');
                 }
             }
         }
 
-        var parsed = parser.parse(this.input);
-        return renderer.render(parsed);
+        var parsed = this.parser.parse(this.input);
+        var rendered = this.renderer.render(parsed);
+
+        this.renderer.paragraph = real_paragraph;
+
+        return rendered;
     }
 }
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 5e8df592da..41b27c1394 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -401,7 +401,7 @@ export default class MessageComposerInput extends React.Component {
         let contentState = null;
         if (enabled) {
             const md = new Markdown(this.state.editorState.getCurrentContent().getPlainText());
-            contentState = RichText.HTMLtoContentState(md.render(true));
+            contentState = RichText.HTMLtoContentState(md.toHTML());
         } else {
             let markdown = stateToMarkdown(this.state.editorState.getCurrentContent());
             if (markdown[markdown.length - 1] === '\n') {
@@ -524,9 +524,9 @@ export default class MessageComposerInput extends React.Component {
         } else {
             const md = new Markdown(contentText);
             if (md.isPlainText()) {
-                contentText = md.render(false);
+                contentText = md.toPlaintext();
             } else {
-                contentHTML = md.render(true);
+                contentHTML = md.toHTML(true);
             }
         }
 
diff --git a/src/components/views/rooms/MessageComposerInputOld.js b/src/components/views/rooms/MessageComposerInputOld.js
index 3b0100278b..91abd5a2a8 100644
--- a/src/components/views/rooms/MessageComposerInputOld.js
+++ b/src/components/views/rooms/MessageComposerInputOld.js
@@ -325,13 +325,13 @@ module.exports = React.createClass({
         }
 
         if (send_markdown) {
-            const htmlText = mdown.render(true);
+            const htmlText = mdown.toHTML();
             sendMessagePromise = isEmote ?
                 MatrixClientPeg.get().sendHtmlEmote(this.props.room.roomId, contentText, htmlText) :
                 MatrixClientPeg.get().sendHtmlMessage(this.props.room.roomId, contentText, htmlText);
         }
         else {
-            const contentText = mdown.render(false);
+            const contentText = mdown.toPlaintext(false);
             sendMessagePromise = isEmote ?
                 MatrixClientPeg.get().sendEmoteMessage(this.props.room.roomId, contentText) :
                 MatrixClientPeg.get().sendTextMessage(this.props.room.roomId, contentText);

From 7b7728c93abec435c44ae66f218fa23ee23e35ef Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 18 Jan 2017 18:32:38 +0000
Subject: [PATCH 188/289] Make behaviour of ChatInviteDialog more consistent

 * Pressing enter now always adds whatever was in the input box
   to the invite list, if it's a valid address (previously it
   added it to the list of it was a search result but submitted
   the form straight away if there were no results).
 * Remove isValidAddress as it was only used in the context of
   testing whether its return value was true or null (where null
   meant "unsure") so just use getAddressType instead.
---
 src/Invite.js                                 | 22 -----------------
 .../views/dialogs/ChatInviteDialog.js         | 24 +++++++++++++++----
 2 files changed, 19 insertions(+), 27 deletions(-)

diff --git a/src/Invite.js b/src/Invite.js
index 6422812734..6bfc646977 100644
--- a/src/Invite.js
+++ b/src/Invite.js
@@ -59,25 +59,3 @@ export function inviteMultipleToRoom(roomId, addrs) {
     return this.inviter.invite(addrs);
 }
 
-/**
- * Checks is the supplied address is valid
- *
- * @param {addr} The mx userId or email address to check
- * @returns true, false, or null for unsure
- */
-export function isValidAddress(addr) {
-    // Check if the addr is a valid type
-    var addrType = this.getAddressType(addr);
-    if (addrType === "mx") {
-        let user = MatrixClientPeg.get().getUser(addr);
-        if (user) {
-            return true;
-        } else {
-            return null;
-        }
-    } else if (addrType === "email") {
-        return true;
-    } else {
-        return false;
-    }
-}
diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index 9ca3ff635d..767620d93f 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -74,8 +74,8 @@ module.exports = React.createClass({
         var inviteList = this.state.inviteList.slice();
         // Check the text input field to see if user has an unconverted address
         // If there is and it's valid add it to the local inviteList
-        var check = Invite.isValidAddress(this.refs.textinput.value);
-        if (check === true || check === null) {
+        const addrType = Invite.getAddressType(this.refs.textinput.value);
+        if (addrType !== null) {
             inviteList.push(this.refs.textinput.value);
         } else if (this.refs.textinput.value.length > 0) {
             this.setState({ error: true });
@@ -135,12 +135,26 @@ module.exports = React.createClass({
         } else if (e.keyCode === 13) { // enter
             e.stopPropagation();
             e.preventDefault();
-            this.onButtonClick();
+            if (this.state.queryList.length > 0) {
+                this.addressSelector.chooseSelection();
+            } else {
+                const addrType = Invite.getAddressType(this.refs.textinput.value);
+                if (addrType !== null) {
+                    const inviteList = this.state.inviteList.slice();
+                    inviteList.push(this.refs.textinput.value.trim());
+                    this.setState({
+                        inviteList: inviteList,
+                        queryList: [],
+                    });
+                } else {
+                    this.setState({ error: true });
+                }
+            }
         } else if (e.keyCode === 188 || e.keyCode === 9) { // comma or tab
             e.stopPropagation();
             e.preventDefault();
-            var check = Invite.isValidAddress(this.refs.textinput.value);
-            if (check === true || check === null) {
+            const addrType = Invite.getAddressType(this.refs.textinput.value);
+            if (addrType !== null) {
                 var inviteList = this.state.inviteList.slice();
                 inviteList.push(this.refs.textinput.value.trim());
                 this.setState({

From 14ead373e2e8c6d1ed612000ddbee668b84f8989 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20L=C3=B6thberg?= <johannes@kyriasis.com>
Date: Wed, 18 Jan 2017 20:54:34 +0100
Subject: [PATCH 189/289] Add markdown test-cases
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Johannes Löthberg <johannes@kyriasis.com>
---
 .../views/rooms/MessageComposerInput-test.js  | 81 +++++++++++++++++++
 1 file changed, 81 insertions(+)

diff --git a/test/components/views/rooms/MessageComposerInput-test.js b/test/components/views/rooms/MessageComposerInput-test.js
index 8d33e0ead3..ca2bbba2eb 100644
--- a/test/components/views/rooms/MessageComposerInput-test.js
+++ b/test/components/views/rooms/MessageComposerInput-test.js
@@ -158,4 +158,85 @@ describe('MessageComposerInput', () => {
         expect(['__', '**']).toContain(spy.args[0][1]);
     });
 
+    it('should not entity-encode " in Markdown mode', () => {
+        const spy = sinon.spy(client, 'sendTextMessage');
+        mci.enableRichtext(false);
+        addTextToDraft('"');
+        mci.handleReturn(sinon.stub());
+
+        expect(spy.calledOnce).toEqual(true);
+        expect(spy.args[0][1]).toEqual('"');
+    });
+
+    it('should escape characters without other markup in Markdown mode', () => {
+        const spy = sinon.spy(client, 'sendTextMessage');
+        mci.enableRichtext(false);
+        addTextToDraft('\\*escaped\\*');
+        mci.handleReturn(sinon.stub());
+
+        expect(spy.calledOnce).toEqual(true);
+        expect(spy.args[0][1]).toEqual('*escaped*');
+    });
+
+    it('should escape characters with other markup in Markdown mode', () => {
+        const spy = sinon.spy(client, 'sendHtmlMessage');
+        mci.enableRichtext(false);
+        addTextToDraft('\\*escaped\\* *italic*');
+        mci.handleReturn(sinon.stub());
+
+        expect(spy.calledOnce).toEqual(true);
+        expect(spy.args[0][1]).toEqual('\\*escaped\\* *italic*');
+        expect(spy.args[0][2]).toEqual('*escaped* <em>italic</em>');
+    });
+
+    it('should not convert -_- into a horizontal rule in Markdown mode', () => {
+        const spy = sinon.spy(client, 'sendTextMessage');
+        mci.enableRichtext(false);
+        addTextToDraft('-_-');
+        mci.handleReturn(sinon.stub());
+
+        expect(spy.calledOnce).toEqual(true);
+        expect(spy.args[0][1]).toEqual('-_-');
+    });
+
+    it('should not strip <del> tags in Markdown mode', () => {
+        const spy = sinon.spy(client, 'sendHtmlMessage');
+        mci.enableRichtext(false);
+        addTextToDraft('<del>striked-out</del>');
+        mci.handleReturn(sinon.stub());
+
+        expect(spy.calledOnce).toEqual(true);
+        expect(spy.args[0][1]).toEqual('<del>striked-out</del>');
+        expect(spy.args[0][2]).toEqual('<del>striked-out</del>');
+    });
+
+    it('should not strike-through ~~~ in Markdown mode', () => {
+        const spy = sinon.spy(client, 'sendTextMessage');
+        mci.enableRichtext(false);
+        addTextToDraft('~~~striked-out~~~');
+        mci.handleReturn(sinon.stub());
+
+        expect(spy.calledOnce).toEqual(true);
+        expect(spy.args[0][1]).toEqual('~~~striked-out~~~');
+    });
+
+    it('should not mark single unmarkedup paragraphs as HTML in Markdown mode', () => {
+        const spy = sinon.spy(client, 'sendTextMessage');
+        mci.enableRichtext(false);
+        addTextToDraft('Lorem ipsum dolor sit amet, consectetur adipiscing elit.');
+        mci.handleReturn(sinon.stub());
+
+        expect(spy.calledOnce).toEqual(true);
+        expect(spy.args[0][1]).toEqual('Lorem ipsum dolor sit amet, consectetur adipiscing elit.');
+    });
+
+    it('should not mark two unmarkedup paragraphs as HTML in Markdown mode', () => {
+        const spy = sinon.spy(client, 'sendTextMessage');
+        mci.enableRichtext(false);
+        addTextToDraft('Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\nFusce congue sapien sed neque molestie volutpat.');
+        mci.handleReturn(sinon.stub());
+
+        expect(spy.calledOnce).toEqual(true);
+        expect(spy.args[0][1]).toEqual('Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\nFusce congue sapien sed neque molestie volutpat.');
+    });
 });

From 4df968ecdf36334313f30d27aff409d40cdbe859 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 18 Jan 2017 20:06:44 +0000
Subject: [PATCH 190/289] fix css snafu

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

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 5ce9ab1a15..498acc1917 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -605,7 +605,7 @@ module.exports = React.createClass({
                         <label htmlFor={id}>{this.nameForMedium(val.medium)}</label>
                     </div>
                     <div className="mx_UserSettings_profileInputCell">
-                        <input key={val.address} id={id} value={val.address} disabled />
+                        <input type="text" key={val.address} id={id} value={val.address} disabled />
                     </div>
                     <div className="mx_UserSettings_threepidButton">
                         <img src="img/icon_context_delete.svg" width="14" height="14" alt="Remove" onClick={this.onRemoveThreepidClicked.bind(this, val)} />

From 4e5689082de009c3e6214e578831804942c120bd Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 18 Jan 2017 20:06:54 +0000
Subject: [PATCH 191/289] correctly load synced themes without NPE

---
 src/components/structures/MatrixChat.js | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 8917f0535e..0336dc99d5 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -588,13 +588,6 @@ module.exports = React.createClass({
     _onLoadCompleted: function() {
         this.props.onLoadCompleted();
         this.setState({loading: false});
-
-        // set up the right theme.
-        // XXX: this will temporarily flicker the wrong CSS.
-        dis.dispatch({
-            action: 'set_theme',
-            value: UserSettingsStore.getSyncedSetting('theme')
-        });
     },
 
     /**
@@ -730,6 +723,16 @@ module.exports = React.createClass({
                 action: 'logout'
             });
         });
+        cli.on("accountData", function(ev) {
+            if (ev.getType() === 'im.vector.web.settings') {
+                if (ev.getContent() && ev.getContent().theme) {
+                    dis.dispatch({
+                        action: 'set_theme',
+                        value: ev.getContent().theme,
+                    });
+                }
+            }
+        });
     },
 
     onFocus: function(ev) {

From e06dd6e34ae5b70723d7f83603e0a100565fd641 Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Thu, 19 Jan 2017 10:51:40 +0100
Subject: [PATCH 192/289] Implement auto-join rooms on registration

Also: This fixes registration with a team: only the email localpart was being used to register.

When a registration is successful, the user will be joined to rooms specified in the config.json teamsConfig:

"teamsConfig" : {
  "supportEmail": "support@riot.im",
  "teams": [
    {
      "name" : "matrix",
      "emailSuffix" : "matrix.org",
      "rooms" : [
        {
          "id" : "#irc_matrix:matrix.org",
          "autoJoin" : true
        }
      ]
    }
  ]
}

autoJoin can of course be set to false if the room should only be displayed on the (forthcoming) welcome page for each team, and not auto-joined.
---
 src/components/structures/login/Registration.js | 17 +++++++++++++++++
 src/components/views/login/RegistrationForm.js  |  6 +++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js
index fb24b61504..f89b627e8d 100644
--- a/src/components/structures/login/Registration.js
+++ b/src/components/structures/login/Registration.js
@@ -179,6 +179,23 @@ module.exports = React.createClass({
                 accessToken: response.access_token
             });
 
+            // Auto-join rooms
+            if (self.props.teamsConfig) {
+                for (let i = 0; i < self.props.teamsConfig.teams.length; i++) {
+                    let team = self.props.teamsConfig.teams[i];
+                    if (self.state.formVals.email.endsWith(team.emailSuffix)) {
+                        console.log("User successfully registered with team " + team.name);
+                        team.rooms.forEach((room) => {
+                            if (room.autoJoin) {
+                                console.log("Auto-joining " + room.id);
+                                MatrixClientPeg.get().joinRoom(room.id);
+                            }
+                        });
+                        break;
+                    }
+                }
+            }
+
             if (self.props.brand) {
                 MatrixClientPeg.get().getPushers().done((resp)=>{
                     var pushers = resp.pushers;
diff --git a/src/components/views/login/RegistrationForm.js b/src/components/views/login/RegistrationForm.js
index 3e07302a91..4be40bc53a 100644
--- a/src/components/views/login/RegistrationForm.js
+++ b/src/components/views/login/RegistrationForm.js
@@ -116,10 +116,14 @@ module.exports = React.createClass({
     },
 
     _doSubmit: function() {
+        let email = this.refs.email.value.trim();
+        if (this.state.selectedTeam) {
+            email += "@" + this.state.selectedTeam.emailSuffix;
+        }
         var promise = this.props.onRegisterClick({
             username: this.refs.username.value.trim() || this.props.guestUsername,
             password: this.refs.password.value.trim(),
-            email: this.refs.email.value.trim()
+            email: email,
         });
 
         if (promise) {

From e9eb38fd74cb13e85a0d31cd359894a1eea5d535 Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Thu, 19 Jan 2017 11:05:08 +0100
Subject: [PATCH 193/289] Update propTypes and do null checks

---
 src/components/structures/login/Registration.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js
index f89b627e8d..b092e0a9fb 100644
--- a/src/components/structures/login/Registration.js
+++ b/src/components/structures/login/Registration.js
@@ -57,6 +57,11 @@ module.exports = React.createClass({
                 "name": React.PropTypes.string,
                 // The suffix with which every team email address ends
                 "emailSuffix": React.PropTypes.string,
+                // The rooms to use during auto-join
+                "rooms": React.PropTypes.arrayOf(React.PropTypes.shape({
+                    "id": React.PropTypes.string,
+                    "autoJoin": React.PropTypes.bool,
+                })),
             })).required,
         }),
 
@@ -180,11 +185,14 @@ module.exports = React.createClass({
             });
 
             // Auto-join rooms
-            if (self.props.teamsConfig) {
+            if (self.props.teamsConfig && self.props.teamsConfig.teams) {
                 for (let i = 0; i < self.props.teamsConfig.teams.length; i++) {
                     let team = self.props.teamsConfig.teams[i];
                     if (self.state.formVals.email.endsWith(team.emailSuffix)) {
                         console.log("User successfully registered with team " + team.name);
+                        if (!team.rooms) {
+                            break;
+                        }
                         team.rooms.forEach((room) => {
                             if (room.autoJoin) {
                                 console.log("Auto-joining " + room.id);

From 242f5e03016e6aad73890c18914c0d2eaafcc8d4 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 19 Jan 2017 10:24:21 +0000
Subject: [PATCH 194/289] PR feedback

 * Doc & properly indent escapeRegExp
 * Add close bracket to the list of punctuation chars we search after
---
 src/components/views/dialogs/ChatInviteDialog.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index 59e95d1538..dfeb2a3978 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -27,8 +27,13 @@ var Modal = require('../../../Modal');
 
 const TRUNCATE_QUERY_LIST = 40;
 
+/*
+ * Escapes a string so it can be used in a RegExp
+ * Basically just replaces: \ ^ $ * + ? . ( ) | { } [ ]
+ * From http://stackoverflow.com/a/6969486
+ */
 function escapeRegExp(str) {
-  return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
+    return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
 }
 
 module.exports = React.createClass({
@@ -326,7 +331,7 @@ module.exports = React.createClass({
         //  * The start of the string
         //  * Whitespace, or
         //  * A fixed number of punctuation characters
-        let expr = new RegExp("(?:^|[\\s\\('\",\.-])" + escapeRegExp(query));
+        let expr = new RegExp("(?:^|[\\s\\(\)'\",\.-])" + escapeRegExp(query));
         if (expr.test(name)) {
             return true;
         }

From 8b60cb9df0594bb032a560428dfa1f67f068c08c Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 19 Jan 2017 10:43:41 +0000
Subject: [PATCH 195/289] Megolm export: Clear bit 63 of the salt

---
 src/utils/MegolmExportEncryption.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/utils/MegolmExportEncryption.js b/src/utils/MegolmExportEncryption.js
index e3ca7e68f2..983ec2c75f 100644
--- a/src/utils/MegolmExportEncryption.js
+++ b/src/utils/MegolmExportEncryption.js
@@ -106,6 +106,12 @@ export function encryptMegolmKeyFile(data, password, options) {
 
     const salt = new Uint8Array(16);
     window.crypto.getRandomValues(salt);
+
+    // clear bit 63 of the salt to stop us hitting the 64-bit counter boundary
+    // (which would mean we wouldn't be able to decrypt on Android). The loss
+    // of a single bit of salt is a price we have to pay.
+    salt[9] &= 0x7f;
+
     const iv = new Uint8Array(16);
     window.crypto.getRandomValues(iv);
 

From fdc213cbb80f84a202c7d55fa79a7c45a66af4d0 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 19 Jan 2017 10:44:01 +0000
Subject: [PATCH 196/289] Megolm export: fix test

---
 test/utils/MegolmExportEncryption-test.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/test/utils/MegolmExportEncryption-test.js b/test/utils/MegolmExportEncryption-test.js
index db38a931ed..28752ae529 100644
--- a/test/utils/MegolmExportEncryption-test.js
+++ b/test/utils/MegolmExportEncryption-test.js
@@ -21,12 +21,6 @@ import * as MegolmExportEncryption from 'utils/MegolmExportEncryption';
 import * as testUtils from '../test-utils';
 import expect from 'expect';
 
-// polyfill textencoder if necessary
-let TextEncoder = window.TextEncoder;
-if (!TextEncoder) {
-    TextEncoder = require('utils/TextEncoderPolyfill');
-}
-
 const TEST_VECTORS=[
     [
         "plain",

From b58a67f6b19fec62731a57656c7a1f27246d9fc4 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 19 Jan 2017 10:51:43 +0000
Subject: [PATCH 197/289] Add more punctuation. Also s/let/const/

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

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index dfeb2a3978..b5222d77d0 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -331,7 +331,7 @@ module.exports = React.createClass({
         //  * The start of the string
         //  * Whitespace, or
         //  * A fixed number of punctuation characters
-        let expr = new RegExp("(?:^|[\\s\\(\)'\",\.-])" + escapeRegExp(query));
+        const expr = new RegExp("(?:^|[\\s\\(\)'\",\.-_@\?;:{}\\[\\]\\#~`\\*\\&\\$])" + escapeRegExp(query));
         if (expr.test(name)) {
             return true;
         }

From 9c1c657a1edf157ec6039bf12b0f8cc848bca5f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20L=C3=B6thberg?= <johannes@kyriasis.com>
Date: Thu, 19 Jan 2017 11:55:36 +0100
Subject: [PATCH 198/289] Markdown: delete remaining pre-split relics
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Johannes Löthberg <johannes@kyriasis.com>
---
 src/Markdown.js                                       | 2 +-
 src/components/views/rooms/MessageComposerInput.js    | 2 +-
 src/components/views/rooms/MessageComposerInputOld.js | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Markdown.js b/src/Markdown.js
index 80d1aa4335..3506e3cb59 100644
--- a/src/Markdown.js
+++ b/src/Markdown.js
@@ -59,7 +59,7 @@ export default class Markdown {
         return is_plain;
     }
 
-    toHTML(html) {
+    toHTML() {
         const real_paragraph = this.renderer.paragraph;
 
         this.renderer.paragraph = function(node, entering) {
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 41b27c1394..b6af5a9f09 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -526,7 +526,7 @@ export default class MessageComposerInput extends React.Component {
             if (md.isPlainText()) {
                 contentText = md.toPlaintext();
             } else {
-                contentHTML = md.toHTML(true);
+                contentHTML = md.toHTML();
             }
         }
 
diff --git a/src/components/views/rooms/MessageComposerInputOld.js b/src/components/views/rooms/MessageComposerInputOld.js
index 91abd5a2a8..ed4533737f 100644
--- a/src/components/views/rooms/MessageComposerInputOld.js
+++ b/src/components/views/rooms/MessageComposerInputOld.js
@@ -331,7 +331,7 @@ module.exports = React.createClass({
                 MatrixClientPeg.get().sendHtmlMessage(this.props.room.roomId, contentText, htmlText);
         }
         else {
-            const contentText = mdown.toPlaintext(false);
+            const contentText = mdown.toPlaintext();
             sendMessagePromise = isEmote ?
                 MatrixClientPeg.get().sendEmoteMessage(this.props.room.roomId, contentText) :
                 MatrixClientPeg.get().sendTextMessage(this.props.room.roomId, contentText);

From 1b6735d7292e7e0ee6a4331f687818b1f5fb4506 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 19 Jan 2017 12:51:20 +0000
Subject: [PATCH 199/289] Configure travis to test riot-web after building

---
 .travis-test-riot.sh | 15 +++++++++++++++
 .travis.yml          |  3 +++
 2 files changed, 18 insertions(+)
 create mode 100755 .travis-test-riot.sh

diff --git a/.travis-test-riot.sh b/.travis-test-riot.sh
new file mode 100755
index 0000000000..b488045df1
--- /dev/null
+++ b/.travis-test-riot.sh
@@ -0,0 +1,15 @@
+#!/bin/bash
+#
+# script which is run by the travis build (after `npm run test`).
+#
+# clones riot-web develop and runs the tests against our version of react-sdk.
+
+set -ev
+
+git clone --depth=1 https://github.com/vector-im/riot-web.git riot-web
+cd riot-web
+mkdir node_modules
+ln -s ../.. node_modules/matrix-react-sdk
+npm install
+(cd node_modules/matrix-js-sdk && npm install)
+npm run test
diff --git a/.travis.yml b/.travis.yml
index 6d68b66a1c..9a8f804644 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -4,3 +4,6 @@ node_js:
 install:
     - npm install
     - (cd node_modules/matrix-js-sdk && npm install)
+script:
+    - npm run test
+    - ./.travis-test-riot.sh

From a88f9fdd73095c03423f2c5d649ea4930aa55b0a Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 19 Jan 2017 15:36:57 +0000
Subject: [PATCH 200/289] (hopefully) fix theming on Chrome

Jump through some hoops to make Chrome behave sensibly on non-default themes.
---
 src/components/structures/MatrixChat.js | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 0336dc99d5..61a02057ea 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -598,20 +598,32 @@ module.exports = React.createClass({
             theme = 'light';
         }
 
+        // look for the stylesheet elements.
+        // styleElements is a map from style name to HTMLLinkElement.
+        var styleElements = Object.create(null);
         var i, a;
         for (i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
             var href = a.getAttribute("href");
+            // shouldn't we be using the 'title' tag rather than the href?
             var match = href.match(/^bundles\/.*\/theme-(.*)\.css$/);
             if (match) {
-                if (match[1] === theme) {
-                    a.disabled = false;
-                }
-                else {
-                    a.disabled = true;
-                }
+                styleElements[match[1]] = a;
             }
         }
 
+        if (!(theme in styleElements)) {
+            throw new Error("Unknown theme " + theme);
+        }
+
+        // disable all of them first, then enable the one we want. Chrome only
+        // bothers to do an update on a true->false transition, so this ensures
+        // that we get exactly one update, at the right time.
+
+        Object.values(styleElements).forEach((a) => {
+            a.disabled = true;
+        });
+        styleElements[theme].disabled = false;
+
         if (theme === 'dark') {
             // abuse the tinter to change all the SVG's #fff to #2d2d2d
             // XXX: obviously this shouldn't be hardcoded here.

From 2a08abaa955a9e60a06584ef7203e07743d70928 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 19 Jan 2017 16:35:40 +0000
Subject: [PATCH 201/289] Keep old behaviour of submitting on enter

if input is empty
---
 src/components/views/dialogs/ChatInviteDialog.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index 767620d93f..c117944482 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -135,7 +135,10 @@ module.exports = React.createClass({
         } else if (e.keyCode === 13) { // enter
             e.stopPropagation();
             e.preventDefault();
-            if (this.state.queryList.length > 0) {
+            if (this.refs.textinput.value == '') {
+                // if there's nothing in the input box, submit the form
+                this.onButtonClick();
+            } else if (this.state.queryList.length > 0) {
                 this.addressSelector.chooseSelection();
             } else {
                 const addrType = Invite.getAddressType(this.refs.textinput.value);

From ee1f6c772e164d24e0896c88be200f75d8e371aa Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 19 Jan 2017 16:50:09 +0000
Subject: [PATCH 202/289] Remove duplicate case handled above

And fix typo where it was handled
---
 src/components/views/dialogs/ChatInviteDialog.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index c117944482..5cbb0d4503 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -124,7 +124,7 @@ module.exports = React.createClass({
             e.stopPropagation();
             e.preventDefault();
             this.addressSelector.moveSelectionDown();
-        } else if (this.state.queryList.length > 0 && (e.keyCode === 188, e.keyCode === 13 || e.keyCode === 9)) { // comma or enter or tab
+        } else if (this.state.queryList.length > 0 && (e.keyCode === 188 || e.keyCode === 13 || e.keyCode === 9)) { // comma or enter or tab
             e.stopPropagation();
             e.preventDefault();
             this.addressSelector.chooseSelection();
@@ -138,8 +138,6 @@ module.exports = React.createClass({
             if (this.refs.textinput.value == '') {
                 // if there's nothing in the input box, submit the form
                 this.onButtonClick();
-            } else if (this.state.queryList.length > 0) {
-                this.addressSelector.chooseSelection();
             } else {
                 const addrType = Invite.getAddressType(this.refs.textinput.value);
                 if (addrType !== null) {

From a2ff1cd8e6578d237720fb0ac77885677c4e4775 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 19 Jan 2017 17:03:16 +0000
Subject: [PATCH 203/289] Factor out adding the input field to the list

---
 .../views/dialogs/ChatInviteDialog.js         | 51 ++++++++-----------
 1 file changed, 22 insertions(+), 29 deletions(-)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index 5cbb0d4503..9928030d7f 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -71,15 +71,12 @@ module.exports = React.createClass({
     },
 
     onButtonClick: function() {
-        var inviteList = this.state.inviteList.slice();
+        let inviteList = this.state.inviteList.slice();
         // Check the text input field to see if user has an unconverted address
         // If there is and it's valid add it to the local inviteList
-        const addrType = Invite.getAddressType(this.refs.textinput.value);
-        if (addrType !== null) {
-            inviteList.push(this.refs.textinput.value);
-        } else if (this.refs.textinput.value.length > 0) {
-            this.setState({ error: true });
-            return;
+        if (this.refs.textinput.value !== '') {
+            inviteList = this._addInputToList();
+            if (inviteList === false) return;
         }
 
         if (inviteList.length > 0) {
@@ -139,32 +136,12 @@ module.exports = React.createClass({
                 // if there's nothing in the input box, submit the form
                 this.onButtonClick();
             } else {
-                const addrType = Invite.getAddressType(this.refs.textinput.value);
-                if (addrType !== null) {
-                    const inviteList = this.state.inviteList.slice();
-                    inviteList.push(this.refs.textinput.value.trim());
-                    this.setState({
-                        inviteList: inviteList,
-                        queryList: [],
-                    });
-                } else {
-                    this.setState({ error: true });
-                }
+                this._addInputToList();
             }
         } else if (e.keyCode === 188 || e.keyCode === 9) { // comma or tab
             e.stopPropagation();
             e.preventDefault();
-            const addrType = Invite.getAddressType(this.refs.textinput.value);
-            if (addrType !== null) {
-                var inviteList = this.state.inviteList.slice();
-                inviteList.push(this.refs.textinput.value.trim());
-                this.setState({
-                    inviteList: inviteList,
-                    queryList: [],
-                });
-            } else {
-                this.setState({ error: true });
-            }
+            this._addInputToList();
         }
     },
 
@@ -376,6 +353,22 @@ module.exports = React.createClass({
         return addrs;
     },
 
+    _addInputToList: function() {
+        const addrType = Invite.getAddressType(this.refs.textinput.value);
+        if (addrType !== null) {
+            const inviteList = this.state.inviteList.slice();
+            inviteList.push(this.refs.textinput.value.trim());
+            this.setState({
+                inviteList: inviteList,
+                queryList: [],
+            });
+            return inviteList;
+        } else {
+            this.setState({ error: true });
+            return false;
+        }
+    },
+
     render: function() {
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
         var AddressSelector = sdk.getComponent("elements.AddressSelector");

From dee3495d51b850f7765da766cc063f52284f0c1d Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 19 Jan 2017 17:21:03 +0000
Subject: [PATCH 204/289] Run riot-web develop, not master

---
 .travis-test-riot.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.travis-test-riot.sh b/.travis-test-riot.sh
index b488045df1..c483ea7b4e 100755
--- a/.travis-test-riot.sh
+++ b/.travis-test-riot.sh
@@ -6,7 +6,7 @@
 
 set -ev
 
-git clone --depth=1 https://github.com/vector-im/riot-web.git riot-web
+git clone --depth=1 --branch develop https://github.com/vector-im/riot-web.git riot-web
 cd riot-web
 mkdir node_modules
 ln -s ../.. node_modules/matrix-react-sdk

From af4ef1da8bb99e1b4cb2ac0cd22bac39351b2ce9 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 19 Jan 2017 17:41:58 +0000
Subject: [PATCH 205/289] Install source-map-loader before building riot-web

---
 .travis-test-riot.sh | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/.travis-test-riot.sh b/.travis-test-riot.sh
index c483ea7b4e..482b4a21c1 100755
--- a/.travis-test-riot.sh
+++ b/.travis-test-riot.sh
@@ -11,5 +11,10 @@ cd riot-web
 mkdir node_modules
 ln -s ../.. node_modules/matrix-react-sdk
 npm install
+
 (cd node_modules/matrix-js-sdk && npm install)
+
+# https://github.com/webpack/webpack/issues/1472 workaround
+(cd node_modules/matrix-react-sdk && npm install source-map-loader)
+
 npm run test

From afa384c4f39e466c22dc6b0552ad9552a80c28bd Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 19 Jan 2017 18:13:27 +0000
Subject: [PATCH 206/289] Use null instead of false

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

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index 9928030d7f..18f4ce36ba 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -76,7 +76,7 @@ module.exports = React.createClass({
         // If there is and it's valid add it to the local inviteList
         if (this.refs.textinput.value !== '') {
             inviteList = this._addInputToList();
-            if (inviteList === false) return;
+            if (inviteList === null) return;
         }
 
         if (inviteList.length > 0) {
@@ -365,7 +365,7 @@ module.exports = React.createClass({
             return inviteList;
         } else {
             this.setState({ error: true });
-            return false;
+            return null;
         }
     },
 

From 33d741e83d826b8540277f4869e84b08b010449d Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 19 Jan 2017 18:23:34 +0000
Subject: [PATCH 207/289] Do riot-web setup in a different order

... in an effort to stop npm cocking it up.
---
 .travis-test-riot.sh | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/.travis-test-riot.sh b/.travis-test-riot.sh
index 482b4a21c1..c280044246 100755
--- a/.travis-test-riot.sh
+++ b/.travis-test-riot.sh
@@ -6,15 +6,20 @@
 
 set -ev
 
-git clone --depth=1 --branch develop https://github.com/vector-im/riot-web.git riot-web
-cd riot-web
+RIOT_WEB_DIR=riot-web
+REACT_SDK_DIR=`pwd`
+
+git clone --depth=1 --branch develop https://github.com/vector-im/riot-web.git \
+    "$RIOT_WEB_DIR"
+
+cd "$RIOT_WEB_DIR"
+
 mkdir node_modules
-ln -s ../.. node_modules/matrix-react-sdk
 npm install
 
 (cd node_modules/matrix-js-sdk && npm install)
 
-# https://github.com/webpack/webpack/issues/1472 workaround
-(cd node_modules/matrix-react-sdk && npm install source-map-loader)
+rm -r node_modules/matrix-react-sdk
+ln -s "$REACT_SDK_DIR" node_modules/matrix-react-sdk
 
 npm run test

From b76b0f755d0d5698383e0bbe9ecbf2e9d090e86a Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 20 Jan 2017 02:47:47 +0000
Subject: [PATCH 208/289] fix context menu bg

---
 src/components/structures/MatrixChat.js | 1 -
 src/components/views/rooms/RoomTile.js  | 4 +++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 61a02057ea..170fa6ff84 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -25,7 +25,6 @@ var SdkConfig = require("../../SdkConfig");
 var ContextualMenu = require("./ContextualMenu");
 var RoomListSorter = require("../../RoomListSorter");
 var UserActivity = require("../../UserActivity");
-var UserSettingsStore = require('../../UserSettingsStore');
 var Presence = require("../../Presence");
 var dis = require("../../dispatcher");
 
diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index 84916f8ab8..834a06d8e6 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/src/components/views/rooms/RoomTile.js
@@ -26,6 +26,7 @@ var sdk = require('../../../index');
 var ContextualMenu = require('../../structures/ContextualMenu');
 var RoomNotifs = require('../../../RoomNotifs');
 var FormattingUtils = require('../../../utils/FormattingUtils');
+var UserSettingsStore = require('../../../UserSettingsStore');
 
 module.exports = React.createClass({
     displayName: 'RoomTile',
@@ -176,7 +177,8 @@ module.exports = React.createClass({
             var self = this;
             ContextualMenu.createMenu(RoomTagMenu, {
                 chevronOffset: 10,
-                menuColour: "#FFFFFF",
+                // XXX: fix horrid hardcoding
+                menuColour: UserSettingsStore.getSyncedSettings().theme === 'dark' ? "#2d2d2d" : "#FFFFFF",
                 left: x,
                 top: y,
                 room: this.props.room,

From 2d060c8d2e91669ebc7a17ba0745e99d72c196dc Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Fri, 20 Jan 2017 11:04:09 +0000
Subject: [PATCH 209/289] Fix error display in account deactivate dialog

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

diff --git a/src/components/views/dialogs/DeactivateAccountDialog.js b/src/components/views/dialogs/DeactivateAccountDialog.js
index 926e4059d2..9a15841061 100644
--- a/src/components/views/dialogs/DeactivateAccountDialog.js
+++ b/src/components/views/dialogs/DeactivateAccountDialog.js
@@ -80,7 +80,7 @@ export default class DeactivateAccountDialog extends React.Component {
         let error = null;
         if (this.state.errStr) {
             error = <div className="error">
-                {this.state.err_str}
+                {this.state.errStr}
             </div>
             passwordBoxClass = 'error';
         }

From a16aeeef2a0f16efedf7e6616cdf3c2c8752a077 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 18 Jan 2017 17:22:41 +0000
Subject: [PATCH 210/289] Temporarily add more logging, to try to catch
 failures on travis

---
 src/components/structures/MatrixChat.js | 6 ++++--
 src/dispatcher.js                       | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 170fa6ff84..ceca3591c5 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -259,6 +259,8 @@ module.exports = React.createClass({
     },
 
     onAction: function(payload) {
+        console.log("onAction: "+payload.action);
+
         var roomIndexDelta = 1;
 
         var self = this;
@@ -1006,8 +1008,8 @@ module.exports = React.createClass({
         var ForgotPassword = sdk.getComponent('structures.login.ForgotPassword');
         var LoggedInView = sdk.getComponent('structures.LoggedInView');
 
-        // console.log("rendering; loading="+this.state.loading+"; screen="+this.state.screen +
-        //             "; logged_in="+this.state.logged_in+"; ready="+this.state.ready);
+        console.log("rendering; loading="+this.state.loading+"; screen="+this.state.screen +
+                    "; logged_in="+this.state.logged_in+"; ready="+this.state.ready);
 
         if (this.state.loading) {
             var Spinner = sdk.getComponent('elements.Spinner');
diff --git a/src/dispatcher.js b/src/dispatcher.js
index f35639c3be..22ef712b6c 100644
--- a/src/dispatcher.js
+++ b/src/dispatcher.js
@@ -28,6 +28,7 @@ class MatrixDispatcher extends flux.Dispatcher {
      *        for.
      */
     dispatch(payload, sync) {
+        console.log("Dispatch: "+payload.action);
         if (sync) {
             super.dispatch(payload);
         } else {

From 4ba224aac3cccf26537b5bb339dc438239b6b741 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 20 Jan 2017 14:08:14 +0000
Subject: [PATCH 211/289] Use eslint config from the js sdk

Extend the js sdk's eslint config to give as consistent a code
style as possible. Add react/jsx/flow stuff that we use here.
---
 .eslintrc    | 117 ---------------------------------------------------
 .eslintrc.js |  62 +++++++++++++++++++++++++++
 package.json |   9 ++--
 3 files changed, 67 insertions(+), 121 deletions(-)
 delete mode 100644 .eslintrc
 create mode 100644 .eslintrc.js

diff --git a/.eslintrc b/.eslintrc
deleted file mode 100644
index e2baaed5a6..0000000000
--- a/.eslintrc
+++ /dev/null
@@ -1,117 +0,0 @@
-{
-  "parser": "babel-eslint",
-  "plugins": [
-    "react",
-    "flowtype"
-  ],
-  "parserOptions": {
-    "ecmaVersion": 6,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true,
-      "impliedStrict": true
-    }
-  },
-  "env": {
-    "browser": true,
-    "amd": true,
-    "es6": true,
-    "node": true,
-    "mocha": true
-  },
-  "extends": ["eslint:recommended", "plugin:react/recommended"],
-  "rules": {
-    "no-undef": ["warn"],
-    "global-strict": ["off"],
-    "no-extra-semi": ["warn"],
-    "no-underscore-dangle": ["off"],
-    "no-console": ["off"],
-    "no-unused-vars": ["off"],
-    "no-trailing-spaces": ["warn", {
-      "skipBlankLines": true
-    }],
-    "no-unreachable": ["warn"],
-    "no-spaced-func": ["warn"],
-    "no-new-func": ["error"],
-    "no-new-wrappers": ["error"],
-    "no-invalid-regexp": ["error"],
-    "no-extra-bind": ["error"],
-    "no-magic-numbers": ["error", {
-      "ignore": [-1, 0, 1], // usually used in array/string indexing
-      "ignoreArrayIndexes": true,
-      "enforceConst": true,
-      "detectObjects": true
-    }],
-    "consistent-return": ["error"],
-    "valid-jsdoc": ["error"],
-    "no-use-before-define": ["error"],
-    "camelcase": ["warn"],
-    "array-callback-return": ["error"],
-    "dot-location": ["warn", "property"],
-    "guard-for-in": ["error"],
-    "no-useless-call": ["warn"],
-    "no-useless-escape": ["warn"],
-    "no-useless-concat": ["warn"],
-    "brace-style": ["warn", "1tbs"],
-    "comma-style": ["warn", "last"],
-    "space-before-function-paren": ["warn", "never"],
-    "space-before-blocks": ["warn", "always"],
-    "keyword-spacing": ["warn", {
-      "before": true,
-      "after": true
-    }],
-
-    // dangling commas required, but only for multiline objects/arrays
-    "comma-dangle": ["warn", "always-multiline"],
-    // always === instead of ==, unless dealing with null/undefined
-    "eqeqeq": ["error", "smart"],
-    // always use curly braces, even with single statements
-    "curly": ["error", "all"],
-    // phasing out var in favour of let/const is a good idea
-    "no-var": ["warn"],
-    // always require semicolons
-    "semi": ["error", "always"],
-    // prefer rest and spread over the Old Ways
-    "prefer-spread": ["warn"],
-    "prefer-rest-params": ["warn"],
-
-    /** react **/
-
-    // bind or arrow function in props causes performance issues
-    "react/jsx-no-bind": ["error", {
-      "ignoreRefs": true
-    }],
-    "react/jsx-key": ["error"],
-    "react/prefer-stateless-function": ["warn"],
-
-    /** flowtype **/
-    "flowtype/require-parameter-type": [
-      1,
-      {
-        "excludeArrowFunctions": true
-      }
-    ],
-    "flowtype/define-flow-type": 1,
-    "flowtype/require-return-type": [
-      1,
-      "always",
-      {
-        "annotateUndefined": "never",
-        "excludeArrowFunctions": true
-      }
-    ],
-    "flowtype/space-after-type-colon": [
-      1,
-      "always"
-    ],
-    "flowtype/space-before-type-colon": [
-      1,
-      "never"
-    ]
-  },
-  "settings": {
-    "flowtype": {
-      "onlyFilesWithFlowAnnotation": true
-    }
-  }
-}
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000000..e41106d695
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,62 @@
+module.exports = {
+    parser: "babel-eslint",
+    extends: ["./node_modules/matrix-js-sdk/.eslintrc.js"],
+    plugins: [
+      "react",
+      "flowtype",
+    ],
+    env: {
+        es6: true,
+    },
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true,
+        }
+    },
+    rules: {
+        /** react **/
+        // This just uses the react plugin to help eslint known when
+        // variables have been used in JSX
+        "react/jsx-uses-vars": "error",
+
+        // bind or arrow function in props causes performance issues
+        "react/jsx-no-bind": ["error", {
+            "ignoreRefs": true,
+        }],
+        "react/jsx-key": ["error"],
+
+        /** flowtype **/
+        "flowtype/require-parameter-type": ["warn", {
+            "excludeArrowFunctions": true,
+        }],
+        "flowtype/define-flow-type": "warn",
+        "flowtype/require-return-type": ["warn",
+            "always",
+            {
+              "annotateUndefined": "never",
+              "excludeArrowFunctions": true,
+            }
+        ],
+        "flowtype/space-after-type-colon": ["warn", "always"],
+        "flowtype/space-before-type-colon": ["warn", "never"],
+
+        /*
+         * things that are errors in the js-sdk config that the current
+         * code does not adhere to, turned down to warn
+         */
+        "max-len": ["warn"],
+        "valid-jsdoc": ["warn"],
+        "new-cap": ["warn"],
+        "key-spacing": ["warn"],
+        "arrow-parens": ["warn"],
+        "prefer-const": ["warn"],
+
+        // crashes currently: https://github.com/eslint/eslint/issues/6274
+        "generator-star-spacing": "off",
+    },
+    settings: {
+        flowtype: {
+            onlyFilesWithFlowAnnotation: true
+        },
+    },
+};
diff --git a/package.json b/package.json
index e2a8fe2c35..8e1ead4b9e 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
   "devDependencies": {
     "babel-cli": "^6.5.2",
     "babel-core": "^6.14.0",
-    "babel-eslint": "^6.1.0",
+    "babel-eslint": "^6.1.2",
     "babel-loader": "^6.2.5",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-transform-async-to-generator": "^6.16.0",
@@ -86,9 +86,10 @@
     "babel-preset-es2016": "^6.11.3",
     "babel-preset-es2017": "^6.14.0",
     "babel-preset-react": "^6.11.1",
-    "eslint": "^2.13.1",
-    "eslint-plugin-flowtype": "^2.17.0",
-    "eslint-plugin-react": "^6.2.1",
+    "eslint": "^3.13.1",
+    "eslint-config-google": "^0.7.1",
+    "eslint-plugin-flowtype": "^2.30.0",
+    "eslint-plugin-react": "^6.9.0",
     "expect": "^1.16.0",
     "json-loader": "^0.5.3",
     "karma": "^0.13.22",

From 18d4d3392a13b56d683ff0a536e723d7ead76921 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 20 Jan 2017 14:22:27 +0000
Subject: [PATCH 212/289] Fix a bunch of linting errors

eslint --fix and a few manual ones
---
 src/AddThreepid.js                            |  2 +-
 src/Avatar.js                                 |  4 +--
 src/BasePlatform.js                           |  6 ++--
 src/CallHandler.js                            |  4 +--
 src/ContentMessages.js                        |  2 +-
 src/DateUtils.js                              |  2 +-
 src/Entities.js                               |  2 +-
 src/HtmlUtils.js                              | 10 +++---
 src/ImageUtils.js                             |  2 +-
 src/Invite.js                                 |  4 +--
 src/Lifecycle.js                              |  4 +--
 src/Markdown.js                               | 14 ++++----
 src/Modal.js                                  |  8 ++---
 src/Notifier.js                               |  4 +--
 src/ObjectUtils.js                            |  2 +-
 src/Presence.js                               |  2 +-
 src/RichText.js                               |  4 +--
 src/RoomListSorter.js                         |  2 +-
 src/RoomNotifs.js                             |  2 +-
 src/Rooms.js                                  |  2 +-
 src/ScalarMessaging.js                        |  2 +-
 src/SlashCommands.js                          | 12 +++----
 src/TabComplete.js                            |  6 ++--
 src/TabCompleteEntries.js                     |  5 ++-
 src/TextForEvent.js                           |  3 +-
 src/Tinter.js                                 |  9 ++---
 src/Velociraptor.js                           |  6 ++--
 src/VelocityBounce.js                         |  6 ++--
 src/WhoIsTyping.js                            |  2 +-
 src/autocomplete/AutocompleteProvider.js      |  2 +-
 src/autocomplete/CommandProvider.js           |  2 +-
 src/autocomplete/DuckDuckGoProvider.js        |  2 +-
 src/autocomplete/EmojiProvider.js             |  2 +-
 src/autocomplete/RoomProvider.js              |  4 +--
 src/components/structures/ContextualMenu.js   |  8 ++---
 src/components/structures/CreateRoom.js       |  4 +--
 src/components/structures/FilePanel.js        |  2 +-
 src/components/structures/LoggedInView.js     | 18 +++++-----
 src/components/structures/MatrixChat.js       |  4 +--
 src/components/structures/MessagePanel.js     |  6 ++--
 src/components/structures/RoomView.js         | 34 ++++++++++---------
 src/components/structures/ScrollPanel.js      |  4 +--
 src/components/structures/TimelinePanel.js    | 20 ++++++-----
 src/components/structures/UploadBar.js        |  6 ++--
 src/components/structures/UserSettings.js     | 20 +++++------
 .../structures/login/ForgotPassword.js        |  6 ++--
 src/components/structures/login/Login.js      |  8 ++---
 .../structures/login/Registration.js          |  2 +-
 src/components/views/avatars/BaseAvatar.js    |  2 +-
 src/components/views/avatars/MemberAvatar.js  |  6 ++--
 src/components/views/avatars/RoomAvatar.js    |  4 +--
 src/components/views/create_room/Presets.js   |  2 +-
 .../views/dialogs/ChatInviteDialog.js         |  6 ++--
 .../views/dialogs/DeactivateAccountDialog.js  |  4 +--
 .../views/elements/AddressSelector.js         |  4 +--
 src/components/views/elements/AddressTile.js  |  2 +-
 .../views/elements/DeviceVerifyButtons.js     |  4 +--
 src/components/views/elements/EditableText.js |  8 ++---
 .../views/elements/PowerSelector.js           |  8 ++---
 src/components/views/elements/ProgressBar.js  |  2 +-
 .../views/elements/TruncatedList.js           |  2 +-
 src/components/views/elements/UserSelector.js |  2 +-
 src/components/views/login/CaptchaForm.js     |  4 +--
 .../login/InteractiveAuthEntryComponents.js   |  4 +--
 .../views/login/RegistrationForm.js           | 16 ++++-----
 src/components/views/login/ServerConfig.js    |  4 +--
 src/components/views/messages/MAudioBody.js   |  2 +-
 src/components/views/messages/MFileBody.js    |  4 +--
 src/components/views/messages/MImageBody.js   |  2 +-
 src/components/views/messages/MVideoBody.js   |  2 +-
 src/components/views/messages/TextualBody.js  |  6 ++--
 .../views/room_settings/AliasSettings.js      | 18 +++++-----
 .../views/room_settings/ColorSettings.js      |  2 +-
 .../views/room_settings/UrlPreviewSettings.js |  6 ++--
 src/components/views/rooms/AuxPanel.js        |  4 +--
 src/components/views/rooms/EventTile.js       | 10 +++---
 .../views/rooms/LinkPreviewWidget.js          |  8 +++--
 .../views/rooms/MemberDeviceInfo.js           |  2 +-
 src/components/views/rooms/MemberInfo.js      | 12 +++----
 src/components/views/rooms/MemberList.js      |  8 ++---
 src/components/views/rooms/MemberTile.js      |  2 +-
 src/components/views/rooms/MessageComposer.js |  2 +-
 .../views/rooms/MessageComposerInput.js       | 19 ++++++-----
 .../views/rooms/MessageComposerInputOld.js    |  2 +-
 .../views/rooms/ReadReceiptMarker.js          |  4 +--
 src/components/views/rooms/RoomHeader.js      | 10 +++---
 src/components/views/rooms/RoomList.js        |  8 ++---
 src/components/views/rooms/RoomPreviewBar.js  |  6 ++--
 src/components/views/rooms/RoomSettings.js    | 14 ++++----
 src/components/views/rooms/RoomTile.js        |  2 +-
 .../views/rooms/SearchableEntityList.js       |  6 ++--
 .../views/rooms/SimpleRoomHeader.js           |  2 +-
 src/components/views/rooms/UserTile.js        |  2 +-
 src/components/views/settings/ChangeAvatar.js |  6 ++--
 .../views/settings/ChangePassword.js          |  4 +--
 src/components/views/settings/DevicesPanel.js |  4 +--
 .../views/settings/DevicesPanelEntry.js       |  7 ++--
 .../settings/EnableNotificationsButton.js     |  1 -
 src/components/views/voip/CallView.js         |  2 +-
 src/components/views/voip/VideoView.js        |  2 +-
 src/createRoom.js                             |  4 +--
 src/dispatcher.js                             |  2 +-
 src/extend.js                                 |  2 +-
 src/linkify-matrix.js                         |  4 +--
 src/utils/FormattingUtils.js                  |  2 +-
 src/utils/MegolmExportEncryption.js           |  2 +-
 src/wrappers/WithMatrixClient.js              |  2 +-
 107 files changed, 290 insertions(+), 290 deletions(-)

diff --git a/src/AddThreepid.js b/src/AddThreepid.js
index 5593d46ff7..d6a1d58aa0 100644
--- a/src/AddThreepid.js
+++ b/src/AddThreepid.js
@@ -21,7 +21,7 @@ var MatrixClientPeg = require("./MatrixClientPeg");
  * optionally, the identity servers.
  *
  * This involves getting an email token from the identity server to "prove" that
- * the client owns the given email address, which is then passed to the 
+ * the client owns the given email address, which is then passed to the
  * add threepid API on the homeserver.
  */
 class AddThreepid {
diff --git a/src/Avatar.js b/src/Avatar.js
index 0ef6c8d07b..76f5e55ff0 100644
--- a/src/Avatar.js
+++ b/src/Avatar.js
@@ -49,12 +49,12 @@ module.exports = {
     },
 
     defaultAvatarUrlForString: function(s) {
-        var images = [ '76cfa6', '50e2c2', 'f4c371' ];
+        var images = ['76cfa6', '50e2c2', 'f4c371'];
         var total = 0;
         for (var i = 0; i < s.length; ++i) {
             total += s.charCodeAt(i);
         }
         return 'img/' + images[total % images.length] + '.png';
     }
-}
+};
 
diff --git a/src/BasePlatform.js b/src/BasePlatform.js
index 815133c334..8bdf7d0391 100644
--- a/src/BasePlatform.js
+++ b/src/BasePlatform.js
@@ -41,7 +41,7 @@ export default class BasePlatform {
      * Returns true if the platform supports displaying
      * notifications, otherwise false.
      */
-    supportsNotifications() : boolean {
+    supportsNotifications(): boolean {
         return false;
     }
 
@@ -49,7 +49,7 @@ export default class BasePlatform {
      * Returns true if the application currently has permission
      * to display notifications. Otherwise false.
      */
-    maySendNotifications() : boolean {
+    maySendNotifications(): boolean {
         return false;
     }
 
@@ -60,7 +60,7 @@ export default class BasePlatform {
      * that is 'granted' if the user allowed the request or
      * 'denied' otherwise.
      */
-    requestNotificationPermission() : Promise<string> {
+    requestNotificationPermission(): Promise<string> {
     }
 
     displayNotification(title: string, msg: string, avatarUrl: string, room: Object) {
diff --git a/src/CallHandler.js b/src/CallHandler.js
index 31b52b65a3..268a599d8e 100644
--- a/src/CallHandler.js
+++ b/src/CallHandler.js
@@ -159,10 +159,10 @@ function _setCallState(call, roomId, status) {
     calls[roomId] = call;
 
     if (status === "ringing") {
-        play("ringAudio")
+        play("ringAudio");
     }
     else if (call && call.call_state === "ringing") {
-        pause("ringAudio")
+        pause("ringAudio");
     }
 
     if (call) {
diff --git a/src/ContentMessages.js b/src/ContentMessages.js
index c169ce64b5..17c8155c1b 100644
--- a/src/ContentMessages.js
+++ b/src/ContentMessages.js
@@ -256,7 +256,7 @@ function uploadFile(matrixClient, roomId, file) {
             });
         });
     } else {
-        const basePromise =  matrixClient.uploadContent(file);
+        const basePromise = matrixClient.uploadContent(file);
         const promise1 = basePromise.then(function(url) {
             // If the attachment isn't encrypted then include the URL directly.
             return {"url": url};
diff --git a/src/DateUtils.js b/src/DateUtils.js
index 2b51c5903f..07bab4ae7b 100644
--- a/src/DateUtils.js
+++ b/src/DateUtils.js
@@ -48,5 +48,5 @@ module.exports = {
         //return pad(date.getHours()) + ':' + pad(date.getMinutes());
         return ('00' + date.getHours()).slice(-2) + ':' + ('00' + date.getMinutes()).slice(-2);
     }
-}
+};
 
diff --git a/src/Entities.js b/src/Entities.js
index ac3c976797..7c3909f36f 100644
--- a/src/Entities.js
+++ b/src/Entities.js
@@ -136,6 +136,6 @@ module.exports = {
     fromUsers: function(users, showInviteButton, inviteFn) {
         return users.map(function(u) {
             return new UserEntity(u, showInviteButton, inviteFn);
-        })
+        });
     }
 };
diff --git a/src/HtmlUtils.js b/src/HtmlUtils.js
index fc1630b6fb..c7b13bc071 100644
--- a/src/HtmlUtils.js
+++ b/src/HtmlUtils.js
@@ -91,16 +91,16 @@ var sanitizeHtmlParams = {
     ],
     allowedAttributes: {
         // custom ones first:
-        font: [ 'color' ], // custom to matrix
-        a: [ 'href', 'name', 'target', 'rel' ], // remote target: custom to matrix
+        font: ['color'], // custom to matrix
+        a: ['href', 'name', 'target', 'rel'], // remote target: custom to matrix
         // We don't currently allow img itself by default, but this
         // would make sense if we did
-        img: [ 'src' ],
+        img: ['src'],
     },
     // Lots of these won't come up by default because we don't allow them
-    selfClosing: [ 'img', 'br', 'hr', 'area', 'base', 'basefont', 'input', 'link', 'meta' ],
+    selfClosing: ['img', 'br', 'hr', 'area', 'base', 'basefont', 'input', 'link', 'meta'],
     // URL schemes we permit
-    allowedSchemes: [ 'http', 'https', 'ftp', 'mailto' ],
+    allowedSchemes: ['http', 'https', 'ftp', 'mailto'],
 
     // DO NOT USE. sanitize-html allows all URL starting with '//'
     // so this will always allow links to whatever scheme the
diff --git a/src/ImageUtils.js b/src/ImageUtils.js
index fdb12c7608..3744241874 100644
--- a/src/ImageUtils.js
+++ b/src/ImageUtils.js
@@ -53,5 +53,5 @@ module.exports = {
             return Math.floor(heightMulti * fullHeight);
         }
     },
-}
+};
 
diff --git a/src/Invite.js b/src/Invite.js
index 6bfc646977..6ad929e33b 100644
--- a/src/Invite.js
+++ b/src/Invite.js
@@ -55,7 +55,7 @@ export function inviteToRoom(roomId, addr) {
  * @returns Promise
  */
 export function inviteMultipleToRoom(roomId, addrs) {
-    this.inviter = new MultiInviter(roomId);
-    return this.inviter.invite(addrs);
+    const inviter = new MultiInviter(roomId);
+    return inviter.invite(addrs);
 }
 
diff --git a/src/Lifecycle.js b/src/Lifecycle.js
index 0a61dc6105..493bbf12aa 100644
--- a/src/Lifecycle.js
+++ b/src/Lifecycle.js
@@ -18,7 +18,7 @@ import q from 'q';
 import Matrix from 'matrix-js-sdk';
 
 import MatrixClientPeg from './MatrixClientPeg';
-import Notifier from './Notifier'
+import Notifier from './Notifier';
 import UserActivity from './UserActivity';
 import Presence from './Presence';
 import dis from './dispatcher';
@@ -140,7 +140,7 @@ function _loginWithToken(queryParams, defaultDeviceDisplayName) {
             homeserverUrl: queryParams.homeserver,
             identityServerUrl: queryParams.identityServer,
             guest: false,
-        })
+        });
     }, (err) => {
         console.error("Failed to log in with login token: " + err + " " +
                       err.data);
diff --git a/src/Markdown.js b/src/Markdown.js
index 3506e3cb59..2f278183a3 100644
--- a/src/Markdown.js
+++ b/src/Markdown.js
@@ -49,9 +49,9 @@ export default class Markdown {
             dummy_renderer[k] = setNotPlain;
         }
         // text and paragraph are just text
-        dummy_renderer.text = function(t) { return t; }
-        dummy_renderer.softbreak = function(t) { return t; }
-        dummy_renderer.paragraph = function(t) { return t; }
+        dummy_renderer.text = function(t) { return t; };
+        dummy_renderer.softbreak = function(t) { return t; };
+        dummy_renderer.paragraph = function(t) { return t; };
 
         const dummy_parser = new commonmark.Parser();
         dummy_renderer.render(dummy_parser.parse(this.input));
@@ -70,12 +70,12 @@ export default class Markdown {
             // its own p tag to keep them as separate paragraphs.
             var par = node;
             while (par.parent) {
-                par = par.parent
+                par = par.parent;
             }
             if (par.firstChild != par.lastChild) {
                 real_paragraph.call(this, node, entering);
             }
-        }
+        };
 
         var parsed = this.parser.parse(this.input);
         var rendered = this.renderer.render(parsed);
@@ -94,7 +94,7 @@ export default class Markdown {
         this.renderer.out = function(s) {
             // The `lit` function adds a string literal to the output buffer.
             this.lit(s);
-        }
+        };
 
         this.renderer.paragraph = function(node, entering) {
             // If there is only one top level node, just return the
@@ -112,7 +112,7 @@ export default class Markdown {
                     this.lit('\n\n');
                 }
             }
-        }
+        };
 
         var parsed = this.parser.parse(this.input);
         var rendered = this.renderer.render(parsed);
diff --git a/src/Modal.js b/src/Modal.js
index c2ce04c4e8..862e4befc5 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -36,7 +36,7 @@ const AsyncWrapper = React.createClass({
     getInitialState: function() {
         return {
             component: null,
-        }
+        };
     },
 
     componentWillMount: function() {
@@ -82,8 +82,8 @@ module.exports = {
         return container;
     },
 
-    createDialog: function (Element, props, className) {
-        return this.createDialogAsync((cb) => {cb(Element)}, props, className);
+    createDialog: function(Element, props, className) {
+        return this.createDialogAsync((cb) => {cb(Element);}, props, className);
     },
 
     /**
@@ -105,7 +105,7 @@ module.exports = {
      *
      * @param {String} className   CSS class to apply to the modal wrapper
      */
-    createDialogAsync: function (loader, props, className) {
+    createDialogAsync: function(loader, props, className) {
         var self = this;
         // never call this via modal.close() from onFinished() otherwise it will loop
         var closeDialog = function() {
diff --git a/src/Notifier.js b/src/Notifier.js
index a58fc0132f..67642e734a 100644
--- a/src/Notifier.js
+++ b/src/Notifier.js
@@ -53,7 +53,7 @@ var Notifier = {
         if (!msg) return;
 
         var title;
-        if (!ev.sender ||  room.name == ev.sender.name) {
+        if (!ev.sender || room.name == ev.sender.name) {
             title = room.name;
             // notificationMessageForEvent includes sender,
             // but we already have the sender here
@@ -88,7 +88,7 @@ var Notifier = {
         if (e) {
             e.load();
             e.play();
-        };
+        }
     },
 
     start: function() {
diff --git a/src/ObjectUtils.js b/src/ObjectUtils.js
index 07a16df501..5fac588a4f 100644
--- a/src/ObjectUtils.js
+++ b/src/ObjectUtils.js
@@ -64,7 +64,7 @@ module.exports.getKeyValueArrayDiffs = function(before, after) {
                     } else if (itemDelta[item] === -1) {
                         results.push({ place: "del", key: muxedKey, val: item });
                     } else {
-                        // itemDelta of 0 means it was unchanged between before/after                     
+                        // itemDelta of 0 means it was unchanged between before/after
                     }
                 });
                 break;
diff --git a/src/Presence.js b/src/Presence.js
index 4152d7a487..c45d571217 100644
--- a/src/Presence.js
+++ b/src/Presence.js
@@ -111,7 +111,7 @@ class Presence {
         this.timer = setTimeout(function() {
             self._onUnavailableTimerFire();
         }, UNAVAILABLE_TIME_MS);
-    } 
+    }
 }
 
 module.exports = new Presence();
diff --git a/src/RichText.js b/src/RichText.js
index 5fe920fe50..b1793d0ddf 100644
--- a/src/RichText.js
+++ b/src/RichText.js
@@ -12,7 +12,7 @@ import {
     SelectionState,
     Entity,
 } from 'draft-js';
-import * as sdk from  './index';
+import * as sdk from './index';
 import * as emojione from 'emojione';
 import {stateToHTML} from 'draft-js-export-html';
 import {SelectionRange} from "./autocomplete/Autocompleter";
@@ -109,7 +109,7 @@ export function getScopedRTDecorators(scope: any): CompositeDecorator {
             return <span className="mx_UserPill">{avatar}{props.children}</span>;
         }
     };
-    
+
     let roomDecorator = {
         strategy: (contentBlock, callback) => {
             findWithRegex(ROOM_REGEX, contentBlock, callback);
diff --git a/src/RoomListSorter.js b/src/RoomListSorter.js
index 09f178dd3f..7a43c1891e 100644
--- a/src/RoomListSorter.js
+++ b/src/RoomListSorter.js
@@ -26,7 +26,7 @@ function tsOfNewestEvent(room) {
 }
 
 function mostRecentActivityFirst(roomList) {
-    return roomList.sort(function(a,b) {
+    return roomList.sort(function(a, b) {
         return tsOfNewestEvent(b) - tsOfNewestEvent(a);
     });
 }
diff --git a/src/RoomNotifs.js b/src/RoomNotifs.js
index d0cdd6ead7..7cb7d4b9de 100644
--- a/src/RoomNotifs.js
+++ b/src/RoomNotifs.js
@@ -146,7 +146,7 @@ function isRuleForRoom(roomId, rule) {
     }
     const cond = rule.conditions[0];
     if (
-        cond.kind == 'event_match'  &&
+        cond.kind == 'event_match' &&
         cond.key == 'room_id' &&
         cond.pattern == roomId
     ) {
diff --git a/src/Rooms.js b/src/Rooms.js
index cf62f2dda0..fbcc843ad2 100644
--- a/src/Rooms.js
+++ b/src/Rooms.js
@@ -37,7 +37,7 @@ export function getOnlyOtherMember(room, me) {
 
     if (joinedMembers.length === 2) {
         return joinedMembers.filter(function(m) {
-            return m.userId !== me.userId
+            return m.userId !== me.userId;
         })[0];
     }
 
diff --git a/src/ScalarMessaging.js b/src/ScalarMessaging.js
index 75062daaa2..dbb7e405df 100644
--- a/src/ScalarMessaging.js
+++ b/src/ScalarMessaging.js
@@ -371,7 +371,7 @@ const onMessage = function(event) {
     }, (err) => {
         console.error(err);
         sendError(event, "Failed to lookup current room.");
-    })
+    });
 };
 
 module.exports = {
diff --git a/src/SlashCommands.js b/src/SlashCommands.js
index 523d1d8f3c..1ddcf4832d 100644
--- a/src/SlashCommands.js
+++ b/src/SlashCommands.js
@@ -41,7 +41,7 @@ class Command {
     }
 
     getUsage() {
-        return "Usage: " + this.getCommandWithArgs()
+        return "Usage: " + this.getCommandWithArgs();
     }
 }
 
@@ -84,7 +84,7 @@ var commands = {
             var matches = args.match(/^(#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}))( +(#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})))?$/);
             if (matches) {
                 Tinter.tint(matches[1], matches[4]);
-                var colorScheme = {}
+                var colorScheme = {};
                 colorScheme.primary_color = matches[1];
                 if (matches[4]) {
                     colorScheme.secondary_color = matches[4];
@@ -288,7 +288,7 @@ var commands = {
 // helpful aliases
 var aliases = {
     j: "join"
-}
+};
 
 module.exports = {
     /**
@@ -331,9 +331,9 @@ module.exports = {
         // Return all the commands plus /me and /markdown which aren't handled like normal commands
         var cmds = Object.keys(commands).sort().map(function(cmdKey) {
             return commands[cmdKey];
-        })
-        cmds.push(new Command("me", "<action>", function(){}));
-        cmds.push(new Command("markdown", "<on|off>", function(){}));
+        });
+        cmds.push(new Command("me", "<action>", function() {}));
+        cmds.push(new Command("markdown", "<on|off>", function() {}));
 
         return cmds;
     }
diff --git a/src/TabComplete.js b/src/TabComplete.js
index a0380f36c4..59ecc2ae20 100644
--- a/src/TabComplete.js
+++ b/src/TabComplete.js
@@ -112,7 +112,7 @@ class TabComplete {
             return;
         }
         // ES6 destructuring; ignore first element (the complete match)
-        var [ , boundaryGroup, partialGroup] = res;
+        var [, boundaryGroup, partialGroup] = res;
 
         if (partialGroup.length === 0 && passive) {
             return;
@@ -254,7 +254,7 @@ class TabComplete {
         if (ev.ctrlKey || ev.metaKey || ev.altKey) return;
 
         // tab key has been pressed at this point
-        this.handleTabPress(false, ev.shiftKey)
+        this.handleTabPress(false, ev.shiftKey);
 
         // prevent the default TAB operation (typically focus shifting)
         ev.preventDefault();
@@ -386,6 +386,6 @@ class TabComplete {
             this.memberTabOrder[ev.getSender()] = this.memberOrderSeq++;
         }
     }
-};
+}
 
 module.exports = TabComplete;
diff --git a/src/TabCompleteEntries.js b/src/TabCompleteEntries.js
index 2a8c7b383a..e6adec0d7d 100644
--- a/src/TabCompleteEntries.js
+++ b/src/TabCompleteEntries.js
@@ -13,7 +13,6 @@ 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.
 */
-var React = require("react");
 var sdk = require("./index");
 
 class Entry {
@@ -90,7 +89,7 @@ CommandEntry.fromCommands = function(commandArray) {
     return commandArray.map(function(cmd) {
         return new CommandEntry(cmd.getCommand(), cmd.getCommandWithArgs());
     });
-}
+};
 
 class MemberEntry extends Entry {
     constructor(member) {
@@ -119,7 +118,7 @@ MemberEntry.fromMemberList = function(members) {
     return members.map(function(m) {
         return new MemberEntry(m);
     });
-}
+};
 
 module.exports.Entry = Entry;
 module.exports.MemberEntry = MemberEntry;
diff --git a/src/TextForEvent.js b/src/TextForEvent.js
index 2ffd33167f..3f772e9cfb 100644
--- a/src/TextForEvent.js
+++ b/src/TextForEvent.js
@@ -75,7 +75,6 @@ function textForMemberEvent(ev) {
                     return targetName + " joined the room.";
                 }
             }
-            return '';
         case 'leave':
             if (ev.getSender() === ev.getStateKey()) {
                 if (ConferenceHandler && ConferenceHandler.isConferenceUser(ev.getStateKey())) {
@@ -203,4 +202,4 @@ module.exports = {
         if (!hdlr) return "";
         return hdlr(ev);
     }
-}
+};
diff --git a/src/Tinter.js b/src/Tinter.js
index 4a5e4e453c..5bf13e6d4a 100644
--- a/src/Tinter.js
+++ b/src/Tinter.js
@@ -14,9 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var dis = require("./dispatcher");
-var sdk = require("./index");
-
 // FIXME: these vars should be bundled up and attached to
 // module.exports otherwise this will break when included by both
 // react-sdk and apps layered on top.
@@ -152,7 +149,7 @@ function hexToRgb(color) {
 
 function rgbToHex(rgb) {
     var val = (rgb[0] << 16) | (rgb[1] << 8) | rgb[2];
-    return '#' + (0x1000000 + val).toString(16).slice(1)
+    return '#' + (0x1000000 + val).toString(16).slice(1);
 }
 
 // List of functions to call when the tint changes.
@@ -187,7 +184,7 @@ module.exports = {
         }
 
         if (!secondaryColor) {
-            var x = 0.16; // average weighting factor calculated from vector green & light green
+            const x = 0.16; // average weighting factor calculated from vector green & light green
             var rgb = hexToRgb(primaryColor);
             rgb[0] = x * rgb[0] + (1 - x) * 255;
             rgb[1] = x * rgb[1] + (1 - x) * 255;
@@ -196,7 +193,7 @@ module.exports = {
         }
 
         if (!tertiaryColor) {
-            var x = 0.19;
+            const x = 0.19;
             var rgb1 = hexToRgb(primaryColor);
             var rgb2 = hexToRgb(secondaryColor);
             rgb1[0] = x * rgb1[0] + (1 - x) * rgb2[0];
diff --git a/src/Velociraptor.js b/src/Velociraptor.js
index d9b6b3d5dc..006dbcb0ac 100644
--- a/src/Velociraptor.js
+++ b/src/Velociraptor.js
@@ -76,7 +76,7 @@ module.exports = React.createClass({
 
                 var startStyles = self.props.startStyles;
                 if (startStyles.length > 0) {
-                    var startStyle = startStyles[0]
+                    var startStyle = startStyles[0];
                     newProps.style = startStyle;
                     // console.log("mounted@startstyle0: "+JSON.stringify(startStyle));
                 }
@@ -105,7 +105,7 @@ module.exports = React.createClass({
         ) {
             var startStyles = this.props.startStyles;
             var transitionOpts = this.props.enterTransitionOpts;
-            var domNode = ReactDom.findDOMNode(node);
+            const domNode = ReactDom.findDOMNode(node);
             // start from startStyle 1: 0 is the one we gave it
             // to start with, so now we animate 1 etc.
             for (var i = 1; i < startStyles.length; ++i) {
@@ -145,7 +145,7 @@ module.exports = React.createClass({
             // and the FAQ entry, "Preventing memory leaks when
             // creating/destroying large numbers of elements"
             // (https://github.com/julianshapiro/velocity/issues/47)
-            var domNode = ReactDom.findDOMNode(this.nodes[k]);
+            const domNode = ReactDom.findDOMNode(this.nodes[k]);
             Velocity.Utilities.removeData(domNode);
         }
         this.nodes[k] = node;
diff --git a/src/VelocityBounce.js b/src/VelocityBounce.js
index 168b0b14af..3ad7d207a9 100644
--- a/src/VelocityBounce.js
+++ b/src/VelocityBounce.js
@@ -6,10 +6,12 @@ function bounce( p ) {
     var pow2,
         bounce = 4;
 
-    while ( p < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) {}
+    while ( p < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) {
+        // just sets pow2
+    }
     return 1 / Math.pow( 4, 3 - bounce ) - 7.5625 * Math.pow( ( pow2 * 3 - 2 ) / 22 - p, 2 );
 }
 
 Velocity.Easings.easeOutBounce = function(p) {
     return 1 - bounce(1 - p);
-}
+};
diff --git a/src/WhoIsTyping.js b/src/WhoIsTyping.js
index 4fb5399027..8c3838d615 100644
--- a/src/WhoIsTyping.js
+++ b/src/WhoIsTyping.js
@@ -46,4 +46,4 @@ module.exports = {
             return names.join(', ') + ' and ' + lastPerson + ' are typing';
         }
     }
-}
+};
diff --git a/src/autocomplete/AutocompleteProvider.js b/src/autocomplete/AutocompleteProvider.js
index 9cdb774cac..5c90990295 100644
--- a/src/autocomplete/AutocompleteProvider.js
+++ b/src/autocomplete/AutocompleteProvider.js
@@ -26,7 +26,7 @@ export default class AutocompleteProvider {
         }
 
         commandRegex.lastIndex = 0;
-        
+
         let match;
         while ((match = commandRegex.exec(query)) != null) {
             let matchStart = match.index,
diff --git a/src/autocomplete/CommandProvider.js b/src/autocomplete/CommandProvider.js
index 7d032006db..60171bc72f 100644
--- a/src/autocomplete/CommandProvider.js
+++ b/src/autocomplete/CommandProvider.js
@@ -83,7 +83,7 @@ export default class CommandProvider extends AutocompleteProvider {
 
     static getInstance(): CommandProvider {
         if (instance == null)
-            instance = new CommandProvider();
+            {instance = new CommandProvider();}
 
         return instance;
     }
diff --git a/src/autocomplete/DuckDuckGoProvider.js b/src/autocomplete/DuckDuckGoProvider.js
index 46aa4b0f03..bffd924976 100644
--- a/src/autocomplete/DuckDuckGoProvider.js
+++ b/src/autocomplete/DuckDuckGoProvider.js
@@ -13,7 +13,7 @@ export default class DuckDuckGoProvider extends AutocompleteProvider {
     constructor() {
         super(DDG_REGEX);
     }
-    
+
     static getQueryUri(query: String) {
         return `https://api.duckduckgo.com/?q=${encodeURIComponent(query)}`
          + `&format=json&no_redirect=1&no_html=1&t=${encodeURIComponent(REFERRER)}`;
diff --git a/src/autocomplete/EmojiProvider.js b/src/autocomplete/EmojiProvider.js
index 4c8bf60b83..a2d77f02a1 100644
--- a/src/autocomplete/EmojiProvider.js
+++ b/src/autocomplete/EmojiProvider.js
@@ -44,7 +44,7 @@ export default class EmojiProvider extends AutocompleteProvider {
 
     static getInstance() {
         if (instance == null)
-            instance = new EmojiProvider();
+            {instance = new EmojiProvider();}
         return instance;
     }
 
diff --git a/src/autocomplete/RoomProvider.js b/src/autocomplete/RoomProvider.js
index f3401cf1bb..8d1e555e56 100644
--- a/src/autocomplete/RoomProvider.js
+++ b/src/autocomplete/RoomProvider.js
@@ -52,12 +52,12 @@ export default class RoomProvider extends AutocompleteProvider {
     getName() {
         return '💬 Rooms';
     }
-    
+
     static getInstance() {
         if (instance == null) {
             instance = new RoomProvider();
         }
-        
+
         return instance;
     }
 
diff --git a/src/components/structures/ContextualMenu.js b/src/components/structures/ContextualMenu.js
index da419897dc..e5a62b8345 100644
--- a/src/components/structures/ContextualMenu.js
+++ b/src/components/structures/ContextualMenu.js
@@ -47,7 +47,7 @@ module.exports = {
         return container;
     },
 
-    createMenu: function (Element, props) {
+    createMenu: function(Element, props) {
         var self = this;
 
         var closeMenu = function() {
@@ -78,15 +78,15 @@ module.exports = {
                 .mx_ContextualMenu_chevron_right:after {
                     border-left-color: ${props.menuColour};
                 }
-            `
+            `;
         }
 
         var chevron = null;
         if (props.left) {
-            chevron = <div style={chevronOffset} className="mx_ContextualMenu_chevron_left"></div>
+            chevron = <div style={chevronOffset} className="mx_ContextualMenu_chevron_left"></div>;
             position.left = props.left;
         } else {
-            chevron = <div style={chevronOffset} className="mx_ContextualMenu_chevron_right"></div>
+            chevron = <div style={chevronOffset} className="mx_ContextualMenu_chevron_right"></div>;
             position.right = props.right;
         }
 
diff --git a/src/components/structures/CreateRoom.js b/src/components/structures/CreateRoom.js
index ce4c0916d4..24ebfea07f 100644
--- a/src/components/structures/CreateRoom.js
+++ b/src/components/structures/CreateRoom.js
@@ -118,7 +118,7 @@ module.exports = React.createClass({
 
         var self = this;
 
-        deferred.then(function (resp) {
+        deferred.then(function(resp) {
             self.setState({
                 phase: self.phases.CREATED,
             });
@@ -210,7 +210,7 @@ module.exports = React.createClass({
     onAliasChanged: function(alias) {
         this.setState({
             alias: alias
-        })
+        });
     },
 
     onEncryptChanged: function(ev) {
diff --git a/src/components/structures/FilePanel.js b/src/components/structures/FilePanel.js
index 0dd16a7e99..5166619d48 100644
--- a/src/components/structures/FilePanel.js
+++ b/src/components/structures/FilePanel.js
@@ -35,7 +35,7 @@ var FilePanel = React.createClass({
     getInitialState: function() {
         return {
             timelineSet: null,
-        }
+        };
     },
 
     componentWillMount: function() {
diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js
index 7c0fe14edd..57a4d4c721 100644
--- a/src/components/structures/LoggedInView.js
+++ b/src/components/structures/LoggedInView.js
@@ -160,8 +160,8 @@ export default React.createClass({
                         collapsedRhs={this.props.collapse_rhs}
                         ConferenceHandler={this.props.ConferenceHandler}
                         scrollStateMap={this._scrollStateMap}
-                    />
-                if (!this.props.collapse_rhs) right_panel = <RightPanel roomId={this.props.currentRoomId} opacity={this.props.sideOpacity} />
+                    />;
+                if (!this.props.collapse_rhs) right_panel = <RightPanel roomId={this.props.currentRoomId} opacity={this.props.sideOpacity} />;
                 break;
 
             case PageTypes.UserSettings:
@@ -170,28 +170,28 @@ export default React.createClass({
                     brand={this.props.config.brand}
                     collapsedRhs={this.props.collapse_rhs}
                     enableLabs={this.props.config.enableLabs}
-                />
-                if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.sideOpacity}/>
+                />;
+                if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.sideOpacity}/>;
                 break;
 
             case PageTypes.CreateRoom:
                 page_element = <CreateRoom
                     onRoomCreated={this.props.onRoomCreated}
                     collapsedRhs={this.props.collapse_rhs}
-                />
-                if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.sideOpacity}/>
+                />;
+                if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.sideOpacity}/>;
                 break;
 
             case PageTypes.RoomDirectory:
                 page_element = <RoomDirectory
                     collapsedRhs={this.props.collapse_rhs}
                     config={this.props.config.roomDirectory}
-                />
-                if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.sideOpacity}/>
+                />;
+                if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.sideOpacity}/>;
                 break;
             case PageTypes.UserView:
                 page_element = null; // deliberately null for now
-                right_panel = <RightPanel userId={this.props.viewUserId} opacity={this.props.sideOpacity} />
+                right_panel = <RightPanel userId={this.props.viewUserId} opacity={this.props.sideOpacity} />;
                 break;
         }
 
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index ceca3591c5..20d59e22ec 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -77,7 +77,7 @@ module.exports = React.createClass({
     getChildContext: function() {
         return {
             appConfig: this.props.config,
-        }
+        };
     },
 
     getInitialState: function() {
@@ -1038,7 +1038,7 @@ module.exports = React.createClass({
                     {...this.props}
                     {...this.state}
                 />
-            )
+            );
         } else if (this.state.logged_in) {
             // we think we are logged in, but are still waiting for the /sync to complete
             var Spinner = sdk.getComponent('elements.Spinner');
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index c04bec4b35..64b0a8e875 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -19,7 +19,7 @@ var ReactDOM = require("react-dom");
 var dis = require("../../dispatcher");
 var sdk = require('../../index');
 
-var MatrixClientPeg = require('../../MatrixClientPeg')
+var MatrixClientPeg = require('../../MatrixClientPeg');
 
 const MILLIS_IN_DAY = 86400000;
 
@@ -282,7 +282,7 @@ module.exports = React.createClass({
         var isMembershipChange = (e) =>
             e.getType() === 'm.room.member'
             && ['join', 'leave'].indexOf(e.getContent().membership) !== -1
-            && (!e.getPrevContent() || e.getContent().membership  !== e.getPrevContent().membership);
+            && (!e.getPrevContent() || e.getContent().membership !== e.getPrevContent().membership);
 
         for (i = 0; i < this.props.events.length; i++) {
             var mxEv = this.props.events[i];
@@ -340,7 +340,7 @@ module.exports = React.createClass({
                         prevEvent = e;
                         return ret;
                     }
-                ).reduce((a,b) => a.concat(b));
+                ).reduce((a, b) => a.concat(b));
 
                 if (eventTiles.length === 0) {
                     eventTiles = null;
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 8059cd9372..1f35e41817 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -48,7 +48,7 @@ if (DEBUG) {
     // using bind means that we get to keep useful line numbers in the console
     var debuglog = console.log.bind(console);
 } else {
-    var debuglog = function () {};
+    var debuglog = function() {};
 }
 
 module.exports = React.createClass({
@@ -146,7 +146,7 @@ module.exports = React.createClass({
             showTopUnreadMessagesBar: false,
 
             auxPanelMaxHeight: undefined,
-        }
+        };
     },
 
     componentWillMount: function() {
@@ -674,8 +674,9 @@ module.exports = React.createClass({
     },
 
     onSearchResultsFillRequest: function(backwards) {
-        if (!backwards)
+        if (!backwards) {
             return q(false);
+        }
 
         if (this.state.searchResults.next_batch) {
             debuglog("requesting more search results");
@@ -758,7 +759,7 @@ module.exports = React.createClass({
         }).then(() => {
             var sign_url = this.props.thirdPartyInvite ? this.props.thirdPartyInvite.inviteSignUrl : undefined;
             return MatrixClientPeg.get().joinRoom(this.props.roomAddress,
-                                                  { inviteSignUrl: sign_url } )
+                                                  { inviteSignUrl: sign_url } );
         }).then(function(resp) {
             var roomId = resp.roomId;
 
@@ -962,7 +963,7 @@ module.exports = React.createClass({
             // For overlapping highlights,
             // favour longer (more specific) terms first
             highlights = highlights.sort(function(a, b) {
-                return b.length - a.length });
+                return b.length - a.length; });
 
             self.setState({
                 searchHighlights: highlights,
@@ -1025,7 +1026,7 @@ module.exports = React.createClass({
             if (scrollPanel) {
                 scrollPanel.checkScroll();
             }
-        }
+        };
 
         var lastRoomId;
 
@@ -1090,7 +1091,7 @@ module.exports = React.createClass({
         }
 
         this.refs.room_settings.save().then((results) => {
-            var fails = results.filter(function(result) { return result.state !== "fulfilled" });
+            var fails = results.filter(function(result) { return result.state !== "fulfilled"; });
             console.log("Settings saved with %s errors", fails.length);
             if (fails.length) {
                 fails.forEach(function(result) {
@@ -1099,7 +1100,7 @@ module.exports = React.createClass({
                 var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createDialog(ErrorDialog, {
                     title: "Failed to save settings",
-                    description: fails.map(function(result) { return result.reason }).join("\n"),
+                    description: fails.map(function(result) { return result.reason; }).join("\n"),
                 });
                 // still editing room settings
             }
@@ -1183,7 +1184,7 @@ module.exports = React.createClass({
         this.setState({ searching: true });
     },
 
-    onCancelSearchClick: function () {
+    onCancelSearchClick: function() {
         this.setState({
             searching: false,
             searchResults: null,
@@ -1208,8 +1209,9 @@ module.exports = React.createClass({
 
     // decide whether or not the top 'unread messages' bar should be shown
     _updateTopUnreadMessagesBar: function() {
-        if (!this.refs.messagePanel)
+        if (!this.refs.messagePanel) {
             return;
+        }
 
         var pos = this.refs.messagePanel.getReadMarkerPosition();
 
@@ -1498,7 +1500,7 @@ module.exports = React.createClass({
 
         if (ContentMessages.getCurrentUploads().length > 0) {
             var UploadBar = sdk.getComponent('structures.UploadBar');
-            statusBar = <UploadBar room={this.state.room} />
+            statusBar = <UploadBar room={this.state.room} />;
         } else if (!this.state.searchResults) {
             var RoomStatusBar = sdk.getComponent('structures.RoomStatusBar');
 
@@ -1513,7 +1515,7 @@ module.exports = React.createClass({
                 onCancelAllClick={this.onCancelAllClick}
                 onScrollToBottomClick={this.jumpToLiveTimeline}
                 onResize={this.onChildResize}
-                />
+                />;
         }
 
         var aux = null;
@@ -1569,7 +1571,7 @@ module.exports = React.createClass({
             messageComposer =
                 <MessageComposer
                     room={this.state.room} onResize={this.onChildResize} uploadFile={this.uploadFile}
-                    callState={this.state.callState} tabComplete={this.tabComplete} opacity={ this.props.opacity }/>
+                    callState={this.state.callState} tabComplete={this.tabComplete} opacity={ this.props.opacity }/>;
         }
 
         // TODO: Why aren't we storing the term/scope/count in this format
@@ -1597,14 +1599,14 @@ module.exports = React.createClass({
                         <img src={call.isLocalVideoMuted() ? "img/video-unmute.svg" : "img/video-mute.svg"}
                              alt={call.isLocalVideoMuted() ? "Click to unmute video" : "Click to mute video"}
                              width="31" height="27"/>
-                    </div>
+                    </div>;
             }
             voiceMuteButton =
                 <div className="mx_RoomView_voipButton" onClick={this.onMuteAudioClick}>
                     <img src={call.isMicrophoneMuted() ? "img/voice-unmute.svg" : "img/voice-mute.svg"}
                          alt={call.isMicrophoneMuted() ? "Click to unmute audio" : "Click to mute audio"}
                          width="21" height="26"/>
-                </div>
+                </div>;
 
             // wrap the existing status bar into a 'callStatusBar' which adds more knobs.
             statusBar =
@@ -1614,7 +1616,7 @@ module.exports = React.createClass({
                     { zoomButton }
                     { statusBar }
                     <TintableSvg className="mx_RoomView_voipChevron" src="img/voip-chevron.svg" width="22" height="17"/>
-                </div>
+                </div>;
         }
 
         // if we have search results, we keep the messagepanel (so that it preserves its
diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js
index a9e16d364c..1391d2b740 100644
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.js
@@ -34,7 +34,7 @@ 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 () {};
+    var debuglog = function() {};
 }
 
 /* This component implements an intelligent scrolling list.
@@ -600,7 +600,7 @@ module.exports = React.createClass({
                     stuckAtBottom: false,
                     trackedScrollToken: node.dataset.scrollToken,
                     pixelOffset: wrapperRect.bottom - boundingRect.bottom,
-                }
+                };
                 debuglog("Saved scroll state", this.scrollState);
                 return;
             }
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index bf31f44315..490b83f2bf 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -38,7 +38,7 @@ if (DEBUG) {
     // using bind means that we get to keep useful line numbers in the console
     var debuglog = console.log.bind(console);
 } else {
-    var debuglog = function () {};
+    var debuglog = function() {};
 }
 
 /*
@@ -322,7 +322,7 @@ var TimelinePanel = React.createClass({
         });
     },
 
-    onMessageListScroll: function () {
+    onMessageListScroll: function() {
         if (this.props.onScroll) {
             this.props.onScroll();
         }
@@ -387,7 +387,7 @@ var TimelinePanel = React.createClass({
 
             // if we're at the end of the live timeline, append the pending events
             if (this.props.timelineSet.room && !this._timelineWindow.canPaginate(EventTimeline.FORWARDS)) {
-                events.push(... this.props.timelineSet.room.getPendingEvents());
+                events.push(...this.props.timelineSet.room.getPendingEvents());
             }
 
             var updatedState = {events: events};
@@ -564,8 +564,9 @@ var TimelinePanel = React.createClass({
 
         // first find where the current RM is
         for (var i = 0; i < events.length; i++) {
-            if (events[i].getId() == this.state.readMarkerEventId)
+            if (events[i].getId() == this.state.readMarkerEventId) {
                 break;
+            }
         }
         if (i >= events.length) {
             return;
@@ -644,7 +645,7 @@ var TimelinePanel = React.createClass({
         var tl = this.props.timelineSet.getTimelineForEvent(rmId);
         var rmTs;
         if (tl) {
-            var event = tl.getEvents().find((e) => { return e.getId() == rmId });
+            var event = tl.getEvents().find((e) => { return e.getId() == rmId; });
             if (event) {
                 rmTs = event.getTs();
             }
@@ -821,7 +822,7 @@ var TimelinePanel = React.createClass({
                 description: message,
                 onFinished: onFinished,
             });
-        }
+        };
 
         var prom = this._timelineWindow.load(eventId, INITIAL_SIZE);
 
@@ -843,7 +844,7 @@ var TimelinePanel = React.createClass({
                 timelineLoading: true,
             });
 
-            prom = prom.then(onLoaded, onError)
+            prom = prom.then(onLoaded, onError);
         }
 
         prom.done();
@@ -868,7 +869,7 @@ var TimelinePanel = React.createClass({
 
         // if we're at the end of the live timeline, append the pending events
         if (!this._timelineWindow.canPaginate(EventTimeline.FORWARDS)) {
-            events.push(... this.props.timelineSet.getPendingEvents());
+            events.push(...this.props.timelineSet.getPendingEvents());
         }
 
         return events;
@@ -930,8 +931,9 @@ var TimelinePanel = React.createClass({
     _getCurrentReadReceipt: function(ignoreSynthesized) {
         var client = MatrixClientPeg.get();
         // the client can be null on logout
-        if (client == null)
+        if (client == null) {
             return null;
+        }
 
         var myUserId = client.credentials.userId;
         return this.props.timelineSet.room.getEventReadUpTo(myUserId, ignoreSynthesized);
diff --git a/src/components/structures/UploadBar.js b/src/components/structures/UploadBar.js
index 794fcffec7..e91e558cb2 100644
--- a/src/components/structures/UploadBar.js
+++ b/src/components/structures/UploadBar.js
@@ -57,7 +57,7 @@ module.exports = React.createClass({displayName: 'UploadBar',
         // }];
 
         if (uploads.length == 0) {
-            return <div />
+            return <div />;
         }
 
         var upload;
@@ -68,7 +68,7 @@ module.exports = React.createClass({displayName: 'UploadBar',
             }
         }
         if (!upload) {
-            return <div />
+            return <div />;
         }
 
         var innerProgressStyle = {
@@ -76,7 +76,7 @@ module.exports = React.createClass({displayName: 'UploadBar',
         };
         var uploadedSize = filesize(upload.loaded);
         var totalSize = filesize(upload.total);
-        if (uploadedSize.replace(/^.* /,'') === totalSize.replace(/^.* /,'')) {
+        if (uploadedSize.replace(/^.* /, '') === totalSize.replace(/^.* /, '')) {
             uploadedSize = uploadedSize.replace(/ .*/, '');
         }
 
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 498acc1917..8f6473a181 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -346,8 +346,8 @@ module.exports = React.createClass({
             this.setState({email_add_pending: false});
             if (err.errcode == 'M_THREEPID_AUTH_FAILED') {
                 var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-                var message = "Unable to verify email address. "
-                message += "Please check your email and click on the link it contains. Once this is done, click continue."
+                var message = "Unable to verify email address. ";
+                message += "Please check your email and click on the link it contains. Once this is done, click continue.";
                 Modal.createDialog(QuestionDialog, {
                     title: "Verification Pending",
                     description: message,
@@ -417,7 +417,7 @@ module.exports = React.createClass({
             <label htmlFor="urlPreviewsDisabled">
                 Disable inline URL previews by default
             </label>
-        </div>
+        </div>;
     },
 
     _renderSyncedSetting: function(setting) {
@@ -430,7 +430,7 @@ module.exports = React.createClass({
             <label htmlFor={ setting.id }>
                 { setting.label }
             </label>
-        </div>
+        </div>;
     },
 
     _renderThemeSelector: function(setting) {
@@ -442,7 +442,7 @@ module.exports = React.createClass({
                    defaultChecked={ this._syncedSettings[setting.id] === setting.value }
                    onChange={ e => {
                             if (e.target.checked) {
-                                UserSettingsStore.setSyncedSetting(setting.id, setting.value)
+                                UserSettingsStore.setSyncedSetting(setting.id, setting.value);
                             }
                             dis.dispatch({
                                 action: 'set_theme',
@@ -454,7 +454,7 @@ module.exports = React.createClass({
             <label htmlFor={ setting.id + "_" + setting.value }>
                 { setting.label }
             </label>
-        </div>
+        </div>;
     },
 
     _renderCryptoInfo: function() {
@@ -467,8 +467,8 @@ module.exports = React.createClass({
                 <h3>Cryptography</h3>
                 <div className="mx_UserSettings_section mx_UserSettings_cryptoSection">
                     <ul>
-                        <li><label>Device ID:</label>   <span><code>{deviceId}</code></span></li>
-                        <li><label>Device key:</label>  <span><code><b>{identityKey}</b></code></span></li>
+                        <li><label>Device ID:</label>             <span><code>{deviceId}</code></span></li>
+                        <li><label>Device key:</label>            <span><code><b>{identityKey}</b></code></span></li>
                     </ul>
                 </div>
             </div>
@@ -485,7 +485,7 @@ module.exports = React.createClass({
         );
     },
 
-    _renderLabs: function () {
+    _renderLabs: function() {
         // default to enabled if undefined
         if (this.props.enableLabs === false) return null;
 
@@ -521,7 +521,7 @@ module.exports = React.createClass({
                     {features}
                 </div>
             </div>
-        )
+        );
     },
 
     _renderDeactivateAccount: function() {
diff --git a/src/components/structures/login/ForgotPassword.js b/src/components/structures/login/ForgotPassword.js
index 1868c2ee73..5037136b1d 100644
--- a/src/components/structures/login/ForgotPassword.js
+++ b/src/components/structures/login/ForgotPassword.js
@@ -58,7 +58,7 @@ module.exports = React.createClass({
             this.setState({
                 progress: null
             });
-        })
+        });
     },
 
     onVerify: function(ev) {
@@ -71,7 +71,7 @@ module.exports = React.createClass({
             this.setState({ progress: "complete" });
         }, (err) => {
             this.showErrorDialog(err.message);
-        })
+        });
     },
 
     onSubmitForm: function(ev) {
@@ -129,7 +129,7 @@ module.exports = React.createClass({
         var resetPasswordJsx;
 
         if (this.state.progress === "sending_email") {
-            resetPasswordJsx = <Spinner />
+            resetPasswordJsx = <Spinner />;
         }
         else if (this.state.progress === "sent_email") {
             resetPasswordJsx = (
diff --git a/src/components/structures/login/Login.js b/src/components/structures/login/Login.js
index c0d0c08d2c..fe9b544751 100644
--- a/src/components/structures/login/Login.js
+++ b/src/components/structures/login/Login.js
@@ -173,7 +173,7 @@ module.exports = React.createClass({
     },
 
     _getCurrentFlowStep: function() {
-        return this._loginLogic ? this._loginLogic.getCurrentFlowStep() : null
+        return this._loginLogic ? this._loginLogic.getCurrentFlowStep() : null;
     },
 
     _setStateFromError: function(err, isLoginAttempt) {
@@ -195,7 +195,7 @@ module.exports = React.createClass({
         }
 
         let errorText = "Error: Problem communicating with the given homeserver " +
-                (errCode ? "(" + errCode + ")" : "")
+                (errCode ? "(" + errCode + ")" : "");
 
         if (err.cors === 'rejected') {
             if (window.location.protocol === 'https:' &&
@@ -258,7 +258,7 @@ module.exports = React.createClass({
             loginAsGuestJsx =
                 <a className="mx_Login_create" onClick={this._onLoginAsGuestClick} href="#">
                     Login as guest
-                </a>
+                </a>;
         }
 
         var returnToAppJsx;
@@ -266,7 +266,7 @@ module.exports = React.createClass({
             returnToAppJsx =
                 <a className="mx_Login_create" onClick={this.props.onCancelClick} href="#">
                     Return to app
-                </a>
+                </a>;
         }
 
         return (
diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js
index b092e0a9fb..90140b3280 100644
--- a/src/components/structures/login/Registration.js
+++ b/src/components/structures/login/Registration.js
@@ -333,7 +333,7 @@ module.exports = React.createClass({
             returnToAppJsx =
                 <a className="mx_Login_create" onClick={this.props.onCancelClick} href="#">
                     Return to app
-                </a>
+                </a>;
         }
 
         return (
diff --git a/src/components/views/avatars/BaseAvatar.js b/src/components/views/avatars/BaseAvatar.js
index 47f0a76891..363f340fad 100644
--- a/src/components/views/avatars/BaseAvatar.js
+++ b/src/components/views/avatars/BaseAvatar.js
@@ -41,7 +41,7 @@ module.exports = React.createClass({
             height: 40,
             resizeMethod: 'crop',
             defaultToInitialLetter: true
-        }
+        };
     },
 
     getInitialState: function() {
diff --git a/src/components/views/avatars/MemberAvatar.js b/src/components/views/avatars/MemberAvatar.js
index c8a9abb4fe..9fb522a5f1 100644
--- a/src/components/views/avatars/MemberAvatar.js
+++ b/src/components/views/avatars/MemberAvatar.js
@@ -42,7 +42,7 @@ module.exports = React.createClass({
             height: 40,
             resizeMethod: 'crop',
             viewUserOnClick: false,
-        }
+        };
     },
 
     getInitialState: function() {
@@ -64,7 +64,7 @@ module.exports = React.createClass({
                                          props.width,
                                          props.height,
                                          props.resizeMethod)
-        }
+        };
     },
 
     render: function() {
@@ -78,7 +78,7 @@ module.exports = React.createClass({
                     action: 'view_user',
                     member: this.props.member,
                 });
-            }
+            };
         }
 
         return (
diff --git a/src/components/views/avatars/RoomAvatar.js b/src/components/views/avatars/RoomAvatar.js
index dcb25eff61..bfa7575b0c 100644
--- a/src/components/views/avatars/RoomAvatar.js
+++ b/src/components/views/avatars/RoomAvatar.js
@@ -39,7 +39,7 @@ module.exports = React.createClass({
             height: 36,
             resizeMethod: 'crop',
             oobData: {},
-        }
+        };
     },
 
     getInitialState: function() {
@@ -51,7 +51,7 @@ module.exports = React.createClass({
     componentWillReceiveProps: function(newProps) {
         this.setState({
             urls: this.getImageUrls(newProps)
-        })
+        });
     },
 
     getImageUrls: function(props) {
diff --git a/src/components/views/create_room/Presets.js b/src/components/views/create_room/Presets.js
index 0cce4a6644..6d40be9d32 100644
--- a/src/components/views/create_room/Presets.js
+++ b/src/components/views/create_room/Presets.js
@@ -40,7 +40,7 @@ module.exports = React.createClass({
     },
 
     onValueChanged: function(ev) {
-        this.props.onChange(ev.target.value)
+        this.props.onChange(ev.target.value);
     },
 
     render: function() {
diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index 18f4ce36ba..64f90c1a30 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -171,7 +171,7 @@ module.exports = React.createClass({
                 inviteList: inviteList,
                 queryList: [],
             });
-        }
+        };
     },
 
     onClick: function(index) {
@@ -402,10 +402,10 @@ module.exports = React.createClass({
         var error;
         var addressSelector;
         if (this.state.error) {
-            error = <div className="mx_ChatInviteDialog_error">You have entered an invalid contact. Try using their Matrix ID or email address.</div>
+            error = <div className="mx_ChatInviteDialog_error">You have entered an invalid contact. Try using their Matrix ID or email address.</div>;
         } else {
             addressSelector = (
-                <AddressSelector ref={(ref) => {this.addressSelector = ref}}
+                <AddressSelector ref={(ref) => {this.addressSelector = ref;}}
                     addressList={ this.state.queryList }
                     onSelected={ this.onSelected }
                     truncateAt={ TRUNCATE_QUERY_LIST } />
diff --git a/src/components/views/dialogs/DeactivateAccountDialog.js b/src/components/views/dialogs/DeactivateAccountDialog.js
index 9a15841061..54a4e99424 100644
--- a/src/components/views/dialogs/DeactivateAccountDialog.js
+++ b/src/components/views/dialogs/DeactivateAccountDialog.js
@@ -81,7 +81,7 @@ export default class DeactivateAccountDialog extends React.Component {
         if (this.state.errStr) {
             error = <div className="error">
                 {this.state.errStr}
-            </div>
+            </div>;
             passwordBoxClass = 'error';
         }
 
@@ -92,7 +92,7 @@ export default class DeactivateAccountDialog extends React.Component {
         if (!this.state.busy) {
             cancelButton = <button onClick={this._onCancel} autoFocus={true}>
                 Cancel
-            </button>
+            </button>;
         }
 
         return (
diff --git a/src/components/views/elements/AddressSelector.js b/src/components/views/elements/AddressSelector.js
index c477b8e7eb..d42637c9e5 100644
--- a/src/components/views/elements/AddressSelector.js
+++ b/src/components/views/elements/AddressSelector.js
@@ -129,7 +129,7 @@ module.exports = React.createClass({
 
     _maxSelected: function(list) {
         var listSize = list.length === 0 ? 0 : list.length - 1;
-        var maxSelected = listSize > (this.props.truncateAt - 1) ? (this.props.truncateAt - 1) : listSize
+        var maxSelected = listSize > (this.props.truncateAt - 1) ? (this.props.truncateAt - 1) : listSize;
         return maxSelected;
     },
 
@@ -140,7 +140,7 @@ module.exports = React.createClass({
         });
 
         return (
-            <div className={classes} ref={(ref) => {this.scrollElement = ref}}>
+            <div className={classes} ref={(ref) => {this.scrollElement = ref;}}>
                 { this.createAddressListTiles() }
             </div>
         );
diff --git a/src/components/views/elements/AddressTile.js b/src/components/views/elements/AddressTile.js
index 2799f10a41..9fc45d582c 100644
--- a/src/components/views/elements/AddressTile.js
+++ b/src/components/views/elements/AddressTile.js
@@ -108,7 +108,7 @@ module.exports = React.createClass({
             info = (
                 <div className={unknownMxClasses}>{ this.props.address }</div>
             );
-        } else if (email)  {
+        } else if (email) {
             var emailClasses = classNames({
                 "mx_AddressTile_email": true,
                 "mx_AddressTile_justified": this.props.justified,
diff --git a/src/components/views/elements/DeviceVerifyButtons.js b/src/components/views/elements/DeviceVerifyButtons.js
index aeb93e866c..da3975e4db 100644
--- a/src/components/views/elements/DeviceVerifyButtons.js
+++ b/src/components/views/elements/DeviceVerifyButtons.js
@@ -42,8 +42,8 @@ export default React.createClass({
                     <div className="mx_UserSettings_cryptoSection">
                         <ul>
                             <li><label>Device name:</label> <span>{ this.props.device.getDisplayName() }</span></li>
-                            <li><label>Device ID:</label>   <span><code>{ this.props.device.deviceId}</code></span></li>
-                            <li><label>Device key:</label>  <span><code><b>{ this.props.device.getFingerprint() }</b></code></span></li>
+                            <li><label>Device ID:</label>             <span><code>{ this.props.device.deviceId}</code></span></li>
+                            <li><label>Device key:</label>            <span><code><b>{ this.props.device.getFingerprint() }</b></code></span></li>
                         </ul>
                     </div>
                     <p>
diff --git a/src/components/views/elements/EditableText.js b/src/components/views/elements/EditableText.js
index 15118f249e..2c74567698 100644
--- a/src/components/views/elements/EditableText.js
+++ b/src/components/views/elements/EditableText.js
@@ -57,7 +57,7 @@ module.exports = React.createClass({
     getInitialState: function() {
         return {
             phase: this.Phases.Display,
-        }
+        };
     },
 
     componentWillReceiveProps: function(nextProps) {
@@ -164,7 +164,7 @@ module.exports = React.createClass({
 
         this.setState({
             phase: this.Phases.Edit,
-        })
+        });
     },
 
     onFocus: function(ev) {
@@ -197,9 +197,9 @@ module.exports = React.createClass({
         sel.removeAllRanges();
 
         if (this.props.blurToCancel)
-            this.cancelEdit();
+            {this.cancelEdit();}
         else
-            this.onFinish(ev);
+            {this.onFinish(ev);}
 
         this.showPlaceholder(!this.value);
     },
diff --git a/src/components/views/elements/PowerSelector.js b/src/components/views/elements/PowerSelector.js
index 993f2b965a..c7bfd4eec1 100644
--- a/src/components/views/elements/PowerSelector.js
+++ b/src/components/views/elements/PowerSelector.js
@@ -73,7 +73,7 @@ module.exports = React.createClass({
     getValue: function() {
         var value;
         if (this.refs.select) {
-            value = reverseRoles[ this.refs.select.value ];
+            value = reverseRoles[this.refs.select.value];
             if (this.refs.custom) {
                 if (value === undefined) value = parseInt( this.refs.custom.value );
             }
@@ -86,10 +86,10 @@ module.exports = React.createClass({
         if (this.state.custom) {
             var input;
             if (this.props.disabled) {
-                input = <span>{ this.props.value }</span>
+                input = <span>{ this.props.value }</span>;
             }
             else {
-                input = <input ref="custom" type="text" size="3" defaultValue={ this.props.value } onBlur={ this.onCustomBlur } onKeyDown={ this.onCustomKeyDown }/>
+                input = <input ref="custom" type="text" size="3" defaultValue={ this.props.value } onBlur={ this.onCustomBlur } onKeyDown={ this.onCustomKeyDown }/>;
             }
             customPicker = <span> of { input }</span>;
         }
@@ -115,7 +115,7 @@ module.exports = React.createClass({
                     <option value="Moderator">Moderator (50)</option>
                     <option value="Admin">Admin (100)</option>
                     <option value="Custom">Custom level</option>
-                </select>
+                </select>;
         }
 
         return (
diff --git a/src/components/views/elements/ProgressBar.js b/src/components/views/elements/ProgressBar.js
index 12b34480f1..a39e8e48f9 100644
--- a/src/components/views/elements/ProgressBar.js
+++ b/src/components/views/elements/ProgressBar.js
@@ -35,4 +35,4 @@ module.exports = React.createClass({
             <div className="mx_ProgressBar"><div className="mx_ProgressBar_fill" style={progressStyle}></div></div>
         );
     }
-});
\ No newline at end of file
+});
diff --git a/src/components/views/elements/TruncatedList.js b/src/components/views/elements/TruncatedList.js
index 3e174848d3..0ec2c15f0a 100644
--- a/src/components/views/elements/TruncatedList.js
+++ b/src/components/views/elements/TruncatedList.js
@@ -55,7 +55,7 @@ module.exports = React.createClass({
                 overflowJsx = this.props.createOverflowElement(
                     overflowCount, childCount
                 );
-                
+
                 // cut out the overflow elements
                 childArray.splice(childCount - overflowCount, overflowCount);
                 childsJsx = childArray; // use what is left
diff --git a/src/components/views/elements/UserSelector.js b/src/components/views/elements/UserSelector.js
index 5f176a3e54..266e10154f 100644
--- a/src/components/views/elements/UserSelector.js
+++ b/src/components/views/elements/UserSelector.js
@@ -56,7 +56,7 @@ module.exports = React.createClass({
             <div>
                 <ul className="mx_UserSelector_UserIdList" ref="list">
                     {this.props.selected_users.map(function(user_id, i) {
-                        return <li key={user_id}>{user_id} - <span onClick={function() {self.removeUser(user_id);}}>X</span></li>
+                        return <li key={user_id}>{user_id} - <span onClick={function() {self.removeUser(user_id);}}>X</span></li>;
                     })}
                 </ul>
                 <input type="text" ref="user_id_input" defaultValue="" className="mx_UserSelector_userIdInput" placeholder="ex. @bob:example.com"/>
diff --git a/src/components/views/login/CaptchaForm.js b/src/components/views/login/CaptchaForm.js
index d50e0dee26..0977f947aa 100644
--- a/src/components/views/login/CaptchaForm.js
+++ b/src/components/views/login/CaptchaForm.js
@@ -52,7 +52,7 @@ module.exports = React.createClass({
             this._onCaptchaLoaded();
         } else {
             console.log("Loading recaptcha script...");
-            window.mx_on_recaptcha_loaded = () => {this._onCaptchaLoaded()};
+            window.mx_on_recaptcha_loaded = () => {this._onCaptchaLoaded();};
             var protocol = global.location.protocol;
             if (protocol === "file:") {
                 var warning = document.createElement('div');
@@ -101,7 +101,7 @@ module.exports = React.createClass({
         } catch (e) {
             this.setState({
                 errorText: e.toString(),
-            })
+            });
         }
     },
 
diff --git a/src/components/views/login/InteractiveAuthEntryComponents.js b/src/components/views/login/InteractiveAuthEntryComponents.js
index 23e2b442ef..ec184ca09f 100644
--- a/src/components/views/login/InteractiveAuthEntryComponents.js
+++ b/src/components/views/login/InteractiveAuthEntryComponents.js
@@ -70,7 +70,7 @@ export const PasswordAuthEntry = React.createClass({
         });
     },
 
-    _onPasswordFieldChange: function (ev) {
+    _onPasswordFieldChange: function(ev) {
         // enable the submit button iff the password is non-empty
         this.props.setSubmitButtonEnabled(Boolean(ev.target.value));
     },
@@ -209,4 +209,4 @@ export function getEntryComponentForLoginType(loginType) {
         }
     }
     return FallbackAuthEntry;
-};
+}
diff --git a/src/components/views/login/RegistrationForm.js b/src/components/views/login/RegistrationForm.js
index 4be40bc53a..f8a0863f70 100644
--- a/src/components/views/login/RegistrationForm.js
+++ b/src/components/views/login/RegistrationForm.js
@@ -169,7 +169,7 @@ module.exports = React.createClass({
 
     validateField: function(field_id) {
         var pwd1 = this.refs.password.value.trim();
-        var pwd2 = this.refs.passwordConfirm.value.trim()
+        var pwd2 = this.refs.passwordConfirm.value.trim();
 
         switch (field_id) {
             case FIELD_EMAIL:
@@ -283,7 +283,7 @@ module.exports = React.createClass({
                         autoFocus={true} placeholder="Email address (optional)"
                         defaultValue={this.props.defaultEmail}
                         className={this._classForField(FIELD_EMAIL, 'mx_Login_field')}
-                        onBlur={function() {self.validateField(FIELD_EMAIL)}}
+                        onBlur={function() {self.validateField(FIELD_EMAIL);}}
                         value={self.state.email}/>
                     {emailSuffix ? <input className="mx_Login_field" value={emailSuffix} disabled/> : null }
                 </div>
@@ -293,8 +293,8 @@ module.exports = React.createClass({
                     <select
                         defaultValue="-1"
                         className="mx_Login_field"
-                        onBlur={function() {self.validateField(FIELD_EMAIL)}}
-                        onChange={function(ev) {self.onSelectTeam(ev.target.value)}}
+                        onBlur={function() {self.validateField(FIELD_EMAIL);}}
+                        onChange={function(ev) {self.onSelectTeam(ev.target.value);}}
                     >
                         <option key="-1" value="-1">No team</option>
                         {this.props.teamsConfig.teams.map((t, index) => {
@@ -327,7 +327,7 @@ module.exports = React.createClass({
 
         var placeholderUserName = "User name";
         if (this.props.guestUsername) {
-            placeholderUserName += " (default: " + this.props.guestUsername + ")"
+            placeholderUserName += " (default: " + this.props.guestUsername + ")";
         }
 
         return (
@@ -341,20 +341,20 @@ module.exports = React.createClass({
                     <input type="text" ref="username"
                         placeholder={ placeholderUserName } defaultValue={this.props.defaultUsername}
                         className={this._classForField(FIELD_USERNAME, 'mx_Login_field')}
-                        onBlur={function() {self.validateField(FIELD_USERNAME)}} />
+                        onBlur={function() {self.validateField(FIELD_USERNAME);}} />
                     <br />
                     { this.props.guestUsername ?
                         <div className="mx_Login_fieldLabel">Setting a user name will create a fresh account</div> : null
                     }
                     <input type="password" ref="password"
                         className={this._classForField(FIELD_PASSWORD, 'mx_Login_field')}
-                        onBlur={function() {self.validateField(FIELD_PASSWORD)}}
+                        onBlur={function() {self.validateField(FIELD_PASSWORD);}}
                         placeholder="Password" defaultValue={this.props.defaultPassword} />
                     <br />
                     <input type="password" ref="passwordConfirm"
                         placeholder="Confirm password"
                         className={this._classForField(FIELD_PASSWORD_CONFIRM, 'mx_Login_field')}
-                        onBlur={function() {self.validateField(FIELD_PASSWORD_CONFIRM)}}
+                        onBlur={function() {self.validateField(FIELD_PASSWORD_CONFIRM);}}
                         defaultValue={this.props.defaultPassword} />
                     <br />
                     {registerButton}
diff --git a/src/components/views/login/ServerConfig.js b/src/components/views/login/ServerConfig.js
index a18cfbbcef..4e6ed12f9e 100644
--- a/src/components/views/login/ServerConfig.js
+++ b/src/components/views/login/ServerConfig.js
@@ -64,10 +64,10 @@ module.exports = React.createClass({
             hs_url: this.props.customHsUrl,
             is_url: this.props.customIsUrl,
             // if withToggleButton is false, then show the config all the time given we have no way otherwise of making it visible
-            configVisible: !this.props.withToggleButton || 
+            configVisible: !this.props.withToggleButton ||
                            (this.props.customHsUrl !== this.props.defaultHsUrl) ||
                            (this.props.customIsUrl !== this.props.defaultIsUrl)
-        }
+        };
     },
 
     onHomeserverChanged: function(ev) {
diff --git a/src/components/views/messages/MAudioBody.js b/src/components/views/messages/MAudioBody.js
index 7e338e8466..73b9bdb200 100644
--- a/src/components/views/messages/MAudioBody.js
+++ b/src/components/views/messages/MAudioBody.js
@@ -31,7 +31,7 @@ export default class MAudioBody extends React.Component {
             decryptedUrl: null,
             decryptedBlob: null,
             error: null,
-        }
+        };
     }
     onPlayToggle() {
         this.setState({
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 4f5ca2d3be..86aee28269 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -281,7 +281,7 @@ module.exports = React.createClass({
                             decryptedBlob: blob,
                         });
                     }).catch((err) => {
-                        console.warn("Unable to decrypt attachment: ", err)
+                        console.warn("Unable to decrypt attachment: ", err);
                         Modal.createDialog(ErrorDialog, {
                             description: "Error decrypting attachment"
                         });
@@ -372,7 +372,7 @@ module.exports = React.createClass({
             var extra = text ? (': ' + text) : '';
             return <span className="mx_MFileBody">
                 Invalid file{extra}
-            </span>
+            </span>;
         }
     },
 });
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 5e7cb6e800..10941e0f7f 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -119,7 +119,7 @@ module.exports = React.createClass({
             if (content.info.thumbnail_file) {
                 thumbnailPromise = decryptFile(
                     content.info.thumbnail_file
-                ).then(function (blob) {
+                ).then(function(blob) {
                     return readBlobAsDataUri(blob);
                 });
             }
diff --git a/src/components/views/messages/MVideoBody.js b/src/components/views/messages/MVideoBody.js
index 18552a973d..e2d4af9e69 100644
--- a/src/components/views/messages/MVideoBody.js
+++ b/src/components/views/messages/MVideoBody.js
@@ -111,7 +111,7 @@ module.exports = React.createClass({
                     this.props.onWidgetLoad();
                 });
             }).catch((err) => {
-                console.warn("Unable to decrypt attachment: ", err)
+                console.warn("Unable to decrypt attachment: ", err);
                 // Set a placeholder image when we can't decrypt the image.
                 this.setState({
                     error: err,
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index d005ef0cca..fd26ae58da 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -200,7 +200,7 @@ module.exports = React.createClass({
                     global.localStorage.removeItem("hide_preview_" + self.props.mxEvent.getId());
                 }
             },
-        }
+        };
     },
 
     onStarterLinkClick: function(starterLink, ev) {
@@ -230,8 +230,8 @@ module.exports = React.createClass({
                     if (!confirmed) {
                         return;
                     }
-                    let width  = window.screen.width  > 1024 ? 1024 : window.screen.width;
-                    let height = window.screen.height > 800  ? 800 : window.screen.height;
+                    let width = window.screen.width > 1024 ? 1024 : window.screen.width;
+                    let height = window.screen.height > 800 ? 800 : window.screen.height;
                     let left = (window.screen.width - width) / 2;
                     let top = (window.screen.height - height) / 2;
                     window.open(completeUrl, '_blank', `height=${height}, width=${width}, top=${top}, left=${left},`);
diff --git a/src/components/views/room_settings/AliasSettings.js b/src/components/views/room_settings/AliasSettings.js
index 96618b613a..5935298634 100644
--- a/src/components/views/room_settings/AliasSettings.js
+++ b/src/components/views/room_settings/AliasSettings.js
@@ -103,13 +103,13 @@ module.exports = React.createClass({
         }
         if (oldCanonicalAlias !== this.state.canonicalAlias) {
             console.log("AliasSettings: Updating canonical alias");
-            promises = [ q.all(promises).then(
+            promises = [q.all(promises).then(
                 MatrixClientPeg.get().sendStateEvent(
                     this.props.roomId, "m.room.canonical_alias", {
                         alias: this.state.canonicalAlias
                     }, ""
                 )
-            ) ];
+            )];
         }
 
         return promises;
@@ -144,7 +144,7 @@ module.exports = React.createClass({
             // XXX: do we need to deep copy aliases before editing it?
             this.state.domainToAliases[domain] = this.state.domainToAliases[domain] || [];
             this.state.domainToAliases[domain].push(alias);
-            this.setState({ 
+            this.setState({
                 domainToAliases: this.state.domainToAliases
             });
 
@@ -152,9 +152,9 @@ module.exports = React.createClass({
             this.refs.add_alias.setValue(''); // FIXME
         }
         else {
-            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");            
+            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createDialog(ErrorDialog, {
-                title: "Invalid alias format", 
+                title: "Invalid alias format",
                 description: "'" + alias + "' is not a valid format for an alias",
             });
         }
@@ -168,9 +168,9 @@ module.exports = React.createClass({
             this.state.domainToAliases[domain][index] = alias;
         }
         else {
-            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");            
+            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createDialog(ErrorDialog, {
-                title: "Invalid address format", 
+                title: "Invalid address format",
                 description: "'" + alias + "' is not a valid format for an address",
             });
         }
@@ -183,7 +183,7 @@ module.exports = React.createClass({
         // would be to arbitrarily deepcopy to a temp variable and then setState
         // that, but why bother when we can cut this corner.
         var alias = this.state.domainToAliases[domain].splice(index, 1);
-        this.setState({ 
+        this.setState({
             domainToAliases: this.state.domainToAliases
         });
     },
@@ -310,4 +310,4 @@ module.exports = React.createClass({
             </div>
         );
     }
-});
\ No newline at end of file
+});
diff --git a/src/components/views/room_settings/ColorSettings.js b/src/components/views/room_settings/ColorSettings.js
index 6d147b1f63..6a455d9c3c 100644
--- a/src/components/views/room_settings/ColorSettings.js
+++ b/src/components/views/room_settings/ColorSettings.js
@@ -135,7 +135,7 @@ module.exports = React.createClass({
                             </div>
                         );
                     }
-                    var boundClick = this._onColorSchemeChanged.bind(this, i)
+                    var boundClick = this._onColorSchemeChanged.bind(this, i);
                     return (
                         <div className="mx_RoomSettings_roomColor"
                               key={ "room_color_" + i }
diff --git a/src/components/views/room_settings/UrlPreviewSettings.js b/src/components/views/room_settings/UrlPreviewSettings.js
index e82c2ba201..1e9690f258 100644
--- a/src/components/views/room_settings/UrlPreviewSettings.js
+++ b/src/components/views/room_settings/UrlPreviewSettings.js
@@ -121,13 +121,13 @@ module.exports = React.createClass({
                            onChange={ this.onGlobalDisableUrlPreviewChange }
                            checked={ this.state.globalDisableUrlPreview } />
                     Disable URL previews by default for participants in this room
-                </label>
+                </label>;
         }
         else {
             disableRoomPreviewUrls =
                 <label>
                     URL previews are { this.state.globalDisableUrlPreview ? "disabled" : "enabled" } by default for participants in this room.
-                </label>
+                </label>;
         }
 
         return (
@@ -154,4 +154,4 @@ module.exports = React.createClass({
         );
 
     }
-});
\ No newline at end of file
+});
diff --git a/src/components/views/rooms/AuxPanel.js b/src/components/views/rooms/AuxPanel.js
index f7c3052ea8..365cc18f99 100644
--- a/src/components/views/rooms/AuxPanel.js
+++ b/src/components/views/rooms/AuxPanel.js
@@ -93,8 +93,8 @@ module.exports = React.createClass({
             }
             else {
                 joinText = (<span>
-                    Join as <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'voice')}} 
-                               href="#">voice</a> or <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'video') }}
+                    Join as <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'voice');}}
+                               href="#">voice</a> or <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'video'); }}
                                href="#">video</a>.
                 </span>);
 
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 42393ad87b..c6a766509a 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -149,13 +149,13 @@ module.exports = WithMatrixClient(React.createClass({
         this.props.mxEvent.on("Event.decrypted", this._onDecrypted);
     },
 
-    componentWillReceiveProps: function (nextProps) {
+    componentWillReceiveProps: function(nextProps) {
         if (nextProps.mxEvent !== this.props.mxEvent) {
             this._verifyEvent(nextProps.mxEvent);
         }
     },
 
-    shouldComponentUpdate: function (nextProps, nextState) {
+    shouldComponentUpdate: function(nextProps, nextState) {
         if (!ObjectUtils.shallowEqual(this.state, nextState)) {
             return true;
         }
@@ -259,7 +259,7 @@ module.exports = WithMatrixClient(React.createClass({
 
     onEditClicked: function(e) {
         var MessageContextMenu = sdk.getComponent('context_menus.MessageContextMenu');
-        var buttonRect = e.target.getBoundingClientRect()
+        var buttonRect = e.target.getBoundingClientRect();
 
         // The window X and Y offsets are to adjust position when zoomed in to page
         var x = buttonRect.right + window.pageXOffset;
@@ -293,7 +293,7 @@ module.exports = WithMatrixClient(React.createClass({
         // If it is, we want to display the complete date along with the HH:MM:SS,
         // rather than just HH:MM:SS.
         let dayAfterEvent = new Date(this.props.mxEvent.getTs());
-        dayAfterEvent.setDate(dayAfterEvent.getDate() + 1)
+        dayAfterEvent.setDate(dayAfterEvent.getDate() + 1);
         dayAfterEvent.setHours(0);
         dayAfterEvent.setMinutes(0);
         dayAfterEvent.setSeconds(0);
@@ -369,7 +369,7 @@ module.exports = WithMatrixClient(React.createClass({
         var event = this.props.mxEvent;
 
         Modal.createDialogAsync((cb) => {
-            require(['../../../async-components/views/dialogs/EncryptedEventDialog'], cb)
+            require(['../../../async-components/views/dialogs/EncryptedEventDialog'], cb);
         }, {
             event: event,
         });
diff --git a/src/components/views/rooms/LinkPreviewWidget.js b/src/components/views/rooms/LinkPreviewWidget.js
index 60f4f8abc0..ef8fb29cbc 100644
--- a/src/components/views/rooms/LinkPreviewWidget.js
+++ b/src/components/views/rooms/LinkPreviewWidget.js
@@ -60,13 +60,15 @@ module.exports = React.createClass({
     },
 
     componentDidMount: function() {
-        if (this.refs.description)
+        if (this.refs.description) {
             linkifyElement(this.refs.description, linkifyMatrix.options);
+        }
     },
 
     componentDidUpdate: function() {
-        if (this.refs.description)
+        if (this.refs.description) {
             linkifyElement(this.refs.description, linkifyMatrix.options);
+        }
     },
 
     componentWillUnmount: function() {
@@ -116,7 +118,7 @@ module.exports = React.createClass({
         if (image) {
             img = <div className="mx_LinkPreviewWidget_image" style={{ height: thumbHeight }}>
                     <img style={{ maxWidth: imageMaxWidth, maxHeight: imageMaxHeight }} src={ image } onClick={ this.onImageClick }/>
-                  </div>
+                  </div>;
         }
 
         return (
diff --git a/src/components/views/rooms/MemberDeviceInfo.js b/src/components/views/rooms/MemberDeviceInfo.js
index 1e7850ab44..d4c00dda76 100644
--- a/src/components/views/rooms/MemberDeviceInfo.js
+++ b/src/components/views/rooms/MemberDeviceInfo.js
@@ -60,7 +60,7 @@ export default class MemberDeviceInfo extends React.Component {
             </div>
         );
     }
-};
+}
 
 MemberDeviceInfo.displayName = 'MemberDeviceInfo';
 MemberDeviceInfo.propTypes = {
diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js
index 1f4d392461..16a047f72d 100644
--- a/src/components/views/rooms/MemberInfo.js
+++ b/src/components/views/rooms/MemberInfo.js
@@ -64,7 +64,7 @@ module.exports = WithMatrixClient(React.createClass({
             updating: 0,
             devicesLoading: true,
             devices: null,
-        }
+        };
     },
 
     componentWillMount: function() {
@@ -202,7 +202,7 @@ module.exports = WithMatrixClient(React.createClass({
         }
 
         var cancelled = false;
-        this._cancelDeviceList = function() { cancelled = true; }
+        this._cancelDeviceList = function() { cancelled = true; };
 
         var client = this.props.matrixClient;
         var self = this;
@@ -529,7 +529,7 @@ module.exports = WithMatrixClient(React.createClass({
         });
     },
 
-    onMemberAvatarClick: function () {
+    onMemberAvatarClick: function() {
         var avatarUrl = this.props.member.user ? this.props.member.user.avatarUrl : this.props.member.events.member.getContent().avatar_url;
         if(!avatarUrl) return;
 
@@ -620,7 +620,7 @@ module.exports = WithMatrixClient(React.createClass({
                     <img src="img/create-big.svg" width="26" height="26" />
                 </div>
                 <div className={labelClasses}><i>Start new chat</i></div>
-            </div>
+            </div>;
 
             startChat = <div>
                 <h3>Direct chats</h3>
@@ -654,7 +654,7 @@ module.exports = WithMatrixClient(React.createClass({
             var giveOpLabel = this.state.isTargetMod ? "Revoke Moderator" : "Make Moderator";
             giveModButton = <div className="mx_MemberInfo_field" onClick={this.onModToggle}>
                 {giveOpLabel}
-            </div>
+            </div>;
         }
 
         // TODO: we should have an invite button if this MemberInfo is showing a user who isn't actually in the current room yet
@@ -672,7 +672,7 @@ module.exports = WithMatrixClient(React.createClass({
                         {banButton}
                         {giveModButton}
                     </div>
-                </div>
+                </div>;
         }
 
         const memberName = this.props.member.name;
diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js
index deedded4fa..bd386ed1bb 100644
--- a/src/components/views/rooms/MemberList.js
+++ b/src/components/views/rooms/MemberList.js
@@ -32,7 +32,7 @@ var SHARE_HISTORY_WARNING =
         Newly invited users will see the history of this room. <br/>
         If you'd prefer invited users not to see messages that were sent before they joined, <br/>
         turn off, 'Share message history with new users' in the settings for this room.
-    </span>
+    </span>;
 
 module.exports = React.createClass({
     displayName: 'MemberList',
@@ -207,7 +207,7 @@ module.exports = React.createClass({
         // For now we'll pretend this is any entity. It should probably be a separate tile.
         var EntityTile = sdk.getComponent("rooms.EntityTile");
         var BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
-        var text = "and " + overflowCount + " other" + (overflowCount > 1 ? "s" : "") +  "...";
+        var text = "and " + overflowCount + " other" + (overflowCount > 1 ? "s" : "") + "...";
         return (
             <EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
                 <BaseAvatar url="img/ellipsis.svg" name="..." width={36} height={36} />
@@ -338,8 +338,8 @@ module.exports = React.createClass({
                     }
                     memberList.push(
                         <EntityTile key={e.getStateKey()} name={e.getContent().display_name} />
-                    )
-                })
+                    );
+                });
             }
         }
 
diff --git a/src/components/views/rooms/MemberTile.js b/src/components/views/rooms/MemberTile.js
index cf79394228..5becef9ede 100644
--- a/src/components/views/rooms/MemberTile.js
+++ b/src/components/views/rooms/MemberTile.js
@@ -46,7 +46,7 @@ module.exports = React.createClass({
             (this.user_last_modified_time === undefined ||
             this.user_last_modified_time < nextProps.member.user.getLastModifiedTime())
         ) {
-            return true
+            return true;
         }
         return false;
     },
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index ee9c49d52a..4dfb95f5d0 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -367,7 +367,7 @@ export default class MessageComposer extends React.Component {
             </div>
         );
     }
-};
+}
 
 MessageComposer.propTypes = {
     tabComplete: React.PropTypes.any,
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index b6af5a9f09..634939331f 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -443,12 +443,12 @@ export default class MessageComposerInput extends React.Component {
                 selection = this.state.editorState.getSelection();
 
             let modifyFn = {
-                bold: text => `**${text}**`,
-                italic: text => `*${text}*`,
-                underline: text => `_${text}_`, // there's actually no valid underline in Markdown, but *shrug*
-                strike: text => `~~${text}~~`,
-                code: text => `\`${text}\``,
-                blockquote: text => text.split('\n').map(line => `> ${line}\n`).join(''),
+                'bold': text => `**${text}**`,
+                'italic': text => `*${text}*`,
+                'underline': text => `_${text}_`, // there's actually no valid underline in Markdown, but *shrug*
+                'strike': text => `~~${text}~~`,
+                'code': text => `\`${text}\``,
+                'blockquote': text => text.split('\n').map(line => `> ${line}\n`).join(''),
                 'unordered-list-item': text => text.split('\n').map(line => `- ${line}\n`).join(''),
                 'ordered-list-item': text => text.split('\n').map((line, i) => `${i+1}. ${line}\n`).join(''),
             }[command];
@@ -462,8 +462,9 @@ export default class MessageComposerInput extends React.Component {
             }
         }
 
-        if (newState == null)
+        if (newState == null) {
             newState = RichUtils.handleKeyCommand(this.state.editorState, command);
+        }
 
         if (newState != null) {
             this.setEditorState(newState);
@@ -665,7 +666,7 @@ export default class MessageComposerInput extends React.Component {
 
         const blockName = {
             'code-block': 'code',
-            blockquote: 'quote',
+            'blockquote': 'quote',
             'unordered-list-item': 'bullet',
             'ordered-list-item': 'numbullet',
         };
@@ -740,7 +741,7 @@ export default class MessageComposerInput extends React.Component {
             </div>
         );
     }
-};
+}
 
 MessageComposerInput.propTypes = {
     tabComplete: React.PropTypes.any,
diff --git a/src/components/views/rooms/MessageComposerInputOld.js b/src/components/views/rooms/MessageComposerInputOld.js
index ed4533737f..c5d5f083c1 100644
--- a/src/components/views/rooms/MessageComposerInputOld.js
+++ b/src/components/views/rooms/MessageComposerInputOld.js
@@ -192,7 +192,7 @@ module.exports = React.createClass({
         }
     },
 
-    onKeyDown: function (ev) {
+    onKeyDown: function(ev) {
         if (ev.keyCode === KeyCode.ENTER && !ev.shiftKey) {
             var input = this.refs.textarea.value;
             if (input.length === 0) {
diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js
index 47875bd7fb..c1fe4431bf 100644
--- a/src/components/views/rooms/ReadReceiptMarker.js
+++ b/src/components/views/rooms/ReadReceiptMarker.js
@@ -71,7 +71,7 @@ module.exports = React.createClass({
     getDefaultProps: function() {
         return {
             leftOffset: 0,
-        }
+        };
     },
 
     getInitialState: function() {
@@ -81,7 +81,7 @@ module.exports = React.createClass({
         // position.
         return {
             suppressDisplay: !this.props.suppressAnimation,
-        }
+        };
     },
 
     componentWillUnmount: function() {
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index db3c7bb3d9..a066bfd337 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -182,8 +182,8 @@ module.exports = React.createClass({
                 'm.room.name', user_id
             );
 
-            save_button = <div className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save</div>
-            cancel_button = <div className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </div>
+            save_button = <div className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save</div>;
+            cancel_button = <div className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </div>;
         }
 
         if (this.props.saving) {
@@ -193,7 +193,7 @@ module.exports = React.createClass({
 
         if (can_set_room_name) {
             var RoomNameEditor = sdk.getComponent("rooms.RoomNameEditor");
-            name = <RoomNameEditor ref="nameEditor" room={this.props.room} />
+            name = <RoomNameEditor ref="nameEditor" room={this.props.room} />;
         }
         else {
             var searchStatus;
@@ -232,7 +232,7 @@ module.exports = React.createClass({
 
         if (can_set_room_topic) {
             var RoomTopicEditor = sdk.getComponent("rooms.RoomTopicEditor");
-            topic_el = <RoomTopicEditor ref="topicEditor" room={this.props.room} />
+            topic_el = <RoomTopicEditor ref="topicEditor" room={this.props.room} />;
         } else {
             var topic;
             if (this.props.room) {
@@ -301,7 +301,7 @@ module.exports = React.createClass({
             rightPanel_buttons =
                 <div className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title="<">
                     <TintableSvg src="img/minimise.svg" width="10" height="16"/>
-                </div>
+                </div>;
         }
 
         var right_row;
diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js
index 3ced4102d4..c3ee5f1730 100644
--- a/src/components/views/rooms/RoomList.js
+++ b/src/components/views/rooms/RoomList.js
@@ -46,7 +46,7 @@ module.exports = React.createClass({
             isLoadingLeftRooms: false,
             lists: {},
             incomingCall: null,
-        }
+        };
     },
 
     componentWillMount: function() {
@@ -338,7 +338,7 @@ module.exports = React.createClass({
             // as this is used to calculate the CSS fixed top position for the stickies
             var scrollAreaHeight = ReactDOM.findDOMNode(this).getBoundingClientRect().height;
 
-            var top = (incomingCallBox.parentElement.getBoundingClientRect().top + window.pageYOffset)
+            var top = (incomingCallBox.parentElement.getBoundingClientRect().top + window.pageYOffset);
             // Make sure we don't go too far up, if the headers aren't sticky
             top = (top < scrollAreaOffset) ? scrollAreaOffset : top;
             // make sure we don't go too far down, if the headers aren't sticky
@@ -401,7 +401,7 @@ module.exports = React.createClass({
             var stickyHeight = sticky.dataset.originalHeight;
             var stickyHeader = sticky.childNodes[0];
             var topStuckHeight = stickyHeight * i;
-            var bottomStuckHeight = stickyHeight * (stickyWrappers.length - i)
+            var bottomStuckHeight = stickyHeight * (stickyWrappers.length - i);
 
             if (self.scrollAreaSufficient && stickyPosition < (scrollArea.scrollTop + topStuckHeight)) {
                 // Top stickies
@@ -520,7 +520,7 @@ module.exports = React.createClass({
                              collapsed={ self.props.collapsed }
                              searchFilter={ self.props.searchFilter }
                              onHeaderClick={ self.onSubListHeaderClick }
-                             onShowMoreRooms={ self.onShowMoreRooms } />
+                             onShowMoreRooms={ self.onShowMoreRooms } />;
 
                     }
                 }) }
diff --git a/src/components/views/rooms/RoomPreviewBar.js b/src/components/views/rooms/RoomPreviewBar.js
index b9912b6fcc..218bac48aa 100644
--- a/src/components/views/rooms/RoomPreviewBar.js
+++ b/src/components/views/rooms/RoomPreviewBar.js
@@ -58,7 +58,7 @@ module.exports = React.createClass({
     getInitialState: function() {
         return {
             busy: false
-        }
+        };
     },
 
     componentWillMount: function() {
@@ -96,7 +96,7 @@ module.exports = React.createClass({
                     emailMatchBlock = <div className="error">
                         Unable to ascertain that the address this invite was
                         sent to matches one associated with your account.
-                    </div>
+                    </div>;
                 } else if (this.state.invitedEmailMxid != MatrixClientPeg.get().credentials.userId) {
                     emailMatchBlock =
                         <div className="mx_RoomPreviewBar_warning">
@@ -107,7 +107,7 @@ module.exports = React.createClass({
                                 This invitation was sent to <b><span className="email">{this.props.invitedEmail}</span></b>, which is not associated with this account.<br/>
                                 You may wish to login with a different account, or add this email to this account.
                             </div>
-                        </div>
+                        </div>;
                 }
             }
             joinBlock = (
diff --git a/src/components/views/rooms/RoomSettings.js b/src/components/views/rooms/RoomSettings.js
index 04ea05843d..e14a929ebe 100644
--- a/src/components/views/rooms/RoomSettings.js
+++ b/src/components/views/rooms/RoomSettings.js
@@ -252,7 +252,7 @@ module.exports = React.createClass({
         return this.refs.url_preview_settings.saveSettings();
     },
 
-    saveEncryption: function () {
+    saveEncryption: function() {
         if (!this.refs.encrypt) { return q(); }
 
         var encrypt = this.refs.encrypt.checked;
@@ -404,7 +404,7 @@ module.exports = React.createClass({
         var cli = MatrixClientPeg.get();
         var roomState = this.props.room.currentState;
         return (roomState.mayClientSendStateEvent("m.room.join_rules", cli) &&
-                roomState.mayClientSendStateEvent("m.room.guest_access", cli))
+                roomState.mayClientSendStateEvent("m.room.guest_access", cli));
     },
 
     onManageIntegrations(ev) {
@@ -510,7 +510,7 @@ module.exports = React.createClass({
         var UrlPreviewSettings = sdk.getComponent("room_settings.UrlPreviewSettings");
         var EditableText = sdk.getComponent('elements.EditableText');
         var PowerSelector = sdk.getComponent('elements.PowerSelector');
-        var Loader = sdk.getComponent("elements.Spinner")
+        var Loader = sdk.getComponent("elements.Spinner");
 
         var cli = MatrixClientPeg.get();
         var roomState = this.props.room.currentState;
@@ -557,7 +557,7 @@ module.exports = React.createClass({
                 </div>;
         }
         else {
-            userLevelsSection = <div>No users have specific privileges in this room.</div>
+            userLevelsSection = <div>No users have specific privileges in this room.</div>;
         }
 
         var banned = this.props.room.getMembersWithMembership("ban");
@@ -635,7 +635,7 @@ module.exports = React.createClass({
                                     </label>);
                         })) : (self.state.tags && self.state.tags.join) ? self.state.tags.join(", ") : ""
                     }
-                </div>
+                </div>;
         }
 
         // If there is no history_visibility, it is assumed to be 'shared'.
@@ -653,7 +653,7 @@ module.exports = React.createClass({
             addressWarning =
                 <div className="mx_RoomSettings_warning">
                     To link to a room it must have <a href="#addresses">an address</a>.
-                </div>
+                </div>;
         }
 
         var inviteGuestWarning;
@@ -664,7 +664,7 @@ module.exports = React.createClass({
                         this.setState({ join_rule: "invite", guest_access: "can_join" });
                         e.preventDefault();
                     }}>Click here to fix</a>.
-                </div>
+                </div>;
         }
 
         var integrationsButton;
diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index 834a06d8e6..83b9cf3c6f 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/src/components/views/rooms/RoomTile.js
@@ -221,7 +221,7 @@ module.exports = React.createClass({
         var avatarContainerClasses = classNames({
             'mx_RoomTile_avatar_container': true,
             'mx_RoomTile_avatar_roomTagMenu': this.state.roomTagMenu,
-        })
+        });
 
         var badgeClasses = classNames({
             'mx_RoomTile_badge': true,
diff --git a/src/components/views/rooms/SearchableEntityList.js b/src/components/views/rooms/SearchableEntityList.js
index ccf733b985..50169edad5 100644
--- a/src/components/views/rooms/SearchableEntityList.js
+++ b/src/components/views/rooms/SearchableEntityList.js
@@ -118,7 +118,7 @@ var SearchableEntityList = React.createClass({
     _createOverflowEntity: function(overflowCount, totalCount) {
         var EntityTile = sdk.getComponent("rooms.EntityTile");
         var BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
-        var text = "and " + overflowCount + " other" + (overflowCount > 1 ? "s" : "") +  "...";
+        var text = "and " + overflowCount + " other" + (overflowCount > 1 ? "s" : "") + "...";
         return (
             <EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
                 <BaseAvatar url="img/ellipsis.svg" name="..." width={36} height={36} />
@@ -135,8 +135,8 @@ var SearchableEntityList = React.createClass({
                 <form onSubmit={this.onQuerySubmit} autoComplete="off">
                     <input className="mx_SearchableEntityList_query" id="mx_SearchableEntityList_query" type="text"
                         onChange={this.onQueryChanged} value={this.state.query}
-                        onFocus= {() => { this.setState({ focused: true }) }}
-                        onBlur= {() => { this.setState({ focused: false }) }}
+                        onFocus= {() => { this.setState({ focused: true }); }}
+                        onBlur= {() => { this.setState({ focused: false }); }}
                         placeholder={this.props.searchPlaceholderText} />
                 </form>
             );
diff --git a/src/components/views/rooms/SimpleRoomHeader.js b/src/components/views/rooms/SimpleRoomHeader.js
index 7f2bb0048a..4c63be5b99 100644
--- a/src/components/views/rooms/SimpleRoomHeader.js
+++ b/src/components/views/rooms/SimpleRoomHeader.js
@@ -44,7 +44,7 @@ module.exports = React.createClass({
 
         var cancelButton;
         if (this.props.onCancelClick) {
-            cancelButton = <div className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </div>
+            cancelButton = <div className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </div>;
         }
 
         var showRhsButton;
diff --git a/src/components/views/rooms/UserTile.js b/src/components/views/rooms/UserTile.js
index 9608247d5e..66d736f3bb 100644
--- a/src/components/views/rooms/UserTile.js
+++ b/src/components/views/rooms/UserTile.js
@@ -38,7 +38,7 @@ module.exports = React.createClass({
         var active = -1;
 
         // FIXME: make presence data update whenever User.presence changes...
-        active = user.lastActiveAgo ? 
+        active = user.lastActiveAgo ?
             (Date.now() - (user.lastPresenceTs - user.lastActiveAgo)) : -1;
 
         var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
diff --git a/src/components/views/settings/ChangeAvatar.js b/src/components/views/settings/ChangeAvatar.js
index 9b03aba1a3..de30b51f1b 100644
--- a/src/components/views/settings/ChangeAvatar.js
+++ b/src/components/views/settings/ChangeAvatar.js
@@ -49,7 +49,7 @@ module.exports = React.createClass({
         return {
             avatarUrl: this.props.initialAvatarUrl,
             phase: this.Phases.Display,
-        }
+        };
     },
 
     componentWillReceiveProps: function(newProps) {
@@ -120,7 +120,7 @@ module.exports = React.createClass({
             var BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
             // XXX: FIXME: once we track in the JS what our own displayname is(!) then use it here rather than ?
             avatarImg = <BaseAvatar width={this.props.width} height={this.props.height} resizeMethod='crop'
-                        name='?' idName={ MatrixClientPeg.get().getUserIdLocalpart() } url={this.state.avatarUrl} />
+                        name='?' idName={ MatrixClientPeg.get().getUserIdLocalpart() } url={this.state.avatarUrl} />;
         }
 
         var uploadSection;
@@ -130,7 +130,7 @@ module.exports = React.createClass({
                     Upload new:
                     <input type="file" onChange={this.onFileSelected}/>
                     {this.state.errorText}
-                </div>  
+                </div>
             );
         }
 
diff --git a/src/components/views/settings/ChangePassword.js b/src/components/views/settings/ChangePassword.js
index 1ef3eff205..a011d5262e 100644
--- a/src/components/views/settings/ChangePassword.js
+++ b/src/components/views/settings/ChangePassword.js
@@ -59,7 +59,7 @@ module.exports = React.createClass({
     getInitialState: function() {
         return {
             phase: this.Phases.Edit
-        }
+        };
     },
 
     changePassword: function(old_password, new_password) {
@@ -105,7 +105,7 @@ module.exports = React.createClass({
     render: function() {
         var rowClassName = this.props.rowClassName;
         var rowLabelClassName = this.props.rowLabelClassName;
-        var rowInputClassName = this.props.rowInputClassName
+        var rowInputClassName = this.props.rowInputClassName;
         var buttonClassName = this.props.buttonClassName;
 
         switch (this.state.phase) {
diff --git a/src/components/views/settings/DevicesPanel.js b/src/components/views/settings/DevicesPanel.js
index f48d4bec85..28eee55527 100644
--- a/src/components/views/settings/DevicesPanel.js
+++ b/src/components/views/settings/DevicesPanel.js
@@ -88,7 +88,7 @@ export default class DevicesPanel extends React.Component {
         const removed_id = device.device_id;
         this.setState((state, props) => {
             const newDevices = state.devices.filter(
-                d => { return d.device_id != removed_id }
+                d => { return d.device_id != removed_id; }
             );
             return { devices: newDevices };
         });
@@ -98,7 +98,7 @@ export default class DevicesPanel extends React.Component {
         var DevicesPanelEntry = sdk.getComponent('settings.DevicesPanelEntry');
         return (
             <DevicesPanelEntry key={device.device_id} device={device}
-               onDeleted={()=>{this._onDeviceDeleted(device)}} />
+               onDeleted={()=>{this._onDeviceDeleted(device);}} />
         );
     }
 
diff --git a/src/components/views/settings/DevicesPanelEntry.js b/src/components/views/settings/DevicesPanelEntry.js
index f9f0e49a5e..4fa7d961ac 100644
--- a/src/components/views/settings/DevicesPanelEntry.js
+++ b/src/components/views/settings/DevicesPanelEntry.js
@@ -15,12 +15,9 @@ limitations under the License.
 */
 
 import React from 'react';
-import classNames from 'classnames';
-import q from 'q';
 
 import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
-import DateUtils from '../../../DateUtils';
 import Modal from '../../../Modal';
 
 export default class DevicesPanelEntry extends React.Component {
@@ -61,7 +58,7 @@ export default class DevicesPanelEntry extends React.Component {
             if (this._unmounted) { return; }
             if (error.httpStatus !== 401 || !error.data || !error.data.flows) {
                 // doesn't look like an interactive-auth failure
-                throw e;
+                throw error;
             }
 
             // pop up an interactive auth dialog
@@ -121,7 +118,7 @@ export default class DevicesPanelEntry extends React.Component {
 
         let deleteButton;
         if (this.state.deleteError) {
-            deleteButton = <div className="error">{this.state.deleteError}</div>
+            deleteButton = <div className="error">{this.state.deleteError}</div>;
         } else {
             deleteButton = (
                 <div className="mx_textButton"
diff --git a/src/components/views/settings/EnableNotificationsButton.js b/src/components/views/settings/EnableNotificationsButton.js
index 246334085f..d106b8bbb4 100644
--- a/src/components/views/settings/EnableNotificationsButton.js
+++ b/src/components/views/settings/EnableNotificationsButton.js
@@ -17,7 +17,6 @@ limitations under the License.
 'use strict';
 var React = require("react");
 var Notifier = require("../../../Notifier");
-var sdk = require('../../../index');
 var dis = require("../../../dispatcher");
 
 module.exports = React.createClass({
diff --git a/src/components/views/voip/CallView.js b/src/components/views/voip/CallView.js
index 91d3904615..6cab7531b7 100644
--- a/src/components/views/voip/CallView.js
+++ b/src/components/views/voip/CallView.js
@@ -124,7 +124,7 @@ module.exports = React.createClass({
         return this.refs.video;
     },
 
-    render: function(){
+    render: function() {
         var VideoView = sdk.getComponent('voip.VideoView');
 
         var voice;
diff --git a/src/components/views/voip/VideoView.js b/src/components/views/voip/VideoView.js
index d018a2603c..ea37579237 100644
--- a/src/components/views/voip/VideoView.js
+++ b/src/components/views/voip/VideoView.js
@@ -114,7 +114,7 @@ module.exports = React.createClass({
                     <VideoFeed ref="remote" onResize={this.props.onResize}
                         maxHeight={maxVideoHeight} />
                 </div>
-                <div className="mx_VideoView_localVideoFeed">                
+                <div className="mx_VideoView_localVideoFeed">
                     <VideoFeed ref="local"/>
                 </div>
             </div>
diff --git a/src/createRoom.js b/src/createRoom.js
index a1512e23f6..2a23fb0787 100644
--- a/src/createRoom.js
+++ b/src/createRoom.js
@@ -45,7 +45,7 @@ function createRoom(opts) {
             Modal.createDialog(NeedToRegisterDialog, {
                 title: "Please Register",
                 description: "Guest users can't create new rooms. Please register to create room and start a chat."
-            })
+            });
         }, 0);
         return q(null);
     }
@@ -78,7 +78,7 @@ function createRoom(opts) {
 
     let modal;
     setTimeout(()=>{
-        modal = Modal.createDialog(Loader, null, 'mx_Dialog_spinner')
+        modal = Modal.createDialog(Loader, null, 'mx_Dialog_spinner');
     }, 0);
 
     let roomId;
diff --git a/src/dispatcher.js b/src/dispatcher.js
index 22ef712b6c..ed0350fe54 100644
--- a/src/dispatcher.js
+++ b/src/dispatcher.js
@@ -40,7 +40,7 @@ class MatrixDispatcher extends flux.Dispatcher {
             setTimeout(super.dispatch.bind(this, payload), 0);
         }
     }
-};
+}
 
 if (global.mxDispatcher === undefined) {
     global.mxDispatcher = new MatrixDispatcher();
diff --git a/src/extend.js b/src/extend.js
index e39e9e9be9..cc3c33b2e7 100644
--- a/src/extend.js
+++ b/src/extend.js
@@ -23,4 +23,4 @@ module.exports = function(dest, src) {
         }
     }
     return dest;
-}
+};
diff --git a/src/linkify-matrix.js b/src/linkify-matrix.js
index e7d798c9ff..68f7a66bda 100644
--- a/src/linkify-matrix.js
+++ b/src/linkify-matrix.js
@@ -129,7 +129,7 @@ matrixLinkify.MATRIXTO_URL_PATTERN = "^(?:https?:\/\/)?(?:www\\.)?matrix\\.to/#/
 matrixLinkify.MATRIXTO_BASE_URL= "https://matrix.to";
 
 matrixLinkify.options = {
-    events: function (href, type) {
+    events: function(href, type) {
         switch (type) {
             case "userid":
                 return {
@@ -146,7 +146,7 @@ matrixLinkify.options = {
         }
     },
 
-    formatHref: function (href, type) {
+    formatHref: function(href, type) {
         switch (type) {
             case 'roomalias':
             case 'userid':
diff --git a/src/utils/FormattingUtils.js b/src/utils/FormattingUtils.js
index 44dcb2aa22..414784d101 100644
--- a/src/utils/FormattingUtils.js
+++ b/src/utils/FormattingUtils.js
@@ -25,4 +25,4 @@ export function formatCount(count) {
    if (count < 10000000) return (count / 1000000).toFixed(1) + "M";
    if (count < 100000000) return (count / 1000000).toFixed(0) + "M";
    return (count / 1000000000).toFixed(1) + "B"; // 10B is enough for anyone, right? :S
-}
\ No newline at end of file
+}
diff --git a/src/utils/MegolmExportEncryption.js b/src/utils/MegolmExportEncryption.js
index 983ec2c75f..abae81e5ad 100644
--- a/src/utils/MegolmExportEncryption.js
+++ b/src/utils/MegolmExportEncryption.js
@@ -71,7 +71,7 @@ export function decryptMegolmKeyFile(data, password) {
             toVerify,
         ).then((isValid) => {
             if (!isValid) {
-                throw new Error('Authentication check failed: incorrect password?')
+                throw new Error('Authentication check failed: incorrect password?');
             }
 
             return subtleCrypto.decrypt(
diff --git a/src/wrappers/WithMatrixClient.js b/src/wrappers/WithMatrixClient.js
index c9c9e7adb7..8e56d17dff 100644
--- a/src/wrappers/WithMatrixClient.js
+++ b/src/wrappers/WithMatrixClient.js
@@ -36,4 +36,4 @@ export default function(WrappedComponent) {
             return <WrappedComponent {...this.props} matrixClient={this.context.matrixClient} />;
         },
     });
-};
+}

From 0c5762b91da9f13402018f7a914e83b14c16678c Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukebarnard1@users.noreply.github.com>
Date: Fri, 20 Jan 2017 17:51:35 +0100
Subject: [PATCH 213/289] Implement "someone is typing" avatars (#631)

When users are typing, their avatars can be seen instead of "..." in the RoomView StatusBar
---
 src/components/structures/RoomStatusBar.js | 39 +++++++++++++++++++---
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js
index c6f2d6500b..618989a75c 100644
--- a/src/components/structures/RoomStatusBar.js
+++ b/src/components/structures/RoomStatusBar.js
@@ -19,6 +19,9 @@ var sdk = require('../../index');
 var dis = require("../../dispatcher");
 var WhoIsTyping = require("../../WhoIsTyping");
 var MatrixClientPeg = require("../../MatrixClientPeg");
+const MemberAvatar = require("../views/avatars/MemberAvatar");
+
+const TYPING_AVATARS_LIMIT = 2;
 
 module.exports = React.createClass({
     displayName: 'RoomStatusBar',
@@ -173,10 +176,8 @@ module.exports = React.createClass({
 
         if (wantPlaceholder) {
             return (
-                <div className="mx_RoomStatusBar_placeholderIndicator">
-                    <span>.</span>
-                    <span>.</span>
-                    <span>.</span>
+                <div className="mx_RoomStatusBar_typingIndicatorAvatars">
+                    {this._renderTypingIndicatorAvatars(TYPING_AVATARS_LIMIT)}
                 </div>
             );
         }
@@ -184,6 +185,36 @@ module.exports = React.createClass({
         return null;
     },
 
+    _renderTypingIndicatorAvatars: function(limit) {
+        let users = WhoIsTyping.usersTyping(this.props.room);
+
+        let othersCount = Math.max(users.length - limit, 0);
+        users = users.slice(0, limit);
+
+        let avatars = users.map((u, index) => {
+            let showInitial = othersCount === 0 && index === users.length - 1;
+            return (
+                <MemberAvatar
+                    key={u.userId}
+                    member={u}
+                    width={24}
+                    height={24}
+                    resizeMethod="crop"
+                    defaultToInitialLetter={showInitial}
+                />
+            );
+        });
+
+        if (othersCount > 0) {
+            avatars.push(
+                <span className="mx_RoomStatusBar_typingIndicatorRemaining">
+                    +{othersCount}
+                </span>
+            );
+        }
+
+        return avatars;
+    },
 
     // return suitable content for the main (text) part of the status bar.
     _getContent: function() {

From 937f13d578c0b63b911d4f68728dd7e28cab60d5 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 20 Jan 2017 21:00:22 +0000
Subject: [PATCH 214/289] fix a bunch of dark-theme buttons

---
 src/components/structures/UserSettings.js     |  8 +++----
 .../views/room_settings/AliasSettings.js      |  4 ++--
 src/components/views/rooms/MessageComposer.js | 21 +++++++++++--------
 .../views/rooms/MessageComposerInput.js       |  2 +-
 src/components/views/rooms/RoomHeader.js      |  2 +-
 5 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 8f6473a181..4a1332be8c 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -607,8 +607,8 @@ module.exports = React.createClass({
                     <div className="mx_UserSettings_profileInputCell">
                         <input type="text" key={val.address} id={id} value={val.address} disabled />
                     </div>
-                    <div className="mx_UserSettings_threepidButton">
-                        <img src="img/icon_context_delete.svg" width="14" height="14" alt="Remove" onClick={this.onRemoveThreepidClicked.bind(this, val)} />
+                    <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
+                        <img src="img/cancel-small.svg" width="14" height="14" alt="Remove" onClick={this.onRemoveThreepidClicked.bind(this, val)} />
                     </div>
                 </div>
             );
@@ -630,7 +630,7 @@ module.exports = React.createClass({
                             blurToCancel={ false }
                             onValueChanged={ this.onAddThreepidClicked } />
                     </div>
-                    <div className="mx_UserSettings_threepidButton">
+                    <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
                          <img src="img/plus.svg" width="14" height="14" alt="Add" onClick={ this.onAddThreepidClicked.bind(this, undefined, true) }/>
                     </div>
                 </div>
@@ -711,7 +711,7 @@ module.exports = React.createClass({
                         </div>
                         <div className="mx_UserSettings_avatarPicker_edit">
                             <label htmlFor="avatarInput" ref="file_label">
-                                <img src="img/camera.svg"
+                                <img src="img/camera.svg" className="mx_filterFlipColor"
                                     alt="Upload avatar" title="Upload avatar"
                                     width="17" height="15" />
                             </label>
diff --git a/src/components/views/room_settings/AliasSettings.js b/src/components/views/room_settings/AliasSettings.js
index 5935298634..6543f2a17d 100644
--- a/src/components/views/room_settings/AliasSettings.js
+++ b/src/components/views/room_settings/AliasSettings.js
@@ -281,7 +281,7 @@ module.exports = React.createClass({
                                     onValueChanged={ self.onAliasChanged.bind(self, localDomain, i) }
                                     editable={ self.props.canSetAliases }
                                     initialValue={ alias } />
-                                <div className="mx_RoomSettings_deleteAlias">
+                                <div className="mx_RoomSettings_deleteAlias mx_filterFlipColor">
                                      { deleteButton }
                                 </div>
                             </div>
@@ -297,7 +297,7 @@ module.exports = React.createClass({
                                 placeholder={ "New address (e.g. #foo:" + localDomain + ")" }
                                 blurToCancel={ false }
                                 onValueChanged={ self.onAliasAdded } />
-                            <div className="mx_RoomSettings_addAlias">
+                            <div className="mx_RoomSettings_addAlias mx_filterFlipColor">
                                  <img src="img/plus.svg" width="14" height="14" alt="Add"
                                       onClick={ self.onAliasAdded.bind(self, undefined) }/>
                             </div>
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 4dfb95f5d0..113224666d 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -222,20 +222,22 @@ export default class MessageComposer extends React.Component {
             </div>
         );
 
-        let e2eimg, e2etitle;
+        let e2eImg, e2eTitle, e2eClass;
 
         if (MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId)) {
             // FIXME: show a /!\ if there are untrusted devices in the room...
-            e2eimg = 'img/e2e-verified.svg';
-            e2etitle = 'Encrypted room';
+            e2eImg = 'img/e2e-verified.svg';
+            e2eTitle = 'Encrypted room';
+            e2eClass = 'mx_MessageComposer_e2eIcon';
         } else {
-            e2eimg = 'img/e2e-unencrypted.svg';
-            e2etitle = 'Unencrypted room';
+            e2eImg = 'img/e2e-unencrypted.svg';
+            e2eTitle = 'Unencrypted room';
+            e2eClass = 'mx_MessageComposer_e2eIcon mx_filterFlipColor';
         }
 
         controls.push(
-            <img key="e2eIcon" className="mx_MessageComposer_e2eIcon" src={e2eimg} width="12" height="12"
-                alt={e2etitle} title={e2etitle}
+            <img key="e2eIcon" className={e2eClass} src={e2eImg} width="12" height="12"
+                alt={e2eTitle} title={e2eTitle}
             />
         );
         var callButton, videoCallButton, hangupButton;
@@ -331,6 +333,7 @@ export default class MessageComposer extends React.Component {
                 const disabled = !this.state.inputState.isRichtextEnabled && 'underline' === name;
                 const className = classNames("mx_MessageComposer_format_button", {
                     mx_MessageComposer_format_button_disabled: disabled,
+                    mx_filterFlipColor: true,
                 });
                 return <img className={className}
                             title={name}
@@ -355,11 +358,11 @@ export default class MessageComposer extends React.Component {
                             <div style={{flex: 1}}></div>
                             <img title={`Turn Markdown ${this.state.inputState.isRichtextEnabled ? 'on' : 'off'}`}
                                  onMouseDown={this.onToggleMarkdownClicked}
-                                className="mx_MessageComposer_formatbar_markdown"
+                                className="mx_MessageComposer_formatbar_markdown mx_filterFlipColor"
                                 src={`img/button-md-${!this.state.inputState.isRichtextEnabled}.png`} />
                             <img title="Hide Text Formatting Toolbar"
                                  onClick={this.onToggleFormattingClicked}
-                                 className="mx_MessageComposer_formatbar_cancel"
+                                 className="mx_MessageComposer_formatbar_cancel mx_filterFlipColor"
                                  src="img/icon-text-cancel.svg" />
                         </div>
                     </div>: null
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 634939331f..bf936a2c13 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -719,7 +719,7 @@ export default class MessageComposerInput extends React.Component {
                         selection={selection} />
                 </div>
                 <div className={className}>
-                    <img className="mx_MessageComposer_input_markdownIndicator"
+                    <img className="mx_MessageComposer_input_markdownIndicator mx_filterFlipColor"
                          onMouseDown={this.onMarkdownToggleClicked}
                          title={`Markdown is ${this.state.isRichtextEnabled ? 'disabled' : 'enabled'}`}
                          src={`img/button-md-${!this.state.isRichtextEnabled}.png`} />
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index a066bfd337..e345918f07 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -183,7 +183,7 @@ module.exports = React.createClass({
             );
 
             save_button = <div className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save</div>;
-            cancel_button = <div className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </div>;
+            cancel_button = <div className="mx_RoomHeader_cancelButton mx_filterFlipColor" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </div>;
         }
 
         if (this.props.saving) {

From d97fc0a99a66f564d3d64c98b6a947d47fd89266 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 23 Jan 2017 10:25:33 +0000
Subject: [PATCH 215/289] Fix typing avatars displaying "me"

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

diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js
index 618989a75c..d6d41f21d8 100644
--- a/src/components/structures/RoomStatusBar.js
+++ b/src/components/structures/RoomStatusBar.js
@@ -186,7 +186,7 @@ module.exports = React.createClass({
     },
 
     _renderTypingIndicatorAvatars: function(limit) {
-        let users = WhoIsTyping.usersTyping(this.props.room);
+        let users = WhoIsTyping.usersTypingApartFromMe(this.props.room);
 
         let othersCount = Math.max(users.length - limit, 0);
         users = users.slice(0, limit);

From dc08d9dfdfb75d154f1a7464dc50e822a369e5e0 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Mon, 23 Jan 2017 12:18:41 +0000
Subject: [PATCH 216/289] Fix device verification from e2e info

Don't attempt to reuse the same AsyncWrapper for different dialogs - which ends
up pushing the props for the new dialog into the old dialog.

Fixes https://github.com/vector-im/riot-web/issues/3020
---
 src/Modal.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/Modal.js b/src/Modal.js
index 862e4befc5..f0ab97a91e 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -67,6 +67,8 @@ const AsyncWrapper = React.createClass({
     },
 });
 
+let _counter = 0;
+
 module.exports = {
     DialogContainerId: "mx_Dialog_Container",
 
@@ -113,12 +115,16 @@ module.exports = {
             ReactDOM.unmountComponentAtNode(self.getOrCreateContainer());
         };
 
+        // don't attempt to reuse the same AsyncWrapper for different dialogs,
+        // otherwise we'll get confused.
+        const modalCount = _counter++;
+
         // FIXME: If a dialog uses getDefaultProps it clobbers the onFinished
         // property set here so you can't close the dialog from a button click!
         var dialog = (
             <div className={"mx_Dialog_wrapper " + className}>
                 <div className="mx_Dialog">
-                     <AsyncWrapper loader={loader} {...props} onFinished={closeDialog}/>
+                    <AsyncWrapper key={modalCount} loader={loader} {...props} onFinished={closeDialog}/>
                 </div>
                 <div className="mx_Dialog_background" onClick={ closeDialog.bind(this, false) }></div>
             </div>

From 4d12a65529e5fb08726e56328177b410686d3595 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 23 Jan 2017 14:16:25 +0000
Subject: [PATCH 217/289] Add mocha env for tests in eslint config

---
 test/.eslintrc.js | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 test/.eslintrc.js

diff --git a/test/.eslintrc.js b/test/.eslintrc.js
new file mode 100644
index 0000000000..4cc4659d7d
--- /dev/null
+++ b/test/.eslintrc.js
@@ -0,0 +1,5 @@
+module.exports = {
+    env: {
+        mocha: true,
+    },
+}

From a06ecb87bc4c0d10a5d516e3a89395a437327283 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukebarnard1@users.noreply.github.com>
Date: Mon, 23 Jan 2017 16:01:39 +0100
Subject: [PATCH 218/289] Hide RoomStatusBar when it displays nothing (#615)

Use CSS class `mx_RoomView_statusArea_expanded` to indicate an expanded status bar. Without this, the status bar may be hidden from view. A 10s debounce will prevent it from bouncing frequently.
---
 src/components/structures/RoomStatusBar.js | 67 +++++++++++++---------
 src/components/structures/RoomView.js      | 24 +++++++-
 2 files changed, 62 insertions(+), 29 deletions(-)

diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js
index d6d41f21d8..0eb50161ec 100644
--- a/src/components/structures/RoomStatusBar.js
+++ b/src/components/structures/RoomStatusBar.js
@@ -23,6 +23,11 @@ const MemberAvatar = require("../views/avatars/MemberAvatar");
 
 const TYPING_AVATARS_LIMIT = 2;
 
+const HIDE_DEBOUNCE_MS = 10000;
+const STATUS_BAR_HIDDEN = 0;
+const STATUS_BAR_EXPANDED = 1;
+const STATUS_BAR_EXPANDED_LARGE = 2;
+
 module.exports = React.createClass({
     displayName: 'RoomStatusBar',
 
@@ -63,6 +68,13 @@ module.exports = React.createClass({
         // status bar. This is used to trigger a re-layout in the parent
         // component.
         onResize: React.PropTypes.func,
+
+        // callback for when the status bar can be hidden from view, as it is
+        // not displaying anything
+        onHidden: React.PropTypes.func,
+        // callback for when the status bar is displaying something and should
+        // be visible
+        onVisible: React.PropTypes.func,
     },
 
     getInitialState: function() {
@@ -81,6 +93,18 @@ module.exports = React.createClass({
         if(this.props.onResize && this._checkForResize(prevProps, prevState)) {
             this.props.onResize();
         }
+
+        const size = this._getSize(this.state, this.props);
+        if (size > 0) {
+            this.props.onVisible();
+        } else {
+            if (this.hideDebouncer) {
+                clearTimeout(this.hideDebouncer);
+            }
+            this.hideDebouncer = setTimeout(() => {
+                this.props.onHidden();
+            }, HIDE_DEBOUNCE_MS);
+        }
     },
 
     componentWillUnmount: function() {
@@ -107,35 +131,24 @@ module.exports = React.createClass({
         });
     },
 
+    // We don't need the actual height - just whether it is likely to have
+    // changed - so we use '0' to indicate normal size, and other values to
+    // indicate other sizes.
+    _getSize: function(state, props) {
+        if (state.syncState === "ERROR" || state.whoisTypingString) {
+            return STATUS_BAR_EXPANDED;
+        } else if (props.tabCompleteEntries) {
+            return STATUS_BAR_HIDDEN;
+        } else if (props.hasUnsentMessages) {
+            return STATUS_BAR_EXPANDED_LARGE;
+        }
+        return STATUS_BAR_HIDDEN;
+    },
+
     // determine if we need to call onResize
     _checkForResize: function(prevProps, prevState) {
-        // figure out the old height and the new height of the status bar. We
-        // don't need the actual height - just whether it is likely to have
-        // changed - so we use '0' to indicate normal size, and other values to
-        // indicate other sizes.
-        var oldSize, newSize;
-
-        if (prevState.syncState === "ERROR") {
-            oldSize = 1;
-        } else if (prevProps.tabCompleteEntries) {
-            oldSize = 0;
-        } else if (prevProps.hasUnsentMessages) {
-            oldSize = 2;
-        } else {
-            oldSize = 0;
-        }
-
-        if (this.state.syncState === "ERROR") {
-            newSize = 1;
-        } else if (this.props.tabCompleteEntries) {
-            newSize = 0;
-        } else if (this.props.hasUnsentMessages) {
-            newSize = 2;
-        } else {
-            newSize = 0;
-        }
-
-        return newSize != oldSize;
+        // figure out the old height and the new height of the status bar.
+        return this._getSize(prevProps, prevState) !== this._getSize(this.props, this.state);
     },
 
     // return suitable content for the image on the left of the status bar.
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 1f35e41817..8753540e48 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -146,6 +146,8 @@ module.exports = React.createClass({
             showTopUnreadMessagesBar: false,
 
             auxPanelMaxHeight: undefined,
+
+            statusBarVisible: false,
         };
     },
 
@@ -1333,6 +1335,18 @@ module.exports = React.createClass({
         // no longer anything to do here
     },
 
+    onStatusBarVisible: function() {
+        this.setState({
+            statusBarVisible: true,
+        });
+    },
+
+    onStatusBarHidden: function() {
+        this.setState({
+            statusBarVisible: false,
+        });
+    },
+
     showSettings: function(show) {
         // XXX: this is a bit naughty; we should be doing this via props
         if (show) {
@@ -1515,7 +1529,9 @@ module.exports = React.createClass({
                 onCancelAllClick={this.onCancelAllClick}
                 onScrollToBottomClick={this.jumpToLiveTimeline}
                 onResize={this.onChildResize}
-                />;
+                onVisible={this.onStatusBarVisible}
+                onHidden={this.onStatusBarHidden}
+            />;
         }
 
         var aux = null;
@@ -1669,6 +1685,10 @@ module.exports = React.createClass({
                 </div>
             );
         }
+        let statusBarAreaClass = "mx_RoomView_statusArea mx_fadable";
+        if (this.state.statusBarVisible) {
+            statusBarAreaClass += " mx_RoomView_statusArea_expanded";
+        }
 
         return (
             <div className={ "mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "") } ref="roomView">
@@ -1691,7 +1711,7 @@ module.exports = React.createClass({
                 { topUnreadMessagesBar }
                 { messagePanel }
                 { searchResultsPanel }
-                <div className="mx_RoomView_statusArea mx_fadable" style={{ opacity: this.props.opacity }}>
+                <div className={statusBarAreaClass} style={{opacity: this.props.opacity}}>
                     <div className="mx_RoomView_statusAreaBox">
                         <div className="mx_RoomView_statusAreaBox_line"></div>
                         { statusBar }

From 94fdd2bcd286760613d66e2675031b1a57bd3c3a Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 23 Jan 2017 15:41:33 +0000
Subject: [PATCH 219/289] lint all

---
 jenkins.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/jenkins.sh b/jenkins.sh
index 3b4e31fd7f..c1fba19e94 100755
--- a/jenkins.sh
+++ b/jenkins.sh
@@ -19,7 +19,7 @@ npm install
 npm run test
 
 # run eslint
-npm run lint -- -f checkstyle -o eslint.xml || true
+npm run lintall -- -f checkstyle -o eslint.xml || true
 
 # delete the old tarball, if it exists
 rm -f matrix-react-sdk-*.tgz

From 1e77b2eba33f8b084dd43030d1929c50cb870cc0 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 23 Jan 2017 16:19:29 +0000
Subject: [PATCH 220/289] Bundle eslint config

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

diff --git a/package.json b/package.json
index 8e1ead4b9e..0a8c09f984 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "files": [
+    ".eslintrc.js",
     "CHANGELOG.md",
     "CONTRIBUTING.rst",
     "LICENSE",

From 905508f1ceeda9466da1ea23d9318117c68f1502 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 23 Jan 2017 17:33:09 +0000
Subject: [PATCH 221/289] Correctly get the path of the js-sdk .eslintrc.js

So we work correctly when we're included in another module
---
 .eslintrc.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index e41106d695..d5684e21a7 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,6 +1,15 @@
+const path = require('path');
+
+// get the path of the js-sdk so we can extend the config
+// eslint supports loading extended configs by module,
+// but only if they come from a module that starts with eslint-config-
+// So we load the filename directly (and it could be in node_modules/
+// or or ../node_modules/ etc)
+const matrixJsSdkPath = path.dirname(require.resolve('matrix-js-sdk'));
+
 module.exports = {
     parser: "babel-eslint",
-    extends: ["./node_modules/matrix-js-sdk/.eslintrc.js"],
+    extends: [matrixJsSdkPath + "/.eslintrc.js"],
     plugins: [
       "react",
       "flowtype",

From c0de0870ed3f3262b55e6d2057c934ef867cded8 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Tue, 24 Jan 2017 13:31:52 +0000
Subject: [PATCH 222/289] Some sarcastic comments

---
 src/dispatcher.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/dispatcher.js b/src/dispatcher.js
index ed0350fe54..11c79f58ee 100644
--- a/src/dispatcher.js
+++ b/src/dispatcher.js
@@ -42,6 +42,9 @@ class MatrixDispatcher extends flux.Dispatcher {
     }
 }
 
+// XXX this is a big anti-pattern, and makes testing hard. Because dispatches
+// happen asynchronously, it is possible for actions dispatched in one thread
+// to arrive in another, with *hilarious* consequences.
 if (global.mxDispatcher === undefined) {
     global.mxDispatcher = new MatrixDispatcher();
 }

From 5f24fc3e5da798b945adf245a21ae22df0d8b0ed Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 24 Jan 2017 13:56:22 +0000
Subject: [PATCH 223/289] Fix merge fail

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

diff --git a/src/components/views/elements/AddressSelector.js b/src/components/views/elements/AddressSelector.js
index f9d1c2e28d..a14a8ffdff 100644
--- a/src/components/views/elements/AddressSelector.js
+++ b/src/components/views/elements/AddressSelector.js
@@ -123,7 +123,7 @@ module.exports = React.createClass({
                 // Saving the addressListElement so we can use it to work out, in the componentDidUpdate
                 // method, how far to scroll when using the arrow keys
                 addressList.push(
-                    <div className={classes} onClick={this.onClick(i)} onMouseEnter={this.onMouseEnter(i)} onMouseLeave={this.onMouseLeave} key={i} ref={(ref) => { this.addressListElement = ref; }} >
+                    <div className={classes} onClick={this.onClick.bind(this, i)} onMouseEnter={this.onMouseEnter.bind(this, i)} onMouseLeave={this.onMouseLeave} key={i} ref={(ref) => { this.addressListElement = ref; }} >
                         <AddressTile address={this.props.addressList[i].userId} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />
                     </div>
                 );

From 5091bab657f8c043b96634fb7a236b795a06894a Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 24 Jan 2017 13:59:02 +0000
Subject: [PATCH 224/289] Fix failed merge #2

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

diff --git a/src/components/views/elements/AddressSelector.js b/src/components/views/elements/AddressSelector.js
index a14a8ffdff..361705c6d5 100644
--- a/src/components/views/elements/AddressSelector.js
+++ b/src/components/views/elements/AddressSelector.js
@@ -124,7 +124,7 @@ module.exports = React.createClass({
                 // method, how far to scroll when using the arrow keys
                 addressList.push(
                     <div className={classes} onClick={this.onClick.bind(this, i)} onMouseEnter={this.onMouseEnter.bind(this, i)} onMouseLeave={this.onMouseLeave} key={i} ref={(ref) => { this.addressListElement = ref; }} >
-                        <AddressTile address={this.props.addressList[i].userId} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />
+                        <AddressTile address={this.props.addressList[i]} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />
                     </div>
                 );
             }

From ce7434984bdb181a4a45696f0d14f3c9c4a807af Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 24 Jan 2017 14:32:52 +0000
Subject: [PATCH 225/289] Expand timeline in situations when _getIndicator not
 null

The status bar will now be expanded when:
 - props.numUnreadMessages
 - !props.atEndOfLiveTimeline
 - props.hasActiveCall
---
 src/components/structures/RoomStatusBar.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js
index 0eb50161ec..c80c4db7cc 100644
--- a/src/components/structures/RoomStatusBar.js
+++ b/src/components/structures/RoomStatusBar.js
@@ -135,7 +135,11 @@ module.exports = React.createClass({
     // changed - so we use '0' to indicate normal size, and other values to
     // indicate other sizes.
     _getSize: function(state, props) {
-        if (state.syncState === "ERROR" || state.whoisTypingString) {
+        if (state.syncState === "ERROR" ||
+            state.whoisTypingString ||
+            props.numUnreadMessages ||
+            !props.atEndOfLiveTimeline ||
+            props.hasActiveCall) {
             return STATUS_BAR_EXPANDED;
         } else if (props.tabCompleteEntries) {
             return STATUS_BAR_HIDDEN;

From 3b9a1121369e48630af8a1879af5991a8cdee180 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Tue, 24 Jan 2017 14:47:11 +0000
Subject: [PATCH 226/289] Add bug report UI

---
 src/component-index.js                        |   2 +
 src/components/structures/UserSettings.js     |  21 +++
 .../views/dialogs/BugReportDialog.js          | 122 ++++++++++++++++++
 3 files changed, 145 insertions(+)
 create mode 100644 src/components/views/dialogs/BugReportDialog.js

diff --git a/src/component-index.js b/src/component-index.js
index e83de8739d..f03a3e39ff 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -71,6 +71,8 @@ import views$create_room$Presets from './components/views/create_room/Presets';
 views$create_room$Presets && (module.exports.components['views.create_room.Presets'] = views$create_room$Presets);
 import views$create_room$RoomAlias from './components/views/create_room/RoomAlias';
 views$create_room$RoomAlias && (module.exports.components['views.create_room.RoomAlias'] = views$create_room$RoomAlias);
+import views$dialogs$BugReportDialog from './components/views/dialogs/BugReportDialog';
+views$dialogs$BugReportDialog && (module.exports.components['views.dialogs.BugReportDialog'] = views$dialogs$BugReportDialog);
 import views$dialogs$ChatInviteDialog from './components/views/dialogs/ChatInviteDialog';
 views$dialogs$ChatInviteDialog && (module.exports.components['views.dialogs.ChatInviteDialog'] = views$dialogs$ChatInviteDialog);
 import views$dialogs$DeactivateAccountDialog from './components/views/dialogs/DeactivateAccountDialog';
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 4a1332be8c..8294eee6df 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -369,6 +369,11 @@ module.exports = React.createClass({
         Modal.createDialog(DeactivateAccountDialog, {});
     },
 
+    _onBugReportClicked: function() {
+        const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog");
+        Modal.createDialog(BugReportDialog, {});
+    },
+
     _onInviteStateChange: function(event, member, oldMembership) {
         if (member.userId === this._me && oldMembership === "invite") {
             this.forceUpdate();
@@ -485,6 +490,21 @@ module.exports = React.createClass({
         );
     },
 
+    _renderBugReport: function() {
+        // TODO: If there is no bug report endpoint, hide this.
+        return (
+            <div>
+                <h3>Bug Report</h3>
+                <div className="mx_UserSettings_section">
+                    <p>Found a bug?</p>
+                    <button className="mx_UserSettings_button danger"
+                        onClick={this._onBugReportClicked}>Report it
+                    </button>
+                </div>
+            </div>
+        );
+    },
+
     _renderLabs: function() {
         // default to enabled if undefined
         if (this.props.enableLabs === false) return null;
@@ -738,6 +758,7 @@ module.exports = React.createClass({
                 {this._renderDevicesPanel()}
                 {this._renderCryptoInfo()}
                 {this._renderBulkOptions()}
+                {this._renderBugReport()}
 
                 <h3>Advanced</h3>
 
diff --git a/src/components/views/dialogs/BugReportDialog.js b/src/components/views/dialogs/BugReportDialog.js
new file mode 100644
index 0000000000..eafafb56c6
--- /dev/null
+++ b/src/components/views/dialogs/BugReportDialog.js
@@ -0,0 +1,122 @@
+/*
+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.
+*/
+
+import React from 'react';
+import sdk from '../../../index';
+
+export default class BugReportDialog extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+        this.state = {
+            sendLogs: true,
+            busy: false,
+            err: null,
+            text: "",
+        };
+        this._onSubmit = this._onSubmit.bind(this);
+        this._onCancel = this._onCancel.bind(this);
+        this._onTextChange = this._onTextChange.bind(this);
+        this._onSendLogsChange = this._onSendLogsChange.bind(this);
+    }
+
+    _onCancel(ev) {
+        this.props.onFinished(false);
+    }
+
+    _onSubmit(ev) {
+        const sendLogs = this.state.sendLogs;
+        const userText = this.state.text;
+        if (!sendLogs && userText.trim().length === 0) {
+            this.setState({
+                err: "Please describe the bug and/or send logs."
+            });
+            return;
+        }
+        // TODO: Make the HTTP hit
+        this.setState({ busy: true, err: null });
+        setTimeout(() => {
+            this.setState({ busy: false, err: "No bug report endpoint." });
+        }, 1000);
+    }
+
+    _onTextChange(ev) {
+        this.setState({ text: ev.target.value });
+    }
+
+    _onSendLogsChange(ev) {
+        this.setState({ sendLogs: ev.target.checked });
+    }
+
+    render() {
+        const Loader = sdk.getComponent("elements.Spinner");
+
+        let error = null;
+        if (this.state.err) {
+            error = <div className="error">
+                {this.state.err}
+            </div>;
+        }
+
+        const okLabel = this.state.busy ? <Loader /> : 'Send';
+
+        let cancelButton = null;
+        if (!this.state.busy) {
+            cancelButton = <button onClick={this._onCancel}>
+                Cancel
+            </button>;
+        }
+
+        return (
+            <div className="mx_BugReportDialog">
+                <div className="mx_Dialog_title">
+                    Report a bug
+                </div>
+                <div className="mx_Dialog_content">
+                    <p>Please describe the bug. What did you do? What did you expect to happen?
+                    What actually happened?</p>
+                    <textarea
+                        className="mx_BugReportDialog_input"
+                        rows={5}
+                        onChange={this._onTextChange}
+                        value={this.state.text}
+                        placeholder="Describe your problem here."
+                    />
+                    <p>In order to diagnose problems, logs from this client will be sent with this bug report.
+                    If you would prefer to only send the text above, please untick:</p>
+                    <input type="checkbox" checked={this.state.sendLogs}
+                        onChange={this._onSendLogsChange} id="mx_BugReportDialog_logs"/>
+                    <label htmlFor="mx_BugReportDialog_logs">Send logs</label>
+                    {error}
+                </div>
+                <div className="mx_Dialog_buttons">
+                    <button
+                        className="mx_Dialog_primary danger"
+                        onClick={this._onSubmit}
+                        autoFocus={true}
+                    >
+                        {okLabel}
+                    </button>
+
+                    {cancelButton}
+                </div>
+            </div>
+        );
+    }
+}
+
+BugReportDialog.propTypes = {
+    onFinished: React.PropTypes.func.isRequired,
+};

From 59911721828843a31a4c11c210ac3791d274d769 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Tue, 24 Jan 2017 15:51:53 +0000
Subject: [PATCH 227/289] Review comments

---
 src/components/views/dialogs/BugReportDialog.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/views/dialogs/BugReportDialog.js b/src/components/views/dialogs/BugReportDialog.js
index eafafb56c6..e8a8b2b869 100644
--- a/src/components/views/dialogs/BugReportDialog.js
+++ b/src/components/views/dialogs/BugReportDialog.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
+Copyright 2017 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -41,7 +41,7 @@ export default class BugReportDialog extends React.Component {
         const userText = this.state.text;
         if (!sendLogs && userText.trim().length === 0) {
             this.setState({
-                err: "Please describe the bug and/or send logs."
+                err: "Please describe the bug and/or send logs.",
             });
             return;
         }
@@ -85,7 +85,8 @@ export default class BugReportDialog extends React.Component {
                     Report a bug
                 </div>
                 <div className="mx_Dialog_content">
-                    <p>Please describe the bug. What did you do? What did you expect to happen?
+                    <p>Please describe the bug. What did you do?
+                    What did you expect to happen?
                     What actually happened?</p>
                     <textarea
                         className="mx_BugReportDialog_input"
@@ -94,7 +95,8 @@ export default class BugReportDialog extends React.Component {
                         value={this.state.text}
                         placeholder="Describe your problem here."
                     />
-                    <p>In order to diagnose problems, logs from this client will be sent with this bug report.
+                    <p>In order to diagnose problems, logs from this client will be sent with
+                    this bug report.
                     If you would prefer to only send the text above, please untick:</p>
                     <input type="checkbox" checked={this.state.sendLogs}
                         onChange={this._onSendLogsChange} id="mx_BugReportDialog_logs"/>

From 7c66d1c8673f0a67282d2cfeeb9e98b94b05af4d Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 24 Jan 2017 16:01:39 +0000
Subject: [PATCH 228/289] Sync typing indication with avatar typing indication

Follow the same rules for displaying "is typing" as with the typing avatars.
---
 src/WhoIsTyping.js                         | 19 ++++++++++++-------
 src/components/structures/RoomStatusBar.js |  8 ++++++--
 src/components/structures/RoomView.js      |  1 +
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/WhoIsTyping.js b/src/WhoIsTyping.js
index 8c3838d615..f8e3f1c7fd 100644
--- a/src/WhoIsTyping.js
+++ b/src/WhoIsTyping.js
@@ -32,17 +32,22 @@ module.exports = {
         return whoIsTyping;
     },
 
-    whoIsTypingString: function(room) {
-        var whoIsTyping = this.usersTypingApartFromMe(room);
+    whoIsTypingString: function(room, limit) {
+        const whoIsTyping = this.usersTypingApartFromMe(room);
+        const othersCount = limit === undefined ? 0 : Math.max(whoIsTyping.length - limit, 0);
         if (whoIsTyping.length == 0) {
-            return null;
+            return '';
         } else if (whoIsTyping.length == 1) {
             return whoIsTyping[0].name + ' is typing';
+        }
+        const names = whoIsTyping.map(function(m) {
+            return m.name;
+        });
+        if (othersCount) {
+            const other = ' other' + (othersCount > 1 ? 's' : '');
+            return names.slice(0, limit).join(', ') + ' and ' + othersCount + other + ' are typing';
         } else {
-            var names = whoIsTyping.map(function(m) {
-                return m.name;
-            });
-            var lastPerson = names.shift();
+            const lastPerson = names.pop();
             return names.join(', ') + ' and ' + lastPerson + ' are typing';
         }
     }
diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js
index c80c4db7cc..a691196219 100644
--- a/src/components/structures/RoomStatusBar.js
+++ b/src/components/structures/RoomStatusBar.js
@@ -53,6 +53,10 @@ module.exports = React.createClass({
         // more interesting)
         hasActiveCall: React.PropTypes.bool,
 
+        // Number of names to display in typing indication. E.g. set to 3, will
+        // result in "X, Y, Z and 100 others are typing."
+        whoIsTypingLimit: React.PropTypes.number,
+
         // callback for when the user clicks on the 'resend all' button in the
         // 'unsent messages' bar
         onResendAllClick: React.PropTypes.func,
@@ -80,7 +84,7 @@ module.exports = React.createClass({
     getInitialState: function() {
         return {
             syncState: MatrixClientPeg.get().getSyncState(),
-            whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room),
+            whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room, this.props.whoIsTypingLimit),
         };
     },
 
@@ -127,7 +131,7 @@ module.exports = React.createClass({
 
     onRoomMemberTyping: function(ev, member) {
         this.setState({
-            whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room),
+            whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room, this.props.whoIsTypingLimit),
         });
     },
 
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 8753540e48..b7f05de339 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1531,6 +1531,7 @@ module.exports = React.createClass({
                 onResize={this.onChildResize}
                 onVisible={this.onStatusBarVisible}
                 onHidden={this.onStatusBarHidden}
+                whoIsTypingLimit={2}
             />;
         }
 

From 9a360a48d21a08df3ee5bea3752a2ba2933d3834 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 24 Jan 2017 16:04:37 +0000
Subject: [PATCH 229/289] Use the same property to limit avatars

---
 src/components/structures/RoomStatusBar.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js
index a691196219..59ff3c8f23 100644
--- a/src/components/structures/RoomStatusBar.js
+++ b/src/components/structures/RoomStatusBar.js
@@ -21,8 +21,6 @@ var WhoIsTyping = require("../../WhoIsTyping");
 var MatrixClientPeg = require("../../MatrixClientPeg");
 const MemberAvatar = require("../views/avatars/MemberAvatar");
 
-const TYPING_AVATARS_LIMIT = 2;
-
 const HIDE_DEBOUNCE_MS = 10000;
 const STATUS_BAR_HIDDEN = 0;
 const STATUS_BAR_EXPANDED = 1;
@@ -198,7 +196,7 @@ module.exports = React.createClass({
         if (wantPlaceholder) {
             return (
                 <div className="mx_RoomStatusBar_typingIndicatorAvatars">
-                    {this._renderTypingIndicatorAvatars(TYPING_AVATARS_LIMIT)}
+                    {this._renderTypingIndicatorAvatars(this.props.whoIsTypingLimit)}
                 </div>
             );
         }

From 97387db0148d01d1ad171907721853a51d64df80 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Tue, 24 Jan 2017 16:40:26 +0000
Subject: [PATCH 230/289] Reduce log spam: Revert
 a16aeeef2a0f16efedf7e6616cdf3c2c8752a077

As per #riot-dev, this is no longer required.
---
 src/components/structures/MatrixChat.js | 6 ++----
 src/dispatcher.js                       | 1 -
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 20d59e22ec..cb61041d48 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -259,8 +259,6 @@ module.exports = React.createClass({
     },
 
     onAction: function(payload) {
-        console.log("onAction: "+payload.action);
-
         var roomIndexDelta = 1;
 
         var self = this;
@@ -1008,8 +1006,8 @@ module.exports = React.createClass({
         var ForgotPassword = sdk.getComponent('structures.login.ForgotPassword');
         var LoggedInView = sdk.getComponent('structures.LoggedInView');
 
-        console.log("rendering; loading="+this.state.loading+"; screen="+this.state.screen +
-                    "; logged_in="+this.state.logged_in+"; ready="+this.state.ready);
+        // console.log("rendering; loading="+this.state.loading+"; screen="+this.state.screen +
+        //             "; logged_in="+this.state.logged_in+"; ready="+this.state.ready);
 
         if (this.state.loading) {
             var Spinner = sdk.getComponent('elements.Spinner');
diff --git a/src/dispatcher.js b/src/dispatcher.js
index 11c79f58ee..9864cb3807 100644
--- a/src/dispatcher.js
+++ b/src/dispatcher.js
@@ -28,7 +28,6 @@ class MatrixDispatcher extends flux.Dispatcher {
      *        for.
      */
     dispatch(payload, sync) {
-        console.log("Dispatch: "+payload.action);
         if (sync) {
             super.dispatch(payload);
         } else {

From 4186a769ca46956c7dae96d2324fb66002ce73e8 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 24 Jan 2017 17:16:26 +0000
Subject: [PATCH 231/289] Default prop for whoIsTypingLimit

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

diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js
index 59ff3c8f23..212d0d5ee6 100644
--- a/src/components/structures/RoomStatusBar.js
+++ b/src/components/structures/RoomStatusBar.js
@@ -79,6 +79,12 @@ module.exports = React.createClass({
         onVisible: React.PropTypes.func,
     },
 
+    getDefaultProps: function() {
+        return {
+            whoIsTypingLimit: 2,
+        };
+    },
+
     getInitialState: function() {
         return {
             syncState: MatrixClientPeg.get().getSyncState(),

From a92fff9da7357df35415bfd7cc6bbabdde88396c Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 24 Jan 2017 17:18:56 +0000
Subject: [PATCH 232/289] Fix linting warnings

---
 src/WhoIsTyping.js                         |  6 ++++--
 src/components/structures/RoomStatusBar.js | 10 ++++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/WhoIsTyping.js b/src/WhoIsTyping.js
index f8e3f1c7fd..96e76d618b 100644
--- a/src/WhoIsTyping.js
+++ b/src/WhoIsTyping.js
@@ -34,7 +34,8 @@ module.exports = {
 
     whoIsTypingString: function(room, limit) {
         const whoIsTyping = this.usersTypingApartFromMe(room);
-        const othersCount = limit === undefined ? 0 : Math.max(whoIsTyping.length - limit, 0);
+        const othersCount = limit === undefined ?
+            0 : Math.max(whoIsTyping.length - limit, 0);
         if (whoIsTyping.length == 0) {
             return '';
         } else if (whoIsTyping.length == 1) {
@@ -45,7 +46,8 @@ module.exports = {
         });
         if (othersCount) {
             const other = ' other' + (othersCount > 1 ? 's' : '');
-            return names.slice(0, limit).join(', ') + ' and ' + othersCount + other + ' are typing';
+            return names.slice(0, limit).join(', ') + ' and ' +
+                othersCount + other + ' are typing';
         } else {
             const lastPerson = names.pop();
             return names.join(', ') + ' and ' + lastPerson + ' are typing';
diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js
index 212d0d5ee6..3ba73bb181 100644
--- a/src/components/structures/RoomStatusBar.js
+++ b/src/components/structures/RoomStatusBar.js
@@ -88,7 +88,10 @@ module.exports = React.createClass({
     getInitialState: function() {
         return {
             syncState: MatrixClientPeg.get().getSyncState(),
-            whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room, this.props.whoIsTypingLimit),
+            whoisTypingString: WhoIsTyping.whoIsTypingString(
+                this.props.room,
+                this.props.whoIsTypingLimit
+            ),
         };
     },
 
@@ -135,7 +138,10 @@ module.exports = React.createClass({
 
     onRoomMemberTyping: function(ev, member) {
         this.setState({
-            whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room, this.props.whoIsTypingLimit),
+            whoisTypingString: WhoIsTyping.whoIsTypingString(
+                this.props.room,
+                this.props.whoIsTypingLimit
+            ),
         });
     },
 

From 56cf7a6af7a9a86ae0cabd535e865ee672e536d7 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Tue, 24 Jan 2017 15:54:05 +0000
Subject: [PATCH 233/289] Create a common BaseDialog

I'm fed up with copying the boilerplate for modal dialogs the whole time.
---
 src/KeyCode.js                                |  1 +
 src/component-index.js                        |  2 +
 src/components/views/dialogs/BaseDialog.js    | 72 +++++++++++++++++++
 src/components/views/dialogs/ErrorDialog.js   | 24 +++----
 .../views/dialogs/InteractiveAuthDialog.js    | 29 +++-----
 .../views/dialogs/NeedToRegisterDialog.js     | 18 ++---
 .../views/dialogs/QuestionDialog.js           | 31 +++-----
 .../views/dialogs/SetDisplayNameDialog.js     | 21 +++---
 .../views/dialogs/TextInputDialog.js          | 35 ++++-----
 9 files changed, 136 insertions(+), 97 deletions(-)
 create mode 100644 src/components/views/dialogs/BaseDialog.js

diff --git a/src/KeyCode.js b/src/KeyCode.js
index bbe1ddcefa..c9cac01239 100644
--- a/src/KeyCode.js
+++ b/src/KeyCode.js
@@ -20,6 +20,7 @@ module.exports = {
     TAB: 9,
     ENTER: 13,
     SHIFT: 16,
+    ESCAPE: 27,
     PAGE_UP: 33,
     PAGE_DOWN: 34,
     END: 35,
diff --git a/src/component-index.js b/src/component-index.js
index e83de8739d..bdce944e28 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -71,6 +71,8 @@ import views$create_room$Presets from './components/views/create_room/Presets';
 views$create_room$Presets && (module.exports.components['views.create_room.Presets'] = views$create_room$Presets);
 import views$create_room$RoomAlias from './components/views/create_room/RoomAlias';
 views$create_room$RoomAlias && (module.exports.components['views.create_room.RoomAlias'] = views$create_room$RoomAlias);
+import views$dialogs$BaseDialog from './components/views/dialogs/BaseDialog';
+views$dialogs$BaseDialog && (module.exports.components['views.dialogs.BaseDialog'] = views$dialogs$BaseDialog);
 import views$dialogs$ChatInviteDialog from './components/views/dialogs/ChatInviteDialog';
 views$dialogs$ChatInviteDialog && (module.exports.components['views.dialogs.ChatInviteDialog'] = views$dialogs$ChatInviteDialog);
 import views$dialogs$DeactivateAccountDialog from './components/views/dialogs/DeactivateAccountDialog';
diff --git a/src/components/views/dialogs/BaseDialog.js b/src/components/views/dialogs/BaseDialog.js
new file mode 100644
index 0000000000..2b3980c536
--- /dev/null
+++ b/src/components/views/dialogs/BaseDialog.js
@@ -0,0 +1,72 @@
+/*
+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.
+*/
+
+import React from 'react';
+
+import * as KeyCode from '../../../KeyCode';
+
+/**
+ * Basic container for modal dialogs.
+ *
+ * Includes a div for the title, and a keypress handler which cancels the
+ * dialog on escape.
+ */
+export default React.createClass({
+    displayName: 'BaseDialog',
+
+    propTypes: {
+        // onFinished callback to call when Escape is pressed
+        onFinished: React.PropTypes.func.isRequired,
+
+        // callback to call when Enter is pressed
+        onEnterPressed: React.PropTypes.func,
+
+        // CSS class to apply to dialog div
+        className: React.PropTypes.string,
+
+        // Title for the dialog.
+        // (could probably actually be something more complicated than a string if desired)
+        title: React.PropTypes.string.isRequired,
+
+        // children should be the content of the dialog
+        children: React.PropTypes.node,
+    },
+
+    _onKeyDown: function(e) {
+        if (e.keyCode === KeyCode.ESCAPE) {
+            e.stopPropagation();
+            e.preventDefault();
+            this.props.onFinished();
+        } else if (e.keyCode === KeyCode.ENTER) {
+            if (this.props.onEnterPressed) {
+                e.stopPropagation();
+                e.preventDefault();
+                this.props.onEnterPressed(e);
+            }
+        }
+    },
+
+    render: function() {
+        return (
+            <div onKeyDown={this._onKeyDown} className={this.props.className}>
+                <div className='mx_Dialog_title'>
+                    { this.props.title }
+                </div>
+                { this.props.children }
+            </div>
+        );
+    },
+});
diff --git a/src/components/views/dialogs/ErrorDialog.js b/src/components/views/dialogs/ErrorDialog.js
index ed48f10fd7..937595dfa8 100644
--- a/src/components/views/dialogs/ErrorDialog.js
+++ b/src/components/views/dialogs/ErrorDialog.js
@@ -25,9 +25,10 @@ limitations under the License.
  * });
  */
 
-var React = require("react");
+import React from 'react';
+import sdk from '../../../index';
 
-module.exports = React.createClass({
+export default React.createClass({
     displayName: 'ErrorDialog',
     propTypes: {
         title: React.PropTypes.string,
@@ -49,20 +50,11 @@ module.exports = React.createClass({
         };
     },
 
-    onKeyDown: function(e) {
-        if (e.keyCode === 27) { // escape
-            e.stopPropagation();
-            e.preventDefault();
-            this.props.onFinished(false);
-        }
-    },
-
     render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
-            <div className="mx_ErrorDialog" onKeyDown={ this.onKeyDown }>
-                <div className="mx_Dialog_title">
-                    {this.props.title}
-                </div>
+            <BaseDialog className="mx_ErrorDialog" onFinished={this.props.onFinished}
+                    title={this.props.title}>
                 <div className="mx_Dialog_content">
                     {this.props.description}
                 </div>
@@ -71,7 +63,7 @@ module.exports = React.createClass({
                         {this.props.button}
                     </button>
                 </div>
-            </div>
+            </BaseDialog>
         );
-    }
+    },
 });
diff --git a/src/components/views/dialogs/InteractiveAuthDialog.js b/src/components/views/dialogs/InteractiveAuthDialog.js
index 301bba0486..a4abbb17d9 100644
--- a/src/components/views/dialogs/InteractiveAuthDialog.js
+++ b/src/components/views/dialogs/InteractiveAuthDialog.js
@@ -111,20 +111,9 @@ export default React.createClass({
         });
     },
 
-    _onKeyDown: function(e) {
-        if (e.keyCode === 27) { // escape
-            e.stopPropagation();
-            e.preventDefault();
-            if (!this.state.busy) {
-                this._onCancel();
-            }
-        }
-        else if (e.keyCode === 13) { // enter
-            e.stopPropagation();
-            e.preventDefault();
-            if (this.state.submitButtonEnabled && !this.state.busy) {
-                this._onSubmit();
-            }
+    _onEnterPressed: function(e) {
+        if (this.state.submitButtonEnabled && !this.state.busy) {
+            this._onSubmit();
         }
     },
 
@@ -171,6 +160,7 @@ export default React.createClass({
 
     render: function() {
         const Loader = sdk.getComponent("elements.Spinner");
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
         let error = null;
         if (this.state.errorText) {
@@ -200,10 +190,11 @@ export default React.createClass({
         );
 
         return (
-            <div className="mx_InteractiveAuthDialog" onKeyDown={this._onKeyDown}>
-                <div className="mx_Dialog_title">
-                    {this.props.title}
-                </div>
+            <BaseDialog className="mx_InteractiveAuthDialog"
+                onEnterPressed={this._onEnterPressed}
+                onFinished={this.props.onFinished}
+                title={this.props.title}
+            >
                 <div className="mx_Dialog_content">
                     <p>This operation requires additional authentication.</p>
                     {this._renderCurrentStage()}
@@ -213,7 +204,7 @@ export default React.createClass({
                     {submitButton}
                     {cancelButton}
                 </div>
-            </div>
+            </BaseDialog>
         );
     },
 });
diff --git a/src/components/views/dialogs/NeedToRegisterDialog.js b/src/components/views/dialogs/NeedToRegisterDialog.js
index 0080e0c643..f4df5913d5 100644
--- a/src/components/views/dialogs/NeedToRegisterDialog.js
+++ b/src/components/views/dialogs/NeedToRegisterDialog.js
@@ -23,8 +23,9 @@ limitations under the License.
  * });
  */
 
-var React = require("react");
-var dis = require("../../../dispatcher");
+import React from 'react';
+import dis from '../../../dispatcher';
+import sdk from '../../../index';
 
 module.exports = React.createClass({
     displayName: 'NeedToRegisterDialog',
@@ -54,11 +55,12 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
-            <div className="mx_NeedToRegisterDialog">
-                <div className="mx_Dialog_title">
-                    {this.props.title}
-                </div>
+            <BaseDialog className="mx_NeedToRegisterDialog"
+                onFinished={this.props.onFinished}
+                title={this.props.title}
+            >
                 <div className="mx_Dialog_content">
                     {this.props.description}
                 </div>
@@ -70,7 +72,7 @@ module.exports = React.createClass({
                         Register
                     </button>
                 </div>
-            </div>
+            </BaseDialog>
         );
-    }
+    },
 });
diff --git a/src/components/views/dialogs/QuestionDialog.js b/src/components/views/dialogs/QuestionDialog.js
index 1cd4d047fd..3f7f237c30 100644
--- a/src/components/views/dialogs/QuestionDialog.js
+++ b/src/components/views/dialogs/QuestionDialog.js
@@ -14,9 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var React = require("react");
+import React from 'react';
+import sdk from '../../../index';
 
-module.exports = React.createClass({
+export default React.createClass({
     displayName: 'QuestionDialog',
     propTypes: {
         title: React.PropTypes.string,
@@ -46,25 +47,13 @@ module.exports = React.createClass({
         this.props.onFinished(false);
     },
 
-    onKeyDown: function(e) {
-        if (e.keyCode === 27) { // escape
-            e.stopPropagation();
-            e.preventDefault();
-            this.props.onFinished(false);
-        }
-        else if (e.keyCode === 13) { // enter
-            e.stopPropagation();
-            e.preventDefault();
-            this.props.onFinished(true);
-        }
-    },
-
     render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
-            <div className="mx_QuestionDialog" onKeyDown={ this.onKeyDown }>
-                <div className="mx_Dialog_title">
-                    {this.props.title}
-                </div>
+            <BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished}
+                onEnterPressed={ this.onOk }
+                title={this.props.title}
+            >
                 <div className="mx_Dialog_content">
                     {this.props.description}
                 </div>
@@ -77,7 +66,7 @@ module.exports = React.createClass({
                         Cancel
                     </button>
                 </div>
-            </div>
+            </BaseDialog>
         );
-    }
+    },
 });
diff --git a/src/components/views/dialogs/SetDisplayNameDialog.js b/src/components/views/dialogs/SetDisplayNameDialog.js
index c1041cc218..9e44671e4a 100644
--- a/src/components/views/dialogs/SetDisplayNameDialog.js
+++ b/src/components/views/dialogs/SetDisplayNameDialog.js
@@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var React = require("react");
-var sdk = require("../../../index.js");
-var MatrixClientPeg = require("../../../MatrixClientPeg");
+import React from 'react';
+import sdk from '../../../index';
+import MatrixClientPeg from '../../../MatrixClientPeg';
 
-module.exports = React.createClass({
+export default React.createClass({
     displayName: 'SetDisplayNameDialog',
     propTypes: {
         onFinished: React.PropTypes.func.isRequired,
@@ -59,11 +59,12 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
-            <div className="mx_SetDisplayNameDialog">
-                <div className="mx_Dialog_title">
-                    Set a Display Name
-                </div>
+            <BaseDialog className="mx_SetDisplayNameDialog"
+                onFinished={this.props.onFinished}
+                title="Set a Display Name"
+            >
                 <div className="mx_Dialog_content">
                     Your display name is how you'll appear to others when you speak in rooms.<br/>
                     What would you like it to be?
@@ -79,7 +80,7 @@ module.exports = React.createClass({
                         <input className="mx_Dialog_primary" type="submit" value="Set" />
                     </div>
                 </form>
-            </div>
+            </BaseDialog>
         );
-    }
+    },
 });
diff --git a/src/components/views/dialogs/TextInputDialog.js b/src/components/views/dialogs/TextInputDialog.js
index 6245b5786f..6e40efffd8 100644
--- a/src/components/views/dialogs/TextInputDialog.js
+++ b/src/components/views/dialogs/TextInputDialog.js
@@ -14,9 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var React = require("react");
+import React from 'react';
+import sdk from '../../../index';
 
-module.exports = React.createClass({
+export default React.createClass({
     displayName: 'TextInputDialog',
     propTypes: {
         title: React.PropTypes.string,
@@ -27,7 +28,7 @@ module.exports = React.createClass({
         value: React.PropTypes.string,
         button: React.PropTypes.string,
         focus: React.PropTypes.bool,
-        onFinished: React.PropTypes.func.isRequired
+        onFinished: React.PropTypes.func.isRequired,
     },
 
     getDefaultProps: function() {
@@ -36,7 +37,7 @@ module.exports = React.createClass({
             value: "",
             description: "",
             button: "OK",
-            focus: true
+            focus: true,
         };
     },
 
@@ -55,25 +56,13 @@ module.exports = React.createClass({
         this.props.onFinished(false);
     },
 
-    onKeyDown: function(e) {
-        if (e.keyCode === 27) { // escape
-            e.stopPropagation();
-            e.preventDefault();
-            this.props.onFinished(false);
-        }
-        else if (e.keyCode === 13) { // enter
-            e.stopPropagation();
-            e.preventDefault();
-            this.props.onFinished(true, this.refs.textinput.value);
-        }
-    },
-
     render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
-            <div className="mx_TextInputDialog">
-                <div className="mx_Dialog_title">
-                    {this.props.title}
-                </div>
+            <BaseDialog className="mx_TextInputDialog" onFinished={this.props.onFinished}
+                onEnterPressed={this.onOk}
+                title={this.props.title}
+            >
                 <div className="mx_Dialog_content">
                     <div className="mx_TextInputDialog_label">
                         <label htmlFor="textinput"> {this.props.description} </label>
@@ -90,7 +79,7 @@ module.exports = React.createClass({
                         {this.props.button}
                     </button>
                 </div>
-            </div>
+            </BaseDialog>
         );
-    }
+    },
 });

From 6c263c1c894daed6e8d3f5dc8a04f4484706112d Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 24 Jan 2017 18:23:34 +0000
Subject: [PATCH 234/289] Change what AddressTile takes to be Objects

Rather than just passing in a list of strings. This paves the way
for passing in display names & avatars of looked-up threepids.
---
 .../views/dialogs/ChatInviteDialog.js         | 74 ++++++++++-----
 .../views/elements/AddressSelector.js         | 13 +--
 src/components/views/elements/AddressTile.js  | 91 +++++++++++--------
 3 files changed, 109 insertions(+), 69 deletions(-)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index f8d93a3080..60aa6b0c5b 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -164,7 +164,13 @@ module.exports = React.createClass({
             queryList = this._userList.filter((user) => {
                 return this._matches(query, user);
             }).map((user) => {
-                return user.userId;
+                return {
+                    addressType: 'mx',
+                    address: user.userId,
+                    displayName: user.displayName,
+                    avatarMxc: user.avatarUrl,
+                    isKnown: true,
+                }
             });
 
             // If the query isn't a user we know about, but is a
@@ -172,7 +178,11 @@ module.exports = React.createClass({
             if (queryList.length == 0) {
                 const addrType = Invite.getAddressType(query);
                 if (addrType !== null) {
-                    queryList.push(query);
+                    queryList.push({
+                        addressType: addrType,
+                        address: query,
+                        isKnown: false,
+                    });
                 }
             }
         }
@@ -204,7 +214,7 @@ module.exports = React.createClass({
 
     onSelected: function(index) {
         var inviteList = this.state.inviteList.slice();
-        inviteList.push(this.state.queryList[index].userId);
+        inviteList.push(this.state.queryList[index]);
         this.setState({
             inviteList: inviteList,
             queryList: [],
@@ -239,10 +249,14 @@ module.exports = React.createClass({
             return;
         }
 
+        const addrTexts = addrs.map((addr) => {
+            return addr.address;
+        });
+
         if (this.props.roomId) {
             // Invite new user to a room
             var self = this;
-            Invite.inviteMultipleToRoom(this.props.roomId, addrs)
+            Invite.inviteMultipleToRoom(this.props.roomId, addrTexts)
             .then(function(addrs) {
                 var room = MatrixClientPeg.get().getRoom(self.props.roomId);
                 return self._showAnyInviteErrors(addrs, room);
@@ -257,9 +271,9 @@ module.exports = React.createClass({
                 return null;
             })
             .done();
-        } else if (this._isDmChat(addrs)) {
+        } else if (this._isDmChat(addrTexts)) {
             // Start the DM chat
-            createRoom({dmUserId: addrs[0]})
+            createRoom({dmUserId: addrTexts[0]})
             .catch(function(err) {
                 console.error(err.stack);
                 var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
@@ -276,7 +290,7 @@ module.exports = React.createClass({
             var room;
             createRoom().then(function(roomId) {
                 room = MatrixClientPeg.get().getRoom(roomId);
-                return Invite.inviteMultipleToRoom(roomId, addrs);
+                return Invite.inviteMultipleToRoom(roomId, addrTexts);
             })
             .then(function(addrs) {
                 return self._showAnyInviteErrors(addrs, room);
@@ -294,7 +308,7 @@ module.exports = React.createClass({
         }
 
         // Close - this will happen before the above, as that is async
-        this.props.onFinished(true, addrs);
+        this.props.onFinished(true, addrTexts);
     },
 
     _updateUserList: new rate_limited_func(function() {
@@ -345,7 +359,10 @@ module.exports = React.createClass({
 
     _isOnInviteList: function(uid) {
         for (let i = 0; i < this.state.inviteList.length; i++) {
-            if (this.state.inviteList[i].toLowerCase() === uid) {
+            if (
+                this.state.inviteList[i].addressType == 'mx' &&
+                this.state.inviteList[i].address.toLowerCase() === uid
+            ) {
                 return true;
             }
         }
@@ -380,24 +397,35 @@ module.exports = React.createClass({
     },
 
     _addInputToList: function() {
-        const addrType = Invite.getAddressType(this.refs.textinput.value);
-        if (addrType !== null) {
-            const inviteList = this.state.inviteList.slice();
-            inviteList.push(this.refs.textinput.value.trim());
-            this.setState({
-                inviteList: inviteList,
-                queryList: [],
-            });
-            return inviteList;
-        } else {
-            this.setState({ error: true });
-            return null;
+        const addressText = this.refs.textinput.value.trim();
+        const addrType = Invite.getAddressType(addressText);
+        const addrObj = {
+            addressType: addrType,
+            address: addressText,
+            isKnown: false,
+        };
+        if (addrType == null) {
+        } else if (addrType == 'mx') {
+            const user = MatrixClientPeg.get().getUser(addrObj.address);
+            if (user) {
+                addrObj.displayName = user.displayName;
+                addrObj.avatarMxc = user.avatarUrl;
+                addrObj.isKnown = true;
+            }
         }
+
+        const inviteList = this.state.inviteList.slice();
+        inviteList.push(addrObj);
+        this.setState({
+            inviteList: inviteList,
+            queryList: [],
+        });
+        return inviteList;
     },
 
     render: function() {
-        var TintableSvg = sdk.getComponent("elements.TintableSvg");
-        var AddressSelector = sdk.getComponent("elements.AddressSelector");
+        const TintableSvg = sdk.getComponent("elements.TintableSvg");
+        const AddressSelector = sdk.getComponent("elements.AddressSelector");
         this.scrollElement = null;
 
         var query = [];
diff --git a/src/components/views/elements/AddressSelector.js b/src/components/views/elements/AddressSelector.js
index 361705c6d5..fe6346b36a 100644
--- a/src/components/views/elements/AddressSelector.js
+++ b/src/components/views/elements/AddressSelector.js
@@ -16,18 +16,19 @@ limitations under the License.
 
 'use strict';
 
-var React = require("react");
-var sdk = require("../../../index");
-var classNames = require('classnames');
+const React = require("react");
+const sdk = require("../../../index");
+const classNames = require('classnames');
+const InviteAddressType = require("./AddressTile");
 
-module.exports = React.createClass({
+export default React.createClass({
     displayName: 'AddressSelector',
 
     propTypes: {
         onSelected: React.PropTypes.func.isRequired,
 
-        // List of strings: the addresses to display
-        addressList: React.PropTypes.array.isRequired,
+        // List of the addresses to display
+        addressList: React.PropTypes.arrayOf(InviteAddressType).isRequired,
         truncateAt: React.PropTypes.number.isRequired,
         selected: React.PropTypes.number,
 
diff --git a/src/components/views/elements/AddressTile.js b/src/components/views/elements/AddressTile.js
index 5f282afe93..01c1ed3255 100644
--- a/src/components/views/elements/AddressTile.js
+++ b/src/components/views/elements/AddressTile.js
@@ -23,16 +23,33 @@ var Invite = require("../../../Invite");
 var MatrixClientPeg = require("../../../MatrixClientPeg");
 var Avatar = require('../../../Avatar');
 
-module.exports = React.createClass({
+// React PropType definition for an object describing
+// an address that can be invited to a room (which
+// could be a third party identifier or a matrix ID)
+// along with some additional information about the
+// address / target.
+export const InviteAddressType = React.PropTypes.shape({
+    addressType: React.PropTypes.oneOf([
+        'mx', 'email'
+    ]).isRequired,
+    address: React.PropTypes.string.isRequired,
+    displayName: React.PropTypes.string,
+    avatarMxc: React.PropTypes.string,
+    // true if the address is known to be a valid address (eg. is a real
+    // user we've seen) or false otherwise (eg. is just an address the
+    // user has entered)
+    isKnown: React.PropTypes.bool,
+});
+
+
+export default React.createClass({
     displayName: 'AddressTile',
 
     propTypes: {
-        address: React.PropTypes.string.isRequired,
+        address: InviteAddressType.isRequired,
         canDismiss: React.PropTypes.bool,
         onDismissed: React.PropTypes.func,
         justified: React.PropTypes.bool,
-        networkName: React.PropTypes.string,
-        networkUrl: React.PropTypes.string,
     },
 
     getDefaultProps: function() {
@@ -40,35 +57,26 @@ module.exports = React.createClass({
             canDismiss: false,
             onDismissed: function() {}, // NOP
             justified: false,
-            networkName: "",
-            networkUrl: "",
         };
     },
 
     render: function() {
-        var userId, name, imgUrl, email;
-        var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
-        var TintableSvg = sdk.getComponent("elements.TintableSvg");
+        const address = this.props.address;
+        const name = address.displayName || address.address;
 
-        // Check if the addr is a valid type
-        var addrType = Invite.getAddressType(this.props.address);
-        if (addrType === "mx") {
-            let user = MatrixClientPeg.get().getUser(this.props.address);
-            if (user) {
-                userId = user.userId;
-                name = user.rawDisplayName || userId;
-                imgUrl = Avatar.avatarUrlForUser(user, 25, 25, "crop");
-            } else {
-                name=this.props.address;
-                imgUrl = "img/icon-mx-user.svg";
-            }
-        } else if (addrType === "email") {
-            email = this.props.address;
-            name="email";
-            imgUrl = "img/icon-email-user.svg";
+        let imgUrl;
+        if (address.avatarMxc) {
+            imgUrl = MatrixClientPeg.get().mxcUrlToHttp(
+                address.avatarMxc, 25, 25, 'crop'
+            );
+        }
+
+        if (address.addressType === "mx") {
+            if (!imgUrl) imgUrl = 'img/icon-mx-user.svg';
+        } else if (address.addressType === 'email') {
+            if (!imgUrl) imgUrl = 'img/icon-email-user.svg';
         } else {
-            name="Unknown";
-            imgUrl = "img/avatar-error.svg";
+            if (!imgUrl) imgUrl = "img/avatar-error.svg";
         }
 
         // Removing networks for now as they're not really supported
@@ -83,15 +91,18 @@ module.exports = React.createClass({
         }
         */
 
-        var info;
-        var error = false;
-        if (addrType === "mx" && userId) {
-            var nameClasses = classNames({
+        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+        const TintableSvg = sdk.getComponent("elements.TintableSvg");
+
+        let info;
+        let error = false;
+        if (address.addressType === "mx" && address.isKnown) {
+            const nameClasses = classNames({
                 "mx_AddressTile_name": true,
                 "mx_AddressTile_justified": this.props.justified,
             });
 
-            var idClasses = classNames({
+            const idClasses = classNames({
                 "mx_AddressTile_id": true,
                 "mx_AddressTile_justified": this.props.justified,
             });
@@ -99,26 +110,26 @@ module.exports = React.createClass({
             info = (
                 <div className="mx_AddressTile_mx">
                     <div className={nameClasses}>{ name }</div>
-                    <div className={idClasses}>{ userId }</div>
+                    <div className={idClasses}>{ address.address }</div>
                 </div>
             );
-        } else if (addrType === "mx") {
-            var unknownMxClasses = classNames({
+        } else if (address.addressType === "mx") {
+            const unknownMxClasses = classNames({
                 "mx_AddressTile_unknownMx": true,
                 "mx_AddressTile_justified": this.props.justified,
             });
 
             info = (
-                <div className={unknownMxClasses}>{ this.props.address }</div>
+                <div className={unknownMxClasses}>{ this.props.address.address }</div>
             );
-        } else if (email) {
+        } else if (address.addressType === "email") {
             var emailClasses = classNames({
                 "mx_AddressTile_email": true,
                 "mx_AddressTile_justified": this.props.justified,
             });
 
             info = (
-                <div className={emailClasses}>{ email }</div>
+                <div className={emailClasses}>{ address.address }</div>
             );
         } else {
             error = true;
@@ -132,12 +143,12 @@ module.exports = React.createClass({
             );
         }
 
-        var classes = classNames({
+        const classes = classNames({
             "mx_AddressTile": true,
             "mx_AddressTile_error": error,
         });
 
-        var dismiss;
+        let dismiss;
         if (this.props.canDismiss) {
             dismiss = (
                 <div className="mx_AddressTile_dismiss" onClick={this.props.onDismissed} >

From 72492fd909bca2691fe7f21763aab64c571982f5 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Tue, 24 Jan 2017 20:55:10 +0000
Subject: [PATCH 235/289] Fix broken merge

I messed up the merge in 6dd46d5.
---
 src/components/views/rooms/RoomHeader.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 0593ba16e9..812dd8c79c 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -302,11 +302,7 @@ module.exports = React.createClass({
             rightPanel_buttons =
                 <AccessibleButton className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title="<">
                     <TintableSvg src="img/minimise.svg" width="10" height="16"/>
-<<<<<<< HEAD
-                </AccessibleButton>
-=======
-                </div>;
->>>>>>> origin/develop
+                </AccessibleButton>;
         }
 
         var right_row;

From 86276450f64c41ffd8d71bc14a758be0c4b19e37 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Tue, 24 Jan 2017 21:27:57 +0000
Subject: [PATCH 236/289] Add AccessibleButton to component-index

---
 src/component-index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/component-index.js b/src/component-index.js
index e83de8739d..3b9cf0a80e 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -89,6 +89,8 @@ import views$dialogs$SetDisplayNameDialog from './components/views/dialogs/SetDi
 views$dialogs$SetDisplayNameDialog && (module.exports.components['views.dialogs.SetDisplayNameDialog'] = views$dialogs$SetDisplayNameDialog);
 import views$dialogs$TextInputDialog from './components/views/dialogs/TextInputDialog';
 views$dialogs$TextInputDialog && (module.exports.components['views.dialogs.TextInputDialog'] = views$dialogs$TextInputDialog);
+import views$elements$AccessibleButton from './components/views/elements/AccessibleButton';
+views$elements$AccessibleButton && (module.exports.components['views.elements.AccessibleButton'] = views$elements$AccessibleButton);
 import views$elements$AddressSelector from './components/views/elements/AddressSelector';
 views$elements$AddressSelector && (module.exports.components['views.elements.AddressSelector'] = views$elements$AddressSelector);
 import views$elements$AddressTile from './components/views/elements/AddressTile';

From 5b61d00533a1b73ad0e2f634a3a13bf98630d9a7 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 24 Jan 2017 22:36:55 +0100
Subject: [PATCH 237/289] warn users that changing/resetting password will nuke
 E2E keys

---
 .../structures/login/ForgotPassword.js        | 24 +++++++--
 .../views/settings/ChangePassword.js          | 53 ++++++++++++-------
 2 files changed, 55 insertions(+), 22 deletions(-)

diff --git a/src/components/structures/login/ForgotPassword.js b/src/components/structures/login/ForgotPassword.js
index 5037136b1d..2c10052b98 100644
--- a/src/components/structures/login/ForgotPassword.js
+++ b/src/components/structures/login/ForgotPassword.js
@@ -87,10 +87,26 @@ module.exports = React.createClass({
             this.showErrorDialog("New passwords must match each other.");
         }
         else {
-            this.submitPasswordReset(
-                this.state.enteredHomeserverUrl, this.state.enteredIdentityServerUrl,
-                this.state.email, this.state.password
-            );
+            var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+            Modal.createDialog(QuestionDialog, {
+                title: "Warning",
+                description:
+                    <div>
+                        Resetting password will currently reset any end-to-end encryption keys on all devices,
+                        making encrypted chat history unreadable.
+                        In future this <a href="https://github.com/vector-im/riot-web/issues/2671">may be improved</a>,
+                        but for now be warned.
+                    </div>,
+                button: "Continue",
+                onFinished: (confirmed) => {
+                    if (confirmed) {
+                        this.submitPasswordReset(
+                            this.state.enteredHomeserverUrl, this.state.enteredIdentityServerUrl,
+                            this.state.email, this.state.password
+                        );
+                    }
+                },
+            });
         }
     },
 
diff --git a/src/components/views/settings/ChangePassword.js b/src/components/views/settings/ChangePassword.js
index a011d5262e..8a3c46bcfd 100644
--- a/src/components/views/settings/ChangePassword.js
+++ b/src/components/views/settings/ChangePassword.js
@@ -18,6 +18,7 @@ limitations under the License.
 
 var React = require('react');
 var MatrixClientPeg = require("../../../MatrixClientPeg");
+var Modal = require("../../../Modal");
 var sdk = require("../../../index");
 
 module.exports = React.createClass({
@@ -65,26 +66,42 @@ module.exports = React.createClass({
     changePassword: function(old_password, new_password) {
         var cli = MatrixClientPeg.get();
 
-        var authDict = {
-            type: 'm.login.password',
-            user: cli.credentials.userId,
-            password: old_password
-        };
+        var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+        Modal.createDialog(QuestionDialog, {
+            title: "Warning",
+            description:
+                <div>
+                    Changing password will currently reset any end-to-end encryption keys on all devices,
+                    making encrypted chat history unreadable.
+                    This will be <a href="https://github.com/vector-im/riot-web/issues/2671">improved shortly</a>,
+                    but for now be warned.
+                </div>,
+            button: "Continue",
+            onFinished: (confirmed) => {
+                if (confirmed) {
+                    var authDict = {
+                        type: 'm.login.password',
+                        user: cli.credentials.userId,
+                        password: old_password
+                    };
 
-        this.setState({
-            phase: this.Phases.Uploading
+                    this.setState({
+                        phase: this.Phases.Uploading
+                    });
+
+                    var self = this;
+                    cli.setPassword(authDict, new_password).then(function() {
+                        self.props.onFinished();
+                    }, function(err) {
+                        self.props.onError(err);
+                    }).finally(function() {
+                        self.setState({
+                            phase: self.Phases.Edit
+                        });
+                    }).done();
+                }
+            },
         });
-
-        var self = this;
-        cli.setPassword(authDict, new_password).then(function() {
-            self.props.onFinished();
-        }, function(err) {
-            self.props.onError(err);
-        }).finally(function() {
-            self.setState({
-                phase: self.Phases.Edit
-            });
-        }).done();
     },
 
     onClickChange: function() {

From b148619c527b4ee416b6e886846841d692a816ca Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 24 Jan 2017 22:47:03 +0100
Subject: [PATCH 238/289] warn on logout too

---
 src/Lifecycle.js | 43 ++++++++++++++++++++++++++++++-------------
 1 file changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/Lifecycle.js b/src/Lifecycle.js
index 493bbf12aa..64d22bd04c 100644
--- a/src/Lifecycle.js
+++ b/src/Lifecycle.js
@@ -22,6 +22,7 @@ import Notifier from './Notifier';
 import UserActivity from './UserActivity';
 import Presence from './Presence';
 import dis from './dispatcher';
+import Modal from './Modal';
 import DMRoomMap from './utils/DMRoomMap';
 
 /**
@@ -289,19 +290,35 @@ export function logout() {
         return;
     }
 
-    return MatrixClientPeg.get().logout().then(onLoggedOut,
-        (err) => {
-            // Just throwing an error here is going to be very unhelpful
-            // if you're trying to log out because your server's down and
-            // you want to log into a different server, so just forget the
-            // access token. It's annoying that this will leave the access
-            // token still valid, but we should fix this by having access
-            // tokens expire (and if you really think you've been compromised,
-            // change your password).
-            console.log("Failed to call logout API: token will not be invalidated");
-            onLoggedOut();
-        }
-    );
+    var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+    Modal.createDialog(QuestionDialog, {
+        title: "Warning",
+        description:
+            <div>
+                For security, logging out will delete any end-to-end encryption keys from this browser,
+                making previous encrypted chat history unreadable if you log back in.
+                In future this <a href="https://github.com/vector-im/riot-web/issues/2108">will be improved</a>,
+                but for now be warned.
+            </div>,
+        button: "Continue",
+        onFinished: (confirmed) => {
+            if (confirmed) {
+                MatrixClientPeg.get().logout().then(onLoggedOut,
+                    (err) => {
+                        // Just throwing an error here is going to be very unhelpful
+                        // if you're trying to log out because your server's down and
+                        // you want to log into a different server, so just forget the
+                        // access token. It's annoying that this will leave the access
+                        // token still valid, but we should fix this by having access
+                        // tokens expire (and if you really think you've been compromised,
+                        // change your password).
+                        console.log("Failed to call logout API: token will not be invalidated");
+                        onLoggedOut();
+                    }
+                );
+            }
+        },
+    });
 }
 
 /**

From e23deac1bb52d644c5b40149943685b92c321d04 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Fri, 20 Jan 2017 15:12:50 +0000
Subject: [PATCH 239/289] Implement e2e export

---
 package.json                                  |   3 +-
 .../views/dialogs/ExportE2eKeysDialog.js      | 175 +++++++++++++-----
 src/components/structures/UserSettings.js     |  21 +++
 src/index.js                                  |  16 +-
 4 files changed, 156 insertions(+), 59 deletions(-)

diff --git a/package.json b/package.json
index 0a8c09f984..dabac0a060 100644
--- a/package.json
+++ b/package.json
@@ -47,10 +47,12 @@
     "browser-encrypt-attachment": "^0.3.0",
     "browser-request": "^0.3.3",
     "classnames": "^2.1.2",
+    "commonmark": "^0.27.0",
     "draft-js": "^0.8.1",
     "draft-js-export-html": "^0.5.0",
     "draft-js-export-markdown": "^0.2.0",
     "emojione": "2.2.3",
+    "file-saver": "^1.3.3",
     "filesize": "^3.1.2",
     "flux": "^2.0.3",
     "fuse.js": "^2.2.0",
@@ -59,7 +61,6 @@
     "isomorphic-fetch": "^2.2.1",
     "linkifyjs": "^2.1.3",
     "lodash": "^4.13.1",
-    "commonmark": "^0.27.0",
     "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
     "optimist": "^0.6.1",
     "q": "^1.4.1",
diff --git a/src/async-components/views/dialogs/ExportE2eKeysDialog.js b/src/async-components/views/dialogs/ExportE2eKeysDialog.js
index 284d299f4b..816b8eb73d 100644
--- a/src/async-components/views/dialogs/ExportE2eKeysDialog.js
+++ b/src/async-components/views/dialogs/ExportE2eKeysDialog.js
@@ -14,71 +14,158 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import FileSaver from 'file-saver';
 import React from 'react';
 
+import * as Matrix from 'matrix-js-sdk';
+import * as MegolmExportEncryption from '../../../utils/MegolmExportEncryption';
 import sdk from '../../../index';
 
-import * as MegolmExportEncryption from '../../../utils/MegolmExportEncryption';
+const PHASE_EDIT = 1;
+const PHASE_EXPORTING = 2;
 
 export default React.createClass({
     displayName: 'ExportE2eKeysDialog',
 
+    propTypes: {
+        matrixClient: React.PropTypes.instanceOf(Matrix.MatrixClient).isRequired,
+        onFinished: React.PropTypes.func.isRequired,
+    },
+
     getInitialState: function() {
         return {
-            collectedPassword: false,
+            phase: PHASE_EDIT,
+            errStr: null,
         };
     },
 
+    componentWillMount: function() {
+        this._unmounted = false;
+    },
+
+    componentWillUnmount: function() {
+        this._unmounted = true;
+    },
+
     _onPassphraseFormSubmit: function(ev) {
         ev.preventDefault();
-        console.log(this.refs.passphrase1.value);
+
+        const passphrase = this.refs.passphrase1.value;
+        if (passphrase !== this.refs.passphrase2.value) {
+            this.setState({errStr: 'Passphrases must match'});
+            return false;
+        }
+        if (!passphrase) {
+            this.setState({errStr: 'Passphrase must not be empty'});
+            return false;
+        }
+
+        this._startExport(passphrase);
         return false;
     },
 
-    render: function() {
-        let content;
-        if (!this.state.collectedPassword) {
-            content = (
-                <div className="mx_Dialog_content">
-                    <p>
-                        This process will allow you to export the keys for messages
-                        you have received in encrypted rooms to a local file. You
-                        will then be able to import the file into another Matrix
-                        client in the future, so that client will also be able to
-                        decrypt these messages.
-                    </p>
-                    <p>
-                        The exported file will allow anyone who can read it to decrypt
-                        any encrypted messages that you can see, so you should be
-                        careful to keep it secure. To help with this, you should enter
-                        a passphrase below, which will be used to encrypt the exported
-                        data. It will only be possible to import the data by using the
-                        same passphrase.
-                    </p>
-                    <form onSubmit={this._onPassphraseFormSubmit}>
-                        <div className="mx_TextInputDialog_label">
-                            <label htmlFor="passphrase1">Enter passphrase</label>
-                        </div>
-                        <div>
-                            <input ref="passphrase1" id="passphrase1"
-                                className="mx_TextInputDialog_input"
-                                autoFocus={true} size="64" type="password"/>
-                        </div>
-                        <div className="mx_Dialog_buttons">
-                            <input className="mx_Dialog_primary" type="submit" value="Export" />
-                        </div>
-                    </form>
-                </div>
+    _startExport: function(passphrase) {
+        // extra Promise.resolve() to turn synchronous exceptions into
+        // asynchronous ones.
+        Promise.resolve().then(() => {
+            return this.props.matrixClient.exportRoomKeys();
+        }).then((k) => {
+            return MegolmExportEncryption.encryptMegolmKeyFile(
+                JSON.stringify(k), passphrase
             );
-        }
+        }).then((f) => {
+            const blob = new Blob([f], {
+                type: 'text/plain;charset=us-ascii',
+            });
+            FileSaver.saveAs(blob, 'riot-keys.txt');
+            this.props.onFinished(true);
+        }).catch((e) => {
+            if (this._unmounted) {
+                return;
+            }
+            this.setState({
+                errStr: e.message,
+                phase: PHASE_EDIT,
+            });
+        });
+
+        this.setState({
+            errStr: null,
+            phase: PHASE_EXPORTING,
+        });
+    },
+
+    render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
+
+        const disableForm = (this.state.phase === PHASE_EXPORTING);
 
         return (
-            <div className="mx_exportE2eKeysDialog">
-                <div className="mx_Dialog_title">
-                    Export room keys
-                </div>
-                {content}
-            </div>
+            <BaseDialog className='mx_exportE2eKeysDialog'
+                onFinished={this.props.onFinished}
+                title="Export room keys"
+            >
+                <form onSubmit={this._onPassphraseFormSubmit}>
+                    <div className="mx_Dialog_content">
+                        <p>
+                            This process allows you to export the keys for messages
+                            you have received in encrypted rooms to a local file. You
+                            will then be able to import the file into another Matrix
+                            client in the future, so that client will also be able to
+                            decrypt these messages.
+                        </p>
+                        <p>
+                            The exported file will allow anyone who can read it to decrypt
+                            any encrypted messages that you can see, so you should be
+                            careful to keep it secure. To help with this, you should enter
+                            a passphrase below, which will be used to encrypt the exported
+                            data. It will only be possible to import the data by using the
+                            same passphrase.
+                        </p>
+                        <div className='error'>
+                            {this.state.errStr}
+                        </div>
+                        <div className='mx_E2eKeysDialog_inputTable'>
+                            <div className='mx_E2eKeysDialog_inputRow'>
+                                <div className='mx_E2eKeysDialog_inputLabel'>
+                                    <label htmlFor='passphrase1'>
+                                        Enter passphrase
+                                    </label>
+                                </div>
+                                <div className='mx_E2eKeysDialog_inputCell'>
+                                    <input ref='passphrase1' id='passphrase1'
+                                        autoFocus={true} size='64' type='password'
+                                        disabled={disableForm}
+                                    />
+                                </div>
+                            </div>
+                            <div className='mx_E2eKeysDialog_inputRow'>
+                                <div className='mx_E2eKeysDialog_inputLabel'>
+                                    <label htmlFor='passphrase2'>
+                                        Confirm passphrase
+                                    </label>
+                                </div>
+                                <div className='mx_E2eKeysDialog_inputCell'>
+                                    <input ref='passphrase2' id='passphrase2'
+                                        size='64' type='password'
+                                        disabled={disableForm}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='mx_Dialog_buttons'>
+                        <input className='mx_Dialog_primary' type='submit' value='Export'
+                             disabled={disableForm}
+                        />
+                        <AccessibleButton element='button' onClick={this.props.onFinished}
+                                disabled={disableForm}>
+                            Cancel
+                        </AccessibleButton>
+                    </div>
+                </form>
+            </BaseDialog>
         );
     },
 });
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index ba5ab49bbc..6edf572f6c 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -393,6 +393,16 @@ module.exports = React.createClass({
         }).done();
     },
 
+    _onExportE2eKeysClicked: function() {
+        Modal.createDialogAsync(
+            (cb) => {
+                require(['../../async-components/views/dialogs/ExportE2eKeysDialog'], cb);
+            }, {
+                matrixClient: MatrixClientPeg.get(),
+            }
+        );
+    },
+
     _renderUserInterfaceSettings: function() {
         var client = MatrixClientPeg.get();
 
@@ -463,6 +473,16 @@ module.exports = React.createClass({
         const deviceId = client.deviceId;
         const identityKey = client.getDeviceEd25519Key() || "<not supported>";
 
+        let exportButton = null;
+
+        if (client.isCryptoEnabled) {
+            exportButton = (
+                <AccessibleButton className="mx_UserSettings_button"
+                        onClick={this._onExportE2eKeysClicked}>
+                    Export E2E room keys
+                </AccessibleButton>
+            );
+        }
         return (
             <div>
                 <h3>Cryptography</h3>
@@ -471,6 +491,7 @@ module.exports = React.createClass({
                         <li><label>Device ID:</label>             <span><code>{deviceId}</code></span></li>
                         <li><label>Device key:</label>            <span><code><b>{identityKey}</b></code></span></li>
                     </ul>
+                    {exportButton}
                 </div>
             </div>
         );
diff --git a/src/index.js b/src/index.js
index 5d4145a39b..0e3e90aed6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -29,20 +29,7 @@ module.exports.getComponent = function(componentName) {
 };
 
 
-/* hacky functions for megolm import/export until we give it a UI */
-import * as MegolmExportEncryption from './utils/MegolmExportEncryption';
-import MatrixClientPeg from './MatrixClientPeg';
-
-window.exportKeys = function(password) {
-    return MatrixClientPeg.get().exportRoomKeys().then((k) => {
-        return MegolmExportEncryption.encryptMegolmKeyFile(
-            JSON.stringify(k), password
-        );
-    }).then((f) => {
-        console.log(new TextDecoder().decode(new Uint8Array(f)));
-    }).done();
-};
-
+/*
 window.importKeys = function(password, data) {
     const arrayBuffer = new TextEncoder().encode(data).buffer;
     return MegolmExportEncryption.decryptMegolmKeyFile(
@@ -52,3 +39,4 @@ window.importKeys = function(password, data) {
         return MatrixClientPeg.get().importRoomKeys(k);
     });
 };
+*/

From b85f53cadd6e6d3c97feefe8b54e11d3f62f4130 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Tue, 24 Jan 2017 15:57:42 +0000
Subject: [PATCH 240/289] Implement Megolm key importing

---
 .../views/dialogs/ImportE2eKeysDialog.js      | 170 ++++++++++++++++++
 src/components/structures/UserSettings.js     |  26 ++-
 src/index.js                                  |  13 --
 3 files changed, 194 insertions(+), 15 deletions(-)
 create mode 100644 src/async-components/views/dialogs/ImportE2eKeysDialog.js

diff --git a/src/async-components/views/dialogs/ImportE2eKeysDialog.js b/src/async-components/views/dialogs/ImportE2eKeysDialog.js
new file mode 100644
index 0000000000..586bd9b6cc
--- /dev/null
+++ b/src/async-components/views/dialogs/ImportE2eKeysDialog.js
@@ -0,0 +1,170 @@
+/*
+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.
+*/
+
+import React from 'react';
+
+import * as Matrix from 'matrix-js-sdk';
+import * as MegolmExportEncryption from '../../../utils/MegolmExportEncryption';
+import sdk from '../../../index';
+
+function readFileAsArrayBuffer(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            resolve(e.target.result);
+        };
+        reader.onerror = reject;
+
+        reader.readAsArrayBuffer(file);
+    });
+}
+
+const PHASE_EDIT = 1;
+const PHASE_IMPORTING = 2;
+
+export default React.createClass({
+    displayName: 'ImportE2eKeysDialog',
+
+    propTypes: {
+        matrixClient: React.PropTypes.instanceOf(Matrix.MatrixClient).isRequired,
+        onFinished: React.PropTypes.func.isRequired,
+    },
+
+    getInitialState: function() {
+        return {
+            enableSubmit: false,
+            phase: PHASE_EDIT,
+            errStr: null,
+        };
+    },
+
+    componentWillMount: function() {
+        this._unmounted = false;
+    },
+
+    componentWillUnmount: function() {
+        this._unmounted = true;
+    },
+
+    _onFormChange: function(ev) {
+        const files = this.refs.file.files || [];
+        this.setState({
+            enableSubmit: (this.refs.passphrase.value !== "" && files.length > 0),
+        });
+    },
+
+    _onFormSubmit: function(ev) {
+        ev.preventDefault();
+        this._startImport(this.refs.file.files[0], this.refs.passphrase.value);
+        return false;
+    },
+
+    _startImport: function(file, passphrase) {
+        this.setState({
+            errStr: null,
+            phase: PHASE_IMPORTING,
+        });
+
+        return readFileAsArrayBuffer(file).then((arrayBuffer) => {
+            return MegolmExportEncryption.decryptMegolmKeyFile(
+                arrayBuffer, passphrase
+            );
+        }).then((keys) => {
+            return this.props.matrixClient.importRoomKeys(JSON.parse(keys));
+        }).then(() => {
+            // TODO: it would probably be nice to give some feedback about what we've imported here.
+            this.props.onFinished(true);
+        }).catch((e) => {
+            if (this._unmounted) {
+                return;
+            }
+            this.setState({
+                errStr: e.message,
+                phase: PHASE_EDIT,
+            });
+        });
+    },
+
+    render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
+
+        const disableForm = (this.state.phase !== PHASE_EDIT);
+
+        return (
+            <BaseDialog className='mx_importE2eKeysDialog'
+                onFinished={this.props.onFinished}
+                title="Import room keys"
+            >
+                <form onSubmit={this._onFormSubmit}>
+                    <div className="mx_Dialog_content">
+                        <p>
+                            This process allows you to import encryption keys
+                            that you had previously exported from another Matrix
+                            client. You will then be able to decrypt any
+                            messages that the other client could decrypt.
+                        </p>
+                        <p>
+                            The export file will be protected with a passphrase.
+                            You should enter the passphrase here, to decrypt the
+                            file.
+                        </p>
+                        <div className='error'>
+                            {this.state.errStr}
+                        </div>
+                        <div className='mx_E2eKeysDialog_inputTable'>
+                            <div className='mx_E2eKeysDialog_inputRow'>
+                               <div className='mx_E2eKeysDialog_inputLabel'>
+                                   <label htmlFor='importFile'>
+                                       File to import
+                                   </label>
+                               </div>
+                               <div className='mx_E2eKeysDialog_inputCell'>
+                                   <input ref='file' id='importFile' type='file'
+                                       autoFocus={true}
+                                       onChange={this._onFormChange}
+                                       disabled={disableForm} />
+                               </div>
+                            </div>
+                            <div className='mx_E2eKeysDialog_inputRow'>
+                               <div className='mx_E2eKeysDialog_inputLabel'>
+                                   <label htmlFor='passphrase'>
+                                       Enter passphrase
+                                   </label>
+                               </div>
+                               <div className='mx_E2eKeysDialog_inputCell'>
+                                   <input ref='passphrase' id='passphrase'
+                                       size='64' type='password'
+                                       onChange={this._onFormChange}
+                                       disabled={disableForm}/>
+                               </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='mx_Dialog_buttons'>
+                        <input className='mx_Dialog_primary' type='submit' value='Import'
+                            disabled={!this.state.enableSubmit || disableForm}
+                        />
+                        <AccessibleButton element='button' onClick={this.props.onFinished}
+                                disabled={disableForm}>
+                            Cancel
+                        </AccessibleButton>
+                    </div>
+                </form>
+            </BaseDialog>
+        );
+    },
+});
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 6edf572f6c..d64f0383f6 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -396,7 +396,21 @@ module.exports = React.createClass({
     _onExportE2eKeysClicked: function() {
         Modal.createDialogAsync(
             (cb) => {
-                require(['../../async-components/views/dialogs/ExportE2eKeysDialog'], cb);
+                require.ensure(['../../async-components/views/dialogs/ExportE2eKeysDialog'], () => {
+                    cb(require('../../async-components/views/dialogs/ExportE2eKeysDialog'));
+                }, "e2e-export");
+            }, {
+                matrixClient: MatrixClientPeg.get(),
+            }
+        );
+    },
+
+    _onImportE2eKeysClicked: function() {
+        Modal.createDialogAsync(
+            (cb) => {
+                require.ensure(['../../async-components/views/dialogs/ImportE2eKeysDialog'], () => {
+                    cb(require('../../async-components/views/dialogs/ImportE2eKeysDialog'));
+                }, "e2e-export");
             }, {
                 matrixClient: MatrixClientPeg.get(),
             }
@@ -473,7 +487,8 @@ module.exports = React.createClass({
         const deviceId = client.deviceId;
         const identityKey = client.getDeviceEd25519Key() || "<not supported>";
 
-        let exportButton = null;
+        let exportButton = null,
+            importButton = null;
 
         if (client.isCryptoEnabled) {
             exportButton = (
@@ -482,6 +497,12 @@ module.exports = React.createClass({
                     Export E2E room keys
                 </AccessibleButton>
             );
+            importButton = (
+                <AccessibleButton className="mx_UserSettings_button"
+                        onClick={this._onImportE2eKeysClicked}>
+                    Import E2E room keys
+                </AccessibleButton>
+            );
         }
         return (
             <div>
@@ -492,6 +513,7 @@ module.exports = React.createClass({
                         <li><label>Device key:</label>            <span><code><b>{identityKey}</b></code></span></li>
                     </ul>
                     {exportButton}
+                    {importButton}
                 </div>
             </div>
         );
diff --git a/src/index.js b/src/index.js
index 0e3e90aed6..b6d8c0b5f4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -27,16 +27,3 @@ module.exports.resetSkin = function() {
 module.exports.getComponent = function(componentName) {
     return Skinner.getComponent(componentName);
 };
-
-
-/*
-window.importKeys = function(password, data) {
-    const arrayBuffer = new TextEncoder().encode(data).buffer;
-    return MegolmExportEncryption.decryptMegolmKeyFile(
-        arrayBuffer, password
-    ).then((j) => {
-        const k = JSON.parse(j);
-        return MatrixClientPeg.get().importRoomKeys(k);
-    });
-};
-*/

From 6e55bb4956cd0e5d62352970f3f9ba892bd6b7fb Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 24 Jan 2017 23:15:00 +0100
Subject: [PATCH 241/289] actually, move signout warning to UserSettings.js

also, kill off the inexplicably useless LogoutPrompt in favour of a normal QuestionDialog.
This in turn fixes https://github.com/vector-im/riot-web/issues/2152
---
 src/components/views/dialogs/LogoutPrompt.js | 61 --------------------
 1 file changed, 61 deletions(-)
 delete mode 100644 src/components/views/dialogs/LogoutPrompt.js

diff --git a/src/components/views/dialogs/LogoutPrompt.js b/src/components/views/dialogs/LogoutPrompt.js
deleted file mode 100644
index c4bd7a0474..0000000000
--- a/src/components/views/dialogs/LogoutPrompt.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
-Copyright 2015, 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.
-*/
-var React = require('react');
-var dis = require("../../../dispatcher");
-
-module.exports = React.createClass({
-    displayName: 'LogoutPrompt',
-
-    propTypes: {
-        onFinished: React.PropTypes.func,
-    },
-
-    logOut: function() {
-        dis.dispatch({action: 'logout'});
-        if (this.props.onFinished) {
-            this.props.onFinished();
-        }
-    },
-
-    cancelPrompt: function() {
-        if (this.props.onFinished) {
-            this.props.onFinished();
-        }
-    },
-
-    onKeyDown: function(e) {
-        if (e.keyCode === 27) { // escape
-            e.stopPropagation();
-            e.preventDefault();
-            this.cancelPrompt();
-        }
-    },
-
-    render: function() {
-        return (
-            <div>
-                <div className="mx_Dialog_content">
-                    Sign out?
-                </div>
-                <div className="mx_Dialog_buttons" onKeyDown={ this.onKeyDown }>
-                    <button className="mx_Dialog_primary" autoFocus onClick={this.logOut}>Sign Out</button>
-                    <button onClick={this.cancelPrompt}>Cancel</button>
-                </div>
-            </div>
-        );
-    }
-});
-

From 6a40abbbf063638e1008090a39e4735c9964a754 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 24 Jan 2017 23:18:25 +0100
Subject: [PATCH 242/289] actually, move signout warning to UserSettings.js

also, kill off the inexplicably useless LogoutPrompt in favour of a normal QuestionDialog.
This in turn fixes https://github.com/vector-im/riot-web/issues/2152
---
 src/Lifecycle.js                          | 43 +++++++----------------
 src/component-index.js                    |  2 --
 src/components/structures/UserSettings.js | 22 ++++++++++--
 3 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/src/Lifecycle.js b/src/Lifecycle.js
index 64d22bd04c..493bbf12aa 100644
--- a/src/Lifecycle.js
+++ b/src/Lifecycle.js
@@ -22,7 +22,6 @@ import Notifier from './Notifier';
 import UserActivity from './UserActivity';
 import Presence from './Presence';
 import dis from './dispatcher';
-import Modal from './Modal';
 import DMRoomMap from './utils/DMRoomMap';
 
 /**
@@ -290,35 +289,19 @@ export function logout() {
         return;
     }
 
-    var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-    Modal.createDialog(QuestionDialog, {
-        title: "Warning",
-        description:
-            <div>
-                For security, logging out will delete any end-to-end encryption keys from this browser,
-                making previous encrypted chat history unreadable if you log back in.
-                In future this <a href="https://github.com/vector-im/riot-web/issues/2108">will be improved</a>,
-                but for now be warned.
-            </div>,
-        button: "Continue",
-        onFinished: (confirmed) => {
-            if (confirmed) {
-                MatrixClientPeg.get().logout().then(onLoggedOut,
-                    (err) => {
-                        // Just throwing an error here is going to be very unhelpful
-                        // if you're trying to log out because your server's down and
-                        // you want to log into a different server, so just forget the
-                        // access token. It's annoying that this will leave the access
-                        // token still valid, but we should fix this by having access
-                        // tokens expire (and if you really think you've been compromised,
-                        // change your password).
-                        console.log("Failed to call logout API: token will not be invalidated");
-                        onLoggedOut();
-                    }
-                );
-            }
-        },
-    });
+    return MatrixClientPeg.get().logout().then(onLoggedOut,
+        (err) => {
+            // Just throwing an error here is going to be very unhelpful
+            // if you're trying to log out because your server's down and
+            // you want to log into a different server, so just forget the
+            // access token. It's annoying that this will leave the access
+            // token still valid, but we should fix this by having access
+            // tokens expire (and if you really think you've been compromised,
+            // change your password).
+            console.log("Failed to call logout API: token will not be invalidated");
+            onLoggedOut();
+        }
+    );
 }
 
 /**
diff --git a/src/component-index.js b/src/component-index.js
index e83de8739d..99882e784f 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -79,8 +79,6 @@ import views$dialogs$ErrorDialog from './components/views/dialogs/ErrorDialog';
 views$dialogs$ErrorDialog && (module.exports.components['views.dialogs.ErrorDialog'] = views$dialogs$ErrorDialog);
 import views$dialogs$InteractiveAuthDialog from './components/views/dialogs/InteractiveAuthDialog';
 views$dialogs$InteractiveAuthDialog && (module.exports.components['views.dialogs.InteractiveAuthDialog'] = views$dialogs$InteractiveAuthDialog);
-import views$dialogs$LogoutPrompt from './components/views/dialogs/LogoutPrompt';
-views$dialogs$LogoutPrompt && (module.exports.components['views.dialogs.LogoutPrompt'] = views$dialogs$LogoutPrompt);
 import views$dialogs$NeedToRegisterDialog from './components/views/dialogs/NeedToRegisterDialog';
 views$dialogs$NeedToRegisterDialog && (module.exports.components['views.dialogs.NeedToRegisterDialog'] = views$dialogs$NeedToRegisterDialog);
 import views$dialogs$QuestionDialog from './components/views/dialogs/QuestionDialog';
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 4a1332be8c..0231bc5038 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -228,8 +228,26 @@ module.exports = React.createClass({
     },
 
     onLogoutClicked: function(ev) {
-        var LogoutPrompt = sdk.getComponent('dialogs.LogoutPrompt');
-        this.logoutModal = Modal.createDialog(LogoutPrompt);
+        var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+        Modal.createDialog(QuestionDialog, {
+            title: "Sign out?",
+            description:
+                <div>
+                    For security, logging out will delete any end-to-end encryption keys from this browser,
+                    making previous encrypted chat history unreadable if you log back in.
+                    In future this <a href="https://github.com/vector-im/riot-web/issues/2108">will be improved</a>,
+                    but for now be warned.
+                </div>,
+            button: "Sign out",
+            onFinished: (confirmed) => {
+                if (confirmed) {
+                    dis.dispatch({action: 'logout'});
+                    if (this.props.onFinished) {
+                        this.props.onFinished();
+                    }
+                }
+            },
+        });
     },
 
     onPasswordChangeError: function(err) {

From 770820e6faca38a8e2d57c9655a4c4a38273e85f Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Tue, 24 Jan 2017 22:41:52 +0000
Subject: [PATCH 243/289] Fix a bunch of lint complaints

---
 .eslintignore                                 |  1 +
 src/components/structures/UserSettings.js     |  2 +-
 src/components/views/avatars/BaseAvatar.js    |  2 +-
 .../views/dialogs/ChatInviteDialog.js         |  5 +--
 .../views/elements/AccessibleButton.js        | 12 ++++---
 src/components/views/rooms/EntityTile.js      |  2 +-
 src/components/views/rooms/MemberInfo.js      | 33 ++++++++++++-------
 src/components/views/rooms/RoomHeader.js      |  2 +-
 src/components/views/rooms/RoomTile.js        |  2 +-
 .../views/rooms/SimpleRoomHeader.js           |  2 +-
 .../views/settings/ChangePassword.js          |  5 +--
 11 files changed, 43 insertions(+), 25 deletions(-)
 create mode 100644 .eslintignore

diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000000..c4c7fe5067
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1 @@
+src/component-index.js
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index ba5ab49bbc..ca37a9b179 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -26,7 +26,7 @@ var UserSettingsStore = require('../../UserSettingsStore');
 var GeminiScrollbar = require('react-gemini-scrollbar');
 var Email = require('../../email');
 var AddThreepid = require('../../AddThreepid');
-var AccessibleButton = require('../views/elements/AccessibleButton');
+import AccessibleButton from '../views/elements/AccessibleButton';
 
 // if this looks like a release, use the 'version' from package.json; else use
 // the git sha.
diff --git a/src/components/views/avatars/BaseAvatar.js b/src/components/views/avatars/BaseAvatar.js
index a2ad5ee6dc..c9c84aa1bf 100644
--- a/src/components/views/avatars/BaseAvatar.js
+++ b/src/components/views/avatars/BaseAvatar.js
@@ -19,7 +19,7 @@ limitations under the License.
 var React = require('react');
 var AvatarLogic = require("../../../Avatar");
 import sdk from '../../../index';
-var AccessibleButton = require('../elements/AccessibleButton');
+import AccessibleButton from '../elements/AccessibleButton';
 
 module.exports = React.createClass({
     displayName: 'BaseAvatar',
diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index 47d343b599..2f17445263 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -24,7 +24,7 @@ var DMRoomMap = require('../../../utils/DMRoomMap');
 var rate_limited_func = require("../../../ratelimitedfunc");
 var dis = require("../../../dispatcher");
 var Modal = require('../../../Modal');
-var AccessibleButton = require('../elements/AccessibleButton');
+import AccessibleButton from '../elements/AccessibleButton';
 
 const TRUNCATE_QUERY_LIST = 40;
 
@@ -437,7 +437,8 @@ module.exports = React.createClass({
                 <div className="mx_Dialog_title">
                     {this.props.title}
                 </div>
-                <AccessibleButton className="mx_ChatInviteDialog_cancel" onClick={this.onCancel} >
+                <AccessibleButton className="mx_ChatInviteDialog_cancel"
+                        onClick={this.onCancel} >
                     <TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
                 </AccessibleButton>
                 <div className="mx_ChatInviteDialog_label">
diff --git a/src/components/views/elements/AccessibleButton.js b/src/components/views/elements/AccessibleButton.js
index 3ff5d7a38a..ffea8e1ba7 100644
--- a/src/components/views/elements/AccessibleButton.js
+++ b/src/components/views/elements/AccessibleButton.js
@@ -17,8 +17,12 @@
 import React from 'react';
 
 /**
- * AccessibleButton is a generic wrapper for any element that should be treated as a button.
- * Identifies the element as a button, setting proper tab indexing and keyboard activation behavior.
+ * AccessibleButton is a generic wrapper for any element that should be treated
+ * as a button.  Identifies the element as a button, setting proper tab
+ * indexing and keyboard activation behavior.
+ *
+ * @param {Object} props  react element properties
+ * @returns {Object} rendered react
  */
 export default function AccessibleButton(props) {
     const {element, onClick, children, ...restProps} = props;
@@ -26,7 +30,7 @@ export default function AccessibleButton(props) {
     restProps.onKeyDown = function(e) {
         if (e.keyCode == 13 || e.keyCode == 32) return onClick();
     };
-    restProps.tabIndex = restProps.tabIndex || "0"; 
+    restProps.tabIndex = restProps.tabIndex || "0";
     restProps.role = "button";
     return React.createElement(element, restProps, children);
 }
@@ -44,7 +48,7 @@ AccessibleButton.propTypes = {
 };
 
 AccessibleButton.defaultProps = {
-    element: 'div'
+    element: 'div',
 };
 
 AccessibleButton.displayName = "AccessibleButton";
diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.js
index 64de431d9d..71e8fb0be7 100644
--- a/src/components/views/rooms/EntityTile.js
+++ b/src/components/views/rooms/EntityTile.js
@@ -20,7 +20,7 @@ var React = require('react');
 
 var MatrixClientPeg = require('../../../MatrixClientPeg');
 var sdk = require('../../../index');
-var AccessibleButton = require('../elements/AccessibleButton');
+import AccessibleButton from '../elements/AccessibleButton';
 
 
 var PRESENCE_CLASS = {
diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js
index b616624822..d33b8f3524 100644
--- a/src/components/views/rooms/MemberInfo.js
+++ b/src/components/views/rooms/MemberInfo.js
@@ -35,7 +35,7 @@ var DMRoomMap = require('../../../utils/DMRoomMap');
 var Unread = require('../../../Unread');
 var Receipt = require('../../../utils/Receipt');
 var WithMatrixClient = require('../../../wrappers/WithMatrixClient');
-var AccessibleButton = require('../elements/AccessibleButton');
+import AccessibleButton from '../elements/AccessibleButton';
 
 module.exports = WithMatrixClient(React.createClass({
     displayName: 'MemberInfo',
@@ -636,20 +636,31 @@ module.exports = WithMatrixClient(React.createClass({
         }
 
         if (this.state.can.kick) {
-            kickButton = <AccessibleButton className="mx_MemberInfo_field" onClick={this.onKick}>
-                { this.props.member.membership === "invite" ? "Disinvite" : "Kick" }
-            </AccessibleButton>;
+            const membership = this.props.member.membership;
+            const kickLabel = membership === "invite" ? "Disinvite" : "Kick";
+            kickButton = (
+                <AccessibleButton className="mx_MemberInfo_field"
+                        onClick={this.onKick}>
+                    {kickLabel}
+                </AccessibleButton>
+            );
         }
         if (this.state.can.ban) {
-            banButton = <AccessibleButton className="mx_MemberInfo_field" onClick={this.onBan}>
-                Ban
-            </AccessibleButton>;
+            banButton = (
+                <AccessibleButton className="mx_MemberInfo_field"
+                        onClick={this.onBan}>
+                    Ban
+                </AccessibleButton>
+            );
         }
         if (this.state.can.mute) {
-            var muteLabel = this.state.muted ? "Unmute" : "Mute";
-            muteButton = <AccessibleButton className="mx_MemberInfo_field" onClick={this.onMuteToggle}>
-                {muteLabel}
-            </AccessibleButton>;
+            const muteLabel = this.state.muted ? "Unmute" : "Mute";
+            muteButton = (
+                <AccessibleButton className="mx_MemberInfo_field"
+                        onClick={this.onMuteToggle}>
+                    {muteLabel}
+                </AccessibleButton>
+            );
         }
         if (this.state.can.toggleMod) {
             var giveOpLabel = this.state.isTargetMod ? "Revoke Moderator" : "Make Moderator";
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 812dd8c79c..fa0c63dfdd 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -26,7 +26,7 @@ var rate_limited_func = require('../../../ratelimitedfunc');
 var linkify = require('linkifyjs');
 var linkifyElement = require('linkifyjs/element');
 var linkifyMatrix = require('../../../linkify-matrix');
-var AccessibleButton = require('../elements/AccessibleButton');
+import AccessibleButton from '../elements/AccessibleButton';
 
 linkifyMatrix(linkify);
 
diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index 4a40cf058f..f6c0f7034e 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/src/components/views/rooms/RoomTile.js
@@ -26,7 +26,7 @@ var sdk = require('../../../index');
 var ContextualMenu = require('../../structures/ContextualMenu');
 var RoomNotifs = require('../../../RoomNotifs');
 var FormattingUtils = require('../../../utils/FormattingUtils');
-var AccessibleButton = require('../elements/AccessibleButton');
+import AccessibleButton from '../elements/AccessibleButton';
 var UserSettingsStore = require('../../../UserSettingsStore');
 
 module.exports = React.createClass({
diff --git a/src/components/views/rooms/SimpleRoomHeader.js b/src/components/views/rooms/SimpleRoomHeader.js
index cabd0f27a4..bc2f4bca69 100644
--- a/src/components/views/rooms/SimpleRoomHeader.js
+++ b/src/components/views/rooms/SimpleRoomHeader.js
@@ -19,7 +19,7 @@ limitations under the License.
 var React = require('react');
 var sdk = require('../../../index');
 var dis = require("../../../dispatcher");
-var AccessibleButton = require('../elements/AccessibleButton');
+import AccessibleButton from '../elements/AccessibleButton';
 
 /*
  * A stripped-down room header used for things like the user settings
diff --git a/src/components/views/settings/ChangePassword.js b/src/components/views/settings/ChangePassword.js
index 2bbf5420c0..5cd689ae44 100644
--- a/src/components/views/settings/ChangePassword.js
+++ b/src/components/views/settings/ChangePassword.js
@@ -19,7 +19,7 @@ limitations under the License.
 var React = require('react');
 var MatrixClientPeg = require("../../../MatrixClientPeg");
 var sdk = require("../../../index");
-var AccessibleButton = require('../elements/AccessibleButton');
+import AccessibleButton from '../elements/AccessibleButton';
 
 module.exports = React.createClass({
     displayName: 'ChangePassword',
@@ -137,7 +137,8 @@ module.exports = React.createClass({
                                 <input id="password2" type="password" ref="confirm_input" />
                             </div>
                         </div>
-                        <AccessibleButton className={buttonClassName} onClick={this.onClickChange}>
+                        <AccessibleButton className={buttonClassName}
+                                onClick={this.onClickChange}>
                             Change Password
                         </AccessibleButton>
                     </div>

From 10018374f86798a2a7d96965dc924238054737ea Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Fri, 4 Nov 2016 14:37:02 +0000
Subject: [PATCH 244/289] Allow modals to stack up

Show the most recent modal; if we end up with more than one, just show the most
recent.
---
 src/Modal.js | 93 +++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 74 insertions(+), 19 deletions(-)

diff --git a/src/Modal.js b/src/Modal.js
index f0ab97a91e..89e8b1361c 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -21,6 +21,8 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 import sdk from './index';
 
+const DIALOG_CONTAINER_ID = "mx_Dialog_Container";
+
 /**
  * Wrap an asynchronous loader function with a react component which shows a
  * spinner until the real component loads.
@@ -67,26 +69,37 @@ const AsyncWrapper = React.createClass({
     },
 });
 
-let _counter = 0;
+class ModalManager {
+    constructor() {
+        this._counter = 0;
 
-module.exports = {
-    DialogContainerId: "mx_Dialog_Container",
+        /** list of the modals we have stacked up, with the most recent at [0] */
+        this._modals = [
+            /* {
+               elem: React component for this dialog
+               onFinished: caller-supplied onFinished callback
+               className: CSS class for the dialog wrapper div
+               } */
+        ];
 
-    getOrCreateContainer: function() {
-        var container = document.getElementById(this.DialogContainerId);
+        this.closeAll = this.closeAll.bind(this);
+    }
+
+    getOrCreateContainer() {
+        let container = document.getElementById(DIALOG_CONTAINER_ID);
 
         if (!container) {
             container = document.createElement("div");
-            container.id = this.DialogContainerId;
+            container.id = DIALOG_CONTAINER_ID;
             document.body.appendChild(container);
         }
 
         return container;
-    },
+    }
 
-    createDialog: function(Element, props, className) {
+    createDialog(Element, props, className) {
         return this.createDialogAsync((cb) => {cb(Element);}, props, className);
-    },
+    }
 
     /**
      * Open a modal view.
@@ -107,31 +120,73 @@ module.exports = {
      *
      * @param {String} className   CSS class to apply to the modal wrapper
      */
-    createDialogAsync: function(loader, props, className) {
+    createDialogAsync(loader, props, className) {
         var self = this;
-        // never call this via modal.close() from onFinished() otherwise it will loop
+        const modal = {};
+
+        // never call this from onFinished() otherwise it will loop
+        //
+        // nb explicit function() rather than arrow function, to get `arguments`
         var closeDialog = function() {
             if (props && props.onFinished) props.onFinished.apply(null, arguments);
-            ReactDOM.unmountComponentAtNode(self.getOrCreateContainer());
+            var i = self._modals.indexOf(modal);
+            if (i >= 0) {
+                self._modals.splice(i, 1);
+            }
+            self._reRender();
         };
 
         // don't attempt to reuse the same AsyncWrapper for different dialogs,
         // otherwise we'll get confused.
-        const modalCount = _counter++;
+        const modalCount = this._counter++;
 
         // FIXME: If a dialog uses getDefaultProps it clobbers the onFinished
         // property set here so you can't close the dialog from a button click!
+        modal.elem = (
+            <AsyncWrapper key={modalCount} loader={loader} {...props}
+                onFinished={closeDialog}/>
+        );
+        modal.onFinished = props ? props.onFinished : null;
+        modal.className = className;
+
+        this._modals.unshift(modal);
+
+        this._reRender();
+        return {close: closeDialog};
+    }
+
+    closeAll() {
+        const modals = this._modals;
+        this._modals = [];
+
+        for (let i = 0; i < modals.length; i++) {
+            const m = modals[i];
+            if (m.onFinished) {
+                m.onFinished(false);
+            }
+        }
+
+        this._reRender();
+    }
+
+    _reRender() {
+        if (this._modals.length == 0) {
+            ReactDOM.unmountComponentAtNode(this.getOrCreateContainer());
+            return;
+        }
+
+        var modal = this._modals[0];
         var dialog = (
-            <div className={"mx_Dialog_wrapper " + className}>
+            <div className={"mx_Dialog_wrapper " + modal.className}>
                 <div className="mx_Dialog">
-                    <AsyncWrapper key={modalCount} loader={loader} {...props} onFinished={closeDialog}/>
+                    {modal.elem}
                 </div>
-                <div className="mx_Dialog_background" onClick={ closeDialog.bind(this, false) }></div>
+                <div className="mx_Dialog_background" onClick={ this.closeAll }></div>
             </div>
         );
 
         ReactDOM.render(dialog, this.getOrCreateContainer());
+    }
+}
 
-        return {close: closeDialog};
-    },
-};
+export default new ModalManager();

From 29b4dde8781d390509716a2cc60347e833ffb028 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 25 Jan 2017 08:01:45 +0000
Subject: [PATCH 245/289] Fix SetDisplayNameDialog

SetDisplayNameDialog got broken by the changes to support asynchronous loading
of dialogs.

Rather than poking into its internals via a ref, make it return its result via
onFinished.

Fixes https://github.com/vector-im/riot-web/issues/3047
---
 src/components/structures/RoomView.js                |  8 ++------
 src/components/views/dialogs/SetDisplayNameDialog.js | 12 +++++++-----
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 8753540e48..299d2fa850 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -722,15 +722,11 @@ module.exports = React.createClass({
                 if (!result.displayname) {
                     var SetDisplayNameDialog = sdk.getComponent('views.dialogs.SetDisplayNameDialog');
                     var dialog_defer = q.defer();
-                    var dialog_ref;
                     Modal.createDialog(SetDisplayNameDialog, {
                         currentDisplayName: result.displayname,
-                        ref: (r) => {
-                            dialog_ref = r;
-                        },
-                        onFinished: (submitted) => {
+                        onFinished: (submitted, newDisplayName) => {
                             if (submitted) {
-                                cli.setDisplayName(dialog_ref.getValue()).done(() => {
+                                cli.setDisplayName(newDisplayName).done(() => {
                                     dialog_defer.resolve();
                                 });
                             }
diff --git a/src/components/views/dialogs/SetDisplayNameDialog.js b/src/components/views/dialogs/SetDisplayNameDialog.js
index c1041cc218..18e6b66bff 100644
--- a/src/components/views/dialogs/SetDisplayNameDialog.js
+++ b/src/components/views/dialogs/SetDisplayNameDialog.js
@@ -18,6 +18,12 @@ var React = require("react");
 var sdk = require("../../../index.js");
 var MatrixClientPeg = require("../../../MatrixClientPeg");
 
+
+/**
+ * Prompt the user to set a display name.
+ *
+ * On success, `onFinished(true, newDisplayName)` is called.
+ */
 module.exports = React.createClass({
     displayName: 'SetDisplayNameDialog',
     propTypes: {
@@ -42,10 +48,6 @@ module.exports = React.createClass({
         this.refs.input_value.select();
     },
 
-    getValue: function() {
-        return this.state.value;
-    },
-
     onValueChange: function(ev) {
         this.setState({
             value: ev.target.value
@@ -54,7 +56,7 @@ module.exports = React.createClass({
 
     onFormSubmit: function(ev) {
         ev.preventDefault();
-        this.props.onFinished(true);
+        this.props.onFinished(true, this.state.value);
         return false;
     },
 

From e9719b1766f304d9f8acc9ff0bea51c343e6ec50 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 25 Jan 2017 09:12:29 +0000
Subject: [PATCH 246/289] Get rid of .only

---
 test/components/views/elements/MemberEventListSummary-test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/components/views/elements/MemberEventListSummary-test.js b/test/components/views/elements/MemberEventListSummary-test.js
index 7094520f7b..8979c87c3a 100644
--- a/test/components/views/elements/MemberEventListSummary-test.js
+++ b/test/components/views/elements/MemberEventListSummary-test.js
@@ -8,7 +8,7 @@ const jssdk = require('matrix-js-sdk');
 const MatrixEvent = jssdk.MatrixEvent;
 
 const testUtils = require('../../../test-utils');
-describe.only('MemberEventListSummary', function() {
+describe('MemberEventListSummary', function() {
     let sandbox;
 
     // Generate dummy event tiles for use in simulating an expanded MELS

From 3b8b2cf50086e298e964bd5c4d545a27f6533b89 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 25 Jan 2017 09:18:47 +0000
Subject: [PATCH 247/289] Document _getCanonicalTransitions

---
 .../views/elements/MemberEventListSummary.js    | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index 78aede8dfc..d29a8ba0a3 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -119,18 +119,11 @@ module.exports = React.createClass({
     },
 
     /**
-     * Canonicalise an array of transitions into an array of transitions and how many times
-     * they are repeated consecutively.
-     *
-     * An array of 123 "joined_and_left" transitions, would result in:
-     * ```
-     * [{
-     *   transitionType: "joined_and_left"
-     *   repeats: 123
-     * }, ... ]
-     * ```
-     * @param {string[]} transitions the array of transitions to transform.
-     * @returns {object[]} an array of truncated transitions.
+     * Canonicalise an array of transitions such that some pairs of transitions become
+     * single transitions. For example an input ['joined','left'] would result in an output
+     * ['joined_and_left'].
+     * @param {string[]} transitions an array of transitions.
+     * @returns {string[]} an array of transitions.
      */
     _getCanonicalTransitions: function(transitions) {
         let modMap = {

From f8e46819c5452ba51b70935f7d55fec6262fa820 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 25 Jan 2017 09:28:26 +0000
Subject: [PATCH 248/289] Rename truncated->coalesced

---
 .../views/elements/MemberEventListSummary.js           | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index d29a8ba0a3..a351a0fb09 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -86,9 +86,9 @@ module.exports = React.createClass({
             // Some neighbouring transitions are common, so canonicalise some into "pair" transitions
             let canonicalTransitions = this._getCanonicalTransitions(splitTransitions);
             // Transform into consecutive repetitions of the same transition (like 5 consecutive 'joined_and_left's)
-            let truncatedTransitions = this._getTruncatedTransitions(canonicalTransitions);
+            let coalescedTransitions = this._coalesceRepeatedTransitions(canonicalTransitions);
 
-            let descs = truncatedTransitions.map((t) => {
+            let descs = coalescedTransitions.map((t) => {
                 return this._getDescriptionForTransition(t.transitionType, plural, t.repeats);
             });
 
@@ -167,12 +167,12 @@ module.exports = React.createClass({
      * [{
      *   transitionType: "joined_and_left"
      *   repeats: 123
-     * }, ... ]
+     * }]
      * ```
      * @param {string[]} transitions the array of transitions to transform.
-     * @returns {object[]} an array of truncated transitions.
+     * @returns {object[]} an array of coalesced transitions.
      */
-    _getTruncatedTransitions: function(transitions) {
+    _coalesceRepeatedTransitions: function(transitions) {
         let res = [];
         for (let i = 0; i < transitions.length; i++) {
             if (res.length > 0 && res[res.length - 1].transitionType === transitions[i]) {

From 8091cf7df8e369626bd3aa514b08458617d81d9e Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 25 Jan 2017 09:32:28 +0000
Subject: [PATCH 249/289] Enumerate->label

---
 src/components/views/elements/MemberEventListSummary.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index a351a0fb09..3d0e1c6a7e 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -265,10 +265,10 @@ module.exports = React.createClass({
     },
 
     /**
-     * Enumerate a given membership event, `e`, where `getContent().membership` has
+     * Label a given membership event, `e`, where `getContent().membership` has
      * changed for each transition allowed by the Matrix protocol. This attempts to
-     * enumerate the membership changes that occur in `../../../TextForEvent.js`.
-     * @param {MatrixEvent} e the membership change event to enumerate.
+     * label the membership changes that occur in `../../../TextForEvent.js`.
+     * @param {MatrixEvent} e the membership change event to label.
      * @returns {string?} the transition type given to this event. This defaults to `null`
      * if a transition is not recognised.
      */

From d5edf26371e39958a871133ceb02bd5b0ccfa8df Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 25 Jan 2017 10:39:39 +0000
Subject: [PATCH 250/289] Improve comment

---
 test/components/views/elements/MemberEventListSummary-test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/components/views/elements/MemberEventListSummary-test.js b/test/components/views/elements/MemberEventListSummary-test.js
index 8979c87c3a..a2f3977f0f 100644
--- a/test/components/views/elements/MemberEventListSummary-test.js
+++ b/test/components/views/elements/MemberEventListSummary-test.js
@@ -51,7 +51,7 @@ describe('MemberEventListSummary', function() {
                 },
             },
         });
-        // Override random event ID
+        // Override random event ID to allow for equality tests against tiles from generateTiles
         e.event.event_id = eventId;
         return e;
     };

From 24e94787dd511d8a12b6c699024e7300e06561b8 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 25 Jan 2017 10:52:55 +0000
Subject: [PATCH 251/289] A lot of linting

---
 .../elements/MemberEventListSummary-test.js   | 644 +++++++++++-------
 1 file changed, 415 insertions(+), 229 deletions(-)

diff --git a/test/components/views/elements/MemberEventListSummary-test.js b/test/components/views/elements/MemberEventListSummary-test.js
index a2f3977f0f..d01d705040 100644
--- a/test/components/views/elements/MemberEventListSummary-test.js
+++ b/test/components/views/elements/MemberEventListSummary-test.js
@@ -4,8 +4,6 @@ const ReactDOM = require("react-dom");
 const ReactTestUtils = require('react-addons-test-utils');
 const sdk = require('matrix-react-sdk');
 const MemberEventListSummary = sdk.getComponent('views.elements.MemberEventListSummary');
-const jssdk = require('matrix-js-sdk');
-const MatrixEvent = jssdk.MatrixEvent;
 
 const testUtils = require('../../../test-utils');
 describe('MemberEventListSummary', function() {
@@ -23,35 +21,38 @@ describe('MemberEventListSummary', function() {
     };
 
     /**
-     * Generates a membership event with the target of the event set as a mocked RoomMember based
-     * on `parameters.userId`.
+     * Generates a membership event with the target of the event set as a mocked
+     * RoomMember based on `parameters.userId`.
      * @param {string} eventId the ID of the event.
      * @param {object} parameters the parameters to use to create the event.
-     * @param {string} parameters.membership the membership to assign to `content.membership`
+     * @param {string} parameters.membership the membership to assign to
+     * `content.membership`
      * @param {string} parameters.userId the state key and target userId of the event. If
      * `parameters.senderId` is not specified, this is also used as the event sender.
      * @param {string} parameters.prevMembership the membership to assign to
      * `prev_content.membership`.
-     * @param {string} parameters.senderId the user ID of the sender of the event. Optional.
-     * Defaults to `parameters.userId`.
+     * @param {string} parameters.senderId the user ID of the sender of the event.
+     * Optional. Defaults to `parameters.userId`.
      * @returns {MatrixEvent} the event created.
      */
     const generateMembershipEvent = (eventId, parameters) => {
-        let e = testUtils.mkMembership({
+        const e = testUtils.mkMembership({
             event: true,
             user: parameters.senderId || parameters.userId,
             skey: parameters.userId,
             mship: parameters.membership,
             prevMship: parameters.prevMembership,
-            target : {
-                name: parameters.userId.match(/@([^:]*):/)[1], // Use localpart as display name
+            target: {
+                // Use localpart as display name
+                name: parameters.userId.match(/@([^:]*):/)[1],
                 userId: parameters.userId,
                 getAvatarUrl: () => {
                     return "avatar.jpeg";
                 },
             },
         });
-        // Override random event ID to allow for equality tests against tiles from generateTiles
+        // Override random event ID to allow for equality tests against tiles from
+        // generateTiles
         e.event.event_id = eventId;
         return e;
     };
@@ -92,14 +93,14 @@ describe('MemberEventListSummary', function() {
 
     it('renders expanded events if there are less than props.threshold', function() {
         const events = generateEvents([
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
         ]);
         const props = {
-            events : events,
-            children : generateTiles(events),
-            summaryLength : 1,
-            avatarsMaxLength : 5,
-            threshold : 3,
+            events: events,
+            children: generateTiles(events),
+            summaryLength: 1,
+            avatarsMaxLength: 5,
+            threshold: 3,
         };
 
         const renderer = ReactTestUtils.createRenderer();
@@ -114,15 +115,15 @@ describe('MemberEventListSummary', function() {
 
     it('renders expanded events if there are less than props.threshold', function() {
         const events = generateEvents([
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
         ]);
         const props = {
-            events : events,
-            children : generateTiles(events),
-            summaryLength : 1,
-            avatarsMaxLength : 5,
-            threshold : 3,
+            events: events,
+            children: generateTiles(events),
+            summaryLength: 1,
+            avatarsMaxLength: 5,
+            threshold: 3,
         };
 
         const renderer = ReactTestUtils.createRenderer();
@@ -138,20 +139,24 @@ describe('MemberEventListSummary', function() {
 
     it('renders collapsed events if events.length = props.threshold', function() {
         const events = generateEvents([
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
         ]);
         const props = {
-            events : events,
-            children : generateTiles(events),
-            summaryLength : 1,
-            avatarsMaxLength : 5,
-            threshold : 3,
+            events: events,
+            children: generateTiles(events),
+            summaryLength: 1,
+            avatarsMaxLength: 5,
+            threshold: 3,
         };
 
-        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
-        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const instance = ReactTestUtils.renderIntoDocument(
+            <MemberEventListSummary {...props} />
+        );
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
+            instance, "mx_MemberEventListSummary_summary"
+        );
         const summaryText = summary.innerText;
 
         expect(summaryText).toBe("user_1 joined and left and joined");
@@ -159,265 +164,434 @@ describe('MemberEventListSummary', function() {
 
     it('truncates long join,leave repetitions', function() {
         const events = generateEvents([
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
         ]);
         const props = {
-            events : events,
-            children : generateTiles(events),
-            summaryLength : 1,
-            avatarsMaxLength : 5,
-            threshold : 3,
+            events: events,
+            children: generateTiles(events),
+            summaryLength: 1,
+            avatarsMaxLength: 5,
+            threshold: 3,
         };
 
-        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
-        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const instance = ReactTestUtils.renderIntoDocument(
+            <MemberEventListSummary {...props} />
+        );
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
+            instance, "mx_MemberEventListSummary_summary"
+        );
         const summaryText = summary.innerText;
 
         expect(summaryText).toBe("user_1 joined and left 7 times");
     });
 
-    it('truncates long join,leave repetitions inbetween other events', function() {
+    it('truncates long join,leave repetitions between other events', function() {
         const events = generateEvents([
-            {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "invite", senderId: "@some_other_user:some.domain"},
+            {
+                userId: "@user_1:some.domain",
+                prevMembership: "ban",
+                membership: "leave",
+                senderId: "@some_other_user:some.domain",
+            },
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {
+                userId: "@user_1:some.domain",
+                prevMembership: "leave",
+                membership: "invite",
+                senderId: "@some_other_user:some.domain",
+            },
         ]);
         const props = {
-            events : events,
-            children : generateTiles(events),
-            summaryLength : 1,
-            avatarsMaxLength : 5,
-            threshold : 3,
+            events: events,
+            children: generateTiles(events),
+            summaryLength: 1,
+            avatarsMaxLength: 5,
+            threshold: 3,
         };
 
-        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
-        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const instance = ReactTestUtils.renderIntoDocument(
+            <MemberEventListSummary {...props} />
+        );
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
+            instance, "mx_MemberEventListSummary_summary"
+        );
         const summaryText = summary.innerText;
 
-        expect(summaryText).toBe("user_1 was unbanned, joined and left 7 times and was invited");
+        expect(summaryText).toBe(
+            "user_1 was unbanned, joined and left 7 times and was invited"
+        );
     });
 
-    it('truncates multiple sequences of repetitions with other events inbetween', function() {
+    it('truncates multiple sequences of repetitions with other events between',
+    function() {
         const events = generateEvents([
-            {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"},
-            {userId : "@user_1:some.domain", prevMembership: "ban", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "invite", senderId: "@some_other_user:some.domain"},
+            {
+                userId: "@user_1:some.domain",
+                prevMembership: "ban",
+                membership: "leave",
+                senderId: "@some_other_user:some.domain",
+            },
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {
+                userId: "@user_1:some.domain",
+                prevMembership: "leave",
+                membership: "ban",
+                senderId: "@some_other_user:some.domain",
+            },
+            {userId: "@user_1:some.domain", prevMembership: "ban", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {
+                userId: "@user_1:some.domain",
+                prevMembership: "leave",
+                membership: "invite",
+                senderId: "@some_other_user:some.domain",
+            },
         ]);
         const props = {
-            events : events,
-            children : generateTiles(events),
-            summaryLength : 1,
-            avatarsMaxLength : 5,
-            threshold : 3,
+            events: events,
+            children: generateTiles(events),
+            summaryLength: 1,
+            avatarsMaxLength: 5,
+            threshold: 3,
         };
 
-        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
-        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const instance = ReactTestUtils.renderIntoDocument(
+            <MemberEventListSummary {...props} />
+        );
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
+            instance, "mx_MemberEventListSummary_summary"
+        );
         const summaryText = summary.innerText;
 
-        expect(summaryText).toBe("user_1 was unbanned, joined and left 2 times, was banned, joined and left 3 times and was invited");
+        expect(summaryText).toBe(
+            "user_1 was unbanned, joined and left 2 times, was banned, " +
+            "joined and left 3 times and was invited"
+        );
     });
 
     it('handles multiple users following the same sequence of memberships', function() {
         const events = generateEvents([
             // user_1
-            {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"},
+            {
+                userId: "@user_1:some.domain",
+                prevMembership: "ban",
+                membership: "leave",
+                senderId: "@some_other_user:some.domain",
+            },
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {
+                userId: "@user_1:some.domain",
+                prevMembership: "leave",
+                membership: "ban",
+                senderId: "@some_other_user:some.domain",
+            },
             // user_2
-            {userId : "@user_2:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
-            {userId : "@user_2:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_2:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_2:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_2:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_2:some.domain", prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"},
+            {
+                userId: "@user_2:some.domain",
+                prevMembership: "ban",
+                membership: "leave",
+                senderId: "@some_other_user:some.domain",
+            },
+            {userId: "@user_2:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_2:some.domain", prevMembership: "join", membership: "leave"},
+            {userId: "@user_2:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_2:some.domain", prevMembership: "join", membership: "leave"},
+            {
+                userId: "@user_2:some.domain",
+                prevMembership: "leave",
+                membership: "ban",
+                senderId: "@some_other_user:some.domain",
+            },
         ]);
         const props = {
-            events : events,
-            children : generateTiles(events),
-            summaryLength : 1,
-            avatarsMaxLength : 5,
-            threshold : 3,
+            events: events,
+            children: generateTiles(events),
+            summaryLength: 1,
+            avatarsMaxLength: 5,
+            threshold: 3,
         };
 
-        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
-        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const instance = ReactTestUtils.renderIntoDocument(
+            <MemberEventListSummary {...props} />
+        );
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
+            instance, "mx_MemberEventListSummary_summary"
+        );
         const summaryText = summary.innerText;
 
-        expect(summaryText).toBe("user_1 and 1 other were unbanned, joined and left 2 times and were banned");
+        expect(summaryText).toBe(
+            "user_1 and 1 other were unbanned, joined and left 2 times and were banned"
+        );
     });
 
     it('handles many users following the same sequence of memberships', function() {
         const events = generateEventsForUsers("@user_$:some.domain", 20, [
-            {prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
+            {
+                prevMembership: "ban",
+                membership: "leave",
+                senderId: "@some_other_user:some.domain",
+            },
             {prevMembership: "leave", membership: "join"},
             {prevMembership: "join", membership: "leave"},
             {prevMembership: "leave", membership: "join"},
             {prevMembership: "join", membership: "leave"},
-            {prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"},
+            {
+                prevMembership: "leave",
+                membership: "ban",
+                senderId: "@some_other_user:some.domain",
+            },
         ]);
         const props = {
-            events : events,
-            children : generateTiles(events),
-            summaryLength : 1,
-            avatarsMaxLength : 5,
-            threshold : 3,
+            events: events,
+            children: generateTiles(events),
+            summaryLength: 1,
+            avatarsMaxLength: 5,
+            threshold: 3,
         };
 
-        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
-        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
-        const summaryText = summary.innerText;
-
-        expect(summaryText).toBe("user_0 and 19 others were unbanned, joined and left 2 times and were banned");
-    });
-
-    it('correctly orders sequences of transitions by the order of their first event', function() {
-        const events = generateEvents([
-            {userId : "@user_2:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
-            {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"},
-            {userId : "@user_2:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_2:some.domain", prevMembership: "join", membership: "leave"},
-            {userId : "@user_2:some.domain", prevMembership: "leave", membership: "join"},
-            {userId : "@user_2:some.domain", prevMembership: "join", membership: "leave"},
-        ]);
-        const props = {
-            events : events,
-            children : generateTiles(events),
-            summaryLength : 1,
-            avatarsMaxLength : 5,
-            threshold : 3,
-        };
-
-        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
-        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const instance = ReactTestUtils.renderIntoDocument(
+            <MemberEventListSummary {...props} />
+        );
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
+            instance, "mx_MemberEventListSummary_summary"
+        );
         const summaryText = summary.innerText;
 
         expect(summaryText).toBe(
-            "user_2 was unbanned and joined and left 2 times, user_1 was unbanned, joined and left 2 times and was banned"
+            "user_0 and 19 others were unbanned, joined and left 2 times and were banned"
+        );
+    });
+
+    it('correctly orders sequences of transitions by the order of their first event',
+    function() {
+        const events = generateEvents([
+            {
+                userId: "@user_2:some.domain",
+                prevMembership: "ban",
+                membership: "leave",
+                senderId: "@some_other_user:some.domain",
+            },
+            {
+                userId: "@user_1:some.domain",
+                prevMembership: "ban",
+                membership: "leave",
+                senderId: "@some_other_user:some.domain",
+            },
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {
+                userId: "@user_1:some.domain",
+                prevMembership: "leave",
+                membership: "ban",
+                senderId: "@some_other_user:some.domain",
+            },
+            {userId: "@user_2:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_2:some.domain", prevMembership: "join", membership: "leave"},
+            {userId: "@user_2:some.domain", prevMembership: "leave", membership: "join"},
+            {userId: "@user_2:some.domain", prevMembership: "join", membership: "leave"},
+        ]);
+        const props = {
+            events: events,
+            children: generateTiles(events),
+            summaryLength: 1,
+            avatarsMaxLength: 5,
+            threshold: 3,
+        };
+
+        const instance = ReactTestUtils.renderIntoDocument(
+            <MemberEventListSummary {...props} />
+        );
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
+            instance, "mx_MemberEventListSummary_summary"
+        );
+        const summaryText = summary.innerText;
+
+        expect(summaryText).toBe(
+            "user_2 was unbanned and joined and left 2 times, user_1 was unbanned, " +
+            "joined and left 2 times and was banned"
         );
     });
 
     it('correctly identifies transitions', function() {
         const events = generateEvents([
             // invited
-            {userId : "@user_1:some.domain", membership: "invite"},
+            {userId: "@user_1:some.domain", membership: "invite"},
             // banned
-            {userId : "@user_1:some.domain", membership: "ban"},
+            {userId: "@user_1:some.domain", membership: "ban"},
             // joined
-            {userId : "@user_1:some.domain", membership: "join"},
+            {userId: "@user_1:some.domain", membership: "join"},
             // invite_reject
-            {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave"},
+            {
+                userId: "@user_1:some.domain",
+                prevMembership: "invite",
+                membership: "leave",
+            },
             // left
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
             // invite_withdrawal
-            {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave", senderId: "@some_other_user:some.domain"},
+            {
+                userId: "@user_1:some.domain",
+                prevMembership: "invite",
+                membership: "leave",
+                senderId: "@some_other_user:some.domain",
+            },
             // unbanned
-            {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"},
+            {
+                userId: "@user_1:some.domain",
+                prevMembership: "ban",
+                membership: "leave",
+                senderId: "@some_other_user:some.domain",
+            },
             // kicked
-            {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave", senderId: "@some_other_user:some.domain"},
+            {
+                userId: "@user_1:some.domain",
+                prevMembership: "join",
+                membership: "leave",
+                senderId: "@some_other_user:some.domain",
+            },
             // default = left
-            {userId : "@user_1:some.domain", prevMembership: "????", membership: "leave", senderId: "@some_other_user:some.domain"},
+            {
+                userId: "@user_1:some.domain",
+                prevMembership: "????",
+                membership: "leave",
+                senderId: "@some_other_user:some.domain",
+            },
         ]);
         const props = {
-            events : events,
-            children : generateTiles(events),
-            summaryLength : 1,
-            avatarsMaxLength : 5,
-            threshold : 3,
+            events: events,
+            children: generateTiles(events),
+            summaryLength: 1,
+            avatarsMaxLength: 5,
+            threshold: 3,
         };
 
-        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
-        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const instance = ReactTestUtils.renderIntoDocument(
+            <MemberEventListSummary {...props} />
+        );
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
+            instance, "mx_MemberEventListSummary_summary"
+        );
         const summaryText = summary.innerText;
 
         expect(summaryText).toBe(
-            "user_1 was invited, was banned, joined, rejected their invitation, left, had their invitation withdrawn, was unbanned, was kicked and left"
+            "user_1 was invited, was banned, joined, rejected their invitation, left, " +
+            "had their invitation withdrawn, was unbanned, was kicked and left"
         );
     });
 
     it('handles invitation plurals correctly when there are multiple users', function() {
         const events = generateEvents([
-            {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave", senderId: "@some_other_user:some.domain"},
-            {userId : "@user_2:some.domain", prevMembership: "invite", membership: "leave"},
-            {userId : "@user_2:some.domain", prevMembership: "invite", membership: "leave", senderId: "@some_other_user:some.domain"},
+            {
+                userId: "@user_1:some.domain",
+                prevMembership: "invite",
+                membership: "leave",
+            },
+            {
+                userId: "@user_1:some.domain",
+                prevMembership: "invite",
+                membership: "leave",
+                senderId: "@some_other_user:some.domain",
+            },
+            {
+                userId: "@user_2:some.domain",
+                prevMembership: "invite",
+                membership: "leave",
+            },
+            {
+                userId: "@user_2:some.domain",
+                prevMembership: "invite",
+                membership: "leave",
+                senderId: "@some_other_user:some.domain",
+            },
         ]);
         const props = {
-            events : events,
-            children : generateTiles(events),
-            summaryLength : 1,
-            avatarsMaxLength : 5,
-            threshold : 3,
+            events: events,
+            children: generateTiles(events),
+            summaryLength: 1,
+            avatarsMaxLength: 5,
+            threshold: 3,
         };
 
-        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
-        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const instance = ReactTestUtils.renderIntoDocument(
+            <MemberEventListSummary {...props} />
+        );
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
+            instance, "mx_MemberEventListSummary_summary"
+        );
         const summaryText = summary.innerText;
 
         expect(summaryText).toBe(
-            "user_1 and 1 other rejected their invitations and had their invitations withdrawn"
+            "user_1 and 1 other rejected their invitations and " +
+            "had their invitations withdrawn"
         );
     });
 
-    it('handles invitation plurals correctly when there are multiple invites', function() {
+    it('handles invitation plurals correctly when there are multiple invites',
+    function() {
         const events = generateEvents([
-            {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave"},
-            {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave"},
+            {
+                userId: "@user_1:some.domain",
+                prevMembership: "invite",
+                membership: "leave",
+            },
+            {
+                userId: "@user_1:some.domain",
+                prevMembership: "invite",
+                membership: "leave",
+            },
         ]);
         const props = {
-            events : events,
-            children : generateTiles(events),
-            summaryLength : 1,
-            avatarsMaxLength : 5,
-            threshold : 1, // threshold = 1 to force collapse
+            events: events,
+            children: generateTiles(events),
+            summaryLength: 1,
+            avatarsMaxLength: 5,
+            threshold: 1, // threshold = 1 to force collapse
         };
 
-        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
-        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const instance = ReactTestUtils.renderIntoDocument(
+            <MemberEventListSummary {...props} />
+        );
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
+            instance, "mx_MemberEventListSummary_summary"
+        );
         const summaryText = summary.innerText;
 
         expect(summaryText).toBe(
@@ -427,21 +601,25 @@ describe('MemberEventListSummary', function() {
 
     it('handles a summary length = 2, with no "others"', function() {
         const events = generateEvents([
-            {userId : "@user_1:some.domain", membership: "join"},
-            {userId : "@user_1:some.domain", membership: "join"},
-            {userId : "@user_2:some.domain", membership: "join"},
-            {userId : "@user_2:some.domain", membership: "join"},
+            {userId: "@user_1:some.domain", membership: "join"},
+            {userId: "@user_1:some.domain", membership: "join"},
+            {userId: "@user_2:some.domain", membership: "join"},
+            {userId: "@user_2:some.domain", membership: "join"},
         ]);
         const props = {
-            events : events,
-            children : generateTiles(events),
-            summaryLength : 2,
-            avatarsMaxLength : 5,
-            threshold : 3,
+            events: events,
+            children: generateTiles(events),
+            summaryLength: 2,
+            avatarsMaxLength: 5,
+            threshold: 3,
         };
 
-        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
-        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const instance = ReactTestUtils.renderIntoDocument(
+            <MemberEventListSummary {...props} />
+        );
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
+            instance, "mx_MemberEventListSummary_summary"
+        );
         const summaryText = summary.innerText;
 
         expect(summaryText).toBe(
@@ -451,20 +629,24 @@ describe('MemberEventListSummary', function() {
 
     it('handles a summary length = 2, with 1 "other"', function() {
         const events = generateEvents([
-            {userId : "@user_1:some.domain", membership: "join"},
-            {userId : "@user_2:some.domain", membership: "join"},
-            {userId : "@user_3:some.domain", membership: "join"},
+            {userId: "@user_1:some.domain", membership: "join"},
+            {userId: "@user_2:some.domain", membership: "join"},
+            {userId: "@user_3:some.domain", membership: "join"},
         ]);
         const props = {
-            events : events,
-            children : generateTiles(events),
-            summaryLength : 2,
-            avatarsMaxLength : 5,
-            threshold : 3,
+            events: events,
+            children: generateTiles(events),
+            summaryLength: 2,
+            avatarsMaxLength: 5,
+            threshold: 3,
         };
 
-        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
-        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const instance = ReactTestUtils.renderIntoDocument(
+            <MemberEventListSummary {...props} />
+        );
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
+            instance, "mx_MemberEventListSummary_summary"
+        );
         const summaryText = summary.innerText;
 
         expect(summaryText).toBe(
@@ -477,19 +659,23 @@ describe('MemberEventListSummary', function() {
             {membership: "join"},
         ]);
         const props = {
-            events : events,
-            children : generateTiles(events),
-            summaryLength : 2,
-            avatarsMaxLength : 5,
-            threshold : 3,
+            events: events,
+            children: generateTiles(events),
+            summaryLength: 2,
+            avatarsMaxLength: 5,
+            threshold: 3,
         };
 
-        const instance = ReactTestUtils.renderIntoDocument(<MemberEventListSummary {...props} />);
-        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary");
+        const instance = ReactTestUtils.renderIntoDocument(
+            <MemberEventListSummary {...props} />
+        );
+        const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
+            instance, "mx_MemberEventListSummary_summary"
+        );
         const summaryText = summary.innerText;
 
         expect(summaryText).toBe(
             "user_0, user_1 and 18 others joined"
         );
     });
-});
\ No newline at end of file
+});

From b887d5b8239d9a780457f86c76e5c5b24b813c67 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 25 Jan 2017 11:05:45 +0000
Subject: [PATCH 252/289] Much linting

---
 .../views/elements/MemberEventListSummary.js  | 132 ++++++++++--------
 1 file changed, 72 insertions(+), 60 deletions(-)

diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index 3d0e1c6a7e..49322d6644 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -76,23 +76,29 @@ module.exports = React.createClass({
      * events that occurred.
      */
     _renderSummary: function(eventAggregates, orderedTransitionSequences) {
-        let summaries = orderedTransitionSequences.map((transitions) => {
-            let userNames = eventAggregates[transitions];
-            let nameList = this._renderNameList(userNames);
-            let plural = userNames.length > 1;
+        const summaries = orderedTransitionSequences.map((transitions) => {
+            const userNames = eventAggregates[transitions];
+            const nameList = this._renderNameList(userNames);
+            const plural = userNames.length > 1;
 
-            let splitTransitions = transitions.split(',');
+            const splitTransitions = transitions.split(',');
 
-            // Some neighbouring transitions are common, so canonicalise some into "pair" transitions
-            let canonicalTransitions = this._getCanonicalTransitions(splitTransitions);
-            // Transform into consecutive repetitions of the same transition (like 5 consecutive 'joined_and_left's)
-            let coalescedTransitions = this._coalesceRepeatedTransitions(canonicalTransitions);
+            // Some neighbouring transitions are common, so canonicalise some into "pair"
+            // transitions
+            const canonicalTransitions = this._getCanonicalTransitions(splitTransitions);
+            // Transform into consecutive repetitions of the same transition (like 5
+            // consecutive 'joined_and_left's)
+            const coalescedTransitions = this._coalesceRepeatedTransitions(
+                canonicalTransitions
+            );
 
-            let descs = coalescedTransitions.map((t) => {
-                return this._getDescriptionForTransition(t.transitionType, plural, t.repeats);
+            const descs = coalescedTransitions.map((t) => {
+                return this._getDescriptionForTransition(
+                    t.transitionType, plural, t.repeats
+                );
             });
 
-            let desc = this._renderCommaSeparatedList(descs);
+            const desc = this._renderCommaSeparatedList(descs);
 
             return nameList + " " + desc;
         });
@@ -126,14 +132,14 @@ module.exports = React.createClass({
      * @returns {string[]} an array of transitions.
      */
     _getCanonicalTransitions: function(transitions) {
-        let modMap = {
-            'joined' : {
-                'after' : 'left',
-                'newTransition' : 'joined_and_left',
+        const modMap = {
+            'joined': {
+                'after': 'left',
+                'newTransition': 'joined_and_left',
             },
-            'left' : {
-                'after' : 'joined',
-                'newTransition' : 'left_and_joined',
+            'left': {
+                'after': 'joined',
+                'newTransition': 'left_and_joined',
             },
             // $currentTransition : {
             //     'after' : $nextTransition,
@@ -143,8 +149,8 @@ module.exports = React.createClass({
         const res = [];
 
         for (let i = 0; i < transitions.length; i++) {
-            let t = transitions[i];
-            let t2 = transitions[i + 1];
+            const t = transitions[i];
+            const t2 = transitions[i + 1];
 
             let transition = t;
 
@@ -173,7 +179,7 @@ module.exports = React.createClass({
      * @returns {object[]} an array of coalesced transitions.
      */
     _coalesceRepeatedTransitions: function(transitions) {
-        let res = [];
+        const res = [];
         for (let i = 0; i < transitions.length; i++) {
             if (res.length > 0 && res[res.length - 1].transitionType === transitions[i]) {
                 res[res.length - 1].repeats += 1;
@@ -191,16 +197,17 @@ module.exports = React.createClass({
      * For a certain transition, t, describe what happened to the users that
      * underwent the transition.
      * @param {string} t the transition type.
-     * @param {boolean} plural whether there were multiple users undergoing the same transition.
+     * @param {boolean} plural whether there were multiple users undergoing the same
+     * transition.
      * @param {number} repeats the number of times the transition was repeated in a row.
      * @returns {string} the written English equivalent of the transition.
      */
     _getDescriptionForTransition(t, plural, repeats) {
-        let beConjugated = plural ? "were" : "was";
-        let invitation = "their invitation" + (plural || (repeats > 1) ? "s" : "");
+        const beConjugated = plural ? "were" : "was";
+        const invitation = "their invitation" + (plural || (repeats > 1) ? "s" : "");
 
         let res = null;
-        let map = {
+        const map = {
             "joined": "joined",
             "left": "left",
             "joined_and_left": "joined and left",
@@ -221,17 +228,21 @@ module.exports = React.createClass({
     },
 
     /**
-     * Constructs a written English string representing `items`, with an optional limit on the number
-     * of items included in the result. If specified and if the length of `items` is greater than the
-     * limit, the string "and n others" will be appended onto the result.
-     * If `items` is empty, returns the empty string. If there is only one item, return it.
+     * Constructs a written English string representing `items`, with an optional limit on
+     * the number of items included in the result. If specified and if the length of
+     *`items` is greater than the limit, the string "and n others" will be appended onto
+     * the result.
+     * If `items` is empty, returns the empty string. If there is only one item, return
+     * it.
      * @param {string[]} items the items to construct a string from.
      * @param {number?} itemLimit the number by which to limit the list.
      * @returns {string} a string constructed by joining `items` with a comma between each
      * item, but with the last item appended as " and [lastItem]".
      */
     _renderCommaSeparatedList(items, itemLimit) {
-        const remaining = itemLimit === undefined ? 0 : Math.max(items.length - itemLimit, 0);
+        const remaining = itemLimit === undefined ? 0 : Math.max(
+            items.length - itemLimit, 0
+        );
         if (items.length === 0) {
             return "";
         } else if (items.length === 1) {
@@ -241,18 +252,16 @@ module.exports = React.createClass({
             const other = " other" + (remaining > 1 ? "s" : "");
             return items.join(', ') + ' and ' + remaining + other;
         } else {
-            let last = items.pop();
-            return items.join(', ') + ' and ' + last;
+            return items.join(', ') + ' and ' + items.pop();
         }
     },
 
     _renderAvatars: function(roomMembers) {
-        let avatars = roomMembers.slice(0, this.props.avatarsMaxLength).map((m) => {
+        const avatars = roomMembers.slice(0, this.props.avatarsMaxLength).map((m) => {
             return (
                 <MemberAvatar key={m.userId} member={m} width={14} height={14} />
             );
         });
-
         return (
             <span>
                 {avatars}
@@ -280,15 +289,15 @@ module.exports = React.createClass({
             case 'leave':
                 if (e.mxEvent.getSender() === e.mxEvent.getStateKey()) {
                     switch (e.mxEvent.getPrevContent().membership) {
-                        case 'invite':  return 'invite_reject';
-                        default:        return 'left';
+                        case 'invite': return 'invite_reject';
+                        default: return 'left';
                     }
                 }
                 switch (e.mxEvent.getPrevContent().membership) {
-                    case 'invite':  return 'invite_withdrawal';
-                    case 'ban':     return 'unbanned';
-                    case 'join':    return 'kicked';
-                    default:        return 'left';
+                    case 'invite': return 'invite_withdrawal';
+                    case 'ban': return 'unbanned';
+                    case 'join': return 'kicked';
+                    default: return 'left';
                 }
             default: return null;
         }
@@ -299,22 +308,22 @@ module.exports = React.createClass({
         // is a comma-delimited string of transitions, e.g. "joined,left,kicked".
         // The array of display names is the array of users who went through that
         // sequence during eventsToRender.
-        let aggregate = {
+        const aggregate = {
             // $aggregateType : []:string
         };
         // A map of aggregate types to the indices that order them (the index of
         // the first event for a given transition sequence)
-        let aggregateIndices = {
+        const aggregateIndices = {
             // $aggregateType : int
         };
 
-        let users = Object.keys(userEvents);
+        const users = Object.keys(userEvents);
         users.forEach(
             (userId) => {
-                let firstEvent = userEvents[userId][0];
-                let displayName = firstEvent.displayName;
+                const firstEvent = userEvents[userId][0];
+                const displayName = firstEvent.displayName;
 
-                let seq = this._getTransitionSequence(userEvents[userId]);
+                const seq = this._getTransitionSequence(userEvents[userId]);
                 if (!aggregate[seq]) {
                     aggregate[seq] = [];
                     aggregateIndices[seq] = -1;
@@ -322,8 +331,9 @@ module.exports = React.createClass({
 
                 aggregate[seq].push(displayName);
 
-                if (aggregateIndices[seq] === -1 || firstEvent.index < aggregateIndices[seq]) {
-                    aggregateIndices[seq] = firstEvent.index;
+                if (aggregateIndices[seq] === -1 ||
+                    firstEvent.index < aggregateIndices[seq]) {
+                        aggregateIndices[seq] = firstEvent.index;
                 }
             }
         );
@@ -335,9 +345,9 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        let eventsToRender = this.props.events;
-        let fewEvents = eventsToRender.length < this.props.threshold;
-        let expanded = this.state.expanded || fewEvents;
+        const eventsToRender = this.props.events;
+        const fewEvents = eventsToRender.length < this.props.threshold;
+        const expanded = this.state.expanded || fewEvents;
 
         let expandedEvents = null;
         if (expanded) {
@@ -353,7 +363,7 @@ module.exports = React.createClass({
         }
 
         // Map user IDs to an array of objects:
-        let userEvents = {
+        const userEvents = {
             // $userId : [{
             //     // The original event
             //     mxEvent: e,
@@ -364,7 +374,7 @@ module.exports = React.createClass({
             // }]
         };
 
-        let avatarMembers = [];
+        const avatarMembers = [];
         eventsToRender.forEach((e, index) => {
             const userId = e.getStateKey();
             // Initialise a user's events
@@ -379,20 +389,22 @@ module.exports = React.createClass({
             });
         });
 
-        let aggregate = this._getAggregate(userEvents);
+        const aggregate = this._getAggregate(userEvents);
 
         // Sort types by order of lowest event index within sequence
-        let orderedTransitionSequences = Object.keys(aggregate.names).sort((seq1, seq2) => aggregate.indices[seq1] > aggregate.indices[seq2]);
+        const orderedTransitionSequences = Object.keys(aggregate.names).sort(
+            (seq1, seq2) => aggregate.indices[seq1] > aggregate.indices[seq2]
+        );
 
-        let avatars = this._renderAvatars(avatarMembers);
-        let summary = this._renderSummary(aggregate.names, orderedTransitionSequences);
-        let toggleButton = (
+        const avatars = this._renderAvatars(avatarMembers);
+        const summary = this._renderSummary(aggregate.names, orderedTransitionSequences);
+        const toggleButton = (
             <a className="mx_MemberEventListSummary_toggle" onClick={this._toggleSummary}>
                 {expanded ? 'collapse' : 'expand'}
             </a>
         );
 
-        let summaryContainer = (
+        const summaryContainer = (
             <div className="mx_EventTile_line">
                 <div className="mx_EventTile_info">
                     <span className="mx_MemberEventListSummary_avatars">

From f9ca2a8e5964c86cdff08ecb970c230ed242cdcd Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 25 Jan 2017 11:28:12 +0000
Subject: [PATCH 253/289] Fix _renderCommaSeparatedList

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

diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index 49322d6644..61fa0e076f 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -252,7 +252,8 @@ module.exports = React.createClass({
             const other = " other" + (remaining > 1 ? "s" : "");
             return items.join(', ') + ' and ' + remaining + other;
         } else {
-            return items.join(', ') + ' and ' + items.pop();
+            const lastItem = items.pop();
+            return items.join(', ') + ' and ' + lastItem;
         }
     },
 

From b00e0906007764374612086f6b370cce75d9f528 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Wed, 25 Jan 2017 14:43:47 +0000
Subject: [PATCH 254/289] Do not show the bug report section if there is no
 bug_report_endpoint_url

---
 src/SdkConfig.js                          | 2 ++
 src/components/structures/UserSettings.js | 5 ++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/SdkConfig.js b/src/SdkConfig.js
index 1452aaa64b..8d8e93a889 100644
--- a/src/SdkConfig.js
+++ b/src/SdkConfig.js
@@ -19,6 +19,8 @@ var DEFAULTS = {
     integrations_ui_url: "https://scalar.vector.im/",
     // Base URL to the REST interface of the integrations server
     integrations_rest_url: "https://scalar.vector.im/api",
+    // Where to send bug reports. If not specified, bugs cannot be sent.
+    bug_report_endpoint_url: null,
 };
 
 class SdkConfig {
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 8294eee6df..65e41abb24 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -26,6 +26,7 @@ var UserSettingsStore = require('../../UserSettingsStore');
 var GeminiScrollbar = require('react-gemini-scrollbar');
 var Email = require('../../email');
 var AddThreepid = require('../../AddThreepid');
+var SdkConfig = require('../../SdkConfig');
 
 // if this looks like a release, use the 'version' from package.json; else use
 // the git sha.
@@ -491,7 +492,9 @@ module.exports = React.createClass({
     },
 
     _renderBugReport: function() {
-        // TODO: If there is no bug report endpoint, hide this.
+        if (!SdkConfig.get().bug_report_endpoint_url) {
+            return <div />
+        }
         return (
             <div>
                 <h3>Bug Report</h3>

From 9020a7515cce880896d5933de0165d5c923d9553 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 25 Jan 2017 14:50:00 +0000
Subject: [PATCH 255/289] Correctly bail out on unknown address

---
 src/components/views/dialogs/ChatInviteDialog.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index 60aa6b0c5b..babdf6d9ba 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -405,6 +405,8 @@ module.exports = React.createClass({
             isKnown: false,
         };
         if (addrType == null) {
+            this.setState({ error: true });
+            return null;
         } else if (addrType == 'mx') {
             const user = MatrixClientPeg.get().getUser(addrObj.address);
             if (user) {

From fd8d5af63a19c62abd08e3222d74ae69e38d5c61 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 25 Jan 2017 14:54:21 +0000
Subject: [PATCH 256/289] Fix import of InviteAddressType

and rewrite to import while we're at it
---
 src/components/views/elements/AddressSelector.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/views/elements/AddressSelector.js b/src/components/views/elements/AddressSelector.js
index fe6346b36a..9f37fa90ff 100644
--- a/src/components/views/elements/AddressSelector.js
+++ b/src/components/views/elements/AddressSelector.js
@@ -16,10 +16,10 @@ limitations under the License.
 
 'use strict';
 
-const React = require("react");
-const sdk = require("../../../index");
-const classNames = require('classnames');
-const InviteAddressType = require("./AddressTile");
+import React from 'react';
+import sdk from '../../../index';
+import classNames from 'classnames';
+import { InviteAddressType } from './AddressTile';
 
 export default React.createClass({
     displayName: 'AddressSelector',

From b34f63d3e70fd4f22e226a693f76c86a71abb60c Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 25 Jan 2017 14:59:18 +0000
Subject: [PATCH 257/289] Re-add dispatcher as alt-up/down uses it

Alt-up/down still doesn't go through rooms in the right order,
but it should probably not error.
---
 src/components/structures/LoggedInView.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js
index 57a4d4c721..c00bd2c6db 100644
--- a/src/components/structures/LoggedInView.js
+++ b/src/components/structures/LoggedInView.js
@@ -21,6 +21,7 @@ import KeyCode from '../../KeyCode';
 import Notifier from '../../Notifier';
 import PageTypes from '../../PageTypes';
 import sdk from '../../index';
+import dis from '../../dispatcher';
 
 /**
  * This is what our MatrixChat shows when we are logged in. The precise view is

From e9804086ca41c95dc31c1f139970a456e0d82fd9 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 25 Jan 2017 15:03:01 +0000
Subject: [PATCH 258/289] Point to InviteAddressType

---
 src/components/views/dialogs/ChatInviteDialog.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index babdf6d9ba..c35f247ad7 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -164,6 +164,8 @@ module.exports = React.createClass({
             queryList = this._userList.filter((user) => {
                 return this._matches(query, user);
             }).map((user) => {
+                // Return objects, structure of which is defined
+                // by InviteAddressType
                 return {
                     addressType: 'mx',
                     address: user.userId,

From ced1c45a349a70567392baec0892081959f3f251 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 25 Jan 2017 15:23:50 +0000
Subject: [PATCH 259/289] Doc state in getinitialstate

---
 src/components/views/dialogs/ChatInviteDialog.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index c35f247ad7..2326eda852 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -66,7 +66,14 @@ module.exports = React.createClass({
     getInitialState: function() {
         return {
             error: false,
+
+            // List of AddressTile.InviteAddressType objects represeting
+            // the list of addresses we're going to invite
             inviteList: [],
+
+            // List of AddressTile.InviteAddressType objects represeting
+            // the set of autocompletion results for the current search
+            // query.
             queryList: [],
         };
     },

From 55dc2e0161dd2303872dafa8e5969550643b6af1 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 25 Jan 2017 16:05:39 +0000
Subject: [PATCH 260/289] Factor out common CancelButton

---
 src/components/views/rooms/RoomHeader.js      |  3 +-
 .../views/rooms/SimpleRoomHeader.js           | 28 +++++++++++++------
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index fa0c63dfdd..0842d0f4dd 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -27,6 +27,7 @@ var linkify = require('linkifyjs');
 var linkifyElement = require('linkifyjs/element');
 var linkifyMatrix = require('../../../linkify-matrix');
 import AccessibleButton from '../elements/AccessibleButton';
+import {CancelButton} from './SimpleRoomHeader';
 
 linkifyMatrix(linkify);
 
@@ -184,7 +185,7 @@ module.exports = React.createClass({
             );
 
             save_button = <AccessibleButton className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save</AccessibleButton>;
-            cancel_button = <AccessibleButton className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </AccessibleButton>;
+            cancel_button = <CancelButton onClick={this.props.onCancelClick}/>;
         }
 
         if (this.props.saving) {
diff --git a/src/components/views/rooms/SimpleRoomHeader.js b/src/components/views/rooms/SimpleRoomHeader.js
index bc2f4bca69..ff87fea242 100644
--- a/src/components/views/rooms/SimpleRoomHeader.js
+++ b/src/components/views/rooms/SimpleRoomHeader.js
@@ -16,16 +16,26 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
-var sdk = require('../../../index');
-var dis = require("../../../dispatcher");
+import React from 'react';
+import dis from '../../../dispatcher';
 import AccessibleButton from '../elements/AccessibleButton';
 
+// cancel button which is shared between room header and simple room header
+export function CancelButton(props) {
+    const {onClick} = props;
+
+    return (
+        <AccessibleButton className='mx_RoomHeader_cancelButton' onClick={onClick}>
+            <img src="img/cancel.svg" width="18" height="18" alt="Cancel"/>
+        </AccessibleButton>
+    );
+}
+
 /*
  * A stripped-down room header used for things like the user settings
  * and room directory.
  */
-module.exports = React.createClass({
+export default React.createClass({
     displayName: 'SimpleRoomHeader',
 
     propTypes: {
@@ -41,15 +51,15 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var TintableSvg = sdk.getComponent("elements.TintableSvg");
-
-        var cancelButton;
+        let cancelButton;
         if (this.props.onCancelClick) {
-            cancelButton = <AccessibleButton className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </AccessibleButton>;
+            cancelButton = <CancelButton onClick={this.props.onCancelClick} />;
         }
 
-        var showRhsButton;
+        let showRhsButton;
         /* // don't bother cluttering things up with this for now.
+        const TintableSvg = sdk.getComponent("elements.TintableSvg");
+
         if (this.props.collapsedRhs) {
             showRhsButton =
                 <div className="mx_RoomHeader_button" style={{ float: 'right' }} onClick={this.onShowRhsClick} title=">">

From bea6df88e0495624794472f99f45c22b273bc2f6 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Wed, 25 Jan 2017 16:33:00 +0000
Subject: [PATCH 261/289] Move BugReportDialog to riot-web

---
 src/components/structures/UserSettings.js     |   3 +
 .../views/dialogs/BugReportDialog.js          | 124 ------------------
 2 files changed, 3 insertions(+), 124 deletions(-)
 delete mode 100644 src/components/views/dialogs/BugReportDialog.js

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 99f3d9cd3c..cf4a63e2f7 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -391,6 +391,9 @@ module.exports = React.createClass({
 
     _onBugReportClicked: function() {
         const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog");
+        if (!BugReportDialog) {
+            return;
+        }
         Modal.createDialog(BugReportDialog, {});
     },
 
diff --git a/src/components/views/dialogs/BugReportDialog.js b/src/components/views/dialogs/BugReportDialog.js
deleted file mode 100644
index e8a8b2b869..0000000000
--- a/src/components/views/dialogs/BugReportDialog.js
+++ /dev/null
@@ -1,124 +0,0 @@
-/*
-Copyright 2017 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.
-*/
-
-import React from 'react';
-import sdk from '../../../index';
-
-export default class BugReportDialog extends React.Component {
-    constructor(props, context) {
-        super(props, context);
-        this.state = {
-            sendLogs: true,
-            busy: false,
-            err: null,
-            text: "",
-        };
-        this._onSubmit = this._onSubmit.bind(this);
-        this._onCancel = this._onCancel.bind(this);
-        this._onTextChange = this._onTextChange.bind(this);
-        this._onSendLogsChange = this._onSendLogsChange.bind(this);
-    }
-
-    _onCancel(ev) {
-        this.props.onFinished(false);
-    }
-
-    _onSubmit(ev) {
-        const sendLogs = this.state.sendLogs;
-        const userText = this.state.text;
-        if (!sendLogs && userText.trim().length === 0) {
-            this.setState({
-                err: "Please describe the bug and/or send logs.",
-            });
-            return;
-        }
-        // TODO: Make the HTTP hit
-        this.setState({ busy: true, err: null });
-        setTimeout(() => {
-            this.setState({ busy: false, err: "No bug report endpoint." });
-        }, 1000);
-    }
-
-    _onTextChange(ev) {
-        this.setState({ text: ev.target.value });
-    }
-
-    _onSendLogsChange(ev) {
-        this.setState({ sendLogs: ev.target.checked });
-    }
-
-    render() {
-        const Loader = sdk.getComponent("elements.Spinner");
-
-        let error = null;
-        if (this.state.err) {
-            error = <div className="error">
-                {this.state.err}
-            </div>;
-        }
-
-        const okLabel = this.state.busy ? <Loader /> : 'Send';
-
-        let cancelButton = null;
-        if (!this.state.busy) {
-            cancelButton = <button onClick={this._onCancel}>
-                Cancel
-            </button>;
-        }
-
-        return (
-            <div className="mx_BugReportDialog">
-                <div className="mx_Dialog_title">
-                    Report a bug
-                </div>
-                <div className="mx_Dialog_content">
-                    <p>Please describe the bug. What did you do?
-                    What did you expect to happen?
-                    What actually happened?</p>
-                    <textarea
-                        className="mx_BugReportDialog_input"
-                        rows={5}
-                        onChange={this._onTextChange}
-                        value={this.state.text}
-                        placeholder="Describe your problem here."
-                    />
-                    <p>In order to diagnose problems, logs from this client will be sent with
-                    this bug report.
-                    If you would prefer to only send the text above, please untick:</p>
-                    <input type="checkbox" checked={this.state.sendLogs}
-                        onChange={this._onSendLogsChange} id="mx_BugReportDialog_logs"/>
-                    <label htmlFor="mx_BugReportDialog_logs">Send logs</label>
-                    {error}
-                </div>
-                <div className="mx_Dialog_buttons">
-                    <button
-                        className="mx_Dialog_primary danger"
-                        onClick={this._onSubmit}
-                        autoFocus={true}
-                    >
-                        {okLabel}
-                    </button>
-
-                    {cancelButton}
-                </div>
-            </div>
-        );
-    }
-}
-
-BugReportDialog.propTypes = {
-    onFinished: React.PropTypes.func.isRequired,
-};

From 5099f07562d91ea4587530debd7e205a7f1b9ce0 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 25 Jan 2017 16:33:29 +0000
Subject: [PATCH 262/289] Fix dark theme styling of roomheader cancel button

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

diff --git a/src/components/views/rooms/SimpleRoomHeader.js b/src/components/views/rooms/SimpleRoomHeader.js
index ff87fea242..40995d2a72 100644
--- a/src/components/views/rooms/SimpleRoomHeader.js
+++ b/src/components/views/rooms/SimpleRoomHeader.js
@@ -26,7 +26,8 @@ export function CancelButton(props) {
 
     return (
         <AccessibleButton className='mx_RoomHeader_cancelButton' onClick={onClick}>
-            <img src="img/cancel.svg" width="18" height="18" alt="Cancel"/>
+            <img src="img/cancel.svg" className='mx_filterFlipColor'
+                width="18" height="18" alt="Cancel"/>
         </AccessibleButton>
     );
 }

From e9de34ec4014633bfe08b80fb3d959e605c426f9 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Wed, 25 Jan 2017 16:35:16 +0000
Subject: [PATCH 263/289] We no longer supply a BugReportDialog

---
 src/component-index.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/component-index.js b/src/component-index.js
index d3a61516d3..c50ee0dfc8 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -71,8 +71,6 @@ import views$create_room$Presets from './components/views/create_room/Presets';
 views$create_room$Presets && (module.exports.components['views.create_room.Presets'] = views$create_room$Presets);
 import views$create_room$RoomAlias from './components/views/create_room/RoomAlias';
 views$create_room$RoomAlias && (module.exports.components['views.create_room.RoomAlias'] = views$create_room$RoomAlias);
-import views$dialogs$BugReportDialog from './components/views/dialogs/BugReportDialog';
-views$dialogs$BugReportDialog && (module.exports.components['views.dialogs.BugReportDialog'] = views$dialogs$BugReportDialog);
 import views$dialogs$BaseDialog from './components/views/dialogs/BaseDialog';
 views$dialogs$BaseDialog && (module.exports.components['views.dialogs.BaseDialog'] = views$dialogs$BaseDialog);
 import views$dialogs$ChatInviteDialog from './components/views/dialogs/ChatInviteDialog';

From e1e87807b52ca7233eb0ec331aec6078c022c9aa Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 25 Jan 2017 18:51:28 +0000
Subject: [PATCH 264/289] Look up email addresses in ChatInviteDialog

So email addresses known to the IS get a display name & avatar
---
 .../views/dialogs/ChatInviteDialog.js         | 73 +++++++++++++++----
 src/components/views/elements/AddressTile.js  | 22 ++++--
 2 files changed, 73 insertions(+), 22 deletions(-)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index 61503196e5..4fadad5f84 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -14,17 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var React = require("react");
-var classNames = require('classnames');
-var sdk = require("../../../index");
-var Invite = require("../../../Invite");
-var createRoom = require("../../../createRoom");
-var MatrixClientPeg = require("../../../MatrixClientPeg");
-var DMRoomMap = require('../../../utils/DMRoomMap');
-var rate_limited_func = require("../../../ratelimitedfunc");
-var dis = require("../../../dispatcher");
-var Modal = require('../../../Modal');
+import React from 'react';
+import classNames from 'classnames';
+import sdk from '../../../index';
+import { getAddressType } from '../../../Invite';
+import createRoom from '../../../createRoom';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import DMRoomMap from '../../../utils/DMRoomMap';
+import rate_limited_func from '../../../ratelimitedfunc';
+import dis from '../../../dispatcher';
+import Modal from '../../../Modal';
 import AccessibleButton from '../elements/AccessibleButton';
+import q from 'q';
 
 const TRUNCATE_QUERY_LIST = 40;
 
@@ -186,13 +187,22 @@ module.exports = React.createClass({
             // If the query isn't a user we know about, but is a
             // valid address, add an entry for that
             if (queryList.length == 0) {
-                const addrType = Invite.getAddressType(query);
+                const addrType = getAddressType(query);
                 if (addrType !== null) {
-                    queryList.push({
+                    queryList[0] = {
                         addressType: addrType,
                         address: query,
                         isKnown: false,
-                    });
+                    };
+                    if (addrType == 'email') {
+                        this._lookupThreepid(addrType, query).then((res) => {
+                            if (res !== null) {
+                                this.setState({
+                                    queryList: [res]
+                                });
+                            }
+                        }).done();
+                    }
                 }
             }
         }
@@ -380,7 +390,7 @@ module.exports = React.createClass({
     },
 
     _isDmChat: function(addrs) {
-        if (addrs.length === 1 && Invite.getAddressType(addrs[0]) === "mx" && !this.props.roomId) {
+        if (addrs.length === 1 && getAddressType(addrs[0]) === "mx" && !this.props.roomId) {
             return true;
         } else {
             return false;
@@ -408,7 +418,7 @@ module.exports = React.createClass({
 
     _addInputToList: function() {
         const addressText = this.refs.textinput.value.trim();
-        const addrType = Invite.getAddressType(addressText);
+        const addrType = getAddressType(addressText);
         const addrObj = {
             addressType: addrType,
             address: addressText,
@@ -435,6 +445,39 @@ module.exports = React.createClass({
         return inviteList;
     },
 
+    _lookupThreepid(medium, address) {
+        // wait a bit to let the user finish typing
+        return q.delay(500).then(() => {
+            // If the query has changed, forget it
+            if (this.state.queryList[0] && this.state.queryList[0].address !== address) {
+                return null;
+            }
+            return MatrixClientPeg.get().lookupThreePid(medium, address);
+        }).then((res) => {
+            if (res === null || !res.mxid) return null;
+            // If the query has changed now, drop the response
+            if (this.state.queryList[0] && this.state.queryList[0].address !== address) {
+                return null;
+            }
+
+            return MatrixClientPeg.get().getProfileInfo(res.mxid);
+        }).then((res) => {
+            if (res === null) return null;
+            // If the query has changed now, drop the response
+            if (this.state.queryList[0] && this.state.queryList[0].address !== address) {
+                return null;
+            }
+            // return an InviteAddressType
+            return {
+                addressType: medium,
+                address: address,
+                displayName: res.displayname,
+                avatarMxc: res.avatar_url,
+                isKnown: true,
+            }
+        });
+    },
+
     render: function() {
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const AddressSelector = sdk.getComponent("elements.AddressSelector");
diff --git a/src/components/views/elements/AddressTile.js b/src/components/views/elements/AddressTile.js
index 01c1ed3255..18492d8ae6 100644
--- a/src/components/views/elements/AddressTile.js
+++ b/src/components/views/elements/AddressTile.js
@@ -94,14 +94,14 @@ export default React.createClass({
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
 
+        const nameClasses = classNames({
+            "mx_AddressTile_name": true,
+            "mx_AddressTile_justified": this.props.justified,
+        });
+
         let info;
         let error = false;
         if (address.addressType === "mx" && address.isKnown) {
-            const nameClasses = classNames({
-                "mx_AddressTile_name": true,
-                "mx_AddressTile_justified": this.props.justified,
-            });
-
             const idClasses = classNames({
                 "mx_AddressTile_id": true,
                 "mx_AddressTile_justified": this.props.justified,
@@ -123,13 +123,21 @@ export default React.createClass({
                 <div className={unknownMxClasses}>{ this.props.address.address }</div>
             );
         } else if (address.addressType === "email") {
-            var emailClasses = classNames({
+            const emailClasses = classNames({
                 "mx_AddressTile_email": true,
                 "mx_AddressTile_justified": this.props.justified,
             });
 
+            let nameNode = null;
+            if (address.displayName) {
+                nameNode = <div className={nameClasses}>{ address.displayName }</div>
+            }
+
             info = (
-                <div className={emailClasses}>{ address.address }</div>
+                <div className="mx_AddressTile_mx">
+                    <div className={emailClasses}>{ address.address }</div>
+                    {nameNode}
+                </div>
             );
         } else {
             error = true;

From 81d95ecea01122a9d94f8ff14d55a6377244a2bb Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 25 Jan 2017 22:15:09 +0000
Subject: [PATCH 265/289] Fix cancel button on e2e import/export dialogs

Make sure that we preventDefault on the cancel button.

Fixes https://github.com/vector-im/riot-web/issues/3066
---
 .../views/dialogs/ExportE2eKeysDialog.js           | 14 +++++++++-----
 .../views/dialogs/ImportE2eKeysDialog.js           | 14 +++++++++-----
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/async-components/views/dialogs/ExportE2eKeysDialog.js b/src/async-components/views/dialogs/ExportE2eKeysDialog.js
index 816b8eb73d..56b9d56cc9 100644
--- a/src/async-components/views/dialogs/ExportE2eKeysDialog.js
+++ b/src/async-components/views/dialogs/ExportE2eKeysDialog.js
@@ -71,7 +71,7 @@ export default React.createClass({
             return this.props.matrixClient.exportRoomKeys();
         }).then((k) => {
             return MegolmExportEncryption.encryptMegolmKeyFile(
-                JSON.stringify(k), passphrase
+                JSON.stringify(k), passphrase,
             );
         }).then((f) => {
             const blob = new Blob([f], {
@@ -95,9 +95,14 @@ export default React.createClass({
         });
     },
 
+    _onCancelClick: function(ev) {
+        ev.preventDefault();
+        this.props.onFinished(false);
+        return false;
+    },
+
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
 
         const disableForm = (this.state.phase === PHASE_EXPORTING);
 
@@ -159,10 +164,9 @@ export default React.createClass({
                         <input className='mx_Dialog_primary' type='submit' value='Export'
                              disabled={disableForm}
                         />
-                        <AccessibleButton element='button' onClick={this.props.onFinished}
-                                disabled={disableForm}>
+                        <button onClick={this._onCancelClick} disabled={disableForm}>
                             Cancel
-                        </AccessibleButton>
+                        </button>
                     </div>
                 </form>
             </BaseDialog>
diff --git a/src/async-components/views/dialogs/ImportE2eKeysDialog.js b/src/async-components/views/dialogs/ImportE2eKeysDialog.js
index 586bd9b6cc..ddd13813e2 100644
--- a/src/async-components/views/dialogs/ImportE2eKeysDialog.js
+++ b/src/async-components/views/dialogs/ImportE2eKeysDialog.js
@@ -80,7 +80,7 @@ export default React.createClass({
 
         return readFileAsArrayBuffer(file).then((arrayBuffer) => {
             return MegolmExportEncryption.decryptMegolmKeyFile(
-                arrayBuffer, passphrase
+                arrayBuffer, passphrase,
             );
         }).then((keys) => {
             return this.props.matrixClient.importRoomKeys(JSON.parse(keys));
@@ -98,9 +98,14 @@ export default React.createClass({
         });
     },
 
+    _onCancelClick: function(ev) {
+        ev.preventDefault();
+        this.props.onFinished(false);
+        return false;
+    },
+
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
 
         const disableForm = (this.state.phase !== PHASE_EDIT);
 
@@ -158,10 +163,9 @@ export default React.createClass({
                         <input className='mx_Dialog_primary' type='submit' value='Import'
                             disabled={!this.state.enableSubmit || disableForm}
                         />
-                        <AccessibleButton element='button' onClick={this.props.onFinished}
-                                disabled={disableForm}>
+                        <button onClick={this._onCancelClick} disabled={disableForm}>
                             Cancel
-                        </AccessibleButton>
+                        </button>
                     </div>
                 </form>
             </BaseDialog>

From bf66f77acb79d5bad1a354f43e290930e2947731 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 26 Jan 2017 10:08:44 +0000
Subject: [PATCH 266/289] Set state in _lookupThreepid

---
 .../views/dialogs/ChatInviteDialog.js         | 26 ++++++++-----------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index 4fadad5f84..09a18e5208 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -195,13 +195,7 @@ module.exports = React.createClass({
                         isKnown: false,
                     };
                     if (addrType == 'email') {
-                        this._lookupThreepid(addrType, query).then((res) => {
-                            if (res !== null) {
-                                this.setState({
-                                    queryList: [res]
-                                });
-                            }
-                        }).done();
+                        this._lookupThreepid(addrType, query).done();
                     }
                 }
             }
@@ -467,14 +461,16 @@ module.exports = React.createClass({
             if (this.state.queryList[0] && this.state.queryList[0].address !== address) {
                 return null;
             }
-            // return an InviteAddressType
-            return {
-                addressType: medium,
-                address: address,
-                displayName: res.displayname,
-                avatarMxc: res.avatar_url,
-                isKnown: true,
-            }
+            this.setState({
+                queryList: [{
+                    // an InviteAddressType
+                    addressType: medium,
+                    address: address,
+                    displayName: res.displayname,
+                    avatarMxc: res.avatar_url,
+                    isKnown: true,
+                }]
+            });
         });
     },
 

From 23a25e550dcc08993f87ddc6f04fc4d33698dd78 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 26 Jan 2017 10:09:33 +0000
Subject: [PATCH 267/289] Missed a `function`

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

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index 09a18e5208..e172ddd657 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -439,7 +439,7 @@ module.exports = React.createClass({
         return inviteList;
     },
 
-    _lookupThreepid(medium, address) {
+    _lookupThreepid: function(medium, address) {
         // wait a bit to let the user finish typing
         return q.delay(500).then(() => {
             // If the query has changed, forget it

From c42b705497d6ee0ea29da0540b4dcf917c210fea Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 26 Jan 2017 10:54:07 +0000
Subject: [PATCH 268/289] Use a cancel function

rather than checking queryList each time
---
 .../views/dialogs/ChatInviteDialog.js         | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index e172ddd657..fa7b30aa17 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -194,6 +194,7 @@ module.exports = React.createClass({
                         address: query,
                         isKnown: false,
                     };
+                    if (this._cancelThreepidLookup) this._cancelThreepidLookup();
                     if (addrType == 'email') {
                         this._lookupThreepid(addrType, query).done();
                     }
@@ -216,6 +217,7 @@ module.exports = React.createClass({
                 inviteList: inviteList,
                 queryList: [],
             });
+            if (this._cancelThreepidLookup) this._cancelThreepidLookup();
         };
     },
 
@@ -233,6 +235,7 @@ module.exports = React.createClass({
             inviteList: inviteList,
             queryList: [],
         });
+        if (this._cancelThreepidLookup) this._cancelThreepidLookup();
     },
 
     _getDirectMessageRoom: function(addr) {
@@ -436,31 +439,32 @@ module.exports = React.createClass({
             inviteList: inviteList,
             queryList: [],
         });
+        if (this._cancelThreepidLookup) this._cancelThreepidLookup();
         return inviteList;
     },
 
     _lookupThreepid: function(medium, address) {
+        let cancelled = false;
+        // Note that we can't safely remove this after we're done
+        // because we don't know that it's the same one, so we just
+        // leave it: it's replacing the old one each time so it's
+        // not like they leak.
+        this._cancelThreepidLookup = function() {
+            cancelled = true;
+        }
+
         // wait a bit to let the user finish typing
         return q.delay(500).then(() => {
-            // If the query has changed, forget it
-            if (this.state.queryList[0] && this.state.queryList[0].address !== address) {
-                return null;
-            }
+            if (cancelled) return null;
             return MatrixClientPeg.get().lookupThreePid(medium, address);
         }).then((res) => {
             if (res === null || !res.mxid) return null;
-            // If the query has changed now, drop the response
-            if (this.state.queryList[0] && this.state.queryList[0].address !== address) {
-                return null;
-            }
+            if (cancelled) return null;
 
             return MatrixClientPeg.get().getProfileInfo(res.mxid);
         }).then((res) => {
             if (res === null) return null;
-            // If the query has changed now, drop the response
-            if (this.state.queryList[0] && this.state.queryList[0].address !== address) {
-                return null;
-            }
+            if (cancelled) return null;
             this.setState({
                 queryList: [{
                     // an InviteAddressType

From 9c99dafba5916bba9e8020517f690c4a98c54325 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 26 Jan 2017 17:03:01 +0000
Subject: [PATCH 269/289] Guard onStatusBarVisible/Hidden with this.unmounted

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

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 24c8ff53c0..eeb852a87f 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1332,12 +1332,14 @@ module.exports = React.createClass({
     },
 
     onStatusBarVisible: function() {
+        if (this.unmounted) return;
         this.setState({
             statusBarVisible: true,
         });
     },
 
     onStatusBarHidden: function() {
+        if (this.unmounted) return;
         this.setState({
             statusBarVisible: false,
         });

From f462bd8f9948dc9ea22477587ff29f5d56df0242 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukebarnard1@users.noreply.github.com>
Date: Thu, 26 Jan 2017 18:07:42 +0000
Subject: [PATCH 270/289] Expand status *area* unless status *bar* not visible
 (#655)

---
 src/components/structures/RoomView.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index eeb852a87f..38b3346e29 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1509,13 +1509,14 @@ module.exports = React.createClass({
         });
 
         var statusBar;
+        let isStatusAreaExpanded = true;
 
         if (ContentMessages.getCurrentUploads().length > 0) {
             var UploadBar = sdk.getComponent('structures.UploadBar');
             statusBar = <UploadBar room={this.state.room} />;
         } else if (!this.state.searchResults) {
             var RoomStatusBar = sdk.getComponent('structures.RoomStatusBar');
-
+            isStatusAreaExpanded = this.state.statusBarVisible;
             statusBar = <RoomStatusBar
                 room={this.state.room}
                 tabComplete={this.tabComplete}
@@ -1685,7 +1686,7 @@ module.exports = React.createClass({
             );
         }
         let statusBarAreaClass = "mx_RoomView_statusArea mx_fadable";
-        if (this.state.statusBarVisible) {
+        if (isStatusAreaExpanded) {
             statusBarAreaClass += " mx_RoomView_statusArea_expanded";
         }
 

From d9a8acd431acba65b3624055753cfba5b4d2b237 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukebarnard1@users.noreply.github.com>
Date: Fri, 27 Jan 2017 16:31:36 +0000
Subject: [PATCH 271/289] Redo team-based registration (#657)

For compatibility with referral campaign flows, re-implement team registration such that the team is selected through providing an email with a known team domain. The support email is now only shown when an email that _looks_ like a UK/US university email address, but is not known.
---
 .../structures/login/Registration.js          |  16 ++-
 .../views/login/RegistrationForm.js           | 127 +++++++-----------
 2 files changed, 60 insertions(+), 83 deletions(-)

diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js
index 90140b3280..20c26c6b22 100644
--- a/src/components/structures/login/Registration.js
+++ b/src/components/structures/login/Registration.js
@@ -90,6 +90,7 @@ module.exports = React.createClass({
     },
 
     componentWillMount: function() {
+        this._unmounted = false;
         this.dispatcherRef = dis.register(this.onAction);
         // attach this to the instance rather than this.state since it isn't UI
         this.registerLogic = new Signup.Register(
@@ -107,6 +108,7 @@ module.exports = React.createClass({
 
     componentWillUnmount: function() {
         dis.unregister(this.dispatcherRef);
+        this._unmounted = true;
     },
 
     componentDidMount: function() {
@@ -273,6 +275,14 @@ module.exports = React.createClass({
         });
     },
 
+    onTeamSelected: function(team) {
+        if (!this._unmounted) {
+            this.setState({
+                teamIcon: team ? team.icon : null,
+            });
+        }
+    },
+
     _getRegisterContentJsx: function() {
         var currStep = this.registerLogic.getStep();
         var registerStep;
@@ -293,7 +303,9 @@ module.exports = React.createClass({
                         guestUsername={this.props.username}
                         minPasswordLength={MIN_PASSWORD_LENGTH}
                         onError={this.onFormValidationFailed}
-                        onRegisterClick={this.onFormSubmit} />
+                        onRegisterClick={this.onFormSubmit}
+                        onTeamSelected={this.onTeamSelected}
+                    />
                 );
                 break;
             case "Register.STEP_m.login.email.identity":
@@ -367,7 +379,7 @@ module.exports = React.createClass({
         return (
             <div className="mx_Login">
                 <div className="mx_Login_box">
-                    <LoginHeader />
+                    <LoginHeader icon={this.state.teamIcon}/>
                     {this._getRegisterContentJsx()}
                     <LoginFooter />
                 </div>
diff --git a/src/components/views/login/RegistrationForm.js b/src/components/views/login/RegistrationForm.js
index f8a0863f70..1cb8253812 100644
--- a/src/components/views/login/RegistrationForm.js
+++ b/src/components/views/login/RegistrationForm.js
@@ -44,8 +44,8 @@ module.exports = React.createClass({
             teams: React.PropTypes.arrayOf(React.PropTypes.shape({
                 // The displayed name of the team
                 "name": React.PropTypes.string,
-                // The suffix with which every team email address ends
-                "emailSuffix": React.PropTypes.string,
+                // The domain of team email addresses
+                "domain": React.PropTypes.string,
             })).required,
         }),
 
@@ -117,9 +117,6 @@ module.exports = React.createClass({
 
     _doSubmit: function() {
         let email = this.refs.email.value.trim();
-        if (this.state.selectedTeam) {
-            email += "@" + this.state.selectedTeam.emailSuffix;
-        }
         var promise = this.props.onRegisterClick({
             username: this.refs.username.value.trim() || this.props.guestUsername,
             password: this.refs.password.value.trim(),
@@ -134,25 +131,6 @@ module.exports = React.createClass({
         }
     },
 
-    onSelectTeam: function(teamIndex) {
-        let team = this._getSelectedTeam(teamIndex);
-        if (team) {
-            this.refs.email.value = this.refs.email.value.split("@")[0];
-        }
-        this.setState({
-            selectedTeam: team,
-            showSupportEmail: teamIndex === "other",
-        });
-    },
-
-    _getSelectedTeam: function(teamIndex) {
-        if (this.props.teamsConfig &&
-            this.props.teamsConfig.teams[teamIndex]) {
-            return this.props.teamsConfig.teams[teamIndex];
-        }
-        return null;
-    },
-
     /**
      * Returns true if all fields were valid last time
      * they were validated.
@@ -167,20 +145,36 @@ module.exports = React.createClass({
         return true;
     },
 
+    _isUniEmail: function(email) {
+        return email.endsWith('.ac.uk') || email.endsWith('.edu');
+    },
+
     validateField: function(field_id) {
         var pwd1 = this.refs.password.value.trim();
         var pwd2 = this.refs.passwordConfirm.value.trim();
 
         switch (field_id) {
             case FIELD_EMAIL:
-                let email = this.refs.email.value;
-                if (this.props.teamsConfig) {
-                    let team = this.state.selectedTeam;
-                    if (team) {
-                        email = email + "@" + team.emailSuffix;
-                    }
+                const email = this.refs.email.value;
+                if (this.props.teamsConfig && this._isUniEmail(email)) {
+                    const matchingTeam = this.props.teamsConfig.teams.find(
+                        (team) => {
+                            return email.split('@').pop() === team.domain;
+                        }
+                    ) || null;
+                    this.setState({
+                        selectedTeam: matchingTeam,
+                        showSupportEmail: !matchingTeam,
+                    });
+                    this.props.onTeamSelected(matchingTeam);
+                } else {
+                    this.props.onTeamSelected(null);
+                    this.setState({
+                        selectedTeam: null,
+                        showSupportEmail: false,
+                    });
                 }
-                let valid = email === '' || Email.looksValid(email);
+                const valid = email === '' || Email.looksValid(email);
                 this.markFieldValid(field_id, valid, "RegistrationForm.ERR_EMAIL_INVALID");
                 break;
             case FIELD_USERNAME:
@@ -260,61 +254,35 @@ module.exports = React.createClass({
         return cls;
     },
 
-    _renderEmailInputSuffix: function() {
-        let suffix = null;
-        if (!this.state.selectedTeam) {
-            return suffix;
-        }
-        let team = this.state.selectedTeam;
-        if (team) {
-            suffix = "@" + team.emailSuffix;
-        }
-        return suffix;
-    },
-
     render: function() {
         var self = this;
-        var emailSection, teamSection, teamAdditionSupport, registerButton;
+        var emailSection, belowEmailSection, registerButton;
         if (this.props.showEmail) {
-            let emailSuffix = this._renderEmailInputSuffix();
             emailSection = (
-                <div>
-                    <input type="text" ref="email"
-                        autoFocus={true} placeholder="Email address (optional)"
-                        defaultValue={this.props.defaultEmail}
-                        className={this._classForField(FIELD_EMAIL, 'mx_Login_field')}
-                        onBlur={function() {self.validateField(FIELD_EMAIL);}}
-                        value={self.state.email}/>
-                    {emailSuffix ? <input className="mx_Login_field" value={emailSuffix} disabled/> : null }
-                </div>
+                <input type="text" ref="email"
+                    autoFocus={true} placeholder="Email address (optional)"
+                    defaultValue={this.props.defaultEmail}
+                    className={this._classForField(FIELD_EMAIL, 'mx_Login_field')}
+                    onBlur={function() {self.validateField(FIELD_EMAIL);}}
+                    value={self.state.email}/>
             );
             if (this.props.teamsConfig) {
-                teamSection = (
-                    <select
-                        defaultValue="-1"
-                        className="mx_Login_field"
-                        onBlur={function() {self.validateField(FIELD_EMAIL);}}
-                        onChange={function(ev) {self.onSelectTeam(ev.target.value);}}
-                    >
-                        <option key="-1" value="-1">No team</option>
-                        {this.props.teamsConfig.teams.map((t, index) => {
-                            return (
-                                <option key={index} value={index}>
-                                    {t.name}
-                                </option>
-                            );
-                        })}
-                        <option key="-2" value="other">Other</option>
-                    </select>
-                );
                 if (this.props.teamsConfig.supportEmail && this.state.showSupportEmail) {
-                    teamAdditionSupport = (
-                        <span>
-                            If your team is not listed, email&nbsp;
+                    belowEmailSection = (
+                        <p className="mx_Login_support">
+                            Sorry, but your university is not registered with us just yet.&nbsp;
+                            Email us on&nbsp;
                             <a href={"mailto:" + this.props.teamsConfig.supportEmail}>
                                 {this.props.teamsConfig.supportEmail}
-                            </a>
-                        </span>
+                            </a>&nbsp;
+                            to get your university signed up. Or continue to register with Riot to enjoy our open source platform.
+                        </p>
+                    );
+                } else if (this.state.selectedTeam) {
+                    belowEmailSection = (
+                        <p className="mx_Login_support">
+                            You are registering with {this.state.selectedTeam.name}
+                        </p>
                     );
                 }
             }
@@ -333,11 +301,8 @@ module.exports = React.createClass({
         return (
             <div>
                 <form onSubmit={this.onSubmit}>
-                    {teamSection}
-                    {teamAdditionSupport}
-                    <br />
                     {emailSection}
-                    <br />
+                    {belowEmailSection}
                     <input type="text" ref="username"
                         placeholder={ placeholderUserName } defaultValue={this.props.defaultUsername}
                         className={this._classForField(FIELD_USERNAME, 'mx_Login_field')}

From f5458d34aaf8565a197ce8dc5f43492b52562dc1 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 27 Jan 2017 21:57:34 +0000
Subject: [PATCH 272/289] Fix inviting import fail

---
 src/components/views/dialogs/ChatInviteDialog.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index fa7b30aa17..ca3b07aa00 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import classNames from 'classnames';
 import sdk from '../../../index';
-import { getAddressType } from '../../../Invite';
+import { getAddressType, inviteMultipleToRoom } from '../../../Invite';
 import createRoom from '../../../createRoom';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import DMRoomMap from '../../../utils/DMRoomMap';
@@ -273,7 +273,7 @@ module.exports = React.createClass({
         if (this.props.roomId) {
             // Invite new user to a room
             var self = this;
-            Invite.inviteMultipleToRoom(this.props.roomId, addrTexts)
+            inviteMultipleToRoom(this.props.roomId, addrTexts)
             .then(function(addrs) {
                 var room = MatrixClientPeg.get().getRoom(self.props.roomId);
                 return self._showAnyInviteErrors(addrs, room);
@@ -307,7 +307,7 @@ module.exports = React.createClass({
             var room;
             createRoom().then(function(roomId) {
                 room = MatrixClientPeg.get().getRoom(roomId);
-                return Invite.inviteMultipleToRoom(roomId, addrTexts);
+                return inviteMultipleToRoom(roomId, addrTexts);
             })
             .then(function(addrs) {
                 return self._showAnyInviteErrors(addrs, room);

From 4e0889454a5d349a375606c2d98b29c558b1bea0 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 30 Jan 2017 15:50:31 +0000
Subject: [PATCH 273/289] GET /teams from RTS instead of config.json

Now that the RTS contains config for teams, use GET /teams to get that information so that users will see be able to register as a team (but not yet auto-join rooms, be sent to welcome page or be tracked as a referral).
---
 src/RtsClient.js                              | 15 ++++++
 src/components/structures/MatrixChat.js       |  2 +-
 .../structures/login/Registration.js          | 49 ++++++++++++-------
 3 files changed, 47 insertions(+), 19 deletions(-)
 create mode 100644 src/RtsClient.js

diff --git a/src/RtsClient.js b/src/RtsClient.js
new file mode 100644
index 0000000000..25ed71b72b
--- /dev/null
+++ b/src/RtsClient.js
@@ -0,0 +1,15 @@
+const q = require('q');
+const request = q.nfbind(require('browser-request'));
+
+export default class RtsClient {
+    constructor(url) {
+        this._url = url;
+    }
+
+    getTeamsConfig() {
+        return request({
+            url: this._url + '/teams',
+            json: true,
+        });
+    }
+}
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index cb61041d48..989ae5aace 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -1060,7 +1060,7 @@ module.exports = React.createClass({
                     defaultHsUrl={this.getDefaultHsUrl()}
                     defaultIsUrl={this.getDefaultIsUrl()}
                     brand={this.props.config.brand}
-                    teamsConfig={this.props.config.teamsConfig}
+                    teamServerConfig={this.props.config.teamServerConfig}
                     customHsUrl={this.getCurrentHsUrl()}
                     customIsUrl={this.getCurrentIsUrl()}
                     registrationUrl={this.props.registrationUrl}
diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js
index 20c26c6b22..e34007ef42 100644
--- a/src/components/structures/login/Registration.js
+++ b/src/components/structures/login/Registration.js
@@ -25,6 +25,7 @@ var ServerConfig = require("../../views/login/ServerConfig");
 var MatrixClientPeg = require("../../../MatrixClientPeg");
 var RegistrationForm = require("../../views/login/RegistrationForm");
 var CaptchaForm = require("../../views/login/CaptchaForm");
+var RtsClient = require("../../../RtsClient");
 
 var MIN_PASSWORD_LENGTH = 6;
 
@@ -49,20 +50,11 @@ module.exports = React.createClass({
         email: React.PropTypes.string,
         username: React.PropTypes.string,
         guestAccessToken: React.PropTypes.string,
-        teamsConfig: React.PropTypes.shape({
+        teamServerConfig: React.PropTypes.shape({
             // Email address to request new teams
-            supportEmail: React.PropTypes.string,
-            teams: React.PropTypes.arrayOf(React.PropTypes.shape({
-                // The displayed name of the team
-                "name": React.PropTypes.string,
-                // The suffix with which every team email address ends
-                "emailSuffix": React.PropTypes.string,
-                // The rooms to use during auto-join
-                "rooms": React.PropTypes.arrayOf(React.PropTypes.shape({
-                    "id": React.PropTypes.string,
-                    "autoJoin": React.PropTypes.bool,
-                })),
-            })).required,
+            supportEmail: React.PropTypes.string.isRequired,
+            // URL of the riot-team-server to get team configurations and track referrals
+            teamServerURL: React.PropTypes.string.isRequired,
         }),
 
         defaultDeviceDisplayName: React.PropTypes.string,
@@ -104,6 +96,27 @@ module.exports = React.createClass({
         this.registerLogic.setIdSid(this.props.idSid);
         this.registerLogic.setGuestAccessToken(this.props.guestAccessToken);
         this.registerLogic.recheckState();
+
+        if (this.props.teamServerConfig &&
+        this.props.teamServerConfig.teamServerURL &&
+        !this._rtsClient) {
+            this._rtsClient = new RtsClient(this.props.teamServerConfig.teamServerURL);
+
+            // GET team configurations including domains, names and icons
+            this._rtsClient.getTeamsConfig().done((args) => {
+                // args = [$request, $body]
+                const teamsConfig = {
+                    teams: args[1],
+                    supportEmail: this.props.teamServerConfig.supportEmail,
+                };
+                console.log('Setting teams config to ', teamsConfig);
+                this.setState({
+                    teamsConfig: teamsConfig,
+                });
+            }, (err) => {
+                console.error('Error retrieving config for teams', err);
+            });
+        }
     },
 
     componentWillUnmount: function() {
@@ -187,10 +200,10 @@ module.exports = React.createClass({
             });
 
             // Auto-join rooms
-            if (self.props.teamsConfig && self.props.teamsConfig.teams) {
-                for (let i = 0; i < self.props.teamsConfig.teams.length; i++) {
-                    let team = self.props.teamsConfig.teams[i];
-                    if (self.state.formVals.email.endsWith(team.emailSuffix)) {
+            if (self.state.teamsConfig && self.state.teamsConfig.teams) {
+                for (let i = 0; i < self.state.teamsConfig.teams.length; i++) {
+                    let team = self.state.teamsConfig.teams[i];
+                    if (self.state.formVals.email.endsWith(team.domain)) {
                         console.log("User successfully registered with team " + team.name);
                         if (!team.rooms) {
                             break;
@@ -299,7 +312,7 @@ module.exports = React.createClass({
                         defaultUsername={this.state.formVals.username}
                         defaultEmail={this.state.formVals.email}
                         defaultPassword={this.state.formVals.password}
-                        teamsConfig={this.props.teamsConfig}
+                        teamsConfig={this.state.teamsConfig}
                         guestUsername={this.props.username}
                         minPasswordLength={MIN_PASSWORD_LENGTH}
                         onError={this.onFormValidationFailed}

From 318d8710977b99a4b61799625c2620ac3afa105e Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 30 Jan 2017 16:13:57 +0000
Subject: [PATCH 274/289] Formatting

---
 src/components/structures/login/Registration.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js
index e34007ef42..f1085f2e07 100644
--- a/src/components/structures/login/Registration.js
+++ b/src/components/structures/login/Registration.js
@@ -97,9 +97,11 @@ module.exports = React.createClass({
         this.registerLogic.setGuestAccessToken(this.props.guestAccessToken);
         this.registerLogic.recheckState();
 
-        if (this.props.teamServerConfig &&
-        this.props.teamServerConfig.teamServerURL &&
-        !this._rtsClient) {
+        if (
+            this.props.teamServerConfig &&
+            this.props.teamServerConfig.teamServerURL &&
+            !this._rtsClient
+        ) {
             this._rtsClient = new RtsClient(this.props.teamServerConfig.teamServerURL);
 
             // GET team configurations including domains, names and icons

From eb4d7f04e79fb4ecea156eb83edb94919b53519f Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 30 Jan 2017 16:23:52 +0000
Subject: [PATCH 275/289] Use busy spinner when requesting teams

---
 src/components/structures/login/Registration.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js
index f1085f2e07..1456b666f4 100644
--- a/src/components/structures/login/Registration.js
+++ b/src/components/structures/login/Registration.js
@@ -67,6 +67,7 @@ module.exports = React.createClass({
     getInitialState: function() {
         return {
             busy: false,
+            teamServerBusy: false,
             errorText: null,
             // We remember the values entered by the user because
             // the registration form will be unmounted during the
@@ -104,8 +105,11 @@ module.exports = React.createClass({
         ) {
             this._rtsClient = new RtsClient(this.props.teamServerConfig.teamServerURL);
 
+            this.setState({
+                teamServerBusy: true,
+            });
             // GET team configurations including domains, names and icons
-            this._rtsClient.getTeamsConfig().done((args) => {
+            this._rtsClient.getTeamsConfig().then((args) => {
                 // args = [$request, $body]
                 const teamsConfig = {
                     teams: args[1],
@@ -117,6 +121,10 @@ module.exports = React.createClass({
                 });
             }, (err) => {
                 console.error('Error retrieving config for teams', err);
+            }).finally(() => {
+                this.setState({
+                    teamServerBusy: false,
+                });
             });
         }
     },
@@ -299,6 +307,8 @@ module.exports = React.createClass({
     },
 
     _getRegisterContentJsx: function() {
+        var Spinner = sdk.getComponent("elements.Spinner");
+
         var currStep = this.registerLogic.getStep();
         var registerStep;
         switch (currStep) {
@@ -308,6 +318,10 @@ module.exports = React.createClass({
             case "Register.STEP_m.login.dummy":
                 // NB. Our 'username' prop is specifically for upgrading
                 // a guest account
+                if (this.state.teamServerBusy) {
+                    registerStep = <Spinner />;
+                    break;
+                }
                 registerStep = (
                     <RegistrationForm
                         showEmail={true}

From f5efc8e7655ae18b928693e36a4bfc755367b899 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 30 Jan 2017 16:33:16 +0000
Subject: [PATCH 276/289] Use const, not var

---
 src/components/structures/login/Registration.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js
index 1456b666f4..eed370a7ac 100644
--- a/src/components/structures/login/Registration.js
+++ b/src/components/structures/login/Registration.js
@@ -307,7 +307,7 @@ module.exports = React.createClass({
     },
 
     _getRegisterContentJsx: function() {
-        var Spinner = sdk.getComponent("elements.Spinner");
+        const Spinner = sdk.getComponent("elements.Spinner");
 
         var currStep = this.registerLogic.getStep();
         var registerStep;

From 1e279d23354387ec585fd9e4f9d34d0c3a98cb4b Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 30 Jan 2017 16:35:34 +0000
Subject: [PATCH 277/289] Finish with .done()

---
 src/components/structures/login/Registration.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js
index eed370a7ac..a4dcd63d9d 100644
--- a/src/components/structures/login/Registration.js
+++ b/src/components/structures/login/Registration.js
@@ -125,7 +125,7 @@ module.exports = React.createClass({
                 this.setState({
                     teamServerBusy: false,
                 });
-            });
+            }).done();
         }
     },
 

From 4e9229e936a1d0991f4e958eb800e1d297658c9f Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 30 Jan 2017 16:37:16 +0000
Subject: [PATCH 278/289] Get rid of dupl. declaration

---
 src/components/structures/login/Registration.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js
index a4dcd63d9d..730f31c8ad 100644
--- a/src/components/structures/login/Registration.js
+++ b/src/components/structures/login/Registration.js
@@ -363,7 +363,6 @@ module.exports = React.createClass({
         }
         var busySpinner;
         if (this.state.busy) {
-            var Spinner = sdk.getComponent("elements.Spinner");
             busySpinner = (
                 <Spinner />
             );

From 878e5593ba7990b22cdc31f83e8a7e12e0cfbfd6 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukebarnard1@users.noreply.github.com>
Date: Tue, 31 Jan 2017 11:13:05 +0000
Subject: [PATCH 279/289] Implement tracking of referrals (#659)

* Implement tracking of referrals

This also modifies (or fixes) auto-joining.
---
 src/RtsClient.js                              | 28 ++++++++++
 src/components/structures/MatrixChat.js       |  1 +
 .../structures/login/Registration.js          | 54 ++++++++++++-------
 3 files changed, 65 insertions(+), 18 deletions(-)

diff --git a/src/RtsClient.js b/src/RtsClient.js
index 25ed71b72b..0067d0ae10 100644
--- a/src/RtsClient.js
+++ b/src/RtsClient.js
@@ -12,4 +12,32 @@ export default class RtsClient {
             json: true,
         });
     }
+
+    /**
+     * Track a referral with the Riot Team Server. This should be called once a referred
+     * user has been successfully registered.
+     * @param {string} referrer the user ID of one who referred the user to Riot.
+     * @param {string} user_id the user ID of the user being referred.
+     * @param {string} user_email the email address linked to `user_id`.
+     * @returns {Promise} a promise that resolves to [$response, $body], where $response
+     * is the response object created by the request lib and $body is the object parsed
+     * from the JSON response body. $body should be { team_token: 'sometoken' } upon
+     * success.
+     */
+    trackReferral(referrer, user_id, user_email) {
+        return request({
+            url: this._url + '/register',
+            json: true,
+            body: {referrer, user_id, user_email},
+            method: 'POST',
+        });
+    }
+
+    getTeam(team_token) {
+        return request({
+            url: this._url + '/teamConfiguration',
+            json: true,
+            qs: {team_token},
+        });
+    }
 }
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 989ae5aace..6a84fb940f 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -1055,6 +1055,7 @@ module.exports = React.createClass({
                     sessionId={this.state.register_session_id}
                     idSid={this.state.register_id_sid}
                     email={this.props.startingFragmentQueryParams.email}
+                    referrer={this.props.startingFragmentQueryParams.referrer}
                     username={this.state.upgradeUsername}
                     guestAccessToken={this.state.guestAccessToken}
                     defaultHsUrl={this.getDefaultHsUrl()}
diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js
index 730f31c8ad..82cdbef9ca 100644
--- a/src/components/structures/login/Registration.js
+++ b/src/components/structures/login/Registration.js
@@ -48,6 +48,7 @@ module.exports = React.createClass({
         defaultIsUrl: React.PropTypes.string,
         brand: React.PropTypes.string,
         email: React.PropTypes.string,
+        referrer: React.PropTypes.string,
         username: React.PropTypes.string,
         guestAccessToken: React.PropTypes.string,
         teamServerConfig: React.PropTypes.shape({
@@ -56,6 +57,7 @@ module.exports = React.createClass({
             // URL of the riot-team-server to get team configurations and track referrals
             teamServerURL: React.PropTypes.string.isRequired,
         }),
+        teamSelected: null,
 
         defaultDeviceDisplayName: React.PropTypes.string,
 
@@ -209,24 +211,42 @@ module.exports = React.createClass({
                 accessToken: response.access_token
             });
 
-            // Auto-join rooms
-            if (self.state.teamsConfig && self.state.teamsConfig.teams) {
-                for (let i = 0; i < self.state.teamsConfig.teams.length; i++) {
-                    let team = self.state.teamsConfig.teams[i];
-                    if (self.state.formVals.email.endsWith(team.domain)) {
-                        console.log("User successfully registered with team " + team.name);
+            if (
+                self._rtsClient &&
+                self.props.referrer &&
+                self.state.teamSelected
+            ) {
+                // Track referral, get team_token in order to retrieve team config
+                self._rtsClient.trackReferral(
+                    self.props.referrer,
+                    response.user_id,
+                    self.state.formVals.email
+                ).then((args) => {
+                    const teamToken = args[1].team_token;
+                    // Store for use /w welcome pages
+                    window.localStorage.setItem('mx_team_token', teamToken);
+
+                    self._rtsClient.getTeam(teamToken).then((args) => {
+                        const team = args[1];
+                        console.log(
+                            `User successfully registered with team ${team.name}`
+                        );
                         if (!team.rooms) {
-                            break;
+                            return;
                         }
+                        // Auto-join rooms
                         team.rooms.forEach((room) => {
-                            if (room.autoJoin) {
-                                console.log("Auto-joining " + room.id);
-                                MatrixClientPeg.get().joinRoom(room.id);
+                            if (room.auto_join && room.room_id) {
+                                console.log(`Auto-joining ${room.room_id}`);
+                                MatrixClientPeg.get().joinRoom(room.room_id);
                             }
                         });
-                        break;
-                    }
-                }
+                    }, (err) => {
+                        console.error('Error getting team config', err);
+                    });
+                }, (err) => {
+                    console.error('Error tracking referral', err);
+                });
             }
 
             if (self.props.brand) {
@@ -298,11 +318,9 @@ module.exports = React.createClass({
         });
     },
 
-    onTeamSelected: function(team) {
+    onTeamSelected: function(teamSelected) {
         if (!this._unmounted) {
-            this.setState({
-                teamIcon: team ? team.icon : null,
-            });
+            this.setState({ teamSelected });
         }
     },
 
@@ -407,7 +425,7 @@ module.exports = React.createClass({
         return (
             <div className="mx_Login">
                 <div className="mx_Login_box">
-                    <LoginHeader icon={this.state.teamIcon}/>
+                    <LoginHeader icon={this.state.teamSelected ? this.state.teamSelected.icon : null}/>
                     {this._getRegisterContentJsx()}
                     <LoginFooter />
                 </div>

From 62c8c202681afe869efa2f47d55c4e3118111e6c Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Tue, 31 Jan 2017 12:29:16 +0000
Subject: [PATCH 280/289] Megolm export: fix Android incompatibility

I'd carefully added a workaround to maintain compatibility with the Android
AES-CTR implementation... to the wrong thing.
---
 src/utils/MegolmExportEncryption.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/utils/MegolmExportEncryption.js b/src/utils/MegolmExportEncryption.js
index abae81e5ad..4745aad017 100644
--- a/src/utils/MegolmExportEncryption.js
+++ b/src/utils/MegolmExportEncryption.js
@@ -107,14 +107,14 @@ export function encryptMegolmKeyFile(data, password, options) {
     const salt = new Uint8Array(16);
     window.crypto.getRandomValues(salt);
 
-    // clear bit 63 of the salt to stop us hitting the 64-bit counter boundary
-    // (which would mean we wouldn't be able to decrypt on Android). The loss
-    // of a single bit of salt is a price we have to pay.
-    salt[9] &= 0x7f;
-
     const iv = new Uint8Array(16);
     window.crypto.getRandomValues(iv);
 
+    // clear bit 63 of the IV to stop us hitting the 64-bit counter boundary
+    // (which would mean we wouldn't be able to decrypt on Android). The loss
+    // of a single bit of iv is a price we have to pay.
+    iv[9] &= 0x7f;
+
     return deriveKeys(salt, kdf_rounds, password).then((keys) => {
         const [aes_key, hmac_key] = keys;
 

From c5f447260afa4f671afdd3f68ecbd521e3df4d0f Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Tue, 31 Jan 2017 12:30:30 +0000
Subject: [PATCH 281/289] Megolm import: Fix handling of short files

Make sure we throw a sensible error when the body of the data is too short.
---
 src/utils/MegolmExportEncryption.js       |  2 +-
 test/utils/MegolmExportEncryption-test.js | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/utils/MegolmExportEncryption.js b/src/utils/MegolmExportEncryption.js
index 4745aad017..27c6ede937 100644
--- a/src/utils/MegolmExportEncryption.js
+++ b/src/utils/MegolmExportEncryption.js
@@ -50,7 +50,7 @@ export function decryptMegolmKeyFile(data, password) {
     }
 
     const ciphertextLength = body.length-(1+16+16+4+32);
-    if (body.length < 0) {
+    if (ciphertextLength < 0) {
         throw new Error('Invalid file: too short');
     }
 
diff --git a/test/utils/MegolmExportEncryption-test.js b/test/utils/MegolmExportEncryption-test.js
index 28752ae529..0c49fd48d1 100644
--- a/test/utils/MegolmExportEncryption-test.js
+++ b/test/utils/MegolmExportEncryption-test.js
@@ -75,6 +75,16 @@ describe('MegolmExportEncryption', function() {
                 .toThrow('Trailer line not found');
         });
 
+        it('should handle a too-short body', function() {
+            const input=stringToArray(`-----BEGIN MEGOLM SESSION DATA-----
+AXNhbHRzYWx0c2FsdHNhbHSIiIiIiIiIiIiIiIiIiIiIAAAACmIRUW2OjZ3L2l6j9h0lHlV3M2dx
+cissyYBxjsfsAn
+-----END MEGOLM SESSION DATA-----
+`);
+            expect(()=>{MegolmExportEncryption.decryptMegolmKeyFile(input, '')})
+                .toThrow('Invalid file: too short');
+        });
+
         it('should decrypt a range of inputs', function(done) {
             function next(i) {
                 if (i >= TEST_VECTORS.length) {

From c2b0c603c03fb638c1192270dac9ddd76afecf66 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 31 Jan 2017 13:17:01 +0000
Subject: [PATCH 282/289] Add referral section to user settings

This allows those who have registered to referrer other students to Riot and have their referral counted for the campaign competition.
---
 src/components/structures/UserSettings.js     | 23 +++++++++++++++++++
 .../structures/login/Registration.js          |  2 +-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index cf4a63e2f7..ab2b73711a 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -444,6 +444,27 @@ module.exports = React.createClass({
         );
     },
 
+    _renderReferral: function() {
+        const teamToken = window.localStorage.getItem('mx_team_token');
+        if (!teamToken) {
+            return null;
+        }
+        if (typeof teamToken !== 'string') {
+            console.warn('Team token not a string');
+            return null;
+        }
+        const href = window.location.origin +
+            `/#/register?referrer=${this._me}&team_token=${teamToken}`;
+        return (
+            <div>
+                <h3>Referral</h3>
+                <div className="mx_UserSettings_section">
+                    Refer a friend to Riot: <a href={href}>{href}</a>
+                </div>
+            </div>
+        );
+    },
+
     _renderUserInterfaceSettings: function() {
         var client = MatrixClientPeg.get();
 
@@ -819,6 +840,8 @@ module.exports = React.createClass({
                     {accountJsx}
                 </div>
 
+                {this._renderReferral()}
+
                 {notification_area}
 
                 {this._renderUserInterfaceSettings()}
diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js
index 82cdbef9ca..d38441a76c 100644
--- a/src/components/structures/login/Registration.js
+++ b/src/components/structures/login/Registration.js
@@ -57,7 +57,7 @@ module.exports = React.createClass({
             // URL of the riot-team-server to get team configurations and track referrals
             teamServerURL: React.PropTypes.string.isRequired,
         }),
-        teamSelected: null,
+        teamSelected: React.PropTypes.object,
 
         defaultDeviceDisplayName: React.PropTypes.string,
 

From 4c4cc585c74730c7e591688d1e1785a85d030883 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 31 Jan 2017 13:40:01 +0000
Subject: [PATCH 283/289] Throw errors on !==200 status codes from RTS

---
 src/RtsClient.js | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/RtsClient.js b/src/RtsClient.js
index 0067d0ae10..fe1f0538ca 100644
--- a/src/RtsClient.js
+++ b/src/RtsClient.js
@@ -1,5 +1,25 @@
 const q = require('q');
-const request = q.nfbind(require('browser-request'));
+const request = (opts) => {
+    const expectingJSONOnSucess = opts.json;
+    if (opts.json) {
+        opts.json = false;
+    }
+    return q.nfbind(require('browser-request'))(opts).then((args) => {
+        const response = args[0];
+        let body = args[1];
+
+        // Do not expect JSON on error status code, throw error instead
+        if (response.statusCode !== 200) {
+            throw new Error(body);
+        }
+
+        if (expectingJSONOnSucess) {
+            body = JSON.parse(body);
+        }
+
+        return [response, body];
+    });
+};
 
 export default class RtsClient {
     constructor(url) {

From c261ca1f5ee8342a00ae5b4949cc03f22586de0b Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 31 Jan 2017 15:17:43 +0000
Subject: [PATCH 284/289] Allow base referral URL to be configurable

---
 src/components/structures/LoggedInView.js | 1 +
 src/components/structures/UserSettings.js | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js
index c00bd2c6db..44beb787c8 100644
--- a/src/components/structures/LoggedInView.js
+++ b/src/components/structures/LoggedInView.js
@@ -171,6 +171,7 @@ export default React.createClass({
                     brand={this.props.config.brand}
                     collapsedRhs={this.props.collapse_rhs}
                     enableLabs={this.props.config.enableLabs}
+                    referralBaseUrl={this.props.config.referralBaseUrl}
                 />;
                 if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.sideOpacity}/>;
                 break;
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index ab2b73711a..3d330e3649 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -92,6 +92,9 @@ module.exports = React.createClass({
         // True to show the 'labs' section of experimental features
         enableLabs: React.PropTypes.bool,
 
+        // The base URL to use in the referral link. Defaults to window.location.origin.
+        referralBaseUrl: React.PropTypes.string,
+
         // true if RightPanel is collapsed
         collapsedRhs: React.PropTypes.bool,
     },
@@ -453,7 +456,7 @@ module.exports = React.createClass({
             console.warn('Team token not a string');
             return null;
         }
-        const href = window.location.origin +
+        const href = (this.props.referralBaseUrl || window.location.origin) +
             `/#/register?referrer=${this._me}&team_token=${teamToken}`;
         return (
             <div>

From 2f188770e56a557871d5f482b40ea31ef5031750 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 31 Jan 2017 15:59:38 +0000
Subject: [PATCH 285/289] Typo

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

diff --git a/src/RtsClient.js b/src/RtsClient.js
index fe1f0538ca..0115edacb4 100644
--- a/src/RtsClient.js
+++ b/src/RtsClient.js
@@ -1,6 +1,6 @@
 const q = require('q');
 const request = (opts) => {
-    const expectingJSONOnSucess = opts.json;
+    const expectingJSONOnSuccess = opts.json;
     if (opts.json) {
         opts.json = false;
     }
@@ -13,7 +13,7 @@ const request = (opts) => {
             throw new Error(body);
         }
 
-        if (expectingJSONOnSucess) {
+        if (expectingJSONOnSuccess) {
             body = JSON.parse(body);
         }
 

From cd1cf09dc98af832bcbcdc40da84523ecd53faa7 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Tue, 31 Jan 2017 22:40:53 +0000
Subject: [PATCH 286/289] Make tests pass on Chrome again

It seems that a number of the tests had started failing when run in
Chrome. They were fine under PhantomJS, but the MegolmExport tests only work
under Chrome, and I need them to work...

Mostly the problems were timing-related, where assumptions made about how
quickly the `then` handler on a promise would be called were no longer
valid. Possibly Chrome 55 has made some changes to the relative priorities of
setTimeout and sendMessage calls.

One of the TimelinePanel tests was failing because it was expecting the contents
of a div to take up more room than they actually were. It's possible this is
something very environment-specific; hopefully the new value will work on a
wider range of machines.

Also some logging tweaks.
---
 karma.conf.js                                 |  8 +++++
 src/components/structures/ScrollPanel.js      | 10 +++----
 test/components/structures/RoomView-test.js   | 13 +++-----
 .../components/structures/ScrollPanel-test.js | 30 +++++++++++++++----
 .../structures/TimelinePanel-test.js          |  8 +++--
 test/test-utils.js                            |  8 +++++
 6 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/karma.conf.js b/karma.conf.js
index 131a03ce79..6d3047bb3b 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -165,6 +165,14 @@ module.exports = function (config) {
             },
             devtool: 'inline-source-map',
         },
+
+        webpackMiddleware: {
+            stats: {
+                // don't fill the console up with a mahoosive list of modules
+                chunks: false,
+            },
+        },
+
         browserNoActivityTimeout: 15000,
     });
 };
diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js
index 1391d2b740..c6bcdc45cd 100644
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.js
@@ -570,7 +570,7 @@ module.exports = React.createClass({
         var boundingRect = node.getBoundingClientRect();
         var scrollDelta = boundingRect.bottom + pixelOffset - wrapperRect.bottom;
 
-        debuglog("Scrolling to token '" + node.dataset.scrollToken + "'+" +
+        debuglog("ScrollPanel: scrolling to token '" + node.dataset.scrollToken + "'+" +
                  pixelOffset + " (delta: "+scrollDelta+")");
 
         if(scrollDelta != 0) {
@@ -582,7 +582,7 @@ module.exports = React.createClass({
     _saveScrollState: function() {
         if (this.props.stickyBottom && this.isAtBottom()) {
             this.scrollState = { stuckAtBottom: true };
-            debuglog("Saved scroll state", this.scrollState);
+            debuglog("ScrollPanel: Saved scroll state", this.scrollState);
             return;
         }
 
@@ -601,12 +601,12 @@ module.exports = React.createClass({
                     trackedScrollToken: node.dataset.scrollToken,
                     pixelOffset: wrapperRect.bottom - boundingRect.bottom,
                 };
-                debuglog("Saved scroll state", this.scrollState);
+                debuglog("ScrollPanel: saved scroll state", this.scrollState);
                 return;
             }
         }
 
-        debuglog("Unable to save scroll state: found no children in the viewport");
+        debuglog("ScrollPanel: unable to save scroll state: found no children in the viewport");
     },
 
     _restoreSavedScrollState: function() {
@@ -640,7 +640,7 @@ module.exports = React.createClass({
             this._lastSetScroll = scrollNode.scrollTop;
         }
 
-        debuglog("Set scrollTop:", scrollNode.scrollTop,
+        debuglog("ScrollPanel: set scrollTop:", scrollNode.scrollTop,
                  "requested:", scrollTop,
                  "_lastSetScroll:", this._lastSetScroll);
     },
diff --git a/test/components/structures/RoomView-test.js b/test/components/structures/RoomView-test.js
index 58db29b1ee..8e7c8160b8 100644
--- a/test/components/structures/RoomView-test.js
+++ b/test/components/structures/RoomView-test.js
@@ -42,17 +42,12 @@ describe('RoomView', function () {
     it('resolves a room alias to a room id', function (done) {
         peg.get().getRoomIdForAlias.returns(q({room_id: "!randomcharacters:aser.ver"}));
 
-        var onRoomIdResolved = sinon.spy();
+        function onRoomIdResolved(room_id) {
+            expect(room_id).toEqual("!randomcharacters:aser.ver");
+            done();
+        }
 
         ReactDOM.render(<RoomView roomAddress="#alias:ser.ver" onRoomIdResolved={onRoomIdResolved} />, parentDiv);
-
-        process.nextTick(function() {
-            // These expect()s don't read very well and don't give very good failure
-            // messages, but expect's toHaveBeenCalled only takes an expect spy object,
-            // not a sinon spy object.
-            expect(onRoomIdResolved.called).toExist();
-            done();
-        });
     });
 
     it('joins by alias if given an alias', function (done) {
diff --git a/test/components/structures/ScrollPanel-test.js b/test/components/structures/ScrollPanel-test.js
index 13721c9ecd..eacaeb5fb4 100644
--- a/test/components/structures/ScrollPanel-test.js
+++ b/test/components/structures/ScrollPanel-test.js
@@ -73,6 +73,7 @@ var Tester = React.createClass({
 
     /* returns a promise which will resolve when the fill happens */
     awaitFill: function(dir) {
+        console.log("ScrollPanel Tester: awaiting " + dir + " fill");
         var defer = q.defer();
         this._fillDefers[dir] = defer;
         return defer.promise;
@@ -80,7 +81,7 @@ var Tester = React.createClass({
 
     _onScroll: function(ev) {
         var st = ev.target.scrollTop;
-        console.log("Scroll event; scrollTop: " + st);
+        console.log("ScrollPanel Tester: scroll event; scrollTop: " + st);
         this.lastScrollEvent = st;
 
         var d = this._scrollDefer;
@@ -159,10 +160,29 @@ describe('ScrollPanel', function() {
         scrollingDiv = ReactTestUtils.findRenderedDOMComponentWithClass(
             tester, "gm-scroll-view");
 
-        // wait for a browser tick to let the initial paginates complete
-        setTimeout(function() {
-            done();
-        }, 0);
+        // we need to make sure we don't call done() until q has finished
+        // running the completion handlers from the fill requests. We can't
+        // just use .done(), because that will end up ahead of those handlers
+        // in the queue. We can't use window.setTimeout(0), because that also might
+        // run ahead of those handlers.
+        const sp = tester.scrollPanel();
+        let retriesRemaining = 1;
+        const awaitReady = function() {
+            return q().then(() => {
+                if (sp._pendingFillRequests.b === false &&
+                    sp._pendingFillRequests.f === false
+                   ) {
+                    return;
+                }
+
+                if (retriesRemaining == 0) {
+                    throw new Error("fillRequests did not complete");
+                }
+                retriesRemaining--;
+                return awaitReady();
+            });
+        };
+        awaitReady().done(done);
     });
 
     afterEach(function() {
diff --git a/test/components/structures/TimelinePanel-test.js b/test/components/structures/TimelinePanel-test.js
index b2cdfbd590..be60691b5c 100644
--- a/test/components/structures/TimelinePanel-test.js
+++ b/test/components/structures/TimelinePanel-test.js
@@ -99,7 +99,11 @@ describe('TimelinePanel', function() {
         // the document so that we can interact with it properly.
         parentDiv = document.createElement('div');
         parentDiv.style.width = '800px';
-        parentDiv.style.height = '600px';
+
+        // This has to be slightly carefully chosen. We expect to have to do
+        // exactly one pagination to fill it.
+        parentDiv.style.height = '500px';
+
         parentDiv.style.overflow = 'hidden';
         document.body.appendChild(parentDiv);
     });
@@ -235,7 +239,7 @@ describe('TimelinePanel', function() {
                 expect(client.paginateEventTimeline.callCount).toEqual(0);
                 done();
             }, 0);
-        }, 0);
+        }, 10);
     });
 
     it("should let you scroll down to the bottom after you've scrolled up", function(done) {
diff --git a/test/test-utils.js b/test/test-utils.js
index cdfae4421c..71d3bd92d6 100644
--- a/test/test-utils.js
+++ b/test/test-utils.js
@@ -14,7 +14,15 @@ var MatrixEvent = jssdk.MatrixEvent;
  */
 export function beforeEach(context) {
     var desc = context.currentTest.fullTitle();
+
     console.log();
+
+    // this puts a mark in the chrome devtools timeline, which can help
+    // figure out what's been going on.
+    if (console.timeStamp) {
+        console.timeStamp(desc);
+    }
+
     console.log(desc);
     console.log(new Array(1 + desc.length).join("="));
 };

From cf049f2d75ace79eef292268e57fd9a1d1857907 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 1 Feb 2017 09:59:46 +0000
Subject: [PATCH 287/289] Exempt lines which look like pure JSX from the maxlen
 line

---
 .eslintrc.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index d5684e21a7..92280344fa 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -53,7 +53,11 @@ module.exports = {
          * things that are errors in the js-sdk config that the current
          * code does not adhere to, turned down to warn
          */
-        "max-len": ["warn"],
+        "max-len": ["warn", {
+            // apparently people believe the length limit shouldn't apply
+            // to JSX.
+            ignorePattern: '^\\s*<',
+        }],
         "valid-jsdoc": ["warn"],
         "new-cap": ["warn"],
         "key-spacing": ["warn"],

From fa1981ce0915f707d928f4b26de17ef226efcccf Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 1 Feb 2017 10:39:52 +0000
Subject: [PATCH 288/289] Use whatwg-fetch instead of browser-request

---
 src/RtsClient.js                              | 83 +++++++++++--------
 .../structures/login/Registration.js          | 16 ++--
 2 files changed, 54 insertions(+), 45 deletions(-)

diff --git a/src/RtsClient.js b/src/RtsClient.js
index 0115edacb4..f1cbc8e6f1 100644
--- a/src/RtsClient.js
+++ b/src/RtsClient.js
@@ -1,36 +1,49 @@
-const q = require('q');
-const request = (opts) => {
-    const expectingJSONOnSuccess = opts.json;
-    if (opts.json) {
-        opts.json = false;
+import 'whatwg-fetch';
+
+function checkStatus(response) {
+    if (!response.ok) {
+        return response.text().then((text) => {
+            throw new Error(text);
+        });
     }
-    return q.nfbind(require('browser-request'))(opts).then((args) => {
-        const response = args[0];
-        let body = args[1];
+    return response;
+}
 
-        // Do not expect JSON on error status code, throw error instead
-        if (response.statusCode !== 200) {
-            throw new Error(body);
+function parseJson(response) {
+    return response.json();
+}
+
+function encodeQueryParams(params) {
+    return '?' + Object.keys(params).map((k) => {
+        return k + '=' + encodeURIComponent(params[k]);
+    }).join('&');
+}
+
+const request = (url, opts) => {
+    if (opts && opts.qs) {
+        url += encodeQueryParams(opts.qs);
+        delete opts.qs;
+    }
+    if (opts && opts.body) {
+        if (!opts.headers) {
+            opts.headers = {};
         }
-
-        if (expectingJSONOnSuccess) {
-            body = JSON.parse(body);
-        }
-
-        return [response, body];
-    });
+        opts.body = JSON.stringify(opts.body);
+        opts.headers['Content-Type'] = 'application/json';
+    }
+    return fetch(url, opts)
+        .then(checkStatus)
+        .then(parseJson);
 };
 
+
 export default class RtsClient {
     constructor(url) {
         this._url = url;
     }
 
     getTeamsConfig() {
-        return request({
-            url: this._url + '/teams',
-            json: true,
-        });
+        return request(this._url + '/teams');
     }
 
     /**
@@ -39,25 +52,23 @@ export default class RtsClient {
      * @param {string} referrer the user ID of one who referred the user to Riot.
      * @param {string} user_id the user ID of the user being referred.
      * @param {string} user_email the email address linked to `user_id`.
-     * @returns {Promise} a promise that resolves to [$response, $body], where $response
-     * is the response object created by the request lib and $body is the object parsed
-     * from the JSON response body. $body should be { team_token: 'sometoken' } upon
+     * @returns {Promise} a promise that resolves to { team_token: 'sometoken' } upon
      * success.
      */
     trackReferral(referrer, user_id, user_email) {
-        return request({
-            url: this._url + '/register',
-            json: true,
-            body: {referrer, user_id, user_email},
-            method: 'POST',
-        });
+        return request(this._url + '/register',
+            {
+                body: {referrer, user_id, user_email},
+                method: 'POST',
+            }
+        );
     }
 
     getTeam(team_token) {
-        return request({
-            url: this._url + '/teamConfiguration',
-            json: true,
-            qs: {team_token},
-        });
+        return request(this._url + '/teamConfiguration',
+            {
+                qs: {team_token},
+            }
+        );
     }
 }
diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js
index 82cdbef9ca..3fa2723ad3 100644
--- a/src/components/structures/login/Registration.js
+++ b/src/components/structures/login/Registration.js
@@ -111,23 +111,22 @@ module.exports = React.createClass({
                 teamServerBusy: true,
             });
             // GET team configurations including domains, names and icons
-            this._rtsClient.getTeamsConfig().then((args) => {
-                // args = [$request, $body]
+            this._rtsClient.getTeamsConfig().then((data) => {
                 const teamsConfig = {
-                    teams: args[1],
+                    teams: data,
                     supportEmail: this.props.teamServerConfig.supportEmail,
                 };
                 console.log('Setting teams config to ', teamsConfig);
                 this.setState({
                     teamsConfig: teamsConfig,
+                    teamServerBusy: false,
                 });
             }, (err) => {
                 console.error('Error retrieving config for teams', err);
-            }).finally(() => {
                 this.setState({
                     teamServerBusy: false,
                 });
-            }).done();
+            });
         }
     },
 
@@ -221,13 +220,12 @@ module.exports = React.createClass({
                     self.props.referrer,
                     response.user_id,
                     self.state.formVals.email
-                ).then((args) => {
-                    const teamToken = args[1].team_token;
+                ).then((data) => {
+                    const teamToken = data.team_token;
                     // Store for use /w welcome pages
                     window.localStorage.setItem('mx_team_token', teamToken);
 
-                    self._rtsClient.getTeam(teamToken).then((args) => {
-                        const team = args[1];
+                    self._rtsClient.getTeam(teamToken).then((team) => {
                         console.log(
                             `User successfully registered with team ${team.name}`
                         );

From 028c40e293d7fe241f55b4bc1361ccd72f5e6929 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 1 Feb 2017 11:16:14 +0000
Subject: [PATCH 289/289] Linting

---
 src/RtsClient.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/RtsClient.js b/src/RtsClient.js
index f1cbc8e6f1..ae62fb8b22 100644
--- a/src/RtsClient.js
+++ b/src/RtsClient.js
@@ -50,24 +50,30 @@ export default class RtsClient {
      * Track a referral with the Riot Team Server. This should be called once a referred
      * user has been successfully registered.
      * @param {string} referrer the user ID of one who referred the user to Riot.
-     * @param {string} user_id the user ID of the user being referred.
-     * @param {string} user_email the email address linked to `user_id`.
+     * @param {string} userId the user ID of the user being referred.
+     * @param {string} userEmail the email address linked to `userId`.
      * @returns {Promise} a promise that resolves to { team_token: 'sometoken' } upon
      * success.
      */
-    trackReferral(referrer, user_id, user_email) {
+    trackReferral(referrer, userId, userEmail) {
         return request(this._url + '/register',
             {
-                body: {referrer, user_id, user_email},
+                body: {
+                    referrer: referrer,
+                    user_id: userId,
+                    user_email: userEmail,
+                },
                 method: 'POST',
             }
         );
     }
 
-    getTeam(team_token) {
+    getTeam(teamToken) {
         return request(this._url + '/teamConfiguration',
             {
-                qs: {team_token},
+                qs: {
+                    team_token: teamToken,
+                },
             }
         );
     }