Fixed: Messaging between sidebar and background

May be the cause of the broken tabs tree and wrong
panels on init: #633, #104, #524, #549, #262, #267, #496, #319, ...etc

Author: mbnuqw

addon/actions/msg.js

@@ -30,6 +30,8 @@ function initGlobalMessaging() {
  */
 function initMessaging() {
   browser.runtime.onConnect.addListener(port => {
+    const sidebarListener = msg => onSidebarMsg(msg, port)
+
     // Setup message handling
     let info = JSON.parse(port.name)
     if (info.instanceType === 'sidebar') {
@@ -39,9 +41,8 @@ function initMessaging() {
       if (this.settings.markWindow) {
         browser.windows.update(win.id, { titlePreface: this.settings.markWindowPreface })
       }
-
       connectedSidebars[info.windowId] = port
-      port.onMessage.addListener(onSidebarMsg)
+      port.onMessage.addListener(sidebarListener)
 
       if (firstSidebarInitHandlers) {
         for (let handler of firstSidebarInitHandlers) {
@@ -61,7 +62,7 @@ function initMessaging() {
 
         if (this.settings.markWindow) browser.windows.update(info.windowId, { titlePreface: '' })
 
-        targetPort.onMessage.removeListener(onSidebarMsg)
+        targetPort.onMessage.removeListener(sidebarListener)
         delete connectedSidebars[info.windowId]
       }
     })
@@ -71,8 +72,9 @@ function initMessaging() {
 /**
  * Handle message from sidebar
  */
-function onSidebarMsg(msg) {
+function onSidebarMsg(msg, port) {
   if (!Actions.initialized) return
+  if (port) port.postMessage(msg.id)
   if (msg.action !== undefined && Actions[msg.action]) {
     if (msg.arg) Actions[msg.action](msg.arg)
     else if (msg.args) Actions[msg.action](...msg.args)

src/actions/favicons.js

@@ -35,15 +35,7 @@ function setFavicon(url, icon) {
   if (index > -1) Vue.set(this.state.favUrls, url, index)
 
   if (this.state.private || alreadyCached) return
-  if (this.state.bg && !this.state.bg.error) {
-    this.state.bg.postMessage({ action: 'saveFavicon', args: [url, icon] })
-  } else {
-    browser.runtime.sendMessage({
-      action: 'saveFavicon',
-      instanceType: 'bg',
-      args: [url, icon],
-    })
-  }
+  this.actions.msgToBg('saveFavicon', [url, icon])
 }
 
 export default {

src/sidebar/actions/misc.js

@@ -18,16 +18,42 @@ async function loadWindowInfo() {
 /**
  * Connect to background script
  */
+const msgsWaitingForConfirm = {}
+let msgCounter = 1
+let reconnectTryCount = 0
 function connectToBG() {
   const connectInfo = JSON.stringify({
     instanceType: this.state.instanceType,
     windowId: this.state.windowId,
   })
   this.bgConnectTryCount = 0
   this.state.bg = browser.runtime.connect({ name: connectInfo })
+  this.state.bg.onMessage.addListener(msg => {
+    clearTimeout(msgsWaitingForConfirm[msg])
+    delete msgsWaitingForConfirm[msg]
+  })
   this.state.bg.onDisconnect.addListener(this.handlers.onBgDisconnect)
 }
 
+function msgToBg(action, args) {
+  const id = msgCounter++
+
+  if (!this.state.bg || this.state.bg.error) {
+    browser.runtime.sendMessage({ instanceType: 'bg', action, args })
+    return
+  }
+
+  this.state.bg.postMessage({ id, action, args })
+
+  msgsWaitingForConfirm[id] = setTimeout(() => {
+    browser.runtime.sendMessage({ instanceType: 'bg', action, args })
+    delete msgsWaitingForConfirm[id]
+
+    this.state.bg = null
+    if (reconnectTryCount++ < 3) this.actions.connectToBG()
+  }, 1000)
+}
+
 /**
  * Show window-select panel
  */
@@ -374,6 +400,7 @@ function finishProgress(notification, delay = 120) {
 export default {
   loadWindowInfo,
   connectToBG,
+  msgToBg,
   chooseWin,
   loadPermissions,
   getAllWindows,

src/sidebar/actions/tabs.js

@@ -538,18 +538,7 @@ function saveTabsData(delay = 300) {
       return
     }
 
-    if (this.state.bg && !this.state.bg.error) {
-      this.state.bg.postMessage({
-        action: 'saveTabsData',
-        args: [this.state.windowId, data],
-      })
-    } else {
-      browser.runtime.sendMessage({
-        instanceType: 'bg',
-        action: 'saveTabsData',
-        args: [this.state.windowId, data],
-      })
-    }
+    this.actions.msgToBg('saveTabsData', [this.state.windowId, data])
   }, delay)
 }