[FIX] base: properly alert the user of bundle compilation errors

Since we now use native promises, the code in charge of alerting the
user of bundle compilation errors was opening both an alert and a
dialog (fwp of https://github.com/odoo/odoo/pull/46437).

In 13.0, the mention fwp is not enough. On the website, the JS is also
lazy loaded now so we need to wait for that lazy loading before being
able to open a modal.

The whole alerting code should be improved to not be defined in python.

Fixes https://github.com/odoo/odoo/issues/45447

closes odoo/odoo#46482

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

1 files changed, 45 insertions, 15 deletions

diff --git a/odoo/addons/base/models/assetsbundle.py b/odoo/addons/base/models/assetsbundle.py
index 4ba5b446d67..49db726da11 100644
--- a/odoo/addons/base/models/assetsbundle.py
+++ b/odoo/addons/base/models/assetsbundle.py
@@ -334,39 +334,69 @@ class AssetsBundle(object):
         return attachments
 
     def dialog_message(self, message):
+        """
+        Returns a JS script which shows a warning to the user on page load.
+        TODO: should be refactored to be a base js file whose code is extended
+              by related apps (web/website).
+        """
         return """
             (function (message) {
-                if (window.__assetsBundleErrorSeen) return;
+                'use strict';
+
+                if (window.__assetsBundleErrorSeen) {
+                    return;
+                }
                 window.__assetsBundleErrorSeen = true;
 
-                var loaded = function () {
-                    clearTimeout(loadedTimeout);
-                    var alertTimeout = setTimeout(alert.bind(window, message), 0);
+                if (document.readyState !== 'loading') {
+                    onDOMContentLoaded();
+                } else {
+                    window.addEventListener('DOMContentLoaded', () => onDOMContentLoaded());
+                }
+
+                async function onDOMContentLoaded() {
                     var odoo = window.top.odoo;
-                    if (!odoo || !odoo.define) return;
+                    if (!odoo || !odoo.define) {
+                        useAlert();
+                        return;
+                    }
+
+                    // Wait for potential JS loading
+                    await new Promise(resolve => {
+                        const noLazyTimeout = setTimeout(() => resolve(), 10); // 10 since need to wait for promise resolutions of odoo.define
+                        odoo.define('AssetsBundle.PotentialLazyLoading', function (require) {
+                            'use strict';
+
+                            const lazyloader = require('web.public.lazyloader');
+
+                            clearTimeout(noLazyTimeout);
+                            lazyloader.allScriptsLoaded.then(() => resolve());
+                        });
+                    });
 
-                    odoo.define("AssetsBundle.ErrorMessage", function (require) {
-                        "use strict";
+                    var alertTimeout = setTimeout(useAlert, 10); // 10 since need to wait for promise resolutions of odoo.define
+                    odoo.define('AssetsBundle.ErrorMessage', function (require) {
+                        'use strict';
 
                         require('web.dom_ready');
-                        var core = require("web.core");
-                        var Dialog = require("web.Dialog");
+                        var core = require('web.core');
+                        var Dialog = require('web.Dialog');
 
                         var _t = core._t;
 
                         clearTimeout(alertTimeout);
-
                         new Dialog(null, {
                             title: _t("Style error"),
-                            $content: $("<div/>")
-                                .append($("<p/>", {text: _t("The style compilation failed, see the error below. Your recent actions may be the cause, please try reverting the changes you made.")}))
-                                .append($("<pre/>", {html: message})),
+                            $content: $('<div/>')
+                                .append($('<p/>', {text: _t("The style compilation failed, see the error below. Your recent actions may be the cause, please try reverting the changes you made.")}))
+                                .append($('<pre/>', {html: message})),
                         }).open();
                     });
                 }
 
-                var loadedTimeout = setTimeout(loaded, 5000);
-                document.addEventListener("DOMContentLoaded", loaded);
+                function useAlert() {
+                    window.alert(message);
+                }
             })("%s");
         """ % message.replace('"', '\\"').replace('\n', '&NewLine;')