gui: Replace JS select-on-click with CSS user-select (fixes #3868)

[tomasz1986]

Currently, a custom JS script is used to select the whole device ID on click. However, the current script isn't compatible with all browsers (and in IE in particular), making it impossible to select the ID in them at all. Additionally, the same functionality is already available in CSS with no such drawbacks, as the whole selection process is handled by the Web browser natively, which is lightweight and does not require custom code.

Thus, remove the currently used JS script completely, replacing it with a new CSS class that can be added to an element when required. If the browser does not support the CSS, the user can still select the element manually, which makes it safer than the current behaviour that can block the user from being able to select the element at all.

Signed-off-by: Tomasz Wilczyński twilczynski@naver.com

[wweich]

I'm not aware that we use any kind of auto-prefix for CSS, so for this to work in any Safari version and IE 10+, we need vendor prefixes.

[tomasz1986]

It doesn't seem that any prefixes are needed for the current version Safari when it comes to user-select: all specifically (see https://caniuse.com/mdn-css_properties_user-select_all). I could add webkit-user-select to support older versions of the browser though. Is it worth it?

As for IE, my idea here is just not to support it at all. The automatic selection is a non-essential feature, as the user can simply double click (or Ctrl+Click in IE) to select the whole string anyway. On the other hand, the current script actually prevents the IE user from any selection at all, which is much worse.

Basically, the clue of this PR is to support modern browsers while not breaking anything in the old ones.

[acolomb]

Haven't tested myself, but the changes look OK and it's going in the right direction. Great work and thanks for finding that solution!

[bt90]

Just my two cents but IE support should be best effort only. Microsoft is dropping support for it left, right and center. I don't see a reason to avoid making things better for the 99% of the userbase only to drag along a legacy browser.

[tomasz1986]

It's still the only browser available by default on some editions of Windows (out of which Windows Server is probably the main culprit). On those systems, the browser is going to receive security updates until 2029-32, so while heavily outdated, it's probably much more secure than, for example, the similarly old and outdated WebView that's used on Android 4.x to display the Web GUI.

For the record, the commit here isn't doing anything special to support IE itself. It just moves the code to a more modern CSS solution. Fixing the IE-specific issue is only a byproduct of dropping the JS script.

[acolomb]

I just noticed a strange behavior with this change when using WebKit as renderer. It doesn't respect the new select-on-click behavior, but normally one can still select a "whole paragraph" by using triple-click. That however selects two additional line breaks (observed when copy-pasting the text) and looks quite disturbing, as seen here:

I tried replacing the <div> element with a proper paragraph <p>, but that doesn't change anything. Any idea what might be going wrong there?

Tested with my gnome-shell Syncthing icon extension, which uses WebKit, and with the GNOME Epiphany browser based on the same library.

[tomasz1986]

I can reproduce using Otter Browser in Windows, which also uses the WebKit engine. This looks like a browser/engine bug, to be honest, but I will check if anything could be done to work around it.

[tomasz1986]

I've given this a shot, but this seems to be how WebKit, at least in these browsers, applies double click selection. The same thing happens with all other elements, e.g.

I doubt anything can be done about it on the Syncthing side. The good thing is that even if you copy it with the line break, you can still paste it into Syncthing when adding a new device, and the ID will be recognised properly.

Edit:

I will maybe add -webkit-user-select: all; to the CSS, as this makes the automatic selection work (without selecting more than necessary) in those WebKit browsers that don't support just user-select yet.

[acolomb]

Thanks @tomasz1986 for looking into this. I'd say adding the WebKit-specific attribute sounds like a good and easy fix.