Merge branch 'develop' into travis/update-qr-code

res/css/views/rooms/_InviteOnlyIcon.scss

@@ -20,7 +20,7 @@ limitations under the License.
     position: relative;
     display: block !important;
     // Align the padlock with unencrypted room names
-    margin-left: 6px;
+    margin: 0 4px;
 
     &::before {
         background-color: $roomtile-name-color;

res/css/views/rooms/_MessageComposer.scss

@@ -76,8 +76,8 @@ limitations under the License.
     left: 60px;
     margin-right: 0; // Counteract the E2EIcon class
     margin-left: 3px; // Counteract the E2EIcon class
-    width: 12px;
+    width: 15px;
-    height: 12px;
+    height: 15px;
 }
 
 .mx_MessageComposer_noperm_error {

res/css/views/rooms/_RoomHeader.scss

@@ -21,10 +21,10 @@ limitations under the License.
     .mx_E2EIcon {
         margin: 0;
         position: absolute;
-        bottom: -1px;
+        bottom: -2px;
-        right: -2px;
+        right: -6px;
-        height: 10px;
+        height: 15px;
-        width: 10px;
+        width: 15px;
     }
 }
 

res/css/views/rooms/_RoomTile.scss

@@ -101,19 +101,19 @@ limitations under the License.
 // 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;
+    height: 14px;
-    width: 10px;
+    width: 14px;
     display: block;
     position: absolute;
-    bottom: -1px;
+    bottom: -2px;
-    right: -2px;
+    right: -5px;
     z-index: 1;
     margin: 0;
 }
 
 .mx_RoomTile_name {
     font-size: 14px;
-    padding: 0 6px;
+    padding: 0 4px;
     color: $roomtile-name-color;
     white-space: nowrap;
     overflow-x: hidden;
@@ -214,8 +214,3 @@ limitations under the License.
 .mx_GroupInviteTile .mx_RoomTile_name {
     flex: 1;
 }
-
-.mx_InviteOnlyIcon + .mx_RoomTile_nameContainer .mx_RoomTile_name {
-    // Scoot the padding in a bit from 6px to make it look better
-    padding-left: 3px;
-}

src/components/structures/TimelinePanel.js

@@ -1171,28 +1171,40 @@ const TimelinePanel = createReactClass({
         // get the user's membership at the last event by getting the timeline
         // that the event belongs to, and traversing the timeline looking for
         // that event, while keeping track of the user's membership
-        const lastEvent = events[events.length - 1];
+        let i;
-        const timeline = room.getTimelineForEvent(lastEvent.getId());
+        let userMembership = "leave";
-        const userMembershipEvent =
+        for (i = events.length - 1; i >= 0; i--) {
-              timeline.getState(EventTimeline.FORWARDS).getMember(userId);
+            const timeline = room.getTimelineForEvent(events[i].getId());
-        let userMembership = userMembershipEvent
+            if (!timeline) {
-            ? userMembershipEvent.membership : "leave";
+                // Somehow, it seems to be possible for live events to not have
-        const timelineEvents = timeline.getEvents();
+                // a timeline, even though that should not happen. :(
-        for (let i = timelineEvents.length - 1; i >= 0; i--) {
+                // https://github.com/vector-im/riot-web/issues/12120
-            const event = timelineEvents[i];
+                console.warn(
-            if (event.getId() === lastEvent.getId()) {
+                    `Event ${events[i].getId()} in room ${room.roomId} is live, ` +
-                // found the last event, so we can stop looking through the timeline
+                    `but it does not have a timeline`,
-                break;
+                );
-            } else if (event.getStateKey() === userId
+                continue;
-                       && event.getType() === "m.room.member") {
-                const prevContent = event.getPrevContent();
-                userMembership = prevContent.membership || "leave";
             }
+            const userMembershipEvent =
+                    timeline.getState(EventTimeline.FORWARDS).getMember(userId);
+            userMembership = userMembershipEvent ? userMembershipEvent.membership : "leave";
+            const timelineEvents = timeline.getEvents();
+            for (let j = timelineEvents.length - 1; j >= 0; j--) {
+                const event = timelineEvents[j];
+                if (event.getId() === events[i].getId()) {
+                    break;
+                } else if (event.getStateKey() === userId
+                    && event.getType() === "m.room.member") {
+                    const prevContent = event.getPrevContent();
+                    userMembership = prevContent.membership || "leave";
+                }
+            }
+            break;
         }
 
-        // now go through the events that we have and find the first undecryptable
+        // now go through the rest of the events and find the first undecryptable
         // one that was sent when the user wasn't in the room
-        for (let i = events.length - 1; i >= 0; i--) {
+        for (; i >= 0; i--) {
             const event = events[i];
             if (event.getStateKey() === userId
                 && event.getType() === "m.room.member") {

src/components/views/dialogs/DeviceVerifyDialog.js

@@ -194,10 +194,7 @@ export default class DeviceVerifyDialog extends React.Component {
                     { _t("Verify by comparing a short text string.") }
                 </p>
                 <p>
-                    {_t(
+                    {_t("To be secure, do this in person or use a trusted way to communicate.")}
-                        "For maximum security, we recommend you do this in person or " +
-                        "use another trusted means of communication.",
-                    )}
                 </p>
                 <DialogButtons
                     primaryButton={_t('Begin Verifying')}

src/components/views/right_panel/EncryptionInfo.js

@@ -56,7 +56,7 @@ const EncryptionInfo = ({pending, member, onStartVerification}) => {
             <h3>{_t("Verify User")}</h3>
             <div>
                 <p>{_t("For extra security, verify this user by checking a one-time code on both of your devices.")}</p>
-                <p>{_t("For maximum security, do this in person.")}</p>
+                <p>{_t("To be secure, do this in person or use a trusted way to communicate.")}</p>
                 { content }
             </div>
         </div>

src/components/views/verification/VerificationShowSas.js

@@ -105,7 +105,7 @@ export default class VerificationShowSas extends React.Component {
 
         return <div className="mx_VerificationShowSas">
             <p>{sasCaption}</p>
-            <p>{_t("For ultimate security, do this in person or use another way to communicate.")}</p>
+            <p>{_t("To be secure, do this in person or use a trusted way to communicate.")}</p>
             {sasDisplay}
             {confirm}
         </div>;

src/i18n/strings/en_EN.json

@@ -451,7 +451,7 @@
     "Waiting for %(displayName)s to verify…": "Waiting for %(displayName)s to verify…",
     "They match": "They match",
     "They don't match": "They don't match",
-    "For ultimate security, do this in person or use another way to communicate.": "For ultimate security, do this in person or use another way to communicate.",
+    "To be secure, do this in person or use a trusted way to communicate.": "To be secure, do this in person or use a trusted way to communicate.",
     "Dog": "Dog",
     "Cat": "Cat",
     "Lion": "Lion",
@@ -1150,7 +1150,6 @@
     "Your messages are secured and only you and the recipient have the unique keys to unlock them.": "Your messages are secured and only you and the recipient have the unique keys to unlock them.",
     "Verify User": "Verify User",
     "For extra security, verify this user by checking a one-time code on both of your devices.": "For extra security, verify this user by checking a one-time code on both of your devices.",
-    "For maximum security, do this in person.": "For maximum security, do this in person.",
     "Your messages are not secure": "Your messages are not secure",
     "One of the following may be compromised:": "One of the following may be compromised:",
     "Your homeserver": "Your homeserver",
@@ -1462,7 +1461,6 @@
     "Verify device": "Verify device",
     "Use Legacy Verification (for older clients)": "Use Legacy Verification (for older clients)",
     "Verify by comparing a short text string.": "Verify by comparing a short text string.",
-    "For maximum security, we recommend you do this in person or use another trusted means of communication.": "For maximum security, we recommend you do this in person or use another trusted means of communication.",
     "Begin Verifying": "Begin Verifying",
     "Waiting for partner to accept...": "Waiting for partner to accept...",
     "Nothing appearing? Not all clients support interactive verification yet. <button>Use legacy verification</button>.": "Nothing appearing? Not all clients support interactive verification yet. <button>Use legacy verification</button>.",