[mv3] Prevent scrolling taking over moving dialog in picker

gorhill · gorhill · commit 2d2de3a53b11 · 2025-08-06T13:20:18.000-04:00
diff --git a/platform/mv3/extension/js/tool-overlay-ui.js b/platform/mv3/extension/js/tool-overlay-ui.js
@@ -48,9 +48,8 @@ export const toolOverlay = {
             };
             this.moveable = qs$('aside:has(#move)');
             if ( this.moveable !== null ) {
-                dom.on('aside #move', 'pointerdown', ev => {
-                    this.mover(ev);
-                });
+                dom.on('aside #move', 'pointerdown', ev => { this.mover(ev); });
+                dom.on('aside #move', 'touchstart', this.eatTouchEvent);
             }
             this.onMessage({ what: 'startTool',
                 url: msg.url,
@@ -180,7 +179,10 @@ export const toolOverlay = {
         this.moverCX0 = rect.x + rect.width / 2;
         this.moverCY0 = rect.y + rect.height / 2;
         dom.cl.add(this.moveable, 'moving');
-        self.addEventListener('pointermove', this.moverMoveAsync, { capture: true });
+        self.addEventListener('pointermove', this.moverMoveAsync, {
+            passive: true,
+            capture: true,
+        });
         self.addEventListener('pointerup', this.moverStop, { capture: true, once: true });
         ev.stopPropagation();
         ev.preventDefault();
@@ -209,7 +211,6 @@ export const toolOverlay = {
         }
     },
     moverMoveAsync(ev) {
-        if ( toolOverlay.moverTimer !== undefined ) { return; }
         if ( toolOverlay.moverIsTouch ) {
             const touch = ev.touches[0];
             toolOverlay.moverX1 = touch.pageX;
@@ -218,18 +219,27 @@ export const toolOverlay = {
             toolOverlay.moverX1 = ev.pageX;
             toolOverlay.moverY1 = ev.pageY;
         }
+        if ( toolOverlay.moverTimer !== undefined ) { return; }
         toolOverlay.moverTimer = self.requestAnimationFrame(( ) => {
             toolOverlay.moverMove();
         });
     },
     moverStop(ev) {
         if ( dom.cl.has(toolOverlay.moveable, 'moving') === false ) { return; }
         dom.cl.remove(toolOverlay.moveable, 'moving');
-        self.removeEventListener('pointermove', toolOverlay.moverMoveAsync, { capture: true });
+        self.removeEventListener('pointermove', toolOverlay.moverMoveAsync, {
+            passive: true,
+            capture: true,
+        });
         ev.target.releasePointerCapture(ev.pointerId);
         ev.stopPropagation();
         ev.preventDefault();
     },
+    eatTouchEvent(ev) {
+        if ( ev.target !== qs$('aside #move') ) { return; }
+        ev.stopPropagation();
+        ev.preventDefault();
+    },
     moveable: null,
     moverIsTouch: false,
     moverX0: 0, moverY0: 0,
