Fix conditional visibility option + make DOM consistent at editor start

Author: sobo-odoo

addons/html_builder/static/src/builder.js

@@ -162,6 +162,7 @@ export class Builder extends Component {
         });
 
         onMounted(() => {
+            this.editor.document.body.classList.add("editor_enable");
             this.setCSSVariables();
             // TODO: onload editor
             this.updateInvisibleEls();

addons/html_builder/static/src/core/visibility_plugin.js

@@ -9,13 +9,31 @@ export class VisibilityPlugin extends Plugin {
         "cleanForSaveVisibility",
         "onOptionVisibilityUpdate",
     ];
-
     resources = {
         on_mobile_preview_clicked: this.onMobilePreviewClicked.bind(this),
         system_attributes: ["data-invisible"],
         system_classes: ["o_snippet_override_invisible"],
     };
 
+    setup() {
+        // Add the `data-invisible="1"` attribute on the elements that are
+        // really hidden, and remove it from the ones that are in fact visible,
+        // depending on if we are in mobile preview or not, so the DOM is
+        // consistent.
+        const isMobilePreview = isMobileView(this.editable);
+        this.editable
+            .querySelectorAll(".o_snippet_mobile_invisible, .o_snippet_desktop_invisible")
+            .forEach((invisibleEl) => {
+                const isMobileHidden = invisibleEl.matches(".o_snippet_mobile_invisible");
+                const isDesktopHidden = invisibleEl.matches(".o_snippet_desktop_invisible");
+                if ((isMobileHidden && isMobilePreview) || (isDesktopHidden && !isMobilePreview)) {
+                    invisibleEl.setAttribute("data-invisible", "1");
+                } else {
+                    invisibleEl.removeAttribute("data-invisible");
+                }
+            });
+    }
+
     cleanForSaveVisibility(editingEl) {
         const show =
             !editingEl.classList.contains("o_snippet_invisible") &&
@@ -29,6 +47,16 @@ export class VisibilityPlugin extends Plugin {
         for (const overrideInvisibleEl of overrideInvisibleEls) {
             overrideInvisibleEl.classList.remove("o_snippet_override_invisible");
         }
+
+        // Remove data-invisible attribute from condtionally hidden elements.
+        // TODO do it for all invisible elements in general ?
+        const conditionalHiddenEls = [
+            ...editingEl.querySelectorAll("[data-visibility='conditional']"),
+        ];
+        if (editingEl.matches("[data-visibility='conditional']")) {
+            conditionalHiddenEls.unshift(editingEl);
+        }
+        conditionalHiddenEls.forEach((el) => el.removeAttribute("data-invisible"));
     }
 
     onMobilePreviewClicked() {

addons/html_builder/static/src/sidebar/invisible_elements.inside.scss

@@ -7,6 +7,7 @@
         // e.g. Useful if "Height" option (50% or 100%) is enabled.
         display: flex !important;
     }
+
     &::before {
         position: absolute;
         // Content is 0px wide => use available width.
@@ -19,12 +20,18 @@
         pointer-events: none;
         content: "."; // Content is mandatory.
     }
+
     &.d-md-none::before, &.d-lg-none::before {
         height: 50px;
         -webkit-mask: url("/html_builder/static/img/options/desktop_invisible.svg") no-repeat 100% 100%;
     }
+
     &:not(.d-md-none):not(.d-lg-none)::before {
         height: 30px;
         -webkit-mask: url("/html_builder/static/img/options/mobile_invisible.svg") no-repeat 100% 100%;
     }
 }
+
+.o_conditional_hidden {
+    display: none !important;
+}

addons/html_builder/static/src/website_builder/plugins/visibility_option.xml

@@ -39,7 +39,7 @@
         <t t-call="html_builder.DeviceVisibility"></t>
         <BuilderSelect dataAttributeAction="'visibility'" action="'forceVisible'">
             <BuilderSelectItem dataAttributeActionValue="null">No condition</BuilderSelectItem>
-            <BuilderSelectItem dataAttributeActionValue="'conditional'" id="'visibility_conditional'">Conditionally</BuilderSelectItem>
+            <BuilderSelectItem dataAttributeActionValue="'conditional'" classAction="'o_snippet_invisible'" id="'visibility_conditional'">Conditionally</BuilderSelectItem>
         </BuilderSelect>
 	    <t t-set-slot="collapse">
 		    <t t-if="geoip_country_code">

addons/html_builder/static/src/website_builder/plugins/visibility_option_plugin.js

@@ -151,8 +151,12 @@ class VisibilityOptionPlugin extends Plugin {
             editingEl.matches(visibilityOptionSelector)
         ) {
             editingEl.classList.remove("o_snippet_override_invisible");
+
+            const isConditionalHidden = editingEl.matches("[data-visibility='conditional']");
+            if (isConditionalHidden) {
+                editingEl.classList.add("o_conditional_hidden");
+            }
         }
-        // TODO o_conditional_hidden class for conditionalVisibility ?
     }
 
     onTargetShow(editingEl) {
@@ -166,6 +170,8 @@ class VisibilityOptionPlugin extends Plugin {
             if ((isMobileHidden && isMobilePreview) || (isDesktopHidden && !isMobilePreview)) {
                 editingEl.classList.add("o_snippet_override_invisible");
             }
+
+            editingEl.classList.remove("o_conditional_hidden");
         }
     }
 

addons/html_builder/static/tests/custom_tab/invisibily_options.test.js

@@ -143,3 +143,27 @@ test("hide on mobile and toggle mobile view", async () => {
     await contains("button[data-action='mobile']").click();
     expect(".o_we_invisible_el_panel").not.toBeDisplayed();
 });
+
+test("Hide element conditionally", async () => {
+    await setupWebsiteBuilder(websiteContent);
+
+    await contains(":iframe section").click();
+    await contains("[data-label='Visibility'] button.dropdown").click();
+    await contains("div[data-action-id='forceVisible']:contains(Conditionally)").click();
+    expect(":iframe section").toHaveClass("o_snippet_invisible");
+    expect(".o_we_invisible_el_panel .o_we_invisible_entry").toHaveCount(1);
+    expect(".o_we_invisible_el_panel .o_we_invisible_entry i").toHaveClass("fa-eye");
+
+    await contains(".o_we_invisible_el_panel .o_we_invisible_entry").click();
+    expect(":iframe section.o_snippet_invisible").toHaveClass("o_conditional_hidden");
+    expect(":iframe section").toHaveAttribute("data-invisible", "1");
+    expect(".o_we_invisible_el_panel .o_we_invisible_entry i").toHaveClass("fa-eye-slash");
+
+    await contains(".o_we_invisible_el_panel .o_we_invisible_entry").click();
+    expect(":iframe section.o_snippet_invisible").not.toHaveClass("o_conditional_hidden");
+    expect(":iframe section").not.toHaveAttribute("data-invisible");
+
+    await contains("[data-label='Visibility'] button.dropdown").click();
+    await contains("div[data-action-id='forceVisible']").click();
+    expect(":iframe section").not.toHaveClass("o_snippet_invisible");
+});