Enable fixed pinecone test

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

.eslintrc-module_system.js

@@ -1,60 +0,0 @@
-module.exports = {
-    plugins: ["matrix-org"],
-    extends: ["./.eslintrc.js"],
-    parserOptions: {
-        project: ["./tsconfig.module_system.json"],
-    },
-    overrides: [
-        {
-            files: ["module_system/**/*.{ts,tsx}"],
-            extends: ["plugin:matrix-org/typescript", "plugin:matrix-org/react"],
-            // NOTE: These rules are frozen and new rules should not be added here.
-            // New changes belong in https://github.com/matrix-org/eslint-plugin-matrix-org/
-            rules: {
-                // Things we do that break the ideal style
-                "prefer-promise-reject-errors": "off",
-                "quotes": "off",
-
-                // We disable this while we're transitioning
-                "@typescript-eslint/no-explicit-any": "off",
-                // We're okay with assertion errors when we ask for them
-                "@typescript-eslint/no-non-null-assertion": "off",
-
-                // Ban matrix-js-sdk/src imports in favour of matrix-js-sdk/src/matrix imports to prevent unleashing hell.
-                "no-restricted-imports": [
-                    "error",
-                    {
-                        paths: [
-                            {
-                                name: "matrix-js-sdk",
-                                message: "Please use matrix-js-sdk/src/matrix instead",
-                            },
-                            {
-                                name: "matrix-js-sdk/",
-                                message: "Please use matrix-js-sdk/src/matrix instead",
-                            },
-                            {
-                                name: "matrix-js-sdk/src",
-                                message: "Please use matrix-js-sdk/src/matrix instead",
-                            },
-                            {
-                                name: "matrix-js-sdk/src/",
-                                message: "Please use matrix-js-sdk/src/matrix instead",
-                            },
-                            {
-                                name: "matrix-js-sdk/src/index",
-                                message: "Please use matrix-js-sdk/src/matrix instead",
-                            },
-                        ],
-                        patterns: [
-                            {
-                                group: ["matrix-js-sdk/lib", "matrix-js-sdk/lib/", "matrix-js-sdk/lib/**"],
-                                message: "Please use matrix-js-sdk/src/* instead",
-                            },
-                        ],
-                    },
-                ],
-            },
-        },
-    ],
-};

.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-    plugins: ["matrix-org"],
+    plugins: ["matrix-org", "eslint-plugin-react-compiler"],
     extends: ["plugin:matrix-org/babel", "plugin:matrix-org/react", "plugin:matrix-org/a11y"],
     parserOptions: {
         project: ["./tsconfig.json"],
@@ -42,6 +42,10 @@ module.exports = {
                 name: "setImmediate",
                 message: "Use setTimeout instead.",
             },
+            {
+                name: "Buffer",
+                message: "Buffer is not available in the web.",
+            },
         ],
 
         "import/no-duplicates": ["error"],
@@ -117,10 +121,6 @@ module.exports = {
                             "!matrix-js-sdk/src/extensible_events_v1/PollResponseEvent",
                             "!matrix-js-sdk/src/extensible_events_v1/PollEndEvent",
                             "!matrix-js-sdk/src/extensible_events_v1/InvalidEventError",
-                            "!matrix-js-sdk/src/crypto",
-                            "!matrix-js-sdk/src/crypto/keybackup",
-                            "!matrix-js-sdk/src/crypto/deviceinfo",
-                            "!matrix-js-sdk/src/crypto/dehydration",
                             "!matrix-js-sdk/src/oidc",
                             "!matrix-js-sdk/src/oidc/discovery",
                             "!matrix-js-sdk/src/oidc/authorize",
@@ -170,6 +170,8 @@ module.exports = {
         "jsx-a11y/role-supports-aria-props": "off",
 
         "matrix-org/require-copyright-header": "error",
+
+        "react-compiler/react-compiler": "error",
     },
     overrides: [
         {
@@ -259,6 +261,10 @@ module.exports = {
                         additionalTestBlockFunctions: ["beforeAll", "beforeEach", "oldBackendOnly"],
                     },
                 ],
+
+                // These are fine in tests
+                "no-restricted-globals": "off",
+                "react-compiler/react-compiler": "off",
             },
         },
         {
@@ -268,6 +274,61 @@ module.exports = {
             },
             rules: {
                 "react-hooks/rules-of-hooks": ["off"],
+                "@typescript-eslint/no-floating-promises": ["error"],
+            },
+        },
+        {
+            files: ["module_system/**/*.{ts,tsx}"],
+            parserOptions: {
+                project: ["./tsconfig.module_system.json"],
+            },
+            extends: ["plugin:matrix-org/typescript", "plugin:matrix-org/react"],
+            // NOTE: These rules are frozen and new rules should not be added here.
+            // New changes belong in https://github.com/matrix-org/eslint-plugin-matrix-org/
+            rules: {
+                // Things we do that break the ideal style
+                "prefer-promise-reject-errors": "off",
+                "quotes": "off",
+
+                // We disable this while we're transitioning
+                "@typescript-eslint/no-explicit-any": "off",
+                // We're okay with assertion errors when we ask for them
+                "@typescript-eslint/no-non-null-assertion": "off",
+
+                // Ban matrix-js-sdk/src imports in favour of matrix-js-sdk/src/matrix imports to prevent unleashing hell.
+                "no-restricted-imports": [
+                    "error",
+                    {
+                        paths: [
+                            {
+                                name: "matrix-js-sdk",
+                                message: "Please use matrix-js-sdk/src/matrix instead",
+                            },
+                            {
+                                name: "matrix-js-sdk/",
+                                message: "Please use matrix-js-sdk/src/matrix instead",
+                            },
+                            {
+                                name: "matrix-js-sdk/src",
+                                message: "Please use matrix-js-sdk/src/matrix instead",
+                            },
+                            {
+                                name: "matrix-js-sdk/src/",
+                                message: "Please use matrix-js-sdk/src/matrix instead",
+                            },
+                            {
+                                name: "matrix-js-sdk/src/index",
+                                message: "Please use matrix-js-sdk/src/matrix instead",
+                            },
+                        ],
+                        patterns: [
+                            {
+                                group: ["matrix-js-sdk/lib", "matrix-js-sdk/lib/", "matrix-js-sdk/lib/**"],
+                                message: "Please use matrix-js-sdk/src/* instead",
+                            },
+                        ],
+                    },
+                ],
             },
         },
     ],

.github/CODEOWNERS

@@ -3,16 +3,21 @@
 /package.json             @element-hq/element-web-team
 /yarn.lock                @element-hq/element-web-team
 
-/src/SecurityManager.ts                           @element-hq/element-crypto-web-reviewers
-/test/SecurityManager-test.ts                     @element-hq/element-crypto-web-reviewers
-/src/async-components/views/dialogs/security/     @element-hq/element-crypto-web-reviewers
-/src/components/views/dialogs/security/           @element-hq/element-crypto-web-reviewers
-/test/components/views/dialogs/security/          @element-hq/element-crypto-web-reviewers
-/src/stores/SetupEncryptionStore.ts               @element-hq/element-crypto-web-reviewers
-/test/stores/SetupEncryptionStore-test.ts         @element-hq/element-crypto-web-reviewers
+/src/SecurityManager.ts                                                 @element-hq/element-crypto-web-reviewers
+/test/SecurityManager-test.ts                                           @element-hq/element-crypto-web-reviewers
+/src/async-components/views/dialogs/security/                           @element-hq/element-crypto-web-reviewers
+/src/components/views/dialogs/security/                                 @element-hq/element-crypto-web-reviewers
+/test/components/views/dialogs/security/                                @element-hq/element-crypto-web-reviewers
+/src/stores/SetupEncryptionStore.ts                                     @element-hq/element-crypto-web-reviewers
+/test/stores/SetupEncryptionStore-test.ts                               @element-hq/element-crypto-web-reviewers
+/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx   @element-hq/element-crypto-web-reviewers
+/src/src/components/views/settings/encryption/                          @element-hq/element-crypto-web-reviewers
+/test/unit-tests/components/views/settings/encryption/                  @element-hq/element-crypto-web-reviewers
+/playwright/e2e/settings/encryption-user-tab/                            @element-hq/element-crypto-web-reviewers
 
 # Ignore translations as those will be updated by GHA for Localazy download
 /src/i18n/strings
+/src/i18n/strings/en_EN.json  @element-hq/element-web-reviewers
 # Ignore the synapse plugin as this is updated by GHA for docker image updating
-/playwright/plugins/homeserver/synapse/index.ts
+/playwright/testcontainers/synapse.ts
 

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,7 +2,7 @@
 
 ## Checklist
 
--   [ ] Tests written for new code (and old code if feasible).
--   [ ] New or updated `public`/`exported` symbols have accurate [TSDoc](https://tsdoc.org/) documentation.
--   [ ] Linter and other CI checks pass.
--   [ ] I have licensed the changes to Element by completing the [Contributor License Agreement (CLA)](https://cla-assistant.io/element-hq/element-web)
+- [ ] Tests written for new code (and old code if feasible).
+- [ ] New or updated `public`/`exported` symbols have accurate [TSDoc](https://tsdoc.org/) documentation.
+- [ ] Linter and other CI checks pass.
+- [ ] I have licensed the changes to Element by completing the [Contributor License Agreement (CLA)](https://cla-assistant.io/element-hq/element-web)

.github/actions/download-verify-element-tarball/action.yml

@@ -0,0 +1,38 @@
+name: Upload release assets
+description: Uploads assets to an existing release and optionally signs them
+inputs:
+    tag:
+        description: GitHub release tag to fetch assets from.
+        required: true
+    out-file-path:
+        description: Path to where the webapp should be extracted to.
+        required: true
+runs:
+    using: composite
+    steps:
+        - name: Download release tarball
+          uses: robinraju/release-downloader@a96f54c1b5f5e09e47d9504526e96febd949d4c2 # v1
+          with:
+              tag: ${{ inputs.tag }}
+              fileName: element-*.tar.gz*
+              out-file-path: ${{ runner.temp }}/download-verify-element-tarball
+
+        - name: Verify tarball
+          shell: bash
+          run: gpg --verify element-*.tar.gz.asc element-*.tar.gz
+          working-directory: ${{ runner.temp }}/download-verify-element-tarball
+
+        - name: Extract tarball
+          shell: bash
+          run: |
+              mkdir webapp
+              tar xvzf element-*.tar.gz -C webapp --strip-components=1
+          working-directory: ${{ runner.temp }}/download-verify-element-tarball
+
+        - name: Move webapp to out-file-path
+          shell: bash
+          run: mv ${{ runner.temp }}/download-verify-element-tarball/webapp ${{ inputs.out-file-path }}
+
+        - name: Clean up temp directory
+          shell: bash
+          run: rm -R ${{ runner.temp }}/download-verify-element-tarball

.github/labels.yml

@@ -210,6 +210,9 @@
 - name: "X-Upcoming-Release-Blocker"
   description: "This does not affect the current release cycle but will affect the next one"
   color: "e99695"
+- name: "X-Run-All-Tests"
+  description: "When applied to PRs, it'll run the full gamut of end-to-end tests on the PR"
+  color: "ff7979"
 - name: "Z-Actions"
   color: "ededed"
 - name: "Z-Cache-Confusion"
@@ -232,6 +235,18 @@
 - name: "Z-Flaky-Test"
   description: "A test is raising false alarms"
   color: "ededed"
+- name: "Z-Flaky-Test-Chrome"
+  description: "Flaky playwright test in Chrome"
+  color: "ededed"
+- name: "Z-Flaky-Test-Firefox"
+  description: "Flaky playwright test in Firefox"
+  color: "ededed"
+- name: "Z-Flaky-Test-Webkit"
+  description: "Flaky playwright test in Webkit"
+  color: "ededed"
+- name: "Z-Flaky-Jest-Test"
+  description: "A Jest test is raising false alarms"
+  color: "ededed"
 - name: "Z-FOSDEM"
   description: "Issues in chat.fosdem.org"
   color: "ededed"

.github/workflows/backport.yml

@@ -7,6 +7,8 @@ on:
         branches:
             - develop
 
+permissions: {} # We use ELEMENT_BOT_TOKEN instead
+
 jobs:
     backport:
         name: Backport

.github/workflows/build.yml

@@ -5,11 +5,15 @@ on:
         branches: [develop, master]
     merge_group:
         types: [checks_requested]
+concurrency:
+    group: ${{ github.workflow }}-${{ github.head_ref || github.sha }}
+    cancel-in-progress: ${{ github.event_name == 'pull_request' }}
 # develop pushes and repository_dispatch handled in build_develop.yaml
 env:
     # These must be set for fetchdep.sh to get the right branch
     REPOSITORY: ${{ github.repository }}
     PR_NUMBER: ${{ github.event.pull_request.number }}
+permissions: {} # No permissions required
 jobs:
     build:
         name: "Build on ${{ matrix.image }}"
@@ -23,10 +27,17 @@ jobs:
                     - macos-14
                 isDevelop:
                     - ${{ github.event_name == 'push' && github.ref_name == 'develop' }}
+                isPullRequest:
+                    - ${{ github.event_name == 'pull_request' }}
                 # Skip the ubuntu-24.04 build for the develop branch as the dedicated CD build_develop workflow handles that
+                # Skip the non-linux builds for pull requests as Windows is awfully slow, so run in merge queue only
                 exclude:
                     - isDevelop: true
                       image: ubuntu-24.04
+                    - isPullRequest: true
+                      image: windows-2022
+                    - isPullRequest: true
+                      image: macos-14
         runs-on: ${{ matrix.image }}
         defaults:
             run:
@@ -36,14 +47,38 @@ jobs:
 
             - uses: actions/setup-node@v4
               with:
-                  cache: "yarn"
+                  # Disable cache on Windows as it is slower than not caching
+                  # https://github.com/actions/setup-node/issues/975
+                  cache: ${{ runner.os != 'Windows' && 'yarn' || '' }}
                   node-version: "lts/*"
 
             # Workaround for yarn install timeouts, especially on Windows
             - run: yarn config set network-timeout 300000
 
-            - name: Install Dependencies
-              run: "./scripts/layered.sh"
+            - name: Fetch layered build
+              id: layered_build
+              env:
+                  # tell layered.sh to check out the right sha of the JS-SDK & EW, if they were given one
+                  JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
+              run: |
+                  scripts/layered.sh
+                  JSSDK_SHA=$(git -C matrix-js-sdk rev-parse --short=12 HEAD)
+                  VECTOR_SHA=$(git rev-parse --short=12 HEAD)
+                  echo "VERSION=$VECTOR_SHA--js-$JSSDK_SHA" >> $GITHUB_OUTPUT
+
+            - name: Copy config
+              run: cp element.io/develop/config.json config.json
 
             - name: Build
-              run: "yarn build"
+              env:
+                  CI_PACKAGE: true
+                  VERSION: "${{ steps.layered_build.outputs.VERSION }}"
+              run: |
+                  yarn build
+
+            - name: Upload Artifact
+              uses: actions/upload-artifact@v4
+              with:
+                  name: webapp-${{ matrix.image }}
+                  path: webapp
+                  retention-days: 1

.github/workflows/build_debian.yaml

@@ -3,6 +3,7 @@ on:
     release:
         types: [published]
 concurrency: ${{ github.workflow }}
+permissions: {} # We use ELEMENT_BOT_TOKEN instead
 jobs:
     build:
         name: Build package

.github/workflows/build_develop.yml

@@ -9,6 +9,7 @@ on:
 concurrency:
     group: ${{ github.repository_owner }}-${{ github.workflow }}-${{ github.ref_name }}
     cancel-in-progress: true
+permissions: {}
 jobs:
     build:
         name: "Build & Deploy develop.element.io"
@@ -16,6 +17,10 @@ jobs:
         if: github.repository == 'element-hq/element-web'
         runs-on: ubuntu-24.04
         environment: develop
+        permissions:
+            checks: read
+            pages: write
+            deployments: write
         env:
             R2_BUCKET: "element-web-develop"
             R2_URL: ${{ vars.CF_R2_S3_API }}

.github/workflows/deploy.yml

@@ -0,0 +1,98 @@
+# Manual deploy workflow for deploying to app.element.io & staging.element.io
+# Runs automatically for staging.element.io when an RC or Release is published
+# Note: Does *NOT* run automatically for app.element.io so that it gets tested on staging.element.io beforehand
+name: Deploy release
+run-name: Deploy ${{ github.ref_name }} to ${{ inputs.site || 'staging.element.io' }}
+on:
+    release:
+        types: [published]
+    workflow_dispatch:
+        inputs:
+            site:
+                description: Which site to deploy to
+                required: true
+                default: staging.element.io
+                type: choice
+                options:
+                    - staging.element.io
+                    - app.element.io
+            skip-checks:
+                description: Skip CI on the tagged commit
+                required: true
+                default: false
+                type: boolean
+concurrency: ${{ inputs.site || 'staging.element.io' }}
+permissions: {}
+jobs:
+    deploy:
+        name: "Deploy to Cloudflare Pages"
+        runs-on: ubuntu-24.04
+        environment: ${{ inputs.site || 'staging.element.io' }}
+        permissions:
+            checks: read
+            deployments: write
+        env:
+            SITE: ${{ inputs.site || 'staging.element.io' }}
+        steps:
+            - uses: actions/checkout@v4
+
+            - name: Load GPG key
+              run: |
+                  curl https://packages.element.io/element-release-key.gpg | gpg --import
+                  gpg -k "$GPG_FINGERPRINT"
+              env:
+                  GPG_FINGERPRINT: ${{ vars.GPG_FINGERPRINT }}
+
+            - name: Check current version on deployment
+              id: current_version
+              run: |
+                  version=$(curl -s https://$SITE/version)
+                  echo "version=${version#v}" >> $GITHUB_OUTPUT
+
+            # The current version bundle melding dance is skipped if the version we're deploying is the same
+            # as then we're just doing a re-deploy of the same version with potentially different configs.
+            - name: Download current version for its old bundles
+              id: current_download
+              if: steps.current_version.outputs.version != github.ref_name
+              uses: ./.github/actions/download-verify-element-tarball
+              with:
+                  tag: v${{ steps.current_version.outputs.version }}
+                  out-file-path: _current_version
+
+            - name: Download target version
+              uses: ./.github/actions/download-verify-element-tarball
+              with:
+                  tag: ${{ github.ref_name }}
+                  out-file-path: _deploy
+
+            - name: Merge current bundles into target
+              if: steps.current_download.outcome == 'success'
+              run: cp -vnpr _current_version/bundles/* _deploy/bundles/
+
+            - name: Copy config
+              run: cp element.io/app/config.json _deploy/config.json
+
+            - name: Populate 404.html
+              run: echo "404 Not Found" > _deploy/404.html
+
+            - name: Populate _headers
+              run: cp .github/cfp_headers _deploy/_headers
+
+            - name: Wait for other steps to succeed
+              uses: t3chguy/wait-on-check-action@18541021811b56544d90e0f073401c2b99e249d6 # fork
+              if: inputs.skip-checks != true
+              with:
+                  ref: ${{ github.sha }}
+                  running-workflow-name: "Deploy to Cloudflare Pages"
+                  repo-token: ${{ secrets.GITHUB_TOKEN }}
+                  wait-interval: 10
+                  check-regexp: ^((?!SonarCloud|SonarQube|issue|board|label|Release|prepare|GitHub Pages).)*$
+
+            - name: Deploy to Cloudflare Pages
+              uses: cloudflare/pages-action@f0a1cd58cd66095dee69bfa18fa5efd1dde93bca # v1
+              with:
+                  apiToken: ${{ secrets.CF_PAGES_TOKEN }}
+                  accountId: ${{ secrets.CF_PAGES_ACCOUNT_ID }}
+                  projectName: ${{ env.SITE == 'staging.element.io' && 'element-web-staging' || 'element-web' }}
+                  directory: _deploy
+                  gitHubToken: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/dockerhub.yaml

@@ -7,27 +7,27 @@ on:
         # This job can take a while, and we have usage limits, so just publish develop only twice a day
         - cron: "0 7/12 * * *"
 concurrency: ${{ github.workflow }}-${{ github.ref_name }}
-
-permissions:
-    id-token: write # needed for signing the images with GitHub OIDC Token
+permissions: {}
 jobs:
     buildx:
         name: Docker Buildx
         runs-on: ubuntu-24.04
         environment: dockerhub
+        permissions:
+            id-token: write # needed for signing the images with GitHub OIDC Token
         steps:
             - uses: actions/checkout@v4
               with:
                   fetch-depth: 0 # needed for docker-package to be able to calculate the version
 
             - name: Install Cosign
-              uses: sigstore/cosign-installer@4959ce089c160fddf62f7b42464195ba1a56d382 # v3
+              uses: sigstore/cosign-installer@dc72c7d5c4d10cd6bcb8cf6e3fd625a9e5e537da # v3
 
             - name: Set up QEMU
-              uses: docker/setup-qemu-action@49b3bc8e6bdd4a60e6116a5414239cba5943d3cf # v3
+              uses: docker/setup-qemu-action@53851d14592bedcffcf25ea515637cff71ef929a # v3
 
             - name: Set up Docker Buildx
-              uses: docker/setup-buildx-action@988b5a0280414f521da01fcc63a27aeeb4b104db # v3
+              uses: docker/setup-buildx-action@6524bf65af31da8d45b59e8c27de4bd072b392f5 # v3
               with:
                   install: true
 
@@ -39,7 +39,7 @@ jobs:
 
             - name: Docker meta
               id: meta
-              uses: docker/metadata-action@8e5442c4ef9f78752691e2d8f8d19755c6f78e81 # v5
+              uses: docker/metadata-action@369eb591f429131d6889c46b94e711f089e6ca96 # v5
               with:
                   images: |
                       vectorim/element-web
@@ -51,7 +51,7 @@ jobs:
 
             - name: Build and push
               id: build-and-push
-              uses: docker/build-push-action@4f58ea79222b3b9dc2c8bbdd6debcef730109a75 # v6
+              uses: docker/build-push-action@b32b51a8eda65d6793cd0494a773d4f6bcef32dc # v6
               with:
                   context: .
                   push: true

.github/workflows/docs.yml

@@ -5,10 +5,7 @@ on:
         branches: [develop]
     workflow_dispatch: {}
 
-permissions:
-    contents: read
-    pages: write
-    id-token: write
+permissions: {}
 
 concurrency:
     group: "pages"
@@ -100,6 +97,9 @@ jobs:
             name: github-pages
             url: ${{ steps.deployment.outputs.page_url }}
         runs-on: ubuntu-24.04
+        permissions:
+            pages: write
+            id-token: write
         needs: build
         steps:
             - name: Deploy to GitHub Pages

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

@@ -11,20 +11,23 @@ concurrency:
     group: ${{ github.workflow }}-${{ github.event.workflow_run.head_branch || github.run_id }}
     cancel-in-progress: ${{ github.event.workflow_run.event == 'pull_request' }}
 
+permissions: {}
+
 jobs:
     report:
         if: github.event.workflow_run.conclusion != 'cancelled'
         name: Report results
-        runs-on: ubuntu-22.04
+        runs-on: ubuntu-24.04
         environment: Netlify
         permissions:
             statuses: write
             deployments: write
+            actions: read
         steps:
             - name: Download HTML report
               uses: actions/download-artifact@v4
               with:
-                  github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
+                  github-token: ${{ secrets.GITHUB_TOKEN }}
                   run-id: ${{ github.event.workflow_run.id }}
                   name: html-report
                   path: playwright-report

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

@@ -3,6 +3,9 @@
 # as an artifact and run end-to-end tests.
 name: End to End Tests
 on:
+    # CRON to run all Projects at 6am UTC
+    schedule:
+        - cron: "0 6 * * *"
     pull_request: {}
     merge_group:
         types: [checks_requested]
@@ -32,12 +35,19 @@ concurrency:
 env:
     # fetchdep.sh needs to know our PR number
     PR_NUMBER: ${{ github.event.pull_request.number }}
+    # Use 6 runners in the default case, but 4 when running on a schedule where we run all 5 projects (20 runners total)
+    NUM_RUNNERS: ${{ github.event_name == 'schedule' && 4 || 6 }}
+
+permissions: {} # No permissions required
 
 jobs:
     build:
         name: "Build Element-Web"
-        runs-on: ubuntu-22.04
+        runs-on: ubuntu-24.04
         if: inputs.skip != true
+        outputs:
+            num-runners: ${{ env.NUM_RUNNERS }}
+            runners-matrix: ${{ steps.runner-vars.outputs.matrix }}
         steps:
             - name: Checkout code
               uses: actions/checkout@v4
@@ -69,7 +79,6 @@ jobs:
                   VERSION: "${{ steps.layered_build.outputs.VERSION }}"
               run: |
                   yarn build
-                  echo $VERSION > webapp/version
 
             - name: Upload Artifact
               uses: actions/upload-artifact@v4
@@ -78,11 +87,20 @@ jobs:
                   path: webapp
                   retention-days: 1
 
+            - name: Calculate runner variables
+              id: runner-vars
+              uses: actions/github-script@v7
+              with:
+                  script: |
+                      const numRunners = parseInt(process.env.NUM_RUNNERS, 10);
+                      const matrix = Array.from({ length: numRunners }, (_, i) => i + 1);
+                      core.setOutput("matrix", JSON.stringify(matrix));
+
     playwright:
-        name: "Run Tests ${{ matrix.runner }}/${{ strategy.job-total }}"
+        name: "Run Tests [${{ matrix.project }}] ${{ matrix.runner }}/${{ needs.build.outputs.num-runners }}"
         needs: build
         if: inputs.skip != true
-        runs-on: ubuntu-22.04
+        runs-on: ubuntu-24.04
         permissions:
             actions: read
             issues: read
@@ -91,7 +109,25 @@ jobs:
             fail-fast: false
             matrix:
                 # Run multiple instances in parallel to speed up the tests
-                runner: [1, 2, 3, 4, 5, 6]
+                runner: ${{ fromJSON(needs.build.outputs.runners-matrix) }}
+                project:
+                    - Chrome
+                    - Firefox
+                    - WebKit
+                    - Dendrite
+                    - Pinecone
+                runAllTests:
+                    - ${{ github.event_name == 'schedule' || contains(github.event.pull_request.labels.*.name, 'X-Run-All-Tests') }}
+                # Skip the Firefox & Safari runs unless this was a cron trigger or PR has X-Run-All-Tests label
+                exclude:
+                    - runAllTests: false
+                      project: Firefox
+                    - runAllTests: false
+                      project: WebKit
+                    - runAllTests: false
+                      project: Dendrite
+                    - runAllTests: false
+                      project: Pinecone
         steps:
             - uses: actions/checkout@v4
               with:
@@ -127,16 +163,26 @@ jobs:
 
             - name: Install Playwright browsers
               if: steps.playwright-cache.outputs.cache-hit != 'true'
-              run: yarn playwright install --with-deps
+              run: yarn playwright install --with-deps --no-shell
 
+            - name: Install system dependencies for WebKit
+              # Some WebKit dependencies seem to lay outside the cache and will need to be installed separately
+              if: matrix.project == 'WebKit' && steps.playwright-cache.outputs.cache-hit == 'true'
+              run: yarn playwright install-deps webkit
+
+            # We skip tests tagged with @mergequeue when running on PRs, but run them in MQ and everywhere else
             - name: Run Playwright tests
-              run: yarn playwright test --shard ${{ matrix.runner }}/${{ strategy.job-total }}
+              run: |
+                  yarn playwright test \
+                      --shard "${{ matrix.runner }}/${{ needs.build.outputs.num-runners }}" \
+                      --project="${{ matrix.project }}" \
+                      ${{ (github.event_name == 'pull_request' && matrix.runAllTests == false ) && '--grep-invert @mergequeue' || '' }}
 
             - name: Upload blob report to GitHub Actions Artifacts
               if: always()
               uses: actions/upload-artifact@v4
               with:
-                  name: all-blob-reports-${{ matrix.runner }}
+                  name: all-blob-reports-${{ matrix.project }}-${{ matrix.runner }}
                   path: blob-report
                   retention-days: 1
 
@@ -144,7 +190,7 @@ jobs:
         name: end-to-end-tests
         needs: playwright
         if: always()
-        runs-on: ubuntu-22.04
+        runs-on: ubuntu-24.04
         steps:
             - uses: actions/checkout@v4
               if: inputs.skip != true

.github/workflows/issue_closed.yml

@@ -4,6 +4,7 @@
 on:
     issues:
         types: [closed]
+permissions: {} # We use ELEMENT_BOT_TOKEN instead
 jobs:
     tidy:
         name: Tidy closed issues

.github/workflows/localazy_download.yaml

@@ -3,6 +3,8 @@ on:
     workflow_dispatch: {}
     schedule:
         - cron: "0 6 * * 1,3,5" # Every Monday, Wednesday and Friday at 6am UTC
+permissions:
+    pull-requests: write # needed to auto-approve PRs
 jobs:
     download:
         uses: matrix-org/matrix-web-i18n/.github/workflows/localazy_download.yaml@main

.github/workflows/localazy_upload.yaml

@@ -4,6 +4,7 @@ on:
         branches: [develop]
         paths:
             - "src/i18n/strings/en_EN.json"
+permissions: {} # No permissions needed
 jobs:
     upload:
         uses: matrix-org/matrix-web-i18n/.github/workflows/localazy_upload.yaml@main

.github/workflows/netlify.yaml

@@ -3,14 +3,17 @@
 name: Upload Preview Build to Netlify
 on:
     workflow_run:
-        workflows: ["End to End Tests"]
+        workflows: ["Build"]
         types:
             - completed
 jobs:
     deploy:
         if: github.event.workflow_run.conclusion != 'cancelled' && github.event.workflow_run.event == 'pull_request'
-        runs-on: ubuntu-22.04
+        runs-on: ubuntu-24.04
         environment: Netlify
+        permissions:
+            actions: read
+            deployments: write
         steps:
             - name: 📝 Create Deployment
               uses: bobheadxi/deployments@648679e8e4915b27893bd7dbc35cb504dc915bc8 # v1
@@ -27,9 +30,9 @@ jobs:
             - name: 📥 Download artifact
               uses: actions/download-artifact@v4
               with:
-                  github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
+                  github-token: ${{ secrets.GITHUB_TOKEN }}
                   run-id: ${{ github.event.workflow_run.id }}
-                  name: webapp
+                  name: webapp-ubuntu-24.04
                   path: webapp
 
             - name: 📤 Deploy to Netlify

.github/workflows/pending-reviews.yaml

@@ -6,6 +6,7 @@ on:
     #schedule:
     #    - cron: "*/10 * * * *"
 concurrency: ${{ github.workflow }}
+permissions: {} # We use ELEMENT_BOT_TOKEN instead
 jobs:
     bot:
         name: Pending reviews bot

.github/workflows/playwright-image-updates.yaml

@@ -3,9 +3,12 @@ on:
     workflow_dispatch: {}
     schedule:
         - cron: "0 6 * * *" # Every day at 6am UTC
+permissions: {}
 jobs:
     update:
-        runs-on: ubuntu-22.04
+        runs-on: ubuntu-24.04
+        permissions:
+            pull-requests: write
         steps:
             - uses: actions/checkout@v4
 
@@ -14,13 +17,13 @@ jobs:
                   docker pull "$IMAGE"
                   INSPECT=$(docker inspect --format='{{index .RepoDigests 0}}' "$IMAGE")
                   DIGEST=${INSPECT#*@}
-                  sed -i "s/const DOCKER_TAG.*/const DOCKER_TAG = \"develop@$DIGEST\";/" playwright/plugins/homeserver/synapse/index.ts
+                  sed -i "s/const TAG.*/const TAG = \"develop@$DIGEST\";/" playwright/testcontainers/synapse.ts
               env:
                   IMAGE: ghcr.io/element-hq/synapse:develop
 
             - name: Create Pull Request
               id: cpr
-              uses: peter-evans/create-pull-request@5e914681df9dc83aa4e4905692ca88beb2f9e91f # v7
+              uses: peter-evans/create-pull-request@67ccf781d68cd99b580ae25a5c18a1cc84ffff1f # v7
               with:
                   token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   branch: actions/playwright-image-updates

.github/workflows/pull_request.yaml

@@ -4,8 +4,11 @@ on:
         types: [opened, edited, labeled, unlabeled, synchronize]
     merge_group:
         types: [checks_requested]
+permissions: {}
 jobs:
     action:
         uses: matrix-org/matrix-js-sdk/.github/workflows/pull_request.yaml@develop
+        permissions:
+            pull-requests: write
         secrets:
             ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}

.github/workflows/pull_request_base_branch.yaml

@@ -2,10 +2,11 @@ name: Pull Request Base Branch
 on:
     pull_request:
         types: [opened, edited, synchronize]
+permissions: {} # No permissions required
 jobs:
     check_base_branch:
         name: Check PR base branch
-        runs-on: ubuntu-22.04
+        runs-on: ubuntu-24.04
         steps:
             - uses: actions/github-script@v7
               with:

.github/workflows/release-drafter.yml

@@ -4,6 +4,9 @@ on:
         branches: [staging]
     workflow_dispatch: {}
 concurrency: ${{ github.workflow }}
+permissions: {}
 jobs:
     draft:
+        permissions:
+            contents: write
         uses: matrix-org/matrix-js-sdk/.github/workflows/release-drafter-workflow.yml@develop

.github/workflows/release-gitflow.yml

@@ -4,6 +4,7 @@ on:
     push:
         branches: [master]
 concurrency: ${{ github.repository }}-${{ github.workflow }}
+permissions: {} # We use ELEMENT_BOT_TOKEN instead
 jobs:
     merge:
         uses: matrix-org/matrix-js-sdk/.github/workflows/release-gitflow.yml@develop

.github/workflows/release.yml

@@ -11,9 +11,14 @@ on:
                     - rc
                     - final
 concurrency: ${{ github.workflow }}
+permissions: {}
 jobs:
     release:
         uses: matrix-org/matrix-js-sdk/.github/workflows/release-make.yml@develop
+        permissions:
+            contents: write
+            issues: write
+            pull-requests: read
         secrets:
             ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
             GPG_PRIVATE_KEY: ${{ secrets.GPG_PRIVATE_KEY }}
@@ -42,6 +47,8 @@ jobs:
         name: Post release checks
         needs: release
         runs-on: ubuntu-24.04
+        permissions:
+            checks: read
         steps:
             - name: Wait for dockerhub
               uses: t3chguy/wait-on-check-action@18541021811b56544d90e0f073401c2b99e249d6 # fork

.github/workflows/release_prepare.yml

@@ -17,9 +17,25 @@ on:
                 required: true
                 type: boolean
                 default: true
+permissions: {} # Uses ELEMENT_BOT_TOKEN instead
 jobs:
+    checks:
+        name: Sanity checks
+        strategy:
+            matrix:
+                repo:
+                    - matrix-org/matrix-js-sdk
+                    - element-hq/element-web
+                    - element-hq/element-desktop
+        uses: matrix-org/matrix-js-sdk/.github/workflows/release-checks.yml@develop
+        secrets:
+            ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
+        with:
+            repository: ${{ matrix.repo }}
+
     prepare:
         runs-on: ubuntu-24.04
+        needs: checks
         env:
             # The order is specified bottom-up to avoid any races for allchange
             REPOS: matrix-js-sdk element-web element-desktop

.github/workflows/sonarqube.yml

@@ -7,11 +7,16 @@ on:
 concurrency:
     group: ${{ github.workflow }}-${{ github.event.workflow_run.head_branch }}
     cancel-in-progress: true
+permissions: {}
 jobs:
     sonarqube:
         name: 🩻 SonarQube
         if: github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.event != 'merge_group'
         uses: matrix-org/matrix-js-sdk/.github/workflows/sonarcloud.yml@develop
+        permissions:
+            actions: read
+            statuses: write
+            id-token: write # sonar
         secrets:
             SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
             ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}

.github/workflows/static_analysis.yaml

@@ -16,6 +16,8 @@ env:
     REPOSITORY: ${{ github.repository }}
     PR_NUMBER: ${{ github.event.pull_request.number }}
 
+permissions: {} # No permissions required
+
 jobs:
     ts_lint:
         name: "Typescript Syntax Check"
@@ -37,6 +39,8 @@ jobs:
     i18n_lint:
         name: "i18n Check"
         uses: matrix-org/matrix-web-i18n/.github/workflows/i18n_check.yml@main
+        permissions:
+            pull-requests: read
         with:
             hardcoded-words: "Element"
             allowed-hardcoded-keys: |
@@ -50,7 +54,7 @@ jobs:
 
     rethemendex_lint:
         name: "Rethemendex Check"
-        runs-on: ubuntu-22.04
+        runs-on: ubuntu-24.04
         steps:
             - uses: actions/checkout@v4
 
@@ -124,7 +128,7 @@ jobs:
                   node-version: "lts/*"
 
             - name: Install Deps
-              run: "scripts/layered.sh"
+              run: "yarn install --frozen-lockfile"
 
-            - name: Dead Code Analysis
-              run: "yarn run analyse:unused-exports"
+            - name: Run linter
+              run: "yarn run lint:knip"

.github/workflows/sync-labels.yml

@@ -8,6 +8,9 @@ on:
             - develop
         paths:
             - .github/labels.yml
+
+permissions: {} # We use ELEMENT_BOT_TOKEN instead
+
 jobs:
     sync-labels:
         uses: element-hq/element-meta/.github/workflows/sync-labels.yml@develop

.github/workflows/tests.yml

@@ -26,10 +26,12 @@ env:
     # fetchdep.sh needs to know our PR number
     PR_NUMBER: ${{ github.event.pull_request.number }}
 
+permissions: {}
+
 jobs:
     jest:
         name: Jest
-        runs-on: ubuntu-22.04
+        runs-on: ubuntu-24.04
         strategy:
             fail-fast: false
             matrix:
@@ -93,14 +95,16 @@ jobs:
         name: jest-tests
         needs: jest
         if: always()
-        runs-on: ubuntu-22.04
+        runs-on: ubuntu-24.04
+        permissions:
+            statuses: write
         steps:
             - if: needs.jest.result != 'skipped' && needs.jest.result != 'success'
               run: exit 1
 
             - name: Skip SonarCloud in merge queue
               if: github.event_name == 'merge_group' || inputs.disable_coverage == 'true'
-              uses: Sibz/github-status-action@faaa4d96fecf273bd762985e0e7f9f933c774918 # v1
+              uses: guibranco/github-status-action-v2@56cd38caf0615dd03f49d42ed301f1469911ac61
               with:
                   authToken: ${{ secrets.GITHUB_TOKEN }}
                   state: success

.github/workflows/triage-assigned.yml

@@ -4,6 +4,8 @@ on:
     issues:
         types: [assigned]
 
+permissions: {} # We use ELEMENT_BOT_TOKEN instead
+
 jobs:
     web-app-team:
         runs-on: ubuntu-24.04

.github/workflows/triage-incoming.yml

@@ -4,6 +4,8 @@ on:
     issues:
         types: [opened]
 
+permissions: {} # We use ELEMENT_BOT_TOKEN instead
+
 jobs:
     automate-project-columns:
         runs-on: ubuntu-24.04

.github/workflows/triage-labelled.yml

@@ -8,6 +8,8 @@ on:
             ELEMENT_BOT_TOKEN:
                 required: true
 
+permissions: {} # We use ELEMENT_BOT_TOKEN instead
+
 jobs:
     apply_Z-Labs_label:
         name: Add Z-Labs label for features behind labs flags

.github/workflows/triage-move-review-requests.yml

@@ -3,6 +3,7 @@ on:
     pull_request_target:
         types: [review_requested]
 
+permissions: {} # Uses ELEMENT_BOT_TOKEN instead
 jobs:
     add_design_pr_to_project:
         name: Move PRs asking for design review to the design board

.github/workflows/triage-stale-flaky-tests.yml

@@ -1,7 +1,9 @@
 name: Close stale flaky issues
 on:
+    workflow_dispatch: {}
     schedule:
         - cron: "30 1 * * *"
+permissions: {}
 jobs:
     close:
         runs-on: ubuntu-24.04
@@ -16,3 +18,4 @@ jobs:
                   days-before-close: 0
                   close-issue-message: "This flaky test issue has not been updated in 14 days. It is being closed as presumed resolved."
                   exempt-issue-labels: "Z-Flaky-Test-Disabled"
+                  operations-per-run: 100

.github/workflows/triage-unlabelled.yml

@@ -3,11 +3,13 @@ name: Move unlabelled from needs info columns to triaged
 on:
     issues:
         types: [unlabeled]
-
+permissions: {}
 jobs:
     Move_Unabeled_Issue_On_Project_Board:
         name: Move no longer X-Needs-Info issues to Triaged
         runs-on: ubuntu-24.04
+        permissions:
+            repository-projects: read
         if: >
             ${{
             !contains(github.event.issue.labels.*.name, 'X-Needs-Info') }}

.github/workflows/update-jitsi.yml

@@ -4,6 +4,7 @@ on:
     workflow_dispatch: {}
     schedule:
         - cron: "0 3 * * 0" # 3am every Sunday
+permissions: {} # We use ELEMENT_BOT_TOKEN instead
 jobs:
     update:
         runs-on: ubuntu-24.04
@@ -22,7 +23,7 @@ jobs:
               run: "yarn update:jitsi"
 
             - name: Create Pull Request
-              uses: peter-evans/create-pull-request@5e914681df9dc83aa4e4905692ca88beb2f9e91f # v7
+              uses: peter-evans/create-pull-request@67ccf781d68cd99b580ae25a5c18a1cc84ffff1f # v7
               with:
                   token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   branch: actions/jitsi-update

.github/workflows/update-topics.yaml

@@ -15,6 +15,7 @@ on:
                 required: true
                 type: string
 concurrency: ${{ github.workflow }}
+permissions: {} # No permissions required
 jobs:
     bot:
         name: Release topic update

.lintstagedrc

@@ -2,6 +2,6 @@
     "*": "prettier --write",
     "src/**/*.(ts|tsx)": ["eslint --fix"],
     "scripts/**/*.(ts|tsx)": ["eslint --fix"],
-    "module_system/**/*.(ts|tsx)": ["eslint --fix --config .eslintrc-module_system.js module_system"],
+    "module_system/**/*.(ts|tsx)": ["eslint --fix"],
     "*.pcss": ["stylelint --fix"]
 }

.stylelintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
     extends: ["stylelint-config-standard"],
-    customSyntax: require("postcss-scss"),
-    plugins: ["stylelint-scss"],
+    customSyntax: "postcss-scss",
+    plugins: ["stylelint-scss", "stylelint-value-no-unknown-custom-properties"],
     rules: {
         "comment-empty-line-before": null,
         "declaration-empty-line-before": null,
@@ -46,5 +46,33 @@ module.exports = {
         "number-max-precision": null,
         "no-invalid-double-slash-comments": true,
         "media-feature-range-notation": null,
+        "csstools/value-no-unknown-custom-properties": [
+            true,
+            {
+                importFrom: [
+                    { from: "res/css/_common.pcss", type: "css" },
+                    { from: "res/themes/light/css/_light.pcss", type: "css" },
+                    // Right now our styles share vars all over the place, this is not ideal but acceptable for now
+                    { from: "res/css/views/rooms/_EventTile.pcss", type: "css" },
+                    { from: "res/css/views/rooms/_IRCLayout.pcss", type: "css" },
+                    { from: "res/css/views/rooms/_EventBubbleTile.pcss", type: "css" },
+                    { from: "res/css/views/rooms/_ReadReceiptGroup.pcss", type: "css" },
+                    { from: "res/css/views/rooms/_EditMessageComposer.pcss", type: "css" },
+                    { from: "res/css/views/right_panel/_BaseCard.pcss", type: "css" },
+                    { from: "res/css/views/messages/_MessageTimestamp.pcss", type: "css" },
+                    { from: "res/css/views/messages/_EventTileBubble.pcss", type: "css" },
+                    { from: "res/css/views/messages/_MessageActionBar.pcss", type: "css" },
+                    { from: "res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss", type: "css" },
+                    { from: "res/css/views/elements/_ToggleSwitch.pcss", type: "css" },
+                    { from: "res/css/views/settings/tabs/_SettingsTab.pcss", type: "css" },
+                    { from: "res/css/structures/_RoomView.pcss", type: "css" },
+                    // Compound vars
+                    "node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-common-base.css",
+                    "node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-common-semantic.css",
+                    "node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-theme-light-base-mq.css",
+                    "node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-theme-light-semantic-mq.css",
+                ],
+            },
+        ],
     },
 };

CHANGELOG.md

@@ -1,3 +1,114 @@
+Changes in [1.11.90](https://github.com/element-hq/element-web/releases/tag/v1.11.90) (2025-01-14)
+==================================================================================================
+## ✨ Features
+
+* Docker: run as non-root ([#28849](https://github.com/element-hq/element-web/pull/28849)). Contributed by @richvdh.
+* Docker: allow configuration of HTTP listen port via env var ([#28840](https://github.com/element-hq/element-web/pull/28840)). Contributed by @richvdh.
+* Update matrix-wysiwyg to consume WASM asset ([#28838](https://github.com/element-hq/element-web/pull/28838)). Contributed by @t3chguy.
+* OIDC settings tweaks ([#28787](https://github.com/element-hq/element-web/pull/28787)). Contributed by @t3chguy.
+* Delabs native OIDC support ([#28615](https://github.com/element-hq/element-web/pull/28615)). Contributed by @t3chguy.
+* Move room header info button to right-most position ([#28754](https://github.com/element-hq/element-web/pull/28754)). Contributed by @t3chguy.
+* Enable key backup by default ([#28691](https://github.com/element-hq/element-web/pull/28691)). Contributed by @dbkr.
+
+## 🐛 Bug Fixes
+
+* Fix building the automations mermaid diagram ([#28881](https://github.com/element-hq/element-web/pull/28881)). Contributed by @dbkr.
+* Playwright: wait for the network listener on the postgres db ([#28808](https://github.com/element-hq/element-web/pull/28808)). Contributed by @dbkr.
+
+
+Changes in [1.11.89](https://github.com/element-hq/element-web/releases/tag/v1.11.89) (2024-12-18)
+==================================================================================================
+This is a patch release to fix a bug which could prevent loading stored crypto state from storage, and also to fix URL previews when switching back to a room.
+
+## 🐛 Bug Fixes
+
+* Upgrade matrix-sdk-crypto-wasm to 1.11.0 (https://github.com/matrix-org/matrix-js-sdk/pull/4593)
+* Fix url preview display ([#28766](https://github.com/element-hq/element-web/pull/28766)).
+
+
+Changes in [1.11.88](https://github.com/element-hq/element-web/releases/tag/v1.11.88) (2024-12-17)
+==================================================================================================
+## ✨ Features
+
+* Allow trusted Element Call widget to send and receive media encryption key to-device messages ([#28316](https://github.com/element-hq/element-web/pull/28316)). Contributed by @hughns.
+* increase ringing timeout from 10 seconds to 90 seconds ([#28630](https://github.com/element-hq/element-web/pull/28630)). Contributed by @fkwp.
+* Add `Close` tooltip to dialog ([#28617](https://github.com/element-hq/element-web/pull/28617)). Contributed by @florianduros.
+* New UX for Share dialog ([#28598](https://github.com/element-hq/element-web/pull/28598)). Contributed by @florianduros.
+* Improve performance of RoomContext in RoomHeader ([#28574](https://github.com/element-hq/element-web/pull/28574)). Contributed by @t3chguy.
+* Remove `Features.RustCrypto` flag ([#28582](https://github.com/element-hq/element-web/pull/28582)). Contributed by @florianduros.
+* Add Modernizr warning when running in non-secure context ([#28581](https://github.com/element-hq/element-web/pull/28581)). Contributed by @t3chguy.
+
+## 🐛 Bug Fixes
+
+* Fix jumpy timeline when the pinned message banner is displayed ([#28654](https://github.com/element-hq/element-web/pull/28654)). Contributed by @florianduros.
+* Fix font \& spaces in settings subsection ([#28631](https://github.com/element-hq/element-web/pull/28631)). Contributed by @florianduros.
+* Remove manual device verification which is not supported by the new cryptography stack ([#28588](https://github.com/element-hq/element-web/pull/28588)). Contributed by @florianduros.
+* Fix code block highlighting not working reliably with many code blocks ([#28613](https://github.com/element-hq/element-web/pull/28613)). Contributed by @t3chguy.
+* Remove remaining reply fallbacks code ([#28610](https://github.com/element-hq/element-web/pull/28610)). Contributed by @t3chguy.
+* Provide a way to activate GIFs via the keyboard for a11y ([#28611](https://github.com/element-hq/element-web/pull/28611)). Contributed by @t3chguy.
+* Fix format bar position ([#28591](https://github.com/element-hq/element-web/pull/28591)). Contributed by @florianduros.
+* Fix room taking long time to load ([#28579](https://github.com/element-hq/element-web/pull/28579)). Contributed by @florianduros.
+* Show the correct shield status in tooltip for more conditions ([#28476](https://github.com/element-hq/element-web/pull/28476)). Contributed by @uhoreg.
+
+
+Changes in [1.11.87](https://github.com/element-hq/element-web/releases/tag/v1.11.87) (2024-12-03)
+==================================================================================================
+## ✨ Features
+
+* Send and respect MSC4230 is\_animated flag ([#28513](https://github.com/element-hq/element-web/pull/28513)). Contributed by @t3chguy.
+* Display a warning when an unverified user's identity changes ([#28211](https://github.com/element-hq/element-web/pull/28211)). Contributed by @uhoreg.
+* Swap out Twitter link for Mastodon on auth footer ([#28508](https://github.com/element-hq/element-web/pull/28508)). Contributed by @t3chguy.
+* Consider `org.matrix.msc3417.call` as video room in create room dialog ([#28497](https://github.com/element-hq/element-web/pull/28497)). Contributed by @t3chguy.
+* Standardise icons using Compound Design Tokens ([#28217](https://github.com/element-hq/element-web/pull/28217)). Contributed by @t3chguy.
+* Start sending stable `m.marked_unread` events ([#28478](https://github.com/element-hq/element-web/pull/28478)). Contributed by @tulir.
+* Upgrade to compound-design-tokens v2 ([#28471](https://github.com/element-hq/element-web/pull/28471)). Contributed by @t3chguy.
+* Standardise icons using Compound Design Tokens ([#28286](https://github.com/element-hq/element-web/pull/28286)). Contributed by @t3chguy.
+* Remove reply fallbacks as per merged MSC2781 ([#28406](https://github.com/element-hq/element-web/pull/28406)). Contributed by @t3chguy.
+* Use React Suspense when rendering async modals ([#28386](https://github.com/element-hq/element-web/pull/28386)). Contributed by @t3chguy.
+
+## 🐛 Bug Fixes
+
+* Add spinner when room encryption is loading in room settings ([#28535](https://github.com/element-hq/element-web/pull/28535)). Contributed by @florianduros.
+* Fix getOidcCallbackUrl for Element Desktop ([#28521](https://github.com/element-hq/element-web/pull/28521)). Contributed by @t3chguy.
+* Filter out redacted poll votes to avoid crashing the Poll widget ([#28498](https://github.com/element-hq/element-web/pull/28498)). Contributed by @t3chguy.
+* Fix force tab complete not working since switching to React 18 createRoot API ([#28505](https://github.com/element-hq/element-web/pull/28505)). Contributed by @t3chguy.
+* Fix media captions in bubble layout ([#28480](https://github.com/element-hq/element-web/pull/28480)). Contributed by @tulir.
+* Reset cross-signing before backup when resetting both ([#28402](https://github.com/element-hq/element-web/pull/28402)). Contributed by @uhoreg.
+* Listen to events so that encryption icon updates when status changes ([#28407](https://github.com/element-hq/element-web/pull/28407)). Contributed by @uhoreg.
+* Check that the file the user chose has a MIME type of `image/*` ([#28467](https://github.com/element-hq/element-web/pull/28467)). Contributed by @t3chguy.
+* Fix download button size in message action bar ([#28472](https://github.com/element-hq/element-web/pull/28472)). Contributed by @t3chguy.
+* Allow tab completing users in brackets ([#28460](https://github.com/element-hq/element-web/pull/28460)). Contributed by @t3chguy.
+* Fix React 18 strict mode breaking spotlight dialog ([#28452](https://github.com/element-hq/element-web/pull/28452)). Contributed by @MidhunSureshR.
+
+
+Changes in [1.11.86](https://github.com/element-hq/element-web/releases/tag/v1.11.86) (2024-11-19)
+==================================================================================================
+## ✨ Features
+
+* Deduplicate icons using Compound Design Tokens ([#28419](https://github.com/element-hq/element-web/pull/28419)). Contributed by @t3chguy.
+* Let widget driver send error details ([#28357](https://github.com/element-hq/element-web/pull/28357)). Contributed by @AndrewFerr.
+* Deduplicate icons using Compound Design Tokens ([#28381](https://github.com/element-hq/element-web/pull/28381)). Contributed by @t3chguy.
+* Auto approvoce `io.element.call.reaction` capability for element call widgets ([#28401](https://github.com/element-hq/element-web/pull/28401)). Contributed by @toger5.
+* Show message type prefix in thread root \& reply previews ([#28361](https://github.com/element-hq/element-web/pull/28361)). Contributed by @t3chguy.
+* Support sending encrypted to device messages from widgets ([#28315](https://github.com/element-hq/element-web/pull/28315)). Contributed by @hughns.
+
+## 🐛 Bug Fixes
+
+* Feed events to widgets as they are decrypted (even if out of order) ([#28376](https://github.com/element-hq/element-web/pull/28376)). Contributed by @robintown.
+* Handle authenticated media when downloading from ImageView ([#28379](https://github.com/element-hq/element-web/pull/28379)). Contributed by @t3chguy.
+* Ignore `m.3pid_changes` for Identity service 3PID changes ([#28375](https://github.com/element-hq/element-web/pull/28375)). Contributed by @t3chguy.
+* Fix markdown escaping wrongly passing html through ([#28363](https://github.com/element-hq/element-web/pull/28363)). Contributed by @t3chguy.
+* Remove "Upgrade your encryption" flow in `CreateSecretStorageDialog` ([#28290](https://github.com/element-hq/element-web/pull/28290)). Contributed by @florianduros.
+
+
+Changes in [1.11.85](https://github.com/element-hq/element-web/releases/tag/v1.11.85) (2024-11-12)
+==================================================================================================
+# Security
+- Fixes for [CVE-2024-51750](https://www.cve.org/CVERecord?id=CVE-2024-51750) / [GHSA-w36j-v56h-q9pc](https://github.com/element-hq/element-web/security/advisories/GHSA-w36j-v56h-q9pc)
+- Fixes for [CVE-2024-51749](https://www.cve.org/CVERecord?id=CVE-2024-51749) / [GHSA-5486-384g-mcx2](https://github.com/element-hq/element-web/security/advisories/GHSA-5486-384g-mcx2)
+- Update JS SDK with the fixes for [CVE-2024-50336](https://www.cve.org/CVERecord?id=CVE-2024-50336) / [GHSA-xvg8-m4x3-w6xr](https://github.com/matrix-org/matrix-js-sdk/security/advisories/GHSA-xvg8-m4x3-w6xr)
+
+
 Changes in [1.11.84](https://github.com/element-hq/element-web/releases/tag/v1.11.84) (2024-11-05)
 ==================================================================================================
 ## ✨ Features

CONTRIBUTING.md

@@ -20,26 +20,26 @@ Definitely don't use the GitHub default of "Update file.ts".
 
 As for your PR description, it should include these things:
 
--   References to any bugs fixed by the change (in GitHub's `Fixes` notation)
--   Describe the why and what is changing in the PR description so it's easy for
-    onlookers and reviewers to onboard and context switch. This information is
-    also helpful when we come back to look at this in 6 months and ask "why did
-    we do it like that?" we have a chance of finding out.
-    -   Why didn't it work before? Why does it work now? What use cases does it
-        unlock?
-    -   If you find yourself adding information on how the code works or why you
-        chose to do it the way you did, make sure this information is instead
-        written as comments in the code itself.
-    -   Sometimes a PR can change considerably as it is developed. In this case,
-        the description should be updated to reflect the most recent state of
-        the PR. (It can be helpful to retain the old content under a suitable
-        heading, for additional context.)
--   Include both **before** and **after** screenshots to easily compare and discuss
-    what's changing.
--   Include a step-by-step testing strategy so that a reviewer can check out the
-    code locally and easily get to the point of testing your change.
--   Add comments to the diff for the reviewer that might help them to understand
-    why the change is necessary or how they might better understand and review it.
+- References to any bugs fixed by the change (in GitHub's `Fixes` notation)
+- Describe the why and what is changing in the PR description so it's easy for
+  onlookers and reviewers to onboard and context switch. This information is
+  also helpful when we come back to look at this in 6 months and ask "why did
+  we do it like that?" we have a chance of finding out.
+    - Why didn't it work before? Why does it work now? What use cases does it
+      unlock?
+    - If you find yourself adding information on how the code works or why you
+      chose to do it the way you did, make sure this information is instead
+      written as comments in the code itself.
+    - Sometimes a PR can change considerably as it is developed. In this case,
+      the description should be updated to reflect the most recent state of
+      the PR. (It can be helpful to retain the old content under a suitable
+      heading, for additional context.)
+- Include both **before** and **after** screenshots to easily compare and discuss
+  what's changing.
+- Include a step-by-step testing strategy so that a reviewer can check out the
+  code locally and easily get to the point of testing your change.
+- Add comments to the diff for the reviewer that might help them to understand
+  why the change is necessary or how they might better understand and review it.
 
 ### Changelogs
 
@@ -79,8 +79,8 @@ element-web notes: Fix a bug where the 'Herd' button only worked on Tuesdays
 
 This example is for Element Web. You can specify:
 
--   element-web
--   element-desktop
+- element-web
+- element-desktop
 
 If your PR introduces a breaking change, use the `Notes` section in the same
 way, additionally adding the `X-Breaking-Change` label (see below). There's no need
@@ -96,10 +96,10 @@ Notes: Remove legacy `Camelopard` class. `Giraffe` should be used instead.
 
 Other metadata can be added using labels.
 
--   `X-Breaking-Change`: A breaking change - adding this label will mean the change causes a _major_ version bump.
--   `T-Enhancement`: A new feature - adding this label will mean the change causes a _minor_ version bump.
--   `T-Defect`: A bug fix (in either code or docs).
--   `T-Task`: No user-facing changes, eg. code comments, CI fixes, refactors or tests. Won't have a changelog entry unless you specify one.
+- `X-Breaking-Change`: A breaking change - adding this label will mean the change causes a _major_ version bump.
+- `T-Enhancement`: A new feature - adding this label will mean the change causes a _minor_ version bump.
+- `T-Defect`: A bug fix (in either code or docs).
+- `T-Task`: No user-facing changes, eg. code comments, CI fixes, refactors or tests. Won't have a changelog entry unless you specify one.
 
 If you don't have permission to add labels, your PR reviewer(s) can work with you
 to add them: ask in the PR description or comments.

Dockerfile

@@ -1,20 +1,17 @@
 # Builder
-FROM --platform=$BUILDPLATFORM node:22-bullseye as builder
+FROM --platform=$BUILDPLATFORM node:22-bullseye AS builder
 
 # Support custom branch of the js-sdk. This also helps us build images of element-web develop.
 ARG USE_CUSTOM_SDKS=false
 ARG JS_SDK_REPO="https://github.com/matrix-org/matrix-js-sdk.git"
 ARG JS_SDK_BRANCH="master"
 
-RUN apt-get update && apt-get install -y git dos2unix
-
 WORKDIR /src
 
 COPY . /src
-RUN dos2unix /src/scripts/docker-link-repos.sh && bash /src/scripts/docker-link-repos.sh
+RUN /src/scripts/docker-link-repos.sh
 RUN yarn --network-timeout=200000 install
-
-RUN dos2unix /src/scripts/docker-package.sh /src/scripts/get-version-from-git.sh /src/scripts/normalize-version.sh && bash /src/scripts/docker-package.sh
+RUN /src/scripts/docker-package.sh
 
 # Copy the config now so that we don't create another layer in the app image
 RUN cp /src/config.sample.json /src/webapp/config.json
@@ -24,8 +21,22 @@ FROM nginx:alpine-slim
 
 COPY --from=builder /src/webapp /app
 
-# Override default nginx config
-COPY /nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
+# Override default nginx config. Templates in `/etc/nginx/templates` are passed
+# through `envsubst` by the nginx docker image entry point.
+COPY /docker/nginx-templates/* /etc/nginx/templates/
+
+# Tell nginx to put its pidfile elsewhere, so it can run as non-root
+RUN sed -i -e 's,/var/run/nginx.pid,/tmp/nginx.pid,' /etc/nginx/nginx.conf
+
+# nginx user must own the cache and etc directory to write cache and tweak the nginx config
+RUN chown -R nginx:0 /var/cache/nginx /etc/nginx
+RUN chmod -R g+w /var/cache/nginx /etc/nginx
 
 RUN rm -rf /usr/share/nginx/html \
   && ln -s /app /usr/share/nginx/html
+
+# Run as nginx user by default
+USER nginx
+
+# HTTP listen port
+ENV ELEMENT_WEB_PORT=80

LICENSE-COMMERCIAL

@@ -0,0 +1,6 @@
+Licensees holding a valid commercial license with Element may use this
+software in accordance with the terms contained in a written agreement
+between you and Element.
+
+To purchase a commercial license please contact our sales team at
+licensing@element.io

README.md

@@ -16,28 +16,28 @@ JS SDK](https://github.com/matrix-org/matrix-js-sdk).
 
 Element has several tiers of support for different environments:
 
--   Supported
-    -   Definition:
-        -   Issues **actively triaged**, regressions **block** the release
-    -   Last 2 major versions of Chrome, Firefox, and Edge on desktop OSes
-    -   Last 2 versions of Safari
-    -   Latest release of official Element Desktop app on desktop OSes
-    -   Desktop OSes means macOS, Windows, and Linux versions for desktop devices
-        that are actively supported by the OS vendor and receive security updates
--   Best effort
-    -   Definition:
-        -   Issues **accepted**, regressions **do not block** the release
-        -   The wider Element Products(including Element Call and the Enterprise Server Suite) do still not officially support these browsers.
-        -   The element web project and its contributors should keep the client functioning and gracefully degrade where other sibling features (E.g. Element Call) may not function.
-    -   Last major release of Firefox ESR and Chrome/Edge Extended Stable
--   Community Supported
-    -   Definition:
-        -   Issues **accepted**, regressions **do not block** the release
-        -   Community contributions are welcome to support these issues
-    -   Mobile web for current stable version of Chrome, Firefox, and Safari on Android, iOS, and iPadOS
--   Not supported
-    -   Definition: Issues only affecting unsupported environments are **closed**
-    -   Everything else
+- Supported
+    - Definition:
+        - Issues **actively triaged**, regressions **block** the release
+    - Last 2 major versions of Chrome, Firefox, and Edge on desktop OSes
+    - Last 2 versions of Safari
+    - Latest release of official Element Desktop app on desktop OSes
+    - Desktop OSes means macOS, Windows, and Linux versions for desktop devices
+      that are actively supported by the OS vendor and receive security updates
+- Best effort
+    - Definition:
+        - Issues **accepted**, regressions **do not block** the release
+        - The wider Element Products(including Element Call and the Enterprise Server Suite) do still not officially support these browsers.
+        - The element web project and its contributors should keep the client functioning and gracefully degrade where other sibling features (E.g. Element Call) may not function.
+    - Last major release of Firefox ESR and Chrome/Edge Extended Stable
+- Community Supported
+    - Definition:
+        - Issues **accepted**, regressions **do not block** the release
+        - Community contributions are welcome to support these issues
+    - Mobile web for current stable version of Chrome, Firefox, and Safari on Android, iOS, and iPadOS
+- Not supported
+    - Definition: Issues only affecting unsupported environments are **closed**
+    - Everything else
 
 The period of support for these tiers should last until the releases specified above, plus 1 app release cycle(2 weeks). In the case of Firefox ESR this is extended further to allow it land in Debian Stable.
 
@@ -74,16 +74,16 @@ situation, but it's still not good practice to do it in the first place. See
 Unless you have special requirements, you will want to add the following to
 your web server configuration when hosting Element Web:
 
--   The `X-Frame-Options: SAMEORIGIN` header, to prevent Element Web from being
-    framed and protect from [clickjacking][owasp-clickjacking].
--   The `frame-ancestors 'self'` directive to your `Content-Security-Policy`
-    header, as the modern replacement for `X-Frame-Options` (though both should be
-    included since not all browsers support it yet, see
-    [this][owasp-clickjacking-csp]).
--   The `X-Content-Type-Options: nosniff` header, to [disable MIME
-    sniffing][mime-sniffing].
--   The `X-XSS-Protection: 1; mode=block;` header, for basic XSS protection in
-    legacy browsers.
+- The `X-Frame-Options: SAMEORIGIN` header, to prevent Element Web from being
+  framed and protect from [clickjacking][owasp-clickjacking].
+- The `frame-ancestors 'self'` directive to your `Content-Security-Policy`
+  header, as the modern replacement for `X-Frame-Options` (though both should be
+  included since not all browsers support it yet, see
+  [this][owasp-clickjacking-csp]).
+- The `X-Content-Type-Options: nosniff` header, to [disable MIME
+  sniffing][mime-sniffing].
+- The `X-XSS-Protection: 1; mode=block;` header, for basic XSS protection in
+  legacy browsers.
 
 [mime-sniffing]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#mime_sniffing
 [owasp-clickjacking-csp]: https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html#content-security-policy-frame-ancestors-examples
@@ -311,3 +311,18 @@ For a developer guide, see the [translating dev doc](docs/translating-dev.md).
 Issues are triaged by community members and the Web App Team, following the [triage process](https://github.com/element-hq/element-meta/wiki/Triage-process).
 
 We use [issue labels](https://github.com/element-hq/element-meta/wiki/Issue-labelling) to sort all incoming issues.
+
+## Copyright & License
+
+Copyright (c) 2014-2017 OpenMarket Ltd
+Copyright (c) 2017 Vector Creations Ltd
+Copyright (c) 2017-2025 New Vector Ltd
+
+This software is multi licensed by New Vector Ltd (Element). It can be used either:
+
+(1) for free under the terms of the GNU Affero General Public License (as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version); OR
+
+(2) for free under the terms of the GNU General Public License (as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version); OR
+
+(3) under the terms of a paid-for Element Commercial License agreement between you and Element (the terms of which may vary depending on what you and Element have agreed to).
+Unless required by applicable law or agreed to in writing, software distributed under the Licenses is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the Licenses for the specific language governing permissions and limitations under the Licenses.

__mocks__/FontManager.js

@@ -1,6 +0,0 @@
-// Stub out FontManager for tests as it doesn't validate anything we don't already know given
-// our fixed test environment and it requires the installation of node-canvas.
-
-module.exports = {
-    fixupColorFonts: () => Promise.resolve(),
-};

__mocks__/maplibre-gl.js

@@ -2,7 +2,7 @@
 Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
@@ -17,6 +17,7 @@ class MockMap extends EventEmitter {
     setCenter = jest.fn();
     setStyle = jest.fn();
     fitBounds = jest.fn();
+    remove = jest.fn();
 }
 const MockMapInstance = new MockMap();
 

__mocks__/workerFactoryMock.js

@@ -2,7 +2,7 @@
 Copyright 2024 New Vector Ltd.
 Copyright 2023 The Matrix.org Foundation C.I.C.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 

code_style.md

@@ -3,9 +3,9 @@
 This code style applies to projects which the element-web team directly maintains or is reasonably
 adjacent to. As of writing, these are:
 
--   element-desktop
--   element-web
--   matrix-js-sdk
+- element-desktop
+- element-web
+- matrix-js-sdk
 
 Other projects might extend this code style for increased strictness. For example, matrix-events-sdk
 has stricter code organization to reduce the maintenance burden. These projects will declare their code

contribute.json

@@ -3,7 +3,7 @@
     "description": "A glossy Matrix collaboration client for the web.",
     "repository": {
         "url": "https://github.com/element-hq/element-web",
-        "license": "AGPL-3.0-only OR GPL-3.0-only"
+        "license": "AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial"
     },
     "bugs": {
         "list": "https://github.com/element-hq/element-web/issues",

docker/nginx-templates/default.conf.template

@@ -1,6 +1,6 @@
 server {
-    listen       80;
-    listen  [::]:80;
+    listen       ${ELEMENT_WEB_PORT};
+    listen  [::]:${ELEMENT_WEB_PORT};
     server_name  localhost;
 
     root   /usr/share/nginx/html;

docs/SUMMARY.md

@@ -1,55 +1,55 @@
 # Summary
 
--   [Introduction](../README.md)
+- [Introduction](../README.md)
 
 # Usage
 
--   [Betas](betas.md)
--   [Labs](labs.md)
+- [Betas](betas.md)
+- [Labs](labs.md)
 
 # Setup
 
--   [Install](install.md)
--   [Config](config.md)
--   [Custom home page](custom-home.md)
--   [Kubernetes](kubernetes.md)
--   [Jitsi](jitsi.md)
--   [Encryption](e2ee.md)
+- [Install](install.md)
+- [Config](config.md)
+- [Custom home page](custom-home.md)
+- [Kubernetes](kubernetes.md)
+- [Jitsi](jitsi.md)
+- [Encryption](e2ee.md)
 
 # Build
 
--   [Customisations](customisations.md)
--   [Modules](modules.md)
--   [Native Node modules](native-node-modules.md)
+- [Customisations](customisations.md)
+- [Modules](modules.md)
+- [Native Node modules](native-node-modules.md)
 
 # Contribution
 
--   [Choosing an issue](choosing-an-issue.md)
--   [Translation](translating.md)
--   [Netlify builds](pr-previews.md)
--   [Code review](review.md)
+- [Choosing an issue](choosing-an-issue.md)
+- [Translation](translating.md)
+- [Netlify builds](pr-previews.md)
+- [Code review](review.md)
 
 # Development
 
--   [App load order](app-load.md)
--   [Translation](translating-dev.md)
--   [Theming](theming.md)
--   [Playwright end to end tests](playwright.md)
--   [Memory profiling](memory-profiles-and-leaks.md)
--   [Jitsi](jitsi-dev.md)
--   [Feature flags](feature-flags.md)
--   [OIDC and delegated authentication](oidc.md)
--   [Release Process](release.md)
+- [App load order](app-load.md)
+- [Translation](translating-dev.md)
+- [Theming](theming.md)
+- [Playwright end to end tests](playwright.md)
+- [Memory profiling](memory-profiles-and-leaks.md)
+- [Jitsi](jitsi-dev.md)
+- [Feature flags](feature-flags.md)
+- [OIDC and delegated authentication](oidc.md)
+- [Release Process](release.md)
 
 # Deep dive
 
--   [Skinning](skinning.md)
--   [Cider editor](ciderEditor.md)
--   [Iconography](icons.md)
--   [Jitsi](jitsi.md)
--   [Local echo](local-echo-dev.md)
--   [Media](media-handling.md)
--   [Room List Store](room-list-store.md)
--   [Scrolling](scrolling.md)
--   [Usercontent](usercontent.md)
--   [Widget layouts](widget-layouts.md)
+- [Skinning](skinning.md)
+- [Cider editor](ciderEditor.md)
+- [Iconography](icons.md)
+- [Jitsi](jitsi.md)
+- [Local echo](local-echo-dev.md)
+- [Media](media-handling.md)
+- [Room List Store](room-list-store.md)
+- [Scrolling](scrolling.md)
+- [Usercontent](usercontent.md)
+- [Widget layouts](widget-layouts.md)

docs/app-load.md

@@ -61,18 +61,18 @@ flowchart TD
 
 Key:
 
--   Parallelogram: async/await task
--   Box: sync task
--   Diamond: conditional branch
--   Circle: user interaction
--   Blue arrow: async task is allowed to settle but allowed to fail
--   Red arrow: async task success is asserted
+- Parallelogram: async/await task
+- Box: sync task
+- Diamond: conditional branch
+- Circle: user interaction
+- Blue arrow: async task is allowed to settle but allowed to fail
+- Red arrow: async task success is asserted
 
 Notes:
 
--   A task begins when all its dependencies (arrows going into it) are fulfilled.
--   The success of setting up rageshake is never asserted, element-web has a fallback path for running without IDB (and thus rageshake).
--   Everything is awaited to be settled before the Modernizr check, to allow it to make use of things like i18n if they are successful.
+- A task begins when all its dependencies (arrows going into it) are fulfilled.
+- The success of setting up rageshake is never asserted, element-web has a fallback path for running without IDB (and thus rageshake).
+- Everything is awaited to be settled before the Modernizr check, to allow it to make use of things like i18n if they are successful.
 
 Underlying dependencies:
 

docs/choosing-an-issue.md

@@ -32,19 +32,19 @@ someone to add something.
 When you're looking through the list, here are some things that might make an
 issue a **GOOD** choice:
 
--   It is a problem or feature you care about.
--   It concerns a type of code you know a little about.
--   You think you can understand what's needed.
--   It already has approval from Element Web's designers (look for comments from
-    members of the
-    [Product](https://github.com/orgs/element-hq/teams/product/members) or
-    [Design](https://github.com/orgs/element-hq/teams/design/members) teams).
+- It is a problem or feature you care about.
+- It concerns a type of code you know a little about.
+- You think you can understand what's needed.
+- It already has approval from Element Web's designers (look for comments from
+  members of the
+  [Product](https://github.com/orgs/element-hq/teams/product/members) or
+  [Design](https://github.com/orgs/element-hq/teams/design/members) teams).
 
 Here are some things that might make it a **BAD** choice:
 
--   You don't understand it (maybe add a comment asking a clarifying question).
--   It sounds difficult, or is part of a larger change you don't know about.
--   **It is tagged with `X-Needs-Design` or `X-Needs-Product`.**
+- You don't understand it (maybe add a comment asking a clarifying question).
+- It sounds difficult, or is part of a larger change you don't know about.
+- **It is tagged with `X-Needs-Design` or `X-Needs-Product`.**
 
 **Element Web's Design and Product teams tend to be very busy**, so if you make
 changes that require approval from one of those teams, you will probably have

docs/config.md

@@ -455,7 +455,7 @@ If you would like to use Scalar, the integration manager maintained by Element,
 
 For widgets in general (from an integration manager or not) there is also:
 
--   `default_widget_container_height`
+- `default_widget_container_height`
 
 This controls the height that the top widget panel initially appears as and is the height in pixels, default 280.
 
@@ -551,38 +551,38 @@ preferences.
 
 Currently, the following UI feature flags are supported:
 
--   `UIFeature.urlPreviews` - Whether URL previews are enabled across the entire application.
--   `UIFeature.feedback` - Whether prompts to supply feedback are shown.
--   `UIFeature.voip` - Whether or not VoIP is shown readily to the user. When disabled,
-    Jitsi widgets will still work though they cannot easily be added.
--   `UIFeature.widgets` - Whether or not widgets will be shown.
--   `UIFeature.advancedSettings` - Whether or not sections titled "advanced" in room and
-    user settings are shown to the user.
--   `UIFeature.shareQrCode` - Whether or not the QR code on the share room/event dialog
-    is shown.
--   `UIFeature.shareSocial` - Whether or not the social icons on the share room/event dialog
-    are shown.
--   `UIFeature.identityServer` - Whether or not functionality requiring an identity server
-    is shown. When disabled, the user will not be able to interact with the identity
-    server (sharing email addresses, 3PID invites, etc).
--   `UIFeature.thirdPartyId` - Whether or not UI relating to third party identifiers (3PIDs)
-    is shown. Typically this is considered "contact information" on the homeserver, and is
-    not directly related to the identity server.
--   `UIFeature.registration` - Whether or not the registration page is accessible. Typically
-    useful if accounts are managed externally.
--   `UIFeature.passwordReset` - Whether or not the password reset page is accessible. Typically
-    useful if accounts are managed externally.
--   `UIFeature.deactivate` - Whether or not the deactivate account button is accessible. Typically
-    useful if accounts are managed externally.
--   `UIFeature.advancedEncryption` - Whether or not advanced encryption options are shown to the
-    user.
--   `UIFeature.roomHistorySettings` - Whether or not the room history settings are shown to the user.
-    This should only be used if the room history visibility options are managed by the server.
--   `UIFeature.TimelineEnableRelativeDates` - Display relative date separators (eg: 'Today', 'Yesterday') in the
-    timeline for recent messages. When false day dates will be used.
--   `UIFeature.BulkUnverifiedSessionsReminder` - Display popup reminders to verify or remove unverified sessions. Defaults
-    to true.
--   `UIFeature.locationSharing` - Whether or not location sharing menus will be shown.
+- `UIFeature.urlPreviews` - Whether URL previews are enabled across the entire application.
+- `UIFeature.feedback` - Whether prompts to supply feedback are shown.
+- `UIFeature.voip` - Whether or not VoIP is shown readily to the user. When disabled,
+  Jitsi widgets will still work though they cannot easily be added.
+- `UIFeature.widgets` - Whether or not widgets will be shown.
+- `UIFeature.advancedSettings` - Whether or not sections titled "advanced" in room and
+  user settings are shown to the user.
+- `UIFeature.shareQrCode` - Whether or not the QR code on the share room/event dialog
+  is shown.
+- `UIFeature.shareSocial` - Whether or not the social icons on the share room/event dialog
+  are shown.
+- `UIFeature.identityServer` - Whether or not functionality requiring an identity server
+  is shown. When disabled, the user will not be able to interact with the identity
+  server (sharing email addresses, 3PID invites, etc).
+- `UIFeature.thirdPartyId` - Whether or not UI relating to third party identifiers (3PIDs)
+  is shown. Typically this is considered "contact information" on the homeserver, and is
+  not directly related to the identity server.
+- `UIFeature.registration` - Whether or not the registration page is accessible. Typically
+  useful if accounts are managed externally.
+- `UIFeature.passwordReset` - Whether or not the password reset page is accessible. Typically
+  useful if accounts are managed externally.
+- `UIFeature.deactivate` - Whether or not the deactivate account button is accessible. Typically
+  useful if accounts are managed externally.
+- `UIFeature.advancedEncryption` - Whether or not advanced encryption options are shown to the
+  user.
+- `UIFeature.roomHistorySettings` - Whether or not the room history settings are shown to the user.
+  This should only be used if the room history visibility options are managed by the server.
+- `UIFeature.TimelineEnableRelativeDates` - Display relative date separators (eg: 'Today', 'Yesterday') in the
+  timeline for recent messages. When false day dates will be used.
+- `UIFeature.BulkUnverifiedSessionsReminder` - Display popup reminders to verify or remove unverified sessions. Defaults
+  to true.
+- `UIFeature.locationSharing` - Whether or not location sharing menus will be shown.
 
 ## Undocumented / developer options
 
@@ -592,4 +592,3 @@ The following are undocumented or intended for developer use only.
 2. `sync_timeline_limit`
 3. `dangerously_allow_unsafe_and_insecure_passwords`
 4. `latex_maths_delims`: An optional setting to override the default delimiters used for maths parsing. See https://github.com/matrix-org/matrix-react-sdk/pull/5939 for details. Only used when `feature_latex_maths` is enabled.
-5. `voice_broadcast.chunk_length`: Target chunk length in seconds for the Voice Broadcast feature currently under development.

docs/customisations.md

@@ -50,9 +50,9 @@ that properties/state machines won't change.
 
 UI for some actions can be hidden via the ComponentVisibility customisation:
 
--   inviting users to rooms and spaces,
--   creating rooms,
--   creating spaces,
+- inviting users to rooms and spaces,
+- creating rooms,
+- creating spaces,
 
 To customise visibility create a customisation module from [ComponentVisibility](https://github.com/element-hq/element-web/blob/master/src/customisations/ComponentVisibility.ts) following the instructions above.
 

docs/e2ee.md

@@ -31,9 +31,9 @@ Set the following on your homeserver's
 
 When `force_disable` is true:
 
--   all rooms will be created with encryption disabled, and it will not be possible to enable
-    encryption from room settings.
--   any `io.element.e2ee.default` value will be disregarded.
+- all rooms will be created with encryption disabled, and it will not be possible to enable
+  encryption from room settings.
+- any `io.element.e2ee.default` value will be disregarded.
 
 Note: If the server is configured to forcibly enable encryption for some or all rooms,
 this behaviour will be overridden.

docs/feature-flags.md

@@ -5,10 +5,10 @@ flexibility and control over when and where those features are enabled.
 
 For example, flags make the following things possible:
 
--   Extended testing of a feature via labs on develop
--   Enabling features when ready instead of the first moment the code is released
--   Testing a feature with a specific set of users (by enabling only on a specific
-    Element instance)
+- Extended testing of a feature via labs on develop
+- Enabling features when ready instead of the first moment the code is released
+- Testing a feature with a specific set of users (by enabling only on a specific
+  Element instance)
 
 The size of the feature controlled by a feature flag may vary widely: it could
 be a large project like reactions or a smaller change to an existing algorithm.

docs/features/composer.md

@@ -2,37 +2,37 @@
 
 ## Auto Complete
 
--   Hitting tab tries to auto-complete the word before the caret as a room member
-    -   If no matching name is found, a visual bell is shown
--   @ + a letter opens auto complete for members starting with the given letter
-    -   When inserting a user pill at the start in the composer, a colon and space is appended to the pill
-    -   When inserting a user pill anywhere else in composer, only a space is appended to the pill
--   # + a letter opens auto complete for rooms starting with the given letter
--   : open auto complete for emoji
--   Pressing arrow-up/arrow-down while the autocomplete is open navigates between auto complete options
--   Pressing tab while the autocomplete is open goes to the next autocomplete option,
-    wrapping around at the end after reverting to the typed text first.
+- Hitting tab tries to auto-complete the word before the caret as a room member
+    - If no matching name is found, a visual bell is shown
+- @ + a letter opens auto complete for members starting with the given letter
+    - When inserting a user pill at the start in the composer, a colon and space is appended to the pill
+    - When inserting a user pill anywhere else in composer, only a space is appended to the pill
+- # + a letter opens auto complete for rooms starting with the given letter
+- : open auto complete for emoji
+- Pressing arrow-up/arrow-down while the autocomplete is open navigates between auto complete options
+- Pressing tab while the autocomplete is open goes to the next autocomplete option,
+  wrapping around at the end after reverting to the typed text first.
 
 ## Formatting
 
--   When selecting text, a formatting bar appears above the selection.
--   The formatting bar allows to format the selected test as:
-    bold, italic, strikethrough, a block quote, and a code block (inline if no linebreak is selected).
--   Formatting is applied as markdown syntax.
--   Hitting ctrl/cmd+B also marks the selected text as bold
--   Hitting ctrl/cmd+I also marks the selected text as italic
--   Hitting ctrl/cmd+> also marks the selected text as a blockquote
+- When selecting text, a formatting bar appears above the selection.
+- The formatting bar allows to format the selected test as:
+  bold, italic, strikethrough, a block quote, and a code block (inline if no linebreak is selected).
+- Formatting is applied as markdown syntax.
+- Hitting ctrl/cmd+B also marks the selected text as bold
+- Hitting ctrl/cmd+I also marks the selected text as italic
+- Hitting ctrl/cmd+> also marks the selected text as a blockquote
 
 ## Misc
 
--   When hitting the arrow-up button while having the caret at the start in the composer,
-    the last message sent by the syncing user is edited.
--   Clicking a display name on an event in the timeline inserts a user pill into the composer
--   Emoticons (like :-), >:-), :-/, ...) are replaced by emojis while typing if the relevant setting is enabled
--   Typing in the composer sends typing notifications in the room
--   Pressing ctrl/mod+z and ctrl/mod+y undoes/redoes modifications
--   Pressing shift+enter inserts a line break
--   Pressing enter sends the message.
--   Choosing "Quote" in the context menu of an event inserts a quote of the event body in the composer.
--   Choosing "Reply" in the context menu of an event shows a preview above the composer to reply to.
--   Pressing alt+arrow up/arrow down navigates in previously sent messages, putting them in the composer.
+- When hitting the arrow-up button while having the caret at the start in the composer,
+  the last message sent by the syncing user is edited.
+- Clicking a display name on an event in the timeline inserts a user pill into the composer
+- Emoticons (like :-), >:-), :-/, ...) are replaced by emojis while typing if the relevant setting is enabled
+- Typing in the composer sends typing notifications in the room
+- Pressing ctrl/mod+z and ctrl/mod+y undoes/redoes modifications
+- Pressing shift+enter inserts a line break
+- Pressing enter sends the message.
+- Choosing "Quote" in the context menu of an event inserts a quote of the event body in the composer.
+- Choosing "Reply" in the context menu of an event shows a preview above the composer to reply to.
+- Pressing alt+arrow up/arrow down navigates in previously sent messages, putting them in the composer.

docs/icons.md

@@ -8,9 +8,9 @@ Icons have `role="presentation"` and `aria-hidden` automatically applied. These
 
 SVG file recommendations:
 
--   Colours should not be defined absolutely. Use `currentColor` instead.
--   SVG files should be taken from the design compound as they are. Some icons contain special padding.
-    This means that there should be icons for each size, e.g. warning-16px and warning-32px.
+- Colours should not be defined absolutely. Use `currentColor` instead.
+- SVG files should be taken from the design compound as they are. Some icons contain special padding.
+  This means that there should be icons for each size, e.g. warning-16px and warning-32px.
 
 Example usage:
 

docs/install.md

@@ -60,6 +60,22 @@ would be:
 docker run --rm -p 127.0.0.1:80:80 -v /etc/element-web/config.json:/app/config.json vectorim/element-web
 ```
 
+The Docker image is configured to run as an unprivileged (non-root) user by
+default. This should be fine on modern Docker runtimes, but binding to port 80
+on other runtimes may require root privileges. To resolve this, either run the
+image as root (`docker run --user 0`) or, better, change the port that nginx
+listens on via the `ELEMENT_WEB_PORT` environment variable.
+
+The behaviour of the docker image can be customised via the following
+environment variables:
+
+- `ELEMENT_WEB_PORT`
+
+    The port to listen on (within the docker container) for HTTP
+    traffic. Defaults to `80`.
+
+### Building the docker image
+
 To build the image yourself:
 
 ```bash

docs/jitsi.md

@@ -81,27 +81,27 @@ which takes several parameters:
 
 _Query string_:
 
--   `widgetId`: The ID of the widget. This is needed for communication back to the
-    react-sdk.
--   `parentUrl`: The URL of the parent window. This is also needed for
-    communication back to the react-sdk.
+- `widgetId`: The ID of the widget. This is needed for communication back to the
+  react-sdk.
+- `parentUrl`: The URL of the parent window. This is also needed for
+  communication back to the react-sdk.
 
 _Hash/fragment (formatted as a query string)_:
 
--   `conferenceDomain`: The domain to connect Jitsi Meet to.
--   `conferenceId`: The room or conference ID to connect Jitsi Meet to.
--   `isAudioOnly`: Boolean for whether this is a voice-only conference. May not
-    be present, should default to `false`.
--   `startWithAudioMuted`: Boolean for whether the calls start with audio
-    muted. May not be present.
--   `startWithVideoMuted`: Boolean for whether the calls start with video
-    muted. May not be present.
--   `displayName`: The display name of the user viewing the widget. May not
-    be present or could be null.
--   `avatarUrl`: The HTTP(S) URL for the avatar of the user viewing the widget. May
-    not be present or could be null.
--   `userId`: The MXID of the user viewing the widget. May not be present or could
-    be null.
+- `conferenceDomain`: The domain to connect Jitsi Meet to.
+- `conferenceId`: The room or conference ID to connect Jitsi Meet to.
+- `isAudioOnly`: Boolean for whether this is a voice-only conference. May not
+  be present, should default to `false`.
+- `startWithAudioMuted`: Boolean for whether the calls start with audio
+  muted. May not be present.
+- `startWithVideoMuted`: Boolean for whether the calls start with video
+  muted. May not be present.
+- `displayName`: The display name of the user viewing the widget. May not
+  be present or could be null.
+- `avatarUrl`: The HTTP(S) URL for the avatar of the user viewing the widget. May
+  not be present or could be null.
+- `userId`: The MXID of the user viewing the widget. May not be present or could
+  be null.
 
 The react-sdk will assume that `jitsi.html` is at the path of wherever it is currently
 being served. For example, `https://develop.element.io/jitsi.html` or `vector://webapp/jitsi.html`.

docs/oidc.md

@@ -1,29 +1,9 @@
 # OIDC and delegated authentication
 
-## Compatibility/OIDC-aware mode
-
-[MSC2965: OIDC provider discovery](https://github.com/matrix-org/matrix-spec-proposals/pull/2965)
-[MSC3824: OIDC aware clients](https://github.com/matrix-org/matrix-spec-proposals/pull/3824)
-This mode uses an SSO flow to gain a `loginToken` from the authentication provider, then continues with SSO login.
-Element Web uses [MSC2965: OIDC provider discovery](https://github.com/matrix-org/matrix-spec-proposals/pull/2965) to discover the configured provider.
-Wherever valid MSC2965 configuration is discovered, OIDC-aware login flow will be the only option offered.
-
-## (🧪Experimental) OIDC-native flow
-
-Can be enabled by a config-level-only setting in `config.json`
-
-```json
-{
-    "features": {
-        "feature_oidc_native_flow": true
-    }
-}
-```
-
 See https://areweoidcyet.com/client-implementation-guide/ for implementation details.
 
 Element Web uses [MSC2965: OIDC provider discovery](https://github.com/matrix-org/matrix-spec-proposals/pull/2965) to discover the configured provider.
-Where OIDC native login flow is enabled and valid MSC2965 configuration is discovered, OIDC native login flow will be the only login option offered.
+Where a valid MSC2965 configuration is discovered, OIDC native login flow will be the only login option offered.
 Element Web will attempt to [dynamically register](https://openid.net/specs/openid-connect-registration-1_0.html) with the configured OP.
 Then, authentication will be completed [as described here](https://areweoidcyet.com/client-implementation-guide/).
 

docs/playwright.md

@@ -2,10 +2,10 @@
 
 ## Contents
 
--   How to run the tests
--   How the tests work
--   How to write great Playwright tests
--   Visual testing
+- How to run the tests
+- How the tests work
+- How to write great Playwright tests
+- Visual testing
 
 ## Running the Tests
 
@@ -23,21 +23,19 @@ element-web project is fine: leave it running it a different terminal as you wou
 when developing. Alternatively if you followed the development set up from element-web then
 Playwright will be capable of running the webserver on its own if it isn't already running.
 
-The tests use Docker to launch Homeserver (Synapse or Dendrite) instances to test against, so you'll also
-need to have Docker installed and working in order to run the Playwright tests.
+The tests use [testcontainers](https://node.testcontainers.org/) to launch Homeserver (Synapse or Dendrite)
+instances to test against, so you'll also need to one of the
+[supported container runtimes](#supporter-container-runtimes)
+installed and working in order to run the Playwright tests.
 
 There are a few different ways to run the tests yourself. The simplest is to run:
 
 ```shell
-docker pull ghcr.io/element-hq/synapse:develop
 yarn run test:playwright
 ```
 
 This will run the Playwright tests once, non-interactively.
 
-Note: you don't need to run the `docker pull` command every time, but you should
-do it regularly to ensure you are running against an up-to-date Synapse.
-
 You can also run individual tests this way too, as you'd expect:
 
 ```shell
@@ -53,41 +51,36 @@ yarn run test:playwright:open --headed --debug
 
 See more command line options at <https://playwright.dev/docs/test-cli>.
 
-### Running with Rust cryptography
+## Projects
 
-`matrix-js-sdk` is currently in the
-[process](https://github.com/vector-im/element-web/issues/21972) of being
-updated to replace its end-to-end encryption implementation to use the [Matrix
-Rust SDK](https://github.com/matrix-org/matrix-rust-sdk). This is not currently
-enabled by default, but it is possible to have Playwright configure Element to use
-the Rust crypto implementation by passing `--project="Rust Crypto"` or using
-the top left options in open mode.
+By default, Playwright will run all "Projects", this means tests will run against Chrome, Firefox and "Safari" (Webkit).
+We only run tests against Chrome in pull request CI, but all projects in the merge queue.
+Some tests are excluded from running on certain browsers due to incompatibilities in the test harness.
 
 ## How the Tests Work
 
-Everything Playwright-related lives in the `playwright/` subdirectory of react-sdk
+Everything Playwright-related lives in the `playwright/` subdirectory
 as is typical for Playwright tests. Likewise, tests live in `playwright/e2e`.
 
-`playwright/plugins/homeservers` contains Playwright plugins that starts instances
-of Synapse/Dendrite in Docker containers. These servers are what Element-web runs
-against in the tests.
+`playwright/testcontainers` contains the testcontainers which start instances
+of Synapse/Dendrite. These servers are what Element-web runs against in the tests.
 
 Synapse can be launched with different configurations in order to test element
-in different configurations. `playwright/plugins/homeserver/synapse/templates`
-contains template configuration files for each different configuration.
+in different configurations. You can specify `synapseConfig` as such:
 
-Each test suite can then launch whatever Synapse instances it needs in whatever
-configurations.
+```typescript
+test.use({
+    synapseConfig: {
+        // The config options to pass to the Synapse instance
+    },
+});
+```
 
-Note that although tests should stop the Homeserver instances after running and the
-plugin also stop any remaining instances after all tests have run, it is possible
-to be left with some stray containers if, for example, you terminate a test such
-that the `after()` does not run and also exit Playwright uncleanly. All the containers
-it starts are prefixed, so they are easy to recognise. They can be removed safely.
-
-After each test run, logs from the Synapse instances are saved in `playwright/logs/synapse`
-with each instance in a separate directory named after its ID. These logs are removed
-at the start of each test run.
+The appropriate homeserver will be launched by the Playwright worker and reused for all tests which match the worker configuration.
+Due to homeservers being reused between tests, please use unique names for any rooms put into the room directory as
+they may be visible from other tests, the suggested approach is to use `testInfo.testId` within the name or lodash's uniqueId.
+We remove public rooms from the room directory between tests but deleting users doesn't have a homeserver agnostic solution.
+The logs from testcontainers will be attached to any reports output from Playwright.
 
 ## Writing Tests
 
@@ -117,25 +110,6 @@ Homeserver instances should be reasonably cheap to start (you may see the first
 while as it pulls the Docker image).
 You do not need to explicitly clean up the instance as it will be cleaned up by the fixture.
 
-### Synapse Config Templates
-
-When a Synapse instance is started, it's given a config generated from one of the config
-templates in `playwright/plugins/homeserver/synapse/templates`. There are a couple of special files
-in these templates:
-
--   `homeserver.yaml`:
-    Template substitution happens in this file. Template variables are:
-    -   `REGISTRATION_SECRET`: The secret used to register users via the REST API.
-    -   `MACAROON_SECRET_KEY`: Generated each time for security
-    -   `FORM_SECRET`: Generated each time for security
-    -   `PUBLIC_BASEURL`: The localhost url + port combination the synapse is accessible at
--   `localhost.signing.key`: A signing key is auto-generated and saved to this file.
-    Config templates should not contain a signing key and instead assume that one will exist
-    in this file.
-
-All other files in the template are copied recursively to `/data/`, so the file `foo.html`
-in a template can be referenced in the config as `/data/foo.html`.
-
 ### Logging In
 
 We again heavily leverage the magic of [Playwright fixtures](https://playwright.dev/docs/test-fixtures).
@@ -217,3 +191,27 @@ instead of the native `toHaveScreenshot`.
 
 If you are running Linux and are unfortunate that the screenshots are not rendering identically,
 you may wish to specify `--ignore-snapshots` and rely on Docker to render them for you.
+
+## Test Tags
+
+We use test tags to categorise tests for running subsets more efficiently.
+
+- `@mergequeue`: Tests that are slow or flaky and cover areas of the app we update seldom, should not be run on every PR commit but will be run in the Merge Queue.
+- `@screenshot`: Tests that use `toMatchScreenshot` to speed up a run of `test:playwright:screenshots`. A test with this tag must not also have the `@mergequeue` tag as this would cause false positives in the stale screenshot detection.
+- `@no-$project`: Tests which are unsupported in $Project. These tests will be skipped when running in $Project.
+
+Anything testing Matrix media will need to have `@no-firefox` and `@no-webkit` as those rely on the service worker which
+has to be disabled in Playwright on Firefox & Webkit to retain routing functionality.
+Anything testing VoIP/microphone will need to have `@no-webkit` as fake microphone functionality is not available
+there at this time.
+
+If you wish to run all tests in a PR, you can give it the label `X-Run-All-Tests`.
+
+## Supporter container runtimes
+
+We use testcontainers to spin up various instances of Synapse, Matrix Authentication Service, and more.
+It supports Docker out of the box but also has support for Podman, Colima, Rancher, you just need to follow some instructions to achieve it:
+https://node.testcontainers.org/supported-container-runtimes/
+
+If you are running under Colima, you may need to set the environment variable `TMPDIR` to `/tmp/colima` or a path
+within `$HOME` to allow bind mounting temporary directories into the Docker containers.

docs/release.md

@@ -82,28 +82,28 @@ This label will automagically convert to `X-Release-Blocker` at the conclusion o
 
 This release process revolves around our main repositories:
 
--   [Element Desktop](https://github.com/element-hq/element-desktop/)
--   [Element Web](https://github.com/element-hq/element-web/)
--   [Matrix JS SDK](https://github.com/matrix-org/matrix-js-sdk/)
+- [Element Desktop](https://github.com/element-hq/element-desktop/)
+- [Element Web](https://github.com/element-hq/element-web/)
+- [Matrix JS SDK](https://github.com/matrix-org/matrix-js-sdk/)
 
 We own other repositories, but they have more ad-hoc releases and are not part of the bi-weekly cycle:
 
--   https://github.com/matrix-org/matrix-web-i18n/
--   https://github.com/matrix-org/matrix-react-sdk-module-api
+- https://github.com/matrix-org/matrix-web-i18n/
+- https://github.com/matrix-org/matrix-react-sdk-module-api
 
 </blockquote></details>
 
 <details><summary><h1>Prerequisites</h1></summary><blockquote>
 
--   You must be part of the 2 Releasers GitHub groups:
-    -   <https://github.com/orgs/element-hq/teams/element-web-releasers>
-    -   <https://github.com/orgs/matrix-org/teams/element-web-releasers>
--   You will need access to the **VPN** ([docs](https://gitlab.matrix.org/new-vector/internal/-/wikis/SRE/Tailscale)) to be able to follow the instructions under Deploy below.
--   You will need the ability to **SSH** in to the production machines to be able to follow the instructions under Deploy below. Ensure that your SSH key has a non-empty passphrase, and you registered your SSH key with Ops. Log a ticket at https://github.com/matrix-org/matrix-ansible-private and ask for:
-    -   Two-factor authentication to be set up on your SSH key. (This is needed to get access to production).
-    -   SSH access to `horme` (staging.element.io and app.element.io)
-    -   Permission to sudo on horme as the user `element`
--   You need "**jumphost**" configuration in your local `~/.ssh/config`. This should have been set up as part of your onboarding.
+- You must be part of the 2 Releasers GitHub groups:
+    - <https://github.com/orgs/element-hq/teams/element-web-releasers>
+    - <https://github.com/orgs/matrix-org/teams/element-web-releasers>
+- You will need access to the **VPN** ([docs](https://gitlab.matrix.org/new-vector/internal/-/wikis/SRE/Tailscale)) to be able to follow the instructions under Deploy below.
+- You will need the ability to **SSH** in to the production machines to be able to follow the instructions under Deploy below. Ensure that your SSH key has a non-empty passphrase, and you registered your SSH key with Ops. Log a ticket at https://github.com/matrix-org/matrix-ansible-private and ask for:
+    - Two-factor authentication to be set up on your SSH key. (This is needed to get access to production).
+    - SSH access to `horme` (staging.element.io and app.element.io)
+    - Permission to sudo on horme as the user `element`
+- You need "**jumphost**" configuration in your local `~/.ssh/config`. This should have been set up as part of your onboarding.
 
 </blockquote></details>
 
@@ -177,7 +177,7 @@ For security, you may wish to merge the security advisory private fork or apply
 It is worth noting that at the end of the Final/Hotfix/Security release `staging` is merged to `master` which is merged back into `develop` -
 this means that any commit which goes to `staging` will eventually make its way back to the default branch.
 
--   [ ] The staging branch is prepared
+- [ ] The staging branch is prepared
 
 # Releasing
 
@@ -192,21 +192,21 @@ switched back to the version of the dependency from the master branch to not lea
 
 ### Matrix JS SDK
 
--   [ ] Check the draft release which has been generated by [the automation](https://github.com/matrix-org/matrix-js-sdk/actions/workflows/release-drafter.yml)
--   [ ] Make any changes to the release notes in the draft release as are necessary - **Do not click publish, only save draft**
--   [ ] Kick off a release using [the automation](https://github.com/matrix-org/matrix-js-sdk/actions/workflows/release.yml) - making sure to select the right type of release. For anything other than an RC: choose final. You should not need to ever switch off either of the Publishing options.
+- [ ] Check the draft release which has been generated by [the automation](https://github.com/matrix-org/matrix-js-sdk/actions/workflows/release-drafter.yml)
+- [ ] Make any changes to the release notes in the draft release as are necessary - **Do not click publish, only save draft**
+- [ ] Kick off a release using [the automation](https://github.com/matrix-org/matrix-js-sdk/actions/workflows/release.yml) - making sure to select the right type of release. For anything other than an RC: choose final. You should not need to ever switch off either of the Publishing options.
 
 ### Element Web
 
--   [ ] Check the draft release which has been generated by [the automation](https://github.com/element-hq/element-web/actions/workflows/release-drafter.yml)
--   [ ] Make any changes to the release notes in the draft release as are necessary - **Do not click publish, only save draft**
--   [ ] Kick off a release using [the automation](https://github.com/element-hq/element-web/actions/workflows/release.yml) - making sure to select the right type of release. For anything other than an RC: choose final. You should not need to ever switch off either of the Publishing options.
+- [ ] Check the draft release which has been generated by [the automation](https://github.com/element-hq/element-web/actions/workflows/release-drafter.yml)
+- [ ] Make any changes to the release notes in the draft release as are necessary - **Do not click publish, only save draft**
+- [ ] Kick off a release using [the automation](https://github.com/element-hq/element-web/actions/workflows/release.yml) - making sure to select the right type of release. For anything other than an RC: choose final. You should not need to ever switch off either of the Publishing options.
 
 ### Element Desktop
 
--   [ ] Check the draft release which has been generated by [the automation](https://github.com/element-hq/element-desktop/actions/workflows/release-drafter.yml)
--   [ ] Make any changes to the release notes in the draft release as are necessary - **Do not click publish, only save draft**
--   [ ] Kick off a release using [the automation](https://github.com/element-hq/element-desktop/actions/workflows/release.yml) - making sure to select the right type of release. For anything other than an RC: choose final. You should not need to ever switch off either of the Publishing options.
+- [ ] Check the draft release which has been generated by [the automation](https://github.com/element-hq/element-desktop/actions/workflows/release-drafter.yml)
+- [ ] Make any changes to the release notes in the draft release as are necessary - **Do not click publish, only save draft**
+- [ ] Kick off a release using [the automation](https://github.com/element-hq/element-desktop/actions/workflows/release.yml) - making sure to select the right type of release. For anything other than an RC: choose final. You should not need to ever switch off either of the Publishing options.
 
 # Deploying
 
@@ -214,23 +214,23 @@ We ship the SDKs to npm, this happens as part of the release process.
 We ship Element Web to dockerhub, `*.element.io`, and packages.element.io.
 We ship Element Desktop to packages.element.io.
 
--   [ ] Check that element-web has shipped to dockerhub
--   [ ] Deploy staging.element.io. [See docs.](https://handbook.element.io/books/element-web-team/page/deploying-appstagingelementio)
--   [ ] Test staging.element.io
+- [ ] Check that element-web has shipped to dockerhub
+- [ ] Deploy staging.element.io. [See docs.](https://handbook.element.io/books/element-web-team/page/deploying-appstagingelementio)
+- [ ] Test staging.element.io
 
 For final releases additionally do these steps:
 
--   [ ] Deploy app.element.io. [See docs.](https://handbook.element.io/books/element-web-team/page/deploying-appstagingelementio)
--   [ ] Test app.element.io
--   [ ] Ensure Element Web package has shipped to packages.element.io
--   [ ] Ensure Element Desktop packages have shipped to packages.element.io
+- [ ] Deploy app.element.io. [See docs.](https://handbook.element.io/books/element-web-team/page/deploying-appstagingelementio)
+- [ ] Test app.element.io
+- [ ] Ensure Element Web package has shipped to packages.element.io
+- [ ] Ensure Element Desktop packages have shipped to packages.element.io
 
 # Housekeeping
 
 We have some manual housekeeping to do in order to prepare for the next release.
 
--   [ ] Update topics using [the automation](https://github.com/element-hq/element-web/actions/workflows/update-topics.yaml). It will autodetect the current latest version. Don't forget the date you supply should be e.g. September 5th (including the "th") for the script to work.
--   [ ] Announce the release in [#element-web-announcements:matrix.org](https://matrix.to/#/#element-web-announcements:matrix.org)
+- [ ] Update topics using [the automation](https://github.com/element-hq/element-web/actions/workflows/update-topics.yaml). It will autodetect the current latest version. Don't forget the date you supply should be e.g. September 5th (including the "th") for the script to work.
+- [ ] Announce the release in [#element-web-announcements:matrix.org](https://matrix.to/#/#element-web-announcements:matrix.org)
 
 <details><summary>(show)</summary>
 
@@ -246,15 +246,15 @@ With wording like:
 
 For the first RC of a given release cycle do these steps:
 
--   [ ] Go to the [matrix-js-sdk Renovate dashboard](https://github.com/matrix-org/matrix-js-sdk/issues/2406) and click the checkbox to create/update its PRs.
+- [ ] Go to the [matrix-js-sdk Renovate dashboard](https://github.com/matrix-org/matrix-js-sdk/issues/2406) and click the checkbox to create/update its PRs.
 
--   [ ] Go to the [element-web Renovate dashboard](https://github.com/element-hq/element-web/issues/22941) and click the checkbox to create/update its PRs.
+- [ ] Go to the [element-web Renovate dashboard](https://github.com/element-hq/element-web/issues/22941) and click the checkbox to create/update its PRs.
 
--   [ ] Go to the [element-desktop Renovate dashboard](https://github.com/element-hq/element-desktop/issues/465) and click the checkbox to create/update its PRs.
+- [ ] Go to the [element-desktop Renovate dashboard](https://github.com/element-hq/element-desktop/issues/465) and click the checkbox to create/update its PRs.
 
--   [ ] Later, check back and merge the PRs that succeeded to build. The ones that failed will get picked up by the [maintainer](https://docs.google.com/document/d/1V5VINWXATMpz9UBw4IKmVVB8aw3CxM0Jt7igtHnDfSk/edit#).
+- [ ] Later, check back and merge the PRs that succeeded to build. The ones that failed will get picked up by the [maintainer](https://docs.google.com/document/d/1V5VINWXATMpz9UBw4IKmVVB8aw3CxM0Jt7igtHnDfSk/edit#).
 
 For final releases additionally do these steps:
 
--   [ ] Archive done column on the [team board](https://github.com/orgs/element-hq/projects/67/views/34) _Note: this should be automated_
--   [ ] Add entry to the [milestones diary](https://docs.google.com/document/d/1cpRFJdfNCo2Ps6jqzQmatzbYEToSrQpyBug0aP_iwZE/edit#heading=h.6y55fw4t283z). The document says only to add significant releases, but we add all of them just in case.
+- [ ] Archive done column on the [team board](https://github.com/orgs/element-hq/projects/67/views/34) _Note: this should be automated_
+- [ ] Add entry to the [milestones diary](https://docs.google.com/document/d/1cpRFJdfNCo2Ps6jqzQmatzbYEToSrQpyBug0aP_iwZE/edit#heading=h.6y55fw4t283z). The document says only to add significant releases, but we add all of them just in case.

docs/review.md

@@ -10,53 +10,53 @@ When reviewing code, here are some things we look for and also things we avoid:
 
 ### We review for
 
--   Correctness
--   Performance
--   Accessibility
--   Security
--   Quality via automated and manual testing
--   Comments and documentation where needed
--   Sharing knowledge of different areas among the team
--   Ensuring it's something we're comfortable maintaining for the long term
--   Progress indicators and local echo where appropriate with network activity
+- Correctness
+- Performance
+- Accessibility
+- Security
+- Quality via automated and manual testing
+- Comments and documentation where needed
+- Sharing knowledge of different areas among the team
+- Ensuring it's something we're comfortable maintaining for the long term
+- Progress indicators and local echo where appropriate with network activity
 
 ### We should avoid
 
--   Style nits that are already handled by the linter
--   Dramatically increasing scope
+- Style nits that are already handled by the linter
+- Dramatically increasing scope
 
 ### Good practices
 
--   Use empathetic language
-    -   See also [Mindful Communication in Code
-        Reviews](https://kickstarter.engineering/a-guide-to-mindful-communication-in-code-reviews-48aab5282e5e)
-        and [How to Do Code Reviews Like a Human](https://mtlynch.io/human-code-reviews-1/)
--   Authors should prefer smaller commits for easier reviewing and bisection
--   Reviewers should be explicit about required versus optional changes
-    -   Reviews are conversations and the PR author should feel comfortable
-        discussing and pushing back on changes before making them
--   Reviewers are encouraged to ask for tests where they believe it is reasonable
--   Core team should lead by example through their tone and language
--   Take the time to thank and point out good code changes
--   Using softer language like "please" and "what do you think?" goes a long way
-    towards making others feel like colleagues working towards a common goal
+- Use empathetic language
+    - See also [Mindful Communication in Code
+      Reviews](https://kickstarter.engineering/a-guide-to-mindful-communication-in-code-reviews-48aab5282e5e)
+      and [How to Do Code Reviews Like a Human](https://mtlynch.io/human-code-reviews-1/)
+- Authors should prefer smaller commits for easier reviewing and bisection
+- Reviewers should be explicit about required versus optional changes
+    - Reviews are conversations and the PR author should feel comfortable
+      discussing and pushing back on changes before making them
+- Reviewers are encouraged to ask for tests where they believe it is reasonable
+- Core team should lead by example through their tone and language
+- Take the time to thank and point out good code changes
+- Using softer language like "please" and "what do you think?" goes a long way
+  towards making others feel like colleagues working towards a common goal
 
 ### Workflow
 
--   Authors should request review from the element-web team by default (if someone on
-    the team is clearly the expert in an area, a direct review request to them may
-    be more appropriate)
--   Reviewers should remove the team review request and request review from
-    themselves when starting a review to avoid double review
--   If there are multiple related PRs authors should reference each of the PRs in
-    the others before requesting review. Reviewers might start reviewing from
-    different places and could miss other required PRs.
--   Avoid force pushing to a PR after the first round of review
--   Use the GitHub default of merge commits when landing (avoid alternate options
-    like squash or rebase)
--   PR author merges after review (assuming they have write access)
--   Assign issues only when in progress to indicate to others what can be picked
-    up
+- Authors should request review from the element-web team by default (if someone on
+  the team is clearly the expert in an area, a direct review request to them may
+  be more appropriate)
+- Reviewers should remove the team review request and request review from
+  themselves when starting a review to avoid double review
+- If there are multiple related PRs authors should reference each of the PRs in
+  the others before requesting review. Reviewers might start reviewing from
+  different places and could miss other required PRs.
+- Avoid force pushing to a PR after the first round of review
+- Use the GitHub default of merge commits when landing (avoid alternate options
+  like squash or rebase)
+- PR author merges after review (assuming they have write access)
+- Assign issues only when in progress to indicate to others what can be picked
+  up
 
 ## Code Quality
 
@@ -64,10 +64,10 @@ In the past, we have occasionally written different kinds of tests for
 Element and the SDKs, but it hasn't been a consistent focus. Going forward, we'd
 like to change that.
 
--   For new features, code reviewers will expect some form of automated testing to
-    be included by default
--   For bug fixes, regression tests are of course great to have, but we don't want
-    to block fixes on this, so we won't require them at this time
+- For new features, code reviewers will expect some form of automated testing to
+  be included by default
+- For bug fixes, regression tests are of course great to have, but we don't want
+  to block fixes on this, so we won't require them at this time
 
 The above policy is not a strict rule, but instead it's meant to be a
 conversation between the author and reviewer. As an author, try to think about
@@ -104,10 +104,10 @@ perspective.
 In more detail, our usual process for changes that affect the UI or alter user
 functionality is:
 
--   For changes that will go live when merged, always flag Design and Product
-    teams as appropriate
--   For changes guarded by a feature flag, Design and Product review is not
-    required (though may still be useful) since we can continue tweaking
+- For changes that will go live when merged, always flag Design and Product
+  teams as appropriate
+- For changes guarded by a feature flag, Design and Product review is not
+  required (though may still be useful) since we can continue tweaking
 
 As it can be difficult to review design work from looking at just the changed
 files in a PR, a [preview site](./pr-previews.md) that includes your changes

docs/room-list-store.md

@@ -6,11 +6,11 @@ It's so complicated it needs its own README.
 
 Legend:
 
--   Orange = External event.
--   Purple = Deterministic flow.
--   Green = Algorithm definition.
--   Red = Exit condition/point.
--   Blue = Process definition.
+- Orange = External event.
+- Purple = Deterministic flow.
+- Green = Algorithm definition.
+- Red = Exit condition/point.
+- Blue = Process definition.
 
 ## Algorithms involved
 
@@ -68,14 +68,14 @@ simply get the manual sorting algorithm applied to them with no further involvem
 algorithm. There are 4 categories: Red, Grey, Bold, and Idle. Each has their own definition based off
 relative (perceived) importance to the user:
 
--   **Red**: The room has unread mentions waiting for the user.
--   **Grey**: The room has unread notifications waiting for the user. Notifications are simply unread
-    messages which cause a push notification or badge count. Typically, this is the default as rooms get
-    set to 'All Messages'.
--   **Bold**: The room has unread messages waiting for the user. Essentially this is a grey room without
-    a badge/notification count (or 'Mentions Only'/'Muted').
--   **Idle**: No useful (see definition of useful above) activity has occurred in the room since the user
-    last read it.
+- **Red**: The room has unread mentions waiting for the user.
+- **Grey**: The room has unread notifications waiting for the user. Notifications are simply unread
+  messages which cause a push notification or badge count. Typically, this is the default as rooms get
+  set to 'All Messages'.
+- **Bold**: The room has unread messages waiting for the user. Essentially this is a grey room without
+  a badge/notification count (or 'Mentions Only'/'Muted').
+- **Idle**: No useful (see definition of useful above) activity has occurred in the room since the user
+  last read it.
 
 Conveniently, each tag gets ordered by those categories as presented: red rooms appear above grey, grey
 above bold, etc.

docs/settings.md

@@ -10,13 +10,13 @@ of dealing with the different levels and exposes easy to use getters and setters
 Granular Settings rely on a series of known levels in order to use the correct value for the scenario. These levels, in
 order of priority, are:
 
--   `device` - The current user's device
--   `room-device` - The current user's device, but only when in a specific room
--   `room-account` - The current user's account, but only when in a specific room
--   `account` - The current user's account
--   `room` - A specific room (setting for all members of the room)
--   `config` - Values are defined by the `setting_defaults` key (usually) in `config.json`
--   `default` - The hardcoded default for the settings
+- `device` - The current user's device
+- `room-device` - The current user's device, but only when in a specific room
+- `room-account` - The current user's account, but only when in a specific room
+- `account` - The current user's account
+- `room` - A specific room (setting for all members of the room)
+- `config` - Values are defined by the `setting_defaults` key (usually) in `config.json`
+- `default` - The hardcoded default for the settings
 
 Individual settings may control which levels are appropriate for them as part of the defaults. This is often to ensure
 that room administrators cannot force account-only settings upon participants.

docs/translating-dev.md

@@ -2,9 +2,9 @@
 
 ## Requirements
 
--   A working [Development Setup](../README.md#setting-up-a-dev-environment)
--   Latest LTS version of Node.js installed
--   Be able to understand English
+- A working [Development Setup](../README.md#setting-up-a-dev-environment)
+- Latest LTS version of Node.js installed
+- Be able to understand English
 
 ## Translating strings vs. marking strings for translation
 
@@ -65,17 +65,17 @@ There you can also require all translations to be redone if the meaning of the s
 1. Add it to the array in `_t` for example `_t(TKEY, {variable: this.variable})`
 1. Add the variable inside the string. The syntax for variables is `%(variable)s`. Please note the _s_ at the end. The name of the variable has to match the previous used name.
 
--   You can use the special `count` variable to choose between multiple versions of the same string, in order to get the correct pluralization. E.g. `_t('You have %(count)s new messages', { count: 2 })` would show 'You have 2 new messages', while `_t('You have %(count)s new messages', { count: 1 })` would show 'You have one new message' (assuming a singular version of the string has been added to the translation file. See above). Passing in `count` is much preferred over having an if-statement choose the correct string to use, because some languages have much more complicated plural rules than english (e.g. they might need a completely different form if there are three things rather than two).
--   If you want to translate text that includes e.g. hyperlinks or other HTML you have to also use tag substitution, e.g. `_t('<a>Click here!</a>', {}, { 'a': (sub) => <a>{sub}</a> })`. If you don't do the tag substitution you will end up showing literally '<a>' rather than making a hyperlink.
--   You can also use React components with normal variable substitution if you want to insert HTML markup, e.g. `_t('Your email address is %(emailAddress)s', { emailAddress: <i>{userEmailAddress}</i> })`.
+- You can use the special `count` variable to choose between multiple versions of the same string, in order to get the correct pluralization. E.g. `_t('You have %(count)s new messages', { count: 2 })` would show 'You have 2 new messages', while `_t('You have %(count)s new messages', { count: 1 })` would show 'You have one new message' (assuming a singular version of the string has been added to the translation file. See above). Passing in `count` is much preferred over having an if-statement choose the correct string to use, because some languages have much more complicated plural rules than english (e.g. they might need a completely different form if there are three things rather than two).
+- If you want to translate text that includes e.g. hyperlinks or other HTML you have to also use tag substitution, e.g. `_t('<a>Click here!</a>', {}, { 'a': (sub) => <a>{sub}</a> })`. If you don't do the tag substitution you will end up showing literally '<a>' rather than making a hyperlink.
+- You can also use React components with normal variable substitution if you want to insert HTML markup, e.g. `_t('Your email address is %(emailAddress)s', { emailAddress: <i>{userEmailAddress}</i> })`.
 
 ## Things to know/Style Guides
 
--   Do not use `_t()` inside `getDefaultProps`: the translations aren't loaded when `getDefaultProps` is called, leading to missing translations. Use `_td()` to indicate that `_t()` will be called on the string later.
--   If using translated strings as constants, translated strings can't be in constants loaded at class-load time since the translations won't be loaded. Mark the strings using `_td()` instead and perform the actual translation later.
--   If a string is presented in the UI with punctuation like a full stop, include this in the translation strings, since punctuation varies between languages too.
--   Avoid "translation in parts", i.e. concatenating translated strings or using translated strings in variable substitutions. Context is important for translations, and translating partial strings this way is simply not always possible.
--   Concatenating strings often also introduces an implicit assumption about word order (e.g. that the subject of the sentence comes first), which is incorrect for many languages.
--   Translation 'smell test': If you have a string that does not begin with a capital letter (is not the start of a sentence) or it ends with e.g. ':' or a preposition (e.g. 'to') you should recheck that you are not trying to translate a partial sentence.
--   If you have multiple strings, that are almost identical, except some part (e.g. a word or two) it is still better to translate the full sentence multiple times. It may seem like inefficient repetition, but unlike programming where you try to minimize repetition, translation is much faster if you have many, full, clear, sentences to work with, rather than fewer, but incomplete sentence fragments.
--   Don't forget curly braces when you assign an expression to JSX attributes in the render method)
+- Do not use `_t()` inside `getDefaultProps`: the translations aren't loaded when `getDefaultProps` is called, leading to missing translations. Use `_td()` to indicate that `_t()` will be called on the string later.
+- If using translated strings as constants, translated strings can't be in constants loaded at class-load time since the translations won't be loaded. Mark the strings using `_td()` instead and perform the actual translation later.
+- If a string is presented in the UI with punctuation like a full stop, include this in the translation strings, since punctuation varies between languages too.
+- Avoid "translation in parts", i.e. concatenating translated strings or using translated strings in variable substitutions. Context is important for translations, and translating partial strings this way is simply not always possible.
+- Concatenating strings often also introduces an implicit assumption about word order (e.g. that the subject of the sentence comes first), which is incorrect for many languages.
+- Translation 'smell test': If you have a string that does not begin with a capital letter (is not the start of a sentence) or it ends with e.g. ':' or a preposition (e.g. 'to') you should recheck that you are not trying to translate a partial sentence.
+- If you have multiple strings, that are almost identical, except some part (e.g. a word or two) it is still better to translate the full sentence multiple times. It may seem like inefficient repetition, but unlike programming where you try to minimize repetition, translation is much faster if you have many, full, clear, sentences to work with, rather than fewer, but incomplete sentence fragments.
+- Don't forget curly braces when you assign an expression to JSX attributes in the render method)

docs/translating.md

@@ -2,9 +2,9 @@
 
 ## Requirements
 
--   Web Browser
--   Be able to understand English
--   Be able to understand the language you want to translate Element into
+- Web Browser
+- Be able to understand English
+- Be able to understand the language you want to translate Element into
 
 ## Join #element-translations:matrix.org
 

jest.config.ts

@@ -2,7 +2,7 @@
 Copyright 2024 New Vector Ltd.
 Copyright 2023 The Matrix.org Foundation C.I.C.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
@@ -14,6 +14,8 @@ const config: Config = {
     testEnvironment: "jsdom",
     testEnvironmentOptions: {
         url: "http://localhost/",
+        // This is needed to be able to load dual CJS/ESM WASM packages e.g. rust crypto & matrix-wywiwyg
+        customExportConditions: ["browser", "node"],
     },
     testMatch: ["<rootDir>/test/**/*-test.[tj]s?(x)"],
     globalSetup: "<rootDir>/test/globalSetup.ts",
@@ -32,13 +34,12 @@ const config: Config = {
         "decoderWorker\\.min\\.wasm": "<rootDir>/__mocks__/empty.js",
         "waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
         "context-filter-polyfill": "<rootDir>/__mocks__/empty.js",
-        "FontManager.ts": "<rootDir>/__mocks__/FontManager.js",
         "workers/(.+)Factory": "<rootDir>/__mocks__/workerFactoryMock.js",
         "^!!raw-loader!.*": "jest-raw-loader",
         "recorderWorkletFactory": "<rootDir>/__mocks__/empty.js",
         "^fetch-mock$": "<rootDir>/node_modules/fetch-mock",
     },
-    transformIgnorePatterns: ["/node_modules/(?!matrix-js-sdk).+$"],
+    transformIgnorePatterns: ["/node_modules/(?!(mime|matrix-js-sdk)).+$"],
     collectCoverageFrom: [
         "<rootDir>/src/**/*.{js,ts,tsx}",
         // getSessionLock is piped into a different JS context via stringification, and the coverage functionality is

knip.ts

@@ -0,0 +1,48 @@
+import { KnipConfig } from "knip";
+
+export default {
+    entry: [
+        "src/vector/index.ts",
+        "src/serviceworker/index.ts",
+        "src/workers/*.worker.ts",
+        "src/utils/exportUtils/exportJS.js",
+        "scripts/**",
+        "playwright/**",
+        "test/**",
+        "res/decoder-ring/**",
+        "res/jitsi_external_api.min.js",
+        "docs/**",
+        // Used by jest
+        "__mocks__/maplibre-gl.js",
+    ],
+    project: ["**/*.{js,ts,jsx,tsx}"],
+    ignore: [
+        // Keep for now
+        "src/hooks/useLocalStorageState.ts",
+        "src/components/views/elements/InfoTooltip.tsx",
+        "src/components/views/elements/StyledCheckbox.tsx",
+    ],
+    ignoreDependencies: [
+        // Required for `action-validator`
+        "@action-validator/*",
+        // Used for git pre-commit hooks
+        "husky",
+        // Used by jest
+        "babel-jest",
+        // Used by babel
+        "@babel/runtime",
+        "@babel/plugin-transform-class-properties",
+        // Referenced in PCSS
+        "github-markdown-css",
+        // False positive
+        "sw.js",
+        // Used by webpack
+        "process",
+        "util",
+    ],
+    ignoreBinaries: [
+        // Used in scripts & workflows
+        "jq",
+    ],
+    ignoreExportsUsedInFile: true,
+} satisfies KnipConfig;

module_system/BuildConfig.ts

@@ -1,7 +1,7 @@
 /*
 Copyright 2022-2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 

module_system/installer.ts

@@ -1,7 +1,7 @@
 /*
 Copyright 2022-2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 

module_system/scripts/install.ts

@@ -1,7 +1,7 @@
 /*
 Copyright 2022-2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 

package.json

@@ -1,13 +1,13 @@
 {
     "name": "element-web",
-    "version": "1.11.84",
+    "version": "1.11.90",
     "description": "A feature-rich client for Matrix.org",
     "author": "New Vector Ltd.",
     "repository": {
         "type": "git",
         "url": "https://github.com/element-hq/element-web"
     },
-    "license": "AGPL-3.0-only OR GPL-3.0-only",
+    "license": "SEE LICENSE IN README.md",
     "files": [
         "lib",
         "res",
@@ -35,7 +35,7 @@
         "i18n:lint": "matrix-i18n-lint && prettier --log-level=silent --write src/i18n/strings/ --ignore-path /dev/null",
         "i18n:diff": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && yarn i18n && matrix-compare-i18n-files src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
         "make-component": "node scripts/make-react-component.js",
-        "rethemendex": "res/css/rethemendex.sh",
+        "rethemendex": "./res/css/rethemendex.sh",
         "clean": "rimraf lib webapp",
         "build": "yarn clean && yarn build:genfiles && yarn build:bundle",
         "build-stats": "yarn clean && yarn build:genfiles && yarn build:bundle-stats",
@@ -45,58 +45,59 @@
         "build:bundle": "webpack --progress --mode production",
         "build:bundle-stats": "webpack --progress --mode production --json > webpack-stats.json",
         "build:module_system": "ts-node --project ./tsconfig.module_system.json module_system/scripts/install.ts",
-        "dist": "scripts/package.sh",
+        "dist": "./scripts/package.sh",
         "start": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n modules,res \"yarn build:module_system\" \"yarn build:res\" && concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"yarn start:res\" \"yarn start:js\"",
         "start:https": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"yarn start:res\" \"yarn start:js --server-type https\"",
         "start:res": "ts-node scripts/copy-res.ts -w",
         "start:js": "webpack serve --output-path webapp --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js --mode development",
         "lint": "yarn lint:types && yarn lint:js && yarn lint:style && yarn lint:workflows",
-        "lint:js": "yarn lint:js:src && yarn lint:js:module_system",
-        "lint:js:src": "eslint --max-warnings 0 src test playwright && prettier --check .",
-        "lint:js:module_system": "eslint --max-warnings 0 --config .eslintrc-module_system.js module_system",
-        "lint:js-fix": "yarn lint:js-fix:src && yarn lint:js-fix:module_system",
-        "lint:js-fix:src": "prettier --log-level=warn --write . && eslint --fix src test playwright",
-        "lint:js-fix:module_system": "eslint --fix --config .eslintrc-module_system.js module_system",
+        "lint:js": "eslint --max-warnings 0 src test playwright module_system && prettier --check .",
+        "lint:js-fix": "prettier --log-level=warn --write . && eslint --fix src test playwright module_system",
         "lint:types": "yarn lint:types:src && yarn lint:types:module_system",
         "lint:types:src": "tsc --noEmit --jsx react && tsc --noEmit --jsx react -p playwright",
         "lint:types:module_system": "tsc --noEmit --project ./tsconfig.module_system.json",
         "lint:style": "stylelint \"res/css/**/*.pcss\"",
         "lint:workflows": "find .github/workflows -type f \\( -iname '*.yaml' -o -iname '*.yml' \\) | xargs -I {} sh -c 'echo \"Linting {}\"; action-validator \"{}\"'",
+        "lint:knip": "knip",
         "test": "jest",
         "test:playwright": "playwright test",
         "test:playwright:open": "yarn test:playwright --ui",
         "test:playwright:screenshots": "yarn test:playwright:screenshots:build && yarn test:playwright:screenshots:run",
         "test:playwright:screenshots:build": "docker build playwright -t element-web-playwright",
-        "test:playwright:screenshots:run": "docker run --rm --network host -e BASE_URL -e CI -v $(pwd):/work/ -v $(node -e 'console.log(require(`path`).dirname(require.resolve(`matrix-js-sdk/package.json`)))'):/work/node_modules/matrix-js-sdk -v /var/run/docker.sock:/var/run/docker.sock -v /tmp/:/tmp/ -it element-web-playwright",
+        "test:playwright:screenshots:run": "docker run --rm --network host -e BASE_URL -e CI -v $(pwd):/work/ -v $(node -e 'console.log(require(`path`).dirname(require.resolve(`matrix-js-sdk/package.json`)))'):/work/node_modules/matrix-js-sdk -v /var/run/docker.sock:/var/run/docker.sock -v /tmp/:/tmp/ -it element-web-playwright --grep @screenshot --project=Chrome",
         "coverage": "yarn test --coverage",
-        "analyse:unused-exports": "ts-node ./scripts/analyse_unused_exports.ts",
         "analyse:webpack-bundles": "webpack-bundle-analyzer webpack-stats.json webapp",
         "update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js"
     },
     "resolutions": {
-        "@types/seedrandom": "3.0.8",
+        "@types/react": "18.3.18",
+        "@types/react-dom": "18.3.5",
         "oidc-client-ts": "3.1.0",
         "jwt-decode": "4.0.0",
-        "caniuse-lite": "1.0.30001668",
+        "caniuse-lite": "1.0.30001690",
         "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
         "wrap-ansi": "npm:wrap-ansi@^7.0.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
+        "@fontsource/inconsolata": "^5",
+        "@fontsource/inter": "^5",
         "@formatjs/intl-segmenter": "^11.5.7",
         "@matrix-org/analytics-events": "^0.29.0",
         "@matrix-org/emojibase-bindings": "^1.3.3",
         "@matrix-org/react-sdk-module-api": "^2.4.0",
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^8.0.0",
-        "@vector-im/compound-design-tokens": "^1.8.0",
-        "@vector-im/compound-web": "^7.1.0",
-        "@vector-im/matrix-wysiwyg": "2.37.13",
+        "@types/png-chunks-extract": "^1.0.2",
+        "@types/react-virtualized": "^9.21.30",
+        "@vector-im/compound-design-tokens": "^2.1.0",
+        "@vector-im/compound-web": "^7.5.0",
+        "@vector-im/matrix-wysiwyg": "2.38.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",
         "await-lock": "^2.1.0",
-        "bloom-filters": "^3.0.1",
+        "bloom-filters": "^3.0.3",
         "blurhash": "^2.0.3",
         "browserslist": "^4.23.2",
         "classnames": "^2.2.6",
@@ -118,33 +119,35 @@
         "jsrsasign": "^11.0.0",
         "jszip": "^3.7.0",
         "katex": "^0.16.0",
-        "linkify-element": "4.1.3",
-        "linkify-react": "4.1.3",
-        "linkify-string": "4.1.3",
-        "linkifyjs": "4.1.3",
+        "linkify-element": "4.2.0",
+        "linkify-react": "4.2.0",
+        "linkify-string": "4.2.0",
+        "linkifyjs": "4.2.0",
         "lodash": "^4.17.21",
-        "maplibre-gl": "^2.0.0",
+        "maplibre-gl": "^5.0.0",
         "matrix-encrypt-attachment": "^1.0.3",
         "matrix-events-sdk": "0.0.1",
         "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
-        "matrix-widget-api": "^1.9.0",
+        "matrix-widget-api": "^1.10.0",
         "memoize-one": "^6.0.0",
+        "mime": "^4.0.4",
         "oidc-client-ts": "^3.0.1",
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",
         "png-chunks-extract": "^1.0.0",
         "posthog-js": "1.157.2",
         "qrcode": "1.5.4",
-        "re-resizable": "6.9.17",
+        "re-resizable": "6.10.3",
         "react": "^18.3.1",
         "react-beautiful-dnd": "^13.1.0",
         "react-blurhash": "^0.3.0",
         "react-dom": "^18.3.1",
         "react-focus-lock": "^2.5.1",
         "react-transition-group": "^4.4.1",
+        "react-virtualized": "^9.22.5",
         "rfc4648": "^1.4.0",
         "sanitize-filename": "^1.6.3",
-        "sanitize-html": "2.13.1",
+        "sanitize-html": "2.14.0",
         "tar-js": "^0.3.0",
         "temporal-polyfill": "^0.2.5",
         "ua-parser-js": "^1.0.2",
@@ -155,11 +158,9 @@
         "@action-validator/cli": "^0.6.0",
         "@action-validator/core": "^0.6.0",
         "@axe-core/playwright": "^4.8.1",
-        "@babel/cli": "^7.12.10",
         "@babel/core": "^7.12.10",
         "@babel/eslint-parser": "^7.12.10",
         "@babel/eslint-plugin": "^7.12.10",
-        "@babel/parser": "^7.12.11",
         "@babel/plugin-proposal-export-default-from": "^7.12.1",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@babel/plugin-transform-class-properties": "^7.12.1",
@@ -172,7 +173,6 @@
         "@babel/preset-env": "^7.12.11",
         "@babel/preset-react": "^7.12.10",
         "@babel/preset-typescript": "^7.12.7",
-        "@babel/register": "^7.12.10",
         "@babel/runtime": "^7.12.5",
         "@casualbot/jest-sonar-reporter": "2.2.7",
         "@peculiar/webcrypto": "^1.4.3",
@@ -181,19 +181,18 @@
         "@sentry/webpack-plugin": "^2.7.1",
         "@stylistic/eslint-plugin": "^2.9.0",
         "@svgr/webpack": "^8.0.0",
+        "@testcontainers/postgresql": "^10.16.0",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.4.8",
         "@testing-library/react": "^16.0.0",
         "@testing-library/user-event": "^14.5.2",
         "@types/commonmark": "^0.27.4",
-        "@types/content-type": "^1.1.5",
         "@types/counterpart": "^0.18.1",
         "@types/css-tree": "^2.3.8",
         "@types/diff-match-patch": "^1.0.32",
         "@types/escape-html": "^1.0.1",
         "@types/express": "^5.0.0",
         "@types/file-saver": "^2.0.3",
-        "@types/fs-extra": "^11.0.0",
         "@types/glob-to-regexp": "^0.4.1",
         "@types/jest": "29.5.12",
         "@types/jitsi-meet": "^2.0.2",
@@ -206,25 +205,21 @@
         "@types/node-fetch": "^2.6.2",
         "@types/pako": "^2.0.0",
         "@types/qrcode": "^1.3.5",
-        "@types/react": "18.3.3",
+        "@types/react": "18.3.18",
         "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "18.3.1",
+        "@types/react-dom": "18.3.5",
         "@types/react-transition-group": "^4.4.0",
         "@types/sanitize-html": "2.13.0",
-        "@types/sdp-transform": "^2.4.6",
-        "@types/seedrandom": "3.0.8",
         "@types/semver": "^7.5.8",
         "@types/tar-js": "^0.3.5",
         "@types/ua-parser-js": "^0.7.36",
         "@types/uuid": "^10.0.0",
-        "@typescript-eslint/eslint-plugin": "^8.0.0",
-        "@typescript-eslint/parser": "^8.0.0",
-        "axe-core": "4.10.2",
+        "@typescript-eslint/eslint-plugin": "^8.19.0",
+        "@typescript-eslint/parser": "^8.19.0",
         "babel-jest": "^29.0.0",
         "babel-loader": "^9.0.0",
         "babel-plugin-jsx-remove-data-test-id": "^3.0.0",
         "blob-polyfill": "^9.0.0",
-        "buffer": "^6.0.3",
         "chokidar": "^4.0.0",
         "concurrently": "^9.0.0",
         "copy-webpack-plugin": "^12.0.0",
@@ -242,6 +237,7 @@
         "eslint-plugin-jsx-a11y": "^6.5.1",
         "eslint-plugin-matrix-org": "^2.0.2",
         "eslint-plugin-react": "^7.28.0",
+        "eslint-plugin-react-compiler": "^19.0.0-beta-df7b47d-20241124",
         "eslint-plugin-react-hooks": "^5.0.0",
         "eslint-plugin-unicorn": "^56.0.0",
         "express": "^4.18.2",
@@ -249,7 +245,6 @@
         "fetch-mock": "9.11.0",
         "fetch-mock-jest": "^1.5.1",
         "file-loader": "^6.0.0",
-        "fs-extra": "^11.0.0",
         "glob": "^11.0.0",
         "html-webpack-plugin": "^5.5.3",
         "husky": "^9.0.0",
@@ -259,45 +254,48 @@
         "jest-mock": "^29.6.2",
         "jest-raw-loader": "^1.0.1",
         "jsqr": "^1.4.0",
+        "knip": "^5.36.2",
         "lint-staged": "^15.0.2",
         "mailhog": "^4.16.0",
-        "matrix-mock-request": "^2.5.0",
         "matrix-web-i18n": "^3.2.1",
-        "mini-css-extract-plugin": "2.9.0",
+        "mini-css-extract-plugin": "2.9.2",
         "minimist": "^1.2.6",
-        "mkdirp": "^3.0.0",
-        "mocha-junit-reporter": "^2.2.0",
         "modernizr": "^3.12.0",
         "node-fetch": "^2.6.7",
         "playwright-core": "^1.45.1",
-        "postcss": "8.4.38",
+        "postcss": "8.4.46",
         "postcss-easings": "^4.0.0",
         "postcss-hexrgba": "2.1.0",
         "postcss-import": "16.1.0",
         "postcss-loader": "8.1.1",
         "postcss-mixins": "^11.0.0",
-        "postcss-nested": "^6.0.0",
+        "postcss-nested": "^7.0.0",
         "postcss-preset-env": "^10.0.0",
         "postcss-scss": "^4.0.4",
         "postcss-simple-vars": "^7.0.1",
-        "prettier": "3.3.3",
+        "prettier": "3.4.2",
         "process": "^0.11.10",
         "raw-loader": "^4.0.2",
         "rimraf": "^6.0.0",
         "semver": "^7.5.2",
+        "source-map-loader": "^5.0.0",
+        "strip-ansi": "^7.1.0",
         "stylelint": "^16.1.0",
         "stylelint-config-standard": "^36.0.0",
         "stylelint-scss": "^6.0.0",
+        "stylelint-value-no-unknown-custom-properties": "^6.0.1",
         "terser-webpack-plugin": "^5.3.9",
+        "testcontainers": "^10.16.0",
         "ts-node": "^10.9.1",
-        "ts-prune": "^0.10.3",
-        "typescript": "5.6.3",
+        "typescript": "5.7.2",
         "util": "^0.12.5",
         "web-streams-polyfill": "^4.0.0",
         "webpack": "^5.89.0",
         "webpack-bundle-analyzer": "^4.8.0",
-        "webpack-cli": "^5.0.0",
+        "webpack-cli": "^6.0.0",
         "webpack-dev-server": "^5.0.0",
+        "webpack-retry-chunk-load-plugin": "^3.1.1",
+        "webpack-version-file-plugin": "^0.5.0",
         "yaml": "^2.3.3"
     },
     "@casualbot/jest-sonar-reporter": {

playwright.config.ts

@@ -2,24 +2,80 @@
 Copyright 2024 New Vector Ltd.
 Copyright 2023 The Matrix.org Foundation C.I.C.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import { defineConfig } from "@playwright/test";
+import { defineConfig, devices } from "@playwright/test";
+
+import { Options } from "./playwright/services";
 
 const baseURL = process.env["BASE_URL"] ?? "http://localhost:8080";
 
-export default defineConfig({
+const chromeProject = {
+    ...devices["Desktop Chrome"],
+    channel: "chromium",
+    permissions: ["clipboard-write", "clipboard-read", "microphone"],
+    launchOptions: {
+        args: ["--use-fake-ui-for-media-stream", "--use-fake-device-for-media-stream", "--mute-audio"],
+    },
+};
+
+export default defineConfig<Options>({
+    projects: [
+        {
+            name: "Chrome",
+            use: {
+                ...chromeProject,
+            },
+        },
+        {
+            name: "Firefox",
+            use: {
+                ...devices["Desktop Firefox"],
+                launchOptions: {
+                    firefoxUserPrefs: {
+                        "permissions.default.microphone": 1,
+                    },
+                },
+                // This is needed to work around an issue between Playwright routes, Firefox, and Service workers
+                // https://github.com/microsoft/playwright/issues/33561#issuecomment-2471642120
+                serviceWorkers: "block",
+            },
+            ignoreSnapshots: true,
+        },
+        {
+            name: "WebKit",
+            use: {
+                ...devices["Desktop Safari"],
+                // Seemingly WebKit has the same issue as Firefox in Playwright routes not working
+                // https://playwright.dev/docs/network#missing-network-events-and-service-workers
+                serviceWorkers: "block",
+            },
+            ignoreSnapshots: true,
+        },
+        {
+            name: "Dendrite",
+            use: {
+                ...chromeProject,
+                homeserverType: "dendrite",
+            },
+            ignoreSnapshots: true,
+        },
+        {
+            name: "Pinecone",
+            use: {
+                ...chromeProject,
+                homeserverType: "pinecone",
+            },
+            ignoreSnapshots: true,
+        },
+    ],
     use: {
         viewport: { width: 1280, height: 720 },
         ignoreHTTPSErrors: true,
         video: "retain-on-failure",
         baseURL,
-        permissions: ["clipboard-write", "clipboard-read", "microphone"],
-        launchOptions: {
-            args: ["--use-fake-ui-for-media-stream", "--use-fake-device-for-media-stream", "--mute-audio"],
-        },
         trace: "on-first-retry",
     },
     webServer: {

playwright/@types/playwright-core.d.ts

@@ -2,7 +2,7 @@
 Copyright 2024 New Vector Ltd.
 Copyright 2024 The Matrix.org Foundation C.I.C.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 

playwright/Dockerfile

@@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/playwright:v1.48.2-jammy
+FROM mcr.microsoft.com/playwright:v1.49.1-noble
 
 WORKDIR /work
 

playwright/e2e/accessibility/keyboard-navigation.spec.ts

@@ -2,7 +2,7 @@
 Copyright 2024 New Vector Ltd.
 Copyright 2024 The Matrix.org Foundation C.I.C.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
@@ -123,7 +123,7 @@ test.describe("Landmark navigation tests", () => {
         await expect(page.getByText("Bob joined the room")).toBeVisible();
 
         // Close the room
-        page.goto("/#/home");
+        await page.goto("/#/home");
 
         // Pressing Control+F6 will first focus the space button
         await page.keyboard.press("ControlOrMeta+F6");

playwright/e2e/app-loading/feature-detection.spec.ts

@@ -2,13 +2,13 @@
 Copyright 2024 New Vector Ltd.
 Copyright 2024 The Matrix.org Foundation C.I.C.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
 import { test, expect } from "../../element-web-test";
 
-test(`shows error page if browser lacks Intl support`, async ({ page }) => {
+test(`shows error page if browser lacks Intl support`, { tag: "@screenshot" }, async ({ page }) => {
     await page.addInitScript({ content: `delete window.Intl;` });
     await page.goto("/");
 
@@ -21,7 +21,7 @@ test(`shows error page if browser lacks Intl support`, async ({ page }) => {
     await expect(page).toMatchScreenshot("unsupported-browser.png");
 });
 
-test(`shows error page if browser lacks WebAssembly support`, async ({ page }) => {
+test(`shows error page if browser lacks WebAssembly support`, { tag: "@screenshot" }, async ({ page }) => {
     await page.addInitScript({ content: `delete window.WebAssembly;` });
     await page.goto("/");
 

playwright/e2e/app-loading/guest-registration.spec.ts

@@ -2,7 +2,7 @@
 Copyright 2024 New Vector Ltd.
 Copyright 2024 The Matrix.org Foundation C.I.C.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
@@ -13,13 +13,8 @@ Please see LICENSE files in the repository root for full details.
 import { expect, test } from "../../element-web-test";
 
 test.use({
-    startHomeserverOpts: "guest-enabled",
-    config: async ({ homeserver }, use) => {
-        await use({
-            default_server_config: {
-                "m.homeserver": { base_url: homeserver.config.baseUrl },
-            },
-        });
+    synapseConfig: {
+        allow_guest_access: true,
     },
 });
 

playwright/e2e/app-loading/stored-credentials.spec.ts

@@ -2,7 +2,7 @@
 Copyright 2024 New Vector Ltd.
 Copyright 2024 The Matrix.org Foundation C.I.C.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 

playwright/e2e/audio-player/audio-player.spec.ts

@@ -3,7 +3,7 @@ Copyright 2024 New Vector Ltd.
 Copyright 2023 Suguru Hirahara
 Copyright 2023 The Matrix.org Foundation C.I.C.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
@@ -13,7 +13,15 @@ import { SettingLevel } from "../../../src/settings/SettingLevel";
 import { Layout } from "../../../src/settings/enums/Layout";
 import { ElementAppPage } from "../../pages/ElementAppPage";
 
-test.describe("Audio player", () => {
+// Find and click "Reply" button
+const clickButtonReply = async (tile: Locator) => {
+    await expect(async () => {
+        await tile.hover();
+        await tile.getByRole("button", { name: "Reply", exact: true }).click();
+    }).toPass();
+};
+
+test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
     test.use({
         displayName: "Hanako",
     });
@@ -134,18 +142,22 @@ test.describe("Audio player", () => {
         ).toBeVisible();
     });
 
-    test("should be correctly rendered - light theme", async ({ page, app }) => {
+    test("should be correctly rendered - light theme", { tag: "@screenshot" }, async ({ page, app }) => {
         await uploadFile(page, "playwright/sample-files/1sec-long-name-audio-file.ogg");
         await takeSnapshots(page, app, "Selected EventTile of audio player (light theme)");
     });
 
-    test("should be correctly rendered - light theme with monospace font", async ({ page, app }) => {
-        await uploadFile(page, "playwright/sample-files/1sec-long-name-audio-file.ogg");
+    test(
+        "should be correctly rendered - light theme with monospace font",
+        { tag: "@screenshot" },
+        async ({ page, app }) => {
+            await uploadFile(page, "playwright/sample-files/1sec-long-name-audio-file.ogg");
 
-        await takeSnapshots(page, app, "Selected EventTile of audio player (light theme, monospace font)", true); // Enable monospace
-    });
+            await takeSnapshots(page, app, "Selected EventTile of audio player (light theme, monospace font)", true); // Enable monospace
+        },
+    );
 
-    test("should be correctly rendered - high contrast theme", async ({ page, app }) => {
+    test("should be correctly rendered - high contrast theme", { tag: "@screenshot" }, async ({ page, app }) => {
         // Disable system theme in case ThemeWatcher enables the theme automatically,
         // so that the high contrast theme can be enabled
         await app.settings.setValue("use_system_theme", null, SettingLevel.DEVICE, false);
@@ -161,7 +173,7 @@ test.describe("Audio player", () => {
         await takeSnapshots(page, app, "Selected EventTile of audio player (high contrast)");
     });
 
-    test("should be correctly rendered - dark theme", async ({ page, app }) => {
+    test("should be correctly rendered - dark theme", { tag: "@screenshot" }, async ({ page, app }) => {
         // Enable dark theme
         await app.settings.setValue("theme", null, SettingLevel.ACCOUNT, "dark");
 
@@ -207,93 +219,93 @@ test.describe("Audio player", () => {
         expect(download.suggestedFilename()).toBe("1sec.ogg");
     });
 
-    test("should support replying to audio file with another audio file", async ({ page, app }) => {
-        await uploadFile(page, "playwright/sample-files/1sec.ogg");
+    test(
+        "should support replying to audio file with another audio file",
+        { tag: "@screenshot" },
+        async ({ page, app }) => {
+            await uploadFile(page, "playwright/sample-files/1sec.ogg");
 
-        // Assert the audio player is rendered
-        await expect(page.locator(".mx_EventTile_last .mx_AudioPlayer_container")).toBeVisible();
+            // Assert the audio player is rendered
+            await expect(page.locator(".mx_EventTile_last .mx_AudioPlayer_container")).toBeVisible();
 
-        // Find and click "Reply" button on MessageActionBar
-        const tile = page.locator(".mx_EventTile_last");
-        await tile.hover();
-        await tile.getByRole("button", { name: "Reply", exact: true }).click();
+            // Find and click "Reply" button on MessageActionBar
+            const tile = page.locator(".mx_EventTile_last");
+            await clickButtonReply(tile);
 
-        // Reply to the player with another audio file
-        await uploadFile(page, "playwright/sample-files/1sec.ogg");
+            // Reply to the player with another audio file
+            await uploadFile(page, "playwright/sample-files/1sec.ogg");
 
-        // Assert that the audio player is rendered
-        await expect(tile.locator(".mx_AudioPlayer_container")).toBeVisible();
+            // Assert that the audio player is rendered
+            await expect(tile.locator(".mx_AudioPlayer_container")).toBeVisible();
 
-        // Assert that replied audio file is rendered as file button inside ReplyChain
-        const button = tile.locator(".mx_ReplyChain_wrapper .mx_MFileBody_info[role='button']");
-        // Assert that the file button has file name
-        await expect(button.locator(".mx_MFileBody_info_filename")).toBeVisible();
+            // Assert that replied audio file is rendered as file button inside ReplyChain
+            const button = tile.locator(".mx_ReplyChain_wrapper .mx_MFileBody_info[role='button']");
+            // Assert that the file button has file name
+            await expect(button.locator(".mx_MFileBody_info_filename")).toBeVisible();
 
-        await takeSnapshots(page, app, "Selected EventTile of audio player with a reply");
-    });
+            await takeSnapshots(page, app, "Selected EventTile of audio player with a reply");
+        },
+    );
 
-    test("should support creating a reply chain with multiple audio files", async ({ page, app, user }) => {
-        // Note: "mx_ReplyChain" element is used not only for replies which
-        // create a reply chain, but also for a single reply without a replied
-        // message. This test checks whether a reply chain which consists of
-        // multiple audio file replies is rendered properly.
+    test(
+        "should support creating a reply chain with multiple audio files",
+        { tag: "@screenshot" },
+        async ({ page, app, user }) => {
+            // Note: "mx_ReplyChain" element is used not only for replies which
+            // create a reply chain, but also for a single reply without a replied
+            // message. This test checks whether a reply chain which consists of
+            // multiple audio file replies is rendered properly.
 
-        const tile = page.locator(".mx_EventTile_last");
+            const tile = page.locator(".mx_EventTile_last");
 
-        // Find and click "Reply" button
-        const clickButtonReply = async () => {
-            await tile.scrollIntoViewIfNeeded();
-            await tile.hover();
-            await tile.getByRole("button", { name: "Reply", exact: true }).click();
-        };
+            await uploadFile(page, "playwright/sample-files/upload-first.ogg");
 
-        await uploadFile(page, "playwright/sample-files/upload-first.ogg");
+            // Assert that the audio player is rendered
+            await expect(page.locator(".mx_EventTile_last .mx_AudioPlayer_container")).toBeVisible();
 
-        // Assert that the audio player is rendered
-        await expect(page.locator(".mx_EventTile_last .mx_AudioPlayer_container")).toBeVisible();
+            await clickButtonReply(tile);
 
-        await clickButtonReply();
+            // Reply to the player with another audio file
+            await uploadFile(page, "playwright/sample-files/upload-second.ogg");
 
-        // Reply to the player with another audio file
-        await uploadFile(page, "playwright/sample-files/upload-second.ogg");
+            // Assert that the audio player is rendered
+            await expect(page.locator(".mx_EventTile_last .mx_AudioPlayer_container")).toBeVisible();
 
-        // Assert that the audio player is rendered
-        await expect(page.locator(".mx_EventTile_last .mx_AudioPlayer_container")).toBeVisible();
+            await clickButtonReply(tile);
 
-        await clickButtonReply();
+            // Reply to the player with yet another audio file to create a reply chain
+            await uploadFile(page, "playwright/sample-files/upload-third.ogg");
 
-        // Reply to the player with yet another audio file to create a reply chain
-        await uploadFile(page, "playwright/sample-files/upload-third.ogg");
+            // Assert that the audio player is rendered
+            await expect(tile.locator(".mx_AudioPlayer_container")).toBeVisible();
 
-        // Assert that the audio player is rendered
-        await expect(tile.locator(".mx_AudioPlayer_container")).toBeVisible();
+            // Assert that there are two "mx_ReplyChain" elements
+            await expect(tile.locator(".mx_ReplyChain")).toHaveCount(2);
 
-        // Assert that there are two "mx_ReplyChain" elements
-        await expect(tile.locator(".mx_ReplyChain")).toHaveCount(2);
+            // Assert that one line contains the user name
+            await expect(tile.locator(".mx_ReplyChain .mx_ReplyTile_sender").getByText(user.displayName)).toBeVisible();
 
-        // Assert that one line contains the user name
-        await expect(tile.locator(".mx_ReplyChain .mx_ReplyTile_sender").getByText(user.displayName)).toBeVisible();
+            // Assert that the other line contains the file button
+            await expect(tile.locator(".mx_ReplyChain .mx_MFileBody")).toBeVisible();
 
-        // Assert that the other line contains the file button
-        await expect(tile.locator(".mx_ReplyChain .mx_MFileBody")).toBeVisible();
+            // Click "In reply to"
+            await tile.locator(".mx_ReplyChain .mx_ReplyChain_show", { hasText: "In reply to" }).click();
 
-        // Click "In reply to"
-        await tile.locator(".mx_ReplyChain .mx_ReplyChain_show", { hasText: "In reply to" }).click();
+            const replyChain = tile.locator(".mx_ReplyChain:first-of-type");
+            // Assert that "In reply to" has disappeared
+            await expect(replyChain.getByText("In reply to")).not.toBeVisible();
 
-        const replyChain = tile.locator(".mx_ReplyChain:first-of-type");
-        // Assert that "In reply to" has disappeared
-        await expect(replyChain.getByText("In reply to")).not.toBeVisible();
+            // Assert that the file button contains the name of the file sent at first
+            await expect(
+                replyChain
+                    .locator(".mx_MFileBody_info[role='button']")
+                    .locator(".mx_MFileBody_info_filename", { hasText: "upload-first.ogg" }),
+            ).toBeVisible();
 
-        // Assert that the file button contains the name of the file sent at first
-        await expect(
-            replyChain
-                .locator(".mx_MFileBody_info[role='button']")
-                .locator(".mx_MFileBody_info_filename", { hasText: "upload-first.ogg" }),
-        ).toBeVisible();
-
-        // Take snapshots
-        await takeSnapshots(page, app, "Selected EventTile of audio player with a reply chain");
-    });
+            // Take snapshots
+            await takeSnapshots(page, app, "Selected EventTile of audio player with a reply chain");
+        },
+    );
 
     test("should be rendered, play, and support replying on a thread", async ({ page, app }) => {
         await uploadFile(page, "playwright/sample-files/1sec-long-name-audio-file.ogg");

playwright/e2e/chat-export/html-export.spec.ts

@@ -2,7 +2,7 @@
 Copyright 2024 New Vector Ltd.
 Copyright 2024 The Matrix.org Foundation C.I.C.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
@@ -89,43 +89,47 @@ test.describe("HTML Export", () => {
         },
     });
 
-    test("should export html successfully and match screenshot", async ({ page, app, room }) => {
-        // Set a fixed time rather than masking off the line with the time in it: we don't need to worry
-        // about the width changing and we can actually test this line looks correct.
-        page.clock.setSystemTime(new Date("2024-01-01T00:00:00Z"));
+    test(
+        "should export html successfully and match screenshot",
+        { tag: "@screenshot" },
+        async ({ page, app, room }) => {
+            // Set a fixed time rather than masking off the line with the time in it: we don't need to worry
+            // about the width changing and we can actually test this line looks correct.
+            await page.clock.setSystemTime(new Date("2024-01-01T00:00:00Z"));
 
-        // Send a bunch of messages to populate the room
-        for (let i = 1; i < 10; i++) {
-            const respone = await app.client.sendMessage(room.roomId, { body: `Testing ${i}`, msgtype: "m.text" });
-            if (i == 1) {
-                await app.client.reactToMessage(room.roomId, null, respone.event_id, "🙃");
+            // Send a bunch of messages to populate the room
+            for (let i = 1; i < 10; i++) {
+                const respone = await app.client.sendMessage(room.roomId, { body: `Testing ${i}`, msgtype: "m.text" });
+                if (i == 1) {
+                    await app.client.reactToMessage(room.roomId, null, respone.event_id, "🙃");
+                }
             }
-        }
 
-        // Wait for all the messages to be displayed
-        await expect(
-            page.locator(".mx_EventTile_last .mx_MTextBody .mx_EventTile_body").getByText("Testing 9"),
-        ).toBeVisible();
+            // Wait for all the messages to be displayed
+            await expect(
+                page.locator(".mx_EventTile_last .mx_MTextBody .mx_EventTile_body").getByText("Testing 9"),
+            ).toBeVisible();
 
-        await app.toggleRoomInfoPanel();
-        await page.getByRole("menuitem", { name: "Export Chat" }).click();
+            await app.toggleRoomInfoPanel();
+            await page.getByRole("menuitem", { name: "Export Chat" }).click();
 
-        const downloadPromise = page.waitForEvent("download");
-        await page.getByRole("button", { name: "Export", exact: true }).click();
-        const download = await downloadPromise;
+            const downloadPromise = page.waitForEvent("download");
+            await page.getByRole("button", { name: "Export", exact: true }).click();
+            const download = await downloadPromise;
 
-        const dirPath = path.join(os.tmpdir(), "html-export-test");
-        const zipPath = `${dirPath}.zip`;
-        await download.saveAs(zipPath);
+            const dirPath = path.join(os.tmpdir(), "html-export-test");
+            const zipPath = `${dirPath}.zip`;
+            await download.saveAs(zipPath);
 
-        const zip = await extractZipFileToPath(zipPath, dirPath);
-        await page.goto(`file://${dirPath}/${Object.keys(zip.files)[0]}/messages.html`);
-        await expect(page).toMatchScreenshot("html-export.png", {
-            mask: [
-                // We need to mask the whole thing because the width of the time part changes
-                page.locator(".mx_TimelineSeparator"),
-                page.locator(".mx_MessageTimestamp"),
-            ],
-        });
-    });
+            const zip = await extractZipFileToPath(zipPath, dirPath);
+            await page.goto(`file://${dirPath}/${Object.keys(zip.files)[0]}/messages.html`);
+            await expect(page).toMatchScreenshot("html-export.png", {
+                mask: [
+                    // We need to mask the whole thing because the width of the time part changes
+                    page.locator(".mx_TimelineSeparator"),
+                    page.locator(".mx_MessageTimestamp"),
+                ],
+            });
+        },
+    );
 });

playwright/e2e/composer/CIDER.spec.ts

@@ -2,7 +2,7 @@
 Copyright 2024 New Vector Ltd.
 Copyright 2022, 2023 The Matrix.org Foundation C.I.C.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 

playwright/e2e/composer/RTE.spec.ts

@@ -2,7 +2,7 @@
 Copyright 2024 New Vector Ltd.
 Copyright 2022, 2023 The Matrix.org Foundation C.I.C.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
@@ -79,9 +79,8 @@ test.describe("Composer", () => {
                     // Enter some more text, then send the message
                     await page.getByRole("textbox").pressSequentially("this is the spoiler text ");
                     await page.getByRole("button", { name: "Send message" }).click();
-                    // Check that a spoiler item has appeared in the timeline and locator the spoiler command text
-                    await expect(page.locator("button.mx_EventTile_spoiler")).toBeVisible();
-                    await expect(page.getByText("this is the spoiler text")).toBeVisible();
+                    // Check that a spoiler item has appeared in the timeline and contains the spoiler text
+                    await expect(page.locator("button.mx_EventTile_spoiler")).toHaveText("this is the spoiler text");
                 });
             });
         });
@@ -166,7 +165,7 @@ test.describe("Composer", () => {
             // Type another
             await page.locator("div[contenteditable=true]").pressSequentially("my message 1");
             // Send message
-            page.locator("div[contenteditable=true]").press("Enter");
+            await page.locator("div[contenteditable=true]").press("Enter");
             // It was sent
             await expect(page.locator(".mx_EventTile_last .mx_EventTile_body").getByText("my message 1")).toBeVisible();
         });

playwright/e2e/create-room/create-room.spec.ts

@@ -2,7 +2,7 @@
 Copyright 2024 New Vector Ltd.
 Copyright 2022, 2023 The Matrix.org Foundation C.I.C.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
@@ -27,7 +27,7 @@ test.describe("Create Room", () => {
         // Submit
         await dialog.getByRole("button", { name: "Create room" }).click();
 
-        await expect(page).toHaveURL(/\/#\/room\/#test-room-1:localhost/);
+        await expect(page).toHaveURL(new RegExp(`/#/room/#test-room-1:${user.homeServer}`));
         const header = page.locator(".mx_RoomHeader");
         await expect(header).toContainText(name);
     });

playwright/e2e/crypto/backups-mas.spec.ts

@@ -0,0 +1,95 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { test, expect } from "../../element-web-test";
+import { registerAccountMas } from "../oidc";
+import { isDendrite } from "../../plugins/homeserver/dendrite";
+import { TestClientServerAPI } from "../csAPI";
+import { masHomeserver } from "../../plugins/homeserver/synapse/masHomeserver.ts";
+
+// These tests register an account with MAS because then we go through the "normal" registration flow
+// and crypto gets set up. Using the 'user' fixture create a user and synthesizes an existing login,
+// which is faster but leaves us without crypto set up.
+test.use(masHomeserver);
+test.describe("Encryption state after registration", () => {
+    test.skip(isDendrite, "does not yet support MAS");
+
+    test("Key backup is enabled by default", async ({ page, mailhogClient, app }, testInfo) => {
+        await page.goto("/#/login");
+        await page.getByRole("button", { name: "Continue" }).click();
+        await registerAccountMas(page, mailhogClient, `alice_${testInfo.testId}`, "alice@email.com", "Pa$sW0rD!");
+
+        await app.settings.openUserSettings("Security & Privacy");
+        await expect(page.getByText("This session is backing up your keys.")).toBeVisible();
+    });
+
+    test("user is prompted to set up recovery", async ({ page, mailhogClient, app }, testInfo) => {
+        await page.goto("/#/login");
+        await page.getByRole("button", { name: "Continue" }).click();
+        await registerAccountMas(page, mailhogClient, `alice_${testInfo.testId}`, "alice@email.com", "Pa$sW0rD!");
+
+        await page.getByRole("button", { name: "Add room" }).click();
+        await page.getByRole("menuitem", { name: "New room" }).click();
+        await page.getByRole("textbox", { name: "Name" }).fill("test room");
+        await page.getByRole("button", { name: "Create room" }).click();
+
+        await expect(page.getByRole("heading", { name: "Set up recovery" })).toBeVisible();
+    });
+});
+
+test.describe("Key backup reset from elsewhere", () => {
+    test.skip(isDendrite, "does not yet support MAS");
+
+    test("Key backup is disabled when reset from elsewhere", async ({
+        page,
+        mailhogClient,
+        request,
+        homeserver,
+    }, testInfo) => {
+        const testUsername = `alice_${testInfo.testId}`;
+        const testPassword = "Pa$sW0rD!";
+
+        // there's a delay before keys are uploaded so the error doesn't appear immediately: use a fake
+        // clock so we can skip the delay
+        await page.clock.install();
+
+        await page.goto("/#/login");
+        await page.getByRole("button", { name: "Continue" }).click();
+        await registerAccountMas(page, mailhogClient, testUsername, "alice@email.com", testPassword);
+
+        await page.getByRole("button", { name: "Add room" }).click();
+        await page.getByRole("menuitem", { name: "New room" }).click();
+        await page.getByRole("textbox", { name: "Name" }).fill("test room");
+        await page.getByRole("button", { name: "Create room" }).click();
+
+        const accessToken = await page.evaluate(() => window.mxMatrixClientPeg.get().getAccessToken());
+
+        const csAPI = new TestClientServerAPI(request, homeserver, accessToken);
+
+        const backupInfo = await csAPI.getCurrentBackupInfo();
+
+        await csAPI.deleteBackupVersion(backupInfo.version);
+
+        await page.getByRole("textbox", { name: "Send an encrypted message…" }).fill("/discardsession");
+        await page.getByRole("button", { name: "Send message" }).click();
+
+        await page.getByRole("textbox", { name: "Send an encrypted message…" }).fill("Message with broken key backup");
+        await page.getByRole("button", { name: "Send message" }).click();
+
+        // Should be the message we sent plus the room creation event
+        await expect(page.locator(".mx_EventTile")).toHaveCount(2);
+        await expect(
+            page.locator(".mx_RoomView_MessageList > .mx_EventTile_last .mx_EventTile_receiptSent"),
+        ).toBeVisible();
+
+        // Wait for it to try uploading the key
+        await page.clock.fastForward(20000);
+
+        await expect(page.getByRole("heading", { level: 1, name: "New Recovery Method" })).toBeVisible();
+    });
+});

playwright/e2e/crypto/backups.spec.ts

@@ -2,13 +2,14 @@
 Copyright 2024 New Vector Ltd.
 Copyright 2023 The Matrix.org Foundation C.I.C.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
 import { type Page } from "@playwright/test";
 
 import { test, expect } from "../../element-web-test";
+import { isDendrite } from "../../plugins/homeserver/dendrite";
 
 async function expectBackupVersionToBe(page: Page, version: string) {
     await expect(page.locator(".mx_SecureBackupPanel_statusList tr:nth-child(5) td")).toHaveText(
@@ -19,94 +20,99 @@ async function expectBackupVersionToBe(page: Page, version: string) {
 }
 
 test.describe("Backups", () => {
+    test.skip(isDendrite, "Dendrite lacks support for MSC3967 so requires additional auth here");
     test.use({
         displayName: "Hanako",
     });
 
-    test("Create, delete and recreate a keys backup", async ({ page, user, app }, workerInfo) => {
-        // Create a backup
-        const securityTab = await app.settings.openUserSettings("Security & Privacy");
+    test(
+        "Create, delete and recreate a keys backup",
+        { tag: "@no-webkit" },
+        async ({ page, user, app }, workerInfo) => {
+            // Create a backup
+            const securityTab = await app.settings.openUserSettings("Security & Privacy");
 
-        await expect(securityTab.getByRole("heading", { name: "Secure Backup" })).toBeVisible();
-        await securityTab.getByRole("button", { name: "Set up", exact: true }).click();
+            await expect(securityTab.getByRole("heading", { name: "Secure Backup" })).toBeVisible();
+            await securityTab.getByRole("button", { name: "Set up", exact: true }).click();
 
-        const currentDialogLocator = page.locator(".mx_Dialog");
+            const currentDialogLocator = page.locator(".mx_Dialog");
 
-        // It's the first time and secure storage is not set up, so it will create one
-        await expect(currentDialogLocator.getByRole("heading", { name: "Set up Secure Backup" })).toBeVisible();
-        await currentDialogLocator.getByRole("button", { name: "Continue", exact: true }).click();
-        await expect(currentDialogLocator.getByRole("heading", { name: "Save your Security Key" })).toBeVisible();
-        await currentDialogLocator.getByRole("button", { name: "Copy", exact: true }).click();
-        // copy the recovery key to use it later
-        const securityKey = await app.getClipboard();
-        await currentDialogLocator.getByRole("button", { name: "Continue", exact: true }).click();
+            // It's the first time and secure storage is not set up, so it will create one
+            await expect(currentDialogLocator.getByRole("heading", { name: "Set up Secure Backup" })).toBeVisible();
+            await currentDialogLocator.getByRole("button", { name: "Continue", exact: true }).click();
+            await expect(currentDialogLocator.getByRole("heading", { name: "Save your Security Key" })).toBeVisible();
+            await currentDialogLocator.getByRole("button", { name: "Copy", exact: true }).click();
+            // copy the recovery key to use it later
+            const securityKey = await app.getClipboard();
+            await currentDialogLocator.getByRole("button", { name: "Continue", exact: true }).click();
 
-        await expect(currentDialogLocator.getByRole("heading", { name: "Secure Backup successful" })).toBeVisible();
-        await currentDialogLocator.getByRole("button", { name: "Done", exact: true }).click();
+            await expect(currentDialogLocator.getByRole("heading", { name: "Secure Backup successful" })).toBeVisible();
+            await currentDialogLocator.getByRole("button", { name: "Done", exact: true }).click();
 
-        // Open the settings again
-        await app.settings.openUserSettings("Security & Privacy");
-        await expect(securityTab.getByRole("heading", { name: "Secure Backup" })).toBeVisible();
+            // Open the settings again
+            await app.settings.openUserSettings("Security & Privacy");
+            await expect(securityTab.getByRole("heading", { name: "Secure Backup" })).toBeVisible();
 
-        // expand the advanced section to see the active version in the reports
-        await page
-            .locator(".mx_Dialog .mx_SettingsSubsection_content details .mx_SecureBackupPanel_advanced")
-            .locator("..")
-            .click();
+            // expand the advanced section to see the active version in the reports
+            await page
+                .locator(".mx_Dialog .mx_SettingsSubsection_content details .mx_SecureBackupPanel_advanced")
+                .locator("..")
+                .click();
 
-        await expectBackupVersionToBe(page, "1");
+            await expectBackupVersionToBe(page, "1");
 
-        await securityTab.getByRole("button", { name: "Delete Backup", exact: true }).click();
-        await expect(currentDialogLocator.getByRole("heading", { name: "Delete Backup" })).toBeVisible();
-        // Delete it
-        await currentDialogLocator.getByTestId("dialog-primary-button").click(); // Click "Delete Backup"
+            await securityTab.getByRole("button", { name: "Delete Backup", exact: true }).click();
+            await expect(currentDialogLocator.getByRole("heading", { name: "Delete Backup" })).toBeVisible();
+            // Delete it
+            await currentDialogLocator.getByTestId("dialog-primary-button").click(); // Click "Delete Backup"
 
-        // Create another
-        await securityTab.getByRole("button", { name: "Set up", exact: true }).click();
-        await expect(currentDialogLocator.getByRole("heading", { name: "Security Key" })).toBeVisible();
-        await currentDialogLocator.getByLabel("Security Key").fill(securityKey);
-        await currentDialogLocator.getByRole("button", { name: "Continue", exact: true }).click();
+            // Create another
+            await securityTab.getByRole("button", { name: "Set up", exact: true }).click();
+            await expect(currentDialogLocator.getByRole("heading", { name: "Security Key" })).toBeVisible();
+            await currentDialogLocator.getByLabel("Security Key").fill(securityKey);
+            await currentDialogLocator.getByRole("button", { name: "Continue", exact: true }).click();
 
-        // Should be successful
-        await expect(currentDialogLocator.getByRole("heading", { name: "Success!" })).toBeVisible();
-        await currentDialogLocator.getByRole("button", { name: "OK", exact: true }).click();
+            // Should be successful
+            await expect(currentDialogLocator.getByRole("heading", { name: "Success!" })).toBeVisible();
+            await currentDialogLocator.getByRole("button", { name: "OK", exact: true }).click();
 
-        // Open the settings again
-        await app.settings.openUserSettings("Security & Privacy");
-        await expect(securityTab.getByRole("heading", { name: "Secure Backup" })).toBeVisible();
+            // Open the settings again
+            await app.settings.openUserSettings("Security & Privacy");
+            await expect(securityTab.getByRole("heading", { name: "Secure Backup" })).toBeVisible();
 
-        // expand the advanced section to see the active version in the reports
-        await page
-            .locator(".mx_Dialog .mx_SettingsSubsection_content details .mx_SecureBackupPanel_advanced")
-            .locator("..")
-            .click();
+            // expand the advanced section to see the active version in the reports
+            await page
+                .locator(".mx_Dialog .mx_SettingsSubsection_content details .mx_SecureBackupPanel_advanced")
+                .locator("..")
+                .click();
 
-        await expectBackupVersionToBe(page, "2");
+            await expectBackupVersionToBe(page, "2");
 
-        // ==
-        // Ensure that if you don't have the secret storage passphrase the backup won't be created
-        // ==
+            // ==
+            // Ensure that if you don't have the secret storage passphrase the backup won't be created
+            // ==
 
-        // First delete version 2
-        await securityTab.getByRole("button", { name: "Delete Backup", exact: true }).click();
-        await expect(currentDialogLocator.getByRole("heading", { name: "Delete Backup" })).toBeVisible();
-        // Click "Delete Backup"
-        await currentDialogLocator.getByTestId("dialog-primary-button").click();
+            // First delete version 2
+            await securityTab.getByRole("button", { name: "Delete Backup", exact: true }).click();
+            await expect(currentDialogLocator.getByRole("heading", { name: "Delete Backup" })).toBeVisible();
+            // Click "Delete Backup"
+            await currentDialogLocator.getByTestId("dialog-primary-button").click();
 
-        // Try to create another
-        await securityTab.getByRole("button", { name: "Set up", exact: true }).click();
-        await expect(currentDialogLocator.getByRole("heading", { name: "Security Key" })).toBeVisible();
-        // But cancel the security key dialog, to simulate not having the secret storage passphrase
-        await currentDialogLocator.getByTestId("dialog-cancel-button").click();
+            // Try to create another
+            await securityTab.getByRole("button", { name: "Set up", exact: true }).click();
+            await expect(currentDialogLocator.getByRole("heading", { name: "Security Key" })).toBeVisible();
+            // But cancel the security key dialog, to simulate not having the secret storage passphrase
+            await currentDialogLocator.getByTestId("dialog-cancel-button").click();
 
-        await expect(currentDialogLocator.getByRole("heading", { name: "Starting backup…" })).toBeVisible();
-        // check that it failed
-        await expect(currentDialogLocator.getByText("Unable to create key backup")).toBeVisible();
-        // cancel
-        await currentDialogLocator.getByTestId("dialog-cancel-button").click();
+            await expect(currentDialogLocator.getByRole("heading", { name: "Starting backup…" })).toBeVisible();
+            // check that it failed
+            await expect(currentDialogLocator.getByText("Unable to create key backup")).toBeVisible();
+            // cancel
+            await currentDialogLocator.getByTestId("dialog-cancel-button").click();
 
-        // go back to the settings to check that no backup was created (the setup button should still be there)
-        await app.settings.openUserSettings("Security & Privacy");
-        await expect(securityTab.getByRole("button", { name: "Set up", exact: true })).toBeVisible();
-    });
+            // go back to the settings to check that no backup was created (the setup button should still be there)
+            await app.settings.openUserSettings("Security & Privacy");
+            await expect(securityTab.getByRole("button", { name: "Set up", exact: true })).toBeVisible();
+        },
+    );
 });

playwright/e2e/crypto/complete-security.spec.ts

@@ -2,14 +2,16 @@
 Copyright 2024 New Vector Ltd.
 Copyright 2023 The Matrix.org Foundation C.I.C.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
 import { test, expect } from "../../element-web-test";
 import { logIntoElement } from "./utils";
+import { isDendrite } from "../../plugins/homeserver/dendrite";
 
 test.describe("Complete security", () => {
+    test.skip(isDendrite, "Dendrite lacks support for MSC3967 so requires additional auth here");
     test.use({
         displayName: "Jeff",
     });
@@ -19,9 +21,9 @@ test.describe("Complete security", () => {
         homeserver,
         credentials,
     }) => {
-        await logIntoElement(page, homeserver, credentials);
+        await logIntoElement(page, credentials);
         await expect(page.getByText("Welcome Jeff", { exact: true })).toBeVisible();
     });
 
-    // see also "Verify device during login with SAS" in `verifiction.spec.ts`.
+    // see also "Verify device during login with SAS" in `verification.spec.ts`.
 });

playwright/e2e/crypto/crypto.spec.ts

@@ -2,7 +2,7 @@
 Copyright 2024 New Vector Ltd.
 Copyright 2022-2024 The Matrix.org Foundation C.I.C.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
@@ -11,6 +11,7 @@ import { expect, test } from "../../element-web-test";
 import { autoJoin, copyAndContinue, createSharedRoomWithUser, enableKeyBackup, verify } from "./utils";
 import { Bot } from "../../pages/bot";
 import { ElementAppPage } from "../../pages/ElementAppPage";
+import { isDendrite } from "../../plugins/homeserver/dendrite";
 
 const checkDMRoom = async (page: Page) => {
     const body = page.locator(".mx_RoomView_body");
@@ -67,6 +68,7 @@ const bobJoin = async (page: Page, bob: Bot) => {
 };
 
 test.describe("Cryptography", function () {
+    test.skip(isDendrite, "Dendrite lacks support for MSC3967 so requires additional auth here");
     test.use({
         displayName: "Alice",
         botCreateOpts: {
@@ -81,7 +83,7 @@ test.describe("Cryptography", function () {
              * Verify that the `m.cross_signing.${keyType}` key is available on the account data on the server
              * @param keyType
              */
-            async function verifyKey(app: ElementAppPage, keyType: string) {
+            async function verifyKey(app: ElementAppPage, keyType: "master" | "self_signing" | "user_signing") {
                 const accountData: { encrypted: Record<string, Record<string, string>> } = await app.client.evaluate(
                     (cli, keyType) => cli.getAccountDataFromServer(`m.cross_signing.${keyType}`),
                     keyType,
@@ -204,30 +206,29 @@ test.describe("Cryptography", function () {
         await expect(page.locator(".mx_Dialog")).toHaveCount(1);
     });
 
-    test("creating a DM should work, being e2e-encrypted / user verification", async ({
-        page,
-        app,
-        bot: bob,
-        user: aliceCredentials,
-    }) => {
-        await app.client.bootstrapCrossSigning(aliceCredentials);
-        await startDMWithBob(page, bob);
-        // send first message
-        await page.getByRole("textbox", { name: "Send a message…" }).fill("Hey!");
-        await page.getByRole("textbox", { name: "Send a message…" }).press("Enter");
-        await checkDMRoom(page);
-        const bobRoomId = await bobJoin(page, bob);
-        await testMessages(page, bob, bobRoomId);
-        await verify(app, bob);
+    test(
+        "creating a DM should work, being e2e-encrypted / user verification",
+        { tag: "@screenshot" },
+        async ({ page, app, bot: bob, user: aliceCredentials }) => {
+            await app.client.bootstrapCrossSigning(aliceCredentials);
+            await startDMWithBob(page, bob);
+            // send first message
+            await page.getByRole("textbox", { name: "Send a message…" }).fill("Hey!");
+            await page.getByRole("textbox", { name: "Send a message…" }).press("Enter");
+            await checkDMRoom(page);
+            const bobRoomId = await bobJoin(page, bob);
+            await testMessages(page, bob, bobRoomId);
+            await verify(app, bob);
 
-        // Assert that verified icon is rendered
-        await page.getByTestId("base-card-back-button").click();
-        await page.getByLabel("Room info").nth(1).click();
-        await expect(page.locator('.mx_RoomSummaryCard_badges [data-kind="green"]')).toContainText("Encrypted");
+            // Assert that verified icon is rendered
+            await page.getByTestId("base-card-back-button").click();
+            await page.getByLabel("Room info").nth(1).click();
+            await expect(page.locator('.mx_RoomSummaryCard_badges [data-kind="green"]')).toContainText("Encrypted");
 
-        // Take a snapshot of RoomSummaryCard with a verified E2EE icon
-        await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("RoomSummaryCard-with-verified-e2ee.png");
-    });
+            // Take a snapshot of RoomSummaryCard with a verified E2EE icon
+            await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("RoomSummaryCard-with-verified-e2ee.png");
+        },
+    );
 
     test("should allow verification when there is no existing DM", async ({
         page,

playwright/e2e/crypto/decryption-failure-messages.spec.ts

@@ -2,7 +2,7 @@
 Copyright 2024 New Vector Ltd.
 Copyright 2022-2024 The Matrix.org Foundation C.I.C.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
@@ -28,6 +28,8 @@ test.describe("Cryptography", function () {
     });
 
     test.describe("decryption failure messages", () => {
+        test.skip(isDendrite, "Dendrite lacks support for MSC3967 so requires additional auth here");
+
         test("should handle device-relative historical messages", async ({
             homeserver,
             page,
@@ -45,7 +47,7 @@ test.describe("Cryptography", function () {
             await logOutOfElement(page, true);
 
             // Log in again, and see how the message looks.
-            await logIntoElement(page, homeserver, credentials);
+            await logIntoElement(page, credentials);
             await app.viewRoomByName("Test room");
             const lastTile = page.locator(".mx_EventTile").last();
             await expect(lastTile).toContainText("Historical messages are not available on this device");
@@ -62,11 +64,14 @@ test.describe("Cryptography", function () {
 
             // Finally, log out again, and back in, skipping verification for now, and see what we see.
             await logOutOfElement(page);
-            await logIntoElement(page, homeserver, credentials);
+            await logIntoElement(page, credentials);
             await page.locator(".mx_AuthPage").getByRole("button", { name: "Skip verification for now" }).click();
             await page.locator(".mx_AuthPage").getByRole("button", { name: "I'll verify later" }).click();
             await app.viewRoomByName("Test room");
 
+            // In this case, the call to cryptoApi.isEncryptionEnabledInRoom is taking a long time to resolve
+            await page.waitForTimeout(1000);
+
             // There should be two historical events in the timeline
             const tiles = await page.locator(".mx_EventTile").all();
             expect(tiles.length).toBeGreaterThanOrEqual(2);

playwright/e2e/crypto/dehydration.spec.ts

@@ -2,26 +2,34 @@
 Copyright 2024 New Vector Ltd.
 Copyright 2024 The Matrix.org Foundation C.I.C.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
 import { Locator, type Page } from "@playwright/test";
 
-import { test as base, expect } from "../../element-web-test";
+import { test, expect } from "../../element-web-test";
 import { viewRoomSummaryByName } from "../right-panel/utils";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
 
-const test = base.extend({
-    // eslint-disable-next-line no-empty-pattern
-    startHomeserverOpts: async ({}, use) => {
-        await use("dehydration");
+const ROOM_NAME = "Test room";
+const NAME = "Alice";
+
+function getMemberTileByName(page: Page, name: string): Locator {
+    return page.locator(`.mx_MemberTileView, [title="${name}"]`);
+}
+
+test.use({
+    displayName: NAME,
+    synapseConfig: {
+        experimental_features: {
+            msc2697_enabled: false,
+            msc3814_enabled: true,
+        },
     },
-    config: async ({ homeserver, context }, use) => {
+    config: async ({ config, context }, use) => {
         const wellKnown = {
-            "m.homeserver": {
-                base_url: homeserver.config.baseUrl,
-            },
+            ...config.default_server_config,
             "org.matrix.msc3814": true,
         };
 
@@ -29,29 +37,14 @@ const test = base.extend({
             await route.fulfill({ json: wellKnown });
         });
 
-        await use({
-            default_server_config: wellKnown,
-        });
+        await use(config);
     },
 });
 
-const ROOM_NAME = "Test room";
-const NAME = "Alice";
-
-function getMemberTileByName(page: Page, name: string): Locator {
-    return page.locator(`.mx_EntityTile, [title="${name}"]`);
-}
-
 test.describe("Dehydration", () => {
     test.skip(isDendrite, "does not yet support dehydration v2");
 
-    test.use({
-        displayName: NAME,
-    });
-
     test("Create dehydrated device", async ({ page, user, app }, workerInfo) => {
-        test.skip(workerInfo.project.name === "Legacy Crypto", "This test only works with Rust crypto.");
-
         // Create a backup (which will create SSSS, and dehydrated device)
 
         const securityTab = await app.settings.openUserSettings("Security & Privacy");
@@ -95,7 +88,7 @@ test.describe("Dehydration", () => {
         await viewRoomSummaryByName(page, app, ROOM_NAME);
 
         await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click();
-        await expect(page.locator(".mx_MemberList")).toBeVisible();
+        await expect(page.locator(".mx_MemberListView")).toBeVisible();
 
         await getMemberTileByName(page, NAME).click();
         await page.locator(".mx_UserInfo_devices .mx_UserInfo_expand").click();

playwright/e2e/crypto/device-verification.spec.ts

@@ -2,7 +2,7 @@
 Copyright 2024 New Vector Ltd.
 Copyright 2023 The Matrix.org Foundation C.I.C.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
@@ -15,42 +15,23 @@ import {
     awaitVerifier,
     checkDeviceIsConnectedKeyBackup,
     checkDeviceIsCrossSigned,
+    createBot,
     doTwoWaySasVerification,
     logIntoElement,
     waitForVerificationRequest,
 } from "./utils";
 import { Bot } from "../../pages/bot";
 
-test.describe("Device verification", () => {
+test.describe("Device verification", { tag: "@no-webkit" }, () => {
     let aliceBotClient: Bot;
 
     /** The backup version that was set up by the bot client. */
     let expectedBackupVersion: string;
 
     test.beforeEach(async ({ page, homeserver, credentials }) => {
-        // Visit the login page of the app, to load the matrix sdk
-        await page.goto("/#/login");
-
-        // wait for the page to load
-        await page.waitForSelector(".mx_AuthPage", { timeout: 30000 });
-
-        // Create a new device for alice
-        aliceBotClient = new Bot(page, homeserver, {
-            bootstrapCrossSigning: true,
-            bootstrapSecretStorage: true,
-        });
-        aliceBotClient.setCredentials(credentials);
-
-        // Backup is prepared in the background. Poll until it is ready.
-        const botClientHandle = await aliceBotClient.prepareClient();
-        await expect
-            .poll(async () => {
-                expectedBackupVersion = await botClientHandle.evaluate((cli) =>
-                    cli.getCrypto()!.getActiveSessionBackupVersion(),
-                );
-                return expectedBackupVersion;
-            })
-            .not.toBe(null);
+        const res = await createBot(page, homeserver, credentials);
+        aliceBotClient = res.botClient;
+        expectedBackupVersion = res.expectedBackupVersion;
     });
 
     // Click the "Verify with another device" button, and have the bot client auto-accept it.
@@ -66,7 +47,7 @@ test.describe("Device verification", () => {
     }
 
     test("Verify device with SAS during login", async ({ page, app, credentials, homeserver }) => {
-        await logIntoElement(page, homeserver, credentials);
+        await logIntoElement(page, credentials);
 
         // Launch the verification request between alice and the bot
         const verificationRequest = await initiateAliceVerificationRequest(page);
@@ -93,7 +74,7 @@ test.describe("Device verification", () => {
 
     test("Verify device with QR code during login", async ({ page, app, credentials, homeserver }) => {
         // A mode 0x02 verification: "self-verifying in which the current device does not yet trust the master key"
-        await logIntoElement(page, homeserver, credentials);
+        await logIntoElement(page, credentials);
 
         // Launch the verification request between alice and the bot
         const verificationRequest = await initiateAliceVerificationRequest(page);
@@ -102,7 +83,7 @@ test.describe("Device verification", () => {
         // feed the QR code into the verification request.
         const qrData = await readQrCode(infoDialog);
         const verifier = await verificationRequest.evaluateHandle(
-            (request, qrData) => request.scanQRCode(new Uint8Array(qrData)),
+            (request, qrData) => request.scanQRCode(new Uint8ClampedArray(qrData)),
             [...qrData],
         );
 
@@ -137,7 +118,7 @@ test.describe("Device verification", () => {
     });
 
     test("Verify device with Security Phrase during login", async ({ page, app, credentials, homeserver }) => {
-        await logIntoElement(page, homeserver, credentials);
+        await logIntoElement(page, credentials);
 
         // Select the security phrase
         await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with Security Key or Phrase" }).click();
@@ -158,7 +139,7 @@ test.describe("Device verification", () => {
     });
 
     test("Verify device with Security Key during login", async ({ page, app, credentials, homeserver }) => {
-        await logIntoElement(page, homeserver, credentials);
+        await logIntoElement(page, credentials);
 
         // Select the security phrase
         await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with Security Key or Phrase" }).click();
@@ -181,7 +162,7 @@ test.describe("Device verification", () => {
     });
 
     test("Handle incoming verification request with SAS", async ({ page, credentials, homeserver, toasts }) => {
-        await logIntoElement(page, homeserver, credentials);
+        await logIntoElement(page, credentials);
 
         /* Dismiss "Verify this device" */
         const authPage = page.locator(".mx_AuthPage");
@@ -212,16 +193,17 @@ test.describe("Device verification", () => {
         /* on the bot side, wait for the verifier to exist ... */
         const verifier = await awaitVerifier(botVerificationRequest);
         // ... confirm ...
-        botVerificationRequest.evaluate((verificationRequest) => verificationRequest.verifier.verify());
+        void botVerificationRequest.evaluate((verificationRequest) => verificationRequest.verifier.verify());
         // ... and then check the emoji match
         await doTwoWaySasVerification(page, verifier);
 
         /* And we're all done! */
         const infoDialog = page.locator(".mx_InfoDialog");
         await infoDialog.getByRole("button", { name: "They match" }).click();
-        await expect(
-            infoDialog.getByText(`You've successfully verified (${aliceBotClient.credentials.deviceId})!`),
-        ).toBeVisible();
+        // We don't assert the full string as the device name is unset on Synapse but set to the user ID on Dendrite
+        await expect(infoDialog.getByText(`You've successfully verified`)).toContainText(
+            `(${aliceBotClient.credentials.deviceId})`,
+        );
         await infoDialog.getByRole("button", { name: "Got it" }).click();
     });
 });

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

@@ -2,10 +2,12 @@
 Copyright 2024 New Vector Ltd.
 Copyright 2022-2024 The Matrix.org Foundation C.I.C.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
+import { Locator } from "@playwright/test";
+
 import { expect, test } from "../../element-web-test";
 import {
     autoJoin,
@@ -16,6 +18,8 @@ import {
     logOutOfElement,
     verify,
 } from "./utils";
+import { bootstrapCrossSigningForClient } from "../../pages/client.ts";
+import { ElementAppPage } from "../../pages/ElementAppPage.ts";
 
 test.describe("Cryptography", function () {
     test.use({
@@ -49,6 +53,8 @@ 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);
+
+            await app.client.network.setupRoute();
         });
 
         test("should show the correct shield on e2e events", async ({
@@ -60,6 +66,9 @@ test.describe("Cryptography", function () {
             // Bob has a second, not cross-signed, device
             const bobSecondDevice = await createSecondBotDevice(page, homeserver, bob);
 
+            // Dismiss the toast nagging us to set up recovery otherwise it gets in the way of clicking the room list
+            await page.getByRole("button", { name: "Not now" }).click();
+
             await bob.sendEvent(testRoomId, null, "m.room.encrypted", {
                 algorithm: "m.megolm.v1.aes-sha2",
                 ciphertext: "the bird is in the hand",
@@ -129,8 +138,7 @@ test.describe("Cryptography", function () {
                 "Encrypted by a device not verified by its owner.",
             );
 
-            /* In legacy crypto: should show a grey padlock for a message from a deleted device.
-             * In rust crypto: should show a red padlock for a message from an unverified device.
+            /* Should show a red padlock for a message from an unverified device.
              * Rust crypto remembers the verification state of the sending device, so it will know that the device was
              * unverified, even if it gets deleted. */
             // bob deletes his second device
@@ -164,9 +172,7 @@ test.describe("Cryptography", function () {
             await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
             await lastE2eIcon.focus();
             await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
-                workerInfo.project.name === "Legacy Crypto"
-                    ? "Encrypted by an unknown or deleted device."
-                    : "Encrypted by a device not verified by its owner.",
+                "Encrypted by a device not verified by its owner.",
             );
         });
 
@@ -204,7 +210,7 @@ test.describe("Cryptography", function () {
                 window.localStorage.clear();
             });
             await page.reload();
-            await logIntoElement(page, homeserver, aliceCredentials, securityKey);
+            await logIntoElement(page, aliceCredentials, securityKey);
 
             /* go back to the test room and find Bob's message again */
             await app.viewRoomById(testRoomId);
@@ -276,6 +282,15 @@ test.describe("Cryptography", function () {
             bot: bob,
             homeserver,
         }) => {
+            // Workaround for https://github.com/element-hq/element-web/issues/28640:
+            // make sure that Alice has seen Bob's identity before she goes offline. We do this by opening
+            // his user info.
+            await app.toggleRoomInfoPanel();
+            const rightPanel = page.locator(".mx_RightPanel");
+            await rightPanel.getByRole("menuitem", { name: "People" }).click();
+            await rightPanel.getByRole("button", { name: bob.credentials!.userId }).click();
+            await expect(rightPanel.locator(".mx_UserInfo_devices")).toContainText("1 session");
+
             // Our app is blocked from syncing while Bob sends his messages.
             await app.client.network.goOffline();
 
@@ -305,7 +320,50 @@ test.describe("Cryptography", function () {
             );
 
             const penultimate = page.locator(".mx_EventTile").filter({ hasText: "test encrypted from verified" });
-            await expect(penultimate.locator(".mx_EventTile_e2eIcon")).not.toBeVisible();
+            await assertNoE2EIcon(penultimate, app);
+        });
+
+        test("should show correct shields on events sent by users with changed identity", async ({
+            page,
+            app,
+            bot: bob,
+            homeserver,
+        }) => {
+            // Verify Bob
+            await verify(app, bob);
+
+            // Bob logs in a new device and resets cross-signing
+            const bobSecondDevice = await createSecondBotDevice(page, homeserver, bob);
+            await bootstrapCrossSigningForClient(await bobSecondDevice.prepareClient(), bob.credentials, true);
+
+            /* should show an error for a message from a previously verified device */
+            await bobSecondDevice.sendMessage(testRoomId, "test encrypted from user that was previously verified");
+            const last = page.locator(".mx_EventTile_last");
+            await expect(last).toContainText("test encrypted from user that was previously verified");
+            const lastE2eIcon = last.locator(".mx_EventTile_e2eIcon");
+            await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
+            await lastE2eIcon.focus();
+            await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
+                "Sender's verified identity has changed",
+            );
         });
     });
 });
+
+/**
+ * Check that the given message doesn't have an E2E warning icon.
+ *
+ * If it does, throw an error.
+ */
+async function assertNoE2EIcon(messageLocator: Locator, app: ElementAppPage) {
+    // Make sure the message itself exists, before we check if it has any icons
+    await messageLocator.waitFor();
+
+    const e2eIcon = messageLocator.locator(".mx_EventTile_e2eIcon");
+    if ((await e2eIcon.count()) > 0) {
+        // uh-oh, there is an e2e icon. Let's find out what it's about so that we can throw a helpful error.
+        await e2eIcon.focus();
+        const tooltip = await app.getTooltipForElement(e2eIcon);
+        throw new Error(`Found an unexpected e2eIcon with tooltip '${await tooltip.textContent()}'`);
+    }
+}

playwright/e2e/crypto/invisible-crypto.spec.ts

@@ -1,7 +1,7 @@
 /*
 Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
@@ -11,6 +11,7 @@ import { bootstrapCrossSigningForClient } from "../../pages/client.ts";
 
 /** Tests for the "invisible crypto" behaviour -- i.e., when the "exclude insecure devices" setting is enabled */
 test.describe("Invisible cryptography", () => {
+    test.slow();
     test.use({
         displayName: "Alice",
         botCreateOpts: { displayName: "Bob" },

playwright/e2e/crypto/logout.spec.ts

@@ -2,16 +2,18 @@
 Copyright 2024 New Vector Ltd.
 Copyright 2024 The Matrix.org Foundation C.I.C.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
 import { test, expect } from "../../element-web-test";
 import { createRoom, enableKeyBackup, logIntoElement, sendMessageInCurrentRoom } from "./utils";
+import { isDendrite } from "../../plugins/homeserver/dendrite";
 
 test.describe("Logout tests", () => {
+    test.skip(isDendrite, "Dendrite lacks support for MSC3967 so requires additional auth here");
     test.beforeEach(async ({ page, homeserver, credentials }) => {
-        await logIntoElement(page, homeserver, credentials);
+        await logIntoElement(page, credentials);
     });
 
     test("Ask to set up recovery on logout if not setup", async ({ page, app }) => {

playwright/e2e/crypto/migration.spec.ts

@@ -2,34 +2,33 @@
 Copyright 2024 New Vector Ltd.
 Copyright 2023, 2024 The Matrix.org Foundation C.I.C.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
 import path from "path";
 import { readFile } from "node:fs/promises";
 
-import { expect, test as base } from "../../element-web-test";
+import { expect, test } from "../../element-web-test";
 
-const test = base.extend({
-    // Replace the `user` fixture with one which populates the indexeddb data before starting the app.
-    user: async ({ context, pageWithCredentials: page, credentials }, use) => {
-        await page.route(`/test_indexeddb_cryptostore_dump/*`, async (route, request) => {
-            const resourcePath = path.join(__dirname, new URL(request.url()).pathname);
-            const body = await readFile(resourcePath, { encoding: "utf-8" });
-            await route.fulfill({ body });
-        });
-        await page.goto("/test_indexeddb_cryptostore_dump/index.html");
+test.describe("migration", { tag: "@no-webkit" }, function () {
+    test.use({
+        displayName: "Alice",
 
-        await use(credentials);
-    },
-});
+        // Replace the `user` fixture with one which populates the indexeddb data before starting the app.
+        user: async ({ context, pageWithCredentials: page, credentials }, use) => {
+            await page.route(`/test_indexeddb_cryptostore_dump/*`, async (route, request) => {
+                const resourcePath = path.join(__dirname, new URL(request.url()).pathname);
+                const body = await readFile(resourcePath, { encoding: "utf-8" });
+                await route.fulfill({ body });
+            });
+            await page.goto("/test_indexeddb_cryptostore_dump/index.html");
 
-test.describe("migration", function () {
-    test.use({ displayName: "Alice" });
+            await use(credentials);
+        },
+    });
 
     test("Should support migration from legacy crypto", async ({ context, user, page }, workerInfo) => {
-        test.skip(workerInfo.project.name === "Legacy Crypto", "This test only works with Rust crypto.");
         test.slow();
 
         // We should see a migration progress bar