1757827 - Windows 11 overlay scrollbars look a bit odd / are too spaced from the content edge.

Status: VERIFIED FIXED

(Core :: Widget: Win32, defect)

Description

[Emilio Cobos Álvarez [:emilio]]

Attachment: Settings vs. Firefox scrollbars

Comment 1

[Emilio Cobos Álvarez [:emilio]]

Attachment: Scrollbar style playground

Comment 2

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1757827 - Improve win11 overlay scrollbars. r=saschanaz,spohl,cmartin

Tweaks are:

• Round the scrollbar track (when visible, which is almost never).
• Make the scrollbar thinner.
• Move the thumb closer to the edge.

All these changes match closer the Windows 11 style, and there are no changes
for other existing styles.

Comment 3

[Kagami Rosylight [:saschanaz] (they/them)]

Attachment: image.png

I tried the patch, and two things:

1. It seems the scrollbar in the Settings app gets 6px from the border while on Firefox it gets 4px (in 200% scale).
2. The background color looks darker on Firefox. It's quite gray on the Settings and Calculator app.

Edit: the roundness looks also a bit different.

Comment 4

[Kagami Rosylight [:saschanaz] (they/them)]

Attachment: image.png

The arrow also looks bigger on the Settings app.

Edit: Firefox immediately hides the scrollbar background when the mouse leaves but the Settings app waits a few seconds. Probably can be tackled separately.

Comment 5

[Emilio Cobos Álvarez [:emilio]]

(In reply to Kagami :saschanaz from comment #3)

1. It seems the scrollbar in the Settings app gets 6px from the border while on Firefox it gets 4px (in 200% scale).

Fair, I can tweak that.

1. The background color looks darker on Firefox. It's quite gray on the Settings and Calculator app.

That's not changed by my patch, and scrollbar colors are a bit tricky. They're semi-transparent intentionally so color depends on the background (and settings has a lighter background than bugzilla). So I'd rather not change that as part of this patch.

Edit: the roundness looks also a bit different.

That was intentional, I'm not quite sure how to achieve that effect but also it just looks worse imo. Anyways given those are just cosmetic and not introduced by the patch would you be fine potentially tacking those separately? I'll fix the spacing before landing tho.

Comment 6

[Kagami Rosylight [:saschanaz] (they/them)]

Anyways given those are just cosmetic and not introduced by the patch would you be fine potentially tacking those separately? I'll fix the spacing before landing tho.

👍

Comment 7

[Kagami Rosylight [:saschanaz] (they/them)]

The arrow also looks bigger on the Settings app.

But this one should probably be tweaked in this patch, right?

Comment 8

[Emilio Cobos Álvarez [:emilio]]

Hmm, maybe? Is it a regression from this patch? I guess it might, because we scale the arrow down when making the scrollbar thinner... I'll look

Comment 9

[Kagami Rosylight [:saschanaz] (they/them)]

Attachment: image.png

I think it is, since the size is similar in the current Nightly.

Comment 10

[Emilio Cobos Álvarez [:emilio]]

Ok, not on windows now but will try to address tomorrow.

Comment 11

[Emilio Cobos Álvarez [:emilio]]

Ok I think it should match now. We grow a bit the arrow on hover which Windows settings doesn't but that is also pre-existing.

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/044faec13867
Improve win11 overlay scrollbars. r=saschanaz,cmartin

Comment 13

[Stephen A Pohl [:spohl]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #11)

We grow a bit the arrow on hover which Windows settings doesn't but that is also pre-existing.

This was to match the behavior in Edgium when the Win11 scrollbars were first implemented. As the Windows 11 and/or the Edgium scrollbars mature, this is certainly something that we can revisit.

Comment 14

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/044faec13867

Comment 15

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

Seen the scrollbar from Firefox 99.0a1 (2022-03-02) vs the one in the settings from Windows 11.

The updated scrollbar is in place on Firefox 100.0a1 (2022-03-29) on the same machine.