From 88b0af6fcb50f0c288298ec0b6efac19a1fb8a1d Mon Sep 17 00:00:00 2001
From: "Arthur Detroux (ard)" <ard@odoo.com>
Date: Wed, 22 Nov 2023 16:21:13 +0100
Subject: [PATCH] [FIX] web, web_editor: fix drag and drop in firefox

When dragging a snippet inside an iframe, after the snippet has been
dropped, all events are still being captured by the iframe.
This leads to option previews not being displayed and the user having
to click outside the iframe to be able to interact with the options.

This seems to be a bug in Firefox related to how it handles
pointerevents. This does not happen when the events are "mousedown" and
"mouseup" instead of "pointerdown" and "pointerup".
So this commit checks if we're on firefox desktop and if its the case,
uses mousedown and mouseup.

Steps to reproduce:
- On Firefox, go to the Website App and drop a banner snippet
- Click on one of the images in the snippet
- Drag the image
- Hover over the options
=> The options are not previewed

task-3607685

closes odoo/odoo#143343

Signed-off-by: Benoit Socias (bso) <bso@odoo.com>
---
 .../static/src/core/utils/draggable_hook_builder.js   | 11 ++++++++---
 .../static/src/js/editor/snippets.editor.js           |  8 --------
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/addons/web/static/src/core/utils/draggable_hook_builder.js b/addons/web/static/src/core/utils/draggable_hook_builder.js
index aec03668919..06d5ea0f828 100644
--- a/addons/web/static/src/core/utils/draggable_hook_builder.js
+++ b/addons/web/static/src/core/utils/draggable_hook_builder.js
@@ -977,13 +977,18 @@ export function makeDraggableHook(hookParams) {
                 },
                 () => computeParams(params)
             );
+            // Firefox currently (119.0.1) does not handle our pointer events
+            // nicely when they happen from within the iframe. To work around
+            // this, we use mouse events instead of pointer events.
+            const useMouseEvents = isBrowserFirefox() && !hasTouch() && params.iframeWindow;
             // Effect depending on the `ref.el` to add triggering pointer events listener.
             setupHooks.setup(
                 (el) => {
                     if (el) {
                         const { add, cleanup } = makeCleanupManager();
                         const { addListener } = makeDOMHelpers({ add });
-                        addListener(el, "pointerdown", onPointerDown, { noAddedStyle: true });
+                        const event = useMouseEvents ? "mousedown" : "pointerdown";
+                        addListener(el, event, onPointerDown, { noAddedStyle: true });
                         if (hasTouch()) {
                             addListener(el, "contextmenu", safePrevent);
                             // Adds a non-passive listener on touchstart: this allows
@@ -1010,10 +1015,10 @@ export function makeDraggableHook(hookParams) {
             };
             // Other global event listeners.
             const throttledOnPointerMove = setupHooks.throttle(onPointerMove);
-            addWindowListener("pointermove", throttledOnPointerMove, {
+            addWindowListener(useMouseEvents ? "mousemove" : "pointermove", throttledOnPointerMove, {
                 passive: false,
             });
-            addWindowListener("pointerup", onPointerUp);
+            addWindowListener(useMouseEvents ? "mouseup" : "pointerup", onPointerUp);
             addWindowListener("pointercancel", onPointerCancel);
             addWindowListener("keydown", onKeyDown, { capture: true });
             setupHooks.teardown(() => dragEnd(null));
diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 4b12800a6f3..baaa43c119b 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -1007,14 +1007,6 @@ var SnippetEditor = Widget.extend({
      * @private
      */
     _onDragAndDropStart({ helper, addStyle }) {
-        // If the helper is inside the iframe, we want pointer events on the
-        // frame element so that they reach the window and properly apply
-        // the cursor.
-        const frameElement = helper.ownerDocument.defaultView.frameElement;
-        if (frameElement) {
-            addStyle(frameElement, { pointerEvents: "auto" });
-        }
-
         this.options.wysiwyg.odooEditor.observerUnactive('dragAndDropMoveSnippet');
         this.trigger_up('drag_and_drop_start');
         this.options.wysiwyg.odooEditor.automaticStepUnactive();