1615839 - Improve salience of focused pill between multiple selected pills

Status: RESOLVED FIXED

(Thunderbird :: Message Compose Window, enhancement)

Description

[Thomas D. (:thomas8)]

Focus on focus is key for keyboard users especially when they choose to select ;-))

Between multiple selected pills, it's virtually impossible to see which one has focus. Maybe the times of dotted focus rings are gone, but it should still be visible somehow without magnifiers and creeping into my screen...

STR

1. compose, have 7 recipient pills
2. select pills 3 to 5 in that order (using Shift+cursor-right or Ctrl+click)
3. press Ctrl+Cursor left 2 times and try to see which pill has focus (you can just hold Ctrl while pressing cursor keys)
4. press Ctrl+Cursor left again

Actual

• it's virtually impossible to identify the focused pill between multiple selected pills, because the focus border is almost same color (dark-blue) like Highlight-background-color (blue).
• focus becomes visible as a grey border only on unselected pills which have a light background color.

Expected

• it should be easily possible to see which pill out of multiple selected pills has focus
• focus marker must be visible against the blue background-color of selected pills (Highlight)

Implementation ideas:

• Problem only occurs on selected pills, so we could change their CSS.
• Lighter focus ring, gradient, anything which makes the focus stand out.
• I tried gradient and I find that quite cool right now: looks modern and a bit like a tiny spotlight on the focused pill, which carries the idea of "focus" pretty well.

.address-pill[selected]:hover:not(.editing),
.address-pill[selected]:focus:not(.editing) {
  background: linear-gradient(135deg, white, Highlight 1em);
}

Comment 1

[Thomas D. (:thomas8)]

Attachment: 1615839_focusPillSalience.diff

Sample implementation with gradient pill corner for the selected pill which has focus. Wdyt?

I tried gradient and I find that quite cool right now: looks modern and a bit like a tiny spotlight on the focused pill, which carries the idea of "focus" pretty well.

.address-pill[selected]:hover:not(.editing),
.address-pill[selected]:focus:not(.editing) {
background: linear-gradient(135deg, white, Highlight 1em);
}

Comment 2

[Thomas D. (:thomas8)]

Attachment: Screenshot 1 with patch applied (1615839_focusPillSalience-gradient.jpg)

Comment 3

[Alex ARNAUD]

Hello Thomas, many thanks for reporting this issue.

IMHO, I expect to have dotted focus because it's the way it works in the file manager and in other GTK dialog.

The current proposal you've made wouldn't make the selected pill fit my default GTK3 high contrast theme. Also I don't see the colors differences between selected and unselected.

Best regards.

Comment 4

[Thomas D. (:thomas8)]

(In reply to Alex ARNAUD from comment #3)

Hello Thomas, many thanks for reporting this issue.

Hello Arnaud,

IMHO, I expect to have dotted focus because it's the way it works in the file manager and in other GTK dialog.

That's in a Linux environment, so I can't tell because I'm on Windows. Richard?

The current proposal you've made wouldn't make the selected pill fit my default GTK3 high contrast theme.

Well, again, my proposal refers to Windows and I've just minimally tweaked the current default with a tiny white gradient corner against the default blue selection background. So it is not related to GTK3 high contrast theme in any way, and it can't affect that.

Also I don't see the colors differences between selected and unselected.

On Windows, selected pills currently have blue blackground.

Comment 5

[Thomas D. (:thomas8)]

Attachment: Screenshot 2 with patch applied (1615839_focusPillSalience-gradient.webp)

Better quality preview screenshot with patch applied.

Comment 6

[Richard Marti (:Paenglab)]

Comment on attachment 9126902 [details] [diff] [review]
1615839_focusPillSalience.diff

This is a issue only with the light themes. The dark shows the focus good visible with the box-shadow. I played with this on the light theme too but this doesn't work well. Also a dotted focus ring is not good visible.

I don't think we should use this spotlight. It isn't very obvious for not well sighting people. Making the complete focused pill lighter with `linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15))` could help.

Comment 7

[Alessandro Castellani [:aleca]]

Comment on attachment 9126902 [details] [diff] [review]
1615839_focusPillSalience.diff

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

I agree with Richard.
This is not very visible, the little spotlight is very Window-oriented and it wouldn't work in other OSs.

I'd suggest sticking to flat colors, drop-shadows, and improving the contrast.
I was playing with the design a bit and I think we can darken the color of the focused pill `#0D5C99` and add a blueish dropshadow `box-shadow (0, 2px, 10px, rgba(0, 121, 214, 0.4))`
I'm attaching a screenshot.

Comment 8

[Alessandro Castellani [:aleca]]

Attachment: pill-select-focus.png

Comment 9

[Richard Marti (:Paenglab)]

(In reply to Alessandro Castellani (:aleca) from comment #7)

I was playing with the design a bit and I think we can darken the color of
the focused pill #0D5C99 and add a blueish dropshadow box-shadow (0, 2px, 10px, rgba(0, 121, 214, 0.4))
I'm attaching a screenshot.

Setting an absolute colour doesn't work on all platforms, they have different highlight colours. Ubuntu is orange or Mint has a green. Also if they are blue it isn't the same. We could make it darker with a transparent black background-image.

Comment 10

[Alessandro Castellani [:aleca]]

Attachment: 1615839-focus-pill-salience.diff

What about this variation using linear gradients to add some depth to the pills?
Screenshot coming.

Comment 11

[Alessandro Castellani [:aleca]]

Attachment: selected-pills.jpg

Comment 12

[Thomas D. (:thomas8)]

Comment on attachment 9127439 [details]
selected-pills.jpg

Yeah, the difference of selected+focus vs. selected is still pretty subtle, but probably a bit better than before.
I still think my spotlight-gradient was much easier to spot and more elegant - if that works for Windows only, maybe find something similar or just the spotlight in other colors for other systems. Where I used 'white' it should probably be 'HighlightText' color variable.

Comment 13

[Magnus Melin [:mkmelin]]

Comment on attachment 9127438 [details] [diff] [review]
1615839-focus-pill-salience.diff

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

Looks ok to me

Comment 14

[Richard Marti (:Paenglab)]

Comment on attachment 9127438 [details] [diff] [review]
1615839-focus-pill-salience.diff

Better than without. But with the darker Windows highlight blue the difference is very slight. It's mostly visible when moving the focus. I still propose to make the background darker when the pill has the focus.

Comment 15

[Thomas D. (:thomas8)]

Comment on attachment 9127438 [details] [diff] [review]
1615839-focus-pill-salience.diff

Yeah, a bit better, see my comment 12.

Comment 16

[Alessandro Castellani [:aleca]]

Attachment: 1615839-focus-pill-salience.diff

Richard, what about this?

Comment 17

[Richard Marti (:Paenglab)]

Comment on attachment 9127608 [details] [diff] [review]
1615839-focus-pill-salience.diff

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

Much better visible.

::: mail/themes/shared/mail/messengercompose.css
@@ +559,5 @@
> +
> +.address-pill[selected]:hover:not(.editing),
> +.address-pill[selected]:focus:not(.editing) {
> +  box-shadow: 0 1px 5px -2px Highlight, inset 0 0 0 1px rgba(0, 0, 0, 0.3),
> +    inset 0 0 0 100px rgba(0, 0, 0, 0.15);

You expect 200px high pills. ;-)

Comment 18

[Alessandro Castellani [:aleca]]

(In reply to Richard Marti (:Paenglab) from comment #17)

You expect 200px high pills. ;-)

Ah, that's definitely a mistake XD

Comment 19

[Alessandro Castellani [:aleca]]

Attachment: 1615839-focus-pill-salience.diff

I set the inset shadow spread to 2em to properly cover the entire height of the pill and get a nice smooth animation.

Comment 20

[Thomas D. (:thomas8)]

Comment on attachment 9127628 [details] [diff] [review]
1615839-focus-pill-salience.diff

Whilst this may solve the original problem of this bug somehow (to see the focused selected pill between selected pills), I think we're now overdoing focus for unselected pills. Without having a selected pill, if I move focus only with Ctrl on pills of different colors, the background color change is so strong that I am now wondering if maybe they are selected. Sorry, but focus on Windows is typically a ring, not change of background color. I really liked just moving the focus ring on unselected pills much better. Maybe if you reduce your shadow again so that it does not cover the entire pill height. For selected, well, at least it's visible now.

Comment 21

[Thomas D. (:thomas8)]

I think it might be sufficient to only change the focus style of selected pills as I originally suggested, and to keep the regular plain vanilla focus ring on all others. Shaded background for focus is really pretty confusing wrt selection.

Comment 22

[Thomas D. (:thomas8)]

For unselected pills with focus only, can we try to just have a blue focus ring (Highlight color) because that highlight blue is the well-known indicator of focused things - when the input of addressing row has focus, the row has a blue focus ring. When a pill has focus - it should just have a blue focus ring, too. That would really help to spot focus. And if 1px is too thin, just make it 2 px - after all, those users will be deliberately moving focus only, so they really want to see it. Indicating focus in different shades and colors isn't a very good idea actually...

Comment 23

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/306ac4b77c67
Improve salience of focused pill between multiple selected pills. r=Paenglab