Merge branch 'develop' of https://github.com/matrix-org/matrix-react-sdk into t3chguy/cs_verification_decoration

Conflicts: src/components/views/right_panel/VerificationPanel.js src/components/views/toasts/VerificationRequestToast.js
2020-01-24 16:19:41 +00:00 · 2020-01-24 16:19:41 +00:00 · 342fcb09c4
commit 342fcb09c4
parent 7a5e172b88 169ca4a4da
36 changed files with 1043 additions and 495 deletions
--- a/.buildkite/pipeline.yaml
+++ b/.buildkite/pipeline.yaml
@ -1,8 +1,10 @@
 steps:
  - label: ":eslint: JS Lint"
    command:
+      # We fetch the develop js-sdk to get our latest eslint rules
      - "echo '--- Install js-sdk'"
-      - "./scripts/ci/install-deps.sh"
+      - "./scripts/ci/install-deps.sh --ignore-scripts"
+      - "echo '+++ Lint'"
      - "yarn lint:js"
    plugins:
      - docker#v3.0.1:
@ -10,8 +12,9 @@ steps:

  - label: ":eslint: TS Lint"
    command:
-      - "echo '--- Install js-sdk'"
-      - "./scripts/ci/install-deps.sh"
+      - "echo '--- Install'"
+      - "yarn install --ignore-scripts"
+      - "echo '+++ Lint'"
      - "yarn lint:ts"
    plugins:
      - docker#v3.0.1:
@ -19,12 +22,21 @@ steps:

  - label: ":eslint: Types Lint"
    command:
-      - "echo '--- Install js-sdk'"
-      - "./scripts/ci/install-deps.sh"
+      - "echo '--- Install'"
+      - "yarn install --ignore-scripts"
+      - "echo '+++ Lint'"
      - "yarn lint:types"
    plugins:
      - docker#v3.0.1:
          image: "node:12"
+  - label: ":stylelint: Style Lint"
+    command:
+      - "echo '--- Install'"
+      - "yarn install --ignore-scripts"
+      - "yarn lint:style"
+    plugins:
+      - docker#v3.0.1:
+          image: "node:12"

  - label: ":jest: Tests"
    agents:
@ -33,13 +45,11 @@ steps:
      queue: "medium"
    command:
      - "echo '--- Install js-sdk'"
-      # TODO: Remove hacky chmod for BuildKite
-      - "chmod +x ./scripts/ci/*.sh"
-      - "chmod +x ./scripts/*"
-      - "echo '--- Installing Dependencies'"
-      - "./scripts/ci/install-deps.sh"
-      - "echo '--- Running initial build steps'"
-      - "yarn build"
+      # We don't use the babel-ed output for anything so we can --ignore-scripts
+      # to save transpiling the files. We run the transpile step explicitly in
+      # the 'build' job.
+      - "./scripts/ci/install-deps.sh --ignore-scripts"
+      - "yarn run reskindex"
      - "echo '+++ Running Tests'"
      - "yarn test"
    plugins:
@ -48,10 +58,8 @@ steps:

  - label: "🛠 Build"
    command:
-      - "echo '--- Install js-sdk'"
-      - "./scripts/ci/install-deps.sh"
-      - "echo '+++ Building Project'"
-      - "yarn build"
+      - "echo '+++ Install & Build'"
+      - "yarn install"
    plugins:
      - docker#v3.0.1:
          image: "node:12"
@ -62,14 +70,8 @@ steps:
      # e2e tests otherwise take +-8min
      queue: "xlarge"
    command:
-      # TODO: Remove hacky chmod for BuildKite
-      - "echo '--- Setup'"
-      - "chmod +x ./scripts/ci/*.sh"
-      - "chmod +x ./scripts/*"
      - "echo '--- Install js-sdk'"
-      - "./scripts/ci/install-deps.sh"
-      - "echo '--- Running initial build steps'"
-      - "yarn build"
+      - "./scripts/ci/install-deps.sh --ignore-scripts"
      - "echo '+++ Running Tests'"
      - "./scripts/ci/end-to-end-tests.sh"
    plugins:
@ -88,9 +90,6 @@ steps:
      # webpack loves to gorge itself on resources.
      queue: "medium"
    command:
-      # TODO: Remove hacky chmod for BuildKite
-      - "chmod +x ./scripts/ci/*.sh"
-      - "chmod +x ./scripts/*"
      - "echo '+++ Running Tests'"
      - "./scripts/ci/riot-unit-tests.sh"
    plugins:
@ -102,7 +101,7 @@ steps:
  - label: "🌐 i18n"
    command:
      - "echo '--- Fetching Dependencies'"
-      - "yarn install"
+      - "yarn install --ignore-scripts"
      - "echo '+++ Testing i18n output'"
      - "yarn diff-i18n"
    plugins:
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@ -150,6 +150,7 @@
@import "./views/rooms/_AuxPanel.scss";
@import "./views/rooms/_BasicMessageComposer.scss";
@import "./views/rooms/_E2EIcon.scss";
+@import "./views/rooms/_InviteOnlyIcon.scss";
@import "./views/rooms/_EditMessageComposer.scss";
@import "./views/rooms/_EntityTile.scss";
@import "./views/rooms/_EventTile.scss";
--- a/res/css/views/rooms/_InviteOnlyIcon.scss
+++ b/res/css/views/rooms/_InviteOnlyIcon.scss
@ -0,0 +1,38 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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.
+*/
+
+.mx_InviteOnlyIcon {
+    width: 12px;
+    height: 12px;
+    position: relative;
+    display: block !important;
+    // Align the padlock with unencrypted room names
+    margin-left: 6px;
+
+    &::before {
+        background-color: $roomtile-name-color;
+        mask-image: url('$(res)/img/feather-customised/lock-solid.svg');
+        mask-position: center;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+}
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/res/css/views/rooms/_MessageComposer.scss
@ -76,6 +76,8 @@ limitations under the License.
    left: 60px;
    margin-right: 0; // Counteract the E2EIcon class
    margin-left: 3px; // Counteract the E2EIcon class
+    width: 12px;
+    height: 12px;
 }

 .mx_MessageComposer_noperm_error {
--- a/res/css/views/rooms/_RoomHeader.scss
+++ b/res/css/views/rooms/_RoomHeader.scss
@ -21,8 +21,10 @@ limitations under the License.
    .mx_E2EIcon {
        margin: 0;
        position: absolute;
-        bottom: 0;
-        right: -5px;
+        bottom: -1px;
+        right: -2px;
+        height: 10px;
+        width: 10px;
    }
 }

@ -267,24 +269,3 @@ limitations under the License.
 .mx_RoomHeader_pinsIndicatorUnread {
    background-color: $pinned-unread-color;
 }
-
-.mx_RoomHeader_PrivateIcon.mx_RoomHeader_isPrivate {
-    width: 12px;
-    height: 12px;
-    position: relative;
-    display: block !important;
-
-    &::before {
-        background-color: $roomtile-name-color;
-        mask-image: url('$(res)/img/feather-customised/lock-solid.svg');
-        mask-position: center;
-        mask-repeat: no-repeat;
-        mask-size: contain;
-        content: '';
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-    }
-}
--- a/res/css/views/rooms/_RoomTile.scss
+++ b/res/css/views/rooms/_RoomTile.scss
@ -98,6 +98,19 @@ limitations under the License.
    z-index: 2;
 }

+// Note we match .mx_E2EIcon to make sure this matches more tightly than just
+// .mx_E2EIcon on its own
+.mx_RoomTile_e2eIcon.mx_E2EIcon {
+    height: 10px;
+    width: 10px;
+    display: block;
+    position: absolute;
+    bottom: -1px;
+    right: -2px;
+    z-index: 1;
+    margin: 0;
+}
+
 .mx_RoomTile_name {
    font-size: 14px;
    padding: 0 6px;
@ -202,30 +215,7 @@ limitations under the License.
    flex: 1;
 }

-.mx_RoomTile.mx_RoomTile.mx_RoomTile_isPrivate .mx_RoomTile_name {
+.mx_InviteOnlyIcon + .mx_RoomTile_nameContainer .mx_RoomTile_name {
    // Scoot the padding in a bit from 6px to make it look better
    padding-left: 3px;
 }
-
-.mx_RoomTile.mx_RoomTile_isPrivate .mx_RoomTile_PrivateIcon {
-    width: 12px;
-    height: 12px;
-    position: relative;
-    display: block !important;
-    // Align the padlock with unencrypted room names
-    margin-left: 6px;
-
-    &::before {
-        background-color: $roomtile-name-color;
-        mask-image: url('$(res)/img/feather-customised/lock-solid.svg');
-        mask-position: center;
-        mask-repeat: no-repeat;
-        mask-size: contain;
-        content: '';
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-    }
-}
--- a/scripts/ci/install-deps.sh
+++ b/scripts/ci/install-deps.sh
@ -6,9 +6,9 @@ scripts/fetchdep.sh matrix-org matrix-js-sdk

 pushd matrix-js-sdk
 yarn link
-yarn install
+yarn install $@
 yarn build
 popd

 yarn link matrix-js-sdk
-yarn install
+yarn install $@
--- a/scripts/ci/layered-riot-web.sh
+++ b/scripts/ci/layered-riot-web.sh
--- a/src/AsyncWrapper.js
+++ b/src/AsyncWrapper.js
@ -0,0 +1,92 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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 createReactClass from 'create-react-class';
+import * as sdk from './index';
+import PropTypes from 'prop-types';
+import { _t } from './languageHandler';
+
+/**
+ * Wrap an asynchronous loader function with a react component which shows a
+ * spinner until the real component loads.
+ */
+export default createReactClass({
+    propTypes: {
+        /** A promise which resolves with the real component
+         */
+        prom: PropTypes.object.isRequired,
+    },
+
+    getInitialState: function() {
+        return {
+            component: null,
+            error: null,
+        };
+    },
+
+    componentWillMount: function() {
+        this._unmounted = false;
+        // XXX: temporary logging to try to diagnose
+        // https://github.com/vector-im/riot-web/issues/3148
+        console.log('Starting load of AsyncWrapper for modal');
+        this.props.prom.then((result) => {
+            if (this._unmounted) {
+                return;
+            }
+            // Take the 'default' member if it's there, then we support
+            // passing in just an import()ed module, since ES6 async import
+            // always returns a module *namespace*.
+            const component = result.default ? result.default : result;
+            this.setState({component});
+        }).catch((e) => {
+            console.warn('AsyncWrapper promise failed', e);
+            this.setState({error: e});
+        });
+    },
+
+    componentWillUnmount: function() {
+        this._unmounted = true;
+    },
+
+    _onWrapperCancelClick: function() {
+        this.props.onFinished(false);
+    },
+
+    render: function() {
+        if (this.state.component) {
+            const Component = this.state.component;
+            return <Component {...this.props} />;
+        } else if (this.state.error) {
+            const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+            const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+            return <BaseDialog onFinished={this.props.onFinished}
+                title={_t("Error")}
+            >
+                {_t("Unable to load! Check your network connectivity and try again.")}
+                <DialogButtons primaryButton={_t("Dismiss")}
+                    onPrimaryButtonClick={this._onWrapperCancelClick}
+                    hasCancel={false}
+                />
+            </BaseDialog>;
+        } else {
+            // show a spinner until the component is loaded.
+            const Spinner = sdk.getComponent("elements.Spinner");
+            return <Spinner />;
+        }
+    },
+});
+
--- a/src/Lifecycle.js
+++ b/src/Lifecycle.js
@ -592,8 +592,11 @@ async function startMatrixClient(startSyncing=true) {
    Mjolnir.sharedInstance().start();

    if (startSyncing) {
-        await MatrixClientPeg.start();
+        // The client might want to populate some views with events from the
+        // index (e.g. the FilePanel), therefore initialize the event index
+        // before the client.
        await EventIndexPeg.init();
+        await MatrixClientPeg.start();
    } else {
        console.warn("Caller requested only auxiliary services be started");
        await MatrixClientPeg.assign();
--- a/src/MatrixClientPeg.js
+++ b/src/MatrixClientPeg.js
@ -217,7 +217,7 @@ class _MatrixClientPeg {
            timelineSupport: true,
            forceTURN: !SettingsStore.getValue('webRtcAllowPeerToPeer', false),
            fallbackICEServerAllowed: !!SettingsStore.getValue('fallbackICEServerAllowed'),
-            verificationMethods: [verificationMethods.SAS],
+            verificationMethods: [verificationMethods.SAS, verificationMethods.QR_CODE_SHOW],
            unstableClientRelationAggregation: true,
            identityServer: new IdentityAuthClient(),
        };
--- a/src/Modal.js
+++ b/src/Modal.js
@ -17,87 +17,14 @@ limitations under the License.

 import React from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import Analytics from './Analytics';
-import * as sdk from './index';
 import dis from './dispatcher';
-import { _t } from './languageHandler';
-import {defer} from "./utils/promise";
+import {defer} from './utils/promise';
+import AsyncWrapper from './AsyncWrapper';

 const DIALOG_CONTAINER_ID = "mx_Dialog_Container";
 const STATIC_DIALOG_CONTAINER_ID = "mx_Dialog_StaticContainer";

-/**
- * Wrap an asynchronous loader function with a react component which shows a
- * spinner until the real component loads.
- */
-const AsyncWrapper = createReactClass({
-    propTypes: {
-        /** A promise which resolves with the real component
-         */
-        prom: PropTypes.object.isRequired,
-    },
-
-    getInitialState: function() {
-        return {
-            component: null,
-            error: null,
-        };
-    },
-
-    componentWillMount: function() {
-        this._unmounted = false;
-        // XXX: temporary logging to try to diagnose
-        // https://github.com/vector-im/riot-web/issues/3148
-        console.log('Starting load of AsyncWrapper for modal');
-        this.props.prom.then((result) => {
-            if (this._unmounted) {
-                return;
-            }
-            // Take the 'default' member if it's there, then we support
-            // passing in just an import()ed module, since ES6 async import
-            // always returns a module *namespace*.
-            const component = result.default ? result.default : result;
-            this.setState({component});
-        }).catch((e) => {
-            console.warn('AsyncWrapper promise failed', e);
-            this.setState({error: e});
-        });
-    },
-
-    componentWillUnmount: function() {
-        this._unmounted = true;
-    },
-
-    _onWrapperCancelClick: function() {
-        this.props.onFinished(false);
-    },
-
-    render: function() {
-        if (this.state.component) {
-            const Component = this.state.component;
-            return <Component {...this.props} />;
-        } else if (this.state.error) {
-            const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-            const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-            return <BaseDialog onFinished={this.props.onFinished}
-                title={_t("Error")}
-            >
-                {_t("Unable to load! Check your network connectivity and try again.")}
-                <DialogButtons primaryButton={_t("Dismiss")}
-                    onPrimaryButtonClick={this._onWrapperCancelClick}
-                    hasCancel={false}
-                />
-            </BaseDialog>;
-        } else {
-            // show a spinner until the component is loaded.
-            const Spinner = sdk.getComponent("elements.Spinner");
-            return <Spinner />;
-        }
-    },
-});
-
 class ModalManager {
    constructor() {
        this._counter = 0;
--- a/src/RoomInvite.js
+++ b/src/RoomInvite.js
@ -20,13 +20,8 @@ import React from 'react';
 import {MatrixClientPeg} from './MatrixClientPeg';
 import MultiInviter from './utils/MultiInviter';
 import Modal from './Modal';
-import { getAddressType } from './UserAddress';
-import createRoom from './createRoom';
 import * as sdk from './';
-import dis from './dispatcher';
-import DMRoomMap from './utils/DMRoomMap';
 import { _t } from './languageHandler';
-import SettingsStore from "./settings/SettingsStore";
 import {KIND_DM, KIND_INVITE} from "./components/views/dialogs/InviteDialog";

 /**
@ -44,64 +39,21 @@ export function inviteMultipleToRoom(roomId, addrs) {
 }

 export function showStartChatInviteDialog() {
-    if (SettingsStore.isFeatureEnabled("feature_ftue_dms")) {
-        // This new dialog handles the room creation internally - we don't need to worry about it.
+    // This dialog handles the room creation internally - we don't need to worry about it.
    const InviteDialog = sdk.getComponent("dialogs.InviteDialog");
    Modal.createTrackedDialog(
        'Start DM', '', InviteDialog, {kind: KIND_DM},
        /*className=*/null, /*isPriority=*/false, /*isStatic=*/true,
    );
-        return;
-    }
-
-    const AddressPickerDialog = sdk.getComponent("dialogs.AddressPickerDialog");
-
-    Modal.createTrackedDialog('Start a chat', '', AddressPickerDialog, {
-        title: _t('Start a chat'),
-        description: _t("Who would you like to communicate with?"),
-        placeholder: (validAddressTypes) => {
-            // The set of valid address type can be mutated inside the dialog
-            // when you first have no IS but agree to use one in the dialog.
-            if (validAddressTypes.includes('email')) {
-                return _t("Email, name or Matrix ID");
-            }
-            return _t("Name or Matrix ID");
-        },
-        validAddressTypes: ['mx-user-id', 'email'],
-        button: _t("Start Chat"),
-        onFinished: _onStartDmFinished,
-    }, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
 }

 export function showRoomInviteDialog(roomId) {
-    if (SettingsStore.isFeatureEnabled("feature_ftue_dms")) {
-        // This new dialog handles the room creation internally - we don't need to worry about it.
+    // This dialog handles the room creation internally - we don't need to worry about it.
    const InviteDialog = sdk.getComponent("dialogs.InviteDialog");
    Modal.createTrackedDialog(
        'Invite Users', '', InviteDialog, {kind: KIND_INVITE, roomId},
        /*className=*/null, /*isPriority=*/false, /*isStatic=*/true,
    );
-        return;
-    }
-
-    const AddressPickerDialog = sdk.getComponent("dialogs.AddressPickerDialog");
-
-    Modal.createTrackedDialog('Chat Invite', '', AddressPickerDialog, {
-        title: _t('Invite new room members'),
-        button: _t('Send Invites'),
-        placeholder: (validAddressTypes) => {
-            // The set of valid address type can be mutated inside the dialog
-            // when you first have no IS but agree to use one in the dialog.
-            if (validAddressTypes.includes('email')) {
-                return _t("Email, name or Matrix ID");
-            }
-            return _t("Name or Matrix ID");
-        },
-        validAddressTypes: ['mx-user-id', 'email'],
-        onFinished: (shouldInvite, addrs) => {
-            _onRoomInviteFinished(roomId, shouldInvite, addrs);
-        },
-    }, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
 }

 /**
@ -122,60 +74,6 @@ export function isValid3pidInvite(event) {
    return true;
 }

-// TODO: Canonical DMs replaces this
-function _onStartDmFinished(shouldInvite, addrs) {
-    if (!shouldInvite) return;
-
-    const addrTexts = addrs.map((addr) => addr.address);
-
-    if (_isDmChat(addrTexts)) {
-        const rooms = _getDirectMessageRooms(addrTexts[0]);
-        if (rooms.length > 0) {
-            // A Direct Message room already exists for this user, so reuse it
-            dis.dispatch({
-                action: 'view_room',
-                room_id: rooms[0],
-                should_peek: false,
-                joining: false,
-            });
-        } else {
-            // Start a new DM chat
-            createRoom({dmUserId: addrTexts[0]}).catch((err) => {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createTrackedDialog('Failed to start chat', '', ErrorDialog, {
-                    title: _t("Failed to start chat"),
-                    description: ((err && err.message) ? err.message : _t("Operation failed")),
-                });
-            });
-        }
-    } else if (addrTexts.length === 1) {
-        // Start a new DM chat
-        createRoom({dmUserId: addrTexts[0]}).catch((err) => {
-            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createTrackedDialog('Failed to start chat', '', ErrorDialog, {
-                title: _t("Failed to start chat"),
-                description: ((err && err.message) ? err.message : _t("Operation failed")),
-            });
-        });
-    } else {
-        // Start multi user chat
-        let room;
-        createRoom().then((roomId) => {
-            room = MatrixClientPeg.get().getRoom(roomId);
-            return inviteMultipleToRoom(roomId, addrTexts);
-        }).then((result) => {
-            return _showAnyInviteErrors(result.states, room, result.inviter);
-        }).catch((err) => {
-            console.error(err.stack);
-            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createTrackedDialog('Failed to invite', '', ErrorDialog, {
-                title: _t("Failed to invite"),
-                description: ((err && err.message) ? err.message : _t("Operation failed")),
-            });
-        });
-    }
-}
-
 export function inviteUsersToRoom(roomId, userIds) {
    return inviteMultipleToRoom(roomId, userIds).then((result) => {
        const room = MatrixClientPeg.get().getRoom(roomId);
@ -190,24 +88,6 @@ export function inviteUsersToRoom(roomId, userIds) {
    });
 }

-function _onRoomInviteFinished(roomId, shouldInvite, addrs) {
-    if (!shouldInvite) return;
-
-    const addrTexts = addrs.map((addr) => addr.address);
-
-    // Invite new users to a room
-    inviteUsersToRoom(roomId, addrTexts);
-}
-
-// TODO: Immutable DMs replaces this
-function _isDmChat(addrTexts) {
-    if (addrTexts.length === 1 && getAddressType(addrTexts[0]) === 'mx-user-id') {
-        return true;
-    } else {
-        return false;
-    }
-}
-
 function _showAnyInviteErrors(addrs, room, inviter) {
    // Show user any errors
    const failedUsers = Object.keys(addrs).filter(a => addrs[a] === 'error');
@ -243,15 +123,3 @@ function _showAnyInviteErrors(addrs, room, inviter) {

    return addrs;
 }
-
-function _getDirectMessageRooms(addr) {
-    const dmRoomMap = new DMRoomMap(MatrixClientPeg.get());
-    const dmRooms = dmRoomMap.getDMRoomsForUserId(addr);
-    const rooms = dmRooms.filter((dmRoom) => {
-        const room = MatrixClientPeg.get().getRoom(dmRoom);
-        if (room) {
-            return room.getMyMembership() === 'join';
-        }
-    });
-    return rooms;
-}
--- a/src/components/structures/FilePanel.js
+++ b/src/components/structures/FilePanel.js
@ -19,9 +19,10 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';

-import Matrix from 'matrix-js-sdk';
+import {Filter} from 'matrix-js-sdk';
 import * as sdk from '../../index';
 import {MatrixClientPeg} from '../../MatrixClientPeg';
+import EventIndexPeg from "../../indexing/EventIndexPeg";
 import { _t } from '../../languageHandler';

 /*
@ -29,6 +30,9 @@ import { _t } from '../../languageHandler';
 */
 const FilePanel = createReactClass({
    displayName: 'FilePanel',
+    // This is used to track if a decrypted event was a live event and should be
+    // added to the timeline.
+    decryptingEvents: new Set(),

    propTypes: {
        roomId: PropTypes.string.isRequired,
@ -40,18 +44,78 @@ const FilePanel = createReactClass({
        };
    },

-    componentDidMount: function() {
-        this.updateTimelineSet(this.props.roomId);
+    onRoomTimeline(ev, room, toStartOfTimeline, removed, data) {
+        if (room.roomId !== this.props.roomId) return;
+        if (toStartOfTimeline || !data || !data.liveEvent || ev.isRedacted()) return;
+
+        if (ev.isBeingDecrypted()) {
+            this.decryptingEvents.add(ev.getId());
+        } else {
+            this.addEncryptedLiveEvent(ev);
+        }
    },

-    updateTimelineSet: function(roomId) {
+    onEventDecrypted(ev, err) {
+        if (ev.getRoomId() !== this.props.roomId) return;
+        const eventId = ev.getId();
+
+        if (!this.decryptingEvents.delete(eventId)) return;
+        if (err) return;
+
+        this.addEncryptedLiveEvent(ev);
+    },
+
+    addEncryptedLiveEvent(ev, toStartOfTimeline) {
+        if (!this.state.timelineSet) return;
+
+        const timeline = this.state.timelineSet.getLiveTimeline();
+        if (ev.getType() !== "m.room.message") return;
+        if (["m.file", "m.image", "m.video", "m.audio"].indexOf(ev.getContent().msgtype) == -1) {
+            return;
+        }
+
+        if (!this.state.timelineSet.eventIdToTimeline(ev.getId())) {
+            this.state.timelineSet.addEventToTimeline(ev, timeline, false);
+        }
+    },
+
+    async componentDidMount() {
        const client = MatrixClientPeg.get();
-        const room = client.getRoom(roomId);

-        this.noRoom = !room;
+        await this.updateTimelineSet(this.props.roomId);

-        if (room) {
-            const filter = new Matrix.Filter(client.credentials.userId);
+        if (!MatrixClientPeg.get().isRoomEncrypted(this.props.roomId)) return;
+
+        // The timelineSets filter makes sure that encrypted events that contain
+        // URLs never get added to the timeline, even if they are live events.
+        // These methods are here to manually listen for such events and add
+        // them despite the filter's best efforts.
+        //
+        // We do this only for encrypted rooms and if an event index exists,
+        // this could be made more general in the future or the filter logic
+        // could be fixed.
+        if (EventIndexPeg.get() !== null) {
+            client.on('Room.timeline', this.onRoomTimeline.bind(this));
+            client.on('Event.decrypted', this.onEventDecrypted.bind(this));
+        }
+    },
+
+    componentWillUnmount() {
+        const client = MatrixClientPeg.get();
+        if (client === null) return;
+
+        if (!MatrixClientPeg.get().isRoomEncrypted(this.props.roomId)) return;
+
+        if (EventIndexPeg.get() !== null) {
+            client.removeListener('Room.timeline', this.onRoomTimeline.bind(this));
+            client.removeListener('Event.decrypted', this.onEventDecrypted.bind(this));
+        }
+    },
+
+    async fetchFileEventsServer(room) {
+        const client = MatrixClientPeg.get();
+
+        const filter = new Filter(client.credentials.userId);
        filter.setDefinition(
            {
                "room": {
@ -65,17 +129,62 @@ const FilePanel = createReactClass({
            },
        );

-            // FIXME: we shouldn't be doing this every time we change room - see comment above.
-            client.getOrCreateFilter("FILTER_FILES_" + client.credentials.userId, filter).then(
-                (filterId)=>{
+        const filterId = await client.getOrCreateFilter("FILTER_FILES_" + client.credentials.userId, filter);
        filter.filterId = filterId;
        const timelineSet = room.getOrCreateFilteredTimelineSet(filter);
+
+        return timelineSet;
+    },
+
+    onPaginationRequest(timelineWindow, direction, limit) {
+        const client = MatrixClientPeg.get();
+        const eventIndex = EventIndexPeg.get();
+        const roomId = this.props.roomId;
+
+        const room = client.getRoom(roomId);
+
+        // We override the pagination request for encrypted rooms so that we ask
+        // the event index to fulfill the pagination request. Asking the server
+        // to paginate won't ever work since the server can't correctly filter
+        // out events containing URLs
+        if (client.isRoomEncrypted(roomId) && eventIndex !== null) {
+            return eventIndex.paginateTimelineWindow(room, timelineWindow, direction, limit);
+        } else {
+            return timelineWindow.paginate(direction, limit);
+        }
+    },
+
+    async updateTimelineSet(roomId: string) {
+        const client = MatrixClientPeg.get();
+        const room = client.getRoom(roomId);
+        const eventIndex = EventIndexPeg.get();
+
+        this.noRoom = !room;
+
+        if (room) {
+            let timelineSet;
+
+            try {
+                timelineSet = await this.fetchFileEventsServer(room);
+
+                // If this room is encrypted the file panel won't be populated
+                // correctly since the defined filter doesn't support encrypted
+                // events and the server can't check if encrypted events contain
+                // URLs.
+                //
+                // This is where our event index comes into place, we ask the
+                // event index to populate the timelineSet for us. This call
+                // will add 10 events to the live timeline of the set. More can
+                // be requested using pagination.
+                if (client.isRoomEncrypted(roomId) && eventIndex !== null) {
+                    const timeline = timelineSet.getLiveTimeline();
+                    await eventIndex.populateFileTimeline(timelineSet, timeline, room, 10);
+                }
+
                this.setState({ timelineSet: timelineSet });
-                },
-                (error)=>{
+            } catch (error) {
                console.error("Failed to get or create file panel filter", error);
-                },
-            );
+            }
        } else {
            console.error("Failed to add filtered timelineSet for FilePanel as no room!");
        }
@ -111,6 +220,7 @@ const FilePanel = createReactClass({
                        manageReadMarkers={false}
                        timelineSet={this.state.timelineSet}
                        showUrlPreview = {false}
+                        onPaginationRequest={this.onPaginationRequest}
                        tileShape="file_grid"
                        resizeNotifier={this.props.resizeNotifier}
                        empty={_t('There are no visible files in this room')}
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@ -796,6 +796,7 @@ export default createReactClass({
            return;
        }

+        // Duplication between here and _updateE2eStatus in RoomTile
        /* At this point, the user has encryption on and cross-signing on */
        const e2eMembers = await room.getEncryptionTargetMembers();
        const verified = [];
@ -812,10 +813,10 @@ export default createReactClass({
        /* Check all verified user devices. */
        for (const userId of verified) {
            const devices = await cli.getStoredDevicesForUser(userId);
-            const allDevicesVerified = devices.every(({deviceId}) => {
-                return cli.checkDeviceTrust(userId, deviceId).isVerified();
+            const anyDeviceNotVerified = devices.some(({deviceId}) => {
+                return !cli.checkDeviceTrust(userId, deviceId).isVerified();
            });
-            if (!allDevicesVerified) {
+            if (anyDeviceNotVerified) {
                this.setState({
                    e2eStatus: "warning",
                });
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@ -94,6 +94,10 @@ const TimelinePanel = createReactClass({
        // callback which is called when the read-up-to mark is updated.
        onReadMarkerUpdated: PropTypes.func,

+        // callback which is called when we wish to paginate the timeline
+        // window.
+        onPaginationRequest: PropTypes.func,
+
        // maximum number of events to show in a timeline
        timelineCap: PropTypes.number,

@ -338,6 +342,14 @@ const TimelinePanel = createReactClass({
        }
    },

+    onPaginationRequest(timelineWindow, direction, size) {
+        if (this.props.onPaginationRequest) {
+            return this.props.onPaginationRequest(timelineWindow, direction, size);
+        } else {
+            return timelineWindow.paginate(direction, size);
+        }
+    },
+
    // set off a pagination request.
    onMessageListFillRequest: function(backwards) {
        if (!this._shouldPaginate()) return Promise.resolve(false);
@ -360,7 +372,7 @@ const TimelinePanel = createReactClass({
        debuglog("TimelinePanel: Initiating paginate; backwards:"+backwards);
        this.setState({[paginatingKey]: true});

-        return this._timelineWindow.paginate(dir, PAGINATE_SIZE).then((r) => {
+        return this.onPaginationRequest(this._timelineWindow, dir, PAGINATE_SIZE).then((r) => {
            if (this.unmounted) { return; }

            debuglog("TimelinePanel: paginate complete backwards:"+backwards+"; success:"+r);
--- a/src/components/views/dialogs/InviteDialog.js
+++ b/src/components/views/dialogs/InviteDialog.js
@ -338,19 +338,31 @@ export default class InviteDialog extends React.PureComponent {
        const recents = [];
        for (const userId in rooms) {
            // Filter out user IDs that are already in the room / should be excluded
-            if (excludedTargetIds.includes(userId)) continue;
+            if (excludedTargetIds.includes(userId)) {
+                console.warn(`[Invite:Recents] Excluding ${userId} from recents`);
+                continue;
+            }

            const room = rooms[userId];
            const member = room.getMember(userId);
-            if (!member) continue; // just skip people who don't have memberships for some reason
+            if (!member) {
+                // just skip people who don't have memberships for some reason
+                console.warn(`[Invite:Recents] ${userId} is missing a member object in their own DM (${room.roomId})`);
+                continue;
+            }

            const lastEventTs = room.timeline && room.timeline.length
                ? room.timeline[room.timeline.length - 1].getTs()
                : 0;
-            if (!lastEventTs) continue; // something weird is going on with this room
+            if (!lastEventTs) {
+                // something weird is going on with this room
+                console.warn(`[Invite:Recents] ${userId} (${room.roomId}) has a weird last timestamp: ${lastEventTs}`);
+                continue;
+            }

            recents.push({userId, user: member, lastActive: lastEventTs});
        }
+        if (!recents) console.warn("[Invite:Recents] No recents to suggest!");

        // Sort the recents by last active to save us time later
        recents.sort((a, b) => b.lastActive - a.lastActive);
@ -713,11 +725,16 @@ export default class InviteDialog extends React.PureComponent {
    };

    _toggleMember = (member: Member) => {
+        let filterText = this.state.filterText;
        const targets = this.state.targets.map(t => t); // cheap clone for mutation
        const idx = targets.indexOf(member);
-        if (idx >= 0) targets.splice(idx, 1);
-        else targets.push(member);
-        this.setState({targets});
+        if (idx >= 0) {
+            targets.splice(idx, 1);
+        } else {
+            targets.push(member);
+            filterText = ""; // clear the filter when the user accepts a suggestion
+        }
+        this.setState({targets, filterText});
    };

    _removeMember = (member: Member) => {
@ -917,7 +934,7 @@ export default class InviteDialog extends React.PureComponent {
                key={"input"}
                rows={1}
                onChange={this._updateFilter}
-                defaultValue={this.state.filterText}
+                value={this.state.filterText}
                ref={this._editorRef}
                onPaste={this._onPaste}
            />
@ -985,7 +1002,7 @@ export default class InviteDialog extends React.PureComponent {

            title = _t("Direct Messages");
            helpText = _t(
-                "If you can't find someone, ask them for their username, or share your " +
+                "If you can't find someone, ask them for their username, share your " +
                "username (%(userId)s) or <a>profile link</a>.",
                {userId},
                {a: (sub) => <a href={makeUserPermalink(userId)} rel="noopener" target="_blank">{sub}</a>},
--- a/src/components/views/elements/crypto/VerificationQRCode.js
+++ b/src/components/views/elements/crypto/VerificationQRCode.js
@ -0,0 +1,56 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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 PropTypes from "prop-types";
+import {replaceableComponent} from "../../../../utils/replaceableComponent";
+import * as qs from "qs";
+import QRCode from "qrcode-react";
+
+@replaceableComponent("views.elements.crypto.VerificationQRCode")
+export default class VerificationQRCode extends React.PureComponent {
+    static propTypes = {
+        // Common for all kinds of QR codes
+        keys: PropTypes.array.isRequired, // array of [Key ID, Base64 Key] pairs
+        action: PropTypes.string.isRequired,
+        keyholderUserId: PropTypes.string.isRequired,
+
+        // User verification use case only
+        secret: PropTypes.string,
+        otherUserKey: PropTypes.string, // Base64 key being verified
+        requestEventId: PropTypes.string,
+    };
+
+    static defaultProps = {
+        action: "verify",
+    };
+
+    render() {
+        const query = {
+            request: this.props.requestEventId,
+            action: this.props.action,
+            other_user_key: this.props.otherUserKey,
+            secret: this.props.secret,
+        };
+        for (const key of this.props.keys) {
+            query[`key_${key[0]}`] = key[1];
+        }
+
+        const uri = `https://matrix.to/#/${this.props.keyholderUserId}?${qs.stringify(query)}`;
+
+        return <QRCode value={uri} size={256} logoWidth={48} logo={require("../../../../../res/img/matrix-m.svg")} />;
+    }
+}
--- a/src/components/views/messages/MKeyVerificationConclusion.js
+++ b/src/components/views/messages/MKeyVerificationConclusion.js
@ -93,7 +93,7 @@ export default class MKeyVerificationConclusion extends React.Component {
        }

        if (title) {
-            const subtitle = userLabelForEventRoom(request.otherUserId, mxEvent);
+            const subtitle = userLabelForEventRoom(request.otherUserId, mxEvent.getRoomId());
            const classes = classNames("mx_EventTile_bubble", "mx_KeyVerification", "mx_KeyVerification_icon", {
                mx_KeyVerification_icon_verified: request.done,
            });
--- a/src/components/views/messages/MKeyVerificationRequest.js
+++ b/src/components/views/messages/MKeyVerificationRequest.js
@ -86,7 +86,7 @@ export default class MKeyVerificationRequest extends React.Component {
        if (userId === myUserId) {
            return _t("You accepted");
        } else {
-            return _t("%(name)s accepted", {name: getNameForEventRoom(userId, this.props.mxEvent)});
+            return _t("%(name)s accepted", {name: getNameForEventRoom(userId, this.props.mxEvent.getRoomId())});
        }
    }

@ -96,7 +96,7 @@ export default class MKeyVerificationRequest extends React.Component {
        if (userId === myUserId) {
            return _t("You cancelled");
        } else {
-            return _t("%(name)s cancelled", {name: getNameForEventRoom(userId, this.props.mxEvent)});
+            return _t("%(name)s cancelled", {name: getNameForEventRoom(userId, this.props.mxEvent.getRoomId())});
        }
    }

@ -129,10 +129,11 @@ export default class MKeyVerificationRequest extends React.Component {
        }

        if (!request.initiatedByMe) {
+            const name = getNameForEventRoom(request.requestingUserId, mxEvent.getRoomId());
            title = (<div className="mx_KeyVerification_title">{
-                _t("%(name)s wants to verify", {name: getNameForEventRoom(request.requestingUserId, mxEvent)})}</div>);
+                _t("%(name)s wants to verify", {name})}</div>);
            subtitle = (<div className="mx_KeyVerification_subtitle">{
-                userLabelForEventRoom(request.requestingUserId, mxEvent)}</div>);
+                userLabelForEventRoom(request.requestingUserId, mxEvent.getRoomId())}</div>);
            if (request.requested && !request.observeOnly) {
                stateNode = (<div className="mx_KeyVerification_buttons">
                    <FormButton kind="danger" onClick={this._onRejectClicked} label={_t("Decline")} />
@ -143,7 +144,7 @@ export default class MKeyVerificationRequest extends React.Component {
            title = (<div className="mx_KeyVerification_title">{
                _t("You sent a verification request")}</div>);
            subtitle = (<div className="mx_KeyVerification_subtitle">{
-                userLabelForEventRoom(request.receivingUserId, mxEvent)}</div>);
+                userLabelForEventRoom(request.receivingUserId, mxEvent.getRoomId())}</div>);
        }

        if (title) {
--- a/src/components/views/right_panel/VerificationPanel.js
+++ b/src/components/views/right_panel/VerificationPanel.js
@ -18,6 +18,9 @@ import React from 'react';

 import * as sdk from '../../../index';
 import {verificationMethods} from 'matrix-js-sdk/src/crypto';
+import VerificationQRCode from "../elements/crypto/VerificationQRCode";
+import {VerificationRequest} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {_t} from "../../../languageHandler";
 import E2EIcon from "../rooms/E2EIcon";

--- a/src/components/views/rooms/E2EIcon.js
+++ b/src/components/views/rooms/E2EIcon.js
@ -1,5 +1,6 @@
 /*
 Copyright 2019 New Vector Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -14,76 +15,102 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

+import React, {useState} from "react";
+import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { _t } from '../../../languageHandler';
-import AccessibleButton from '../elements/AccessibleButton';
-import SettingsStore from '../../../settings/SettingsStore';

-export default function(props) {
-    const { isUser } = props;
-    const isNormal = props.status === "normal";
-    const isWarning = props.status === "warning";
-    const isVerified = props.status === "verified";
-    const e2eIconClasses = classNames({
+import {_t, _td} from '../../../languageHandler';
+import {useFeatureEnabled} from "../../../hooks/useSettings";
+import AccessibleButton from "../elements/AccessibleButton";
+import Tooltip from "../elements/Tooltip";
+
+export const E2E_STATE = {
+    VERIFIED: "verified",
+    WARNING: "warning",
+    UNKNOWN: "unknown",
+    NORMAL: "normal",
+};
+
+const crossSigningUserTitles = {
+    [E2E_STATE.WARNING]: _td("This user has not verified all of their devices."),
+    [E2E_STATE.NORMAL]: _td("You have not verified this user. This user has verified all of their devices."),
+    [E2E_STATE.VERIFIED]: _td("You have verified this user. This user has verified all of their devices."),
+};
+const crossSigningRoomTitles = {
+    [E2E_STATE.WARNING]: _td("Someone is using an unknown device"),
+    [E2E_STATE.NORMAL]: _td("This room is end-to-end encrypted"),
+    [E2E_STATE.VERIFIED]: _td("Everyone in this room is verified"),
+};
+
+const legacyUserTitles = {
+    [E2E_STATE.WARNING]: _td("Some devices for this user are not trusted"),
+    [E2E_STATE.VERIFIED]: _td("All devices for this user are trusted"),
+};
+const legacyRoomTitles = {
+    [E2E_STATE.WARNING]: _td("Some devices in this encrypted room are not trusted"),
+    [E2E_STATE.VERIFIED]: _td("All devices in this encrypted room are trusted"),
+};
+
+const E2EIcon = ({isUser, status, className, size, onClick}) => {
+    const [hover, setHover] = useState(false);
+
+    const classes = classNames({
        mx_E2EIcon: true,
-        mx_E2EIcon_warning: isWarning,
-        mx_E2EIcon_normal: isNormal,
-        mx_E2EIcon_verified: isVerified,
-    }, props.className);
+        mx_E2EIcon_warning: status === E2E_STATE.WARNING,
+        mx_E2EIcon_normal: status === E2E_STATE.NORMAL,
+        mx_E2EIcon_verified: status === E2E_STATE.VERIFIED,
+    }, className);
+
    let e2eTitle;
-
-    const crossSigning = SettingsStore.isFeatureEnabled("feature_cross_signing");
+    const crossSigning = useFeatureEnabled("feature_cross_signing");
    if (crossSigning && isUser) {
-        if (isWarning) {
-            e2eTitle = _t(
-                "This user has not verified all of their devices.",
-            );
-        } else if (isNormal) {
-            e2eTitle = _t(
-                "You have not verified this user. " +
-                "This user has verified all of their devices.",
-            );
-        } else if (isVerified) {
-            e2eTitle = _t(
-                "You have verified this user. " +
-                "This user has verified all of their devices.",
-            );
-        }
+        e2eTitle = crossSigningUserTitles[status];
    } else if (crossSigning && !isUser) {
-        if (isWarning) {
-            e2eTitle = _t(
-                "Some users in this encrypted room are not verified by you or " +
-                "they have not verified their own devices.",
-            );
-        } else if (isVerified) {
-            e2eTitle = _t(
-                "All users in this encrypted room are verified by you and " +
-                "they have verified their own devices.",
-            );
-        }
+        e2eTitle = crossSigningRoomTitles[status];
    } else if (!crossSigning && isUser) {
-        if (isWarning) {
-            e2eTitle = _t("Some devices for this user are not trusted");
-        } else if (isVerified) {
-            e2eTitle = _t("All devices for this user are trusted");
-        }
+        e2eTitle = legacyUserTitles[status];
    } else if (!crossSigning && !isUser) {
-        if (isWarning) {
-            e2eTitle = _t("Some devices in this encrypted room are not trusted");
-        } else if (isVerified) {
-            e2eTitle = _t("All devices in this encrypted room are trusted");
-        }
+        e2eTitle = legacyRoomTitles[status];
    }

-    let style = null;
-    if (props.size) {
-        style = {width: `${props.size}px`, height: `${props.size}px`};
+    let style;
+    if (size) {
+        style = {width: `${size}px`, height: `${size}px`};
    }

-    const icon = (<div className={e2eIconClasses} style={style} title={e2eTitle} />);
-    if (props.onClick) {
-        return (<AccessibleButton onClick={props.onClick}>{ icon }</AccessibleButton>);
-    } else {
-        return icon;
+    const onMouseOver = () => setHover(true);
+    const onMouseOut = () => setHover(false);
+
+    let tip;
+    if (hover) {
+        tip = <Tooltip label={e2eTitle ? _t(e2eTitle) : ""} />;
    }
+
+    if (onClick) {
+        return (
+            <AccessibleButton
+                onClick={onClick}
+                onMouseOver={onMouseOver}
+                onMouseOut={onMouseOut}
+                className={classes}
+                style={style}
+            >
+                { tip }
+            </AccessibleButton>
+        );
    }
+
+    return <div onMouseOver={onMouseOver} onMouseOut={onMouseOut} className={classes} style={style}>
+        { tip }
+    </div>;
+};
+
+E2EIcon.propTypes = {
+    isUser: PropTypes.bool,
+    status: PropTypes.oneOf(Object.values(E2E_STATE)),
+    className: PropTypes.string,
+    size: PropTypes.number,
+    onClick: PropTypes.func,
+};
+
+export default E2EIcon;
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@ -33,6 +33,7 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {ALL_RULE_TYPES} from "../../../mjolnir/BanList";
 import * as ObjectUtils from "../../../ObjectUtils";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {E2E_STATE} from "./E2EIcon";

 const eventTileTypes = {
    'm.room.message': 'messages.MessageEvent',
@ -66,13 +67,6 @@ const stateEventTileTypes = {
    'm.room.related_groups': 'messages.TextualEvent',
 };

-const E2E_STATE = {
-    VERIFIED: "verified",
-    WARNING: "warning",
-    UNKNOWN: "unknown",
-    NORMAL: "normal",
-};
-
 // Add all the Mjolnir stuff to the renderer
 for (const evType of ALL_RULE_TYPES) {
    stateEventTileTypes[evType] = 'messages.TextualEvent';
@ -578,6 +572,7 @@ export default createReactClass({
            console.error("EventTile attempted to get relations for an event without an ID");
            // Use event's special `toJSON` method to log key data.
            console.log(JSON.stringify(this.props.mxEvent, null, 4));
+            console.trace("Stacktrace for https://github.com/vector-im/riot-web/issues/11120");
        }
        return this.props.getRelationsForEvent(eventId, "m.annotation", "m.reaction");
    },
--- a/src/components/views/rooms/InviteOnlyIcon.js
+++ b/src/components/views/rooms/InviteOnlyIcon.js
@ -0,0 +1,51 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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 { _t } from '../../../languageHandler';
+import * as sdk from '../../../index';
+
+export default class InviteOnlyIcon extends React.Component {
+    constructor() {
+        super();
+
+        this.state = {
+            hover: false,
+        };
+    }
+
+    onHoverStart = () => {
+        this.setState({hover: true});
+    };
+
+    onHoverEnd = () => {
+        this.setState({hover: false});
+    };
+
+    render() {
+        const Tooltip = sdk.getComponent("elements.Tooltip");
+        let tooltip;
+        if (this.state.hover) {
+            tooltip = <Tooltip className="mx_InviteOnlyIcon_tooltip" label={_t("Invite only")} dir="auto" />;
+        }
+        return (<div className="mx_InviteOnlyIcon"
+          onMouseEnter={this.onHoverStart}
+          onMouseLeave={this.onHoverEnd}
+        >
+          { tooltip }
+        </div>);
+    }
+}
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@ -26,6 +26,7 @@ import Stickerpicker from './Stickerpicker';
 import { makeRoomPermalink } from '../../../utils/permalinks/Permalinks';
 import ContentMessages from '../../../ContentMessages';
 import E2EIcon from './E2EIcon';
+import SettingsStore from "../../../settings/SettingsStore";

 function ComposerAvatar(props) {
    const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
@ -168,7 +169,6 @@ export default class MessageComposer extends React.Component {
    constructor(props) {
        super(props);
        this.onInputStateChanged = this.onInputStateChanged.bind(this);
-        this.onEvent = this.onEvent.bind(this);
        this._onRoomStateEvents = this._onRoomStateEvents.bind(this);
        this._onRoomViewStoreUpdate = this._onRoomViewStoreUpdate.bind(this);
        this._onTombstoneClick = this._onTombstoneClick.bind(this);
@ -182,11 +182,6 @@ export default class MessageComposer extends React.Component {
    }

    componentDidMount() {
-        // N.B. using 'event' rather than 'RoomEvents' otherwise the crypto handler
-        // for 'event' fires *after* 'RoomEvent', and our room won't have yet been
-        // marked as encrypted.
-        // XXX: fragile as all hell - fixme somehow, perhaps with a dedicated Room.encryption event or something.
-        MatrixClientPeg.get().on("event", this.onEvent);
        MatrixClientPeg.get().on("RoomState.events", this._onRoomStateEvents);
        this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
        this._waitForOwnMember();
@ -210,7 +205,6 @@ export default class MessageComposer extends React.Component {

    componentWillUnmount() {
        if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener("event", this.onEvent);
            MatrixClientPeg.get().removeListener("RoomState.events", this._onRoomStateEvents);
        }
        if (this._roomStoreToken) {
@ -218,13 +212,6 @@ export default class MessageComposer extends React.Component {
        }
    }

-    onEvent(event) {
-        if (event.getType() !== 'm.room.encryption') return;
-        if (event.getRoomId() !== this.props.room.roomId) return;
-        // TODO: put (encryption state??) in state
-        this.forceUpdate();
-    }
-
    _onRoomStateEvents(ev, state) {
        if (ev.getRoomId() !== this.props.room.roomId) return;

@ -282,21 +269,36 @@ export default class MessageComposer extends React.Component {
    }

    renderPlaceholderText() {
-        const roomIsEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
+        if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
            if (this.state.isQuoting) {
-            if (roomIsEncrypted) {
+                if (this.props.e2eStatus) {
+                    return _t('Send an encrypted reply…');
+                } else {
+                    return _t('Send a reply…');
+                }
+            } else {
+                if (this.props.e2eStatus) {
+                    return _t('Send an encrypted message…');
+                } else {
+                    return _t('Send a message…');
+                }
+            }
+        } else {
+            if (this.state.isQuoting) {
+                if (this.props.e2eStatus) {
                    return _t('Send an encrypted reply…');
                } else {
                    return _t('Send a reply (unencrypted)…');
                }
            } else {
-            if (roomIsEncrypted) {
+                if (this.props.e2eStatus) {
                    return _t('Send an encrypted message…');
                } else {
                    return _t('Send a message (unencrypted)…');
                }
            }
        }
+    }

    render() {
        const controls = [
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@ -32,6 +32,7 @@ import {CancelButton} from './SimpleRoomHeader';
 import SettingsStore from "../../../settings/SettingsStore";
 import RoomHeaderButtons from '../right_panel/RoomHeaderButtons';
 import E2EIcon from './E2EIcon';
+import InviteOnlyIcon from './InviteOnlyIcon';

 export default createReactClass({
    displayName: 'RoomHeader',
@ -162,11 +163,12 @@ export default createReactClass({

        const joinRules = this.props.room && this.props.room.currentState.getStateEvents("m.room.join_rules", "");
        const joinRule = joinRules && joinRules.getContent().join_rule;
-        const joinRuleClass = classNames("mx_RoomHeader_PrivateIcon",
-                                         {"mx_RoomHeader_isPrivate": joinRule === "invite"});
-        const privateIcon = SettingsStore.isFeatureEnabled("feature_cross_signing") ?
-            <div className={joinRuleClass} /> :
-            undefined;
+        let privateIcon;
+        if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+            if (joinRule == "invite") {
+                privateIcon = <InviteOnlyIcon />;
+            }
+        }

        if (this.props.onCancelClick) {
            cancelButton = <CancelButton onClick={this.props.onCancelClick} />;
--- a/src/components/views/rooms/RoomList.js
+++ b/src/components/views/rooms/RoomList.js
@ -719,7 +719,7 @@ export default createReactClass({
            },
            {
                list: this.state.lists['im.vector.fake.direct'],
-                label: _t('People'),
+                label: _t('Direct Messages'),
                tagName: "im.vector.fake.direct",
                order: "recent",
                incomingCall: incomingCallIfTaggedAs('im.vector.fake.direct'),
--- a/src/components/views/rooms/RoomTile.js
+++ b/src/components/views/rooms/RoomTile.js
@ -33,6 +33,10 @@ import RoomViewStore from '../../../stores/RoomViewStore';
 import SettingsStore from "../../../settings/SettingsStore";
 import {_t} from "../../../languageHandler";
 import {RovingTabIndexWrapper} from "../../../accessibility/RovingTabIndex";
+import E2EIcon from './E2EIcon';
+import InviteOnlyIcon from './InviteOnlyIcon';
+// eslint-disable-next-line camelcase
+import rate_limited_func from '../../../ratelimitedfunc';

 export default createReactClass({
    displayName: 'RoomTile',
@ -70,6 +74,7 @@ export default createReactClass({
            notificationCount: this.props.room.getUnreadNotificationCount(),
            selected: this.props.room.roomId === RoomViewStore.getRoomId(),
            statusMessage: this._getStatusMessage(),
+            e2eStatus: null,
        });
    },

@ -102,6 +107,83 @@ export default createReactClass({
        return statusUser._unstable_statusMessage;
    },

+    onRoomStateMember: function(ev, state, member) {
+        // we only care about leaving users
+        // because trust state will change if someone joins a megolm session anyway
+        if (member.membership !== "leave") {
+            return;
+        }
+        // ignore members in other rooms
+        if (member.roomId !== this.props.room.roomId) {
+            return;
+        }
+
+        this._updateE2eStatus();
+    },
+
+    onUserVerificationChanged: function(userId, _trustStatus) {
+        if (!this.props.room.getMember(userId)) {
+            // Not in this room
+            return;
+        }
+        this._updateE2eStatus();
+    },
+
+    onRoomTimeline: function(ev, room) {
+        if (!room) return;
+        if (room.roomId != this.props.room.roomId) return;
+        if (ev.getType() !== "m.room.encryption") return;
+        MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
+        this.onFindingRoomToBeEncrypted();
+    },
+
+    onFindingRoomToBeEncrypted: function() {
+        const cli = MatrixClientPeg.get();
+        cli.on("RoomState.members", this.onRoomStateMember);
+        cli.on("userTrustStatusChanged", this.onUserVerificationChanged);
+
+        this._updateE2eStatus();
+    },
+
+    _updateE2eStatus: async function() {
+        const cli = MatrixClientPeg.get();
+        if (!cli.isRoomEncrypted(this.props.room.roomId)) {
+            return;
+        }
+        if (!SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+            return;
+        }
+
+        // Duplication between here and _updateE2eStatus in RoomView
+        const e2eMembers = await this.props.room.getEncryptionTargetMembers();
+        const verified = [];
+        const unverified = [];
+        e2eMembers.map(({userId}) => userId)
+            .filter((userId) => userId !== cli.getUserId())
+            .forEach((userId) => {
+                (cli.checkUserTrust(userId).isCrossSigningVerified() ?
+                verified : unverified).push(userId);
+            });
+
+        /* Check all verified user devices. */
+        for (const userId of verified) {
+            const devices = await cli.getStoredDevicesForUser(userId);
+            const allDevicesVerified = devices.every(({deviceId}) => {
+                return cli.checkDeviceTrust(userId, deviceId).isVerified();
+            });
+            if (!allDevicesVerified) {
+                this.setState({
+                    e2eStatus: "warning",
+                });
+                return;
+            }
+        }
+
+        this.setState({
+            e2eStatus: unverified.length === 0 ? "verified" : "normal",
+        });
+    },
+
    onRoomName: function(room) {
        if (room !== this.props.room) return;
        this.setState({
@ -151,10 +233,19 @@ export default createReactClass({
    },

    componentDidMount: function() {
+        /* We bind here rather than in the definition because otherwise we wind up with the
+           method only being callable once every 500ms across all instances, which would be wrong */
+        this._updateE2eStatus = rate_limited_func(this._updateE2eStatus, 500);
+
        const cli = MatrixClientPeg.get();
        cli.on("accountData", this.onAccountData);
        cli.on("Room.name", this.onRoomName);
        cli.on("RoomState.events", this.onJoinRule);
+        if (cli.isRoomEncrypted(this.props.room.roomId)) {
+            this.onFindingRoomToBeEncrypted();
+        } else {
+            cli.on("Room.timeline", this.onRoomTimeline);
+        }
        ActiveRoomObserver.addListener(this.props.room.roomId, this._onActiveRoomChange);
        this.dispatcherRef = dis.register(this.onAction);

@ -172,6 +263,9 @@ export default createReactClass({
            MatrixClientPeg.get().removeListener("accountData", this.onAccountData);
            MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
            cli.removeListener("RoomState.events", this.onJoinRule);
+            cli.removeListener("RoomState.members", this.onRoomStateMember);
+            cli.removeListener("userTrustStatusChanged", this.onUserVerificationChanged);
+            cli.removeListener("Room.timeline", this.onRoomTimeline);
        }
        ActiveRoomObserver.removeListener(this.props.room.roomId, this._onActiveRoomChange);
        dis.unregister(this.dispatcherRef);
@ -318,7 +412,6 @@ export default createReactClass({
            'mx_RoomTile_noBadges': !badges,
            'mx_RoomTile_transparent': this.props.transparent,
            'mx_RoomTile_hasSubtext': subtext && !this.props.collapsed,
-            'mx_RoomTile_isPrivate': this.state.joinRule == "invite" && !dmUserId,
        });

        const avatarClasses = classNames({
@ -385,7 +478,8 @@ export default createReactClass({

        let dmIndicator;
        let dmOnline;
-        if (dmUserId) {
+        // If we can place a shield, do that instead
+        if (dmUserId && !this.state.e2eStatus) {
            dmIndicator = <img
                src={require("../../../../res/img/icon_person.svg")}
                className="mx_RoomTile_dm"
@ -430,7 +524,14 @@ export default createReactClass({

        let privateIcon = null;
        if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
-            privateIcon = <div className="mx_RoomTile_PrivateIcon" />;
+            if (this.state.joinRule == "invite" && !dmUserId) {
+                privateIcon = <InviteOnlyIcon />;
+            }
+        }
+
+        let e2eIcon = null;
+        if (this.state.e2eStatus) {
+            e2eIcon = <E2EIcon status={this.state.e2eStatus} className="mx_RoomTile_e2eIcon" />;
        }

        return <React.Fragment>
@ -453,6 +554,7 @@ export default createReactClass({
                            <div className="mx_RoomTile_avatar_container">
                                <RoomAvatar room={this.props.room} width={24} height={24} />
                                { dmIndicator }
+                                { e2eIcon }
                            </div>
                        </div>
                        { privateIcon }
--- a/src/components/views/toasts/VerificationRequestToast.js
+++ b/src/components/views/toasts/VerificationRequestToast.js
@ -23,6 +23,7 @@ import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases";
 import {userLabelForEventRoom} from "../../../utils/KeyVerificationStateObserver";
 import dis from "../../../dispatcher";
 import ToastStore from "../../../stores/ToastStore";
+import Modal from "../../../Modal";

 export default class VerificationRequestToast extends React.PureComponent {
    constructor(props) {
@ -65,16 +66,14 @@ export default class VerificationRequestToast extends React.PureComponent {
    accept = async () => {
        ToastStore.sharedInstance().dismissToast(this.props.toastKey);
        const {request} = this.props;
-        const {event} = request;
        // no room id for to_device requests
-        if (event.getRoomId()) {
+        try {
+            if (request.channel.roomId) {
                dis.dispatch({
                    action: 'view_room',
-                room_id: event.getRoomId(),
+                    room_id: request.channel.roomId,
                    should_peek: false,
                });
-        }
-        try {
                await request.accept();
                const cli = MatrixClientPeg.get();
            dis.dispatch({
@ -84,7 +83,13 @@ export default class VerificationRequestToast extends React.PureComponent {
                    verificationRequest: request,
                    member: cli.getUser(request.otherUserId),
                },
-            });
+            });} else if (request.channel.deviceId && request.verifier) {
+                // show to_device verifications in dialog still
+                const IncomingSasDialog = sdk.getComponent("views.dialogs.IncomingSasDialog");
+                Modal.createTrackedDialog('Incoming Verification', '', IncomingSasDialog, {
+                    verifier: request.verifier,
+                }, null, /* priority = */ false, /* static = */ true);
+            }
        } catch (err) {
            console.error(err.message);
        }
@ -93,13 +98,13 @@ export default class VerificationRequestToast extends React.PureComponent {
    render() {
        const FormButton = sdk.getComponent("elements.FormButton");
        const {request} = this.props;
-        const {event} = request;
        const userId = request.otherUserId;
-        let nameLabel = event.getRoomId() ? userLabelForEventRoom(userId, event) : userId;
+        const roomId = request.channel.roomId;
+        let nameLabel = roomId ? userLabelForEventRoom(userId, roomId) : userId;
        // for legacy to_device verification requests
        if (nameLabel === userId) {
            const client = MatrixClientPeg.get();
-            const user = client.getUser(event.getSender());
+            const user = client.getUser(userId);
            if (user && user.displayName) {
                nameLabel = _t("%(name)s (%(userId)s)", {name: user.displayName, userId});
            }
--- a/src/hooks/useSettings.js
+++ b/src/hooks/useSettings.js
@ -0,0 +1,52 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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 {useEffect, useState} from "react";
+import SettingsStore from '../settings/SettingsStore';
+
+// Hook to fetch the value of a setting and dynamically update when it changes
+export const useSettingValue = (settingName, roomId = null, excludeDefault = false) => {
+    const [value, setValue] = useState(SettingsStore.getValue(settingName, roomId, excludeDefault));
+
+    useEffect(() => {
+        const ref = SettingsStore.watchSetting(settingName, roomId, () => {
+            setValue(SettingsStore.getValue(settingName, roomId, excludeDefault));
+        });
+        // clean-up
+        return () => {
+            SettingsStore.unwatchSetting(ref);
+        };
+    }, [settingName, roomId, excludeDefault]);
+
+    return value;
+};
+
+// Hook to fetch whether a feature is enabled and dynamically update when that changes
+export const useFeatureEnabled = (featureName, roomId = null) => {
+    const [enabled, setEnabled] = useState(SettingsStore.isFeatureEnabled(featureName, roomId));
+
+    useEffect(() => {
+        const ref = SettingsStore.watchSetting(featureName, roomId, () => {
+            setEnabled(SettingsStore.isFeatureEnabled(featureName, roomId));
+        });
+        // clean-up
+        return () => {
+            SettingsStore.unwatchSetting(ref);
+        };
+    }, [featureName, roomId]);
+
+    return enabled;
+};
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@ -21,6 +21,9 @@
    "Analytics": "Analytics",
    "The information being sent to us to help make Riot.im better includes:": "The information being sent to us to help make Riot.im better includes:",
    "Where this page includes identifiable information, such as a room, user or group ID, that data is removed before being sent to the server.": "Where this page includes identifiable information, such as a room, user or group ID, that data is removed before being sent to the server.",
+    "Error": "Error",
+    "Unable to load! Check your network connectivity and try again.": "Unable to load! Check your network connectivity and try again.",
+    "Dismiss": "Dismiss",
    "Call Failed": "Call Failed",
    "There are unknown devices in this room: if you proceed without verifying them, it will be possible for someone to eavesdrop on your call.": "There are unknown devices in this room: if you proceed without verifying them, it will be possible for someone to eavesdrop on your call.",
    "Review Devices": "Review Devices",
@ -105,9 +108,6 @@
    "This action requires accessing the default identity server <server /> to validate an email address or phone number, but the server does not have any terms of service.": "This action requires accessing the default identity server <server /> to validate an email address or phone number, but the server does not have any terms of service.",
    "Only continue if you trust the owner of the server.": "Only continue if you trust the owner of the server.",
    "Trust": "Trust",
-    "Error": "Error",
-    "Unable to load! Check your network connectivity and try again.": "Unable to load! Check your network connectivity and try again.",
-    "Dismiss": "Dismiss",
    "Riot does not have permission to send you notifications - please check your browser settings": "Riot does not have permission to send you notifications - please check your browser settings",
    "Riot was not given permission to send notifications - please try again": "Riot was not given permission to send notifications - please try again",
    "Unable to enable Notifications": "Unable to enable Notifications",
@ -121,15 +121,8 @@
    "Moderator": "Moderator",
    "Admin": "Admin",
    "Custom (%(level)s)": "Custom (%(level)s)",
-    "Start a chat": "Start a chat",
-    "Who would you like to communicate with?": "Who would you like to communicate with?",
-    "Email, name or Matrix ID": "Email, name or Matrix ID",
-    "Start Chat": "Start Chat",
-    "Invite new room members": "Invite new room members",
-    "Send Invites": "Send Invites",
-    "Failed to start chat": "Failed to start chat",
-    "Operation failed": "Operation failed",
    "Failed to invite": "Failed to invite",
+    "Operation failed": "Operation failed",
    "Failed to invite users to the room:": "Failed to invite users to the room:",
    "Failed to invite the following users to the %(roomName)s room:": "Failed to invite the following users to the %(roomName)s room:",
    "You need to be logged in.": "You need to be logged in.",
@ -375,7 +368,6 @@
    "Render simple counters in room header": "Render simple counters in room header",
    "Multiple integration managers": "Multiple integration managers",
    "Try out new ways to ignore people (experimental)": "Try out new ways to ignore people (experimental)",
-    "New invite dialog": "New invite dialog",
    "Show a presence dot next to DMs in the room list": "Show a presence dot next to DMs in the room list",
    "Enable cross-signing to verify per-user instead of per-device (in development)": "Enable cross-signing to verify per-user instead of per-device (in development)",
    "Enable local event indexing and E2EE search (requires restart)": "Enable local event indexing and E2EE search (requires restart)",
@ -890,8 +882,9 @@
    "This user has not verified all of their devices.": "This user has not verified all of their devices.",
    "You have not verified this user. This user has verified all of their devices.": "You have not verified this user. This user has verified all of their devices.",
    "You have verified this user. This user has verified all of their devices.": "You have verified this user. This user has verified all of their devices.",
-    "Some users in this encrypted room are not verified by you or they have not verified their own devices.": "Some users in this encrypted room are not verified by you or they have not verified their own devices.",
-    "All users in this encrypted room are verified by you and they have verified their own devices.": "All users in this encrypted room are verified by you and they have verified their own devices.",
+    "Someone is using an unknown device": "Someone is using an unknown device",
+    "This room is end-to-end encrypted": "This room is end-to-end encrypted",
+    "Everyone in this room is verified": "Everyone in this room is verified",
    "Some devices for this user are not trusted": "Some devices for this user are not trusted",
    "All devices for this user are trusted": "All devices for this user are trusted",
    "Some devices in this encrypted room are not trusted": "Some devices in this encrypted room are not trusted",
@ -911,6 +904,7 @@
    "Unencrypted": "Unencrypted",
    "Encrypted by a deleted device": "Encrypted by a deleted device",
    "Please select the destination room for this message": "Please select the destination room for this message",
+    "Invite only": "Invite only",
    "Scroll to bottom of page": "Scroll to bottom of page",
    "Close preview": "Close preview",
    "device id: ": "device id: ",
@ -949,6 +943,7 @@
    "Invite": "Invite",
    "Share Link to User": "Share Link to User",
    "User Options": "User Options",
+    "Start a chat": "Start a chat",
    "Direct chats": "Direct chats",
    "Remove recent messages": "Remove recent messages",
    "Unmute": "Unmute",
@ -967,8 +962,10 @@
    "Hangup": "Hangup",
    "Upload file": "Upload file",
    "Send an encrypted reply…": "Send an encrypted reply…",
-    "Send a reply (unencrypted)…": "Send a reply (unencrypted)…",
+    "Send a reply…": "Send a reply…",
    "Send an encrypted message…": "Send an encrypted message…",
+    "Send a message…": "Send a message…",
+    "Send a reply (unencrypted)…": "Send a reply (unencrypted)…",
    "Send a message (unencrypted)…": "Send a message (unencrypted)…",
    "The conversation continues here.": "The conversation continues here.",
    "This room has been replaced and is no longer active.": "This room has been replaced and is no longer active.",
@ -1015,7 +1012,7 @@
    "Community Invites": "Community Invites",
    "Invites": "Invites",
    "Favourites": "Favourites",
-    "People": "People",
+    "Direct Messages": "Direct Messages",
    "Start chat": "Start chat",
    "Rooms": "Rooms",
    "Low priority": "Low priority",
@ -1482,8 +1479,7 @@
    "Suggestions": "Suggestions",
    "Recently Direct Messaged": "Recently Direct Messaged",
    "Show more": "Show more",
-    "Direct Messages": "Direct Messages",
-    "If you can't find someone, ask them for their username, or share your username (%(userId)s) or <a>profile link</a>.": "If you can't find someone, ask them for their username, or share your username (%(userId)s) or <a>profile link</a>.",
+    "If you can't find someone, ask them for their username, share your username (%(userId)s) or <a>profile link</a>.": "If you can't find someone, ask them for their username, share your username (%(userId)s) or <a>profile link</a>.",
    "Go": "Go",
    "If you can't find someone, ask them for their username (e.g. @user:server.com) or <a>share this room</a>.": "If you can't find someone, ask them for their username (e.g. @user:server.com) or <a>share this room</a>.",
    "You added a new device '%(displayName)s', which is requesting encryption keys.": "You added a new device '%(displayName)s', which is requesting encryption keys.",
--- a/src/indexing/BaseEventIndexManager.js
+++ b/src/indexing/BaseEventIndexManager.js
@ -62,11 +62,18 @@ export interface SearchArgs {
    room_id: ?string;
 }

-export interface HistoricEvent {
+export interface EventAndProfile {
    event: MatrixEvent;
    profile: MatrixProfile;
 }

+export interface LoadArgs {
+    roomId: string;
+    limit: number;
+    fromEvent: string;
+    direction: string;
+}
+
 /**
 * Base class for classes that provide platform-specific event indexing.
 *
@ -145,7 +152,7 @@ export default class BaseEventIndexManager {
     *
     * This is used to add a batch of events to the index.
     *
-     * @param {[HistoricEvent]} events The list of events and profiles that
+     * @param {[EventAndProfile]} events The list of events and profiles that
     * should be added to the event index.
     * @param {[CrawlerCheckpoint]} checkpoint A new crawler checkpoint that
     * should be stored in the index which should be used to continue crawling
@ -158,7 +165,7 @@ export default class BaseEventIndexManager {
     * were already added to the index, false otherwise.
     */
    async addHistoricEvents(
-        events: [HistoricEvent],
+        events: [EventAndProfile],
        checkpoint: CrawlerCheckpoint | null,
        oldCheckpoint: CrawlerCheckpoint | null,
    ): Promise<bool> {
@ -201,6 +208,26 @@ export default class BaseEventIndexManager {
        throw new Error("Unimplemented");
    }

+    /** Load events that contain an mxc URL to a file from the index.
+     *
+     * @param  {object} args Arguments object for the method.
+     * @param  {string} args.roomId The ID of the room for which the events
+     * should be loaded.
+     * @param  {number} args.limit The maximum number of events to return.
+     * @param  {string} args.fromEvent An event id of a previous event returned
+     * by this method. Passing this means that we are going to continue loading
+     * events from this point in the history.
+     * @param  {string} args.direction The direction to which we should continue
+     * loading events from. This is used only if fromEvent is used as well.
+     *
+     * @return {Promise<[EventAndProfile]>} A promise that will resolve to an
+     * array of Matrix events that contain mxc URLs accompanied with the
+     * historic profile of the sender.
+     */
+    async loadFileEvents(args: LoadArgs): Promise<[EventAndProfile]> {
+        throw new Error("Unimplemented");
+    }
+
    /**
     * close our event index.
     *
--- a/src/indexing/EventIndex.js
+++ b/src/indexing/EventIndex.js
@ -16,6 +16,7 @@ limitations under the License.

 import PlatformPeg from "../PlatformPeg";
 import {MatrixClientPeg} from "../MatrixClientPeg";
+import {EventTimeline, RoomMember} from 'matrix-js-sdk';

 /*
 * Event indexing class that wraps the platform specific event indexing.
@ -170,7 +171,9 @@ export default class EventIndex {
            return;
        }

-        const e = ev.toJSON().decrypted;
+        const jsonEvent = ev.toJSON();
+        const e = ev.isEncrypted() ? jsonEvent.decrypted : jsonEvent;
+
        const profile = {
            displayname: ev.sender.rawDisplayName,
            avatar_url: ev.sender.getMxcAvatarUrl(),
@ -305,10 +308,7 @@ export default class EventIndex {
            // consume.
            const events = filteredEvents.map((ev) => {
                const jsonEvent = ev.toJSON();
-
-                let e;
-                if (ev.isEncrypted()) e = jsonEvent.decrypted;
-                else e = jsonEvent;
+                const e = ev.isEncrypted() ? jsonEvent.decrypted : jsonEvent;

                let profile = {};
                if (e.sender in profiles) profile = profiles[e.sender];
@ -406,4 +406,198 @@ export default class EventIndex {
        const indexManager = PlatformPeg.get().getEventIndexingManager();
        return indexManager.searchEventIndex(searchArgs);
    }
+
+    /**
+     * Load events that contain URLs from the event index.
+     *
+     * @param {Room} room The room for which we should fetch events containing
+     * URLs
+     *
+     * @param {number} limit The maximum number of events to fetch.
+     *
+     * @param {string} fromEvent From which event should we continue fetching
+     * events from the index. This is only needed if we're continuing to fill
+     * the timeline, e.g. if we're paginating. This needs to be set to a event
+     * id of an event that was previously fetched with this function.
+     *
+     * @param {string} direction The direction in which we will continue
+     * fetching events. EventTimeline.BACKWARDS to continue fetching events that
+     * are older than the event given in fromEvent, EventTimeline.FORWARDS to
+     * fetch newer events.
+     *
+     * @returns {Promise<MatrixEvent[]>} Resolves to an array of events that
+     * contain URLs.
+     */
+    async loadFileEvents(room, limit = 10, fromEvent = null, direction = EventTimeline.BACKWARDS) {
+        const client = MatrixClientPeg.get();
+        const indexManager = PlatformPeg.get().getEventIndexingManager();
+
+        const loadArgs = {
+            roomId: room.roomId,
+            limit: limit,
+        };
+
+        if (fromEvent) {
+            loadArgs.fromEvent = fromEvent;
+            loadArgs.direction = direction;
+        }
+
+        let events;
+
+        // Get our events from the event index.
+        try {
+            events = await indexManager.loadFileEvents(loadArgs);
+        } catch (e) {
+            console.log("EventIndex: Error getting file events", e);
+            return [];
+        }
+
+        const eventMapper = client.getEventMapper();
+
+        // Turn the events into MatrixEvent objects.
+        const matrixEvents = events.map(e => {
+            const matrixEvent = eventMapper(e.event);
+
+            const member = new RoomMember(room.roomId, matrixEvent.getSender());
+
+            // We can't really reconstruct the whole room state from our
+            // EventIndex to calculate the correct display name. Use the
+            // disambiguated form always instead.
+            member.name = e.profile.displayname + " (" + matrixEvent.getSender() + ")";
+
+            // This is sets the avatar URL.
+            const memberEvent = eventMapper(
+                {
+                    content: {
+                        membership: "join",
+                        avatar_url: e.profile.avatar_url,
+                        displayname: e.profile.displayname,
+                    },
+                    type: "m.room.member",
+                    event_id: matrixEvent.getId() + ":eventIndex",
+                    room_id: matrixEvent.getRoomId(),
+                    sender: matrixEvent.getSender(),
+                    origin_server_ts: matrixEvent.getTs(),
+                    state_key: matrixEvent.getSender(),
+                },
+            );
+
+            // We set this manually to avoid emitting RoomMember.membership and
+            // RoomMember.name events.
+            member.events.member = memberEvent;
+            matrixEvent.sender = member;
+
+            return matrixEvent;
+        });
+
+        return matrixEvents;
+    }
+
+    /**
+     * Fill a timeline with events that contain URLs.
+     *
+     * @param {TimelineSet} timelineSet The TimelineSet the Timeline belongs to,
+     * used to check if we're adding duplicate events.
+     *
+     * @param {Timeline} timeline The Timeline which should be filed with
+     * events.
+     *
+     * @param {Room} room The room for which we should fetch events containing
+     * URLs
+     *
+     * @param {number} limit The maximum number of events to fetch.
+     *
+     * @param {string} fromEvent From which event should we continue fetching
+     * events from the index. This is only needed if we're continuing to fill
+     * the timeline, e.g. if we're paginating. This needs to be set to a event
+     * id of an event that was previously fetched with this function.
+     *
+     * @param {string} direction The direction in which we will continue
+     * fetching events. EventTimeline.BACKWARDS to continue fetching events that
+     * are older than the event given in fromEvent, EventTimeline.FORWARDS to
+     * fetch newer events.
+     *
+     * @returns {Promise<boolean>} Resolves to true if events were added to the
+     * timeline, false otherwise.
+     */
+    async populateFileTimeline(timelineSet, timeline, room, limit = 10,
+                               fromEvent = null, direction = EventTimeline.BACKWARDS) {
+        const matrixEvents = await this.loadFileEvents(room, limit, fromEvent, direction);
+
+        // If this is a normal fill request, not a pagination request, we need
+        // to get our events in the BACKWARDS direction but populate them in the
+        // forwards direction.
+        // This needs to happen because a fill request might come with an
+        // exisitng timeline e.g. if you close and re-open the FilePanel.
+        if (fromEvent === null) {
+            matrixEvents.reverse();
+            direction = direction == EventTimeline.BACKWARDS ? EventTimeline.FORWARDS: EventTimeline.BACKWARDS;
+        }
+
+        // Add the events to the timeline of the file panel.
+        matrixEvents.forEach(e => {
+            if (!timelineSet.eventIdToTimeline(e.getId())) {
+                timelineSet.addEventToTimeline(e, timeline, direction == EventTimeline.BACKWARDS);
+            }
+        });
+
+        // Set the pagination token to the oldest event that we retrieved.
+        if (matrixEvents.length > 0) {
+            timeline.setPaginationToken(matrixEvents[matrixEvents.length - 1].getId(), EventTimeline.BACKWARDS);
+            return true;
+        } else {
+            timeline.setPaginationToken("", EventTimeline.BACKWARDS);
+            return false;
+        }
+    }
+
+    /**
+     * Emulate a TimelineWindow pagination() request with the event index as the event source
+     *
+     * Might not fetch events from the index if the timeline already contains
+     * events that the window isn't showing.
+     *
+     * @param {Room} room The room for which we should fetch events containing
+     * URLs
+     *
+     * @param {TimelineWindow} timelineWindow The timeline window that should be
+     * populated with new events.
+     *
+     * @param {string} direction The direction in which we should paginate.
+     * EventTimeline.BACKWARDS to paginate back, EventTimeline.FORWARDS to
+     * paginate forwards.
+     *
+     * @param {number} limit The maximum number of events to fetch while
+     * paginating.
+     *
+     * @returns {Promise<boolean>} Resolves to a boolean which is true if more
+     * events were successfully retrieved.
+     */
+    paginateTimelineWindow(room, timelineWindow, direction, limit) {
+        const tl = timelineWindow.getTimelineIndex(direction);
+
+        if (!tl) return Promise.resolve(false);
+        if (tl.pendingPaginate) return tl.pendingPaginate;
+
+        if (timelineWindow.extend(direction, limit)) {
+            return Promise.resolve(true);
+        }
+
+        const paginationMethod = async (timelineWindow, timeline, room, direction, limit) => {
+            const timelineSet = timelineWindow._timelineSet;
+            const token = timeline.timeline.getPaginationToken(direction);
+
+            const ret = await this.populateFileTimeline(timelineSet, timeline.timeline, room, limit, token, direction);
+
+            timeline.pendingPaginate = null;
+            timelineWindow.extend(direction, limit);
+
+            return ret;
+        };
+
+        const paginationPromise = paginationMethod(timelineWindow, tl, room, direction, limit);
+        tl.pendingPaginate = paginationPromise;
+
+        return paginationPromise;
+    }
 }
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@ -128,12 +128,6 @@ export const SETTINGS = {
        supportedLevels: LEVELS_FEATURE,
        default: false,
    },
-    "feature_ftue_dms": {
-        isFeature: true,
-        displayName: _td("New invite dialog"),
-        supportedLevels: LEVELS_FEATURE,
-        default: false,
-    },
    "feature_presence_in_room_list": {
        isFeature: true,
        displayName: _td("Show a presence dot next to DMs in the room list"),
--- a/src/utils/KeyVerificationStateObserver.js
+++ b/src/utils/KeyVerificationStateObserver.js
@ -17,16 +17,15 @@ limitations under the License.
 import {MatrixClientPeg} from '../MatrixClientPeg';
 import { _t } from '../languageHandler';

-export function getNameForEventRoom(userId, mxEvent) {
-    const roomId = mxEvent.getRoomId();
+export function getNameForEventRoom(userId, roomId) {
    const client = MatrixClientPeg.get();
    const room = client.getRoom(roomId);
-    const member = room.getMember(userId);
+    const member = room && room.getMember(userId);
    return member ? member.name : userId;
 }

-export function userLabelForEventRoom(userId, mxEvent) {
-    const name = getNameForEventRoom(userId, mxEvent);
+export function userLabelForEventRoom(userId, roomId) {
+    const name = getNameForEventRoom(userId, roomId);
    if (name !== userId) {
        return _t("%(name)s (%(userId)s)", {name, userId});
    } else {
--- a/test/end-to-end-tests/src/usecases/invite.js
+++ b/test/end-to-end-tests/src/usecases/invite.js
@ -31,10 +31,11 @@ module.exports = async function invite(session, userId) {
    }
    const inviteButton = await session.query(".mx_MemberList_invite");
    await inviteButton.click();
-    const inviteTextArea = await session.query(".mx_AddressPickerDialog textarea");
+    const inviteTextArea = await session.query(".mx_InviteDialog_editor textarea");
    await inviteTextArea.type(userId);
-    await inviteTextArea.press("Enter");
-    const confirmButton = await session.query(".mx_Dialog_primary");
+    const selectUserItem = await session.query(".mx_InviteDialog_roomTile");
+    await selectUserItem.click();
+    const confirmButton = await session.query(".mx_InviteDialog_goButton");
    await confirmButton.click();
    session.log.done();
 };