Merge pull request #5032 from matrix-org/travis/perf/blur-bg

Don't hammer on the layout engine with avatar updates for the background

src/components/structures/LeftPanel.tsx

@@ -35,6 +35,8 @@ import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomLi
 import {Key} from "../../Keyboard";
 import IndicatorScrollbar from "../structures/IndicatorScrollbar";
 import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
+import { OwnProfileStore } from "../../stores/OwnProfileStore";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
 
 interface IProps {
     isMinimized: boolean;
@@ -59,6 +61,7 @@ const cssClasses = [
 export default class LeftPanel extends React.Component<IProps, IState> {
     private listContainerRef: React.RefObject<HTMLDivElement> = createRef();
     private tagPanelWatcherRef: string;
+    private bgImageWatcherRef: string;
     private focusedElement = null;
     private isDoingStickyHeaders = false;
 
@@ -73,6 +76,9 @@ 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);
+        this.bgImageWatcherRef = SettingsStore.watchSetting(
+            "RoomList.backgroundImage", null, this.onBackgroundImageUpdate);
         this.tagPanelWatcherRef = SettingsStore.watchSetting("TagPanel.enableTagPanel", null, () => {
             this.setState({showTagPanel: SettingsStore.getValue("TagPanel.enableTagPanel")});
         });
@@ -84,8 +90,10 @@ export default class LeftPanel extends React.Component<IProps, IState> {
 
     public componentWillUnmount() {
         SettingsStore.unwatchSetting(this.tagPanelWatcherRef);
+        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);
         this.props.resizeNotifier.off("middlePanelResizedNoisy", this.onResize);
     }
 
@@ -108,6 +116,20 @@ 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 = MatrixClientPeg.get().mxcUrlToHttp(settingBgMxc, avatarSize, avatarSize);
+        }
+        const avatarUrlProp = `url(${avatarUrl})`;
+        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;

src/components/structures/UserMenu.tsx

@@ -306,9 +306,6 @@ 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 = (

src/settings/Settings.js

@@ -166,6 +166,10 @@ export const SETTINGS = {
         displayName: _td("Show info about bridges in room settings"),
         default: false,
     },
+    "RoomList.backgroundImage": {
+        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+        default: null,
+    },
     "baseFontSize": {
         displayName: _td("Font size"),
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,