[FIX] website, web_editor: fix empty parallax snippet not being removed

Previously, when removing all the content of a snippet, that snippet
would get automatically deleted. This was not the case for parallax
snippets because we previously intended the user to drop the parallax
snippet, empty it, and drop other content inside of it.

Recently, we added the parallax option on all snippets, rendering the
previous workflow obsolete. There is now no longer any reason to keep
empty parallax snippets. This commit fixes that.

task-2446008

closes odoo/odoo#65551

X-original-commit: 61f410b57f1c28bd6464b86d1582c22b7fd846d5
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

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

@@ -36,6 +36,10 @@ var SnippetEditor = Widget.extend({
         'snippet_option_update': '_onSnippetOptionUpdate',
         'snippet_option_visibility_update': '_onSnippetOptionVisibilityUpdate',
     },
+    layoutElementsSelector: [
+        '.o_we_shape',
+        '.o_we_bg_filter',
+    ].join(','),
 
     /**
      * @constructor
@@ -326,6 +330,17 @@ var SnippetEditor = Widget.extend({
         }
 
         if ($parent.closest(':data("snippet-editor")').length) {
+            const isEmptyAndRemovable = ($el, editor) => {
+                editor = editor || $el.data('snippet-editor');
+                const isEmpty = $el.text().trim() === ''
+                    && $el.children().toArray().every(el => {
+                        // Consider layout-only elements (like bg-shapes) as empty
+                        return el.matches(this.layoutElementsSelector);
+                    });
+                return isEmpty && !$el.hasClass('oe_structure')
+                    && (!editor || editor.isTargetParentEditable);
+            };
+
             var editor = $parent.data('snippet-editor');
             while (!editor) {
                 var $nextParent = $parent.parent();
@@ -349,17 +364,10 @@ var SnippetEditor = Widget.extend({
         this.trigger_up('snippet_removed');
         this.destroy();
         $parent.trigger('content_changed');
-
         // TODO Page content changed, some elements may need to be adapted
         // according to it. While waiting for a better way to handle that this
         // window trigger will handle most cases.
         $(window).trigger('resize');
-
-        function isEmptyAndRemovable($el, editor) {
-            editor = editor || $el.data('snippet-editor');
-            return $el.children().length === 0 && $el.text().trim() === ''
-                && !$el.hasClass('oe_structure') && (!editor || editor.isTargetParentEditable);
-        }
     },
     /**
      * Displays/Hides the editor overlay.

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

@@ -187,4 +187,12 @@ weSnippetEditor.Class.include({
         });
     },
 });
+
+weSnippetEditor.Editor.include({
+    layoutElementsSelector: [
+        weSnippetEditor.Editor.prototype.layoutElementsSelector,
+        '.s_parallax_bg',
+        '.o_bg_video_container',
+    ].join(','),
+});
 });

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

@@ -0,0 +1,75 @@
+odoo.define("website.tour.snippet_empty_parent_autoremove", function (require) {
+"use strict";
+
+const tour = require('web_tour.tour');
+const wTourUtils = require('website.tour_utils');
+
+function removeSelectedBlock() {
+    return {
+        content: "Remove selected block",
+        trigger: '#oe_snippets we-customizeblock-options:last-child .oe_snippet_remove',
+    };
+}
+
+tour.register('snippet_empty_parent_autoremove', {
+    test: true,
+    url: '/?enable_editor=1',
+}, [
+    // Base case: remove both columns from text - image
+    wTourUtils.dragNDrop({
+        id: 's_text_image',
+        name: 'Text - Image',
+    }),
+    {
+        content: "Click on second column",
+        trigger: '#wrap .s_text_image .row > :nth-child(2)',
+    },
+    removeSelectedBlock(),
+    {
+        content: "Click on first column",
+        trigger: '#wrap .s_text_image .row > :first-child',
+    },
+    removeSelectedBlock(),
+    {
+        content: "Check that #wrap is empty",
+        trigger: '#wrap:empty',
+    },
+
+    // Banner: test that parallax, bg-filter and shape are not treated as content
+    wTourUtils.dragNDrop({
+        id: 's_banner',
+        name: 'Banner',
+    }),
+    wTourUtils.clickOnSnippet({
+        id: 's_banner',
+        name: 'Banner',
+    }),
+    {
+        content: "Check that parallax is present",
+        trigger: '#wrap .s_banner .s_parallax_bg',
+        run: () => null,
+    },
+    wTourUtils.changeOption('ColoredLevelBackground', 'Shape'),
+    {
+        content: "Check that shape is present",
+        trigger: '#wrap .s_banner .o_we_shape',
+        run: () => null,
+    },
+    wTourUtils.changeOption('ColoredLevelBackground', 'Filter'),
+    {
+        content: "Check that background-filter is present",
+        trigger: '#wrap .s_banner .o_we_bg_filter',
+        run: () => null,
+    },
+    {
+        content: "Click on first column",
+        trigger: '#wrap .s_banner .row > :first-child',
+    },
+    removeSelectedBlock(),
+    {
+        content: "Check that #wrap is empty",
+        trigger: '#wrap:empty',
+        run: () => null,
+    },
+]);
+});

addons/website/tests/__init__.py

@@ -18,3 +18,4 @@ from . import test_website_favicon
 from . import test_website_reset_password
 from . import test_website_visitor
 from . import test_controllers
+from . import test_snippets

addons/website/tests/test_snippets.py

@@ -0,0 +1,12 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+import odoo
+import odoo.tests
+
+
+@odoo.tests.common.tagged('post_install', '-at_install', 'website_snippets')
+class TestSnippets(odoo.tests.HttpCase):
+
+    def test_01_empty_parents_autoremove(self):
+        self.start_tour("/?enable_editor=1", "snippet_empty_parent_autoremove", login='admin')

addons/website/views/assets.xml

@@ -29,6 +29,7 @@
         <script type="text/javascript" src="/website/static/tests/tours/website_navbar_menu.js"/>
         <script type="text/javascript" src="/website/static/tests/tours/snippet_version.js"/>
         <script type="text/javascript" src="/website/static/tests/tours/website_style_edition.js"/>
+        <script type="text/javascript" src="/website/static/tests/tours/snippet_empty_parent_autoremove.js"/>
     </xpath>
 </template>