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

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>

4 files changed, 5 insertions, 16 deletions

diff --git a/gui/default/assets/css/overrides.css b/gui/default/assets/css/overrides.css
index b5b0de59e8..7033d8e369 100644
--- a/gui/default/assets/css/overrides.css
+++ b/gui/default/assets/css/overrides.css
@@ -516,3 +516,7 @@ html[lang="ja"] i,
 html[lang|="ko"] i {
     font-style: normal;
 }
+
+.select-on-click {
+    user-select: all;
+}
diff --git a/gui/default/index.html b/gui/default/index.html
index 08266f50e9..664c8f37fa 100644
--- a/gui/default/index.html
+++ b/gui/default/index.html
@@ -994,7 +994,6 @@
   <script type="text/javascript" src="syncthing/core/notificationDirective.js"></script>
   <script type="text/javascript" src="syncthing/core/pathIsSubDirDirective.js"></script>
   <script type="text/javascript" src="syncthing/core/popoverDirective.js"></script>
-  <script type="text/javascript" src="syncthing/core/selectOnClickDirective.js"></script>
   <script type="text/javascript" src="syncthing/core/syncthingController.js"></script>
   <script type="text/javascript" src="syncthing/core/tooltipDirective.js"></script>
   <script type="text/javascript" src="syncthing/core/uncamelFilter.js"></script>
diff --git a/gui/default/syncthing/core/selectOnClickDirective.js b/gui/default/syncthing/core/selectOnClickDirective.js
deleted file mode 100644
index a3802b58ba..0000000000
--- a/gui/default/syncthing/core/selectOnClickDirective.js
+++ /dev/null
@@ -1,14 +0,0 @@
-angular.module('syncthing.core')
-    .directive('selectOnClick', function ($window) {
-        return {
-            link: function (scope, element, attrs) {
-                element.on('click', function () {
-                    var selection = $window.getSelection();
-                    var range = document.createRange();
-                    range.selectNodeContents(element[0]);
-                    selection.removeAllRanges();
-                    selection.addRange(range);
-                });
-            }
-        };
-    });
diff --git a/gui/default/syncthing/device/idqrModalView.html b/gui/default/syncthing/device/idqrModalView.html
index 9587b04b49..24f8da0e70 100644
--- a/gui/default/syncthing/device/idqrModalView.html
+++ b/gui/default/syncthing/device/idqrModalView.html
@@ -1,6 +1,6 @@
 <modal id="idqr" status="info" icon="fas fa-qrcode" heading="{{'Device Identification' | translate}} - {{deviceName(currentDevice)}}" large="yes" closeable="yes">
   <div class="modal-body">
-    <div class="well well-sm text-monospace text-center" select-on-click>{{currentDevice.deviceID}}</div>
+    <div class="well well-sm text-monospace text-center select-on-click">{{currentDevice.deviceID}}</div>
     <img ng-if="currentDevice.deviceID" class="center-block img-thumbnail" ng-src="qr/?text={{currentDevice.deviceID}}" alt="qr code" />
   </div>
   <div class="modal-footer">