[FIX] website, *: do not observe changes of drag and drop initialization

*: web_editor

Commit [1] made the multiple drag and drop feature of the editor stop
using jQuery and used our own implementation. Unfortunately, the
initialization of that implementation in the case of the "drag column
on image move" feature marked the page as dirty by mistake.

Steps to reproduce:
- Enter edit mode
- Add a "Text - Image" snippet
- Save
- Enter edit mode again
- Click on the image of the snippet (and do not do anything else)
- Click on discard
=> A popup appears to say you will lose your changes... while you did
   not make any.

[1]: https://github.com/odoo/odoo/commit/7594d71ca8610d5947e80f325ccb57abc23c2c76

Related to runbot-18747

Part-of: odoo/odoo#148728

addons/web_editor/static/src/js/editor/drag_and_drop.js

@@ -69,6 +69,10 @@ export function useNativeDraggable(hookParams, initialParams) {
     };
     // Compatibility for tests
     const el = initialParams.ref.el;
+    // TODO this is probably to be removed in master: the received params
+    // contain the selector that should be checked and it will be transferred
+    // to the makeDraggableHook function. There should not be any need to add
+    // the default selector class here.
     el.classList.add("o_draggable");
     cleanupFunctions.push(() => el.classList.remove("o_draggable"));
 

addons/web_editor/static/src/js/editor/snippets.editor.js

@@ -116,8 +116,14 @@ var SnippetEditor = Widget.extend({
             this.draggableComponent = this._initDragAndDrop(".o_move_handle", ".oe_overlay", this.el);
             if (!this.$target[0].matches("section")) {
                 // Allow the user to drag the image itself to move the target.
+                // Note that the o_draggable class will be added by the
+                // _initDragAndDrop function. So adding it here is probably
+                // useless. To check. The fact that that class is added in any
+                // case should probably reviewed in master anyway (TODO).
+                this.options.wysiwyg.odooEditor.observerUnactive('image_drag_and_drop');
                 this.$target[0].classList.add("o_draggable");
                 this.draggableComponentImgs = this._initDragAndDrop("img", ".o_draggable", this.$target[0]);
+                this.options.wysiwyg.odooEditor.observerActive('image_drag_and_drop');
             }
         } else {
             this.$('.o_overlay_move_options').addClass('d-none');

addons/website/static/tests/tours/website_no_dirty_page.js

@@ -2,11 +2,7 @@
 
 import wTourUtils from '@website/js/tours/tour_utils';
 
-wTourUtils.registerWebsitePreviewTour('website_no_dirty_page', {
-    test: true,
-    url: '/',
-    edition: true,
-}, () => [
+const makeSteps = (steps = []) => [
     wTourUtils.dragNDrop({
         id: "s_text_image",
         name: "Text - Image",
@@ -25,7 +21,9 @@ wTourUtils.registerWebsitePreviewTour('website_no_dirty_page', {
         content: "Confirm we are in edit mode",
         trigger: 'body.editor_has_snippets',
         run: () => null,
-    }, {
+    },
+    ...steps,
+    {
         // Makes sure the dirty flag does not happen after a setTimeout or
         // something like that.
         content: "Click elsewhere and wait for a few ms",
@@ -43,4 +41,23 @@ wTourUtils.registerWebsitePreviewTour('website_no_dirty_page', {
         trigger: 'body:not(.editor_has_snippets)',
         run: () => null,
     },
-]);
+];
+
+wTourUtils.registerWebsitePreviewTour('website_no_action_no_dirty_page', {
+    test: true,
+    url: '/',
+    edition: true,
+}, () => makeSteps());
+
+wTourUtils.registerWebsitePreviewTour('website_no_dirty_page', {
+    test: true,
+    url: '/',
+    edition: true,
+}, () => makeSteps([
+    {
+        // This has been known to mark the page as dirty because of the "drag
+        // the column on image move" feature.
+        content: "Click on default image",
+        trigger: 'iframe .s_text_image img',
+    },
+]));

addons/website/tests/test_ui.py

@@ -493,7 +493,7 @@ class TestUi(odoo.tests.HttpCase):
             'parent_id': website.menu_id.id,
         })
 
-        self.start_tour('/', 'website_no_dirty_page', login='admin')
+        self.start_tour('/', 'website_no_action_no_dirty_page', login='admin')
 
     def test_website_no_dirty_page(self):
         # Previous tests are testing the dirty behavior when the extra items