1536151 - In some situations ":active" isn't applied when clicking on the text in <input type="button>

Status: NEW

(Core :: Web Painting, defect, P3)

Description

[Julien Wajsberg [:julienw]]

STR:

1. Open a link to the profiler, for example https://perfht.ml/2Y7SjLh
2. Click on the "permalink" button at the top.

=> See how the background color is different depending on whether the user clicks on the text, or outside of the text (but still inside the button). It looks like ":active" isn't applied when we click inside the text.

We use the selector ":hover:active" to style this button.

I'm sorry to present such a complex use case, but I couldn't reproduce with a simpler test case.

This reproduces in firefox 66 but not firefox 65, that's why I thought of bug 1089326 as a possible regressing bug, but this is a wild guess. Especially we use a <input type="button">, not a <button>...

Comment 1

[Olli Pettay [:smaug][[e-mail]]]

Clearing the dependency since there there isn't regression range here yet.

Comment 2

[Julien Wajsberg [:julienw]]

mozregression gives me this pushlog => https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=587615dad57e5336fbb3dc060cdadaad8078fcca&tochange=0f2d638c5c8fc345174855e1977f0735b7310d32
Which indicates bug 1500864 as the culprit.

Hey Matt, does that ring a bell?

Comment 3

[Matt Woodrow (:mattwoodrow)]

Could you please make a video demonstating this?

I can't reproduce on OSX, but I might be doing it wrong :)

Comment 4

[Julien Wajsberg [:julienw]]

Attachment: video capture

Here I'm doing 2 slightly different gestures. In both cases I click on the "permalink" button, purposely waiting about 1 second between mousedown and mouseup.

It's quite easy to tell the 2 events apart:

• when "mousedown" the focus apears around the button.
• When "mouseup" the "permalink" subpanel opens.

So here are the 2 "moments" in this video:

1. I click on the button, but outside the text "Permalink". We see that the button's background changes at "mousedown". This is done with our style on ":active".
2. I click on the button, but on the text "Permalink". We see that the button's background changes at "mouseup" (due to the styling we have when the subpanel is opened), but not at "mousedown".

We use a <input type='button'> here, so there really should have no difference whether we click on the text or the button. Moreover we clearly see that the button receives the "mousedown" event properly because it gets the focus.

Hope that helps :)

Comment 5

[Matt Woodrow (:mattwoodrow)]

Interesting! I don't get a focus ring on my button when I click, and also can't reproduce.

Do you have any custom prefs or system settings to get the focus ring on the button?

Comment 6

[Julien Wajsberg [:julienw]]

Ah, this is fun. I don't think I have anything special. I'm using Gnome 3 on Linux, on Debian stable (so fairly old packages).

This is also strange that you don't get the focus ring :) I'll look on my colleagues' various computers during my day and see what I get.

Comment 7

[Julien Wajsberg [:julienw]]

Also for now I can't manage to write a simpler testcase that reproduces this. So this must be a "nice" interaction between different styles.

Comment 8

[Olli Pettay [:smaug][[e-mail]]]

remember, MacOS has different focus model.

Comment 9

[Julien Wajsberg [:julienw]]

I checked locally with colleagues, and I totally confirm what's been guessed so far: the behavior on MacOS is different than the behavior on Linux. For Linux I tried on a more recent gnome and the same problem appears.

I couldn't try on Windows.

Comment 10

[Patricia Lawless]

Bulk change of P3 carryover bugs to wontfix for 68.