[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>

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 () {
-        var self = this;
-        self._super.apply(this, arguments);
-        self._loadItems();
-
-        return new Promise(function (resolve, reject) {
-            Promise.all(self.items).then(resolve).guardedCatch(resolve);
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Instantiate items, using the classes located in SystrayMenu.items.
-     */
-    _loadItems: function () {
+    willStart: function () {
         var self = this;
+        var proms = [];
         SystrayMenu.Items = _.sortBy(SystrayMenu.Items, function (item) {
             return !_.isUndefined(item.prototype.sequence) ? item.prototype.sequence : 50;
         });
-        _.each(SystrayMenu.Items, function (WidgetClass) {
+
+        SystrayMenu.Items.forEach(function (WidgetClass) {
             var cur_systray_item = new WidgetClass(self);
             self.widgets.push(cur_systray_item);
-            self.items.push(cur_systray_item.prependTo(self.$el));
+            proms.push(cur_systray_item.appendTo($('<div>')));
+        });
+
+        return this._super.apply(this, arguments).then(function () {
+            return Promise.all(proms);
+        });
+    },
+    /**
+     * Add the instanciated items, using the object located in this.wisgets
+     */
+    start: function () {
+        var self = this;
+        return this._super.apply(this, arguments).then(function () {
+            self.widgets.forEach(function (widget) {
+                dom.prepend(self.$el, widget.$el);
+            });
         });
     },
 });

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();
+    })
+});

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,

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"/>