1711680 - The Library - Downloads option is too close to the bottom edge of the panel when the Library is pinned to overflow menu

Status: NEW

(Firefox :: Menus, defect, P2)

Description

[Alin Ilea, Desktop QA]

Attachment: 2021-05-18_15h41_36.png

Tested with:

Release 88
Beta 89.0b13
Nightly 90.0a1 (2021-05-18)

Tested on:

Windows 10
Ubuntu 20.04
macOS 11

Steps:

1. Launch firefox and go to the customize toolbar .
2. Add the Library to the overflow menu.
3. Go to the toolbar overflow menu, click on the Library and hover the mouse cursor over the downloads.

Actual result:

The hover highlight is too close to the bottom edge (even slightly cut).

Expected result:

There should be more space at the bottom edge of the Downloads option.

Comment 1

[Itiel]

On first look I thought it was a matter of just changing this:
https://searchfox.org/mozilla-central/rev/98a9257ca2847fad9a19631ac76199474516b31e/browser/themes/shared/customizableui/panelUI.inc.css#326
to padding-top: 0, but I can reproduce this only if the Library item is "lonely" in the overflow menu- having 3 items there (the Library included) doesn't make this reproduce.
With the Library being the only item in the overflow menu, JS sets the parent panel-viewcontainer's min-height to 94.6667px, while with 3 items there, the same parent's min-height is set to 158.667px.
Toggling it off makes the issue reproduce also with 3 items in the overflow menu.

Comment 2

[:Gijs (he/him)]

(In reply to Itiel from comment #1)

On first look I thought it was a matter of just changing this:
https://searchfox.org/mozilla-central/rev/98a9257ca2847fad9a19631ac76199474516b31e/browser/themes/shared/customizableui/panelUI.inc.css#326
to padding-top: 0, but I can reproduce this only if the Library item is "lonely" in the overflow menu- having 3 items there (the Library included) doesn't make this reproduce.
With the Library being the only item in the overflow menu, JS sets the parent panel-viewcontainer's min-height to 94.6667px, while with 3 items there, the same parent's min-height is set to 158.667px.
Toggling it off makes the issue reproduce also with 3 items in the overflow menu.

This sounds like it'd be caused by the fact that we never shrink the menu when opening a submenu, we only increase the height. So with 3 items in the overflow panel, the panel is already bigger?

Comment 3

[Itiel]

Attachment: Only the Library is in the overflow menu

Comment 4

[Itiel]

Attachment: 3 items in the overflow menu including the library

Comment 5

[Itiel]

(In reply to :Gijs (he/him) from comment #2)

(In reply to Itiel from comment #1)

On first look I thought it was a matter of just changing this:
https://searchfox.org/mozilla-central/rev/98a9257ca2847fad9a19631ac76199474516b31e/browser/themes/shared/customizableui/panelUI.inc.css#326
to padding-top: 0, but I can reproduce this only if the Library item is "lonely" in the overflow menu- having 3 items there (the Library included) doesn't make this reproduce.
With the Library being the only item in the overflow menu, JS sets the parent panel-viewcontainer's min-height to 94.6667px, while with 3 items there, the same parent's min-height is set to 158.667px.
Toggling it off makes the issue reproduce also with 3 items in the overflow menu.

This sounds like it'd be caused by the fact that we never shrink the menu when opening a submenu, we only increase the height. So with 3 items in the overflow panel, the panel is already bigger?

When entering the Library menu inside, yes.