Move backdrop filter to a canvas based solution

package.json

@@ -60,6 +60,7 @@
     "cheerio": "^1.0.0-rc.9",
     "classnames": "^2.2.6",
     "commonmark": "^0.29.3",
+    "context-filter-polyfill": "^0.2.4",
     "counterpart": "^0.18.6",
     "diff-dom": "^4.2.2",
     "diff-match-patch": "^1.0.5",
@@ -185,7 +186,8 @@
       "\\$webapp/i18n/languages.json": "<rootDir>/__mocks__/languages.json",
       "decoderWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
       "decoderWorker\\.min\\.wasm": "<rootDir>/__mocks__/empty.js",
-      "waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js"
+      "waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
+      "context-filter-polyfill": "<rootDir>/__mocks__/empty.js"
     },
     "transformIgnorePatterns": [
       "/node_modules/(?!matrix-js-sdk).+$"

res/css/structures/_GroupFilterPanel.scss

@@ -16,8 +16,8 @@ limitations under the License.
 
 .mx_GroupFilterPanel {
     flex: 1;
-    background-color: $groupFilterPanel-bg-color;
     cursor: pointer;
+    position: relative;
 
     display: flex;
     flex-direction: column;

res/css/structures/_LeftPanel.scss

@@ -26,6 +26,7 @@ $roomListCollapsedWidth: 68px;
     // Create a row-based flexbox for the GroupFilterPanel and the room list
     display: flex;
     contain: content;
+    position: relative;
 
     .mx_LeftPanel_GroupFilterPanelContainer {
         flex-grow: 0;
@@ -43,7 +44,6 @@ $roomListCollapsedWidth: 68px;
     // Note: The 'room list' in this context is actually everything that isn't the tag
     // panel, such as the menu options, breadcrumbs, filtering, etc
     .mx_LeftPanel_roomListContainer {
-        background-color: $roomlist-bg-color;
         flex: 1 0 0;
         min-width: 0;
         // Create another flexbox (this time a column) for the room list components

res/css/structures/_MatrixChat.scss

@@ -35,6 +35,16 @@ limitations under the License.
     height: 100%;
 }
 
+.mx_BackdropPanel {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height: 100%;
+    z-index: 0;
+    pointer-events: none;
+}
+
 .mx_MatrixToolbar {
     order: 1;
 

res/css/structures/_SpacePanel.scss

@@ -27,6 +27,7 @@ $activeBorderColor: $secondary-fg-color;
     background-color: $groupFilterPanel-bg-color;
     padding: 0;
     margin: 0;
+    position: relative;
 
     // Create another flexbox so the Panel fills the container
     display: flex;

res/themes/light/css/_mods.scss

@@ -4,27 +4,6 @@
 // set the user avatar (if any) as a background so
 // it can be blurred by the tag panel and room list
 
-@supports (backdrop-filter: none) {
-    .mx_LeftPanel {
-        background-image: var(--avatar-url, unset);
-        background-repeat: no-repeat;
-        background-size: cover;
-        background-position: left top;
-    }
-
-    .mx_GroupFilterPanel {
-        backdrop-filter: blur($groupFilterPanel-background-blur-amount);
-    }
-
-    .mx_SpacePanel {
-        backdrop-filter: blur($groupFilterPanel-background-blur-amount);
-    }
-
-    .mx_LeftPanel .mx_LeftPanel_roomListContainer {
-        backdrop-filter: blur($roomlist-background-blur-amount);
-    }
-}
-
 .mx_RoomSublist_showNButton {
     background-color: transparent !important;
 }

src/components/structures/BackdropPanel.tsx

@@ -0,0 +1,92 @@
+/*
+Copyright 2021 New Vector 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, { createRef } from "react";
+import "context-filter-polyfill";
+
+interface IProps {
+    width?: number;
+    height?: number;
+    backgroundImage?: CanvasImageSource;
+    blur?: string;
+    opacity?: number;
+}
+
+
+export default class BackdropPanel extends React.PureComponent<IProps> {
+    private canvasRef = createRef<HTMLCanvasElement>();
+    private ctx: CanvasRenderingContext2D;
+
+    static defaultProps = {
+        blur: "60px",
+        opacity: .15,
+    }
+
+    public componentDidMount() {
+        this.ctx = this.canvasRef.current.getContext("2d");
+    }
+
+    public componentDidUpdate() {
+        if (this.props.backgroundImage) {
+            requestAnimationFrame(this.refreshBackdropImage);
+        }
+    }
+
+    private refreshBackdropImage = (): void => {
+        const { width, height, backgroundImage } = this.props;
+        this.canvasRef.current.width = width;
+        this.canvasRef.current.height = height;
+
+        const imageWidth = (backgroundImage as ImageBitmap).width
+            || (backgroundImage as HTMLImageElement).naturalWidth;
+        const imageHeight = (backgroundImage as ImageBitmap).height
+                || (backgroundImage as HTMLImageElement).naturalHeight;
+
+        const contentRatio = imageWidth / imageHeight;
+        const containerRatio = width / height;
+        let resultHeight;
+        let resultWidth;
+        if (contentRatio > containerRatio) {
+            resultHeight = height;
+            resultWidth = height * contentRatio;
+        } else {
+            resultWidth = width;
+            resultHeight = width / contentRatio;
+        }
+
+        const x = (width - resultWidth) / 2;
+        const y = (height - resultHeight) / 2;
+
+        this.ctx.filter = `blur(${this.props.blur})`;
+        this.ctx.drawImage(
+            backgroundImage,
+            x,
+            y,
+            resultWidth,
+            resultHeight,
+        );
+    }
+
+    public render() {
+        return <canvas
+            ref={this.canvasRef}
+            className="mx_BackdropPanel"
+            style={{
+                opacity: this.props.opacity,
+            }}
+        />;
+    }
+}

src/components/structures/GroupFilterPanel.js

@@ -29,7 +29,9 @@ import MatrixClientContext from "../../contexts/MatrixClientContext";
 import AutoHideScrollbar from "./AutoHideScrollbar";
 import SettingsStore from "../../settings/SettingsStore";
 import UserTagTile from "../views/elements/UserTagTile";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
+import BackdropPanel from "./BackdropPanel";
+import UIStore from "../../stores/UIStore";
 
 @replaceableComponent("structures.GroupFilterPanel")
 class GroupFilterPanel extends React.Component {
@@ -40,6 +42,8 @@ class GroupFilterPanel extends React.Component {
         selectedTags: [],
     };
 
+    ref = React.createRef()
+
     componentDidMount() {
         this.unmounted = false;
         this.context.on("Group.myMembership", this._onGroupMyMembership);
@@ -56,6 +60,7 @@ class GroupFilterPanel extends React.Component {
         });
         // This could be done by anything with a matrix client
         dis.dispatch(GroupActions.fetchJoinedGroups(this.context));
+        UIStore.instance.trackElementDimensions("GroupPanel", this.ref.current);
     }
 
     componentWillUnmount() {
@@ -65,6 +70,7 @@ class GroupFilterPanel extends React.Component {
         if (this._groupFilterOrderStoreToken) {
             this._groupFilterOrderStoreToken.remove();
         }
+        UIStore.instance.stopTrackingElementDimensions("GroupPanel");
     }
 
     _onGroupMyMembership = () => {
@@ -147,7 +153,14 @@ class GroupFilterPanel extends React.Component {
             );
         }
 
-        return <div className={classes} onClick={this.onClearFilterClick}>
+        const panelDimensions = UIStore.instance.getElementDimensions("GroupPanel");
+
+        return <div className={classes} onClick={this.onClearFilterClick} ref={this.ref}>
+            <BackdropPanel
+                backgroundImage={this.props.backgroundImage}
+                width={panelDimensions?.width}
+                height={panelDimensions?.height}
+            />
             <AutoHideScrollbar
                 className="mx_GroupFilterPanel_scroller"
                 onClick={this.onClick}

src/components/structures/LeftPanel.tsx

@@ -36,18 +36,18 @@ import SettingsStore from "../../settings/SettingsStore";
 import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore";
 import IndicatorScrollbar from "../structures/IndicatorScrollbar";
 import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
-import { OwnProfileStore } from "../../stores/OwnProfileStore";
 import RoomListNumResults from "../views/rooms/RoomListNumResults";
 import LeftPanelWidget from "./LeftPanelWidget";
 import {replaceableComponent} from "../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../customisations/Media";
 import SpaceStore, {UPDATE_SELECTED_SPACE} from "../../stores/SpaceStore";
 import { getKeyBindingsManager, RoomListAction } from "../../KeyBindingsManager";
 import UIStore from "../../stores/UIStore";
+import BackdropPanel from "./BackdropPanel";
 
 interface IProps {
     isMinimized: boolean;
     resizeNotifier: ResizeNotifier;
+    backgroundImage?: CanvasImageSource;
 }
 
 interface IState {
@@ -85,16 +85,14 @@ export default class LeftPanel extends React.Component<IProps, IState> {
 
         BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate);
         RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
-        OwnProfileStore.instance.on(UPDATE_EVENT, this.onBackgroundImageUpdate);
         SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
-        this.bgImageWatcherRef = SettingsStore.watchSetting(
-            "RoomList.backgroundImage", null, this.onBackgroundImageUpdate);
         this.groupFilterPanelWatcherRef = SettingsStore.watchSetting("TagPanel.enableTagPanel", null, () => {
             this.setState({showGroupFilterPanel: SettingsStore.getValue("TagPanel.enableTagPanel")});
         });
     }
 
     public componentDidMount() {
+        UIStore.instance.trackElementDimensions("LeftPanel", this.ref.current);
         UIStore.instance.trackElementDimensions("ListContainer", this.listContainerRef.current);
         UIStore.instance.on("ListContainer", this.refreshStickyHeaders);
         // Using the passive option to not block the main thread
@@ -104,10 +102,8 @@ export default class LeftPanel extends React.Component<IProps, IState> {
 
     public componentWillUnmount() {
         SettingsStore.unwatchSetting(this.groupFilterPanelWatcherRef);
-        SettingsStore.unwatchSetting(this.bgImageWatcherRef);
         BreadcrumbsStore.instance.off(UPDATE_EVENT, this.onBreadcrumbsUpdate);
         RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
-        OwnProfileStore.instance.off(UPDATE_EVENT, this.onBackgroundImageUpdate);
         SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
         UIStore.instance.stopTrackingElementDimensions("ListContainer");
         UIStore.instance.removeListener("ListContainer", this.refreshStickyHeaders);
@@ -144,23 +140,6 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         }
     };
 
-    private onBackgroundImageUpdate = () => {
-        // Note: we do this in the LeftPanel as it uses this variable most prominently.
-        const avatarSize = 32; // arbitrary
-        let avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize);
-        const settingBgMxc = SettingsStore.getValue("RoomList.backgroundImage");
-        if (settingBgMxc) {
-            avatarUrl = mediaFromMxc(settingBgMxc).getSquareThumbnailHttp(avatarSize);
-        }
-
-        const avatarUrlProp = `url(${avatarUrl})`;
-        if (!avatarUrl) {
-            document.body.style.removeProperty("--avatar-url");
-        } else if (document.body.style.getPropertyValue("--avatar-url") !== avatarUrlProp) {
-            document.body.style.setProperty("--avatar-url", avatarUrlProp);
-        }
-    };
-
     private handleStickyHeaders(list: HTMLDivElement) {
         if (this.isDoingStickyHeaders) return;
         this.isDoingStickyHeaders = true;
@@ -426,7 +405,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         if (this.state.showGroupFilterPanel) {
             leftLeftPanel = (
                 <div className="mx_LeftPanel_GroupFilterPanelContainer">
-                    <GroupFilterPanel />
+                    <GroupFilterPanel backgroundImage={this.props.backgroundImage} />
                     {SettingsStore.getValue("feature_custom_tags") ? <CustomRoomTagPanel /> : null}
                 </div>
             );
@@ -453,8 +432,15 @@ export default class LeftPanel extends React.Component<IProps, IState> {
             "mx_AutoHideScrollbar",
         );
 
+        const panelDimensions = UIStore.instance.getElementDimensions("LeftPanel");
+
         return (
             <div className={containerClasses} ref={this.ref}>
+                <BackdropPanel
+                    backgroundImage={this.props.backgroundImage}
+                    width={panelDimensions?.width}
+                    height={panelDimensions?.height}
+                />
                 {leftLeftPanel}
                 <aside className="mx_LeftPanel_roomListContainer">
                     {this.renderHeader()}