1916466 - Firefox ESR 128esr applies extra white border (outline) to buttons

Status: RESOLVED WONTFIX

(Core :: Layout, defect)

Description

[Squad_Swap]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5.2 Safari/605.1.15

Steps to reproduce:

1. Set the cursor in the input text box
2. hit 'tab' to move it to button so it takes the focus

Actual results:

In FF-ESR 115.13-esr version, a white border (outline) appears around the button box.
In FF-ESR 115.12-esr it doesn't happen.

Expected results:

No extra outline other than the specified one must appears around the button box.

NB : The same problem was detected in FF 115 and resolved by setting "widget.non-native-theme.solid-outline-style" flag to true.
Since FF128, the solution is not working.

Comment 1

[Squad_Swap]

Attachment: focused-button-test.html

Comment 2

[Squad_Swap]

Attachment: What we get with FF115.13-esr

Comment 3

[Squad_Swap]

Attachment: What it used to be with FF115.12-esr

Comment 4

[Alice0775 White]

Regression window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=ee4c4d34816c2d1eb49d1ddbf261dcb734e48877&tochange=a5dbb1db6794a38991d5a5536e762ba3bebfecea

Suspect: Bug 1776592

Comment 5

[BugBot [:suhaib / :marco/ :calixte]]

:emilio, since you are the author of the regressor, bug 1776592, could you take a look? Also, could you set the severity field?

For more information, please visit BugBot documentation.

Comment 6

[Emilio Cobos Álvarez (:emilio)]

I mean, that was an intentional change, but there's nothing that has changed on ESR about it. You can control this in 115 with widget.non-native-theme.solid-outline-style in about:config, maybe you had that pref set before?

Comment 7

[Squad_Swap]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #6)

I mean, that was an intentional change, but there's nothing that has changed on ESR about it. You can control this in 115 with widget.non-native-theme.solid-outline-style in about:config, maybe you had that pref set before?

Hi :emilio,
The flag was actually set to false as you can see in the attached image.
Let us know if you need other information.

Comment 8

[Squad_Swap]

Attachment: The flag was to false as always since 115.12

Comment 9

[Emilio Cobos Álvarez (:emilio)]

Are you sure that 115.12 doesn't draw the white outline? That's the only surprising thing from this report. If you change that flag to true it should change the behavior to that of comment 3

Comment 10

[Squad_Swap]

@(In reply to Emilio Cobos Álvarez (:emilio) from comment #9)

Are you sure that 115.12 doesn't draw the white outline? That's the only surprising thing from this report. If you change that flag to true it should change the behavior to that of comment 3

We took a little time more in testing the feature of this flag : "widget.non-native-theme.solid-outline-style=true".
Here below is what we've found : (OK = no white outline on button, KO = there is a white outline around the button)

• 115.12esr : OK
• 115.13esr : OK
• 115.14esr : OK
• 115.15esr : OK
• 128.0esr : KO
• 128.1esr : KO
• 128.2esr : KO

Sorry about what we reported early. We can be sure that the 115 major version respects the feature of the flag.
But it seems that the series 128 esr does not take into account the flag "widget.non-native-theme.solid-outline-style=true".
It gives the same results even with "widget.non-native-theme.solid-outline-style=false".

Comment 11

[Emilio Cobos Álvarez (:emilio)]

Yes, that's correct, because it got removed in 128, see bug 1895391.

Comment 12

[Squad_Swap]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #11)

Yes, that's correct, because it got removed in 128, see bug 1895391.

Can we hope that it will be restored ?

Comment 13

[Emilio Cobos Álvarez (:emilio)]

Not particularly opposed, but what is the use case for it?

Comment 14

[Squad_Swap]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #13)

Not particularly opposed, but what is the use case for it?

As you can remember 1846958, the white outline appears for the firs time in our applications with FF 115.0-esr. The solution was setting widget.non-native-theme.solid-outline-style to true.
Since then we thought that the feature of the flag would be permanent.
Many of our applications are impacted. We have about 10.000 users.
If the flag is no longer functional, any advice from you would be helpful in order to get rid of this behavior.
Thanks a lot.

Comment 15

[Emilio Cobos Álvarez (:emilio)]

Use outline-style: solid rather than outline-style: auto? Something like button:focus-visible { outline: 2px solid AccentColor } should roughly match what you want.

That said, I'll point out that the white outline is intentional, in order to guarantee contrast. Otherwise if you happen to have a background that is close to the accent color, the outline could become invisible.

Comment 16

[Squad_Swap]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #15)

Use outline-style: solid rather than outline-style: auto? Something like button:focus-visible { outline: 2px solid AccentColor } should roughly match what you want.

That said, I'll point out that the white outline is intentional, in order to guarantee contrast. Otherwise if you happen to have a background that is close to the accent color, the outline could become invisible.

Thanks a lot