From 9af8d5e6dea52016ee4bd3dee1f06d1129dfa8d3 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Fri, 18 Aug 2017 16:39:59 +0200
Subject: [PATCH] [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.
---
 .../web_editor/static/src/js/widgets/ace.js   | 28 +++++++++++--------
 .../src/less/web_editor.ui.components.less    | 21 ++++++++++++++
 2 files changed, 37 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',
                 }));
             }
 
diff --git a/addons/web_editor/static/src/less/web_editor.ui.components.less b/addons/web_editor/static/src/less/web_editor.ui.components.less
index c5f1f189b9b..4aab67deb79 100644
--- a/addons/web_editor/static/src/less/web_editor.ui.components.less
+++ b/addons/web_editor/static/src/less/web_editor.ui.components.less
@@ -207,6 +207,27 @@
         }
     }
 }
+.o_ace_select2_dropdown {
+    width: auto!important;
+    padding-top: 4px;
+    font-family: monospace!important;
+
+    > .select2-results {
+        max-height: none;
+        max-height: 70vh;
+
+        .select2-result-label {
+            padding-top: 1px;
+            padding-bottom: 2px;
+
+            >.o_ace_select2_result {
+                padding: 0;
+                font-size: 12px;
+                white-space: nowrap;
+            }
+        }
+    }
+}
 
 // MODALS
 body .modal {