Merge branch 'develop' into travis/media-customization

src/components/views/dialogs/NewSessionReviewDialog.js

@@ -66,6 +66,10 @@ export default class NewSessionReviewDialog extends React.PureComponent {
         Modal.createTrackedDialog('New Session Verification', 'Starting dialog', VerificationRequestDialog, {
             verificationRequestPromise: requestPromise,
             member: cli.getUser(userId),
+            onFinished: async () => {
+                const request = await requestPromise;
+                request.cancel();
+            },
         });
     }
 

src/components/views/dialogs/VerificationRequestDialog.js

@@ -27,11 +27,11 @@ export default class VerificationRequestDialog extends React.Component {
         verificationRequest: PropTypes.object,
         verificationRequestPromise: PropTypes.object,
         onFinished: PropTypes.func.isRequired,
+        member: PropTypes.string,
     };
 
     constructor(...args) {
         super(...args);
-        this.onFinished = this.onFinished.bind(this);
         this.state = {};
         if (this.props.verificationRequest) {
             this.state.verificationRequest = this.props.verificationRequest;
@@ -52,7 +52,7 @@ export default class VerificationRequestDialog extends React.Component {
         const title = request && request.isSelfVerification ?
             _t("Verify other session") : _t("Verification Request");
 
-        return <BaseDialog className="mx_InfoDialog" onFinished={this.onFinished}
+        return <BaseDialog className="mx_InfoDialog" onFinished={this.props.onFinished}
                 contentId="mx_Dialog_content"
                 title={title}
                 hasCancel={true}
@@ -66,13 +66,4 @@ export default class VerificationRequestDialog extends React.Component {
             />
         </BaseDialog>;
     }
-
-    async onFinished() {
-        this.props.onFinished();
-        let request = this.props.verificationRequest;
-        if (!request && this.props.verificationRequestPromise) {
-            request = await this.props.verificationRequestPromise;
-        }
-        request.cancel();
-    }
 }

src/components/views/right_panel/UserInfo.tsx

@@ -46,6 +46,7 @@ import EncryptionPanel from "./EncryptionPanel";
 import {useAsyncMemo} from '../../../hooks/useAsyncMemo';
 import {legacyVerifyUser, verifyDevice, verifyUser} from '../../../verification';
 import {Action} from "../../../dispatcher/actions";
+import { USER_SECURITY_TAB } from "../dialogs/UserSettingsDialog";
 import {useIsEncrypted} from "../../../hooks/useIsEncrypted";
 import BaseCard from "./BaseCard";
 import {E2EStatus} from "../../../utils/ShieldUtils";
@@ -1368,6 +1369,20 @@ const BasicUserInfo: React.FC<{
         }
     }
 
+    let editDevices;
+    if (member.userId == cli.getUserId()) {
+        editDevices = (<p>
+            <AccessibleButton className="mx_UserInfo_field" onClick={() => {
+                dis.dispatch({
+                    action: Action.ViewUserSettings,
+                    initialTabId: USER_SECURITY_TAB,
+                });
+            }}>
+                { _t("Edit devices") }
+            </AccessibleButton>
+        </p>)
+    }
+
     const securitySection = (
         <div className="mx_UserInfo_container">
             <h3>{ _t("Security") }</h3>
@@ -1377,6 +1392,7 @@ const BasicUserInfo: React.FC<{
                 loading={showDeviceListSpinner}
                 devices={devices}
                 userId={member.userId} /> }
+            { editDevices }
         </div>
     );
 

src/components/views/rooms/ReadReceiptMarker.js

@@ -158,14 +158,14 @@ export default class ReadReceiptMarker extends React.PureComponent {
         // then shift to the rightmost column,
         // and then it will drop down to its resting position
         //
-        // XXX: We use a fractional left value to trick velocity-animate into actually animating.
+        // XXX: We use a small left value to trick velocity-animate into actually animating.
         // This is a very annoying bug where if it thinks there's no change to `left` then it'll
         // skip applying it, thus making our read receipt at +14px instead of +0px like it
         // should be. This does cause a tiny amount of drift for read receipts, however with a
         // value so small it's not perceived by a user.
         // Note: Any smaller values (or trying to interchange units) might cause read receipts to
         // fail to fall down or cause gaps.
-        startStyles.push({ top: startTopOffset+'px', left: '0.001px' });
+        startStyles.push({ top: startTopOffset+'px', left: '1px' });
         enterTransitionOpts.push({
             duration: bounce ? Math.min(Math.log(Math.abs(startTopOffset)) * 200, 3000) : 300,
             easing: bounce ? 'easeOutBounce' : 'easeOutCubic',

src/components/views/toasts/VerificationRequestToast.tsx

@@ -39,6 +39,7 @@ interface IProps {
 interface IState {
     counter: number;
     device?: DeviceInfo;
+    ip?: string;
 }
 
 @replaceableComponent("views.toasts.VerificationRequestToast")
@@ -68,9 +69,15 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
         // a toast hanging around after logging in if you did a verification as part of login).
         this._checkRequestIsPending();
 
+
         if (request.isSelfVerification) {
             const cli = MatrixClientPeg.get();
-            this.setState({device: cli.getStoredDevice(cli.getUserId(), request.channel.deviceId)});
+            const device = await cli.getDevice(request.channel.deviceId);
+            const ip = device.last_seen_ip;
+            this.setState({
+                device: cli.getStoredDevice(cli.getUserId(), request.channel.deviceId),
+                ip,
+            });
         }
     }
 
@@ -120,6 +127,9 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
                 const VerificationRequestDialog = sdk.getComponent("views.dialogs.VerificationRequestDialog");
                 Modal.createTrackedDialog('Incoming Verification', '', VerificationRequestDialog, {
                     verificationRequest: request,
+                    onFinished: () => {
+                        request.cancel();
+                    },
                 }, null, /* priority = */ false, /* static = */ true);
             }
             await request.accept();
@@ -133,9 +143,10 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
         let nameLabel;
         if (request.isSelfVerification) {
             if (this.state.device) {
-                nameLabel = _t("From %(deviceName)s (%(deviceId)s)", {
+                nameLabel = _t("From %(deviceName)s (%(deviceId)s) at %(ip)s", {
                     deviceName: this.state.device.getDisplayName(),
                     deviceId: this.state.device.deviceId,
+                    ip: this.state.ip,
                 });
             }
         } else {