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);
}

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);
}

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.

(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.

Better quality preview screenshot with patch applied.

(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.

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

Richard, what about this?

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

You expect 200px high pills. ;-)

Ah, that's definitely a mistake XD

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

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.

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...

Pushed by geoff@darktrojan.net:
https://hg.mozilla.org/comm-central/rev/306ac4b77c67
Improve salience of focused pill between multiple selected pills. r=Paenglab