Issue 7253 - Pre-render icons for badge on Chromium

lib/icon.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 13 matching lines @@
 const frameOpacities = [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9,
                         1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0,
                         0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.0];
 const numberOfFrames = frameOpacities.length;
 
 let stopRequested = false;
 let canUpdateIcon = true;
 let notRunning = Promise.resolve();
 let whitelistedState = new ext.PageMap();
 
+let icons = [null, null];

[Manish Jethani, 2019/02/01 14:42:43]

Not whitelisted (0) and whitelisted (1).

+
 function loadImage(url)
 {
   return new Promise((resolve, reject) =>
   {
     let image = new Image();
     image.src = url;
     image.addEventListener("load", () =>
     {
       resolve(image);
     });
     image.addEventListener("error", () =>
     {
       reject("Failed to load image " + url);
     });
   });
 }
 
+function renderIcons()
+{
+  Promise.all([
+    loadImage("icons/abp-16.png"),
+    loadImage("icons/abp-16-whitelisted.png"),
+    loadImage("icons/abp-19.png"),
+    loadImage("icons/abp-19-whitelisted.png"),
+    loadImage("icons/abp-20.png"),
+    loadImage("icons/abp-20-whitelisted.png"),
+    loadImage("icons/abp-32.png"),
+    loadImage("icons/abp-32-whitelisted.png"),
+    loadImage("icons/abp-38.png"),
+    loadImage("icons/abp-38-whitelisted.png"),
+    loadImage("icons/abp-40.png"),
+    loadImage("icons/abp-40-whitelisted.png"),
+  ])
+  .then(images =>
+  {
+    let imageMap = {
+      16: [images[0], images[1]],
+      19: [images[2], images[3]],
+      20: [images[4], images[5]],
+      32: [images[6], images[7]],
+      38: [images[8], images[9]],
+      40: [images[10], images[11]]
+    };
+
+    let canvas = document.createElement("canvas");
+    let context = canvas.getContext("2d");
+
+    for (let whitelisted of [false, true])
+    {
+      let imageData = {};
+      let sizes = [16, 19, 20, 32, 38, 40];
+
+      for (let size of sizes)
+      {
+        canvas.width = size;
+        canvas.height = size;
+        context.globalAlpha = 1;
+        context.drawImage(imageMap[size][whitelisted | 0], 0, 0);
+        imageData[size] = context.getImageData(0, 0, size, size);
+      }
+
+      icons[whitelisted | 0] = imageData;
+    }
+  });
+}
+
 function setIcon(page, notificationType, opacity, frames)
 {
   opacity = opacity || 0;
   let whitelisted = !!whitelistedState.get(page);
 
   if (!notificationType || !frames)
   {
     if (opacity > 0.5)
     {
       page.browserAction.setIcon("/icons/abp-$size-notification-" +
                                  notificationType + ".png");
     }
     else
     {
       page.browserAction.setIcon("/icons/abp-$size" +
-                                 (whitelisted ? "-whitelisted" : "") + ".png");
+                                 (whitelisted ? "-whitelisted" : "") + ".png",
+                                 icons[whitelisted | 0]);
     }
   }
   else
   {
     browser.browserAction.setIcon({
       tabId: page.id,
       imageData: frames["" + opacity + whitelisted]
     });
   }
 }
@@ skipping 153 matching lines @@
           clearInterval(interval);
           resolve();
           return;
         }
 
         animateIcon(type, frames);
       }, 10000);
     });
   });
 };
+
+renderIcons();