Merge tag 'v3.30.0' into wreck/v3.30.0-wrecked

* Add bubble highlight styling ([\matrix-org#6582](matrix-org#6582)). Fixes element-hq/element-web#18295 and element-hq/element-web#18295. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* [Release] Add config option to turn on in-room event sending timing metrics  ([\matrix-org#6773](matrix-org#6773)).
* Create narrow mode for Composer ([\matrix-org#6682](matrix-org#6682)). Fixes element-hq/element-web#18533 and element-hq/element-web#18533.
* Prefer matrix.to alias links over room id in spaces & share ([\matrix-org#6745](matrix-org#6745)). Fixes element-hq/element-web#18796 and element-hq/element-web#18796.
* Stop automatic playback of voice messages if a non-voice message is encountered ([\matrix-org#6728](matrix-org#6728)). Fixes element-hq/element-web#18850 and element-hq/element-web#18850.
* Show call length during a call ([\matrix-org#6700](matrix-org#6700)). Fixes element-hq/element-web#18566 and element-hq/element-web#18566. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Serialize and retry mass-leave when leaving space ([\matrix-org#6737](matrix-org#6737)). Fixes element-hq/element-web#18789 and element-hq/element-web#18789.
* Improve form handling in and around space creation ([\matrix-org#6739](matrix-org#6739)). Fixes element-hq/element-web#18775 and element-hq/element-web#18775.
* Split autoplay GIFs and videos into different settings ([\matrix-org#6726](matrix-org#6726)). Fixes element-hq/element-web#5771 and element-hq/element-web#5771. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Add autoplay for voice messages ([\matrix-org#6710](matrix-org#6710)). Fixes element-hq/element-web#18804, element-hq/element-web#18715, element-hq/element-web#18714 element-hq/element-web#17961 and element-hq/element-web#18804.
* Allow to use basic html to format invite messages ([\matrix-org#6703](matrix-org#6703)). Fixes element-hq/element-web#15738 and element-hq/element-web#15738. Contributed by [skolmer](https://github.com/skolmer).
* Allow widgets, when eligible, to interact with more rooms as per MSC2762 ([\matrix-org#6684](matrix-org#6684)).
* Remove arbitrary limits from send/receive events for widgets ([\matrix-org#6719](matrix-org#6719)). Fixes element-hq/element-web#17994 and element-hq/element-web#17994.
* Reload suggested rooms if we see the state change down /sync ([\matrix-org#6715](matrix-org#6715)). Fixes element-hq/element-web#18761 and element-hq/element-web#18761.
* When creating private spaces, make the initial rooms restricted if supported ([\matrix-org#6721](matrix-org#6721)). Fixes element-hq/element-web#18722 and element-hq/element-web#18722.
* Threading exploration work ([\matrix-org#6658](matrix-org#6658)). Fixes element-hq/element-web#18532 and element-hq/element-web#18532.
* Default to `Don't leave any` when leaving a space ([\matrix-org#6697](matrix-org#6697)). Fixes element-hq/element-web#18592 and element-hq/element-web#18592. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Special case redaction event sending from widgets per MSC2762 ([\matrix-org#6686](matrix-org#6686)). Fixes element-hq/element-web#18573 and element-hq/element-web#18573.
* Add active speaker indicators ([\matrix-org#6639](matrix-org#6639)). Fixes element-hq/element-web#17627 and element-hq/element-web#17627. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Increase general app performance by optimizing layers ([\matrix-org#6644](matrix-org#6644)). Fixes element-hq/element-web#18730 and element-hq/element-web#18730. Contributed by [Palid](https://github.com/Palid).
* Fix autocomplete not having y-scroll ([\matrix-org#6802](matrix-org#6802)).
* Fix emoji picker and stickerpicker not appearing correctly when opened ([\matrix-org#6801](matrix-org#6801)).
* Debounce read marker update on scroll ([\matrix-org#6774](matrix-org#6774)).
* Fix Space creation wizard go to my first room button behaviour ([\matrix-org#6748](matrix-org#6748)). Fixes element-hq/element-web#18764 and element-hq/element-web#18764.
* Fix scroll being stuck at bottom ([\matrix-org#6751](matrix-org#6751)). Fixes element-hq/element-web#18903 and element-hq/element-web#18903.
* Fix widgets not remembering identity verification when asked to. ([\matrix-org#6742](matrix-org#6742)). Fixes element-hq/element-web#15631 and element-hq/element-web#15631.
* Add missing pluralisation i18n strings for Spaces ([\matrix-org#6738](matrix-org#6738)). Fixes element-hq/element-web#18780 and element-hq/element-web#18780.
* Make ForgotPassword UX slightly more user friendly ([\matrix-org#6636](matrix-org#6636)). Fixes element-hq/element-web#11531 and element-hq/element-web#11531. Contributed by [Palid](https://github.com/Palid).
* Don't context switch room on SpaceStore ready as it can break permalinks ([\matrix-org#6730](matrix-org#6730)). Fixes element-hq/element-web#17974 and element-hq/element-web#17974.
* Fix explore rooms button not working during space creation wizard ([\matrix-org#6729](matrix-org#6729)). Fixes element-hq/element-web#18762 and element-hq/element-web#18762.
* Fix bug where one party's media would sometimes not be shown ([\matrix-org#6731](matrix-org#6731)).
* Only make the initial space rooms suggested by default ([\matrix-org#6714](matrix-org#6714)). Fixes element-hq/element-web#18760 and element-hq/element-web#18760.
* Replace fake username in EventTilePreview with a proper loading state ([\matrix-org#6702](matrix-org#6702)). Fixes element-hq/element-web#15897 and element-hq/element-web#15897. Contributed by [skolmer](https://github.com/skolmer).
* Don't send prehistorical events to widgets during decryption at startup ([\matrix-org#6695](matrix-org#6695)). Fixes element-hq/element-web#18060 and element-hq/element-web#18060.
* When creating subspaces properly set restricted join rule ([\matrix-org#6725](matrix-org#6725)). Fixes element-hq/element-web#18797 and element-hq/element-web#18797.
* Fix the Image View not openning for some pinned messages ([\matrix-org#6723](matrix-org#6723)). Fixes element-hq/element-web#18422 and element-hq/element-web#18422. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Show autocomplete sections vertically ([\matrix-org#6722](matrix-org#6722)). Fixes element-hq/element-web#18860 and element-hq/element-web#18860. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Fix EmojiPicker filtering to lower case emojibase data strings ([\matrix-org#6717](matrix-org#6717)). Fixes element-hq/element-web#18686 and element-hq/element-web#18686.
* Clear currentRoomId when viewing home page, fixing document title ([\matrix-org#6716](matrix-org#6716)). Fixes element-hq/element-web#18668 and element-hq/element-web#18668.
* Fix membership updates to Spaces not applying in real-time ([\matrix-org#6713](matrix-org#6713)). Fixes element-hq/element-web#18737 and element-hq/element-web#18737.
* Don't show a double stacked invite modals when inviting to Spaces ([\matrix-org#6698](matrix-org#6698)). Fixes element-hq/element-web#18745 and element-hq/element-web#18745. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Remove non-functional DuckDuckGo Autocomplete Provider ([\matrix-org#6712](matrix-org#6712)). Fixes element-hq/element-web#18778 and element-hq/element-web#18778.
* Filter members on `MemberList` load ([\matrix-org#6708](matrix-org#6708)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Fix improper voice messages being produced in Firefox and sometimes other browsers. ([\matrix-org#6696](matrix-org#6696)). Fixes element-hq/element-web#18587 and element-hq/element-web#18587.
* Fix client forgetting which capabilities a widget was approved for ([\matrix-org#6685](matrix-org#6685)). Fixes element-hq/element-web#18786 and element-hq/element-web#18786.
* Fix left panel widgets not remembering collapsed state ([\matrix-org#6687](matrix-org#6687)). Fixes element-hq/element-web#17803 and element-hq/element-web#17803.
* Fix changelog link colour back to blue ([\matrix-org#6692](matrix-org#6692)). Fixes element-hq/element-web#18726 and element-hq/element-web#18726.
* Soften codeblock border color ([\matrix-org#6564](matrix-org#6564)). Fixes element-hq/element-web#18367 and element-hq/element-web#18367. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Pause ringing more aggressively ([\matrix-org#6691](matrix-org#6691)). Fixes element-hq/element-web#18588 and element-hq/element-web#18588. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Fix command autocomplete ([\matrix-org#6680](matrix-org#6680)). Fixes element-hq/element-web#18670 and element-hq/element-web#18670. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Don't re-sort the room-list based on profile/status changes ([\matrix-org#6595](matrix-org#6595)). Fixes vector-im/element-web#110 and vector-im/element-web#110. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Fix codeblock formatting with syntax highlighting on ([\matrix-org#6681](matrix-org#6681)). Fixes element-hq/element-web#18739 element-hq/element-web#18365 and element-hq/element-web#18739. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Add padding to the Add button in the notification settings ([\matrix-org#6665](matrix-org#6665)). Fixes element-hq/element-web#18706 and element-hq/element-web#18706. Contributed by [SimonBrandner](https://github.com/SimonBrandner).

.eslintrc.js

@@ -63,6 +63,11 @@ module.exports = {
             "@typescript-eslint/ban-ts-comment": "off",
         },
     }],
+    settings: {
+        react: {
+            version: "detect",
+        }
+    }
 };
 
 function buildRestrictedPropertiesOptions(properties, message) {

.github/workflows/develop.yml

@@ -10,6 +10,8 @@ on:
 jobs:
     end-to-end:
         runs-on: ubuntu-latest
+        env: 
+          PR_NUMBER: ${{github.event.number}}
         container: vectorim/element-web-ci-e2etests-env:latest
         steps:
             - name: Checkout code

.stylelintrc.js

@@ -17,6 +17,7 @@ module.exports = {
         "selector-list-comma-newline-after": null,
         "at-rule-no-unknown": null,
         "no-descending-specificity": null,
+        "no-empty-first-line": true,
         "scss/at-rule-no-unknown": [true, {
             // https://github.com/vector-im/element-web/issues/10544
             "ignoreAtRules": ["define-mixin"],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "3.29.1",
+  "version": "3.30.0",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -82,8 +82,8 @@
     "katex": "^0.12.0",
     "linkifyjs": "^2.1.9",
     "lodash": "^4.17.20",
-    "matrix-js-sdk": "12.4.1",
-    "matrix-widget-api": "^0.1.0-beta.15",
+    "matrix-js-sdk": "12.5.0",
+    "matrix-widget-api": "^0.1.0-beta.16",
     "minimist": "^1.2.5",
     "opus-recorder": "^8.0.3",
     "pako": "^2.0.3",
@@ -151,7 +151,7 @@
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
-    "allchange": "^1.0.0",
+    "allchange": "^1.0.3",
     "babel-jest": "^26.6.3",
     "chokidar": "^3.5.1",
     "concurrently": "^5.3.0",

res/css/_common.scss

@@ -53,8 +53,8 @@ html {
 body {
     font-family: $font-family;
     font-size: $font-15px;
-    background-color: $primary-bg-color;
-    color: $primary-fg-color;
+    background-color: $background;
+    color: $primary-content;
     border: 0px;
     margin: 0px;
 
@@ -89,7 +89,7 @@ b {
 }
 
 h2 {
-    color: $primary-fg-color;
+    color: $primary-content;
     font-weight: 400;
     font-size: $font-18px;
     margin-top: 16px;
@@ -142,12 +142,12 @@ textarea::placeholder {
 
 input[type=text], input[type=password], textarea {
     background-color: transparent;
-    color: $primary-fg-color;
+    color: $primary-content;
 }
 
 /* Required by Firefox */
 textarea {
-    color: $primary-fg-color;
+    color: $primary-content;
 }
 
 input[type=text]:focus, input[type=password]:focus, textarea:focus {
@@ -173,7 +173,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     .mx_textinput > input[type=search] {
         border: none;
         flex: 1;
-        color: $primary-fg-color;
+        color: $primary-content;
     }
 
     :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
@@ -184,7 +184,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
         background-color: transparent;
         color: $input-darker-fg-color;
         border-radius: 4px;
-        border: 1px solid rgba($primary-fg-color, .1);
+        border: 1px solid rgba($primary-content, .1);
         // these things should probably not be defined globally
         margin: 9px;
     }
@@ -209,7 +209,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
     .mx_textinput {
         color: $input-darker-fg-color;
-        background-color: $primary-bg-color;
+        background-color: $background;
         border: none;
     }
 }
@@ -271,7 +271,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 }
 
 .mx_Dialog {
-    background-color: $primary-bg-color;
+    background-color: $background;
     color: $light-fg-color;
     z-index: 4012;
     font-weight: 300;
@@ -379,13 +379,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 .mx_Dialog_content {
     margin: 24px 0 68px;
     font-size: $font-14px;
-    color: $primary-fg-color;
+    color: $primary-content;
     word-wrap: break-word;
-
-    a {
-        color: $accent-color;
-        cursor: pointer;
-    }
 }
 
 .mx_Dialog_buttons {
@@ -493,8 +488,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     border-radius: 3px;
     border: 1px solid $input-border-color;
     padding: 9px;
-    color: $primary-fg-color;
-    background-color: $primary-bg-color;
+    color: $primary-content;
+    background-color: $background;
 }
 
 .mx_textButton {

res/css/_components.scss

@@ -132,6 +132,7 @@
 @import "./views/elements/_EditableItemList.scss";
 @import "./views/elements/_ErrorBoundary.scss";
 @import "./views/elements/_EventListSummary.scss";
+@import "./views/elements/_EventTilePreview.scss";
 @import "./views/elements/_FacePile.scss";
 @import "./views/elements/_Field.scss";
 @import "./views/elements/_ImageView.scss";

res/css/structures/_ContextualMenu.scss

@@ -34,7 +34,7 @@ limitations under the License.
     border-radius: 8px;
     box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
     background-color: $menu-bg-color;
-    color: $primary-fg-color;
+    color: $primary-content;
     position: absolute;
     font-size: $font-14px;
     z-index: 5001;

res/css/structures/_CreateRoom.scss

@@ -18,7 +18,7 @@ limitations under the License.
     width: 960px;
     margin-left: auto;
     margin-right: auto;
-    color: $primary-fg-color;
+    color: $primary-content;
 }
 
 .mx_CreateRoom input,

res/css/structures/_GroupFilterPanel.scss

@@ -92,13 +92,13 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
 }
 
 .mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype {
-    background-color: $primary-bg-color;
+    background-color: $background;
     border-radius: 6px;
 }
 
 .mx_TagTile_selected_prototype {
     .mx_TagTile_homeIcon::before {
-        background-color: $primary-fg-color; // dark-on-light
+        background-color: $primary-content; // dark-on-light
     }
 }
 

res/css/structures/_GroupView.scss

@@ -132,7 +132,7 @@ limitations under the License.
     width: 100%;
     height: 31px;
     overflow: hidden;
-    color: $primary-fg-color;
+    color: $primary-content;
     font-weight: bold;
     font-size: $font-22px;
     padding-left: 19px;
@@ -397,7 +397,7 @@ limitations under the License.
         mask-position: center;
         mask-size: contain;
         mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
-        background-color: $secondary-fg-color;
+        background-color: $secondary-content;
     }
 
     .mx_AccessibleButton_kind_link {
@@ -422,7 +422,7 @@ limitations under the License.
             mask-position: center;
             mask-size: 8px;
             mask-image: url('$(res)/img/image-view/close.svg');
-            background-color: $secondary-fg-color;
+            background-color: $secondary-content;
         }
     }
 }

res/css/structures/_LeftPanel.scss

@@ -146,7 +146,7 @@ $roomListCollapsedWidth: 68px;
                     mask-position: center;
                     mask-size: contain;
                     mask-repeat: no-repeat;
-                    background: $secondary-fg-color;
+                    background: $secondary-content;
                 }
             }
 
@@ -169,7 +169,7 @@ $roomListCollapsedWidth: 68px;
                     mask-position: center;
                     mask-size: contain;
                     mask-repeat: no-repeat;
-                    background: $secondary-fg-color;
+                    background: $secondary-content;
                 }
 
                 &.mx_LeftPanel_exploreButton_space::before {

res/css/structures/_LeftPanelWidget.scss

@@ -113,7 +113,7 @@ limitations under the License.
 
     &:hover .mx_LeftPanelWidget_resizerHandle {
         opacity: 0.8;
-        background-color: $primary-fg-color;
+        background-color: $primary-content;
     }
 
     .mx_LeftPanelWidget_maximizeButton {

res/css/structures/_MainSplit.scss

@@ -38,7 +38,7 @@ limitations under the License.
         width: 4px !important;
         border-radius: 4px !important;
 
-        background-color: $primary-fg-color;
+        background-color: $primary-content;
         opacity: 0.8;
     }
 }

res/css/structures/_MatrixChat.scss

@@ -64,7 +64,7 @@ limitations under the License.
 
 /* not the left panel, and not the resize handle, so the roomview/groupview/... */
 .mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_wrapper) {
-    background-color: $primary-bg-color;
+    background-color: $background;
 
     flex: 1 1 0;
     min-width: 0;
@@ -91,7 +91,7 @@ limitations under the License.
 
         content: ' ';
 
-        background-color: $primary-fg-color;
+        background-color: $primary-content;
         opacity: 0.8;
     }
 }

res/css/structures/_NotificationPanel.scss

@@ -49,7 +49,7 @@ limitations under the License.
         bottom: 0;
         left: 0;
         right: 0;
-        background-color: $tertiary-fg-color;
+        background-color: $tertiary-content;
         height: 1px;
         opacity: 0.4;
         content: '';
@@ -70,7 +70,7 @@ limitations under the License.
 }
 
 .mx_NotificationPanel .mx_EventTile_roomName a {
-    color: $primary-fg-color;
+    color: $primary-content;
 }
 
 .mx_NotificationPanel .mx_EventTile_avatar {
@@ -79,7 +79,7 @@ limitations under the License.
 
 .mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
 .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
-    color: $primary-fg-color;
+    color: $primary-content;
     font-size: $font-12px;
     display: inline;
 }
@@ -118,7 +118,7 @@ limitations under the License.
 }
 
 .mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
-    background-color: $primary-bg-color;
+    background-color: $background;
 }
 
 .mx_NotificationPanel .mx_EventTile_content {

res/css/structures/_RightPanel.scss

@@ -43,7 +43,7 @@ limitations under the License.
 .mx_RightPanel_headerButtonGroup {
     height: 100%;
     display: flex;
-    background-color: $primary-bg-color;
+    background-color: $background;
     padding: 0 9px;
     align-items: center;
 }

res/css/structures/_RoomDirectory.scss

@@ -28,7 +28,7 @@ limitations under the License.
 
 .mx_RoomDirectory {
     margin-bottom: 12px;
-    color: $primary-fg-color;
+    color: $primary-content;
     word-break: break-word;
     display: flex;
     flex-direction: column;
@@ -71,14 +71,14 @@ limitations under the License.
             font-weight: $font-semi-bold;
             font-size: $font-15px;
             line-height: $font-18px;
-            color: $primary-fg-color;
+            color: $primary-content;
         }
 
         > p {
             margin: 40px auto 60px;
             font-size: $font-14px;
             line-height: $font-20px;
-            color: $secondary-fg-color;
+            color: $secondary-content;
             max-width: 464px; // easier reading
         }
 
@@ -97,7 +97,7 @@ limitations under the License.
 }
 
 .mx_RoomDirectory_table {
-    color: $primary-fg-color;
+    color: $primary-content;
     display: grid;
     font-size: $font-12px;
     grid-template-columns: max-content auto max-content max-content max-content;