From eebb0c6152f270cfabb183f79fcf2b2e56918950 Mon Sep 17 00:00:00 2001
From: Vincent Schippefilt <vsc@odoo.com>
Date: Fri, 5 Apr 2019 07:48:02 +0000
Subject: [PATCH] [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>
---
 .../web/static/src/js/chrome/systray_menu.js  | 43 ++++++++++---------
 .../web/static/tests/chrome/systray_tests.js  | 43 +++++++++++++++++++
 .../static/tests/helpers/test_utils_create.js |  1 -
 addons/web/views/webclient_templates.xml      |  1 +
 4 files changed, 66 insertions(+), 22 deletions(-)
 create mode 100644 addons/web/static/tests/chrome/systray_tests.js

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 () {
-        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);
+            });
         });
     },
 });
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"/>