Merge branch 'develop' of https://github.com/vector-im/element-web in…

…to staging

# Conflicts:
#	yarn.lock

.github/workflows/dockerhub.yaml

@@ -37,10 +37,10 @@ jobs:
               run: ${{ matrix.prepare }}
 
             - name: Set up QEMU
-              uses: docker/setup-qemu-action@68827325e0b33c7199eb31dd4e31fbe9023e06e3 # v3
+              uses: docker/setup-qemu-action@5927c834f5b4fdf503fca6f4c7eccda82949e1ee # v3
 
             - name: Set up Docker Buildx
-              uses: docker/setup-buildx-action@d70bba72b1f3fd22344832f00baa16ece964efeb # v3
+              uses: docker/setup-buildx-action@4fd812986e6c8c2a69e18311145f9371337f27d4 # v3
               with:
                   install: true
 
@@ -65,7 +65,7 @@ jobs:
 
             - name: Build and push
               id: build-and-push
-              uses: docker/build-push-action@31159d49c0d4756269a0940a750801a1ea5d7003 # v6
+              uses: docker/build-push-action@1a162644f9a7e87d8f4b053101d1d9a712edc18c # v6
               with:
                   context: .
                   push: true

.github/workflows/docs.yml

@@ -46,6 +46,7 @@ jobs:
               with:
                   cache: "yarn"
                   cache-dependency-path: element-web/yarn.lock
+                  node-version: "lts/*"
 
             - name: Generate automations docs
               working-directory: element-web

.github/workflows/triage-labelled.yml

@@ -56,13 +56,48 @@ 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:
-            - uses: konradpabjan/move-labeled-or-milestoned-issue@190352295fe309fcb113b49193bc81d9aaa9cb01
+            - 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:
-                  action-token: "${{ secrets.ELEMENT_BOT_TOKEN }}"
-                  project-url: "https://github.com/orgs/element-hq/projects/120"
-                  column-name: "Needs info"
-                  label-name: "X-Needs-Info"
+                  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
 
     add_priority_design_issues_to_project:
         name: P1 X-Needs-Design to Design project board

.modernizr.json

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

docs/config.md

@@ -374,8 +374,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 DMs
-    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
+    2-person rooms, causing Element to fall back to 1:1 VoIP, 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:

package.json

@@ -71,6 +71,7 @@
         "@types/react": "17.0.80"
     },
     "dependencies": {
+        "@formatjs/intl-segmenter": "^11.5.7",
         "@matrix-org/react-sdk-module-api": "^2.3.0",
         "jsrsasign": "^11.0.0",
         "katex": "^0.16.0",
@@ -187,7 +188,7 @@
         "prettier": "3.3.2",
         "process": "^0.11.10",
         "raw-loader": "^4.0.2",
-        "rimraf": "^5.0.0",
+        "rimraf": "^6.0.0",
         "semver": "^7.5.2",
         "string-replace-loader": "3",
         "style-loader": "4",
@@ -197,7 +198,7 @@
         "terser-webpack-plugin": "^5.3.9",
         "ts-node": "^10.9.1",
         "ts-prune": "^0.10.3",
-        "typescript": "5.5.2",
+        "typescript": "5.5.3",
         "util": "^0.12.5",
         "webpack": "^5.89.0",
         "webpack-bundle-analyzer": "^4.8.0",

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/**/*
+sonar.coverage.exclusions=test/**/*,res/**/*,src/vector/modernizr.js
 sonar.testExecutionReportPaths=coverage/jest-sonar-report.xml

src/@types/global.d.ts

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

src/serviceworker/index.ts

@@ -102,11 +102,15 @@ async function tryUpdateServerSupportMap(clientApiUrl: string, accessToken?: str
 
     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

src/vector/index.ts

@@ -19,6 +19,7 @@ limitations under the License.
 */
 
 import { logger } from "matrix-js-sdk/src/logger";
+import { shouldPolyfill as shouldPolyFillIntlSegmenter } from "@formatjs/intl-segmenter/should-polyfill";
 
 // These are things that can run before the skin loads - be careful not to reference the react-sdk though.
 import { parseQsFromFragment } from "./url_utils";
@@ -75,8 +76,16 @@ function checkBrowserFeatures(): boolean {
         () => 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>;
 
     let featureComplete = true;
@@ -106,6 +115,10 @@ 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,
@@ -126,6 +139,8 @@ async function start(): Promise<void> {
         "./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);
@@ -238,6 +253,10 @@ 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