[REF] web_editor: get rid of we-collapse elements

Now, we should either use:
- A we-select (in the end, same as collapse except it does not push the
  elements in the UI)
- A simple div to always display the elements

Part of https://github.com/odoo/odoo/pull/38959
task-2066614

closes odoo/odoo#38959

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

3 files changed, 7 insertions, 19 deletions

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 9644dbe17f3..6fb1f5ebee8 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -720,7 +720,7 @@ var SnippetsMenu = Widget.extend({
     id: 'oe_snippets',
     cacheSnippetTemplate: {},
     events: {
-        'click we-select, we-collapse-area > we-toggler': '_onOptionTogglerClick',
+        'click we-select': '_onOptionTogglerClick',
         'click .o_install_btn': '_onInstallBtnClick',
     },
     custom_events: {
@@ -1732,9 +1732,8 @@ var SnippetsMenu = Widget.extend({
             togglerEl = togglerEl.querySelector('we-toggler');
         }
 
-        var togglerParentSelector = 'we-select, we-collapse-area';
-        var $hierarchyTogglers = $(togglerEl).parents(togglerParentSelector).children('we-toggler');
-        this.$(togglerParentSelector).children('we-toggler').not($hierarchyTogglers).removeClass('active');
+        var $hierarchyTogglers = $(togglerEl).parents('we-select').children('we-toggler');
+        this.$('we-select').children('we-toggler').not($hierarchyTogglers).removeClass('active');
         $hierarchyTogglers.not(togglerEl).addClass('active');
         togglerEl.classList.toggle('active');
     },
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 49867305fa7..03c9a521655 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -280,7 +280,7 @@ var SnippetOption = Widget.extend({
      * @param {jQuery} $opt - the related DOMElement option
      */
     selectClass: function (previewMode, value, $opt) {
-        var $group = $opt && $opt.parents('we-collapse-area, we-select').last();
+        var $group = $opt && $opt.parents('we-select').last();
         if (!$group || !$group.length) {
             $group = this.$el;
         }
@@ -498,8 +498,8 @@ var SnippetOption = Widget.extend({
         // --- SELECT CLASS ---
 
         // Get submenus which are not inside submenus
-        var $submenus = this.$el.find('we-collapse-area, we-select')
-            .not('we-collapse-area *, we-select *');
+        var $submenus = this.$el.find('we-select')
+            .not('we-select *');
 
         // Add unique active class for each submenu active item
         _.each($submenus, function (submenu) {
@@ -509,7 +509,7 @@ var SnippetOption = Widget.extend({
 
         // Add unique active class for out-of-submenu active item
         var $externalElements = this.$el.find('[data-select-class]')
-            .not('we-collapse-area *, we-select *');
+            .not('we-select *');
         _processSelectClassElements($externalElements);
 
         function _processSelectClassElements($elements) {
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 8eabe74752a..f95c74a43c4 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -316,14 +316,6 @@ body.editor_enable.editor_has_snippets {
                 }
             }
 
-            we-collapse {
-                position: relative;
-                display: block;
-                max-height: 0;
-                overflow: hidden;
-                transition: max-height 200ms ease 0s;
-            }
-
             we-select {
                 position: relative;
                 display: flex;
@@ -350,9 +342,6 @@ body.editor_enable.editor_has_snippets {
 
             we-toggler.active {
 
-                + we-collapse {
-                    max-height: 500px;
-                }
                 + we-select-menu {
                     display: block;
                 }