Issue 7253 - Pre-render icons for badge on Chromium

ext/background.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present 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 309 matching lines @@
   };
   BrowserAction.prototype = {
     _applyChanges()
     {
       return Promise.all(Object.keys(this._changes).map(change =>
       {
         // Firefox for Android displays the browser action not as an icon but
         // as a menu item. There is no icon, but such an option may be added
         // in the future.
         // https://bugzilla.mozilla.org/show_bug.cgi?id=1331746
-        if (change == "icon" && "setIcon" in browser.browserAction)
+        if (change == "iconPath" && "setIcon" in browser.browserAction)
         {
           let path = {
-            16: this._changes.icon.path.replace("$size", "16"),
-            19: this._changes.icon.path.replace("$size", "19"),
-            20: this._changes.icon.path.replace("$size", "20"),
-            32: this._changes.icon.path.replace("$size", "32"),
-            38: this._changes.icon.path.replace("$size", "38"),
-            40: this._changes.icon.path.replace("$size", "40")

[Sebastian Noack, 2019/02/03 06:43:18]

This should go after trying to use imageData. If we use imageData, those string
replacements are redundant.

[Manish Jethani, 2019/02/03 07:26:48]

Done.

+            16: this._changes.iconPath.replace("$size", "16"),
+            20: this._changes.iconPath.replace("$size", "20"),
+            32: this._changes.iconPath.replace("$size", "32"),
+            40: this._changes.iconPath.replace("$size", "40")
           };
           try
           {
-            // Try ImageData if available.
-            if (this._changes.icon.imageData)
-            {
-              try

[Sebastian Noack, 2019/02/03 06:43:18]

Why do we need try...catch here? Can't we just check in imageData have been
provided?

[Manish Jethani, 2019/02/03 07:26:48]

Yes, makes sense.

Done.

-              {
-                return browser.browserAction.setIcon({
-                  tabId: this._tabId,
-                  imageData: this._changes.icon.imageData
-                });
-              }
-              catch (e)
-              {
-              }
-            }
-
             return browser.browserAction.setIcon({tabId: this._tabId, path});
           }
           catch (e)
           {
             // Edge throws if passed icon sizes different than 19,20,38,40px.
             delete path[16];
             delete path[32];
             return browser.browserAction.setIcon({tabId: this._tabId, path});
           }
         }
 
+        if (change == "iconImageData" && "setIcon" in browser.browserAction)
+        {
+          return browser.browserAction.setIcon({
+            tabId: this._tabId,
+            imageData: this._changes.iconImageData
+          });
+        }
+
         // There is no badge on Firefox for Android; the browser action is
         // simply a menu item.
         if (change == "badgeText" && "setBadgeText" in browser.browserAction)
           return browser.browserAction.setBadgeText({
             tabId: this._tabId,
             text: this._changes.badgeText
           });
 
         // There is no badge on Firefox for Android; the browser action is
         // simply a menu item.
@@ skipping 29 matching lines @@
           this._changes = null;
         }).catch(() =>
         {
           // If the tab is prerendered, browser.browserAction.set* fails
           // and we have to delay our changes until the currently visible tab
           // is replaced with the prerendered tab.
           browser.tabs.onReplaced.addListener(onReplaced);
         });
       }
     },
-    setIcon(path, imageData = null)
-    {
-      this._addChange("icon", {path, imageData});
+    setIconPath(path)
+    {
+      this._addChange("iconPath", path);
+    },
+    setIconImageData(imageData)
+    {
+      this._addChange("iconImageData", imageData);
     },
     setBadge(badge)
     {
       if (!badge)
       {
         this._addChange("badgeText", "");
       }
       else
       {
         if ("number" in badge)
@@ skipping 104 matching lines @@
           return frames.get(0) || null;
         }
       };
     }
 
     return ext.onMessage._dispatch(
       message, sender, sendResponse
     ).includes(true);
   });
 }