Make default position of debugger to center

Author: KOSHINOawa

src/addons/addons/debugger/style.css

@@ -35,8 +35,10 @@
   z-index: 492;
   background-color: var(--ui-modal-background);
   color: var(--ui-modal-foreground);
-  width: 565px;
+  width: 705px;
   height: 25rem;
+  top: calc(50% - 12.5rem); /* 25rem / 2 */
+  left: calc(50% - 352.5px); /* 705px / 2 */
   resize: both;
   padding-bottom: 10px;
   min-width: 350px;

src/addons/addons/debugger/userscript.js

@@ -132,10 +132,11 @@ export default async function ({ addon, console, msg }) {
     }
   };
 
-  let mouseOffsetX = 0;
-  let mouseOffsetY = 0;
-  let lastX = 0;
-  let lastY = 0;
+  let mouseOffsetX = 50;
+  let mouseOffsetY = 50;
+  let lastX = window.innerWidth / 2;
+  let lastY = window.innerHeight / 2;
+  let hasBeenDragged = false;
   const handleStartDrag = (e) => {
     e.preventDefault();
     mouseOffsetX = e.clientX - interfaceContainer.offsetLeft;
@@ -161,10 +162,13 @@ export default async function ({ addon, console, msg }) {
   };
   const handleDragInterface = (e) => {
     e.preventDefault();
+    hasBeenDragged = true;
     moveInterface(e.clientX, e.clientY);
   };
   window.addEventListener("resize", () => {
-    moveInterface(lastX, lastY);
+    if (hasBeenDragged) {
+      moveInterface(lastX, lastY);
+    }
   });
   interfaceHeader.addEventListener("mousedown", handleStartDrag);