Issue 1976 - Handle prerendered tabs on Chrome

chrome/ext/background.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2015 Eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 90 matching lines @@
     },
     onLoading: new ext._EventTarget()
   };
 
   chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab)
   {
     if (changeInfo.status == "loading")
       ext.pages.onLoading._dispatch(new Page(tab));
   });
 
+  function forgetTab(tabId)
+  {
+    ext._removeFromAllPageMaps(tabId);
+    delete framesOfTabs[tabId];
+  }
+
   chrome.webNavigation.onBeforeNavigate.addListener(function(details)
   {
     if (details.frameId == 0)
-      ext._removeFromAllPageMaps(details.tabId);
+      forgetTab(details.tabId);
   });
 
-  chrome.tabs.onRemoved.addListener(function(tabId)
+  chrome.tabs.onReplaced.addListener(function(addedTabId, removedTabId)
   {
-    ext._removeFromAllPageMaps(tabId);
-    delete framesOfTabs[tabId];
+    forgetTab(removedTabId);
   });
 
+  chrome.tabs.onRemoved.addListener(forgetTab);
+
 
   /* Browser actions */
 
   var BrowserAction = function(tabId)
   {
     this._tabId = tabId;
+    this._changes = null;
   };
   BrowserAction.prototype = {
+    _applyChanges: function()
+    {
+      if ("iconPath" in this._changes)
+      {
+        chrome.browserAction.setIcon({
+          tabId: this._tabId,
+          path: {
+            19: this._changes.iconPath.replace("$size", "19"),
+            38: this._changes.iconPath.replace("$size", "38")
+          }
+        });
+      }
+
+      if ("badgeText" in this._changes)
+      {
+        chrome.browserAction.setBadgeText({
+          tabId: this._tabId,
+          text: this._changes.badgeText
+        });
+      }
+
+      if ("badgeColor" in this._changes)
+      {
+        chrome.browserAction.setBadgeBackgroundColor({
+          tabId: this._tabId,
+          color: this._changes.badgeColor
+        });
+      }
+
+      this._changes = null;
+    },
+    _queueChanges: function()
+    {
+      chrome.tabs.get(this._tabId, function()
+      {
+        // If the tab is prerendered, chrome.tabs.get() sets
+        // chrome.runtime.lastError and we have to delay our changes
+        // until the currently visible tab is replaced with the
+        // prerendered tab. Otherwise chrome.browserAction.set* fails.
+        if (chrome.runtime.lastError)
+        {
+          var onReplaced = function(addedTabId, removedTabId)
+          {
+            if (addedTabId == this._tabId)
+            {
+              chrome.tabs.onReplaced.removeListener(onReplaced);
+              this._applyChanges();

[kzar, 2015/02/09 16:38:40]

Woudln't `this` in this context be onReplaced instead of BrowserAction?

[Sebastian Noack, 2015/02/09 17:03:24]

Mind the .bind() below. ;)

[kzar, 2015/02/09 17:05:25]

Whoops OK, missed that!

+            }
+          }.bind(this);
+          chrome.tabs.onReplaced.addListener(onReplaced);
+        }
+        else
+        {
+          this._applyChanges();

[kzar, 2015/02/09 16:38:40]

Nit: Don't really need the braces for the else clause here.

[Sebastian Noack, 2015/02/09 17:03:24]

Some time ago Wladimir told me to add braces for the else-block if the if-block
requires braces and vice-versa.

[kzar, 2015/02/09 17:05:25]

Fair enough

+        }
+      }.bind(this));
+    },
+    _addChange: function(name, value)
+    {
+      if (!this._changes)
+      {
+        this._changes = {};
+        this._queueChanges();
+      }
+
+      this._changes[name] = value;
+    },
     setIcon: function(path)
     {
-      var paths = {};
-      for (var i = 1; i <= 2; i++)
-      {
-        var size = i * 19;
-        paths[size] = path.replace("$size", size);
-      }
-
-      chrome.browserAction.setIcon({tabId: this._tabId, path: paths});
+      this._addChange("iconPath", path);
     },
     setBadge: function(badge)
     {
       if (!badge)
       {
-        chrome.browserAction.setBadgeText({
-          tabId: this._tabId,
-          text: ""
-        });
-        return;
+        this._addChange("badgeText", "");
       }
+      else
+      {
+        if ("number" in badge)
+          this._addChange("badgeText", badge.number.toString());
 
-      if ("color" in badge)
-      {
-        chrome.browserAction.setBadgeBackgroundColor({
-          tabId: this._tabId,
-          color: badge.color
-        });
-      }
-
-      if ("number" in badge)
-      {
-        chrome.browserAction.setBadgeText({
-          tabId: this._tabId,
-          text: badge.number.toString()
-        });
+        if ("color" in badge)
+          this._addChange("badgeColor", badge.color);
       }
     }
   };
 
 
   /* Context menus */
 
   var contextMenuItems = new ext.PageMap();
   var contextMenuUpdating = false;
 
@@ skipping 259 matching lines @@
             callback(new Page(tab));
         }
         else
         {
           ext.pages.open(optionsUrl, callback);
         }
       });
     });
   };
 })();