[FIX] html_builder: toggle visibility of nested invisible elements

Author: AlessandroLupo

addons/html_builder/static/src/sidebar/invisible_elements_panel.js

@@ -55,25 +55,29 @@ export class InvisibleElementsPanel extends Component {
         //     └ descendantInvisibleSnippet
         //          └ descendantOfDescendantInvisibleSnippet
         //               └ etc...
-        const createInvisibleEntries = (snippetEls, isDescendant) =>
+        const createInvisibleEntries = (snippetEls, parentEl = null) =>
             snippetEls.map((snippetEl) => {
                 const descendantSnippetEls = descendantPerSnippet.get(snippetEl);
                 // An element is considered as "RootParent" if it has one or
                 // more invisible descendants but is not a descendant.
                 const invisibleElement = {
                     snippetEl: snippetEl,
                     name: getSnippetName(snippetEl),
-                    isRootParent: !isDescendant && !!descendantSnippetEls,
-                    isDescendant,
+                    isRootParent: !parentEl && !!descendantSnippetEls,
+                    isDescendant: !!parentEl,
                     isVisible: snippetEl.dataset.invisible !== "1",
                     children: [],
+                    parentEl,
                 };
                 if (descendantSnippetEls) {
-                    invisibleElement.children = createInvisibleEntries(descendantSnippetEls, true);
+                    invisibleElement.children = createInvisibleEntries(
+                        descendantSnippetEls,
+                        invisibleElement
+                    );
                 }
                 return invisibleElement;
             });
-        this.state.invisibleEntries = createInvisibleEntries(rootInvisibleSnippetEls, false);
+        this.state.invisibleEntries = createInvisibleEntries(rootInvisibleSnippetEls);
     }
 
     toggleElementVisibility(invisibleEntry) {
@@ -97,10 +101,10 @@ export class InvisibleElementsPanel extends Component {
                     this.toggleElementVisibility(child);
                 }
             });
-        } else if (invisibleEntry.parents && !invisibleEntry.parents.isVisible) {
+        } else if (invisibleEntry.parentEl && !invisibleEntry.parentEl.isVisible) {
             // When toggling the visibility of an element to "Show", also toggle
             // all its parents.
-            this.toggleElementVisibility(invisibleEntry.parents);
+            this.toggleElementVisibility(invisibleEntry.parentEl);
         }
         toggleVisibility(invisibleEntry.snippetEl);
     }

addons/html_builder/static/src/sidebar/invisible_elements_panel.xml

@@ -23,7 +23,7 @@
     <ul t-if="entry.children.length > 0">
         <t t-foreach="entry.children" t-as="child" t-key="child_index">
             <li>
-                <t t-call="html_builder.invisibleSnippetEntry" t-call-context="{'entry': child, menu}"/>
+                <t t-call="html_builder.invisibleSnippetEntry" t-call-context="{'entry': child, toggleElementVisibility}"/>
             </li>
         </t>
     </ul>