[IMP] web_editor: lazy load the wysiwyg

Issue: wysiwyg asset slow down the loading of the website, error
inadvertently introduced: https://github.com/odoo/odoo/pull/29775

The assets are now loaded assynchroneously, when the editor is needed,
its assets will be loaded.

closes odoo/odoo#30700

3 files changed, 44 insertions, 29 deletions

diff --git a/addons/web_editor/static/tests/field_html_tests.js b/addons/web_editor/static/tests/field_html_tests.js
index b01ab48586b..46e66eed81e 100644
--- a/addons/web_editor/static/tests/field_html_tests.js
+++ b/addons/web_editor/static/tests/field_html_tests.js
@@ -67,7 +67,7 @@ QUnit.module('field html', {
                 }
                 if (xmlId === 'template.assets_all_style') {
                     return $.when({
-                        cssLibs: $('head link[href]:not([type="image/x-icon"])').map(function () {
+                        cssLibs: $('link[href]:not([type="image/x-icon"])').map(function () {
                             return $(this).attr('href');
                         }).get(),
                         cssContents: ['body {background-color: red;}']
@@ -815,7 +815,7 @@ QUnit.test('field html translatable', function (assert) {
 
     this.data['note.note'].fields.body.translate = true;
 
-    testUtils.createAsyncView({
+    return testUtils.createAsyncView({
         View: FormView,
         model: 'note.note',
         data: this.data,
@@ -841,7 +841,6 @@ QUnit.test('field html translatable', function (assert) {
 
         form.destroy();
         _t.database.multi_lang = multiLang;
-
     });
 });
 
diff --git a/addons/web_editor/static/tests/test_utils.js b/addons/web_editor/static/tests/test_utils.js
index ff740e52f36..9f89fd2f3a7 100644
--- a/addons/web_editor/static/tests/test_utils.js
+++ b/addons/web_editor/static/tests/test_utils.js
@@ -101,7 +101,7 @@ function patch() {
             }
             if (xmlId === 'template.assets_all_style') {
                 return $.when({
-                    cssLibs: $('head link[href]:not([type="image/x-icon"])').map(function () {
+                    cssLibs: $('link[href]:not([type="image/x-icon"])').map(function () {
                         return $(this).attr('href');
                     }).get(),
                     cssContents: ['body {background-color: red;}']
diff --git a/addons/web_editor/static/tests/wysiwyg_tests.js b/addons/web_editor/static/tests/wysiwyg_tests.js
index c2033848e67..3146f908520 100644
--- a/addons/web_editor/static/tests/wysiwyg_tests.js
+++ b/addons/web_editor/static/tests/wysiwyg_tests.js
@@ -3039,8 +3039,10 @@ QUnit.test('CodeView', function (assert) {
 
 var defMediaDialogInit;
 var defMediaDialogSave;
+var defMediaDialogClose;
 var defCropDialogInit;
 var defCropDialogSave;
+var defCropDialogClose;
 var defAltDialogInit;
 var defAltDialogSave;
 var imgWidth = 10;
@@ -3051,26 +3053,34 @@ QUnit.module('Media', {
         testUtils.mock.patch(MediaDialog, {
             init: function () {
                 this._super.apply(this, arguments);
+                this.uid = _.uniqueId();
                 defMediaDialogInit = $.Deferred();
                 defMediaDialogSave = $.Deferred();
+                defMediaDialogClose = $.Deferred();
                 this.opened(defMediaDialogInit.resolve.bind(defMediaDialogInit));
-            },
-            save: function () {
-                $.when(this._super.apply(this, arguments)).then(function () {
-                    var def = defMediaDialogSave;
+                this.on('closed', this, function () {
+                    var def = defMediaDialogClose;
                     defMediaDialogInit = null;
                     defMediaDialogSave = null;
+                    defMediaDialogClose = null;
                     def.resolve();
                 });
             },
+            save: function () {
+                var def = defMediaDialogSave;
+                $.when(this._super.apply(this, arguments))
+                    .then(def.resolve.bind(def));
+            },
         });
         testUtils.mock.patch(CropDialog, {
             init: function () {
                 $(arguments[2]).attr('src', $(arguments[2]).data('src'));
                 this._super.apply(this, arguments);
                 var self = this;
+                this.uid = _.uniqueId();
                 defCropDialogInit = $.Deferred();
                 defCropDialogSave = $.Deferred();
+                defCropDialogClose = $.Deferred();
                 this.opened(function () {
                     var cropper = self.$cropperImage.data('cropper');
                     cropper.clone();
@@ -3084,15 +3094,19 @@ QUnit.module('Media', {
                     cropper.render();
                     defCropDialogInit.resolve();
                 });
-            },
-            save: function () {
-                $.when(this._super.apply(this, arguments)).then(function () {
-                    var def = defCropDialogSave;
+                this.on('closed', this, function () {
+                    var def = defCropDialogClose;
                     defCropDialogInit = null;
                     defCropDialogSave = null;
+                    defCropDialogClose = null;
                     def.resolve();
                 });
             },
+            save: function () {
+                var def = defCropDialogSave;
+                $.when(this._super.apply(this, arguments))
+                    .then(def.resolve.bind(def));
+            },
         });
         testUtils.mock.patch(AltDialog, {
             init: function () {
@@ -3166,24 +3180,23 @@ QUnit.module('Media', {
 var _clickMedia = function (wysiwyg, assert, callbackInit, test) {
     wysiwyg.$('.note-insert .fa-file-image-o').mousedown().click();
 
-    defMediaDialogSave.then(function () {
+    defMediaDialogInit.then(function () {
+        return callbackInit();
+    });
+    return $.when(defMediaDialogSave, defMediaDialogClose).then(function () {
+        var def = $.when();
         if (test.check) {
-            test.check();
-        }
-        if (test.content) {
-            assert.deepEqual(wysiwyg.getValue(), test.content, testName);
+            def = $.when(test.check());
         }
-        if (test.start) {
-            var range = weTestUtils.select(test.start, test.end, $editable);
-            assert.deepEqual(Wysiwyg.getRange($editable[0]), range, testName + carretTestSuffix);
-        }
-    });
-    return defMediaDialogInit.then(function () {
-        callbackInit();
-        var def = $.Deferred();
-        setTimeout(function () {
-            def.resolve();
-        }, 0);
+        def.then(function () {
+            if (test.content) {
+                assert.deepEqual(wysiwyg.getValue(), test.content, testName);
+            }
+            if (test.start) {
+                var range = weTestUtils.select(test.start, test.end, $editable);
+                assert.deepEqual(Wysiwyg.getRange($editable[0]), range, testName + carretTestSuffix);
+            }
+        });
         return def;
     });
 };
@@ -3494,6 +3507,7 @@ QUnit.test('Image crop', function (assert) {
                             $zoomBtn.mousedown().click();
                             $('.modal-dialog .modal-footer .btn.btn-primary:contains("Save")').mousedown().click();
                         });
+                        return $.when(defCropDialogClose, defCropDialogSave);
                     },
                 },
             },
@@ -3519,6 +3533,7 @@ QUnit.test('Image crop', function (assert) {
                             $('.o_crop_image_dialog .o_crop_options .btn:has(.fa-arrows-h)').mousedown().click();
                             $('.modal-dialog .modal-footer .btn.btn-primary:contains("Save")').mousedown().click();
                         });
+                        return $.when(defCropDialogClose, defCropDialogSave);
                     },
                 },
             },
@@ -3554,6 +3569,7 @@ QUnit.test('Image crop', function (assert) {
                             $pointW.trigger('pointerup');
                             $('.modal-dialog .modal-footer .btn.btn-primary:contains("Save")').mousedown().click();
                         });
+                        return $.when(defCropDialogClose, defCropDialogSave);
                     },
                 },
             },
@@ -3659,7 +3675,7 @@ QUnit.test('Pictogram (fontawesome)', function (assert) {
                 },
                 test: {
                     check: function () {
-                        _clickMedia(wysiwyg, assert, function () {
+                        return _clickMedia(wysiwyg, assert, function () {
                             _insertPictogram('fa-heart');
                         }, {
                             content: '<p>\u200B<span class="fa fa-heart"></span>\u200B</p>',