perf: centralize global event listeners in widgetWindows.js (#6671)

sapnilbiswas · web-flow · commit 9f3c369ba420 · 2026-04-17T18:35:26.000-04:00
diff --git a/js/widgets/__tests__/widgetWindows.test.js b/js/widgets/__tests__/widgetWindows.test.js
@@ -81,6 +81,8 @@ beforeEach(() => {
     };
     window.widgetWindows.openWindows = {};
     window.widgetWindows._posCache = {};
+    window.widgetWindows._globalListenersInitialized = false;
+    window.widgetWindows.draggingWindow = null;
     // Restore functions
     Object.assign(window.widgetWindows, savedFunctions);
 });
@@ -105,12 +107,6 @@ describe("widgetWindows", () => {
             expect(win._rolled).toBe(false);
         });
 
-        test("creates a window with _dragging set to false", () => {
-            const win = createTestWindow();
-
-            expect(win._dragging).toBe(false);
-        });
-
         test("creates a window with _buttons as empty array", () => {
             const win = createTestWindow();
 
@@ -157,6 +153,22 @@ describe("widgetWindows", () => {
 
             expect(win._title).toBe("My Custom Title");
         });
+
+        test("registers global listeners only once regardless of window count", () => {
+            const addSpy = jest.spyOn(document, "addEventListener");
+
+            createTestWindow("Window 1");
+            createTestWindow("Window 2");
+            createTestWindow("Window 3");
+
+            // mouseup, mousemove, mousedown (each once)
+            const globalMouseListeners = addSpy.mock.calls.filter(call =>
+                ["mouseup", "mousemove", "mousedown"].includes(call[0])
+            );
+            expect(globalMouseListeners).toHaveLength(3);
+
+            addSpy.mockRestore();
+        });
     });
 
     describe("_create helper", () => {
@@ -359,36 +371,16 @@ describe("widgetWindows", () => {
             expect(spy).toHaveBeenCalled();
         });
 
-        test("removes mouseup event listener", () => {
-            const win = createTestWindow();
-            const removeSpy = jest.spyOn(document, "removeEventListener");
-            win.onclose = jest.fn();
-
-            win.close();
-
-            expect(removeSpy).toHaveBeenCalledWith("mouseup", win._dragTopHandler, true);
-            removeSpy.mockRestore();
-        });
-
-        test("removes mousemove event listener", () => {
-            const win = createTestWindow();
+        test("does not remove global listeners (delegation persists)", () => {
             const removeSpy = jest.spyOn(document, "removeEventListener");
-            win.onclose = jest.fn();
-
-            win.close();
-
-            expect(removeSpy).toHaveBeenCalledWith("mousemove", win._docMouseMoveHandler, true);
-            removeSpy.mockRestore();
-        });
-
-        test("removes mousedown event listener", () => {
             const win = createTestWindow();
-            const removeSpy = jest.spyOn(document, "removeEventListener");
-            win.onclose = jest.fn();
 
             win.close();
 
-            expect(removeSpy).toHaveBeenCalledWith("mousedown", win._docMouseDownHandler, true);
+            const globalMouseRemovals = removeSpy.mock.calls.filter(call =>
+                ["mouseup", "mousemove", "mousedown"].includes(call[0])
+            );
+            expect(globalMouseRemovals).toHaveLength(0);
             removeSpy.mockRestore();
         });
     });
@@ -424,15 +416,16 @@ describe("widgetWindows", () => {
             expect(window.widgetWindows.openWindows[key]).toBeUndefined();
         });
 
-        test("removes all three event listeners", () => {
-            const win = createTestWindow();
+        test("does not remove global listeners (delegation persists)", () => {
             const removeSpy = jest.spyOn(document, "removeEventListener");
+            const win = createTestWindow();
 
             win.destroy();
 
-            expect(removeSpy).toHaveBeenCalledWith("mouseup", win._dragTopHandler, true);
-            expect(removeSpy).toHaveBeenCalledWith("mousemove", win._docMouseMoveHandler, true);
-            expect(removeSpy).toHaveBeenCalledWith("mousedown", win._docMouseDownHandler, true);
+            const globalMouseRemovals = removeSpy.mock.calls.filter(call =>
+                ["mouseup", "mousemove", "mousedown"].includes(call[0])
+            );
+            expect(globalMouseRemovals).toHaveLength(0);
             removeSpy.mockRestore();
         });
 
diff --git a/js/widgets/widgetWindows.js b/js/widgets/widgetWindows.js
@@ -21,7 +21,9 @@ window.widgetWindows = {
     openWindows: {},
     _posCache: {},
     focused: null,
+    draggingWindow: null,
     _shortcutsInitialized: false,
+    _globalListenersInitialized: false,
     _handleGlobalKeyDown(e) {
         const focused = window.widgetWindows.focused;
         if (!focused || e.repeat) return; // Guard against no focus or rapid-fire repeat
@@ -60,6 +62,65 @@ window.widgetWindows = {
                 e.stopPropagation();
             }
         }
+    },
+    _initGlobalListeners() {
+        if (this._globalListenersInitialized) return;
+
+        this._handleGlobalMouseMove = this._handleGlobalMouseMove.bind(this);
+        this._handleGlobalMouseUp = this._handleGlobalMouseUp.bind(this);
+        this._handleGlobalMouseDown = this._handleGlobalMouseDown.bind(this);
+
+        document.addEventListener("mouseup", this._handleGlobalMouseUp, true);
+        document.addEventListener("mousemove", this._handleGlobalMouseMove, true);
+        document.addEventListener("mousedown", this._handleGlobalMouseDown, true);
+
+        this._globalListenersInitialized = true;
+    },
+    _handleGlobalMouseMove(e) {
+        if (this.draggingWindow) {
+            this.draggingWindow._docMouseMoveHandler(e);
+        }
+    },
+    _handleGlobalMouseUp(e) {
+        if (this.draggingWindow) {
+            this.draggingWindow._dragTopHandler(e);
+            this.draggingWindow = null;
+        }
+    },
+    _handleGlobalMouseDown(e) {
+        const isToolbarInteraction =
+            e.target?.closest &&
+            (e.target.closest("#toolbars") ||
+                e.target.closest("#aux-toolbar") ||
+                e.target.closest(".dropdown-content") ||
+                e.target.closest(".dropdown-trigger"));
+
+        const windows = Object.values(this.openWindows).filter(win => win !== undefined);
+        let focusedAny = false;
+
+        for (let i = 0; i < windows.length; i++) {
+            const win = windows[i];
+            if (
+                e.target === win._frame ||
+                win._frame.contains(e.target) ||
+                win._fullscreenEnabled ||
+                isToolbarInteraction
+            ) {
+                // Focus this window
+                win._frame.style.opacity = "1";
+                win._frame.style.zIndex = "10000";
+                this.focused = win;
+                focusedAny = true;
+            } else {
+                // Dim other windows
+                win._frame.style.opacity = ".7";
+                win._frame.style.zIndex = "0";
+            }
+        }
+
+        if (!focusedAny) {
+            this.focused = null;
+        }
     }
 };
 
@@ -83,21 +144,13 @@ class WidgetWindow {
 
         // Drag offset for correct positioning
         this._dx = this._dy = 0;
-        this._dragging = false;
         // RAF throttle flag for mousemove performance
         this._rafTicking = false;
 
         this._createUIelements();
         this._setupLanguage();
 
-        // Global watchers
-        this._dragTopHandler = this._dragTopHandler.bind(this);
-        this._docMouseMoveHandler = this._docMouseMoveHandler.bind(this);
-        this._docMouseDownHandler = this._docMouseDownHandler.bind(this);
-
-        document.addEventListener("mouseup", this._dragTopHandler, true);
-        document.addEventListener("mousemove", this._docMouseMoveHandler, true);
-        document.addEventListener("mousedown", this._docMouseDownHandler, true);
+        window.widgetWindows._initGlobalListeners();
 
         if (!window.widgetWindows._shortcutsInitialized) {
             // Use capture phase (true) to ensure global window control shortcuts are handled
@@ -183,7 +236,7 @@ class WidgetWindow {
         titleEl.id = `${this._key}WidgetID`;
 
         this._nonclose.onmousedown = e => {
-            this._dragging = true;
+            window.widgetWindows.draggingWindow = this;
             if (this._maximized) {
                 // Perform special repositioning to make the drag feel right when
                 // restoring a window from maximized.
@@ -286,8 +339,6 @@ class WidgetWindow {
      * @returns {void}
      */
     _docMouseMoveHandler(e) {
-        if (!this._dragging) return;
-
         // Throttle using requestAnimationFrame to prevent layout thrashing
         if (this._rafTicking) return;
         this._rafTicking = true;
@@ -324,44 +375,12 @@ class WidgetWindow {
         }
     }
 
-    /**
-     * @private
-     * @param {MouseEvent} e
-     * @returns {void}
-     */
-    _docMouseDownHandler(e) {
-        const isToolbarInteraction =
-            e.target?.closest &&
-            (e.target.closest("#toolbars") ||
-                e.target.closest("#aux-toolbar") ||
-                e.target.closest(".dropdown-content") ||
-                e.target.closest(".dropdown-trigger"));
-
-        if (
-            e.target === this._frame ||
-            this._frame.contains(e.target) ||
-            this._fullscreenEnabled ||
-            isToolbarInteraction
-        ) {
-            this._frame.style.opacity = "1";
-            this._frame.style.zIndex = "10000";
-            window.widgetWindows.focused = this;
-        } else {
-            this._frame.style.opacity = ".7";
-            this._frame.style.zIndex = "0";
-            if (window.widgetWindows.focused === this) {
-                window.widgetWindows.focused = null;
-            }
-        }
-    }
-
     /**
      * @private
      * @param {MouseEvent} e
      * @returns {void}
      */
     _dragTopHandler(e) {
-        this._dragging = false;
         if (this._fullscreenEnabled && this._frame.style.top === "64px" && !this._maximized) {
             this._maximize();
             this.takeFocus();
@@ -477,9 +496,6 @@ class WidgetWindow {
      * @returns {void}
      */
     close() {
-        document.removeEventListener("mouseup", this._dragTopHandler, true);
-        document.removeEventListener("mousemove", this._docMouseMoveHandler, true);
-        document.removeEventListener("mousedown", this._docMouseDownHandler, true);
         this.onclose();
     }
 
@@ -632,15 +648,6 @@ class WidgetWindow {
      * @returns {void}
      */
     destroy() {
-        if (this._dragTopHandler) {
-            document.removeEventListener("mouseup", this._dragTopHandler, true);
-        }
-        if (this._docMouseMoveHandler) {
-            document.removeEventListener("mousemove", this._docMouseMoveHandler, true);
-        }
-        if (this._docMouseDownHandler) {
-            document.removeEventListener("mousedown", this._docMouseDownHandler, true);
-        }
         if (this._widget && this._widgetWheelHandler) {
             this._widget.removeEventListener("wheel", this._widgetWheelHandler, false);
             this._widget.removeEventListener("DOMMouseScroll", this._widgetWheelHandler, false);
