1958372 - Extra vertical space between menu bar and tab strip and window caption buttons (minimize/maximize/close) are taller than before

Status: NEW

(Firefox :: Theme, defect, P3)

Description

[Chris Peterson [:cpeterson]]

Attachment: Firefox_menu_screenshot.png

On my new Windows laptop (Dell XPS 13 9350 running Windows 11 Version 24H2), there is an extra space between Firefox's menu bar and tab strip that I don't remember seeing on my old Windows laptop (an older Dell XPS model running Windows 11). See the attached screenshot, Firefox_menu_screenshot.png. Does Firefox think my new laptop is tablet? Both my old and new laptops have touchscreens, so I don't know what's different.

This is not a regression because I can reproduce in old Firefox versions like ESR 115 and Nightly 107 (from 2020).

Gijs suspects this bug is partially a regression from bug 1922307, which caused the window caption buttons to stop decreasing their height when the menu bar is open. That contributes some, but not all of the extra space between the menu bar and tab strip.

Comment 1

[Chris Peterson [:cpeterson]]

Attachment: Firefox_caption_buttons_screenshot.png

Comment 2

[Chris Peterson [:cpeterson]]

Attachment: Notepad_caption_buttons_screenshot.png

For comparison, here is a screenshot of Notepad's window caption buttons. They are shorter than Firefox's.

Comment 3

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

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

For more information, please visit BugBot documentation.

Comment 4

[Sam Foster [:sfoster] (he/him)]

The window control buttons are in a group called .titlebar-button-box-container. We have a copy of this group in each of the toolbars that can end up as the top-most toolbar. When the #TabsToolbar is top-most, we are seeing its .titlebar-button-box-container, and when you show the menubar, #TabsToolbar's button box container is hidden, and #toolbar-menubar > .titlebar-button-box-container is shown.

In order for those buttons to not appear to jump around, the solution in bug 1922307 was to make sure the toolbar-menubar is at least as tall as the tabs toolbar. As those buttons are in a flexbox and fill the row height, they are therefore in the same relative position.

But, the tab button in the tabs toolbar are a lot taller than the menubar items. So we get this empty vertical space.

To fix it, I think we need to not vertically center the .titlebar-buttonbox-container > .titlebar-button elements and find another way for their top edges to line up with the tab buttons. And use a different min-height value if the padding doesn't already do it so the buttons are a consistent size and relative position.