1725164 - Drag-over text unreadable when picture is dragged over compose window with content (Insert inline | Add as attachment)

Status: RESOLVED FIXED

(Thunderbird :: Message Compose Window, defect)

Description

[IT Support]

Attachment: overlay-unreadable.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36 Edg/92.0.902.67

Steps to reproduce:

Drag a picture over a compose window to attach. An overlay shows up with "Insert inline" and "Add as attachment". Depending on where you drag it, one part of the overlay is lit up, the other one is illegible if the compose window already has content.

Actual results:

UI unusable.

Expected results:

UI should be usable.

This is a real use case reported by one of our users.

Comment 1

[Alessandro Castellani [:aleca]]

Thanks for the report.
From the screenshot the font size and weight of the overlay text looks different from what it should be, but nonetheless the contrast should be improved to make that target area readable.
I'll take care of this.

Comment 2

[IT Support]

From the screenshot the font size and weight of the overlay text looks different from what it should be, ...

How so? This on Windows, we disabled userChrome.css and it still looks the same. Can you try on Windows or attach a screenshot from your platform.

Comment 3

[Alessandro Castellani [:aleca]]

Attachment: Bug 1725164 - Improve visibility and color contrast of attachment overlay. r=Paenglab

Comment 4

[Alessandro Castellani [:aleca]]

Attachment: attachment-overlay.gif

This is how it looks by default.

Comment 5

[Alessandro Castellani [:aleca]]

Attachment: attachment-overlay-new.gif

And this is with the fixes in the patch.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/440935d92c1c
Improve visibility and color contrast of attachment overlay. r=Paenglab

Comment 7

[Alessandro Castellani [:aleca]]

Comment on attachment 9235835 [details]
Bug 1725164 - Improve visibility and color contrast of attachment overlay. r=Paenglab

[Approval Request Comment]
Regression caused by (bug #): -
User impact if declined: Low contrast and readability of drop targets when dragging an image above the compose window.
Testing completed (on c-c, etc.): on c-c
Risk to taking this patch (and alternatives if risky): low

Comment 8

[IT Support]

Thanks for fixing this quickly. However, we think the solution begs for some improvement still.

In the first implementation, in light mode, you had a dark overlay, where a drop target border and a drop target text would light up. The only issue was that the non-lit up text wasn't readable against the content of the compose window.

Now you have a dark overlay, and then you light up the entire drop target area in a way that is still transparent but not transparent enough to see anything through it. In dark mode it's even worse, the dark becomes almost solid black.

We find this quite, well, surprising to the user. Dimming down or lighting up an entire area always comes as a surprise, now you have two surprises which should be avoided.

The idea of underlying the dark drop target text with a small white background is good, but when hovered, only that text and the small background and the drop target border should change, not the entire drop target.

Comment 9

[Alessandro Castellani [:aleca]]

Since we can't rely anymore on the hover effect of the drop area, with the text going from light grey to bright white, we need a better highlight to make the hovered dropping area more obvious.
The updated style variation leave no confusion on what is the outcome and which area is currently hovered.

We're obviously open to suggestions and proposals, so if you have a UI enhancement suggestion, feel free to open a follow up bug and share some mock-ups to implement a better solution.

Comment 10

[IT Support]

Attachment: 1725164.patch

Our suggestion is to revert the changes involving the background-color of the target area. This makes for a more subtle UI in the original sense which is still readable.

Comment 11

[Alessandro Castellani [:aleca]]

Comment on attachment 9236142 [details] [diff] [review]
1725164.patch

Review of attachment 9236142 [details] [diff] [review]:
-----------------------------------------------------------------

Thanks for the proposal but that's not a good change IMHO.
It decreases drastically the readability contrast in dark mode and the hover effect is not super obvious, leaving confusion to which area is the current drop target.

Comment 12

[IT Support]

Attachment: drag-dark.png

This is not distinguishable enough? It gets rid of the change of background which we find surprising.

Comment 13

[Alessandro Castellani [:aleca]]

It decreases drastically the readability contrast in dark mode

"Add as attachment" is basically unreadable.

and the hover effect is not super obvious

For this I was referring to the light variation.

Anyway, this bug is now closed and new color enhancements have already been approved in bug 1725581.

Comment 14

[Richard Marti (:Paenglab)]

I'll do a combined patch for beta and ESR in bug 1725581. Like this only one patch needs to go to beta/ESR.

Comment 15

[Alessandro Castellani [:aleca]]

Comment on attachment 9235835 [details]
Bug 1725164 - Improve visibility and color contrast of attachment overlay. r=Paenglab

Removing the approval request per comment 14

Comment 16

[Tom]

Beta fixed in bug 1725581.

Comment 17

[Tom]

ESR91 fixed in bug 1725581.