Merge branch 'matrix-org:develop' into issue-19180

Author: oliver-pham

res/css/views/auth/_AuthBody.scss

@@ -58,10 +58,6 @@ limitations under the License.
         background-color: $authpage-body-bg-color;
     }
 
-    .mx_Field label {
-        color: $authpage-primary-color;
-    }
-
     .mx_Field_labelAlwaysTopLeft label,
     .mx_Field select + label /* Always show a select's label on top to not collide with the value */,
     .mx_Field input:focus + label,

res/css/views/dialogs/_AddExistingToSpaceDialog.scss

@@ -75,7 +75,7 @@ limitations under the License.
                 @mixin ProgressBarBorderRadius 8px;
             }
 
-            .mx_AddExistingToSpace_progressText {
+            .mx_AddExistingToSpaceDialog_progressText {
                 margin-top: 8px;
                 font-size: $font-15px;
                 line-height: $font-24px;

res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss

@@ -74,6 +74,7 @@ limitations under the License.
             font-size: $font-12px;
             line-height: $font-15px;
             color: $secondary-content;
+            margin-top: -13px; // match height of buttons to prevent height changing
 
             .mx_ProgressBar {
                 height: 8px;

res/css/views/elements/_Field.scss

@@ -100,7 +100,6 @@ limitations under the License.
         color 0.25s ease-out 0.1s,
         transform 0.25s ease-out 0.1s,
         background-color 0.25s ease-out 0.1s;
-    color: $primary-content;
     background-color: transparent;
     font-size: $font-14px;
     transform: translateY(0);

res/css/views/rooms/_RoomSublist.scss

@@ -22,6 +22,12 @@ limitations under the License.
         display: none;
     }
 
+    &:not(.mx_RoomSublist_minimized) {
+        .mx_RoomSublist_headerContainer {
+            height: auto;
+        }
+    }
+
     .mx_RoomSublist_headerContainer {
         // Create a flexbox to make alignment easy
         display: flex;
@@ -41,9 +47,7 @@ limitations under the License.
         // The combined height must be set in the LeftPanel component for sticky headers
         // to work correctly.
         padding-bottom: 8px;
-        // Allow the container to collapse on itself if its children
-        // are not in the normal document flow
-        max-height: 24px;
+        height: 24px;
         color: $roomlist-header-color;
 
         .mx_RoomSublist_stickable {
@@ -172,14 +176,6 @@ limitations under the License.
         }
     }
 
-    // In the general case, we reserve space for each sublist header to prevent
-    // scroll jumps when they become sticky. However, that leaves a gap when
-    // scrolled to the top above the first sublist (whose header can only ever
-    // stick to top), so we make sure to exclude the first visible sublist.
-    &:not(.mx_RoomSublist_hidden) ~ .mx_RoomSublist .mx_RoomSublist_headerContainer {
-        height: 24px;
-    }
-
     .mx_RoomSublist_resizeBox {
         position: relative;
 

src/Avatar.ts

@@ -142,15 +142,11 @@ export function avatarUrlForRoom(room: Room, width: number, height: number, resi
     // space rooms cannot be DMs so skip the rest
     if (SpaceStore.spacesEnabled && room.isSpaceRoom()) return null;
 
-    let otherMember = null;
-    const otherUserId = DMRoomMap.shared().getUserIdForRoomId(room.roomId);
-    if (otherUserId) {
-        otherMember = room.getMember(otherUserId);
-    } else {
-        // if the room is not marked as a 1:1, but only has max 2 members
-        // then still try to show any avatar (pref. other member)
-        otherMember = room.getAvatarFallbackMember();
-    }
+    // If the room is not a DM don't fallback to a member avatar
+    if (!DMRoomMap.shared().getUserIdForRoomId(room.roomId)) return null;
+
+    // If there are only two members in the DM use the avatar of the other member
+    const otherMember = room.getAvatarFallbackMember();
     if (otherMember?.getMxcAvatarUrl()) {
         return mediaFromMxc(otherMember.getMxcAvatarUrl()).getThumbnailOfSourceHttp(width, height, resizeMethod);
     }

src/RoomInvite.tsx

@@ -42,10 +42,15 @@ export interface IInviteResult {
  *
  * @param {string} roomId The ID of the room to invite to
  * @param {string[]} addresses Array of strings of addresses to invite. May be matrix IDs or 3pids.
+ * @param {function} progressCallback optional callback, fired after each invite.
  * @returns {Promise} Promise
  */
-export function inviteMultipleToRoom(roomId: string, addresses: string[]): Promise<IInviteResult> {
-    const inviter = new MultiInviter(roomId);
+export function inviteMultipleToRoom(
+    roomId: string,
+    addresses: string[],
+    progressCallback?: () => void,
+): Promise<IInviteResult> {
+    const inviter = new MultiInviter(roomId, progressCallback);
     return inviter.invite(addresses).then(states => Promise.resolve({ states, inviter }));
 }
 
@@ -104,8 +109,8 @@ export function isValid3pidInvite(event: MatrixEvent): boolean {
     return true;
 }
 
-export function inviteUsersToRoom(roomId: string, userIds: string[]): Promise<void> {
-    return inviteMultipleToRoom(roomId, userIds).then((result) => {
+export function inviteUsersToRoom(roomId: string, userIds: string[], progressCallback?: () => void): Promise<void> {
+    return inviteMultipleToRoom(roomId, userIds, progressCallback).then((result) => {
         const room = MatrixClientPeg.get().getRoom(roomId);
         showAnyInviteErrors(result.states, room, result.inviter);
     }).catch((err) => {

src/ScalarMessaging.ts

@@ -452,7 +452,9 @@ function setBotOptions(event: MessageEvent<any>, roomId: string, userId: string)
     });
 }
 
-function setBotPower(event: MessageEvent<any>, roomId: string, userId: string, level: number): void {
+async function setBotPower(
+    event: MessageEvent<any>, roomId: string, userId: string, level: number, ignoreIfGreater?: boolean,
+): Promise<void> {
     if (!(Number.isInteger(level) && level >= 0)) {
         sendError(event, _t('Power level must be positive integer.'));
         return;
@@ -465,22 +467,34 @@ function setBotPower(event: MessageEvent<any>, roomId: string, userId: string, l
         return;
     }
 
-    client.getStateEvent(roomId, "m.room.power_levels", "").then((powerLevels) => {
-        const powerEvent = new MatrixEvent(
+    try {
+        const powerLevels = await client.getStateEvent(roomId, "m.room.power_levels", "");
+
+        // If the PL is equal to or greater than the requested PL, ignore.
+        if (ignoreIfGreater === true) {
+            // As per https://matrix.org/docs/spec/client_server/r0.6.0#m-room-power-levels
+            const currentPl = (
+                powerLevels.content.users && powerLevels.content.users[userId]
+            ) || powerLevels.content.users_default || 0;
+
+            if (currentPl >= level) {
+                return sendResponse(event, {
+                    success: true,
+                });
+            }
+        }
+        await client.setPowerLevel(roomId, userId, level, new MatrixEvent(
             {
                 type: "m.room.power_levels",
                 content: powerLevels,
             },
-        );
-
-        client.setPowerLevel(roomId, userId, level, powerEvent).then(() => {
-            sendResponse(event, {
-                success: true,
-            });
-        }, (err) => {
-            sendError(event, err.message ? err.message : _t('Failed to send request.'), err);
+        ));
+        return sendResponse(event, {
+            success: true,
         });
-    });
+    } catch (err) {
+        sendError(event, err.message ? err.message : _t('Failed to send request.'), err);
+    }
 }
 
 function getMembershipState(event: MessageEvent<any>, roomId: string, userId: string): void {
@@ -678,7 +692,7 @@ const onMessage = function(event: MessageEvent<any>): void {
             setBotOptions(event, roomId, userId);
             break;
         case Action.SetBotPower:
-            setBotPower(event, roomId, userId, event.data.level);
+            setBotPower(event, roomId, userId, event.data.level, event.data.ignoreIfGreater);
             break;
         default:
             console.warn("Unhandled postMessage event with action '" + event.data.action +"'");

src/components/structures/ContextMenu.tsx

@@ -19,6 +19,7 @@ limitations under the License.
 import React, { CSSProperties, RefObject, SyntheticEvent, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import classNames from "classnames";
+import FocusLock from "react-focus-lock";
 
 import { Key } from "../../Keyboard";
 import { Writeable } from "../../@types/common";
@@ -43,8 +44,6 @@ function getOrCreateContainer(): HTMLDivElement {
     return container;
 }
 
-const ARIA_MENU_ITEM_ROLES = new Set(["menuitem", "menuitemcheckbox", "menuitemradio"]);
-
 export interface IPosition {
     top?: number;
     bottom?: number;
@@ -84,6 +83,10 @@ export interface IProps extends IPosition {
     // it will be mounted to a container at the root of the DOM.
     mountAsChild?: boolean;
 
+    // If specified, contents will be wrapped in a FocusLock, this is only needed if the context menu is being rendered
+    // within an existing FocusLock e.g inside a modal.
+    focusLock?: boolean;
+
     // Function to be called on menu close
     onFinished();
     // on resize callback
@@ -99,7 +102,7 @@ interface IState {
 // this will allow the ContextMenu to manage its own focus using arrow keys as per the ARIA guidelines.
 @replaceableComponent("structures.ContextMenu")
 export class ContextMenu extends React.PureComponent<IProps, IState> {
-    private initialFocus: HTMLElement;
+    private readonly initialFocus: HTMLElement;
 
     static defaultProps = {
         hasBackground: true,
@@ -108,6 +111,7 @@ export class ContextMenu extends React.PureComponent<IProps, IState> {
 
     constructor(props, context) {
         super(props, context);
+
         this.state = {
             contextMenuElem: null,
         };
@@ -121,14 +125,13 @@ export class ContextMenu extends React.PureComponent<IProps, IState> {
         this.initialFocus.focus();
     }
 
-    private collectContextMenuRect = (element) => {
+    private collectContextMenuRect = (element: HTMLDivElement) => {
         // We don't need to clean up when unmounting, so ignore
         if (!element) return;
 
-        let first = element.querySelector('[role^="menuitem"]');
-        if (!first) {
-            first = element.querySelector('[tab-index]');
-        }
+        const first = element.querySelector<HTMLElement>('[role^="menuitem"]')
+            || element.querySelector<HTMLElement>('[tab-index]');
+
         if (first) {
             first.focus();
         }
@@ -205,7 +208,7 @@ export class ContextMenu extends React.PureComponent<IProps, IState> {
                     descending = true;
                 }
             }
-        } while (element && !ARIA_MENU_ITEM_ROLES.has(element.getAttribute("role")));
+        } while (element && !element.getAttribute("role")?.startsWith("menuitem"));
 
         if (element) {
             (element as HTMLElement).focus();
@@ -383,6 +386,17 @@ export class ContextMenu extends React.PureComponent<IProps, IState> {
             );
         }
 
+        let body = <>
+            { chevron }
+            { props.children }
+        </>;
+
+        if (props.focusLock) {
+            body = <FocusLock>
+                { body }
+            </FocusLock>;
+        }
+
         return (
             <div
                 className={classNames("mx_ContextualMenu_wrapper", this.props.wrapperClassName)}
@@ -397,8 +411,7 @@ export class ContextMenu extends React.PureComponent<IProps, IState> {
                     ref={this.collectContextMenuRect}
                     role={this.props.managed ? "menu" : undefined}
                 >
-                    { chevron }
-                    { props.children }
+                    { body }
                 </div>
                 { background }
             </div>