Merge pull request #27474 from element-hq/renovate/stylelint

Update stylelint

.github/cfp_headers

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

.github/workflows/build_develop.yml

@@ -92,7 +92,7 @@ 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@05861d3a448898eb33dfce34153bd1ecb9422fb9 # fork
+              uses: t3chguy/wait-on-check-action@18541021811b56544d90e0f073401c2b99e249d6 # fork
               with:
                   ref: ${{ github.sha }}
                   running-workflow-name: "Build & Deploy develop.element.io"

.github/workflows/dockerhub.yaml

@@ -7,6 +7,9 @@ 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
@@ -26,6 +29,9 @@ 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 }}
@@ -34,12 +40,12 @@ jobs:
               uses: docker/setup-qemu-action@68827325e0b33c7199eb31dd4e31fbe9023e06e3 # v3
 
             - name: Set up Docker Buildx
-              uses: docker/setup-buildx-action@0d103c3126aa41d772a8362f6aa67afac040f80c # v3
+              uses: docker/setup-buildx-action@d70bba72b1f3fd22344832f00baa16ece964efeb # v3
               with:
                   install: true
 
             - name: Login to Docker Hub
-              uses: docker/login-action@343f7c4344506bcbf9b4de18042ae17996df046d # v3
+              uses: docker/login-action@e92390c5fb421da1463c202d546fed0ec5c39f20 # v3
               with:
                   username: ${{ secrets.DOCKERHUB_USERNAME }}
                   password: ${{ secrets.DOCKERHUB_TOKEN }}
@@ -58,7 +64,8 @@ jobs:
                       ${{ matrix.flavor }}
 
             - name: Build and push
-              uses: docker/build-push-action@4a13e500e55cf31b7a5d59a38ab2040ab0f42f56 # v5
+              id: build-and-push
+              uses: docker/build-push-action@2cdde995de11925a030ce8070c3d77a52ffcf1c0 # v5
               with:
                   context: .
                   push: true
@@ -66,6 +73,17 @@ 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

@@ -55,7 +55,7 @@ jobs:
                   echo "-   [Automations](automations.md)" >> docs/SUMMARY.md
 
             - name: Setup mdBook
-              uses: peaceiris/actions-mdbook@v1
+              uses: peaceiris/actions-mdbook@v2
               with:
                   mdbook-version: "0.4.10"
 

.github/workflows/downstream-artifacts.yml

@@ -1,17 +0,0 @@
-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,10 +3,11 @@
 
 name: matrix-react-sdk End to End Tests
 on:
-    workflow_run:
-        workflows: ["Build downstream artifacts"]
-        types:
-            - completed
+    merge_group:
+        types: [checks_requested]
+    pull_request: {}
+    push:
+        branches: [develop, master]
 
 concurrency:
     group: ${{ github.workflow }}-${{ github.event.workflow_run.head_branch || github.run_id }}
@@ -15,44 +16,14 @@ 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
-        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@071b5370da85afbb16637d6eed8524a06bc2053e # 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 }}"
+            # 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' }}

.github/workflows/tests.yaml

@@ -49,7 +49,7 @@ jobs:
         needs: jest
         steps:
             - name: Skip SonarCloud
-              uses: Sibz/github-status-action@071b5370da85afbb16637d6eed8524a06bc2053e # v1
+              uses: Sibz/github-status-action@faaa4d96fecf273bd762985e0e7f9f933c774918 # v1
               with:
                   authToken: ${{ secrets.GITHUB_TOKEN }}
                   state: success

.github/workflows/triage-labelled.yml

@@ -60,8 +60,8 @@ jobs:
             - uses: konradpabjan/move-labeled-or-milestoned-issue@190352295fe309fcb113b49193bc81d9aaa9cb01
               with:
                   action-token: "${{ secrets.ELEMENT_BOT_TOKEN }}"
-                  project-url: "https://github.com/element-hq/element-web/projects/27"
-                  column-name: "Need info"
+                  project-url: "https://github.com/orgs/element-hq/projects/120"
+                  column-name: "Needs info"
                   label-name: "X-Needs-Info"
 
     add_priority_design_issues_to_project:
@@ -148,7 +148,7 @@ jobs:
             contains(github.event.issue.labels.*.name, 'A-Element-R')
         steps:
             - id: add_to_project
-              uses: actions/add-to-project@v0.6.0
+              uses: actions/add-to-project@v1.0.1
               with:
                   project-url: ${{ env.PROJECT_URL }}
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}

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

@@ -0,0 +1,17 @@
+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

@@ -21,7 +21,7 @@ jobs:
               run: "yarn update:jitsi"
 
             - name: Create Pull Request
-              uses: peter-evans/create-pull-request@a4f52f8033a6168103c2538976c07b467e8163bc # v6
+              uses: peter-evans/create-pull-request@6d6857d36972b65feb161a90e484f2984215f83e # v6
               with:
                   token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   branch: actions/jitsi-update

CHANGELOG.md

@@ -1,3 +1,78 @@
+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.

code_style.md

@@ -225,6 +225,12 @@ 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

@@ -261,6 +261,47 @@ When Element is deployed alongside a homeserver with SSO-only login, some option
     ```
     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.

docs/translating.md

@@ -14,10 +14,9 @@
 
 ## How to check if your language already is being translated
 
-Go to https://localazy.com/p/element-web
-If your language is listed then you can get started, have a read of https://localazy.com/docs/general/translating-strings
-if you need help getting started. If your language is not yet listed please express your wishes to start translating it in
-the general discussion room linked above.
+Go to https://localazy.com/p/element-web. If your language is listed then you can get started. Have a read
+of https://localazy.com/docs/general/translating-strings if you need help getting started. If your language is not yet
+listed please express your wishes to start translating it in the general discussion room linked above.
 
 ### What are `%(something)s`?
 

element.io/app/config.json

@@ -43,5 +43,8 @@
         "api_host": "https://posthog.element.io"
     },
     "privacy_policy_url": "https://element.io/cookie-policy",
-    "map_style_url": "https://api.maptiler.com/maps/streets/style.json?key=fU3vlMsMn4Jb6dnEIFsx"
+    "map_style_url": "https://api.maptiler.com/maps/streets/style.json?key=fU3vlMsMn4Jb6dnEIFsx",
+    "setting_defaults": {
+        "RustCrypto.staged_rollout_percent": 30
+    }
 }

element.io/develop/config.json

@@ -48,6 +48,7 @@
     },
     "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.63",
+    "version": "1.11.66",
     "description": "A feature-rich client for Matrix.org",
     "author": "New Vector Ltd.",
     "repository": {
@@ -67,8 +67,8 @@
         "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.21",
-        "@types/react": "17.0.68"
+        "@types/react-dom": "17.0.25",
+        "@types/react": "17.0.80"
     },
     "dependencies": {
         "@matrix-org/olm": "3.2.15",
@@ -77,8 +77,8 @@
         "jsrsasign": "^11.0.0",
         "katex": "^0.16.0",
         "lodash": "^4.17.21",
-        "matrix-js-sdk": "31.6.1",
-        "matrix-react-sdk": "3.96.1",
+        "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",
@@ -127,12 +127,13 @@
         "@types/node-fetch": "^2.6.4",
         "@types/pako": "^2.0.3",
         "@types/qrcode": "^1.5.5",
-        "@types/react": "17.0.68",
+        "@types/react": "17.0.80",
         "@types/react-beautiful-dnd": "^13.1.7",
-        "@types/react-dom": "17.0.21",
+        "@types/react-dom": "17.0.25",
         "@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": "^9.0.7",
@@ -146,8 +147,8 @@
         "concurrently": "^8.0.0",
         "copy-webpack-plugin": "^12.0.0",
         "cronstrue": "^2.41.0",
-        "css-loader": "^6.0.0",
-        "css-minimizer-webpack-plugin": "^6.0.0",
+        "css-loader": "^7.0.0",
+        "css-minimizer-webpack-plugin": "^7.0.0",
         "dotenv": "^16.0.2",
         "eslint": "8.57.0",
         "eslint-config-google": "^0.14.0",
@@ -157,7 +158,7 @@
         "eslint-plugin-matrix-org": "^1.0.0",
         "eslint-plugin-react": "^7.28.0",
         "eslint-plugin-react-hooks": "^4.3.0",
-        "eslint-plugin-unicorn": "^51.0.0",
+        "eslint-plugin-unicorn": "^53.0.0",
         "fake-indexeddb": "^5.0.0",
         "fetch-mock": "9.11.0",
         "fetch-mock-jest": "^1.5.1",
@@ -192,14 +193,14 @@
         "semver": "^7.5.2",
         "setimmediate": "^1.0.5",
         "string-replace-loader": "3",
-        "style-loader": "3",
+        "style-loader": "4",
         "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.3.3",
+        "typescript": "5.4.5",
         "util": "^0.12.5",
         "webpack": "^5.89.0",
         "webpack-bundle-analyzer": "^4.8.0",

res/.well-known/assetlinks.json

@@ -0,0 +1,62 @@
+[
+    {
+        "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

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

src/i18n/strings/he.json

@@ -14,6 +14,7 @@
     "error": {
         "app_launch_unexpected_error": "שגיאה לא צפויה במהלך טעינת האפליקציה. ראו קונסול לפרטים נוספים.",
         "cannot_load_config": "לא ניתן לטעון את קובץ ההגדרות: יש לרענן את הדף כדי לנסות שנית.",
+        "invalid_configuration_mixed_server": "Invalid configuration: a default_hs_url can't be specified along with default_server_name or default_server_config",
         "invalid_configuration_no_server": "תצורה שגויה: לא צוין שרת ברירת מחדל.",
         "invalid_json": "האלמנט מכיל הגדרת JSON שגויה, אנא תקנו את הבעיה ואתחלו את הדף.",
         "invalid_json_detail": "ההודעה מהמנתח היא: %(message)s",

src/i18n/strings/zh_Hant.json

@@ -31,6 +31,7 @@
         "summary": "您的瀏覽器無法執行 %(brand)s",
         "title": "不支援的瀏覽器"
     },
+    "powered_by_matrix": "由Matrix支持",
     "powered_by_matrix_with_logo": "由 $matrixLogo 驅動的去中心化、加密的聊天與協作工具",
     "unknown_device": "未知裝置",
     "use_brand_on_mobile": "在行動裝置上使用 %(brand)s",

src/serviceworker/index.ts

@@ -0,0 +1,186 @@
+/*
+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]: {
+        supportsMSC3916: 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].supportsMSC3916 && accessToken) {
+                    // Currently unstable only.
+                    // TODO: Support stable endpoints when available.
+                    url = url.replace(/\/media\/v3\/(.*)\//, "/client/unstable/org.matrix.msc3916/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();
+
+    serverSupportMap[clientApiUrl] = {
+        supportsMSC3916: Boolean(versions?.unstable_features?.["org.matrix.msc3916"]),
+        cacheExpiryTimeMs: new Date().getTime() + 2 * 60 * 60 * 1000, // 2 hours from now
+    };
+}
+
+// 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/platform/ElectronPlatform.tsx

@@ -170,8 +170,8 @@ export default class ElectronPlatform extends VectorBasePlatform {
         window.electron.on("openDesktopCapturerSourcePicker", () => {
             const { finished } = Modal.createDialog(DesktopCapturerSourcePicker);
             finished.then(([source]) => {
-                if (!source) return;
-                this.ipc.call("callDisplayMediaCallback", source);
+                // getDisplayMedia promise does not return if no dummy is passed here as source
+                this.ipc.call("callDisplayMediaCallback", source ?? { id: "", name: "", thumbnailURL: "" });
             });
         });
 
@@ -444,20 +444,29 @@ 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 New Vector Ltd
+Copyright 2017-2020, 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.
@@ -44,9 +44,41 @@ export default class WebPlatform extends VectorBasePlatform {
 
     public constructor() {
         super();
-        // Register service worker if available on this platform
-        if ("serviceWorker" in navigator) {
-            navigator.serviceWorker.register("sw.js");
+
+        // 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);
         }
     }
 

tsconfig.json

@@ -22,6 +22,7 @@
         "./node_modules/matrix-react-sdk/src/@types/opus-recorder.d.ts",
         "./node_modules/matrix-react-sdk/src/@types/png-chunks-extract.d.ts",
         "./node_modules/matrix-react-sdk/src/@types/sanitize-html.d.ts",
+        "./node_modules/matrix-react-sdk/src/@types/matrix-js-sdk.d.ts",
         "./src/**/*.ts",
         "./src/**/*.tsx",
         "./test/**/*.ts",

webpack.config.js

@@ -153,6 +153,10 @@ 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),
         },
 
@@ -666,7 +670,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"],
+                excludeChunks: ["mobileguide", "usercontent", "jitsi", "serviceworker"],
                 minify: false,
                 templateParameters: {
                     og_image_url: ogImageUrl,
@@ -736,10 +740,10 @@ 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") },