Add timeout to pending reviews automation

Although it might not actually help with the job that got stuck for 17h
because that got stuck before it got started, but this is probably
not a bad idea in general.

.eslintrc.js

@@ -88,7 +88,6 @@ module.exports = {
                 "@typescript-eslint/explicit-function-return-type": "off",
                 "@typescript-eslint/explicit-member-accessibility": "off",
                 "@typescript-eslint/ban-ts-comment": "off",
-                "@typescript-eslint/no-floating-promises": "off",
             },
         },
     ],

.github/cfp_headers

@@ -11,6 +11,3 @@
 
 /apple-app-site-association
   Content-Type: application/json
-
-/.well-known/assetlinks.json
-  Content-Type: application/json

.github/labels.yml

@@ -261,6 +261,3 @@
   color: "ededed"
 - name: "Z-t3chguy"
   color: "ededed"
-- name: "Z-Flaky-Test-Disabled"
-  description: "The flaking test has been disabled"
-  color: "ededed"

.github/workflows/build.yml

@@ -37,7 +37,6 @@ jobs:
             - uses: actions/setup-node@v4
               with:
                   cache: "yarn"
-                  node-version: "lts/*"
 
             # Workaround for yarn install timeouts, especially on Windows
             - run: yarn config set network-timeout 300000

.github/workflows/build_develop.yml

@@ -26,7 +26,6 @@ jobs:
             - uses: actions/setup-node@v4
               with:
                   cache: "yarn"
-                  node-version: "lts/*"
 
             - name: Install Dependencies
               run: "./scripts/layered.sh"
@@ -93,13 +92,13 @@ jobs:
                   find bundles -type d -mindepth 1 -maxdepth 1 -exec sed -i "\:{}:d" _redirects \;
 
             - name: Wait for other steps to succeed
-              uses: t3chguy/wait-on-check-action@18541021811b56544d90e0f073401c2b99e249d6 # fork
+              uses: t3chguy/wait-on-check-action@05861d3a448898eb33dfce34153bd1ecb9422fb9 # fork
               with:
                   ref: ${{ github.sha }}
                   running-workflow-name: "Build & Deploy develop.element.io"
                   repo-token: ${{ secrets.GITHUB_TOKEN }}
                   wait-interval: 10
-                  check-regexp: ^((?!SonarCloud|SonarQube|issue|board|label|Release|prepare|GitHub Pages).)*$
+                  check-regexp: ^((?!SonarCloud|SonarQube|issue|board|label|Release|prepare).)*$
 
             # We keep the latest develop.tar.gz on R2 instead of relying on the github artifact uploaded earlier
             # as the expires after 24h and requires auth to download.

.github/workflows/dockerhub.yaml

@@ -7,9 +7,6 @@ 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
 jobs:
     buildx:
         name: Docker Buildx
@@ -29,23 +26,20 @@ jobs:
               with:
                   fetch-depth: 0 # needed for docker-package to be able to calculate the version
 
-            - name: Install Cosign
-              uses: sigstore/cosign-installer@59acb6260d9c0ba8f4a2f9d9b48431a222b68e20 # v3
-
             - name: Prepare
               if: matrix.prepare
               run: ${{ matrix.prepare }}
 
             - name: Set up QEMU
-              uses: docker/setup-qemu-action@5927c834f5b4fdf503fca6f4c7eccda82949e1ee # v3
+              uses: docker/setup-qemu-action@68827325e0b33c7199eb31dd4e31fbe9023e06e3 # v3
 
             - name: Set up Docker Buildx
-              uses: docker/setup-buildx-action@4fd812986e6c8c2a69e18311145f9371337f27d4 # v3
+              uses: docker/setup-buildx-action@2b51285047da1547ffb1b2203d8be4c0af6b1f20 # v3
               with:
                   install: true
 
             - name: Login to Docker Hub
-              uses: docker/login-action@0d4c9c5ea7693da7b068278f7b52bda2a190a446 # v3
+              uses: docker/login-action@e92390c5fb421da1463c202d546fed0ec5c39f20 # v3
               with:
                   username: ${{ secrets.DOCKERHUB_USERNAME }}
                   password: ${{ secrets.DOCKERHUB_TOKEN }}
@@ -64,8 +58,7 @@ jobs:
                       ${{ matrix.flavor }}
 
             - name: Build and push
-              id: build-and-push
-              uses: docker/build-push-action@1a162644f9a7e87d8f4b053101d1d9a712edc18c # v6
+              uses: docker/build-push-action@2cdde995de11925a030ce8070c3d77a52ffcf1c0 # v5
               with:
                   context: .
                   push: true
@@ -73,17 +66,6 @@ jobs:
                   tags: ${{ steps.meta.outputs.tags }}
                   labels: ${{ steps.meta.outputs.labels }}
 
-            - name: Sign the images with GitHub OIDC Token
-              env:
-                  DIGEST: ${{ steps.build-and-push.outputs.digest }}
-                  TAGS: ${{ steps.meta.outputs.tags }}
-              run: |
-                  images=""
-                  for tag in ${TAGS}; do
-                      images+="${tag}@${DIGEST} "
-                  done
-                  cosign sign --yes ${images}
-
             - name: Update repo description
               if: matrix.variant == 'vanilla'
               uses: peter-evans/dockerhub-description@e98e4d1628a5f3be2be7c231e50981aee98723ae # v4

.github/workflows/docs.yml

@@ -46,7 +46,6 @@ jobs:
               with:
                   cache: "yarn"
                   cache-dependency-path: element-web/yarn.lock
-                  node-version: "lts/*"
 
             - name: Generate automations docs
               working-directory: element-web
@@ -56,7 +55,7 @@ jobs:
                   echo "-   [Automations](automations.md)" >> docs/SUMMARY.md
 
             - name: Setup mdBook
-              uses: peaceiris/actions-mdbook@v2
+              uses: peaceiris/actions-mdbook@v1
               with:
                   mdbook-version: "0.4.10"
 

.github/workflows/downstream-artifacts.yml

@@ -0,0 +1,17 @@
+name: Build downstream artifacts
+on:
+    merge_group:
+        types: [checks_requested]
+    pull_request: {}
+    push:
+        branches: [develop, master]
+concurrency:
+    group: ${{ github.workflow }}-${{ github.ref }}
+    cancel-in-progress: true
+jobs:
+    build-element-web:
+        name: Build element-web
+        uses: matrix-org/matrix-react-sdk/.github/workflows/element-web.yaml@develop
+        with:
+            element-web-sha: ${{ github.sha }}
+            react-sdk-repository: matrix-org/matrix-react-sdk

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

@@ -3,11 +3,10 @@
 
 name: matrix-react-sdk End to End Tests
 on:
-    merge_group:
-        types: [checks_requested]
-    pull_request: {}
-    push:
-        branches: [develop, master]
+    workflow_run:
+        workflows: ["Build downstream artifacts"]
+        types:
+            - completed
 
 concurrency:
     group: ${{ github.workflow }}-${{ github.event.workflow_run.head_branch || github.run_id }}
@@ -16,14 +15,44 @@ concurrency:
 jobs:
     playwright:
         name: Playwright
+        # We only want to run the playwright tests on merge queue to prevent regressions
+        # from creeping in. They take a long time to run and consume multiple concurrent runners.
+        if: github.event.workflow_run.event == 'merge_group'
         uses: matrix-org/matrix-react-sdk/.github/workflows/end-to-end-tests.yaml@develop
         permissions:
             actions: read
             issues: read
+            statuses: write
             pull-requests: read
+            deployments: write
         with:
-            element-web-sha: ${{ github.sha }}
             react-sdk-repository: matrix-org/matrix-react-sdk
-            # We only want to run the playwright tests on merge queue to prevent regressions
-            # from creeping in. They take a long time to run and consume multiple concurrent runners.
-            skip: ${{ github.event_name != 'merge_group' }}
+        secrets:
+            ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
+
+    # We want to make the Playwright tests a required check for the merge queue.
+    #
+    # Unfortunately, github doesn't distinguish between "checks needed for branch
+    # protection" (ie, the things that must pass before the PR will even be added
+    # to the merge queue) and "checks needed in the merge queue". We just have to add
+    # the check to the branch protection list.
+    #
+    # Ergo, if we know we're not going to run the Playwright tests, we need to add a
+    # passing status check manually.
+    mark_skipped:
+        if: github.event.workflow_run.event != 'merge_group'
+        permissions:
+            statuses: write
+        runs-on: ubuntu-latest
+        steps:
+            - uses: Sibz/github-status-action@faaa4d96fecf273bd762985e0e7f9f933c774918 # v1
+              with:
+                  authToken: "${{ secrets.GITHUB_TOKEN }}"
+                  state: success
+                  description: Playwright skipped
+
+                  # Keep in step with the `context` that is updated by `Sibz/github-status-action`
+                  # in matrix-org/matrix-react-sdk/.github/workflows/end-to-end-tests.yaml.
+                  context: "${{ github.workflow }} / end-to-end-tests"
+
+                  sha: "${{ github.event.workflow_run.head_sha }}"

.github/workflows/pending-reviews.yaml

@@ -9,6 +9,7 @@ jobs:
         name: Pending reviews bot
         runs-on: ubuntu-latest
         environment: Matrix
+        timeout-minutes: 1
         env:
             URL: "https://github.com/pulls?q=is%3Apr+is%3Aopen+repo%3Amatrix-org%2Fmatrix-js-sdk+repo%3Amatrix-org%2Fmatrix-react-sdk+repo%3Aelement-hq%2Felement-web+repo%3Aelement-hq%2Felement-desktop+review-requested%3A%40me+sort%3Aupdated-desc+"
             RELEASE_BLOCKERS_URL: "https://github.com/pulls?q=is%3Aopen+repo%3Amatrix-org%2Fmatrix-js-sdk+repo%3Amatrix-org%2Fmatrix-react-sdk+repo%3Aelement-hq%2Felement-web+repo%3Aelement-hq%2Felement-desktop+sort%3Aupdated-desc+label%3AX-Release-Blocker+"

.github/workflows/release.yml

@@ -20,6 +20,7 @@ jobs:
             GPG_PASSPHRASE: ${{ secrets.GPG_PASSPHRASE }}
         with:
             final: ${{ inputs.mode == 'final' }}
+            include-changes: matrix-react-sdk
             gpg-fingerprint: ${{ vars.GPG_FINGERPRINT }}
             asset-path: dist/*.tar.gz
             expected-asset-count: 3
@@ -30,13 +31,11 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - name: Notify element-desktop repo that element-web release has completed to re-trigger release-drafter
-              uses: benc-uk/workflow-dispatch@25b02cc069be46d637e8fe2f1e8484008e9e9609 # v1
+              uses: peter-evans/repository-dispatch@ff45666b9427631e3450c54a1bcbee4d9ff4d7c0 # v3
               with:
-                  workflow: release-drafter.yml
-                  repo: element-hq/element-desktop
-                  ref: staging
-                  # Required when using the `repo` option. Either a PAT or a token generated from the GitHub app or CLI
-                  token: "${{ secrets.ELEMENT_BOT_TOKEN }}"
+                  token: ${{ secrets.ELEMENT_BOT_TOKEN }}
+                  repository: element-hq/element-desktop
+                  event-type: upstream-release-notify
 
     check:
         name: Post release checks

.github/workflows/static_analysis.yaml

@@ -21,7 +21,6 @@ jobs:
             - uses: actions/setup-node@v4
               with:
                   cache: "yarn"
-                  node-version: "lts/*"
 
             - name: Install Dependencies
               run: "./scripts/layered.sh"
@@ -44,7 +43,6 @@ jobs:
             - uses: actions/setup-node@v4
               with:
                   cache: "yarn"
-                  node-version: "lts/*"
 
             # Does not need branch matching as only analyses this layer
             - name: Install Deps
@@ -62,7 +60,6 @@ jobs:
             - uses: actions/setup-node@v4
               with:
                   cache: "yarn"
-                  node-version: "lts/*"
 
             # Needs branch matching as it inherits .stylelintrc.js from matrix-react-sdk
             - name: Install Dependencies
@@ -80,7 +77,6 @@ jobs:
             - uses: actions/setup-node@v4
               with:
                   cache: "yarn"
-                  node-version: "lts/*"
 
             # Does not need branch matching as only analyses this layer
             - name: Install Deps
@@ -98,7 +94,6 @@ jobs:
             - uses: actions/setup-node@v4
               with:
                   cache: "yarn"
-                  node-version: "lts/*"
 
             - name: Install Deps
               run: "scripts/layered.sh"

.github/workflows/tests.yaml

@@ -23,7 +23,6 @@ jobs:
               uses: actions/setup-node@v4
               with:
                   cache: "yarn"
-                  node-version: "lts/*"
 
             - name: Install Dependencies
               run: "./scripts/layered.sh"

.github/workflows/triage-labelled.yml

@@ -56,48 +56,13 @@ jobs:
     move_needs_info_issues:
         name: X-Needs-Info issues to Need info column on triage board
         runs-on: ubuntu-latest
-        if: >
-            contains(github.event.issue.labels.*.name, 'X-Needs-Info')
         steps:
-            - id: add_to_project
-              uses: actions/add-to-project@v1.0.1
+            - uses: konradpabjan/move-labeled-or-milestoned-issue@190352295fe309fcb113b49193bc81d9aaa9cb01
               with:
-                  project-url: ${{ env.PROJECT_URL }}
-                  github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
-
-            - id: set_fields
-              uses: titoportas/update-project-fields@421a54430b3cdc9eefd8f14f9ce0142ab7678751 # v0.1.0
-              with:
-                  project-url: ${{ env.PROJECT_URL }}
-                  github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
-                  item-id: ${{ steps.add_to_project.outputs.itemId }} # Use the item-id output of the previous step
-                  field-keys: Status
-                  field-values: "Needs info"
-        env:
-            PROJECT_URL: https://github.com/orgs/element-hq/projects/120
-
-    move_flakey_test_issues:
-        name: Z-Flaky-Test issues to Sized for maintainer column on triage board
-        runs-on: ubuntu-latest
-        if: >
-            contains(github.event.issue.labels.*.name, 'Z-Flaky-Test')
-        steps:
-            - id: add_to_project
-              uses: actions/add-to-project@v1.0.1
-              with:
-                  project-url: ${{ env.PROJECT_URL }}
-                  github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
-
-            - id: set_fields
-              uses: titoportas/update-project-fields@421a54430b3cdc9eefd8f14f9ce0142ab7678751 # v0.1.0
-              with:
-                  project-url: ${{ env.PROJECT_URL }}
-                  github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
-                  item-id: ${{ steps.add_to_project.outputs.itemId }} # Use the item-id output of the previous step
-                  field-keys: Status
-                  field-values: "Sized for maintainer"
-        env:
-            PROJECT_URL: https://github.com/orgs/element-hq/projects/120
+                  action-token: "${{ secrets.ELEMENT_BOT_TOKEN }}"
+                  project-url: "https://github.com/element-hq/element-web/projects/120"
+                  column-name: "Needs info"
+                  label-name: "X-Needs-Info"
 
     add_priority_design_issues_to_project:
         name: P1 X-Needs-Design to Design project board
@@ -183,7 +148,7 @@ jobs:
             contains(github.event.issue.labels.*.name, 'A-Element-R')
         steps:
             - id: add_to_project
-              uses: actions/add-to-project@v1.0.2
+              uses: actions/add-to-project@v1.0.0
               with:
                   project-url: ${{ env.PROJECT_URL }}
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}

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

@@ -1,17 +0,0 @@
-name: Close stale flaky issues
-on:
-    schedule:
-        - cron: "30 1 * * *"
-jobs:
-    close:
-        runs-on: ubuntu-latest
-        permissions:
-            issues: write
-        steps:
-            - uses: actions/stale@v9
-              with:
-                  only-labels: "Z-Flaky-Test"
-                  days-before-stale: 14
-                  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"

.github/workflows/update-jitsi.yml

@@ -13,7 +13,6 @@ jobs:
             - uses: actions/setup-node@v4
               with:
                   cache: "yarn"
-                  node-version: "lts/*"
 
             - name: Install Deps
               run: "yarn install --frozen-lockfile"
@@ -22,7 +21,7 @@ jobs:
               run: "yarn update:jitsi"
 
             - name: Create Pull Request
-              uses: peter-evans/create-pull-request@c5a7806660adbe173f04e3e038b0ccdcd758773c # v6
+              uses: peter-evans/create-pull-request@70a41aba780001da0a30141984ae2a0c95d8704e # v6
               with:
                   token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   branch: actions/jitsi-update

.modernizr.json

@@ -1,5 +1,5 @@
 {
-    "minify": false,
+    "minify": true,
     "enableClasses": false,
     "feature-detects": [
         "test/css/animations",
@@ -31,7 +31,6 @@
         "test/json",
         "test/network/fetch",
         "test/storage/localstorage",
-        "test/window/resizeobserver",
-        "test/audio/webaudio"
+        "test/window/resizeobserver"
     ]
 }

CHANGELOG.md

@@ -1,249 +1,3 @@
-Changes in [1.11.72](https://github.com/element-hq/element-web/releases/tag/v1.11.72) (2024-07-30)
-==================================================================================================
-## ✨ Features
-
-* Polyfill Intl.Segmenter for wider web browser compatibility ([#27803](https://github.com/element-hq/element-web/pull/27803)). Contributed by @dbkr.
-* Enable audio/webaudio Modernizr rule ([#27772](https://github.com/element-hq/element-web/pull/27772)). Contributed by @t3chguy.
-* Add release announcement for the new room header ([#12802](https://github.com/matrix-org/matrix-react-sdk/pull/12802)). Contributed by @MidhunSureshR.
-* Default the room header to on ([#12803](https://github.com/matrix-org/matrix-react-sdk/pull/12803)). Contributed by @MidhunSureshR.
-* Update Thread Panel to match latest designs ([#12797](https://github.com/matrix-org/matrix-react-sdk/pull/12797)). Contributed by @t3chguy.
-* Close any open modals on logout ([#12777](https://github.com/matrix-org/matrix-react-sdk/pull/12777)). Contributed by @dbkr.
-* Iterate design of right panel empty state ([#12796](https://github.com/matrix-org/matrix-react-sdk/pull/12796)). Contributed by @t3chguy.
-* Update styling of UserInfo right panel card ([#12788](https://github.com/matrix-org/matrix-react-sdk/pull/12788)). Contributed by @t3chguy.
-* Accessibility: Add Landmark navigation ([#12190](https://github.com/matrix-org/matrix-react-sdk/pull/12190)). Contributed by @akirk.
-* Let Element Call widget receive m.room.create ([#12710](https://github.com/matrix-org/matrix-react-sdk/pull/12710)). Contributed by @AndrewFerr.
-* Let Element Call widget set session memberships ([#12713](https://github.com/matrix-org/matrix-react-sdk/pull/12713)). Contributed by @AndrewFerr.
-* Update right panel base card styling to match Compound ([#12768](https://github.com/matrix-org/matrix-react-sdk/pull/12768)). Contributed by @t3chguy.
-* Align `widget_build_url_ignore_dm` with call behaviour switch between 1:1 and Widget ([#12760](https://github.com/matrix-org/matrix-react-sdk/pull/12760)). Contributed by @t3chguy.
-* Move integrations switch ([#12733](https://github.com/matrix-org/matrix-react-sdk/pull/12733)). Contributed by @dbkr.
-* Element-R: Report events with withheld keys separately to Posthog. ([#12755](https://github.com/matrix-org/matrix-react-sdk/pull/12755)). Contributed by @richvdh.
-
-## 🐛 Bug Fixes
-
-* Add a modernizr check for WebAssembly support ([#27776](https://github.com/element-hq/element-web/pull/27776)). Contributed by @dbkr.
-* Test for lack of WebAssembly support ([#12792](https://github.com/matrix-org/matrix-react-sdk/pull/12792)). Contributed by @dbkr.
-* Fix stray 'account' heading ([#12791](https://github.com/matrix-org/matrix-react-sdk/pull/12791)). Contributed by @dbkr.
-* Add test for the unsupported browser screen ([#12787](https://github.com/matrix-org/matrix-react-sdk/pull/12787)). Contributed by @dbkr.
-* Fix HTML export test ([#12778](https://github.com/matrix-org/matrix-react-sdk/pull/12778)). Contributed by @dbkr.
-* Fix HTML export missing a bunch of Compound variables ([#12774](https://github.com/matrix-org/matrix-react-sdk/pull/12774)). Contributed by @t3chguy.
-* Fix inability to change accent colour consistently in custom theming ([#12772](https://github.com/matrix-org/matrix-react-sdk/pull/12772)). Contributed by @t3chguy.
-* Fix edge case of landing on 3pid email link with registration disabled ([#12771](https://github.com/matrix-org/matrix-react-sdk/pull/12771)). Contributed by @t3chguy.
-
-
-
-Changes in [1.11.71](https://github.com/element-hq/element-web/releases/tag/v1.11.71) (2024-07-16)
-==================================================================================================
-## ✨ Features
-
-* Add Modernizr rule for Intl.Segmenter ([#27677](https://github.com/element-hq/element-web/pull/27677)). Contributed by @t3chguy.
-* Add tabs to the right panel ([#12672](https://github.com/matrix-org/matrix-react-sdk/pull/12672)). Contributed by @MidhunSureshR.
-* Promote new room header from labs to Beta ([#12739](https://github.com/matrix-org/matrix-react-sdk/pull/12739)). Contributed by @t3chguy.
-* Redesign room search interface ([#12677](https://github.com/matrix-org/matrix-react-sdk/pull/12677)). Contributed by @t3chguy.
-* Move language settings to 'preferences' ([#12723](https://github.com/matrix-org/matrix-react-sdk/pull/12723)). Contributed by @dbkr.
-* New layout selector ui in user settings ([#12676](https://github.com/matrix-org/matrix-react-sdk/pull/12676)). Contributed by @florianduros.
-* Prevent Element appearing in system media controls  ([#10995](https://github.com/matrix-org/matrix-react-sdk/pull/10995)). Contributed by @SuperKenVery.
-* Move the account management button ([#12663](https://github.com/matrix-org/matrix-react-sdk/pull/12663)). Contributed by @dbkr.
-* Disable profile controls if the HS doesn't allow them to be set ([#12652](https://github.com/matrix-org/matrix-react-sdk/pull/12652)). Contributed by @dbkr.
-* New theme ui in user settings ([#12576](https://github.com/matrix-org/matrix-react-sdk/pull/12576)). Contributed by @florianduros.
-* Adjust room header hover transition from 300ms to 200ms ([#12703](https://github.com/matrix-org/matrix-react-sdk/pull/12703)). Contributed by @t3chguy.
-* Split out email \& phone number settings to separate components \& move discovery to privacy tab ([#12670](https://github.com/matrix-org/matrix-react-sdk/pull/12670)). Contributed by @dbkr.
-
-## 🐛 Bug Fixes
-
-* Ensure we do not load matrix-react-sdk is a manner which can white-screen ([#27685](https://github.com/element-hq/element-web/pull/27685)). Contributed by @t3chguy.
-* Fix incoming call toast crash due to audio refactor ([#12737](https://github.com/matrix-org/matrix-react-sdk/pull/12737)). Contributed by @t3chguy.
-* Improve new room header accessibility ([#12725](https://github.com/matrix-org/matrix-react-sdk/pull/12725)). Contributed by @t3chguy.
-* Fix closing all modals ([#12728](https://github.com/matrix-org/matrix-react-sdk/pull/12728)). Contributed by @dbkr.
-* Fix close button on forgot password flow ([#12732](https://github.com/matrix-org/matrix-react-sdk/pull/12732)). Contributed by @dbkr.
-* Don't consider textual characters to be emoji ([#12582](https://github.com/matrix-org/matrix-react-sdk/pull/12582)). Contributed by @robintown.
-* Clear autocomplete input on selection accept ([#12709](https://github.com/matrix-org/matrix-react-sdk/pull/12709)). Contributed by @dbkr.
-* Fix `Match system theme` toggle ([#12719](https://github.com/matrix-org/matrix-react-sdk/pull/12719)). Contributed by @florianduros.
-
-
-
-Changes in [1.11.70](https://github.com/element-hq/element-web/releases/tag/v1.11.70) (2024-07-08)
-==================================================================================================
-## ✨ Features
-
-* Add SSO redirect option for login page ([#27576](https://github.com/element-hq/element-web/pull/27576)). Contributed by @bartvdbraak.
-* Use stable endpoints for MSC3916 ([#27558](https://github.com/element-hq/element-web/pull/27558)). Contributed by @turt2live.
-* Switch to Rust crypto stack for all logins ([#12630](https://github.com/matrix-org/matrix-react-sdk/pull/12630)). Contributed by @richvdh.
-* Hide voip buttons in group rooms in environments with widgets disabled ([#12664](https://github.com/matrix-org/matrix-react-sdk/pull/12664)). Contributed by @t3chguy.
-* Minor tweaks to UserSettings dialog ([#12651](https://github.com/matrix-org/matrix-react-sdk/pull/12651)). Contributed by @florianduros.
-* Hide voice call button when redundant ([#12639](https://github.com/matrix-org/matrix-react-sdk/pull/12639)). Contributed by @t3chguy.
-* Improve accessibility of the room summary card ([#12586](https://github.com/matrix-org/matrix-react-sdk/pull/12586)). Contributed by @t3chguy.
-* Show tooltips on narrow tabbed views ([#12624](https://github.com/matrix-org/matrix-react-sdk/pull/12624)). Contributed by @dbkr.
-* Update gfm.css to github-markdown-css ([#12613](https://github.com/matrix-org/matrix-react-sdk/pull/12613)). Contributed by @t3chguy.
-* Cache e2eStatus to avoid concerning unencrypted flicker when changing rooms ([#12606](https://github.com/matrix-org/matrix-react-sdk/pull/12606)). Contributed by @t3chguy.
-* Tweak copy for user verification toast ([#12605](https://github.com/matrix-org/matrix-react-sdk/pull/12605)). Contributed by @t3chguy.
-* Support s tags for strikethrough for Matrix v1.10 ([#12604](https://github.com/matrix-org/matrix-react-sdk/pull/12604)). Contributed by @t3chguy.
-
-## 🐛 Bug Fixes
-
-* Fix "Unable to restore session" error ([#4299](https://github.com/matrix-org/matrix-js-sdk/pull/4299)).
-* Fix error when sending encrypted messages in large rooms ([#4297](https://github.com/matrix-org/matrix-js-sdk/pull/4297)).
-* Remove redundant copy in deactive uia modal ([#12668](https://github.com/matrix-org/matrix-react-sdk/pull/12668)). Contributed by @t3chguy.
-* Fix high contrast theme in settings ([#12649](https://github.com/matrix-org/matrix-react-sdk/pull/12649)). Contributed by @florianduros.
-* Fix background on live location sharing footer ([#12629](https://github.com/matrix-org/matrix-react-sdk/pull/12629)). Contributed by @t3chguy.
-* Remove outdated iframe sandbox attribute ([#12633](https://github.com/matrix-org/matrix-react-sdk/pull/12633)). Contributed by @t3chguy.
-* Remove stray setState which caused encryption state shields to flicker ([#12632](https://github.com/matrix-org/matrix-react-sdk/pull/12632)). Contributed by @t3chguy.
-* Fix stray background colour on markdown body ([#12628](https://github.com/matrix-org/matrix-react-sdk/pull/12628)). Contributed by @t3chguy.
-* Fix widgets not being cleaned up correctly. ([#12616](https://github.com/matrix-org/matrix-react-sdk/pull/12616)). Contributed by @toger5.
-* Add in-progress view to display name EditInPlace ([#12609](https://github.com/matrix-org/matrix-react-sdk/pull/12609)). Contributed by @dbkr.
-* Fix config override of other settings levels ([#12593](https://github.com/matrix-org/matrix-react-sdk/pull/12593)). Contributed by @langleyd.
-* Don't show 'saved' on display name save error ([#12600](https://github.com/matrix-org/matrix-react-sdk/pull/12600)). Contributed by @dbkr.
-
-
-
-Changes in [1.11.69](https://github.com/element-hq/element-web/releases/tag/v1.11.69) (2024-06-18)
-==================================================================================================
-## ✨ Features
-
-* Change avatar setting component to use a menu ([#12585](https://github.com/matrix-org/matrix-react-sdk/pull/12585)). Contributed by @dbkr.
-* New user profile UI in User Settings ([#12548](https://github.com/matrix-org/matrix-react-sdk/pull/12548)). Contributed by @dbkr.
-* MSC4108 support OIDC QR code login ([#12370](https://github.com/matrix-org/matrix-react-sdk/pull/12370)). Contributed by @t3chguy.
-
-## 🐛 Bug Fixes
-
-* Fix image upload preview size ([#12612](https://github.com/matrix-org/matrix-react-sdk/pull/12612)). Contributed by @RiotRobot.
-* Fix screen sharing in recent Chrome (https://github.com/matrix-org/matrix-js-sdk/pull/4243).
-* Fix roving tab index crash `compareDocumentPosition` ([#12594](https://github.com/matrix-org/matrix-react-sdk/pull/12594)). Contributed by @t3chguy.
-* Keep dialog glass border on narrow screens ([#12591](https://github.com/matrix-org/matrix-react-sdk/pull/12591)). Contributed by @dbkr.
-* Add missing a11y label to dismiss onboarding button in room list ([#12587](https://github.com/matrix-org/matrix-react-sdk/pull/12587)). Contributed by @t3chguy.
-* Add hover / active state on avatar setting upload button ([#12590](https://github.com/matrix-org/matrix-react-sdk/pull/12590)). Contributed by @dbkr.
-* Fix EditInPlace button styles ([#12589](https://github.com/matrix-org/matrix-react-sdk/pull/12589)). Contributed by @dbkr.
-* Fix incorrect assumptions about required fields in /search response ([#12575](https://github.com/matrix-org/matrix-react-sdk/pull/12575)). Contributed by @t3chguy.
-* Fix display of no avatar in avatar setting controls ([#12558](https://github.com/matrix-org/matrix-react-sdk/pull/12558)). Contributed by @dbkr.
-* Element-R: pass pickleKey in as raw key for indexeddb encryption ([#12543](https://github.com/matrix-org/matrix-react-sdk/pull/12543)). Contributed by @richvdh.
-
-
-
-Changes in [1.11.68](https://github.com/element-hq/element-web/releases/tag/v1.11.68) (2024-06-04)
-==================================================================================================
-## ✨ Features
-
-* Tooltip: Improve accessibility for  context menus ([#12462](https://github.com/matrix-org/matrix-react-sdk/pull/12462)). Contributed by @florianduros.
-* Tooltip: Improve accessibility of space panel ([#12525](https://github.com/matrix-org/matrix-react-sdk/pull/12525)). Contributed by @florianduros.
-
-## 🐛 Bug Fixes
-
-* Close the release announcement when a dialog is opened ([#12559](https://github.com/matrix-org/matrix-react-sdk/pull/12559)). Contributed by @florianduros.
-* Tooltip: close field tooltip when ESC is pressed ([#12553](https://github.com/matrix-org/matrix-react-sdk/pull/12553)). Contributed by @florianduros.
-* Fix tabbedview breakpoint width ([#12556](https://github.com/matrix-org/matrix-react-sdk/pull/12556)). Contributed by @dbkr.
-* Fix E2E icon display in room header ([#12545](https://github.com/matrix-org/matrix-react-sdk/pull/12545)). Contributed by @florianduros.
-* Tooltip: Improve placement for space settings ([#12541](https://github.com/matrix-org/matrix-react-sdk/pull/12541)). Contributed by @florianduros.
-* Fix deformed avatar in a call in a narrow timeline ([#12538](https://github.com/matrix-org/matrix-react-sdk/pull/12538)). Contributed by @florianduros.
-* Shown own sent state indicator even when showReadReceipts is disabled ([#12540](https://github.com/matrix-org/matrix-react-sdk/pull/12540)). Contributed by @t3chguy.
-* Ensure we do not fire the verification mismatch modal multiple times ([#12526](https://github.com/matrix-org/matrix-react-sdk/pull/12526)). Contributed by @t3chguy.
-* Fix avatar in chat export ([#12537](https://github.com/matrix-org/matrix-react-sdk/pull/12537)). Contributed by @florianduros.
-* Use `*` for italics as it doesn't break when used mid-word ([#12523](https://github.com/matrix-org/matrix-react-sdk/pull/12523)). Contributed by @t3chguy.
-
-
-Changes in [1.11.67](https://github.com/element-hq/element-web/releases/tag/v1.11.67) (2024-05-22)
-==================================================================================================
-## ✨ Features
-
-* Tooltip: Improve the accessibility of the composer and the rich text editor ([#12459](https://github.com/matrix-org/matrix-react-sdk/pull/12459)). Contributed by @florianduros.
-* Allow explicit configuration of OIDC dynamic registration metadata ([#12514](https://github.com/matrix-org/matrix-react-sdk/pull/12514)). Contributed by @t3chguy.
-* Tooltip: improve accessibility for messages ([#12487](https://github.com/matrix-org/matrix-react-sdk/pull/12487)). Contributed by @florianduros.
-* Collapse UserSettings tabs to just icons on narrow screens ([#12505](https://github.com/matrix-org/matrix-react-sdk/pull/12505)). Contributed by @dbkr.
-* Add room topic to right panel room info ([#12503](https://github.com/matrix-org/matrix-react-sdk/pull/12503)). Contributed by @t3chguy.
-* OIDC: pass `id_token` via `id_token_hint` on Manage Account interaction ([#12499](https://github.com/matrix-org/matrix-react-sdk/pull/12499)). Contributed by @t3chguy.
-* Tooltip: improve accessibility in room ([#12493](https://github.com/matrix-org/matrix-react-sdk/pull/12493)). Contributed by @florianduros.
-* Tooltip: improve accessibility for call and voice messages ([#12489](https://github.com/matrix-org/matrix-react-sdk/pull/12489)). Contributed by @florianduros.
-* Move the active tab in user settings to the dialog title ([#12481](https://github.com/matrix-org/matrix-react-sdk/pull/12481)). Contributed by @dbkr.
-* Tooltip: improve accessibility of spaces ([#12497](https://github.com/matrix-org/matrix-react-sdk/pull/12497)). Contributed by @florianduros.
-* Tooltip: improve accessibility of the right panel ([#12490](https://github.com/matrix-org/matrix-react-sdk/pull/12490)). Contributed by @florianduros.
-* MSC3575 (Sliding Sync) add well-known proxy support ([#12307](https://github.com/matrix-org/matrix-react-sdk/pull/12307)). Contributed by @EdGeraghty.
-
-## 🐛 Bug Fixes
-
-* Reuse single PlaybackWorker between Playback instances ([#12520](https://github.com/matrix-org/matrix-react-sdk/pull/12520)). Contributed by @t3chguy.
-* Fix well-known lookup for sliding sync labs check ([#12519](https://github.com/matrix-org/matrix-react-sdk/pull/12519)). Contributed by @t3chguy.
-* Fix `element-desktop-ssoid being` included in OIDC Authorization call ([#12495](https://github.com/matrix-org/matrix-react-sdk/pull/12495)). Contributed by @t3chguy.
-* Fix beta notifications reconciliation for intentional mentions push rules ([#12510](https://github.com/matrix-org/matrix-react-sdk/pull/12510)). Contributed by @t3chguy.
-* fix avatar stretched on 1:1 call ([#12494](https://github.com/matrix-org/matrix-react-sdk/pull/12494)). Contributed by @I-lander.
-* Check native sliding sync support against an unstable feature flag ([#12498](https://github.com/matrix-org/matrix-react-sdk/pull/12498)). Contributed by @turt2live.
-* Use OPTIONS for sliding sync detection poke ([#12492](https://github.com/matrix-org/matrix-react-sdk/pull/12492)). Contributed by @turt2live.
-* TAC: hide tooltip when the release announcement is displayed ([#12472](https://github.com/matrix-org/matrix-react-sdk/pull/12472)). Contributed by @florianduros.
-
-
-
-Changes in [1.11.66](https://github.com/element-hq/element-web/releases/tag/v1.11.66) (2024-05-07)
-==================================================================================================
-## ✨ Features
-
-* Use a different error message for UTDs when you weren't in the room. ([#12453](https://github.com/matrix-org/matrix-react-sdk/pull/12453)). Contributed by @uhoreg.
-* Take the Threads Activity Centre out of labs ([#12439](https://github.com/matrix-org/matrix-react-sdk/pull/12439)). Contributed by @dbkr.
-* Expected UTDs: use a different message for UTDs sent before login ([#12391](https://github.com/matrix-org/matrix-react-sdk/pull/12391)). Contributed by @richvdh.
-* Add `Tooltip` to `AccessibleButton` ([#12443](https://github.com/matrix-org/matrix-react-sdk/pull/12443)). Contributed by @florianduros.
-* Add analytics to activity toggles ([#12418](https://github.com/matrix-org/matrix-react-sdk/pull/12418)). Contributed by @dbkr.
-* Decrypt events in reverse order without copying the array ([#12445](https://github.com/matrix-org/matrix-react-sdk/pull/12445)). Contributed by @Johennes.
-* Use new compound tooltip ([#12416](https://github.com/matrix-org/matrix-react-sdk/pull/12416)). Contributed by @florianduros.
-* Expected UTDs: report a different Posthog code ([#12389](https://github.com/matrix-org/matrix-react-sdk/pull/12389)). Contributed by @richvdh.
-
-## 🐛 Bug Fixes
-
-* TAC: Fix accessibility issue when the Release announcement is displayed ([#12484](https://github.com/matrix-org/matrix-react-sdk/pull/12484)). Contributed by @RiotRobot.
-* TAC: Close Release Announcement when TAC button is clicked ([#12485](https://github.com/matrix-org/matrix-react-sdk/pull/12485)). Contributed by @florianduros.
-* MenuItem: fix caption usage ([#12455](https://github.com/matrix-org/matrix-react-sdk/pull/12455)). Contributed by @florianduros.
-* Show the local echo in previews ([#12451](https://github.com/matrix-org/matrix-react-sdk/pull/12451)). Contributed by @langleyd.
-* Fixed the drag and drop of X #27186 ([#12450](https://github.com/matrix-org/matrix-react-sdk/pull/12450)). Contributed by @asimdelvi.
-* Move the TAC to above the button ([#12438](https://github.com/matrix-org/matrix-react-sdk/pull/12438)). Contributed by @dbkr.
-* Use the same logic in previews as the timeline to hide events that should be hidden ([#12434](https://github.com/matrix-org/matrix-react-sdk/pull/12434)). Contributed by @langleyd.
-* Fix selector so maths support doesn't mangle divs ([#12433](https://github.com/matrix-org/matrix-react-sdk/pull/12433)). Contributed by @uhoreg.
-
-
-
-Changes in [1.11.65](https://github.com/element-hq/element-web/releases/tag/v1.11.65) (2024-04-23)
-==================================================================================================
-## ✨ Features
-
-* Make empty state copy for TAC depend on the value of the setting ([#12419](https://github.com/matrix-org/matrix-react-sdk/pull/12419)). Contributed by @dbkr.
-* Linkify User Interactive Authentication errors ([#12271](https://github.com/matrix-org/matrix-react-sdk/pull/12271)). Contributed by @t3chguy.
-* Add support for device dehydration v2 ([#12316](https://github.com/matrix-org/matrix-react-sdk/pull/12316)). Contributed by @uhoreg.
-* Replace `SecurityCustomisations` with `CryptoSetupExtension` ([#12342](https://github.com/matrix-org/matrix-react-sdk/pull/12342)). Contributed by @thoraj.
-* Add activity toggle for TAC ([#12413](https://github.com/matrix-org/matrix-react-sdk/pull/12413)). Contributed by @dbkr.
-* Humanize spell check language labels ([#12409](https://github.com/matrix-org/matrix-react-sdk/pull/12409)). Contributed by @t3chguy.
-* Call Guest Access, give user the option to change the acces level so they can generate a call link. ([#12401](https://github.com/matrix-org/matrix-react-sdk/pull/12401)). Contributed by @toger5.
-* TAC: Release Announcement ([#12380](https://github.com/matrix-org/matrix-react-sdk/pull/12380)). Contributed by @florianduros.
-* Show the call and share button if the user can create a guest link. ([#12385](https://github.com/matrix-org/matrix-react-sdk/pull/12385)). Contributed by @toger5.
-* Add analytics for mark all threads unread ([#12384](https://github.com/matrix-org/matrix-react-sdk/pull/12384)). Contributed by @dbkr.
-* Add `EventType.RoomEncryption` to the auto approve capabilities of Element Call widgets ([#12386](https://github.com/matrix-org/matrix-react-sdk/pull/12386)). Contributed by @toger5.
-
-## 🐛 Bug Fixes
-
-* Fix link modal not shown after access upgrade ([#12411](https://github.com/matrix-org/matrix-react-sdk/pull/12411)). Contributed by @toger5.
-* Fix thread navigation in timeline ([#12412](https://github.com/matrix-org/matrix-react-sdk/pull/12412)). Contributed by @florianduros.
-* Fix inability to join a `knock` room via space hierarchy view ([#12404](https://github.com/matrix-org/matrix-react-sdk/pull/12404)). Contributed by @t3chguy.
-* Focus the thread panel when clicking on an item in the TAC ([#12410](https://github.com/matrix-org/matrix-react-sdk/pull/12410)). Contributed by @dbkr.
-* Fix space hierarchy tile busy state being stuck after join error ([#12405](https://github.com/matrix-org/matrix-react-sdk/pull/12405)). Contributed by @t3chguy.
-* Fix room topic in-app links not being handled correctly on topic dialog ([#12406](https://github.com/matrix-org/matrix-react-sdk/pull/12406)). Contributed by @t3chguy.
-
-
-
-Changes in [1.11.64](https://github.com/element-hq/element-web/releases/tag/v1.11.64) (2024-04-09)
-==================================================================================================
-## ✨ Features
-
-* Mark all threads as read button ([#12378](https://github.com/matrix-org/matrix-react-sdk/pull/12378)). Contributed by @dbkr.
-* Video call meta space ([#12297](https://github.com/matrix-org/matrix-react-sdk/pull/12297)). Contributed by @toger5.
-* Add leave room warning for last admin ([#9452](https://github.com/matrix-org/matrix-react-sdk/pull/9452)). Contributed by @Arnei.
-* Iterate styles around Link new device via QR ([#12356](https://github.com/matrix-org/matrix-react-sdk/pull/12356)). Contributed by @t3chguy.
-* Improve code-splitting of highlight.js and maplibre-gs libs ([#12349](https://github.com/matrix-org/matrix-react-sdk/pull/12349)). Contributed by @t3chguy.
-* Use data-mx-color for rainbows ([#12325](https://github.com/matrix-org/matrix-react-sdk/pull/12325)). Contributed by @tulir.
-
-## 🐛 Bug Fixes
-
-* Fix external guest access url for unencrypted rooms ([#12345](https://github.com/matrix-org/matrix-react-sdk/pull/12345)). Contributed by @toger5.
-* Fix video rooms not showing share link button ([#12374](https://github.com/matrix-org/matrix-react-sdk/pull/12374)). Contributed by @toger5.
-* Fix space topic jumping on hover/focus ([#12377](https://github.com/matrix-org/matrix-react-sdk/pull/12377)). Contributed by @t3chguy.
-* Allow popping out a Jitsi widget to respect Desktop `web_base_url` config ([#12376](https://github.com/matrix-org/matrix-react-sdk/pull/12376)). Contributed by @t3chguy.
-* Remove the Lazy Loading `InvalidStoreError` Dialogs ([#12358](https://github.com/matrix-org/matrix-react-sdk/pull/12358)). Contributed by @langleyd.
-* Improve readability of badges and pills ([#12360](https://github.com/matrix-org/matrix-react-sdk/pull/12360)). Contributed by @robintown.
-
-
-
 Changes in [1.11.63](https://github.com/element-hq/element-web/releases/tag/v1.11.63) (2024-03-28)
 ==================================================================================================
 This is a hotfix release to fix a couple of issues: one where the client would sometimes call the client/server API to set a push rule in a loop, and one where authentication was not sent for widgets when it should have been.

babel.config.js

@@ -17,17 +17,17 @@ module.exports = {
     ],
     plugins: [
         "@babel/plugin-proposal-export-default-from",
-        "@babel/plugin-transform-numeric-separator",
-        "@babel/plugin-transform-class-properties",
-        "@babel/plugin-transform-object-rest-spread",
-        "@babel/plugin-transform-optional-chaining",
-        "@babel/plugin-transform-nullish-coalescing-operator",
+        "@babel/plugin-proposal-numeric-separator",
+        "@babel/plugin-proposal-class-properties",
+        "@babel/plugin-proposal-object-rest-spread",
+        "@babel/plugin-proposal-optional-chaining",
+        "@babel/plugin-proposal-nullish-coalescing-operator",
 
         // transform logical assignment (??=, ||=, &&=). preset-env doesn't
         // normally bother with these (presumably because all the target
         // browsers support it natively), but they make our webpack version (or
         // something downstream of babel, at least) fall over.
-        "@babel/plugin-transform-logical-assignment-operators",
+        "@babel/plugin-proposal-logical-assignment-operators",
 
         "@babel/plugin-syntax-dynamic-import",
         "@babel/plugin-transform-runtime",

code_style.md

@@ -225,12 +225,6 @@ Unless otherwise specified, the following applies to all code:
     }
     ```
 
-37. Avoid functions whose fundamental behaviour varies with different parameter types.
-    Multiple return types are fine, but if the function's behaviour is going to change significantly,
-    have two separate functions. For example, `SDKConfig.get()` with a string param which returns the
-    type according to the param given is ok, but `SDKConfig.get()` with no args returning the whole
-    config object would not be: this should just be a separate function.
-
 ## React
 
 Inheriting all the rules of TypeScript, the following additionally apply:

docs/config.md

@@ -250,60 +250,17 @@ When Element is deployed alongside a homeserver with SSO-only login, some option
    user can be sent to in order to log them out of that system too, making logout symmetric between Element and the SSO system.
 2. `sso_redirect_options`: Options to define how to handle unauthenticated users. If the object contains `"immediate": true`, then
    all unauthenticated users will be automatically redirected to the SSO system to start their login. If instead you'd only like to
-   have users which land on the welcome page to be redirected, use `"on_welcome_page": true`. Additionally, there is an option to
-   redirect anyone landing on the login page, by using `"on_login_page": true`. As an example:
+   have users which land on the welcome page to be redirected, use `"on_welcome_page": true`. As an example:
     ```json
     {
         "sso_redirect_options": {
             "immediate": false,
-            "on_welcome_page": true,
-            "on_login_page": true
+            "on_welcome_page": true
         }
     }
     ```
     It is most common to use the `immediate` flag instead of `on_welcome_page`.
 
-## Native OIDC
-
-Native OIDC support is currently in labs and is subject to change.
-
-Static OIDC Client IDs are preferred and can be specified under `oidc_static_clients` as a mapping from `issuer` to configuration object containing `client_id`.
-Issuer must have a trailing forward slash. As an example:
-
-```json
-{
-    "oidc_static_clients": {
-        "https://auth.example.com/": {
-            "client_id": "example-client-id"
-        }
-    }
-}
-```
-
-If a matching static client is not found, the app will attempt to dynamically register a client using metadata specified under `oidc_metadata`.
-The app has sane defaults for the metadata properties below but on stricter policy identity providers they may not pass muster, e.g. `contacts` may be required.
-The following subproperties are available:
-
-1. `client_uri`: This is the base URI for the OIDC client registration, typically `logo_uri`, `tos_uri`, and `policy_uri` must be either on the same domain or a subdomain of this URI.
-2. `logo_uri`: Optional URI for the client logo.
-3. `tos_uri`: Optional URI for the client's terms of service.
-4. `policy_uri`: Optional URI for the client's privacy policy.
-5. `contacts`: Optional list of contact emails for the client.
-
-As an example:
-
-```json
-{
-    "oidc_metadata": {
-        "client_uri": "https://example.com",
-        "logo_uri": "https://example.com/logo.png",
-        "tos_uri": "https://example.com/tos",
-        "policy_uri": "https://example.com/policy",
-        "contacts": ["support@example.com"]
-    }
-}
-```
-
 ## VoIP / Jitsi calls
 
 Currently, Element uses Jitsi to offer conference calls in rooms, with an experimental Element Call implementation in the works.
@@ -374,8 +331,8 @@ The VoIP and Jitsi options are:
     }
     ```
     The `widget` is the `content` of a normal widget state event. The `layout` is the layout specifier for the widget being created,
-    as defined by the `io.element.widgets.layout` state event. By default this applies to all rooms, but the behaviour can be skipped for
-    2-person rooms, causing Element to fall back to 1:1 VoIP, by setting the option `widget_build_url_ignore_dm` to `true`.
+    as defined by the `io.element.widgets.layout` state event. By default this applies to all rooms, but the behaviour can be skipped for DMs
+    by setting the option `widget_build_url_ignore_dm` to `true`.
 5. `audio_stream_url`: Optional URL to pass to Jitsi to enable live streaming. This option is considered experimental and may be removed
    at any time without notice.
 6. `element_call`: Optional configuration for native group calls using Element Call, with the following subkeys:

docs/labs.md

@@ -110,6 +110,29 @@ This is useful while we experiment with encryption and to make calling compatibl
 
 Enables rendering of MD / HTML in room topics.
 
+## Use the Rust cryptography implementation (`feature_rust_crypto`) [In Development]
+
+Configures Element to use a new cryptography implementation based on the [matrix-rust-sdk](https://github.com/matrix-org/matrix-rust-sdk).
+
+This setting is (currently) _sticky_ to a user's session: it only takes effect when the user logs in to a new session. Likewise, even after disabling the setting in `config.json`, the Rust implementation will remain in use until users log out.
+
+This configuration value is now set to `true` by default. This means that without any additional configuration
+every new login will use the new cryptography implementation.
+
+For administrators looking to transition existing users to the new stack, the `RustCrypto.staged_rollout_percent` configuration is available.
+This configuration allows for a phased migration of users, represented as an integer percentage (0 to 100). By default, this value is set to `0`,
+which means no existing users will be migrated to the new stack. If you wish to migrate all users, you can adjust this value to `100`.
+
+This configuration should be placed under the `setting_defaults` section as shown:
+
+```
+    "setting_defaults": {
+        "RustCrypto.staged_rollout_percent": 20
+    },
+```
+
+By adjusting the `RustCrypto.staged_rollout_percent` value, you can control the migration process according to your deployment strategy.
+
 ## New room header & details (`feature_new_room_decoration_ui`) [In Development]
 
 Refactors visually the room header and room sidebar

element.io/app/config.json

@@ -22,7 +22,7 @@
     "uisi_autorageshake_app": "element-auto-uisi",
     "show_labs_settings": false,
     "room_directory": {
-        "servers": ["matrix.org", "gitter.im"]
+        "servers": ["matrix.org", "gitter.im", "libera.chat"]
     },
     "enable_presence_by_hs_url": {
         "https://matrix.org": false,
@@ -45,6 +45,6 @@
     "privacy_policy_url": "https://element.io/cookie-policy",
     "map_style_url": "https://api.maptiler.com/maps/streets/style.json?key=fU3vlMsMn4Jb6dnEIFsx",
     "setting_defaults": {
-        "RustCrypto.staged_rollout_percent": 60
+        "RustCrypto.staged_rollout_percent": 10
     }
 }

element.io/develop/config.json

@@ -22,7 +22,7 @@
     "uisi_autorageshake_app": "element-auto-uisi",
     "show_labs_settings": true,
     "room_directory": {
-        "servers": ["matrix.org", "gitter.im"]
+        "servers": ["matrix.org", "gitter.im", "libera.chat"]
     },
     "enable_presence_by_hs_url": {
         "https://matrix.org": false,
@@ -48,7 +48,6 @@
     },
     "privacy_policy_url": "https://element.io/cookie-policy",
     "features": {
-        "threadsActivityCentre": true,
         "feature_video_rooms": true,
         "feature_new_room_decoration_ui": true,
         "feature_element_call_video_rooms": true

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.11.72",
+    "version": "1.11.63",
     "description": "A feature-rich client for Matrix.org",
     "author": "New Vector Ltd.",
     "repository": {
@@ -67,17 +67,18 @@
         "update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js"
     },
     "resolutions": {
-        "@types/react-dom": "17.0.25",
-        "@types/react": "17.0.80"
+        "@types/react-dom": "17.0.21",
+        "@types/react": "17.0.68"
     },
     "dependencies": {
-        "@formatjs/intl-segmenter": "^11.5.7",
+        "@matrix-org/olm": "3.2.15",
         "@matrix-org/react-sdk-module-api": "^2.3.0",
+        "gfm.css": "^1.1.2",
         "jsrsasign": "^11.0.0",
         "katex": "^0.16.0",
         "lodash": "^4.17.21",
-        "matrix-js-sdk": "34.2.0",
-        "matrix-react-sdk": "3.104.0",
+        "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
+        "matrix-react-sdk": "github:matrix-org/matrix-react-sdk#develop",
         "matrix-widget-api": "^1.3.1",
         "react": "17.0.2",
         "react-dom": "17.0.2",
@@ -89,14 +90,14 @@
         "@babel/core": "^7.12.10",
         "@babel/eslint-parser": "^7.12.10",
         "@babel/eslint-plugin": "^7.12.10",
+        "@babel/plugin-proposal-class-properties": "^7.12.1",
         "@babel/plugin-proposal-export-default-from": "^7.12.1",
+        "@babel/plugin-proposal-logical-assignment-operators": "^7.20.7",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
+        "@babel/plugin-proposal-numeric-separator": "^7.12.7",
+        "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
+        "@babel/plugin-proposal-optional-chaining": "^7.12.7",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@babel/plugin-transform-class-properties": "^7.12.1",
-        "@babel/plugin-transform-logical-assignment-operators": "^7.20.7",
-        "@babel/plugin-transform-nullish-coalescing-operator": "^7.12.1",
-        "@babel/plugin-transform-numeric-separator": "^7.12.7",
-        "@babel/plugin-transform-object-rest-spread": "^7.12.1",
-        "@babel/plugin-transform-optional-chaining": "^7.12.7",
         "@babel/plugin-transform-runtime": "^7.12.10",
         "@babel/preset-env": "^7.12.11",
         "@babel/preset-react": "^7.12.10",
@@ -126,16 +127,15 @@
         "@types/node-fetch": "^2.6.4",
         "@types/pako": "^2.0.3",
         "@types/qrcode": "^1.5.5",
-        "@types/react": "17.0.80",
+        "@types/react": "17.0.68",
         "@types/react-beautiful-dnd": "^13.1.7",
-        "@types/react-dom": "17.0.25",
+        "@types/react-dom": "17.0.21",
         "@types/react-transition-group": "^4.4.9",
         "@types/sanitize-html": "^2.9.5",
         "@types/sdp-transform": "^2.4.9",
-        "@types/semver": "^7.5.8",
         "@types/tar-js": "^0.3.5",
         "@types/ua-parser-js": "^0.7.36",
-        "@types/uuid": "^10.0.0",
+        "@types/uuid": "^9.0.7",
         "@typescript-eslint/eslint-plugin": "^7.0.0",
         "@typescript-eslint/parser": "^7.0.0",
         "babel-jest": "^29.0.0",
@@ -146,19 +146,19 @@
         "concurrently": "^8.0.0",
         "copy-webpack-plugin": "^12.0.0",
         "cronstrue": "^2.41.0",
-        "css-loader": "^7.0.0",
-        "css-minimizer-webpack-plugin": "^7.0.0",
+        "css-loader": "^6.0.0",
+        "css-minimizer-webpack-plugin": "^6.0.0",
         "dotenv": "^16.0.2",
         "eslint": "8.57.0",
         "eslint-config-google": "^0.14.0",
         "eslint-config-prettier": "^9.0.0",
-        "eslint-plugin-deprecate": "0.8.5",
+        "eslint-plugin-deprecate": "0.8.4",
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-matrix-org": "^1.0.0",
         "eslint-plugin-react": "^7.28.0",
         "eslint-plugin-react-hooks": "^4.3.0",
-        "eslint-plugin-unicorn": "^54.0.0",
-        "fake-indexeddb": "^6.0.0",
+        "eslint-plugin-unicorn": "^51.0.0",
+        "fake-indexeddb": "^5.0.0",
         "fetch-mock": "9.11.0",
         "fetch-mock-jest": "^1.5.1",
         "file-loader": "^6.0.0",
@@ -182,23 +182,24 @@
         "postcss-loader": "8.1.0",
         "postcss-mixins": "^10.0.0",
         "postcss-nested": "^6.0.0",
-        "postcss-preset-env": "^9.5.14",
+        "postcss-preset-env": "^9.3.0",
         "postcss-scss": "^4.0.4",
         "postcss-simple-vars": "^7.0.1",
-        "prettier": "3.3.2",
+        "prettier": "3.2.5",
         "process": "^0.11.10",
         "raw-loader": "^4.0.2",
-        "rimraf": "^6.0.0",
+        "rimraf": "^5.0.0",
         "semver": "^7.5.2",
+        "setimmediate": "^1.0.5",
         "string-replace-loader": "3",
-        "style-loader": "4",
+        "style-loader": "3",
         "stylelint": "^16.1.0",
         "stylelint-config-standard": "^36.0.0",
         "stylelint-scss": "^6.0.0",
         "terser-webpack-plugin": "^5.3.9",
         "ts-node": "^10.9.1",
         "ts-prune": "^0.10.3",
-        "typescript": "5.5.3",
+        "typescript": "5.4.3",
         "util": "^0.12.5",
         "webpack": "^5.89.0",
         "webpack-bundle-analyzer": "^4.8.0",
@@ -210,8 +211,5 @@
         "outputDirectory": "coverage",
         "outputName": "jest-sonar-report.xml",
         "relativePaths": true
-    },
-    "engines": {
-        "node": ">=20.0.0"
     }
 }

recorder-worklet-loader.js

@@ -38,7 +38,7 @@ module.exports.pitch = function pitch(request) {
             return cb(err);
         }
         if (entries[0]) {
-            return cb(null, `module.exports = __webpack_public_path__ + ${JSON.stringify([...entries[0].files][0])};`);
+            return cb(null, `module.exports = __webpack_public_path__ + ${JSON.stringify(entries[0].files[0])};`);
         }
         return cb(null, null);
     });

res/.well-known/assetlinks.json

@@ -1,62 +0,0 @@
-[
-    {
-        "relation": ["delegate_permission/common.handle_all_urls"],
-        "target": {
-            "namespace": "android_app",
-            "package_name": "im.vector.app.debug",
-            "sha256_cert_fingerprints": [
-                "B0:B0:51:DC:56:5C:81:2F:E1:7F:6F:3E:94:5B:4D:79:04:71:23:AB:0D:A6:12:86:76:9E:B2:94:91:97:13:0E"
-            ]
-        }
-    },
-    {
-        "relation": ["delegate_permission/common.handle_all_urls"],
-        "target": {
-            "namespace": "android_app",
-            "package_name": "im.vector.app.nightly",
-            "sha256_cert_fingerprints": [
-                "CA:D3:85:16:84:3A:05:CC:EB:00:AB:7B:D3:80:0F:01:BA:8F:E0:4B:38:86:F3:97:D8:F7:9A:1B:C4:54:E4:0F"
-            ]
-        }
-    },
-    {
-        "relation": ["delegate_permission/common.handle_all_urls"],
-        "target": {
-            "namespace": "android_app",
-            "package_name": "im.vector.app",
-            "sha256_cert_fingerprints": [
-                "F3:FF:38:D2:E5:A6:38:84:86:4A:4E:0D:45:C5:3B:19:8E:7E:39:C0:50:5B:D9:63:F5:55:D6:53:2D:EA:BF:5F"
-            ]
-        }
-    },
-    {
-        "relation": ["delegate_permission/common.handle_all_urls"],
-        "target": {
-            "namespace": "android_app",
-            "package_name": "io.element.android.x.debug",
-            "sha256_cert_fingerprints": [
-                "B0:B0:51:DC:56:5C:81:2F:E1:7F:6F:3E:94:5B:4D:79:04:71:23:AB:0D:A6:12:86:76:9E:B2:94:91:97:13:0E"
-            ]
-        }
-    },
-    {
-        "relation": ["delegate_permission/common.handle_all_urls"],
-        "target": {
-            "namespace": "android_app",
-            "package_name": "io.element.android.x.nightly",
-            "sha256_cert_fingerprints": [
-                "CA:D3:85:16:84:3A:05:CC:EB:00:AB:7B:D3:80:0F:01:BA:8F:E0:4B:38:86:F3:97:D8:F7:9A:1B:C4:54:E4:0F"
-            ]
-        }
-    },
-    {
-        "relation": ["delegate_permission/common.handle_all_urls"],
-        "target": {
-            "namespace": "android_app",
-            "package_name": "io.element.android.x",
-            "sha256_cert_fingerprints": [
-                "C6:DB:9B:9C:8C:BD:D6:5D:16:E8:EC:8C:8B:91:C8:31:B9:EF:C9:5C:BF:98:AE:41:F6:A9:D8:35:15:1A:7E:16"
-            ]
-        }
-    }
-]

res/sw.js

@@ -0,0 +1 @@
+self.addEventListener("fetch", () => {});

sonar-project.properties

@@ -10,5 +10,5 @@ sonar.exclusions=__mocks__,docs,element.io,nginx
 
 sonar.typescript.tsconfigPath=./tsconfig.json
 sonar.javascript.lcov.reportPaths=coverage/lcov.info
-sonar.coverage.exclusions=test/**/*,res/**/*,src/vector/modernizr.js
+sonar.coverage.exclusions=test/**/*,res/**/*
 sonar.testExecutionReportPaths=coverage/jest-sonar-report.xml

src/@types/global.d.ts

@@ -33,9 +33,7 @@ type ElectronChannel =
     | "update-downloaded"
     | "userDownloadCompleted"
     | "userDownloadAction"
-    | "openDesktopCapturerSourcePicker"
-    | "userAccessToken"
-    | "serverSupportedVersions";
+    | "openDesktopCapturerSourcePicker";
 
 declare global {
     interface Window {

src/favicon.ts

@@ -194,9 +194,9 @@ export default class Favicon {
     }
 
     private setIcon(canvas: HTMLCanvasElement): void {
-        setTimeout(() => {
+        setImmediate(() => {
             this.setIconSrc(canvas.toDataURL("image/png"));
-        }, 0);
+        });
     }
 
     private setIconSrc(url: string): void {

src/serviceworker/index.ts

@@ -1,188 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { idbLoad } from "matrix-react-sdk/src/utils/StorageAccess";
-import { ACCESS_TOKEN_IV, tryDecryptToken } from "matrix-react-sdk/src/utils/tokens/tokens";
-import { buildAndEncodePickleKey } from "matrix-react-sdk/src/utils/tokens/pickling";
-
-const serverSupportMap: {
-    [serverUrl: string]: {
-        supportsAuthedMedia: boolean;
-        cacheExpiryTimeMs: number;
-    };
-} = {};
-
-self.addEventListener("install", (event) => {
-    // We skipWaiting() to update the service worker more frequently, particularly in development environments.
-    // @ts-expect-error - service worker types are not available. See 'fetch' event handler.
-    event.waitUntil(skipWaiting());
-});
-
-self.addEventListener("activate", (event) => {
-    // We force all clients to be under our control, immediately. This could be old tabs.
-    // @ts-expect-error - service worker types are not available. See 'fetch' event handler.
-    event.waitUntil(clients.claim());
-});
-
-// @ts-expect-error - the service worker types conflict with the DOM types available through TypeScript. Many hours
-// have been spent trying to convince the type system that there's no actual conflict, but it has yet to work. Instead
-// of trying to make it do the thing, we force-cast to something close enough where we can (and ignore errors otherwise).
-self.addEventListener("fetch", (event: FetchEvent) => {
-    // This is the authenticated media (MSC3916) check, proxying what was unauthenticated to the authenticated variants.
-
-    if (event.request.method !== "GET") {
-        return; // not important to us
-    }
-
-    // Note: ideally we'd keep the request headers etc, but in practice we can't even see those details.
-    // See https://stackoverflow.com/a/59152482
-    let url = event.request.url;
-
-    // We only intercept v3 download and thumbnail requests as presumably everything else is deliberate.
-    // For example, `/_matrix/media/unstable` or `/_matrix/media/v3/preview_url` are something well within
-    // the control of the application, and appear to be choices made at a higher level than us.
-    if (!url.includes("/_matrix/media/v3/download") && !url.includes("/_matrix/media/v3/thumbnail")) {
-        return; // not a URL we care about
-    }
-
-    // We need to call respondWith synchronously, otherwise we may never execute properly. This means
-    // later on we need to proxy the request through if it turns out the server doesn't support authentication.
-    event.respondWith(
-        (async (): Promise<Response> => {
-            let accessToken: string | undefined;
-            try {
-                // Figure out which homeserver we're communicating with
-                const csApi = url.substring(0, url.indexOf("/_matrix/media/v3"));
-
-                // Add jitter to reduce request spam, particularly to `/versions` on initial page load
-                await new Promise<void>((resolve) => setTimeout(() => resolve(), Math.random() * 10));
-
-                // Locate our access token, and populate the fetchConfig with the authentication header.
-                // @ts-expect-error - service worker types are not available. See 'fetch' event handler.
-                const client = await self.clients.get(event.clientId);
-                accessToken = await getAccessToken(client);
-
-                // Update or populate the server support map using a (usually) authenticated `/versions` call.
-                await tryUpdateServerSupportMap(csApi, accessToken);
-
-                // If we have server support (and a means of authentication), rewrite the URL to use MSC3916 endpoints.
-                if (serverSupportMap[csApi].supportsAuthedMedia && accessToken) {
-                    url = url.replace(/\/media\/v3\/(.*)\//, "/client/v1/media/$1/");
-                } // else by default we make no changes
-            } catch (err) {
-                console.error("SW: Error in request rewrite.", err);
-            }
-
-            // Add authentication and send the request. We add authentication even if MSC3916 endpoints aren't
-            // being used to ensure patches like this work:
-            // https://github.com/matrix-org/synapse/commit/2390b66bf0ec3ff5ffb0c7333f3c9b239eeb92bb
-            return fetch(url, fetchConfigForToken(accessToken));
-        })(),
-    );
-});
-
-async function tryUpdateServerSupportMap(clientApiUrl: string, accessToken?: string): Promise<void> {
-    // only update if we don't know about it, or if the data is stale
-    if (serverSupportMap[clientApiUrl]?.cacheExpiryTimeMs > new Date().getTime()) {
-        return; // up to date
-    }
-
-    const config = fetchConfigForToken(accessToken);
-    const versions = await (await fetch(`${clientApiUrl}/_matrix/client/versions`, config)).json();
-    console.log(`[ServiceWorker] /versions response for '${clientApiUrl}': ${JSON.stringify(versions)}`);
-
-    serverSupportMap[clientApiUrl] = {
-        supportsAuthedMedia: Boolean(versions?.versions?.includes("v1.11")),
-        cacheExpiryTimeMs: new Date().getTime() + 2 * 60 * 60 * 1000, // 2 hours from now
-    };
-    console.log(
-        `[ServiceWorker] serverSupportMap update for '${clientApiUrl}': ${JSON.stringify(serverSupportMap[clientApiUrl])}`,
-    );
-}
-
-// Ideally we'd use the `Client` interface for `client`, but since it's not available (see 'fetch' listener), we use
-// unknown for now and force-cast it to something close enough later.
-async function getAccessToken(client: unknown): Promise<string | undefined> {
-    // Access tokens are encrypted at rest, so while we can grab the "access token", we'll need to do work to get the
-    // real thing.
-    const encryptedAccessToken = await idbLoad("account", "mx_access_token");
-
-    // We need to extract a user ID and device ID from localstorage, which means calling WebPlatform for the
-    // read operation. Service workers can't access localstorage.
-    const { userId, deviceId } = await askClientForUserIdParams(client);
-
-    // ... and this is why we need the user ID and device ID: they're index keys for the pickle key table.
-    const pickleKeyData = await idbLoad("pickleKey", [userId, deviceId]);
-    if (pickleKeyData && (!pickleKeyData.encrypted || !pickleKeyData.iv || !pickleKeyData.cryptoKey)) {
-        console.error("SW: Invalid pickle key loaded - ignoring");
-        return undefined;
-    }
-
-    // Finally, try decrypting the thing and return that. This may fail, but that's okay.
-    try {
-        const pickleKey = await buildAndEncodePickleKey(pickleKeyData, userId, deviceId);
-        return tryDecryptToken(pickleKey, encryptedAccessToken, ACCESS_TOKEN_IV);
-    } catch (e) {
-        console.error("SW: Error decrypting access token.", e);
-        return undefined;
-    }
-}
-
-// Ideally we'd use the `Client` interface for `client`, but since it's not available (see 'fetch' listener), we use
-// unknown for now and force-cast it to something close enough inside the function.
-async function askClientForUserIdParams(client: unknown): Promise<{ userId: string; deviceId: string }> {
-    return new Promise((resolve, reject) => {
-        // Dev note: this uses postMessage, which is a highly insecure channel. postMessage is typically visible to other
-        // tabs, windows, browser extensions, etc, making it far from ideal for sharing sensitive information. This is
-        // why our service worker calculates/decrypts the access token manually: we don't want the user's access token
-        // to be available to (potentially) malicious listeners. We do require some information for that decryption to
-        // work though, and request that in the least sensitive way possible.
-        //
-        // We could also potentially use some version of TLS to encrypt postMessage, though that feels way more involved
-        // than just reading IndexedDB ourselves.
-
-        // Avoid stalling the tab in case something goes wrong.
-        const timeoutId = setTimeout(() => reject(new Error("timeout in postMessage")), 1000);
-
-        // We don't need particularly good randomness here - we just use this to generate a request ID, so we know
-        // which postMessage reply is for our active request.
-        const responseKey = Math.random().toString(36);
-
-        // Add the listener first, just in case the tab is *really* fast.
-        const listener = (event: MessageEvent): void => {
-            if (event.data?.responseKey !== responseKey) return; // not for us
-            clearTimeout(timeoutId); // do this as soon as possible, avoiding a race between resolve and reject.
-            resolve(event.data); // "unblock" the remainder of the thread, if that were such a thing in JavaScript.
-            self.removeEventListener("message", listener); // cleanup, since we're not going to do anything else.
-        };
-        self.addEventListener("message", listener);
-
-        // Ask the tab for the information we need. This is handled by WebPlatform.
-        (client as Window).postMessage({ responseKey, type: "userinfo" });
-    });
-}
-
-function fetchConfigForToken(accessToken?: string): RequestInit | undefined {
-    if (!accessToken) {
-        return undefined; // no headers/config to specify
-    }
-
-    return {
-        headers: {
-            Authorization: `Bearer ${accessToken}`,
-        },
-    };
-}

src/vector/app.tsx

@@ -89,14 +89,9 @@ export async function loadApp(fragParams: {}, matrixChatRef: React.Ref<MatrixCha
     // XXX: This path matching is a bit brittle, but better to do it early instead of in the app code.
     const isWelcomeOrLanding =
         window.location.hash === "#/welcome" || window.location.hash === "#" || window.location.hash === "";
-    const isLoginPage = window.location.hash === "#/login";
-
     if (!autoRedirect && ssoRedirects.on_welcome_page && isWelcomeOrLanding) {
         autoRedirect = true;
     }
-    if (!autoRedirect && ssoRedirects.on_login_page && isLoginPage) {
-        autoRedirect = true;
-    }
     if (!hasPossibleToken && !isReturningFromSso && autoRedirect) {
         logger.log("Bypassing app load to redirect to SSO");
         const tempCli = createClient({

src/vector/index.html

@@ -81,6 +81,31 @@
     <img src="<%= require('matrix-react-sdk/res/img/format/quote.svg').default %>" aria-hidden alt="" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
     <img src="<%= require('matrix-react-sdk/res/img/format/strikethrough.svg').default %>" aria-hidden alt="" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
 
+    <audio id="messageAudio">
+        <source src="media/message.ogg" type="audio/ogg" />
+        <source src="media/message.mp3" type="audio/mpeg" />
+    </audio>
+    <audio id="ringAudio" loop>
+        <source src="media/ring.ogg" type="audio/ogg" />
+        <source src="media/ring.mp3" type="audio/mpeg" />
+    </audio>
+    <audio id="ringbackAudio" loop>
+        <source src="media/ringback.ogg" type="audio/ogg" />
+        <source src="media/ringback.mp3" type="audio/mpeg" />
+    </audio>
+    <audio id="callendAudio">
+        <source src="media/callend.ogg" type="audio/ogg" />
+        <source src="media/callend.mp3" type="audio/mpeg" />
+    </audio>
+    <audio id="busyAudio">
+        <source src="media/busy.ogg" type="audio/ogg" />
+        <source src="media/busy.mp3" type="audio/mpeg" />
+    </audio>
+    <audio id="errorAudio">
+        <source src="media/error.ogg" type="audio/ogg" />
+        <source src="media/error.mp3" type="audio/mpeg" />
+    </audio>
+    <audio id="remoteAudio"></audio>
     <!-- let CSS themes pass constants to the app -->
     <div id="mx_theme_accentColor"></div><div id="mx_theme_secondaryAccentColor"></div><div id="mx_theme_tertiaryAccentColor"></div>
 

src/vector/index.ts

@@ -19,15 +19,19 @@ limitations under the License.
 */
 
 import { logger } from "matrix-js-sdk/src/logger";
-import { shouldPolyfill as shouldPolyFillIntlSegmenter } from "@formatjs/intl-segmenter/should-polyfill";
+import { extractErrorMessageFromError } from "matrix-react-sdk/src/components/views/dialogs/ErrorDialog";
 
 // These are things that can run before the skin loads - be careful not to reference the react-sdk though.
 import { parseQsFromFragment } from "./url_utils";
 import "./modernizr";
 
+// Make setImmediate available in bundle
+import "setimmediate";
+
 // Require common CSS here; this will make webpack process it into bundle.css.
 // Our own CSS (which is themed) is imported via separate webpack entry points
 // in webpack.config.js
+require("gfm.css/gfm.css");
 require("katex/dist/katex.css");
 
 /**
@@ -56,8 +60,8 @@ function checkBrowserFeatures(): boolean {
         return false;
     }
 
-    // Custom checks atop Modernizr because it doesn't have checks in it for
-    // some features we depend on.
+    // Custom checks atop Modernizr because it doesn't have ES2018/ES2019 checks
+    // in it for some features we depend on.
     // Modernizr requires rules to be lowercase with no punctuation.
     // ES2018: http://262.ecma-international.org/9.0/#sec-promise.prototype.finally
     window.Modernizr.addTest("promiseprototypefinally", () => typeof window.Promise?.prototype?.finally === "function");
@@ -70,21 +74,6 @@ function checkBrowserFeatures(): boolean {
     );
     // ES2019: http://262.ecma-international.org/10.0/#sec-object.fromentries
     window.Modernizr.addTest("objectfromentries", () => typeof window.Object?.fromEntries === "function");
-    // ES2024: https://tc39.es/ecma262/2024/#sec-get-regexp.prototype.unicodesets
-    window.Modernizr.addTest(
-        "regexpunicodesets",
-        () => window.RegExp?.prototype && "unicodeSets" in window.RegExp.prototype,
-    );
-    // ES2024: https://402.ecma-international.org/9.0/#sec-intl.segmenter
-    // The built-in modernizer 'intl' check only checks for the presence of the Intl object, not the Segmenter,
-    // and older Firefox has the former but not the latter, so we add our own.
-    // This is polyfilled now, but we still want to show the warning because we want to remove the polyfill
-    // at some point.
-    window.Modernizr.addTest("intlsegmenter", () => typeof window.Intl?.Segmenter === "function");
-
-    // Basic test for WebAssembly support. We could also try instantiating a simple module,
-    // although this would start to make (more) assumptions about how rust-crypto loads its wasm.
-    window.Modernizr.addTest("wasm", () => typeof WebAssembly === "object" && typeof WebAssembly.Module === "function");
 
     const featureList = Object.keys(window.Modernizr) as Array<keyof ModernizrStatic>;
 
@@ -115,15 +104,12 @@ const supportedBrowser = checkBrowserFeatures();
 // the browser to use as much parallelism as it can.
 // Load parallelism is based on research in https://github.com/element-hq/element-web/issues/12253
 async function start(): Promise<void> {
-    if (shouldPolyFillIntlSegmenter()) {
-        await import(/* webpackChunkName: "intl-segmenter-polyfill" */ "@formatjs/intl-segmenter/polyfill-force");
-    }
-
     // load init.ts async so that its code is not executed immediately and we can catch any exceptions
     const {
         rageshakePromise,
         setupLogStorage,
         preparePlatform,
+        loadOlm,
         loadConfig,
         loadLanguage,
         loadTheme,
@@ -132,15 +118,12 @@ async function start(): Promise<void> {
         showError,
         showIncompatibleBrowser,
         _t,
-        extractErrorMessageFromError,
     } = await import(
         /* webpackChunkName: "init" */
         /* webpackPreload: true */
         "./init"
     );
 
-    // Now perform the next stage of initialisation. This has its own try/catch in which we render
-    // a react error page on failure.
     try {
         // give rageshake a chance to load/fail, we don't actually assert rageshake loads, we allow it to fail if no IDB
         await settled(rageshakePromise);
@@ -164,6 +147,7 @@ async function start(): Promise<void> {
             }
         }
 
+        const loadOlmPromise = loadOlm();
         // set the platform for react sdk
         preparePlatform();
         // load config requires the platform to be ready
@@ -196,7 +180,7 @@ async function start(): Promise<void> {
         // error handling begins here
         // ##########################
         if (!acceptBrowser) {
-            await new Promise<void>((resolve, reject) => {
+            await new Promise<void>((resolve) => {
                 logger.error("Browser is missing required features.");
                 // take to a different landing page to AWOOOOOGA at the user
                 showIncompatibleBrowser(() => {
@@ -205,7 +189,7 @@ async function start(): Promise<void> {
                     }
                     logger.log("User accepts the compatibility risks.");
                     resolve();
-                }).catch(reject);
+                });
             });
         }
 
@@ -230,6 +214,7 @@ async function start(): Promise<void> {
         // app load critical path starts here
         // assert things started successfully
         // ##################################
+        await loadOlmPromise;
         await loadModulesPromise;
         await loadThemePromise;
         await loadLanguagePromise;
@@ -253,10 +238,6 @@ async function start(): Promise<void> {
 }
 
 start().catch((err) => {
-    // If we get here, things have gone terribly wrong and we cannot load the app javascript at all.
-    // Show a different, very simple iframed-static error page. Or actually, one of two different ones
-    // depending on whether the browser is supported (ie. we think we should be able to load but
-    // failed) or unsupported (where we tried anyway and, lo and behold, we failed).
     logger.error(err);
     // show the static error in an iframe to not lose any context / console data
     // with some basic styling to make the iframe full page

src/vector/init.tsx

@@ -17,6 +17,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import olmWasmPath from "@matrix-org/olm/olm.wasm";
+import Olm from "@matrix-org/olm";
 import * as ReactDOM from "react-dom";
 import * as React from "react";
 import * as languageHandler from "matrix-react-sdk/src/languageHandler";
@@ -72,6 +76,48 @@ export async function loadConfig(): Promise<void> {
     }
 }
 
+export function loadOlm(): Promise<void> {
+    /* Load Olm. We try the WebAssembly version first, and then the legacy,
+     * asm.js version if that fails. For this reason we need to wait for this
+     * to finish before continuing to load the rest of the app. In future
+     * we could somehow pass a promise down to react-sdk and have it wait on
+     * that so olm can be loading in parallel with the rest of the app.
+     *
+     * We also need to tell the Olm js to look for its wasm file at the same
+     * level as index.html. It really should be in the same place as the js,
+     * ie. in the bundle directory, but as far as I can tell this is
+     * completely impossible with webpack. We do, however, use a hashed
+     * filename to avoid caching issues.
+     */
+    return Olm.init({
+        locateFile: () => olmWasmPath,
+    })
+        .then(() => {
+            logger.log("Using WebAssembly Olm");
+        })
+        .catch((wasmLoadError) => {
+            logger.log("Failed to load Olm: trying legacy version", wasmLoadError);
+            return new Promise((resolve, reject) => {
+                const s = document.createElement("script");
+                s.src = "olm_legacy.js"; // XXX: This should be cache-busted too
+                s.onload = resolve;
+                s.onerror = reject;
+                document.body.appendChild(s);
+            })
+                .then(() => {
+                    // Init window.Olm, ie. the one just loaded by the script tag,
+                    // not 'Olm' which is still the failed wasm version.
+                    return window.Olm.init();
+                })
+                .then(() => {
+                    logger.log("Using legacy Olm");
+                })
+                .catch((legacyLoadError) => {
+                    logger.log("Both WebAssembly and asm.js Olm failed!", legacyLoadError);
+                });
+        });
+}
+
 export async function loadLanguage(): Promise<void> {
     const prefLang = SettingsStore.getValue("language", null, /*excludeDefault=*/ true);
     let langs: string[] = [];
@@ -92,7 +138,7 @@ export async function loadLanguage(): Promise<void> {
 }
 
 export async function loadTheme(): Promise<void> {
-    return setTheme();
+    setTheme();
 }
 
 export async function loadApp(fragParams: {}): Promise<void> {
@@ -143,5 +189,3 @@ export async function loadModules(): Promise<void> {
 }
 
 export { _t } from "../languageHandler";
-
-export { extractErrorMessageFromError } from "matrix-react-sdk/src/components/views/dialogs/ErrorDialog";

src/vector/jitsi/index.ts

@@ -177,17 +177,17 @@ const setupCompleted = (async (): Promise<string | void> => {
                         }
                     }
 
-                    widgetApi!.transport.reply(ev.detail, response);
+                    await widgetApi!.transport.reply(ev.detail, response);
                 });
             };
 
             handleAction(ElementWidgetActions.JoinCall, async ({ audioInput, videoInput }) => {
-                void joinConference(audioInput as string | null, videoInput as string | null);
+                joinConference(audioInput as string | null, videoInput as string | null);
             });
             handleAction(ElementWidgetActions.HangupCall, async ({ force }) => {
                 if (force === true) {
                     meetApi?.dispose();
-                    void notifyHangup();
+                    notifyHangup();
                     meetApi = undefined;
                     closeConference();
                 } else {
@@ -297,7 +297,7 @@ function toggleConferenceVisibility(inConference: boolean): void {
 
 function skipToJitsiSplashScreen(): void {
     // really just a function alias for self-documenting code
-    void joinConference();
+    joinConference();
 }
 
 /**
@@ -500,8 +500,8 @@ const onVideoConferenceJoined = (): void => {
     if (widgetApi) {
         // ignored promise because we don't care if it works
         // noinspection JSIgnoredPromiseFromCall
-        void widgetApi.setAlwaysOnScreen(true);
-        void widgetApi.transport.send(ElementWidgetActions.JoinCall, {});
+        widgetApi.setAlwaysOnScreen(true);
+        widgetApi.transport.send(ElementWidgetActions.JoinCall, {});
     }
 
     // Video rooms should start in tile mode
@@ -509,7 +509,7 @@ const onVideoConferenceJoined = (): void => {
 };
 
 const onVideoConferenceLeft = (): void => {
-    void notifyHangup();
+    notifyHangup();
     meetApi = undefined;
 };
 
@@ -517,7 +517,7 @@ const onErrorOccurred = ({ error }: Parameters<ExternalAPIEventCallbacks["errorO
     if (error.isFatal) {
         // We got disconnected. Since Jitsi Meet might send us back to the
         // prejoin screen, we're forced to act as if we hung up entirely.
-        void notifyHangup(error.message);
+        notifyHangup(error.message);
         meetApi = undefined;
         closeConference();
     }
@@ -525,7 +525,7 @@ const onErrorOccurred = ({ error }: Parameters<ExternalAPIEventCallbacks["errorO
 
 const onAudioMuteStatusChanged = ({ muted }: AudioMuteStatusChangedEvent): void => {
     const action = muted ? ElementWidgetActions.MuteAudio : ElementWidgetActions.UnmuteAudio;
-    void widgetApi?.transport.send(action, {});
+    widgetApi?.transport.send(action, {});
 };
 
 const onVideoMuteStatusChanged = ({ muted }: VideoMuteStatusChangedEvent): void => {
@@ -535,15 +535,15 @@ const onVideoMuteStatusChanged = ({ muted }: VideoMuteStatusChangedEvent): void
         // otherwise the React SDK will mistakenly think the user turned off
         // their video by hand
         setTimeout(() => {
-            if (meetApi) void widgetApi?.transport.send(ElementWidgetActions.MuteVideo, {});
+            if (meetApi) widgetApi?.transport.send(ElementWidgetActions.MuteVideo, {});
         }, 200);
     } else {
-        void widgetApi?.transport.send(ElementWidgetActions.UnmuteVideo, {});
+        widgetApi?.transport.send(ElementWidgetActions.UnmuteVideo, {});
     }
 };
 
 const updateParticipants = (): void => {
-    void widgetApi?.transport.send(ElementWidgetActions.CallParticipants, {
+    widgetApi?.transport.send(ElementWidgetActions.CallParticipants, {
         participants: meetApi?.getParticipantsInfo(),
     });
 };

src/vector/mobile_guide/index.ts

@@ -120,4 +120,4 @@ async function initPage(): Promise<void> {
     }
 }
 
-void initPage();
+initPage();

src/vector/platform/ElectronPlatform.tsx

@@ -44,7 +44,6 @@ import { UPDATE_EVENT } from "matrix-react-sdk/src/stores/AsyncStore";
 import { avatarUrlForRoom, getInitialLetter } from "matrix-react-sdk/src/Avatar";
 import DesktopCapturerSourcePicker from "matrix-react-sdk/src/components/views/elements/DesktopCapturerSourcePicker";
 import { OidcRegistrationClientMetadata } from "matrix-js-sdk/src/matrix";
-import { MatrixClientPeg } from "matrix-react-sdk/src/MatrixClientPeg";
 
 import VectorBasePlatform from "./VectorBasePlatform";
 import { SeshatIndexManager } from "./SeshatIndexManager";
@@ -128,19 +127,6 @@ export default class ElectronPlatform extends VectorBasePlatform {
             });
         });
 
-        // `userAccessToken` (IPC) is requested by the main process when appending authentication
-        // to media downloads. A reply is sent over the same channel.
-        window.electron.on("userAccessToken", () => {
-            window.electron!.send("userAccessToken", MatrixClientPeg.get()?.getAccessToken());
-        });
-
-        // `serverSupportedVersions` is requested by the main process when it needs to know if the
-        // server supports a particular version. This is primarily used to detect authenticated media
-        // support. A reply is sent over the same channel.
-        window.electron.on("serverSupportedVersions", async () => {
-            window.electron!.send("serverSupportedVersions", await MatrixClientPeg.get()?.getVersions());
-        });
-
         // try to flush the rageshake logs to indexeddb before quit.
         window.electron.on("before-quit", function () {
             logger.log("element-desktop closing");
@@ -181,14 +167,15 @@ export default class ElectronPlatform extends VectorBasePlatform {
             });
         });
 
-        window.electron.on("openDesktopCapturerSourcePicker", async () => {
+        window.electron.on("openDesktopCapturerSourcePicker", () => {
             const { finished } = Modal.createDialog(DesktopCapturerSourcePicker);
-            const [source] = await finished;
-            // getDisplayMedia promise does not return if no dummy is passed here as source
-            await this.ipc.call("callDisplayMediaCallback", source ?? { id: "", name: "", thumbnailURL: "" });
+            finished.then(([source]) => {
+                if (!source) return;
+                this.ipc.call("callDisplayMediaCallback", source);
+            });
         });
 
-        void this.ipc.call("startSSOFlow", this.ssoID);
+        this.ipc.call("startSSOFlow", this.ssoID);
 
         BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate);
     }
@@ -208,7 +195,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
             ),
             initial: getInitialLetter(r.name),
         }));
-        void this.ipc.call("breadcrumbs", rooms);
+        this.ipc.call("breadcrumbs", rooms);
     };
 
     private onUpdateDownloaded = async (ev: Event, { releaseNotes, releaseName }: SquirrelUpdate): Promise<void> => {
@@ -274,7 +261,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
         const handler = notification.onclick as Function;
         notification.onclick = (): void => {
             handler?.();
-            void this.ipc.call("focusWindow");
+            this.ipc.call("focusWindow");
         };
 
         return notification;
@@ -412,7 +399,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
     }
 
     public navigateForwardBack(back: boolean): void {
-        void this.ipc.call(back ? "navigateBack" : "navigateForward");
+        this.ipc.call(back ? "navigateBack" : "navigateForward");
     }
 
     public overrideBrowserShortcuts(): boolean {
@@ -457,29 +444,20 @@ export default class ElectronPlatform extends VectorBasePlatform {
         return (SdkConfig.get() as unknown as Record<string, string>)["web_base_url"] ?? "https://app.element.io";
     }
 
-    public get defaultOidcClientUri(): string {
-        // Default to element.io as our scheme `io.element.desktop` is within its scope on default MAS policies
-        return "https://element.io";
-    }
-
     public async getOidcClientMetadata(): Promise<OidcRegistrationClientMetadata> {
         const baseMetadata = await super.getOidcClientMetadata();
+        const redirectUri = this.getSSOCallbackUrl();
+        redirectUri.searchParams.delete(SSO_ID_KEY); // it will be shuttled via the state param instead
         return {
             ...baseMetadata,
             applicationType: "native",
+            redirectUris: [redirectUri.href],
+            // XXX: This should be overridable in config
+            clientUri: "https://element.io",
         };
     }
 
     public getOidcClientState(): string {
         return `:${SSO_ID_KEY}:${this.ssoID}`;
     }
-
-    /**
-     * The URL to return to after a successful OIDC authentication
-     */
-    public getOidcCallbackUrl(): URL {
-        const url = super.getOidcCallbackUrl();
-        url.protocol = "io.element.desktop";
-        return url;
-    }
 }

src/vector/platform/WebPlatform.ts

@@ -1,7 +1,7 @@
 /*
 Copyright 2016 Aviral Dasgupta
 Copyright 2016 OpenMarket Ltd
-Copyright 2017-2020, 2024 New Vector Ltd
+Copyright 2017-2020 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -44,41 +44,9 @@ export default class WebPlatform extends VectorBasePlatform {
 
     public constructor() {
         super();
-
-        // Register the service worker in the background
-        this.tryRegisterServiceWorker().catch((e) => console.error("Error registering/updating service worker:", e));
-    }
-
-    private async tryRegisterServiceWorker(): Promise<void> {
-        if (!("serviceWorker" in navigator)) {
-            return; // not available on this platform - don't try to register the service worker
-        }
-
-        // sw.js is exported by webpack, sourced from `/src/serviceworker/index.ts`
-        const registration = await navigator.serviceWorker.register("sw.js");
-        if (!registration) {
-            // Registration didn't work for some reason - assume failed and ignore.
-            // This typically happens in Jest.
-            return;
-        }
-
-        await registration.update();
-        navigator.serviceWorker.addEventListener("message", this.onServiceWorkerPostMessage.bind(this));
-    }
-
-    private onServiceWorkerPostMessage(event: MessageEvent): void {
-        try {
-            if (event.data?.["type"] === "userinfo" && event.data?.["responseKey"]) {
-                const userId = localStorage.getItem("mx_user_id");
-                const deviceId = localStorage.getItem("mx_device_id");
-                event.source!.postMessage({
-                    responseKey: event.data["responseKey"],
-                    userId,
-                    deviceId,
-                });
-            }
-        } catch (e) {
-            console.error("Error responding to service worker: ", e);
+        // Register service worker if available on this platform
+        if ("serviceWorker" in navigator) {
+            navigator.serviceWorker.register("sw.js");
         }
     }
 
@@ -113,10 +81,10 @@ export default class WebPlatform extends VectorBasePlatform {
         // annoyingly, the latest spec says this returns a
         // promise, but this is only supported in Chrome 46
         // and Firefox 47, so adapt the callback API.
-        return new Promise(function (resolve, reject) {
+        return new Promise(function (resolve) {
             window.Notification.requestPermission((result) => {
                 resolve(result);
-            }).catch(reject);
+            });
         });
     }
 
@@ -148,7 +116,7 @@ export default class WebPlatform extends VectorBasePlatform {
         // Ideally, loading an old copy would be impossible with the
         // cache-control: nocache HTTP header set, but Firefox doesn't always obey it :/
         console.log("startUpdater, current version is " + getNormalizedAppVersion(WebPlatform.VERSION));
-        void this.pollForUpdate((version: string, newVersion: string) => {
+        this.pollForUpdate((version: string, newVersion: string) => {
             const query = parseQs(location);
             if (query.updated) {
                 console.log("Update reloaded but still on an old version, stopping");
@@ -207,7 +175,7 @@ export default class WebPlatform extends VectorBasePlatform {
 
     public startUpdateCheck(): void {
         super.startUpdateCheck();
-        void this.pollForUpdate(showUpdateToast, hideUpdateToast).then((updateState) => {
+        this.pollForUpdate(showUpdateToast, hideUpdateToast).then((updateState) => {
             dis.dispatch<CheckUpdatesPayload>({
                 action: Action.CheckUpdates,
                 ...updateState,

src/vector/rageshakesetup.ts

@@ -35,7 +35,7 @@ export function initRageshake(): Promise<void> {
     // we manually check persistence for rageshakes ourselves
     const prom = rageshake.init(/*setUpPersistence=*/ false);
     prom.then(
-        async () => {
+        () => {
             logger.log("Initialised rageshake.");
             logger.log(
                 "To fix line numbers in Chrome: " +
@@ -48,7 +48,7 @@ export function initRageshake(): Promise<void> {
                 rageshake.flush();
             });
 
-            await rageshake.cleanup();
+            rageshake.cleanup();
         },
         (err) => {
             logger.error("Failed to initialise rageshake: " + err);

test/app-tests/loading-test.tsx

@@ -0,0 +1,692 @@
+/*
+Copyright 2016 OpenMarket Ltd
+Copyright 2020 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/* loading.js: test the myriad paths we have for loading the application */
+
+import "fake-indexeddb/auto";
+import React from "react";
+import { render, screen, fireEvent, waitFor, RenderResult, waitForElementToBeRemoved } from "@testing-library/react";
+import PlatformPeg from "matrix-react-sdk/src/PlatformPeg";
+import { MatrixClientPeg } from "matrix-react-sdk/src/MatrixClientPeg";
+import MatrixChat from "matrix-react-sdk/src/components/structures/MatrixChat";
+import dis from "matrix-react-sdk/src/dispatcher/dispatcher";
+import MockHttpBackend from "matrix-mock-request";
+import { ValidatedServerConfig } from "matrix-react-sdk/src/utils/ValidatedServerConfig";
+import { IndexedDBCryptoStore } from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";
+import { QueryDict, sleep } from "matrix-js-sdk/src/utils";
+import { IConfigOptions } from "matrix-react-sdk/src/IConfigOptions";
+import { ActionPayload } from "matrix-react-sdk/src/dispatcher/payloads";
+
+import "../jest-mocks";
+import WebPlatform from "../../src/vector/platform/WebPlatform";
+import { parseQs, parseQsFromFragment } from "../../src/vector/url_utils";
+import { cleanLocalstorage, deleteIndexedDB, waitForLoadingSpinner, waitForWelcomeComponent } from "../test-utils";
+
+const DEFAULT_HS_URL = "http://my_server";
+const DEFAULT_IS_URL = "http://my_is";
+
+/** The matrix versions our mock server claims to support */
+const SERVER_SUPPORTED_MATRIX_VERSIONS = ["v1.1", "v1.5", "v1.6", "v1.8", "v1.9"];
+
+describe("loading:", function () {
+    let httpBackend: MockHttpBackend;
+
+    // an Object simulating the window.location
+    let windowLocation: Location | undefined;
+
+    // the mounted MatrixChat
+    let matrixChat: RenderResult | undefined;
+
+    // a promise which resolves when the MatrixChat calls onTokenLoginCompleted
+    let tokenLoginCompletePromise: Promise<void> | undefined;
+
+    beforeEach(function () {
+        httpBackend = new MockHttpBackend();
+        // @ts-ignore
+        window.fetch = httpBackend.fetchFn;
+
+        windowLocation = undefined;
+        matrixChat = undefined;
+    });
+
+    afterEach(async function () {
+        console.log(`${Date.now()}: loading: afterEach`);
+        matrixChat?.unmount();
+        // unmounting should have cleared the MatrixClientPeg
+        expect(MatrixClientPeg.get()).toBe(null);
+
+        // clear the indexeddbs so we can start from a clean slate next time.
+        await Promise.all([deleteIndexedDB("matrix-js-sdk:crypto"), deleteIndexedDB("matrix-js-sdk:riot-web-sync")]);
+        cleanLocalstorage();
+        console.log(`${Date.now()}: loading: afterEach complete`);
+    });
+
+    /* simulate the load process done by index.js
+     *
+     * TODO: it would be nice to factor some of this stuff out of index.js so
+     * that we can test it rather than our own implementation of it.
+     */
+    function loadApp(
+        opts: {
+            queryString?: string;
+            uriFragment?: string;
+            config?: IConfigOptions;
+        } = {},
+    ): void {
+        const queryString = opts.queryString || "";
+        const uriFragment = opts.uriFragment || "";
+
+        windowLocation = {
+            search: queryString,
+            hash: uriFragment,
+            toString: function (): string {
+                return this.search + this.hash;
+            },
+        } as Location;
+
+        function onNewScreen(screen: string): void {
+            console.log(Date.now() + " newscreen " + screen);
+            const hash = "#/" + screen;
+            windowLocation!.hash = hash;
+            console.log(Date.now() + " browser URI now " + windowLocation);
+        }
+
+        // Parse the given window.location and return parameters that can be used when calling
+        // MatrixChat.showScreen(screen, params)
+        function getScreenFromLocation(location: Location): { screen: string; params: QueryDict } {
+            const fragparts = parseQsFromFragment(location);
+            return {
+                screen: fragparts.location.substring(1),
+                params: fragparts.params,
+            };
+        }
+
+        const fragParts = parseQsFromFragment(windowLocation);
+
+        const config = {
+            default_hs_url: DEFAULT_HS_URL,
+            default_is_url: DEFAULT_IS_URL,
+            validated_server_config: {
+                hsUrl: DEFAULT_HS_URL,
+                hsName: "TEST_ENVIRONMENT",
+                hsNameIsDifferent: false, // yes, we lie
+                isUrl: DEFAULT_IS_URL,
+            } as ValidatedServerConfig,
+            embedded_pages: {
+                home_url: "data:text/html;charset=utf-8;base64,PGh0bWw+PC9odG1sPg==",
+            },
+            features: {
+                feature_rust_crypto: false,
+            },
+            ...(opts.config ?? {}),
+        } as IConfigOptions;
+
+        PlatformPeg.set(new WebPlatform());
+
+        const params = parseQs(windowLocation);
+
+        tokenLoginCompletePromise = new Promise<void>((resolve) => {
+            matrixChat = render(
+                <MatrixChat
+                    onNewScreen={onNewScreen}
+                    config={config!}
+                    realQueryParams={params}
+                    startingFragmentQueryParams={fragParts.params}
+                    enableGuest={true}
+                    onTokenLoginCompleted={resolve}
+                    initialScreenAfterLogin={getScreenFromLocation(windowLocation!)}
+                />,
+            );
+        });
+    }
+
+    // set an expectation that we will get a call to /sync, then flush
+    // http requests until we do.
+    //
+    // returns a promise resolving to the received request
+    async function expectAndAwaitSync(opts?: { isGuest?: boolean }): Promise<any> {
+        let syncRequest: (typeof MockHttpBackend.prototype.requests)[number] | null = null;
+        httpBackend.when("GET", "/_matrix/client/versions").respond(200, {
+            versions: SERVER_SUPPORTED_MATRIX_VERSIONS,
+            unstable_features: {},
+        });
+        const isGuest = opts?.isGuest;
+        if (!isGuest) {
+            // the call to create the LL filter
+            httpBackend.when("POST", "/filter").respond(200, { filter_id: "llfid" });
+            httpBackend.when("GET", "/pushrules").respond(200, {});
+        }
+        httpBackend
+            .when("GET", "/sync")
+            .check((r) => {
+                syncRequest = r;
+            })
+            .respond(200, {});
+
+        for (let attempts = 10; attempts > 0; attempts--) {
+            console.log(Date.now() + " waiting for /sync");
+            if (syncRequest) {
+                return syncRequest;
+            }
+            await httpBackend.flush(undefined);
+        }
+        throw new Error("Gave up waiting for /sync");
+    }
+
+    describe("Clean load with no stored credentials:", function () {
+        it("gives a welcome page by default", function () {
+            loadApp();
+
+            return sleep(1)
+                .then(async () => {
+                    // at this point, we're trying to do a guest registration;
+                    // we expect a spinner
+                    await waitForLoadingSpinner();
+
+                    httpBackend
+                        .when("POST", "/register")
+                        .check(function (req) {
+                            expect(req.queryParams?.kind).toEqual("guest");
+                        })
+                        .respond(403, "Guest access is disabled");
+
+                    return httpBackend.flush(undefined);
+                })
+                .then(() => {
+                    // Wait for another trip around the event loop for the UI to update
+                    return waitForWelcomeComponent(matrixChat);
+                })
+                .then(() => {
+                    return waitFor(() => expect(windowLocation?.hash).toEqual("#/welcome"));
+                });
+        });
+
+        it("should follow the original link after successful login", function () {
+            loadApp({
+                uriFragment: "#/room/!room:id",
+            });
+
+            // Pass the liveliness checks
+            httpBackend.when("GET", "/versions").respond(200, { versions: SERVER_SUPPORTED_MATRIX_VERSIONS });
+            httpBackend.when("GET", "/_matrix/identity/v2").respond(200, {});
+            httpBackend
+                .when("GET", "/_matrix/client/unstable/org.matrix.msc2965/auth_issuer")
+                .respond(404, { errcode: "M_UNRECOGNIZED", error: "Unrecognized request" });
+
+            return sleep(1)
+                .then(async () => {
+                    // at this point, we're trying to do a guest registration;
+                    // we expect a spinner
+                    await waitForLoadingSpinner();
+
+                    httpBackend
+                        .when("POST", "/register")
+                        .check(function (req) {
+                            expect(req.queryParams?.kind).toEqual("guest");
+                        })
+                        .respond(403, "Guest access is disabled");
+
+                    return httpBackend.flush(undefined);
+                })
+                .then(() => {
+                    // Wait for another trip around the event loop for the UI to update
+                    return sleep(10);
+                })
+                .then(() => {
+                    return moveFromWelcomeToLogin(matrixChat);
+                })
+                .then(() => {
+                    return completeLogin(matrixChat!);
+                })
+                .then(() => {
+                    // once the sync completes, we should have a room view
+                    return awaitRoomView(matrixChat);
+                })
+                .then(() => {
+                    httpBackend.verifyNoOutstandingExpectation();
+                    expect(windowLocation?.hash).toEqual("#/room/!room:id");
+
+                    // and the localstorage should have been updated
+                    expect(localStorage.getItem("mx_user_id")).toEqual("@user:id");
+                    expect(localStorage.getItem("mx_access_token")).toEqual("access_token");
+                    expect(localStorage.getItem("mx_hs_url")).toEqual(DEFAULT_HS_URL);
+                    expect(localStorage.getItem("mx_is_url")).toEqual(DEFAULT_IS_URL);
+                });
+        });
+
+        it.skip("should not register as a guest when using a #/login link", function () {
+            loadApp({
+                uriFragment: "#/login",
+            });
+
+            // Pass the liveliness checks
+            httpBackend.when("GET", "/versions").respond(200, { versions: SERVER_SUPPORTED_MATRIX_VERSIONS });
+            httpBackend.when("GET", "/_matrix/identity/v2").respond(200, {});
+
+            return awaitLoginComponent(matrixChat)
+                .then(async () => {
+                    await waitForElementToBeRemoved(() => screen.queryAllByLabelText("Loading..."));
+                    // we expect a single <Login> component
+                    await screen.findByRole("main");
+                    screen.getAllByText("Sign in");
+
+                    // the only outstanding request should be a GET /login
+                    // (in particular there should be no /register request for
+                    // guest registration).
+                    const allowedRequests = ["/_matrix/client/v3/login", "/versions", "/_matrix/identity/v2"];
+                    for (const req of httpBackend.requests) {
+                        if (req.method === "GET" && allowedRequests.find((p) => req.path.endsWith(p))) {
+                            continue;
+                        }
+
+                        throw new Error(`Unexpected HTTP request to ${req}`);
+                    }
+                    return completeLogin(matrixChat!);
+                })
+                .then(() => {
+                    expect(matrixChat?.container.querySelector(".mx_HomePage")).toBeTruthy();
+                    expect(windowLocation?.hash).toEqual("#/home");
+                });
+        });
+    });
+
+    describe("MatrixClient rehydrated from stored credentials:", function () {
+        beforeEach(async function () {
+            localStorage.setItem("mx_hs_url", "http://localhost");
+            localStorage.setItem("mx_is_url", "http://localhost");
+            localStorage.setItem("mx_access_token", "access_token");
+            localStorage.setItem("mx_user_id", "@me:localhost");
+            localStorage.setItem("mx_device_id", "QWERTYUIOP");
+            localStorage.setItem("mx_last_room_id", "!last_room:id");
+
+            // Create a crypto store as well to satisfy storage consistency checks
+            const cryptoStore = new IndexedDBCryptoStore(indexedDB, "matrix-js-sdk:crypto");
+            await cryptoStore.startup();
+        });
+
+        it("shows the last known room by default", function () {
+            loadApp();
+
+            return awaitLoggedIn(matrixChat!)
+                .then(() => {
+                    // we are logged in - let the sync complete
+                    return expectAndAwaitSync();
+                })
+                .then(() => {
+                    // once the sync completes, we should have a room view
+                    return awaitRoomView(matrixChat);
+                })
+                .then(() => {
+                    httpBackend.verifyNoOutstandingExpectation();
+                    expect(windowLocation?.hash).toEqual("#/room/!last_room:id");
+                });
+        });
+
+        it("shows a home page by default if we have no joined rooms", function () {
+            localStorage.removeItem("mx_last_room_id");
+
+            loadApp();
+
+            return awaitLoggedIn(matrixChat!)
+                .then(() => {
+                    // we are logged in - let the sync complete
+                    return expectAndAwaitSync();
+                })
+                .then(() => {
+                    // once the sync completes, we should have a home page
+                    httpBackend.verifyNoOutstandingExpectation();
+                    expect(matrixChat?.container.querySelector(".mx_HomePage")).toBeTruthy();
+                    expect(windowLocation?.hash).toEqual("#/home");
+                });
+        });
+
+        it("shows a room view if we followed a room link", function () {
+            loadApp({
+                uriFragment: "#/room/!room:id",
+            });
+
+            return awaitLoggedIn(matrixChat!)
+                .then(() => {
+                    // we are logged in - let the sync complete
+                    return expectAndAwaitSync();
+                })
+                .then(() => {
+                    // once the sync completes, we should have a room view
+                    return awaitRoomView(matrixChat);
+                })
+                .then(() => {
+                    httpBackend.verifyNoOutstandingExpectation();
+                    expect(windowLocation?.hash).toEqual("#/room/!room:id");
+                });
+        });
+
+        describe("/#/login link:", function () {
+            beforeEach(function () {
+                loadApp({
+                    uriFragment: "#/login",
+                });
+
+                // give the UI a chance to display
+                return expectAndAwaitSync();
+            });
+
+            it("does not show a login view", async function () {
+                await awaitRoomView(matrixChat);
+
+                await screen.getByRole("tree", { name: "Spaces" });
+                expect(screen.queryAllByText("Sign in")).toHaveLength(0);
+            });
+        });
+    });
+
+    describe("Guest auto-registration:", function () {
+        it("shows a welcome page by default", function () {
+            loadApp();
+
+            return sleep(1)
+                .then(async () => {
+                    // at this point, we're trying to do a guest registration;
+                    // we expect a spinner
+                    await waitForLoadingSpinner();
+
+                    httpBackend
+                        .when("POST", "/register")
+                        .check(function (req) {
+                            expect(req.queryParams?.kind).toEqual("guest");
+                        })
+                        .respond(200, {
+                            user_id: "@guest:localhost",
+                            device_id: "QWERTYUIOP",
+                            access_token: "secret_token",
+                        });
+
+                    return httpBackend.flush(undefined);
+                })
+                .then(() => {
+                    return awaitLoggedIn(matrixChat!);
+                })
+                .then(() => {
+                    // we are logged in - let the sync complete
+                    return expectAndAwaitSync({ isGuest: true });
+                })
+                .then(() => {
+                    // once the sync completes, we should have a welcome page
+                    httpBackend.verifyNoOutstandingExpectation();
+                    expect(matrixChat?.container.querySelector(".mx_Welcome")).toBeTruthy();
+                    expect(windowLocation?.hash).toEqual("#/welcome");
+                });
+        });
+
+        it("uses the default homeserver to register with", function () {
+            loadApp();
+
+            return sleep(1)
+                .then(async () => {
+                    // at this point, we're trying to do a guest registration;
+                    // we expect a spinner
+                    await waitForLoadingSpinner();
+
+                    httpBackend
+                        .when("POST", "/register")
+                        .check(function (req) {
+                            expect(req.path.startsWith(DEFAULT_HS_URL)).toBe(true);
+                            expect(req.queryParams?.kind).toEqual("guest");
+                        })
+                        .respond(200, {
+                            user_id: "@guest:localhost",
+                            access_token: "secret_token",
+                        });
+
+                    return httpBackend.flush(undefined);
+                })
+                .then(() => {
+                    return awaitLoggedIn(matrixChat!);
+                })
+                .then(() => {
+                    return expectAndAwaitSync({ isGuest: true });
+                })
+                .then((req) => {
+                    expect(req.path.startsWith(DEFAULT_HS_URL)).toBe(true);
+
+                    // once the sync completes, we should have a welcome page
+                    httpBackend.verifyNoOutstandingExpectation();
+                    expect(matrixChat?.container.querySelector(".mx_Welcome")).toBeTruthy();
+                    expect(windowLocation?.hash).toEqual("#/welcome");
+                    expect(MatrixClientPeg.safeGet().baseUrl).toEqual(DEFAULT_HS_URL);
+                    expect(MatrixClientPeg.safeGet().idBaseUrl).toEqual(DEFAULT_IS_URL);
+                });
+        });
+
+        it("shows a room view if we followed a room link", function () {
+            loadApp({
+                uriFragment: "#/room/!room:id",
+            });
+            return sleep(1)
+                .then(async () => {
+                    // at this point, we're trying to do a guest registration;
+                    // we expect a spinner
+                    await waitForLoadingSpinner();
+
+                    httpBackend
+                        .when("POST", "/register")
+                        .check(function (req) {
+                            expect(req.queryParams?.kind).toEqual("guest");
+                        })
+                        .respond(200, {
+                            user_id: "@guest:localhost",
+                            access_token: "secret_token",
+                        });
+
+                    return httpBackend.flush(undefined);
+                })
+                .then(() => {
+                    return awaitLoggedIn(matrixChat!);
+                })
+                .then(() => {
+                    return expectAndAwaitSync({ isGuest: true });
+                })
+                .then(() => {
+                    // once the sync completes, we should have a room view
+                    return awaitRoomView(matrixChat);
+                })
+                .then(() => {
+                    httpBackend.verifyNoOutstandingExpectation();
+                    expect(windowLocation?.hash).toEqual("#/room/!room:id");
+                });
+        });
+
+        describe("Login as user", function () {
+            beforeEach(function () {
+                // first we have to load the homepage
+                loadApp();
+
+                httpBackend
+                    .when("POST", "/register")
+                    .check(function (req) {
+                        expect(req.queryParams?.kind).toEqual("guest");
+                    })
+                    .respond(200, {
+                        user_id: "@guest:localhost",
+                        access_token: "secret_token",
+                    });
+
+                return httpBackend
+                    .flush(undefined)
+                    .then(() => {
+                        return awaitLoggedIn(matrixChat!);
+                    })
+                    .then(() => {
+                        // we got a sync spinner - let the sync complete
+                        return expectAndAwaitSync();
+                    })
+                    .then(async () => {
+                        // once the sync completes, we should have a home page
+                        await waitFor(() => matrixChat?.container.querySelector(".mx_HomePage"));
+
+                        // we simulate a click on the 'login' button by firing off
+                        // the relevant dispatch.
+                        //
+                        // XXX: is it an anti-pattern to access the react-sdk's
+                        // dispatcher in this way? Is it better to find the login
+                        // button and simulate a click? (we might have to arrange
+                        // for it to be shown - it's not always, due to the
+                        // collapsing left panel
+
+                        dis.dispatch({ action: "start_login" });
+
+                        return awaitLoginComponent(matrixChat);
+                    });
+            });
+
+            it("should give us a login page", async function () {
+                // we expect a single <Login> component
+                await screen.findByRole("main");
+                screen.getAllByText("Sign in");
+
+                expect(windowLocation?.hash).toEqual("#/login");
+            });
+        });
+    });
+
+    describe("Token login:", function () {
+        it("logs in successfully", function () {
+            localStorage.setItem("mx_sso_hs_url", "https://homeserver");
+            localStorage.setItem("mx_sso_is_url", "https://idserver");
+            loadApp({
+                queryString: "?loginToken=secretToken",
+            });
+
+            return sleep(1)
+                .then(async () => {
+                    // we expect a spinner while we're logging in
+                    await waitForLoadingSpinner();
+
+                    httpBackend
+                        .when("POST", "/login")
+                        .check(function (req) {
+                            expect(req.path).toMatch(new RegExp("^https://homeserver/"));
+                            expect(req.data.type).toEqual("m.login.token");
+                            expect(req.data.token).toEqual("secretToken");
+                        })
+                        .respond(200, {
+                            user_id: "@user:localhost",
+                            device_id: "DEVICE_ID",
+                            access_token: "access_token",
+                        });
+
+                    return httpBackend.flush(undefined);
+                })
+                .then(() => {
+                    // at this point, MatrixChat should fire onTokenLoginCompleted, which
+                    // makes index.js reload the app. We're not going to attempt to
+                    // simulate the reload - just check that things are left in the
+                    // right state for the reloaded app.
+
+                    return tokenLoginCompletePromise;
+                })
+                .then(() => {
+                    return expectAndAwaitSync().catch((e) => {
+                        throw new Error("Never got /sync after login: did the client start?");
+                    });
+                })
+                .then(() => {
+                    // check that the localstorage has been set up in such a way that
+                    // the reloaded app can pick up where we leave off.
+                    expect(localStorage.getItem("mx_user_id")).toEqual("@user:localhost");
+                    expect(localStorage.getItem("mx_access_token")).toEqual("access_token");
+                    expect(localStorage.getItem("mx_hs_url")).toEqual("https://homeserver");
+                    expect(localStorage.getItem("mx_is_url")).toEqual("https://idserver");
+                });
+        });
+    });
+
+    // check that we have a Login component, send a 'user:pass' login,
+    // and await the HTTP requests.
+    async function completeLogin(matrixChat: RenderResult): Promise<void> {
+        // When we switch to the login component, it'll hit the login endpoint
+        // for proof of life and to get flows. We'll only give it one option.
+        httpBackend.when("GET", "/login").respond(200, { flows: [{ type: "m.login.password" }] });
+        httpBackend.flush(undefined); // We already would have tried the GET /login request
+
+        httpBackend
+            .when("POST", "/login")
+            .check(function (req) {
+                expect(req.data.type).toEqual("m.login.password");
+                expect(req.data.identifier.type).toEqual("m.id.user");
+                expect(req.data.identifier.user).toEqual("user");
+                expect(req.data.password).toEqual("pass");
+            })
+            .respond(200, {
+                user_id: "@user:id",
+                device_id: "DEVICE_ID",
+                access_token: "access_token",
+            });
+
+        // Give the component some time to finish processing the login flows before continuing.
+        await waitFor(() => expect(matrixChat?.container.querySelector("#mx_LoginForm_username")).toBeTruthy());
+
+        // Enter login details
+        fireEvent.change(matrixChat.container.querySelector("#mx_LoginForm_username")!, { target: { value: "user" } });
+        fireEvent.change(matrixChat.container.querySelector("#mx_LoginForm_password")!, { target: { value: "pass" } });
+        fireEvent.click(screen.getByText("Sign in", { selector: ".mx_Login_submit" }));
+
+        return httpBackend
+            .flush(undefined)
+            .then(() => {
+                // Wait for another trip around the event loop for the UI to update
+                return sleep(1);
+            })
+            .then(() => {
+                return expectAndAwaitSync().catch((e) => {
+                    throw new Error("Never got /sync after login: did the client start?");
+                });
+            })
+            .then(() => {
+                httpBackend.verifyNoOutstandingExpectation();
+            });
+    }
+});
+
+async function awaitLoggedIn(matrixChat: RenderResult): Promise<void> {
+    if (matrixChat.container.querySelector(".mx_MatrixChat_wrapper")) return; // already logged in
+
+    return new Promise((resolve) => {
+        const onAction = ({ action }: ActionPayload): void => {
+            if (action !== "on_logged_in") {
+                return;
+            }
+            console.log(Date.now() + ": Received on_logged_in action");
+            dis.unregister(dispatcherRef);
+            resolve(sleep(1));
+        };
+        const dispatcherRef = dis.register(onAction);
+        console.log(Date.now() + ": Waiting for on_logged_in action");
+    });
+}
+
+async function awaitRoomView(matrixChat?: RenderResult): Promise<void> {
+    await waitFor(() => matrixChat?.container.querySelector(".mx_RoomView"));
+}
+
+async function awaitLoginComponent(matrixChat?: RenderResult): Promise<void> {
+    await waitFor(() => matrixChat?.container.querySelector(".mx_AuthPage"));
+}
+
+function moveFromWelcomeToLogin(matrixChat?: RenderResult): Promise<void> {
+    dis.dispatch({ action: "start_login" });
+    return awaitLoginComponent(matrixChat);
+}

test/test-utils.ts

@@ -16,6 +16,40 @@ limitations under the License.
 
 import { RenderResult, screen, waitFor } from "@testing-library/react";
 
+export function cleanLocalstorage(): void {
+    window.localStorage.clear();
+}
+
+export function deleteIndexedDB(dbName: string): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+        if (!window.indexedDB) {
+            resolve();
+            return;
+        }
+
+        const startTime = Date.now();
+        console.log(`${startTime}: Removing indexeddb instance: ${dbName}`);
+        const req = window.indexedDB.deleteDatabase(dbName);
+
+        req.onblocked = (): void => {
+            console.log(`${Date.now()}: can't yet delete indexeddb ${dbName} because it is open elsewhere`);
+        };
+
+        req.onerror = (ev): void => {
+            reject(new Error(`${Date.now()}: unable to delete indexeddb ${dbName}: ${req.error?.message}`));
+        };
+
+        req.onsuccess = (): void => {
+            const now = Date.now();
+            console.log(`${now}: Removed indexeddb instance: ${dbName} in ${now - startTime} ms`);
+            resolve();
+        };
+    }).catch((e) => {
+        console.error(`${Date.now()}: Error removing indexeddb instance ${dbName}: ${e}`);
+        throw e;
+    });
+}
+
 // wait for loading page
 export async function waitForLoadingSpinner(): Promise<void> {
     await screen.findByRole("progressbar");

tsconfig.json

@@ -6,13 +6,13 @@
         "esModuleInterop": true,
         "module": "es2022",
         "moduleResolution": "node",
-        "target": "es2018",
+        "target": "es2016",
         "noUnusedLocals": true,
         "sourceMap": false,
         "outDir": "./lib",
         "declaration": true,
         "jsx": "react",
-        "lib": ["es2022", "dom", "dom.iterable"],
+        "lib": ["es2021", "dom", "dom.iterable"],
         "strict": true
     },
     "include": [

webpack.config.js

@@ -153,10 +153,6 @@ module.exports = (env, argv) => {
             mobileguide: "./src/vector/mobile_guide/index.ts",
             jitsi: "./src/vector/jitsi/index.ts",
             usercontent: "./node_modules/matrix-react-sdk/src/usercontent/index.ts",
-            serviceworker: {
-                import: "./src/serviceworker/index.ts",
-                filename: "sw.js", // update WebPlatform if this changes
-            },
             ...(useHMR ? {} : cssThemes),
         },
 
@@ -274,6 +270,10 @@ module.exports = (env, argv) => {
                 // there is no need for webpack to parse them - they can just be
                 // included as-is.
                 /highlight\.js[\\/]lib[\\/]languages/,
+
+                // olm takes ages for webpack to process, and it's already heavily
+                // optimised, so there is little to gain by us uglifying it.
+                /olm[\\/](javascript[\\/])?olm\.js$/,
             ],
             rules: [
                 useHMR && {
@@ -439,6 +439,20 @@ module.exports = (env, argv) => {
                         },
                     ],
                 },
+                {
+                    // the olm library wants to load its own wasm, rather than have webpack do it.
+                    // We therefore use the `file-loader` to tell webpack to dump the contents to
+                    // a separate file and return the name, and override the default `type` for `.wasm` files
+                    // (which is `webassembly/experimental` under webpack 4) to stop webpack trying to interpret
+                    // the filename as webassembly. (see also https://github.com/webpack/webpack/issues/6725)
+                    test: /olm\.wasm$/,
+                    loader: "file-loader",
+                    type: "javascript/auto",
+                    options: {
+                        name: "[name].[hash:7].[ext]",
+                        outputPath: ".",
+                    },
+                },
                 {
                     // Fix up the name of the opus-recorder worker (react-sdk dependency).
                     // We more or less just want it to be clear it's for opus and not something else.
@@ -480,11 +494,8 @@ module.exports = (env, argv) => {
                     },
                 },
                 {
-                    // The decoderWorker wants to load its own wasm, rather than have webpack do it.
-                    // We therefore use the `file-loader` to tell webpack to dump the contents to
-                    // a separate file and return the name, and override the default `type` for `.wasm` files
-                    // (which is `webassembly/experimental` under webpack 4) to stop webpack trying to interpret
-                    // the filename as webassembly. (see also https://github.com/webpack/webpack/issues/6725)
+                    // Same deal as olm.wasm: the decoderWorker wants to load the wasm artifact
+                    // itself.
                     test: /decoderWorker\.min\.wasm$/,
                     loader: "file-loader",
                     type: "javascript/auto",
@@ -642,8 +653,8 @@ module.exports = (env, argv) => {
 
             // This exports our CSS using the splitChunks and loaders above.
             new MiniCssExtractPlugin({
-                filename: useHMR ? "bundles/[name].css" : "bundles/[fullhash]/[name].css",
-                chunkFilename: useHMR ? "bundles/[name].css" : "bundles/[fullhash]/[name].css",
+                filename: useHMR ? "bundles/[name].css" : "bundles/[hash]/[name].css",
+                chunkFilename: useHMR ? "bundles/[name].css" : "bundles/[hash]/[name].css",
                 ignoreOrder: false, // Enable to remove warnings about conflicting order
             }),
 
@@ -655,7 +666,7 @@ module.exports = (env, argv) => {
                 // HtmlWebpackPlugin will screw up our formatting like the names
                 // of the themes and which chunks we actually care about.
                 inject: false,
-                excludeChunks: ["mobileguide", "usercontent", "jitsi", "serviceworker"],
+                excludeChunks: ["mobileguide", "usercontent", "jitsi"],
                 minify: false,
                 templateParameters: {
                     og_image_url: ogImageUrl,
@@ -725,16 +736,17 @@ module.exports = (env, argv) => {
             new CopyWebpackPlugin({
                 patterns: [
                     "res/apple-app-site-association",
-                    { from: ".well-known/**", context: path.resolve(__dirname, "res") },
                     "res/jitsi_external_api.min.js",
                     "res/jitsi_external_api.min.js.LICENSE.txt",
                     "res/manifest.json",
+                    "res/sw.js",
                     "res/welcome.html",
                     { from: "welcome/**", context: path.resolve(__dirname, "res") },
                     { from: "themes/**", context: path.resolve(__dirname, "res") },
                     { from: "vector-icons/**", context: path.resolve(__dirname, "res") },
                     { from: "decoder-ring/**", context: path.resolve(__dirname, "res") },
                     { from: "media/**", context: path.resolve(__dirname, "node_modules/matrix-react-sdk/res/") },
+                    "node_modules/@matrix-org/olm/olm_legacy.js",
                     { from: "config.json", noErrorOnMissing: true },
                     "contribute.json",
                 ],
@@ -758,9 +770,9 @@ module.exports = (env, argv) => {
             // directory and symlink it into place - this allows users who loaded
             // an older version of the application to continue to access webpack
             // chunks even after the app is redeployed.
-            filename: "bundles/[fullhash]/[name].js",
-            chunkFilename: "bundles/[fullhash]/[name].js",
-            webassemblyModuleFilename: "bundles/[fullhash]/[modulehash].wasm",
+            filename: "bundles/[hash]/[name].js",
+            chunkFilename: "bundles/[hash]/[name].js",
+            webassemblyModuleFilename: "bundles/[hash]/[modulehash].wasm",
         },
 
         // configuration for the webpack-dev-server