2084984 - Adjust sidebar width to accommodate scrollbar if using non-overlay scroll bars with vertical tabs

Status: RESOLVED FIXED

(Core :: Widget, enhancement)

Description

[Sarah Clements [:sclements]]

Vertical tabs has used the thin scrollbars since implementation a few years ago but now with nova styling changes the scrollbar is noticeably cutting into some of the styling when in the collapsed state because of how much space it needs to occupy along side the tabs (depending on OS scrollbar setting - on mac its obvious without the overlay). The thin scrollbars aren't consistently the same width across platforms so the request is to adjust this width for both windows and mac.

Comment 1

[Sarah Clements [:sclements]]

Values for mac are here and here needs changing from talking to Emilio. I'm asking UX for input on this.

:spohl, I'm curious why the values for mac are different based on whether its an overlay or not (and if there's a reason we should just change the non-overlayed scrollbar)?

Comment 2

[Kelly Cochrane [:kcochrane]]

Whoever picks this up, you'll need to adjust some special-casing styles added in bug 2049500 in regards to scrollbar width per platform

Comment 3

[Stephen A Pohl [:spohl]]

The different sizes come from matching the native macOS scrollbar variants. We originally implemented scrollbar-width: thin using the native small scrollbar in bug 1484565. Bug 1568939 comment 3 also discusses why those sizes differ across platforms.

I checked the native sizes on macOS 27.2, and they appear larger than the values we're currently using, so we may want to revisit those separately.

I'm open to adjusting thin scrollbars for cramped areas like collapsed vertical tabs, but I'd be cautious about changing them everywhere to solve this particular layout issue. Could we consider a change specific to vertical tabs, similar to the scrollbar styling adjustment in bug 1922343?

Whichever approach we choose, I think the scrollbar should remain easy to grab and drag with a pointer. I'd also be cautious about forcing overlay scrollbars for users who've explicitly chosen always-visible scrollbars.

Comment 4

[Emilio Cobos Álvarez [:emilio]]

I think the idea was to adjust the thin scrollbars generally. Are there native thin scrollbars? I don't think so?

Comment 5

[Stephen A Pohl [:spohl]]

Yes, macOS has a native small scrollbar variant. It's mentioned in Apple's current HIG as "small" (or "mini") scrollbars: https://developer.apple.com/design/human-interface-guidelines/scroll-views

I also checked actual native NSScrollView instances on macOS 27.2. With NSScroller.controlSize set to .small, the scrollbar widths were 13 points for non-overlay and 15 points for overlay, compared with 17 points for both regular variants. This is the native variant we originally mapped scrollbar-width: thin to in bug 1484565.

My concern is how far we'd diverge from that native small variant.

Comment 6

[Kelly Cochrane [:kcochrane]]

Attachment: Bug 2084984 - Increase sidebar width to accommodate non-overlay scrollbars with vertical tabs

Comment 7

[Kelly Cochrane [:kcochrane]]

We've decided to increase the width of the sidebar only in the case that non-overlay scroll bars are being used with overflowing vertical tabs. We will add 2px of space to the inline-end of vertical tabs for this.

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/c0e8cca06c08
https://hg.mozilla.org/integration/autoland/rev/5934eb172248
Increase sidebar width to accommodate non-overlay scrollbars with vertical tabs r=emilio,spohl,desktop-theme-reviewers,tabbrowser-reviewers,sidebar-reviewers,jsudiaman

Comment 9

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/5934eb172248