[MERGE][FIX] bus, mail, web: several cross-tab communication fixes

### [FIX] bus: background slave tabs should not loose notifications

Slave tabs missed some notifications in case the local storage
event's `newValue` did not match actual value in local storage. This
happens when master tab overwrites a value that slave tabs did not
take the time to read. Slave tabs should now always handle all local
storage events.

Task-ID 2044231

### [FIX] bus, mail: correctly synchronize document chat windows

Cross-tab synchronization of document chat windows resulted sometimes
with an infinite loop. This happens due to tabs relying on actual
value in the local storage and all document chat windows state being
set as a single local storage entry. Cross-tab communication of
document chat windows now is relying on event's `newValue`, and each
document chat window has its own local storage entry. Changes from
local storage no longer writes again in the local storage, so that
it no longer makes an echo (= infinite loop).

Task-Id 2034997

closes odoo/odoo#36177

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

3 files changed, 80 insertions, 26 deletions

diff --git a/addons/mail/static/src/js/models/threads/document_thread.js b/addons/mail/static/src/js/models/threads/document_thread.js
index 18f1e4fb762..3d91b786cef 100644
--- a/addons/mail/static/src/js/models/threads/document_thread.js
+++ b/addons/mail/static/src/js/models/threads/document_thread.js
@@ -62,9 +62,16 @@ var DocumentThread = Thread.extend({
      * shared between tabs, and restored on F5.
      *
      * @override
+     * @param {Object} [options]
+     * @param {boolean} [options.skipCrossTabSync=false] if set, it should
+     *   not notify other tabs from updating document thread state. This happens
+     *   in case the `close` operation comes from local storage event.
      */
-    close: function () {
+    close: function (options) {
         this._super.apply(this, arguments);
+        if (options && options.skipCrossTabSync) {
+            return;
+        }
         this.call('mail_service', 'updateDocumentThreadState', this._id, {
             name: this.getName(),
             windowState: 'closed',
@@ -75,9 +82,16 @@ var DocumentThread = Thread.extend({
      * shared between tabs, and restored on F5.
      *
      * @override
+     * @param {Object} [options]
+     * @param {boolean} [options.skipCrossTabSync=false] if set, it should
+     *   not notify other tabs from updating document thread state. This happens
+     *   in case the `detach` operation comes from local storage event.
      */
-    detach: function () {
+    detach: function (options) {
         this._super.apply(this, arguments);
+        if (options && options.skipCrossTabSync) {
+            return;
+        }
         var windowState = this._folded ? 'folded' : 'open';
         this.call('mail_service', 'updateDocumentThreadState', this._id, {
             name: this.getName(),
@@ -105,9 +119,16 @@ var DocumentThread = Thread.extend({
      * shared between tabs, and restored on F5.
      *
      * @override
+     * @param {Object} [options]
+     * @param {boolean} [options.skipCrossTabSync=false] if set, it should
+     *   not notify other tabs from updating document thread state. This happens
+     *   in case the `detach` operation comes from local storage event.
      */
-    fold: function () {
+    fold: function (folded, options) {
         this._super.apply(this, arguments);
+        if (options && options.skipCrossTabSync) {
+            return;
+        }
         var windowState = this._folded ? 'folded' : 'open';
         this.call('mail_service', 'updateDocumentThreadState', this._id, {
             name: this.getName(),
diff --git a/addons/mail/static/src/js/services/mail_document_thread_manager.js b/addons/mail/static/src/js/services/mail_document_thread_manager.js
index 000a1c15fa5..1af3fc337a3 100644
--- a/addons/mail/static/src/js/services/mail_document_thread_manager.js
+++ b/addons/mail/static/src/js/services/mail_document_thread_manager.js
@@ -21,17 +21,23 @@ MailManager.include({
 
     start: function () {
         this._super.apply(this, arguments);
-
+        this._documentThreadWindowStates = {};
+        this._tabId = this.call('bus_service', 'getTabId');
         // retrieve the open DocumentThreads from the localStorage
-        var state = this.call('local_storage', 'getItem', this.DOCUMENT_THREAD_STATE_KEY);
-        if (!state) {
-            this.call('local_storage', 'setItem', this.DOCUMENT_THREAD_STATE_KEY, {});
-        } else {
-            this.isReady().then(this._updateDocumentThreadWindows.bind(this, state));
+        var localStorageLength = this.call('local_storage', 'length');
+        for (var i = 0; i < localStorageLength; i++) {
+            var key = this.call('local_storage', 'key', i);
+            if (key.indexOf(this.DOCUMENT_THREAD_STATE_KEY) === 0) {
+                // key format: DOCUMENT_THREAD_STATE_KEY + '/' + threadId
+                var documentThreadId = key.substring(this.DOCUMENT_THREAD_STATE_KEY.length+1);
+                this._documentThreadWindowStates[documentThreadId] =
+                    this.call('local_storage', 'getItem', key);
+            }
         }
+        this.isReady().then(this._updateDocumentThreadWindows.bind(this, this._documentThreadWindowStates));
         // listen to localStorage changes to synchronize DocumentThread's
         // windows between tabs
-        window.addEventListener('storage', this._onStorage.bind(this));
+        this.call('local_storage', 'onStorage', this, this._onStorage);
     },
 
     //--------------------------------------------------------------------------
@@ -60,7 +66,10 @@ MailManager.include({
             options.postedFromDocumentThread
         ) {
             var key = this.DOCUMENT_THREAD_MESSAGE_KEY;
-            this.call('local_storage', 'setItem', key, data);
+            this.call('local_storage', 'setItem', key, {
+                messageData: data,
+                tabId: this._tabId,
+            });
         }
         return this._super.apply(this, arguments);
     },
@@ -144,12 +153,11 @@ MailManager.include({
      * @param {string} state.windowState ('closed', 'folded' or 'open')
      */
     updateDocumentThreadState: function (threadID, state) {
-        var states = this.call('local_storage', 'getItem', this.DOCUMENT_THREAD_STATE_KEY);
-        states = _.omit(states, function (state) {
-            return state.windowState === 'closed';
+        this._documentThreadWindowStates[threadID] = state;
+        this.call('local_storage', 'setItem', this.DOCUMENT_THREAD_STATE_KEY + '/' + threadID, {
+            state: state,
+            tabId: this._tabId,
         });
-        states[threadID] = state;
-        this.call('local_storage', 'setItem', this.DOCUMENT_THREAD_STATE_KEY, states);
     },
 
     //--------------------------------------------------------------------------
@@ -194,10 +202,17 @@ MailManager.include({
                 resModel: info[0],
             });
             if (state.windowState === 'closed') {
-                documentThread.close();
+                documentThread.close({
+                    skipCrossTabSync: true,
+                });
             } else {
-                documentThread.fold(state.windowState === 'folded');
-                self.openThreadWindow(documentThread.getID(), { keepFoldState: true });
+                documentThread.fold(state.windowState === 'folded', {
+                    skipCrossTabSync: true,
+                });
+                self.openThreadWindow(documentThread.getID(), {
+                    keepFoldState: true,
+                    skipCrossTabSync: true,
+                });
             }
         });
     },
@@ -213,13 +228,27 @@ MailManager.include({
      * @param {StorageEvent} ev
      */
     _onStorage: function (ev) {
-        if (ev.key === this.DOCUMENT_THREAD_STATE_KEY) {
-            var state = this.call('local_storage', 'getItem', this.DOCUMENT_THREAD_STATE_KEY);
-            this._updateDocumentThreadWindows(state);
+        var value;
+        try {
+            value = JSON.parse(ev.newValue);
+        } catch (err) {
+            return;
+        }
+        if (ev.key.indexOf(this.DOCUMENT_THREAD_STATE_KEY) === 0) {
+            if (value.tabId === this._tabId) {
+                return;
+            }
+            // key format: DOCUMENT_THREAD_STATE_KEY + '/' + threadId
+            var documentThreadId = ev.key.substring(this.DOCUMENT_THREAD_STATE_KEY.length+1);
+            var param = {};
+            param[documentThreadId] = value.state;
+            this._updateDocumentThreadWindows(param);
         } else if (ev.key === this.DOCUMENT_THREAD_MESSAGE_KEY) {
-            var message = this.call('local_storage', 'getItem', this.DOCUMENT_THREAD_MESSAGE_KEY);
-            if (message) {
-                this.addMessage(message);
+            if (value.tabId === this._tabId) {
+                return;
+            }
+            if (value.messageData) {
+                this.addMessage(value.messageData);
             }
         }
     },
diff --git a/addons/mail/static/src/js/services/mail_window_manager.js b/addons/mail/static/src/js/services/mail_window_manager.js
index ebb6a0ff2e7..c5b9f2566c5 100644
--- a/addons/mail/static/src/js/services/mail_window_manager.js
+++ b/addons/mail/static/src/js/services/mail_window_manager.js
@@ -94,6 +94,8 @@ MailManager.include({
      *   is not open yet, and do nothing otherwise.
      * @param {boolean} [options.keepFoldState=false] if set to true, keep the
      *   fold state of the thread
+     * @param {boolean} [options.skipCrossTabSync=false] if set, thread
+     *   should not notify other tabs from new document thread chat window state.
      */
     openThreadWindow: function (threadID, options) {
         var self = this;
@@ -130,7 +132,9 @@ MailManager.include({
                 // thread window could not be open, which may happen due to
                 // access error while fetching messages to the document.
                 // abort opening the thread window in this case.
-                thread.close();
+                thread.close({
+                    skipCrossTabSync: true,
+                });
             }).always(function () {
                 thread.isCreatingWindow = false;
             });