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

.eslintrc.js

@@ -18,7 +18,7 @@ module.exports = {
     },
 
     overrides: [{
-        "files": ["src/**/*.{ts,tsx}"],
+        "files": ["src/**/*.{ts,tsx}", "test/**/*.{ts,tsx}"],
         "extends": ["matrix-org/ts"],
         "rules": {
             // We're okay being explicit at the moment

res/css/views/elements/_ImageView.scss

@@ -22,6 +22,7 @@ limitations under the License.
 }
 
 .mx_ImageView_image_wrapper {
+    pointer-events: initial;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -30,7 +31,6 @@ limitations under the License.
 }
 
 .mx_ImageView_image {
-    pointer-events: all;
     flex-shrink: 0;
 }
 
@@ -43,7 +43,7 @@ limitations under the License.
 }
 
 .mx_ImageView_info_wrapper {
-    pointer-events: all;
+    pointer-events: initial;
     padding-left: 32px;
     display: flex;
     flex-direction: row;
@@ -63,7 +63,7 @@ limitations under the License.
 
 .mx_ImageView_toolbar {
     padding-right: 16px;
-    pointer-events: all;
+    pointer-events: initial;
     display: flex;
     align-items: center;
 }

res/css/views/rooms/_EventTile.scss

@@ -85,12 +85,11 @@ $left-gutter: 64px;
 }
 
 .mx_EventTile_isEditing .mx_MessageTimestamp {
-    visibility: hidden !important;
+    visibility: hidden;
 }
 
 .mx_EventTile .mx_MessageTimestamp {
     display: block;
-    visibility: hidden;
     white-space: nowrap;
     left: 0px;
     text-align: center;
@@ -142,29 +141,11 @@ $left-gutter: 64px;
     line-height: 57px !important;
 }
 
-.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
-    visibility: visible;
-}
-
 .mx_EventTile_selected > div > a > .mx_MessageTimestamp {
     left: 3px;
     width: auto;
 }
 
-// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
-// The first set is to handle the 'group layout' (default) and the second for the IRC layout
-.mx_EventTile_last > div > a > .mx_MessageTimestamp,
-.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
-.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp,
-.mx_EventTile.focus-visible:focus-within > div > a > .mx_MessageTimestamp,
-.mx_IRCLayout .mx_EventTile_last > a > .mx_MessageTimestamp,
-.mx_IRCLayout .mx_EventTile:hover > a > .mx_MessageTimestamp,
-.mx_IRCLayout .mx_ReplyThread .mx_EventTile > a > .mx_MessageTimestamp,
-.mx_IRCLayout .mx_EventTile.mx_EventTile_actionBarFocused > a > .mx_MessageTimestamp,
-.mx_IRCLayout .mx_EventTile.focus-visible:focus-within > a > .mx_MessageTimestamp {
-    visibility: visible;
-}
-
 .mx_EventTile:hover .mx_MessageActionBar,
 .mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
 [data-whatinput='keyboard'] .mx_EventTile:focus-within .mx_MessageActionBar,

src/AsyncWrapper.tsx

@@ -1,6 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015-2021 The Matrix.org Foundation C.I.C.
-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.
@@ -15,52 +14,61 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ComponentType } from "react";
+
 import * as sdk from './index';
-import PropTypes from 'prop-types';
 import { _t } from './languageHandler';
+import { IDialogProps } from "./components/views/dialogs/IDialogProps";
+
+type AsyncImport<T> = { default: T };
+
+interface IProps extends IDialogProps {
+    // A promise which resolves with the real component
+    prom: Promise<ComponentType | AsyncImport<ComponentType>>;
+}
+
+interface IState {
+    component?: ComponentType;
+    error?: Error;
+}
 
 /**
  * Wrap an asynchronous loader function with a react component which shows a
  * spinner until the real component loads.
  */
-export default class AsyncWrapper extends React.Component {
+export default class AsyncWrapper extends React.Component<IProps, IState> {
-    static propTypes = {
+    private unmounted = false;
-        /** A promise which resolves with the real component
-         */
-        prom: PropTypes.object.isRequired,
-    };
 
-    state = {
+    public state = {
         component: null,
         error: null,
     };
 
     componentDidMount() {
-        this._unmounted = false;
         // XXX: temporary logging to try to diagnose
         // https://github.com/vector-im/element-web/issues/3148
         console.log('Starting load of AsyncWrapper for modal');
         this.props.prom.then((result) => {
-            if (this._unmounted) {
+            if (this.unmounted) return;
-                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;
+            const component = (result as AsyncImport<ComponentType>).default
-            this.setState({component});
+                ? (result as AsyncImport<ComponentType>).default
+                : result as ComponentType;
+            this.setState({ component });
         }).catch((e) => {
             console.warn('AsyncWrapper promise failed', e);
-            this.setState({error: e});
+            this.setState({ error: e });
         });
     }
 
     componentWillUnmount() {
-        this._unmounted = true;
+        this.unmounted = true;
     }
 
-    _onWrapperCancelClick = () => {
+    private onWrapperCancelClick = () => {
         this.props.onFinished(false);
     };
 
@@ -71,12 +79,10 @@ export default class AsyncWrapper extends React.Component {
         } 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}
+            return <BaseDialog onFinished={this.props.onFinished} title={_t("Error")}>
-                title={_t("Error")}
+                { _t("Unable to load! Check your network connectivity and try again.") }
-            >
-                {_t("Unable to load! Check your network connectivity and try again.")}
                 <DialogButtons primaryButton={_t("Dismiss")}
-                    onPrimaryButtonClick={this._onWrapperCancelClick}
+                    onPrimaryButtonClick={this.onWrapperCancelClick}
                     hasCancel={false}
                 />
             </BaseDialog>;

src/Resend.ts

@@ -1,6 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015-2021 The Matrix.org Foundation C.I.C.
-Copyright 2019 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.
@@ -15,35 +14,37 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {MatrixClientPeg} from './MatrixClientPeg';
+import { MatrixEvent, EventStatus } from 'matrix-js-sdk/src/models/event';
+import { Room } from 'matrix-js-sdk/src/models/room';
+
+import { MatrixClientPeg } from './MatrixClientPeg';
 import dis from './dispatcher/dispatcher';
-import { EventStatus } from 'matrix-js-sdk/src/models/event';
 
 export default class Resend {
-    static resendUnsentEvents(room) {
+    static resendUnsentEvents(room: Room): Promise<void[]> {
-        return Promise.all(room.getPendingEvents().filter(function(ev) {
+        return Promise.all(room.getPendingEvents().filter(function(ev: MatrixEvent) {
             return ev.status === EventStatus.NOT_SENT;
-        }).map(function(event) {
+        }).map(function(event: MatrixEvent) {
             return Resend.resend(event);
         }));
     }
 
-    static cancelUnsentEvents(room) {
+    static cancelUnsentEvents(room: Room): void {
-        room.getPendingEvents().filter(function(ev) {
+        room.getPendingEvents().filter(function(ev: MatrixEvent) {
             return ev.status === EventStatus.NOT_SENT;
-        }).forEach(function(event) {
+        }).forEach(function(event: MatrixEvent) {
             Resend.removeFromQueue(event);
         });
     }
 
-    static resend(event) {
+    static resend(event: MatrixEvent): Promise<void> {
         const room = MatrixClientPeg.get().getRoom(event.getRoomId());
         return MatrixClientPeg.get().resendEvent(event, room).then(function(res) {
             dis.dispatch({
                 action: 'message_sent',
                 event: event,
             });
-        }, function(err) {
+        }, function(err: Error) {
             // XXX: temporary logging to try to diagnose
             // https://github.com/vector-im/element-web/issues/3148
             console.log('Resend got send failure: ' + err.name + '(' + err + ')');
@@ -55,7 +56,7 @@ export default class Resend {
         });
     }
 
-    static removeFromQueue(event) {
+    static removeFromQueue(event: MatrixEvent): void {
         MatrixClientPeg.get().cancelPendingEvent(event);
     }
 }

src/RoomAliasCache.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2021 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.
@@ -24,12 +24,12 @@ limitations under the License.
  * A similar thing could also be achieved via `pushState` with a state object,
  * but keeping it separate like this seems easier in case we do want to extend.
  */
-const aliasToIDMap = new Map();
+const aliasToIDMap = new Map<string, string>();
 
-export function storeRoomAliasInCache(alias, id) {
+export function storeRoomAliasInCache(alias: string, id: string): void {
     aliasToIDMap.set(alias, id);
 }
 
-export function getCachedRoomIDForAlias(alias) {
+export function getCachedRoomIDForAlias(alias: string): string {
     return aliasToIDMap.get(alias);
 }

src/actions/MatrixActionCreators.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2017 New Vector Ltd
+Copyright 2017, 2021 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,7 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import dis from '../dispatcher/dispatcher';
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { EventTimeline } from "matrix-js-sdk/src/models/event-timeline";
+
+import dis from "../dispatcher/dispatcher";
+import {ActionPayload} from "../dispatcher/payloads";
 
 // TODO: migrate from sync_state to MatrixActions.sync so that more js-sdk events
 //       become dispatches in the same place.
@@ -27,7 +33,7 @@ import dis from '../dispatcher/dispatcher';
  * @param {string} prevState the previous sync state.
  * @returns {Object} an action of type MatrixActions.sync.
  */
-function createSyncAction(matrixClient, state, prevState) {
+function createSyncAction(matrixClient: MatrixClient, state: string, prevState: string): ActionPayload {
     return {
         action: 'MatrixActions.sync',
         state,
@@ -53,7 +59,7 @@ function createSyncAction(matrixClient, state, prevState) {
  * @param {MatrixEvent} accountDataEvent the account data event.
  * @returns {AccountDataAction} an action of type MatrixActions.accountData.
  */
-function createAccountDataAction(matrixClient, accountDataEvent) {
+function createAccountDataAction(matrixClient: MatrixClient, accountDataEvent: MatrixEvent): ActionPayload {
     return {
         action: 'MatrixActions.accountData',
         event: accountDataEvent,
@@ -81,7 +87,11 @@ function createAccountDataAction(matrixClient, accountDataEvent) {
  * @param {Room} room the room where account data was changed
  * @returns {RoomAccountDataAction} an action of type MatrixActions.Room.accountData.
  */
-function createRoomAccountDataAction(matrixClient, accountDataEvent, room) {
+function createRoomAccountDataAction(
+    matrixClient: MatrixClient,
+    accountDataEvent: MatrixEvent,
+    room: Room,
+): ActionPayload {
     return {
         action: 'MatrixActions.Room.accountData',
         event: accountDataEvent,
@@ -106,7 +116,7 @@ function createRoomAccountDataAction(matrixClient, accountDataEvent, room) {
  * @param {Room} room the Room that was stored.
  * @returns {RoomAction} an action of type `MatrixActions.Room`.
  */
-function createRoomAction(matrixClient, room) {
+function createRoomAction(matrixClient: MatrixClient, room: Room): ActionPayload {
     return { action: 'MatrixActions.Room', room };
 }
 
@@ -127,7 +137,7 @@ function createRoomAction(matrixClient, room) {
  * @param {Room} room the Room whose tags were changed.
  * @returns {RoomTagsAction} an action of type `MatrixActions.Room.tags`.
  */
-function createRoomTagsAction(matrixClient, roomTagsEvent, room) {
+function createRoomTagsAction(matrixClient: MatrixClient, roomTagsEvent: MatrixEvent, room: Room): ActionPayload {
     return { action: 'MatrixActions.Room.tags', room };
 }
 
@@ -140,7 +150,7 @@ function createRoomTagsAction(matrixClient, roomTagsEvent, room) {
  * @param {Room} room the room the receipt happened in.
  * @returns {Object} an action of type MatrixActions.Room.receipt.
  */
-function createRoomReceiptAction(matrixClient, event, room) {
+function createRoomReceiptAction(matrixClient: MatrixClient, event: MatrixEvent, room: Room): ActionPayload {
     return {
         action: 'MatrixActions.Room.receipt',
         event,
@@ -178,7 +188,17 @@ function createRoomReceiptAction(matrixClient, event, room) {
  * @param {EventTimeline} data.timeline the timeline being altered.
  * @returns {RoomTimelineAction} an action of type `MatrixActions.Room.timeline`.
  */
-function createRoomTimelineAction(matrixClient, timelineEvent, room, toStartOfTimeline, removed, data) {
+function createRoomTimelineAction(
+    matrixClient: MatrixClient,
+    timelineEvent: MatrixEvent,
+    room: Room,
+    toStartOfTimeline: boolean,
+    removed: boolean,
+    data: {
+        liveEvent: boolean;
+        timeline: EventTimeline;
+    },
+): ActionPayload {
     return {
         action: 'MatrixActions.Room.timeline',
         event: timelineEvent,
@@ -208,8 +228,13 @@ function createRoomTimelineAction(matrixClient, timelineEvent, room, toStartOfTi
  * @param {string} oldMembership the previous membership, can be null.
  * @returns {RoomMembershipAction} an action of type `MatrixActions.Room.myMembership`.
  */
-function createSelfMembershipAction(matrixClient, room, membership, oldMembership) {
+function createSelfMembershipAction(
-    return { action: 'MatrixActions.Room.myMembership', room, membership, oldMembership};
+    matrixClient: MatrixClient,
+    room: Room,
+    membership: string,
+    oldMembership: string,
+): ActionPayload {
+    return { action: 'MatrixActions.Room.myMembership', room, membership, oldMembership };
 }
 
 /**
@@ -228,61 +253,65 @@ function createSelfMembershipAction(matrixClient, room, membership, oldMembershi
  * @param {MatrixEvent} event the matrix event that was decrypted.
  * @returns {EventDecryptedAction} an action of type `MatrixActions.Event.decrypted`.
  */
-function createEventDecryptedAction(matrixClient, event) {
+function createEventDecryptedAction(matrixClient: MatrixClient, event: MatrixEvent): ActionPayload {
     return { action: 'MatrixActions.Event.decrypted', event };
 }
 
+type Listener = () => void;
+type ActionCreator = (matrixClient: MatrixClient, ...args: any) => ActionPayload;
+
+// A list of callbacks to call to unregister all listeners added
+let matrixClientListenersStop: Listener[] = [];
+
+/**
+ * Start listening to events of type eventName on matrixClient and when they are emitted,
+ * dispatch an action created by the actionCreator function.
+ * @param {MatrixClient} matrixClient a MatrixClient to register a listener with.
+ * @param {string} eventName the event to listen to on MatrixClient.
+ * @param {function} actionCreator a function that should return an action to dispatch
+ *                                 when given the MatrixClient as an argument as well as
+ *                                 arguments emitted in the MatrixClient event.
+ */
+function addMatrixClientListener(matrixClient: MatrixClient, eventName: string, actionCreator: ActionCreator): void {
+    const listener: Listener = (...args) => {
+        const payload = actionCreator(matrixClient, ...args);
+        if (payload) {
+            dis.dispatch(payload, true);
+        }
+    };
+    matrixClient.on(eventName, listener);
+    matrixClientListenersStop.push(() => {
+        matrixClient.removeListener(eventName, listener);
+    });
+}
+
 /**
  * This object is responsible for dispatching actions when certain events are emitted by
  * the given MatrixClient.
  */
 export default {
-    // A list of callbacks to call to unregister all listeners added
-    _matrixClientListenersStop: [],
-
     /**
      * Start listening to certain events from the MatrixClient and dispatch actions when
      * they are emitted.
      * @param {MatrixClient} matrixClient the MatrixClient to listen to events from
      */
-    start(matrixClient) {
+    start(matrixClient: MatrixClient) {
-        this._addMatrixClientListener(matrixClient, 'sync', createSyncAction);
+        addMatrixClientListener(matrixClient, 'sync', createSyncAction);
-        this._addMatrixClientListener(matrixClient, 'accountData', createAccountDataAction);
+        addMatrixClientListener(matrixClient, 'accountData', createAccountDataAction);
-        this._addMatrixClientListener(matrixClient, 'Room.accountData', createRoomAccountDataAction);
+        addMatrixClientListener(matrixClient, 'Room.accountData', createRoomAccountDataAction);
-        this._addMatrixClientListener(matrixClient, 'Room', createRoomAction);
+        addMatrixClientListener(matrixClient, 'Room', createRoomAction);
-        this._addMatrixClientListener(matrixClient, 'Room.tags', createRoomTagsAction);
+        addMatrixClientListener(matrixClient, 'Room.tags', createRoomTagsAction);
-        this._addMatrixClientListener(matrixClient, 'Room.receipt', createRoomReceiptAction);
+        addMatrixClientListener(matrixClient, 'Room.receipt', createRoomReceiptAction);
-        this._addMatrixClientListener(matrixClient, 'Room.timeline', createRoomTimelineAction);
+        addMatrixClientListener(matrixClient, 'Room.timeline', createRoomTimelineAction);
-        this._addMatrixClientListener(matrixClient, 'Room.myMembership', createSelfMembershipAction);
+        addMatrixClientListener(matrixClient, 'Room.myMembership', createSelfMembershipAction);
-        this._addMatrixClientListener(matrixClient, 'Event.decrypted', createEventDecryptedAction);
+        addMatrixClientListener(matrixClient, 'Event.decrypted', createEventDecryptedAction);
-    },
-
-    /**
-     * Start listening to events of type eventName on matrixClient and when they are emitted,
-     * dispatch an action created by the actionCreator function.
-     * @param {MatrixClient} matrixClient a MatrixClient to register a listener with.
-     * @param {string} eventName the event to listen to on MatrixClient.
-     * @param {function} actionCreator a function that should return an action to dispatch
-     *                                 when given the MatrixClient as an argument as well as
-     *                                 arguments emitted in the MatrixClient event.
-     */
-    _addMatrixClientListener(matrixClient, eventName, actionCreator) {
-        const listener = (...args) => {
-            const payload = actionCreator(matrixClient, ...args);
-            if (payload) {
-                dis.dispatch(payload, true);
-            }
-        };
-        matrixClient.on(eventName, listener);
-        this._matrixClientListenersStop.push(() => {
-            matrixClient.removeListener(eventName, listener);
-        });
     },
 
     /**
      * Stop listening to events.
      */
     stop() {
-        this._matrixClientListenersStop.forEach((stopListener) => stopListener());
+        matrixClientListenersStop.forEach((stopListener) => stopListener());
+        matrixClientListenersStop = [];
     },
 };

src/components/structures/MessagePanel.js

@@ -19,7 +19,6 @@ limitations under the License.
 import React, {createRef} from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import shouldHideEvent from '../../shouldHideEvent';
 import {wantsDateSeparator} from '../../DateUtils';
 import * as sdk from '../../index';
@@ -616,10 +615,6 @@ export default class MessagePanel extends React.Component {
         const eventId = mxEv.getId();
         const highlight = (eventId === this.props.highlightedEventId);
 
-        // we can't use local echoes as scroll tokens, because their event IDs change.
-        // Local echos have a send "status".
-        const scrollToken = mxEv.status ? undefined : eventId;
-
         const readReceipts = this._readReceiptsByEvent[eventId];
 
         let isLastSuccessful = false;
@@ -651,7 +646,6 @@ export default class MessagePanel extends React.Component {
             <TileErrorBoundary key={mxEv.getTxnId() || eventId} mxEvent={mxEv}>
                 <EventTile
                     as="li"
-                    data-scroll-tokens={scrollToken}
                     ref={this._collectEventNode.bind(this, eventId)}
                     alwaysShowTimestamps={this.props.alwaysShowTimestamps}
                     mxEvent={mxEv}
@@ -854,13 +848,6 @@ export default class MessagePanel extends React.Component {
 
         const style = this.props.hidden ? { display: 'none' } : {};
 
-        const className = classNames(
-            this.props.className,
-            {
-                "mx_MessagePanel_alwaysShowTimestamps": this.props.alwaysShowTimestamps,
-            },
-        );
-
         let whoIsTyping;
         if (this.props.room && !this.props.tileShape && this.state.showTypingNotifications) {
             whoIsTyping = (<WhoIsTypingTile
@@ -884,7 +871,7 @@ export default class MessagePanel extends React.Component {
             <ErrorBoundary>
                 <ScrollPanel
                     ref={this._scrollPanel}
-                    className={className}
+                    className={this.props.className}
                     onScroll={this.props.onScroll}
                     onUserScroll={this.props.onUserScroll}
                     onResize={this.onResize}

src/components/structures/RoomView.tsx

@@ -1526,10 +1526,19 @@ export default class RoomView extends React.Component<IProps, IState> {
 
     // jump down to the bottom of this room, where new events are arriving
     private jumpToLiveTimeline = () => {
-        dis.dispatch({
+        if (this.state.initialEventId && this.state.isInitialEventHighlighted) {
-            action: 'view_room',
+            // If we were viewing a highlighted event, firing view_room without
-            room_id: this.state.room.roomId,
+            // an event will take care of both clearing the URL fragment and
-        });
+            // jumping to the bottom
+            dis.dispatch({
+                action: 'view_room',
+                room_id: this.state.room.roomId,
+            });
+        } else {
+            // Otherwise we have to jump manually
+            this.messagePanel.jumpToLiveTimeline();
+            dis.fire(Action.FocusComposer);
+        }
     };
 
     // jump up to wherever our read marker is

src/components/views/dialogs/IDialogProps.ts

@@ -15,5 +15,5 @@ limitations under the License.
 */
 
 export interface IDialogProps {
-    onFinished: (bool) => void;
+    onFinished(...args: any): void;
 }

src/components/views/dialogs/MessageEditHistoryDialog.js

@@ -159,7 +159,7 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
                 stickyBottom={false}
                 startAtBottom={false}
             >
-                <ul className="mx_MessageEditHistoryDialog_edits mx_MessagePanel_alwaysShowTimestamps">{this._renderEdits()}</ul>
+                <ul className="mx_MessageEditHistoryDialog_edits">{this._renderEdits()}</ul>
             </ScrollPanel>);
         }
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');

src/components/views/elements/EventListSummary.tsx

@@ -63,9 +63,9 @@ const EventListSummary: React.FC<IProps> = ({
     // If we are only given few events then just pass them through
     if (events.length < threshold) {
         return (
-            <div className="mx_EventListSummary" data-scroll-tokens={eventIds}>
+            <li className="mx_EventListSummary" data-scroll-tokens={eventIds}>
                 { children }
-            </div>
+            </li>
         );
     }
 

src/components/views/elements/ImageView.tsx

@@ -471,7 +471,12 @@ export default class ImageView extends React.Component<IProps, IState> {
                 </div>
                 <div
                     className="mx_ImageView_image_wrapper"
-                    ref={this.imageWrapper}>
+                    ref={this.imageWrapper}
+                    onMouseDown={this.props.onFinished}
+                    onMouseMove={this.onMoving}
+                    onMouseUp={this.onEndMoving}
+                    onMouseLeave={this.onEndMoving}
+                >
                     <img
                         src={this.props.src}
                         title={this.props.name}
@@ -480,9 +485,6 @@ export default class ImageView extends React.Component<IProps, IState> {
                         className="mx_ImageView_image"
                         draggable={true}
                         onMouseDown={this.onStartMoving}
-                        onMouseMove={this.onMoving}
-                        onMouseUp={this.onEndMoving}
-                        onMouseLeave={this.onEndMoving}
                     />
                 </div>
             </FocusLock>

src/components/views/elements/ReplyThread.js

@@ -46,6 +46,8 @@ export default class ReplyThread extends React.Component {
         permalinkCreator: PropTypes.instanceOf(RoomPermalinkCreator).isRequired,
         // Specifies which layout to use.
         layout: LayoutPropType,
+        // Whether to always show a timestamp
+        alwaysShowTimestamps: PropTypes.bool,
     };
 
     static contextType = MatrixClientContext;
@@ -212,7 +214,7 @@ export default class ReplyThread extends React.Component {
         };
     }
 
-    static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, layout) {
+    static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, layout, alwaysShowTimestamps) {
         if (!ReplyThread.getParentEventId(parentEv)) {
             return null;
         }
@@ -222,6 +224,7 @@ export default class ReplyThread extends React.Component {
             ref={ref}
             permalinkCreator={permalinkCreator}
             layout={layout}
+            alwaysShowTimestamps={alwaysShowTimestamps}
         />;
     }
 
@@ -386,6 +389,7 @@ export default class ReplyThread extends React.Component {
                     isRedacted={ev.isRedacted()}
                     isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}
                     layout={this.props.layout}
+                    alwaysShowTimestamps={this.props.alwaysShowTimestamps}
                     enableFlair={SettingsStore.getValue(UIFeature.Flair)}
                     replacingEventId={ev.replacingEventId()}
                 />

src/components/views/rooms/EventTile.tsx

@@ -906,6 +906,12 @@ export default class EventTile extends React.Component<IProps, IState> {
             permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
         }
 
+        // we can't use local echoes as scroll tokens, because their event IDs change.
+        // Local echos have a send "status".
+        const scrollToken = this.props.mxEvent.status
+            ? undefined
+            : this.props.mxEvent.getId();
+
         let avatar;
         let sender;
         let avatarSize;
@@ -975,7 +981,8 @@ export default class EventTile extends React.Component<IProps, IState> {
             onFocusChange={this.onActionBarFocusChange}
         /> : undefined;
 
-        const showTimestamp = this.props.mxEvent.getTs() && (this.props.alwaysShowTimestamps || this.state.hover);
+        const showTimestamp = this.props.mxEvent.getTs() &&
+            (this.props.alwaysShowTimestamps || this.props.last || this.state.hover || this.state.actionBarFocused);
         const timestamp = showTimestamp ?
             <MessageTimestamp showTwelveHour={this.props.isTwelveHour} ts={this.props.mxEvent.getTs()} /> : null;
 
@@ -1046,7 +1053,7 @@ export default class EventTile extends React.Component<IProps, IState> {
             case 'notif': {
                 const room = this.context.getRoom(this.props.mxEvent.getRoomId());
                 return (
-                    <div className={classes} aria-live={ariaLive} aria-atomic="true">
+                    <li className={classes} aria-live={ariaLive} aria-atomic="true" data-scroll-tokens={scrollToken}>
                         <div className="mx_EventTile_roomName">
                             <RoomAvatar room={room} width={28} height={28} />
                             <a href={permalink} onClick={this.onPermalinkClicked}>
@@ -1069,12 +1076,12 @@ export default class EventTile extends React.Component<IProps, IState> {
                                 onHeightChanged={this.props.onHeightChanged}
                             />
                         </div>
-                    </div>
+                    </li>
                 );
             }
             case 'file_grid': {
                 return (
-                    <div className={classes} aria-live={ariaLive} aria-atomic="true">
+                    <li className={classes} aria-live={ariaLive} aria-atomic="true" data-scroll-tokens={scrollToken}>
                         <div className="mx_EventTile_line">
                             <EventTileType ref={this.tile}
                                 mxEvent={this.props.mxEvent}
@@ -1095,7 +1102,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                                 { timestamp }
                             </div>
                         </a>
-                    </div>
+                    </li>
                 );
             }
 
@@ -1108,10 +1115,12 @@ export default class EventTile extends React.Component<IProps, IState> {
                         this.props.onHeightChanged,
                         this.props.permalinkCreator,
                         this.replyThread,
+                        null,
+                        this.props.alwaysShowTimestamps || this.state.hover,
                     );
                 }
                 return (
-                    <div className={classes} aria-live={ariaLive} aria-atomic="true">
+                    <li className={classes} aria-live={ariaLive} aria-atomic="true" data-scroll-tokens={scrollToken}>
                         { ircTimestamp }
                         { avatar }
                         { sender }
@@ -1129,7 +1138,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                                 showUrlPreview={false}
                             />
                         </div>
-                    </div>
+                    </li>
                 );
             }
             default: {
@@ -1139,17 +1148,18 @@ export default class EventTile extends React.Component<IProps, IState> {
                     this.props.permalinkCreator,
                     this.replyThread,
                     this.props.layout,
+                    this.props.alwaysShowTimestamps || this.state.hover,
                 );
 
                 // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
                 return (
-                    React.createElement(this.props.as || "div", {
+                    React.createElement(this.props.as || "li", {
                         "ref": this.ref,
                         "className": classes,
                         "tabIndex": -1,
                         "aria-live": ariaLive,
                         "aria-atomic": "true",
-                        "data-scroll-tokens": this.props["data-scroll-tokens"],
+                        "data-scroll-tokens": scrollToken,
                         "onMouseEnter": () => this.setState({ hover: true }),
                         "onMouseLeave": () => this.setState({ hover: false }),
                     }, [
@@ -1340,11 +1350,15 @@ class SentReceipt extends React.PureComponent<ISentReceiptProps, ISentReceiptSta
             tooltip = <Tooltip className="mx_EventTile_readAvatars_receiptTooltip" label={label} yOffset={20} />;
         }
 
-        return <span className="mx_EventTile_readAvatars">
+        return (
-            <span className={receiptClasses} onMouseEnter={this.onHoverStart} onMouseLeave={this.onHoverEnd}>
+            <div className="mx_EventTile_msgOption">
-                {nonCssBadge}
+                <span className="mx_EventTile_readAvatars">
-                {tooltip}
+                    <span className={receiptClasses} onMouseEnter={this.onHoverStart} onMouseLeave={this.onHoverEnd}>
-            </span>
+                        {nonCssBadge}
-        </span>;
+                        {tooltip}
+                    </span>
+                </span>
+            </div>
+        );
     }
 }

src/components/views/rooms/ReplyPreview.js

@@ -89,7 +89,7 @@ export default class ReplyPreview extends React.Component {
                 </div>
                 <div className="mx_ReplyPreview_clear" />
                 <EventTile
-                    last={true}
+                    alwaysShowTimestamps={true}
                     tileShape="reply_preview"
                     mxEvent={this.state.event}
                     permalinkCreator={this.props.permalinkCreator}

src/components/views/rooms/SearchResultTile.js

@@ -47,6 +47,7 @@ export default class SearchResultTile extends React.Component {
 
         const ts1 = mxEv.getTs();
         const ret = [<DateSeparator key={ts1 + "-search"} ts={ts1} />];
+        const alwaysShowTimestamps = SettingsStore.getValue("alwaysShowTimestamps");
 
         const timeline = result.context.getTimeline();
         for (let j = 0; j < timeline.length; j++) {
@@ -67,6 +68,7 @@ export default class SearchResultTile extends React.Component {
                         highlightLink={this.props.resultLink}
                         onHeightChanged={this.props.onHeightChanged}
                         isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}
+                        alwaysShowTimestamps={alwaysShowTimestamps}
                         enableFlair={SettingsStore.getValue(UIFeature.Flair)}
                     />
                 ));

src/indexing/BaseEventIndexManager.ts

@@ -35,7 +35,7 @@ export interface MatrixProfile {
 export interface CrawlerCheckpoint {
     roomId: string;
     token: string;
-    fullCrawl: boolean;
+    fullCrawl?: boolean;
     direction: string;
 }
 
@@ -73,14 +73,14 @@ export interface EventAndProfile {
 export interface LoadArgs {
     roomId: string;
     limit: number;
-    fromEvent: string;
+    fromEvent?: string;
-    direction: string;
+    direction?: string;
 }
 
 export interface IndexStats {
     size: number;
-    event_count: number;
+    eventCount: number;
-    room_count: number;
+    roomCount: number;
 }
 
 /**

src/indexing/EventIndex.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2021 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,33 +14,42 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { EventEmitter } from "events";
+import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
+import { EventTimeline } from 'matrix-js-sdk/src/models/event-timeline';
+import { Room } from 'matrix-js-sdk/src/models/room';
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { EventTimelineSet } from 'matrix-js-sdk/src/models/event-timeline-set';
+import { RoomState } from 'matrix-js-sdk/src/models/room-state';
+import { TimelineWindow } from 'matrix-js-sdk/src/timeline-window';
+
 import PlatformPeg from "../PlatformPeg";
-import {MatrixClientPeg} from "../MatrixClientPeg";
+import { MatrixClientPeg } from "../MatrixClientPeg";
-import {RoomMember} from 'matrix-js-sdk/src/models/room-member';
+import { sleep } from "../utils/promise";
-import {EventTimeline} from 'matrix-js-sdk/src/models/event-timeline';
-import {sleep} from "../utils/promise";
 import SettingsStore from "../settings/SettingsStore";
-import {EventEmitter} from "events";
+import { SettingLevel } from "../settings/SettingLevel";
-import {SettingLevel} from "../settings/SettingLevel";
+import {CrawlerCheckpoint, LoadArgs, SearchArgs} from "./BaseEventIndexManager";
+
+// The time in ms that the crawler will wait loop iterations if there
+// have not been any checkpoints to consume in the last iteration.
+const CRAWLER_IDLE_TIME = 5000;
+
+// The maximum number of events our crawler should fetch in a single crawl.
+const EVENTS_PER_CRAWL = 100;
+
+interface ICrawler {
+    cancel(): void;
+}
 
 /*
  * Event indexing class that wraps the platform specific event indexing.
  */
 export default class EventIndex extends EventEmitter {
-    constructor() {
+    private crawlerCheckpoints: CrawlerCheckpoint[] = [];
-        super();
+    private crawler: ICrawler = null;
-        this.crawlerCheckpoints = [];
+    private currentCheckpoint: CrawlerCheckpoint = null;
-        // The time in ms that the crawler will wait loop iterations if there
-        // have not been any checkpoints to consume in the last iteration.
-        this._crawlerIdleTime = 5000;
-        // The maximum number of events our crawler should fetch in a single
-        // crawl.
-        this._eventsPerCrawl = 100;
-        this._crawler = null;
-        this._currentCheckpoint = null;
-    }
 
-    async init() {
+    public async init() {
         const indexManager = PlatformPeg.get().getEventIndexingManager();
 
         this.crawlerCheckpoints = await indexManager.loadCheckpoints();
@@ -52,7 +61,7 @@ export default class EventIndex extends EventEmitter {
     /**
      * Register event listeners that are necessary for the event index to work.
      */
-    registerListeners() {
+    public registerListeners() {
         const client = MatrixClientPeg.get();
 
         client.on('sync', this.onSync);
@@ -66,7 +75,7 @@ export default class EventIndex extends EventEmitter {
     /**
      * Remove the event index specific event listeners.
      */
-    removeListeners() {
+    public removeListeners() {
         const client = MatrixClientPeg.get();
         if (client === null) return;
 
@@ -81,7 +90,7 @@ export default class EventIndex extends EventEmitter {
     /**
      * Get crawler checkpoints for the encrypted rooms and store them in the index.
      */
-    async addInitialCheckpoints() {
+    public async addInitialCheckpoints() {
         const indexManager = PlatformPeg.get().getEventIndexingManager();
         const client = MatrixClientPeg.get();
         const rooms = client.getRooms();
@@ -102,14 +111,14 @@ export default class EventIndex extends EventEmitter {
             const timeline = room.getLiveTimeline();
             const token = timeline.getPaginationToken("b");
 
-            const backCheckpoint = {
+            const backCheckpoint: CrawlerCheckpoint = {
                 roomId: room.roomId,
                 token: token,
                 direction: "b",
                 fullCrawl: true,
             };
 
-            const forwardCheckpoint = {
+            const forwardCheckpoint: CrawlerCheckpoint = {
                 roomId: room.roomId,
                 token: token,
                 direction: "f",
@@ -146,7 +155,7 @@ export default class EventIndex extends EventEmitter {
      *     - Every other sync, tell the event index to commit all the queued up
      *         live events
      */
-    onSync = async (state, prevState, data) => {
+    private onSync = async (state: string, prevState: string, data: object) => {
         const indexManager = PlatformPeg.get().getEventIndexingManager();
 
         if (prevState === "PREPARED" && state === "SYNCING") {
@@ -176,7 +185,15 @@ export default class EventIndex extends EventEmitter {
      * otherwise we save their event id and wait for them in the Event.decrypted
      * listener.
      */
-    onRoomTimeline = async (ev, room, toStartOfTimeline, removed, data) => {
+    private onRoomTimeline = async (
+        ev: MatrixEvent,
+        room: Room,
+        toStartOfTimeline: boolean,
+        removed: boolean,
+        data: {
+            liveEvent: boolean;
+        },
+    ) => {
         const client = MatrixClientPeg.get();
 
         // We only index encrypted rooms locally.
@@ -194,7 +211,7 @@ export default class EventIndex extends EventEmitter {
         await this.addLiveEventToIndex(ev);
     }
 
-    onRoomStateEvent = async (ev, state) => {
+    private onRoomStateEvent = async (ev: MatrixEvent, state: RoomState) => {
         if (!MatrixClientPeg.get().isRoomEncrypted(state.roomId)) return;
 
         if (ev.getType() === "m.room.encryption" && !await this.isRoomIndexed(state.roomId)) {
@@ -209,7 +226,7 @@ export default class EventIndex extends EventEmitter {
      * Checks if the event was marked for addition in the Room.timeline
      * listener, if so queues it up to be added to the index.
      */
-    onEventDecrypted = async (ev, err) => {
+    private onEventDecrypted = async (ev: MatrixEvent, err: Error) => {
         // If the event isn't in our live event set, ignore it.
         if (err) return;
         await this.addLiveEventToIndex(ev);
@@ -220,7 +237,7 @@ export default class EventIndex extends EventEmitter {
      *
      * Removes a redacted event from our event index.
      */
-    onRedaction = async (ev, room) => {
+    private onRedaction = async (ev: MatrixEvent, room: Room) => {
         // We only index encrypted rooms locally.
         if (!MatrixClientPeg.get().isRoomEncrypted(room.roomId)) return;
         const indexManager = PlatformPeg.get().getEventIndexingManager();
@@ -238,7 +255,7 @@ export default class EventIndex extends EventEmitter {
      * Listens for timeline resets that are caused by a limited timeline to
      * re-add checkpoints for rooms that need to be crawled again.
      */
-    onTimelineReset = async (room, timelineSet, resetAllTimelines) => {
+    private onTimelineReset = async (room: Room, timelineSet: EventTimelineSet, resetAllTimelines: boolean) => {
         if (room === null) return;
         if (!MatrixClientPeg.get().isRoomEncrypted(room.roomId)) return;
 
@@ -258,7 +275,7 @@ export default class EventIndex extends EventEmitter {
      * @returns {bool} Returns true if the event can be indexed, false
      * otherwise.
      */
-    isValidEvent(ev) {
+    private isValidEvent(ev: MatrixEvent) {
         const isUsefulType = ["m.room.message", "m.room.name", "m.room.topic"].includes(ev.getType());
         const validEventType = isUsefulType && !ev.isRedacted() && !ev.isDecryptionFailure();
 
@@ -282,7 +299,7 @@ export default class EventIndex extends EventEmitter {
         return validEventType && validMsgType && hasContentValue;
     }
 
-    eventToJson(ev) {
+    private eventToJson(ev: MatrixEvent) {
         const jsonEvent = ev.toJSON();
         const e = ev.isEncrypted() ? jsonEvent.decrypted : jsonEvent;
 
@@ -314,7 +331,7 @@ export default class EventIndex extends EventEmitter {
      *
      * @param {MatrixEvent} ev The event that should be added to the index.
      */
-    async addLiveEventToIndex(ev) {
+    private async addLiveEventToIndex(ev: MatrixEvent) {
         const indexManager = PlatformPeg.get().getEventIndexingManager();
 
         if (!this.isValidEvent(ev)) return;
@@ -333,11 +350,11 @@ export default class EventIndex extends EventEmitter {
      * Emmit that the crawler has changed the checkpoint that it's currently
      * handling.
      */
-    emitNewCheckpoint() {
+    private emitNewCheckpoint() {
         this.emit("changedCheckpoint", this.currentRoom());
     }
 
-    async addEventsFromLiveTimeline(timeline) {
+    private async addEventsFromLiveTimeline(timeline: EventTimeline) {
         const events = timeline.getEvents();
 
         for (let i = 0; i < events.length; i++) {
@@ -346,7 +363,7 @@ export default class EventIndex extends EventEmitter {
         }
     }
 
-    async addRoomCheckpoint(roomId, fullCrawl = false) {
+    private async addRoomCheckpoint(roomId: string, fullCrawl = false) {
         const indexManager = PlatformPeg.get().getEventIndexingManager();
         const client = MatrixClientPeg.get();
         const room = client.getRoom(roomId);
@@ -396,16 +413,16 @@ export default class EventIndex extends EventEmitter {
      * crawl, otherwise create a new checkpoint and push it to the
      * crawlerCheckpoints queue so we go through them in a round-robin way.
      */
-    async crawlerFunc() {
+    private async crawlerFunc() {
         let cancelled = false;
 
         const client = MatrixClientPeg.get();
         const indexManager = PlatformPeg.get().getEventIndexingManager();
 
-        this._crawler = {};
+        this.crawler = {
-
+            cancel: () => {
-        this._crawler.cancel = () => {
+                cancelled = true;
-            cancelled = true;
+            },
         };
 
         let idle = false;
@@ -417,11 +434,11 @@ export default class EventIndex extends EventEmitter {
             sleepTime = Math.max(sleepTime, 100);
 
             if (idle) {
-                sleepTime = this._crawlerIdleTime;
+                sleepTime = CRAWLER_IDLE_TIME;
             }
 
-            if (this._currentCheckpoint !== null) {
+            if (this.currentCheckpoint !== null) {
-                this._currentCheckpoint = null;
+                this.currentCheckpoint = null;
                 this.emitNewCheckpoint();
             }
 
@@ -440,7 +457,7 @@ export default class EventIndex extends EventEmitter {
                 continue;
             }
 
-            this._currentCheckpoint = checkpoint;
+            this.currentCheckpoint = checkpoint;
             this.emitNewCheckpoint();
 
             idle = false;
@@ -454,8 +471,11 @@ export default class EventIndex extends EventEmitter {
 
             try {
                 res = await client.createMessagesRequest(
-                    checkpoint.roomId, checkpoint.token, this._eventsPerCrawl,
+                    checkpoint.roomId,
-                    checkpoint.direction);
+                    checkpoint.token,
+                    EVENTS_PER_CRAWL,
+                    checkpoint.direction,
+                );
             } catch (e) {
                 if (e.httpStatus === 403) {
                     console.log("EventIndex: Removing checkpoint as we don't have ",
@@ -612,23 +632,23 @@ export default class EventIndex extends EventEmitter {
             }
         }
 
-        this._crawler = null;
+        this.crawler = null;
     }
 
     /**
      * Start the crawler background task.
      */
-    startCrawler() {
+    public startCrawler() {
-        if (this._crawler !== null) return;
+        if (this.crawler !== null) return;
         this.crawlerFunc();
     }
 
     /**
      * Stop the crawler background task.
      */
-    stopCrawler() {
+    public stopCrawler() {
-        if (this._crawler === null) return;
+        if (this.crawler === null) return;
-        this._crawler.cancel();
+        this.crawler.cancel();
     }
 
     /**
@@ -637,7 +657,7 @@ export default class EventIndex extends EventEmitter {
      * This removes all the MatrixClient event listeners, stops the crawler
      * task, and closes the index.
      */
-    async close() {
+    public async close() {
         const indexManager = PlatformPeg.get().getEventIndexingManager();
         this.removeListeners();
         this.stopCrawler();
@@ -654,7 +674,7 @@ export default class EventIndex extends EventEmitter {
      * @return {Promise<[SearchResult]>} A promise that will resolve to an array
      * of search results once the search is done.
      */
-    async search(searchArgs) {
+    public async search(searchArgs: SearchArgs) {
         const indexManager = PlatformPeg.get().getEventIndexingManager();
         return indexManager.searchEventIndex(searchArgs);
     }
@@ -680,11 +700,16 @@ export default class EventIndex extends EventEmitter {
      * @returns {Promise<MatrixEvent[]>} Resolves to an array of events that
      * contain URLs.
      */
-    async loadFileEvents(room, limit = 10, fromEvent = null, direction = EventTimeline.BACKWARDS) {
+    public async loadFileEvents(
+        room: Room,
+        limit = 10,
+        fromEvent: string = null,
+        direction: string = EventTimeline.BACKWARDS,
+    ) {
         const client = MatrixClientPeg.get();
         const indexManager = PlatformPeg.get().getEventIndexingManager();
 
-        const loadArgs = {
+        const loadArgs: LoadArgs = {
             roomId: room.roomId,
             limit: limit,
         };
@@ -772,13 +797,13 @@ export default class EventIndex extends EventEmitter {
      * @returns {Promise<boolean>} Resolves to true if events were added to the
      * timeline, false otherwise.
      */
-    async populateFileTimeline(
+    public async populateFileTimeline(
-        timelineSet,
+        timelineSet: EventTimelineSet,
-        timeline,
+        timeline: EventTimeline,
-        room,
+        room: Room,
         limit = 10,
-        fromEvent = null,
+        fromEvent: string = null,
-        direction = EventTimeline.BACKWARDS,
+        direction: string = EventTimeline.BACKWARDS,
     ) {
         const matrixEvents = await this.loadFileEvents(room, limit, fromEvent, direction);
 
@@ -837,7 +862,7 @@ export default class EventIndex extends EventEmitter {
      * @returns {Promise<boolean>} Resolves to a boolean which is true if more
      * events were successfully retrieved.
      */
-    paginateTimelineWindow(room, timelineWindow, direction, limit) {
+    public paginateTimelineWindow(room: Room, timelineWindow: TimelineWindow, direction: string, limit: number) {
         const tl = timelineWindow.getTimelineIndex(direction);
 
         if (!tl) return Promise.resolve(false);
@@ -871,7 +896,7 @@ export default class EventIndex extends EventEmitter {
      * @return {Promise<IndexStats>} A promise that will resolve to the index
      * statistics.
      */
-    async getStats() {
+    public async getStats() {
         const indexManager = PlatformPeg.get().getEventIndexingManager();
         return indexManager.getStats();
     }
@@ -885,7 +910,7 @@ export default class EventIndex extends EventEmitter {
      * @return {Promise<boolean>} Returns true if the index contains events for
      * the given room, false otherwise.
      */
-    async isRoomIndexed(roomId) {
+    public async isRoomIndexed(roomId) {
         const indexManager = PlatformPeg.get().getEventIndexingManager();
         return indexManager.isRoomIndexed(roomId);
     }
@@ -896,21 +921,21 @@ export default class EventIndex extends EventEmitter {
      * @returns {Room} A MatrixRoom that is being currently crawled, null
      * if no room is currently being crawled.
      */
-    currentRoom() {
+    public currentRoom() {
-        if (this._currentCheckpoint === null && this.crawlerCheckpoints.length === 0) {
+        if (this.currentCheckpoint === null && this.crawlerCheckpoints.length === 0) {
             return null;
         }
 
         const client = MatrixClientPeg.get();
 
-        if (this._currentCheckpoint !== null) {
+        if (this.currentCheckpoint !== null) {
-            return client.getRoom(this._currentCheckpoint.roomId);
+            return client.getRoom(this.currentCheckpoint.roomId);
         } else {
             return client.getRoom(this.crawlerCheckpoints[0].roomId);
         }
     }
 
-    crawlingRooms() {
+    public crawlingRooms() {
         const totalRooms = new Set();
         const crawlingRooms = new Set();
 
@@ -918,14 +943,14 @@ export default class EventIndex extends EventEmitter {
             crawlingRooms.add(checkpoint.roomId);
         });
 
-        if (this._currentCheckpoint !== null) {
+        if (this.currentCheckpoint !== null) {
-            crawlingRooms.add(this._currentCheckpoint.roomId);
+            crawlingRooms.add(this.currentCheckpoint.roomId);
         }
 
         const client = MatrixClientPeg.get();
         const rooms = client.getRooms();
 
-        const isRoomEncrypted = (room) => {
+        const isRoomEncrypted = (room: Room) => {
             return client.isRoomEncrypted(room.roomId);
         };
 
@@ -934,6 +959,6 @@ export default class EventIndex extends EventEmitter {
             totalRooms.add(room.roomId);
         });
 
-        return {crawlingRooms, totalRooms};
+        return { crawlingRooms, totalRooms };
     }
 }

src/stores/LifecycleStore.ts

@@ -1,7 +1,5 @@
 /*
-Copyright 2017 Vector Creations Ltd
+Copyright 2017-2021 The Matrix.org Foundation C.I.C.
-Copyright 2018 New Vector Ltd
-Copyright 2019 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.
@@ -15,11 +13,18 @@ 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 { Store } from 'flux/utils';
+
 import dis from '../dispatcher/dispatcher';
-import {Store} from 'flux/utils';
+import { ActionPayload } from "../dispatcher/payloads";
+
+interface IState {
+    deferredAction: any;
+}
 
 const INITIAL_STATE = {
-    deferred_action: null,
+    deferredAction: null,
 };
 
 /**
@@ -27,39 +32,38 @@ const INITIAL_STATE = {
  * store that listens for actions and updates its state accordingly, informing any
  * listeners (views) of state changes.
  */
-class LifecycleStore extends Store {
+class LifecycleStore extends Store<ActionPayload> {
+    private state: IState = INITIAL_STATE;
+
     constructor() {
         super(dis);
-
-        // Initialise state
-        this._state = INITIAL_STATE;
     }
 
-    _setState(newState) {
+    private setState(newState: Partial<IState>) {
-        this._state = Object.assign(this._state, newState);
+        this.state = Object.assign(this.state, newState);
         this.__emitChange();
     }
 
-    __onDispatch(payload) {
+    protected __onDispatch(payload: ActionPayload) {
         switch (payload.action) {
             case 'do_after_sync_prepared':
-                this._setState({
+                this.setState({
-                    deferred_action: payload.deferred_action,
+                    deferredAction: payload.deferred_action,
                 });
                 break;
             case 'cancel_after_sync_prepared':
-                this._setState({
+                this.setState({
-                    deferred_action: null,
+                    deferredAction: null,
                 });
                 break;
-            case 'sync_state': {
+            case 'syncstate': {
                 if (payload.state !== 'PREPARED') {
                     break;
                 }
-                if (!this._state.deferred_action) break;
+                if (!this.state.deferredAction) break;
-                const deferredAction = Object.assign({}, this._state.deferred_action);
+                const deferredAction = Object.assign({}, this.state.deferredAction);
-                this._setState({
+                this.setState({
-                    deferred_action: null,
+                    deferredAction: null,
                 });
                 dis.dispatch(deferredAction);
                 break;
@@ -71,8 +75,8 @@ class LifecycleStore extends Store {
         }
     }
 
-    reset() {
+    private reset() {
-        this._state = Object.assign({}, INITIAL_STATE);
+        this.state = Object.assign({}, INITIAL_STATE);
     }
 }
 

src/utils/Accessibility.js

@@ -1,28 +0,0 @@
-/*
-Copyright 2019 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.
-*/
-
-/**
- * Automatically focuses the captured reference when receiving a non-null
- * object. Useful in scenarios where componentDidMount does not have a
- * useful reference to an element, but one needs to focus the element on
- * first render. Example usage: ref={focusCapturedRef}
- * @param {function} ref The React reference to focus on, if not null
- */
-export function focusCapturedRef(ref) {
-    if (ref) {
-        ref.focus();
-    }
-}

src/utils/UrlUtils.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2021 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.
@@ -22,7 +22,7 @@ import url from "url";
  * @param {string} u The url to be abbreviated
  * @returns {string} The abbreviated url
  */
-export function abbreviateUrl(u) {
+export function abbreviateUrl(u: string): string {
     if (!u) return '';
 
     const parsedUrl = url.parse(u);
@@ -37,7 +37,7 @@ export function abbreviateUrl(u) {
     return u;
 }
 
-export function unabbreviateUrl(u) {
+export function unabbreviateUrl(u: string): string {
     if (!u) return '';
 
     let longUrl = u;

src/utils/humanize.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020, 2021 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,22 +14,22 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {_t} from "../languageHandler";
+import { _t } from "../languageHandler";
+
+// These are the constants we use for when to break the text
+const MILLISECONDS_RECENT = 15000;
+const MILLISECONDS_1_MIN = 75000;
+const MINUTES_UNDER_1_HOUR = 45;
+const MINUTES_1_HOUR = 75;
+const HOURS_UNDER_1_DAY = 23;
+const HOURS_1_DAY = 26;
 
 /**
  * Converts a timestamp into human-readable, translated, text.
  * @param {number} timeMillis The time in millis to compare against.
  * @returns {string} The humanized time.
  */
-export function humanizeTime(timeMillis) {
+export function humanizeTime(timeMillis: number): string {
-    // These are the constants we use for when to break the text
-    const MILLISECONDS_RECENT = 15000;
-    const MILLISECONDS_1_MIN = 75000;
-    const MINUTES_UNDER_1_HOUR = 45;
-    const MINUTES_1_HOUR = 75;
-    const HOURS_UNDER_1_DAY = 23;
-    const HOURS_1_DAY = 26;
-
     const now = (new Date()).getTime();
     let msAgo = now - timeMillis;
     const minutes = Math.abs(Math.ceil(msAgo / 60000));

test/CallHandler-test.ts

@@ -25,7 +25,6 @@ import DMRoomMap from '../src/utils/DMRoomMap';
 import EventEmitter from 'events';
 import SdkConfig from '../src/SdkConfig';
 import { ActionPayload } from '../src/dispatcher/payloads';
-import { Actions } from '../src/notifications/types';
 import { Action } from '../src/dispatcher/actions';
 
 const REAL_ROOM_ID = '$room1:example.org';

test/KeyBindingsManager-test.ts

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import { isKeyComboMatch, KeyCombo } from '../src/KeyBindingsManager';
-const assert = require('assert');
 
 function mockKeyEvent(key: string, modifiers?: {
     ctrlKey?: boolean,
@@ -28,7 +27,7 @@ function mockKeyEvent(key: string, modifiers?: {
         ctrlKey: modifiers?.ctrlKey ?? false,
         altKey: modifiers?.altKey ?? false,
         shiftKey: modifiers?.shiftKey ?? false,
-        metaKey: modifiers?.metaKey ?? false
+        metaKey: modifiers?.metaKey ?? false,
     } as KeyboardEvent;
 }
 
@@ -37,9 +36,8 @@ describe('KeyBindingsManager', () => {
         const combo1: KeyCombo = {
             key: 'k',
         };
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k'), combo1, false), true);
+        expect(isKeyComboMatch(mockKeyEvent('k'), combo1, false)).toBe(true);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('n'), combo1, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('n'), combo1, false)).toBe(false);
-
     });
 
     it('should match key + modifier key combo', () => {
@@ -47,38 +45,38 @@ describe('KeyBindingsManager', () => {
             key: 'k',
             ctrlKey: true,
         };
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true }), combo, false), true);
+        expect(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true }), combo, false)).toBe(true);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('n', { ctrlKey: true }), combo, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('n', { ctrlKey: true }), combo, false)).toBe(false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k'), combo, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('k'), combo, false)).toBe(false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { shiftKey: true }), combo, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { shiftKey: true }), combo, false)).toBe(false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { shiftKey: true, metaKey: true }), combo, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { shiftKey: true, metaKey: true }), combo, false)).toBe(false);
 
         const combo2: KeyCombo = {
             key: 'k',
             metaKey: true,
         };
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { metaKey: true }), combo2, false), true);
+        expect(isKeyComboMatch(mockKeyEvent('k', { metaKey: true }), combo2, false)).toBe(true);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('n', { metaKey: true }), combo2, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('n', { metaKey: true }), combo2, false)).toBe(false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k'), combo2, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('k'), combo2, false)).toBe(false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { altKey: true, metaKey: true }), combo2, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { altKey: true, metaKey: true }), combo2, false)).toBe(false);
 
         const combo3: KeyCombo = {
             key: 'k',
             altKey: true,
         };
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { altKey: true }), combo3, false), true);
+        expect(isKeyComboMatch(mockKeyEvent('k', { altKey: true }), combo3, false)).toBe(true);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('n', { altKey: true }), combo3, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('n', { altKey: true }), combo3, false)).toBe(false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k'), combo3, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('k'), combo3, false)).toBe(false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, metaKey: true }), combo3, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, metaKey: true }), combo3, false)).toBe(false);
 
         const combo4: KeyCombo = {
             key: 'k',
             shiftKey: true,
         };
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { shiftKey: true }), combo4, false), true);
+        expect(isKeyComboMatch(mockKeyEvent('k', { shiftKey: true }), combo4, false)).toBe(true);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('n', { shiftKey: true }), combo4, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('n', { shiftKey: true }), combo4, false)).toBe(false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k'), combo4, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('k'), combo4, false)).toBe(false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { shiftKey: true, ctrlKey: true }), combo4, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { shiftKey: true, ctrlKey: true }), combo4, false)).toBe(false);
     });
 
     it('should match key + multiple modifiers key combo', () => {
@@ -87,11 +85,11 @@ describe('KeyBindingsManager', () => {
             ctrlKey: true,
             altKey: true,
         };
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, altKey: true }), combo, false), true);
+        expect(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, altKey: true }), combo, false)).toBe(true);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('n', { ctrlKey: true, altKey: true }), combo, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('n', { ctrlKey: true, altKey: true }), combo, false)).toBe(false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, metaKey: true }), combo, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, metaKey: true }), combo, false)).toBe(false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, metaKey: true, shiftKey: true }), combo,
+        expect(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, metaKey: true, shiftKey: true }), combo,
-            false), false);
+            false)).toBe(false);
 
         const combo2: KeyCombo = {
             key: 'k',
@@ -99,13 +97,13 @@ describe('KeyBindingsManager', () => {
             shiftKey: true,
             altKey: true,
         };
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, shiftKey: true, altKey: true }), combo2,
+        expect(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, shiftKey: true, altKey: true }), combo2,
-            false), true);
+            false)).toBe(true);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('n', { ctrlKey: true, shiftKey: true, altKey: true }), combo2,
+        expect(isKeyComboMatch(mockKeyEvent('n', { ctrlKey: true, shiftKey: true, altKey: true }), combo2,
-            false), false);
+            false)).toBe(false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, metaKey: true }), combo2, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, metaKey: true }), combo2, false)).toBe(false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k',
+        expect(isKeyComboMatch(mockKeyEvent('k',
-            { ctrlKey: true, shiftKey: true, altKey: true, metaKey: true }), combo2, false), false);
+            { ctrlKey: true, shiftKey: true, altKey: true, metaKey: true }), combo2, false)).toBe(false);
 
         const combo3: KeyCombo = {
             key: 'k',
@@ -114,12 +112,12 @@ describe('KeyBindingsManager', () => {
             altKey: true,
             metaKey: true,
         };
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k',
+        expect(isKeyComboMatch(mockKeyEvent('k',
-            { ctrlKey: true, shiftKey: true, altKey: true, metaKey: true }), combo3, false), true);
+            { ctrlKey: true, shiftKey: true, altKey: true, metaKey: true }), combo3, false)).toBe(true);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('n',
+        expect(isKeyComboMatch(mockKeyEvent('n',
-            { ctrlKey: true, shiftKey: true, altKey: true, metaKey: true }), combo3, false), false);
+            { ctrlKey: true, shiftKey: true, altKey: true, metaKey: true }), combo3, false)).toBe(false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k',
+        expect(isKeyComboMatch(mockKeyEvent('k',
-            { ctrlKey: true, shiftKey: true, altKey: true }), combo3, false), false);
+            { ctrlKey: true, shiftKey: true, altKey: true }), combo3, false)).toBe(false);
     });
 
     it('should match ctrlOrMeta key combo', () => {
@@ -128,13 +126,13 @@ describe('KeyBindingsManager', () => {
             ctrlOrCmd: true,
         };
         // PC:
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true }), combo, false), true);
+        expect(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true }), combo, false)).toBe(true);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { metaKey: true }), combo, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { metaKey: true }), combo, false)).toBe(false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('n', { ctrlKey: true }), combo, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('n', { ctrlKey: true }), combo, false)).toBe(false);
         // MAC:
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { metaKey: true }), combo, true), true);
+        expect(isKeyComboMatch(mockKeyEvent('k', { metaKey: true }), combo, true)).toBe(true);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true }), combo, true), false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true }), combo, true)).toBe(false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('n', { ctrlKey: true }), combo, true), false);
+        expect(isKeyComboMatch(mockKeyEvent('n', { ctrlKey: true }), combo, true)).toBe(false);
     });
 
     it('should match advanced ctrlOrMeta key combo', () => {
@@ -144,10 +142,10 @@ describe('KeyBindingsManager', () => {
             altKey: true,
         };
         // PC:
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, altKey: true }), combo, false), true);
+        expect(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, altKey: true }), combo, false)).toBe(true);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { metaKey: true, altKey: true }), combo, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { metaKey: true, altKey: true }), combo, false)).toBe(false);
         // MAC:
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { metaKey: true, altKey: true }), combo, true), true);
+        expect(isKeyComboMatch(mockKeyEvent('k', { metaKey: true, altKey: true }), combo, true)).toBe(true);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, altKey: true }), combo, true), false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, altKey: true }), combo, true)).toBe(false);
     });
 });

test/stores/SpaceStore-test.ts

@@ -21,7 +21,7 @@ import "../skinned-sdk"; // Must be first for skinning to work
 import SpaceStore, {
     UPDATE_INVITED_SPACES,
     UPDATE_SELECTED_SPACE,
-    UPDATE_TOP_LEVEL_SPACES
+    UPDATE_TOP_LEVEL_SPACES,
 } from "../../src/stores/SpaceStore";
 import { resetAsyncStoreWithClient, setupAsyncStoreWithClient } from "../utils/test-utils";
 import { mkEvent, mkStubRoom, stubClient } from "../test-utils";