Merge tag 'v3.34.0' into sc

* Improve the look of tooltips ([\matrix-org#7049](matrix-org#7049)). Contributed by @SimonBrandner.
* Improve the look of the spinner ([\matrix-org#6083](matrix-org#6083)). Contributed by @SimonBrandner.
* Polls: Creation form & start event ([\matrix-org#7001](matrix-org#7001)).
* Show a gray shield when encrypted by deleted session ([\matrix-org#6119](matrix-org#6119)). Contributed by @SimonBrandner.
* Silence some widgets for better screen reader presentation. ([\matrix-org#7057](matrix-org#7057)). Contributed by @ndarilek.
* Make message separator more accessible. ([\matrix-org#7056](matrix-org#7056)). Contributed by @ndarilek.
* Give each room directory entry the `listitem` role to correspond with the containing `list`. ([\matrix-org#7035](matrix-org#7035)). Contributed by @ndarilek.
* Implement RequiresClient capability for widgets ([\matrix-org#7005](matrix-org#7005)). Fixes element-hq/element-web#15744 and element-hq/element-web#15744.
* Respect the system high contrast setting when using system theme ([\matrix-org#7043](matrix-org#7043)).
* Remove redundant duplicate mimetype field which doesn't conform to spec ([\matrix-org#7045](matrix-org#7045)). Fixes element-hq/element-web#17145 and element-hq/element-web#17145.
* Make join button on space hierarchy action in the background ([\matrix-org#7041](matrix-org#7041)). Fixes element-hq/element-web#17388 and element-hq/element-web#17388.
* Add a high contrast theme (a variant of the light theme) ([\matrix-org#7036](matrix-org#7036)).
* Improve timeline message for restricted join rule changes ([\matrix-org#6984](matrix-org#6984)). Fixes element-hq/element-web#18980 and element-hq/element-web#18980.
* Improve the appearance of the font size slider ([\matrix-org#7038](matrix-org#7038)).
* Improve RovingTabIndex & Room List filtering performance ([\matrix-org#6987](matrix-org#6987)). Fixes element-hq/element-web#17864 and element-hq/element-web#17864.
* Remove outdated Spaces restricted rooms warning ([\matrix-org#6927](matrix-org#6927)).
* Make /msg <message> param optional for more flexibility ([\matrix-org#7028](matrix-org#7028)). Fixes element-hq/element-web#19481 and element-hq/element-web#19481.
* Add decoration to space hierarchy for tiles which have already been j… ([\matrix-org#6969](matrix-org#6969)). Fixes element-hq/element-web#18755 and element-hq/element-web#18755.
* Add insert link button to the format bar ([\matrix-org#5879](matrix-org#5879)). Contributed by @SimonBrandner.
* Improve visibility of font size chooser ([\matrix-org#6988](matrix-org#6988)).
* Soften border-radius on selected/hovered messages ([\matrix-org#6525](matrix-org#6525)). Fixes element-hq/element-web#18108. Contributed by @SimonBrandner.
* Add a developer mode flag and use it for accessing space timelines ([\matrix-org#6994](matrix-org#6994)). Fixes element-hq/element-web#19416 and element-hq/element-web#19416.
* Position toggle switch more clearly ([\matrix-org#6914](matrix-org#6914)). Contributed by @CicadaCinema.
* Validate email address in forgot password dialog ([\matrix-org#6983](matrix-org#6983)). Fixes element-hq/element-web#9978 and element-hq/element-web#9978. Contributed by @psrpinto.
* Handle and i18n M_THREEPID_IN_USE during registration ([\matrix-org#6986](matrix-org#6986)). Fixes element-hq/element-web#13767 and element-hq/element-web#13767.
* For space invite previews, use room summary API to get the right member count ([\matrix-org#6982](matrix-org#6982)). Fixes element-hq/element-web#19123 and element-hq/element-web#19123.
* Simplify Space Panel notification badge layout ([\matrix-org#6977](matrix-org#6977)). Fixes element-hq/element-web#18527 and element-hq/element-web#18527.
* Use prettier hsName during 3pid registration where possible ([\matrix-org#6980](matrix-org#6980)). Fixes element-hq/element-web#19162 and element-hq/element-web#19162.
* Add a condition to only activate the resizer which belongs to the clicked handle ([\matrix-org#7055](matrix-org#7055)). Fixes element-hq/element-web#19521 and element-hq/element-web#19521.
* Restore composer focus after event edit ([\matrix-org#7065](matrix-org#7065)). Fixes element-hq/element-web#19469 and element-hq/element-web#19469.
* Don't apply message bubble visual style to media messages ([\matrix-org#7040](matrix-org#7040)).
* Handle no selected screen when screen-sharing ([\matrix-org#7018](matrix-org#7018)). Fixes element-hq/element-web#19460 and element-hq/element-web#19460. Contributed by @SimonBrandner.
* Add history entry before completing emoji ([\matrix-org#7007](matrix-org#7007)). Fixes element-hq/element-web#19177 and element-hq/element-web#19177. Contributed by @RafaelGoncalves8.
* Add padding between controls on edit form in message bubbles ([\matrix-org#7039](matrix-org#7039)).
* Respect the roomState right container request for the Jitsi widget ([\matrix-org#7033](matrix-org#7033)). Fixes element-hq/element-web#16552 and element-hq/element-web#16552.
* Fix cannot read length of undefined for room upgrades ([\matrix-org#7037](matrix-org#7037)). Fixes element-hq/element-web#19509 and element-hq/element-web#19509.
* Cleanup re-dispatching around timelines and composers ([\matrix-org#7023](matrix-org#7023)). Fixes element-hq/element-web#19491 and element-hq/element-web#19491. Contributed by @SimonBrandner.
* Fix removing a room from a Space and interaction with `m.space.parent` ([\matrix-org#6944](matrix-org#6944)). Fixes element-hq/element-web#19363 and element-hq/element-web#19363.
* Fix recent css regression ([\matrix-org#7022](matrix-org#7022)). Fixes element-hq/element-web#19470 and element-hq/element-web#19470. Contributed by @CicadaCinema.
* Fix ModalManager reRender racing with itself ([\matrix-org#7027](matrix-org#7027)). Fixes element-hq/element-web#19489 and element-hq/element-web#19489.
* Fix fullscreening a call while connecting ([\matrix-org#7019](matrix-org#7019)). Fixes element-hq/element-web#19309 and element-hq/element-web#19309. Contributed by @SimonBrandner.
* Allow scrolling right in reply-quoted code block ([\matrix-org#7024](matrix-org#7024)). Fixes element-hq/element-web#19487 and element-hq/element-web#19487. Contributed by @SimonBrandner.
* Fix dark theme codeblock colors ([\matrix-org#6384](matrix-org#6384)). Fixes element-hq/element-web#17998. Contributed by @SimonBrandner.
* Show passphrase input label ([\matrix-org#6992](matrix-org#6992)). Fixes element-hq/element-web#19428 and element-hq/element-web#19428. Contributed by @RafaelGoncalves8.
* Always render disabled settings as disabled ([\matrix-org#7014](matrix-org#7014)).
* Make "Security Phrase" placeholder look consistent cross-browser ([\matrix-org#6870](matrix-org#6870)). Fixes element-hq/element-web#19006 and element-hq/element-web#19006. Contributed by @neer17.
* Fix direction override characters breaking member event text direction ([\matrix-org#6999](matrix-org#6999)).
* Remove redundant text in verification dialogs ([\matrix-org#6993](matrix-org#6993)). Fixes element-hq/element-web#19290 and element-hq/element-web#19290. Contributed by @RafaelGoncalves8.
* Fix space panel name overflowing ([\matrix-org#6995](matrix-org#6995)). Fixes element-hq/element-web#19455 and element-hq/element-web#19455.
* Fix conflicting CSS on syntax highlighted blocks ([\matrix-org#6991](matrix-org#6991)). Fixes element-hq/element-web#19445 and element-hq/element-web#19445.

.github/workflows/develop.yml

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

.github/workflows/notify-element-web.yml

@@ -0,0 +1,15 @@
+name: Notify element-web
+on:
+    push:
+        branches: [develop]
+jobs:
+    notify-element-web:
+        runs-on: ubuntu-latest
+        environment: develop
+        steps:
+            -   name: Notify element-web repo that a new SDK build is on develop
+                uses: peter-evans/repository-dispatch@v1
+                with:
+                    token: ${{ secrets.ELEMENT_WEB_NOTIFY_TOKEN }}
+                    repository: vector-im/element-web
+                    event-type: element-web-notify

.stylelintrc.js

@@ -11,7 +11,8 @@ module.exports = {
         "length-zero-no-unit": null,
         "rule-empty-line-before": null,
         "color-hex-length": null,
-        "max-empty-lines": null,
+        "max-empty-lines": 1,
+        "no-eol-whitespace": true,
         "number-no-trailing-zeros": null,
         "number-leading-zero": null,
         "selector-list-comma-newline-after": null,

README.md

@@ -20,7 +20,7 @@ a 'skin'. A skin provides:
  * The containing application
  * Zero or more 'modules' containing non-UI functionality
 
-As of Aug 2018, the only skin that exists is `vector-im/element-web`; it and
+As of Aug 2018, the only skin that exists is [`vector-im/element-web`](https://github.com/vector-im/element-web/); it and
 `matrix-org/matrix-react-sdk` should effectively
 be considered as a single project (for instance, matrix-react-sdk bugs
 are currently filed against vector-im/element-web rather than this project).
@@ -147,7 +147,7 @@ guide](https://classic.yarnpkg.com/docs/install) if you do not have it
 already. This project has not yet been migrated to Yarn 2, so please ensure
 `yarn --version` shows a version from the 1.x series.
 
-`matrix-react-sdk` depends on `matrix-js-sdk`. To make use of changes in the
+`matrix-react-sdk` depends on [`matrix-js-sdk`](https://github.com/matrix-org/matrix-js-sdk). To make use of changes in the
 latter and to ensure tests run against the develop branch of `matrix-js-sdk`,
 you should set up `matrix-js-sdk`:
 
@@ -184,4 +184,4 @@ yarn test
 ## End-to-End tests
 
 Make sure you've got your Element development server running (by doing `yarn start` in element-web), and then in this project, run `yarn run e2etests`.
-See `test/end-to-end-tests/README.md` for more information.
+See [`test/end-to-end-tests/README.md`](https://github.com/matrix-org/matrix-react-sdk/blob/develop/test/end-to-end-tests/README.md) for more information.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "3.33.0",
+  "version": "3.34.0",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -83,8 +83,8 @@
     "katex": "^0.12.0",
     "linkifyjs": "^2.1.9",
     "lodash": "^4.17.20",
-    "matrix-js-sdk": "15.0.0",
-    "matrix-widget-api": "^0.1.0-beta.16",
+    "matrix-js-sdk": "15.1.0",
+    "matrix-widget-api": "^0.1.0-beta.17",
     "minimist": "^1.2.5",
     "opus-recorder": "^8.0.3",
     "pako": "^2.0.3",
@@ -154,7 +154,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.3",
+    "allchange": "^1.0.5",
     "babel-jest": "^26.6.3",
     "chokidar": "^3.5.1",
     "concurrently": "^5.3.0",

res/css/_common.scss

@@ -23,10 +23,13 @@ limitations under the License.
 
 $hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
 
-$EventTile_e2e_state_indicator_width: 4px;
+$selected-message-border-width: 4px;
 
 $MessageTimestamp_width: 46px; /* 8 + 30 (avatar) + 8 */
-$MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $EventTile_e2e_state_indicator_width);
+$MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $selected-message-border-width);
+
+$slider-dot-size: 1em;
+$slider-selection-dot-size: 2.4em;
 
 :root {
     font-size: 10px;
@@ -402,7 +405,10 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
  * We should go through and have one consistent set of styles for buttons throughout the app.
  * For now, I am duplicating the selectors here for mx_Dialog and mx_DialogButtons.
  */
-.mx_Dialog button, .mx_Dialog input[type="submit"], .mx_Dialog_buttons button, .mx_Dialog_buttons input[type="submit"] {
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton),
+.mx_Dialog input[type="submit"],
+.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton),
+.mx_Dialog_buttons input[type="submit"] {
     @mixin mx_DialogButton;
     margin-left: 0px;
     margin-right: 8px;
@@ -415,36 +421,52 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     font-family: inherit;
 }
 
-.mx_Dialog button:last-child {
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton):last-child {
     margin-right: 0px;
 }
 
-.mx_Dialog button:hover, .mx_Dialog input[type="submit"]:hover, .mx_Dialog_buttons button:hover, .mx_Dialog_buttons input[type="submit"]:hover {
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton):hover,
+.mx_Dialog input[type="submit"]:hover,
+.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):hover,
+.mx_Dialog_buttons input[type="submit"]:hover {
     @mixin mx_DialogButton_hover;
 }
 
-.mx_Dialog button:focus, .mx_Dialog input[type="submit"]:focus, .mx_Dialog_buttons button:focus, .mx_Dialog_buttons input[type="submit"]:focus {
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton):focus,
+.mx_Dialog input[type="submit"]:focus,
+.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):focus,
+.mx_Dialog_buttons input[type="submit"]:focus {
     filter: brightness($focus-brightness);
 }
 
-.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary, .mx_Dialog_buttons button.mx_Dialog_primary, .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
+.mx_Dialog button.mx_Dialog_primary,
+.mx_Dialog input[type="submit"].mx_Dialog_primary,
+.mx_Dialog_buttons button.mx_Dialog_primary,
+.mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
     color: $accent-fg-color;
     background-color: $accent-color;
     min-width: 156px;
 }
 
-.mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger, .mx_Dialog_buttons button.danger, .mx_Dialog_buttons input[type="submit"].danger {
+.mx_Dialog button.danger,
+.mx_Dialog input[type="submit"].danger,
+.mx_Dialog_buttons button.danger,
+.mx_Dialog_buttons input[type="submit"].danger {
     background-color: $warning-color;
     border: solid 1px $warning-color;
     color: $accent-fg-color;
 }
 
-.mx_Dialog button.warning, .mx_Dialog input[type="submit"].warning {
+.mx_Dialog button.warning,
+.mx_Dialog input[type="submit"].warning {
     border: solid 1px $warning-color;
     color: $warning-color;
 }
 
-.mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled, .mx_Dialog_buttons button:disabled, .mx_Dialog_buttons input[type="submit"]:disabled {
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton):disabled,
+.mx_Dialog input[type="submit"]:disabled,
+.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):disabled,
+.mx_Dialog_buttons input[type="submit"]:disabled {
     background-color: $light-fg-color;
     border: solid 1px $light-fg-color;
     opacity: 0.7;

res/css/_components.scss

@@ -74,6 +74,7 @@
 @import "./views/dialogs/_ChangelogDialog.scss";
 @import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";
 @import "./views/dialogs/_CommunityPrototypeInviteDialog.scss";
+@import "./views/dialogs/_CompoundDialog.scss";
 @import "./views/dialogs/_ConfirmSpaceUserActionDialog.scss";
 @import "./views/dialogs/_ConfirmUserActionDialog.scss";
 @import "./views/dialogs/_CreateCommunityPrototypeDialog.scss";
@@ -99,6 +100,7 @@
 @import "./views/dialogs/_MessageEditHistoryDialog.scss";
 @import "./views/dialogs/_ModalWidgetDialog.scss";
 @import "./views/dialogs/_NewSessionReviewDialog.scss";
+@import "./views/dialogs/_PollCreateDialog.scss";
 @import "./views/dialogs/_RegistrationEmailPromptDialog.scss";
 @import "./views/dialogs/_RoomSettingsDialog.scss";
 @import "./views/dialogs/_RoomSettingsDialogBridges.scss";
@@ -200,10 +202,10 @@
 @import "./views/right_panel/_EncryptionInfo.scss";
 @import "./views/right_panel/_PinnedMessagesCard.scss";
 @import "./views/right_panel/_RoomSummaryCard.scss";
+@import "./views/right_panel/_ThreadPanel.scss";
 @import "./views/right_panel/_UserInfo.scss";
 @import "./views/right_panel/_VerificationPanel.scss";
 @import "./views/right_panel/_WidgetCard.scss";
-@import "./views/right_panel/_ThreadPanel.scss";
 @import "./views/room_settings/_AliasSettings.scss";
 @import "./views/rooms/_AppsDrawer.scss";
 @import "./views/rooms/_Autocomplete.scss";
@@ -248,6 +250,7 @@
 @import "./views/settings/_DevicesPanel.scss";
 @import "./views/settings/_E2eAdvancedPanel.scss";
 @import "./views/settings/_EmailAddresses.scss";
+@import "./views/settings/_FontScalingPanel.scss";
 @import "./views/settings/_IntegrationManager.scss";
 @import "./views/settings/_JoinRuleSettings.scss";
 @import "./views/settings/_LayoutSwitcher.scss";
@@ -258,6 +261,7 @@
 @import "./views/settings/_SetIdServer.scss";
 @import "./views/settings/_SetIntegrationManager.scss";
 @import "./views/settings/_SpellCheckLanguages.scss";
+@import "./views/settings/_ThemeChoicePanel.scss";
 @import "./views/settings/_UpdateCheckButton.scss";
 @import "./views/settings/tabs/_SettingsTab.scss";
 @import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss";

res/css/structures/_ContextualMenu.scss

@@ -117,7 +117,10 @@ limitations under the License.
     border-right: 8px solid transparent;
 }
 
-.mx_ContextualMenu_spinner {
-    display: block;
-    margin: 0 auto;
+.mx_ContextualMenu_rightAligned {
+    transform: translateX(-100%);
+}
+
+.mx_ContextualMenu_bottomAligned {
+    transform: translateY(-100%);
 }

res/css/structures/_CreateRoom.scss

@@ -34,4 +34,3 @@ limitations under the License.
 .mx_CreateRoom_description {
     width: 330px;
 }
-

res/css/structures/_LeftPanel.scss

@@ -43,8 +43,6 @@ $roomListCollapsedWidth: 68px;
     }
 }
 
-
-
 .mx_LeftPanel {
     background-color: $roomlist-bg-color;
     // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel

res/css/structures/_RoomDirectory.scss

@@ -121,7 +121,7 @@ limitations under the License.
         vertical-align: text-top;
         margin-right: 2px;
         content: "";
-        mask: url('$(res)/img/feather-customised/user.svg');
+        mask: url("$(res)/img/feather-customised/user.svg");
         mask-repeat: no-repeat;
         mask-position: center;
         // scale it down and make the size slightly bigger (16 instead of 14px)
@@ -132,7 +132,8 @@ limitations under the License.
     }
 }
 
-.mx_RoomDirectory_join, .mx_RoomDirectory_preview {
+.mx_RoomDirectory_join,
+.mx_RoomDirectory_preview {
     align-self: center;
     white-space: nowrap;
 }
@@ -220,3 +221,7 @@ limitations under the License.
         margin-top: 5px;
     }
 }
+
+.mx_RoomDirectory_listItem {
+    display: contents;
+}

res/css/structures/_RoomView.scss

@@ -32,7 +32,6 @@ limitations under the License.
     position: relative;
 }
 
-
 @keyframes mx_RoomView_fileDropTarget_animation {
     from {
         opacity: 0;
@@ -112,7 +111,6 @@ limitations under the License.
     max-width: 1920px !important;
 }
 
-
 .mx_RoomView .mx_MainSplit {
     flex: 1 1 0;
 }

res/css/structures/_SpaceHierarchy.scss

@@ -203,7 +203,8 @@ limitations under the License.
             grid-row: 1;
             grid-column: 2;
 
-            .mx_InfoTooltip {
+            .mx_InfoTooltip,
+            .mx_SpaceHierarchy_roomTile_joined {
                 display: inline;
                 margin-left: 12px;
                 color: $tertiary-content;
@@ -222,6 +223,25 @@ limitations under the License.
                     }
                 }
             }
+
+            .mx_SpaceHierarchy_roomTile_joined {
+                position: relative;
+                padding-left: 16px;
+
+                &::before {
+                    content: '';
+                    width: 20px;
+                    height: 20px;
+                    top: -2px;
+                    left: -4px;
+                    position: absolute;
+                    mask-position: center;
+                    mask-size: contain;
+                    mask-repeat: no-repeat;
+                    background-color: $accent-color;
+                    mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
+                }
+            }
         }
 
         .mx_SpaceHierarchy_roomTile_info {
@@ -268,6 +288,11 @@ limitations under the License.
                 visibility: visible;
             }
         }
+
+        &.mx_SpaceHierarchy_joining .mx_AccessibleButton {
+            visibility: visible;
+            padding: 4px 18px;
+        }
     }
 
     li.mx_SpaceHierarchy_roomTileWrapper {