Member avatars without canvas

[clarkf]

Partially addresses element-hq/element-web#23936. Does not address blurhashes/thumbnails or the favicon.

This changes <BaseAvatar /> to use a span with a background-color rather than an <img /> with a data: URL.

This means that user, member and room avatars no longer use canvas-generated colored backgrounds. Firefox users with resistFingerprinting enabled will no longer see noise as the background for users and rooms without actual avatars:

Note that this does change the actual DOM structure of textual avatars (img -> span), which means a lot of snapshots changed, bloating this changeset substantially.

Checklist

• Tests written for new code (and old code if feasible)
• Linter and other CI checks pass
• Sign-off given on the changes (see CONTRIBUTING.md)

---

Here's what your changelog entry will look like:

🐛 Bug Fixes

• Member avatars without canvas (#9990). Contributed by @clarkf.

[andybalaam]

This is brilliant, thank you. Is the screenshot above the "before" picture? If so, please could you include an "after" picture?

I added the X-Needs-Percy label to run screenshot tests. Before merging I'd like to confirm that we have some screenshot tests that cover this area.

[andybalaam]

My own before and after with Firefox's "resistFingerprinting" config option enabled:

Before:

After:

[andybalaam]

This appears to slightly break the layout of the room header:

After:

Before:

[andybalaam]

This change significantly improves the code in several places, thank you!

It seems much more sensible to me to use a span instead of an image here, so all good from my point of view. (Although I guess there may be an historical reason that I am missing?)

A couple of questions from me, but all good.

The remaining thing is to fix the layout of the room header, and check any other places the avatar can appear for similar problems.

We can review the screenshot tests to check they cover things, but I'm not confident they cover everything, so we should check carefully manually.

[clarkf]

Good catch on the room header! I'll go through and double check all the instances I can find.

[clarkf]

New editor pills:
Before:

After:

[clarkf]

Fixed the instance in <NewRoomIntro />:

I'm no CSS wiz, so I'm not entirely certain why the elements are not growing. Seems like both the outer and the inner <span> need to be display: block and have an explicit width/height. ¯\_(ツ)_/¯

[andybalaam]

Looks good, thank you!

[andybalaam]

@clarkf we hit a whole load of problems caused by this change! Apologies: I should have realised at review time how far-reaching this change is - BaseAvatar is mentioned in 70 files within our source repo!

I like the change, but to be able to merge it we would need a more concerted effort:

• You'd need to look at the related bugs and make sure the change does not cause them to happen again: Border around selected spaces icon not uniform on develop element-hq/element-web#24382 , Room list cuts off the last room element-hq/element-web#24370 , Read receipts have regressed visually element-hq/element-web#24375 , Space panel avatar colour and alignment regressions element-hq/element-web#24369 , Avatar overlays own message in threads panel element-hq/element-web#24374 , Typing indicator looks broken element-hq/element-web#24401 , Membership event summaries look broken element-hq/element-web#24402 , Incorrect changes to copyright headers element-hq/element-web#24409
• We'd need to survey the product and code and get a proper idea of which screens show avatars, and confirm with screenshots that they did not change
• For everywhere it's possible, we'd need to add screenshot tests that prove the change doesn't cause new bugs

This situation was particularly unlucky because at least some of the bugs were caused by a bug in Firefox's rendering, so we'd also need to make sure we tested across the supported browsers.

In summary, this is a much more ambitious change than I realised, and we'd need the requisite level of effort to be able to merge it! Thanks again for your work on this, and if you want to continue do ask for help and we will try to support you.