Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into joriks/eslint-config

src/@types/common.ts

@@ -17,3 +17,4 @@ limitations under the License.
 // Based on https://stackoverflow.com/a/53229857/3532235
 export type Without<T, U> = {[P in Exclude<keyof T, keyof U>] ? : never};
 export type XOR<T, U> = (T | U) extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
+export type Writeable<T> = { -readonly [P in keyof T]: T[P] };

src/@types/global.d.ts

@@ -19,7 +19,11 @@ import ContentMessages from "../ContentMessages";
 import { IMatrixClientPeg } from "../MatrixClientPeg";
 import ToastStore from "../stores/ToastStore";
 import DeviceListener from "../DeviceListener";
-import { RoomListStore2 } from "../stores/room-list/RoomListStore2";
+import RebrandListener from "../RebrandListener";
+import { RoomListStoreClass } from "../stores/room-list/RoomListStore";
+import { PlatformPeg } from "../PlatformPeg";
+import RoomListLayoutStore from "../stores/room-list/RoomListLayoutStore";
+import {IntegrationManagers} from "../integrations/IntegrationManagers";
 
 declare global {
     interface Window {
@@ -29,15 +33,19 @@ declare global {
             init: () => Promise<void>;
         };
 
-        mxContentMessages: ContentMessages;
-        mxToastStore: ToastStore;
-        mxDeviceListener: DeviceListener;
-        mxRoomListStore2: RoomListStore2;
+        mx_ContentMessages: ContentMessages;
+        mx_ToastStore: ToastStore;
+        mx_DeviceListener: DeviceListener;
+        mx_RebrandListener: RebrandListener;
+        mx_RoomListStore: RoomListStoreClass;
+        mx_RoomListLayoutStore: RoomListLayoutStore;
+        mxPlatformPeg: PlatformPeg;
+        mxIntegrationManagers: typeof IntegrationManagers;
     }
 
     // workaround for https://github.com/microsoft/TypeScript/issues/30933
     interface ObjectConstructor {
-        fromEntries?(xs: [string|number|symbol, any][]): object
+        fromEntries?(xs: [string|number|symbol, any][]): object;
     }
 
     interface Document {
@@ -45,6 +53,10 @@ declare global {
         hasStorageAccess?: () => Promise<boolean>;
     }
 
+    interface Navigator {
+        userLanguage?: string;
+    }
+
     interface StorageEstimate {
         usageDetails?: {[key: string]: number};
     }

src/@types/polyfill.ts

@@ -0,0 +1,38 @@
+/*
+Copyright 2020 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.
+*/
+
+// This is intended to fix re-resizer because of its unguarded `instanceof TouchEvent` checks.
+export function polyfillTouchEvent() {
+    // Firefox doesn't have touch events without touch devices being present, so create a fake
+    // one we can rely on lying about.
+    if (!window.TouchEvent) {
+        // We have no intention of actually using this, so just lie.
+        window.TouchEvent = class TouchEvent extends UIEvent {
+            public get altKey(): boolean { return false; }
+            public get changedTouches(): any { return []; }
+            public get ctrlKey(): boolean { return false; }
+            public get metaKey(): boolean { return false; }
+            public get shiftKey(): boolean { return false; }
+            public get targetTouches(): any { return []; }
+            public get touches(): any { return []; }
+            public get rotation(): number { return 0.0; }
+            public get scale(): number { return 0.0; }
+            constructor(eventType: string, params?: any) {
+                super(eventType, params);
+            }
+        };
+    }
+}

src/Analytics.js

@@ -66,7 +66,10 @@ const customVariables = {
     },
     'App Version': {
         id: 2,
-        expl: _td('The version of Riot'),
+        expl: _td('The version of %(brand)s'),
+        getTextVariables: () => ({
+            brand: SdkConfig.get().brand,
+        }),
         example: '15.0.0',
     },
     'User Type': {
@@ -96,7 +99,10 @@ const customVariables = {
     },
     'Touch Input': {
         id: 8,
-        expl: _td("Whether you're using Riot on a device where touch is the primary input mechanism"),
+        expl: _td("Whether you're using %(brand)s on a device where touch is the primary input mechanism"),
+        getTextVariables: () => ({
+            brand: SdkConfig.get().brand,
+        }),
         example: 'false',
     },
     'Breadcrumbs': {
@@ -106,7 +112,10 @@ const customVariables = {
     },
     'Installed PWA': {
         id: 10,
-        expl: _td("Whether you're using Riot as an installed Progressive Web App"),
+        expl: _td("Whether you're using %(brand)s as an installed Progressive Web App"),
+        getTextVariables: () => ({
+            brand: SdkConfig.get().brand,
+        }),
         example: 'false',
     },
 };
@@ -195,8 +204,11 @@ class Analytics {
 
         this._setVisitVariable('Chosen Language', getCurrentLanguage());
 
-        if (window.location.hostname === 'riot.im') {
+        const hostname = window.location.hostname;
+        if (hostname === 'riot.im') {
             this._setVisitVariable('Instance', window.location.pathname);
+        } else if (hostname.endsWith('.element.io')) {
+            this._setVisitVariable('Instance', hostname.replace('.element.io', ''));
         }
 
         let installedPWA = "unknown";
@@ -356,12 +368,17 @@ class Analytics {
         Modal.createTrackedDialog('Analytics Details', '', ErrorDialog, {
             title: _t('Analytics'),
             description: <div className="mx_AnalyticsModal">
-                <div>
-                    { _t('The information being sent to us to help make Riot better includes:') }
-                </div>
+                <div>{_t('The information being sent to us to help make %(brand)s better includes:', {
+                    brand: SdkConfig.get().brand,
+                })}</div>
                 <table>
                     { rows.map((row) => <tr key={row[0]}>
-                        <td>{ _t(customVariables[row[0]].expl) }</td>
+                        <td>{_t(
+                            customVariables[row[0]].expl,
+                            customVariables[row[0]].getTextVariables ?
+                                customVariables[row[0]].getTextVariables() :
+                                null,
+                        )}</td>
                         { row[1] !== undefined && <td><code>{ row[1] }</code></td> }
                     </tr>) }
                     { otherVariables.map((item, index) =>

src/Avatar.js

@@ -82,7 +82,7 @@ function urlForColor(color) {
 const colorToDataURLCache = new Map();
 
 export function defaultAvatarUrlForString(s) {
-    const defaultColors = ['#03b381', '#368bd6', '#ac3ba8'];
+    const defaultColors = ['#0DBD8B', '#368bd6', '#ac3ba8'];
     let total = 0;
     for (let i = 0; i < s.length; ++i) {
         total += s.charCodeAt(i);

src/BasePlatform.ts

@@ -53,6 +53,10 @@ export default abstract class BasePlatform {
         this.startUpdateCheck = this.startUpdateCheck.bind(this);
     }
 
+    abstract async getConfig(): Promise<{}>;
+
+    abstract getDefaultDeviceDisplayName(): string;
+
     protected onAction = (payload: ActionPayload) => {
         switch (payload.action) {
             case 'on_client_not_viable':

src/CrossSigningManager.js

@@ -40,25 +40,16 @@ export class AccessCancelledError extends Error {
     }
 }
 
-async function confirmToDismiss(name) {
-    let description;
-    if (name === "m.cross_signing.user_signing") {
-        description = _t("If you cancel now, you won't complete verifying the other user.");
-    } else if (name === "m.cross_signing.self_signing") {
-        description = _t("If you cancel now, you won't complete verifying your other session.");
-    } else {
-        description = _t("If you cancel now, you won't complete your operation.");
-    }
-
+async function confirmToDismiss() {
     const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
     const [sure] = await Modal.createDialog(QuestionDialog, {
         title: _t("Cancel entering passphrase?"),
-        description,
-        danger: true,
-        cancelButton: _t("Enter passphrase"),
-        button: _t("Cancel"),
+        description: _t("Are you sure you want to cancel entering passphrase?"),
+        danger: false,
+        button: _t("Go Back"),
+        cancelButton: _t("Cancel"),
     }).finished;
-    return sure;
+    return !sure;
 }
 
 async function getSecretStorageKey({ keys: keyInfos }, ssssItemName) {
@@ -102,7 +93,7 @@ async function getSecretStorageKey({ keys: keyInfos }, ssssItemName) {
         /* options= */ {
             onBeforeClose: async (reason) => {
                 if (reason === "backgroundClick") {
-                    return confirmToDismiss(ssssItemName);
+                    return confirmToDismiss();
                 }
                 return true;
             },

src/HtmlUtils.tsx

@@ -17,10 +17,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
-import ReplyThread from "./components/views/elements/ReplyThread";
-
 import React from 'react';
 import sanitizeHtml from 'sanitize-html';
 import * as linkify from 'linkifyjs';
@@ -28,12 +24,13 @@ import linkifyMatrix from './linkify-matrix';
 import _linkifyElement from 'linkifyjs/element';
 import _linkifyString from 'linkifyjs/string';
 import classNames from 'classnames';
-import {MatrixClientPeg} from './MatrixClientPeg';
+import EMOJIBASE_REGEX from 'emojibase-regex';
 import url from 'url';
 
-import EMOJIBASE_REGEX from 'emojibase-regex';
+import {MatrixClientPeg} from './MatrixClientPeg';
 import {tryTransformPermalinkToLocalHref} from "./utils/permalinks/Permalinks";
 import {SHORTCODE_TO_EMOJI, getEmojiFromUnicode} from "./emoji";
+import ReplyThread from "./components/views/elements/ReplyThread";
 
 linkifyMatrix(linkify);
 
@@ -64,7 +61,7 @@ const PERMITTED_URL_SCHEMES = ['http', 'https', 'ftp', 'mailto', 'magnet'];
  * need emojification.
  * unicodeToImage uses this function.
  */
-function mightContainEmoji(str) {
+function mightContainEmoji(str: string) {
     return SURROGATE_PAIR_PATTERN.test(str) || SYMBOL_PATTERN.test(str);
 }
 
@@ -74,7 +71,7 @@ function mightContainEmoji(str) {
  * @param {String} char The emoji character
  * @return {String} The shortcode (such as :thumbup:)
  */
-export function unicodeToShortcode(char) {
+export function unicodeToShortcode(char: string) {
     const data = getEmojiFromUnicode(char);
     return (data && data.shortcodes ? `:${data.shortcodes[0]}:` : '');
 }
@@ -85,7 +82,7 @@ export function unicodeToShortcode(char) {
  * @param {String} shortcode The shortcode (such as :thumbup:)
  * @return {String} The emoji character; null if none exists
  */
-export function shortcodeToUnicode(shortcode) {
+export function shortcodeToUnicode(shortcode: string) {
     shortcode = shortcode.slice(1, shortcode.length - 1);
     const data = SHORTCODE_TO_EMOJI.get(shortcode);
     return data ? data.unicode : null;
@@ -100,7 +97,7 @@ export function processHtmlForSending(html: string): string {
     }
 
     let contentHTML = "";
-    for (let i=0; i < contentDiv.children.length; i++) {
+    for (let i = 0; i < contentDiv.children.length; i++) {
         const element = contentDiv.children[i];
         if (element.tagName.toLowerCase() === 'p') {
             contentHTML += element.innerHTML;
@@ -122,12 +119,19 @@ export function processHtmlForSending(html: string): string {
  * Given an untrusted HTML string, return a React node with an sanitized version
  * of that HTML.
  */
-export function sanitizedHtmlNode(insaneHtml) {
+export function sanitizedHtmlNode(insaneHtml: string) {
     const saneHtml = sanitizeHtml(insaneHtml, sanitizeHtmlParams);
 
     return <div dangerouslySetInnerHTML={{ __html: saneHtml }} dir="auto" />;
 }
 
+export function sanitizedHtmlNodeInnerText(insaneHtml: string) {
+    const saneHtml = sanitizeHtml(insaneHtml, sanitizeHtmlParams);
+    const contentDiv = document.createElement("div");
+    contentDiv.innerHTML = saneHtml;
+    return contentDiv.innerText;
+}
+
 /**
  * Tests if a URL from an untrusted source may be safely put into the DOM
  * The biggest threat here is javascript: URIs.
@@ -136,7 +140,7 @@ export function sanitizedHtmlNode(insaneHtml) {
  * other places we need to sanitise URLs.
  * @return true if permitted, otherwise false
  */
-export function isUrlPermitted(inputUrl) {
+export function isUrlPermitted(inputUrl: string) {
     try {
         const parsed = url.parse(inputUrl);
         if (!parsed.protocol) return false;
@@ -147,9 +151,9 @@ export function isUrlPermitted(inputUrl) {
     }
 }
 
-const transformTags = { // custom to matrix
+const transformTags: sanitizeHtml.IOptions["transformTags"] = { // custom to matrix
     // add blank targets to all hyperlinks except vector URLs
-    'a': function(tagName, attribs) {
+    'a': function(tagName: string, attribs: sanitizeHtml.Attributes) {
         if (attribs.href) {
             attribs.target = '_blank'; // by default
 
@@ -162,7 +166,7 @@ const transformTags = { // custom to matrix
         attribs.rel = 'noreferrer noopener'; // https://mathiasbynens.github.io/rel-noopener/
         return { tagName, attribs };
     },
-    'img': function(tagName, attribs) {
+    'img': function(tagName: string, attribs: sanitizeHtml.Attributes) {
         // Strip out imgs that aren't `mxc` here instead of using allowedSchemesByTag
         // because transformTags is used _before_ we filter by allowedSchemesByTag and
         // we don't want to allow images with `https?` `src`s.
@@ -176,7 +180,7 @@ const transformTags = { // custom to matrix
         );
         return { tagName, attribs };
     },
-    'code': function(tagName, attribs) {
+    'code': function(tagName: string, attribs: sanitizeHtml.Attributes) {
         if (typeof attribs.class !== 'undefined') {
             // Filter out all classes other than ones starting with language- for syntax highlighting.
             const classes = attribs.class.split(/\s/).filter(function(cl) {
@@ -186,7 +190,7 @@ const transformTags = { // custom to matrix
         }
         return { tagName, attribs };
     },
-    '*': function(tagName, attribs) {
+    '*': function(tagName: string, attribs: sanitizeHtml.Attributes) {
         // Delete any style previously assigned, style is an allowedTag for font and span
         // because attributes are stripped after transforming
         delete attribs.style;
@@ -220,7 +224,7 @@ const transformTags = { // custom to matrix
     },
 };
 
-const sanitizeHtmlParams = {
+const sanitizeHtmlParams: sanitizeHtml.IOptions = {
     allowedTags: [
         'font', // custom to matrix for IRC-style font coloring
         'del', // for markdown
@@ -247,16 +251,16 @@ const sanitizeHtmlParams = {
 };
 
 // this is the same as the above except with less rewriting
-const composerSanitizeHtmlParams = Object.assign({}, sanitizeHtmlParams);
-composerSanitizeHtmlParams.transformTags = {
-    'code': transformTags['code'],
-    '*': transformTags['*'],
+const composerSanitizeHtmlParams: sanitizeHtml.IOptions = {
+    ...sanitizeHtmlParams,
+    transformTags: {
+        'code': transformTags['code'],
+        '*': transformTags['*'],
+    },
 };
 
-class BaseHighlighter {
-    constructor(highlightClass, highlightLink) {
-        this.highlightClass = highlightClass;
-        this.highlightLink = highlightLink;
+abstract class BaseHighlighter<T extends React.ReactNode> {
+    constructor(public highlightClass: string, public highlightLink: string) {
     }
 
     /**
@@ -270,47 +274,49 @@ class BaseHighlighter {
      * returns a list of results (strings for HtmlHighligher, react nodes for
      * TextHighlighter).
      */
-    applyHighlights(safeSnippet, safeHighlights) {
+    public applyHighlights(safeSnippet: string, safeHighlights: string[]): T[] {
         let lastOffset = 0;
         let offset;
-        let nodes = [];
+        let nodes: T[] = [];
 
         const safeHighlight = safeHighlights[0];
         while ((offset = safeSnippet.toLowerCase().indexOf(safeHighlight.toLowerCase(), lastOffset)) >= 0) {
             // handle preamble
             if (offset > lastOffset) {
-                var subSnippet = safeSnippet.substring(lastOffset, offset);
-                nodes = nodes.concat(this._applySubHighlights(subSnippet, safeHighlights));
+                const subSnippet = safeSnippet.substring(lastOffset, offset);
+                nodes = nodes.concat(this.applySubHighlights(subSnippet, safeHighlights));
             }
 
             // do highlight. use the original string rather than safeHighlight
             // to preserve the original casing.
             const endOffset = offset + safeHighlight.length;
-            nodes.push(this._processSnippet(safeSnippet.substring(offset, endOffset), true));
+            nodes.push(this.processSnippet(safeSnippet.substring(offset, endOffset), true));
 
             lastOffset = endOffset;
         }
 
         // handle postamble
         if (lastOffset !== safeSnippet.length) {
-            subSnippet = safeSnippet.substring(lastOffset, undefined);
-            nodes = nodes.concat(this._applySubHighlights(subSnippet, safeHighlights));
+            const subSnippet = safeSnippet.substring(lastOffset, undefined);
+            nodes = nodes.concat(this.applySubHighlights(subSnippet, safeHighlights));
         }
         return nodes;
     }
 
-    _applySubHighlights(safeSnippet, safeHighlights) {
+    private applySubHighlights(safeSnippet: string, safeHighlights: string[]): T[] {
         if (safeHighlights[1]) {
             // recurse into this range to check for the next set of highlight matches
             return this.applyHighlights(safeSnippet, safeHighlights.slice(1));
         } else {
             // no more highlights to be found, just return the unhighlighted string
-            return [this._processSnippet(safeSnippet, false)];
+            return [this.processSnippet(safeSnippet, false)];
         }
     }
+
+    protected abstract processSnippet(snippet: string, highlight: boolean): T;
 }
 
-class HtmlHighlighter extends BaseHighlighter {
+class HtmlHighlighter extends BaseHighlighter<string> {
     /* highlight the given snippet if required
      *
      * snippet: content of the span; must have been sanitised
@@ -318,28 +324,23 @@ class HtmlHighlighter extends BaseHighlighter {
      *
      * returns an HTML string
      */
-    _processSnippet(snippet, highlight) {
+    protected processSnippet(snippet: string, highlight: boolean): string {
         if (!highlight) {
             // nothing required here
             return snippet;
         }
 
-        let span = "<span class=\""+this.highlightClass+"\">"
-            + snippet + "</span>";
+        let span = `<span class="${this.highlightClass}">${snippet}</span>`;
 
         if (this.highlightLink) {
-            span = "<a href=\""+encodeURI(this.highlightLink)+"\">"
-                +span+"</a>";
+            span = `<a href="${encodeURI(this.highlightLink)}">${span}</a>`;
         }
         return span;
     }
 }
 
-class TextHighlighter extends BaseHighlighter {
-    constructor(highlightClass, highlightLink) {
-        super(highlightClass, highlightLink);
-        this._key = 0;
-    }
+class TextHighlighter extends BaseHighlighter<React.ReactNode> {
+    private key = 0;
 
     /* create a <span> node to hold the given content
      *
@@ -348,13 +349,12 @@ class TextHighlighter extends BaseHighlighter {
      *
      * returns a React node
      */
-    _processSnippet(snippet, highlight) {
-        const key = this._key++;
+    protected processSnippet(snippet: string, highlight: boolean): React.ReactNode {
+        const key = this.key++;
 
-        let node =
-            <span key={key} className={highlight ? this.highlightClass : null}>
-                { snippet }
-            </span>;
+        let node = <span key={key} className={highlight ? this.highlightClass : null}>
+            { snippet }
+        </span>;
 
         if (highlight && this.highlightLink) {
             node = <a key={key} href={this.highlightLink}>{ node }</a>;
@@ -364,6 +364,20 @@ class TextHighlighter extends BaseHighlighter {
     }
 }
 
+interface IContent {
+    format?: string;
+    formatted_body?: string;
+    body: string;
+}
+
+interface IOpts {
+    highlightLink?: string;
+    disableBigEmoji?: boolean;
+    stripReplyFallback?: boolean;
+    returnString?: boolean;
+    forComposerQuote?: boolean;
+    ref?: React.Ref<any>;
+}
 
 /* turn a matrix event body into html
  *
@@ -378,7 +392,7 @@ class TextHighlighter extends BaseHighlighter {
  * opts.forComposerQuote: optional param to lessen the url rewriting done by sanitization, for quoting into composer
  * opts.ref: React ref to attach to any React components returned (not compatible with opts.returnString)
  */
-export function bodyToHtml(content, highlights, opts={}) {
+export function bodyToHtml(content: IContent, highlights: string[], opts: IOpts = {}) {
     const isHtmlMessage = content.format === "org.matrix.custom.html" && content.formatted_body;
     let bodyHasEmoji = false;
 
@@ -387,9 +401,9 @@ export function bodyToHtml(content, highlights, opts={}) {
         sanitizeParams = composerSanitizeHtmlParams;
     }
 
-    let strippedBody;
-    let safeBody;
-    let isDisplayedWithHtml;
+    let strippedBody: string;
+    let safeBody: string;
+    let isDisplayedWithHtml: boolean;
     // XXX: We sanitize the HTML whilst also highlighting its text nodes, to avoid accidentally trying
     // to highlight HTML tags themselves.  However, this does mean that we don't highlight textnodes which
     // are interrupted by HTML tags (not that we did before) - e.g. foo<span/>bar won't get highlighted
@@ -471,7 +485,7 @@ export function bodyToHtml(content, highlights, opts={}) {
  * @param {object} [options] Options for linkifyString. Default: linkifyMatrix.options
  * @returns {string} Linkified string
  */
-export function linkifyString(str, options = linkifyMatrix.options) {
+export function linkifyString(str: string, options = linkifyMatrix.options) {
     return _linkifyString(str, options);
 }
 
@@ -482,7 +496,7 @@ export function linkifyString(str, options = linkifyMatrix.options) {
  * @param {object} [options] Options for linkifyElement. Default: linkifyMatrix.options
  * @returns {object}
  */
-export function linkifyElement(element, options = linkifyMatrix.options) {
+export function linkifyElement(element: HTMLElement, options = linkifyMatrix.options) {
     return _linkifyElement(element, options);
 }
 
@@ -493,7 +507,7 @@ export function linkifyElement(element, options = linkifyMatrix.options) {
  * @param {object} [options] Options for linkifyString. Default: linkifyMatrix.options
  * @returns {string}
  */
-export function linkifyAndSanitizeHtml(dirtyHtml, options = linkifyMatrix.options) {
+export function linkifyAndSanitizeHtml(dirtyHtml: string, options = linkifyMatrix.options) {
     return sanitizeHtml(linkifyString(dirtyHtml, options), sanitizeHtmlParams);
 }
 
@@ -504,7 +518,7 @@ export function linkifyAndSanitizeHtml(dirtyHtml, options = linkifyMatrix.option
  * @param {Node} node
  * @returns {bool}
  */
-export function checkBlockNode(node) {
+export function checkBlockNode(node: Node) {
     switch (node.nodeName) {
         case "H1":
         case "H2":

src/Lifecycle.js

@@ -40,6 +40,7 @@ import ToastStore from "./stores/ToastStore";
 import {IntegrationManagers} from "./integrations/IntegrationManagers";
 import {Mjolnir} from "./mjolnir/Mjolnir";
 import DeviceListener from "./DeviceListener";
+import RebrandListener from "./RebrandListener";
 import {Jitsi} from "./widgets/Jitsi";
 import {SSO_HOMESERVER_URL_KEY, SSO_ID_SERVER_URL_KEY} from "./BasePlatform";
 
@@ -627,6 +628,8 @@ async function startMatrixClient(startSyncing=true) {
     // Now that we have a MatrixClientPeg, update the Jitsi info
     await Jitsi.getInstance().start();
 
+    RebrandListener.sharedInstance().start();
+
     // dispatch that we finished starting up to wire up any other bits
     // of the matrix client that cannot be set prior to starting up.
     dis.dispatch({action: 'client_started'});
@@ -688,6 +691,7 @@ export function stopMatrixClient(unsetClient=true) {
     IntegrationManagers.sharedInstance().stopWatching();
     Mjolnir.sharedInstance().stop();
     DeviceListener.sharedInstance().stop();
+    RebrandListener.sharedInstance().stop();
     if (DMRoomMap.shared()) DMRoomMap.shared().stop();
     EventIndexPeg.stop();
     const cli = MatrixClientPeg.get();

src/Notifier.js

@@ -2,6 +2,7 @@
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
 Copyright 2017 New Vector Ltd
+Copyright 2020 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.
@@ -16,7 +17,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {MatrixClientPeg} from './MatrixClientPeg';
+import { MatrixClientPeg } from './MatrixClientPeg';
+import SdkConfig from './SdkConfig';
 import PlatformPeg from './PlatformPeg';
 import * as TextForEvent from './TextForEvent';
 import Analytics from './Analytics';
@@ -226,10 +228,11 @@ const Notifier = {
                 if (result !== 'granted') {
                     // The permission request was dismissed or denied
                     // TODO: Support alternative branding in messaging
+                    const brand = SdkConfig.get().brand;
                     const description = result === 'denied'
-                        ? _t('Riot does not have permission to send you notifications - ' +
-                            'please check your browser settings')
-                        : _t('Riot was not given permission to send notifications - please try again');
+                        ? _t('%(brand)s does not have permission to send you notifications - ' +
+                            'please check your browser settings', { brand })
+                        : _t('%(brand)s was not given permission to send notifications - please try again', { brand });
                     const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
                     Modal.createTrackedDialog('Unable to enable Notifications', result, ErrorDialog, {
                         title: _t('Unable to enable Notifications'),

src/PlatformPeg.ts

@@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2020 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.
@@ -14,6 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import BasePlatform from "./BasePlatform";
+
 /*
  * Holds the current Platform object used by the code to do anything
  * specific to the platform we're running on (eg. web, electron)
@@ -21,10 +24,8 @@ limitations under the License.
  * This allows the app layer to set a Platform without necessarily
  * having to have a MatrixChat object
  */
-class PlatformPeg {
-    constructor() {
-        this.platform = null;
-    }
+export class PlatformPeg {
+    platform: BasePlatform = null;
 
     /**
      * Returns the current Platform object for the application.
@@ -39,12 +40,12 @@ class PlatformPeg {
      * application.
      * This should be an instance of a class extending BasePlatform.
      */
-    set(plaf) {
+    set(plaf: BasePlatform) {
         this.platform = plaf;
     }
 }
 
-if (!global.mxPlatformPeg) {
-    global.mxPlatformPeg = new PlatformPeg();
+if (!window.mxPlatformPeg) {
+    window.mxPlatformPeg = new PlatformPeg();
 }
-export default global.mxPlatformPeg;
+export default window.mxPlatformPeg;

src/RebrandListener.tsx

@@ -0,0 +1,173 @@
+/*
+Copyright 2020 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 SdkConfig from "./SdkConfig";
+import ToastStore from "./stores/ToastStore";
+import GenericToast from "./components/views/toasts/GenericToast";
+import RebrandDialog from "./components/views/dialogs/RebrandDialog";
+import { RebrandDialogKind } from "./components/views/dialogs/RebrandDialog";
+import Modal from './Modal';
+import { _t } from './languageHandler';
+
+const TOAST_KEY = 'rebrand';
+const NAG_INTERVAL = 24 * 60 * 60 * 1000;
+
+function getRedirectUrl(url): string {
+    const redirectUrl = new URL(url);
+    redirectUrl.hash = '';
+
+    if (SdkConfig.get()['redirectToNewBrandUrl']) {
+        const newUrl = new URL(SdkConfig.get()['redirectToNewBrandUrl']);
+        if (url.hostname !== newUrl.hostname || url.pathname !== newUrl.pathname) {
+            redirectUrl.hostname = newUrl.hostname;
+            redirectUrl.pathname = newUrl.pathname;
+            return redirectUrl.toString();
+        }
+        return null;
+    } else if (url.hostname === 'riot.im') {
+        if (url.pathname.startsWith('/app')) {
+            redirectUrl.hostname = 'app.element.io';
+            redirectUrl.pathname = '/';
+        } else if (url.pathname.startsWith('/staging')) {
+            redirectUrl.hostname = 'staging.element.io';
+            redirectUrl.pathname = '/';
+        } else if (url.pathname.startsWith('/develop')) {
+            redirectUrl.hostname = 'develop.element.io';
+            redirectUrl.pathname = '/';
+        }
+
+        return redirectUrl.href;
+    } else if (url.hostname.endsWith('.riot.im')) {
+        redirectUrl.hostname = url.hostname.substr(0, url.hostname.length - '.riot.im'.length) + '.element.io';
+        return redirectUrl.href;
+    } else {
+        return null;
+    }
+}
+
+/**
+ * Shows toasts informing the user that the name of the app has changed and,
+ * potentially, that they should head to a different URL and log in there
+ */
+export default class RebrandListener {
+    private _reshowTimer?: number;
+    private nagAgainAt?: number = null;
+
+    static sharedInstance() {
+        if (!window.mx_RebrandListener) window.mx_RebrandListener = new RebrandListener();
+        return window.mx_RebrandListener;
+    }
+
+    constructor() {
+        this._reshowTimer = null;
+    }
+
+    start() {
+        this.recheck();
+    }
+
+    stop() {
+        if (this._reshowTimer) {
+            clearTimeout(this._reshowTimer);
+            this._reshowTimer = null;
+        }
+    }
+
+    onNagToastLearnMore = async () => {
+        const [doneClicked] = await Modal.createDialog(RebrandDialog, {
+            kind: RebrandDialogKind.NAG,
+            targetUrl: getRedirectUrl(window.location),
+        }).finished;
+        if (doneClicked) {
+            // open in new tab: they should come back here & log out
+            window.open(getRedirectUrl(window.location), '_blank');
+        }
+
+        // whatever the user clicks, we go away & nag again after however long:
+        // If they went to the new URL, we want to nag them to log out if they
+        // come back to this tab, and if they clicked, 'remind me later' we want
+        // to, well, remind them later.
+        this.nagAgainAt = Date.now() + NAG_INTERVAL;
+        this.recheck();
+    };
+
+    onOneTimeToastLearnMore = async () => {
+        const [doneClicked] = await Modal.createDialog(RebrandDialog, {
+            kind: RebrandDialogKind.ONE_TIME,
+        }).finished;
+        if (doneClicked) {
+            localStorage.setItem('mx_rename_dialog_dismissed', 'true');
+            this.recheck();
+        }
+    };
+
+    onNagTimerFired = () => {
+        this._reshowTimer = null;
+        this.nagAgainAt = null;
+        this.recheck();
+    };
+
+    private async recheck() {
+        // There are two types of toast/dialog we show: a 'one time' informing the user that
+        // the app is now called a different thing but no action is required from them (they
+        // may need to look for a different name name/icon to launch the app but don't need to
+        // log in again) and a nag toast where they need to log in to the app on a different domain.
+        let nagToast = false;
+        let oneTimeToast = false;
+
+        if (getRedirectUrl(window.location)) {
+            if (!this.nagAgainAt) {
+                // if we have redirectUrl, show the nag toast
+                nagToast = true;
+            }
+        } else {
+            // otherwise we show the 'one time' toast / dialog
+            const renameDialogDismissed = localStorage.getItem('mx_rename_dialog_dismissed');
+            if (renameDialogDismissed !== 'true') {
+                oneTimeToast = true;
+            }
+        }
+
+        if (nagToast || oneTimeToast) {
+            let description;
+            if (nagToast) {
+                description = _t("Use your account to sign in to the latest version");
+            } else {
+                description = _t("We’re excited to announce Riot is now Element");
+            }
+
+            ToastStore.sharedInstance().addOrReplaceToast({
+                key: TOAST_KEY,
+                title: _t("Riot is now Element!"),
+                icon: 'element_logo',
+                props: {
+                    description,
+                    acceptLabel: _t("Learn More"),
+                    onAccept: nagToast ? this.onNagToastLearnMore : this.onOneTimeToastLearnMore,
+                },
+                component: GenericToast,
+                priority: 20,
+            });
+        } else {
+            ToastStore.sharedInstance().dismissToast(TOAST_KEY);
+        }
+
+        if (!this._reshowTimer && this.nagAgainAt) {
+            // XXX: Our build system picks up NodeJS bindings when we need browser bindings.
+            this._reshowTimer = setTimeout(this.onNagTimerFired, (this.nagAgainAt - Date.now()) + 100) as any as number;
+        }
+    }
+}

src/RoomNotifsTypes.ts

@@ -0,0 +1,24 @@
+/*
+Copyright 2020 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 {
+    ALL_MESSAGES,
+    ALL_MESSAGES_LOUD,
+    MENTIONS_ONLY,
+    MUTE,
+} from "./RoomNotifs";
+
+export type Volume = ALL_MESSAGES_LOUD | ALL_MESSAGES | MENTIONS_ONLY | MUTE;

src/SdkConfig.ts

@@ -1,6 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 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.
@@ -20,6 +20,8 @@ export interface ConfigOptions {
 }
 
 export const DEFAULTS: ConfigOptions = {
+    // Brand name of the app
+    brand: "Element",
     // URL to a page we show in an iframe to configure integrations
     integrations_ui_url: "https://scalar.vector.im/",
     // Base URL to the REST interface of the integrations server

src/SlashCommands.tsx

@@ -43,6 +43,7 @@ import SdkConfig from "./SdkConfig";
 import { ensureDMExists } from "./createRoom";
 import { ViewUserPayload } from "./dispatcher/payloads/ViewUserPayload";
 import { Action } from "./dispatcher/actions";
+import { EffectiveMembership, getEffectiveMembership } from "./utils/membership";
 
 // XXX: workaround for https://github.com/microsoft/TypeScript/issues/31816
 interface HTMLInputEvent extends Event {
@@ -495,8 +496,7 @@ export const Commands = [
                     });
                     return success();
                 } else if (params[0][0] === '!') {
-                    const roomId = params[0];
-                    const viaServers = params.splice(0);
+                    const [roomId, ...viaServers] = params;
 
                     dis.dispatch({
                         action: 'view_room',
@@ -661,7 +661,7 @@ export const Commands = [
             if (args) {
                 const cli = MatrixClientPeg.get();
 
-                const matches = args.match(/^(\S+)$/);
+                const matches = args.match(/^(@[^:]+:\S+)$/);
                 if (matches) {
                     const userId = matches[1];
                     const ignoredUsers = cli.getIgnoredUsers();
@@ -691,7 +691,7 @@ export const Commands = [
             if (args) {
                 const cli = MatrixClientPeg.get();
 
-                const matches = args.match(/^(\S+)$/);
+                const matches = args.match(/(^@[^:]+:\S+$)/);
                 if (matches) {
                     const userId = matches[1];
                     const ignoredUsers = cli.getIgnoredUsers();
@@ -731,9 +731,11 @@ export const Commands = [
                         const cli = MatrixClientPeg.get();
                         const room = cli.getRoom(roomId);
                         if (!room) return reject(_t("Command failed"));
-
+                        const member = room.getMember(args);
+                        if (!member || getEffectiveMembership(member.membership) === EffectiveMembership.Leave) {
+                            return reject(_t("Could not find user in room"));
+                        }
                         const powerLevelEvent = room.currentState.getStateEvents('m.room.power_levels', '');
-                        if (!powerLevelEvent.getContent().users[args]) return reject(_t("Could not find user in room"));
                         return success(cli.setPowerLevel(roomId, userId, powerLevel, powerLevelEvent));
                     }
                 }
@@ -1047,7 +1049,7 @@ export function parseCommandString(input) {
     // trim any trailing whitespace, as it can confuse the parser for
     // IRC-style commands
     input = input.replace(/\s+$/, '');
-    if (input[0] !== '/') return null; // not a command
+    if (input[0] !== '/') return {}; // not a command
 
     const bits = input.match(/^(\S+?)(?: +((.|\n)*))?$/);
     let cmd;

src/accessibility/RovingTabIndex.tsx

@@ -22,9 +22,12 @@ import React, {
     useMemo,
     useRef,
     useReducer,
+    Reducer,
+    Dispatch,
 } from "react";
-import PropTypes from "prop-types";
+
 import {Key} from "../Keyboard";
+import {FocusHandler, Ref} from "./roving/types";
 
 /**
  * Module to simplify implementing the Roving TabIndex accessibility technique
@@ -41,7 +44,17 @@ import {Key} from "../Keyboard";
 
 const DOCUMENT_POSITION_PRECEDING = 2;
 
-const RovingTabIndexContext = createContext({
+export interface IState {
+    activeRef: Ref;
+    refs: Ref[];
+}
+
+interface IContext {
+    state: IState;
+    dispatch: Dispatch<IAction>;
+}
+
+const RovingTabIndexContext = createContext<IContext>({
     state: {
         activeRef: null,
         refs: [], // list of refs in DOM order
@@ -50,16 +63,22 @@ const RovingTabIndexContext = createContext({
 });
 RovingTabIndexContext.displayName = "RovingTabIndexContext";
 
-// TODO use a TypeScript type here
-const types = {
-    REGISTER: "REGISTER",
-    UNREGISTER: "UNREGISTER",
-    SET_FOCUS: "SET_FOCUS",
-};
+enum Type {
+    Register = "REGISTER",
+    Unregister = "UNREGISTER",
+    SetFocus = "SET_FOCUS",
+}
 
-const reducer = (state, action) => {
+interface IAction {
+    type: Type;
+    payload: {
+        ref: Ref;
+    };
+}
+
+const reducer = (state: IState, action: IAction) => {
     switch (action.type) {
-        case types.REGISTER: {
+        case Type.Register: {
             if (state.refs.length === 0) {
                 // Our list of refs was empty, set activeRef to this first item
                 return {
@@ -92,7 +111,7 @@ const reducer = (state, action) => {
                 ],
             };
         }
-        case types.UNREGISTER: {
+        case Type.Unregister: {
             // filter out the ref which we are removing
             const refs = state.refs.filter(r => r !== action.payload.ref);
 
@@ -117,7 +136,7 @@ const reducer = (state, action) => {
                 refs,
             };
         }
-        case types.SET_FOCUS: {
+        case Type.SetFocus: {
             // update active ref
             return {
                 ...state,
@@ -129,13 +148,21 @@ const reducer = (state, action) => {
     }
 };
 
-export const RovingTabIndexProvider = ({children, handleHomeEnd, onKeyDown}) => {
-    const [state, dispatch] = useReducer(reducer, {
+interface IProps {
+    handleHomeEnd?: boolean;
+    children(renderProps: {
+        onKeyDownHandler(ev: React.KeyboardEvent);
+    });
+    onKeyDown?(ev: React.KeyboardEvent, state: IState);
+}
+
+export const RovingTabIndexProvider: React.FC<IProps> = ({children, handleHomeEnd, onKeyDown}) => {
+    const [state, dispatch] = useReducer<Reducer<IState, IAction>>(reducer, {
         activeRef: null,
         refs: [],
     });
 
-    const context = useMemo(() => ({state, dispatch}), [state]);
+    const context = useMemo<IContext>(() => ({state, dispatch}), [state]);
 
     const onKeyDownHandler = useCallback((ev) => {
         let handled = false;
@@ -163,7 +190,7 @@ export const RovingTabIndexProvider = ({children, handleHomeEnd, onKeyDown}) =>
             ev.preventDefault();
             ev.stopPropagation();
         } else if (onKeyDown) {
-            return onKeyDown(ev);
+            return onKeyDown(ev, state);
         }
     }, [context.state, onKeyDown, handleHomeEnd]);
 
@@ -171,19 +198,15 @@ export const RovingTabIndexProvider = ({children, handleHomeEnd, onKeyDown}) =>
         { children({onKeyDownHandler}) }
     </RovingTabIndexContext.Provider>;
 };
-RovingTabIndexProvider.propTypes = {
-    handleHomeEnd: PropTypes.bool,
-    onKeyDown: PropTypes.func,
-};
 
 // Hook to register a roving tab index
 // inputRef parameter specifies the ref to use
 // onFocus should be called when the index gained focus in any manner
 // isActive should be used to set tabIndex in a manner such as `tabIndex={isActive ? 0 : -1}`
 // ref should be passed to a DOM node which will be used for DOM compareDocumentPosition
-export const useRovingTabIndex = (inputRef) => {
+export const useRovingTabIndex = (inputRef: Ref): [FocusHandler, boolean, Ref] => {
     const context = useContext(RovingTabIndexContext);
-    let ref = useRef(null);
+    let ref = useRef<HTMLElement>(null);
 
     if (inputRef) {
         // if we are given a ref, use it instead of ours
@@ -193,13 +216,13 @@ export const useRovingTabIndex = (inputRef) => {
     // setup (after refs)
     useLayoutEffect(() => {
         context.dispatch({
-            type: types.REGISTER,
+            type: Type.Register,
             payload: {ref},
         });
         // teardown
         return () => {
             context.dispatch({
-                type: types.UNREGISTER,
+                type: Type.Unregister,
                 payload: {ref},
             });
         };
@@ -207,7 +230,7 @@ export const useRovingTabIndex = (inputRef) => {
 
     const onFocus = useCallback(() => {
         context.dispatch({
-            type: types.SET_FOCUS,
+            type: Type.SetFocus,
             payload: {ref},
         });
     }, [ref, context]);
@@ -216,9 +239,7 @@ export const useRovingTabIndex = (inputRef) => {
     return [onFocus, isActive, ref];
 };
 
-// Wrapper to allow use of useRovingTabIndex outside of React Functional Components.
-export const RovingTabIndexWrapper = ({children, inputRef}) => {
-    const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
-    return children({onFocus, isActive, ref});
-};
-
+// re-export the semantic helper components for simplicity
+export {RovingTabIndexWrapper} from "./roving/RovingTabIndexWrapper";
+export {RovingAccessibleButton} from "./roving/RovingAccessibleButton";
+export {RovingAccessibleTooltipButton} from "./roving/RovingAccessibleTooltipButton";

src/accessibility/Toolbar.tsx

@@ -0,0 +1,69 @@
+/*
+Copyright 2020 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 React from "react";
+
+import {IState, RovingTabIndexProvider} from "./RovingTabIndex";
+import {Key} from "../Keyboard";
+
+interface IProps extends Omit<React.HTMLProps<HTMLDivElement>, "onKeyDown"> {
+}
+
+// This component implements the Toolbar design pattern from the WAI-ARIA Authoring Practices guidelines.
+// https://www.w3.org/TR/wai-aria-practices-1.1/#toolbar
+// All buttons passed in children must use RovingTabIndex to set `onFocus`, `isActive`, `ref`
+const Toolbar: React.FC<IProps> = ({children, ...props}) => {
+    const onKeyDown = (ev: React.KeyboardEvent, state: IState) => {
+        const target = ev.target as HTMLElement;
+        let handled = true;
+
+        switch (ev.key) {
+            case Key.ARROW_UP:
+            case Key.ARROW_DOWN:
+                if (target.hasAttribute('aria-haspopup')) {
+                    target.click();
+                }
+                break;
+
+            case Key.ARROW_LEFT:
+            case Key.ARROW_RIGHT:
+                if (state.refs.length > 0) {
+                    const i = state.refs.findIndex(r => r === state.activeRef);
+                    const delta = ev.key === Key.ARROW_RIGHT ? 1 : -1;
+                    state.refs.slice((i + delta) % state.refs.length)[0].current.focus();
+                }
+                break;
+
+            // HOME and END are handled by RovingTabIndexProvider
+
+            default:
+                handled = false;
+        }
+
+        if (handled) {
+            ev.preventDefault();
+            ev.stopPropagation();
+        }
+    };
+
+    return <RovingTabIndexProvider handleHomeEnd={true} onKeyDown={onKeyDown}>
+        {({onKeyDownHandler}) => <div {...props} onKeyDown={onKeyDownHandler} role="toolbar">
+            { children }
+        </div>}
+    </RovingTabIndexProvider>;
+};
+
+export default Toolbar;

src/accessibility/context_menu/ContextMenuButton.tsx

@@ -0,0 +1,51 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 New Vector Ltd
+Copyright 2019 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 React from "react";
+
+import AccessibleButton from "../../components/views/elements/AccessibleButton";
+
+interface IProps extends React.ComponentProps<typeof AccessibleButton> {
+    label?: string;
+    // whether or not the context menu is currently open
+    isExpanded: boolean;
+}
+
+// Semantic component for representing the AccessibleButton which launches a <ContextMenu />
+export const ContextMenuButton: React.FC<IProps> = ({
+    label,
+    isExpanded,
+    children,
+    onClick,
+    onContextMenu,
+    ...props
+}) => {
+    return (
+        <AccessibleButton
+            {...props}
+            onClick={onClick}
+            onContextMenu={onContextMenu || onClick}
+            title={label}
+            aria-label={label}
+            aria-haspopup={true}
+            aria-expanded={isExpanded}
+        >
+            { children }
+        </AccessibleButton>
+    );
+};

src/accessibility/context_menu/ContextMenuTooltipButton.tsx

@@ -0,0 +1,47 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 New Vector Ltd
+Copyright 2019 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 React from "react";
+
+import AccessibleTooltipButton from "../../components/views/elements/AccessibleTooltipButton";
+
+interface IProps extends React.ComponentProps<typeof AccessibleTooltipButton>  {
+    // whether or not the context menu is currently open
+    isExpanded: boolean;
+}
+
+// Semantic component for representing the AccessibleButton which launches a <ContextMenu />
+export const ContextMenuTooltipButton: React.FC<IProps> = ({
+    isExpanded,
+    children,
+    onClick,
+    onContextMenu,
+    ...props
+}) => {
+    return (
+        <AccessibleTooltipButton
+            {...props}
+            onClick={onClick}
+            onContextMenu={onContextMenu || onClick}
+            aria-haspopup={true}
+            aria-expanded={isExpanded}
+        >
+            { children }
+        </AccessibleTooltipButton>
+    );
+};

src/accessibility/context_menu/MenuGroup.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 New Vector Ltd
 Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
@@ -15,21 +16,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import createReactClass from 'create-react-class';
+import React from "react";
 
-export default createReactClass({
-    displayName: 'RoomDropTarget',
+interface IProps extends React.HTMLAttributes<HTMLDivElement> {
+    label: string;
+}
 
-    render: function() {
-        return (
-            <div className="mx_RoomDropTarget_container">
-                <div className="mx_RoomDropTarget">
-                    <div className="mx_RoomDropTarget_label">
-                        { this.props.label }
-                    </div>
-                </div>
-            </div>
-        );
-    },
-});
+// Semantic component for representing a role=group for grouping menu radios/checkboxes
+export const MenuGroup: React.FC<IProps> = ({children, label, ...props}) => {
+    return <div {...props} role="group" aria-label={label}>
+        { children }
+    </div>;
+};

src/accessibility/context_menu/MenuItem.tsx

@@ -0,0 +1,35 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 New Vector Ltd
+Copyright 2019 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 React from "react";
+
+import AccessibleButton from "../../components/views/elements/AccessibleButton";
+
+interface IProps extends React.ComponentProps<typeof AccessibleButton> {
+    label?: string;
+}
+
+// Semantic component for representing a role=menuitem
+export const MenuItem: React.FC<IProps> = ({children, label, ...props}) => {
+    return (
+        <AccessibleButton {...props} role="menuitem" tabIndex={-1} aria-label={label}>
+            { children }
+        </AccessibleButton>
+    );
+};
+

src/accessibility/context_menu/MenuItemCheckbox.tsx

@@ -0,0 +1,43 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 New Vector Ltd
+Copyright 2019 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 React from "react";
+
+import AccessibleButton from "../../components/views/elements/AccessibleButton";
+
+interface IProps extends React.ComponentProps<typeof AccessibleButton> {
+    label?: string;
+    active: boolean;
+}
+
+// Semantic component for representing a role=menuitemcheckbox
+export const MenuItemCheckbox: React.FC<IProps> = ({children, label, active, disabled, ...props}) => {
+    return (
+        <AccessibleButton
+            {...props}
+            role="menuitemcheckbox"
+            aria-checked={active}
+            aria-disabled={disabled}
+            disabled={disabled}
+            tabIndex={-1}
+            aria-label={label}
+        >
+            { children }
+        </AccessibleButton>
+    );
+};

src/accessibility/context_menu/MenuItemRadio.tsx

@@ -0,0 +1,43 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 New Vector Ltd
+Copyright 2019 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 React from "react";
+
+import AccessibleButton from "../../components/views/elements/AccessibleButton";
+
+interface IProps extends React.ComponentProps<typeof AccessibleButton> {
+    label?: string;
+    active: boolean;
+}
+
+// Semantic component for representing a role=menuitemradio
+export const MenuItemRadio: React.FC<IProps> = ({children, label, active, disabled, ...props}) => {
+    return (
+        <AccessibleButton
+            {...props}
+            role="menuitemradio"
+            aria-checked={active}
+            aria-disabled={disabled}
+            disabled={disabled}
+            tabIndex={-1}
+            aria-label={label}
+        >
+            { children }
+        </AccessibleButton>
+    );
+};

src/accessibility/context_menu/StyledMenuItemCheckbox.tsx

@@ -0,0 +1,64 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 New Vector Ltd
+Copyright 2019 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 React from "react";
+
+import {Key} from "../../Keyboard";
+import StyledCheckbox from "../../components/views/elements/StyledCheckbox";
+
+interface IProps extends React.ComponentProps<typeof StyledCheckbox> {
+    label?: string;
+    onChange(); // we handle keyup/down ourselves so lose the ChangeEvent
+    onClose(): void; // gets called after onChange on Key.ENTER
+}
+
+// Semantic component for representing a styled role=menuitemcheckbox
+export const StyledMenuItemCheckbox: React.FC<IProps> = ({children, label, onChange, onClose, ...props}) => {
+    const onKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === Key.ENTER || e.key === Key.SPACE) {
+            e.stopPropagation();
+            e.preventDefault();
+            onChange();
+            // Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
+            if (e.key === Key.ENTER) {
+                onClose();
+            }
+        }
+    };
+    const onKeyUp = (e: React.KeyboardEvent) => {
+        // prevent the input default handler as we handle it on keydown to match
+        // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-2/menubar-2.html
+        if (e.key === Key.SPACE || e.key === Key.ENTER) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    };
+    return (
+        <StyledCheckbox
+            {...props}
+            role="menuitemcheckbox"
+            tabIndex={-1}
+            aria-label={label}
+            onChange={onChange}
+            onKeyDown={onKeyDown}
+            onKeyUp={onKeyUp}
+        >
+            { children }
+        </StyledCheckbox>
+    );
+};

src/accessibility/context_menu/StyledMenuItemRadio.tsx

@@ -0,0 +1,64 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 New Vector Ltd
+Copyright 2019 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 React from "react";
+
+import {Key} from "../../Keyboard";
+import StyledRadioButton from "../../components/views/elements/StyledRadioButton";
+
+interface IProps extends React.ComponentProps<typeof StyledRadioButton> {
+    label?: string;
+    onChange(); // we handle keyup/down ourselves so lose the ChangeEvent
+    onClose(): void; // gets called after onChange on Key.ENTER
+}
+
+// Semantic component for representing a styled role=menuitemradio
+export const StyledMenuItemRadio: React.FC<IProps> = ({children, label, onChange, onClose, ...props}) => {
+    const onKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === Key.ENTER || e.key === Key.SPACE) {
+            e.stopPropagation();
+            e.preventDefault();
+            onChange();
+            // Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
+            if (e.key === Key.ENTER) {
+                onClose();
+            }
+        }
+    };
+    const onKeyUp = (e: React.KeyboardEvent) => {
+        // prevent the input default handler as we handle it on keydown to match
+        // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-2/menubar-2.html
+        if (e.key === Key.SPACE || e.key === Key.ENTER) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    };
+    return (
+        <StyledRadioButton
+            {...props}
+            role="menuitemradio"
+            tabIndex={-1}
+            aria-label={label}
+            onChange={onChange}
+            onKeyDown={onKeyDown}
+            onKeyUp={onKeyUp}
+        >
+            { children }
+        </StyledRadioButton>
+    );
+};

src/accessibility/roving/RovingAccessibleButton.tsx

@@ -0,0 +1,32 @@
+/*
+Copyright 2020 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 React from "react";
+
+import AccessibleButton from "../../components/views/elements/AccessibleButton";
+import {useRovingTabIndex} from "../RovingTabIndex";
+import {Ref} from "./types";
+
+interface IProps extends Omit<React.ComponentProps<typeof AccessibleButton>, "onFocus" | "inputRef" | "tabIndex"> {
+    inputRef?: Ref;
+}
+
+// Wrapper to allow use of useRovingTabIndex for simple AccessibleButtons outside of React Functional Components.
+export const RovingAccessibleButton: React.FC<IProps> = ({inputRef, ...props}) => {
+    const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
+    return <AccessibleButton {...props} onFocus={onFocus} inputRef={ref} tabIndex={isActive ? 0 : -1} />;
+};
+

src/accessibility/roving/RovingAccessibleTooltipButton.tsx

@@ -0,0 +1,32 @@
+/*
+Copyright 2020 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 React from "react";
+
+import AccessibleTooltipButton from "../../components/views/elements/AccessibleTooltipButton";
+import {useRovingTabIndex} from "../RovingTabIndex";
+import {Ref} from "./types";
+
+interface IProps extends Omit<React.ComponentProps<typeof AccessibleTooltipButton>, "onFocus" | "inputRef" | "tabIndex"> {
+    inputRef?: Ref;
+}
+
+// Wrapper to allow use of useRovingTabIndex for simple AccessibleTooltipButtons outside of React Functional Components.
+export const RovingAccessibleTooltipButton: React.FC<IProps> = ({inputRef, ...props}) => {
+    const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
+    return <AccessibleTooltipButton {...props} onFocus={onFocus} inputRef={ref} tabIndex={isActive ? 0 : -1} />;
+};
+

src/accessibility/roving/RovingTabIndexWrapper.tsx

@@ -0,0 +1,36 @@
+/*
+Copyright 2020 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 React from "react";
+
+import AccessibleButton from "../../components/views/elements/AccessibleButton";
+import {useRovingTabIndex} from "../RovingTabIndex";
+import {FocusHandler, Ref} from "./types";
+
+interface IProps {
+    inputRef?: Ref;
+    children(renderProps: {
+        onFocus: FocusHandler;
+        isActive: boolean;
+        ref: Ref;
+    });
+}
+
+// Wrapper to allow use of useRovingTabIndex outside of React Functional Components.
+export const RovingTabIndexWrapper: React.FC<IProps> = ({children, inputRef}) => {
+    const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
+    return children({onFocus, isActive, ref});
+};

src/accessibility/roving/types.ts

@@ -0,0 +1,21 @@
+/*
+Copyright 2020 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 {RefObject} from "react";
+
+export type Ref = RefObject<HTMLElement>;
+
+export type FocusHandler = () => void;

src/actions/RoomListActions.ts

@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 import { asyncAction } from './actionCreators';
-import { TAG_DM } from '../stores/RoomListStore';
 import Modal from '../Modal';
 import * as Rooms from '../Rooms';
 import { _t } from '../languageHandler';
@@ -24,7 +23,9 @@ import * as sdk from '../index';
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { AsyncActionPayload } from "../dispatcher/payloads";
-import { RoomListStoreTempProxy } from "../stores/room-list/RoomListStoreTempProxy";
+import RoomListStore from "../stores/room-list/RoomListStore";
+import { SortAlgorithm } from "../stores/room-list/algorithms/models";
+import { DefaultTagID } from "../stores/room-list/models";
 
 export default class RoomListActions {
     /**
@@ -51,9 +52,9 @@ export default class RoomListActions {
         let metaData = null;
 
         // Is the tag ordered manually?
-        if (newTag && !newTag.match(/^(m\.lowpriority|im\.vector\.fake\.(invite|recent|direct|archived))$/)) {
-            const lists = RoomListStoreTempProxy.getRoomLists();
-            const newList = [...lists[newTag]];
+        const store = RoomListStore.instance;
+        if (newTag && store.getTagSorting(newTag) === SortAlgorithm.Manual) {
+            const newList = [...store.orderedLists[newTag]];
 
             newList.sort((a, b) => a.tags[newTag].order - b.tags[newTag].order);
 
@@ -81,11 +82,11 @@ export default class RoomListActions {
             const roomId = room.roomId;
 
             // Evil hack to get DMs behaving
-            if ((oldTag === undefined && newTag === TAG_DM) ||
-                (oldTag === TAG_DM && newTag === undefined)
+            if ((oldTag === undefined && newTag === DefaultTagID.DM) ||
+                (oldTag === DefaultTagID.DM && newTag === undefined)
             ) {
                 return Rooms.guessAndSetDMRoom(
-                    room, newTag === TAG_DM,
+                    room, newTag === DefaultTagID.DM,
                 ).catch((err) => {
                     const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     console.error("Failed to set direct chat tag " + err);
@@ -102,7 +103,7 @@ export default class RoomListActions {
             // but we avoid ever doing a request with TAG_DM.
             //
             // if we moved lists, remove the old tag
-            if (oldTag && oldTag !== TAG_DM &&
+            if (oldTag && oldTag !== DefaultTagID.DM &&
                 hasChangedSubLists
             ) {
                 const promiseToDelete = matrixClient.deleteRoomTag(
@@ -120,7 +121,7 @@ export default class RoomListActions {
             }
 
             // if we moved lists or the ordering changed, add the new tag
-            if (newTag && newTag !== TAG_DM &&
+            if (newTag && newTag !== DefaultTagID.DM &&
                 (hasChangedSubLists || metaData)
             ) {
                 // metaData is the body of the PUT to set the tag, so it must

src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.js

@@ -18,6 +18,7 @@ import React from 'react';
 import * as sdk from '../../../../index';
 import PropTypes from 'prop-types';
 import { _t } from '../../../../languageHandler';
+import SdkConfig from '../../../../SdkConfig';
 import SettingsStore, {SettingLevel} from "../../../../settings/SettingsStore";
 
 import Modal from '../../../../Modal';
@@ -134,8 +135,10 @@ export default class ManageEventIndexDialog extends React.Component {
     };
 
     render() {
-        let crawlerState;
+        const brand = SdkConfig.get().brand;
+        const Field = sdk.getComponent('views.elements.Field');
 
+        let crawlerState;
         if (this.state.currentRoom === null) {
             crawlerState = _t("Not currently indexing messages for any room.");
         } else {
@@ -144,17 +147,15 @@ export default class ManageEventIndexDialog extends React.Component {
             );
         }
 
-        const Field = sdk.getComponent('views.elements.Field');
-
         const doneRooms = Math.max(0, (this.state.roomCount - this.state.crawlingRoomsCount));
 
         const eventIndexingSettings = (
             <div>
-                {
-                    _t( "Riot is securely caching encrypted messages locally for them " +
-                        "to appear in search results:",
-                    )
-                }
+                {_t(
+                    "%(brand)s is securely caching encrypted messages locally for them " +
+                    "to appear in search results:",
+                    { brand },
+                )}
                 <div className='mx_SettingsTab_subsectionText'>
                     {crawlerState}<br />
                     {_t("Space used:")} {formatBytes(this.state.eventIndexSize, 0)}<br />

src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js

@@ -26,20 +26,27 @@ import { promptForBackupPassphrase } from '../../../../CrossSigningManager';
 import {copyNode} from "../../../../utils/strings";
 import {SSOAuthEntry} from "../../../../components/views/auth/InteractiveAuthEntryComponents";
 import PassphraseField from "../../../../components/views/auth/PassphraseField";
+import StyledRadioButton from '../../../../components/views/elements/StyledRadioButton';
+import AccessibleButton from "../../../../components/views/elements/AccessibleButton";
+import DialogButtons from "../../../../components/views/elements/DialogButtons";
+import InlineSpinner from "../../../../components/views/elements/InlineSpinner";
 
 const PHASE_LOADING = 0;
 const PHASE_LOADERROR = 1;
-const PHASE_MIGRATE = 2;
-const PHASE_PASSPHRASE = 3;
-const PHASE_PASSPHRASE_CONFIRM = 4;
-const PHASE_SHOWKEY = 5;
-const PHASE_KEEPITSAFE = 6;
-const PHASE_STORING = 7;
-const PHASE_DONE = 8;
-const PHASE_CONFIRM_SKIP = 9;
+const PHASE_CHOOSE_KEY_PASSPHRASE = 2;
+const PHASE_MIGRATE = 3;
+const PHASE_PASSPHRASE = 4;
+const PHASE_PASSPHRASE_CONFIRM = 5;
+const PHASE_SHOWKEY = 6;
+const PHASE_STORING = 8;
+const PHASE_CONFIRM_SKIP = 10;
 
 const PASSWORD_MIN_SCORE = 4; // So secure, many characters, much complex, wow, etc, etc.
 
+// these end up as strings from being values in the radio buttons, so just use strings
+const CREATE_STORAGE_OPTION_KEY = 'key';
+const CREATE_STORAGE_OPTION_PASSPHRASE = 'passphrase';
+
 /*
  * Walks the user through the process of creating a passphrase to guard Secure
  * Secret Storage in account data.
@@ -70,6 +77,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
             passPhraseConfirm: '',
             copied: false,
             downloaded: false,
+            setPassphrase: false,
             backupInfo: null,
             backupSigStatus: null,
             // does the server offer a UI auth flow with just m.login.password
@@ -77,8 +85,8 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
             canUploadKeysWithPasswordOnly: null,
             accountPassword: props.accountPassword || "",
             accountPasswordCorrect: null,
-            // status of the key backup toggle switch
-            useKeyBackup: true,
+
+            passPhraseKeySelected: CREATE_STORAGE_OPTION_KEY,
         };
 
         this._passphraseField = createRef();
@@ -110,7 +118,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
             );
 
             const { force } = this.props;
-            const phase = (backupInfo && !force) ? PHASE_MIGRATE : PHASE_PASSPHRASE;
+            const phase = (backupInfo && !force) ? PHASE_MIGRATE : PHASE_CHOOSE_KEY_PASSPHRASE;
 
             this.setState({
                 phase,
@@ -152,14 +160,33 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         if (this.state.phase === PHASE_MIGRATE) this._fetchBackupInfo();
     }
 
+    _onKeyPassphraseChange = e => {
+        this.setState({
+            passPhraseKeySelected: e.target.value,
+        });
+    }
+
     _collectRecoveryKeyNode = (n) => {
         this._recoveryKeyNode = n;
     }
 
-    _onUseKeyBackupChange = (enabled) => {
-        this.setState({
-            useKeyBackup: enabled,
-        });
+    _onChooseKeyPassphraseFormSubmit = async () => {
+        if (this.state.passPhraseKeySelected === CREATE_STORAGE_OPTION_KEY) {
+            this._recoveryKey =
+                await MatrixClientPeg.get().createRecoveryKeyFromPassphrase();
+            this.setState({
+                copied: false,
+                downloaded: false,
+                setPassphrase: false,
+                phase: PHASE_SHOWKEY,
+            });
+        } else {
+            this.setState({
+                copied: false,
+                downloaded: false,
+                phase: PHASE_PASSPHRASE,
+            });
+        }
     }
 
     _onMigrateFormSubmit = (e) => {
@@ -176,7 +203,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         if (successful) {
             this.setState({
                 copied: true,
-                phase: PHASE_KEEPITSAFE,
             });
         }
     }
@@ -189,7 +215,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
 
         this.setState({
             downloaded: true,
-            phase: PHASE_KEEPITSAFE,
         });
     }
 
@@ -259,22 +284,15 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 await cli.bootstrapSecretStorage({
                     authUploadDeviceSigningKeys: this._doBootstrapUIAuth,
                     createSecretStorageKey: async () => this._recoveryKey,
-                    setupNewKeyBackup: this.state.useKeyBackup,
+                    setupNewKeyBackup: true,
                     setupNewSecretStorage: true,
                 });
-                if (!this.state.useKeyBackup && this.state.backupInfo) {
-                    // If the user is resetting their cross-signing keys and doesn't want
-                    // key backup (but had it enabled before), delete the key backup as it's
-                    // no longer valid.
-                    console.log("Deleting invalid key backup (secrets have been reset; key backup not requested)");
-                    await cli.deleteKeyBackupVersion(this.state.backupInfo.version);
-                }
             } else {
                 await cli.bootstrapSecretStorage({
                     authUploadDeviceSigningKeys: this._doBootstrapUIAuth,
                     createSecretStorageKey: async () => this._recoveryKey,
                     keyBackupInfo: this.state.backupInfo,
-                    setupNewKeyBackup: !this.state.backupInfo && this.state.useKeyBackup,
+                    setupNewKeyBackup: !this.state.backupInfo,
                     getKeyBackupPassphrase: () => {
                         // We may already have the backup key if we earlier went
                         // through the restore backup path, so pass it along
@@ -286,9 +304,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                     },
                 });
             }
-            this.setState({
-                phase: PHASE_DONE,
-            });
+            this.props.onFinished(true);
         } catch (e) {
             if (this.state.canUploadKeysWithPasswordOnly && e.httpStatus === 401 && e.data.flows) {
                 this.setState({
@@ -342,22 +358,16 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         this._fetchBackupInfo();
     }
 
-    _onSkipSetupClick = () => {
+    _onShowKeyContinueClick = () => {
+        this._bootstrapSecretStorage();
+    }
+
+    _onCancelClick = () => {
         this.setState({phase: PHASE_CONFIRM_SKIP});
     }
 
-    _onSetUpClick = () => {
-        this.setState({phase: PHASE_PASSPHRASE});
-    }
-
-    _onSkipPassPhraseClick = async () => {
-        this._recoveryKey =
-            await MatrixClientPeg.get().createRecoveryKeyFromPassphrase();
-        this.setState({
-            copied: false,
-            downloaded: false,
-            phase: PHASE_SHOWKEY,
-        });
+    _onGoBackClick = () => {
+        this.setState({phase: PHASE_CHOOSE_KEY_PASSPHRASE});
     }
 
     _onPassPhraseNextClick = async (e) => {
@@ -384,6 +394,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         this.setState({
             copied: false,
             downloaded: false,
+            setPassphrase: true,
             phase: PHASE_SHOWKEY,
         });
     }
@@ -397,12 +408,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         });
     }
 
-    _onKeepItSafeBackClick = () => {
-        this.setState({
-            phase: PHASE_SHOWKEY,
-        });
-    }
-
     _onPassPhraseValidate = (result) => {
         this.setState({
             passPhraseValid: result.valid,
@@ -427,13 +432,55 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         });
     }
 
+    _renderPhaseChooseKeyPassphrase() {
+        return <form onSubmit={this._onChooseKeyPassphraseFormSubmit}>
+            <p className="mx_CreateSecretStorageDialog_centeredBody">{_t(
+                "Safeguard against losing access to encrypted messages & data by " +
+                "backing up encryption keys on your server.",
+            )}</p>
+            <div className="mx_CreateSecretStorageDialog_primaryContainer" role="radiogroup" onChange={this._onKeyPassphraseChange}>
+                <StyledRadioButton
+                    key={CREATE_STORAGE_OPTION_KEY}
+                    value={CREATE_STORAGE_OPTION_KEY}
+                    name="keyPassphrase"
+                    checked={this.state.passPhraseKeySelected === CREATE_STORAGE_OPTION_KEY}
+                    outlined
+                >
+                    <div className="mx_CreateSecretStorageDialog_optionTitle">
+                        <span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_secureBackup"></span>
+                        {_t("Generate a Security Key")}
+                    </div>
+                    <div>{_t("We’ll generate a Security Key for you to store somewhere safe, like a password manager or a safe.")}</div>
+                </StyledRadioButton>
+                <StyledRadioButton
+                    key={CREATE_STORAGE_OPTION_PASSPHRASE}
+                    value={CREATE_STORAGE_OPTION_PASSPHRASE}
+                    name="keyPassphrase"
+                    checked={this.state.passPhraseKeySelected === CREATE_STORAGE_OPTION_PASSPHRASE}
+                    outlined
+                >
+                    <div className="mx_CreateSecretStorageDialog_optionTitle">
+                        <span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_securePhrase"></span>
+                        {_t("Enter a Security Phrase")}
+                    </div>
+                    <div>{_t("Use a secret phrase only you know, and optionally save a Security Key to use for backup.")}</div>
+                </StyledRadioButton>
+            </div>
+            <DialogButtons
+                primaryButton={_t("Continue")}
+                onPrimaryButtonClick={this._onChooseKeyPassphraseFormSubmit}
+                onCancel={this._onCancelClick}
+                hasCancel={true}
+            />
+        </form>;
+    }
+
     _renderPhaseMigrate() {
         // TODO: This is a temporary screen so people who have the labs flag turned on and
         // click the button are aware they're making a change to their account.
         // Once we're confident enough in this (and it's supported enough) we can do
         // it automatically.
         // https://github.com/vector-im/riot-web/issues/11696
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         const Field = sdk.getComponent('views.elements.Field');
 
         let authPrompt;
@@ -446,7 +493,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                     label={_t("Password")}
                     value={this.state.accountPassword}
                     onChange={this._onAccountPasswordChange}
-                    flagInvalid={this.state.accountPasswordCorrect === false}
+                    forceValidity={this.state.accountPasswordCorrect === false ? false : null}
                     autoFocus={true}
                 /></div>
             </div>;
@@ -474,7 +521,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 hasCancel={false}
                 primaryDisabled={this.state.canUploadKeysWithPasswordOnly && !this.state.accountPassword}
             >
-                <button type="button" className="danger" onClick={this._onSkipSetupClick}>
+                <button type="button" className="danger" onClick={this._onCancelClick}>
                     {_t('Skip')}
                 </button>
             </DialogButtons>
@@ -482,14 +529,10 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
     }
 
     _renderPhasePassPhrase() {
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        const LabelledToggleSwitch = sdk.getComponent('views.elements.LabelledToggleSwitch');
-
         return <form onSubmit={this._onPassPhraseNextClick}>
             <p>{_t(
-                "Set a recovery passphrase to secure encrypted information and recover it if you log out. " +
-                "This should be different to your account password:",
+                "Enter a security phrase only you know, as it’s used to safeguard your data. " +
+                "To be secure, you shouldn’t re-use your account password.",
             )}</p>
 
             <div className="mx_CreateSecretStorageDialog_passPhraseContainer">
@@ -508,11 +551,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 />
             </div>
 
-            <LabelledToggleSwitch
-                label={ _t("Back up encrypted message keys")}
-                onChange={this._onUseKeyBackupChange} value={this.state.useKeyBackup}
-            />
-
             <DialogButtons
                 primaryButton={_t('Continue')}
                 onPrimaryButtonClick={this._onPassPhraseNextClick}
@@ -520,22 +558,14 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 disabled={!this.state.passPhraseValid}
             >
                 <button type="button"
-                    onClick={this._onSkipSetupClick}
+                    onClick={this._onCancelClick}
                     className="danger"
-                >{_t("Skip")}</button>
+                >{_t("Cancel")}</button>
             </DialogButtons>
-
-            <details>
-                <summary>{_t("Advanced")}</summary>
-                <AccessibleButton kind='primary' onClick={this._onSkipPassPhraseClick} >
-                    {_t("Set up with a recovery key")}
-                </AccessibleButton>
-            </details>
         </form>;
     }
 
     _renderPhasePassPhraseConfirm() {
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const Field = sdk.getComponent('views.elements.Field');
 
         let matchText;
@@ -566,7 +596,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 </div>
             </div>;
         }
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return <form onSubmit={this._onPassPhraseConfirmNextClick}>
             <p>{_t(
                 "Enter your recovery passphrase a second time to confirm it.",
@@ -592,7 +621,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 disabled={this.state.passPhrase !== this.state.passPhraseConfirm}
             >
                 <button type="button"
-                    onClick={this._onSkipSetupClick}
+                    onClick={this._onCancelClick}
                     className="danger"
                 >{_t("Skip")}</button>
             </DialogButtons>
@@ -600,66 +629,48 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
     }
 
     _renderPhaseShowKey() {
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        let continueButton;
+        if (this.state.phase === PHASE_SHOWKEY) {
+            continueButton = <DialogButtons primaryButton={_t("Continue")}
+                disabled={!this.state.downloaded && !this.state.copied && !this.state.setPassphrase}
+                onPrimaryButtonClick={this._onShowKeyContinueClick}
+                hasCancel={false}
+            />;
+        } else {
+            continueButton = <div className="mx_CreateSecretStorageDialog_continueSpinner">
+                <InlineSpinner />
+            </div>;
+        }
         return <div>
             <p>{_t(
-                "Your recovery key is a safety net - you can use it to restore " +
-                "access to your encrypted messages if you forget your recovery passphrase.",
-            )}</p>
-            <p>{_t(
-                "Keep a copy of it somewhere secure, like a password manager or even a safe.",
+                "Store your Security Key somewhere safe, like a password manager or a safe, " +
+                "as it’s used to safeguard your encrypted data.",
             )}</p>
             <div className="mx_CreateSecretStorageDialog_primaryContainer">
-                <div className="mx_CreateSecretStorageDialog_recoveryKeyHeader">
-                    {_t("Your recovery key")}
-                </div>
                 <div className="mx_CreateSecretStorageDialog_recoveryKeyContainer">
                     <div className="mx_CreateSecretStorageDialog_recoveryKey">
                         <code ref={this._collectRecoveryKeyNode}>{this._recoveryKey.encodedPrivateKey}</code>
                     </div>
                     <div className="mx_CreateSecretStorageDialog_recoveryKeyButtons">
+                        <AccessibleButton kind='primary' className="mx_Dialog_primary"
+                            onClick={this._onDownloadClick}
+                            disabled={this.state.phase === PHASE_STORING}
+                        >
+                            {_t("Download")}
+                        </AccessibleButton>
+                        <span>{_t("or")}</span>
                         <AccessibleButton
                             kind='primary'
                             className="mx_Dialog_primary mx_CreateSecretStorageDialog_recoveryKeyButtons_copyBtn"
                             onClick={this._onCopyClick}
+                            disabled={this.state.phase === PHASE_STORING}
                         >
-                            {_t("Copy")}
-                        </AccessibleButton>
-                        <AccessibleButton kind='primary' className="mx_Dialog_primary" onClick={this._onDownloadClick}>
-                            {_t("Download")}
+                            {this.state.copied ? _t("Copied!") : _t("Copy")}
                         </AccessibleButton>
                     </div>
                 </div>
             </div>
-        </div>;
-    }
-
-    _renderPhaseKeepItSafe() {
-        let introText;
-        if (this.state.copied) {
-            introText = _t(
-                "Your recovery key has been <b>copied to your clipboard</b>, paste it to:",
-                {}, {b: s => <b>{s}</b>},
-            );
-        } else if (this.state.downloaded) {
-            introText = _t(
-                "Your recovery key is in your <b>Downloads</b> folder.",
-                {}, {b: s => <b>{s}</b>},
-            );
-        }
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-        return <div>
-            {introText}
-            <ul>
-                <li>{_t("<b>Print it</b> and store it somewhere safe", {}, {b: s => <b>{s}</b>})}</li>
-                <li>{_t("<b>Save it</b> on a USB key or backup drive", {}, {b: s => <b>{s}</b>})}</li>
-                <li>{_t("<b>Copy it</b> to your personal cloud storage", {}, {b: s => <b>{s}</b>})}</li>
-            </ul>
-            <DialogButtons primaryButton={_t("Continue")}
-                onPrimaryButtonClick={this._bootstrapSecretStorage}
-                hasCancel={false}>
-                <button onClick={this._onKeepItSafeBackClick}>{_t("Back")}</button>
-            </DialogButtons>
+            {continueButton}
         </div>;
     }
 
@@ -671,7 +682,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
     }
 
     _renderPhaseLoadError() {
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return <div>
             <p>{_t("Unable to query secret storage status")}</p>
             <div className="mx_Dialog_buttons">
@@ -684,53 +694,39 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         </div>;
     }
 
-    _renderPhaseDone() {
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+    _renderPhaseSkipConfirm() {
         return <div>
             <p>{_t(
-                "You can now verify your other devices, " +
-                "and other users to keep your chats safe.",
+                "If you cancel now, you may lose encrypted messages & data if you lose access to your logins.",
+            )}</p>
+            <p>{_t(
+                "You can also set up Secure Backup & manage your keys in Settings.",
             )}</p>
-            <DialogButtons primaryButton={_t('OK')}
-                onPrimaryButtonClick={this._onDone}
-                hasCancel={false}
-            />
-        </div>;
-    }
-
-    _renderPhaseSkipConfirm() {
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-        return <div>
-            {_t(
-                "Without completing security on this session, it won’t have " +
-                "access to encrypted messages.",
-        )}
             <DialogButtons primaryButton={_t('Go back')}
-                onPrimaryButtonClick={this._onSetUpClick}
+                onPrimaryButtonClick={this._onGoBackClick}
                 hasCancel={false}
             >
-                <button type="button" className="danger" onClick={this._onCancel}>{_t('Skip')}</button>
+                <button type="button" className="danger" onClick={this._onCancel}>{_t('Cancel')}</button>
             </DialogButtons>
         </div>;
     }
 
     _titleForPhase(phase) {
         switch (phase) {
+            case PHASE_CHOOSE_KEY_PASSPHRASE:
+                return _t('Set up Secure backup');
             case PHASE_MIGRATE:
                 return _t('Upgrade your encryption');
             case PHASE_PASSPHRASE:
-                return _t('Set up encryption');
+                return _t('Set a Security Phrase');
             case PHASE_PASSPHRASE_CONFIRM:
-                return _t('Confirm recovery passphrase');
+                return _t('Confirm Security Phrase');
             case PHASE_CONFIRM_SKIP:
                 return _t('Are you sure?');
             case PHASE_SHOWKEY:
-            case PHASE_KEEPITSAFE:
-                return _t('Make a copy of your recovery key');
+                return _t('Save your Security Key');
             case PHASE_STORING:
                 return _t('Setting up keys');
-            case PHASE_DONE:
-                return _t("You're done!");
             default:
                 return '';
         }
@@ -741,7 +737,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
 
         let content;
         if (this.state.error) {
-            const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
             content = <div>
                 <p>{_t("Unable to set up secret storage")}</p>
                 <div className="mx_Dialog_buttons">
@@ -760,6 +755,9 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 case PHASE_LOADERROR:
                     content = this._renderPhaseLoadError();
                     break;
+                case PHASE_CHOOSE_KEY_PASSPHRASE:
+                    content = this._renderPhaseChooseKeyPassphrase();
+                    break;
                 case PHASE_MIGRATE:
                     content = this._renderPhaseMigrate();
                     break;
@@ -772,31 +770,40 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 case PHASE_SHOWKEY:
                     content = this._renderPhaseShowKey();
                     break;
-                case PHASE_KEEPITSAFE:
-                    content = this._renderPhaseKeepItSafe();
-                    break;
                 case PHASE_STORING:
                     content = this._renderBusyPhase();
                     break;
-                case PHASE_DONE:
-                    content = this._renderPhaseDone();
-                    break;
                 case PHASE_CONFIRM_SKIP:
                     content = this._renderPhaseSkipConfirm();
                     break;
             }
         }
 
-        let headerImage;
-        if (this._titleForPhase(this.state.phase)) {
-            headerImage = require("../../../../../res/img/e2e/normal.svg");
+        let titleClass = null;
+        switch (this.state.phase) {
+            case PHASE_PASSPHRASE:
+            case PHASE_PASSPHRASE_CONFIRM:
+                titleClass = [
+                    'mx_CreateSecretStorageDialog_titleWithIcon',
+                    'mx_CreateSecretStorageDialog_securePhraseTitle',
+                ];
+                break;
+            case PHASE_SHOWKEY:
+                titleClass = [
+                    'mx_CreateSecretStorageDialog_titleWithIcon',
+                    'mx_CreateSecretStorageDialog_secureBackupTitle',
+                ];
+                break;
+            case PHASE_CHOOSE_KEY_PASSPHRASE:
+                titleClass = 'mx_CreateSecretStorageDialog_centeredTitle';
+                break;
         }
 
         return (
             <BaseDialog className='mx_CreateSecretStorageDialog'
                 onFinished={this.props.onFinished}
                 title={this._titleForPhase(this.state.phase)}
-                headerImage={headerImage}
+                titleClass={titleClass}
                 hasCancel={this.props.hasCancel && [PHASE_PASSPHRASE].includes(this.state.phase)}
                 fixedWidth={false}
             >

src/autocomplete/QueryMatcher.ts

@@ -18,16 +18,15 @@ limitations under the License.
 
 import _at from 'lodash/at';
 import _uniq from 'lodash/uniq';
-
-function stripDiacritics(str: string): string {
-    return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
-}
+import {removeHiddenChars} from "matrix-js-sdk/src/utils";
 
 interface IOptions<T extends {}> {
     keys: Array<string | keyof T>;
     funcs?: Array<(T) => string>;
     shouldMatchWordsOnly?: boolean;
     shouldMatchPrefix?: boolean;
+    // whether to apply unhomoglyph and strip diacritics to fuzz up the search. Defaults to true
+    fuzzy?: boolean;
 }
 
 /**
@@ -46,14 +45,10 @@ interface IOptions<T extends {}> {
  */
 export default class QueryMatcher<T extends Object> {
     private _options: IOptions<T>;
-    private _keys: IOptions<T>["keys"];
-    private _funcs: Required<IOptions<T>["funcs"]>;
     private _items: Map<string, {object: T, keyWeight: number}[]>;
 
     constructor(objects: T[], options: IOptions<T> = { keys: [] }) {
         this._options = options;
-        this._keys = options.keys;
-        this._funcs = options.funcs || [];
 
         this.setObjects(objects);
 
@@ -78,15 +73,17 @@ export default class QueryMatcher<T extends Object> {
             // type for their values. We assume that those values who's keys have
             // been specified will be string. Also, we cannot infer all the
             // types of the keys of the objects at compile.
-            const keyValues = _at<string>(<any>object, this._keys);
+            const keyValues = _at<string>(<any>object, this._options.keys);
 
-            for (const f of this._funcs) {
-                keyValues.push(f(object));
+            if (this._options.funcs) {
+                for (const f of this._options.funcs) {
+                    keyValues.push(f(object));
+                }
             }
 
             for (const [index, keyValue] of Object.entries(keyValues)) {
                 if (!keyValue) continue; // skip falsy keyValues
-                const key = stripDiacritics(keyValue).toLowerCase();
+                const key = this.processQuery(keyValue);
                 if (!this._items.has(key)) {
                     this._items.set(key, []);
                 }
@@ -99,7 +96,7 @@ export default class QueryMatcher<T extends Object> {
     }
 
     match(query: string): T[] {
-        query = stripDiacritics(query).toLowerCase();
+        query = this.processQuery(query);
         if (this._options.shouldMatchWordsOnly) {
             query = query.replace(/[^\w]/g, '');
         }
@@ -142,4 +139,11 @@ export default class QueryMatcher<T extends Object> {
         // Now map the keys to the result objects. Also remove any duplicates.
         return _uniq(matches.map((match) => match.object));
     }
+
+    private processQuery(query: string): string {
+        if (this._options.fuzzy !== false) {
+            return removeHiddenChars(query).toLowerCase();
+        }
+        return query.toLowerCase();
+    }
 }

src/autocomplete/RoomProvider.tsx

@@ -25,9 +25,9 @@ import {MatrixClientPeg} from '../MatrixClientPeg';
 import QueryMatcher from './QueryMatcher';
 import {PillCompletion} from './Components';
 import * as sdk from '../index';
-import _sortBy from 'lodash/sortBy';
 import {makeRoomPermalink} from "../utils/permalinks/Permalinks";
 import {ICompletion, ISelectionRange} from "./Autocompleter";
+import { uniqBy, sortBy } from 'lodash';
 
 const ROOM_REGEX = /\B#\S*/g;
 
@@ -91,10 +91,11 @@ export default class RoomProvider extends AutocompleteProvider {
             this.matcher.setObjects(matcherObjects);
             const matchedString = command[0];
             completions = this.matcher.match(matchedString);
-            completions = _sortBy(completions, [
+            completions = sortBy(completions, [
                 (c) => score(matchedString, c.displayedAlias),
                 (c) => c.displayedAlias.length,
             ]);
+            completions = uniqBy(completions, (match) => match.room);
             completions = completions.map((room) => {
                 return {
                     completion: room.displayedAlias,

src/components/structures/AutoHideScrollbar.js

@@ -38,12 +38,13 @@ export default class AutoHideScrollbar extends React.Component {
 
     render() {
         return (<div
-                    ref={this._collectContainerRef}
-                    style={this.props.style}
-                    className={["mx_AutoHideScrollbar", this.props.className].join(" ")}
-                    onScroll={this.props.onScroll}
-                    onWheel={this.props.onWheel}
-                >
+            ref={this._collectContainerRef}
+            style={this.props.style}
+            className={["mx_AutoHideScrollbar", this.props.className].join(" ")}
+            onScroll={this.props.onScroll}
+            onWheel={this.props.onWheel}
+            tabIndex={this.props.tabIndex}
+        >
             { this.props.children }
         </div>);
     }

src/components/structures/CompatibilityPage.js

@@ -1,7 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 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.
@@ -20,6 +20,7 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import { _t } from '../../languageHandler';
+import SdkConfig from '../../SdkConfig';
 
 export default createReactClass({
     displayName: 'CompatibilityPage',
@@ -38,14 +39,25 @@ export default createReactClass({
     },
 
     render: function() {
+        const brand = SdkConfig.get().brand;
+
         return (
         <div className="mx_CompatibilityPage">
             <div className="mx_CompatibilityPage_box">
-                <p>{ _t("Sorry, your browser is <b>not</b> able to run Riot.", {}, { 'b': (sub) => <b>{sub}</b> }) } </p>
+                <p>{_t(
+                    "Sorry, your browser is <b>not</b> able to run %(brand)s.",
+                    {
+                        brand,
+                    },
+                    {
+                        'b': (sub) => <b>{sub}</b>,
+                    })
+                }</p>
                 <p>
                 { _t(
-                    "Riot uses many advanced browser features, some of which are not available " +
+                    "%(brand)s uses many advanced browser features, some of which are not available " +
                     "or experimental in your current browser.",
+                    { brand },
                 ) }
                 </p>
                 <p>

src/components/structures/ContextMenu.tsx

@@ -16,13 +16,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useRef, useState} from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import React, {CSSProperties, useRef, useState} from "react";
+import ReactDOM from "react-dom";
+import classNames from "classnames";
+
 import {Key} from "../../Keyboard";
-import * as sdk from "../../index";
-import AccessibleButton from "../views/elements/AccessibleButton";
+import {Writeable} from "../../@types/common";
 
 // Shamelessly ripped off Modal.js.  There's probably a better way
 // of doing reusable widgets like dialog boxes & menus where we go and
@@ -30,8 +29,8 @@ import AccessibleButton from "../views/elements/AccessibleButton";
 
 const ContextualMenuContainerId = "mx_ContextualMenu_Container";
 
-function getOrCreateContainer() {
-    let container = document.getElementById(ContextualMenuContainerId);
+function getOrCreateContainer(): HTMLDivElement {
+    let container = document.getElementById(ContextualMenuContainerId) as HTMLDivElement;
 
     if (!container) {
         container = document.createElement("div");
@@ -43,50 +42,70 @@ function getOrCreateContainer() {
 }
 
 const ARIA_MENU_ITEM_ROLES = new Set(["menuitem", "menuitemcheckbox", "menuitemradio"]);
+
+interface IPosition {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+}
+
+export enum ChevronFace {
+    Top = "top",
+    Bottom = "bottom",
+    Left = "left",
+    Right = "right",
+    None = "none",
+}
+
+interface IProps extends IPosition {
+    menuWidth?: number;
+    menuHeight?: number;
+
+    chevronOffset?: number;
+    chevronFace?: ChevronFace;
+
+    menuPaddingTop?: number;
+    menuPaddingBottom?: number;
+    menuPaddingLeft?: number;
+    menuPaddingRight?: number;
+
+    zIndex?: number;
+
+    // If true, insert an invisible screen-sized element behind the menu that when clicked will close it.
+    hasBackground?: boolean;
+    // whether this context menu should be focus managed. If false it must handle itself
+    managed?: boolean;
+
+    // Function to be called on menu close
+    onFinished();
+    // on resize callback
+    windowResize?();
+}
+
+interface IState {
+    contextMenuElem: HTMLDivElement;
+}
+
 // Generic ContextMenu Portal wrapper
 // all options inside the menu should be of role=menuitem/menuitemcheckbox/menuitemradiobutton and have tabIndex={-1}
 // this will allow the ContextMenu to manage its own focus using arrow keys as per the ARIA guidelines.
-export class ContextMenu extends React.Component {
-    static propTypes = {
-        top: PropTypes.number,
-        bottom: PropTypes.number,
-        left: PropTypes.number,
-        right: PropTypes.number,
-        menuWidth: PropTypes.number,
-        menuHeight: PropTypes.number,
-        chevronOffset: PropTypes.number,
-        chevronFace: PropTypes.string, // top, bottom, left, right or none
-        // Function to be called on menu close
-        onFinished: PropTypes.func.isRequired,
-        menuPaddingTop: PropTypes.number,
-        menuPaddingRight: PropTypes.number,
-        menuPaddingBottom: PropTypes.number,
-        menuPaddingLeft: PropTypes.number,
-        zIndex: PropTypes.number,
-
-        // If true, insert an invisible screen-sized element behind the
-        // menu that when clicked will close it.
-        hasBackground: PropTypes.bool,
-
-        // on resize callback
-        windowResize: PropTypes.func,
-
-        managed: PropTypes.bool, // whether this context menu should be focus managed. If false it must handle itself
-    };
+export class ContextMenu extends React.PureComponent<IProps, IState> {
+    private initialFocus: HTMLElement;
 
     static defaultProps = {
         hasBackground: true,
         managed: true,
     };
 
-    constructor() {
-        super();
+    constructor(props, context) {
+        super(props, context);
         this.state = {
             contextMenuElem: null,
         };
 
         // persist what had focus when we got initialized so we can return it after
-        this.initialFocus = document.activeElement;
+        this.initialFocus = document.activeElement as HTMLElement;
     }
 
     componentWillUnmount() {
@@ -94,7 +113,7 @@ export class ContextMenu extends React.Component {
         this.initialFocus.focus();
     }
 
-    collectContextMenuRect = (element) => {
+    private collectContextMenuRect = (element) => {
         // We don't need to clean up when unmounting, so ignore
         if (!element) return;
 
@@ -111,11 +130,12 @@ export class ContextMenu extends React.Component {
         });
     };
 
-    onContextMenu = (e) => {
+    private onContextMenu = (e) => {
         if (this.props.onFinished) {
             this.props.onFinished();
 
             e.preventDefault();
+            e.stopPropagation();
             const x = e.clientX;
             const y = e.clientY;
 
@@ -133,7 +153,20 @@ export class ContextMenu extends React.Component {
         }
     };
 
-    _onMoveFocus = (element, up) => {
+    private 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();
+    };
+
+    // Prevent clicks on the background from going through to the component which opened the menu.
+    private onFinished = (ev: React.MouseEvent) => {
+        ev.stopPropagation();
+        ev.preventDefault();
+        if (this.props.onFinished) this.props.onFinished();
+    };
+
+    private onMoveFocus = (element: Element, up: boolean) => {
         let descending = false; // are we currently descending or ascending through the DOM tree?
 
         do {
@@ -167,25 +200,25 @@ export class ContextMenu extends React.Component {
         } while (element && !ARIA_MENU_ITEM_ROLES.has(element.getAttribute("role")));
 
         if (element) {
-            element.focus();
+            (element as HTMLElement).focus();
         }
     };
 
-    _onMoveFocusHomeEnd = (element, up) => {
+    private onMoveFocusHomeEnd = (element: Element, up: boolean) => {
         let results = element.querySelectorAll('[role^="menuitem"]');
         if (!results) {
             results = element.querySelectorAll('[tab-index]');
         }
         if (results && results.length) {
             if (up) {
-                results[0].focus();
+                (results[0] as HTMLElement).focus();
             } else {
-                results[results.length - 1].focus();
+                (results[results.length - 1] as HTMLElement).focus();
             }
         }
     };
 
-    _onKeyDown = (ev) => {
+    private onKeyDown = (ev: React.KeyboardEvent) => {
         if (!this.props.managed) {
             if (ev.key === Key.ESCAPE) {
                 this.props.onFinished();
@@ -200,19 +233,22 @@ export class ContextMenu extends React.Component {
         switch (ev.key) {
             case Key.TAB:
             case Key.ESCAPE:
+            // close on left and right arrows too for when it is a context menu on a <Toolbar />
+            case Key.ARROW_LEFT:
+            case Key.ARROW_RIGHT:
                 this.props.onFinished();
                 break;
             case Key.ARROW_UP:
-                this._onMoveFocus(ev.target, true);
+                this.onMoveFocus(ev.target as Element, true);
                 break;
             case Key.ARROW_DOWN:
-                this._onMoveFocus(ev.target, false);
+                this.onMoveFocus(ev.target as Element, false);
                 break;
             case Key.HOME:
-                this._onMoveFocusHomeEnd(this.state.contextMenuElem, true);
+                this.onMoveFocusHomeEnd(this.state.contextMenuElem, true);
                 break;
             case Key.END:
-                this._onMoveFocusHomeEnd(this.state.contextMenuElem, false);
+                this.onMoveFocusHomeEnd(this.state.contextMenuElem, false);
                 break;
             default:
                 handled = false;
@@ -225,9 +261,8 @@ export class ContextMenu extends React.Component {
         }
     };
 
-    renderMenu(hasBackground=this.props.hasBackground) {
-        const position = {};
-        let chevronFace = null;
+    protected renderMenu(hasBackground = this.props.hasBackground) {
+        const position: Partial<Writeable<DOMRect>> = {};
         const props = this.props;
 
         if (props.top) {
@@ -236,23 +271,24 @@ export class ContextMenu extends React.Component {
             position.bottom = props.bottom;
         }
 
+        let chevronFace: ChevronFace;
         if (props.left) {
             position.left = props.left;
-            chevronFace = 'left';
+            chevronFace = ChevronFace.Left;
         } else {
             position.right = props.right;
-            chevronFace = 'right';
+            chevronFace = ChevronFace.Right;
         }
 
         const contextMenuRect = this.state.contextMenuElem ? this.state.contextMenuElem.getBoundingClientRect() : null;
 
-        const chevronOffset = {};
+        const chevronOffset: CSSProperties = {};
         if (props.chevronFace) {
             chevronFace = props.chevronFace;
         }
-        const hasChevron = chevronFace && chevronFace !== "none";
+        const hasChevron = chevronFace && chevronFace !== ChevronFace.None;
 
-        if (chevronFace === 'top' || chevronFace === 'bottom') {
+        if (chevronFace === ChevronFace.Top || chevronFace === ChevronFace.Bottom) {
             chevronOffset.left = props.chevronOffset;
         } else if (position.top !== undefined) {
             const target = position.top;
@@ -282,13 +318,13 @@ export class ContextMenu extends React.Component {
             'mx_ContextualMenu_right': !hasChevron && position.right,
             'mx_ContextualMenu_top': !hasChevron && position.top,
             'mx_ContextualMenu_bottom': !hasChevron && position.bottom,
-            'mx_ContextualMenu_withChevron_left': chevronFace === 'left',
-            'mx_ContextualMenu_withChevron_right': chevronFace === 'right',
-            'mx_ContextualMenu_withChevron_top': chevronFace === 'top',
-            'mx_ContextualMenu_withChevron_bottom': chevronFace === 'bottom',
+            'mx_ContextualMenu_withChevron_left': chevronFace === ChevronFace.Left,
+            'mx_ContextualMenu_withChevron_right': chevronFace === ChevronFace.Right,
+            'mx_ContextualMenu_withChevron_top': chevronFace === ChevronFace.Top,
+            'mx_ContextualMenu_withChevron_bottom': chevronFace === ChevronFace.Bottom,
         });
 
-        const menuStyle = {};
+        const menuStyle: CSSProperties = {};
         if (props.menuWidth) {
             menuStyle.width = props.menuWidth;
         }
@@ -319,13 +355,28 @@ export class ContextMenu extends React.Component {
         let background;
         if (hasBackground) {
             background = (
-                <div className="mx_ContextualMenu_background" style={wrapperStyle} onClick={props.onFinished} onContextMenu={this.onContextMenu} />
+                <div
+                    className="mx_ContextualMenu_background"
+                    style={wrapperStyle}
+                    onClick={this.onFinished}
+                    onContextMenu={this.onContextMenu}
+                />
             );
         }
 
         return (
-            <div className="mx_ContextualMenu_wrapper" style={{...position, ...wrapperStyle}} onKeyDown={this._onKeyDown}>
-                <div className={menuClasses} style={menuStyle} ref={this.collectContextMenuRect} role={this.props.managed ? "menu" : undefined}>
+            <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 }
                 </div>
@@ -334,91 +385,13 @@ export class ContextMenu extends React.Component {
         );
     }
 
-    render() {
+    render(): React.ReactChild {
         return ReactDOM.createPortal(this.renderMenu(), getOrCreateContainer());
     }
 }
 
-// Semantic component for representing the AccessibleButton which launches a <ContextMenu />
-export const ContextMenuButton = ({ label, isExpanded, children, ...props }) => {
-    const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-    return (
-        <AccessibleButton {...props} title={label} aria-label={label} aria-haspopup={true} aria-expanded={isExpanded}>
-            { children }
-        </AccessibleButton>
-    );
-};
-ContextMenuButton.propTypes = {
-    ...AccessibleButton.propTypes,
-    label: PropTypes.string,
-    isExpanded: PropTypes.bool.isRequired, // whether or not the context menu is currently open
-};
-
-// Semantic component for representing a role=menuitem
-export const MenuItem = ({children, label, ...props}) => {
-    const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-    return (
-        <AccessibleButton {...props} role="menuitem" tabIndex={-1} aria-label={label}>
-            { children }
-        </AccessibleButton>
-    );
-};
-MenuItem.propTypes = {
-    ...AccessibleButton.propTypes,
-    label: PropTypes.string, // optional
-    className: PropTypes.string, // optional
-    onClick: PropTypes.func.isRequired,
-};
-
-// Semantic component for representing a role=group for grouping menu radios/checkboxes
-export const MenuGroup = ({children, label, ...props}) => {
-    return <div {...props} role="group" aria-label={label}>
-        { children }
-    </div>;
-};
-MenuGroup.propTypes = {
-    label: PropTypes.string.isRequired,
-    className: PropTypes.string, // optional
-};
-
-// Semantic component for representing a role=menuitemcheckbox
-export const MenuItemCheckbox = ({children, label, active=false, disabled=false, ...props}) => {
-    const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-    return (
-        <AccessibleButton {...props} role="menuitemcheckbox" aria-checked={active} aria-disabled={disabled} tabIndex={-1} aria-label={label}>
-            { children }
-        </AccessibleButton>
-    );
-};
-MenuItemCheckbox.propTypes = {
-    ...AccessibleButton.propTypes,
-    label: PropTypes.string, // optional
-    active: PropTypes.bool.isRequired,
-    disabled: PropTypes.bool, // optional
-    className: PropTypes.string, // optional
-    onClick: PropTypes.func.isRequired,
-};
-
-// Semantic component for representing a role=menuitemradio
-export const MenuItemRadio = ({children, label, active=false, disabled=false, ...props}) => {
-    const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-    return (
-        <AccessibleButton {...props} role="menuitemradio" aria-checked={active} aria-disabled={disabled} tabIndex={-1} aria-label={label}>
-            { children }
-        </AccessibleButton>
-    );
-};
-MenuItemRadio.propTypes = {
-    ...AccessibleButton.propTypes,
-    label: PropTypes.string, // optional
-    active: PropTypes.bool.isRequired,
-    disabled: PropTypes.bool, // optional
-    className: PropTypes.string, // optional
-    onClick: PropTypes.func.isRequired,
-};
-
 // Placement method for <ContextMenu /> to position context menu to right of elementRect with chevronOffset
-export const toRightOf = (elementRect, chevronOffset=12) => {
+export const toRightOf = (elementRect: DOMRect, chevronOffset = 12) => {
     const left = elementRect.right + window.pageXOffset + 3;
     let top = elementRect.top + (elementRect.height / 2) + window.pageYOffset;
     top -= chevronOffset + 8; // where 8 is half the height of the chevron
@@ -426,8 +399,8 @@ export const toRightOf = (elementRect, chevronOffset=12) => {
 };
 
 // Placement method for <ContextMenu /> to position context menu right-aligned and flowing to the left of elementRect
-export const aboveLeftOf = (elementRect, chevronFace="none") => {
-    const menuOptions = { chevronFace };
+export const aboveLeftOf = (elementRect: DOMRect, chevronFace = ChevronFace.None) => {
+    const menuOptions: IPosition & { chevronFace: ChevronFace } = { chevronFace };
 
     const buttonRight = elementRect.right + window.pageXOffset;
     const buttonBottom = elementRect.bottom + window.pageYOffset;
@@ -485,3 +458,13 @@ export function createMenu(ElementClass, props) {
 
     return {close: onFinished};
 }
+
+// re-export the semantic helper components for simplicity
+export {ContextMenuButton} from "../../accessibility/context_menu/ContextMenuButton";
+export {ContextMenuTooltipButton} from "../../accessibility/context_menu/ContextMenuTooltipButton";
+export {MenuGroup} from "../../accessibility/context_menu/MenuGroup";
+export {MenuItem} from "../../accessibility/context_menu/MenuItem";
+export {MenuItemCheckbox} from "../../accessibility/context_menu/MenuItemCheckbox";
+export {MenuItemRadio} from "../../accessibility/context_menu/MenuItemRadio";
+export {StyledMenuItemCheckbox} from "../../accessibility/context_menu/StyledMenuItemCheckbox";
+export {StyledMenuItemRadio} from "../../accessibility/context_menu/StyledMenuItemRadio";

src/components/structures/HomePage.tsx

@@ -38,7 +38,7 @@ const HomePage = () => {
     }
 
     const brandingConfig = config.branding;
-    let logoUrl = "themes/riot/img/logos/riot-logo.svg";
+    let logoUrl = "themes/element/img/logos/element-logo.svg";
     if (brandingConfig && brandingConfig.authHeaderLogoUrl) {
         logoUrl = brandingConfig.authHeaderLogoUrl;
     }
@@ -46,7 +46,7 @@ const HomePage = () => {
     const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
     return <AutoHideScrollbar className="mx_HomePage mx_HomePage_default">
         <div className="mx_HomePage_default_wrapper">
-            <img src={logoUrl} alt="Riot" />
+            <img src={logoUrl} alt={config.brand || "Riot"} />
             <h1>{ _t("Welcome to %(appName)s", { appName: config.brand || "Riot" }) }</h1>
             <h4>{ _t("Liberate your communication") }</h4>
             <div className="mx_HomePage_default_buttons">

src/components/structures/IndicatorScrollbar.js

@@ -192,7 +192,7 @@ export default class IndicatorScrollbar extends React.Component {
             ref={this._collectScrollerComponent}
             wrappedRef={this._collectScroller}
             onWheel={this.onMouseWheel}
-            {... this.props}
+            {...this.props}
         >
             { leftOverflowIndicator }
             { this.props.children }

src/components/structures/LeftPanel.js

@@ -1,305 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 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 React from 'react';
-import createReactClass from 'create-react-class';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { Key } from '../../Keyboard';
-import * as sdk from '../../index';
-import dis from '../../dispatcher/dispatcher';
-import * as VectorConferenceHandler from '../../VectorConferenceHandler';
-import SettingsStore from '../../settings/SettingsStore';
-import {_t} from "../../languageHandler";
-import Analytics from "../../Analytics";
-import {Action} from "../../dispatcher/actions";
-
-
-const LeftPanel = createReactClass({
-    displayName: 'LeftPanel',
-
-    // NB. If you add props, don't forget to update
-    // shouldComponentUpdate!
-    propTypes: {
-        collapsed: PropTypes.bool.isRequired,
-    },
-
-    getInitialState: function() {
-        return {
-            searchFilter: '',
-            breadcrumbs: false,
-        };
-    },
-
-    // TODO: [REACT-WARNING] Move this to constructor
-    UNSAFE_componentWillMount: function() {
-        this.focusedElement = null;
-
-        this._breadcrumbsWatcherRef = SettingsStore.watchSetting(
-            "breadcrumbs", null, this._onBreadcrumbsChanged);
-        this._tagPanelWatcherRef = SettingsStore.watchSetting(
-            "TagPanel.enableTagPanel", null, () => this.forceUpdate());
-
-        const useBreadcrumbs = !!SettingsStore.getValue("breadcrumbs");
-        Analytics.setBreadcrumbs(useBreadcrumbs);
-        this.setState({breadcrumbs: useBreadcrumbs});
-    },
-
-    componentWillUnmount: function() {
-        SettingsStore.unwatchSetting(this._breadcrumbsWatcherRef);
-        SettingsStore.unwatchSetting(this._tagPanelWatcherRef);
-    },
-
-    shouldComponentUpdate: function(nextProps, nextState) {
-        // MatrixChat will update whenever the user switches
-        // rooms, but propagating this change all the way down
-        // the react tree is quite slow, so we cut this off
-        // here. The RoomTiles listen for the room change
-        // events themselves to know when to update.
-        // We just need to update if any of these things change.
-        if (
-            this.props.collapsed !== nextProps.collapsed ||
-            this.props.disabled !== nextProps.disabled
-        ) {
-            return true;
-        }
-
-        if (this.state.searchFilter !== nextState.searchFilter) {
-            return true;
-        }
-        if (this.state.searchExpanded !== nextState.searchExpanded) {
-            return true;
-        }
-
-        return false;
-    },
-
-    componentDidUpdate(prevProps, prevState) {
-        if (prevState.breadcrumbs !== this.state.breadcrumbs) {
-            Analytics.setBreadcrumbs(this.state.breadcrumbs);
-        }
-    },
-
-    _onBreadcrumbsChanged: function(settingName, roomId, level, valueAtLevel, value) {
-        // Features are only possible at a single level, so we can get away with using valueAtLevel.
-        // The SettingsStore runs on the same tick as the update, so `value` will be wrong.
-        this.setState({breadcrumbs: valueAtLevel});
-
-        // For some reason the setState doesn't trigger a render of the component, so force one.
-        // Probably has to do with the change happening outside of a change detector cycle.
-        this.forceUpdate();
-    },
-
-    _onFocus: function(ev) {
-        this.focusedElement = ev.target;
-    },
-
-    _onBlur: function(ev) {
-        this.focusedElement = null;
-    },
-
-    _onFilterKeyDown: function(ev) {
-        if (!this.focusedElement) return;
-
-        switch (ev.key) {
-            // On enter of rooms filter select and activate first room if such one exists
-            case Key.ENTER: {
-                const firstRoom = ev.target.closest(".mx_LeftPanel").querySelector(".mx_RoomTile");
-                if (firstRoom) {
-                    firstRoom.click();
-                }
-                break;
-            }
-        }
-    },
-
-    _onKeyDown: function(ev) {
-        if (!this.focusedElement) return;
-
-        switch (ev.key) {
-            case Key.ARROW_UP:
-                this._onMoveFocus(ev, true, true);
-                break;
-            case Key.ARROW_DOWN:
-                this._onMoveFocus(ev, false, true);
-                break;
-        }
-    },
-
-    _onMoveFocus: function(ev, up, trap) {
-        let element = this.focusedElement;
-
-        // unclear why this isn't needed
-        // var descending = (up == this.focusDirection) ? this.focusDescending : !this.focusDescending;
-        // this.focusDirection = up;
-
-        let descending = false; // are we currently descending or ascending through the DOM tree?
-        let classes;
-
-        do {
-            const child = up ? element.lastElementChild : element.firstElementChild;
-            const sibling = up ? element.previousElementSibling : element.nextElementSibling;
-
-            if (descending) {
-                if (child) {
-                    element = child;
-                } else if (sibling) {
-                    element = sibling;
-                } else {
-                    descending = false;
-                    element = element.parentElement;
-                }
-            } else {
-                if (sibling) {
-                    element = sibling;
-                    descending = true;
-                } else {
-                    element = element.parentElement;
-                }
-            }
-
-            if (element) {
-                classes = element.classList;
-            }
-        } while (element && !(
-            classes.contains("mx_RoomTile") ||
-            classes.contains("mx_RoomSubList_label") ||
-            classes.contains("mx_LeftPanel_filterRooms")));
-
-        if (element) {
-            ev.stopPropagation();
-            ev.preventDefault();
-            element.focus();
-            this.focusedElement = element;
-        } else if (trap) {
-            // if navigation is via up/down arrow-keys, trap in the widget so it doesn't send to composer
-            ev.stopPropagation();
-            ev.preventDefault();
-        }
-    },
-
-    onSearch: function(term) {
-        this.setState({ searchFilter: term });
-    },
-
-    onSearchCleared: function(source) {
-        if (source === "keyboard") {
-            dis.fire(Action.FocusComposer);
-        }
-        this.setState({searchExpanded: false});
-    },
-
-    collectRoomList: function(ref) {
-        this._roomList = ref;
-    },
-
-    _onSearchFocus: function() {
-        this.setState({searchExpanded: true});
-    },
-
-    _onSearchBlur: function(event) {
-        if (event.target.value.length === 0) {
-            this.setState({searchExpanded: false});
-        }
-    },
-
-    render: function() {
-        const RoomList = sdk.getComponent('rooms.RoomList');
-        const RoomBreadcrumbs = sdk.getComponent('rooms.RoomBreadcrumbs');
-        const TagPanel = sdk.getComponent('structures.TagPanel');
-        const CustomRoomTagPanel = sdk.getComponent('structures.CustomRoomTagPanel');
-        const TopLeftMenuButton = sdk.getComponent('structures.TopLeftMenuButton');
-        const SearchBox = sdk.getComponent('structures.SearchBox');
-        const CallPreview = sdk.getComponent('voip.CallPreview');
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-
-        const tagPanelEnabled = SettingsStore.getValue("TagPanel.enableTagPanel");
-        let tagPanelContainer;
-
-        const isCustomTagsEnabled = SettingsStore.isFeatureEnabled("feature_custom_tags");
-
-        if (tagPanelEnabled) {
-            tagPanelContainer = (<div className="mx_LeftPanel_tagPanelContainer">
-                <TagPanel />
-                { isCustomTagsEnabled ? <CustomRoomTagPanel /> : undefined }
-            </div>);
-        }
-
-        const containerClasses = classNames(
-            "mx_LeftPanel_container", "mx_fadable",
-            {
-                "collapsed": this.props.collapsed,
-                "mx_LeftPanel_container_hasTagPanel": tagPanelEnabled,
-                "mx_fadable_faded": this.props.disabled,
-            },
-        );
-
-        let exploreButton;
-        if (!this.props.collapsed) {
-            exploreButton = (
-                <div className={classNames("mx_LeftPanel_explore", {"mx_LeftPanel_explore_hidden": this.state.searchExpanded})}>
-                    <AccessibleButton onClick={() => dis.fire(Action.ViewRoomDirectory)}>{_t("Explore")}</AccessibleButton>
-                </div>
-            );
-        }
-
-        const searchBox = (<SearchBox
-            className="mx_LeftPanel_filterRooms"
-            enableRoomSearchFocus={true}
-            blurredPlaceholder={ _t('Filter') }
-            placeholder={ _t('Filter rooms…') }
-            onKeyDown={this._onFilterKeyDown}
-            onSearch={ this.onSearch }
-            onCleared={ this.onSearchCleared }
-            onFocus={this._onSearchFocus}
-            onBlur={this._onSearchBlur}
-            collapsed={this.props.collapsed} />);
-
-        let breadcrumbs;
-        if (this.state.breadcrumbs) {
-            breadcrumbs = (<RoomBreadcrumbs collapsed={this.props.collapsed} />);
-        }
-
-        const roomList = <RoomList
-            onKeyDown={this._onKeyDown}
-            onFocus={this._onFocus}
-            onBlur={this._onBlur}
-            ref={this.collectRoomList}
-            resizeNotifier={this.props.resizeNotifier}
-            collapsed={this.props.collapsed}
-            searchFilter={this.state.searchFilter}
-            ConferenceHandler={VectorConferenceHandler} />;
-
-        return (
-            <div className={containerClasses}>
-                { tagPanelContainer }
-                <aside className="mx_LeftPanel dark-panel">
-                    <TopLeftMenuButton collapsed={this.props.collapsed} />
-                    { breadcrumbs }
-                    <CallPreview ConferenceHandler={VectorConferenceHandler} />
-                    <div className="mx_LeftPanel_exploreAndFilterRow" onKeyDown={this._onKeyDown} onFocus={this._onFocus} onBlur={this._onBlur}>
-                        { exploreButton }
-                        { searchBox }
-                    </div>
-                    {roomList}
-                </aside>
-            </div>
-        );
-    },
-});
-
-export default LeftPanel;

src/components/structures/LeftPanel.tsx

@@ -0,0 +1,412 @@
+/*
+Copyright 2020 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 { createRef } from "react";
+import TagPanel from "./TagPanel";
+import classNames from "classnames";
+import dis from "../../dispatcher/dispatcher";
+import { _t } from "../../languageHandler";
+import RoomList from "../views/rooms/RoomList";
+import { HEADER_HEIGHT } from "../views/rooms/RoomSublist";
+import { Action } from "../../dispatcher/actions";
+import UserMenu from "./UserMenu";
+import RoomSearch from "./RoomSearch";
+import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs";
+import { BreadcrumbsStore } from "../../stores/BreadcrumbsStore";
+import { UPDATE_EVENT } from "../../stores/AsyncStore";
+import ResizeNotifier from "../../utils/ResizeNotifier";
+import SettingsStore from "../../settings/SettingsStore";
+import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore";
+import {Key} from "../../Keyboard";
+import IndicatorScrollbar from "../structures/IndicatorScrollbar";
+import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
+
+interface IProps {
+    isMinimized: boolean;
+    resizeNotifier: ResizeNotifier;
+}
+
+interface IState {
+    searchFilter: string;
+    showBreadcrumbs: boolean;
+    showTagPanel: boolean;
+}
+
+// List of CSS classes which should be included in keyboard navigation within the room list
+const cssClasses = [
+    "mx_RoomSearch_input",
+    "mx_RoomSearch_icon", // minimized <RoomSearch />
+    "mx_RoomSublist_headerText",
+    "mx_RoomTile",
+    "mx_RoomSublist_showNButton",
+];
+
+export default class LeftPanel extends React.Component<IProps, IState> {
+    private listContainerRef: React.RefObject<HTMLDivElement> = createRef();
+    private tagPanelWatcherRef: string;
+    private focusedElement = null;
+    private isDoingStickyHeaders = false;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            searchFilter: "",
+            showBreadcrumbs: BreadcrumbsStore.instance.visible,
+            showTagPanel: SettingsStore.getValue('TagPanel.enableTagPanel'),
+        };
+
+        BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate);
+        RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
+        this.tagPanelWatcherRef = SettingsStore.watchSetting("TagPanel.enableTagPanel", null, () => {
+            this.setState({showTagPanel: SettingsStore.getValue("TagPanel.enableTagPanel")});
+        });
+
+        // We watch the middle panel because we don't actually get resized, the middle panel does.
+        // We listen to the noisy channel to avoid choppy reaction times.
+        this.props.resizeNotifier.on("middlePanelResizedNoisy", this.onResize);
+    }
+
+    public componentWillUnmount() {
+        SettingsStore.unwatchSetting(this.tagPanelWatcherRef);
+        BreadcrumbsStore.instance.off(UPDATE_EVENT, this.onBreadcrumbsUpdate);
+        RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
+        this.props.resizeNotifier.off("middlePanelResizedNoisy", this.onResize);
+    }
+
+    private onSearch = (term: string): void => {
+        this.setState({searchFilter: term});
+    };
+
+    private onExplore = () => {
+        dis.fire(Action.ViewRoomDirectory);
+    };
+
+    private onBreadcrumbsUpdate = () => {
+        const newVal = BreadcrumbsStore.instance.visible;
+        if (newVal !== this.state.showBreadcrumbs) {
+            this.setState({showBreadcrumbs: newVal});
+
+            // Update the sticky headers too as the breadcrumbs will be popping in or out.
+            if (!this.listContainerRef.current) return; // ignore: no headers to sticky
+            this.handleStickyHeaders(this.listContainerRef.current);
+        }
+    };
+
+    private handleStickyHeaders(list: HTMLDivElement) {
+        if (this.isDoingStickyHeaders) return;
+        this.isDoingStickyHeaders = true;
+        window.requestAnimationFrame(() => {
+            this.doStickyHeaders(list);
+            this.isDoingStickyHeaders = false;
+        });
+    }
+
+    private doStickyHeaders(list: HTMLDivElement) {
+        const topEdge = list.scrollTop;
+        const bottomEdge = list.offsetHeight + list.scrollTop;
+        const sublists = list.querySelectorAll<HTMLDivElement>(".mx_RoomSublist");
+
+        const headerRightMargin = 16; // calculated from margins and widths to align with non-sticky tiles
+        const headerStickyWidth = list.clientWidth - headerRightMargin;
+
+        // We track which styles we want on a target before making the changes to avoid
+        // excessive layout updates.
+        const targetStyles = new Map<HTMLDivElement, {
+            stickyTop?: boolean;
+            stickyBottom?: boolean;
+            makeInvisible?: boolean;
+        }>();
+
+        let lastTopHeader;
+        let firstBottomHeader;
+        for (const sublist of sublists) {
+            const header = sublist.querySelector<HTMLDivElement>(".mx_RoomSublist_stickable");
+            header.style.removeProperty("display"); // always clear display:none first
+
+            // When an element is <=40% off screen, make it take over
+            const offScreenFactor = 0.4;
+            const isOffTop = (sublist.offsetTop + (offScreenFactor * HEADER_HEIGHT)) <= topEdge;
+            const isOffBottom = (sublist.offsetTop + (offScreenFactor * HEADER_HEIGHT)) >= bottomEdge;
+
+            if (isOffTop || sublist === sublists[0]) {
+                targetStyles.set(header, { stickyTop: true });
+                if (lastTopHeader) {
+                    lastTopHeader.style.display = "none";
+                    targetStyles.set(lastTopHeader, { makeInvisible: true });
+                }
+                lastTopHeader = header;
+            } else if (isOffBottom && !firstBottomHeader) {
+                targetStyles.set(header, { stickyBottom: true });
+                firstBottomHeader = header;
+            } else {
+                targetStyles.set(header, {}); // nothing == clear
+            }
+        }
+
+        // Run over the style changes and make them reality. We check to see if we're about to
+        // cause a no-op update, as adding/removing properties that are/aren't there cause
+        // layout updates.
+        for (const header of targetStyles.keys()) {
+            const style = targetStyles.get(header);
+
+            if (style.makeInvisible) {
+                // we will have already removed the 'display: none', so add it back.
+                header.style.display = "none";
+                continue; // nothing else to do, even if sticky somehow
+            }
+
+            if (style.stickyTop) {
+                if (!header.classList.contains("mx_RoomSublist_headerContainer_stickyTop")) {
+                    header.classList.add("mx_RoomSublist_headerContainer_stickyTop");
+                }
+
+                const newTop = `${list.parentElement.offsetTop}px`;
+                if (header.style.top !== newTop) {
+                    header.style.top = newTop;
+                }
+            } else {
+                if (header.classList.contains("mx_RoomSublist_headerContainer_stickyTop")) {
+                    header.classList.remove("mx_RoomSublist_headerContainer_stickyTop");
+                }
+                if (header.style.top) {
+                    header.style.removeProperty('top');
+                }
+            }
+
+            if (style.stickyBottom) {
+                if (!header.classList.contains("mx_RoomSublist_headerContainer_stickyBottom")) {
+                    header.classList.add("mx_RoomSublist_headerContainer_stickyBottom");
+                }
+            } else {
+                if (header.classList.contains("mx_RoomSublist_headerContainer_stickyBottom")) {
+                    header.classList.remove("mx_RoomSublist_headerContainer_stickyBottom");
+                }
+            }
+
+            if (style.stickyTop || style.stickyBottom) {
+                if (!header.classList.contains("mx_RoomSublist_headerContainer_sticky")) {
+                    header.classList.add("mx_RoomSublist_headerContainer_sticky");
+                }
+
+                const newWidth = `${headerStickyWidth}px`;
+                if (header.style.width !== newWidth) {
+                    header.style.width = newWidth;
+                }
+            } else if (!style.stickyTop && !style.stickyBottom) {
+                if (header.classList.contains("mx_RoomSublist_headerContainer_sticky")) {
+                    header.classList.remove("mx_RoomSublist_headerContainer_sticky");
+                }
+                if (header.style.width) {
+                    header.style.removeProperty('width');
+                }
+            }
+        }
+
+        // add appropriate sticky classes to wrapper so it has
+        // the necessary top/bottom padding to put the sticky header in
+        const listWrapper = list.parentElement; // .mx_LeftPanel_roomListWrapper
+        if (lastTopHeader) {
+            listWrapper.classList.add("mx_LeftPanel_roomListWrapper_stickyTop");
+        } else {
+            listWrapper.classList.remove("mx_LeftPanel_roomListWrapper_stickyTop");
+        }
+        if (firstBottomHeader) {
+            listWrapper.classList.add("mx_LeftPanel_roomListWrapper_stickyBottom");
+        } else {
+            listWrapper.classList.remove("mx_LeftPanel_roomListWrapper_stickyBottom");
+        }
+    }
+
+    private onScroll = (ev: React.MouseEvent<HTMLDivElement>) => {
+        const list = ev.target as HTMLDivElement;
+        this.handleStickyHeaders(list);
+    };
+
+    private onResize = () => {
+        if (!this.listContainerRef.current) return; // ignore: no headers to sticky
+        this.handleStickyHeaders(this.listContainerRef.current);
+    };
+
+    private onFocus = (ev: React.FocusEvent) => {
+        this.focusedElement = ev.target;
+    };
+
+    private onBlur = () => {
+        this.focusedElement = null;
+    };
+
+    private onKeyDown = (ev: React.KeyboardEvent) => {
+        if (!this.focusedElement) return;
+
+        switch (ev.key) {
+            case Key.ARROW_UP:
+            case Key.ARROW_DOWN:
+                ev.stopPropagation();
+                ev.preventDefault();
+                this.onMoveFocus(ev.key === Key.ARROW_UP);
+                break;
+        }
+    };
+
+    private onEnter = () => {
+        const firstRoom = this.listContainerRef.current.querySelector<HTMLDivElement>(".mx_RoomTile");
+        if (firstRoom) {
+            firstRoom.click();
+            return true; // to get the field to clear
+        }
+    };
+
+    private onMoveFocus = (up: boolean) => {
+        let element = this.focusedElement;
+
+        let descending = false; // are we currently descending or ascending through the DOM tree?
+        let classes: DOMTokenList;
+
+        do {
+            const child = up ? element.lastElementChild : element.firstElementChild;
+            const sibling = up ? element.previousElementSibling : element.nextElementSibling;
+
+            if (descending) {
+                if (child) {
+                    element = child;
+                } else if (sibling) {
+                    element = sibling;
+                } else {
+                    descending = false;
+                    element = element.parentElement;
+                }
+            } else {
+                if (sibling) {
+                    element = sibling;
+                    descending = true;
+                } else {
+                    element = element.parentElement;
+                }
+            }
+
+            if (element) {
+                classes = element.classList;
+            }
+        } while (element && !cssClasses.some(c => classes.contains(c)));
+
+        if (element) {
+            element.focus();
+            this.focusedElement = element;
+        }
+    };
+
+    private renderHeader(): React.ReactNode {
+        return (
+            <div className="mx_LeftPanel_userHeader">
+                <UserMenu isMinimized={this.props.isMinimized} />
+            </div>
+        );
+    }
+
+    private renderBreadcrumbs(): React.ReactNode {
+        if (this.state.showBreadcrumbs && !this.props.isMinimized) {
+            return (
+                <IndicatorScrollbar
+                    className="mx_LeftPanel_breadcrumbsContainer mx_AutoHideScrollbar"
+                    verticalScrollsHorizontally={true}
+                    // Firefox sometimes makes this element focusable due to
+                    // overflow:scroll;, so force it out of tab order.
+                    tabIndex={-1}
+                >
+                    <RoomBreadcrumbs />
+                </IndicatorScrollbar>
+            );
+        }
+    }
+
+    private renderSearchExplore(): React.ReactNode {
+        return (
+            <div
+                className="mx_LeftPanel_filterContainer"
+                onFocus={this.onFocus}
+                onBlur={this.onBlur}
+                onKeyDown={this.onKeyDown}
+            >
+                <RoomSearch
+                    onQueryUpdate={this.onSearch}
+                    isMinimized={this.props.isMinimized}
+                    onVerticalArrow={this.onKeyDown}
+                    onEnter={this.onEnter}
+                />
+                <AccessibleTooltipButton
+                    className="mx_LeftPanel_exploreButton"
+                    onClick={this.onExplore}
+                    title={_t("Explore rooms")}
+                />
+            </div>
+        );
+    }
+
+    public render(): React.ReactNode {
+        const tagPanel = !this.state.showTagPanel ? null : (
+            <div className="mx_LeftPanel_tagPanelContainer">
+                <TagPanel/>
+            </div>
+        );
+
+        const roomList = <RoomList
+            onKeyDown={this.onKeyDown}
+            resizeNotifier={null}
+            collapsed={false}
+            searchFilter={this.state.searchFilter}
+            onFocus={this.onFocus}
+            onBlur={this.onBlur}
+            isMinimized={this.props.isMinimized}
+            onResize={this.onResize}
+        />;
+
+        const containerClasses = classNames({
+            "mx_LeftPanel": true,
+            "mx_LeftPanel_hasTagPanel": !!tagPanel,
+            "mx_LeftPanel_minimized": this.props.isMinimized,
+        });
+
+        const roomListClasses = classNames(
+            "mx_LeftPanel_actualRoomListContainer",
+            "mx_AutoHideScrollbar",
+        );
+
+        return (
+            <div className={containerClasses}>
+                {tagPanel}
+                <aside className="mx_LeftPanel_roomListContainer">
+                    {this.renderHeader()}
+                    {this.renderSearchExplore()}
+                    {this.renderBreadcrumbs()}
+                    <div className="mx_LeftPanel_roomListWrapper">
+                        <div
+                            className={roomListClasses}
+                            onScroll={this.onScroll}
+                            ref={this.listContainerRef}
+                            // Firefox sometimes makes this element focusable due to
+                            // overflow:scroll;, so force it out of tab order.
+                            tabIndex={-1}
+                        >
+                            {roomList}
+                        </div>
+                    </div>
+                </aside>
+            </div>
+        );
+    }
+}

src/components/structures/LeftPanel2.tsx

@@ -1,232 +0,0 @@
-/*
-Copyright 2020 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 { createRef } from "react";
-import TagPanel from "./TagPanel";
-import classNames from "classnames";
-import dis from "../../dispatcher/dispatcher";
-import { _t } from "../../languageHandler";
-import RoomList2 from "../views/rooms/RoomList2";
-import { Action } from "../../dispatcher/actions";
-import UserMenu from "./UserMenu";
-import RoomSearch from "./RoomSearch";
-import AccessibleButton from "../views/elements/AccessibleButton";
-import RoomBreadcrumbs2 from "../views/rooms/RoomBreadcrumbs2";
-import { BreadcrumbsStore } from "../../stores/BreadcrumbsStore";
-import { UPDATE_EVENT } from "../../stores/AsyncStore";
-import ResizeNotifier from "../../utils/ResizeNotifier";
-import SettingsStore from "../../settings/SettingsStore";
-
-/*******************************************************************
- *   CAUTION                                                       *
- *******************************************************************
- * This is a work in progress implementation and isn't complete or *
- * even useful as a component. Please avoid using it until this    *
- * warning disappears.                                             *
- *******************************************************************/
-
-interface IProps {
-    isMinimized: boolean;
-    resizeNotifier: ResizeNotifier;
-}
-
-interface IState {
-    searchFilter: string; // TODO: Move search into room list?
-    showBreadcrumbs: boolean;
-    showTagPanel: boolean;
-}
-
-export default class LeftPanel2 extends React.Component<IProps, IState> {
-    private listContainerRef: React.RefObject<HTMLDivElement> = createRef();
-    private tagPanelWatcherRef: string;
-
-    // TODO: Properly support TagPanel
-    // TODO: Properly support searching/filtering
-    // TODO: Properly support breadcrumbs
-    // TODO: a11y
-    // TODO: actually make this useful in general (match design proposals)
-    // TODO: Fadable support (is this still needed?)
-
-    constructor(props: IProps) {
-        super(props);
-
-        this.state = {
-            searchFilter: "",
-            showBreadcrumbs: BreadcrumbsStore.instance.visible,
-            showTagPanel: SettingsStore.getValue('TagPanel.enableTagPanel'),
-        };
-
-        BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate);
-        this.tagPanelWatcherRef = SettingsStore.watchSetting("TagPanel.enableTagPanel", null, () => {
-            this.setState({showTagPanel: SettingsStore.getValue("TagPanel.enableTagPanel")});
-        });
-
-        // We watch the middle panel because we don't actually get resized, the middle panel does.
-        // We listen to the noisy channel to avoid choppy reaction times.
-        this.props.resizeNotifier.on("middlePanelResizedNoisy", this.onResize);
-    }
-
-    public componentWillUnmount() {
-        SettingsStore.unwatchSetting(this.tagPanelWatcherRef);
-        BreadcrumbsStore.instance.off(UPDATE_EVENT, this.onBreadcrumbsUpdate);
-        this.props.resizeNotifier.off("middlePanelResizedNoisy", this.onResize);
-    }
-
-    private onSearch = (term: string): void => {
-        this.setState({searchFilter: term});
-    };
-
-    private onExplore = () => {
-        dis.fire(Action.ViewRoomDirectory);
-    };
-
-    private onBreadcrumbsUpdate = () => {
-        const newVal = BreadcrumbsStore.instance.visible;
-        if (newVal !== this.state.showBreadcrumbs) {
-            this.setState({showBreadcrumbs: newVal});
-        }
-    };
-
-    private handleStickyHeaders(list: HTMLDivElement) {
-        const rlRect = list.getBoundingClientRect();
-        const bottom = rlRect.bottom;
-        const top = rlRect.top;
-        const sublists = list.querySelectorAll<HTMLDivElement>(".mx_RoomSublist2");
-        const headerHeight = 32; // Note: must match the CSS!
-        const headerRightMargin = 24; // calculated from margins and widths to align with non-sticky tiles
-
-        const headerStickyWidth = rlRect.width - headerRightMargin;
-
-        let gotBottom = false;
-        for (const sublist of sublists) {
-            const slRect = sublist.getBoundingClientRect();
-
-            const header = sublist.querySelector<HTMLDivElement>(".mx_RoomSublist2_stickable");
-
-            if (slRect.top + headerHeight > bottom && !gotBottom) {
-                header.classList.add("mx_RoomSublist2_headerContainer_sticky");
-                header.classList.add("mx_RoomSublist2_headerContainer_stickyBottom");
-                header.style.width = `${headerStickyWidth}px`;
-                header.style.top = `unset`;
-                gotBottom = true;
-            } else if (slRect.top < top) {
-                header.classList.add("mx_RoomSublist2_headerContainer_sticky");
-                header.classList.add("mx_RoomSublist2_headerContainer_stickyTop");
-                header.style.width = `${headerStickyWidth}px`;
-                header.style.top = `${rlRect.top}px`;
-            } else {
-                header.classList.remove("mx_RoomSublist2_headerContainer_sticky");
-                header.classList.remove("mx_RoomSublist2_headerContainer_stickyTop");
-                header.classList.remove("mx_RoomSublist2_headerContainer_stickyBottom");
-                header.style.width = `unset`;
-                header.style.top = `unset`;
-            }
-        }
-    }
-
-    // TODO: Apply this on resize, init, etc for reliability
-    private onScroll = (ev: React.MouseEvent<HTMLDivElement>) => {
-        const list = ev.target as HTMLDivElement;
-        this.handleStickyHeaders(list);
-    };
-
-    private onResize = () => {
-        if (!this.listContainerRef.current) return; // ignore: no headers to sticky
-        this.handleStickyHeaders(this.listContainerRef.current);
-    };
-
-    private renderHeader(): React.ReactNode {
-        // TODO: Update when profile info changes
-        // TODO: Presence
-        // TODO: Breadcrumbs toggle
-        // TODO: Menu button
-
-        let breadcrumbs;
-        if (this.state.showBreadcrumbs) {
-            breadcrumbs = (
-                <div className="mx_LeftPanel2_headerRow mx_LeftPanel2_breadcrumbsContainer">
-                    {this.props.isMinimized ? null : <RoomBreadcrumbs2 />}
-                </div>
-            );
-        }
-
-        return (
-            <div className="mx_LeftPanel2_userHeader">
-                <UserMenu isMinimized={this.props.isMinimized} />
-                {breadcrumbs}
-            </div>
-        );
-    }
-
-    private renderSearchExplore(): React.ReactNode {
-        // TODO: Collapsed support
-
-        return (
-            <div className="mx_LeftPanel2_filterContainer">
-                <RoomSearch onQueryUpdate={this.onSearch} isMinimized={this.props.isMinimized} />
-                <AccessibleButton
-                    tabIndex={-1}
-                    className='mx_LeftPanel2_exploreButton'
-                    onClick={this.onExplore}
-                    alt={_t("Explore rooms")}
-                />
-            </div>
-        );
-    }
-
-    public render(): React.ReactNode {
-        const tagPanel = !this.state.showTagPanel ? null : (
-            <div className="mx_LeftPanel2_tagPanelContainer">
-                <TagPanel/>
-            </div>
-        );
-
-        // TODO: Improve props for RoomList2
-        const roomList = <RoomList2
-            onKeyDown={() => {/*TODO*/}}
-            resizeNotifier={null}
-            collapsed={false}
-            searchFilter={this.state.searchFilter}
-            onFocus={() => {/*TODO*/}}
-            onBlur={() => {/*TODO*/}}
-            isMinimized={this.props.isMinimized}
-        />;
-
-        // TODO: Conference handling / calls
-
-        const containerClasses = classNames({
-            "mx_LeftPanel2": true,
-            "mx_LeftPanel2_hasTagPanel": !!tagPanel,
-            "mx_LeftPanel2_minimized": this.props.isMinimized,
-        });
-
-        return (
-            <div className={containerClasses}>
-                {tagPanel}
-                <aside className="mx_LeftPanel2_roomListContainer">
-                    {this.renderHeader()}
-                    {this.renderSearchExplore()}
-                    <div
-                        className="mx_LeftPanel2_actualRoomListContainer"
-                        onScroll={this.onScroll}
-                        ref={this.listContainerRef}
-                    >{roomList}</div>
-                </aside>
-            </div>
-        );
-    }
-}

src/components/structures/LoggedInView.tsx

@@ -19,7 +19,6 @@ limitations under the License.
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { MatrixClient } from 'matrix-js-sdk/src/client';
-import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import { DragDropContext } from 'react-beautiful-dnd';
 
 import {Key, isOnlyCtrlOrCmdKeyEvent, isOnlyCtrlOrCmdIgnoreShiftKeyEvent} from '../../Keyboard';
@@ -41,7 +40,6 @@ import * as KeyboardShortcuts from "../../accessibility/KeyboardShortcuts";
 import HomePage from "./HomePage";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import PlatformPeg from "../../PlatformPeg";
-import { RoomListStoreTempProxy } from "../../stores/room-list/RoomListStoreTempProxy";
 import { DefaultTagID } from "../../stores/room-list/models";
 import {
     showToast as showSetPasswordToast,
@@ -52,7 +50,10 @@ import {
     hideToast as hideServerLimitToast
 } from "../../toasts/ServerLimitToast";
 import { Action } from "../../dispatcher/actions";
-import LeftPanel2 from "./LeftPanel2";
+import LeftPanel from "./LeftPanel";
+import CallContainer from '../views/voip/CallContainer';
+import { ViewRoomDeltaPayload } from "../../dispatcher/payloads/ViewRoomDeltaPayload";
+import RoomListStore from "../../stores/room-list/RoomListStore";
 
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
@@ -146,6 +147,7 @@ class LoggedInView extends React.Component<IProps, IState> {
     protected readonly _resizeContainer: React.RefObject<ResizeHandle>;
     protected readonly _sessionStore: sessionStore;
     protected readonly _sessionStoreToken: { remove: () => void };
+    protected readonly _compactLayoutWatcherRef: string;
     protected resizer: Resizer;
 
     constructor(props, context) {
@@ -177,6 +179,10 @@ class LoggedInView extends React.Component<IProps, IState> {
         this._matrixClient.on("sync", this.onSync);
         this._matrixClient.on("RoomState.events", this.onRoomStateEvents);
 
+        this._compactLayoutWatcherRef = SettingsStore.watchSetting(
+            "useCompactLayout", null, this.onCompactLayoutChanged,
+        );
+
         fixupColorFonts();
 
         this._roomView = React.createRef();
@@ -194,6 +200,7 @@ class LoggedInView extends React.Component<IProps, IState> {
         this._matrixClient.removeListener("accountData", this.onAccountData);
         this._matrixClient.removeListener("sync", this.onSync);
         this._matrixClient.removeListener("RoomState.events", this.onRoomStateEvents);
+        SettingsStore.unwatchSetting(this._compactLayoutWatcherRef);
         if (this._sessionStoreToken) {
             this._sessionStoreToken.remove();
         }
@@ -263,16 +270,17 @@ class LoggedInView extends React.Component<IProps, IState> {
     }
 
     onAccountData = (event) => {
-        if (event.getType() === "im.vector.web.settings") {
-            this.setState({
-                useCompactLayout: event.getContent().useCompactLayout,
-            });
-        }
         if (event.getType() === "m.ignored_user_list") {
             dis.dispatch({action: "ignore_state_changed"});
         }
     };
 
+    onCompactLayoutChanged = (setting, roomId, level, valueAtLevel, newValue) => {
+        this.setState({
+            useCompactLayout: valueAtLevel,
+        });
+    };
+
     onSync = (syncState, oldSyncState, data) => {
         const oldErrCode = (
             this.state.syncErrorData &&
@@ -300,8 +308,8 @@ class LoggedInView extends React.Component<IProps, IState> {
     };
 
     onRoomStateEvents = (ev, state) => {
-        const roomLists = RoomListStoreTempProxy.getRoomLists();
-        if (roomLists[DefaultTagID.ServerNotice] && roomLists[DefaultTagID.ServerNotice].some(r => r.roomId === ev.getRoomId())) {
+        const serverNoticeList = RoomListStore.instance.orderedLists[DefaultTagID.ServerNotice];
+        if (serverNoticeList && serverNoticeList.some(r => r.roomId === ev.getRoomId())) {
             this._updateServerNoticeEvents();
         }
     };
@@ -320,11 +328,11 @@ class LoggedInView extends React.Component<IProps, IState> {
     }
 
     _updateServerNoticeEvents = async () => {
-        const roomLists = RoomListStoreTempProxy.getRoomLists();
-        if (!roomLists[DefaultTagID.ServerNotice]) return [];
+        const serverNoticeList = RoomListStore.instance.orderedLists[DefaultTagID.ServerNotice];
+        if (!serverNoticeList) return [];
 
         const events = [];
-        for (const room of roomLists[DefaultTagID.ServerNotice]) {
+        for (const room of serverNoticeList) {
             const pinStateEvent = room.currentState.getStateEvents("m.room.pinned_events", "");
 
             if (!pinStateEvent || !pinStateEvent.getContent().pinned) continue;
@@ -402,20 +410,6 @@ class LoggedInView extends React.Component<IProps, IState> {
     };
 
     _onKeyDown = (ev) => {
-            /*
-            // Remove this for now as ctrl+alt = alt-gr so this breaks keyboards which rely on alt-gr for numbers
-            // Will need to find a better meta key if anyone actually cares about using this.
-            if (ev.altKey && ev.ctrlKey && ev.keyCode > 48 && ev.keyCode < 58) {
-                dis.dispatch({
-                    action: 'view_indexed_room',
-                    roomIndex: ev.keyCode - 49,
-                });
-                ev.stopPropagation();
-                ev.preventDefault();
-                return;
-            }
-            */
-
         let handled = false;
         const ctrlCmdOnly = isOnlyCtrlOrCmdKeyEvent(ev);
         const hasModifier = ev.altKey || ev.ctrlKey || ev.metaKey || ev.shiftKey;
@@ -467,8 +461,8 @@ class LoggedInView extends React.Component<IProps, IState> {
             case Key.ARROW_UP:
             case Key.ARROW_DOWN:
                 if (ev.altKey && !ev.ctrlKey && !ev.metaKey) {
-                    dis.dispatch({
-                        action: 'view_room_delta',
+                    dis.dispatch<ViewRoomDeltaPayload>({
+                        action: Action.ViewRoomDelta,
                         delta: ev.key === Key.ARROW_UP ? -1 : 1,
                         unread: ev.shiftKey,
                     });
@@ -613,7 +607,6 @@ class LoggedInView extends React.Component<IProps, IState> {
     };
 
     render() {
-        const LeftPanel = sdk.getComponent('structures.LeftPanel');
         const RoomView = sdk.getComponent('structures.RoomView');
         const UserView = sdk.getComponent('structures.UserView');
         const GroupView = sdk.getComponent('structures.GroupView');
@@ -667,22 +660,12 @@ class LoggedInView extends React.Component<IProps, IState> {
             bodyClasses += ' mx_MatrixChat_useCompactLayout';
         }
 
-        let leftPanel = (
+        const leftPanel = (
             <LeftPanel
+                isMinimized={this.props.collapseLhs || false}
                 resizeNotifier={this.props.resizeNotifier}
-                collapsed={this.props.collapseLhs || false}
-                disabled={this.props.leftDisabled}
             />
         );
-        if (SettingsStore.isFeatureEnabled("feature_new_room_list")) {
-            // TODO: Supply props like collapsed and disabled to LeftPanel2
-            leftPanel = (
-                <LeftPanel2
-                    isMinimized={this.props.collapseLhs || false}
-                    resizeNotifier={this.props.resizeNotifier}
-                />
-            );
-        }
 
         return (
             <MatrixClientContext.Provider value={this._matrixClient}>
@@ -703,6 +686,7 @@ class LoggedInView extends React.Component<IProps, IState> {
                         </div>
                     </DragDropContext>
                 </div>
+                <CallContainer />
             </MatrixClientContext.Provider>
         );
     }

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
@@ -51,7 +50,7 @@ import PageTypes from '../../PageTypes';
 import { getHomePageUrl } from '../../utils/pages';
 
 import createRoom from "../../createRoom";
-import { _t, getCurrentLanguage } from '../../languageHandler';
+import {_t, _td, getCurrentLanguage} from '../../languageHandler';
 import SettingsStore, { SettingLevel } from "../../settings/SettingsStore";
 import ThemeController from "../../settings/controllers/ThemeController";
 import { startAnyRegistrationFlow } from "../../Registration.js";
@@ -75,6 +74,7 @@ import {
 } from "../../toasts/AnalyticsToast";
 import {showToast as showNotificationsToast} from "../../toasts/DesktopNotificationsToast";
 import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload";
+import ErrorDialog from "../views/dialogs/ErrorDialog";
 
 /** constants for MatrixChat.state.view */
 export enum Views {
@@ -461,7 +461,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
 
     onAction = (payload) => {
         // console.log(`MatrixClientPeg.onAction: ${payload.action}`);
-        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
 
         // Start the onboarding process for certain actions
@@ -555,6 +554,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             case 'leave_room':
                 this.leaveRoom(payload.room_id);
                 break;
+            case 'forget_room':
+                this.forgetRoom(payload.room_id);
+                break;
             case 'reject_invite':
                 Modal.createTrackedDialog('Reject invitation', '', QuestionDialog, {
                     title: _t('Reject invitation'),
@@ -597,15 +599,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 }
                 break;
             }
-            case 'view_prev_room':
-                this.viewNextRoom(-1);
-                break;
             case 'view_next_room':
                 this.viewNextRoom(1);
                 break;
-            case 'view_indexed_room':
-                this.viewIndexedRoom(payload.roomIndex);
-                break;
             case Action.ViewUserSettings: {
                 const tabPayload = payload as OpenToTabPayload;
                 const UserSettingsDialog = sdk.getComponent("dialogs.UserSettingsDialog");
@@ -679,12 +675,16 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             case 'hide_left_panel':
                 this.setState({
                     collapseLhs: true,
+                }, () => {
+                    this.state.resizeNotifier.notifyLeftHandleResized();
                 });
                 break;
             case 'focus_room_filter': // for CtrlOrCmd+K to work by expanding the left panel first
             case 'show_left_panel':
                 this.setState({
                     collapseLhs: false,
+                }, () => {
+                    this.state.resizeNotifier.notifyLeftHandleResized();
                 });
                 break;
             case 'panel_disable': {
@@ -813,19 +813,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         });
     }
 
-    // TODO: Move to RoomViewStore
-    private viewIndexedRoom(roomIndex: number) {
-        const allRooms = RoomListSorter.mostRecentActivityFirst(
-            MatrixClientPeg.get().getRooms(),
-        );
-        if (allRooms[roomIndex]) {
-            dis.dispatch({
-                action: 'view_room',
-                room_id: allRooms[roomIndex].roomId,
-            });
-        }
-    }
-
     // switch view to the given room
     //
     // @param {Object} roomInfo Object containing data about the room to be joined
@@ -1080,7 +1067,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
 
     private leaveRoom(roomId: string) {
         const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         const roomToLeave = MatrixClientPeg.get().getRoom(roomId);
         const warnings = this.leaveRoomWarnings(roomId);
 
@@ -1144,6 +1130,21 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         });
     }
 
+    private forgetRoom(roomId: string) {
+        MatrixClientPeg.get().forget(roomId).then(() => {
+            // Switch to another room view if we're currently viewing the historical room
+            if (this.state.currentRoomId === roomId) {
+                dis.dispatch({ action: "view_next_room" });
+            }
+        }).catch((err) => {
+            const errCode = err.errcode || _td("unknown error code");
+            Modal.createTrackedDialog("Failed to forget room", '', ErrorDialog, {
+                title: _t("Failed to forget room %(errCode)s", {errCode}),
+                description: ((err && err.message) ? err.message : _t("Operation failed")),
+            });
+        });
+    }
+
     /**
      * Starts a chat with the welcome user, if the user doesn't already have one
      * @returns {string} The room ID of the new room, or null if no room was created
@@ -1392,7 +1393,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 return;
             }
 
-            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createTrackedDialog('Signed out', '', ErrorDialog, {
                 title: _t('Signed Out'),
                 description: _t('For security, this session has been signed out. Please sign in again.'),
@@ -1462,19 +1462,20 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             }
         });
         cli.on("crypto.warning", (type) => {
-            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             switch (type) {
                 case 'CRYPTO_WARNING_OLD_VERSION_DETECTED':
+                    const brand = SdkConfig.get().brand;
                     Modal.createTrackedDialog('Crypto migrated', '', ErrorDialog, {
                         title: _t('Old cryptography data detected'),
                         description: _t(
-                            "Data from an older version of Riot has been detected. " +
+                            "Data from an older version of %(brand)s has been detected. " +
                             "This will have caused end-to-end cryptography to malfunction " +
                             "in the older version. End-to-end encrypted messages exchanged " +
                             "recently whilst using the older version may not be decryptable " +
                             "in this version. This may also cause messages exchanged with this " +
                             "version to fail. If you experience problems, log out and back in " +
                             "again. To retain message history, export and re-import your keys.",
+                            { brand },
                         ),
                     });
                     break;
@@ -1839,7 +1840,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         } else {
             subtitle = `${this.subTitleStatus} ${subtitle}`;
         }
-        document.title = `${SdkConfig.get().brand || 'Riot'} ${subtitle}`;
+        document.title = `${SdkConfig.get().brand} ${subtitle}`;
     }
 
     updateStatusIndicator(state: string, prevState: string) {
@@ -1932,11 +1933,12 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
 
     getFragmentAfterLogin() {
         let fragmentAfterLogin = "";
-        if (this.props.initialScreenAfterLogin &&
+        const initialScreenAfterLogin = this.props.initialScreenAfterLogin;
+        if (initialScreenAfterLogin &&
             // XXX: workaround for https://github.com/vector-im/riot-web/issues/11643 causing a login-loop
-            !["welcome", "login", "register"].includes(this.props.initialScreenAfterLogin.screen)
+            !["welcome", "login", "register", "start_sso", "start_cas"].includes(initialScreenAfterLogin.screen)
         ) {
-            fragmentAfterLogin = `/${this.props.initialScreenAfterLogin.screen}`;
+            fragmentAfterLogin = `/${initialScreenAfterLogin.screen}`;
         }
         return fragmentAfterLogin;
     }

src/components/structures/MessagePanel.js

@@ -388,8 +388,11 @@ export default class MessagePanel extends React.Component {
             }
 
             return (
-                <li key={"readMarker_"+eventId} ref={this._readMarkerNode}
-                      className="mx_RoomView_myReadMarker_container">
+                <li key={"readMarker_"+eventId}
+                    ref={this._readMarkerNode}
+                    className="mx_RoomView_myReadMarker_container"
+                    data-scroll-tokens={eventId}
+                >
                     { hr }
                 </li>
             );

src/components/structures/MyGroups.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2017 Vector Creations Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2020 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.
@@ -19,6 +20,7 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import * as sdk from '../../index';
 import { _t } from '../../languageHandler';
+import SdkConfig from '../../SdkConfig';
 import dis from '../../dispatcher/dispatcher';
 import AccessibleButton from '../views/elements/AccessibleButton';
 import MatrixClientContext from "../../contexts/MatrixClientContext";
@@ -60,6 +62,7 @@ export default createReactClass({
     },
 
     render: function() {
+        const brand = SdkConfig.get().brand;
         const Loader = sdk.getComponent("elements.Spinner");
         const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
         const GroupTile = sdk.getComponent("groups.GroupTile");
@@ -77,7 +80,8 @@ export default createReactClass({
                     <div className="mx_MyGroups_microcopy">
                         <p>
                             { _t(
-                                "Did you know: you can use communities to filter your Riot.im experience!",
+                                "Did you know: you can use communities to filter your %(brand)s experience!",
+                                { brand },
                             ) }
                         </p>
                         <p>

src/components/structures/RoomDirectory.js

@@ -1,7 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 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.
@@ -25,6 +25,7 @@ import Modal from "../../Modal";
 import { linkifyAndSanitizeHtml } from '../../HtmlUtils';
 import PropTypes from 'prop-types';
 import { _t } from '../../languageHandler';
+import SdkConfig from '../../SdkConfig';
 import { instanceForInstanceId, protocolNameForInstanceId } from '../../utils/DirectoryUtils';
 import Analytics from '../../Analytics';
 import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
@@ -74,7 +75,7 @@ export default createReactClass({
             this.protocols = response;
             this.setState({protocolsLoading: false});
         }, (err) => {
-            console.warn(`error loading thirdparty protocols: ${err}`);
+            console.warn(`error loading third party protocols: ${err}`);
             this.setState({protocolsLoading: false});
             if (MatrixClientPeg.get().isGuest()) {
                 // Guests currently aren't allowed to use this API, so
@@ -83,10 +84,12 @@ export default createReactClass({
                 return;
             }
             track('Failed to get protocol list from homeserver');
+            const brand = SdkConfig.get().brand;
             this.setState({
                 error: _t(
-                    'Riot failed to get the protocol list from the homeserver. ' +
+                    '%(brand)s failed to get the protocol list from the homeserver. ' +
                     'The homeserver may be too old to support third party networks.',
+                    { brand },
                 ),
             });
         });
@@ -173,12 +176,13 @@ export default createReactClass({
 
             console.error("Failed to get publicRooms: %s", JSON.stringify(err));
             track('Failed to get public room list');
+            const brand = SdkConfig.get().brand;
             this.setState({
                 loading: false,
-                error:
-                    `${_t('Riot failed to get the public room list.')} ` +
-                    `${(err && err.message) ? err.message : _t('The homeserver may be unavailable or overloaded.')}`
-                ,
+                error: (
+                    _t('%(brand)s failed to get the public room list.', { brand }) +
+                    (err && err.message) ? err.message : _t('The homeserver may be unavailable or overloaded.')
+                ),
             });
         });
     },
@@ -314,9 +318,10 @@ export default createReactClass({
             const fields = protocolName ? this._getFieldsForThirdPartyLocation(alias, this.protocols[protocolName], instance) : null;
             if (!fields) {
                 const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                const brand = SdkConfig.get().brand;
                 Modal.createTrackedDialog('Unable to join network', '', ErrorDialog, {
                     title: _t('Unable to join network'),
-                    description: _t('Riot does not know how to join a room on this network'),
+                    description: _t('%(brand)s does not know how to join a room on this network', { brand }),
                 });
                 return;
             }

src/components/structures/RoomSearch.tsx

@@ -25,17 +25,11 @@ import { Key } from "../../Keyboard";
 import AccessibleButton from "../views/elements/AccessibleButton";
 import { Action } from "../../dispatcher/actions";
 
-/*******************************************************************
- *   CAUTION                                                       *
- *******************************************************************
- * This is a work in progress implementation and isn't complete or *
- * even useful as a component. Please avoid using it until this    *
- * warning disappears.                                             *
- *******************************************************************/
-
 interface IProps {
     onQueryUpdate: (newQuery: string) => void;
     isMinimized: boolean;
+    onVerticalArrow(ev: React.KeyboardEvent): void;
+    onEnter(ev: React.KeyboardEvent): boolean;
 }
 
 interface IState {
@@ -78,6 +72,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
 
     private openSearch = () => {
         defaultDispatcher.dispatch({action: "show_left_panel"});
+        defaultDispatcher.dispatch({action: "focus_room_filter"});
     };
 
     private onChange = () => {
@@ -101,7 +96,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
         ev.target.select();
     };
 
-    private onBlur = () => {
+    private onBlur = (ev: React.FocusEvent<HTMLInputElement>) => {
         this.setState({focused: false});
     };
 
@@ -109,6 +104,16 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
         if (ev.key === Key.ESCAPE) {
             this.clearInput();
             defaultDispatcher.fire(Action.FocusComposer);
+        } else if (ev.key === Key.ARROW_UP || ev.key === Key.ARROW_DOWN) {
+            this.props.onVerticalArrow(ev);
+        } else if (ev.key === Key.ENTER) {
+            const shouldClear = this.props.onEnter(ev);
+            if (shouldClear) {
+                // wrap in set immediate to delay it so that we don't clear the filter & then change room
+                setImmediate(() => {
+                    this.clearInput();
+                });
+            }
         }
     };
 
@@ -144,7 +149,8 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
         let clearButton = (
             <AccessibleButton
                 tabIndex={-1}
-                className='mx_RoomSearch_clearButton'
+                title={_t("Clear filter")}
+                className="mx_RoomSearch_clearButton"
                 onClick={this.clearInput}
             />
         );
@@ -152,8 +158,8 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
         if (this.props.isMinimized) {
             icon = (
                 <AccessibleButton
-                    tabIndex={-1}
-                    className='mx_RoomSearch_icon'
+                    title={_t("Search rooms")}
+                    className="mx_RoomSearch_icon"
                     onClick={this.openSearch}
                 />
             );

src/components/structures/RoomStatusBar.js

@@ -173,7 +173,7 @@ export default createReactClass({
         if (this.props.hasActiveCall) {
             const TintableSvg = sdk.getComponent("elements.TintableSvg");
             return (
-                <TintableSvg src={require("../../../res/img/sound-indicator.svg")} width="23" height="20" />
+                <TintableSvg src={require("../../../res/img/element-icons/room/in-call.svg")} width="23" height="20" />
             );
         }
 

src/components/structures/RoomSubList.js

@@ -1,496 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
-Copyright 2018, 2019 New Vector Ltd
-Copyright 2019 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 React, {createRef} from 'react';
-import classNames from 'classnames';
-import * as sdk from '../../index';
-import dis from '../../dispatcher/dispatcher';
-import * as Unread from '../../Unread';
-import * as RoomNotifs from '../../RoomNotifs';
-import * as FormattingUtils from '../../utils/FormattingUtils';
-import IndicatorScrollbar from './IndicatorScrollbar';
-import {Key} from '../../Keyboard';
-import { Group } from 'matrix-js-sdk';
-import PropTypes from 'prop-types';
-import RoomTile from "../views/rooms/RoomTile";
-import LazyRenderList from "../views/elements/LazyRenderList";
-import {_t} from "../../languageHandler";
-import {RovingTabIndexWrapper} from "../../accessibility/RovingTabIndex";
-import {toPx} from "../../utils/units";
-
-// turn this on for drop & drag console debugging galore
-const debug = false;
-
-class RoomTileErrorBoundary extends React.PureComponent {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            error: null,
-        };
-    }
-
-    static getDerivedStateFromError(error) {
-        // Side effects are not permitted here, so we only update the state so
-        // that the next render shows an error message.
-        return { error };
-    }
-
-    componentDidCatch(error, { componentStack }) {
-        // Browser consoles are better at formatting output when native errors are passed
-        // in their own `console.error` invocation.
-        console.error(error);
-        console.error(
-            "The above error occured while React was rendering the following components:",
-            componentStack,
-        );
-    }
-
-    render() {
-        if (this.state.error) {
-            return (<div className="mx_RoomTile mx_RoomTileError">
-                {this.props.roomId}
-            </div>);
-        } else {
-            return this.props.children;
-        }
-    }
-}
-
-export default class RoomSubList extends React.PureComponent {
-    static displayName = 'RoomSubList';
-    static debug = debug;
-
-    static propTypes = {
-        list: PropTypes.arrayOf(PropTypes.object).isRequired,
-        label: PropTypes.string.isRequired,
-        tagName: PropTypes.string,
-        addRoomLabel: PropTypes.string,
-
-        // passed through to RoomTile and used to highlight room with `!` regardless of notifications count
-        isInvite: PropTypes.bool,
-
-        startAsHidden: PropTypes.bool,
-        showSpinner: PropTypes.bool, // true to show a spinner if 0 elements when expanded
-        collapsed: PropTypes.bool.isRequired, // is LeftPanel collapsed?
-        onHeaderClick: PropTypes.func,
-        incomingCall: PropTypes.object,
-        extraTiles: PropTypes.arrayOf(PropTypes.node), // extra elements added beneath tiles
-        forceExpand: PropTypes.bool,
-    };
-
-    static defaultProps = {
-        onHeaderClick: function() {
-        }, // NOP
-        extraTiles: [],
-        isInvite: false,
-    };
-
-    static getDerivedStateFromProps(props, state) {
-        return {
-            listLength: props.list.length,
-            scrollTop: props.list.length === state.listLength ? state.scrollTop : 0,
-        };
-    }
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            hidden: this.props.startAsHidden || false,
-            // some values to get LazyRenderList starting
-            scrollerHeight: 800,
-            scrollTop: 0,
-            // React 16's getDerivedStateFromProps(props, state) doesn't give the previous props so
-            // we have to store the length of the list here so we can see if it's changed or not...
-            listLength: null,
-        };
-
-        this._header = createRef();
-        this._subList = createRef();
-        this._scroller = createRef();
-        this._headerButton = createRef();
-    }
-
-    componentDidMount() {
-        this.dispatcherRef = dis.register(this.onAction);
-    }
-
-    componentWillUnmount() {
-        dis.unregister(this.dispatcherRef);
-    }
-
-    // The header is collapsible if it is hidden or not stuck
-    // The dataset elements are added in the RoomList _initAndPositionStickyHeaders method
-    isCollapsibleOnClick() {
-        const stuck = this._header.current.dataset.stuck;
-        if (!this.props.forceExpand && (this.state.hidden || stuck === undefined || stuck === "none")) {
-            return true;
-        } else {
-            return false;
-        }
-    }
-
-    onAction = (payload) => {
-        switch (payload.action) {
-            case 'on_room_read':
-                // XXX: Previously RoomList would forceUpdate whenever on_room_read is dispatched,
-                // but this is no longer true, so we must do it here (and can apply the small
-                // optimisation of checking that we care about the room being read).
-                //
-                // Ultimately we need to transition to a state pushing flow where something
-                // explicitly notifies the components concerned that the notif count for a room
-                // has change (e.g. a Flux store).
-                if (this.props.list.some((r) => r.roomId === payload.roomId)) {
-                    this.forceUpdate();
-                }
-                break;
-
-            case 'view_room':
-                if (this.state.hidden && !this.props.forceExpand && payload.show_room_tile &&
-                    this.props.list.some((r) => r.roomId === payload.room_id)
-                ) {
-                    this.toggle();
-                }
-        }
-    };
-
-    toggle = () => {
-        if (this.isCollapsibleOnClick()) {
-            // The header isCollapsible, so the click is to be interpreted as collapse and truncation logic
-            const isHidden = !this.state.hidden;
-            this.setState({hidden: isHidden}, () => {
-                this.props.onHeaderClick(isHidden);
-            });
-        } else {
-            // The header is stuck, so the click is to be interpreted as a scroll to the header
-            this.props.onHeaderClick(this.state.hidden, this._header.current.dataset.originalPosition);
-        }
-    };
-
-    onClick = (ev) => {
-        this.toggle();
-    };
-
-    onHeaderKeyDown = (ev) => {
-        switch (ev.key) {
-            case Key.ARROW_LEFT:
-                // On ARROW_LEFT collapse the room sublist
-                if (!this.state.hidden && !this.props.forceExpand) {
-                    this.onClick();
-                }
-                ev.stopPropagation();
-                break;
-            case Key.ARROW_RIGHT: {
-                ev.stopPropagation();
-                if (this.state.hidden && !this.props.forceExpand) {
-                    // sublist is collapsed, expand it
-                    this.onClick();
-                } else if (!this.props.forceExpand) {
-                    // sublist is expanded, go to first room
-                    const element = this._subList.current && this._subList.current.querySelector(".mx_RoomTile");
-                    if (element) {
-                        element.focus();
-                    }
-                }
-                break;
-            }
-        }
-    };
-
-    onKeyDown = (ev) => {
-        switch (ev.key) {
-            // On ARROW_LEFT go to the sublist header
-            case Key.ARROW_LEFT:
-                ev.stopPropagation();
-                this._headerButton.current.focus();
-                break;
-            // Consume ARROW_RIGHT so it doesn't cause focus to get sent to composer
-            case Key.ARROW_RIGHT:
-                ev.stopPropagation();
-        }
-    };
-
-    onRoomTileClick = (roomId, ev) => {
-        dis.dispatch({
-            action: 'view_room',
-            show_room_tile: true, // to make sure the room gets scrolled into view
-            room_id: roomId,
-            clear_search: (ev && (ev.key === Key.ENTER || ev.key === Key.SPACE)),
-        });
-    };
-
-    _updateSubListCount = () => {
-        // Force an update by setting the state to the current state
-        // Doing it this way rather than using forceUpdate(), so that the shouldComponentUpdate()
-        // method is honoured
-        this.setState(this.state);
-    };
-
-    makeRoomTile = (room) => {
-        return <RoomTileErrorBoundary roomId={room.roomId}><RoomTile
-            room={room}
-            roomSubList={this}
-            tagName={this.props.tagName}
-            key={room.roomId}
-            collapsed={this.props.collapsed || false}
-            unread={Unread.doesRoomHaveUnreadMessages(room)}
-            highlight={this.props.isInvite || RoomNotifs.getUnreadNotificationCount(room, 'highlight') > 0}
-            notificationCount={RoomNotifs.getUnreadNotificationCount(room)}
-            isInvite={this.props.isInvite}
-            refreshSubList={this._updateSubListCount}
-            incomingCall={null}
-            onClick={this.onRoomTileClick}
-        /></RoomTileErrorBoundary>;
-    };
-
-    _onNotifBadgeClick = (e) => {
-        // prevent the roomsublist collapsing
-        e.preventDefault();
-        e.stopPropagation();
-        const room = this.props.list.find(room => RoomNotifs.getRoomHasBadge(room));
-        if (room) {
-            dis.dispatch({
-                action: 'view_room',
-                room_id: room.roomId,
-            });
-        }
-    };
-
-    _onInviteBadgeClick = (e) => {
-        // prevent the roomsublist collapsing
-        e.preventDefault();
-        e.stopPropagation();
-        // switch to first room in sortedList as that'll be the top of the list for the user
-        if (this.props.list && this.props.list.length > 0) {
-            dis.dispatch({
-                action: 'view_room',
-                room_id: this.props.list[0].roomId,
-            });
-        } else if (this.props.extraTiles && this.props.extraTiles.length > 0) {
-            // Group Invites are different in that they are all extra tiles and not rooms
-            // XXX: this is a horrible special case because Group Invite sublist is a hack
-            if (this.props.extraTiles[0].props && this.props.extraTiles[0].props.group instanceof Group) {
-                dis.dispatch({
-                    action: 'view_group',
-                    group_id: this.props.extraTiles[0].props.group.groupId,
-                });
-            }
-        }
-    };
-
-    onAddRoom = (e) => {
-        e.stopPropagation();
-        if (this.props.onAddRoom) this.props.onAddRoom();
-    };
-
-    _getHeaderJsx(isCollapsed) {
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        const AccessibleTooltipButton = sdk.getComponent('elements.AccessibleTooltipButton');
-        const subListNotifications = !this.props.isInvite ?
-            RoomNotifs.aggregateNotificationCount(this.props.list) :
-            {count: 0, highlight: true};
-        const subListNotifCount = subListNotifications.count;
-        const subListNotifHighlight = subListNotifications.highlight;
-
-        // When collapsed, allow a long hover on the header to show user
-        // the full tag name and room count
-        let title;
-        if (this.props.collapsed) {
-            title = this.props.label;
-        }
-
-        let incomingCall;
-        if (this.props.incomingCall) {
-            // We can assume that if we have an incoming call then it is for this list
-            const IncomingCallBox = sdk.getComponent("voip.IncomingCallBox");
-            incomingCall =
-                <IncomingCallBox className="mx_RoomSubList_incomingCall" incomingCall={this.props.incomingCall} />;
-        }
-
-        const len = this.props.list.length + this.props.extraTiles.length;
-        let chevron;
-        if (len) {
-            const chevronClasses = classNames({
-                'mx_RoomSubList_chevron': true,
-                'mx_RoomSubList_chevronRight': isCollapsed,
-                'mx_RoomSubList_chevronDown': !isCollapsed,
-            });
-            chevron = (<div className={chevronClasses} />);
-        }
-
-        return <RovingTabIndexWrapper inputRef={this._headerButton}>
-            {({onFocus, isActive, ref}) => {
-                const tabIndex = isActive ? 0 : -1;
-
-                let badge;
-                if (!this.props.collapsed) {
-                    const badgeClasses = classNames({
-                        'mx_RoomSubList_badge': true,
-                        'mx_RoomSubList_badgeHighlight': subListNotifHighlight,
-                    });
-                    // Wrap the contents in a div and apply styles to the child div so that the browser default outline works
-                    if (subListNotifCount > 0) {
-                        badge = (
-                            <AccessibleButton
-                                tabIndex={tabIndex}
-                                className={badgeClasses}
-                                onClick={this._onNotifBadgeClick}
-                                aria-label={_t("Jump to first unread room.")}
-                            >
-                                <div>
-                                    { FormattingUtils.formatCount(subListNotifCount) }
-                                </div>
-                            </AccessibleButton>
-                        );
-                    } else if (this.props.isInvite && this.props.list.length) {
-                        // no notifications but highlight anyway because this is an invite badge
-                        badge = (
-                            <AccessibleButton
-                                tabIndex={tabIndex}
-                                className={badgeClasses}
-                                onClick={this._onInviteBadgeClick}
-                                aria-label={_t("Jump to first invite.")}
-                            >
-                                <div>
-                                    { this.props.list.length }
-                                </div>
-                            </AccessibleButton>
-                        );
-                    }
-                }
-
-                let addRoomButton;
-                if (this.props.onAddRoom) {
-                    addRoomButton = (
-                        <AccessibleTooltipButton
-                            tabIndex={tabIndex}
-                            onClick={this.onAddRoom}
-                            className="mx_RoomSubList_addRoom"
-                            title={this.props.addRoomLabel || _t("Add room")}
-                        />
-                    );
-                }
-
-                return (
-                    <div className="mx_RoomSubList_labelContainer" title={title} ref={this._header} onKeyDown={this.onHeaderKeyDown}>
-                        <AccessibleButton
-                            onFocus={onFocus}
-                            tabIndex={tabIndex}
-                            inputRef={ref}
-                            onClick={this.onClick}
-                            className="mx_RoomSubList_label"
-                            aria-expanded={!isCollapsed}
-                            role="treeitem"
-                            aria-level="1"
-                        >
-                            { chevron }
-                            <span>{this.props.label}</span>
-                            { incomingCall }
-                        </AccessibleButton>
-                        { badge }
-                        { addRoomButton }
-                    </div>
-                );
-            } }
-        </RovingTabIndexWrapper>;
-    }
-
-    checkOverflow = () => {
-        if (this._scroller.current) {
-            this._scroller.current.checkOverflow();
-        }
-    };
-
-    setHeight = (height) => {
-        if (this._subList.current) {
-            this._subList.current.style.height = toPx(height);
-        }
-        this._updateLazyRenderHeight(height);
-    };
-
-    _updateLazyRenderHeight(height) {
-        this.setState({scrollerHeight: height});
-    }
-
-    _onScroll = () => {
-        this.setState({scrollTop: this._scroller.current.getScrollTop()});
-    };
-
-    _canUseLazyListRendering() {
-        // for now disable lazy rendering as they are already rendered tiles
-        // not rooms like props.list we pass to LazyRenderList
-        return !this.props.extraTiles || !this.props.extraTiles.length;
-    }
-
-    render() {
-        const len = this.props.list.length + this.props.extraTiles.length;
-        const isCollapsed = this.state.hidden && !this.props.forceExpand;
-
-        const subListClasses = classNames({
-            "mx_RoomSubList": true,
-            "mx_RoomSubList_hidden": len && isCollapsed,
-            "mx_RoomSubList_nonEmpty": len && !isCollapsed,
-        });
-
-        let content;
-        if (len) {
-            if (isCollapsed) {
-                // no body
-            } else if (this._canUseLazyListRendering()) {
-                content = (
-                    <IndicatorScrollbar ref={this._scroller} className="mx_RoomSubList_scroll" onScroll={this._onScroll}>
-                        <LazyRenderList
-                            scrollTop={this.state.scrollTop }
-                            height={ this.state.scrollerHeight }
-                            renderItem={ this.makeRoomTile }
-                            itemHeight={34}
-                            items={ this.props.list } />
-                    </IndicatorScrollbar>
-                );
-            } else {
-                const roomTiles = this.props.list.map(r => this.makeRoomTile(r));
-                const tiles = roomTiles.concat(this.props.extraTiles);
-                content = (
-                    <IndicatorScrollbar ref={this._scroller} className="mx_RoomSubList_scroll" onScroll={this._onScroll}>
-                        { tiles }
-                    </IndicatorScrollbar>
-                );
-            }
-        } else {
-            if (this.props.showSpinner && !isCollapsed) {
-                const Loader = sdk.getComponent("elements.Spinner");
-                content = <Loader />;
-            }
-        }
-
-        return (
-            <div
-                ref={this._subList}
-                className={subListClasses}
-                role="group"
-                aria-label={this.props.label}
-                onKeyDown={this.onKeyDown}
-            >
-                { this._getHeaderJsx(isCollapsed) }
-                { content }
-            </div>
-        );
-    }
-}

src/components/structures/RoomView.js

@@ -1380,15 +1380,9 @@ export default createReactClass({
     },
 
     onForgetClick: function() {
-        this.context.forget(this.state.room.roomId).then(function() {
-            dis.dispatch({ action: 'view_next_room' });
-        }, function(err) {
-            const errCode = err.errcode || _t("unknown error code");
-            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createTrackedDialog('Failed to forget room', '', ErrorDialog, {
-                title: _t("Error"),
-                description: _t("Failed to forget room %(errCode)s", { errCode: errCode }),
-            });
+        dis.dispatch({
+            action: 'forget_room',
+            room_id: this.state.room.roomId,
         });
     },
 
@@ -1819,6 +1813,7 @@ export default createReactClass({
         );
 
         const showRoomRecoveryReminder = (
+            this.context.isCryptoEnabled() &&
             SettingsStore.getValue("showRoomRecoveryReminder") &&
             this.context.isRoomEncrypted(this.state.room.roomId) &&
             this.context.getKeyBackupEnabled() === false
@@ -1932,25 +1927,29 @@ export default createReactClass({
         }
 
         if (inCall) {
-            let zoomButton; let voiceMuteButton; let videoMuteButton;
+            let zoomButton; let videoMuteButton;
 
             if (call.type === "video") {
                 zoomButton = (
                     <div className="mx_RoomView_voipButton" onClick={this.onFullscreenClick} title={_t("Fill screen")}>
-                        <TintableSvg src={require("../../../res/img/fullscreen.svg")} width="29" height="22" style={{ marginTop: 1, marginRight: 4 }} />
+                        <TintableSvg src={require("../../../res/img/element-icons/call/fullscreen.svg")} width="29" height="22" style={{ marginTop: 1, marginRight: 4 }} />
                     </div>
                 );
 
                 videoMuteButton =
                     <div className="mx_RoomView_voipButton" onClick={this.onMuteVideoClick}>
-                        <TintableSvg src={call.isLocalVideoMuted() ? require("../../../res/img/video-unmute.svg") : require("../../../res/img/video-mute.svg")}
+                        <TintableSvg src={call.isLocalVideoMuted() ?
+                            require("../../../res/img/element-icons/call/video-muted.svg") :
+                            require("../../../res/img/element-icons/call/video-call.svg")}
                              alt={call.isLocalVideoMuted() ? _t("Click to unmute video") : _t("Click to mute video")}
-                             width="31" height="27" />
+                             width="" height="27" />
                     </div>;
             }
-            voiceMuteButton =
+            const voiceMuteButton =
                 <div className="mx_RoomView_voipButton" onClick={this.onMuteAudioClick}>
-                    <TintableSvg src={call.isMicrophoneMuted() ? require("../../../res/img/voice-unmute.svg") : require("../../../res/img/voice-mute.svg")}
+                    <TintableSvg src={call.isMicrophoneMuted() ?
+                        require("../../../res/img/element-icons/call/voice-muted.svg") :
+                        require("../../../res/img/element-icons/call/voice-unmuted.svg")}
                          alt={call.isMicrophoneMuted() ? _t("Click to unmute audio") : _t("Click to mute audio")}
                          width="21" height="26" />
                 </div>;
@@ -1962,7 +1961,6 @@ export default createReactClass({
                     { videoMuteButton }
                     { zoomButton }
                     { statusBar }
-                    <TintableSvg className="mx_RoomView_voipChevron" src={require("../../../res/img/voip-chevron.svg")} width="22" height="17" />
                 </div>;
         }
 
@@ -2043,6 +2041,7 @@ export default createReactClass({
         if (!this.state.atEndOfLiveTimeline && !this.state.searchResults) {
             const JumpToBottomButton = sdk.getComponent('rooms.JumpToBottomButton');
             jumpToBottom = (<JumpToBottomButton
+                highlight={this.state.room.getUnreadNotificationCount('highlight') > 0}
                 numUnreadMessages={this.state.numUnreadMessages}
                 onScrollToBottomClick={this.jumpToLiveTimeline}
             />);

src/components/structures/TopLeftMenuButton.js

@@ -1,158 +0,0 @@
-/*
-Copyright 2018 New Vector Ltd
-Copyright 2019 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 React from 'react';
-import PropTypes from 'prop-types';
-import TopLeftMenu from '../views/context_menus/TopLeftMenu';
-import BaseAvatar from '../views/avatars/BaseAvatar';
-import {MatrixClientPeg} from '../../MatrixClientPeg';
-import * as Avatar from '../../Avatar';
-import { _t } from '../../languageHandler';
-import dis from "../../dispatcher/dispatcher";
-import {ContextMenu, ContextMenuButton} from "./ContextMenu";
-import {Action} from "../../dispatcher/actions";
-
-const AVATAR_SIZE = 28;
-
-export default class TopLeftMenuButton extends React.Component {
-    static propTypes = {
-        collapsed: PropTypes.bool.isRequired,
-    };
-
-    static displayName = 'TopLeftMenuButton';
-
-    constructor() {
-        super();
-        this.state = {
-            menuDisplayed: false,
-            profileInfo: null,
-        };
-    }
-
-    async _getProfileInfo() {
-        const cli = MatrixClientPeg.get();
-        const userId = cli.getUserId();
-        const profileInfo = await cli.getProfileInfo(userId);
-        const avatarUrl = Avatar.avatarUrlForUser(
-            {avatarUrl: profileInfo.avatar_url},
-            AVATAR_SIZE, AVATAR_SIZE, "crop");
-
-        return {
-            userId,
-            name: profileInfo.displayname,
-            avatarUrl,
-        };
-    }
-
-    async componentDidMount() {
-        this._dispatcherRef = dis.register(this.onAction);
-
-        try {
-            const profileInfo = await this._getProfileInfo();
-            this.setState({profileInfo});
-        } catch (ex) {
-            console.log("could not fetch profile");
-            console.error(ex);
-        }
-    }
-
-    componentWillUnmount() {
-        dis.unregister(this._dispatcherRef);
-    }
-
-    onAction = (payload) => {
-        // For accessibility
-        if (payload.action === Action.ToggleUserMenu) {
-            if (this._buttonRef) this._buttonRef.click();
-        }
-    };
-
-    _getDisplayName() {
-        if (MatrixClientPeg.get().isGuest()) {
-            return _t("Guest");
-        } else if (this.state.profileInfo) {
-            return this.state.profileInfo.name;
-        } else {
-            return MatrixClientPeg.get().getUserId();
-        }
-    }
-
-    openMenu = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        this.setState({ menuDisplayed: true });
-    };
-
-    closeMenu = () => {
-        this.setState({
-            menuDisplayed: false,
-        });
-    };
-
-    render() {
-        const cli = MatrixClientPeg.get().getUserId();
-
-        const name = this._getDisplayName();
-        let nameElement;
-        let chevronElement;
-        if (!this.props.collapsed) {
-            nameElement = <div className="mx_TopLeftMenuButton_name">
-                { name }
-            </div>;
-            chevronElement = <span className="mx_TopLeftMenuButton_chevron" />;
-        }
-
-        let contextMenu;
-        if (this.state.menuDisplayed) {
-            const elementRect = this._buttonRef.getBoundingClientRect();
-
-            contextMenu = (
-                <ContextMenu
-                    chevronFace="none"
-                    left={elementRect.left}
-                    top={elementRect.top + elementRect.height}
-                    onFinished={this.closeMenu}
-                >
-                    <TopLeftMenu displayName={name} userId={cli} onFinished={this.closeMenu} />
-                </ContextMenu>
-            );
-        }
-
-        return <React.Fragment>
-            <ContextMenuButton
-                className="mx_TopLeftMenuButton"
-                onClick={this.openMenu}
-                inputRef={(r) => this._buttonRef = r}
-                label={_t("Your profile")}
-                isExpanded={this.state.menuDisplayed}
-            >
-                <BaseAvatar
-                    idName={MatrixClientPeg.get().getUserId()}
-                    name={name}
-                    url={this.state.profileInfo && this.state.profileInfo.avatarUrl}
-                    width={AVATAR_SIZE}
-                    height={AVATAR_SIZE}
-                    resizeMethod="crop"
-                />
-                { nameElement }
-                { chevronElement }
-            </ContextMenuButton>
-
-            { contextMenu }
-        </React.Fragment>;
-    }
-}

src/components/structures/UserMenu.tsx

@@ -14,14 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import * as React from "react";
+import React, { createRef } from "react";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
 import defaultDispatcher from "../../dispatcher/dispatcher";
 import { ActionPayload } from "../../dispatcher/payloads";
 import { Action } from "../../dispatcher/actions";
-import { createRef } from "react";
 import { _t } from "../../languageHandler";
-import {ContextMenu, ContextMenuButton} from "./ContextMenu";
+import { ChevronFace, ContextMenu, ContextMenuButton, MenuItem } from "./ContextMenu";
 import {USER_NOTIFICATIONS_TAB, USER_SECURITY_TAB} from "../views/dialogs/UserSettingsDialog";
 import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload";
 import RedesignFeedbackDialog from "../views/dialogs/RedesignFeedbackDialog";
@@ -30,23 +29,39 @@ import LogoutDialog from "../views/dialogs/LogoutDialog";
 import SettingsStore, {SettingLevel} from "../../settings/SettingsStore";
 import {getCustomTheme} from "../../theme";
 import {getHostingLink} from "../../utils/HostingLink";
-import AccessibleButton, {ButtonEvent} from "../views/elements/AccessibleButton";
+import {ButtonEvent} from "../views/elements/AccessibleButton";
 import SdkConfig from "../../SdkConfig";
 import {getHomePageUrl} from "../../utils/pages";
 import { OwnProfileStore } from "../../stores/OwnProfileStore";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import BaseAvatar from '../views/avatars/BaseAvatar';
 import classNames from "classnames";
+import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 
 interface IProps {
     isMinimized: boolean;
 }
 
+type PartialDOMRect = Pick<DOMRect, "width" | "left" | "top" | "height">;
+
 interface IState {
-    menuDisplayed: boolean;
+    contextMenuPosition: PartialDOMRect;
     isDarkTheme: boolean;
 }
 
+interface IMenuButtonProps {
+    iconClassName: string;
+    label: string;
+    onClick(ev: ButtonEvent);
+}
+
+const MenuButton: React.FC<IMenuButtonProps> = ({iconClassName, label, onClick}) => {
+    return <MenuItem label={label} onClick={onClick}>
+        <span className={classNames("mx_IconizedContextMenu_icon", iconClassName)} />
+        <span className="mx_IconizedContextMenu_label">{label}</span>
+    </MenuItem>;
+};
+
 export default class UserMenu extends React.Component<IProps, IState> {
     private dispatcherRef: string;
     private themeWatcherRef: string;
@@ -56,7 +71,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
         super(props);
 
         this.state = {
-            menuDisplayed: false,
+            contextMenuPosition: null,
             isDarkTheme: this.isUserOnDarkTheme(),
         };
 
@@ -99,23 +114,41 @@ export default class UserMenu extends React.Component<IProps, IState> {
     private onAction = (ev: ActionPayload) => {
         if (ev.action !== Action.ToggleUserMenu) return; // not interested
 
-        // For accessibility
-        if (this.buttonRef.current) this.buttonRef.current.click();
+        if (this.state.contextMenuPosition) {
+            this.setState({contextMenuPosition: null});
+        } else {
+            if (this.buttonRef.current) this.buttonRef.current.click();
+        }
     };
 
-    private onOpenMenuClick = (ev: InputEvent) => {
+    private onOpenMenuClick = (ev: React.MouseEvent) => {
         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 onSwitchThemeClick = () => {
+    private onCloseMenu = () => {
+        this.setState({contextMenuPosition: null});
+    };
+
+    private onSwitchThemeClick = (ev: React.MouseEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
         // Disable system theme matching if the user hits this button
         SettingsStore.setValue("use_system_theme", null, SettingLevel.DEVICE, false);
 
@@ -129,14 +162,15 @@ 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) => {
         ev.preventDefault();
         ev.stopPropagation();
 
-        // TODO: Archived room view (deferred)
+        // TODO: Archived room view: https://github.com/vector-im/riot-web/issues/14038
+        // Note: You'll need to uncomment the button too.
         console.log("TODO: Show archived rooms");
     };
 
@@ -145,7 +179,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 +187,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 +198,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 +225,20 @@ 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>
+                <MenuButton
+                    iconClassName="mx_UserMenu_iconHome"
+                    label={_t("Home")}
+                    onClick={this.onHomeClick}
+                />
             );
         }
 
-        const elementRect = this.buttonRef.current.getBoundingClientRect();
         return (
             <ContextMenu
-                chevronFace="none"
-                left={elementRect.width + elementRect.left}
-                top={elementRect.top + elementRect.height}
+                chevronFace={ChevronFace.None}
+                // -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">
@@ -218,63 +251,53 @@ export default class UserMenu extends React.Component<IProps, IState> {
                                 {MatrixClientPeg.get().getUserId()}
                             </span>
                         </div>
-                        <div
+                        <AccessibleTooltipButton
                             className="mx_UserMenu_contextMenu_themeButton"
                             onClick={this.onSwitchThemeClick}
                             title={this.state.isDarkTheme ? _t("Switch to light mode") : _t("Switch to dark mode")}
                         >
                             <img
-                                src={require("../../../res/img/feather-customised/sun.svg")}
+                                src={require("../../../res/img/element-icons/roomlist/dark-light-mode.svg")}
                                 alt={_t("Switch theme")}
                                 width={16}
                             />
-                        </div>
+                        </AccessibleTooltipButton>
                     </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}
+                        <MenuButton
+                            iconClassName="mx_UserMenu_iconBell"
+                            label={_t("Notification settings")}
+                            onClick={(e) => this.onSettingsOpen(e, USER_NOTIFICATIONS_TAB)}
+                        />
+                        <MenuButton
+                            iconClassName="mx_UserMenu_iconLock"
+                            label={_t("Security & privacy")}
+                            onClick={(e) => this.onSettingsOpen(e, USER_SECURITY_TAB)}
+                        />
+                        <MenuButton
+                            iconClassName="mx_UserMenu_iconSettings"
+                            label={_t("All settings")}
+                            onClick={(e) => this.onSettingsOpen(e, null)}
+                        />
+                        {/* <MenuButton
+                            iconClassName="mx_UserMenu_iconArchive"
+                            label={_t("Archived rooms")}
+                            onClick={this.onShowArchived}
+                        /> */}
+                        <MenuButton
+                            iconClassName="mx_UserMenu_iconMessage"
+                            label={_t("Feedback")}
+                            onClick={this.onProvideFeedback}
+                        />
                     </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">
+                        <MenuButton
+                            iconClassName="mx_UserMenu_iconSignOut"
+                            label={_t("Sign out")}
+                            onClick={this.onSignOutClick}
+                        />
                     </div>
                 </div>
             </ContextMenu>
@@ -283,6 +306,9 @@ export default class UserMenu extends React.Component<IProps, IState> {
 
     public render() {
         const avatarSize = 32; // should match border-radius of the avatar
+        const {body} = document;
+        const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize);
+        body.style.setProperty("--avatar-url", `url('${avatarUrl}')`);
 
         let name = <span className="mx_UserMenu_userName">{OwnProfileStore.instance.displayName}</span>;
         let buttons = (
@@ -306,8 +332,9 @@ export default class UserMenu extends React.Component<IProps, IState> {
                     className={classes}
                     onClick={this.onOpenMenuClick}
                     inputRef={this.buttonRef}
-                    label={_t("Account settings")}
-                    isExpanded={this.state.menuDisplayed}
+                    label={_t("User menu")}
+                    isExpanded={!!this.state.contextMenuPosition}
+                    onContextMenu={this.onContextMenu}
                 >
                     <div className="mx_UserMenu_row">
                         <span className="mx_UserMenu_userAvatarContainer">
@@ -324,8 +351,8 @@ export default class UserMenu extends React.Component<IProps, IState> {
                         {name}
                         {buttons}
                     </div>
-                    {this.renderContextMenu()}
                 </ContextMenuButton>
+                {this.renderContextMenu()}
             </React.Fragment>
         );
     }

src/components/structures/auth/SetupEncryptionBody.js

@@ -17,6 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
+import SdkConfig from '../../../SdkConfig';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
 import {
@@ -131,6 +132,8 @@ export default class SetupEncryptionBody extends React.Component {
                 </AccessibleButton>;
             }
 
+            const brand = SdkConfig.get().brand;
+
             return (
                 <div>
                     <p>{_t(
@@ -138,17 +141,18 @@ export default class SetupEncryptionBody extends React.Component {
                         "granting it access to encrypted messages.",
                     )}</p>
                     <p>{_t(
-                        "This requires the latest Riot on your other devices:",
+                        "This requires the latest %(brand)s on your other devices:",
+                        { brand },
                     )}</p>
 
                     <div className="mx_CompleteSecurity_clients">
                         <div className="mx_CompleteSecurity_clients_desktop">
-                            <div>Riot Web</div>
-                            <div>Riot Desktop</div>
+                            <div>{_t("%(brand)s Web", { brand })}</div>
+                            <div>{_t("%(brand)s Desktop", { brand })}</div>
                         </div>
                         <div className="mx_CompleteSecurity_clients_mobile">
-                            <div>Riot iOS</div>
-                            <div>Riot X for Android</div>
+                            <div>{_t("%(brand)s iOS", { brand })}</div>
+                            <div>{_t("%(brand)s X for Android", { brand })}</div>
                         </div>
                         <p>{_t("or another cross-signing capable Matrix client")}</p>
                     </div>

src/components/views/auth/CustomServerDialog.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 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.
@@ -18,11 +18,13 @@ limitations under the License.
 import React from 'react';
 import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
+import SdkConfig from '../../../SdkConfig';
 
 export default createReactClass({
     displayName: 'CustomServerDialog',
 
     render: function() {
+        const brand = SdkConfig.get().brand;
         return (
             <div className="mx_ErrorDialog">
                 <div className="mx_Dialog_title">
@@ -32,8 +34,9 @@ export default createReactClass({
                     <p>{_t(
                         "You can use the custom server options to sign into other " +
                         "Matrix servers by specifying a different homeserver URL. This " +
-                        "allows you to use this app with an existing Matrix account on a " +
+                        "allows you to use %(brand)s with an existing Matrix account on a " +
                         "different homeserver.",
+                        { brand },
                     )}</p>
                 </div>
                 <div className="mx_Dialog_buttons">

src/components/views/auth/ModularServerConfig.js

@@ -23,8 +23,8 @@ import AutoDiscoveryUtils from "../../../utils/AutoDiscoveryUtils";
 import * as ServerType from '../../views/auth/ServerTypeSelector';
 import ServerConfig from "./ServerConfig";
 
-const MODULAR_URL = 'https://modular.im/services/matrix-hosting-riot' +
-    '?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication';
+const MODULAR_URL = 'https://element.io/matrix-services' +
+    '?utm_source=element-web&utm_medium=web&utm_campaign=element-web-authentication';
 
 // TODO: TravisR - Can this extend ServerConfig for most things?
 
@@ -95,10 +95,10 @@ export default class ModularServerConfig extends ServerConfig {
 
         return (
             <div className="mx_ServerConfig">
-                <h3>{_t("Your Modular server")}</h3>
+                <h3>{_t("Your server")}</h3>
                 {_t(
-                    "Enter the location of your Modular homeserver. It may use your own " +
-                    "domain name or be a subdomain of <a>modular.im</a>.",
+                    "Enter the location of your Element Matrix Services homeserver. It may use your own " +
+                    "domain name or be a subdomain of <a>element.io</a>.",
                     {}, {
                         a: sub => <a href={MODULAR_URL} target="_blank" rel="noreferrer noopener">
                             {sub}

src/components/views/auth/ServerTypeSelector.js

@@ -22,8 +22,8 @@ import classnames from 'classnames';
 import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
 import {makeType} from "../../../utils/TypeUtils";
 
-const MODULAR_URL = 'https://modular.im/services/matrix-hosting-riot' +
-    '?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication';
+const MODULAR_URL = 'https://element.io/matrix-services' +
+    '?utm_source=element-web&utm_medium=web&utm_campaign=element-web-authentication';
 
 export const FREE = 'Free';
 export const PREMIUM = 'Premium';
@@ -45,7 +45,7 @@ export const TYPES = {
     PREMIUM: {
         id: PREMIUM,
         label: () => _t('Premium'),
-        logo: () => <img src={require('../../../../res/img/modular-bw-logo.svg')} />,
+        logo: () => <img src={require('../../../../res/img/ems-logo.svg')} height={16} />,
         description: () => _t('Premium hosting for organisations <a>Learn more</a>', {}, {
             a: sub => <a href={MODULAR_URL} target="_blank" rel="noreferrer noopener">
                 {sub}

src/components/views/avatars/BaseAvatar.tsx

@@ -18,7 +18,7 @@ limitations under the License.
 */
 
 import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react';
-import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import * as AvatarLogic from '../../../Avatar';
 import SettingsStore from "../../../settings/SettingsStore";
 import AccessibleButton from '../elements/AccessibleButton';
@@ -26,9 +26,25 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
 import {toPx} from "../../../utils/units";
 
-const useImageUrl = ({url, urls}) => {
-    const [imageUrls, setUrls] = useState([]);
-    const [urlsIndex, setIndex] = useState();
+interface IProps {
+    name: string; // The name (first initial used as default)
+    idName?: string; // ID for generating hash colours
+    title?: string; // onHover title text
+    url?: string; // highest priority of them all, shortcut to set in urls[0]
+    urls?: string[]; // [highest_priority, ... , lowest_priority]
+    width?: number;
+    height?: number;
+    // XXX: resizeMethod not actually used.
+    resizeMethod?: string;
+    defaultToInitialLetter?: boolean; // true to add default url
+    onClick?: React.MouseEventHandler;
+    inputRef?: React.RefObject<HTMLImageElement & HTMLSpanElement>;
+    className?: string;
+}
+
+const useImageUrl = ({url, urls}): [string, () => void] => {
+    const [imageUrls, setUrls] = useState<string[]>([]);
+    const [urlsIndex, setIndex] = useState<number>();
 
     const onError = useCallback(() => {
         setIndex(i => i + 1); // try the next one
@@ -70,19 +86,20 @@ const useImageUrl = ({url, urls}) => {
     return [imageUrl, onError];
 };
 
-const BaseAvatar = (props) => {
+const BaseAvatar = (props: IProps) => {
     const {
         name,
         idName,
         title,
         url,
         urls,
-        width=40,
-        height=40,
-        resizeMethod="crop", // eslint-disable-line no-unused-vars
-        defaultToInitialLetter=true,
+        width = 40,
+        height = 40,
+        resizeMethod = "crop", // eslint-disable-line no-unused-vars
+        defaultToInitialLetter = true,
         onClick,
         inputRef,
+        className,
         ...otherProps
     } = props;
 
@@ -117,12 +134,12 @@ const BaseAvatar = (props) => {
                 aria-hidden="true" />
         );
 
-        if (onClick != null) {
+        if (onClick !== null) {
             return (
                 <AccessibleButton
                     {...otherProps}
                     element="span"
-                    className="mx_BaseAvatar"
+                    className={classNames("mx_BaseAvatar", className)}
                     onClick={onClick}
                     inputRef={inputRef}
                 >
@@ -132,7 +149,12 @@ const BaseAvatar = (props) => {
             );
         } else {
             return (
-                <span className="mx_BaseAvatar" ref={inputRef} {...otherProps}>
+                <span
+                    className={classNames("mx_BaseAvatar", className)}
+                    ref={inputRef}
+                    {...otherProps}
+                    role="presentation"
+                >
                     { textNode }
                     { imgNode }
                 </span>
@@ -140,10 +162,10 @@ const BaseAvatar = (props) => {
         }
     }
 
-    if (onClick != null) {
+    if (onClick !== null) {
         return (
             <AccessibleButton
-                className="mx_BaseAvatar mx_BaseAvatar_image"
+                className={classNames("mx_BaseAvatar mx_BaseAvatar_image", className)}
                 element='img'
                 src={imageUrl}
                 onClick={onClick}
@@ -159,7 +181,7 @@ const BaseAvatar = (props) => {
     } else {
         return (
             <img
-                className="mx_BaseAvatar mx_BaseAvatar_image"
+                className={classNames("mx_BaseAvatar mx_BaseAvatar_image", className)}
                 src={imageUrl}
                 onError={onError}
                 style={{
@@ -173,26 +195,5 @@ const BaseAvatar = (props) => {
     }
 };
 
-BaseAvatar.displayName = "BaseAvatar";
-
-BaseAvatar.propTypes = {
-    name: PropTypes.string.isRequired, // The name (first initial used as default)
-    idName: PropTypes.string, // ID for generating hash colours
-    title: PropTypes.string, // onHover title text
-    url: PropTypes.string, // highest priority of them all, shortcut to set in urls[0]
-    urls: PropTypes.array, // [highest_priority, ... , lowest_priority]
-    width: PropTypes.number,
-    height: PropTypes.number,
-    // XXX resizeMethod not actually used.
-    resizeMethod: PropTypes.string,
-    defaultToInitialLetter: PropTypes.bool, // true to add default url
-    onClick: PropTypes.func,
-    inputRef: PropTypes.oneOfType([
-        // Either a function
-        PropTypes.func,
-        // Or the instance of a DOM native element
-        PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
-    ]),
-};
-
 export default BaseAvatar;
+export type BaseAvatarType = React.FC<IProps>;

src/components/views/avatars/DecoratedRoomAvatar.tsx

@@ -0,0 +1,73 @@
+/*
+Copyright 2020 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 React from 'react';
+import { Room } from "matrix-js-sdk/src/models/room";
+
+import { TagID } from '../../../stores/room-list/models';
+import RoomAvatar from "./RoomAvatar";
+import RoomTileIcon from "../rooms/RoomTileIcon";
+import NotificationBadge from '../rooms/NotificationBadge';
+import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
+import { NotificationState } from "../../../stores/notifications/NotificationState";
+
+interface IProps {
+    room: Room;
+    avatarSize: number;
+    tag: TagID;
+    displayBadge?: boolean;
+    forceCount?: boolean;
+    oobData?: object;
+    viewAvatarOnClick?: boolean;
+}
+
+interface IState {
+    notificationState?: NotificationState;
+}
+
+export default class DecoratedRoomAvatar extends React.PureComponent<IProps, IState> {
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            notificationState: RoomNotificationStateStore.instance.getRoomState(this.props.room, this.props.tag),
+        };
+    }
+
+    public render(): React.ReactNode {
+        let badge: React.ReactNode;
+        if (this.props.displayBadge) {
+            badge = <NotificationBadge
+                notification={this.state.notificationState}
+                forceCount={this.props.forceCount}
+                roomId={this.props.room.roomId}
+            />;
+        }
+
+        return <div className="mx_DecoratedRoomAvatar">
+            <RoomAvatar
+                room={this.props.room}
+                width={this.props.avatarSize}
+                height={this.props.avatarSize}
+                oobData={this.props.oobData}
+                viewAvatarOnClick={this.props.viewAvatarOnClick}
+            />
+            <RoomTileIcon room={this.props.room} />
+            {badge}
+        </div>;
+    }
+}

src/components/views/avatars/GroupAvatar.tsx

@@ -15,43 +15,36 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import * as sdk from '../../../index';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import BaseAvatar from './BaseAvatar';
 
-export default createReactClass({
-    displayName: 'GroupAvatar',
+export interface IProps {
+        groupId?: string;
+        groupName?: string;
+        groupAvatarUrl?: string;
+        width?: number;
+        height?: number;
+        resizeMethod?: string;
+        onClick?: React.MouseEventHandler;
+}
 
-    propTypes: {
-        groupId: PropTypes.string,
-        groupName: PropTypes.string,
-        groupAvatarUrl: PropTypes.string,
-        width: PropTypes.number,
-        height: PropTypes.number,
-        resizeMethod: PropTypes.string,
-        onClick: PropTypes.func,
-    },
+export default class GroupAvatar extends React.Component<IProps> {
+    public static defaultProps = {
+        width: 36,
+        height: 36,
+        resizeMethod: 'crop',
+    };
 
-    getDefaultProps: function() {
-        return {
-            width: 36,
-            height: 36,
-            resizeMethod: 'crop',
-        };
-    },
-
-    getGroupAvatarUrl: function() {
+    getGroupAvatarUrl() {
         return MatrixClientPeg.get().mxcUrlToHttp(
             this.props.groupAvatarUrl,
             this.props.width,
             this.props.height,
             this.props.resizeMethod,
         );
-    },
+    }
 
-    render: function() {
-        const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+    render() {
         // extract the props we use from props so we can pass any others through
         // should consider adding this as a global rule in js-sdk?
         /*eslint no-unused-vars: ["error", { "ignoreRestSiblings": true }]*/
@@ -65,5 +58,5 @@ export default createReactClass({
                 {...otherProps}
             />
         );
-    },
-});
+    }
+}

src/components/views/avatars/MemberAvatar.tsx

@@ -16,48 +16,50 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import * as sdk from "../../../index";
 import dis from "../../../dispatcher/dispatcher";
 import {Action} from "../../../dispatcher/actions";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import BaseAvatar from "./BaseAvatar";
 
-export default createReactClass({
-    displayName: 'MemberAvatar',
+interface IProps {
+    // TODO: replace with correct type
+    member: any;
+    fallbackUserId: string;
+    width: number;
+    height: number;
+    resizeMethod: string;
+    // The onClick to give the avatar
+    onClick: React.MouseEventHandler;
+    // Whether the onClick of the avatar should be overriden to dispatch `Action.ViewUser`
+    viewUserOnClick: boolean;
+    title: string;
+}
 
-    propTypes: {
-        member: PropTypes.object,
-        fallbackUserId: PropTypes.string,
-        width: PropTypes.number,
-        height: PropTypes.number,
-        resizeMethod: PropTypes.string,
-        // The onClick to give the avatar
-        onClick: PropTypes.func,
-        // Whether the onClick of the avatar should be overriden to dispatch `Action.ViewUser`
-        viewUserOnClick: PropTypes.bool,
-        title: PropTypes.string,
-    },
+interface IState {
+    name: string;
+    title: string;
+    imageUrl?: string;
+}
 
-    getDefaultProps: function() {
-        return {
-            width: 40,
-            height: 40,
-            resizeMethod: 'crop',
-            viewUserOnClick: false,
-        };
-    },
+export default class MemberAvatar extends React.Component<IProps, IState> {
+    public static defaultProps = {
+        width: 40,
+        height: 40,
+        resizeMethod: 'crop',
+        viewUserOnClick: false,
+    };
 
-    getInitialState: function() {
-        return this._getState(this.props);
-    },
+    constructor(props: IProps) {
+        super(props);
 
-    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    UNSAFE_componentWillReceiveProps: function(nextProps) {
-        this.setState(this._getState(nextProps));
-    },
+        this.state = MemberAvatar.getState(props);
+    }
 
-    _getState: function(props) {
+    public static getDerivedStateFromProps(nextProps: IProps): IState {
+        return MemberAvatar.getState(nextProps);
+    }
+
+    private static getState(props: IProps): IState {
         if (props.member && props.member.name) {
             return {
                 name: props.member.name,
@@ -79,11 +81,9 @@ export default createReactClass({
         } else {
             console.error("MemberAvatar called somehow with null member or fallbackUserId");
         }
-    },
-
-    render: function() {
-        const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+    }
 
+    render() {
         let {member, fallbackUserId, onClick, viewUserOnClick, ...otherProps} = this.props;
         const userId = member ? member.userId : fallbackUserId;
 
@@ -100,5 +100,5 @@ export default createReactClass({
             <BaseAvatar {...otherProps} name={this.state.name} title={this.state.title}
                 idName={userId} url={this.state.imageUrl} onClick={onClick} />
         );
-    },
-});
+    }
+}

src/components/views/avatars/PulsedAvatar.tsx

@@ -0,0 +1,28 @@
+/*
+Copyright 2020 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 React from 'react';
+
+interface IProps {
+}
+
+const PulsedAvatar: React.FC<IProps> = (props) => {
+    return <div className="mx_PulsedAvatar">
+        {props.children}
+    </div>;
+};
+
+export default PulsedAvatar;

src/components/views/avatars/RoomAvatar.tsx

@@ -13,90 +13,96 @@ 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 React from "react";
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import React from 'react';
+import Room from 'matrix-js-sdk/src/models/room';
+import {getHttpUriForMxc} from 'matrix-js-sdk/src/content-repo';
+
+import BaseAvatar from './BaseAvatar';
+import ImageView from '../elements/ImageView';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
-import * as sdk from "../../../index";
 import * as Avatar from '../../../Avatar';
-import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
-
-export default createReactClass({
-    displayName: 'RoomAvatar',
 
+interface IProps {
     // Room may be left unset here, but if it is,
     // oobData.avatarUrl should be set (else there
     // would be nowhere to get the avatar from)
-    propTypes: {
-        room: PropTypes.object,
-        oobData: PropTypes.object,
-        width: PropTypes.number,
-        height: PropTypes.number,
-        resizeMethod: PropTypes.string,
-        viewAvatarOnClick: PropTypes.bool,
-    },
+    room?: Room;
+    // TODO: type when js-sdk has types
+    oobData?: any;
+    width?: number;
+    height?: number;
+    resizeMethod?: string;
+    viewAvatarOnClick?: boolean;
+}
 
-    getDefaultProps: function() {
-        return {
-            width: 36,
-            height: 36,
-            resizeMethod: 'crop',
-            oobData: {},
+interface IState {
+    urls: string[];
+}
+
+export default class RoomAvatar extends React.Component<IProps, IState> {
+    public static defaultProps = {
+        width: 36,
+        height: 36,
+        resizeMethod: 'crop',
+        oobData: {},
+    };
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            urls: RoomAvatar.getImageUrls(this.props),
         };
-    },
+    }
 
-    getInitialState: function() {
-        return {
-            urls: this.getImageUrls(this.props),
-        };
-    },
-
-    componentDidMount: function() {
+    public componentDidMount() {
         MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
-    },
+    }
 
-    componentWillUnmount: function() {
+    public componentWillUnmount() {
         const cli = MatrixClientPeg.get();
         if (cli) {
             cli.removeListener("RoomState.events", this.onRoomStateEvents);
         }
-    },
+    }
 
-    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    UNSAFE_componentWillReceiveProps: function(newProps) {
-        this.setState({
-            urls: this.getImageUrls(newProps),
-        });
-    },
+    public static getDerivedStateFromProps(nextProps: IProps): IState {
+        return {
+            urls: RoomAvatar.getImageUrls(nextProps),
+        };
+    }
 
-    onRoomStateEvents: function(ev) {
+    // TODO: type when js-sdk has types
+    private onRoomStateEvents = (ev: any) => {
         if (!this.props.room ||
             ev.getRoomId() !== this.props.room.roomId ||
             ev.getType() !== 'm.room.avatar'
         ) return;
 
         this.setState({
-            urls: this.getImageUrls(this.props),
+            urls: RoomAvatar.getImageUrls(this.props),
         });
-    },
+    };
 
-    getImageUrls: function(props) {
+    private static getImageUrls(props: IProps): string[] {
         return [
             getHttpUriForMxc(
                 MatrixClientPeg.get().getHomeserverUrl(),
+                // Default props don't play nicely with getDerivedStateFromProps
+                //props.oobData !== undefined ? props.oobData.avatarUrl : {},
                 props.oobData.avatarUrl,
                 Math.floor(props.width * window.devicePixelRatio),
                 Math.floor(props.height * window.devicePixelRatio),
                 props.resizeMethod,
             ), // highest priority
-            this.getRoomAvatarUrl(props),
+            RoomAvatar.getRoomAvatarUrl(props),
         ].filter(function(url) {
-            return (url != null && url != "");
+            return (url !== null && url !== "");
         });
-    },
+    }
 
-    getRoomAvatarUrl: function(props) {
+    private static getRoomAvatarUrl(props: IProps): string {
         if (!props.room) return null;
 
         return Avatar.avatarUrlForRoom(
@@ -105,35 +111,32 @@ export default createReactClass({
             Math.floor(props.height * window.devicePixelRatio),
             props.resizeMethod,
         );
-    },
+    }
 
-    onRoomAvatarClick: function() {
+    private onRoomAvatarClick = () => {
         const avatarUrl = this.props.room.getAvatarUrl(
             MatrixClientPeg.get().getHomeserverUrl(),
             null, null, null, false);
-        const ImageView = sdk.getComponent("elements.ImageView");
         const params = {
             src: avatarUrl,
             name: this.props.room.name,
         };
 
         Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
-    },
+    };
 
-    render: function() {
-        const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
-
-        /*eslint no-unused-vars: ["error", { "ignoreRestSiblings": true }]*/
+    public render() {
         const {room, oobData, viewAvatarOnClick, ...otherProps} = this.props;
 
         const roomName = room ? room.name : oobData.name;
 
         return (
-            <BaseAvatar {...otherProps} name={roomName}
+            <BaseAvatar {...otherProps}
+                name={roomName}
                 idName={room ? room.roomId : null}
                 urls={this.state.urls}
-                onClick={this.props.viewAvatarOnClick ? this.onRoomAvatarClick : null}
-                disabled={!this.state.urls[0]} />
+                onClick={viewAvatarOnClick && this.state.urls[0] ? this.onRoomAvatarClick : null}
+            />
         );
-    },
-});
+    }
+}

src/components/views/context_menus/TagTileContextMenu.js

@@ -20,7 +20,6 @@ import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import dis from '../../../dispatcher/dispatcher';
 import TagOrderActions from '../../../actions/TagOrderActions';
-import * as sdk from '../../../index';
 import {MenuItem} from "../../structures/ContextMenu";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
@@ -54,21 +53,12 @@ export default class TagTileContextMenu extends React.Component {
     }
 
     render() {
-        const TintableSvg = sdk.getComponent("elements.TintableSvg");
-
         return <div>
-            <MenuItem className="mx_TagTileContextMenu_item" onClick={this._onViewCommunityClick}>
-                <TintableSvg
-                    className="mx_TagTileContextMenu_item_icon"
-                    src={require("../../../../res/img/icons-groups.svg")}
-                    width="15"
-                    height="15"
-                />
+            <MenuItem className="mx_TagTileContextMenu_item mx_TagTileContextMenu_viewCommunity" onClick={this._onViewCommunityClick}>
                 { _t('View Community') }
             </MenuItem>
             <hr className="mx_TagTileContextMenu_separator" role="separator" />
-            <MenuItem className="mx_TagTileContextMenu_item" onClick={this._onRemoveClick}>
-                <img className="mx_TagTileContextMenu_item_icon" src={require("../../../../res/img/icon_context_delete.svg")} width="15" height="15" alt="" />
+            <MenuItem className="mx_TagTileContextMenu_item mx_TagTileContextMenu_hideCommunity" onClick={this._onRemoveClick}>
                 { _t('Hide') }
             </MenuItem>
         </div>;

src/components/views/create_room/CreateRoomButton.js

@@ -1,44 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 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 React from 'react';
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import { _t } from '../../../languageHandler';
-
-export default createReactClass({
-    displayName: 'CreateRoomButton',
-    propTypes: {
-        onCreateRoom: PropTypes.func,
-    },
-
-    getDefaultProps: function() {
-        return {
-            onCreateRoom: function() {},
-        };
-    },
-
-    onClick: function() {
-        this.props.onCreateRoom();
-    },
-
-    render: function() {
-        return (
-            <button className="mx_CreateRoomButton" onClick={this.onClick}>{ _t("Create Room") }</button>
-        );
-    },
-});

src/components/views/dialogs/BaseDialog.js

@@ -75,8 +75,12 @@ export default createReactClass({
         // If provided, this is used to add a aria-describedby attribute
         contentId: PropTypes.string,
 
-        // optional additional class for the title element
-        titleClass: PropTypes.string,
+        // optional additional class for the title element (basically anything that can be passed to classnames)
+        titleClass: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.object,
+            PropTypes.arrayOf(PropTypes.string),
+        ]),
     },
 
     getDefaultProps: function() {

src/components/views/dialogs/CryptoStoreTooNewDialog.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2018 New Vector Ltd
+Copyright 2020 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.
@@ -18,9 +19,12 @@ import React from 'react';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
+import SdkConfig from '../../../SdkConfig';
 import Modal from '../../../Modal';
 
 export default (props) => {
+    const brand = SdkConfig.get().brand;
+
     const _onLogoutClicked = () => {
         const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
         Modal.createTrackedDialog('Logout e2e db too new', '', QuestionDialog, {
@@ -28,7 +32,8 @@ export default (props) => {
             description: _t(
                 "To avoid losing your chat history, you must export your room keys " +
                 "before logging out. You will need to go back to the newer version of " +
-                "Riot to do this",
+                "%(brand)s to do this",
+                { brand },
             ),
             button: _t("Sign out"),
             focus: false,
@@ -42,9 +47,12 @@ export default (props) => {
     };
 
     const description =
-        _t("You've previously used a newer version of Riot with this session. " +
+        _t(
+            "You've previously used a newer version of %(brand)s with this session. " +
             "To use this version again with end to end encryption, you will " +
-            "need to sign out and back in again.");
+            "need to sign out and back in again.",
+            { brand },
+        );
 
     const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
     const DialogButtons = sdk.getComponent('views.elements.DialogButtons');

src/components/views/dialogs/DevtoolsDialog.js

@@ -19,7 +19,7 @@ import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import SyntaxHighlight from '../elements/SyntaxHighlight';
 import { _t } from '../../../languageHandler';
-import { Room } from "matrix-js-sdk";
+import { Room, MatrixEvent } from "matrix-js-sdk";
 import Field from "../elements/Field";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
@@ -327,6 +327,8 @@ class RoomStateExplorer extends React.PureComponent {
 
     static contextType = MatrixClientContext;
 
+    roomStateEvents: Map<string, Map<string, MatrixEvent>>;
+
     constructor(props) {
         super(props);
 
@@ -412,30 +414,26 @@ class RoomStateExplorer extends React.PureComponent {
         if (this.state.eventType === null) {
             list = <FilteredList query={this.state.queryEventType} onChange={this.onQueryEventType}>
                 {
-                    Object.keys(this.roomStateEvents).map((evType) => {
-                        const stateGroup = this.roomStateEvents[evType];
-                        const stateKeys = Object.keys(stateGroup);
-
+                    Array.from(this.roomStateEvents.entries()).map(([eventType, allStateKeys]) => {
                         let onClickFn;
-                        if (stateKeys.length === 1 && stateKeys[0] === '') {
-                            onClickFn = this.onViewSourceClick(stateGroup[stateKeys[0]]);
+                        if (allStateKeys.size === 1 && allStateKeys.has("")) {
+                            onClickFn = this.onViewSourceClick(allStateKeys.get(""));
                         } else {
-                            onClickFn = this.browseEventType(evType);
+                            onClickFn = this.browseEventType(eventType);
                         }
 
-                        return <button className={classes} key={evType} onClick={onClickFn}>
-                            { evType }
+                        return <button className={classes} key={eventType} onClick={onClickFn}>
+                            {eventType}
                         </button>;
                     })
                 }
             </FilteredList>;
         } else {
-            const stateGroup = this.roomStateEvents[this.state.eventType];
+            const stateGroup = this.roomStateEvents.get(this.state.eventType);
 
             list = <FilteredList query={this.state.queryStateKey} onChange={this.onQueryStateKey}>
                 {
-                    Object.keys(stateGroup).map((stateKey) => {
-                        const ev = stateGroup[stateKey];
+                    Array.from(stateGroup.entries()).map(([stateKey, ev]) => {
                         return <button className={classes} key={stateKey} onClick={this.onViewSourceClick(ev)}>
                             { stateKey }
                         </button>;

src/components/views/dialogs/IntegrationsImpossibleDialog.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 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.
@@ -17,6 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import {_t} from "../../../languageHandler";
+import SdkConfig from "../../../SdkConfig";
 import * as sdk from "../../../index";
 
 export default class IntegrationsImpossibleDialog extends React.Component {
@@ -29,6 +30,7 @@ export default class IntegrationsImpossibleDialog extends React.Component {
     };
 
     render() {
+        const brand = SdkConfig.get().brand;
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
@@ -39,8 +41,9 @@ export default class IntegrationsImpossibleDialog extends React.Component {
                 <div className='mx_IntegrationsImpossibleDialog_content'>
                     <p>
                         {_t(
-                            "Your Riot doesn't allow you to use an Integration Manager to do this. " +
+                            "Your %(brand)s doesn't allow you to use an Integration Manager to do this. " +
                             "Please contact an admin.",
+                            { brand },
                         )}
                     </p>
                 </div>

src/components/views/dialogs/InviteDialog.js

@@ -35,8 +35,8 @@ import createRoom, {canEncryptToAllUsers, privateShouldBeEncrypted} from "../../
 import {inviteMultipleToRoom} from "../../../RoomInvite";
 import {Key} from "../../../Keyboard";
 import {Action} from "../../../dispatcher/actions";
-import {RoomListStoreTempProxy} from "../../../stores/room-list/RoomListStoreTempProxy";
 import {DefaultTagID} from "../../../stores/room-list/models";
+import RoomListStore from "../../../stores/room-list/RoomListStore";
 
 export const KIND_DM = "dm";
 export const KIND_INVITE = "invite";
@@ -346,8 +346,7 @@ export default class InviteDialog extends React.PureComponent {
 
         // Also pull in all the rooms tagged as DefaultTagID.DM so we don't miss anything. Sometimes the
         // room list doesn't tag the room for the DMRoomMap, but does for the room list.
-        const taggedRooms = RoomListStoreTempProxy.getRoomLists();
-        const dmTaggedRooms = taggedRooms[DefaultTagID.DM];
+        const dmTaggedRooms = RoomListStore.instance.orderedLists[DefaultTagID.DM];
         const myUserId = MatrixClientPeg.get().getUserId();
         for (const dmRoom of dmTaggedRooms) {
             const otherMembers = dmRoom.getJoinedMembers().filter(u => u.userId !== myUserId);

src/components/views/dialogs/KeySignatureUploadFailedDialog.js

@@ -17,6 +17,7 @@ limitations under the License.
 import React, {useState, useCallback, useRef} from 'react';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
+import SdkConfig from '../../../SdkConfig';
 
 export default function KeySignatureUploadFailedDialog({
         failures,
@@ -65,9 +66,10 @@ export default function KeySignatureUploadFailedDialog({
     let body;
     if (!success && !cancelled && continuation && retry > 0) {
         const reason = causes.get(source) || defaultCause;
+        const brand = SdkConfig.get().brand;
 
         body = (<div>
-            <p>{_t("Riot encountered an error during upload of:")}</p>
+            <p>{_t("%(brand)s encountered an error during upload of:", { brand })}</p>
             <p>{reason}</p>
             {retrying && <Spinner />}
             <pre>{JSON.stringify(failures, null, 2)}</pre>

src/components/views/dialogs/LazyLoadingDisabledDialog.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2018 New Vector Ltd
+Copyright 2020 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.
@@ -17,17 +18,28 @@ limitations under the License.
 import React from 'react';
 import QuestionDialog from './QuestionDialog';
 import { _t } from '../../../languageHandler';
+import SdkConfig from '../../../SdkConfig';
 
 export default (props) => {
-    const description1 =
-        _t("You've previously used Riot on %(host)s with lazy loading of members enabled. " +
-            "In this version lazy loading is disabled. " +
-            "As the local cache is not compatible between these two settings, " +
-            "Riot needs to resync your account.",
-            {host: props.host});
-    const description2 = _t("If the other version of Riot is still open in another tab, " +
-            "please close it as using Riot on the same host with both " +
-            "lazy loading enabled and disabled simultaneously will cause issues.");
+    const brand = SdkConfig.get().brand;
+    const description1 = _t(
+        "You've previously used %(brand)s on %(host)s with lazy loading of members enabled. " +
+        "In this version lazy loading is disabled. " +
+        "As the local cache is not compatible between these two settings, " +
+        "%(brand)s needs to resync your account.",
+        {
+            brand,
+            host: props.host,
+        },
+    );
+    const description2 = _t(
+        "If the other version of %(brand)s is still open in another tab, " +
+        "please close it as using %(brand)s on the same host with both " +
+        "lazy loading enabled and disabled simultaneously will cause issues.",
+        {
+            brand,
+        },
+    );
 
     return (<QuestionDialog
         hasCancelButton={false}

src/components/views/dialogs/LazyLoadingResyncDialog.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2018 New Vector Ltd
+Copyright 2020 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.
@@ -17,15 +18,21 @@ limitations under the License.
 import React from 'react';
 import QuestionDialog from './QuestionDialog';
 import { _t } from '../../../languageHandler';
+import SdkConfig from '../../../SdkConfig';
 
 export default (props) => {
+    const brand = SdkConfig.get().brand;
     const description =
-        _t("Riot now uses 3-5x less memory, by only loading information about other users"
-        + " when needed. Please wait whilst we resynchronise with the server!");
+        _t(
+            "%(brand)s now uses 3-5x less memory, by only loading information " +
+            "about other users when needed. Please wait whilst we resynchronise " +
+            "with the server!",
+            { brand },
+        );
 
     return (<QuestionDialog
         hasCancelButton={false}
-        title={_t("Updating Riot")}
+        title={_t("Updating %(brand)s", { brand })}
         description={<div>{description}</div>}
         button={_t("OK")}
         onFinished={props.onFinished}

src/components/views/dialogs/RebrandDialog.tsx

@@ -0,0 +1,116 @@
+/*
+Copyright 2020 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 * as PropTypes from 'prop-types';
+import BaseDialog from './BaseDialog';
+import { _t } from '../../../languageHandler';
+import DialogButtons from '../elements/DialogButtons';
+
+export enum RebrandDialogKind {
+    NAG,
+    ONE_TIME,
+}
+
+interface IProps {
+    onFinished: (bool) => void;
+    kind: RebrandDialogKind;
+    targetUrl?: string;
+}
+
+export default class RebrandDialog extends React.PureComponent<IProps> {
+    private onDoneClick = () => {
+        this.props.onFinished(true);
+    };
+
+    private onGoToElementClick = () => {
+        this.props.onFinished(true);
+    };
+
+    private onRemindMeLaterClick = () => {
+        this.props.onFinished(false);
+    };
+
+    private getPrettyTargetUrl() {
+        const u = new URL(this.props.targetUrl);
+        let ret = u.host;
+        if (u.pathname !== '/') ret += u.pathname;
+        return ret;
+    }
+
+    getBodyText() {
+        if (this.props.kind === RebrandDialogKind.NAG) {
+            return _t(
+                "Use your account to sign in to the latest version of the app at <a />", {},
+                {
+                    a: sub => <a href={this.props.targetUrl} rel="noopener noreferrer" target="_blank">{this.getPrettyTargetUrl()}</a>,
+                },
+            );
+        } else {
+            return _t(
+                "You’re already signed in and good to go here, but you can also grab the latest " +
+                "versions of the app on all platforms at <a>element.io/get-started</a>.", {},
+                {
+                    a: sub => <a href="https://element.io/get-started" rel="noopener noreferrer" target="_blank">{sub}</a>,
+                },
+            );
+        }
+    }
+
+    getDialogButtons() {
+        if (this.props.kind === RebrandDialogKind.NAG) {
+            return <DialogButtons primaryButton={_t("Go to Element")}
+                primaryButtonClass='primary'
+                onPrimaryButtonClick={this.onGoToElementClick}
+                hasCancel={true}
+                cancelButton={"Remind me later"}
+                onCancel={this.onRemindMeLaterClick}
+                focus={true}
+            />;
+        } else {
+            return <DialogButtons primaryButton={_t("Done")}
+                primaryButtonClass='primary'
+                hasCancel={false}
+                onPrimaryButtonClick={this.onDoneClick}
+                focus={true}
+            />;
+        }
+    }
+
+    render() {
+        return <BaseDialog title={_t("We’re excited to announce Riot is now Element!")}
+            className='mx_RebrandDialog'
+            contentId='mx_Dialog_content'
+            onFinished={this.props.onFinished}
+            hasCancel={false}
+        >
+            <div className="mx_RebrandDialog_body">{this.getBodyText()}</div>
+            <div className="mx_RebrandDialog_logoContainer">
+                <img className="mx_RebrandDialog_logo" src={require("../../../../res/img/riot-logo.svg")} alt="Riot Logo" />
+                <span className="mx_RebrandDialog_chevron" />
+                <img className="mx_RebrandDialog_logo" src={require("../../../../res/img/element-logo.svg")} alt="Element Logo" />
+            </div>
+            <div>
+                {_t(
+                    "Learn more at <a>element.io/previously-riot</a>", {}, {
+                        a: sub => <a href="https://element.io/previously-riot" rel="noopener noreferrer" target="_blank">{sub}</a>,
+                    }
+                )}
+            </div>
+            {this.getDialogButtons()}
+        </BaseDialog>;
+    }
+}

src/components/views/dialogs/RoomUpgradeWarningDialog.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 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.
@@ -17,6 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import {_t} from "../../../languageHandler";
+import SdkConfig from "../../../SdkConfig";
 import * as sdk from "../../../index";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
@@ -63,6 +64,7 @@ export default class RoomUpgradeWarningDialog extends React.Component {
     };
 
     render() {
+        const brand = SdkConfig.get().brand;
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
@@ -96,8 +98,11 @@ export default class RoomUpgradeWarningDialog extends React.Component {
                     <p>
                         {_t(
                             "This usually only affects how the room is processed on the server. If you're " +
-                            "having problems with your Riot, please <a>report a bug</a>.",
-                            {}, {
+                            "having problems with your %(brand)s, please <a>report a bug</a>.",
+                            {
+                                brand,
+                            },
+                            {
                                 "a": (sub) => {
                                     return <a href='#' onClick={this._openBugReportDialog}>{sub}</a>;
                                 },

src/components/views/dialogs/SessionRestoreErrorDialog.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2017 Vector Creations Ltd
 Copyright 2018 New Vector Ltd
+Copyright 2020 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.
@@ -56,6 +57,7 @@ export default createReactClass({
     },
 
     render: function() {
+        const brand = SdkConfig.get().brand;
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
@@ -94,9 +96,10 @@ export default createReactClass({
                     <p>{ _t("We encountered an error trying to restore your previous session.") }</p>
 
                     <p>{ _t(
-                        "If you have previously used a more recent version of Riot, your session " +
+                        "If you have previously used a more recent version of %(brand)s, your session " +
                         "may be incompatible with this version. Close this window and return " +
                         "to the more recent version.",
+                        { brand },
                      ) }</p>
 
                     <p>{ _t(

src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js

@@ -15,13 +15,24 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { debounce } from 'lodash';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from "prop-types";
 import * as sdk from '../../../../index';
 import {MatrixClientPeg} from '../../../../MatrixClientPeg';
+import Field from '../../elements/Field';
+import AccessibleButton from '../../elements/AccessibleButton';
 
 import { _t } from '../../../../languageHandler';
-import { accessSecretStorage } from '../../../../CrossSigningManager';
+
+// Maximum acceptable size of a key file. It's 59 characters including the spaces we encode,
+// so this should be plenty and allow for people putting extra whitespace in the file because
+// maybe that's a thing people would do?
+const KEY_FILE_MAX_SIZE = 128;
+
+// Don't shout at the user that their key is invalid every time they type a key: wait a short time
+const VALIDATION_THROTTLE_MS = 200;
 
 /*
  * Access Secure Secret Storage by requesting the user's passphrase.
@@ -36,9 +47,14 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
 
     constructor(props) {
         super(props);
+
+        this._fileUpload = React.createRef();
+
         this.state = {
             recoveryKey: "",
-            recoveryKeyValid: false,
+            recoveryKeyValid: null,
+            recoveryKeyCorrect: null,
+            recoveryKeyFileError: null,
             forceRecoveryKey: false,
             passPhrase: '',
             keyMatches: null,
@@ -55,18 +71,89 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
         });
     }
 
-    _onResetRecoveryClick = () => {
-        // Re-enter the access flow, but resetting storage this time around.
-        this.props.onFinished(false);
-        accessSecretStorage(() => {}, /* forceReset = */ true);
+    _validateRecoveryKeyOnChange = debounce(() => {
+        this._validateRecoveryKey();
+    }, VALIDATION_THROTTLE_MS);
+
+    async _validateRecoveryKey() {
+        if (this.state.recoveryKey === '') {
+            this.setState({
+                recoveryKeyValid: null,
+                recoveryKeyCorrect: null,
+            });
+            return;
+        }
+
+        try {
+            const cli = MatrixClientPeg.get();
+            const decodedKey = cli.keyBackupKeyFromRecoveryKey(this.state.recoveryKey);
+            const correct = await cli.checkSecretStorageKey(
+                decodedKey, this.props.keyInfo,
+            );
+            this.setState({
+                recoveryKeyValid: true,
+                recoveryKeyCorrect: correct,
+            });
+        } catch (e) {
+            this.setState({
+                recoveryKeyValid: false,
+                recoveryKeyCorrect: false,
+            });
+        }
     }
 
     _onRecoveryKeyChange = (e) => {
         this.setState({
             recoveryKey: e.target.value,
-            recoveryKeyValid: MatrixClientPeg.get().isValidRecoveryKey(e.target.value),
-            keyMatches: null,
+            recoveryKeyFileError: null,
         });
+
+        // also clear the file upload control so that the user can upload the same file
+        // the did before (otherwise the onchange wouldn't fire)
+        if (this._fileUpload.current) this._fileUpload.current.value = null;
+
+        // We don't use Field's validation here because a) we want it in a separate place rather
+        // than in a tooltip and b) we want it to display feedback based on the uploaded file
+        // as well as the text box. Ideally we would refactor Field's validation logic so we could
+        // re-use some of it.
+        this._validateRecoveryKeyOnChange();
+    }
+
+    _onRecoveryKeyFileChange = async e => {
+        if (e.target.files.length === 0) return;
+
+        const f = e.target.files[0];
+
+        if (f.size > KEY_FILE_MAX_SIZE) {
+            this.setState({
+                recoveryKeyFileError: true,
+                recoveryKeyCorrect: false,
+                recoveryKeyValid: false,
+            });
+        } else {
+            const contents = await f.text();
+            // test it's within the base58 alphabet. We could be more strict here, eg. require the
+            // right number of characters, but it's really just to make sure that what we're reading is
+            // text because we'll put it in the text field.
+            if (/^[123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz\s]+$/.test(contents)) {
+                this.setState({
+                    recoveryKeyFileError: null,
+                    recoveryKey: contents.trim(),
+                });
+                this._validateRecoveryKey();
+            } else {
+                this.setState({
+                    recoveryKeyFileError: true,
+                    recoveryKeyCorrect: false,
+                    recoveryKeyValid: false,
+                    recoveryKey: '',
+                });
+            }
+        }
+    }
+
+    _onRecoveryKeyFileUploadClick = () => {
+        this._fileUpload.current.click();
     }
 
     _onPassPhraseNext = async (e) => {
@@ -106,6 +193,20 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
         });
     }
 
+    getKeyValidationText() {
+        if (this.state.recoveryKeyFileError) {
+            return _t("Wrong file type");
+        } else if (this.state.recoveryKeyCorrect) {
+            return _t("Looks good!");
+        } else if (this.state.recoveryKeyValid) {
+            return _t("Wrong Recovery Key");
+        } else if (this.state.recoveryKeyValid === null) {
+            return '';
+        } else {
+            return _t("Invalid Recovery Key");
+        }
+    }
+
     render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
@@ -118,10 +219,12 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
 
         let content;
         let title;
+        let titleClass;
         if (hasPassphrase && !this.state.forceRecoveryKey) {
             const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
             const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-            title = _t("Enter recovery passphrase");
+            title = _t("Security Phrase");
+            titleClass = ['mx_AccessSecretStorageDialog_titleWithIcon mx_AccessSecretStorageDialog_securePhraseTitle'];
 
             let keyStatus;
             if (this.state.keyMatches === false) {
@@ -137,12 +240,15 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
 
             content = <div>
                 <p>{_t(
-                    "<b>Warning</b>: You should only do this on a trusted computer.", {},
-                    { b: sub => <b>{sub}</b> },
-                )}</p>
-                <p>{_t(
-                    "Access your secure message history and your cross-signing " +
-                    "identity for verifying other sessions by entering your recovery passphrase.",
+                    "Enter your Security Phrase or <button>Use your Security Key</button> to continue.", {},
+                    {
+                        button: s => <AccessibleButton className="mx_linkButton"
+                            element="span"
+                            onClick={this._onUseRecoveryKeyClick}
+                        >
+                            {s}
+                        </AccessibleButton>,
+                    },
                 )}</p>
 
                 <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this._onPassPhraseNext}>
@@ -153,10 +259,11 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                         value={this.state.passPhrase}
                         autoFocus={true}
                         autoComplete="new-password"
+                        placeholder={_t("Security Phrase")}
                     />
                     {keyStatus}
                     <DialogButtons
-                        primaryButton={_t('Next')}
+                        primaryButton={_t('Continue')}
                         onPrimaryButtonClick={this._onPassPhraseNext}
                         hasCancel={true}
                         onCancel={this._onCancel}
@@ -164,87 +271,61 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                         primaryDisabled={this.state.passPhrase.length === 0}
                     />
                 </form>
-                {_t(
-                    "If you've forgotten your recovery passphrase you can "+
-                    "<button1>use your recovery key</button1> or " +
-                    "<button2>set up new recovery options</button2>."
-                , {}, {
-                    button1: s => <AccessibleButton className="mx_linkButton"
-                        element="span"
-                        onClick={this._onUseRecoveryKeyClick}
-                    >
-                        {s}
-                    </AccessibleButton>,
-                    button2: s => <AccessibleButton className="mx_linkButton"
-                        element="span"
-                        onClick={this._onResetRecoveryClick}
-                    >
-                        {s}
-                    </AccessibleButton>,
-                })}
             </div>;
         } else {
-            title = _t("Enter recovery key");
+            title = _t("Security Key");
+            titleClass = ['mx_AccessSecretStorageDialog_titleWithIcon mx_AccessSecretStorageDialog_secureBackupTitle'];
             const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-            const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
-            let keyStatus;
-            if (this.state.recoveryKey.length === 0) {
-                keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus" />;
-            } else if (this.state.keyMatches === false) {
-                keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus">
-                    {"\uD83D\uDC4E "}{_t(
-                        "Unable to access secret storage. " +
-                        "Please verify that you entered the correct recovery key.",
-                    )}
-                </div>;
-            } else if (this.state.recoveryKeyValid) {
-                keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus">
-                    {"\uD83D\uDC4D "}{_t("This looks like a valid recovery key!")}
-                </div>;
-            } else {
-                keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus">
-                    {"\uD83D\uDC4E "}{_t("Not a valid recovery key")}
-                </div>;
-            }
+            const feedbackClasses = classNames({
+                'mx_AccessSecretStorageDialog_recoveryKeyFeedback': true,
+                'mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid': this.state.recoveryKeyCorrect === true,
+                'mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid': this.state.recoveryKeyCorrect === false,
+            });
+            const recoveryKeyFeedback = <div className={feedbackClasses}>
+                {this.getKeyValidationText()}
+            </div>;
 
             content = <div>
-                <p>{_t(
-                    "<b>Warning</b>: You should only do this on a trusted computer.", {},
-                    { b: sub => <b>{sub}</b> },
-                )}</p>
-                <p>{_t(
-                    "Access your secure message history and your cross-signing " +
-                    "identity for verifying other sessions by entering your recovery key.",
-                )}</p>
+                <p>{_t("Use your Security Key to continue.")}</p>
 
-                <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this._onRecoveryKeyNext}>
-                    <input className="mx_AccessSecretStorageDialog_recoveryKeyInput"
-                        onChange={this._onRecoveryKeyChange}
-                        value={this.state.recoveryKey}
-                        autoFocus={true}
-                    />
-                    {keyStatus}
+                <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this._onRecoveryKeyNext} spellCheck={false}>
+                    <div className="mx_AccessSecretStorageDialog_recoveryKeyEntry">
+                        <div className="mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput">
+                            <Field
+                                type="text"
+                                label={_t('Security Key')}
+                                value={this.state.recoveryKey}
+                                onChange={this._onRecoveryKeyChange}
+                                forceValidity={this.state.recoveryKeyCorrect}
+                            />
+                        </div>
+                        <span className="mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText">
+                            {_t("or")}
+                        </span>
+                        <div>
+                            <input type="file"
+                                className="mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput"
+                                ref={this._fileUpload}
+                                onChange={this._onRecoveryKeyFileChange}
+                            />
+                            <AccessibleButton kind="primary" onClick={this._onRecoveryKeyFileUploadClick}>
+                                {_t("Upload")}
+                            </AccessibleButton>
+                        </div>
+                    </div>
+                    {recoveryKeyFeedback}
                     <DialogButtons
-                        primaryButton={_t('Next')}
+                        primaryButton={_t('Continue')}
                         onPrimaryButtonClick={this._onRecoveryKeyNext}
                         hasCancel={true}
+                        cancelButton={_t("Go Back")}
+                        cancelButtonClass='danger'
                         onCancel={this._onCancel}
                         focus={false}
                         primaryDisabled={!this.state.recoveryKeyValid}
                     />
                 </form>
-                {_t(
-                    "If you've forgotten your recovery key you can "+
-                    "<button>set up new recovery options</button>."
-                , {}, {
-                    button: s => <AccessibleButton className="mx_linkButton"
-                        element="span"
-                        onClick={this._onResetRecoveryClick}
-                    >
-                        {s}
-                    </AccessibleButton>,
-                })}
             </div>;
         }
 
@@ -252,6 +333,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
             <BaseDialog className='mx_AccessSecretStorageDialog'
                 onFinished={this.props.onFinished}
                 title={title}
+                titleClass={titleClass}
             >
             <div>
                 {content}

src/components/views/elements/AccessibleButton.tsx

@@ -64,7 +64,6 @@ export default function AccessibleButton({
     className,
     ...restProps
 }: IProps) {
-
     const newProps: IAccessibleButtonProps = restProps;
     if (!disabled) {
         newProps.onClick = onClick;
@@ -119,7 +118,7 @@ export default function AccessibleButton({
 AccessibleButton.defaultProps = {
     element: 'div',
     role: 'button',
-    tabIndex: "0",
+    tabIndex: 0,
 };
 
 AccessibleButton.displayName = "AccessibleButton";

src/components/views/elements/AccessibleTooltipButton.tsx

@@ -16,21 +16,28 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 import AccessibleButton from "./AccessibleButton";
-import * as sdk from "../../../index";
+import Tooltip from './Tooltip';
 
-export default class AccessibleTooltipButton extends React.PureComponent {
-    static propTypes = {
-        ...AccessibleButton.propTypes,
-        // The tooltip to render on hover
-        title: PropTypes.string.isRequired,
-    };
+interface ITooltipProps extends React.ComponentProps<typeof AccessibleButton> {
+    title: string;
+    tooltip?: React.ReactNode;
+    tooltipClassName?: string;
+}
 
-    state = {
-        hover: false,
-    };
+interface IState {
+    hover: boolean;
+}
+
+export default class AccessibleTooltipButton extends React.PureComponent<ITooltipProps, IState> {
+    constructor(props: ITooltipProps) {
+        super(props);
+        this.state = {
+            hover: false,
+        };
+    }
 
     onMouseOver = () => {
         this.setState({
@@ -38,25 +45,27 @@ export default class AccessibleTooltipButton extends React.PureComponent {
         });
     };
 
-    onMouseOut = () => {
+    onMouseLeave = () => {
         this.setState({
             hover: false,
         });
     };
 
     render() {
-        const Tooltip = sdk.getComponent("elements.Tooltip");
-        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
-
-        const {title, children, ...props} = this.props;
+        const {title, tooltip, children, tooltipClassName, ...props} = this.props;
 
         const tip = this.state.hover ? <Tooltip
             className="mx_AccessibleTooltipButton_container"
-            tooltipClassName="mx_AccessibleTooltipButton_tooltip"
-            label={title}
+            tooltipClassName={classNames("mx_AccessibleTooltipButton_tooltip", tooltipClassName)}
+            label={tooltip || title}
         /> : <div />;
         return (
-            <AccessibleButton {...props} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} aria-label={title}>
+            <AccessibleButton
+                {...props}
+                onMouseOver={this.onMouseOver}
+                onMouseLeave={this.onMouseLeave}
+                aria-label={title}
+            >
                 { children }
                 { tip }
             </AccessibleButton>

src/components/views/elements/AddressTile.js

@@ -58,18 +58,6 @@ export default createReactClass({
             imgUrls.push(require("../../../../res/img/icon-email-user.svg"));
         }
 
-        // Removing networks for now as they're not really supported
-        /*
-        var network;
-        if (this.props.networkUrl !== "") {
-            network = (
-                <div className="mx_AddressTile_network">
-                    <BaseAvatar width={25} height={25} name={this.props.networkName} title="Riot" url={this.props.networkUrl} />
-                </div>
-            );
-        }
-        */
-
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
 

src/components/views/elements/AppPermission.js

@@ -1,7 +1,7 @@
 /*
 Copyright 2017 Vector Creations Ltd
 Copyright 2018, 2019 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 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.
@@ -21,6 +21,7 @@ import PropTypes from 'prop-types';
 import url from 'url';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
+import SdkConfig from '../../../SdkConfig';
 import WidgetUtils from "../../../utils/WidgetUtils";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 
@@ -76,6 +77,7 @@ export default class AppPermission extends React.Component {
     }
 
     render() {
+        const brand = SdkConfig.get().brand;
         const AccessibleButton = sdk.getComponent("views.elements.AccessibleButton");
         const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
         const BaseAvatar = sdk.getComponent("views.avatars.BaseAvatar");
@@ -96,7 +98,7 @@ export default class AppPermission extends React.Component {
                     <li>{_t("Your avatar URL")}</li>
                     <li>{_t("Your user ID")}</li>
                     <li>{_t("Your theme")}</li>
-                    <li>{_t("Riot URL")}</li>
+                    <li>{_t("%(brand)s URL", { brand })}</li>
                     <li>{_t("Room ID")}</li>
                     <li>{_t("Widget ID")}</li>
                 </ul>

src/components/views/elements/CreateRoomButton.js

@@ -1,40 +0,0 @@
-/*
-Copyright 2017 Vector Creations Ltd
-
-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 React from 'react';
-import * as sdk from '../../../index';
-import PropTypes from 'prop-types';
-import { _t } from '../../../languageHandler';
-
-const CreateRoomButton = function(props) {
-    const ActionButton = sdk.getComponent('elements.ActionButton');
-    return (
-        <ActionButton action="view_create_room"
-            mouseOverAction={props.callout ? "callout_create_room" : null}
-            label={_t("Create new room")}
-            iconPath={require("../../../../res/img/icons-create-room.svg")}
-            size={props.size}
-            tooltip={props.tooltip}
-        />
-    );
-};
-
-CreateRoomButton.propTypes = {
-    size: PropTypes.string,
-    tooltip: PropTypes.bool,
-};
-
-export default CreateRoomButton;

src/components/views/elements/EditableItemList.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {_t} from '../../../languageHandler.js';
+import {_t} from '../../../languageHandler';
 import Field from "./Field";
 import AccessibleButton from "./AccessibleButton";
 

src/components/views/elements/Field.tsx

@@ -50,7 +50,7 @@ interface IProps {
     // to the user.
     onValidate?: (input: IFieldState) => Promise<IValidationResult>;
     // If specified, overrides the value returned by onValidate.
-    flagInvalid?: boolean;
+    forceValidity?: boolean;
     // If specified, contents will appear as a tooltip on the element and
     // validation feedback tooltips will be suppressed.
     tooltipContent?: React.ReactNode;
@@ -203,7 +203,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
     public render() {
         const {
             element, prefixComponent, postfixComponent, className, onValidate, children,
-            tooltipContent, flagInvalid, tooltipClassName, list, ...inputProps} = this.props;
+            tooltipContent, forceValidity, tooltipClassName, list, ...inputProps} = this.props;
 
         // Set some defaults for the <input> element
         const ref = input => this.input = input;
@@ -228,15 +228,15 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
             postfixContainer = <span className="mx_Field_postfix">{postfixComponent}</span>;
         }
 
-        const hasValidationFlag = flagInvalid !== null && flagInvalid !== undefined;
+        const hasValidationFlag = forceValidity !== null && forceValidity !== undefined;
         const fieldClasses = classNames("mx_Field", `mx_Field_${this.props.element}`, className, {
             // If we have a prefix element, leave the label always at the top left and
             // don't animate it, as it looks a bit clunky and would add complexity to do
             // properly.
             mx_Field_labelAlwaysTopLeft: prefixComponent,
-            mx_Field_valid: onValidate && this.state.valid === true,
+            mx_Field_valid: hasValidationFlag ? forceValidity : onValidate && this.state.valid === true,
             mx_Field_invalid: hasValidationFlag
-                ? flagInvalid
+                ? !forceValidity
                 : onValidate && this.state.valid === false,
         });
 
@@ -248,6 +248,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
                 tooltipClassName={classNames("mx_Field_tooltip", tooltipClassName)}
                 visible={(this.state.focused && this.props.forceTooltipVisible) || this.state.feedbackVisible}
                 label={tooltipContent || this.state.feedback}
+                forceOnRight
             />;
         }
 

src/components/views/elements/InlineSpinner.js

@@ -27,18 +27,15 @@ export default createReactClass({
         const h = this.props.h || 16;
         const imgClass = this.props.imgClassName || "";
 
-        let divClass;
         let imageSource;
         if (SettingsStore.isFeatureEnabled('feature_new_spinner')) {
-            divClass = "mx_InlineSpinner mx_Spinner_spin";
             imageSource = require("../../../../res/img/spinner.svg");
         } else {
-            divClass = "mx_InlineSpinner";
             imageSource = require("../../../../res/img/spinner.gif");
         }
 
         return (
-            <div className={divClass}>
+            <div className="mx_InlineSpinner">
                 <img
                     src={imageSource}
                     width={w}

src/components/views/elements/InteractiveTooltip.js

@@ -1,336 +0,0 @@
-/*
-Copyright 2019 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 React from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const InteractiveTooltipContainerId = "mx_InteractiveTooltip_Container";
-
-// If the distance from tooltip to window edge is below this value, the tooltip
-// will flip around to the other side of the target.
-const MIN_SAFE_DISTANCE_TO_WINDOW_EDGE = 20;
-
-function getOrCreateContainer() {
-    let container = document.getElementById(InteractiveTooltipContainerId);
-
-    if (!container) {
-        container = document.createElement("div");
-        container.id = InteractiveTooltipContainerId;
-        document.body.appendChild(container);
-    }
-
-    return container;
-}
-
-function isInRect(x, y, rect) {
-    const { top, right, bottom, left } = rect;
-    return x >= left && x <= right && y >= top && y <= bottom;
-}
-
-/**
- * Returns the positive slope of the diagonal of the rect.
- *
- * @param {DOMRect} rect
- * @return {integer}
- */
-function getDiagonalSlope(rect) {
-    const { top, right, bottom, left } = rect;
-    return (bottom - top) / (right - left);
-}
-
-function isInUpperLeftHalf(x, y, rect) {
-    const { bottom, left } = rect;
-    // Negative slope because Y values grow downwards and for this case, the
-    // diagonal goes from larger to smaller Y values.
-    const diagonalSlope = getDiagonalSlope(rect) * -1;
-    return isInRect(x, y, rect) && (y <= bottom + diagonalSlope * (x - left));
-}
-
-function isInLowerRightHalf(x, y, rect) {
-    const { bottom, left } = rect;
-    // Negative slope because Y values grow downwards and for this case, the
-    // diagonal goes from larger to smaller Y values.
-    const diagonalSlope = getDiagonalSlope(rect) * -1;
-    return isInRect(x, y, rect) && (y >= bottom + diagonalSlope * (x - left));
-}
-
-function isInUpperRightHalf(x, y, rect) {
-    const { top, left } = rect;
-    // Positive slope because Y values grow downwards and for this case, the
-    // diagonal goes from smaller to larger Y values.
-    const diagonalSlope = getDiagonalSlope(rect) * 1;
-    return isInRect(x, y, rect) && (y <= top + diagonalSlope * (x - left));
-}
-
-function isInLowerLeftHalf(x, y, rect) {
-    const { top, left } = rect;
-    // Positive slope because Y values grow downwards and for this case, the
-    // diagonal goes from smaller to larger Y values.
-    const diagonalSlope = getDiagonalSlope(rect) * 1;
-    return isInRect(x, y, rect) && (y >= top + diagonalSlope * (x - left));
-}
-
-/*
- * This style of tooltip takes a "target" element as its child and centers the
- * tooltip along one edge of the target.
- */
-export default class InteractiveTooltip extends React.Component {
-    static propTypes = {
-        // Content to show in the tooltip
-        content: PropTypes.node.isRequired,
-        // Function to call when visibility of the tooltip changes
-        onVisibilityChange: PropTypes.func,
-        // flag to forcefully hide this tooltip
-        forceHidden: PropTypes.bool,
-    };
-
-    constructor() {
-        super();
-
-        this.state = {
-            contentRect: null,
-            visible: false,
-        };
-    }
-
-    componentDidUpdate() {
-        // Whenever this passthrough component updates, also render the tooltip
-        // in a separate DOM tree. This allows the tooltip content to participate
-        // the normal React rendering cycle: when this component re-renders, the
-        // tooltip content re-renders.
-        // Once we upgrade to React 16, this could be done a bit more naturally
-        // using the portals feature instead.
-        this.renderTooltip();
-    }
-
-    componentWillUnmount() {
-        document.removeEventListener("mousemove", this.onMouseMove);
-    }
-
-    collectContentRect = (element) => {
-        // We don't need to clean up when unmounting, so ignore
-        if (!element) return;
-
-        this.setState({
-            contentRect: element.getBoundingClientRect(),
-        });
-    }
-
-    collectTarget = (element) => {
-        this.target = element;
-    }
-
-    canTooltipFitAboveTarget() {
-        const { contentRect } = this.state;
-        const targetRect = this.target.getBoundingClientRect();
-        const targetTop = targetRect.top + window.pageYOffset;
-        return (
-            !contentRect ||
-            (targetTop - contentRect.height > MIN_SAFE_DISTANCE_TO_WINDOW_EDGE)
-        );
-    }
-
-    onMouseMove = (ev) => {
-        const { clientX: x, clientY: y } = ev;
-        const { contentRect } = this.state;
-        const targetRect = this.target.getBoundingClientRect();
-
-        // When moving the mouse from the target to the tooltip, we create a
-        // safe area that includes the tooltip, the target, and the trapezoid
-        // ABCD between them:
-        //                            ┌───────────┐
-        //                            │           │
-        //                            │           │
-        //                          A └───E───F───┘ B
-        //                                  V
-        //                                 ┌─┐
-        //                                 │ │
-        //                                C└─┘D
-        //
-        // As long as the mouse remains inside the safe area, the tooltip will
-        // stay open.
-        const buffer = 50;
-        if (isInRect(x, y, targetRect)) {
-            return;
-        }
-        if (this.canTooltipFitAboveTarget()) {
-            const contentRectWithBuffer = {
-                top: contentRect.top - buffer,
-                right: contentRect.right + buffer,
-                bottom: contentRect.bottom,
-                left: contentRect.left - buffer,
-            };
-            const trapezoidLeft = {
-                top: contentRect.bottom,
-                right: targetRect.left,
-                bottom: targetRect.bottom,
-                left: contentRect.left - buffer,
-            };
-            const trapezoidCenter = {
-                top: contentRect.bottom,
-                right: targetRect.right,
-                bottom: targetRect.bottom,
-                left: targetRect.left,
-            };
-            const trapezoidRight = {
-                top: contentRect.bottom,
-                right: contentRect.right + buffer,
-                bottom: targetRect.bottom,
-                left: targetRect.right,
-            };
-
-            if (
-                isInRect(x, y, contentRectWithBuffer) ||
-                isInUpperRightHalf(x, y, trapezoidLeft) ||
-                isInRect(x, y, trapezoidCenter) ||
-                isInUpperLeftHalf(x, y, trapezoidRight)
-            ) {
-                return;
-            }
-        } else {
-            const contentRectWithBuffer = {
-                top: contentRect.top,
-                right: contentRect.right + buffer,
-                bottom: contentRect.bottom + buffer,
-                left: contentRect.left - buffer,
-            };
-            const trapezoidLeft = {
-                top: targetRect.top,
-                right: targetRect.left,
-                bottom: contentRect.top,
-                left: contentRect.left - buffer,
-            };
-            const trapezoidCenter = {
-                top: targetRect.top,
-                right: targetRect.right,
-                bottom: contentRect.top,
-                left: targetRect.left,
-            };
-            const trapezoidRight = {
-                top: targetRect.top,
-                right: contentRect.right + buffer,
-                bottom: contentRect.top,
-                left: targetRect.right,
-            };
-
-            if (
-                isInRect(x, y, contentRectWithBuffer) ||
-                isInLowerRightHalf(x, y, trapezoidLeft) ||
-                isInRect(x, y, trapezoidCenter) ||
-                isInLowerLeftHalf(x, y, trapezoidRight)
-            ) {
-                return;
-            }
-        }
-
-        this.hideTooltip();
-    }
-
-    onTargetMouseOver = (ev) => {
-        this.showTooltip();
-    }
-
-    showTooltip() {
-        // Don't enter visible state if we haven't collected the target yet
-        if (!this.target) {
-            return;
-        }
-        this.setState({
-            visible: true,
-        });
-        if (this.props.onVisibilityChange) {
-            this.props.onVisibilityChange(true);
-        }
-        document.addEventListener("mousemove", this.onMouseMove);
-    }
-
-    hideTooltip() {
-        this.setState({
-            visible: false,
-        });
-        if (this.props.onVisibilityChange) {
-            this.props.onVisibilityChange(false);
-        }
-        document.removeEventListener("mousemove", this.onMouseMove);
-    }
-
-    renderTooltip() {
-        const { contentRect, visible } = this.state;
-        if (this.props.forceHidden === true || !visible) {
-            ReactDOM.render(null, getOrCreateContainer());
-            return null;
-        }
-
-        const targetRect = this.target.getBoundingClientRect();
-
-        // The window X and Y offsets are to adjust position when zoomed in to page
-        const targetLeft = targetRect.left + window.pageXOffset;
-        const targetBottom = targetRect.bottom + window.pageYOffset;
-        const targetTop = targetRect.top + window.pageYOffset;
-
-        // Place the tooltip above the target by default. If we find that the
-        // tooltip content would extend past the safe area towards the window
-        // edge, flip around to below the target.
-        const position = {};
-        let chevronFace = null;
-        if (this.canTooltipFitAboveTarget()) {
-            position.bottom = window.innerHeight - targetTop;
-            chevronFace = "bottom";
-        } else {
-            position.top = targetBottom;
-            chevronFace = "top";
-        }
-
-        // Center the tooltip horizontally with the target's center.
-        position.left = targetLeft + targetRect.width / 2;
-
-        const chevron = <div className={"mx_InteractiveTooltip_chevron_" + chevronFace} />;
-
-        const menuClasses = classNames({
-            'mx_InteractiveTooltip': true,
-            'mx_InteractiveTooltip_withChevron_top': chevronFace === 'top',
-            'mx_InteractiveTooltip_withChevron_bottom': chevronFace === 'bottom',
-        });
-
-        const menuStyle = {};
-        if (contentRect) {
-            menuStyle.left = `-${contentRect.width / 2}px`;
-        }
-
-        const tooltip = <div className="mx_InteractiveTooltip_wrapper" style={{...position}}>
-            <div className={menuClasses}
-                style={menuStyle}
-                ref={this.collectContentRect}
-            >
-                {chevron}
-                {this.props.content}
-            </div>
-        </div>;
-
-        ReactDOM.render(tooltip, getOrCreateContainer());
-    }
-
-    render() {
-        // We use `cloneElement` here to append some props to the child content
-        // without using a wrapper element which could disrupt layout.
-        return React.cloneElement(this.props.children, {
-            ref: this.collectTarget,
-            onMouseOver: this.onTargetMouseOver,
-        });
-    }
-}

src/components/views/elements/ManageIntegsButton.js

@@ -17,10 +17,10 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import SettingsStore from "../../../settings/SettingsStore";
+import AccessibleTooltipButton from "./AccessibleTooltipButton";
 
 export default class ManageIntegsButton extends React.Component {
     constructor(props) {
@@ -45,9 +45,8 @@ export default class ManageIntegsButton extends React.Component {
     render() {
         let integrationsButton = <div />;
         if (IntegrationManagers.sharedInstance().hasManager()) {
-            const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
             integrationsButton = (
-                <AccessibleButton
+                <AccessibleTooltipButton
                     className='mx_RoomHeader_button mx_RoomHeader_manageIntegsButton'
                     title={_t("Manage Integrations")}
                     onClick={this.onManageIntegrations}

src/components/views/elements/MemberEventListSummary.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
@@ -23,6 +23,7 @@ import { _t } from '../../../languageHandler';
 import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
 import * as sdk from "../../../index";
 import {MatrixEvent} from "matrix-js-sdk";
+import {isValid3pidInvite} from "../../../RoomInvite";
 
 export default createReactClass({
     displayName: 'MemberEventListSummary',
@@ -284,6 +285,9 @@ export default createReactClass({
     _getTransition: function(e) {
         if (e.mxEvent.getType() === 'm.room.third_party_invite') {
             // Handle 3pid invites the same as invites so they get bundled together
+            if (!isValid3pidInvite(e.mxEvent)) {
+                return 'invite_withdrawal';
+            }
             return 'invited';
         }
 

src/components/views/elements/ProgressBar.js

@@ -1,39 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 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 React from "react";
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-
-export default createReactClass({
-    displayName: 'ProgressBar',
-    propTypes: {
-        value: PropTypes.number,
-        max: PropTypes.number,
-    },
-
-    render: function() {
-        // Would use an HTML5 progress tag but if that doesn't animate if you
-        // use the HTML attributes rather than styles
-        const progressStyle = {
-            width: ((this.props.value / this.props.max) * 100)+"%",
-        };
-        return (
-            <div className="mx_ProgressBar"><div className="mx_ProgressBar_fill" style={progressStyle}></div></div>
-        );
-    },
-});

src/components/views/elements/ProgressBar.tsx

@@ -0,0 +1,28 @@
+/*
+Copyright 2020 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 React from "react";
+
+interface IProps {
+    value: number;
+    max: number;
+}
+
+const ProgressBar: React.FC<IProps> = ({value, max}) => {
+    return <progress className="mx_ProgressBar" max={max} value={value} />;
+};
+
+export default ProgressBar;

src/components/views/elements/ReplyThread.js

@@ -27,6 +27,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import escapeHtml from "escape-html";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {Action} from "../../../dispatcher/actions";
+import sanitizeHtml from "sanitize-html";
 
 // This component does no cycle detection, simply because the only way to make such a cycle would be to
 // craft event_id's, using a homeserver that generates predictable event IDs; even then the impact would
@@ -92,7 +93,21 @@ export default class ReplyThread extends React.Component {
 
     // Part of Replies fallback support
     static stripHTMLReply(html) {
-        return html.replace(/^<mx-reply>[\s\S]+?<\/mx-reply>/, '');
+        // Sanitize the original HTML for inclusion in <mx-reply>.  We allow
+        // any HTML, since the original sender could use special tags that we
+        // don't recognize, but want to pass along to any recipients who do
+        // recognize them -- recipients should be sanitizing before displaying
+        // anyways.  However, we sanitize to 1) remove any mx-reply, so that we
+        // don't generate a nested mx-reply, and 2) make sure that the HTML is
+        // properly formatted (e.g. tags are closed where necessary)
+        return sanitizeHtml(
+            html,
+            {
+                allowedTags: false, // false means allow everything
+                allowedAttributes: false,
+                exclusiveFilter: (frame) => frame.tag === "mx-reply",
+            },
+        );
     }
 
     // Part of Replies fallback support
@@ -102,15 +117,19 @@ export default class ReplyThread extends React.Component {
         let {body, formatted_body: html} = ev.getContent();
         if (this.getParentEventId(ev)) {
             if (body) body = this.stripPlainReply(body);
-            if (html) html = this.stripHTMLReply(html);
         }
 
         if (!body) body = ""; // Always ensure we have a body, for reasons.
 
-        // Escape the body to use as HTML below.
-        // We also run a nl2br over the result to fix the fallback representation. We do this
-        // after converting the text to safe HTML to avoid user-provided BR's from being converted.
-        if (!html) html = escapeHtml(body).replace(/\n/g, '<br/>');
+        if (html) {
+            // sanitize the HTML before we put it in an <mx-reply>
+            html = this.stripHTMLReply(html);
+        } else {
+            // Escape the body to use as HTML below.
+            // We also run a nl2br over the result to fix the fallback representation. We do this
+            // after converting the text to safe HTML to avoid user-provided BR's from being converted.
+            html = escapeHtml(body).replace(/\n/g, '<br/>');
+        }
 
         // dev note: do not rely on `body` being safe for HTML usage below.
 

src/components/views/elements/Spinner.js

@@ -21,18 +21,15 @@ import {_t} from "../../../languageHandler";
 import SettingsStore from "../../../settings/SettingsStore";
 
 const Spinner = ({w = 32, h = 32, imgClassName, message}) => {
-    let divClass;
     let imageSource;
     if (SettingsStore.isFeatureEnabled('feature_new_spinner')) {
-        divClass = "mx_Spinner mx_Spinner_spin";
         imageSource = require("../../../../res/img/spinner.svg");
     } else {
-        divClass = "mx_Spinner";
         imageSource = require("../../../../res/img/spinner.gif");
     }
 
     return (
-        <div className={divClass}>
+        <div className="mx_Spinner">
             { message && <React.Fragment><div className="mx_Spinner_Msg">{ message}</div>&nbsp;</React.Fragment> }
             <img
                 src={imageSource}

src/components/views/elements/StyledRadioButton.tsx

@@ -18,6 +18,7 @@ import React from 'react';
 import classnames from 'classnames';
 
 interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    outlined?: boolean;
 }
 
 interface IState {
@@ -29,7 +30,7 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
     };
 
     public render() {
-        const { children, className, disabled, ...otherProps } = this.props;
+        const { children, className, disabled, outlined, ...otherProps } = this.props;
         const _className = classnames(
             'mx_RadioButton',
             className,
@@ -37,12 +38,13 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
                 "mx_RadioButton_disabled": disabled,
                 "mx_RadioButton_enabled": !disabled,
                 "mx_RadioButton_checked": this.props.checked,
+                "mx_RadioButton_outlined": outlined,
             });
         return <label className={_className}>
             <input type='radio' disabled={disabled} {...otherProps} />
             {/* Used to render the radio button circle */}
-            <div><div></div></div>
-            <span>{children}</span>
+            <div><div /></div>
+            <div className="mx_RadioButton_content">{children}</div>
             <div className="mx_RadioButton_spacer" />
         </label>;
     }

src/components/views/elements/StyledRadioGroup.tsx

@@ -32,24 +32,25 @@ interface IProps<T extends string> {
     className?: string;
     definitions: IDefinition<T>[];
     value?: T; // if not provided no options will be selected
+    outlined?: boolean;
     onChange(newValue: T);
 }
 
-function StyledRadioGroup<T extends string>({name, definitions, value, className, onChange}: IProps<T>) {
+function StyledRadioGroup<T extends string>({name, definitions, value, className, outlined, onChange}: IProps<T>) {
     const _onChange = e => {
         onChange(e.target.value);
     };
 
     return <React.Fragment>
-        {definitions.map(d => <React.Fragment>
+        {definitions.map(d => <React.Fragment key={d.value}>
             <StyledRadioButton
-                key={d.value}
                 className={classNames(className, d.className)}
                 onChange={_onChange}
                 checked={d.value === value}
                 name={name}
                 value={d.value}
                 disabled={d.disabled}
+                outlined={outlined}
             >
                 {d.label}
             </StyledRadioButton>

src/components/views/elements/TagTile.js

@@ -29,6 +29,7 @@ import FlairStore from '../../../stores/FlairStore';
 import GroupStore from '../../../stores/GroupStore';
 import TagOrderStore from '../../../stores/TagOrderStore';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import AccessibleButton from "./AccessibleButton";
 
 // A class for a child of TagPanel (possibly wrapped in a DNDTagTile) that represents
 // a thing to click on for the user to filter the visible rooms in the RoomList to:
@@ -114,7 +115,7 @@ export default createReactClass({
         this.setState({ hover: true });
     },
 
-    onMouseOut: function() {
+    onMouseLeave: function() {
         this.setState({ hover: false });
     },
 
@@ -130,7 +131,7 @@ export default createReactClass({
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
         const profile = this.state.profile || {};
         const name = profile.name || this.props.tag;
-        const avatarHeight = 40;
+        const avatarHeight = 32;
 
         const httpUrl = profile.avatarUrl ? this.context.mxcUrlToHttp(
             profile.avatarUrl, avatarHeight, avatarHeight, "crop",
@@ -151,11 +152,14 @@ export default createReactClass({
             badgeElement = (<div className={badgeClasses}>{FormattingUtils.formatCount(badge.count)}</div>);
         }
 
-        // FIXME: this ought to use AccessibleButton for a11y but that causes onMouseOut/onMouseOver to fire too much
         const contextButton = this.state.hover || this.props.menuDisplayed ?
-            <div className="mx_TagTile_context_button" onClick={this.openMenu} ref={this.props.contextMenuButtonRef}>
+            <AccessibleButton
+                className="mx_TagTile_context_button"
+                onClick={this.openMenu}
+                ref={this.props.contextMenuButtonRef}
+            >
                 {"\u00B7\u00B7\u00B7"}
-            </div> : <div ref={this.props.contextMenuButtonRef} />;
+            </AccessibleButton> : <div ref={this.props.contextMenuButtonRef} />;
 
         const AccessibleTooltipButton = sdk.getComponent("elements.AccessibleTooltipButton");
 
@@ -168,7 +172,7 @@ export default createReactClass({
             <div
                 className="mx_TagTile_avatar"
                 onMouseOver={this.onMouseOver}
-                onMouseOut={this.onMouseOut}
+                onMouseLeave={this.onMouseLeave}
             >
                 <BaseAvatar
                     name={name}

src/components/views/elements/TextWithTooltip.js

@@ -37,7 +37,7 @@ export default class TextWithTooltip extends React.Component {
         this.setState({hover: true});
     };
 
-    onMouseOut = () => {
+    onMouseLeave = () => {
         this.setState({hover: false});
     };
 
@@ -45,7 +45,7 @@ export default class TextWithTooltip extends React.Component {
         const Tooltip = sdk.getComponent("elements.Tooltip");
 
         return (
-            <span onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} className={this.props.class}>
+            <span onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} className={this.props.class}>
                 {this.props.children}
                 <Tooltip
                     label={this.props.tooltip}

src/components/views/elements/Tooltip.tsx

@@ -18,18 +18,15 @@ limitations under the License.
 */
 
 
-import React, { Component } from 'react';
+import React, {Component, CSSProperties} from 'react';
 import ReactDOM from 'react-dom';
-import dis from '../../../dispatcher/dispatcher';
 import classNames from 'classnames';
-import { ViewTooltipPayload } from '../../../dispatcher/payloads/ViewTooltipPayload';
-import { Action } from '../../../dispatcher/actions';
 
 const MIN_TOOLTIP_HEIGHT = 25;
 
 interface IProps {
         // Class applied to the element used to position the tooltip
-        className: string;
+        className?: string;
         // Class applied to the tooltip itself
         tooltipClassName?: string;
         // Whether the tooltip is visible or hidden.
@@ -38,6 +35,7 @@ interface IProps {
         visible?: boolean;
         // the react element to put into the tooltip
         label: React.ReactNode;
+        forceOnRight?: boolean;
 }
 
 export default class Tooltip extends React.Component<IProps> {
@@ -68,18 +66,12 @@ export default class Tooltip extends React.Component<IProps> {
 
     // Remove the wrapper element, as the tooltip has finished using it
     public componentWillUnmount() {
-        dis.dispatch<ViewTooltipPayload>({
-            action: Action.ViewTooltip,
-            tooltip: null,
-            parent: null,
-        });
-
         ReactDOM.unmountComponentAtNode(this.tooltipContainer);
         document.body.removeChild(this.tooltipContainer);
         window.removeEventListener('scroll', this.renderTooltip, true);
     }
 
-    private updatePosition(style: {[key: string]: any}) {
+    private updatePosition(style: CSSProperties) {
         const parentBox = this.parent.getBoundingClientRect();
         let offset = 0;
         if (parentBox.height > MIN_TOOLTIP_HEIGHT) {
@@ -89,8 +81,14 @@ export default class Tooltip extends React.Component<IProps> {
             // we need so that we're still centered.
             offset = Math.floor(parentBox.height - MIN_TOOLTIP_HEIGHT);
         }
+
         style.top = (parentBox.top - 2) + window.pageYOffset + offset;
-        style.left = 6 + parentBox.right + window.pageXOffset;
+        if (!this.props.forceOnRight && parentBox.right > window.innerWidth / 2) {
+            style.right = window.innerWidth - parentBox.right - window.pageXOffset - 8;
+        } else {
+            style.left = parentBox.right + window.pageXOffset + 6;
+        }
+
         return style;
     }
 
@@ -99,7 +97,6 @@ export default class Tooltip extends React.Component<IProps> {
         // positioned, also taking into account any window zoom
         // NOTE: The additional 6 pixels for the left position, is to take account of the
         // tooltips chevron
-        const parent = ReactDOM.findDOMNode(this).parentNode as Element;
         const style = this.updatePosition({});
         // Hide the entire container when not visible. This prevents flashing of the tooltip
         // if it is not meant to be visible on first mount.
@@ -119,19 +116,12 @@ export default class Tooltip extends React.Component<IProps> {
 
         // Render the tooltip manually, as we wish it not to be rendered within the parent
         this.tooltip = ReactDOM.render<Element>(tooltip, this.tooltipContainer);
-
-        // Tell the roomlist about us so it can manipulate us if it wishes
-        dis.dispatch<ViewTooltipPayload>({
-            action: Action.ViewTooltip,
-            tooltip: this.tooltip,
-            parent: parent,
-        });
     };
 
     public render() {
         // Render a placeholder
         return (
-            <div className={this.props.className} >
+            <div className={this.props.className}>
             </div>
         );
     }

src/components/views/elements/TooltipButton.js

@@ -34,7 +34,7 @@ export default createReactClass({
         });
     },
 
-    onMouseOut: function() {
+    onMouseLeave: function() {
         this.setState({
             hover: false,
         });
@@ -48,7 +48,7 @@ export default createReactClass({
             label={this.props.helpText}
         /> : <div />;
         return (
-            <div className="mx_TooltipButton" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} >
+            <div className="mx_TooltipButton" onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
                 ?
                 { tip }
             </div>

src/components/views/groups/GroupMemberList.js

@@ -24,7 +24,6 @@ import GroupStore from '../../../stores/GroupStore';
 import PropTypes from 'prop-types';
 import { showGroupInviteDialog } from '../../../GroupAddressPicker';
 import AccessibleButton from '../elements/AccessibleButton';
-import TintableSvg from '../elements/TintableSvg';
 import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 
@@ -211,15 +210,13 @@ export default createReactClass({
         let inviteButton;
         if (GroupStore.isUserPrivileged(this.props.groupId)) {
             inviteButton = (
-            <AccessibleButton
-                className="mx_RightPanel_invite"
-                onClick={this.onInviteToGroupButtonClick}
-            >
-                <div className="mx_RightPanel_icon" >
-                    <TintableSvg src={require("../../../../res/img/icon-invite-people.svg")} width="18" height="14" />
-                </div>
-                <div className="mx_RightPanel_message">{ _t('Invite to this community') }</div>
-            </AccessibleButton>);
+                <AccessibleButton
+                    className="mx_MemberList_invite mx_MemberList_inviteCommunity"
+                    onClick={this.onInviteToGroupButtonClick}
+                >
+                    <span>{ _t('Invite to this community') }</span>
+                </AccessibleButton>
+            );
         }
 
         return (

src/components/views/groups/GroupRoomList.js

@@ -21,7 +21,6 @@ import GroupStore from '../../../stores/GroupStore';
 import PropTypes from 'prop-types';
 import { showGroupAddRoomDialog } from '../../../GroupAddressPicker';
 import AccessibleButton from '../elements/AccessibleButton';
-import TintableSvg from '../elements/TintableSvg';
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 
 const INITIAL_LOAD_NUM_ROOMS = 30;
@@ -135,13 +134,10 @@ export default createReactClass({
         if (GroupStore.isUserPrivileged(this.props.groupId)) {
             inviteButton = (
                 <AccessibleButton
-                    className="mx_RightPanel_invite"
+                    className="mx_MemberList_invite mx_MemberList_addRoomToCommunity"
                     onClick={this.onAddRoomToGroupButtonClick}
                 >
-                    <div className="mx_RightPanel_icon" >
-                        <TintableSvg src={require("../../../../res/img/icons-room-add.svg")} width="18" height="14" />
-                    </div>
-                    <div className="mx_RightPanel_message">{ _t('Add rooms to this community') }</div>
+                    <span>{ _t('Add rooms to this community') }</span>
                 </AccessibleButton>
             );
         }