Sync develop with verji-develop

.github/workflows/end-to-end-tests.yaml

@@ -113,7 +113,7 @@ jobs:
               run: yarn playwright install --with-deps
 
             - name: Run Playwright tests
-              uses: coactions/setup-xvfb@b6b4fcfb9f5a895edadc3bc76318fae0ac17c8b3 # v1
+              uses: coactions/setup-xvfb@6b00cf1889f4e1d5a48635647013c0508128ee1a
               with:
                   run: yarn playwright test --shard ${{ matrix.runner }}/${{ strategy.job-total }}
                   working-directory: matrix-react-sdk

CHANGELOG.md

@@ -1,3 +1,22 @@
+Changes in [3.92.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.92.0) (2024-02-13)
+=====================================================================================================
+## ✨ Features
+
+* Add Element call related functionality to new room header ([#12091](https://github.com/matrix-org/matrix-react-sdk/pull/12091)). Contributed by @toger5.
+* Add labs flag for Threads Activity Centre ([#12137](https://github.com/matrix-org/matrix-react-sdk/pull/12137)). Contributed by @florianduros.
+* Refactor element call lobby + skip lobby ([#12057](https://github.com/matrix-org/matrix-react-sdk/pull/12057)). Contributed by @toger5.
+* Hide the "Message" button in the sidebar if the CreateRooms components should not be shown ([#9271](https://github.com/matrix-org/matrix-react-sdk/pull/9271)). Contributed by @dhenneke.
+* Add notification dots to thread summary icons ([#12146](https://github.com/matrix-org/matrix-react-sdk/pull/12146)). Contributed by @dbkr.
+
+## 🐛 Bug Fixes
+
+* [Backport staging] Fix the StorageManger detecting a false positive consistency check when manually migrating to rust from labs ([#12230](https://github.com/matrix-org/matrix-react-sdk/pull/12230)). Contributed by @RiotRobot.
+* Fix logout can take ages ([#12191](https://github.com/matrix-org/matrix-react-sdk/pull/12191)). Contributed by @BillCarsonFr.
+* Fix `Mark all as read` in settings ([#12205](https://github.com/matrix-org/matrix-react-sdk/pull/12205)). Contributed by @florianduros.
+* Fix default thread notification of the new RoomHeader ([#12194](https://github.com/matrix-org/matrix-react-sdk/pull/12194)). Contributed by @florianduros.
+* Fix display of room notification debug info ([#12183](https://github.com/matrix-org/matrix-react-sdk/pull/12183)). Contributed by @dbkr.
+
+
 Changes in [3.91.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.91.0) (2024-01-31)
 =====================================================================================================
 ## ✨ Features

package.json

@@ -1,6 +1,6 @@
 {
     "name": "matrix-react-sdk",
-    "version": "3.91.0",
+    "version": "3.92.0",
     "description": "SDK for matrix.org using React",
     "author": "matrix.org",
     "repository": {

playwright/e2e/crypto/crypto.spec.ts

@@ -432,8 +432,7 @@ test.describe("Cryptography", function () {
             await expect(page.getByRole("tooltip")).toContainText("Encrypted by an unknown or deleted device.");
         });
 
-        // XXX: Failed since migration to Playwright (https://github.com/element-hq/element-web/issues/26811)
-        test.skip("Should show a grey padlock for a key restored from backup", async ({
+        test("Should show a grey padlock for a key restored from backup", async ({
             page,
             app,
             bot: bob,
@@ -462,9 +461,16 @@ test.describe("Cryptography", function () {
             /* go back to the test room and find Bob's message again */
             await app.viewRoomById(testRoomId);
             await expect(lastTile).toContainText("test encrypted 1");
-            await expect(lastTileE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
+            // The gray shield would be a mx_EventTile_e2eIcon_normal. The red shield would be a mx_EventTile_e2eIcon_warning.
+            // No shield would have no div mx_EventTile_e2eIcon at all.
+            await expect(lastTileE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_normal/);
             await lastTileE2eIcon.hover();
-            await expect(page.getByRole("tooltip")).toContainText("Encrypted by an unknown or deleted device.");
+            // The key is coming from backup, so it is not anymore possible to establish if the claimed device
+            // creator of this key is authentic. The tooltip should be "The authenticity of this encrypted message can't be guaranteed on this device."
+            // It is not "Encrypted by an unknown or deleted device." even if the claimed device is actually deleted.
+            await expect(page.getByRole("tooltip")).toContainText(
+                "The authenticity of this encrypted message can't be guaranteed on this device.",
+            );
         });
 
         test("should show the correct shield on edited e2e events", async ({ page, app, bot: bob, homeserver }) => {

playwright/e2e/user-onboarding/user-onboarding-new.spec.ts

@@ -43,7 +43,7 @@ test.describe("User Onboarding (new user)", () => {
     test("app download dialog", async ({ page }) => {
         await page.getByRole("button", { name: "Download apps" }).click();
         await expect(
-            page.getByRole("dialog").getByRole("heading", { level: 2, name: "Download Element" }),
+            page.getByRole("dialog").getByRole("heading", { level: 1, name: "Download Element" }),
         ).toBeVisible();
         await expect(page.locator(".mx_Dialog")).toMatchScreenshot();
     });

res/css/_common.pcss

@@ -17,7 +17,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css");
+@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
 @import url("@vector-im/compound-web/dist/style.css");
 @import "./_font-sizes.pcss";
 @import "./_animations.pcss";
@@ -474,6 +474,7 @@ legend {
     display: inline-block;
     width: 100%;
     box-sizing: border-box;
+    letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
 
     &.danger {
         color: $alert;
@@ -561,7 +562,7 @@ legend {
     border-radius: 8px;
     font: var(--cpd-font-body-md-regular);
     color: $button-fg-color;
-    background-color: $accent;
+    background-color: var(--cpd-color-bg-action-primary-rest);
     width: auto;
     padding: 7px;
     padding-left: 1.5em;
@@ -594,8 +595,8 @@ legend {
 
     /* flip colours for the secondary ones */
     font-weight: var(--cpd-font-weight-semibold);
-    border: 1px solid currentColor;
-    color: $accent;
+    border: 1px solid var(--cpd-color-border-interactive-secondary);
+    color: var(--cpd-color-text-primary);
     background-color: transparent;
     font-family: inherit;
 }
@@ -615,24 +616,25 @@ legend {
 .mx_Dialog input[type="submit"].mx_Dialog_primary,
 .mx_Dialog_buttons button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
 .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
-    color: $accent-fg-color;
-    background-color: $accent;
+    color: var(--cpd-color-text-on-solid-primary);
+    background-color: var(--cpd-color-bg-action-primary-rest);
+    border-color: var(--cpd-color-bg-action-primary-rest);
     min-width: 156px;
 }
 
 .mx_Dialog button.danger:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
 .mx_Dialog input[type="submit"].danger,
 .mx_Dialog_buttons button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
 .mx_Dialog_buttons input[type="submit"].danger {
-    background-color: $alert;
-    border: solid 1px $alert;
-    color: $accent-fg-color;
+    background-color: var(--cpd-color-bg-critical-primary);
+    border: solid 1px var(--cpd-color-bg-critical-primary);
+    color: var(--cpd-color-text-on-solid-primary);
 }
 
 .mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
 .mx_Dialog input[type="submit"].warning {
-    border: solid 1px $alert;
-    color: $alert;
+    border: solid 1px var(--cpd-color-border-critical-primary);
+    color: var(--cpd-color-text-critical-primary);
 }
 
 .mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):disabled,
@@ -814,11 +816,9 @@ legend {
 }
 
 @define-mixin composerButtonHighLight {
-    /* TODO: Refactor as this will break for apps that override the accent color */
-    background: var(--cpd-color-green-300);
-    /* make the icon the accent color too */
+    background: var(--cpd-color-bg-subtle-primary);
     &::before {
-        background-color: $accent !important;
+        background-color: var(--cpd-color-icon-primary) !important;
     }
 }
 

res/css/components/views/polls/_PollOption.pcss

@@ -52,26 +52,26 @@ limitations under the License.
 .mx_PollOption_winnerIcon {
     height: 12px;
     width: 12px;
-    color: $accent;
+    color: var(--cpd-color-icon-accent-tertiary);
     margin-right: $spacing-4;
     vertical-align: middle;
 }
 
 .mx_PollOption_checked {
-    border-color: $accent;
+    border-color: var(--cpd-color-border-interactive-hovered);
 
     .mx_PollOption_popularityBackground {
         .mx_PollOption_popularityAmount {
-            background-color: $accent;
+            background-color: var(--cpd-color-icon-accent-tertiary);
         }
     }
 
     /* override checked radio button styling to show checkmark instead */
     .mx_StyledRadioButton_checked {
-        input[type="radio"] + div {
+        input[type="radio"]:checked + div {
             border-width: 2px;
-            border-color: $accent;
-            background-color: $accent;
+            border-color: var(--cpd-color-icon-accent-tertiary);
+            background-color: var(--cpd-color-icon-accent-tertiary);
             background-image: url("$(res)/img/element-icons/check-white.svg");
             background-size: 12px;
             background-repeat: no-repeat;

res/css/structures/_ContextualMenu.pcss

@@ -30,9 +30,10 @@ limitations under the License.
 }
 
 .mx_ContextualMenu {
-    border-radius: 8px;
-    box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
-    background-color: $menu-bg-color;
+    border-radius: 12px;
+    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
+    background-color: var(--cpd-color-bg-canvas-default);
+    border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
     color: $primary-content;
     position: absolute;
     z-index: 5001;

res/css/structures/_QuickSettingsButton.pcss

@@ -62,7 +62,7 @@ limitations under the License.
         font-weight: var(--cpd-font-weight-semibold);
         font-size: $font-15px;
         line-height: $font-24px;
-        color: $primary-content;
+        color: var(--cpd-color-text-secondary);
         margin: 0 0 16px;
     }
 
@@ -76,7 +76,7 @@ limitations under the License.
         font-size: $font-12px;
         line-height: $font-15px;
         text-transform: uppercase;
-        color: $tertiary-content;
+        color: var(--cpd-color-text-secondary);
         margin: 20px 0 12px;
     }
 
@@ -97,7 +97,7 @@ limitations under the License.
             margin-left: 6px;
             font-size: $font-15px;
             line-height: $font-24px;
-            color: $secondary-content;
+            color: var(--cpd-color-text-primary);
         }
     }
 
@@ -106,7 +106,7 @@ limitations under the License.
         margin-left: 22px;
         font-size: $font-15px;
         line-height: $font-24px;
-        color: $secondary-content;
+        color: var(--cpd-color-text-primary);
         position: relative;
         margin-bottom: 16px;
     }

res/css/structures/_SpaceRoomView.pcss

@@ -46,10 +46,10 @@ limitations under the License.
     }
 
     &:hover {
-        border-color: $accent;
+        border-color: var(--cpd-color-bg-interactive-primary-rest);
 
         &::before {
-            background-color: $accent;
+            background-color: var(--cpd-color-icon-primary);
         }
 
         > span {
@@ -212,7 +212,7 @@ limitations under the License.
                         left: 8px;
                         height: 16px;
                         width: 16px;
-                        background: #fff; /* white icon fill */
+                        background: var(--cpd-color-icon-on-solid-primary);
                         mask-size: 16px;
                         mask-image: url("$(res)/img/element-icons/room/invite.svg");
                     }
@@ -293,11 +293,13 @@ limitations under the License.
             }
 
             .mx_SpaceRoomView_inviteTeammates_inviteDialogButton {
-                color: $accent;
+                color: var(--cpd-color-text-primary);
+                font-weight: var(--cpd-font-weight-semibold);
+                text-decoration: underline;
 
                 &::before {
                     mask-image: url("$(res)/img/element-icons/room/invite.svg");
-                    background-color: $accent;
+                    background-color: var(--cpd-color-icon-primary);
                 }
             }
         }

res/css/structures/_TabbedView.pcss

@@ -43,12 +43,12 @@ limitations under the License.
     }
 
     .mx_TabbedView_tabLabel_active {
-        background-color: $accent;
-        color: $tab-label-active-fg-color;
+        background-color: var(--cpd-color-bg-action-primary-rest);
+        color: var(--cpd-color-text-on-solid-primary);
     }
 
     .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
-        background-color: $tab-label-active-fg-color;
+        background-color: var(--cpd-color-icon-on-solid-primary);
     }
 
     .mx_TabbedView_maskedIcon {

res/css/structures/_ToastContainer.pcss

@@ -36,16 +36,17 @@ limitations under the License.
     .mx_Toast_toast {
         grid-row: 1 / 3;
         grid-column: 1;
-        background-color: $system;
+        background-color: var(--cpd-color-bg-canvas-default);
         color: $primary-content;
-        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
-        border-radius: 8px;
+        box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
+        border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
+        border-radius: 12px;
         overflow: hidden;
         display: grid;
         grid-template-columns: 22px 1fr;
         column-gap: 8px;
         row-gap: 4px;
-        padding: 8px;
+        padding: var(--cpd-space-3x);
 
         &.mx_Toast_hasIcon {
             &::before,

res/css/views/context_menus/_IconizedContextMenu.pcss

@@ -36,26 +36,7 @@ limitations under the License.
         /* the notFirst class is for cases where the optionList might be under a header of sorts. */
         &:nth-child(n + 2),
         .mx_IconizedContextMenu_optionList_notFirst {
-            /* This is a bit of a hack when we could just use a simple border-top property, */
-            /* however we have a (kinda) good reason for doing it this way: we need opacity. */
-            /* To get the right color, we need an opacity modifier which means we have to work */
-            /* around the problem. PostCSS doesn't support the opacity() function, and if we */
-            /* use something like postcss-functions we quickly run into an issue where the */
-            /* function we would define gets passed a CSS variable for custom themes, which */
-            /* can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379 */
-            //
-            /* Therefore, we just hack in a line and border the thing ourselves */
-            &::before {
-                border-top: 1px solid $primary-content;
-                opacity: 0.1;
-                content: "";
-
-                /* Counteract the padding problems (width: 100% ignores the 40px padding, */
-                /* unless we position it absolutely then it does the right thing). */
-                width: 100%;
-                position: absolute;
-                left: 0;
-            }
+            border-top: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
         }
 
         /* round the top corners of the top button for the hover effect to be bounded */
@@ -87,7 +68,7 @@ limitations under the License.
 
             &:hover,
             &:focus-visible {
-                background-color: $menu-selected-color;
+                background-color: var(--cpd-color-bg-action-secondary-hovered);
             }
 
             &.mx_AccessibleButton_disabled {
@@ -137,7 +118,7 @@ limitations under the License.
             mask-position: center;
             mask-size: contain;
             mask-repeat: no-repeat;
-            background-color: $icon-button-color;
+            background-color: var(--cpd-color-icon-primary);
         }
     }
 
@@ -147,7 +128,7 @@ limitations under the License.
         }
 
         .mx_IconizedContextMenu_icon::before {
-            background-color: $alert;
+            background-color: var(--cpd-color-icon-critical-primary);
         }
     }
 
@@ -172,7 +153,7 @@ limitations under the License.
 
     &.mx_IconizedContextMenu_compact {
         .mx_IconizedContextMenu_optionList > * {
-            padding: 8px 16px 8px 11px;
+            padding: 8px 16px 8px 12px;
         }
     }
 

res/css/views/context_menus/_MessageContextMenu.pcss

@@ -29,7 +29,6 @@ limitations under the License.
             mask-position: center;
             mask-size: contain;
             mask-repeat: no-repeat;
-            background: $icon-button-color;
         }
     }