From 7b5eb1f46ee75083326408f3dc1e1cb6a67d865f Mon Sep 17 00:00:00 2001
From: TW <huangsanshui666@gmail.com>
Date: Mon, 13 Jul 2026 21:19:26 +0800
Subject: [PATCH 1/2] fix: keep result panel interactions working across
 iframes

- Cover page content with a transparent shield while the result panel is dragged or resized.
- Forward child-frame mouse input so unpinned panels keep click-away behavior.
- Add regression coverage for shield activation, frame routing, and extension controls.
---
 .../src/background/background.js              |   3 +-
 .../src/background/library/frame_events.js    |  27 +++++
 .../src/common/scripts/frame_events.js        |   2 +
 .../display/library/moveable/resizable.js     |   1 +
 .../src/content/display/panel/PanelView.jsx   |   2 +
 .../display/panel/panel_drag_shield.js        |  21 ++++
 .../content/display/panel/panel_handlers.js   |  11 ++
 .../content/display/panel/panel_runtime.js    |   9 +-
 .../src/content/display/panel/panel_styles.js |  13 +++
 .../display/panel/use_result_panel_model.js   |  10 +-
 .../content/select/frame_pointer_bridge.js    |  27 +++++
 .../src/content/select/select.js              |   2 +
 .../test/unit/background/frame_events.test.js |  27 +++++
 .../content/display/panel_handlers.test.js    |  20 ++++
 .../content/display/panel_runtime.test.js     | 107 ++++++++++++++++++
 .../select/frame_pointer_bridge.test.js       |  37 ++++++
 16 files changed, 316 insertions(+), 3 deletions(-)
 create mode 100644 packages/EdgeTranslate/src/background/library/frame_events.js
 create mode 100644 packages/EdgeTranslate/src/common/scripts/frame_events.js
 create mode 100644 packages/EdgeTranslate/src/content/display/panel/panel_drag_shield.js
 create mode 100644 packages/EdgeTranslate/src/content/select/frame_pointer_bridge.js
 create mode 100644 packages/EdgeTranslate/test/unit/background/frame_events.test.js
 create mode 100644 packages/EdgeTranslate/test/unit/content/select/frame_pointer_bridge.test.js

diff --git a/packages/EdgeTranslate/src/background/background.js b/packages/EdgeTranslate/src/background/background.js
index 2463dd5c..7665255e 100644
--- a/packages/EdgeTranslate/src/background/background.js
+++ b/packages/EdgeTranslate/src/background/background.js
@@ -17,6 +17,7 @@ import {
     setDefaultSettings,
 } from "common/scripts/settings.js";
 import { resolveContextMenuSelection } from "./library/context_menu.js";
+import { registerSubframePointerDownForwarder } from "./library/frame_events.js";
 import "./library/pdf_file_access.js";
 
 if (typeof BUILD_ENV !== "undefined" && BUILD_ENV === "development") {
@@ -183,7 +184,7 @@ function showUpdateNotification() {
 /**
  * Create communication channel.
  */
-const channel = new Channel();
+const channel = registerSubframePointerDownForwarder(new Channel());
 
 /**
  * Create translator manager and register event listeners and service providers.
diff --git a/packages/EdgeTranslate/src/background/library/frame_events.js b/packages/EdgeTranslate/src/background/library/frame_events.js
new file mode 100644
index 00000000..7de39b9e
--- /dev/null
+++ b/packages/EdgeTranslate/src/background/library/frame_events.js
@@ -0,0 +1,27 @@
+import {
+    SUBFRAME_POINTER_DOWN_EVENT,
+    TOP_FRAME_POINTER_DOWN_EVENT,
+} from "common/scripts/frame_events.js";
+
+export function registerSubframePointerDownForwarder(channel) {
+    channel.on(SUBFRAME_POINTER_DOWN_EVENT, (_detail, sender) => {
+        forwardSubframePointerDown(sender);
+    });
+    return channel;
+}
+
+export function forwardSubframePointerDown(sender) {
+    const tabId = sender.tab?.id;
+    if (!Number.isInteger(tabId) || !Number.isInteger(sender.frameId) || sender.frameId <= 0) {
+        return false;
+    }
+
+    const message = JSON.stringify({
+        type: "event",
+        event: TOP_FRAME_POINTER_DOWN_EVENT,
+    });
+    chrome.tabs.sendMessage(tabId, message, { frameId: 0 }, () => {
+        void chrome.runtime.lastError;
+    });
+    return true;
+}
diff --git a/packages/EdgeTranslate/src/common/scripts/frame_events.js b/packages/EdgeTranslate/src/common/scripts/frame_events.js
new file mode 100644
index 00000000..5aed5d63
--- /dev/null
+++ b/packages/EdgeTranslate/src/common/scripts/frame_events.js
@@ -0,0 +1,2 @@
+export const SUBFRAME_POINTER_DOWN_EVENT = "subframe_pointer_down";
+export const TOP_FRAME_POINTER_DOWN_EVENT = "top_frame_pointer_down";
diff --git a/packages/EdgeTranslate/src/content/display/library/moveable/resizable.js b/packages/EdgeTranslate/src/content/display/library/moveable/resizable.js
index aba324d7..1a25bb46 100644
--- a/packages/EdgeTranslate/src/content/display/library/moveable/resizable.js
+++ b/packages/EdgeTranslate/src/content/display/library/moveable/resizable.js
@@ -177,6 +177,7 @@ export default class resizable {
         /* call the drag start handler written by the user */
         this.handlers.resizeStart &&
             this.handlers.resizeStart({
+                inputEvent: e,
                 // set the start position
                 set: (position) => {
                     this.store.startTranslate = [position[0], position[1]]; // deep copy
diff --git a/packages/EdgeTranslate/src/content/display/panel/PanelView.jsx b/packages/EdgeTranslate/src/content/display/panel/PanelView.jsx
index 819ca533..d136800f 100644
--- a/packages/EdgeTranslate/src/content/display/panel/PanelView.jsx
+++ b/packages/EdgeTranslate/src/content/display/panel/PanelView.jsx
@@ -13,6 +13,7 @@ import CloseIcon from "../icons/close.svg";
 import {
     MaxZIndex,
     GlobalStyle,
+    DragShield,
     Panel,
     Head,
     HeadIcons,
@@ -39,6 +40,7 @@ export default function PanelView(props) {
             <StyleSheetManager disableCSSOMInjection>
                 <Fragment>
                     <GlobalStyle />
+                    <DragShield ref={props.dragShieldElRef} aria-hidden="true" />
                     <Panel ref={props.onDisplayStatusChange} displayType={props.displayType}>
                         {props.moveableReady && <PanelContent {...props} />}
                     </Panel>
diff --git a/packages/EdgeTranslate/src/content/display/panel/panel_drag_shield.js b/packages/EdgeTranslate/src/content/display/panel/panel_drag_shield.js
new file mode 100644
index 00000000..12dd1222
--- /dev/null
+++ b/packages/EdgeTranslate/src/content/display/panel/panel_drag_shield.js
@@ -0,0 +1,21 @@
+export function activatePanelDragShield(dragShieldElRef, inputEvent, cursor) {
+    if (!inputEvent) return;
+    setPanelDragShield(
+        dragShieldElRef,
+        true,
+        cursor || getInteractionCursor(inputEvent, "default")
+    );
+}
+
+export function setPanelDragShield(dragShieldElRef, active, cursor = "") {
+    const dragShield = dragShieldElRef?.current;
+    if (!dragShield) return;
+
+    dragShield.style.pointerEvents = active ? "auto" : "none";
+    dragShield.style.cursor = active ? cursor : "";
+}
+
+function getInteractionCursor(inputEvent, fallback) {
+    if (!inputEvent.target) return fallback;
+    return window.getComputedStyle(inputEvent.target).cursor || fallback;
+}
diff --git a/packages/EdgeTranslate/src/content/display/panel/panel_handlers.js b/packages/EdgeTranslate/src/content/display/panel/panel_handlers.js
index 7d80b2c8..702a0591 100644
--- a/packages/EdgeTranslate/src/content/display/panel/panel_handlers.js
+++ b/packages/EdgeTranslate/src/content/display/panel/panel_handlers.js
@@ -2,6 +2,7 @@ import { DEFAULT_SETTINGS, getOrSetDefaultSettings } from "common/scripts/settin
 import { isChromePDFViewer } from "../../common.js";
 import { panelChannel, checkTimestamp } from "./panel_shared.js";
 import { createMoveablePanel, attachDragHandlers, attachResizeHandlers } from "./panel_runtime.js";
+import { setPanelDragShield } from "./panel_drag_shield.js";
 import { isAutoClosePanelOnPageScrollEnabled } from "./panel_scroll.js";
 
 export function createDefaultDisplaySetting() {
@@ -157,10 +158,17 @@ export function togglePin(model) {
     chrome.storage.sync.set({ fixSetting: !model.panelFix });
 }
 
+export function closeUnfixedPanel(model) {
+    if (!model.open || model.panelFix) return false;
+    model.setOpen(false);
+    return true;
+}
+
 export function createPanelViewModel(model) {
     return {
         open: model.open,
         containerElRef: model.containerElRef,
+        dragShieldElRef: model.dragShieldElRef,
         containerStyle: getContainerStyle(model.usePDFMaskLayer),
         onDisplayStatusChange: model.onDisplayStatusChange,
         displayType: model.displayType,
@@ -182,6 +190,7 @@ export function createPanelViewModel(model) {
 }
 
 export function handlePanelClosed(model, removeFixedPanel) {
+    setPanelDragShield(model.dragShieldElRef, false);
     model.moveablePanelRef.current = null;
     model.setMoveableReady(false);
     window.isDisplayingResult = false;
@@ -205,6 +214,7 @@ export function handlePanelOpened(args) {
     model.moveablePanelRef.current = createMoveablePanel(panelEl);
     attachDragHandlers({
         moveablePanel: model.moveablePanelRef.current,
+        dragShieldElRef: model.dragShieldElRef,
         headElRef: model.headElRef,
         displaySettingRef: model.displaySettingRef,
         setUsePDFMaskLayer: model.setUsePDFMaskLayer,
@@ -216,6 +226,7 @@ export function handlePanelOpened(args) {
     });
     attachResizeHandlers({
         moveablePanel: model.moveablePanelRef.current,
+        dragShieldElRef: model.dragShieldElRef,
         displaySettingRef: model.displaySettingRef,
         resizePageFlag: model.resizePageFlag,
         setUsePDFMaskLayer: model.setUsePDFMaskLayer,
diff --git a/packages/EdgeTranslate/src/content/display/panel/panel_runtime.js b/packages/EdgeTranslate/src/content/display/panel/panel_runtime.js
index 59615e8d..03f8a081 100644
--- a/packages/EdgeTranslate/src/content/display/panel/panel_runtime.js
+++ b/packages/EdgeTranslate/src/content/display/panel/panel_runtime.js
@@ -2,6 +2,7 @@ import Moveable from "../library/moveable/moveable.js";
 import { delayPromise } from "common/scripts/promise.js";
 import { DEFAULT_SETTINGS, getOrSetDefaultSettings } from "common/scripts/settings.js";
 import { isChromePDFViewer } from "../../common.js";
+import { activatePanelDragShield, setPanelDragShield } from "./panel_drag_shield.js";
 
 const transitionDuration = 500;
 
@@ -34,6 +35,7 @@ export function createMoveablePanel(panelEl) {
 
 export function attachDragHandlers({
     moveablePanel,
+    dragShieldElRef,
     headElRef,
     displaySettingRef,
     setUsePDFMaskLayer,
@@ -55,6 +57,7 @@ export function attachDragHandlers({
             }
             startTranslate = getCurrentTranslate(moveablePanel.targetElement);
             set(startTranslate);
+            activatePanelDragShield(dragShieldElRef, inputEvent, "grabbing");
             if (isChromePDFViewer()) setUsePDFMaskLayer(true);
         })
         .on("drag", ({ target, translate }) => {
@@ -62,6 +65,7 @@ export function attachDragHandlers({
             target.style.transform = `translate(${translate[0]}px, ${translate[1]}px)`;
         })
         .on("dragEnd", ({ translate, inputEvent }) => {
+            setPanelDragShield(dragShieldElRef, false);
             startTranslate = translate;
             if (shouldFixPanel(inputEvent, displaySettingRef.current.type, floatingToFixed)) {
                 displaySettingRef.current.fixedData.position = fixedDirection;
@@ -94,6 +98,7 @@ export function attachDragHandlers({
 
 export function attachResizeHandlers({
     moveablePanel,
+    dragShieldElRef,
     displaySettingRef,
     resizePageFlag,
     setUsePDFMaskLayer,
@@ -102,9 +107,10 @@ export function attachResizeHandlers({
     let startTranslate = [0, 0];
 
     moveablePanel
-        .on("resizeStart", ({ set }) => {
+        .on("resizeStart", ({ set, inputEvent }) => {
             startTranslate = getCurrentTranslate(moveablePanel.targetElement);
             set(startTranslate);
+            activatePanelDragShield(dragShieldElRef, inputEvent);
             if (isChromePDFViewer()) setUsePDFMaskLayer(true);
         })
         .on("resize", ({ target, width, height, translate, inputEvent }) => {
@@ -117,6 +123,7 @@ export function attachResizeHandlers({
             }
         })
         .on("resizeEnd", ({ width, height, translate, inputEvent, target }) => {
+            setPanelDragShield(dragShieldElRef, false);
             startTranslate = translate;
             target.style.transform = `translate(${translate[0]}px, ${translate[1]}px)`;
             if (inputEvent) {
diff --git a/packages/EdgeTranslate/src/content/display/panel/panel_styles.js b/packages/EdgeTranslate/src/content/display/panel/panel_styles.js
index 0857efad..f9247b09 100644
--- a/packages/EdgeTranslate/src/content/display/panel/panel_styles.js
+++ b/packages/EdgeTranslate/src/content/display/panel/panel_styles.js
@@ -101,6 +101,19 @@ export const Panel = styled.div`
     }
 `;
 
+export const DragShield = styled.div`
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: ${MaxZIndex - 1};
+    background: transparent;
+    pointer-events: none;
+    user-select: none;
+    touch-action: none;
+`;
+
 export const Head = styled.div`
     padding: 4px;
     display: flex;
diff --git a/packages/EdgeTranslate/src/content/display/panel/use_result_panel_model.js b/packages/EdgeTranslate/src/content/display/panel/use_result_panel_model.js
index 8a8a9c0d..a7cf6070 100644
--- a/packages/EdgeTranslate/src/content/display/panel/use_result_panel_model.js
+++ b/packages/EdgeTranslate/src/content/display/panel/use_result_panel_model.js
@@ -11,6 +11,7 @@ import {
 } from "./panel_runtime.js";
 import { usePanelScrollAutoClose } from "./use_panel_scroll_auto_close.js";
 import { panelChannel } from "./panel_shared.js";
+import { TOP_FRAME_POINTER_DOWN_EVENT } from "common/scripts/frame_events.js";
 import {
     createDefaultDisplaySetting,
     normalizeDisplaySetting,
@@ -23,6 +24,7 @@ import {
     handlePanelClosed,
     handlePanelOpened,
     syncPanelChangedSettings,
+    closeUnfixedPanel,
 } from "./panel_handlers.js";
 
 const scrollbarWidth = getScrollbarWidth();
@@ -129,6 +131,7 @@ function usePanelStatusState() {
 function usePanelRefState() {
     return {
         containerElRef: useRef(),
+        dragShieldElRef: useRef(),
         panelElRef: useRef(),
         headElRef: useRef(),
         moveablePanelRef: useRef(null),
@@ -288,11 +291,12 @@ function usePanelLifecycle(args) {
     usePanelScrollAutoClose(model, updateBounds);
     useEvent("resize", windowResizeHandler, window);
     useClickAway(model.containerElRef, () => {
-        if (!model.panelFix) model.setOpen(false);
+        closeUnfixedPanel(model);
     });
 }
 
 function usePanelChannels(model) {
+    const modelRef = useLatest(model);
     useEffect(() => {
         initializePanelSettings(model);
         panelChannel.provide("check_availability", () => Promise.resolve());
@@ -307,10 +311,14 @@ function usePanelChannels(model) {
             }
         );
         panelChannel.on("command", (detail) => handlePanelCommand(model, detail));
+        const cancelFramePointerDown = panelChannel.on(TOP_FRAME_POINTER_DOWN_EVENT, () => {
+            closeUnfixedPanel(modelRef.current);
+        });
         const storageChangeHandler = (changes, area) =>
             syncPanelChangedSettings(model, changes, area);
         chrome.storage.onChanged.addListener(storageChangeHandler);
         return () => {
+            cancelFramePointerDown();
             chrome.storage.onChanged.removeListener(storageChangeHandler);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/packages/EdgeTranslate/src/content/select/frame_pointer_bridge.js b/packages/EdgeTranslate/src/content/select/frame_pointer_bridge.js
new file mode 100644
index 00000000..71153819
--- /dev/null
+++ b/packages/EdgeTranslate/src/content/select/frame_pointer_bridge.js
@@ -0,0 +1,27 @@
+import { SUBFRAME_POINTER_DOWN_EVENT } from "common/scripts/frame_events.js";
+
+const EXTENSION_UI_IDS = new Set([
+    "edge-translate-button",
+    "edge-translate-button-host",
+    "edge-translate-root",
+    "edge-translate-screenshot-overlay",
+    "edge-translate-long-press-highlight",
+]);
+
+export function registerSubframePointerDownBridge(channel) {
+    if (window.top === window) return;
+
+    document.addEventListener(
+        "mousedown",
+        (event) => {
+            if (isExtensionOwnedPointerEvent(event)) return;
+            channel.emit(SUBFRAME_POINTER_DOWN_EVENT);
+        },
+        true
+    );
+}
+
+export function isExtensionOwnedPointerEvent(event) {
+    const path = event.composedPath?.() || [event.target];
+    return path.some((node) => EXTENSION_UI_IDS.has(node?.id));
+}
diff --git a/packages/EdgeTranslate/src/content/select/select.js b/packages/EdgeTranslate/src/content/select/select.js
index 6f988016..2585a184 100644
--- a/packages/EdgeTranslate/src/content/select/select.js
+++ b/packages/EdgeTranslate/src/content/select/select.js
@@ -9,6 +9,7 @@ import {
 import { finishLongPressMouseUp } from "./select_long_press_events.js";
 import { createLongPressTools } from "./select_long_press.js";
 import { createScreenshotSelector } from "./select_screenshot.js";
+import { registerSubframePointerDownBridge } from "./frame_pointer_bridge.js";
 import {
     getSelection,
     shouldTranslate,
@@ -30,6 +31,7 @@ if (!isNativePDFViewer()) {
 
 function initSelectTranslate() {
     const state = createSelectState();
+    registerSubframePointerDownBridge(state.channel);
     initializeButtonContainer(state, (event) => buttonClickHandler(state, event));
     initializeSettings(state);
     registerDomEvents(state);
diff --git a/packages/EdgeTranslate/test/unit/background/frame_events.test.js b/packages/EdgeTranslate/test/unit/background/frame_events.test.js
new file mode 100644
index 00000000..b8fb98c6
--- /dev/null
+++ b/packages/EdgeTranslate/test/unit/background/frame_events.test.js
@@ -0,0 +1,27 @@
+import { forwardSubframePointerDown } from "background/library/frame_events.js";
+import { TOP_FRAME_POINTER_DOWN_EVENT } from "common/scripts/frame_events.js";
+
+describe("subframe pointer event forwarding", () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it("targets only the top frame of the source tab", () => {
+        expect(forwardSubframePointerDown({ tab: { id: 17 }, frameId: 3 })).toBe(true);
+
+        expect(chrome.tabs.sendMessage).toHaveBeenCalledTimes(1);
+        const [tabId, message, options] = chrome.tabs.sendMessage.mock.calls[0];
+        expect(tabId).toBe(17);
+        expect(options).toEqual({ frameId: 0 });
+        expect(JSON.parse(message)).toEqual({
+            type: "event",
+            event: TOP_FRAME_POINTER_DOWN_EVENT,
+        });
+    });
+
+    it("does not reflect top-frame or extension-page events", () => {
+        expect(forwardSubframePointerDown({ tab: { id: 17 }, frameId: 0 })).toBe(false);
+        expect(forwardSubframePointerDown({ frameId: 2 })).toBe(false);
+        expect(chrome.tabs.sendMessage).not.toHaveBeenCalled();
+    });
+});
diff --git a/packages/EdgeTranslate/test/unit/content/display/panel_handlers.test.js b/packages/EdgeTranslate/test/unit/content/display/panel_handlers.test.js
index 887de1d1..f11f8fb2 100644
--- a/packages/EdgeTranslate/test/unit/content/display/panel_handlers.test.js
+++ b/packages/EdgeTranslate/test/unit/content/display/panel_handlers.test.js
@@ -2,6 +2,7 @@ import {
     handleTranslated,
     handleTranslatorSelect,
     syncPanelChangedSettings,
+    closeUnfixedPanel,
 } from "content/display/panel/panel_handlers.js";
 import { panelChannel } from "content/display/panel/panel_shared.js";
 
@@ -76,6 +77,25 @@ describe("panel handlers", () => {
 
         expect(model.autoClosePanelOnPageScrollRef.current).toBe(true);
     });
+
+    it("only closes an open, unpinned panel for outside-frame input", () => {
+        const model = createModel();
+        model.open = true;
+        model.panelFix = false;
+
+        expect(closeUnfixedPanel(model)).toBe(true);
+        expect(model.setOpen).toHaveBeenCalledWith(false);
+
+        model.setOpen.mockClear();
+        model.panelFix = true;
+        expect(closeUnfixedPanel(model)).toBe(false);
+        expect(model.setOpen).not.toHaveBeenCalled();
+
+        model.panelFix = false;
+        model.open = false;
+        expect(closeUnfixedPanel(model)).toBe(false);
+        expect(model.setOpen).not.toHaveBeenCalled();
+    });
 });
 
 function createModel() {
diff --git a/packages/EdgeTranslate/test/unit/content/display/panel_runtime.test.js b/packages/EdgeTranslate/test/unit/content/display/panel_runtime.test.js
index 0627d6b4..b91b2ef0 100644
--- a/packages/EdgeTranslate/test/unit/content/display/panel_runtime.test.js
+++ b/packages/EdgeTranslate/test/unit/content/display/panel_runtime.test.js
@@ -2,6 +2,8 @@ import {
     isAutoClosePanelOnPageScrollEnabled,
     shouldClosePanelOnPageScroll,
 } from "content/display/panel/panel_scroll.js";
+import { attachDragHandlers, attachResizeHandlers } from "content/display/panel/panel_runtime.js";
+import { setPanelDragShield } from "content/display/panel/panel_drag_shield.js";
 
 describe("panel page scroll auto close", () => {
     it("closes after the page scrolls by one viewport", () => {
@@ -83,3 +85,108 @@ describe("panel page scroll auto close", () => {
         ).toBe(false);
     });
 });
+
+describe("panel drag shield", () => {
+    it("only intercepts page input while active", () => {
+        const shield = document.createElement("div");
+        const shieldRef = { current: shield };
+
+        setPanelDragShield(shieldRef, true, "ew-resize");
+        expect(shield.style.pointerEvents).toBe("auto");
+        expect(shield.style.cursor).toBe("ew-resize");
+
+        setPanelDragShield(shieldRef, false);
+        expect(shield.style.pointerEvents).toBe("none");
+        expect(shield.style.cursor).toBe("");
+    });
+
+    it("covers iframes during user resize but not programmatic resize", () => {
+        const moveablePanel = createMoveablePanelStub();
+        const shield = document.createElement("div");
+        const dragShieldElRef = { current: shield };
+        const resizeHandle = document.createElement("div");
+        resizeHandle.style.cursor = "ew-resize";
+
+        attachResizeHandlers({
+            moveablePanel,
+            dragShieldElRef,
+            displaySettingRef: {
+                current: {
+                    type: "floating",
+                    floatingData: { width: 0.2, height: 0.6 },
+                    fixedData: { width: 0.2 },
+                },
+            },
+            resizePageFlag: { current: false },
+            setUsePDFMaskLayer: jest.fn(),
+            updateDisplaySetting: jest.fn(),
+        });
+
+        moveablePanel.handlers.resizeStart({
+            set: jest.fn(),
+            inputEvent: { target: resizeHandle },
+        });
+        expect(shield.style.pointerEvents).toBe("auto");
+        expect(shield.style.cursor).toBe("ew-resize");
+
+        moveablePanel.handlers.resizeEnd({
+            width: 300,
+            height: 400,
+            translate: [0, 0],
+            target: moveablePanel.targetElement,
+            inputEvent: {},
+        });
+        expect(shield.style.pointerEvents).toBe("none");
+
+        moveablePanel.handlers.resizeStart({ set: jest.fn() });
+        expect(shield.style.pointerEvents).toBe("none");
+    });
+
+    it("covers iframes for a header drag and releases on drag end", () => {
+        const moveablePanel = createMoveablePanelStub();
+        const shield = document.createElement("div");
+        const head = document.createElement("div");
+
+        attachDragHandlers({
+            moveablePanel,
+            dragShieldElRef: { current: shield },
+            headElRef: { current: head },
+            displaySettingRef: {
+                current: {
+                    type: "floating",
+                    fixedData: { position: "right" },
+                },
+            },
+            setUsePDFMaskLayer: jest.fn(),
+            setHighlight: jest.fn(),
+            showFixedPanel: jest.fn(),
+            removeFixedPanel: jest.fn(),
+            showFloatingPanel: jest.fn(),
+            updateDisplaySetting: jest.fn(),
+        });
+
+        moveablePanel.handlers.dragStart({
+            set: jest.fn(),
+            stop: jest.fn(),
+            inputEvent: { composedPath: () => [head] },
+        });
+        expect(shield.style.pointerEvents).toBe("auto");
+        expect(shield.style.cursor).toBe("grabbing");
+
+        moveablePanel.handlers.dragEnd({ translate: [0, 0], inputEvent: {} });
+        expect(shield.style.pointerEvents).toBe("none");
+    });
+});
+
+function createMoveablePanelStub() {
+    const targetElement = document.createElement("div");
+    targetElement.style.transform = "translate(0px, 0px)";
+    return {
+        targetElement,
+        handlers: {},
+        on(event, handler) {
+            this.handlers[event] = handler;
+            return this;
+        },
+    };
+}
diff --git a/packages/EdgeTranslate/test/unit/content/select/frame_pointer_bridge.test.js b/packages/EdgeTranslate/test/unit/content/select/frame_pointer_bridge.test.js
new file mode 100644
index 00000000..dd9160be
--- /dev/null
+++ b/packages/EdgeTranslate/test/unit/content/select/frame_pointer_bridge.test.js
@@ -0,0 +1,37 @@
+import {
+    isExtensionOwnedPointerEvent,
+    registerSubframePointerDownBridge,
+} from "content/select/frame_pointer_bridge.js";
+
+describe("subframe pointer bridge", () => {
+    it("does not add another listener to the top frame", () => {
+        const addEventListener = jest.spyOn(document, "addEventListener");
+
+        registerSubframePointerDownBridge({ emit: jest.fn() });
+
+        expect(addEventListener).not.toHaveBeenCalled();
+        addEventListener.mockRestore();
+    });
+
+    it.each([
+        "edge-translate-button",
+        "edge-translate-button-host",
+        "edge-translate-root",
+        "edge-translate-screenshot-overlay",
+        "edge-translate-long-press-highlight",
+    ])("ignores Edge Translate control %s", (id) => {
+        const extensionControl = document.createElement("div");
+        extensionControl.id = id;
+
+        expect(
+            isExtensionOwnedPointerEvent({
+                composedPath: () => [document.createElement("span"), extensionControl, document],
+            })
+        ).toBe(true);
+    });
+
+    it("forwards ordinary iframe content", () => {
+        const target = document.createElement("button");
+        expect(isExtensionOwnedPointerEvent({ target })).toBe(false);
+    });
+});

From 14b9338d1fa16448f9d8b1b9b4833ea9430e014f Mon Sep 17 00:00:00 2001
From: TW <huangsanshui666@gmail.com>
Date: Mon, 13 Jul 2026 23:53:36 +0800
Subject: [PATCH 2/2] fix: stabilize panel interaction shield lifecycle

- Keep drag-owned shields active across programmatic resize requests.
- Cancel active drag and resize interactions when the window loses focus.
- Add regression coverage for shield ownership and cancellation.
---
 .../display/library/moveable/draggable.js     |  27 +++--
 .../display/library/moveable/resizable.js     |  32 ++++--
 .../display/panel/panel_drag_shield.js        |  19 ++++
 .../content/display/panel/panel_runtime.js    |  24 ++--
 .../content/display/library/draggable.test.js |  25 +++++
 .../content/display/library/resizable.test.js |  27 +++++
 .../content/display/panel_runtime.test.js     | 104 ++++++++++++++++++
 7 files changed, 226 insertions(+), 32 deletions(-)

diff --git a/packages/EdgeTranslate/src/content/display/library/moveable/draggable.js b/packages/EdgeTranslate/src/content/display/library/moveable/draggable.js
index 1a6bfeab..6793083c 100644
--- a/packages/EdgeTranslate/src/content/display/library/moveable/draggable.js
+++ b/packages/EdgeTranslate/src/content/display/library/moveable/draggable.js
@@ -28,6 +28,7 @@ export default class draggable {
      * 2. add mouse down event listener to the target draggable element
      */
     dragInitiate() {
+        this.dragCancelHandler = () => this.finishDrag(undefined, true);
         this.dragEnd();
         this.setBounds(this.options.bounds);
         // wrap a drag start event handler
@@ -112,6 +113,7 @@ export default class draggable {
         if (this.dragging) {
             e.preventDefault();
             this.options.container.addEventListener("mousemove", this.dragHandler);
+            window.addEventListener("blur", this.dragCancelHandler, { once: true });
         }
     }
 
@@ -203,18 +205,25 @@ export default class draggable {
      */
     dragEnd() {
         this.options.container.addEventListener("mouseup", (e) => {
-            if (this.dragging) {
-                this.dragging = false;
-                this.options.container.removeEventListener("mousemove", this.dragHandler);
-                if (this.handlers.dragEnd)
-                    this.handlers.dragEnd({
-                        inputEvent: e,
-                        translate: [this.store.currentTranslate[0], this.store.currentTranslate[1]],
-                    }); // deep copy
-            }
+            this.finishDrag(e);
         });
     }
 
+    finishDrag(inputEvent, canceled = false) {
+        if (!this.dragging) return false;
+        this.dragging = false;
+        this.bounding = false;
+        this.options.container.removeEventListener("mousemove", this.dragHandler);
+        window.removeEventListener("blur", this.dragCancelHandler);
+        if (this.handlers.dragEnd)
+            this.handlers.dragEnd({
+                inputEvent,
+                canceled,
+                translate: [this.store.currentTranslate[0], this.store.currentTranslate[1]],
+            }); // deep copy
+        return true;
+    }
+
     /**
      * the event handler when target element start to exceed the boundary
      * @param {string} direction in which direction the element exceeds the boundary
diff --git a/packages/EdgeTranslate/src/content/display/library/moveable/resizable.js b/packages/EdgeTranslate/src/content/display/library/moveable/resizable.js
index 1a25bb46..42042e2f 100644
--- a/packages/EdgeTranslate/src/content/display/library/moveable/resizable.js
+++ b/packages/EdgeTranslate/src/content/display/library/moveable/resizable.js
@@ -39,6 +39,7 @@ export default class resizable {
      * 3. add mouse down event listener to the resizable div element
      */
     resizeInitiate() {
+        this.resizeCancelHandler = () => this.finishResize(undefined, true);
         this.resizeEnd();
         // wrap a resize start event handler
         this.resizeStartHandler = (e) => {
@@ -199,6 +200,7 @@ export default class resizable {
         if (this.resizing) {
             e.preventDefault();
             this.options.container.addEventListener("mousemove", this.resizeHandler);
+            window.addEventListener("blur", this.resizeCancelHandler, { once: true });
         }
     }
 
@@ -305,21 +307,27 @@ export default class resizable {
      */
     resizeEnd() {
         this.options.container.addEventListener("mouseup", (e) => {
-            if (this.resizing) {
-                this.resizing = false;
-                this.options.container.removeEventListener("mousemove", this.resizeHandler);
-                if (this.handlers.resizeEnd)
-                    this.handlers.resizeEnd({
-                        target: this.targetElement,
-                        inputEvent: e,
-                        translate: [this.store.currentTranslate[0], this.store.currentTranslate[1]], // deep copy
-                        width: this.store.currentSize[0],
-                        height: this.store.currentSize[1],
-                    });
-            }
+            this.finishResize(e);
         });
     }
 
+    finishResize(inputEvent, canceled = false) {
+        if (!this.resizing) return false;
+        this.resizing = false;
+        this.options.container.removeEventListener("mousemove", this.resizeHandler);
+        window.removeEventListener("blur", this.resizeCancelHandler);
+        if (this.handlers.resizeEnd)
+            this.handlers.resizeEnd({
+                target: this.targetElement,
+                inputEvent,
+                canceled,
+                translate: [this.store.currentTranslate[0], this.store.currentTranslate[1]], // deep copy
+                width: this.store.currentSize[0],
+                height: this.store.currentSize[1],
+            });
+        return true;
+    }
+
     /**
      * resize the target resizable element to the request size
      * @param {Object} resizeParameter {width: resize to the ${width} value, height: resize to the ${height} value}
diff --git a/packages/EdgeTranslate/src/content/display/panel/panel_drag_shield.js b/packages/EdgeTranslate/src/content/display/panel/panel_drag_shield.js
index 12dd1222..1567c66d 100644
--- a/packages/EdgeTranslate/src/content/display/panel/panel_drag_shield.js
+++ b/packages/EdgeTranslate/src/content/display/panel/panel_drag_shield.js
@@ -1,3 +1,22 @@
+export function createPanelDragShieldController(dragShieldElRef) {
+    let active = false;
+
+    return {
+        activate(inputEvent, cursor) {
+            if (!inputEvent) return false;
+            active = true;
+            activatePanelDragShield(dragShieldElRef, inputEvent, cursor);
+            return true;
+        },
+        deactivate(inputEvent, canceled = false) {
+            if (!active || (!inputEvent && !canceled)) return false;
+            active = false;
+            setPanelDragShield(dragShieldElRef, false);
+            return true;
+        },
+    };
+}
+
 export function activatePanelDragShield(dragShieldElRef, inputEvent, cursor) {
     if (!inputEvent) return;
     setPanelDragShield(
diff --git a/packages/EdgeTranslate/src/content/display/panel/panel_runtime.js b/packages/EdgeTranslate/src/content/display/panel/panel_runtime.js
index 03f8a081..0a9bf6bb 100644
--- a/packages/EdgeTranslate/src/content/display/panel/panel_runtime.js
+++ b/packages/EdgeTranslate/src/content/display/panel/panel_runtime.js
@@ -2,7 +2,7 @@ import Moveable from "../library/moveable/moveable.js";
 import { delayPromise } from "common/scripts/promise.js";
 import { DEFAULT_SETTINGS, getOrSetDefaultSettings } from "common/scripts/settings.js";
 import { isChromePDFViewer } from "../../common.js";
-import { activatePanelDragShield, setPanelDragShield } from "./panel_drag_shield.js";
+import { createPanelDragShieldController } from "./panel_drag_shield.js";
 
 const transitionDuration = 500;
 
@@ -48,6 +48,7 @@ export function attachDragHandlers({
     let startTranslate = [0, 0];
     let floatingToFixed = false;
     let fixedDirection = "";
+    const dragShield = createPanelDragShieldController(dragShieldElRef);
 
     moveablePanel
         .on("dragStart", ({ set, stop, inputEvent }) => {
@@ -57,16 +58,18 @@ export function attachDragHandlers({
             }
             startTranslate = getCurrentTranslate(moveablePanel.targetElement);
             set(startTranslate);
-            activatePanelDragShield(dragShieldElRef, inputEvent, "grabbing");
-            if (isChromePDFViewer()) setUsePDFMaskLayer(true);
+            const userDragStarted = dragShield.activate(inputEvent, "grabbing");
+            if (userDragStarted && isChromePDFViewer()) setUsePDFMaskLayer(true);
         })
         .on("drag", ({ target, translate }) => {
             startTranslate = translate;
             target.style.transform = `translate(${translate[0]}px, ${translate[1]}px)`;
         })
-        .on("dragEnd", ({ translate, inputEvent }) => {
-            setPanelDragShield(dragShieldElRef, false);
+        .on("dragEnd", ({ translate, inputEvent, canceled }) => {
+            if (dragShield.deactivate(inputEvent, canceled)) setUsePDFMaskLayer(false);
             startTranslate = translate;
+            if (canceled && floatingToFixed) resetHighlight(setHighlight);
+            if (canceled) floatingToFixed = false;
             if (shouldFixPanel(inputEvent, displaySettingRef.current.type, floatingToFixed)) {
                 displaySettingRef.current.fixedData.position = fixedDirection;
                 displaySettingRef.current.type = "fixed";
@@ -74,7 +77,6 @@ export function attachDragHandlers({
                 showFixedPanel();
                 updateDisplaySetting();
             }
-            setUsePDFMaskLayer(false);
         })
         .on("bound", ({ direction, distance }) => {
             if (!shouldShowFixedHighlight(displaySettingRef.current.type, direction, distance)) {
@@ -105,13 +107,14 @@ export function attachResizeHandlers({
     updateDisplaySetting,
 }) {
     let startTranslate = [0, 0];
+    const dragShield = createPanelDragShieldController(dragShieldElRef);
 
     moveablePanel
         .on("resizeStart", ({ set, inputEvent }) => {
             startTranslate = getCurrentTranslate(moveablePanel.targetElement);
             set(startTranslate);
-            activatePanelDragShield(dragShieldElRef, inputEvent);
-            if (isChromePDFViewer()) setUsePDFMaskLayer(true);
+            const userResizeStarted = dragShield.activate(inputEvent);
+            if (userResizeStarted && isChromePDFViewer()) setUsePDFMaskLayer(true);
         })
         .on("resize", ({ target, width, height, translate, inputEvent }) => {
             startTranslate = translate;
@@ -122,15 +125,14 @@ export function attachResizeHandlers({
                 document.body.style.width = `${(1 - width / window.innerWidth) * 100}%`;
             }
         })
-        .on("resizeEnd", ({ width, height, translate, inputEvent, target }) => {
-            setPanelDragShield(dragShieldElRef, false);
+        .on("resizeEnd", ({ width, height, translate, inputEvent, target, canceled }) => {
+            if (dragShield.deactivate(inputEvent, canceled)) setUsePDFMaskLayer(false);
             startTranslate = translate;
             target.style.transform = `translate(${translate[0]}px, ${translate[1]}px)`;
             if (inputEvent) {
                 updateResizedDisplayData(displaySettingRef.current, width, height);
                 updateDisplaySetting();
             }
-            setUsePDFMaskLayer(false);
         });
 }
 
diff --git a/packages/EdgeTranslate/test/unit/content/display/library/draggable.test.js b/packages/EdgeTranslate/test/unit/content/display/library/draggable.test.js
index 31c54fb9..435ff339 100644
--- a/packages/EdgeTranslate/test/unit/content/display/library/draggable.test.js
+++ b/packages/EdgeTranslate/test/unit/content/display/library/draggable.test.js
@@ -37,4 +37,29 @@ describe("test draggable api in content module", () => {
             bottom: 100,
         });
     });
+
+    it("cancels an active drag when the window loses focus", () => {
+        const target = document.createElement("div");
+        const dragEnd = jest.fn();
+        document.body.appendChild(target);
+        const instance = new draggable(
+            target,
+            { container: document.documentElement },
+            {
+                dragStart: ({ set }) => set([0, 0]),
+                dragEnd,
+            }
+        );
+
+        target.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
+        expect(instance.dragging).toBe(true);
+
+        window.dispatchEvent(new Event("blur"));
+
+        expect(instance.dragging).toBe(false);
+        expect(dragEnd).toHaveBeenCalledWith(
+            expect.objectContaining({ canceled: true, inputEvent: undefined })
+        );
+        target.remove();
+    });
 });
diff --git a/packages/EdgeTranslate/test/unit/content/display/library/resizable.test.js b/packages/EdgeTranslate/test/unit/content/display/library/resizable.test.js
index 12191583..c3a0db79 100644
--- a/packages/EdgeTranslate/test/unit/content/display/library/resizable.test.js
+++ b/packages/EdgeTranslate/test/unit/content/display/library/resizable.test.js
@@ -121,4 +121,31 @@ describe("test resizable api in content module", () => {
             sw: thresholdValue,
         });
     });
+
+    it("cancels an active resize when the window loses focus", () => {
+        const target = document.createElement("div");
+        const resizeEnd = jest.fn();
+        document.body.appendChild(target);
+        const instance = new resizable(
+            target,
+            { container: document.documentElement, directions: ["e"] },
+            {
+                resizeStart: ({ set }) => set([0, 0]),
+                resizeEnd,
+            }
+        );
+
+        target
+            .querySelector(".resizable-div")
+            .dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
+        expect(instance.resizing).toBe(true);
+
+        window.dispatchEvent(new Event("blur"));
+
+        expect(instance.resizing).toBe(false);
+        expect(resizeEnd).toHaveBeenCalledWith(
+            expect.objectContaining({ canceled: true, inputEvent: undefined })
+        );
+        target.remove();
+    });
 });
diff --git a/packages/EdgeTranslate/test/unit/content/display/panel_runtime.test.js b/packages/EdgeTranslate/test/unit/content/display/panel_runtime.test.js
index b91b2ef0..35f96f1b 100644
--- a/packages/EdgeTranslate/test/unit/content/display/panel_runtime.test.js
+++ b/packages/EdgeTranslate/test/unit/content/display/panel_runtime.test.js
@@ -142,6 +142,58 @@ describe("panel drag shield", () => {
         expect(shield.style.pointerEvents).toBe("none");
     });
 
+    it("preserves a drag-owned shield during programmatic resize", () => {
+        const moveablePanel = createMoveablePanelStub();
+        const shield = document.createElement("div");
+        const dragShieldElRef = { current: shield };
+        const head = document.createElement("div");
+        const displaySettingRef = {
+            current: {
+                type: "fixed",
+                floatingData: { width: 0.2, height: 0.6 },
+                fixedData: { width: 0.2, position: "right" },
+            },
+        };
+
+        attachDragHandlers({
+            moveablePanel,
+            dragShieldElRef,
+            headElRef: { current: head },
+            displaySettingRef,
+            setUsePDFMaskLayer: jest.fn(),
+            setHighlight: jest.fn(),
+            showFixedPanel: jest.fn(),
+            removeFixedPanel: jest.fn(),
+            showFloatingPanel: jest.fn(),
+            updateDisplaySetting: jest.fn(),
+        });
+        attachResizeHandlers({
+            moveablePanel,
+            dragShieldElRef,
+            displaySettingRef,
+            resizePageFlag: { current: false },
+            setUsePDFMaskLayer: jest.fn(),
+            updateDisplaySetting: jest.fn(),
+        });
+
+        moveablePanel.handlers.dragStart({
+            set: jest.fn(),
+            stop: jest.fn(),
+            inputEvent: { composedPath: () => [head] },
+        });
+        expect(shield.style.pointerEvents).toBe("auto");
+
+        moveablePanel.handlers.resizeStart({ set: jest.fn() });
+        moveablePanel.handlers.resizeEnd({
+            translate: [0, 0],
+            target: moveablePanel.targetElement,
+        });
+        expect(shield.style.pointerEvents).toBe("auto");
+
+        moveablePanel.handlers.dragEnd({ translate: [0, 0], inputEvent: {} });
+        expect(shield.style.pointerEvents).toBe("none");
+    });
+
     it("covers iframes for a header drag and releases on drag end", () => {
         const moveablePanel = createMoveablePanelStub();
         const shield = document.createElement("div");
@@ -176,6 +228,58 @@ describe("panel drag shield", () => {
         moveablePanel.handlers.dragEnd({ translate: [0, 0], inputEvent: {} });
         expect(shield.style.pointerEvents).toBe("none");
     });
+
+    it("releases the shield when drag and resize interactions are canceled", () => {
+        const moveablePanel = createMoveablePanelStub();
+        const shield = document.createElement("div");
+        const dragShieldElRef = { current: shield };
+        const head = document.createElement("div");
+        const displaySettingRef = {
+            current: {
+                type: "floating",
+                floatingData: { width: 0.2, height: 0.6 },
+                fixedData: { width: 0.2, position: "right" },
+            },
+        };
+
+        attachDragHandlers({
+            moveablePanel,
+            dragShieldElRef,
+            headElRef: { current: head },
+            displaySettingRef,
+            setUsePDFMaskLayer: jest.fn(),
+            setHighlight: jest.fn(),
+            showFixedPanel: jest.fn(),
+            removeFixedPanel: jest.fn(),
+            showFloatingPanel: jest.fn(),
+            updateDisplaySetting: jest.fn(),
+        });
+        attachResizeHandlers({
+            moveablePanel,
+            dragShieldElRef,
+            displaySettingRef,
+            resizePageFlag: { current: false },
+            setUsePDFMaskLayer: jest.fn(),
+            updateDisplaySetting: jest.fn(),
+        });
+
+        moveablePanel.handlers.dragStart({
+            set: jest.fn(),
+            stop: jest.fn(),
+            inputEvent: { composedPath: () => [head] },
+        });
+        moveablePanel.handlers.dragEnd({ translate: [0, 0], canceled: true });
+        expect(shield.style.pointerEvents).toBe("none");
+
+        moveablePanel.handlers.resizeStart({ set: jest.fn(), inputEvent: {} });
+        expect(shield.style.pointerEvents).toBe("auto");
+        moveablePanel.handlers.resizeEnd({
+            translate: [0, 0],
+            target: moveablePanel.targetElement,
+            canceled: true,
+        });
+        expect(shield.style.pointerEvents).toBe("none");
+    });
 });
 
 function createMoveablePanelStub() {