[REF] web: Update generic files

General cleaning of some helpers and generic files. The idea is that they are
less likely to be entirely re-written in the near future so this is a way to
keep the code clean, readable and compliant to the current standards. Changes include:
- Use of async/await when possible
- Use of const/let instead of var
- Removal of underscore.js
- Use of native JS instead of jQuery when possible

The logic of the affected code remains the same.

1 files changed, 83 insertions, 143 deletions

diff --git a/addons/web_editor/static/tests/test_utils.js b/addons/web_editor/static/tests/test_utils.js
index a4e814a0f68..b5b14d82d03 100644
--- a/addons/web_editor/static/tests/test_utils.js
+++ b/addons/web_editor/static/tests/test_utils.js
@@ -8,6 +8,80 @@ var Widget = require('web.Widget');
 var Wysiwyg = require('web_editor.wysiwyg');
 var options = require('web_editor.snippets.options');
 
+const COLOR_PICKER_TEMPLATE = `
+    <t t-name="web_editor.colorpicker">
+        <colorpicker>
+            <div class="o_colorpicker_section" data-name="theme" data-display="Theme Colors" data-icon-class="fa fa-flask">
+                <button data-color="alpha"/>
+                <button data-color="beta"/>
+                <button data-color="gamma"/>
+                <button data-color="delta"/>
+                <button data-color="epsilon"/>
+            </div>
+            <div class="o_colorpicker_section" data-name="transparent_grayscale" data-display="Transparent Colors" data-icon-class="fa fa-eye-slash">
+                <button class="o_btn_transparent"/>
+                <button data-color="black-25"/>
+                <button data-color="black-50"/>
+                <button data-color="black-75"/>
+                <button data-color="white-25"/>
+                <button data-color="white-50"/>
+                <button data-color="white-75"/>
+            </div>
+            <div class="o_colorpicker_section" data-name="common" data-display="Common Colors" data-icon-class="fa fa-paint-brush"/>
+        </colorpicker>
+    </t>`;
+const SNIPPETS_TEMPLATE = `
+    <h2 id="snippets_menu">Add blocks</h2>
+    <div id="o_scroll">
+        <div id="snippet_structure" class="o_panel">
+            <div class="o_panel_header">
+                <i class="fa fa-th-large"/> First Panel
+            </div>
+            <div class="o_panel_body">
+                <div name="Separator" data-oe-type="snippet" data-oe-thumbnail="/website/static/src/img/snippets_thumbs/s_separator.png">
+                    <div class="s_hr pt32 pb32">
+                        <hr class="s_hr_1px s_hr_solid w-100 mx-auto"/>
+                    </div>
+                </div>
+                <div name="Content" data-oe-type="snippet" data-oe-thumbnail="/website/static/src/img/snippets_thumbs/s_text_block.png">
+                    <section name="Content+Options" class="test_option_all pt32 pb32" data-oe-type="snippet" data-oe-thumbnail="/website/static/src/img/snippets_thumbs/s_text_block.png">
+                        <div class="container">
+                            <div class="row">
+                                <div class="col-lg-10 offset-lg-1 pt32 pb32">
+                                    <h2>Title</h2>
+                                    <p class="lead o_default_snippet_text">Content</p>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="snippet_options" class="d-none">
+        <div data-js="many2one" data-selector="[data-oe-many2one-model]:not([data-oe-readonly])" data-no-check="true"/>
+        <div data-js="content"
+            data-selector=".s_hr, .test_option_all"
+            data-drop-in=".note-editable"
+            data-drop-near="p, h1, h2, h3, blockquote, .s_hr"/>
+        <div data-js="sizing_y" data-selector=".s_hr, .test_option_all"/>
+        <div data-selector=".test_option_all">
+            <we-colorpicker string="Background Color" data-select-style="true" data-css-property="background-color" data-color-prefix="bg-"/>
+        </div>
+        <div data-js="background" data-selector=".test_option_all">
+            <we-button data-choose-image="true" data-no-preview="true">
+                <i class="fa fa-picture-o"/> Background Image
+            </we-button>
+        </div>
+        <div data-js="option_test" data-selector=".s_hr">
+            <we-select string="Alignment">
+                <we-button data-select-class="align-items-start">Top</we-button>
+                <we-button data-select-class="align-items-center">Middle</we-button>
+                <we-button data-select-class="align-items-end">Bottom</we-button>
+                <we-button data-select-class="align-items-stretch">Equal height</we-button>
+            </we-select>
+        </div>
+    </div>`;
 
 MockServer.include({
     //--------------------------------------------------------------------------
@@ -19,84 +93,16 @@ MockServer.include({
      * @private
      * @returns {Promise}
      */
-    _performRpc: function (route, args) {
+    async _performRpc(route, args) {
         if (args.model === "ir.ui.view") {
             if (args.method === 'read_template' && args.args[0] === "web_editor.colorpicker") {
-                var template = '<templates><t t-name="web_editor.colorpicker">' +
-                        '<colorpicker>' +
-                        '    <div class="o_colorpicker_section" data-name="theme" data-display="Theme Colors" data-icon-class="fa fa-flask">' +
-                        '        <button data-color="alpha"></button>' +
-                        '        <button data-color="beta"></button>' +
-                        '        <button data-color="gamma"></button>' +
-                        '        <button data-color="delta"></button>' +
-                        '        <button data-color="epsilon"></button>' +
-                        '    </div>' +
-                        '    <div class="o_colorpicker_section" data-name="transparent_grayscale" data-display="Transparent Colors" data-icon-class="fa fa-eye-slash">' +
-                        '        <button class="o_btn_transparent"></button>' +
-                        '        <button data-color="black-25"></button>' +
-                        '        <button data-color="black-50"></button>' +
-                        '        <button data-color="black-75"></button>' +
-                        '        <button data-color="white-25"></button>' +
-                        '        <button data-color="white-50"></button>' +
-                        '        <button data-color="white-75"></button>' +
-                        '    </div>' +
-                        '    <div class="o_colorpicker_section" data-name="common" data-display="Common Colors" data-icon-class="fa fa-paint-brush"></div>' +
-                        '</colorpicker>' +
-                        '</t></templates>';
-                return Promise.resolve(template);
+                return COLOR_PICKER_TEMPLATE;
             }
             if (args.method === 'render_template' && args.args[0] === "web_editor.snippets") {
-                var template = '<h2 id="snippets_menu">Add blocks</h2>' +
-                        '<div id="o_scroll">' +
-                        '    <div id="snippet_structure" class="o_panel">' +
-                        '        <div class="o_panel_header">' +
-                        '            <i class="fa fa-th-large"></i> First Panel' +
-                        '        </div>' +
-                        '        <div class="o_panel_body">' +
-                        '            <div name="Separator" data-oe-type="snippet" data-oe-thumbnail="/website/static/src/img/snippets_thumbs/s_separator.png">' +
-                        '                <div class="s_hr pt32 pb32">' +
-                        '                    <hr class="s_hr_1px s_hr_solid w-100 mx-auto"/>' +
-                        '                </div>' +
-                        '            </div>' +
-                        '            <div name="Content" data-oe-type="snippet" data-oe-thumbnail="/website/static/src/img/snippets_thumbs/s_text_block.png">' +
-                        '                <section name="Content+Options" class="test_option_all pt32 pb32" data-oe-type="snippet" data-oe-thumbnail="/website/static/src/img/snippets_thumbs/s_text_block.png">' +
-                        '                    <div class="container">' +
-                        '                        <div class="row">' +
-                        '                            <div class="col-lg-10 offset-lg-1 pt32 pb32">' +
-                        '                                <h2>Title</h2>' +
-                        '                                 <p class="lead o_default_snippet_text">Content</p>' +
-                        '                             </div>' +
-                        '                         </div>' +
-                        '                     </div>' +
-                        '                </section>' +
-                        '            </div>' +
-                        '        </div>' +
-                        '    </div>' +
-                        '</div>' +
-                        '<div id="snippet_options" class="d-none">' +
-                        '    <div data-js="many2one" data-selector="[data-oe-many2one-model]:not([data-oe-readonly])" data-no-check="true"></div>' +
-                        '    <div data-js="content" data-selector=".s_hr, .test_option_all" ' +
-                        'data-drop-in=".note-editable" data-drop-near="p, h1, h2, h3, blockquote, .s_hr"></div>' +
-                        '    <div data-js="sizing_y" data-selector=".s_hr, .test_option_all"></div>' +
-                        '    <div data-selector=".test_option_all">' +
-                        '        <we-colorpicker string="Background Color" data-select-style="true" data-css-property="background-color" data-color-prefix="bg-"/>' +
-                        '    </div>' +
-                        '    <div data-js="background" data-selector=".test_option_all">' +
-                        '       <we-button data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/> Background Image</we-button>' +
-                        '    </div>' +
-                        '    <div data-js="option_test" data-selector=".s_hr">' +
-                        '        <we-select string="Alignment">' +
-                        '            <we-button data-select-class="align-items-start">Top</we-button>' +
-                        '            <we-button data-select-class="align-items-center">Middle</we-button>' +
-                        '            <we-button data-select-class="align-items-end">Bottom</we-button>' +
-                        '            <we-button data-select-class="align-items-stretch">Equal height</we-button>' +
-                        '        </we-select>' +
-                        '    </div>' +
-                        '</div>';
-                return Promise.resolve(template);
+                return SNIPPETS_TEMPLATE;
             }
         }
-        return this._super.apply(this, arguments);
+        return this._super(...arguments);
     },
 });
 
@@ -188,80 +194,14 @@ function wysiwygData(data) {
                 },
             },
             records: [],
-            read_template: function (args) {
+            read_template(args) {
                 if (args[0] === 'web_editor.colorpicker') {
-                    return '<templates><t t-name="web_editor.colorpicker">' +
-                        '<colorpicker>' +
-                        '    <div class="o_colorpicker_section" data-name="theme" data-display="Theme Colors" data-icon-class="fa fa-flask">' +
-                        '        <button data-color="alpha"></button>' +
-                        '        <button data-color="beta"></button>' +
-                        '        <button data-color="gamma"></button>' +
-                        '        <button data-color="delta"></button>' +
-                        '        <button data-color="epsilon"></button>' +
-                        '    </div>' +
-                        '    <div class="o_colorpicker_section" data-name="transparent_grayscale" data-display="Transparent Colors" data-icon-class="fa fa-eye-slash">' +
-                        '        <button class="o_btn_transparent"></button>' +
-                        '        <button data-color="black-25"></button>' +
-                        '        <button data-color="black-50"></button>' +
-                        '        <button data-color="black-75"></button>' +
-                        '        <button data-color="white-25"></button>' +
-                        '        <button data-color="white-50"></button>' +
-                        '        <button data-color="white-75"></button>' +
-                        '    </div>' +
-                        '    <div class="o_colorpicker_section" data-name="common" data-display="Common Colors" data-icon-class="fa fa-paint-brush"></div>' +
-                        '</colorpicker>' +
-                        '</t></templates>';
+                    return COLOR_PICKER_TEMPLATE;
                 }
             },
-            render_template: function (args) {
+            render_template(args) {
                 if (args[0] === 'web_editor.snippets') {
-                    return '<h2 id="snippets_menu">Add blocks</h2>' +
-                        '<div id="o_scroll">' +
-                        '    <div id="snippet_structure" class="o_panel">' +
-                        '        <div class="o_panel_header">' +
-                        '            <i class="fa fa-th-large"></i> First Panel' +
-                        '        </div>' +
-                        '        <div class="o_panel_body">' +
-                        '            <div name="Separator" data-oe-type="snippet" data-oe-thumbnail="/website/static/src/img/snippets_thumbs/s_separator.png">' +
-                        '                <div class="s_hr pt32 pb32">' +
-                        '                    <hr class="s_hr_1px s_hr_solid w-100 mx-auto"/>' +
-                        '                </div>' +
-                        '            </div>' +
-                        '            <div name="Content" data-oe-type="snippet" data-oe-thumbnail="/website/static/src/img/snippets_thumbs/s_text_block.png">' +
-                        '                <section name="Content+Options" class="test_option_all pt32 pb32" data-oe-type="snippet" data-oe-thumbnail="/website/static/src/img/snippets_thumbs/s_text_block.png">' +
-                        '                    <div class="container">' +
-                        '                        <div class="row">' +
-                        '                            <div class="col-lg-10 offset-lg-1 pt32 pb32">' +
-                        '                                <h2>Title</h2>' +
-                        '                                 <p class="lead o_default_snippet_text">Content</p>' +
-                        '                             </div>' +
-                        '                         </div>' +
-                        '                     </div>' +
-                        '                </section>' +
-                        '            </div>' +
-                        '        </div>' +
-                        '    </div>' +
-                        '</div>' +
-                        '<div id="snippet_options" class="d-none">' +
-                        '    <div data-js="many2one" data-selector="[data-oe-many2one-model]:not([data-oe-readonly])" data-no-check="true"></div>' +
-                        '    <div data-js="content" data-selector=".s_hr, .test_option_all" ' +
-                        'data-drop-in=".note-editable" data-drop-near="p, h1, h2, h3, blockquote, .s_hr"></div>' +
-                        '    <div data-js="sizing_y" data-selector=".s_hr, .test_option_all"></div>' +
-                        '    <div data-selector=".test_option_all">' +
-                        '        <we-colorpicker string="Background Color" data-select-style="true" data-css-property="background-color" data-color-prefix="bg-"/>' +
-                        '    </div>' +
-                        '    <div data-js="background" data-selector=".test_option_all">' +
-                        '       <we-button data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/> Background Image</we-button>' +
-                        '    </div>' +
-                        '    <div data-js="option_test" data-selector=".s_hr">' +
-                        '        <we-select string="Alignment">' +
-                        '            <we-button data-select-class="align-items-start">Top</we-button>' +
-                        '            <we-button data-select-class="align-items-center">Middle</we-button>' +
-                        '            <we-button data-select-class="align-items-end">Bottom</we-button>' +
-                        '            <we-button data-select-class="align-items-stretch">Equal height</we-button>' +
-                        '        </we-select>' +
-                        '    </div>' +
-                        '</div>';
+                    return SNIPPETS_TEMPLATE;
                 }
             },
         },
@@ -758,7 +698,7 @@ var textInput = function (target, char) {
     if (!ev.defaultPrevented) {
         document.execCommand("insertText", 0, ev.data);
     }
-}
+};
 
 return {
     wysiwygData: wysiwygData,