1714835 - Button Hitbox issue in newest version of Firefox

Status: RESOLVED DUPLICATE of bug 1715001

(Firefox :: Downloads Panel, enhancement)

Description

[rcandres]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:89.0) Gecko/20100101 Firefox/89.0

Steps to reproduce:

Buttons inside other buttons are no longer taking up the full height of the containing button. An example would be the "open folder" option in the downloads dropdown. If I miss the thin button inside, I end up opening the file when I intended to open its location.

I did turn off Proton in about:config since I vastly prefer the old tab appearance. I'm fine with most of the other changes, but the tabs just really don't work for me. However, this also happens with Proton too. It's slightly less tricky to click the inner button, but I have still managed to miss.

Expected results:

I would expect the "open folder" button hitbox to be the full height of the containing button. I am misclicking a lot right now.

Comment 1

[rcandres]

I will mention that this affects the latest Firefox Mobile as well as Windows and Ubuntu Desktop. In Firefox Mobile, I keep misclicking and opening the Bookmarks viewer when attempting to save or edit a bookmark. It's hard enough clicking the right button on Mobile, but this is making it a lot harder since the hitbox on there is really tiny.

Comment 2

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

The Bugbug bot thinks this bug should belong to the 'Firefox::Tabbed Browser' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 3

[Florencia Di Ciocco, NI to vbalducci]

Attachment: folder.jpg

Hi,
You mean this button, right? I've tried on Windows 10 and I can click it perfectly, even by clicking on the border of the button. But maybe you can provide me with a bit more info.

Does this issue occur with a fresh profile? You can find the steps here: https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles?redirectlocale=en-US&redirectslug=Managing-profiles#w_starting-the-profile-manager

Can you please download Firefox Nightly from here: https://nightly.mozilla.org/ and retest the problem and see if the issue still occurs there as well?

Thanks in advance, Flor.

Comment 4

[rcandres]

I have collected some videos of this issue. Sadly, the Windows ones didn't actually see the drawer thanks to a quirk in the recording software, but I can confirm that through Firefox Nightly on Windows, Firefox 89 on Windows, and Firefox 89 on Ubuntu, WITH OR WITHOUT Proton enabled, that there is a lot of unused space around the download itself in the drawer and especially around the "show in folder" button (so, I'll be attaching the Ubuntu recording only). The latter is the worst problem since clicking in the space around that button will instead open the download (which is especially dangerous if I were to accidentally download an executable file I want to get rid of).

This issue also plagues the "add/edit bookmark" button on my Android 8 tablet with the latest release edition of Firefox mobile, but I have not the faintest idea how to screen capture that.

Comment 5

[rcandres]

Attachment: Screencast 2021-06-07 11 48 14.mp4

You'll note that I click around the "show folder" button about halfway through (in a place where before this update it would have opened the folder). It actually opened the download instead, although it didn't show in the recording.

Also, there's a lot of white space in general between the downloads themselves. I'd expect the clickable area to extend nearly to the dividing horizontal line.

Comment 6

[rcandres]

Attachment: No Proton Download Hitbox Issue.mp4

Comment 7

[rcandres]

Attachment: Proton Download Hitbox Issue.mp4

Comment 8

[rcandres]

I have updated the videos to show both the Proton and Classic download trays and what happens if I don't click perfectly centered on the "show in folder" button. Even the text under the filename says that it's still going to open the file even though the mouse is clearly over (what used to be) the "show in folder" button.

The files in the preview here are still saying they are corrupt. If this is a problem for anyone else, PLEASE let me know so I can try to fix that. I am still able to open them in all my video viewer programs on my machine, but they won't view here for me.

Comment 9

[rcandres]

As a note, this is a near-clone of the similar issue with nested buttons on Firefox Android. https://github.com/mozilla-mobile/fenix/issues/20242
I doubt the code base is similar, but the end result is very familiar.

Comment 10

[Florencia Di Ciocco, NI to vbalducci]

Hi Andres,

Sorry for the delay. I cannot open the videos, sadly. Can you try again? Also, does this issue occur with a fresh profile? you can find the steps here: https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles?redirectlocale=en-US&redirectslug=Managing-profiles#w_starting-the-profile-manager

Comment 11

[rcandres]

Attachment: No Proton Download Hitbox Issue(1).mp4

Comment 12

[rcandres]

Attachment: Proton Download Hitbox Issue(1).mp4

Comment 13

[rcandres]

Yes, it does still happen. I have also tried this with an entirely new install of Firefox in a VM or after deleting the entire configuration directories, in both Windows and Ubuntu. The issue still occurs up to the latest edition of Firefox, again in both operating systems (Note: I went and checked them all just now). The degree to which the button issue occurs seems to vary based at least in part on UI scaling of the OS itself, but I have not seen a case where it doesn't happen to some degree.

The repaired (presumably) videos show both the Proton UI setting and the old version (still preferred to me) as set via about:config. It is clearly much worse in the old theme now, but Proton does still have the issue, presumably due to an underlying menu change. Both the display text under the filename and the lighting of the button show that the mouse must be excessively centered over the "show in folder" button or it will open the file instead. Presumably the "show in folder" button was embedded inside the "open" button, such that any margin setting causes the hitbox to be potentially clickable instead.

Again, my apologies for the videos. When I originally created them, they wouldn't play in-browser (for reasons still unknown to me) but at least I could download and view them in any desktop video player app.

Comment 14

[rcandres]

I'm not sure it shows in the video, but having either a vertical offset (the worst option; I'd prefer if the button extended the full height of its row like the actual "open" button does) or a horizontal offset (in Proton UI, and not as much of one as the layout would seem to suggest, or even to the right, where it would appear as if it should be only the show in file button to that direction) will cause the wrong action to occur.

Comment 15

[Clara Guerrero ( Need Info Brindusa Tot Please)]

HI,

As per your (comment)[https://bugzilla.mozilla.org/show_bug.cgi?id=1714835#c1] this is reproducible both windows and ubuntu?
I cannot seem to reproduce either, can you include your about:support information here please?

Clara

Comment 16

[Clara Guerrero ( Need Info Brindusa Tot Please)]

Attachment: button download.webm

Comment 17

[rcandres]

The issue is that clicking arbitrarily near, but not perfectly on, the "open in folder" button opens the file instead. There is a little ring around the entire button that will cause it to open the file. I even nearly ended up running a risky program due to this at one point (that popup warning about executable files is admittedly nice, especially when it catches for files that you indeed hadn't intended to open).

Yes, even in Proton. See my Proton video (the second one) at the 30 second mark. I'm clicking clearly around the "show in folder" button, but a pixel too far up, and it tries to open the file.

My expectation would be that the entire right side of that button would be the show in folder button, but instead it's all "open file" with a little island of "show in folder" in the middle. There's also an annoying amount of space around the listing that does nothing at all when clicked, which is bizarre, but at least it doing nothing is better than having to back out the (potentially hazardous) wrong action.

I'm also attaching a piece of drawn-with-a-mouse "artwork" that should demonstrate the issue.

Comment 18

[rcandres]

Attachment: ShowVsOpen.png

Comment 19

[rcandres]

Attachment: Screencast 2021-08-01 14 39 00(1).mp4

Comment 20

[rcandres]

The above video shows the same test being performed on Firefox 79. Note how the entire right side around the "folder" icon is the "show in folder" button. It's very clear and intuitive to use.

I like the new folder icon, but the only other change was the removal of the visual separator and the reduction in size of that button, both of which appear to be a step back in quality. It would still be fine (albeit not great) if that were the only change, but then making the "open download" button activate when the tiny "show in folder" button is missed is, to me, a poor design. The original behavior had two side-by-side buttons, but the new one has them stacked.

I will add that using Proton partially solves this issue, but it is still present and still happens to me. However, I can't use Proton because the border-less design and tab contrast are terrible (yes, I have followed that bug report too).

In both designs, though, this is very much a usability issue.

Comment 21

[Clara Guerrero ( Need Info Brindusa Tot Please)]

Thanks for the videos and additional details.
I will open this as an enhancement for the dev team to review, and change the component for a more suitable one.
Thanks! I hope you have a great day!
Clara

Comment 22

[:Gijs (he/him)]

We fixed this in Firefox 93.