Issue 7253 - Pre-render icons for badge on Chromium

lib/icon.js

Index: lib/icon.js
===================================================================
--- a/lib/icon.js
+++ b/lib/icon.js
@@ -15,27 +15,30 @@
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 /** @module icon */
 
 "use strict";
 
 const {filterNotifier} = require("../adblockpluscore/lib/filterNotifier");
+const info = require("info");
 
 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];
+
 function loadImage(url)
 {
   return new Promise((resolve, reject) =>
   {
     let image = new Image();
     image.src = url;
     image.addEventListener("load", () =>
     {
@@ -43,32 +46,82 @@
     });
     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"),

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

The icons in the sizes 20 and 40 are only used on Microsoft Edge, hence we don't
need to pretender them if we only use this code path on Chromium.

The sizes 19 and 38 were used by older Chromium versions. We might no longer
need them anymore, but please double check.

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

Done.
I found the bug that led to support for arbitrary sizes:

https://bugs.chromium.org/p/chromium/issues/detail?id=564926

I think this probably made it into Chrome 49, but I'm not sure. I have removed
19x19 and 38x38 in this patch. QA will test on Chrome 49 anyway (I'll make a
note in the Trac ticket), and if it gives problems we can add those sizes back.

Done.

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

I'm certain that it will work on Chrome 49. But Chrome changed the UI at some
point, rendering the browser action icons in 16px instead of 19px (respectively
32px and 38px on high-res displays). The worst that could happen (if some
supported versions are still rendering the browser action icon in 19px/38px) is
that the icon will look blurry/pixelated.

Also if these sizes are in fact no longer relevant we should remove them
completely (not only from this code path), as Firefox won't use them either.

[Manish Jethani, 2019/02/03 08:00:02]

Alright, let's test have QA test it out on Chrome 49. I'm personally OK with it
appearing blurred on really old versions of Chrome if it means better
performance on the newer versions.
Let's make this a separate issue? If QA finds that the icons looks OK on Chrome
49, we can make this change for the next release.

+  ])
+  .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]
     });
@@ -232,8 +285,12 @@
           return;
         }
 
         animateIcon(type, frames);
       }, 10000);
     });
   });
 };
+
+// Pre-render icons on Chromium (#7253).
+if (info.platform == "chromium")
+  renderIcons();