Merge branch 'develop' of https://github.com/matrix-org/matrix-react-sdk into joriks/font-scaling-slider

src/components/structures/RightPanel.js

@@ -227,7 +227,7 @@ export default class RightPanel extends React.Component {
                         if (this.props.user) {
                             // If we have a user prop then we're displaying a user from the 'user' page type
                             // in LoggedInView, so need to change the page type to close the panel (we switch
-                            // to the home page which is not obviosuly the correct thing to do, but I'm not sure
+                            // to the home page which is not obviously the correct thing to do, but I'm not sure
                             // anything else is - we could hide the close button altogether?)
                             dis.dispatch({
                                 action: "view_home_page",

src/components/structures/RoomSubList.js

@@ -37,6 +37,42 @@ import {toRem} from "../../utils/rem";
 // turn this on for drop & drag console debugging galore
 const debug = false;
 
+class RoomTileErrorBoundary extends React.PureComponent {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            error: null,
+        };
+    }
+
+    static getDerivedStateFromError(error) {
+        // Side effects are not permitted here, so we only update the state so
+        // that the next render shows an error message.
+        return { error };
+    }
+
+    componentDidCatch(error, { componentStack }) {
+        // Browser consoles are better at formatting output when native errors are passed
+        // in their own `console.error` invocation.
+        console.error(error);
+        console.error(
+            "The above error occured while React was rendering the following components:",
+            componentStack,
+        );
+    }
+
+    render() {
+        if (this.state.error) {
+            return (<div className="mx_RoomTile mx_RoomTileError">
+                {this.props.roomId}
+            </div>);
+        } else {
+            return this.props.children;
+        }
+    }
+}
+
 export default class RoomSubList extends React.PureComponent {
     static displayName = 'RoomSubList';
     static debug = debug;
@@ -208,7 +244,7 @@ export default class RoomSubList extends React.PureComponent {
     };
 
     makeRoomTile = (room) => {
-        return <RoomTile
+        return <RoomTileErrorBoundary roomId={room.roomId}><RoomTile
             room={room}
             roomSubList={this}
             tagName={this.props.tagName}
@@ -221,7 +257,7 @@ export default class RoomSubList extends React.PureComponent {
             refreshSubList={this._updateSubListCount}
             incomingCall={null}
             onClick={this.onRoomTileClick}
-        />;
+        /></RoomTileErrorBoundary>;
     };
 
     _onNotifBadgeClick = (e) => {

src/components/structures/RoomView.js

@@ -425,7 +425,7 @@ export default createReactClass({
         }
         this.onResize();
 
-        document.addEventListener("keydown", this.onKeyDown);
+        document.addEventListener("keydown", this.onNativeKeyDown);
     },
 
     shouldComponentUpdate: function(nextProps, nextState) {
@@ -508,7 +508,7 @@ export default createReactClass({
             this.props.resizeNotifier.removeListener("middlePanelResized", this.onResize);
         }
 
-        document.removeEventListener("keydown", this.onKeyDown);
+        document.removeEventListener("keydown", this.onNativeKeyDown);
 
         // Remove RoomStore listener
         if (this._roomStoreToken) {
@@ -550,7 +550,8 @@ export default createReactClass({
         }
     },
 
-    onKeyDown: function(ev) {
+    // we register global shortcuts here, they *must not conflict* with local shortcuts elsewhere or both will fire
+    onNativeKeyDown: function(ev) {
         let handled = false;
         const ctrlCmdOnly = isOnlyCtrlOrCmdKeyEvent(ev);
 
@@ -576,6 +577,25 @@ export default createReactClass({
         }
     },
 
+    onReactKeyDown: function(ev) {
+        let handled = false;
+
+        switch (ev.key) {
+            case Key.ESCAPE:
+                if (!ev.altKey && !ev.ctrlKey && !ev.shiftKey && !ev.metaKey) {
+                    this._messagePanel.forgetReadMarker();
+                    this.jumpToLiveTimeline();
+                    handled = true;
+                }
+                break;
+        }
+
+        if (handled) {
+            ev.stopPropagation();
+            ev.preventDefault();
+        }
+    },
+
     onAction: function(payload) {
         switch (payload.action) {
             case 'message_send_failed':
@@ -1768,7 +1788,7 @@ export default createReactClass({
         const showRoomRecoveryReminder = (
             SettingsStore.getValue("showRoomRecoveryReminder") &&
             this.context.isRoomEncrypted(this.state.room.roomId) &&
-            !this.context.getKeyBackupEnabled()
+            this.context.getKeyBackupEnabled() === false
         );
 
         const hiddenHighlightCount = this._getHiddenHighlightCount();
@@ -2008,9 +2028,13 @@ export default createReactClass({
             mx_RoomView_timeline_rr_enabled: this.state.showReadReceipts,
         });
 
+        const mainClasses = classNames("mx_RoomView", {
+            mx_RoomView_inCall: inCall,
+        });
+
         return (
             <RoomContext.Provider value={this.state}>
-                <main className={"mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "")} ref={this._roomView}>
+                <main className={mainClasses} ref={this._roomView} onKeyDown={this.onReactKeyDown}>
                     <ErrorBoundary>
                         <RoomHeader
                             room={this.state.room}

src/components/structures/UserView.js

@@ -42,7 +42,10 @@ export default class UserView extends React.Component {
     }
 
     componentDidUpdate(prevProps) {
-        if (prevProps.userId !== this.props.userId) {
+        // XXX: We shouldn't need to null check the userId here, but we declare
+        // it as optional and MatrixChat sometimes fires in a way which results
+        // in an NPE when we try to update the profile info.
+        if (prevProps.userId !== this.props.userId && this.props.userId) {
             this._loadProfileInfo();
         }
     }