[IMP] web_editor: make HTML editor select2 dropdown better

In saas-15, the LESS editor was introduced alongside the use of the
select2 library to style the <select/> element which allows to choose
the view / less file to edit. The problem is that the default behavior
of the select2 library is to open a dropdown with a max-height of 200px
and a width equals to the <select/> element (with no regards to the
dropdown content). In most cases, the dropdown was then displaying
only a few results, broken over multiple lines.

Now, the dropdown is restyled so that it has no maximum height, no set
width and more readable content.

1 files changed, 16 insertions, 12 deletions

diff --git a/addons/web_editor/static/src/js/widgets/ace.js b/addons/web_editor/static/src/js/widgets/ace.js
index a1fbd0753a6..cdcf5167e4a 100644
--- a/addons/web_editor/static/src/js/widgets/ace.js
+++ b/addons/web_editor/static/src/js/widgets/ace.js
@@ -712,35 +712,39 @@ var ViewEditor = Widget.extend({
 
         this.$lists.xml.select2('destroy');
         this.$lists.xml.select2({
-            formatResult: _formatDisplay,
-            formatSelection: _formatDisplay,
+            formatResult: _formatDisplay.bind(this, false),
+            formatSelection: _formatDisplay.bind(this, true),
         });
+        this.$lists.xml.data('select2').dropdown.addClass('o_ace_select2_dropdown');
         this.$lists.less.select2('destroy');
         this.$lists.less.select2({
-            formatResult: _formatDisplay,
-            formatSelection: _formatDisplay,
+            formatResult: _formatDisplay.bind(this, false),
+            formatSelection: _formatDisplay.bind(this, true),
         });
+        this.$lists.less.data('select2').dropdown.addClass('o_ace_select2_dropdown');
 
-        function _formatDisplay(data) {
+        function _formatDisplay(isSelected, data) {
             var $elem = $(data.element);
 
+            var text = data.text || '';
+            if (!isSelected) {
+                text = Array($elem.data('level')).join('-') + ' ' + text;
+            }
             var $div = $('<div/>',  {
-                text: data.text || '',
-                style: 'padding: 0 0 0 ' + (24 * $elem.data('level')) + 'px',
+                text: text,
+                class: 'o_ace_select2_result',
             });
 
             if ($elem.data('dirty') || $elem.data('customized')) {
                 $div.prepend($('<span/>', {
-                    class: 'fa fa-floppy-o ' + ($elem.data('dirty') ? 'text-warning' : 'text-success'),
-                    style: 'margin-right: 8px;',
+                    class: 'mr8 fa fa-floppy-o ' + ($elem.data('dirty') ? 'text-warning' : 'text-success'),
                 }));
             }
 
-            if (session.debug && $elem.data('debug')) {
+            if (!isSelected && session.debug && $elem.data('debug')) {
                 $div.append($('<span/>', {
                     text: ' (' + $elem.data('debug') + ')',
-                    class: 'text-muted',
-                    style: 'font-size: 80%',
+                    class: 'ml4 small text-muted',
                 }));
             }