fix UX issues in move debugger (#640)

* fix UX issues in move debugger

* fix(debug): Don’t toggle debugger pane while debugger is hidden

* fix(debug): Don’t activate move hotkey if Ctrl/Cmd key is pressed

Co-authored-by: delucis <[email protected]>

Author: nicolodavis

src/client/debug/Debug.svelte

@@ -30,10 +30,13 @@
 
   let visible = true;
   function Keypress(e) {
+    // Toggle debugger visibilty
     if (e.key == '.') {
       visible = !visible;
       return;
     }
+    // Set displayed pane
+    if (!visible) return;
     Object.entries(panes).forEach(([key, { shortcut }]) => {
       if (e.key == shortcut) {
         pane = key;

src/client/debug/main/Hotkey.svelte

@@ -23,7 +23,11 @@
   }
 
   function Keypress(e) {
-    if (!$disableHotkeys && !disable && e.key == value) {
+    if (
+      !$disableHotkeys && !disable &&
+      !e.ctrlKey && !e.metaKey &&
+      e.key == value
+    ) {
       e.preventDefault();
       Activate();
     }

src/client/debug/main/InteractiveFunction.svelte

@@ -43,6 +43,8 @@
 
 <style>
   .move {
+    display: flex;
+    flex-direction: row;
     cursor: pointer;
     margin-left: 10px;
     color: #666;
@@ -69,10 +71,14 @@
 </style>
 
 <div class="move" class:active on:click={Activate}>
-  {name}(<span
+  <span>{name}</span>
+  <span>(</span>
+  <span
     class="arg-field"
     bind:this={span}
     on:blur={Deactivate}
+    on:keypress|stopPropagation={() => {}}
     on:keydown={OnKeyDown}
-    contentEditable />)
+    contentEditable />
+  <span>)</span>
 </div>