Merge branch 'develop' into dbkr/stateafter

playwright/plugins/homeserver/synapse/index.ts

@@ -20,7 +20,7 @@ import { randB64Bytes } from "../../utils/rand";
 // Docker tag to use for synapse docker image.
 // We target a specific digest as every now and then a Synapse update will break our CI.
 // This digest is updated by the playwright-image-updates.yaml workflow periodically.
-const DOCKER_TAG = "develop@sha256:6c33604ee62f009f3b34454a3c3e85f7e3ff5de63e45011fcd79e0ddc54a4e51";
+const DOCKER_TAG = "develop@sha256:d1a89bd0fcdc2bf2900dac30696d53bb9e44da1231faacd5c2d3b9f539ce9586";
 
 async function cfgDirFromTemplate(opts: StartHomeserverOpts): Promise<Omit<HomeserverConfig, "dockerUrl">> {
     const templateDir = path.join(__dirname, "templates", opts.template);

playwright/plugins/homeserver/synapse/templates/default/homeserver.yaml

@@ -102,3 +102,5 @@ experimental_features:
     # messages > non-joined historical messages.
     # Can be removed after Synapse enables it by default
     msc4115_membership_on_events: true
+
+enable_authenticated_media: true

res/css/structures/_RoomStatusBar.pcss

@@ -125,7 +125,7 @@ Please see LICENSE files in the repository root for full details.
                 padding-left: 34px; /* 28px from above, but +6px to account for the wider icon */
 
                 &::before {
-                    mask-image: url("$(res)/img/element-icons/retry.svg");
+                    mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg");
                 }
             }
         }

res/css/structures/_SpaceHierarchy.pcss

@@ -77,7 +77,7 @@ Please see LICENSE files in the repository root for full details.
             height: 16px;
             width: 16px;
             left: 0;
-            background-image: url("$(res)/img/element-icons/warning-badge.svg");
+            background-image: url("@vector-im/compound-design-tokens/icons/error.svg");
             background-size: cover;
             background-repeat: no-repeat;
         }

res/css/views/context_menus/_MessageContextMenu.pcss

@@ -29,7 +29,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconReport::before {
-        mask-image: url("$(res)/img/element-icons/warning-badge.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/error.svg");
     }
 
     .mx_MessageContextMenu_iconLink::before {
@@ -61,7 +61,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconResend::before {
-        mask-image: url("$(res)/img/element-icons/retry.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg");
     }
 
     .mx_MessageContextMenu_iconSource::before {

res/css/views/dialogs/_AddExistingToSpaceDialog.pcss

@@ -125,7 +125,7 @@ Please see LICENSE files in the repository root for full details.
                 mask-repeat: no-repeat;
                 mask-position: center;
                 mask-size: contain;
-                mask-image: url("$(res)/img/element-icons/retry.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg");
                 width: 18px;
                 height: 18px;
                 left: 0;

res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss

@@ -21,7 +21,7 @@ Please see LICENSE files in the repository root for full details.
 
         &.mx_AccessSecretStorageDialog_resetBadge::before {
             /* The image isn't capable of masking, so we use a background instead. */
-            background-image: url("$(res)/img/element-icons/warning-badge.svg");
+            background-image: url("@vector-im/compound-design-tokens/icons/error.svg");
             background-size: 24px;
             background-color: transparent;
         }
@@ -120,7 +120,7 @@ Please see LICENSE files in the repository root for full details.
                         width: 16px;
                         left: 0;
                         top: 2px; /* alignment */
-                        background-image: url("$(res)/img/element-icons/warning-badge.svg");
+                        background-image: url("@vector-im/compound-design-tokens/icons/error.svg");
                         background-size: contain;
                     }
 

res/css/views/elements/_InfoTooltip.pcss

@@ -29,5 +29,5 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_InfoTooltip_icon_warning::before {
-    mask-image: url("$(res)/img/element-icons/warning.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/error.svg");
 }

res/css/views/messages/_MessageActionBar.pcss

@@ -108,6 +108,10 @@ Please see LICENSE files in the repository root for full details.
             color: var(--cpd-color-icon-primary);
         }
 
+        &.mx_MessageActionBar_retryButton {
+            --MessageActionBar-icon-size: 16px;
+        }
+
         &.mx_MessageActionBar_downloadButton {
             --MessageActionBar-icon-size: 14px;
 

res/css/views/rooms/_EntityTile.pcss

@@ -31,8 +31,9 @@ Please see LICENSE files in the repository root for full details.
     position: absolute;
     top: calc(50% - 8px); /* center */
     right: -8px;
-    mask: url("$(res)/img/member_chevron.png");
+    mask: url("@vector-im/compound-design-tokens/icons/chevron-right.svg");
     mask-repeat: no-repeat;
+    mask-position: center;
     width: 16px;
     height: 16px;
     background-color: $header-panel-text-primary-color;

res/css/views/rooms/_ThreadSummary.pcss

@@ -53,11 +53,11 @@ Please see LICENSE files in the repository root for full details.
             content: "";
             position: absolute;
             top: 50%;
-            right: $spacing-12;
+            right: var(--cpd-space-1x);
             transform: translateY(-50%);
-            width: 12px;
-            height: 12px;
-            mask-image: url("$(res)/img/compound/chevron-right-12px.svg");
+            width: 24px;
+            height: 24px;
+            mask-image: url("@vector-im/compound-design-tokens/icons/chevron-right.svg");
             mask-position: center;
             mask-size: contain;
             mask-repeat: no-repeat;

src/components/structures/auth/forgot-password/CheckEmail.tsx

@@ -8,10 +8,10 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { ReactNode } from "react";
 import { Tooltip } from "@vector-im/compound-web";
+import { RestartIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import AccessibleButton from "../../../views/elements/AccessibleButton";
 import { Icon as EMailPromptIcon } from "../../../../../res/img/element-icons/email-prompt.svg";
-import { Icon as RetryIcon } from "../../../../../res/img/compound/retry-16px.svg";
 import { _t } from "../../../../languageHandler";
 import { useTimeoutToggle } from "../../../../hooks/useTimeoutToggle";
 import { ErrorMessage } from "../../ErrorMessage";
@@ -60,7 +60,7 @@ export const CheckEmail: React.FC<CheckEmailProps> = ({
                 <span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_resend_prompt")}</span>
                 <Tooltip description={_t("auth|check_email_resend_tooltip")} placement="top" open={tooltipVisible}>
                     <AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}>
-                        <RetryIcon className="mx_Icon mx_Icon_16" />
+                        <RestartIcon className="mx_Icon mx_Icon_16" />
                         {_t("action|resend")}
                     </AccessibleButton>
                 </Tooltip>

src/components/structures/auth/forgot-password/VerifyEmailModal.tsx

@@ -8,10 +8,10 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { ReactNode } from "react";
 import { Tooltip } from "@vector-im/compound-web";
+import { RestartIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../../languageHandler";
 import AccessibleButton from "../../../views/elements/AccessibleButton";
-import { Icon as RetryIcon } from "../../../../../res/img/compound/retry-16px.svg";
 import { Icon as EmailPromptIcon } from "../../../../../res/img/element-icons/email-prompt.svg";
 import { useTimeoutToggle } from "../../../../hooks/useTimeoutToggle";
 import { ErrorMessage } from "../../ErrorMessage";
@@ -59,7 +59,7 @@ export const VerifyEmailModal: React.FC<Props> = ({
                 <span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_resend_prompt")}</span>
                 <Tooltip description={_t("auth|check_email_resend_tooltip")} placement="top" open={tooltipVisible}>
                     <AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}>
-                        <RetryIcon className="mx_Icon mx_Icon_16" />
+                        <RestartIcon className="mx_Icon mx_Icon_16" />
                         {_t("action|resend")}
                     </AccessibleButton>
                 </Tooltip>

src/components/views/dialogs/AddExistingToSpaceDialog.tsx

@@ -12,6 +12,7 @@ import { Room, EventType } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { sleep } from "matrix-js-sdk/src/utils";
 import { logger } from "matrix-js-sdk/src/logger";
+import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t, _td, TranslationKey } from "../../../languageHandler";
 import BaseDialog from "./BaseDialog";
@@ -34,7 +35,6 @@ import LazyRenderList from "../elements/LazyRenderList";
 import { useSettingValue } from "../../../hooks/useSettings";
 import { filterBoolean } from "../../../utils/arrays";
 import { NonEmptyArray } from "../../../@types/common";
-import WarningBadgeSvg from "../../../../res/img/element-icons/warning-badge.svg";
 
 // These values match CSS
 const ROW_HEIGHT = 32 + 12;
@@ -229,7 +229,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
     if (error) {
         footer = (
             <>
-                <img src={WarningBadgeSvg} height="24" width="24" alt="" />
+                <ErrorIcon height="24px" width="24px" />
 
                 <span className="mx_AddExistingToSpaceDialog_error">
                     <div className="mx_AddExistingToSpaceDialog_errorHeading">

src/components/views/dialogs/ModalWidgetDialog.tsx

@@ -22,6 +22,7 @@ import {
     WidgetApiFromWidgetAction,
     WidgetKind,
 } from "matrix-widget-api";
+import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import BaseDialog from "./BaseDialog";
 import { _t, getUserLanguage } from "../../../languageHandler";
@@ -33,7 +34,6 @@ import { arrayFastClone } from "../../../utils/arrays";
 import { ElementWidget } from "../../../stores/widgets/StopGapWidget";
 import { ELEMENT_CLIENT_ID } from "../../../identifiers";
 import SettingsStore from "../../../settings/SettingsStore";
-import WarningBadgeSvg from "../../../../res/img/element-icons/warning-badge.svg";
 
 interface IProps {
     widgetDefinition: IModalWidgetOpenRequestData;
@@ -186,7 +186,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
                 onFinished={this.props.onFinished}
             >
                 <div className="mx_ModalWidgetDialog_warning">
-                    <img src={WarningBadgeSvg} height="16" width="16" alt="" />
+                    <ErrorIcon width="16px" height="16px" />
                     {_t("widget|modal_data_warning", {
                         widgetDomain: parsed.hostname,
                     })}

src/components/views/elements/ImageView.tsx

@@ -8,9 +8,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef, CSSProperties } from "react";
+import React, { createRef, CSSProperties, useRef, useState } from "react";
 import FocusLock from "react-focus-lock";
-import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { MatrixEvent, parseErrorResponse } from "matrix-js-sdk/src/matrix";
 
 import { _t } from "../../../languageHandler";
 import MemberAvatar from "../avatars/MemberAvatar";
@@ -30,6 +30,9 @@ import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 import { presentableTextForFile } from "../../../utils/FileUtils";
 import AccessibleButton from "./AccessibleButton";
+import Modal from "../../../Modal";
+import ErrorDialog from "../dialogs/ErrorDialog";
+import { FileDownloader } from "../../../utils/FileDownloader";
 
 // Max scale to keep gaps around the image
 const MAX_SCALE = 0.95;
@@ -309,15 +312,6 @@ export default class ImageView extends React.Component<IProps, IState> {
         this.setZoomAndRotation(cur + 90);
     };
 
-    private onDownloadClick = (): void => {
-        const a = document.createElement("a");
-        a.href = this.props.src;
-        if (this.props.name) a.download = this.props.name;
-        a.target = "_blank";
-        a.rel = "noreferrer noopener";
-        a.click();
-    };
-
     private onOpenContextMenu = (): void => {
         this.setState({
             contextMenuDisplayed: true,
@@ -555,11 +549,7 @@ export default class ImageView extends React.Component<IProps, IState> {
                             title={_t("lightbox|rotate_right")}
                             onClick={this.onRotateClockwiseClick}
                         />
-                        <AccessibleButton
-                            className="mx_ImageView_button mx_ImageView_button_download"
-                            title={_t("action|download")}
-                            onClick={this.onDownloadClick}
-                        />
+                        <DownloadButton url={this.props.src} fileName={this.props.name} />
                         {contextMenuButton}
                         <AccessibleButton
                             className="mx_ImageView_button mx_ImageView_button_close"
@@ -591,3 +581,61 @@ export default class ImageView extends React.Component<IProps, IState> {
         );
     }
 }
+
+function DownloadButton({ url, fileName }: { url: string; fileName?: string }): JSX.Element {
+    const downloader = useRef(new FileDownloader()).current;
+    const [loading, setLoading] = useState(false);
+    const blobRef = useRef<Blob>();
+
+    function showError(e: unknown): void {
+        Modal.createDialog(ErrorDialog, {
+            title: _t("timeline|download_failed"),
+            description: (
+                <>
+                    <div>{_t("timeline|download_failed_description")}</div>
+                    <div>{e instanceof Error ? e.toString() : ""}</div>
+                </>
+            ),
+        });
+        setLoading(false);
+    }
+
+    const onDownloadClick = async (): Promise<void> => {
+        try {
+            if (loading) return;
+            setLoading(true);
+
+            if (blobRef.current) {
+                // Cheat and trigger a download, again.
+                return downloadBlob(blobRef.current);
+            }
+
+            const res = await fetch(url);
+            if (!res.ok) {
+                throw parseErrorResponse(res, await res.text());
+            }
+            const blob = await res.blob();
+            blobRef.current = blob;
+            await downloadBlob(blob);
+        } catch (e) {
+            showError(e);
+        }
+    };
+
+    async function downloadBlob(blob: Blob): Promise<void> {
+        await downloader.download({
+            blob,
+            name: fileName ?? _t("common|image"),
+        });
+        setLoading(false);
+    }
+
+    return (
+        <AccessibleButton
+            className="mx_ImageView_button mx_ImageView_button_download"
+            title={loading ? _t("timeline|download_action_downloading") : _t("action|download")}
+            onClick={onDownloadClick}
+            disabled={loading}
+        />
+    );
+}