Merge branch 'develop' into florianduros/rip-out-legacy-crypto/remove…

…-matrixclient-crypto-references

package.json

@@ -73,7 +73,7 @@
     "dependencies": {
         "@babel/runtime": "^7.12.5",
         "@matrix-org/analytics-events": "^0.26.0",
-        "@matrix-org/emojibase-bindings": "^1.1.2",
+        "@matrix-org/emojibase-bindings": "^1.3.3",
         "@vector-im/matrix-wysiwyg": "2.37.13",
         "@matrix-org/react-sdk-module-api": "^2.4.0",
         "@matrix-org/spec": "^1.7.0",

playwright/e2e/crypto/crypto.spec.ts

@@ -43,6 +43,7 @@ const testMessages = async (page: Page, bob: Bot, bobRoomId: string) => {
 };
 
 const bobJoin = async (page: Page, bob: Bot) => {
+    // Wait for Bob to get the invite
     await bob.evaluate(async (cli) => {
         const bobRooms = cli.getRooms();
         if (!bobRooms.length) {
@@ -55,9 +56,13 @@ const bobJoin = async (page: Page, bob: Bot) => {
             });
         }
     });
-    const roomId = await bob.joinRoomByName("Alice");
 
+    const roomId = await bob.joinRoomByName("Alice");
     await expect(page.getByText("Bob joined the room")).toBeVisible();
+
+    // Even though Alice has seen Bob's join event, Bob may not have done so yet. Wait for the sync to arrive.
+    await bob.awaitRoomMembership(roomId);
+
     return roomId;
 };
 

playwright/e2e/crypto/event-shields.spec.ts

@@ -33,7 +33,7 @@ test.describe("Cryptography", function () {
             await app.client.bootstrapCrossSigning(aliceCredentials);
             await autoJoin(bob);
 
-            // create an encrypted room
+            // create an encrypted room, and wait for Bob to join it.
             testRoomId = await createSharedRoomWithUser(app, bob.credentials.userId, {
                 name: "TestRoom",
                 initial_state: [
@@ -46,6 +46,9 @@ test.describe("Cryptography", function () {
                     },
                 ],
             });
+
+            // Even though Alice has seen Bob's join event, Bob may not have done so yet. Wait for the sync to arrive.
+            await bob.awaitRoomMembership(testRoomId);
         });
 
         test("should show the correct shield on e2e events", async ({
@@ -287,9 +290,9 @@ test.describe("Cryptography", function () {
             // Let our app start syncing again
             await app.client.network.goOnline();
 
-            // Wait for the messages to arrive
+            // Wait for the messages to arrive. It can take quite a while for the sync to wake up.
             const last = page.locator(".mx_EventTile_last");
-            await expect(last).toContainText("test encrypted from unverified");
+            await expect(last).toContainText("test encrypted from unverified", { timeout: 20000 });
             const lastE2eIcon = last.locator(".mx_EventTile_e2eIcon");
             await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
             await lastE2eIcon.focus();

playwright/e2e/utils.ts

@@ -20,6 +20,14 @@ import { Client } from "../pages/client";
  * @param client Client instance that can be user or bot
  * @param roomId room id to find room and check
  * @param predicate defines condition that is used to check the room state
+ *
+ * FIXME this does not do what it is supposed to do, and I think it is unfixable.
+ *   `page.exposeFunction` adds a function which returns a Promise. `window[predicateId](room)` therefore
+ *   always returns a truthy value (a Promise).  But even if you fix that: as far as I can tell, the Room is
+ *   just passed to the callback function as a JSON blob: you cannot actually call any methods on it, so the
+ *   callback is useless.
+ *
+ * @deprecated This function is broken.
  */
 export async function waitForRoom(
     page: Page,

playwright/pages/client.ts

@@ -289,6 +289,54 @@ export class Client {
         await client.evaluate((client, { roomId, userId }) => client.unban(roomId, userId), { roomId, userId });
     }
 
+    /**
+     * Wait for the client to have specific membership of a given room
+     *
+     * This is often useful after joining a room, when we need to wait for the sync loop to catch up.
+     *
+     * Times out with an error after 1 second.
+     *
+     * @param roomId - ID of the room to check
+     * @param membership - required membership.
+     */
+    public async awaitRoomMembership(roomId: string, membership: string = "join") {
+        await this.evaluate(
+            (cli: MatrixClient, { roomId, membership }) => {
+                const isReady = () => {
+                    // Fetch the room on each check, because we get a different instance before and after the join arrives.
+                    const room = cli.getRoom(roomId);
+                    const myMembership = room?.getMyMembership();
+                    // @ts-ignore access to private field "logger"
+                    cli.logger.info(`waiting for room ${roomId}: membership now ${myMembership}`);
+                    return myMembership === membership;
+                };
+                if (isReady()) return;
+
+                const timeoutPromise = new Promise((resolve) => setTimeout(resolve, 1000)).then(() => {
+                    const room = cli.getRoom(roomId);
+                    const myMembership = room?.getMyMembership();
+                    throw new Error(
+                        `Timeout waiting for room ${roomId} membership (now '${myMembership}', wanted '${membership}')`,
+                    );
+                });
+
+                const readyPromise = new Promise<void>((resolve) => {
+                    async function onEvent() {
+                        if (isReady()) {
+                            cli.removeListener(window.matrixcs.ClientEvent.Event, onEvent);
+                            resolve();
+                        }
+                    }
+
+                    cli.on(window.matrixcs.ClientEvent.Event, onEvent);
+                });
+
+                return Promise.race([timeoutPromise, readyPromise]);
+            },
+            { roomId, membership },
+        );
+    }
+
     /**
      * @param {MatrixEvent} event
      * @param {ReceiptType} receiptType

res/css/structures/auth/_MobileRegistration.pcss

@@ -7,4 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_MobileRegister_body {
     padding: 32px;
+    height: 100vh;
+    overflow-y: auto;
+    box-sizing: border-box;
 }

res/css/views/audio_messages/_PlayPauseButton.pcss

@@ -21,25 +21,21 @@ Please see LICENSE files in the repository root for full details.
         background-color: $secondary-content;
         mask-repeat: no-repeat;
         mask-size: contain;
+        top: 6px; /* center */
+        left: 6px; /* center */
+        width: 20px;
+        height: 20px;
     }
 
     &.mx_PlayPauseButton_disabled::before {
         opacity: 0.5;
     }
 
     &.mx_PlayPauseButton_play::before {
-        width: 13px;
-        height: 16px;
-        top: 8px; /* center */
-        left: 12px; /* center */
-        mask-image: url("$(res)/img/element-icons/play.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/play-solid.svg");
     }
 
     &.mx_PlayPauseButton_pause::before {
-        width: 10px;
-        height: 12px;
-        top: 10px; /* center */
-        left: 11px; /* center */
-        mask-image: url("$(res)/img/element-icons/pause.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/pause-solid.svg");
     }
 }

res/css/views/messages/_LegacyCallEvent.pcss

@@ -75,7 +75,7 @@ Please see LICENSE files in the repository root for full details.
             &.mx_LegacyCallEvent_rejected,
             &.mx_LegacyCallEvent_noAnswer {
                 .mx_LegacyCallEvent_type_icon::before {
-                    mask-image: url("$(res)/img/voip/declined-video.svg");
+                    mask-image: url("@vector-im/compound-design-tokens/icons/video-call-declined-solid.svg");
                 }
             }
         }
@@ -89,7 +89,7 @@ Please see LICENSE files in the repository root for full details.
 
             &.mx_LegacyCallEvent_video {
                 .mx_LegacyCallEvent_type_icon::before {
-                    mask-image: url("$(res)/img/voip/missed-video.svg");
+                    mask-image: url("@vector-im/compound-design-tokens/icons/video-call-missed-solid.svg");
                 }
             }
         }

res/css/views/rooms/_MessageComposer.pcss

@@ -253,7 +253,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_MessageComposer_voiceMessage::before {
-    mask-image: url("$(res)/img/element-icons/mic.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
 }
 
 .mx_MessageComposer_voiceBroadcast::before {

res/css/views/rooms/_ReplyTile.pcss

@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
     font: var(--cpd-font-body-md-regular);
 
     &.mx_ReplyTile_audio .mx_MFileBody_info_icon::before {
-        mask-image: url("$(res)/img/element-icons/speaker.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/volume-on-solid.svg");
     }
 
     &.mx_ReplyTile_video .mx_MFileBody_info_icon::before {

res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss

@@ -87,19 +87,19 @@ Please see LICENSE files in the repository root for full details.
 
             &.mx_LegacyCallViewButtons_button_mic::before {
                 height: 20px;
-                mask-image: url("$(res)/img/element-icons/mic.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
                 width: 20px;
             }
 
             &.mx_LegacyCallViewButtons_button_vid::before {
-                mask-image: url("$(res)/img/voip/call-view/cam-on.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
             }
 
             &.mx_LegacyCallViewButtons_button_screensharing {
                 background-color: $accent;
 
                 &::before {
-                    mask-image: url("$(res)/img/voip/call-view/screensharing.svg");
+                    mask-image: url("@vector-im/compound-design-tokens/icons/share-screen-solid.svg");
                     background-color: white; /* Same on both themes */
                 }
             }
@@ -118,19 +118,19 @@ Please see LICENSE files in the repository root for full details.
 
             &.mx_LegacyCallViewButtons_button_mic::before {
                 height: 20px;
-                mask-image: url("$(res)/img/element-icons/Mic-off.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/mic-off-solid.svg");
                 width: 20px;
             }
 
             &.mx_LegacyCallViewButtons_button_vid::before {
-                mask-image: url("$(res)/img/voip/call-view/cam-off.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/video-call-off-solid.svg");
             }
 
             &.mx_LegacyCallViewButtons_button_screensharing {
                 background-color: $call-view-button-on-background;
 
                 &::before {
-                    mask-image: url("$(res)/img/voip/call-view/screensharing.svg");
+                    mask-image: url("@vector-im/compound-design-tokens/icons/share-screen-solid.svg");
                     background-color: $call-view-button-on-foreground;
                 }
             }

res/css/views/voip/_CallView.pcss

@@ -123,12 +123,12 @@ Please see LICENSE files in the repository root for full details.
                         }
 
                         &.mx_CallView_deviceButton_audio::before {
-                            mask-image: url("$(res)/img/element-icons/mic.svg");
+                            mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
                             mask-size: 14px;
                         }
 
                         &.mx_CallView_deviceButton_video::before {
-                            mask-image: url("$(res)/img/voip/call-view/cam-on.svg");
+                            mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
                         }
                     }
 
@@ -168,12 +168,12 @@ Please see LICENSE files in the repository root for full details.
 
                         .mx_CallView_deviceButton {
                             &.mx_CallView_deviceButton_audio::before {
-                                mask-image: url("$(res)/img/element-icons/Mic-off.svg");
+                                mask-image: url("@vector-im/compound-design-tokens/icons/mic-off-solid.svg");
                                 mask-size: 18px;
                             }
 
                             &.mx_CallView_deviceButton_video::before {
-                                mask-image: url("$(res)/img/voip/call-view/cam-off.svg");
+                                mask-image: url("@vector-im/compound-design-tokens/icons/video-call-off-solid.svg");
                             }
                         }
                     }

res/css/views/voip/_VideoFeed.pcss

@@ -72,11 +72,11 @@ Please see LICENSE files in the repository root for full details.
         }
 
         &.mx_VideoFeed_mic_muted::before {
-            mask-image: url("$(res)/img/element-icons/Mic-off.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/mic-off-solid.svg");
         }
 
         &.mx_VideoFeed_mic_unmuted::before {
-            mask-image: url("$(res)/img/element-icons/mic.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
         }
     }
 }