From 3159eeceecc3b59abed33450b5c5e3d6ad19abe6 Mon Sep 17 00:00:00 2001
From: "irvingouj@Devolutions" <jou@devolutions.net>
Date: Tue, 25 Mar 2025 18:09:48 -0400
Subject: [PATCH] fix(web): fix firefox selection issue (#708)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Benoît CORTIER <git.divisible626@passmail.com>
---
 .../src/iron-remote-gui.svelte                |  7 +++
 .../src/lib/login/login.svelte                |  2 +-
 .../lib/remote-screen/remote-screen.svelte    | 60 ++++++++++++-------
 3 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/web-client/iron-remote-gui/src/iron-remote-gui.svelte b/web-client/iron-remote-gui/src/iron-remote-gui.svelte
index af261776..5c833701 100644
--- a/web-client/iron-remote-gui/src/iron-remote-gui.svelte
+++ b/web-client/iron-remote-gui/src/iron-remote-gui.svelte
@@ -716,6 +716,9 @@
                 }}
                 oncontextmenu={(event) => event.preventDefault()}
                 onwheel={mouseWheel}
+                onselectstart={(event) => {
+                    event.preventDefault();
+                }}
                 id="renderer"
                 tabindex="0"
             ></canvas>
@@ -738,6 +741,10 @@
         height: 100%;
     }
 
+    ::selection {
+        background-color: transparent;
+    }
+
     .screen-wrapper.hidden {
         pointer-events: none !important;
         position: absolute !important;
diff --git a/web-client/iron-svelte-client/src/lib/login/login.svelte b/web-client/iron-svelte-client/src/lib/login/login.svelte
index 679fc0b6..de66873b 100644
--- a/web-client/iron-svelte-client/src/lib/login/login.svelte
+++ b/web-client/iron-svelte-client/src/lib/login/login.svelte
@@ -140,7 +140,7 @@
                     });
                     return of(null);
                 }),
-                filter((result) => !!result),
+                filter((result) => result !== null && result !== undefined), // Explicitly checking for null/undefined
             )
             .subscribe((start_info: NewSessionInfo | null) => {
                 if (start_info != null && start_info.initial_desktop_size !== null) {
diff --git a/web-client/iron-svelte-client/src/lib/remote-screen/remote-screen.svelte b/web-client/iron-svelte-client/src/lib/remote-screen/remote-screen.svelte
index 3e31e2b6..4da223ef 100644
--- a/web-client/iron-svelte-client/src/lib/remote-screen/remote-screen.svelte
+++ b/web-client/iron-svelte-client/src/lib/remote-screen/remote-screen.svelte
@@ -6,6 +6,7 @@
 
     let uiService: UserInteraction;
     let cursorOverrideActive = false;
+    let showDebugPanel = false;
 
     userInteractionService.subscribe((uis) => {
         if (uis != null) {
@@ -60,27 +61,44 @@
 </script>
 
 <div style="display: flex; height: 100%; flex-direction: column; background-color: #2e2e2e;" class:hideall={$showLogin}>
-    <div style="text-align: center; padding: 10px; background: black;">
-        <button on:click={() => uiService.setScale(1)}>Fit</button>
-        <button on:click={() => uiService.setScale(2)}>Full</button>
-        <button on:click={() => uiService.setScale(3)}>Real</button>
-        <button on:click={() => uiService.ctrlAltDel()}>Ctrl+Alt+Del</button>
-        <button on:click={() => uiService.metaKey()}
-            >Meta
-            <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 512 512"
-                ><title> ionicons-v5_logos</title>
-                <path d="M480,265H232V444l248,36V265Z" />
-                <path d="M216,265H32V415l184,26.7V265Z" />
-                <path d="M480,32,232,67.4V249H480V32Z" />
-                <path d="M216,69.7,32,96V249H216V69.7Z" />
-            </svg>
-        </button>
-        <button on:click={() => toggleCursorKind()}>Toggle cursor kind</button>
-        <button on:click={() => uiService.shutdown()}>Terminate Session</button>
-        <label style="color: white;">
-            <input on:click={(e) => onUnicodeModeChange(e)} type="checkbox" />
-            Unicode keyboard mode
-        </label>
+    <div>
+        <div style="text-align: center; padding: 10px; background: black;">
+            <button on:click={() => (showDebugPanel = !showDebugPanel)}>Toggle debug panel</button>
+            <button on:click={() => uiService.setScale(1)}>Fit</button>
+            <button on:click={() => uiService.setScale(2)}>Full</button>
+            <button on:click={() => uiService.setScale(3)}>Real</button>
+            <button on:click={() => uiService.ctrlAltDel()}>Ctrl+Alt+Del</button>
+            <button on:click={() => uiService.metaKey()}
+                >Meta
+                <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 512 512"
+                    ><title> ionicons-v5_logos</title>
+                    <path d="M480,265H232V444l248,36V265Z" />
+                    <path d="M216,265H32V415l184,26.7V265Z" />
+                    <path d="M480,32,232,67.4V249H480V32Z" />
+                    <path d="M216,69.7,32,96V249H216V69.7Z" />
+                </svg>
+            </button>
+            <button on:click={() => toggleCursorKind()}>Toggle cursor kind</button>
+            <button on:click={() => uiService.shutdown()}>Terminate Session</button>
+            <label style="color: white;">
+                <input on:click={(e) => onUnicodeModeChange(e)} type="checkbox" />
+                Unicode keyboard mode
+            </label>
+        </div>
+
+        {#if showDebugPanel}
+            <div id="debug-panel" style="background: black; color: white; padding: 10px;">
+                debug-panel
+                <input
+                    type="text"
+                    id="debug-panel-input"
+                    style="width: 100%; height: 100%; background: black; color: white;"
+                    placeholder="see if focus moves correctly"
+                />
+
+                <p>see if text selection works correctly</p>
+            </div>
+        {/if}
     </div>
     <iron-remote-gui debugwasm="INFO" verbose="true" scale="fit" flexcenter="true" />
 </div>