Member avatars without canvas (#9990)

* Strict typechecking fixes for Base/Member/Avatar

Update the core avatar files to pass `--strict --noImplicitAny` typechecks.

Signed-off-by: Clark Fischer <clark.fischer@gmail.com>

* Add tests for Base/Member/Avatar

More thoroughly test the core avatar files. Not necessarily the most thorough,
but an improvement.

Signed-off-by: Clark Fischer <clark.fischer@gmail.com>

* Extract TextAvatar from BaseAvatar

Extracted the fallback/textual avatar into its own component.

Signed-off-by: Clark Fischer <clark.fischer@gmail.com>

* Use standard HTML for non-image avatars

Firefox users with `resistFingerprinting` enabled were seeing random noise
for rooms and users without avatars. There's no real reason to use data
URLs to present flat colors.

This converts non-image avatars to inline blocks with background colors.

See https://github.com/vector-im/element-web/issues/23936

Signed-off-by: Clark Fischer <clark.fischer@gmail.com>

* Have pills use solid backgrounds rather than colored images

Similar to room and member avatars, pills now use colored pseudo-elements
rather than background images.

Signed-off-by: Clark Fischer <clark.fischer@gmail.com>

---------

Signed-off-by: Clark Fischer <clark.fischer@gmail.com>
Co-authored-by: Andy Balaam <andy.balaam@matrix.org>

test/Avatar-test.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 The Matrix.org Foundation C.I.C.
+Copyright 2022 - 2023 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.
@@ -15,33 +15,106 @@ limitations under the License.
 */
 
 import { mocked } from "jest-mock";
-import { Room, RoomMember, RoomType } from "matrix-js-sdk/src/matrix";
+import { Room, RoomMember, RoomType, User } from "matrix-js-sdk/src/matrix";
 
-import { avatarUrlForRoom } from "../src/Avatar";
-import { Media, mediaFromMxc } from "../src/customisations/Media";
+import {
+    avatarUrlForMember,
+    avatarUrlForRoom,
+    avatarUrlForUser,
+    defaultAvatarUrlForString,
+    getColorForString,
+    getInitialLetter,
+} from "../src/Avatar";
+import { mediaFromMxc } from "../src/customisations/Media";
 import DMRoomMap from "../src/utils/DMRoomMap";
-
-jest.mock("../src/customisations/Media", () => ({
-    mediaFromMxc: jest.fn(),
-}));
+import { filterConsole, stubClient } from "./test-utils";
 
 const roomId = "!room:example.com";
 const avatarUrl1 = "https://example.com/avatar1";
 const avatarUrl2 = "https://example.com/avatar2";
 
+describe("avatarUrlForMember", () => {
+    let member: RoomMember;
+
+    beforeEach(() => {
+        stubClient();
+        member = new RoomMember(roomId, "@user:example.com");
+    });
+
+    it("returns the member's url", () => {
+        const mxc = "mxc://example.com/a/b/c/d/avatar.gif";
+        jest.spyOn(member, "getMxcAvatarUrl").mockReturnValue(mxc);
+
+        expect(avatarUrlForMember(member, 32, 32, "crop")).toBe(
+            mediaFromMxc(mxc).getThumbnailOfSourceHttp(32, 32, "crop"),
+        );
+    });
+
+    it("returns a default if the member has no avatar", () => {
+        jest.spyOn(member, "getMxcAvatarUrl").mockReturnValue(undefined);
+
+        expect(avatarUrlForMember(member, 32, 32, "crop")).toMatch(/^data:/);
+    });
+});
+
+describe("avatarUrlForUser", () => {
+    let user: User;
+
+    beforeEach(() => {
+        stubClient();
+        user = new User("@user:example.com");
+    });
+
+    it("should return the user's avatar", () => {
+        const mxc = "mxc://example.com/a/b/c/d/avatar.gif";
+        user.avatarUrl = mxc;
+
+        expect(avatarUrlForUser(user, 64, 64, "scale")).toBe(
+            mediaFromMxc(mxc).getThumbnailOfSourceHttp(64, 64, "scale"),
+        );
+    });
+
+    it("should not provide a fallback", () => {
+        expect(avatarUrlForUser(user, 64, 64, "scale")).toBeNull();
+    });
+});
+
+describe("defaultAvatarUrlForString", () => {
+    it.each(["a", "abc", "abcde", "@".repeat(150)])("should return a value for %s", (s) => {
+        expect(defaultAvatarUrlForString(s)).not.toBe("");
+    });
+});
+
+describe("getColorForString", () => {
+    it.each(["a", "abc", "abcde", "@".repeat(150)])("should return a value for %s", (s) => {
+        expect(getColorForString(s)).toMatch(/^#\w+$/);
+    });
+
+    it("should return different values for different strings", () => {
+        expect(getColorForString("a")).not.toBe(getColorForString("b"));
+    });
+});
+
+describe("getInitialLetter", () => {
+    filterConsole("argument to `getInitialLetter` not supplied");
+
+    it.each(["a", "abc", "abcde", "@".repeat(150)])("should return a value for %s", (s) => {
+        expect(getInitialLetter(s)).not.toBe("");
+    });
+
+    it("should return undefined for empty strings", () => {
+        expect(getInitialLetter("")).toBeUndefined();
+    });
+});
+
 describe("avatarUrlForRoom", () => {
-    let getThumbnailOfSourceHttp: jest.Mock;
     let room: Room;
     let roomMember: RoomMember;
     let dmRoomMap: DMRoomMap;
 
     beforeEach(() => {
-        getThumbnailOfSourceHttp = jest.fn();
-        mocked(mediaFromMxc).mockImplementation((): Media => {
-            return {
-                getThumbnailOfSourceHttp,
-            } as unknown as Media;
-        });
+        stubClient();
+
         room = {
             roomId,
             getMxcAvatarUrl: jest.fn(),
@@ -59,14 +132,14 @@ describe("avatarUrlForRoom", () => {
     });
 
     it("should return null for a null room", () => {
-        expect(avatarUrlForRoom(null, 128, 128)).toBeNull();
+        expect(avatarUrlForRoom(undefined, 128, 128)).toBeNull();
     });
 
     it("should return the HTTP source if the room provides a MXC url", () => {
         mocked(room.getMxcAvatarUrl).mockReturnValue(avatarUrl1);
-        getThumbnailOfSourceHttp.mockReturnValue(avatarUrl2);
-        expect(avatarUrlForRoom(room, 128, 256, "crop")).toEqual(avatarUrl2);
-        expect(getThumbnailOfSourceHttp).toHaveBeenCalledWith(128, 256, "crop");
+        expect(avatarUrlForRoom(room, 128, 256, "crop")).toBe(
+            mediaFromMxc(avatarUrl1).getThumbnailOfSourceHttp(128, 256, "crop"),
+        );
     });
 
     it("should return null for a space room", () => {
@@ -83,7 +156,7 @@ describe("avatarUrlForRoom", () => {
 
     it("should return null if there is no other member in the room", () => {
         mocked(dmRoomMap).getUserIdForRoomId.mockReturnValue("@user:example.com");
-        mocked(room.getAvatarFallbackMember).mockReturnValue(null);
+        mocked(room.getAvatarFallbackMember).mockReturnValue(undefined);
         expect(avatarUrlForRoom(room, 128, 128)).toBeNull();
     });
 
@@ -97,8 +170,8 @@ describe("avatarUrlForRoom", () => {
         mocked(dmRoomMap).getUserIdForRoomId.mockReturnValue("@user:example.com");
         mocked(room.getAvatarFallbackMember).mockReturnValue(roomMember);
         mocked(roomMember.getMxcAvatarUrl).mockReturnValue(avatarUrl2);
-        getThumbnailOfSourceHttp.mockReturnValue(avatarUrl2);
-        expect(avatarUrlForRoom(room, 128, 256, "crop")).toEqual(avatarUrl2);
-        expect(getThumbnailOfSourceHttp).toHaveBeenCalledWith(128, 256, "crop");
+        expect(avatarUrlForRoom(room, 128, 256, "crop")).toEqual(
+            mediaFromMxc(avatarUrl2).getThumbnailOfSourceHttp(128, 256, "crop"),
+        );
     });
 });