[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>

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));

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();