Improve decryption error UI by consolidating error messages and providing instructions when possible

cypress/e2e/crypto/decryption-failure.spec.ts

@@ -146,9 +146,13 @@ describe("Decryption Failures", () => {
 
         cy.get(".mx_DecryptionFailureBar .mx_DecryptionFailureBar_button").click();
 
-        cy.get(".mx_CreateSecretStorageDialog button.mx_Dialog_primary").click();
-        cy.get(".mx_CreateSecretStorageDialog_recoveryKeyButtons_copyBtn").click();
-        cy.get("button.mx_Dialog_primary").click();
+        cy.get(".mx_Dialog").within(() => {
+            cy.contains(".mx_Dialog_primary", "Continue").click();
+            cy.get(".mx_CreateSecretStorageDialog_recoveryKey code").invoke("text").as("securityKey");
+            // Clicking download instead of Copy because of https://github.com/cypress-io/cypress/issues/2851
+            cy.contains(".mx_AccessibleButton", "Download").click();
+            cy.contains(".mx_Dialog_primary:not([disabled])", "Continue").click();
+        });
 
         cy.get(".mx_DecryptionFailureBar .mx_DecryptionFailureBar_message_headline")
             .should("have.text", "Requesting keys to decrypt messages...");

res/css/_components.pcss

@@ -217,7 +217,7 @@
 @import "./views/messages/_CallEvent.pcss";
 @import "./views/messages/_CreateEvent.pcss";
 @import "./views/messages/_DateSeparator.pcss";
-@import "./views/messages/_DecryptionFailureBody.scss";
+@import "./views/messages/_DecryptionFailureBody.pcss";
 @import "./views/messages/_DisambiguatedProfile.pcss";
 @import "./views/messages/_EventTileBubble.pcss";
 @import "./views/messages/_HiddenBody.pcss";
@@ -260,7 +260,7 @@
 @import "./views/rooms/_Autocomplete.pcss";
 @import "./views/rooms/_AuxPanel.pcss";
 @import "./views/rooms/_BasicMessageComposer.pcss";
-@import "./views/rooms/_DecryptionFailureBar.scss";
+@import "./views/rooms/_DecryptionFailureBar.pcss";
 @import "./views/rooms/_E2EIcon.pcss";
 @import "./views/rooms/_EmojiButton.pcss";
 @import "./views/rooms/_EditMessageComposer.pcss";

src/components/structures/RoomView.tsx

@@ -228,6 +228,7 @@ export interface IRoomState {
     threadId?: string;
     liveTimeline?: EventTimeline;
     narrow: boolean;
+    // List of undecryptable events currently visible on-screen
     visibleDecryptionFailures?: MatrixEvent[];
 }
 
@@ -2219,8 +2220,11 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     ) }
                 </AccessibleButton>
             );
-        } else if (this.state.visibleDecryptionFailures && this.state.visibleDecryptionFailures.length > 0) {
-            aux = <DecryptionFailureBar
+        }
+
+        let decryptionFailureBar: JSX.Element | undefined;
+        if (this.state.visibleDecryptionFailures && this.state.visibleDecryptionFailures.length > 0) {
+            decryptionFailureBar = <DecryptionFailureBar
                 failures={this.state.visibleDecryptionFailures}
                 room={this.state.room}
             />;
@@ -2246,6 +2250,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 resizeNotifier={this.props.resizeNotifier}
             >
                 { aux }
+                { decryptionFailureBar }
             </AuxPanel>
         );
 

src/components/structures/TimelinePanel.tsx

@@ -64,6 +64,9 @@ const READ_RECEIPT_INTERVAL_MS = 500;
 
 const READ_MARKER_DEBOUNCE_MS = 100;
 
+// How far off-screen a decryption failure can be for it to still count as "visible"
+const VISIBLE_DECRYPTION_FAILURE_MARGIN = 100;
+
 const debuglog = (...args: any[]) => {
     if (SettingsStore.getValue("debug_timeline_panel")) {
         logger.log.call(console, "TimelinePanel debuglog:", ...args);
@@ -1584,13 +1587,21 @@ class TimelinePanel extends React.Component<IProps, IState> {
             : null;
     }
 
+    /**
+     * Get a list of undecryptable events currently visible on-screen.
+     *
+     * @returns {MatrixEvent[] | null} A list of undecryptable events, or null if
+     *     the list of events could not be determined.
+     */
     public getVisibleDecryptionFailures(): MatrixEvent[] | null {
         const messagePanel = this.messagePanel.current;
         if (!messagePanel) return null;
 
         const messagePanelNode = ReactDOM.findDOMNode(messagePanel) as Element;
         if (!messagePanelNode) return null; // sometimes this happens for fresh rooms/post-sync
         const wrapperRect = messagePanelNode.getBoundingClientRect();
+        const screenTop = wrapperRect.top - VISIBLE_DECRYPTION_FAILURE_MARGIN;
+        const screenBottom = wrapperRect.bottom + VISIBLE_DECRYPTION_FAILURE_MARGIN;
 
         let enteredVisibleRange = false;
 
@@ -1602,7 +1613,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
             if (!node) continue;
 
             const boundingRect = node.getBoundingClientRect();
-            if (boundingRect.top <= wrapperRect.bottom && boundingRect.bottom >= wrapperRect.top) {
+            if (boundingRect.top <= screenBottom && boundingRect.bottom >= screenTop) {
                 enteredVisibleRange = true;
                 if (ev.isDecryptionFailure()) result.push(ev);
             } else if (enteredVisibleRange) {

src/components/views/messages/DecryptionFailureBody.tsx

@@ -19,6 +19,7 @@ import React from 'react';
 import { _t } from '../../../languageHandler';
 import { IBodyProps } from "./IBodyProps";
 
+// A placeholder element for messages that could not be decrypted
 export default class DecryptionFailureBody extends React.Component<Partial<IBodyProps>> {
     render() {
         return (

src/components/views/rooms/DecryptionFailureBar.tsx

@@ -41,21 +41,29 @@ const WAIT_PERIOD = 5000;
 export const DecryptionFailureBar: React.FC<IProps> = ({ failures, room }) => {
     const context = useContext(MatrixClientContext);
 
+    // Display a spinner for a few seconds before presenting an error message,
+    // in case keys are about to arrive
     const [waiting, setWaiting] = useState<boolean>(true);
     useEffect(() => {
         const timeout = setTimeout(() => setWaiting(false), WAIT_PERIOD);
         return () => clearTimeout(timeout);
     }, []);
 
+    // Is this device unverified?
     const [needsVerification, setNeedsVerification] = useState<boolean>(false);
+    // Does this user have verified devices other than this device?
     const [hasOtherVerifiedDevices, setHasOtherVerifiedDevices] = useState<boolean>(false);
+    // Does this user have key backups?
     const [hasKeyBackup, setHasKeyBackup] = useState<boolean>(false);
 
+    // Keep track of session IDs we've re-sent key requests for
     const [requestedSessions, setRequestedSessions] = useState<Set<string>>(new Set());
 
     useEffect(() => {
         if (needsVerification || !hasOtherVerifiedDevices) return;
 
+        // Aggregate session IDs of undecryptable messages, and resend key requests
+        // for any sessions we weren't already handling.
         const newRequestedSessions = new Set<string>();
         for (const event of failures) {
             const sessionId = event.getWireContent().session_id;
@@ -74,11 +82,12 @@ export const DecryptionFailureBar: React.FC<IProps> = ({ failures, room }) => {
         }
     }, [needsVerification, hasOtherVerifiedDevices, failures, room, requestedSessions, context]);
 
+    // Recheck which devices are verified and whether we have key backups
     const updateDeviceInfo = useCallback(async () => {
-        context.crypto.deviceList.invalidateUserDeviceList(context.getUserId());
+        context.crypto.deviceList.invalidateUserDeviceList(context.getUserId()!);
         await context.crypto.deviceList.refreshOutdatedDeviceLists();
 
-        const deviceId = context.getDeviceId();
+        const deviceId = context.getDeviceId()!;
         let verified = true; // if we can't get a clear answer, don't bug the user about verifying
         try {
             verified = context.checkIfOwnDeviceCrossSigned(deviceId);