GNOME Bugzilla – Bug 787757
Focus outline easily disappears around color chooser swatches
Last modified: 2017-09-16 16:04:16 UTC
The outline is drawn around the inside of the swatch, i.e. over the colour being selected, so it becomes difficult to see, or invisible, for any colour close to the normal outline colour. This is a pain if you prefer - or require - keynav, as you end up having to randomly fling the focus around until you figure out where you are, then figure out how many times you have to press an arrow to get where you want to be. Probably the outline should be conditional on the .light or .dark classes, like the tick is. I'd suggest a transparentised version of those (once they're sorted for the :dark theme per Bug 787531)
HighContrast gets this right already, because it applies the colour to the colorswatch node, not its overlay subnode (dunno why Adwaita does the latter). Changing to do the same in Adwaita fixes the colour, but the outline is still a bit too faint, because it inherits the opacity from the general outline rule.
(In reply to Daniel Boles from comment #1) > HighContrast gets this right already, because it applies the colour to the > colorswatch node, not its overlay subnode (dunno why Adwaita does the > latter). Styling overlay specifically seems to have been intentional, per comments in the SASS, so I'll leave that alone. HC may need updated for the same reason, though. > Changing to do the same in Adwaita fixes the colour, but the outline is > still a bit too faint, because it inherits the opacity from the general > outline rule. Wrong, I broke it some other way. It seems fine just adding the right outline-color. Maybe we could transparentise it a little, but 0.7 is too faint; that's probably what I had tested before.
Created attachment 359889 [details] [review] Adwaita: Fix color of focus outline on colorswatch It would disappear on colours close to the normal focus outline colour, which is alpha(currentColor, 0.3). Fix by explicitly making the outline around the colorswatch node an alpha’d version of the black/white colour appropriate for light/dark. (Just moving the color property from the overlay subnode to the main colorswatch one did not work, as the default outline opacity is too low for many colours) -- I tried to strike a good balance between not making the outline fully opaque, which may be seen as excessive, but not making it as transparent as the default outline. I think this works pretty well.
Comment on attachment 359889 [details] [review] Adwaita: Fix color of focus outline on colorswatch pushed using transparentize() instead of gtkalpha(), mostly because that matches the surrounding code better, but also because alpha() is not needed in this case. I vacillated for a while about how much to transparentize here, but this seemed like a good balance of visible but not obtrusive; please do improve if possible!