v1.11.72

# 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:
-                  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 }}
+
+            - 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
 
     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"
     ]
 }

CHANGELOG.md

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

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

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.11.71",
+    "version": "1.11.72",
     "description": "A feature-rich client for Matrix.org",
     "author": "New Vector Ltd.",
     "repository": {
@@ -71,12 +71,13 @@
         "@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",
         "lodash": "^4.17.21",
-        "matrix-js-sdk": "34.1.0",
-        "matrix-react-sdk": "3.103.0",
+        "matrix-js-sdk": "34.2.0",
+        "matrix-react-sdk": "3.104.0",
         "matrix-widget-api": "^1.3.1",
         "react": "17.0.2",
         "react-dom": "17.0.2",
@@ -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

src/vector/platform/ElectronPlatform.tsx

@@ -44,6 +44,7 @@ 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";
@@ -127,6 +128,19 @@ 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");