From 268e25fc386d6aa3ddb61bf57d582f72e5103cba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomasz=20Wilczy=C5=84ski?= <twilczynski@naver.com>
Date: Fri, 16 Sep 2022 15:11:05 +0200
Subject: [PATCH] gui: Replace JS select-on-click with CSS user-select (fixes
 #3868)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 gui/default/assets/css/overrides.css               |  4 ++++
 gui/default/index.html                             |  1 -
 .../syncthing/core/selectOnClickDirective.js       | 14 --------------
 gui/default/syncthing/device/idqrModalView.html    |  2 +-
 4 files changed, 5 insertions(+), 16 deletions(-)
 delete mode 100644 gui/default/syncthing/core/selectOnClickDirective.js

diff --git a/gui/default/assets/css/overrides.css b/gui/default/assets/css/overrides.css
index b5b0de59e8a..7033d8e3690 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 08266f50e96..664c8f37fa4 100644
--- a/gui/default/index.html
+++ b/gui/default/index.html
@@ -994,7 +994,6 @@ <h4 class="panel-title">
   <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 a3802b58ba0..00000000000
--- 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 9587b04b493..24f8da0e701 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">