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 == "iconPath" && "setIcon" in browser.browserAction)
+        if (change == "icon" && "setIcon" in browser.browserAction)
         {
+          // Use ImageData if available.
+          if (this._changes.icon.imageData)
+          {
+            return browser.browserAction.setIcon({
+              tabId: this._tabId,
+              imageData: this._changes.icon.imageData
+            });
+          }
+
           let path = {
-            16: this._changes.iconPath.replace("$size", "16"),
-            19: this._changes.iconPath.replace("$size", "19"),
-            20: this._changes.iconPath.replace("$size", "20"),
-            32: this._changes.iconPath.replace("$size", "32"),
-            38: this._changes.iconPath.replace("$size", "38"),
-            40: this._changes.iconPath.replace("$size", "40")
+            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")
           };
           try
           {
             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];
@@ skipping 43 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)
+    setIcon(path, imageData = null)
     {
-      this._addChange("iconPath", path);
+      this._addChange("icon", {path, imageData});

[Sebastian Noack, 2019/02/03 07:45:15]

How about using _addChange("iconPath") and _addChange("iconImageData") rather
than creating an object and branching off withing the "icon" case?

     },
     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);
   });
 }