Update the size of the scrollbar for the editor on touchscreen devices

[m4gr3d]

Add a theme usability setting which updates the touch area of UI elements (e.g: scrollbar) for the editor on touchscreen devices.
This PR updates the scroll dimension to improve the scrolling experience on touchscreen.

3.x version

[EricEzaM]

I don't know what the current state of using /editor in /scene is like, but FYI:
#29730
#53295 (comment)

[akien-mga]

I wonder if this could be set via the editor theme instead? CC @YuriSizov @Calinou

[m4gr3d]

I wonder if this could be set via the editor theme instead? CC @YuriSizov @Calinou

@akien-mga I tried that approach first, and the current theming options for the scrollbar do not allow to control its width/height.

I can look into adding a scroll_size theme option if that's the preferred approach. That'd help with avoiding the dependency on editor.

[YuriSizov]

the current theming options for the scrollbar do not allow to control its width/height.

You should be able to with the margins of the scroll stylebox, but for some reason we use StyleBoxTexture here, which has some weird behavior in that regard. I'm not sure why we still use a texture stylebox in the editor theme, so that's probably something to fix first. Granted, even with a texture the stylebox should be responsible for controlling the minimum size, so maybe that's also worth fixing.

I recall there was some recent talk, a proposal, or maybe even a PR about these stylebox size values. I'll try to look it up.
Edit: Found it godotengine/godot-proposals#5903

[m4gr3d]

the current theming options for the scrollbar do not allow to control its width/height.

You should be able to with the margins of the scroll stylebox, but for some reason we use StyleBoxTexture here, which has some weird behavior in that regard. I'm not sure why we still use a texture stylebox in the editor theme, so that's probably something to fix first. Granted, even with a texture the stylebox should be responsible for controlling the minimum size, so maybe that's also worth fixing.

I recall there was some recent talk, a proposal, or maybe even a PR about these stylebox size values. I'll try to look it up.

I played around for a couple hours with the margins on the StyleBoxTexture, but I was still unable to achieve the result of setting a larger custom minimum size for the scroll bar (also used the theme editor to quickly try different margin values).
I also tried switching and experimenting with StyleBoxFlat, but it seems to have fixed dimensions that are not configurable.

[YuriSizov]

It's accounted for here:

godot/scene/gui/scroll_bar.cpp

Lines 496 to 519 in 14fdd28

	Size2 ScrollBar::get_minimum_size() const {
	Ref<Texture2D> incr = theme_cache.increment_icon;
	Ref<Texture2D> decr = theme_cache.decrement_icon;
	Ref<StyleBox> bg = theme_cache.scroll_style;
	Size2 minsize;
	if (orientation == VERTICAL) {
	minsize.width = MAX(incr->get_size().width, (bg->get_minimum_size() + bg->get_center_size()).width);
	minsize.height += incr->get_size().height;
	minsize.height += decr->get_size().height;
	minsize.height += bg->get_minimum_size().height;
	minsize.height += get_grabber_min_size();
	}
	if (orientation == HORIZONTAL) {
	minsize.height = MAX(incr->get_size().height, (bg->get_center_size() + bg->get_minimum_size()).height);
	minsize.width += incr->get_size().width;
	minsize.width += decr->get_size().width;
	minsize.width += bg->get_minimum_size().width;
	minsize.width += get_grabber_min_size();
	}
	return minsize;
	}

The problem is that this takes a sum of the min size of the stylebox (which is just its margins) and the center size. Normally, the center size doesn't do anything, but in the StyleBoxTexture it is computed as the size of the texture minus the min size. So the resulting size for the scrollbar becomes min_size + (texture_size - min_size) = texture_size. That seems to be very much incorrect as it removes any kind of control. (Edit: I have found the aforementioned discussion about those methods, godotengine/godot-proposals#5903, and indeed, it seems to be a hack for this specific case, but it's not done correctly).

It should work just fine with just margins if it's StyleBoxFlat though. Not sure what could've been a problem.

[YuriSizov]

I made #71686, which should make it possible to properly implement this.

[Calinou]

Could we keep the scrollbars visually as thin as they were before, but increase their draggable area (e.g. using expand/content margin)? It'd probably look better.

[m4gr3d]

Could we keep the scrollbars visually as thin as they were before, but increase their draggable area (e.g. using expand/content margin)? It'd probably look better.

@Calinou It's bad UX for touchscreen devices as it creates confusion for the user:

• The target UI element is obscured by the user's finger on interaction, so it needs to be large enough visually so the user can properly assess whether they're touching it.
• The scrollbars being visually thin also means that neighboring UI elements may occupy the area that falls within the the scrollbar's draggable area. This creates confusion when the user attempts to interact with those UI elements.

Also, I'm not sure if there's capability for that. The expand margins do the opposite, i.e: they keep the draggable/touch area the same but expand the render area (see https://docs.godotengine.org/en/stable/classes/class_styleboxflat.html#class-styleboxflat-property-expand-margin-bottom).

I took the approach of providing a new TouchScreen theme to provide users with flexibility. Users can keep the Default theme if they want the current look for the scrollbar, or switch to the TouchScreen theme if they're having difficulty interacting with the scrollbars on a touchscreen device.

[YuriSizov]

I took the approach of providing a new TouchScreen theme to provide users with flexibility.

It's probably better as a settings flag that affects any theme, so you can still pick any default theme, or choose your own colors, while keeping this accessibility feature available.

[m4gr3d]

I took the approach of providing a new TouchScreen theme to provide users with flexibility.

It's probably better as a settings flag that affects any theme, so you can still pick any default theme, or choose your own colors, while keeping this accessibility feature available.

Sounds like a good option! I'll update the PR.

[akien-mga]

I'll check but this might make it appear on my Linux laptop with touchscreen, which would be unwanted.
We probably want to use the same criteria as for the 3D viewport touch sticks.

[m4gr3d]

The setting uses the same default as the 3D viewport touch sticks.

[akien-mga]

Alright, it seems DisplayServer::is_touchscreen_available() is only implemented on Android, iOS and Web currently.

I think if/when it gets properly implemented on other platforms we might start getting complaints about those. We should probably rethink that eventually and see if we should differentiate between supporting and preferring touchscreen input.

$ rg ::is_touchscreen_available
servers/display_server.cpp
389:bool DisplayServer::is_touchscreen_available() const {
658:    ClassDB::bind_method(D_METHOD("is_touchscreen_available"), &DisplayServer::is_touchscreen_available, DEFVAL(SCREEN_OF_MAIN_WINDOW));

platform/ios/display_server_ios.mm
581:bool DisplayServerIOS::is_touchscreen_available() const {

platform/android/display_server_android.cpp
239:bool DisplayServerAndroid::is_touchscreen_available() const {

platform/web/display_server_web.cpp
591:bool DisplayServerWeb::is_touchscreen_available() const {

[YuriSizov]

Theme changes look fine.

[akien-mga]

Thanks!