Ubuntu overlay scrollbars

[alexwhitman]

In Gnome terminal the overlay scrollbar is minimal until mouse over. The overlay scrollbar in Terminix is always expanded. For consistency it would be good if the Terminix scroll bar was the same.

[gnunn1]

I'll have a look, I know Ubuntu has some custom patches for various Gnome applications, I wonder if this is one of them?

[gnunn1]

Yep, looks like an Ubuntu specific patch:

https://bugs.launchpad.net/ubuntu/+source/gnome-terminal/+bug/1493964
https://bugzilla.gnome.org/show_bug.cgi?id=754796

[gnunn1]

@alexwhitman I added some commented out code just to play with this a bit and see what sort of results I could get with a quick and dirty change to the scrollbar background color. On Adwaita it actually looks great when not using the theme background color, on Unity/Ambiance it's only a slight improvement, I suspect that it would need quite a lot of CSS tweaking to get it looking good.

If you have any interest in playing with this, the code and comments are at line 1092 in terminal.d.

[gnunn1]

Actually one thing I forgot to check is how does it look if the user changes the theme to Adwaita/Numix/etc. If it looks fine, any specific tweaks to make this look better can't just check that it is running Unity but also check the active theme is Adwaita/Radiance.

If it can be fixed purely with CSS, the solution might be to create an ambiance version of the existing Terminix Adwaita CSS file and load the right one based on the running theme.

[alexwhitman]

@gnunn1 Could you upload a screenshot of what you see with this change? I've changed the compile flag and recompiled but I don't see any difference.

[gnunn1]

@alexwhitman This is on Ubuntu 16.04, with the flag set to false:

With the flag set to true:

Obviously, this is not a night and day difference but I just wanted to POC this a bit to see what would be involved in styling it with some CSS. On Adwaita it works quite well though I noticed that the background seems to be drawn more solid then transparent which you can also see in Ubuntu in the screenshots above.

[gnunn1]

@alexwhitman I think I'm pretty much there on Ubuntu 16.04, you can try it out yourself by setting the compile flag STYLE_TERMINAL_SCROLLBAR in constants.d to true. Here is what it looks like on my VM:

The terminal on the left I'm holding the mouse over it so it has popped out, the one on the right is the reduced size.

I also find this looks much better in Adwaita as well though there is a bit of tweaking between the two to get them to both work from the same code:

Notice the scrollbar background is the same color as the terminal and transparent instead of using the theme color as the background.

Still some work required on this before I feel comfortable turning that style flag on by default including:

a, Support Radiance as well as Ambiance
b. Test on older versions of GTK (i'm using 3.20 Adwaita)
c. Test with some of the better known themes such as Vertex and Arc

[alexwhitman]

I haven't had a chance to test this yet but the screenshots look good, thanks.

[gnunn1]

This is feature complete now and seems to be working fine so I've mainlined it and removed the compile flag to activate it. In addition to fixing this, I also added support for theme specific CSS to give opportunities to adjust issues in theme specific cases. I've tested with different themes and because it requires a theme specific CSS file to activate it doesn't affect themes like Adapta or Vertex.

In terms of older GTK versions, I tested on 3.18 and 3.14. For 3.18 the CSS selector had to be adjusted, 3.14 fails completely since it doesn't seem to support selecting based on node. I could fix this by making it use a versioned CSS resource but you have to draw a line somewhere.

I debated about adding a preference option for this but opted to leave it on as the default to start and see if there are any issues with it as I'd prefer not having options just for the sake of it.

In addition to beautifying Ubuntu scrollbars, it also makes the Adwaita scrollbars much better looking as well as per the screenshots above.

[alexwhitman]

Just tested this, looks great. Thanks 👍