[FIX] web: corrected the order of icons in systray

Since the merge of JQuery 3, the building of systray icons is non
deterministic.

After this fix, the menus are loaded correctly in order.

Task-ID: 1960741

closes odoo/odoo#32382

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

4 files changed, 65 insertions, 21 deletions

diff --git a/addons/web/static/src/js/chrome/systray_menu.js b/addons/web/static/src/js/chrome/systray_menu.js
index fd214c0b650..cb292a9b90f 100644
--- a/addons/web/static/src/js/chrome/systray_menu.js
+++ b/addons/web/static/src/js/chrome/systray_menu.js
@@ -1,6 +1,7 @@
 odoo.define('web.SystrayMenu', function (require) {
 "use strict";
 
+var dom = require('web.dom');
 var Widget = require('web.Widget');
 
 /**
@@ -18,35 +19,35 @@ var SystrayMenu = Widget.extend({
         this.widgets = [];
     },
     /**
+     * Instanciate the items and add them into a temporary fragmenet
      * @override
-     * @returns {Promise}
      */
-    start: function () {
+    willStart: function () {
         var self = this;
-        self._super.apply(this, arguments);
-        self._loadItems();
-
-        return new Promise(function (resolve, reject) {
-            Promise.all(self.items).then(resolve).guardedCatch(resolve);
+        var proms = [];
+        SystrayMenu.Items = _.sortBy(SystrayMenu.Items, function (item) {
+            return !_.isUndefined(item.prototype.sequence) ? item.prototype.sequence : 50;
         });
-    },
 
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
+        SystrayMenu.Items.forEach(function (WidgetClass) {
+            var cur_systray_item = new WidgetClass(self);
+            self.widgets.push(cur_systray_item);
+            proms.push(cur_systray_item.appendTo($('<div>')));
+        });
 
+        return this._super.apply(this, arguments).then(function () {
+            return Promise.all(proms);
+        });
+    },
     /**
-     * Instantiate items, using the classes located in SystrayMenu.items.
+     * Add the instanciated items, using the object located in this.wisgets
      */
-    _loadItems: function () {
+    start: function () {
         var self = this;
-        SystrayMenu.Items = _.sortBy(SystrayMenu.Items, function (item) {
-            return !_.isUndefined(item.prototype.sequence) ? item.prototype.sequence : 50;
-        });
-        _.each(SystrayMenu.Items, function (WidgetClass) {
-            var cur_systray_item = new WidgetClass(self);
-            self.widgets.push(cur_systray_item);
-            self.items.push(cur_systray_item.prependTo(self.$el));
+        return this._super.apply(this, arguments).then(function () {
+            self.widgets.forEach(function (widget) {
+                dom.prepend(self.$el, widget.$el);
+            });
         });
     },
 });
diff --git a/addons/web/static/tests/chrome/systray_tests.js b/addons/web/static/tests/chrome/systray_tests.js
new file mode 100644
index 00000000000..c5238ceff04
--- /dev/null
+++ b/addons/web/static/tests/chrome/systray_tests.js
@@ -0,0 +1,43 @@
+odoo.define('web.systray_tests', function (require) {
+    "use strict";
+
+    var testUtils = require('web.test_utils');
+    var SystrayMenu = require('web.SystrayMenu');
+    var Widget = require('web.Widget');
+
+    QUnit.test('Adding async components to the registry respects the sequence', async function (assert) {
+        assert.expect(2);
+        var parent = testUtils.createParent({
+        });
+        var prom = testUtils.makeTestPromise();
+
+        var synchronousFirstWidget = Widget.extend({
+            sequence: 3, // bigger sequence means more to the left
+            start: function () {
+                this.$el.addClass('first');
+            }
+        });
+        var asynchronousSecondWidget = Widget.extend({
+            sequence: 1, // smaller sequence means more to the right
+            willStart: function () {
+                return prom;
+            },
+            start: function () {
+                this.$el.addClass('second');
+            }
+        });
+
+        SystrayMenu.Items = [synchronousFirstWidget, asynchronousSecondWidget];
+        var menu = new SystrayMenu(parent);
+
+        menu.appendTo($('#qunit-fixture'));
+        await testUtils.nextTick();
+        prom.resolve();
+        await testUtils.nextTick();
+
+        assert.hasClass(menu.$('div:eq(0)'), 'first');
+        assert.hasClass(menu.$('div:eq(1)'), 'second');
+
+        parent.destroy();
+    })
+});
diff --git a/addons/web/static/tests/helpers/test_utils_create.js b/addons/web/static/tests/helpers/test_utils_create.js
index 097d46e93f7..f1c67284707 100644
--- a/addons/web/static/tests/helpers/test_utils_create.js
+++ b/addons/web/static/tests/helpers/test_utils_create.js
@@ -392,7 +392,6 @@ function createParent(params) {
 
 return {
     createActionManager: createActionManager,
-    createView: createView,
     createCalendarView: createCalendarView,
     createControlPanel: createControlPanel,
     createDebugManager: createDebugManager,
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index 3759917ac09..5e5a19a85ba 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -586,6 +586,7 @@
                 <script type="text/javascript" src="/web/static/tests/chrome/pager_tests.js"></script>
                 <script type="text/javascript" src="/web/static/tests/chrome/keyboard_navigation_mixin_tests.js"></script>
                 <script type="text/javascript" src="/web/static/tests/chrome/user_menu_tests.js"></script>
+                <script type="text/javascript" src="/web/static/tests/chrome/systray_tests.js"></script>
 
                 <script type="text/javascript" src="/web/static/tests/widgets/data_export_tests.js"/>
                 <script type="text/javascript" src="/web/static/tests/widgets/domain_selector_tests.js"/>