1710619 - Make the focus colour consistent

Status: RESOLVED FIXED

(Thunderbird :: Upstream Synchronization, task)

Description

[Richard Marti (:Paenglab)]

Actually we use two different focus colours: the one for the text fields and the one for the buttons etc. Especially on Ubuntu this leads to some do focus with orange and other with blue.

We should use on all platforms with default theme the system -moz-accent-color for all focus rings and when a theme defines it use the themes focus colour.

Comment 1

[Richard Marti (:Paenglab)]

Attachment: 1710619-focus-color.patch

I tried to implement the Proton focus styling (2px border) on different places like today pane, minimonth, message header, attachment toolbar and composer. If we find more places we can do them in other bugs.

In message header the From, Subject and To fields are still 1px, but solid instead of dotted, because there isn't enough space for 2px border. I could do a outline-offset of -2px but the the focus would almost touch the labels.

Comment 2

[Alessandro Castellani [:aleca]]

Comment on attachment 9221339 [details] [diff] [review]
1710619-focus-color.patch

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

This looks good, thanks!

::: calendar/base/themes/common/calendar-task-view.css
@@ +192,5 @@
>      box-shadow: var(--toolbarbutton-active-boxshadow);
>      transition-duration: 10ms;
>  }
>  
> +#calendar-add-task-button:focus-visible {

I think all these buttons should have a :not(:hover) attribute like we do in the compose window.
Otherwise it looks a bit weird if a button has the focus ring and the it's hovered with the mouse.

::: calendar/base/themes/common/calendar-views.css
@@ +1088,5 @@
>  
>  :root[lwt-tree-brighttext] .today-navigation-button:not([disabled="true"]):hover:active {
> +    background: rgba(255, 255, 255, .4);
> +    border-color: rgba(255, 255, 255, .7);
> +    box-shadow: 0 0 rgba(255, 255, 255, .4) inset;

nit: inset should be written first.

Comment 3

[Richard Marti (:Paenglab)]

Attachment: 1710619-focus-color.patch

Applied the review comments. I had to add to the :hover states a outline: none; to not show the dotted focus ring.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/d401469fde9d
Make the focus color consistent. r=aleca