scrollable_urlbar_popup: icons and thin scrollbar

[Dupond]

Hello!

Using the scrollable_urlbar_popup.css code, I encounter 2 issues since the release of Firefox 122 (using Arch Linux with the default "auto" Firefox theme):

1. because of scrollbar-width: thin the scroll bar is not visible by default, until you hover over it with the mouse cursor; so it is visually impossible to tell whether the list is scrollable or not;

2. the icon showing the type of the item (I mean, for example, the little blue star displayed above the favicon to show that the item is a bookmark) doesn't scroll with the rest of the list anymore. I've solved this one using .urlbarView-no-wrap { position: relative; }

Thanks for your help!

[MrOtherGuy]

It sounds like you get overlay scrollbar on the results list. Is it really so that on your system scrollbars also become overlay whenever scrollbar-width is set to thin? That's really unexpected, but nonetheless, if your system behaves that way, we don't really want to change that.

To put it another way, we only set the scrollbar width to thin because the full scrollbar looks kinda off in the relatively narrow popup. But whether or not scrollbars display as overlay should be up to your system and more importantly the scrollbar-width property shouldn't affect it in any way.

Good catch about the icon alignment though. I've added it to the style in e5764ac

[Dupond]

Thanks for the fix!

Is it really so that on your system scrollbars also become overlay whenever scrollbar-width is set to thin?

I don't know; is there a way to confirm this?

That's really unexpected, but nonetheless, if your system behaves that way, we don't really want to change that.

Well, I'd have liked to fix it in this case, since I never know whether the list can be scrolled or not before I hold the mouse and try to scroll it; this is annoying... and it also doesn't reserve some space on the right for the scroll bar, so it's displayed on top of the end of the url; of course I could add a padding-right on #urlbar-results, but then I would have some empty space even when the list can't be scrolled... and I would still be unable to visually tell whether the list can be scrolled or not.

[MrOtherGuy]

I can't think of another way to test this except experimentally:

1. What kind of scrollbars do you normally have in web sites? Say https://en.wikipedia.org/wiki/Main_Page ?
2. Go to this website: https://mrotherguy.github.io/fx-nightly-changelog/ - this is my site, so I know it sets scrollbar-width: thin

If you get normal "wide" static scrollbars on wikipedia, but thin overlay scrollbars on the other site, then I can't but to conclude that on your system thin scrollbars also become drawn as overlay.

[Dupond]

Mmmm... On your website the scrollbar is thin, but I'm still not sure how to tell if it's an overlay scrollbar or a normal one: on both sites the scrollbar disappears after 2 or 3 seconds of inactivity, and only reappear if I move the mouse... unless I set the layout.testing.overlay-scrollbars.always-visible pref to true in about:config, in which case they are both static and even the thin one never disappears. But this pref doesn't apply to the scrollbar in the address list; even when the pref is set to true the scrollbar set by scrollable_urlbar_popup.css only appears if I hover over it with the mouse cursor.

[MrOtherGuy]

Okay. That sounds like on your system you just have overlay scrollbars and it doesn't matter if they are thin or not. "Normal" static scrollbar behaves such that it reserves space from the content area. The implicit problem with overlay scrollbars is that they are drawn covering content area (as an overlay). Thus, it kinda has to be hidden because otherwise it would cover the stuff at the edge all the time - now it covers that stuff only if you are using the scrollbar.

The choice about if the user wants to have overlay scrollbars or not is left to the browser (which might derive it from the host OS settings) - this style should force it either way. In fact, CSS cannot force overlay or static scrollbars.

So, if you want static scrollbars you should change that in your OS settings if you can. There might be some prefs in about:config that would also affect this. Perhaps by setting ui.useOverlayScrollbars to 0 might work? These prefs can very much behave differently between operating systems though, but with that pref set to 1 I seem to be able to make Firefox use overlay scrollbars on Win10 so that's something.

At any rate, the choice of using static vs. overlay scrollbars isn't something this style should (or indeed could) do.

[Dupond]

Perhaps by setting ui.useOverlayScrollbars to 0 might work?

Yep! It works. I didn't know about this pref; it's a hidden one (it doesn't exist by default, but you can create it).

At any rate, the choice of using static vs. overlay scrollbars isn't something this style should (or indeed could) do.

Right; thanks for your detailed explanations!

[MrOtherGuy]

Great stuff!

I should say that there are some scrollbars in Firefox' UI that CSS can affect like that of bookmarks and history sidebars, but urlbar popup is not one of them, and the main point is that the choice is nor for this style to make.