Issue 3532 - Generate animation images at runtime

lib/notificationHelper.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2016 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
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 /** @module notificationHelper */
 
-let {startIconAnimation, stopIconAnimation} = require("icon");
+let {loadImage, startIconAnimation, stopIconAnimation} = require("icon");
 let {Utils} = require("utils");
 let {Notification: NotificationStorage} = require("notification");
 let {stringifyURL} = require("url");
 let {initAntiAdblockNotification} = require("antiadblockInit");
 
 let activeNotification = null;
 let activeButtons = null;
 let defaultDisplayMethods = ["popup"];
 let displayMethods = Object.create(null);
 displayMethods.critical = ["icon", "notification", "popup"];
@@ skipping 114 matching lines @@
       activeNotification.onClicked();
       break;
   }
 }
 
 function notificationClosed()
 {
   activeNotification = null;
 }
 
-function imgToBase64(url, callback)
+function imageToBase64(url)
 {
-  let canvas = document.createElement("canvas"),
-  ctx = canvas.getContext("2d"),
-  img = new Image;
-  img.src = url;
-  img.onload = function()
+  return loadImage(url).then(image =>
   {
-    canvas.height = img.height;
-    canvas.width = img.width;
-    ctx.drawImage(img, 0, 0);
-    callback(canvas.toDataURL("image/png"));
-    canvas = null;
-  };
+    let canvas = document.createElement("canvas");
+    let context = canvas.getContext("2d");
+    canvas.height = image.height;
+    canvas.width = image.width;
+    context.drawImage(image, 0, 0);
+    return canvas.toDataURL("image/png");
+  });
 }
 
 function initChromeNotifications()
 {
   // Chrome hides notifications in notification center when clicked so we need to clear them
   function clearActiveNotification(notificationId)
   {
     if (activeNotification && activeNotification.type != "question" && !("links" in activeNotification))
       return;
 
@@ skipping 31 matching lines @@
     {
       activeButtons = getNotificationButtons(activeNotification.type, texts.message);
       let opts = {
         type: "basic",
         title: title,
         message: message,
         buttons: activeButtons.map(button => ({title: button.title})),
         priority: 2 // We use the highest priority to prevent the notification from closing automatically
       };
 
-      imgToBase64(iconUrl, function(iconData)
+      imageToBase64(iconUrl).then(iconData =>
       {
         opts.iconUrl = iconData;
         chrome.notifications.create("", opts, function() {});
       });
     }
     else if ("Notification" in window && activeNotification.type != "question")
     {
       if (linkCount > 0)
         message += " " + ext.i18n.getMessage("notification_without_buttons");
 
-      imgToBase64(iconUrl, function(iconData)
+      imageToBase64(iconUrl).then(iconData =>
       {
         let notification = new Notification(
           title,
           {
             lang: Utils.appLocale,
             dir: ext.i18n.getMessage("@@bidi_dir"),
             body: message,
             icon: iconData
           }
         );
@@ skipping 57 matching lines @@
  * @param {string} notificationType
  * @return {boolean}
  */
 exports.shouldDisplay = function(method, notificationType)
 {
   let methods = displayMethods[notificationType] || defaultDisplayMethods;
   return methods.indexOf(method) > -1;
 };
 
 NotificationStorage.addShowListener(showNotification);