Merge branch 'develop' into joriks/room-list-breadcrumbs

src/components/structures/ContextMenu.js

@@ -116,6 +116,7 @@ export class ContextMenu extends React.Component {
             this.props.onFinished();
 
             e.preventDefault();
+            e.stopPropagation();
             const x = e.clientX;
             const y = e.clientY;
 
@@ -133,6 +134,12 @@ export class ContextMenu extends React.Component {
         }
     };
 
+    onContextMenuPreventBubbling = (e) => {
+        // stop propagation so that any context menu handlers don't leak out of this context menu
+        // but do not inhibit the default browser menu
+        e.stopPropagation();
+    };
+
     _onMoveFocus = (element, up) => {
         let descending = false; // are we currently descending or ascending through the DOM tree?
 
@@ -324,7 +331,7 @@ export class ContextMenu extends React.Component {
         }
 
         return (
-            <div className="mx_ContextualMenu_wrapper" style={{...position, ...wrapperStyle}} onKeyDown={this._onKeyDown}>
+            <div className="mx_ContextualMenu_wrapper" style={{...position, ...wrapperStyle}} onKeyDown={this._onKeyDown} onContextMenu={this.onContextMenuPreventBubbling}>
                 <div className={menuClasses} style={menuStyle} ref={this.collectContextMenuRect} role={this.props.managed ? "menu" : undefined}>
                     { chevron }
                     { props.children }
@@ -340,10 +347,18 @@ export class ContextMenu extends React.Component {
 }
 
 // Semantic component for representing the AccessibleButton which launches a <ContextMenu />
-export const ContextMenuButton = ({ label, isExpanded, children, ...props }) => {
+export const ContextMenuButton = ({ label, isExpanded, children, onClick, onContextMenu, ...props }) => {
     const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
     return (
-        <AccessibleButton {...props} title={label} aria-label={label} aria-haspopup={true} aria-expanded={isExpanded}>
+        <AccessibleButton
+            {...props}
+            onClick={onClick}
+            onContextMenu={onContextMenu || onClick}
+            title={label}
+            aria-label={label}
+            aria-haspopup={true}
+            aria-expanded={isExpanded}
+        >
             { children }
         </AccessibleButton>
     );

src/components/structures/LeftPanel2.tsx

@@ -208,6 +208,11 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
             "mx_LeftPanel2_minimized": this.props.isMinimized,
         });
 
+        const roomListClasses = classNames(
+            "mx_LeftPanel2_actualRoomListContainer",
+            "mx_AutoHideScrollbar",
+        );
+
         return (
             <div className={containerClasses}>
                 {tagPanel}
@@ -215,7 +220,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
                     {this.renderHeader()}
                     {this.renderSearchExplore()}
                     <div
-                        className="mx_LeftPanel2_actualRoomListContainer"
+                        className={roomListClasses}
                         onScroll={this.onScroll}
                         ref={this.listContainerRef}
                     >{roomList}</div>

src/components/structures/MatrixChat.tsx

@@ -23,7 +23,6 @@ import * as Matrix from "matrix-js-sdk";
 import { InvalidStoreError } from "matrix-js-sdk/src/errors";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { isCryptoAvailable } from 'matrix-js-sdk/src/crypto';
 // focus-visible is a Polyfill for the :focus-visible CSS pseudo-attribute used by _AccessibleButton.scss
 import 'focus-visible';
 // what-input helps improve keyboard accessibility

src/components/structures/RoomView.js

@@ -1819,6 +1819,7 @@ export default createReactClass({
         );
 
         const showRoomRecoveryReminder = (
+            this.context.isCryptoEnabled() &&
             SettingsStore.getValue("showRoomRecoveryReminder") &&
             this.context.isRoomEncrypted(this.state.room.roomId) &&
             this.context.getKeyBackupEnabled() === false

src/components/structures/UserMenu.tsx

@@ -42,8 +42,10 @@ interface IProps {
     isMinimized: boolean;
 }
 
+type PartialDOMRect = Pick<DOMRect, "width" | "left" | "top" | "height">;
+
 interface IState {
-    menuDisplayed: boolean;
+    contextMenuPosition: PartialDOMRect;
     isDarkTheme: boolean;
 }
 
@@ -56,7 +58,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
         super(props);
 
         this.state = {
-            menuDisplayed: false,
+            contextMenuPosition: null,
             isDarkTheme: this.isUserOnDarkTheme(),
         };
 
@@ -106,13 +108,25 @@ export default class UserMenu extends React.Component<IProps, IState> {
     private onOpenMenuClick = (ev: InputEvent) => {
         ev.preventDefault();
         ev.stopPropagation();
-        this.setState({menuDisplayed: true});
+        const target = ev.target as HTMLButtonElement;
+        this.setState({contextMenuPosition: target.getBoundingClientRect()});
     };
 
-    private onCloseMenu = (ev: InputEvent) => {
+    private onContextMenu = (ev: React.MouseEvent) => {
         ev.preventDefault();
         ev.stopPropagation();
-        this.setState({menuDisplayed: false});
+        this.setState({
+            contextMenuPosition: {
+                left: ev.clientX,
+                top: ev.clientY,
+                width: 20,
+                height: 0,
+            },
+        });
+    };
+
+    private onCloseMenu = () => {
+        this.setState({contextMenuPosition: null});
     };
 
     private onSwitchThemeClick = () => {
@@ -129,7 +143,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
 
         const payload: OpenToTabPayload = {action: Action.ViewUserSettings, initialTabId: tabId};
         defaultDispatcher.dispatch(payload);
-        this.setState({menuDisplayed: false}); // also close the menu
+        this.setState({contextMenuPosition: null}); // also close the menu
     };
 
     private onShowArchived = (ev: ButtonEvent) => {
@@ -145,7 +159,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
         ev.stopPropagation();
 
         Modal.createTrackedDialog('Report bugs & give feedback', '', RedesignFeedbackDialog);
-        this.setState({menuDisplayed: false}); // also close the menu
+        this.setState({contextMenuPosition: null}); // also close the menu
     };
 
     private onSignOutClick = (ev: ButtonEvent) => {
@@ -153,7 +167,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
         ev.stopPropagation();
 
         Modal.createTrackedDialog('Logout from LeftPanel', '', LogoutDialog);
-        this.setState({menuDisplayed: false}); // also close the menu
+        this.setState({contextMenuPosition: null}); // also close the menu
     };
 
     private onHomeClick = (ev: ButtonEvent) => {
@@ -164,7 +178,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
     };
 
     private renderContextMenu = (): React.ReactNode => {
-        if (!this.state.menuDisplayed) return null;
+        if (!this.state.contextMenuPosition) return null;
 
         let hostingLink;
         const signupLink = getHostingLink("user-context-menu");
@@ -191,21 +205,19 @@ export default class UserMenu extends React.Component<IProps, IState> {
         let homeButton = null;
         if (this.hasHomePage) {
             homeButton = (
-                <li>
-                    <AccessibleButton onClick={this.onHomeClick}>
-                        <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconHome" />
-                        <span>{_t("Home")}</span>
-                    </AccessibleButton>
-                </li>
+                <AccessibleButton onClick={this.onHomeClick}>
+                    <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconHome" />
+                    <span>{_t("Home")}</span>
+                </AccessibleButton>
             );
         }
 
-        const elementRect = this.buttonRef.current.getBoundingClientRect();
         return (
             <ContextMenu
                 chevronFace="none"
-                left={elementRect.width + elementRect.left}
-                top={elementRect.top + elementRect.height}
+                // -20 to overlap the context menu by just over the width of the `...` icon and make it look connected
+                left={this.state.contextMenuPosition.width + this.state.contextMenuPosition.left - 20}
+                top={this.state.contextMenuPosition.top + this.state.contextMenuPosition.height}
                 onFinished={this.onCloseMenu}
             >
                 <div className="mx_IconizedContextMenu mx_UserMenu_contextMenu">
@@ -232,49 +244,33 @@ export default class UserMenu extends React.Component<IProps, IState> {
                     </div>
                     {hostingLink}
                     <div className="mx_IconizedContextMenu_optionList mx_IconizedContextMenu_optionList_notFirst">
-                        <ul>
-                            {homeButton}
-                            <li>
-                                <AccessibleButton onClick={(e) => this.onSettingsOpen(e, USER_NOTIFICATIONS_TAB)}>
-                                    <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconBell" />
-                                    <span>{_t("Notification settings")}</span>
-                                </AccessibleButton>
-                            </li>
-                            <li>
-                                <AccessibleButton onClick={(e) => this.onSettingsOpen(e, USER_SECURITY_TAB)}>
-                                    <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconLock" />
-                                    <span>{_t("Security & privacy")}</span>
-                                </AccessibleButton>
-                            </li>
-                            <li>
-                                <AccessibleButton onClick={(e) => this.onSettingsOpen(e, null)}>
-                                    <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconSettings" />
-                                    <span>{_t("All settings")}</span>
-                                </AccessibleButton>
-                            </li>
-                            <li>
-                                <AccessibleButton onClick={this.onShowArchived}>
-                                    <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconArchive" />
-                                    <span>{_t("Archived rooms")}</span>
-                                </AccessibleButton>
-                            </li>
-                            <li>
-                                <AccessibleButton onClick={this.onProvideFeedback}>
-                                    <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconMessage" />
-                                    <span>{_t("Feedback")}</span>
-                                </AccessibleButton>
-                            </li>
-                        </ul>
+                        {homeButton}
+                        <AccessibleButton onClick={(e) => this.onSettingsOpen(e, USER_NOTIFICATIONS_TAB)}>
+                            <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconBell" />
+                            <span className="mx_IconizedContextMenu_label">{_t("Notification settings")}</span>
+                        </AccessibleButton>
+                        <AccessibleButton onClick={(e) => this.onSettingsOpen(e, USER_SECURITY_TAB)}>
+                            <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconLock" />
+                            <span className="mx_IconizedContextMenu_label">{_t("Security & privacy")}</span>
+                        </AccessibleButton>
+                        <AccessibleButton onClick={(e) => this.onSettingsOpen(e, null)}>
+                            <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconSettings" />
+                            <span className="mx_IconizedContextMenu_label">{_t("All settings")}</span>
+                        </AccessibleButton>
+                        <AccessibleButton onClick={this.onShowArchived}>
+                            <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconArchive" />
+                            <span className="mx_IconizedContextMenu_label">{_t("Archived rooms")}</span>
+                        </AccessibleButton>
+                        <AccessibleButton onClick={this.onProvideFeedback}>
+                            <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconMessage" />
+                            <span className="mx_IconizedContextMenu_label">{_t("Feedback")}</span>
+                        </AccessibleButton>
                     </div>
-                    <div className="mx_IconizedContextMenu_optionList">
-                        <ul>
-                            <li className="mx_UserMenu_contextMenu_redRow">
-                                <AccessibleButton onClick={this.onSignOutClick}>
-                                    <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconSignOut" />
-                                    <span>{_t("Sign out")}</span>
-                                </AccessibleButton>
-                            </li>
-                        </ul>
+                    <div className="mx_IconizedContextMenu_optionList mx_UserMenu_contextMenu_redRow">
+                        <AccessibleButton onClick={this.onSignOutClick}>
+                            <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconSignOut" />
+                            <span className="mx_IconizedContextMenu_label">{_t("Sign out")}</span>
+                        </AccessibleButton>
                     </div>
                 </div>
             </ContextMenu>
@@ -307,7 +303,8 @@ export default class UserMenu extends React.Component<IProps, IState> {
                     onClick={this.onOpenMenuClick}
                     inputRef={this.buttonRef}
                     label={_t("Account settings")}
-                    isExpanded={this.state.menuDisplayed}
+                    isExpanded={!!this.state.contextMenuPosition}
+                    onContextMenu={this.onContextMenu}
                 >
                     <div className="mx_UserMenu_row">
                         <span className="mx_UserMenu_userAvatarContainer">