1923080 - Toolbar buttons overlap in small windows with vertical tabs

Status: VERIFIED FIXED

(Firefox :: Sidebar, defect, P1)

Description

[Stuart Colville [:muffinresearch]]

STR

Running Nightly 133.0a1 (2024-10-06) with vertical Tabs enabled.

On Mac, Windows, or Linux and there are various issues related to z-index at small screen widths.

What happens

Icons are running behind each other and on windows icons are visible in the addressbar. See screenshots for what happens on each platform.

What should happen

Reduced widths should not cause icons to disappear behind other icons (e.g. the extensions icon) or be partly visible.

Comment 1

[Stuart Colville [:muffinresearch]]

Attachment: Toolbar issues on Mac (overflow icon over the extensions icon)

Comment 2

[Stuart Colville [:muffinresearch]]

Attachment: Toolbar issues on Windows (Hamburger icon behind address bar, window controls overlapping extension icon)

Comment 3

[Stuart Colville [:muffinresearch]]

Attachment: Toolbar issues on Linux (hamburger icon in the address bar, window controls overlapping the extensions icon).

Comment 4

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

This looks to be a follow-up from bug 1899598, I'll take a look

Comment 5

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

I wasn't able to reproduce this. CustomizableUI does have resize handling which should spot the need to move things into the overflow menu, so there must be some STR which bypasses it. Can you say more about how you reproduce this? Do you switch to vertical tabs, then resize the window? Or re-start the browser, or add stuff to the toolbar and then switch the pref. etc.

Comment 6

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

Ah, never mind. As soon as I clicked the button I got it. I was in mozregression looking at an older build and its the navbar-as-titlebar stuff which is needed to reproduce.

Comment 8

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

The #nav-bar is an OverflowableToolbar. There is logic in there which measures all the child elements of the toolbar and calculates the available width for the customization target - the element which contains the customizable toolbar widgets. That part seems to correctly compute the widths - which are much narrower when we are in verticalTabs mode and the necessary spacers and window controls are in the toolbar.

Then there's a #onOverflow method which looks through the toolbar's widgets and keeps moving them into the overflow menu until it all fits. But in this configuration, it runs out of things to remove. The urlbar can't be moved to the overflow, nor can the back, forward, reload button or the extensions button.

There are some media queries which set the width of the urlbar in certain conditions - and establish a base min-width of 310px plus some.

With minimum window and toolbar width of 450px, we can't meet both sets of requirements: the window controls must be visible, the navigation controls must be visible, the urlbar and extensions button must be visible - and yet with our current minimum dimensions the numbers do not add up.

Comment 9

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

The next steps here in the short term are to impose a wider minimum width for windows with vertical tabs. Adding the window controls and the spacers to allow the navbar to function as a titlebar means considerably less space for all the other non-removable, non-overflowable stuff in there like the urlbar-container, the extensions button, the navigation controls and the main menu button.

It gets a little tricky writing a selector for root elements where tabs in titlebar is true, but the menubar is hidden and the nav-bar has .browser-titlebar etc. I suspect we can apply the new min-width to any window where verticalTabs is true.

Comment 10

[Nikki Sharpley (:nikkis) (she/her)]

Attachment: Bug 1923080 - Increase window min-width when vertical tabs is enabled r=#sidebar-reviewers

This is to prevent the overlapping of toolbar items that aren't in overflow.
This fix works on Mac but will need to be checked on Linux and Windows as their
controls are a different size.

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e97408511106
Increase window min-width when vertical tabs is enabled r=sidebar-reviewers,desktop-theme-reviewers,dao,kcochrane

Comment 12

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/e97408511106

Comment 13

[Selim Şumlu]

The fix doesn't seem to be working on Windows. I still see overlapping buttons in the latest Nightly.

Comment 14

[Sarah Clements [:sclements]]

Attachment: Screenshot 2024-10-22 at 4.49.38 pm.png

Nikki's patch fixed it on mac but not windows, on latest Nightly.

Comment 15

[Nikki Sharpley (:nikkis) (she/her)]

Attachment: Bug 1923080 - Increase window min-width for vertical tabs mode to prevent toolbar overlap r=#sidebar-reviewers

• follow up patch to increase width on Windows and Linux specifically

Comment 16

[BugBot [:suhaib / :marco]]

Set release status flags based on info from the regressing bug 1899598

Comment 17

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/87d960a8f294
Increase window min-width for vertical tabs mode to prevent toolbar overlap r=sidebar-reviewers,desktop-theme-reviewers,kcochrane,sfoster

Comment 18

[tszentpeteri]

https://hg.mozilla.org/mozilla-central/rev/87d960a8f294

Comment 19

[Catalin Sasca, Desktop Test Engineering [:csasca]]

Reproduced the issue on Firefox 133.0a1 (2024-10-07) on macOS 15.0.1 by following the STR from Comment 0.

The issue is fixed on Firefox 133.0a1 (2024-10-27). Tests were performed on macOS 15.0.1, Ubuntu 24.04 and Windows 11.