Bug: Mousing over menus in the context menus opened on PanelViews causes events to somehow go through the context menu into the underlying panel
Status: NEW
Priority: P3
Created: 2021-06-01 21:32:13+00:00
Resolved: 2023-06-05 16:33:10+00:00

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:91.0) Gecko/20100101 Firefox/91.0

Steps to reproduce:

- Open a whole bunch of tabs.
- Click the "all-tabs" button to open the all-tabs panel.
- Right click on an "all-tabs-item" in the panel.
- In the tab context menu that appears, mouse over a `<menu>` (not a menuitem)


Actual results:

- Notice the "all-tabs-item" directly underneath the context menu, where you moused over, is now highlighted. It's as if the mouseover event somehow traversed through the context menu.
- Also, while this is happening, the `<menu>` you moused over is flickering as if there's some kind of z-fighting happening between the context menu and the all tabs panel.
- By z-fighting I'm referring to a phenomenon in 3D rendering where two meshes or even planes share the exact same coordinate so the renderer doesn't know which to draw on top of the other, so it draws one on top for one frame then draws the other one on top for another frame, back and forth or randomly, causing flickering.
- This is a hard bug to describe but basically it seems like when mousing over a menu, at the end of the submenu delay, (defined by preference `ui.submenuDelay`) the element underneath the menu gets `:hover` somehow. Like for a split second, the context menu is transparent to the mouse, so the mouseover event goes through it.
- I don't think that's a good literal description of what's going on since this might be lower level than javascript events or CSS `:hover` state, but that's as far as my knowledge goes so I couldn't begin to guess what's really going on under the binary hood.

- This applies to ALL panels by the way. The only reason I suggest the all tabs panel is because the tab items inside it use the tab context menu, which has a ton of `<menu>` elements. Other context menus that you can open on panels are usually just full of menuitems, not menus. The history panel for example.
- But another one that works is the bookmarks panel, which can be opened from the library toolbar button of from the PanelUI button > app menu > bookmarks subview.
- In the bookmarks subview if you right-click a bookmark you get a places context menu, and if container tabs is enabled you get a menu at the very end to "Open in a new Container Tab." If you mouse over this menu, the bookmark item underneath the context menu (at the position of the mouse cursor) gets highlighted at the end of the submenu delay.

- Another interesting detail. If you set `ui.submenuDelay` in about:config to something long like 1000, you can see what's going on more clearly. With such a long value, nothing happens at first. But at the end of that 1 second, the bug happens.
- I thought setting the submenu delay to 0 would eliminate it but I just wasn't looking closely enough. The bug does happen whether it's 0 or 1000 or anything in between. But when it's 0 it just happens so quickly you might not notice if you keep moving the mouse and have a low refresh rate monitor. At 120Hz it's very apparent though.

- I've attached an image that shows the bug as well as I could, by testing it on a brand new completely empty profile on 91.0a1. Obviously it doesn't look like anything is severely wrong because it's just a screenshot. A video would be more useful so maybe I'll post one later. Basically you can see where I opened the context menu based on where the context menu is anchored.
- I right-clicked way up there, on the tab that the context menu is anchored underneath, and after that I only moved my mouse *inside* the context menu. But you can see that the tab directly under the "Close multiple tabs" menu is highlighted, *not* the tab I right-clicked. The highlighted tab somehow changed from the one I right-clicked to the one underneath my mouse, even though I never moved my mouse outside of the context menu.


Expected results:

- Of course mouseover/hover state should not pass through context menus under any circumstances. But I have no idea what the cause of this bug is. I tried to dig into the DOM and do some research on what may have changed in the relevant javascript modules but I haven't seen anything interesting. Which leads me to assume the issue is much lower-level and beyond my understanding.

Thanks so much to whoever fixes this