Incorrect icons shown for E2EE messages

[richvdh]

#31424 changed the icons that are shown next to encrypted messages with problems:

• the grey shield (currently used only for "authenticity cannot be guaranteed" -- ie, restore from backup) was changed to a grey padlock (Edit: now updated to an 🛈 symbol, in Amend e2e normal icon from lock-solid to info #31555).
• the "!" in a red shield (serious error, eg verification violation, or not encrypted) was changed to a "!" in a solid red circle
• the key in a solid grey circle (used for UTD errors) was changed to a "!" in a solid grey circle

Outside the timeline, it's harder to know exactly what is used where, but there have been similar changes to E2EE icons in other parts of the application.

[ara4n]

(this is a concrete rather than a cosmetic problem, because "grey shield" doesn't really come with preconceptions about security - it's informational. whereas "grey padlock" definitely feels like "this message is more secure than messages which don't have a grey padlock")

[t3chguy]

This was done by instruction from design in https://docs.google.com/spreadsheets/d/1nYbTWwG3TPnh70LX5looxpCiWuLhW0TYEZFIxVjYALY/edit?gid=2146012360#gid=2146012360 - I believe @americanrefugee decided the fate of the e2e icons

[richvdh]

hrm, thanks. I think we might need to revisit that. Will discuss it with the crypto team.

[richvdh]

(also, at the very least, the comments at

element-web/src/components/views/rooms/EventTile.tsx

Lines 1520 to 1529 in 9d9782f

	enum E2ePadlockIcon {
	/** grey shield */
	Normal = "normal",
	/** red shield with (!) */
	Warning = "warning",
	/** key in grey circle */
	DecryptionFailure = "decryption_failure",
	}

now need updating)

[t3chguy]

I'm not sure any comments like that can survive given updating Compound Design Tokens could make them incorrect and it is unlikely a release person would know to check comments like this for a dep update

[richvdh]

I'm not sure any comments like that can survive given updating Compound Design Tokens could make them incorrect and it is unlikely a release person would know to check comments like this for a dep update

I think ultimately we solve that problem by switching to Compound components like ErrorIcon instead of mask-image properties on CSS pseudo-elements, so that it is easier to see from the code what you're going to end up with.

[t3chguy]

mask images are going away as they are not accessible, that is what this whole unit of work is about. They become invisible under contrast control mode. The PR which led to this issue is a precursor, as our legacy SVGs are not tintable so we swap them out to compound SVGs first. We have ~500 usages of CSS masks to cover.

[mxandreas]

Having no understanding of the "mechanics" of how to get to the desired results, commenting on what the desired results are, to make sense and consistent with EX.

the grey shield (currently used only for "authenticity cannot be guaranteed" -- ie, restore from backup) was changed to a grey padlock

It should be the grey (i) icon.

the "i" in a red shield (serious error, eg verification violation, or not encrypted) was changed to an "i" in a red circle

This looks fine, as we're already using the red (i) icon for such cases.

the key in a grey circle (used for UTD errors) was changed to an "i" in a grey circle

Here, it may depend. For the case of "Waiting for this message." we use the 🕐 icon. But what should we use for a "permanent" UTD?

[mxandreas]

Also, I consider this:

the grey shield (currently used only for "authenticity cannot be guaranteed" -- ie, restore from backup) was changed to a grey padlock

a release blocker. Either we revert the whole thing or if we do want to release it quickly because of something, then use the (i) icon instead.

[langleyd]

Spun out an issue specific to the grey padlock -> "i" icon(The release blocker) here.