Specify node-version for setup-node action

* tweak string formatting of default device name

* cheaters path to beating quality gate

* more electronplatform test coverage

* remove test that throw errors

* cover some more window.electrons

* more coverage

* empty line

.github/workflows/backport.yml

@@ -0,0 +1,30 @@
+name: Backport
+on:
+  pull_request_target:
+    types:
+      - closed
+      - labeled
+    branches:
+      - develop
+
+jobs:
+  backport:
+    name: Backport
+    runs-on: ubuntu-latest
+    # Only react to merged PRs for security reasons.
+    # See https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request_target.
+    if: >
+      github.event.pull_request.merged
+      && (
+        github.event.action == 'closed'
+        || (
+          github.event.action == 'labeled'
+          && contains(github.event.label.name, 'backport')
+        )
+      )
+    steps:
+      - uses: tibdex/backport@v2
+        with:
+          labels_template: "<%= JSON.stringify([...labels, 'X-Release-Blocker']) %>"
+          # We can't use GITHUB_TOKEN here or CI won't run on the new PR
+          github_token: ${{ secrets.ELEMENT_BOT_TOKEN }}

.github/workflows/build.yml

@@ -18,6 +18,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           cache: 'yarn'
+          node-version: 16
 
       - name: Install Dependencies
         run: "./scripts/layered.sh"

.github/workflows/build_develop.yml

@@ -22,6 +22,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           cache: 'yarn'
+          node-version: 16
 
       - name: Install Dependencies
         run: "./scripts/layered.sh"
@@ -35,19 +36,27 @@ jobs:
           SENTRY_ORG: element
           SENTRY_PROJECT: riot-web
 
-      - run: mv dist/element-*.tar.gz webapp.tar.gz
-      
+      - run: mv dist/element-*.tar.gz dist/develop.tar.gz
+
+      # We keep the latest develop.tar.gz as the artifact uploaded later expires after 24 and requires auth to download
+      # Element Desktop's fetch script uses this tarball to fetch latest develop to build Nightlies.
+      - name: Deploy develop.tar.gz to Github Pages
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: dist
+          single-commit: true
+
+      - uses: actions/upload-artifact@v3
+        with:
+          name: webapp
+          path: dist/develop.tar.gz
+          retention-days: 1
+
       - name: Wait for other steps to succeed
-        uses: lewagon/wait-on-check-action@v1.0.0
+        uses: lewagon/wait-on-check-action@v1.1.2
         with:
           ref: ${{ github.ref }}
           running-workflow-name: 'Build & Upload source maps to Sentry'
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           wait-interval: 10
           check-regexp: ^((?!SonarQube|issues|board).)*$
-
-      - uses: actions/upload-artifact@v3
-        with:
-          name: webapp
-          path: webapp.tar.gz
-          retention-days: 1

.github/workflows/dockerhub.yaml

@@ -40,6 +40,8 @@ jobs:
           tags: |
             type=ref,event=branch
             type=ref,event=tag
+          flavor: |
+            latest=${{ contains(github.ref_name, '-rc.') && 'false' || 'auto' }}
 
       - name: Build and push
         uses: docker/build-push-action@v2

.github/workflows/issue_closed.yml

@@ -10,6 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/github-script@v5
+        id: main
         with:
           # PAT needed as the GITHUB_TOKEN won't be able to see cross-references from other orgs (matrix-org)
           github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
@@ -127,13 +128,7 @@ jobs:
 
               // Duplicate was closed with wrong reason, fix it
               if (stateReason === "COMPLETED") {
-                await github.graphql(`mutation($id:ID!) {
-                  closeIssue(input: { issueId:$id, stateReason:NOT_PLANNED }) {
-                    clientMutationId
-                  }
-                }`, {
-                  id: context.payload.issue.node_id,
-                });
+                core.setOutput("closeAsNotPlanned", "true");
               }
             } else {
               // This issue was closed, close all related rageshakes
@@ -146,3 +141,16 @@ jobs:
                 });
               }
             }
+      - uses: actions/github-script@v5
+        name: Close duplicate as Not Planned
+        if: steps.main.outputs.closeAsNotPlanned
+        with:
+          # We do this step separately, and with the default token so as to not re-trigger this workflow when re-closing
+          script: |
+            await github.graphql(`mutation($id:ID!) {
+              closeIssue(input: { issueId:$id, stateReason:NOT_PLANNED }) {
+                clientMutationId
+              }
+            }`, {
+              id: context.payload.issue.node_id,
+            });

.github/workflows/static_analysis.yaml

@@ -19,6 +19,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           cache: 'yarn'
+          node-version: 16
 
       - name: Install Dependencies
         run: "./scripts/layered.sh"
@@ -39,6 +40,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           cache: 'yarn'
+          node-version: 16
 
       # Does not need branch matching as only analyses this layer
       - name: Install Deps
@@ -56,6 +58,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           cache: 'yarn'
+          node-version: 16
 
       # Needs branch matching as it inherits .stylelintrc.js from matrix-react-sdk
       - name: Install Dependencies
@@ -73,6 +76,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           cache: 'yarn'
+          node-version: 16
 
       - name: Install Deps
         run: "scripts/layered.sh"

.github/workflows/tests.yaml

@@ -21,6 +21,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           cache: 'yarn'
+          node-version: 16
 
       - name: Install Dependencies
         run: "./scripts/layered.sh"

.github/workflows/triage-assigned.yml

@@ -11,7 +11,7 @@ jobs:
       contains(github.event.issue.assignees.*.login, 't3chguy') ||
       contains(github.event.issue.assignees.*.login, 'turt2live')
     steps:
-      - uses: alex-page/github-project-automation-plus@bb266ff4dde9242060e2d5418e120a133586d488
+      - uses: alex-page/github-project-automation-plus@be108970955040d35dd6d053c3aff3faaf678026
         with:
           project: Web App Team
           column: "In Progress"

.github/workflows/triage-incoming.yml

@@ -8,7 +8,7 @@ jobs:
   automate-project-columns:
     runs-on: ubuntu-latest
     steps:
-      - uses: alex-page/github-project-automation-plus@bb266ff4dde9242060e2d5418e120a133586d488
+      - uses: alex-page/github-project-automation-plus@be108970955040d35dd6d053c3aff3faaf678026
         with:
           project: Issue triage
           column: Incoming

.github/workflows/triage-labelled.yml

@@ -33,7 +33,7 @@ jobs:
     name: X-Needs-Info issues to Need info column on triage board
     runs-on: ubuntu-latest
     steps:
-      - uses: konradpabjan/move-labeled-or-milestoned-issue@219d384e03fa4b6460cd24f9f37d19eb033a4338
+      - uses: konradpabjan/move-labeled-or-milestoned-issue@190352295fe309fcb113b49193bc81d9aaa9cb01
         with:
           action-token: "${{ secrets.ELEMENT_BOT_TOKEN }}"
           project-url: "https://github.com/vector-im/element-web/projects/27"
@@ -115,6 +115,29 @@ jobs:
         env:
           PROJECT_ID: "PN_kwDOAM0swc1HvQ"
           GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
+  
+  Search_issues_to_board:
+    name: Search issues to project board
+    runs-on: ubuntu-latest
+    if: >
+      contains(github.event.issue.labels.*.name, 'A-New-Search-Experience')
+    steps:
+      - uses: octokit/graphql-action@v2.x
+        with:
+          headers: '{"GraphQL-Features": "projects_next_graphql"}'
+          query: |
+            mutation add_to_project($projectid:ID!,$contentid:ID!) {
+              addProjectNextItem(input:{projectId:$projectid contentId:$contentid}) {
+                projectNextItem {
+                  id
+                }
+              }
+            }
+          projectid: ${{ env.PROJECT_ID }}
+          contentid: ${{ github.event.issue.node_id }}
+        env:
+          PROJECT_ID: "PN_kwDOAM0swc4ADtaO"
+          GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
 
   move_voice-message_issues:
     name: A-Voice Messages to voice message board
@@ -138,30 +161,6 @@ jobs:
         env:
           PROJECT_ID: "PN_kwDOAM0swc2KCw"
           GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
-
-  move_threads_issues:
-    name: A-Threads to Thread board
-    runs-on: ubuntu-latest
-    if: >
-      contains(github.event.issue.labels.*.name, 'A-Threads')
-    steps:
-      - uses: octokit/graphql-action@v2.x
-        with:
-          headers: '{"GraphQL-Features": "projects_next_graphql"}'
-          query: |
-            mutation add_to_project($projectid:ID!,$contentid:ID!) {
-              addProjectNextItem(input:{projectId:$projectid contentId:$contentid}) {
-                projectNextItem {
-                  id
-                }
-              }
-            }
-          projectid: ${{ env.PROJECT_ID }}
-          contentid: ${{ github.event.issue.node_id }}
-        env:
-          PROJECT_ID: "PN_kwDOAM0swc0rRA"
-          GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
-
   move_message_bubbles_issues:
     name: A-Message-Bubbles to Message bubbles board
     runs-on: ubuntu-latest

.github/workflows/triage-priority-bugs.yml

@@ -23,7 +23,7 @@ jobs:
        contains(github.event.issue.labels.*.name, 'A11y') &&
        contains(github.event.issue.labels.*.name, 'O-Frequent'))
     steps:
-      - uses: alex-page/github-project-automation-plus@bb266ff4dde9242060e2d5418e120a133586d488
+      - uses: alex-page/github-project-automation-plus@be108970955040d35dd6d053c3aff3faaf678026
         with:
           project: Crypto Team
           column: Ready

.github/workflows/triage-unlabelled.yml

@@ -35,7 +35,7 @@ jobs:
             fi
           fi
       - name: Move issue
-        uses: alex-page/github-project-automation-plus@bb266ff4dde9242060e2d5418e120a133586d488
+        uses: alex-page/github-project-automation-plus@be108970955040d35dd6d053c3aff3faaf678026
         if: ${{ env.ALREADY_IN_BOARD == 'true' && env.SKIP_ACTION != 'true' }}
         with:
           project: Issue triage

CHANGELOG.md

@@ -1,3 +1,154 @@
+Changes in [1.11.10](https://github.com/vector-im/element-web/releases/tag/v1.11.10) (2022-10-11)
+=================================================================================================
+
+## 🐛 Bug Fixes
+ * Use correct default for notification silencing ([\#9388](https://github.com/matrix-org/matrix-react-sdk/pull/9388)). Fixes vector-im/element-web#23456.
+
+Changes in [1.11.9](https://github.com/vector-im/element-web/releases/tag/v1.11.9) (2022-10-11)
+===============================================================================================
+
+##   Deprecations
+ * Legacy Piwik config.json option `piwik.policy_url` is deprecated in favour of `privacy_policy_url`. Support will be removed in the next release.
+
+## ✨ Features
+ * Device manager - select all devices ([\#9330](https://github.com/matrix-org/matrix-react-sdk/pull/9330)). Contributed by @kerryarchibald.
+ * New group call experience: Call tiles ([\#9332](https://github.com/matrix-org/matrix-react-sdk/pull/9332)).
+ * Add Shift key to FormatQuote keyboard shortcut ([\#9298](https://github.com/matrix-org/matrix-react-sdk/pull/9298)). Contributed by @owi92.
+ * Device manager - sign out of multiple sessions ([\#9325](https://github.com/matrix-org/matrix-react-sdk/pull/9325)). Contributed by @kerryarchibald.
+ * Display push toggle for web sessions (MSC3890) ([\#9327](https://github.com/matrix-org/matrix-react-sdk/pull/9327)).
+ * Add device notifications enabled switch ([\#9324](https://github.com/matrix-org/matrix-react-sdk/pull/9324)).
+ * Implement push notification toggle in device detail ([\#9308](https://github.com/matrix-org/matrix-react-sdk/pull/9308)).
+ * New group call experience: Starting and ending calls ([\#9318](https://github.com/matrix-org/matrix-react-sdk/pull/9318)).
+ * New group call experience: Room header call buttons ([\#9311](https://github.com/matrix-org/matrix-react-sdk/pull/9311)).
+ * Make device ID copyable in device list ([\#9297](https://github.com/matrix-org/matrix-react-sdk/pull/9297)). Contributed by @duxovni.
+ * Use display name instead of user ID when rendering power events ([\#9295](https://github.com/matrix-org/matrix-react-sdk/pull/9295)).
+ * Read receipts for threads ([\#9239](https://github.com/matrix-org/matrix-react-sdk/pull/9239)). Fixes #23191.
+
+## 🐛 Bug Fixes
+ * Use the correct sender key when checking shared secret ([\#2730](https://github.com/matrix-org/matrix-js-sdk/pull/2730)). Fixes vector-im/element-web#23374.
+ * Fix device selection in pre-join screen for Element Call video rooms ([\#9321](https://github.com/matrix-org/matrix-react-sdk/pull/9321)). Fixes #23331.
+ * Don't render a 1px high room topic if the room topic is empty ([\#9317](https://github.com/matrix-org/matrix-react-sdk/pull/9317)). Contributed by @Arnei.
+ * Don't show feedback prompts when that UIFeature is disabled ([\#9305](https://github.com/matrix-org/matrix-react-sdk/pull/9305)). Fixes #23327.
+ * Fix soft crash around unknown room pills ([\#9301](https://github.com/matrix-org/matrix-react-sdk/pull/9301)). Fixes matrix-org/element-web-rageshakes#15465.
+ * Fix spaces feedback prompt wrongly showing when feedback is disabled ([\#9302](https://github.com/matrix-org/matrix-react-sdk/pull/9302)). Fixes #23314.
+ * Fix tile soft crash in ReplyInThreadButton ([\#9300](https://github.com/matrix-org/matrix-react-sdk/pull/9300)). Fixes matrix-org/element-web-rageshakes#15493.
+
+Changes in [1.11.8](https://github.com/vector-im/element-web/releases/tag/v1.11.8) (2022-09-28)
+===============================================================================================
+
+## 🐛 Bug Fixes
+ * Bump IDB crypto store version ([\#2705](https://github.com/matrix-org/matrix-js-sdk/pull/2705)).
+
+Changes in [1.11.7](https://github.com/vector-im/element-web/releases/tag/v1.11.7) (2022-09-28)
+===============================================================================================
+
+## 🔒 Security
+* Fix for [CVE-2022-39249](https://cve.mitre.org/cgi-bin/cvekey.cgi?keyword=CVE%2D2022%2D39249)
+* Fix for [CVE-2022-39250](https://cve.mitre.org/cgi-bin/cvekey.cgi?keyword=CVE%2D2022%2D39250)
+* Fix for [CVE-2022-39251](https://cve.mitre.org/cgi-bin/cvekey.cgi?keyword=CVE%2D2022%2D39251)
+* Fix for [CVE-2022-39236](https://cve.mitre.org/cgi-bin/cvekey.cgi?keyword=CVE%2D2022%2D39236)
+
+Changes in [1.11.6](https://github.com/vector-im/element-web/releases/tag/v1.11.6) (2022-09-20)
+=========================================================================================================
+
+## ✨ Features
+ * Element Call video rooms ([\#9267](https://github.com/matrix-org/matrix-react-sdk/pull/9267)).
+ * Device manager - rename session ([\#9282](https://github.com/matrix-org/matrix-react-sdk/pull/9282)).
+ * Allow widgets to read related events ([\#9210](https://github.com/matrix-org/matrix-react-sdk/pull/9210)). Contributed by @dhenneke.
+ * Device manager - logout of other session ([\#9280](https://github.com/matrix-org/matrix-react-sdk/pull/9280)).
+ * Device manager - logout current session ([\#9275](https://github.com/matrix-org/matrix-react-sdk/pull/9275)).
+ * Device manager - verify other devices ([\#9274](https://github.com/matrix-org/matrix-react-sdk/pull/9274)).
+ * Allow integration managers to remove users ([\#9211](https://github.com/matrix-org/matrix-react-sdk/pull/9211)).
+ * Device manager - add verify current session button ([\#9252](https://github.com/matrix-org/matrix-react-sdk/pull/9252)).
+ * Add NotifPanel dot back. ([\#9242](https://github.com/matrix-org/matrix-react-sdk/pull/9242)). Fixes #17641.
+ * Implement MSC3575: Sliding Sync ([\#8328](https://github.com/matrix-org/matrix-react-sdk/pull/8328)).
+ * Add the clipboard read permission for widgets ([\#9250](https://github.com/matrix-org/matrix-react-sdk/pull/9250)). Contributed by @stefanmuhle.
+
+## 🐛 Bug Fixes
+ * Make autocomplete pop-up wider in thread view ([\#9289](https://github.com/matrix-org/matrix-react-sdk/pull/9289)).
+ * Fix soft crash around inviting invalid MXIDs in start DM on first message flow ([\#9281](https://github.com/matrix-org/matrix-react-sdk/pull/9281)). Fixes matrix-org/element-web-rageshakes#15060 and matrix-org/element-web-rageshakes#15140.
+ * Fix in-reply-to previews not disappearing when swapping rooms ([\#9278](https://github.com/matrix-org/matrix-react-sdk/pull/9278)).
+ * Fix invalid instanceof operand window.OffscreenCanvas ([\#9276](https://github.com/matrix-org/matrix-react-sdk/pull/9276)). Fixes #23275.
+ * Fix memory leak caused by unremoved listener ([\#9273](https://github.com/matrix-org/matrix-react-sdk/pull/9273)).
+ * Fix thumbnail generation when offscreen canvas fails ([\#9272](https://github.com/matrix-org/matrix-react-sdk/pull/9272)). Fixes #23265.
+ * Prevent sliding sync from showing a room under multiple sublists ([\#9266](https://github.com/matrix-org/matrix-react-sdk/pull/9266)).
+ * Fix tile crash around tooltipify links ([\#9270](https://github.com/matrix-org/matrix-react-sdk/pull/9270)). Fixes #23253.
+ * Device manager - filter out nulled metadatas in device tile properly ([\#9251](https://github.com/matrix-org/matrix-react-sdk/pull/9251)).
+ * Fix a sliding sync bug which could cause rooms to loop ([\#9268](https://github.com/matrix-org/matrix-react-sdk/pull/9268)).
+ * Remove the grey gradient on images in bubbles in the timeline ([\#9241](https://github.com/matrix-org/matrix-react-sdk/pull/9241)). Fixes #21651.
+ * Fix html export not including images ([\#9260](https://github.com/matrix-org/matrix-react-sdk/pull/9260)). Fixes #22059.
+ * Fix possible soft crash from a race condition in space hierarchies ([\#9254](https://github.com/matrix-org/matrix-react-sdk/pull/9254)). Fixes matrix-org/element-web-rageshakes#15225.
+ * Disable all types of autocorrect, -complete, -capitalize, etc on Spotlight's search field ([\#9259](https://github.com/matrix-org/matrix-react-sdk/pull/9259)).
+ * Handle M_INVALID_USERNAME on /register/available ([\#9237](https://github.com/matrix-org/matrix-react-sdk/pull/9237)). Fixes #23161.
+ * Fix issue with quiet zone around QR code ([\#9243](https://github.com/matrix-org/matrix-react-sdk/pull/9243)). Fixes #23199.
+
+Changes in [1.11.5](https://github.com/vector-im/element-web/releases/tag/v1.11.5) (2022-09-13)
+===============================================================================================
+
+## ✨ Features
+ * Device manager - hide unverified security recommendation when only current session is unverified ([\#9228](https://github.com/matrix-org/matrix-react-sdk/pull/9228)). Contributed by @kerryarchibald.
+ * Device manager - scroll to filtered list from security recommendations ([\#9227](https://github.com/matrix-org/matrix-react-sdk/pull/9227)). Contributed by @kerryarchibald.
+ * Device manager - updated dropdown style in filtered device list ([\#9226](https://github.com/matrix-org/matrix-react-sdk/pull/9226)). Contributed by @kerryarchibald.
+ * Device manager - device type and verification icons on device tile ([\#9197](https://github.com/matrix-org/matrix-react-sdk/pull/9197)). Contributed by @kerryarchibald.
+
+## 🐛 Bug Fixes
+ * Description of DM room with more than two other people is now being displayed correctly ([\#9231](https://github.com/matrix-org/matrix-react-sdk/pull/9231)). Fixes #23094.
+ * Fix voice messages with multiple composers ([\#9208](https://github.com/matrix-org/matrix-react-sdk/pull/9208)). Fixes #23023. Contributed by @grimhilt.
+ * Fix suggested rooms going missing ([\#9236](https://github.com/matrix-org/matrix-react-sdk/pull/9236)). Fixes #23190.
+ * Fix tooltip infinitely recursing ([\#9235](https://github.com/matrix-org/matrix-react-sdk/pull/9235)). Fixes matrix-org/element-web-rageshakes#15107, matrix-org/element-web-rageshakes#15093 matrix-org/element-web-rageshakes#15092 and matrix-org/element-web-rageshakes#15077.
+ * Fix plain text export saving ([\#9230](https://github.com/matrix-org/matrix-react-sdk/pull/9230)). Contributed by @jryans.
+ * Add missing space in SecurityRoomSettingsTab ([\#9222](https://github.com/matrix-org/matrix-react-sdk/pull/9222)). Contributed by @gefgu.
+ * Make use of js-sdk roomNameGenerator to handle i18n for generated room names ([\#9209](https://github.com/matrix-org/matrix-react-sdk/pull/9209)). Fixes #21369.
+ * Fix progress bar regression throughout the app ([\#9219](https://github.com/matrix-org/matrix-react-sdk/pull/9219)). Fixes #23121.
+ * Reuse empty string & space string logic for event types in devtools ([\#9218](https://github.com/matrix-org/matrix-react-sdk/pull/9218)). Fixes #23115.
+
+Changes in [1.11.4](https://github.com/vector-im/element-web/releases/tag/v1.11.4) (2022-08-31)
+===============================================================================================
+
+## 🔒 Security
+* Fixes for [CVE-2022-36059](https://cve.mitre.org/cgi-bin/cvekey.cgi?keyword=CVE%2D2022%2D36059) and [CVE-2022-36060](https://cve.mitre.org/cgi-bin/cvekey.cgi?keyword=CVE%2D2022%2D36060)
+
+Learn more about what we've been up to at https://element.io/blog/element-web-desktop-1-11-4-a-security-update-deferred-dms-and-more/
+Find more details of the vulnerabilities at https://matrix.org/blog/2022/08/31/security-releases-matrix-js-sdk-19-4-0-and-matrix-react-sdk-3-53-0
+
+## ✨ Features
+ * Device manager - scroll to filtered list from security recommendations ([\#9227](https://github.com/matrix-org/matrix-react-sdk/pull/9227)). Contributed by @kerryarchibald.
+ * Device manager - updated dropdown style in filtered device list ([\#9226](https://github.com/matrix-org/matrix-react-sdk/pull/9226)). Contributed by @kerryarchibald.
+ * Device manager - device type and verification icons on device tile ([\#9197](https://github.com/matrix-org/matrix-react-sdk/pull/9197)). Contributed by @kerryarchibald.
+ * Ignore unreads in low priority rooms in the space panel ([\#6518](https://github.com/matrix-org/matrix-react-sdk/pull/6518)). Fixes #16836.
+ * Release message right-click context menu out of labs ([\#8613](https://github.com/matrix-org/matrix-react-sdk/pull/8613)).
+ * Device manager - expandable session details in device list ([\#9188](https://github.com/matrix-org/matrix-react-sdk/pull/9188)). Contributed by @kerryarchibald.
+ * Device manager - device list filtering ([\#9181](https://github.com/matrix-org/matrix-react-sdk/pull/9181)). Contributed by @kerryarchibald.
+ * Device manager - add verification details to session details ([\#9187](https://github.com/matrix-org/matrix-react-sdk/pull/9187)). Contributed by @kerryarchibald.
+ * Device manager - current session expandable details ([\#9185](https://github.com/matrix-org/matrix-react-sdk/pull/9185)). Contributed by @kerryarchibald.
+ * Device manager - security recommendations section ([\#9179](https://github.com/matrix-org/matrix-react-sdk/pull/9179)). Contributed by @kerryarchibald.
+ * The Welcome Home Screen: Return Button ([\#9089](https://github.com/matrix-org/matrix-react-sdk/pull/9089)). Fixes #22917. Contributed by @justjanne.
+ * Device manager - label devices as inactive ([\#9175](https://github.com/matrix-org/matrix-react-sdk/pull/9175)). Contributed by @kerryarchibald.
+ * Device manager - other sessions list ([\#9155](https://github.com/matrix-org/matrix-react-sdk/pull/9155)). Contributed by @kerryarchibald.
+ * Implement MSC3846: Allowing widgets to access TURN servers ([\#9061](https://github.com/matrix-org/matrix-react-sdk/pull/9061)).
+ * Allow widgets to send/receive to-device messages ([\#8885](https://github.com/matrix-org/matrix-react-sdk/pull/8885)).
+
+## 🐛 Bug Fixes
+ * Add super cool feature ([\#9222](https://github.com/matrix-org/matrix-react-sdk/pull/9222)). Contributed by @gefgu.
+ * Make use of js-sdk roomNameGenerator to handle i18n for generated room names ([\#9209](https://github.com/matrix-org/matrix-react-sdk/pull/9209)). Fixes #21369.
+ * Fix progress bar regression throughout the app ([\#9219](https://github.com/matrix-org/matrix-react-sdk/pull/9219)). Fixes #23121.
+ * Reuse empty string & space string logic for event types in devtools ([\#9218](https://github.com/matrix-org/matrix-react-sdk/pull/9218)). Fixes #23115.
+ * Reduce amount of requests done by the onboarding task list ([\#9194](https://github.com/matrix-org/matrix-react-sdk/pull/9194)). Fixes #23085. Contributed by @justjanne.
+ * Avoid hardcoding branding in user onboarding ([\#9206](https://github.com/matrix-org/matrix-react-sdk/pull/9206)). Fixes #23111. Contributed by @justjanne.
+ * End jitsi call when member is banned ([\#8879](https://github.com/matrix-org/matrix-react-sdk/pull/8879)). Contributed by @maheichyk.
+ * Fix context menu being opened when clicking message action bar buttons ([\#9200](https://github.com/matrix-org/matrix-react-sdk/pull/9200)). Fixes #22279 and #23100.
+ * Add gap between checkbox and text in report dialog following the same pattern (8px) used in the gap between the two buttons. It fixes vector-im/element-web#23060 ([\#9195](https://github.com/matrix-org/matrix-react-sdk/pull/9195)). Contributed by @gefgu.
+ * Fix url preview AXE and layout issue & add percy test ([\#9189](https://github.com/matrix-org/matrix-react-sdk/pull/9189)). Fixes #23083.
+ * Wrap long space names ([\#9201](https://github.com/matrix-org/matrix-react-sdk/pull/9201)). Fixes #23095.
+ * Attempt to fix `Failed to execute 'removeChild' on 'Node'` ([\#9196](https://github.com/matrix-org/matrix-react-sdk/pull/9196)).
+ * Fix soft crash around space hierarchy changing between spaces ([\#9191](https://github.com/matrix-org/matrix-react-sdk/pull/9191)). Fixes matrix-org/element-web-rageshakes#14613.
+ * Fix soft crash around room view store metrics ([\#9190](https://github.com/matrix-org/matrix-react-sdk/pull/9190)). Fixes matrix-org/element-web-rageshakes#14361.
+ * Fix the same person appearing multiple times when searching for them. ([\#9177](https://github.com/matrix-org/matrix-react-sdk/pull/9177)). Fixes #22851.
+ * Fix space panel subspace indentation going missing ([\#9167](https://github.com/matrix-org/matrix-react-sdk/pull/9167)). Fixes #23049.
+ * Fix invisible power levels tile when showing hidden events ([\#9162](https://github.com/matrix-org/matrix-react-sdk/pull/9162)). Fixes #23013.
+ * Space panel accessibility improvements ([\#9157](https://github.com/matrix-org/matrix-react-sdk/pull/9157)). Fixes #22995.
+ * Fix inverted logic for showing UserWelcomeTop component ([\#9164](https://github.com/matrix-org/matrix-react-sdk/pull/9164)). Fixes #23037.
+
 Changes in [1.11.3](https://github.com/vector-im/element-web/releases/tag/v1.11.3) (2022-08-16)
 ===============================================================================================
 

CONTRIBUTING.md

@@ -1,4 +1,283 @@
-Contributing code to Element
-============================
+Contributing code to Element Web
+================================
 
-Element follows the same pattern as the [matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk/blob/develop/CONTRIBUTING.md).
+Everyone is welcome to contribute code to Element Web, provided that they are
+willing to license their contributions under the same license as the project
+itself. We follow a simple 'inbound=outbound' model for contributions: the act
+of submitting an 'inbound' contribution means that the contributor agrees to
+license the code under the same terms as the project's overall 'outbound'
+license - in this case, Apache Software License v2 (see
+[LICENSE](LICENSE)).
+
+How to contribute
+-----------------
+
+The preferred and easiest way to contribute changes to the project is to fork
+it on github, and then create a pull request to ask us to pull your changes
+into our repo (https://help.github.com/articles/using-pull-requests/)
+
+We use GitHub's pull request workflow to review the contribution, and either
+ask you to make any refinements needed or merge it and make them ourselves.
+
+Things that should go into your PR description:
+ * A changelog entry in the `Notes` section (see below)
+ * References to any bugs fixed by the change (in GitHub's `Fixes` notation)
+ * Describe the why and what is changing in the PR description so it's easy for
+   onlookers and reviewers to onboard and context switch. This information is
+   also helpful when we come back to look at this in 6 months and ask "why did
+   we do it like that?" we have a chance of finding out.
+      * Why didn't it work before? Why does it work now? What use cases does it
+        unlock?
+      * If you find yourself adding information on how the code works or why you
+        chose to do it the way you did, make sure this information is instead
+        written as comments in the code itself.
+      * Sometimes a PR can change considerably as it is developed. In this case,
+        the description should be updated to reflect the most recent state of
+        the PR. (It can be helpful to retain the old content under a suitable
+        heading, for additional context.)
+ * Include both **before** and **after** screenshots to easily compare and discuss
+   what's changing.
+ * Include a step-by-step testing strategy so that a reviewer can check out the
+   code locally and easily get to the point of testing your change.
+ * Add comments to the diff for the reviewer that might help them to understand
+   why the change is necessary or how they might better understand and review it.
+
+We rely on information in pull request to populate the information that goes into 
+the changelogs our users see, both for Element Web itself and other projects on
+which it is based. This is picked up from both labels on the pull request and
+the `Notes:` annotation in the description. By default, the PR title will be
+used for the changelog entry, but you can specify more options, as follows.
+
+To add a longer, more detailed description of the change for the changelog:
+
+
+*Fix llama herding bug*
+
+```
+Notes: Fix a bug (https://github.com/matrix-org/notaproject/issues/123) where the 'Herd' button would not herd more than 8 Llamas if the moon was in the waxing gibbous phase
+```
+
+For some PRs, it's not useful to have an entry in the user-facing changelog (this is
+the default for PRs labelled with `T-Task`):
+
+*Remove outdated comment from `Ungulates.ts`*
+```
+Notes: none
+```
+
+Sometimes, you're fixing a bug in a downstream project, in which case you want
+an entry in that project's changelog. You can do that too:
+
+*Fix another herding bug*
+```
+Notes: Fix a bug where the `herd()` function would only work on Tuesdays
+element-web notes: Fix a bug where the 'Herd' button only worked on Tuesdays
+```
+
+This example is for Element Web. You can specify:
+ * matrix-react-sdk
+ * element-web
+ * element-desktop
+
+If your PR introduces a breaking change, use the `Notes` section in the same
+way, additionally adding the `X-Breaking-Change` label (see below). There's no need
+to specify in the notes that it's a breaking change - this will be added
+automatically based on the label - but remember to tell the developer how to
+migrate:
+
+*Remove legacy class*
+
+```
+Notes: Remove legacy `Camelopard` class. `Giraffe` should be used instead.
+```
+
+Other metadata can be added using labels.
+ * `X-Breaking-Change`: A breaking change - adding this label will mean the change causes a *major* version bump.
+ * `T-Enhancement`: A new feature - adding this label will mean the change causes a *minor* version bump.
+ * `T-Defect`: A bug fix (in either code or docs).
+ * `T-Task`: No user-facing changes, eg. code comments, CI fixes, refactors or tests. Won't have a changelog entry unless you specify one.
+
+If you don't have permission to add labels, your PR reviewer(s) can work with you
+to add them: ask in the PR description or comments.
+
+We use continuous integration, and all pull requests get automatically tested:
+if your change breaks the build, then the PR will show that there are failed
+checks, so please check back after a few minutes.
+
+Tests
+-----
+Your PR should include tests.
+
+For new user facing features in `matrix-js-sdk`, `matrix-react-sdk` or `element-web`, you
+must include:
+
+1. Comprehensive unit tests written in Jest. These are located in `/test`.
+2. "happy path" end-to-end tests.
+   These are located in `/cypress/e2e` in `matrix-react-sdk`, and
+   are run using `element-web`. Ideally, you would also include tests for edge
+   and error cases.
+
+Unit tests are expected even when the feature is in labs. It's good practice
+to write tests alongside the code as it ensures the code is testable from
+the start, and gives you a fast feedback loop while you're developing the
+functionality. End-to-end tests should be added prior to the feature
+leaving labs, but don't have to be present from the start (although it might
+be beneficial to have some running early, so you can test things faster).
+
+For bugs in those repos, your change must include at least one unit test or
+end-to-end test; which is best depends on what sort of test most concisely
+exercises the area.
+
+Changes to must be accompanied by unit tests written in Jest.
+These are located in `/spec/` in `matrix-js-sdk` or `/test/` in `element-web` 
+and `matrix-react-sdk`.
+
+When writing unit tests, please aim for a high level of test coverage
+for new code - 80% or greater. If you cannot achieve that, please document
+why it's not possible in your PR.
+
+Some sections of code are not sensible to add coverage for, such as those
+which explicitly inhibit noisy logging for tests. Which can be hidden using
+an istanbul magic comment as [documented here][1]. See example:
+```javascript
+/* istanbul ignore if */
+if (process.env.NODE_ENV !== "test") {
+    logger.error("Log line that is noisy enough in tests to want to skip");
+}
+```
+
+Tests validate that your change works as intended and also document
+concisely what is being changed. Ideally, your new tests fail
+prior to your change, and succeed once it has been applied. You may
+find this simpler to achieve if you write the tests first.
+
+If you're spiking some code that's experimental and not being used to support
+production features, exceptions can be made to requirements for tests.
+Note that tests will still be required in order to ship the feature, and it's
+strongly encouraged to think about tests early in the process, as adding
+tests later will become progressively more difficult.
+
+If you're not sure how to approach writing tests for your change, ask for help
+in [#element-dev](https://matrix.to/#/#element-dev:matrix.org).
+
+Code style
+----------
+Element Web aims to target TypeScript/ES6. All new files should be written in
+TypeScript and existing files should use ES6 principles where possible.
+
+Members should not be exported as a default export in general - it causes problems
+with the architecture of the SDK (index file becomes less clear) and could
+introduce naming problems (as default exports get aliased upon import). In
+general, avoid using `export default`.
+
+The remaining code style is documented in [code_style.md](./code_style.md).
+Contributors are encouraged to it and follow the principles set out there.
+
+Please ensure your changes match the cosmetic style of the existing project,
+and ***never*** mix cosmetic and functional changes in the same commit, as it
+makes it horribly hard to review otherwise.
+
+Attribution
+-----------
+Everyone who contributes anything to Matrix is welcome to be listed in the
+AUTHORS.rst file for the project in question. Please feel free to include a
+change to AUTHORS.rst in your pull request to list yourself and a short
+description of the area(s) you've worked on. Also, we sometimes have swag to
+give away to contributors - if you feel that Matrix-branded apparel is missing
+from your life, please mail us your shipping address to matrix at matrix.org
+and we'll try to fix it :)
+
+Sign off
+--------
+In order to have a concrete record that your contribution is intentional
+and you agree to license it under the same terms as the project's license, we've
+adopted the same lightweight approach that the Linux Kernel
+(https://www.kernel.org/doc/Documentation/SubmittingPatches), Docker
+(https://github.com/docker/docker/blob/master/CONTRIBUTING.md), and many other
+projects use: the DCO (Developer Certificate of Origin:
+http://developercertificate.org/). This is a simple declaration that you wrote
+the contribution or otherwise have the right to contribute it to Matrix:
+
+```
+Developer Certificate of Origin
+Version 1.1
+
+Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
+660 York Street, Suite 102,
+San Francisco, CA 94110 USA
+
+Everyone is permitted to copy and distribute verbatim copies of this
+license document, but changing it is not allowed.
+
+Developer's Certificate of Origin 1.1
+
+By making a contribution to this project, I certify that:
+
+(a) The contribution was created in whole or in part by me and I
+    have the right to submit it under the open source license
+    indicated in the file; or
+
+(b) The contribution is based upon previous work that, to the best
+    of my knowledge, is covered under an appropriate open source
+    license and I have the right under that license to submit that
+    work with modifications, whether created in whole or in part
+    by me, under the same open source license (unless I am
+    permitted to submit under a different license), as indicated
+    in the file; or
+
+(c) The contribution was provided directly to me by some other
+    person who certified (a), (b) or (c) and I have not modified
+    it.
+
+(d) I understand and agree that this project and the contribution
+    are public and that a record of the contribution (including all
+    personal information I submit with it, including my sign-off) is
+    maintained indefinitely and may be redistributed consistent with
+    this project or the open source license(s) involved.
+```
+
+If you agree to this for your contribution, then all that's needed is to
+include the line in your commit or pull request comment:
+
+```
+Signed-off-by: Your Name <your@email.example.org>
+```
+
+We accept contributions under a legally identifiable name, such as your name on
+government documentation or common-law names (names claimed by legitimate usage
+or repute). Unfortunately, we cannot accept anonymous contributions at this
+time.
+
+Git allows you to add this signoff automatically when using the `-s` flag to
+`git commit`, which uses the name and email set in your `user.name` and
+`user.email` git configs.
+
+If you forgot to sign off your commits before making your pull request and are
+on Git 2.17+ you can mass signoff using rebase:
+
+```
+git rebase --signoff origin/develop
+```
+
+Review expectations
+===================
+
+See https://github.com/vector-im/element-meta/wiki/Review-process
+
+
+Merge Strategy
+==============
+
+The preferred method for merging pull requests is squash merging to keep the
+commit history trim, but it is up to the discretion of the team member merging
+the change. We do not support rebase merges due to `allchange` being unable to
+handle them. When merging make sure to leave the default commit title, or 
+at least leave the PR number at the end in brackets like by default.
+When stacking pull requests, you may wish to do the following:
+
+1. Branch from develop to your branch (branch1), push commits onto it and open a pull request
+2. Branch from your base branch (branch1) to your work branch (branch2), push commits and open a pull request configuring the base to be branch1, saying in the description that it is based on your other PR.
+3. Merge the first PR using a merge commit otherwise your stacked PR will need a rebase. Github will automatically adjust the base branch of your other PR to be develop.
+
+
+[1]: https://github.com/gotwarlost/istanbul/blob/master/ignoring-code-for-coverage.md

README.md

@@ -117,6 +117,13 @@ add_header X-Content-Type-Options nosniff;
 add_header X-XSS-Protection "1; mode=block";
 add_header Content-Security-Policy "frame-ancestors 'none'";
 ```
+For Apache, the configuration looks like:
+```
+Header set X-Frame-Options SAMEORIGIN
+Header set X-Content-Type-Options nosniff
+Header set X-XSS-Protection "1; mode=block"
+Header set Content-Security-Policy "frame-ancestors 'none'"
+```
 
 Note: In case you are already setting a `Content-Security-Policy` header
 elsewhere, you should modify it to include the `frame-ancestors` directive

code_style.md

@@ -0,0 +1,455 @@
+# Element Web/Desktop code style guide
+
+This code style applies to projects which the element-web team directly maintains or is reasonably
+adjacent to. As of writing, these are:
+
+* element-desktop
+* element-web
+* matrix-react-sdk
+* matrix-js-sdk
+
+Other projects might extend this code style for increased strictness. For example, matrix-events-sdk
+has stricter code organization to reduce the maintenance burden. These projects will declare their code
+style within their own repos.
+
+Note that some requirements will be layer-specific. Where the requirements don't make sense for the
+project, they are used to the best of their ability, used in spirit, or ignored if not applicable,
+in that order.
+
+## Guiding principles
+
+1. We want the lint rules to feel natural for most team members. No one should have to think too much
+   about the linter.
+2. We want to stay relatively close to [industry standards](https://google.github.io/styleguide/tsguide.html)
+   to make onboarding easier.
+3. We describe what good code looks like rather than point out bad examples. We do this to avoid
+   excessively punishing people for writing code which fails the linter.
+4. When something isn't covered by the style guide, we come up with a reasonable rule rather than
+   claim that it "passes the linter". We update the style guide and linter accordingly.
+5. While we aim to improve readability, understanding, and other aspects of the code, we deliberately
+   do not let solely our personal preferences drive decisions.
+6. We aim to have an understandable guide.
+
+## Coding practices
+
+1. Lint rules enforce decisions made by this guide. The lint rules and this guide are kept in
+   perfect sync.
+2. Commit messages are descriptive for the changes. When the project supports squash merging,
+   only the squashed commit needs to have a descriptive message.
+3. When there is disagreement with a code style approved by the linter, a PR is opened against
+   the lint rules rather than making exceptions on the responsible code PR.
+4. Rules which are intentionally broken (via eslint-ignore, @ts-ignore, etc) have a comment
+   included in the immediate vicinity for why. Determination of whether this is valid applies at
+   code review time.
+5. When editing a file, nearby code is updated to meet the modern standards. "Nearby" is subjective,
+   but should be whatever is reasonable at review time. Such an example might be to update the
+   class's code style, but not the file's.
+    1. These changes should be minor enough to include in the same commit without affecting a code
+       reviewer's job.
+
+## All code
+
+Unless otherwise specified, the following applies to all code:
+
+1. 120 character limit per line. Match existing code in the file if it is using a lower guide.
+2. A tab/indentation is 4 spaces.
+3. Newlines are Unix.
+4. A file has a single empty line at the end.
+5. Lines are trimmed of all excess whitespace, including blank lines.
+6. Long lines are broken up for readability.
+
+## TypeScript / JavaScript {#typescript-javascript}
+
+1. Write TypeScript. Turn JavaScript into TypeScript when working in the area.
+2. Use named exports.
+3. Break long lines to appear as follows:
+
+    ```typescript
+    // Function arguments
+    function doThing(
+        arg1: string,
+        arg2: string,
+        arg3: string,
+    ): boolean {
+        return !!arg1 
+            && !!arg2 
+            && !!arg3;
+    }
+
+    // Calling a function
+    doThing(
+        "String 1",
+        "String 2",
+        "String 3",
+    );
+
+    // Reduce line verbosity when possible/reasonable
+    doThing(
+        "String1", "String 2",
+        "A much longer string 3",
+    );
+
+    // Chaining function calls
+    something.doThing()
+        .doOtherThing()
+        .doMore()
+        .somethingElse(it =>
+            useIt(it)
+        );
+    ```
+4. Use semicolons for block/line termination.
+    1. Except when defining interfaces, classes, and non-arrow functions specifically.
+5. When a statement's body is a single line, it may be written without curly braces, so long as the body is placed on
+   the same line as the statement.
+
+    ```typescript
+    if (x) doThing();
+    ```
+6. Blocks for `if`, `for`, `switch` and so on must have a space surrounding the condition, but not
+   within the condition.
+
+    ```typescript
+    if (x) {
+        doThing();
+    }
+    ```
+7. Mixing of logical operands requires brackets to explicitly define boolean logic.
+
+    ```typescript
+    if ((a > b && b > c) || (d < e)) return true;
+    ```
+8. Ternaries use the same rules as `if` statements, plus the following:
+
+    ```typescript
+    // Single line is acceptable
+    const val = a > b ? doThing() : doOtherThing();
+
+    // Multiline is also okay
+    const val = a > b
+        ? doThing()
+        : doOtherThing();
+
+    // Use brackets when using multiple conditions.
+    // Maximum 3 conditions, prefer 2 or less.
+    const val = (a > b && b > c) ? doThing() : doOtherThing();
+    ```
+9. lowerCamelCase is used for function and variable naming.
+10. UpperCamelCase is used for general naming.
+11. Interface names should not be marked with an uppercase `I`.
+12. One variable declaration per line.
+13. If a variable is not receiving a value on declaration, its type must be defined.
+
+    ```typescript
+    let errorMessage: Optional<string>;
+    ```
+14. Objects, arrays, enums and so on must have each line terminated with a comma:
+
+    ```typescript
+    const obj = {
+        prop: 1,
+        else: 2,
+    };
+
+    const arr = [
+        "one",
+        "two",
+    ];
+
+    enum Thing {
+        Foo,
+        Bar,
+    }
+
+    doThing(
+        "arg1",
+        "arg2",
+    );
+    ```
+15. Objects can use shorthand declarations, including mixing of types.
+
+    ```typescript
+    {
+        room,
+        prop: this.prop,
+    }
+    // ... or ...
+    { room, prop: this.prop }
+    ```
+16. Object keys should always be non-strings when possible.
+
+    ```typescript
+    {
+        property: "value",
+        "m.unavoidable": true,
+        [EventType.RoomMessage]: true,
+    }
+    ```
+17. Explicitly cast to a boolean.
+
+    ```typescript
+    !!stringVar || Boolean(stringVar)
+    ```
+18. Use `switch` statements when checking against more than a few enum-like values.
+19. Use `const` for constants, `let` for mutability.
+20. Describe types exhaustively (ensure noImplictAny would pass).
+    1. Notable exceptions are arrow functions used as parameters, when a void return type is
+       obvious, and when declaring and assigning a variable in the same line.
+21. Declare member visibility (public/private/protected).
+22. Private members are private and not prefixed unless required for naming conflicts.
+    1. Convention is to use an underscore or the word "internal" to denote conflicted member names.
+    2. "Conflicted" typically refers to a getter which wants the same name as the underlying variable.
+23. Prefer readonly members over getters backed by a variable, unless an internal setter is required.
+24. Prefer Interfaces for object definitions, and types for parameter-value-only declarations.
+    1. Note that an explicit type is optional if not expected to be used outside of the function call,
+       unlike in this example:
+
+        ```typescript
+        interface MyObject {
+            hasString: boolean;
+        }
+
+        type Options = MyObject | string;
+
+        function doThing(arg: Options) {
+            // ...
+        }
+        ```
+25. Variables/properties which are `public static` should also be `readonly` when possible.
+26. Interface and type properties are terminated with semicolons, not commas.
+27. Prefer arrow formatting when declaring functions for interfaces/types:
+
+    ```typescript
+    interface Test {
+        myCallback: (arg: string) => Promise<void>;
+    }
+    ```
+28. Prefer a type definition over an inline type. For example, define an interface.
+29. Always prefer to add types or declare a type over the use of `any`. Prefer inferred types
+    when they are not `any`.
+    1. When using `any`, a comment explaining why must be present.
+30. `import` should be used instead of `require`, as `require` does not have types.
+31. Export only what can be reused.
+32. Prefer a type like `Optional<X>` (`type Optional<T> = T | null | undefined`) instead
+    of truly optional parameters.
+    1. A notable exception is when the likelihood of a bug is minimal, such as when a function
+       takes an argument that is more often not required than required. An example where the
+       `?` operator is inappropriate is when taking a room ID: typically the caller should
+       supply the room ID if it knows it, otherwise deliberately acknowledge that it doesn't
+       have one with `null`.
+
+        ```typescript
+        function doThingWithRoom(
+            thing: string,
+            room: Optional<string>, // require the caller to specify
+        ) {
+            // ...
+        }
+        ```
+33. There should be approximately one interface, class, or enum per file unless the file is named
+    "types.ts", "global.d.ts", or ends with "-types.ts".
+    1. The file name should match the interface, class, or enum name.
+34. Bulk functions can be declared in a single file, though named as "foo-utils.ts" or "utils/foo.ts".
+35. Imports are grouped by external module imports first, then by internal imports.
+36. File ordering is not strict, but should generally follow this sequence:
+    1. Licence header
+    2. Imports
+    3. Constants
+    4. Enums
+    5. Interfaces
+    6. Functions
+    7. Classes
+        1. Public/protected/private static properties
+        2. Public/protected/private properties
+        3. Constructors
+        4. Public/protected/private getters & setters
+        5. Protected and abstract functions
+        6. Public/private functions
+        7. Public/protected/private static functions
+37. Variable names should be noticeably unique from their types. For example, "str: string" instead
+    of "string: string".
+38. Use double quotes to enclose strings. You may use single quotes if the string contains double quotes.
+
+    ```typescript
+    const example1 = "simple string";
+    const example2 = 'string containing "double quotes"';
+    ```
+39. Prefer async-await to promise-chaining
+
+    ```typescript
+    async function () {
+        const result = await anotherAsyncFunction();
+        // ...
+    }
+    ```
+
+## React
+
+Inheriting all the rules of TypeScript, the following additionally apply:
+
+1. Types for lifecycle functions are not required (render, componentDidMount, and so on).
+2. Class components must always have a `Props` interface declared immediately above them. It can be
+   empty if the component accepts no props.
+3. Class components should have an `State` interface declared immediately above them, but after `Props`.
+4. Props and State should not be exported. Use `React.ComponentProps<typeof ComponentNameHere>`
+   instead.
+5. One component per file, except when a component is a utility component specifically for the "primary"
+   component. The utility component should not be exported.
+6. Exported constants, enums, interfaces, functions, etc must be separate from files containing components
+   or stores.
+7. Stores should use a singleton pattern with a static instance property:
+
+    ```typescript
+    class FooStore {
+        public static readonly instance = new FooStore();
+
+        // or if the instance can't be created eagerly:
+        private static _instance: FooStore;
+        public static get instance(): FooStore {
+            if (!FooStore._instance) {
+                FooStore._instance = new FooStore();
+            }
+            return FooStore._instance;
+        }
+    }
+    ```
+8. Stores must support using an alternative MatrixClient and dispatcher instance.
+9. Utilities which require JSX must be split out from utilities which do not. This is to prevent import
+   cycles during runtime where components accidentally include more of the app than they intended.
+10. Interdependence between stores should be kept to a minimum. Break functions and constants out to utilities
+    if at all possible.
+11. A component should only use CSS class names in line with the component name.
+    1. When knowingly using a class name from another component, document it.
+12. Break components over multiple lines like so:
+
+    ```typescript
+    function render() {
+        return <Component
+            prop1="test"
+            prop2={this.state.variable}
+        />;
+
+        // or
+
+        return (
+            <Component
+                prop1="test"
+                prop2={this.state.variable}
+            />
+        );
+
+        // or if children are needed (infer parens usage)
+
+        return <Component
+            prop1="test"
+            prop2={this.state.variable}
+        >{ _t("Short string here") }</Component>;
+
+
+
+        return <Component
+            prop1="test"
+            prop2={this.state.variable}
+        >
+            { _t("Longer string here") }
+        </Component>;
+    }
+    ```
+13. Curly braces within JSX should be padded with a space, however properties on those components should not.
+    See above code example.
+14. Functions used as properties should either be defined on the class or stored in a variable. They should not
+    be inline unless mocking/short-circuiting the value.
+15. Prefer hooks (functional components) over class components. Be consistent with the existing area if unsure
+    which should be used.
+    1. Unless the component is considered a "structure", in which case use classes.
+16. Write more views than structures. Structures are chunks of functionality like MatrixChat while views are
+    isolated components.
+17. Components should serve a single, or near-single, purpose.
+18. Prefer to derive information from component properties rather than establish state.
+19. Do not use `React.Component::forceUpdate`.
+
+## Stylesheets (\*.pcss = PostCSS + Plugins)
+
+Note: We use PostCSS + some plugins to process our styles. It looks like SCSS, but actually it is not.
+
+1. Class names must be prefixed with "mx_".
+2. Class names should denote the component which defines them, followed by any context:
+    1. mx_MyFoo
+    2. mx_MyFoo_avatar
+    3. mx_MyFoo_avatar--user
+3. Use the `$font` and `$spacing` variables instead of manual values.
+4. Keep indentation/nesting to a minimum. Maximum suggested nesting is 5 layers.
+5. Use the whole class name instead of shortcuts:
+
+    ```scss
+    .mx_MyFoo {
+        & .mx_MyFoo_avatar { // instead of &_avatar
+            // ...
+        }
+    }
+    ```
+6. Break multiple selectors over multiple lines this way:
+
+    ```scss
+    .mx_MyFoo,
+    .mx_MyBar,
+    .mx_MyFooBar {
+        // ...
+    }
+    ```
+7. Non-shared variables should use $lowerCamelCase. Shared variables use $dashed-naming.
+8. Overrides to Z indexes, adjustments of dimensions/padding with pixels, and so on should all be
+   documented for what the values mean:
+
+    ```scss
+    .mx_MyFoo {
+        width: calc(100% - 12px); // 12px for read receipts
+        top: -2px; // visually centred vertically
+        z-index: 10; // above user avatar, but below dialogs
+    }
+    ```
+9. Avoid the use of `!important`. If necessary, add a comment.
+
+## Tests
+
+1. Tests must be written in TypeScript.
+2. Jest mocks are declared below imports, but above everything else.
+3. Use the following convention template:
+
+    ```typescript
+    // Describe the class, component, or file name.
+    describe("FooComponent", () => {
+        // all test inspecific variables go here
+
+        beforeEach(() => {
+            // exclude if not used.
+        });
+
+        afterEach(() => {
+            // exclude if not used.
+        });
+
+        // Use "it should..." terminology
+        it("should call the correct API", async () => {
+            // test-specific variables go here
+
+            // function calls/state changes go here
+
+            // expectations go here
+        });
+    });
+
+    // If the file being tested is a utility class:
+    describe("foo-utils", () => {
+        describe("firstUtilFunction", () => {
+            it("should...", async () => {
+                // ...
+            });
+        });
+
+        describe("secondUtilFunction", () => {
+            it("should...", async () => {
+                // ...
+            });
+        });
+    });
+    ```

config.sample.json

@@ -44,5 +44,10 @@
     "jitsi": {
         "preferred_domain": "meet.element.io"
     },
+    "element_call": {
+        "url": "https://call.element.io",
+        "participant_limit": 8,
+        "brand": "Element Call"
+    },
     "map_style_url": "https://api.maptiler.com/maps/streets/style.json?key=fU3vlMsMn4Jb6dnEIFsx"
 }

docs/config.md

@@ -1,8 +1,12 @@
 # Configuration
 
-You can configure the app by copying `config.sample.json` to `config.json` and customising it. The possible options are
-described here. If you run into issues, please visit [#element-web:matrix.org](https://matrix.to/#/#element-web:matrix.org)
-on Matrix.
+You can configure the app by copying `config.sample.json` to `config.json` or `config.$domain.json` and customising it.
+Element will attempt to load first `config.$domain.json` and if it fails `config.json`. This mechanism allows different
+configuration options depending on if you're hitting e.g. `app1.example.com` or `app2.example.com`. Configs are not mixed
+in any way, it either entirely uses the domain config, or entirely uses `config.json`.
+
+The possible configuration options are described here. If you run into issues, please visit
+[#element-web:matrix.org](https://matrix.to/#/#element-web:matrix.org) on Matrix.
 
 For a good example of a production-tuned config, see https://app.element.io/config.json
 
@@ -243,8 +247,9 @@ When Element is deployed alongside a homeserver with SSO-only login, some option
 
 ## VoIP / Jitsi calls
 
-Currently, Element uses Jitsi to offer conference calls in rooms. A set of defaults are applied, pointing at our Jitsi instance,
-to ensure conference calling works, however you can point Element at your own Jitsi if you prefer.
+Currently, Element uses Jitsi to offer conference calls in rooms, with an experimental Element Call implementation in the works.
+A set of defaults are applied, pointing at our Jitsi and Element Call instances, to ensure conference calling works, however you
+can point Element at your own if you prefer.
 
 More information about the Jitsi setup can be found [here](./jitsi.md).
 
@@ -313,6 +318,15 @@ The VoIP and Jitsi options are:
    as defined by the `io.element.widgets.layout` state event.
 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:
+   - `url`: The URL of the Element Call instance to use for native group calls. This option is considered experimental
+      and may be removed at any time without notice. Defaults to `https://call.element.io`.
+   - `use_exclusively`: A boolean specifying whether Element Call should be used exclusively as the only VoIP stack in
+      the app, removing the ability to start legacy 1:1 calls or Jitsi calls. Defaults to `false`.
+   - `participant_limit`: The maximum number of users who can join a call; if
+     this number is exceeded, the user will not be able to join a given call.
+   - `brand`: Optional name for the app. Defaults to `Element Call`. This is
+     used throughout the application in various strings/locations.
 
 ## Bug reporting
 

docs/labs.md

@@ -158,16 +158,22 @@ Threads can be access by clicking their summary below the root event on the room
 
 This feature might work in degraded mode if the homeserver a user is connected to does not advertise support for the unstable feature `org.matrix.msc3440`  when calling the `/versions` API endpoint.
 
-## Right-click Message Context Menu (`feature_message_right_click_context_menu`)
-
-Enables showing a right-click context menu when right-clicking messages in the
-timeline. This menu shows options that can usually be found in the message
-action bar or in the message options.
-
 ## Video rooms (`feature_video_rooms`)
 
 Enables support for creating and joining video rooms, which are persistent video chats that users can jump in and out of.
 
+## Element Call video rooms (`feature_element_call_video_rooms`) [In Development]
+
+Enables support for video rooms that use Element Call rather than Jitsi, and causes the 'New video room' option to create Element Call video rooms rather than Jitsi ones.
+
+This flag will not have any effect unless `feature_video_rooms` is also enabled.
+
+## New group call experience (`feature_group_calls`) [In Development]
+
+This feature allows users to place and join native [MSC3401](https://github.com/matrix-org/matrix-spec-proposals/pull/3401) group calls in compatible rooms, using Element Call.
+
+If you're enabling this at the deployment level, you may also want to reference the docs for the `element_call` config section.
+
 ## Rich text in room topics (`feature_html_topic`) [In Development]
 
 Enables rendering of MD / HTML in room topics.

element.io/develop/config.json

@@ -58,5 +58,8 @@
         "feature_spotlight": true,
         "feature_video_rooms": true
     },
+    "element_call": {
+        "url": "https://element-call.netlify.app"
+    },
     "map_style_url": "https://api.maptiler.com/maps/streets/style.json?key=fU3vlMsMn4Jb6dnEIFsx"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "element-web",
-  "version": "1.11.3",
+  "version": "1.11.10",
   "description": "A feature-rich client for Matrix.org",
   "author": "New Vector Ltd.",
   "repository": {
@@ -60,15 +60,15 @@
     "browser-request": "^0.3.3",
     "gfm.css": "^1.1.2",
     "jsrsasign": "^10.5.25",
-    "katex": "^0.12.0",
-    "matrix-js-sdk": "19.3.0",
-    "matrix-react-sdk": "3.52.0",
-    "matrix-widget-api": "^0.1.0-beta.18",
+    "katex": "^0.16.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.1.1",
     "prop-types": "^15.7.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "sanitize-html": "^2.3.2",
-    "ua-parser-js": "^0.7.24"
+    "ua-parser-js": "^0.8.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
@@ -90,26 +90,27 @@
     "@principalstudio/html-webpack-inject-preload": "^1.2.7",
     "@sentry/webpack-plugin": "^1.18.1",
     "@svgr/webpack": "^5.5.0",
+    "@testing-library/react": "^12.1.5",
     "@types/flux": "^3.1.9",
-    "@types/jest": "^28.0.0",
+    "@types/jest": "^29.0.0",
     "@types/modernizr": "^3.5.3",
-    "@types/node": "^14.14.22",
-    "@types/react": "17.0.14",
-    "@types/react-dom": "17.0.9",
+    "@types/node": "^14.18.28",
+    "@types/react": "^17.0.49",
+    "@types/react-dom": "^17.0.17",
     "@types/sanitize-html": "^2.3.1",
     "@types/ua-parser-js": "^0.7.36",
     "@typescript-eslint/eslint-plugin": "^5.6.0",
     "@typescript-eslint/parser": "^5.6.0",
     "allchange": "^1.0.6",
-    "autoprefixer": "^9.8.6",
-    "babel-jest": "^28.0.0",
+    "autoprefixer": "^10.4.8",
+    "babel-jest": "^29.0.0",
     "babel-loader": "^8.2.2",
     "chokidar": "^3.5.1",
     "concurrently": "^5.3.0",
     "cpx": "^1.5.0",
     "css-loader": "^3.6.0",
-    "dotenv": "^10.0.0",
-    "eslint": "8.9.0",
+    "dotenv": "^16.0.2",
+    "eslint": "8.23.1",
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-deprecate": "^0.7.0",
     "eslint-plugin-import": "^2.25.4",
@@ -118,24 +119,28 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "fake-indexeddb": "^3.1.2",
+    "fetch-mock-jest": "^1.5.1",
     "file-loader": "^5.1.0",
     "fs-extra": "^0.30.0",
     "html-webpack-plugin": "^4.5.2",
-    "jest": "^28.0.0",
-    "jest-environment-jsdom": "^28.1.3",
+    "jest": "^29.0.0",
+    "jest-canvas-mock": "^2.3.0",
+    "jest-environment-jsdom": "^29.0.0",
+    "jest-mock": "^29.0.0",
     "jest-raw-loader": "^1.0.1",
     "jest-sonar-reporter": "^2.0.0",
     "json-loader": "^0.5.7",
     "loader-utils": "^1.4.0",
-    "matrix-mock-request": "^2.0.0",
+    "matrix-mock-request": "^2.5.0",
     "matrix-react-test-utils": "^0.2.3",
     "matrix-web-i18n": "^1.3.0",
-    "mini-css-extract-plugin": "^0.12.0",
+    "mini-css-extract-plugin": "^1",
     "minimist": "^1.2.6",
     "mkdirp": "^1.0.4",
     "modernizr": "^3.12.0",
     "node-fetch": "^2.6.7",
     "optimize-css-assets-webpack-plugin": "^5.0.4",
+    "postcss": "^8.4.16",
     "postcss-easings": "^2.0.0",
     "postcss-hexrgba": "2.0.1",
     "postcss-import": "^12.0.1",
@@ -143,7 +148,7 @@
     "postcss-mixins": "^6.2.3",
     "postcss-nested": "^4.2.3",
     "postcss-preset-env": "^6.7.0",
-    "postcss-scss": "^2.1.1",
+    "postcss-scss": "^4.0.4",
     "postcss-simple-vars": "^5.0.2",
     "raw-loader": "^4.0.2",
     "rimraf": "^3.0.2",
@@ -157,7 +162,7 @@
     "stylelint-scss": "^4.2.0",
     "terser-webpack-plugin": "^2.3.8",
     "ts-prune": "^0.10.3",
-    "typescript": "^4.7.4",
+    "typescript": "4.7.4",
     "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.2",
@@ -165,9 +170,6 @@
     "worklet-loader": "^2.0.0",
     "yaml": "^2.0.1"
   },
-  "resolutions": {
-    "@types/react": "17.0.14"
-  },
   "jest": {
     "testEnvironment": "jsdom",
     "testEnvironmentOptions": {
@@ -176,6 +178,9 @@
     "testMatch": [
       "<rootDir>/test/**/*-test.[tj]s?(x)"
     ],
+    "setupFiles": [
+      "jest-canvas-mock"
+    ],
     "setupFilesAfterEnv": [
       "<rootDir>/node_modules/matrix-react-sdk/test/setupTests.js"
     ],
@@ -184,7 +189,6 @@
       "\\.(gif|png|ttf|woff2)$": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/imageMock.js",
       "\\.svg$": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/svg.js",
       "\\$webapp/i18n/languages.json": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/languages.json",
-      "^browser-request$": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/browser-request.js",
       "^react$": "<rootDir>/node_modules/react",
       "^react-dom$": "<rootDir>/node_modules/react-dom",
       "^matrix-js-sdk$": "<rootDir>/node_modules/matrix-js-sdk/src",

release.sh

@@ -1,68 +1,9 @@
 #!/bin/bash
 #
 # Script to perform a release of element-web.
-#
-# Requires github-changelog-generator; to install, do
-#   pip install git+https://github.com/matrix-org/github-changelog-generator.git
 
 set -e
 
-orig_args=$@
+cd "$(dirname "$0")"
 
-# chomp any args starting with '-' as these need to go
-# through to the release script and otherwise we'll get
-# confused about what the version arg is.
-while [[ "$1" == -* ]]; do
-    shift
-done
-
-cd `dirname $0`
-
-for i in matrix-js-sdk matrix-react-sdk
-do
-    echo "Checking version of $i..."
-    depver=`cat package.json | jq -r .dependencies[\"$i\"]`
-    latestver=`yarn info -s $i dist-tags.next`
-    if [ "$depver" != "$latestver" ]
-    then
-        echo "The latest version of $i is $latestver but package.json depends on $depver."
-        echo -n "Type 'u' to auto-upgrade, 'c' to continue anyway, or 'a' to abort:"
-        read resp
-        if [ "$resp" != "u" ] && [ "$resp" != "c" ]
-        then
-            echo "Aborting."
-            exit 1
-        fi
-        if [ "$resp" == "u" ]
-        then
-            echo "Upgrading $i to $latestver..."
-            yarn add -E $i@$latestver
-            git add -u
-            git commit -m "Upgrade $i to $latestver"
-        fi
-    fi
-done
-
-./node_modules/matrix-js-sdk/release.sh -n "$orig_args"
-
-release="${1#v}"
-tag="v${release}"
-prerelease=0
-# We check if this build is a prerelease by looking to
-# see if the version has a hyphen in it. Crude,
-# but semver doesn't support postreleases so anything
-# with a hyphen is a prerelease.
-echo $release | grep -q '-' && prerelease=1
-
-if [ $prerelease -eq 0 ]
-then
-    # For a release, reset SDK deps back to the `develop` branch.
-    for i in matrix-js-sdk matrix-react-sdk
-    do
-        echo "Resetting $i to develop branch..."
-        yarn add github:matrix-org/$i#develop
-        git add -u
-        git commit -m "Reset $i back to develop branch"
-    done
-    git push origin develop
-fi
+./node_modules/matrix-js-sdk/release.sh "$@"

release_config.yaml

@@ -2,3 +2,5 @@ signing_id: releases@riot.im
 subprojects:
     matrix-react-sdk:
         includeByDefault: true
+    matrix-js-sdk:
+        includeByDefault: false

res/css/structures/ErrorView.pcss

@@ -36,10 +36,12 @@ limitations under the License.
         "Apple Color Emoji",
         "Segoe UI Emoji",
         "Segoe UI Symbol";
-    width: 100%;
-    min-height: 100%;
-    height: auto;
     color: #000;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    padding: 0 20px;
+    box-sizing: border-box;
 
     .mx_ErrorView_container {
         max-width: 680px;

scripts/docker-package.sh

@@ -7,8 +7,10 @@ DIST_VERSION=$(git describe --abbrev=0 --tags)
 
 DIR=$(dirname "$0")
 
-# If we're not using custom SDKs and on a branch other than master, generate a version akin go develop.element.io
-if [[ $USE_CUSTOM_SDKS == false ]] && [[ $BRANCH != 'master' ]]
+# If the branch comes out as HEAD then we're probably checked out to a tag, so if the thing is *not*
+# coming out as HEAD then we're on a branch. When we're on a branch, we want to resolve ourselves to
+# a few SHAs rather than a version.
+if [[ $BRANCH != HEAD && ! $BRANCH =~ heads/v.+ ]]
 then
     DIST_VERSION=$("$DIR"/get-version-from-git.sh)
 fi

scripts/fetch-develop.deps.sh

@@ -6,7 +6,7 @@
 # the branch the current checkout is on, use that branch. Otherwise,
 # use develop.
 
-set -ex
+set -x
 
 GIT_CLONE_ARGS=("$@")
 [ -z "$defbranch" ] && defbranch="develop"

scripts/genflags.sh

@@ -25,6 +25,8 @@
 # all phonenumber.js-supported country flags (as SVGs) into
 # PNGs that can be used by CountryDropdown.js.
 
+set -e
+
 # Allow CTRL+C to terminate the script
 trap "echo Exited!; exit;" SIGINT SIGTERM
 

scripts/get-version-from-git.sh

@@ -3,6 +3,8 @@
 # Echoes a version based on the git hashes of the element-web, react-sdk & js-sdk checkouts, for the case where
 # these dependencies are git checkouts.
 
+set -e
+
 # Since the deps are fetched from git, we can rev-parse
 REACT_SHA=$(git -C node_modules/matrix-react-sdk rev-parse --short=12 HEAD)
 JSSDK_SHA=$(git -C node_modules/matrix-js-sdk rev-parse --short=12 HEAD)

scripts/layered.sh

@@ -1,6 +1,6 @@
 #!/bin/bash
 
-set -x
+set -ex
 
 # Creates a layered environment with the full repo for the app and SDKs cloned
 # and linked. This gives an element-web dev environment ready to build with

scripts/make-icons.sh

@@ -12,8 +12,7 @@ then
     exit
 fi
 
-set -e
-set -x
+set -ex
 
 tmpdir=`mktemp -d 2>/dev/null || mktemp -d -t 'icontmp'`
 

scripts/normalize-version.sh

@@ -1,5 +1,7 @@
 #!/bin/bash
 
+set -e
+
 # If $1 looks like v1.2.3 or v1.2.3-foo, strip the leading v, then print it to stdout
 if [[ $1 =~ ^v[[:digit:]]+\.[[:digit:]]+\.[[:digit:]]+(-.+)?$ ]]; then
     echo ${1:1}

src/components/views/auth/VectorAuthHeaderLogo.tsx

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import * as React from 'react';
 import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
 
 export default class VectorAuthHeaderLogo extends React.PureComponent {

src/components/views/auth/VectorAuthPage.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { CSSProperties } from 'react';
+import * as React from 'react';
 import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
 
 import VectorAuthFooter from "./VectorAuthFooter";
@@ -47,12 +47,12 @@ export default class VectorAuthPage extends React.PureComponent {
             background: `center/cover fixed url(${VectorAuthPage.getWelcomeBackgroundUrl()})`,
         };
 
-        const modalStyle: CSSProperties = {
+        const modalStyle: React.CSSProperties = {
             position: 'relative',
             background: 'initial',
         };
 
-        const blurStyle: CSSProperties = {
+        const blurStyle: React.CSSProperties = {
             position: 'absolute',
             top: 0,
             right: 0,
@@ -62,7 +62,7 @@ export default class VectorAuthPage extends React.PureComponent {
             background: pageStyle.background,
         };
 
-        const modalContentStyle: CSSProperties = {
+        const modalContentStyle: React.CSSProperties = {
             display: 'flex',
             zIndex: 1,
             background: 'rgba(255, 255, 255, 0.59)',

src/favicon.ts

@@ -84,12 +84,19 @@ export default class Favicon {
         }
     }
 
-    private reset() {
+    private reset(): void {
         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
         this.context.drawImage(this.baseImage, 0, 0, this.canvas.width, this.canvas.height);
     }
 
-    private options(n: number | string, params: IParams) {
+    private options(n: number | string, params: IParams): {
+        n: string | number;
+        len: number;
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    } {
         const opt = {
             n: ((typeof n) === "number") ? Math.abs(n as number | 0) : n,
             len: ("" + n).length,
@@ -124,7 +131,7 @@ export default class Favicon {
         return opt;
     }
 
-    private circle(n: number | string, opts?: Partial<IParams>) {
+    private circle(n: number | string, opts?: Partial<IParams>): void {
         const params = { ...this.params, ...opts };
         const opt = this.options(n, params);
 
@@ -177,19 +184,19 @@ export default class Favicon {
         this.context.closePath();
     }
 
-    private ready() {
+    private ready(): void {
         if (this.isReady) return;
         this.isReady = true;
         this.readyCb?.();
     }
 
-    private setIcon(canvas) {
+    private setIcon(canvas: HTMLCanvasElement): void {
         setImmediate(() => {
             this.setIconSrc(canvas.toDataURL("image/png"));
         });
     }
 
-    private setIconSrc(url) {
+    private setIconSrc(url: string): void {
         // if is attached to fav icon
         if (this.browser.ff || this.browser.opera) {
             // for FF we need to "recreate" element, attach to dom and remove old <link>
@@ -200,9 +207,7 @@ export default class Favicon {
             newIcon.setAttribute("type", "image/png");
             window.document.getElementsByTagName("head")[0].appendChild(newIcon);
             newIcon.setAttribute("href", url);
-            if (old.parentNode) {
-                old.parentNode.removeChild(old);
-            }
+            old.parentNode?.removeChild(old);
         } else {
             this.icons.forEach(icon => {
                 icon.setAttribute("href", url);
@@ -210,7 +215,7 @@ export default class Favicon {
         }
     }
 
-    public badge(content: number | string, opts?: Partial<IParams>) {
+    public badge(content: number | string, opts?: Partial<IParams>): void {
         if (!this.isReady) {
             this.readyCb = () => {
                 this.badge(content, opts);
@@ -227,7 +232,7 @@ export default class Favicon {
         this.setIcon(this.canvas);
     }
 
-    private static getLinks() {
+    private static getLinks(): HTMLLinkElement[] {
         const icons: HTMLLinkElement[] = [];
         const links = window.document.getElementsByTagName("head")[0].getElementsByTagName("link");
         for (const link of links) {
@@ -238,7 +243,7 @@ export default class Favicon {
         return icons;
     }
 
-    private static getIcons() {
+    private static getIcons(): HTMLLinkElement[] {
         // get favicon link elements
         let elms = Favicon.getLinks();
         if (elms.length === 0) {

src/i18n/strings/de_DE.json

@@ -5,7 +5,7 @@
     "Sign In": "Anmelden",
     "Create Account": "Konto erstellen",
     "Explore rooms": "Räume erkunden",
-    "Unexpected error preparing the app. See console for details.": "Unerwarteter Fehler bei der Vorbereitung der App. Siehe in die Konsole für mehr Details.",
+    "Unexpected error preparing the app. See console for details.": "Unerwarteter Fehler bei der Vorbereitung der App; mehr Details in der Konsole.",
     "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "Ungültige Konfiguration: Es kann nur eine der Optionen default_server_config, default_server_name oder default_hs_url angegeben werden.",
     "Invalid configuration: no default server specified.": "Ungültige Konfiguration: Es wurde kein Standardserver angegeben.",
     "The message from the parser is: %(message)s": "Die Nachricht des Parsers ist: %(message)s",
@@ -21,7 +21,7 @@
     "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "Du kannst deinen aktuellen Browser weiterhin verwenden. Es ist aber möglich, dass nicht alles richtig funktioniert oder das Aussehen der App inkorrekt ist.",
     "I understand the risks and wish to continue": "Ich verstehe die Risiken und möchte fortfahren",
     "Your Element is misconfigured": "Dein Element ist falsch konfiguriert",
-    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Deine Elementkonfiguration enthält ungültiges JSON. Bitte korrigiere das Problem und lade die Seite neu.",
+    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Deine Element-Konfiguration enthält ungültiges JSON. Bitte korrigiere das Problem und lade die Seite neu.",
     "Download Completed": "Herunterladen fertiggestellt",
     "Open": "Öffnen",
     "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s verwendet erweiterte Browserfunktionen, die von deinem Browser nicht unterstützt werden.",

src/i18n/strings/en_EN.json

@@ -10,10 +10,10 @@
     "Download Completed": "Download Completed",
     "Open": "Open",
     "Dismiss": "Dismiss",
-    "%(brand)s Desktop (%(platformName)s)": "%(brand)s Desktop (%(platformName)s)",
+    "%(brand)s Desktop: %(platformName)s": "%(brand)s Desktop: %(platformName)s",
     "Go to your browser to complete Sign In": "Go to your browser to complete Sign In",
     "Unknown device": "Unknown device",
-    "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
+    "%(appName)s: %(browserName)s on %(osName)s": "%(appName)s: %(browserName)s on %(osName)s",
     "Powered by Matrix": "Powered by Matrix",
     "Use %(brand)s on mobile": "Use %(brand)s on mobile",
     "Unsupported browser": "Unsupported browser",

src/i18n/strings/hu.json

@@ -14,7 +14,7 @@
     "Unable to load config file: please refresh the page to try again.": "A konfigurációs fájlt nem sikerült betölteni: frissítse az oldalt és próbálja meg újra.",
     "%(brand)s Desktop (%(platformName)s)": "Asztali %(brand)s (%(platformName)s)",
     "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
-    "Unsupported browser": "A böngésző nem támogatott",
+    "Unsupported browser": "Nem támogatott böngésző",
     "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "A legjobb élmény érdékében telepítsen <chromeLink>Chrome-ot</chromeLink>, <firefoxLink>Firefoxot</firefoxLink> vagy <safariLink>Safarit</safariLink>.",
     "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "Folytathatja a jelenlegi böngészőjével, de néhány vagy az összes funkció használhatatlan lehet, vagy hibák lehetnek az alkalmazás kinézetében és viselkedésében.",
     "I understand the risks and wish to continue": "Megértettem a kockázatot és folytatom",
@@ -25,8 +25,8 @@
     "Your Element is misconfigured": "Az Element hibásan van beállítva",
     "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Az Element érvénytelen JSON-t tartalmazó konfigurációval rendelkezik. Javítsa és töltse újra az oldalt.",
     "Your browser can't run %(brand)s": "A böngészője nem tudja futtatni ezt: %(brand)s",
-    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s speciális böngészőfunkciókat használ, amelyeket a jelenlegi böngészője nem támogat.",
+    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "A(z) %(brand)s speciális böngészőfunkciókat használ, amelyeket a jelenlegi böngészője nem támogat.",
     "Powered by Matrix": "A gépházban: Matrix",
-    "Use %(brand)s on mobile": "Mobilon használd ezt: %(brand)s",
-    "Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo": "Elosztott, titkosított csevegés &amp; együttműködés ezzel: $matrixLogo"
+    "Use %(brand)s on mobile": "Mobilon használja ezt: %(brand)s",
+    "Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo": "Elosztott, titkosított csevegés és együttműködés ezzel: $matrixLogo"
 }

src/i18n/strings/id.json

@@ -1,21 +1,21 @@
 {
     "Dismiss": "Abaikan",
-    "Unknown device": "Perangkat tidak dikenal",
+    "Unknown device": "Perangkat tidak diketahui",
     "Welcome to Element": "Selamat datang di Element",
-    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Konfigurasi Element Anda berisi JSON yang tidak valid. Mohon perbaiki masalahnya dan muat ulang halamannya.",
-    "Invalid configuration: no default server specified.": "Konfigurasi tidak valid: server bawaan belum ditentukan.",
+    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Konfigurasi Element Anda berisi JSON yang tidak absah. Mohon perbaiki masalahnya dan muat ulang laman ini.",
+    "Invalid configuration: no default server specified.": "Konfigurasi tidak absah: server bawaan belum ditentukan.",
     "Explore rooms": "Jelajahi ruangan",
     "Create Account": "Buat Akun",
-    "Go to your browser to complete Sign In": "Buka browser Anda untuk menyelesaikan Sign In",
+    "Go to your browser to complete Sign In": "Buka peramban Anda untuk menyelesaikan Sign In",
     "Sign In": "Masuk",
     "Failed to start": "Gagal untuk memulai",
     "Go to element.io": "Buka element.io",
     "I understand the risks and wish to continue": "Saya memahami risikonya dan ingin melanjutkan",
-    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "Anda dapat lanjut menggunakan browser Anda saat ini, tetapi beberapa atau semua fitur mungkin tidak berfungsi dan tampilan serta nuansa aplikasi mungkin salah.",
-    "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "Mohon instal <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, atau <safariLink>Safari</safariLink> untuk pengalaman yang terbaik.",
-    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s menggunakan fitur browser lanjutan yang tidak didukung oleh browser Anda saat ini.",
-    "Your browser can't run %(brand)s": "Browser Anda tidak dapat menjalankan %(brand)s",
-    "Unsupported browser": "Browser tidak didukung",
+    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "Anda dapat melanjutkan menggunakan peramban Anda saat ini, tetapi beberapa atau semua fitur mungkin tidak berfungsi dan tampilan serta nuansa aplikasi mungkin tidak benar.",
+    "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "Silakan instal <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, atau <safariLink>Safari</safariLink> untuk pengalaman yang terbaik.",
+    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s menggunakan fitur peramban tingkat lanjut yang tidak didukung oleh peramban Anda saat ini.",
+    "Your browser can't run %(brand)s": "Peramban Anda tidak dapat menjalankan %(brand)s",
+    "Unsupported browser": "Peramban tidak didukung",
     "Use %(brand)s on mobile": "Gunakan %(brand)s di ponsel",
     "Powered by Matrix": "Diberdayakan oleh Matrix",
     "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
@@ -23,10 +23,10 @@
     "Open": "Buka",
     "Download Completed": "Unduhan Selesai",
     "Unexpected error preparing the app. See console for details.": "Kesalahan tak terduga saat menyiapkan aplikasi. Lihat konsol untuk detail.",
-    "Unable to load config file: please refresh the page to try again.": "Tidak dapat memuat file konfigurasi: mohon muat ulang halaman ini untuk mencoba lagi.",
-    "Invalid JSON": "JSON tidak valid",
+    "Unable to load config file: please refresh the page to try again.": "Tidak dapat memuat file konfigurasi: mohon muat ulang laman ini untuk mencoba lagi.",
+    "Invalid JSON": "JSON tidak absah",
     "The message from the parser is: %(message)s": "Pesan dari pengurai adalah: %(message)s",
-    "Your Element is misconfigured": "Anda mengatur Element dengan salah",
-    "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "Konfigurasi tidak valid: hanya bisa menentukan satu dari default_server_config, default_server_name, atau default_hs_url.",
-    "Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo": "Obrolan &amp; kolaborasi terdesentralisasi dan terenkripsi, diberdayakan oleh $matrixLogo"
+    "Your Element is misconfigured": "Anda salah mengatur Element",
+    "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "Konfigurasi tidak absah: hanya bisa menentukan satu dari default_server_config, default_server_name, atau default_hs_url.",
+    "Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo": "Obrolan &amp; kolaborasi terdesentralisasi dan terenkripsi diberdayakan oleh $matrixLogo"
 }

src/i18n/strings/lt.json

@@ -27,5 +27,6 @@
     "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s naudoja išplėstines naršyklės funkcijas, kurių jūsų dabartinė naršyklė nepalaiko.",
     "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "Geriausiam veikimui suinstaliuokite <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, arba <safariLink>Safari</safariLink>.",
     "Powered by Matrix": "Veikia su Matrix",
-    "Use %(brand)s on mobile": "Naudoti %(brand)s mobiliajame telefone"
+    "Use %(brand)s on mobile": "Naudoti %(brand)s mobiliajame telefone",
+    "Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo": "Decentralizuotas, užšifruotų pokalbių &amp; bendradarbiavimas, paremtas $matrixLogo"
 }

src/i18n/strings/lv.json

@@ -27,5 +27,6 @@
     "Your Element is misconfigured": "Jūsu Element ir nokonfigurēts kļūdaini",
     "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
     "%(brand)s Desktop (%(platformName)s)": "%(brand)s Galdvirsmas (%(platformName)s)",
-    "Use %(brand)s on mobile": "Mobilajā tālrunī izmanojiet %(brand)s"
+    "Use %(brand)s on mobile": "Mobilajā tālrunī izmanojiet %(brand)s",
+    "Decentralised, encrypted chat & collaboration powered by $matrixLogo": "Decentralizēta, šifrēta saziņa & sadarbība, ko nodrošina $matrixLogo"
 }

src/i18n/strings/pl.json

@@ -16,7 +16,7 @@
     "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
     "Unsupported browser": "Niewspierana przeglądarka",
     "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "Zainstaluj <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, lub <safariLink>Safari</safariLink> w celu zapewnienia najlepszego działania.",
-    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "Możesz kontynuować używanie obecnej przeglądarki, lecz niektóre lub wszystkie funkcje mogą nie działać oraz wygląd aplikacji może być niepoprawny.",
+    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "Możesz kontynuować używając obecnej przeglądarki, lecz niektóre lub wszystkie funkcje mogą nie działać oraz wygląd aplikacji może być niepoprawny.",
     "I understand the risks and wish to continue": "Rozumiem ryzyko i chcę kontynuować",
     "Go to element.io": "Przejdź do element.io",
     "Failed to start": "Nie udało się wystartować",
@@ -24,12 +24,12 @@
     "Open": "Otwórz",
     "Your browser can't run %(brand)s": "Twoja przeglądarka nie obsługuje %(brand)s",
     "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s używa zaawansowanych funkcji które nie są dostępne w obecnej przeglądarce.",
-    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Konfiguracja Elementa zawiera niepoprawny JSON. Popraw konfiguracje i odśwież stronę.",
-    "Your Element is misconfigured": "Element jest nieprawidłowo skonfigurowany",
+    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Twoja konfiguracja Elementa zawiera niepoprawny JSON. Rozwiąż problem i odśwież stronę.",
+    "Your Element is misconfigured": "Twój Element jest nieprawidłowo skonfigurowany",
     "Powered by Matrix": "Zasilane przez Matrix",
     "Use %(brand)s on mobile": "Użyj %(brand)s w telefonie",
     "Switch to space by number": "Przełącz na przestrzeń według numeru",
     "Next recently visited room or community": "Następne ostatnio odwiedzone pokoje i społeczności",
     "Previous recently visited room or community": "Ostatnio odwiedzone pokoje i społeczności",
-    "Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo": "Zdecentralizowany, szyfrowany czat i współpraca wspierana przez $matrixLogo"
+    "Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo": "Zdecentralizowany, szyfrowany czat i współpraca oparte na $matrixLogo"
 }

src/i18n/strings/ru.json

@@ -4,7 +4,7 @@
     "Welcome to Element": "Добро пожаловать в Element",
     "Sign In": "Войти",
     "Create Account": "Создать учётную запись",
-    "Explore rooms": "Список комнат",
+    "Explore rooms": "Обзор комнат",
     "Unexpected error preparing the app. See console for details.": "Неожиданная ошибка при подготовке приложения. Подробности см. в консоли.",
     "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "Неверная конфигурация: можно указывать только один из следующих параметров: default_server_config, default_server_name или default_hs_url.",
     "Invalid configuration: no default server specified.": "Неверная конфигурация: сервер по умолчанию не указан.",

src/i18n/strings/sl.json

@@ -26,5 +26,6 @@
     "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "Lahko nadaljujete z uporabo vašega trenutnega brskalnika, vendar lahko to privede do manjkajočih funkcionalnosti ali napačnega izgleda aplikacije.",
     "I understand the risks and wish to continue": "Razumem riziko in želim vseeno nadaljevati",
     "Go to element.io": "Pojdi na element.io",
-    "Failed to start": "Neuspel zagon"
+    "Failed to start": "Neuspel zagon",
+    "Use %(brand)s on mobile": "Uporabi %(brand)s na mobilni napravi"
 }

src/i18n/strings/te.json

@@ -8,5 +8,7 @@
     "Failed to start": "ప్రారంభించుటలో విఫలం",
     "Create Account": "ఖాతా తెరువు",
     "Open": "తెరువు",
-    "Download Completed": "దిగుమతి పూర్తయినది"
+    "Download Completed": "దిగుమతి పూర్తయినది",
+    "%(brand)s Desktop (%(platformName)s)": "%(brand)s డస్కటాప్ (%(platformName)s)",
+    "Unexpected error preparing the app. See console for details.": "ఆప్ ని తయారు చేసే ప్రక్రియాలో అనుకోని లోపం తలెత్తింది. మరిన్ని వివరాల కోసం కాన్సోల్ ను చూడండి."
 }

src/i18n/strings/uk.json

@@ -25,7 +25,7 @@
     "Go to your browser to complete Sign In": "Перейдіть у ваш браузер щоб завершити вхід",
     "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
     "Powered by Matrix": "Працює на Matrix",
-    "Your browser can't run %(brand)s": "Ваш переглядач неспроможний запустити %(brand)s",
+    "Your browser can't run %(brand)s": "Ваш браузер не може запустити %(brand)s",
     "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s використовує передові властивості, які ваш браузер не підтримує.",
     "Use %(brand)s on mobile": "Користуйтеся %(brand)s на мобільному",
     "Decentralised, encrypted chat & collaboration powered by $matrixLogo": "Децентралізована, зашифрована бесіда та співпраця на основі $matrixLogo"

src/vector/app.tsx

@@ -18,8 +18,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// To ensure we load the browser-request version
-import "matrix-js-sdk"; // eslint-disable-line no-restricted-imports
+// To ensure we load the browser-matrix version first
+import "matrix-js-sdk/src/browser-index";
 
 import React from 'react';
 import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg';

src/vector/getconfig.ts

@@ -14,8 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import request from 'browser-request';
-
 import type { IConfigOptions } from "matrix-react-sdk/src/IConfigOptions";
 
 // Load the config file. First try to load up a domain-specific config of the
@@ -32,44 +30,28 @@ export async function getVectorConfig(relativeLocation=''): Promise<IConfigOptio
         if (Object.keys(configJson).length === 0) {
             throw new Error(); // throw to enter the catch
         }
-        return configJson as IConfigOptions;
+        return configJson;
     } catch (e) {
-        return await generalConfigPromise as IConfigOptions;
+        return generalConfigPromise;
     }
 }
 
-function getConfig(configJsonFilename: string): Promise<{}> {
-    return new Promise(function(resolve, reject) {
-        request(
-            { method: "GET", url: configJsonFilename, qs: { cachebuster: Date.now() } },
-            (err, response, body) => {
-                try {
-                    if (err || response.status < 200 || response.status >= 300) {
-                        // Lack of a config isn't an error, we should
-                        // just use the defaults.
-                        // Also treat a blank config as no config, assuming
-                        // the status code is 0, because we don't get 404s
-                        // from file: URIs so this is the only way we can
-                        // not fail if the file doesn't exist when loading
-                        // from a file:// URI.
-                        if (response) {
-                            if (response.status == 404 || (response.status == 0 && body == '')) {
-                                resolve({});
-                            }
-                        }
-                        reject({ err: err, response: response });
-                        return;
-                    }
-
-                    // We parse the JSON ourselves rather than use the JSON
-                    // parameter, since this throws a parse error on empty
-                    // which breaks if there's no config.json and we're
-                    // loading from the filesystem (see above).
-                    resolve(JSON.parse(body));
-                } catch (e) {
-                    reject({ err: e });
-                }
-            },
-        );
+async function getConfig(configJsonFilename: string): Promise<IConfigOptions> {
+    const url = new URL(configJsonFilename, window.location.href);
+    url.searchParams.set("cachebuster", Date.now().toString());
+    const res = await fetch(url, {
+        cache: "no-cache",
+        method: "GET",
     });
+
+    if (res.status === 404 || res.status === 0) {
+        // Lack of a config isn't an error, we should just use the defaults.
+        // Also treat a blank config as no config, assuming the status code is 0, because we don't get 404s from file:
+        // URIs so this is the only way we can not fail if the file doesn't exist when loading from a file:// URI.
+        return {} as IConfigOptions;
+    }
+
+    if (res.ok) {
+        return res.json();
+    }
 }

src/vector/jitsi/index.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 New Vector Ltd.
+Copyright 2020-2022 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.
@@ -18,8 +18,11 @@ import { KJUR } from 'jsrsasign';
 import {
     IOpenIDCredentials,
     IWidgetApiRequest,
+    IWidgetApiRequestData,
+    IWidgetApiResponseData,
     VideoConferenceCapabilities,
     WidgetApi,
+    WidgetApiAction,
 } from "matrix-widget-api";
 import { ElementWidgetActions } from "matrix-react-sdk/src/stores/widgets/ElementWidgetActions";
 import { logger } from "matrix-js-sdk/src/logger";
@@ -58,9 +61,7 @@ let widgetApi: WidgetApi;
 let meetApi: any; // JitsiMeetExternalAPI
 let skipOurWelcomeScreen = false;
 
-const ack = (ev: CustomEvent<IWidgetApiRequest>) => widgetApi.transport.reply(ev.detail, {});
-
-(async function() {
+const setupCompleted = (async () => {
     try {
         // Queue a config.json lookup asap, so we can use it later on. We want this to be concurrent with
         // other setup work and therefore do not block.
@@ -90,24 +91,88 @@ const ack = (ev: CustomEvent<IWidgetApiRequest>) => widgetApi.transport.reply(ev
         }
 
         // Set this up as early as possible because Element will be hitting it almost immediately.
-        let readyPromise: Promise<[void, void]>;
+        let widgetApiReady: Promise<void>;
         if (parentUrl && widgetId) {
             const parentOrigin = new URL(qsParam('parentUrl')).origin;
             widgetApi = new WidgetApi(qsParam("widgetId"), parentOrigin);
+
+            widgetApiReady = new Promise<void>(resolve => widgetApi.once("ready", resolve));
             widgetApi.requestCapabilities(VideoConferenceCapabilities);
-            readyPromise = Promise.all([
-                new Promise<void>(resolve => {
-                    widgetApi.once(`action:${ElementWidgetActions.ClientReady}`, ev => {
-                        ev.preventDefault();
-                        resolve();
-                        widgetApi.transport.reply(ev.detail, {});
-                    });
-                }),
-                new Promise<void>(resolve => {
-                    widgetApi.once("ready", () => resolve());
-                }),
-            ]);
             widgetApi.start();
+
+            const handleAction = (
+                action: WidgetApiAction,
+                handler: (request: IWidgetApiRequestData) => void,
+            ): void => {
+                widgetApi.on(`action:${action}`, async (ev: CustomEvent<IWidgetApiRequest>) => {
+                    ev.preventDefault();
+                    await setupCompleted;
+
+                    let response: IWidgetApiResponseData;
+                    try {
+                        await handler(ev.detail.data);
+                        response = {};
+                    } catch (e) {
+                        if (e instanceof Error) {
+                            response = { error: { message: e.message } };
+                        } else {
+                            throw e;
+                        }
+                    }
+
+                    await widgetApi.transport.reply(ev.detail, response);
+                });
+            };
+
+            handleAction(ElementWidgetActions.JoinCall, async ({ audioInput, videoInput }) => {
+                joinConference(audioInput as string | null, videoInput as string | null);
+            });
+            handleAction(ElementWidgetActions.HangupCall, async ({ force }) => {
+                if (force === true) {
+                    meetApi?.dispose();
+                    notifyHangup();
+                    meetApi = null;
+                    closeConference();
+                } else {
+                    meetApi?.executeCommand('hangup');
+                }
+            });
+            handleAction(ElementWidgetActions.MuteAudio, async () => {
+                if (meetApi && !await meetApi.isAudioMuted()) {
+                    meetApi.executeCommand('toggleAudio');
+                }
+            });
+            handleAction(ElementWidgetActions.UnmuteAudio, async () => {
+                if (meetApi && await meetApi.isAudioMuted()) {
+                    meetApi.executeCommand('toggleAudio');
+                }
+            });
+            handleAction(ElementWidgetActions.MuteVideo, async () => {
+                if (meetApi && !await meetApi.isVideoMuted()) {
+                    meetApi.executeCommand('toggleVideo');
+                }
+            });
+            handleAction(ElementWidgetActions.UnmuteVideo, async () => {
+                if (meetApi && await meetApi.isVideoMuted()) {
+                    meetApi.executeCommand('toggleVideo');
+                }
+            });
+            handleAction(ElementWidgetActions.TileLayout, async () => {
+                meetApi?.executeCommand('setTileView', true);
+            });
+            handleAction(ElementWidgetActions.SpotlightLayout, async () => {
+                meetApi?.executeCommand('setTileView', false);
+            });
+            handleAction(ElementWidgetActions.StartLiveStream, async ({ rtmpStreamKey }) => {
+                if (!meetApi) throw new Error("Conference not joined");
+                meetApi.executeCommand('startRecording', {
+                    mode: 'stream',
+                    // this looks like it should be rtmpStreamKey but we may be on too old
+                    // a version of jitsi meet
+                    //rtmpStreamKey,
+                    youtubeStreamKey: rtmpStreamKey,
+                });
+            });
         } else {
             logger.warn("No parent URL or no widget ID - assuming no widget API is available");
         }
@@ -136,7 +201,7 @@ const ack = (ev: CustomEvent<IWidgetApiRequest>) => widgetApi.transport.reply(ev
         toggleConferenceVisibility(skipOurWelcomeScreen);
 
         if (widgetApi) {
-            await readyPromise;
+            await widgetApiReady;
 
             // See https://github.com/matrix-org/prosody-mod-auth-matrix-user-verification
             if (jitsiAuth === JITSI_OPENIDTOKEN_JWT_AUTH) {
@@ -144,99 +209,6 @@ const ack = (ev: CustomEvent<IWidgetApiRequest>) => widgetApi.transport.reply(ev
                 openIdToken = await widgetApi.requestOpenIDConnectToken();
                 logger.log("Got OpenID Connect token");
             }
-
-            widgetApi.on(`action:${ElementWidgetActions.JoinCall}`,
-                (ev: CustomEvent<IWidgetApiRequest>) => {
-                    ev.preventDefault();
-                    const { audioDevice, videoDevice } = ev.detail.data;
-                    joinConference(audioDevice as string | null, videoDevice as string | null);
-                    ack(ev);
-                },
-            );
-            widgetApi.on(`action:${ElementWidgetActions.HangupCall}`,
-                (ev: CustomEvent<IWidgetApiRequest>) => {
-                    ev.preventDefault();
-                    meetApi?.executeCommand('hangup');
-                    ack(ev);
-                },
-            );
-            widgetApi.on(`action:${ElementWidgetActions.ForceHangupCall}`,
-                (ev: CustomEvent<IWidgetApiRequest>) => {
-                    ev.preventDefault();
-                    meetApi?.dispose();
-                    notifyHangup();
-                    meetApi = null;
-                    closeConference();
-                    ack(ev);
-                },
-            );
-            widgetApi.on(`action:${ElementWidgetActions.MuteAudio}`,
-                async (ev: CustomEvent<IWidgetApiRequest>) => {
-                    ev.preventDefault();
-                    if (meetApi && !await meetApi.isAudioMuted()) {
-                        meetApi.executeCommand('toggleAudio');
-                    }
-                    ack(ev);
-                },
-            );
-            widgetApi.on(`action:${ElementWidgetActions.UnmuteAudio}`,
-                async (ev: CustomEvent<IWidgetApiRequest>) => {
-                    ev.preventDefault();
-                    if (meetApi && await meetApi.isAudioMuted()) {
-                        meetApi.executeCommand('toggleAudio');
-                    }
-                    ack(ev);
-                },
-            );
-            widgetApi.on(`action:${ElementWidgetActions.MuteVideo}`,
-                async (ev: CustomEvent<IWidgetApiRequest>) => {
-                    ev.preventDefault();
-                    if (meetApi && !await meetApi.isVideoMuted()) {
-                        meetApi.executeCommand('toggleVideo');
-                    }
-                    ack(ev);
-                },
-            );
-            widgetApi.on(`action:${ElementWidgetActions.UnmuteVideo}`,
-                async (ev: CustomEvent<IWidgetApiRequest>) => {
-                    ev.preventDefault();
-                    if (meetApi && await meetApi.isVideoMuted()) {
-                        meetApi.executeCommand('toggleVideo');
-                    }
-                    ack(ev);
-                },
-            );
-            widgetApi.on(`action:${ElementWidgetActions.TileLayout}`,
-                (ev: CustomEvent<IWidgetApiRequest>) => {
-                    ev.preventDefault();
-                    meetApi?.executeCommand('setTileView', true);
-                    ack(ev);
-                },
-            );
-            widgetApi.on(`action:${ElementWidgetActions.SpotlightLayout}`,
-                (ev: CustomEvent<IWidgetApiRequest>) => {
-                    ev.preventDefault();
-                    meetApi?.executeCommand('setTileView', false);
-                    ack(ev);
-                },
-            );
-            widgetApi.on(`action:${ElementWidgetActions.StartLiveStream}`,
-                (ev: CustomEvent<IWidgetApiRequest>) => {
-                    ev.preventDefault();
-                    if (meetApi) {
-                        meetApi.executeCommand('startRecording', {
-                            mode: 'stream',
-                            // this looks like it should be rtmpStreamKey but we may be on too old
-                            // a version of jitsi meet
-                            //rtmpStreamKey: ev.detail.data.rtmpStreamKey,
-                            youtubeStreamKey: ev.detail.data.rtmpStreamKey,
-                        });
-                        ack(ev);
-                    } else {
-                        widgetApi.transport.reply(ev.detail, { error: { message: "Conference not joined" } });
-                    }
-                },
-            );
         }
 
         // Now that everything should be set up, skip to the Jitsi splash screen if needed
@@ -245,13 +217,6 @@ const ack = (ev: CustomEvent<IWidgetApiRequest>) => widgetApi.transport.reply(ev
         }
 
         enableJoinButton(); // always enable the button
-
-        // Inform the client that we're ready to receive events
-        try {
-            await widgetApi?.transport.send(ElementWidgetActions.WidgetReady, {});
-        } catch (e) {
-            logger.error(e);
-        }
     } catch (e) {
         logger.error("Error setting up Jitsi widget", e);
         document.getElementById("widgetActionContainer").innerText = "Failed to load Jitsi widget";
@@ -346,11 +311,11 @@ function closeConference() {
 }
 
 // event handler bound in HTML
-// An audio device of undefined instructs Jitsi to start unmuted with whatever
-// audio device it can find, while a device of null instructs it to start muted,
-// and a non-nullish device specifies the label of a specific device to use.
-// Same for video devices.
-function joinConference(audioDevice?: string | null, videoDevice?: string | null) {
+// An audio input of undefined instructs Jitsi to start unmuted with whatever
+// audio input it can find, while an input of null instructs it to start muted,
+// and a non-nullish input specifies the label of a specific device to use.
+// Same for video inputs.
+function joinConference(audioInput?: string | null, videoInput?: string | null) {
     let jwt;
     if (jitsiAuth === JITSI_OPENIDTOKEN_JWT_AUTH) {
         if (!openIdToken?.access_token) { // eslint-disable-line camelcase
@@ -376,8 +341,8 @@ function joinConference(audioDevice?: string | null, videoDevice?: string | null
         parentNode: document.querySelector("#jitsiContainer"),
         roomName: conferenceId,
         devices: {
-            audioInput: audioDevice,
-            videoInput: videoDevice,
+            audioInput,
+            videoInput,
         },
         userInfo: {
             displayName,
@@ -392,8 +357,8 @@ function joinConference(audioDevice?: string | null, videoDevice?: string | null
         configOverwrite: {
             subject: roomName,
             startAudioOnly,
-            startWithAudioMuted: audioDevice === null,
-            startWithVideoMuted: videoDevice === null,
+            startWithAudioMuted: audioInput === null,
+            startWithVideoMuted: videoInput === null,
             // Request some log levels for inclusion in rageshakes
             // Ideally we would capture all possible log levels, but this can
             // cause Jitsi Meet to try to post various circular data structures

src/vector/platform/ElectronPlatform.tsx

@@ -45,7 +45,6 @@ import VectorBasePlatform from './VectorBasePlatform';
 import { SeshatIndexManager } from "./SeshatIndexManager";
 import { IPCManager } from "./IPCManager";
 
-const electron = window.electron;
 const isMac = navigator.platform.toUpperCase().includes('MAC');
 
 function platformFriendlyName(): string {
@@ -70,7 +69,7 @@ function platformFriendlyName(): string {
 function onAction(payload: ActionPayload): void {
     // Whitelist payload actions, no point sending most across
     if (['call_state'].includes(payload.action)) {
-        electron.send('app_onAction', payload);
+        window.electron.send('app_onAction', payload);
     }
 }
 
@@ -103,7 +102,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
             false if there is not
             or the error if one is encountered
          */
-        electron.on('check_updates', (event, status) => {
+        window.electron.on('check_updates', (event, status) => {
             dis.dispatch<CheckUpdatesPayload>({
                 action: Action.CheckUpdates,
                 ...getUpdateCheckStatus(status),
@@ -111,27 +110,27 @@ export default class ElectronPlatform extends VectorBasePlatform {
         });
 
         // try to flush the rageshake logs to indexeddb before quit.
-        electron.on('before-quit', function() {
+        window.electron.on('before-quit', function() {
             logger.log('element-desktop closing');
             rageshake.flush();
         });
 
-        electron.on('update-downloaded', this.onUpdateDownloaded);
+        window.electron.on('update-downloaded', this.onUpdateDownloaded);
 
-        electron.on('preferences', () => {
+        window.electron.on('preferences', () => {
             dis.fire(Action.ViewUserSettings);
         });
 
-        electron.on('userDownloadCompleted', (ev, { id, name }) => {
+        window.electron.on('userDownloadCompleted', (ev, { id, name }) => {
             const key = `DOWNLOAD_TOAST_${id}`;
 
             const onAccept = () => {
-                electron.send('userDownloadAction', { id, open: true });
+                window.electron.send('userDownloadAction', { id, open: true });
                 ToastStore.sharedInstance().dismissToast(key);
             };
 
             const onDismiss = () => {
-                electron.send('userDownloadAction', { id });
+                window.electron.send('userDownloadAction', { id });
             };
 
             ToastStore.sharedInstance().addOrReplaceToast({
@@ -187,7 +186,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
         if (this.notificationCount === count) return;
         super.setNotificationCount(count);
 
-        electron.send('setBadgeCount', count);
+        window.electron.send('setBadgeCount', count);
     }
 
     public supportsNotifications(): boolean {
@@ -233,7 +232,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
     }
 
     public loudNotification(ev: MatrixEvent, room: Room) {
-        electron.send('loudNotification');
+        window.electron.send('loudNotification');
     }
 
     public needsUrlTooltips(): boolean {
@@ -269,19 +268,19 @@ export default class ElectronPlatform extends VectorBasePlatform {
 
     public startUpdateCheck() {
         super.startUpdateCheck();
-        electron.send('check_updates');
+        window.electron.send('check_updates');
     }
 
     public installUpdate() {
         // IPC to the main process to install the update, since quitAndInstall
         // doesn't fire the before-quit event so the main process needs to know
         // it should exit.
-        electron.send('install_update');
+        window.electron.send('install_update');
     }
 
     public getDefaultDeviceDisplayName(): string {
         const brand = SdkConfig.get().brand;
-        return _t('%(brand)s Desktop (%(platformName)s)', {
+        return _t('%(brand)s Desktop: %(platformName)s', {
             brand,
             platformName: platformFriendlyName(),
         });

src/vector/platform/IPCManager.ts

@@ -19,8 +19,6 @@ import { logger } from "matrix-js-sdk/src/logger";
 
 import { ElectronChannel } from "../../@types/global";
 
-const electron = window.electron;
-
 interface IPCPayload {
     id?: number;
     error?: string;
@@ -35,7 +33,7 @@ export class IPCManager {
         private readonly sendChannel: ElectronChannel = "ipcCall",
         private readonly recvChannel: ElectronChannel = "ipcReply",
     ) {
-        electron.on(this.recvChannel, this.onIpcReply);
+        window.electron.on(this.recvChannel, this.onIpcReply);
     }
 
     public async call(name: string, ...args: any[]): Promise<any> {

src/vector/platform/WebPlatform.ts

@@ -17,7 +17,6 @@ limitations under the License.
 */
 
 import { UpdateCheckStatus, UpdateStatus } from "matrix-react-sdk/src/BasePlatform";
-import request from 'browser-request';
 import dis from 'matrix-react-sdk/src/dispatcher/dispatcher';
 import { _t } from 'matrix-react-sdk/src/languageHandler';
 import { hideToast as hideUpdateToast, showToast as showUpdateToast } from "matrix-react-sdk/src/toasts/UpdateToast";
@@ -87,31 +86,18 @@ export default class WebPlatform extends VectorBasePlatform {
         });
     }
 
-    private getMostRecentVersion(): Promise<string> {
-        // We add a cachebuster to the request to make sure that we know about
-        // the most recent version on the origin server. That might not
-        // actually be the version we'd get on a reload (particularly in the
-        // presence of intermediate caching proxies), but still: we're trying
-        // to tell the user that there is a new version.
-
-        return new Promise((resolve, reject) => {
-            request(
-                {
-                    method: "GET",
-                    url: "version",
-                    qs: { cachebuster: Date.now() },
-                },
-                (err, response, body) => {
-                    if (err || response.status < 200 || response.status >= 300) {
-                        if (err === null) err = { status: response.status };
-                        reject(err);
-                        return;
-                    }
-
-                    resolve(getNormalizedAppVersion(body.trim()));
-                },
-            );
+    private async getMostRecentVersion(): Promise<string> {
+        const res = await fetch("version", {
+            method: "GET",
+            cache: "no-cache",
         });
+
+        if (res.ok) {
+            const text = await res.text();
+            return getNormalizedAppVersion(text.trim());
+        }
+
+        return Promise.reject({ status: res.status });
     }
 
     public getAppVersion(): Promise<string> {
@@ -210,7 +196,7 @@ export default class WebPlatform extends VectorBasePlatform {
         let osName = ua.getOS().name || "unknown OS";
         // Stylise the value from the parser to match Apple's current branding.
         if (osName === "Mac OS") osName = "macOS";
-        return _t('%(appName)s (%(browserName)s, %(osName)s)', {
+        return _t('%(appName)s: %(browserName)s on %(osName)s', {
             appName,
             browserName,
             osName,

test/app-tests/loading-test.tsx

@@ -41,6 +41,7 @@ import { RoomView as RoomViewClass } from 'matrix-react-sdk/src/components/struc
 import LoginComponent from 'matrix-react-sdk/src/components/structures/auth/Login';
 import WelcomeComponent from "matrix-react-sdk/src/components/views/auth/Welcome";
 import EmbeddedPage from "matrix-react-sdk/src/components/structures/EmbeddedPage";
+import { AutoDiscovery } from 'matrix-js-sdk/src/matrix';
 
 const DEFAULT_HS_URL='http://my_server';
 const DEFAULT_IS_URL='http://my_is';
@@ -60,7 +61,7 @@ describe('loading:', function() {
 
     beforeEach(function() {
         httpBackend = new MockHttpBackend();
-        jssdk.request(httpBackend.requestFn);
+        window.fetch = httpBackend.fetchFn;
         parentDiv = document.createElement('div');
 
         // uncomment this to actually add the div to the UI, to help with
@@ -73,21 +74,25 @@ describe('loading:', function() {
 
     afterEach(async function() {
         console.log(`${Date.now()}: loading: afterEach`);
-        if (parentDiv) {
-            ReactDOM.unmountComponentAtNode(parentDiv);
-            parentDiv.remove();
-            parentDiv = null;
+        try {
+            if (matrixChat) {
+                ReactDOM.unmountComponentAtNode(parentDiv);
+                parentDiv.remove();
+                parentDiv = null;
+            }
+
+            // 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([
+                test_utils.deleteIndexedDB('matrix-js-sdk:crypto'),
+                test_utils.deleteIndexedDB('matrix-js-sdk:riot-web-sync'),
+            ]);
+            cleanLocalstorage();
+        } catch (e) {
+            console.error(e);
         }
-
-        // 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([
-            test_utils.deleteIndexedDB('matrix-js-sdk:crypto'),
-            test_utils.deleteIndexedDB('matrix-js-sdk:riot-web-sync'),
-        ]);
-        cleanLocalstorage();
         console.log(`${Date.now()}: loading: afterEach complete`);
     });
 
@@ -421,7 +426,6 @@ describe('loading:', function() {
 
     describe('Guest auto-registration:', function() {
         it('shows a welcome page by default', function() {
-
             loadApp();
 
             return sleep(1).then(() => {

test/unit-tests/__snapshots__/favicon-test.ts.snap

@@ -0,0 +1,431 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Favicon should clear a badge if called with a zero value 1`] = `
+[
+  {
+    "props": {
+      "height": 32,
+      "width": 32,
+      "x": 0,
+      "y": 0,
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "clearRect",
+  },
+  {
+    "props": {
+      "dHeight": 32,
+      "dWidth": 32,
+      "dx": 0,
+      "dy": 0,
+      "img": <img
+        height="32"
+        width="32"
+      />,
+      "sHeight": 32,
+      "sWidth": 32,
+      "sx": 0,
+      "sy": 0,
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "drawImage",
+  },
+  {
+    "props": {
+      "fillRule": "nonzero",
+      "path": [
+        {
+          "props": {},
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        {
+          "props": {
+            "x": 16.159999999999997,
+            "y": 12.8,
+          },
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        {
+          "props": {
+            "x": 22.4,
+            "y": 12.8,
+          },
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "lineTo",
+        },
+        {
+          "props": {
+            "x": 31.999999999999996,
+            "y": 22.4,
+          },
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "lineTo",
+        },
+        {
+          "props": {
+            "x": 9.92,
+            "y": 32,
+          },
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "lineTo",
+        },
+        {
+          "props": {
+            "x": 0.3200000000000003,
+            "y": 22.4,
+          },
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "lineTo",
+        },
+      ],
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fill",
+  },
+  {
+    "props": {
+      "path": [
+        {
+          "props": {},
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+      ],
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "stroke",
+  },
+  {
+    "props": {
+      "maxWidth": null,
+      "text": "123",
+      "x": 16,
+      "y": 29,
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillText",
+  },
+  {
+    "props": {
+      "height": 32,
+      "width": 32,
+      "x": 0,
+      "y": 0,
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "clearRect",
+  },
+  {
+    "props": {
+      "dHeight": 32,
+      "dWidth": 32,
+      "dx": 0,
+      "dy": 0,
+      "img": <img
+        height="32"
+        width="32"
+      />,
+      "sHeight": 32,
+      "sWidth": 32,
+      "sx": 0,
+      "sy": 0,
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "drawImage",
+  },
+]
+`;
+
+exports[`Favicon should draw a badge if called with a non-zero value 1`] = `
+[
+  {
+    "props": {
+      "height": 32,
+      "width": 32,
+      "x": 0,
+      "y": 0,
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "clearRect",
+  },
+  {
+    "props": {
+      "dHeight": 32,
+      "dWidth": 32,
+      "dx": 0,
+      "dy": 0,
+      "img": <img
+        height="32"
+        width="32"
+      />,
+      "sHeight": 32,
+      "sWidth": 32,
+      "sx": 0,
+      "sy": 0,
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "drawImage",
+  },
+  {
+    "props": {
+      "fillRule": "nonzero",
+      "path": [
+        {
+          "props": {},
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        {
+          "props": {
+            "x": 16.159999999999997,
+            "y": 12.8,
+          },
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        {
+          "props": {
+            "x": 22.4,
+            "y": 12.8,
+          },
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "lineTo",
+        },
+        {
+          "props": {
+            "x": 31.999999999999996,
+            "y": 22.4,
+          },
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "lineTo",
+        },
+        {
+          "props": {
+            "x": 9.92,
+            "y": 32,
+          },
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "lineTo",
+        },
+        {
+          "props": {
+            "x": 0.3200000000000003,
+            "y": 22.4,
+          },
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "lineTo",
+        },
+      ],
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fill",
+  },
+  {
+    "props": {
+      "path": [
+        {
+          "props": {},
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+      ],
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "stroke",
+  },
+  {
+    "props": {
+      "maxWidth": null,
+      "text": "123",
+      "x": 16,
+      "y": 29,
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillText",
+  },
+]
+`;

test/unit-tests/async-components/structures/ErrorView-test.tsx

@@ -0,0 +1,27 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+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 * as React from "react";
+import { render } from "@testing-library/react";
+
+import ErrorView from "../../../../src/async-components/structures/ErrorView";
+
+describe("<ErrorView />", () => {
+    it("should match snapshot", () => {
+        const { asFragment } = render(<ErrorView title="TITLE" messages={["MSG1", "MSG2"]} />);
+        expect(asFragment()).toMatchSnapshot();
+    });
+});

test/unit-tests/async-components/structures/__snapshots__/ErrorView-test.tsx.snap

@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ErrorView /> should match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_ErrorView"
+  >
+    <div
+      class="mx_ErrorView_container"
+    >
+      <div
+        class="mx_HomePage_header"
+      >
+        <span
+          class="mx_HomePage_logo"
+        >
+          <img
+            alt="Element"
+            height="42"
+            src="themes/element/img/logos/element-logo.svg"
+          />
+        </span>
+        <h1>
+          Failed to start
+        </h1>
+      </div>
+      <div
+        class="mx_HomePage_col"
+      >
+        <div
+          class="mx_HomePage_row"
+        >
+          <div>
+            <h2
+              id="step1_heading"
+            >
+              TITLE
+            </h2>
+            <p>
+              MSG1
+            </p>
+            <p>
+              MSG2
+            </p>
+          </div>
+        </div>
+      </div>
+      <div
+        class="mx_HomePage_row mx_Center mx_Spacer"
+      >
+        <p
+          class="mx_Spacer"
+        >
+          <a
+            class="mx_FooterLink"
+            href="https://element.io"
+            target="_blank"
+          >
+            Go to element.io
+          </a>
+        </p>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

test/unit-tests/components/views/auth/VectorAuthFooter-test.tsx

@@ -0,0 +1,27 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+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 * as React from "react";
+import { render } from "@testing-library/react";
+
+import VectorAuthFooter from "../../../../../src/components/views/auth/VectorAuthFooter";
+
+describe("<VectorAuthFooter />", () => {
+    it("should match snapshot", () => {
+        const { asFragment } = render(<VectorAuthFooter />);
+        expect(asFragment()).toMatchSnapshot();
+    });
+});

test/unit-tests/components/views/auth/VectorAuthHeaderLogo-test.tsx

@@ -0,0 +1,27 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+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 * as React from "react";
+import { render } from "@testing-library/react";
+
+import VectorAuthHeaderLogo from "../../../../../src/components/views/auth/VectorAuthHeaderLogo";
+
+describe("<VectorAuthHeaderLogo />", () => {
+    it("should match snapshot", () => {
+        const { asFragment } = render(<VectorAuthHeaderLogo />);
+        expect(asFragment()).toMatchSnapshot();
+    });
+});

test/unit-tests/components/views/auth/VectorAuthPage-test.tsx

@@ -0,0 +1,27 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+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 * as React from "react";
+import { render } from "@testing-library/react";
+
+import VectorAuthPage from "../../../../../src/components/views/auth/VectorAuthPage";
+
+describe("<VectorAuthPage />", () => {
+    it("should match snapshot", () => {
+        const { asFragment } = render(<VectorAuthPage />);
+        expect(asFragment()).toMatchSnapshot();
+    });
+});

test/unit-tests/components/views/auth/__snapshots__/VectorAuthFooter-test.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<VectorAuthFooter /> should match snapshot 1`] = `
+<DocumentFragment>
+  <footer
+    class="mx_AuthFooter"
+    role="contentinfo"
+  >
+    <a
+      href="https://element.io/blog"
+      rel="noreferrer noopener"
+      target="_blank"
+    >
+      Blog
+    </a>
+    <a
+      href="https://twitter.com/element_hq"
+      rel="noreferrer noopener"
+      target="_blank"
+    >
+      Twitter
+    </a>
+    <a
+      href="https://github.com/vector-im/element-web"
+      rel="noreferrer noopener"
+      target="_blank"
+    >
+      GitHub
+    </a>
+    <a
+      href="https://matrix.org"
+      rel="noreferrer noopener"
+      target="_blank"
+    >
+      Powered by Matrix
+    </a>
+  </footer>
+</DocumentFragment>
+`;

test/unit-tests/components/views/auth/__snapshots__/VectorAuthHeaderLogo-test.tsx.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<VectorAuthHeaderLogo /> should match snapshot 1`] = `
+<DocumentFragment>
+  <aside
+    class="mx_AuthHeaderLogo"
+  >
+    <img
+      alt="Element"
+      src="themes/element/img/logos/element-logo.svg"
+    />
+  </aside>
+</DocumentFragment>
+`;

test/unit-tests/components/views/auth/__snapshots__/VectorAuthPage-test.tsx.snap

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<VectorAuthPage /> should match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_AuthPage"
+  >
+    <div
+      class="mx_AuthPage_modal"
+      style="position: relative;"
+    >
+      <div
+        class="mx_AuthPage_modalBlur"
+        style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; filter: blur(40px);"
+      />
+      <div
+        class="mx_AuthPage_modalContent"
+        style="display: flex; z-index: 1; background: rgba(255, 255, 255, 0.59); border-radius: 8px;"
+      />
+    </div>
+    <footer
+      class="mx_AuthFooter"
+      role="contentinfo"
+    >
+      <a
+        href="https://element.io/blog"
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        Blog
+      </a>
+      <a
+        href="https://twitter.com/element_hq"
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        Twitter
+      </a>
+      <a
+        href="https://github.com/vector-im/element-web"
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        GitHub
+      </a>
+      <a
+        href="https://matrix.org"
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        Powered by Matrix
+      </a>
+    </footer>
+  </div>
+</DocumentFragment>
+`;

test/unit-tests/favicon-test.ts

@@ -0,0 +1,61 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+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 "jest-canvas-mock";
+
+import Favicon from "../../src/favicon";
+
+jest.useFakeTimers();
+
+describe("Favicon", () => {
+    beforeEach(() => {
+        const head = document.createElement("head");
+        window.document.documentElement.prepend(head);
+    });
+
+    it("should create a link element if one doesn't yet exist", () => {
+        const favicon = new Favicon();
+        expect(favicon).toBeTruthy();
+        const link = window.document.querySelector("link");
+        expect(link.rel).toContain("icon");
+    });
+
+    it("should draw a badge if called with a non-zero value", () => {
+        const favicon = new Favicon();
+        favicon.badge(123);
+        jest.runAllTimers();
+        expect(favicon["context"].__getDrawCalls()).toMatchSnapshot();
+    });
+
+    it("should clear a badge if called with a zero value", () => {
+        const favicon = new Favicon();
+        favicon.badge(123);
+        jest.runAllTimers();
+        favicon.badge(0);
+        expect(favicon["context"].__getDrawCalls()).toMatchSnapshot();
+    });
+
+    it("should recreate link element for firefox and opera", () => {
+        window["InstallTrigger"] = {};
+        window["opera"] = {};
+        const favicon = new Favicon();
+        const originalLink = window.document.querySelector("link");
+        favicon.badge(123);
+        jest.runAllTimers();
+        const newLink = window.document.querySelector("link");
+        expect(originalLink).not.toStrictEqual(newLink);
+    });
+});

test/unit-tests/vector/getconfig-test.ts

@@ -14,14 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import request from 'browser-request';
+import fetchMock from "fetch-mock-jest";
 
 import { getVectorConfig } from "../../../src/vector/getconfig";
 
-describe('getVectorConfig()', () => {
-    const setRequestMockImplementationOnce = (err?: unknown, response?: { status: number }, body?: string) =>
-            request.mockImplementationOnce((_opts, callback) => callback(err, response, body));
+fetchMock.config.overwriteRoutes = true;
 
+describe('getVectorConfig()', () => {
     const prevDocumentDomain = document.domain;
     const elementDomain = 'app.element.io';
     const now = 1234567890;
@@ -38,6 +37,7 @@ describe('getVectorConfig()', () => {
         // stable value for cachebuster
         jest.spyOn(Date, 'now').mockReturnValue(now);
         jest.clearAllMocks();
+        fetchMock.mockClear();
     });
 
     afterAll(() => {
@@ -46,85 +46,67 @@ describe('getVectorConfig()', () => {
     });
 
     it('requests specific config for document domain', async () => {
-        setRequestMockImplementationOnce(undefined, { status: 200 }, JSON.stringify(specificConfig))
-        setRequestMockImplementationOnce(undefined, { status: 200 }, JSON.stringify(generalConfig))
+        fetchMock.getOnce("express:/config.app.element.io.json", specificConfig);
+        fetchMock.getOnce("express:/config.json", generalConfig);
 
-        await getVectorConfig();
-
-        expect(request.mock.calls[0][0]).toEqual({ method: "GET", url: 'config.app.element.io.json', qs: { cachebuster: now } })
+        await expect(getVectorConfig()).resolves.toEqual(specificConfig);
     });
 
     it('adds trailing slash to relativeLocation when not an empty string', async () => {
-        setRequestMockImplementationOnce(undefined, { status: 200 }, JSON.stringify(specificConfig))
-        setRequestMockImplementationOnce(undefined, { status: 200 }, JSON.stringify(generalConfig))
+        fetchMock.getOnce("express:../config.app.element.io.json", specificConfig);
+        fetchMock.getOnce("express:../config.json", generalConfig);
 
-        await getVectorConfig('..');
-
-        expect(request.mock.calls[0][0]).toEqual(expect.objectContaining({ url: '../config.app.element.io.json' }))
-        expect(request.mock.calls[1][0]).toEqual(expect.objectContaining({ url: '../config.json' }))
-    });
-
-    it('returns parsed specific config when it is non-empty', async () => {
-        setRequestMockImplementationOnce(undefined, { status: 200 }, JSON.stringify(specificConfig))
-        setRequestMockImplementationOnce(undefined, { status: 200 }, JSON.stringify(generalConfig))
-
-        const result = await getVectorConfig();
-        expect(result).toEqual(specificConfig);
+        await expect(getVectorConfig("..")).resolves.toEqual(specificConfig);
     });
 
     it('returns general config when specific config succeeds but is empty', async () => {
-        setRequestMockImplementationOnce(undefined, { status: 200 }, JSON.stringify({}))
-        setRequestMockImplementationOnce(undefined, { status: 200 }, JSON.stringify(generalConfig))
+        fetchMock.getOnce("express:/config.app.element.io.json", {});
+        fetchMock.getOnce("express:/config.json", generalConfig);
 
-        const result = await getVectorConfig();
-        expect(result).toEqual(generalConfig);
+        await expect(getVectorConfig()).resolves.toEqual(generalConfig);
     });
 
     it('returns general config when specific config 404s', async () => {
-        setRequestMockImplementationOnce(undefined, { status: 404 })
-        setRequestMockImplementationOnce(undefined, { status: 200 }, JSON.stringify(generalConfig))
+        fetchMock.getOnce("express:/config.app.element.io.json", { status: 404 });
+        fetchMock.getOnce("express:/config.json", generalConfig);
 
-        const result = await getVectorConfig();
-        expect(result).toEqual(generalConfig);
+        await expect(getVectorConfig()).resolves.toEqual(generalConfig);
     });
 
     it('returns general config when specific config is fetched from a file and is empty', async () => {
-        setRequestMockImplementationOnce(undefined, { status: 0 }, '')
-        setRequestMockImplementationOnce(undefined, { status: 200 }, JSON.stringify(generalConfig))
+        fetchMock.getOnce("express:/config.app.element.io.json", 0);
+        fetchMock.getOnce("express:/config.json", generalConfig);
 
-        const result = await getVectorConfig();
-        expect(result).toEqual(generalConfig);
+        await expect(getVectorConfig()).resolves.toEqual(generalConfig);
     });
 
     it('returns general config when specific config returns a non-200 status', async () => {
-        setRequestMockImplementationOnce(undefined, { status: 401 })
-        setRequestMockImplementationOnce(undefined, { status: 200 }, JSON.stringify(generalConfig))
+        fetchMock.getOnce("express:/config.app.element.io.json", { status: 401 });
+        fetchMock.getOnce("express:/config.json", generalConfig);
 
-        const result = await getVectorConfig();
-        expect(result).toEqual(generalConfig);
+        await expect(getVectorConfig()).resolves.toEqual(generalConfig);
     });
 
     it('returns general config when specific config returns an error', async () => {
-        setRequestMockImplementationOnce('err1')
-        setRequestMockImplementationOnce(undefined, { status: 200 }, JSON.stringify(generalConfig))
+        fetchMock.getOnce("express:/config.app.element.io.json", { throws: "err1" });
+        fetchMock.getOnce("express:/config.json", generalConfig);
 
-        const result = await getVectorConfig();
-        expect(result).toEqual(generalConfig);
+        await expect(getVectorConfig()).resolves.toEqual(generalConfig);
     });
 
     it('rejects with an error when general config rejects', async () => {
-        setRequestMockImplementationOnce('err-specific');
-        setRequestMockImplementationOnce('err-general');
+        fetchMock.getOnce("express:/config.app.element.io.json", { throws: "err-specific" });
+        fetchMock.getOnce("express:/config.json", { throws: "err-general" });
 
-        await expect(() => getVectorConfig()).rejects.toEqual({"err": "err-general", "response": undefined});
+        await expect(getVectorConfig()).rejects.toBe("err-general");
     });
 
     it('rejects with an error when config is invalid JSON', async () => {
-        setRequestMockImplementationOnce('err-specific');
-        setRequestMockImplementationOnce(undefined, { status: 200 }, '{"invalid": "json",}');
+        fetchMock.getOnce("express:/config.app.element.io.json", { throws: "err-specific" });
+        fetchMock.getOnce("express:/config.json", '{"invalid": "json",}');
 
-        await expect(() => getVectorConfig()).rejects.toEqual({
-            err: new SyntaxError("Unexpected token } in JSON at position 19"),
-        });
+        // We can't assert it'll be a SyntaxError as node-fetch behaves differently
+        // https://github.com/wheresrhys/fetch-mock/issues/270
+        await expect(getVectorConfig()).rejects.toThrow("Unexpected token } in JSON at position 19");
     });
 });

test/unit-tests/vector/platform/ElectronPlatform-test.ts

@@ -0,0 +1,279 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+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 request from 'browser-request';
+import EventEmitter from 'events';
+import { logger } from 'matrix-js-sdk/src/logger';
+import { MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk/src/matrix';
+import { UpdateCheckStatus } from 'matrix-react-sdk/src/BasePlatform';
+import { Action } from 'matrix-react-sdk/src/dispatcher/actions';
+import dispatcher from 'matrix-react-sdk/src/dispatcher/dispatcher';
+import { MatrixClientPeg } from 'matrix-react-sdk/src/MatrixClientPeg';
+import * as rageshake from 'matrix-react-sdk/src/rageshake/rageshake';
+
+import ElectronPlatform from '../../../../src/vector/platform/ElectronPlatform';
+
+jest.mock('matrix-react-sdk/src/rageshake/rageshake', () => ({
+    flush: jest.fn()
+}))
+
+
+describe('ElectronPlatform', () => {
+    const defaultUserAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36';
+    const mockElectron = {
+        on: jest.fn(),
+        send: jest.fn()
+    };
+
+    const dispatchSpy = jest.spyOn(dispatcher, 'dispatch');
+    const dispatchFireSpy = jest.spyOn(dispatcher, 'fire');
+    const logSpy = jest.spyOn(logger, 'log').mockImplementation(() => {});
+
+    const userId = '@alice:server.org';
+    const deviceId = 'device-id';
+
+    window.electron = mockElectron;
+    beforeEach(() => {
+        window.electron = mockElectron;
+        jest.clearAllMocks();
+        delete window.navigator;
+        window.navigator = { userAgent: defaultUserAgent } as unknown as Navigator;
+    });
+
+    const getElectronEventHandlerCall = (eventType: string): [type: string, handler: Function] | undefined =>
+        mockElectron.on.mock.calls.find(([type]) => type === eventType);
+
+    it('flushes rageshake before quitting', () => {
+        new ElectronPlatform();
+            const [event, handler] = getElectronEventHandlerCall('before-quit');
+            // correct event bound
+            expect(event).toBeTruthy();
+
+            handler();
+
+            expect(logSpy).toHaveBeenCalled();
+            expect(rageshake.flush).toHaveBeenCalled();
+    });
+
+    it('dispatches view settings action on preferences event', () => {
+        new ElectronPlatform();
+            const [event, handler] = getElectronEventHandlerCall('preferences');
+            // correct event bound
+            expect(event).toBeTruthy();
+
+            handler();
+
+            expect(dispatchFireSpy).toHaveBeenCalledWith(Action.ViewUserSettings);
+    });
+
+    describe('updates', () => {
+        it('dispatches on check updates action', () => {
+            new ElectronPlatform();
+            const [event, handler] = getElectronEventHandlerCall('check_updates');
+            // correct event bound
+            expect(event).toBeTruthy();
+    
+            handler({}, true);
+            expect(dispatchSpy).toHaveBeenCalledWith({
+                action: Action.CheckUpdates,
+                status: UpdateCheckStatus.Downloading
+            })
+        });
+
+        it('dispatches on check updates action when update not available', () => {
+            new ElectronPlatform();
+            const [, handler] = getElectronEventHandlerCall('check_updates');
+    
+            handler({}, false);
+            expect(dispatchSpy).toHaveBeenCalledWith({
+                action: Action.CheckUpdates,
+                status: UpdateCheckStatus.NotAvailable
+            })
+        });
+
+        it('starts update check', () => {
+            const platform = new ElectronPlatform();
+            platform.startUpdateCheck();
+            expect(mockElectron.send).toHaveBeenCalledWith('check_updates')
+        });
+
+        it('installs update', () => {
+            const platform = new ElectronPlatform();
+            platform.installUpdate();
+            expect(mockElectron.send).toHaveBeenCalledWith('install_update')
+        });
+    });
+
+
+    it('returns human readable name', () => {
+        const platform = new ElectronPlatform();
+        expect(platform.getHumanReadableName()).toEqual('Electron Platform');
+    });
+
+    describe("getDefaultDeviceDisplayName", () => {
+        it.each([[
+            "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36",
+            "Element Desktop: macOS",
+        ],
+        [
+            "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) electron/1.0.0 Chrome/53.0.2785.113 Electron/1.4.3 Safari/537.36",
+            "Element Desktop: Windows",
+        ],
+        [
+            "Mozilla/5.0 (X11; Linux i686; rv:21.0) Gecko/20100101 Firefox/21.0",
+            "Element Desktop: Linux",
+        ],
+        [
+            "Mozilla/5.0 (X11; FreeBSD i686; rv:21.0) Gecko/20100101 Firefox/21.0",
+            "Element Desktop: FreeBSD",
+        ],
+        [
+            "Mozilla/5.0 (X11; OpenBSD i686; rv:21.0) Gecko/20100101 Firefox/21.0",
+            "Element Desktop: OpenBSD",
+        ],
+        [
+            "Mozilla/5.0 (X11; SunOS i686; rv:21.0) Gecko/20100101 Firefox/21.0",
+            "Element Desktop: SunOS",
+        ],
+        [
+            "custom user agent",
+            "Element Desktop: Unknown",
+        ],
+
+    ])("%s = %s", (userAgent, result) => {
+            delete window.navigator;
+            window.navigator = { userAgent } as unknown as Navigator;
+            const platform = new ElectronPlatform();
+            expect(platform.getDefaultDeviceDisplayName()).toEqual(result);
+        });
+    });
+
+    it('returns true for needsUrlTooltips', () => {
+        const platform = new ElectronPlatform();
+        expect(platform.needsUrlTooltips()).toBe(true);
+    });
+
+    it('should override browser shortcuts', () => {
+        const platform = new ElectronPlatform();
+        expect(platform.overrideBrowserShortcuts()).toBe(true);
+    });
+
+    it('allows overriding native context menus', () => {
+        const platform = new ElectronPlatform();
+        expect(platform.allowOverridingNativeContextMenus()).toBe(true);
+    });
+
+    it('indicates support for desktop capturer', () => {
+        const platform = new ElectronPlatform();
+        expect(platform.supportsDesktopCapturer()).toBe(true);
+    });
+
+    it('indicates no support for jitsi screensharing', () => {
+        const platform = new ElectronPlatform();
+        expect(platform.supportsJitsiScreensharing()).toBe(false);
+    });
+
+    describe('notifications', () => {
+        it('indicates support for notifications', () => {
+            const platform = new ElectronPlatform();
+            expect(platform.supportsNotifications()).toBe(true);
+        });
+
+        it('may send notifications', () => {
+            const platform = new ElectronPlatform();
+            expect(platform.maySendNotifications()).toBe(true);
+        });
+
+        it('pretends to request notification permission', async () => {
+            const platform = new ElectronPlatform();
+            const result = await platform.requestNotificationPermission();
+            expect(result).toEqual('granted');
+        });
+
+        it('creates a loud notification', async () => {
+            const platform = new ElectronPlatform();
+            platform.loudNotification(new MatrixEvent(), new Room('!room:server', {} as any, userId));
+            expect(mockElectron.send).toHaveBeenCalledWith('loudNotification');
+        });
+
+        it('sets notification count when count is changing', async () => {
+            const platform = new ElectronPlatform();
+            platform.setNotificationCount(0);
+            // not called because matches internal notificaiton count
+            expect(mockElectron.send).not.toHaveBeenCalledWith('setBadgeCount', 0);
+            platform.setNotificationCount(1);
+            expect(mockElectron.send).toHaveBeenCalledWith('setBadgeCount', 1);
+        });
+    });
+
+    describe('spellcheck', () => {
+        it('indicates support for spellcheck settings', () => {
+            const platform = new ElectronPlatform();
+            expect(platform.supportsSpellCheckSettings()).toBe(true);
+        });
+
+        it('gets available spellcheck languages', () => {
+            const platform = new ElectronPlatform();
+            mockElectron.send.mockClear();
+            platform.getAvailableSpellCheckLanguages();
+
+            const [channel, { name }] = mockElectron.send.mock.calls[0];
+            expect(channel).toEqual("ipcCall");
+            expect(name).toEqual('getAvailableSpellCheckLanguages')
+        });
+    });
+
+    describe('pickle key', () => {
+        it('makes correct ipc call to get pickle key', () => {
+            const platform = new ElectronPlatform();
+            mockElectron.send.mockClear();
+            platform.getPickleKey(userId, deviceId);
+
+            const [, { name, args }] = mockElectron.send.mock.calls[0];
+            expect(name).toEqual('getPickleKey')
+            expect(args).toEqual([userId, deviceId])
+        });
+
+        it('makes correct ipc call to create pickle key', () => {
+            const platform = new ElectronPlatform();
+            mockElectron.send.mockClear();
+            platform.createPickleKey(userId, deviceId);
+
+            const [, { name, args }] = mockElectron.send.mock.calls[0];
+            expect(name).toEqual('createPickleKey')
+            expect(args).toEqual([userId, deviceId])
+        });
+
+        it('makes correct ipc call to destroy pickle key', () => {
+            const platform = new ElectronPlatform();
+            mockElectron.send.mockClear();
+            platform.destroyPickleKey(userId, deviceId);
+
+            const [, { name, args }] = mockElectron.send.mock.calls[0];
+            expect(name).toEqual('destroyPickleKey')
+            expect(args).toEqual([userId, deviceId])
+        });
+    });
+
+    describe('versions', () => {
+        it('calls install update', () => {
+            const platform = new ElectronPlatform();
+            platform.installUpdate();
+
+            expect(mockElectron.send).toHaveBeenCalledWith('install_update');
+        });
+    });
+});

test/unit-tests/vector/platform/PWAPlatform-test.ts

@@ -14,7 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { mocked } from "jest-mock";
+
 import PWAPlatform from "../../../../src/vector/platform/PWAPlatform";
+import WebPlatform from "../../../../src/vector/platform/WebPlatform";
+
+jest.mock("../../../../src/vector/platform/WebPlatform");
 
 describe('PWAPlatform', () => {
     beforeEach(() => {
@@ -29,5 +34,29 @@ describe('PWAPlatform', () => {
             platform.setNotificationCount(123);
             expect(navigator.setAppBadge).toHaveBeenCalledWith(123);
         });
+
+        it("should no-op if the badge count isn't changing", () => {
+            navigator.setAppBadge = jest.fn().mockResolvedValue(undefined);
+            const platform = new PWAPlatform();
+            platform.setNotificationCount(123);
+            expect(navigator.setAppBadge).toHaveBeenCalledTimes(1);
+            platform.setNotificationCount(123);
+            expect(navigator.setAppBadge).toHaveBeenCalledTimes(1);
+        });
+
+        it("should fall back to WebPlatform::setNotificationCount if no Navigator::setAppBadge", () => {
+            navigator.setAppBadge = undefined;
+            const platform = new PWAPlatform();
+            const superMethod = mocked(WebPlatform.prototype.setNotificationCount);
+            expect(superMethod).not.toHaveBeenCalled();
+            platform.setNotificationCount(123);
+            expect(superMethod).toHaveBeenCalledWith(123);
+        });
+
+        it("should handle Navigator::setAppBadge rejecting gracefully", () => {
+            navigator.setAppBadge = jest.fn().mockRejectedValue(new Error);
+            const platform = new PWAPlatform();
+            expect(() => platform.setNotificationCount(123)).not.toThrow();
+        });
     });
 });

test/unit-tests/vector/platform/WebPlatform-test.ts

@@ -14,12 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import request from 'browser-request';
+import fetchMock from "fetch-mock-jest";
 import { UpdateCheckStatus } from 'matrix-react-sdk/src/BasePlatform';
 import { MatrixClientPeg } from 'matrix-react-sdk/src/MatrixClientPeg';
 
 import WebPlatform from '../../../../src/vector/platform/WebPlatform';
 
+fetchMock.config.overwriteRoutes = true;
+
 describe('WebPlatform', () => {
     beforeEach(() => {
         jest.clearAllMocks();
@@ -37,6 +39,45 @@ describe('WebPlatform', () => {
         expect(navigator.serviceWorker.register).toHaveBeenCalled();
     });
 
+    it("should call reload on window location object", () => {
+        delete window.location;
+        window.location = {
+            reload: jest.fn(),
+        } as unknown as Location;
+
+        const platform = new WebPlatform();
+        expect(window.location.reload).not.toHaveBeenCalled();
+        platform.reload();
+        expect(window.location.reload).toHaveBeenCalled();
+    });
+
+    it("should call reload to install update", () => {
+        delete window.location;
+        window.location = {
+            reload: jest.fn(),
+        } as unknown as Location;
+
+        const platform = new WebPlatform();
+        expect(window.location.reload).not.toHaveBeenCalled();
+        platform.installUpdate();
+        expect(window.location.reload).toHaveBeenCalled();
+    });
+
+    describe("getDefaultDeviceDisplayName", () => {
+        it.each([[
+            "https://develop.element.io/#/room/!foo:bar",
+            "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36",
+            "develop.element.io: Chrome on macOS",
+        ]])("%s & %s = %s", (url, userAgent, result) => {
+            delete window.navigator;
+            window.navigator = { userAgent } as unknown as Navigator;
+            delete window.location;
+            window.location = { href: url } as unknown as Location;
+            const platform = new WebPlatform();
+            expect(platform.getDefaultDeviceDisplayName()).toEqual(result);
+        });
+    });
+
     describe('notification support', () => {
         const mockNotification = {
             requestPermission: jest.fn(),
@@ -81,9 +122,6 @@ describe('WebPlatform', () => {
         const envVersion = process.env.VERSION;
         const prodVersion = '1.10.13';
 
-        const setRequestMockImplementation = (err?: unknown, response?: { status: number }, body?: string) =>
-            request.mockImplementation((_opts, callback) => callback(err, response, body));
-
         beforeEach(() => {
             jest.spyOn(MatrixClientPeg, 'userRegisteredWithinLastHours').mockReturnValue(false);
         })
@@ -118,7 +156,7 @@ describe('WebPlatform', () => {
         describe('pollForUpdate()', () => {
             it('should return not available and call showNoUpdate when current version matches most recent version', async () => {
                 process.env.VERSION = prodVersion;
-                setRequestMockImplementation(undefined, { status: 200}, prodVersion);
+                fetchMock.getOnce("/version", prodVersion);
                 const platform = new WebPlatform();
 
                 const showUpdate = jest.fn();
@@ -132,7 +170,7 @@ describe('WebPlatform', () => {
 
             it('should strip v prefix from versions before comparing', async () => {
                 process.env.VERSION = prodVersion;
-                setRequestMockImplementation(undefined, { status: 200}, `v${prodVersion}`);
+                fetchMock.getOnce("/version", `v${prodVersion}`);
                 const platform = new WebPlatform();
 
                 const showUpdate = jest.fn();
@@ -147,7 +185,7 @@ describe('WebPlatform', () => {
 
             it('should return ready and call showUpdate when current version differs from most recent version', async () => {
                 process.env.VERSION = '0.0.0'; // old version
-                setRequestMockImplementation(undefined, { status: 200}, prodVersion);
+                fetchMock.getOnce("/version", prodVersion);
                 const platform = new WebPlatform();
 
                 const showUpdate = jest.fn();
@@ -162,7 +200,7 @@ describe('WebPlatform', () => {
             it('should return ready without showing update when user registered in last 24', async () => {
                 process.env.VERSION = '0.0.0'; // old version
                 jest.spyOn(MatrixClientPeg, 'userRegisteredWithinLastHours').mockReturnValue(true);
-                setRequestMockImplementation(undefined, { status: 200}, prodVersion);
+                fetchMock.getOnce("/version", prodVersion);
                 const platform = new WebPlatform();
 
                 const showUpdate = jest.fn();
@@ -175,7 +213,7 @@ describe('WebPlatform', () => {
             });
 
             it('should return error when version check fails', async () => {
-                setRequestMockImplementation('oups');
+                fetchMock.getOnce("/version", { throws: "oups" });
                 const platform = new WebPlatform();
 
                 const showUpdate = jest.fn();

test/unit-tests/vector/routing-test.ts

@@ -0,0 +1,43 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+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 { onNewScreen } from "../../../src/vector/routing";
+
+describe("onNewScreen", () => {
+    it("should replace history if stripping via fields", () => {
+        delete window.location;
+        window.location = {
+            hash: "#/room/!room:server?via=abc",
+            replace: jest.fn(),
+            assign: jest.fn(),
+        } as unknown as Location;
+        onNewScreen("room/!room:server");
+        expect(window.location.assign).not.toHaveBeenCalled();
+        expect(window.location.replace).toHaveBeenCalled();
+    });
+
+    it("should not replace history if changing rooms", () => {
+        delete window.location;
+        window.location = {
+            hash: "#/room/!room1:server?via=abc",
+            replace: jest.fn(),
+            assign: jest.fn(),
+        } as unknown as Location;
+        onNewScreen("room/!room2:server");
+        expect(window.location.assign).toHaveBeenCalled();
+        expect(window.location.replace).not.toHaveBeenCalled();
+    });
+});

test/unit-tests/vector/url_utils-test.ts

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { parseQsFromFragment, parseQs } from "../../src/vector/url_utils";
+import { parseQsFromFragment, parseQs } from "../../../src/vector/url_utils";
 
 describe("url_utils.ts", function() {
     // @ts-ignore