1926979 - Decrease window minimum width when vertical tabs are enabled.

Status: VERIFIED FIXED

(Firefox :: Toolbars and Customization, task, P1)

Description

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

In Bug 1923080, we increased the minimum width of the window to 800px (and 670px on MacOS) to avoid the scenario where the toolbar buttons were overlapping (see screenshots in previous bug) at smaller widths when vertical tabs is enabled. This may not be ideal as we need to account for lowering the screen resolution for accessibility. We should find a better solution that perhaps collapses the toolbar buttons further. Need infoing :ayeddi for a11y team's thoughts on accessible solutions.

Comment 1

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

Additionally, as :sfoster has pointed out, some users prefer to have to multiple windows open side by side. Increasing the min-width of the window when vertical tabs is enabled hinders that.

Comment 2

[Anna Yeddi [:ayeddi]]

Thank you for the ping!

I was able to decrease the width of the content until about 430px with the vertical tabs expanded while on the most recent Nightly 134 and then the cmd/ctrl++ browser zoom worked as well as the website allowed it to reflow (the W3C website didn't have any horizontal scrolling until 160ish px width). This is still a limitation for the users relying on browser zoom, for instance, but it is not an experience blocker. Technically speaking, we still allowed for the WCAG 2.2 Level AA Success Criterion 1.4.10 Reflow to be satisfied by the (compliant) website.

We want to allow for 320 px width so the user does not need to rely on a browser zoom and each website to support that and to support larger font sizes that a user may choose to override their webcontent with too, thus I am marking it as a lower access-S3 accessibility severity - borderline access-S4 because the vertical tabs are opt-in experience with an alternative option providing fully compliant experience too. Thank you for capturing it and working on it, team!

Comment 3

[Sarah Clements [:sclements]]

Adding a comment for something that was seen during a UX diary study, that when the browser is reduced to a certain size, the sidebar toolbar button looks like it disappears (likely going into the overflow menu) which was confusing for some users. We'll want to work with UX to take this into account when making any further changes with this bug.

Comment 4

[Sarah Clements [:sclements]]

Attachment: Screenshot 2024-11-12 at 4.00.48 pm.png

We'll want to see about reducing the space between the sidebar button and window controls in vertical tabs mode, as this is probably part of the reason that the sidebar button moves into overflow when the screen is minimized small per my previous comment.

Comment 5

[Sarah Clements [:sclements]]

Here's the spec for changing draggable space as this should help to address the issue in the description.

Comment 6

[Kelly Cochrane [:kcochrane]]

Attachment: Bug 1926979 - Hide the 'pre-tabs' .titlebar-spacer and decrease window minimum width when vertical tabs are enabled

Comment 7

[Kelly Cochrane [:kcochrane]]

Here's a spec for the end goal which involves hiding one instance of draggable space (.titlebar-spacer) and moving the other instance of draggable space directly to the left of the URL bar when in vertical tabs mode. Since moving the draggable space within the Customizable UI area will require some more effort, we're going to break that part out into bug 1932478. We can then land this quicker fix to this browser min-width issue while we work out the CUI work.

So for this bug we want to:

• Hide the [type="pre-tabs"] draggable space when in vertical tabs mode
• Decrease the min-width of the browser now that we've freed up some space

And in bug 1932478, we will move that remaining visible draggable space directly to the left of the URL bar

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/468cfeb51f7b
Hide the 'pre-tabs' .titlebar-spacer and decrease window minimum width when vertical tabs are enabled r=desktop-theme-reviewers,tabbrowser-reviewers,sidebar-reviewers,dao,sclements

Comment 9

[amarc]

Backed out for causing bc failures @ browser_914138_widget_API_overflowable_toolbar

• Backout link
• Push with failures
• Failure Log
• Failure line:

TEST-UNEXPECTED-FAIL | browser/components/customizableui/test/browser_914138_widget_API_overflowable_toolbar.js | Uncaught exception in test bound insertBeforeFirstItemInOverflow - undefined - timed out after 50 tries.

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/7c24aef7cb4a
Hide the 'pre-tabs' .titlebar-spacer and decrease window minimum width when vertical tabs are enabled r=desktop-theme-reviewers,tabbrowser-reviewers,sidebar-reviewers,dao,sclements

Comment 11

[agoloman]

https://hg.mozilla.org/mozilla-central/rev/7c24aef7cb4a

Comment 12

[agoloman]

Backed out for causing bc failures @browser_vertical_tab.js.

• Backout link
• Push with failures
• Failure Log

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ec4e52104d4d
Hide the 'pre-tabs' .titlebar-spacer and decrease window minimum width when vertical tabs are enabled r=desktop-theme-reviewers,tabbrowser-reviewers,sidebar-reviewers,dao,sclements

Comment 14

[Norisz Fay [:noriszfay]]

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

Comment 15

[Alexandru Trif, Desktop Test Engineering [:atrif]]

On Windows 10x64 with Firefox 135.0a1 (2024-10-24) there is a spacer on the left side of the sidebar button and making the Firefox window smaller will hide the sidebar button.
Verified fixed with Firefox 135.0b5 on Windows 10x64, macOS 12 and Ubuntu 24.04. With vertical tabs enabled the spacer is no longer visible and the sidebar button is no longer hidden when the Firefox window has minimum width.