From 5baf5fedb5bf3acacc8eb5874a4ed10efd3effb8 Mon Sep 17 00:00:00 2001
From: tomasz1986 <twilczynski@naver.com>
Date: Tue, 20 Sep 2022 11:37:34 +0200
Subject: [PATCH] gui: Replace JS select-on-click with CSS user-select (fixes
 #3868) (#8544)
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 b5b0de59e..7033d8e36 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 08266f50e..664c8f37f 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 a3802b58b..000000000
--- 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 9587b04b4..24f8da0e7 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">