[FIX] web_editor, *: correctly display the hierarchy between elements

*website

Steps to reproduce:
- Drop a "Text-Image" snippet on the website.
- Click on a column and hide it on desktop.
- Click on the parent snippet and hide it on desktop.

-> The column is not a child of the parent in the invisible entry.

Since [1], invisible snippets are shown hierarchically in order to
better visualize the "parent-children" relation that could exist between
them. To do so, [1] based its logic on the `.o_snippet_invisible` to
find the invisible elements. However, since [2], a distinction has been
made between elements that are hidden only on desktop, only on mobile or
on both depending on some conditions. The goal of this commit is to take
the new `o_snippet_mobile_invisible` and `o_snippet_desktop_invisible`
classes into account at the creation of the invisible entry.

[1]: https://github.com/odoo/odoo/commit/922d3e63b597b1ef7fbbb5ebb4641a3ad8bdf4ed
[2]: https://github.com/odoo/odoo/commit/3103e0553011b5c1f4078972d7a88fa3fd4068b2

task-3679823

closes odoo/odoo#150512

X-original-commit: c8f247ee5fa178f012b2852cba3d0e9322a2c3a6
Signed-off-by: Robin Lejeune (role) <role@odoo.com>

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

@@ -2559,7 +2559,7 @@ var SnippetsMenu = Widget.extend({
             // their descendant snippets.
             const rootInvisibleSnippetEls = [...$invisibleSnippets].filter(invisibleSnippetEl => {
                 const ancestorInvisibleEl = invisibleSnippetEl
-                                                 .parentElement.closest(".o_snippet_invisible");
+                                                 .parentElement.closest(invisibleSelector);
                 if (!ancestorInvisibleEl) {
                     return true;
                 }

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

@@ -181,3 +181,70 @@ wTourUtils.clickOnSnippet(snippets[1]),
     run: () => {}, // it is a check
 },
 ]);
+
+wTourUtils.registerWebsitePreviewTour("conditional_visibility_5", {
+    edition: true,
+    test: true,
+    url: "/",
+}, () => [
+    wTourUtils.dragNDrop(snippets[0]),
+    {
+        content: "Click on the image of the dragged snippet",
+        trigger: "iframe .s_text_image img",
+    },
+    wTourUtils.changeOption("DeviceVisibility", 'we-button[data-toggle-device-visibility="no_desktop"]'),
+    {
+        content: "Check that the Column has been added in the 'Invisible Elements' panel",
+        trigger: ".o_we_invisible_el_panel .o_we_invisible_entry:contains('Column')",
+        run: () => {}, // it is a check
+    },
+    {
+        content: "Click on the 'Text - Image' snippet",
+        trigger: "iframe .s_text_image",
+    },
+    wTourUtils.changeOption("ConditionalVisibility", 'we-button[data-toggle-device-visibility="no_desktop"]'),
+    {
+        content: "Check that the 'Text - Image' is the parent of 'Column' in the 'Invisible Elements' panel",
+        trigger: ".o_we_invisible_el_panel .o_we_invisible_root_parent.o_we_invisible_entry:contains('Text - Image') + ul .o_we_invisible_entry.o_we_sublevel_1:contains('Column')",
+        run: () => {}, // it is a check
+    },
+    {
+        content: "Click on the 'Text - Image' entry on the 'Invisible Elements' panel",
+        trigger: ".o_we_invisible_el_panel .o_we_invisible_root_parent.o_we_invisible_entry:contains('Text - Image')",
+    },
+    {
+        content: "Check that the snippet is visible on the website",
+        trigger: "iframe .s_text_image.o_snippet_desktop_invisible.o_snippet_override_invisible",
+        run: () => {}, // it is a check
+    },
+    wTourUtils.changeOption("ConditionalVisibility", 'we-button[data-toggle-device-visibility="no_mobile"]'),
+    {
+        content: "Check that the 'Text - Image' has been removed from the 'Invisible Elements' panel",
+        trigger: ".o_we_invisible_el_panel:not(.o_we_invisible_entry:contains('Text - Image'))",
+        run: () => {}, // it is a check
+    },
+    {
+        content: "Click on the 'Column' entry on the 'Invisible Elements' panel",
+        trigger: ".o_we_invisible_el_panel .o_we_invisible_entry:contains('Column')",
+    },
+    {
+        content: "Check that the column is visible on the website",
+        trigger: "iframe .s_text_image .row > .o_snippet_desktop_invisible.o_snippet_override_invisible",
+        run: () => {}, // it is a check
+    },
+    wTourUtils.changeOption("DeviceVisibility", 'we-button[data-toggle-device-visibility="no_mobile"]'),
+    {
+        content: "Check that the column has been removed from the 'Invisible Elements' panel",
+        trigger: "#oe_snippets:not(:has(.o_we_invisible_entry:contains('Column')))",
+        run: () => {}, // it is a check
+    },
+    {
+        content: "Activate mobile preview",
+        trigger: ".o_we_website_top_actions button[data-action='mobile']",
+    },
+    {
+        content: "Check that the 'Text - Image' is the parent of 'Column' in the 'Invisible Elements' panel",
+        trigger: ".o_we_invisible_el_panel .o_we_invisible_root_parent.o_we_invisible_entry:contains('Text - Image') + ul .o_we_invisible_entry.o_we_sublevel_1:contains('Column')",
+        run: () => {}, // it is a check
+    },
+]);

addons/website/tests/test_ui.py

@@ -305,6 +305,7 @@ class TestUi(odoo.tests.HttpCase):
         self.start_tour('/web', 'conditional_visibility_2', login='admin')
         self.start_tour(self.env['website'].get_client_action_url('/'), 'conditional_visibility_3', login='admin')
         self.start_tour(self.env['website'].get_client_action_url('/'), 'conditional_visibility_4', login='admin')
+        self.start_tour(self.env['website'].get_client_action_url('/'), 'conditional_visibility_5', login='admin')
 
     def test_11_website_snippet_background_edition(self):
         self.env['ir.attachment'].create({