Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Unified Diff: lib/icon.js

Issue 29334223: Issue 3532 - Generate animation images at runtime (Closed)
Patch Set: Handle tab switching / closing during animations Created Jan. 23, 2016, 10 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | lib/notificationHelper.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: lib/icon.js
diff --git a/lib/icon.js b/lib/icon.js
index 2011d1e23701aada50df48f3f2722514d3b3b24e..220429046ee843718883585e40cdb050101c1922 100644
--- a/lib/icon.js
+++ b/lib/icon.js
@@ -17,73 +17,158 @@
/** @module icon */
-const numberOfFrames = 10;
+"use strict";
+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 stopAnimation = null;
+let animationPlaying = false;
let whitelistedState = new ext.PageMap();
-let notificationType = null;
-let animationInterval = null;
-let animationStep = 0;
-function getIconPath(whitelisted)
+let loadImageAsCanvas =
+/**
+ * Loads an image and draws it onto a canvas.
+ *
+ * @param {string} url URL string of the image to load
+ * @return {Promise}
+ */
+exports.loadImageAsCanvas = function(url)
{
- let filename = "icons/abp-$size";
+ return new Promise((resolve, reject) => {
+ let image = new Image();
+ image.src = url;
+ image.addEventListener("load", () =>
+ {
+ let canvas = document.createElement("canvas");
+ let context = canvas.getContext("2d");
+ canvas.height = image.height;
+ canvas.width = image.width;
+ context.drawImage(image, 0, 0);
+ resolve(canvas);
+ });
+ image.addEventListener("error", () => {
+ reject("Failed to load image " + url);
+ });
+ });
+};
- // If the current page is whitelisted, pick an icon that indicates that
- // Adblock Plus is disabled, however not when the notification icon has
- // full opacity, or on Safari where icons are genrally grayscale-only.
- if (whitelisted && animationStep < numberOfFrames && require("info").platform != "safari")
- filename += "-whitelisted";
+function getImageData(baseIcon, overlayIcon, opacity, animationStep, frameCache)
+{
+ let cacheIndex = baseIcon + overlayIcon + opacity;
- // If the icon is currently animating to indicate a pending notification,
- // pick the icon for the corresponing notification type and animation frame.
- if (notificationType && animationStep > 0)
- {
- filename += "-notification-" + notificationType;
+ if (frameCache && frameCache[cacheIndex])
+ return frameCache[cacheIndex];
- if (animationStep < numberOfFrames)
- filename += "-" + animationStep;
- }
+ let imageData = Promise.all(
+ [loadImageAsCanvas(baseIcon),
+ overlayIcon && loadImageAsCanvas(overlayIcon) || Promise.resolve(null)]
+ ).then(icons =>
+ {
+ let baseIconCanvas = icons[0];
+ let overlayIconCanvas = icons[1];
+ let context = baseIconCanvas.getContext("2d");
- return filename + ".png";
+ if (overlayIconCanvas && opacity)
+ {
+ context.globalAlpha = opacity;
+ context.drawImage(overlayIconCanvas, 0, 0);
+ }
+
+ return context.getImageData(0, 0, baseIconCanvas.width,
+ baseIconCanvas.height);
+ });
+ if (frameCache)
+ frameCache[cacheIndex] = imageData;
+ return imageData;
}
-function setIcon(page)
+function setIcon(page, animationType, animationStep, frameCache)
{
- page.browserAction.setIcon(getIconPath(whitelistedState.get(page)));
+ let safari = require("info").platform == "safari";
+ let opacity = animationType ? frameOpacities[animationStep] : 0;
+ let greyed = whitelistedState.get(page) && !safari;
+ let blending = (animationType && opacity > 0 && opacity < 1);
+
+ let filename = "icons/abp-$size";
+ let baseIcon = filename + (greyed ? "-whitelisted" : "") + ".png";
+ let overlayIcon = animationType && (filename + "-notification-" +
+ animationType + ".png");
+
+
+ // If the icon doesn't need any modifications, or the platform doesn't support
+ // data URLs, we can just use the image's filename with the $size placeholder.
+ if (!blending || safari)
+ if (overlayIcon && opacity > 0.5)
+ return page.browserAction.setIcon(overlayIcon);
+ else
+ return page.browserAction.setIcon(baseIcon);
+
+ // Otherwise we must process the images using a canvas and return a data URL
+ // of the result for each size that's required. (19px and 38px are required by
+ // Chrome/Opera.)
+ let imageData = [19, 38].map(size =>
+ {
+ return getImageData(baseIcon.replace("$size", size.toString()),
+ overlayIcon.replace("$size", size.toString()),
+ opacity, animationStep, frameCache);
+ });
+ Promise.all(imageData).then(imageData =>
+ {
+ chrome.browserAction.setIcon({tabId: page._id,
+ imageData: {19: imageData[0],
+ 38: imageData[1]}});
+ });
}
-function runAnimation()
+function runAnimation(animationType)
{
- return setInterval(function()
+ let frameCache = {};
+ let frameInterval;
+
+ function playAnimation()
{
- ext.pages.query({active: true}, function(pages)
+ animationPlaying = true;
+ let animationStep = 0;
+ ext.pages.query({active: true}, pages =>
{
- let fadeInInterval = setInterval(function()
+ function refreshActivePages()
{
- animationStep++;
- pages.forEach(setIcon);
-
- if (animationStep < numberOfFrames)
- return;
-
- setTimeout(function()
+ ext.pages.query({active: true}, newPages => {
+ pages.forEach(page => { setIcon(page); });
+ pages = newPages;
+ });
+ }
+ chrome.tabs.onActivated.addListener(refreshActivePages);
+ chrome.tabs.onRemoved.addListener(refreshActivePages);
+
+ frameInterval = setInterval(() =>
+ {
+ pages.forEach(page => {
+ setIcon(page, animationType, animationStep++, frameCache);
+ });
+ if (animationStep >= numberOfFrames)
{
- let fadeOutInterval = setInterval(function()
- {
- animationStep--;
- pages.forEach(setIcon);
-
- if (animationStep > 0)
- return;
-
- clearInterval(fadeOutInterval);
- }, 100);
- },1000);
-
- clearInterval(fadeInInterval);
+ animationStep = 0;
+ clearInterval(frameInterval);
+ animationPlaying = false;
+ chrome.tabs.onActivated.removeListener(refreshActivePages);
+ chrome.tabs.onRemoved.removeListener(refreshActivePages);
+ }
}, 100);
});
- }, 10000);
+ }
+
+ playAnimation();
+ let animationInterval = setInterval(playAnimation, 10000);
+ return () =>
+ {
+ clearInterval(frameInterval);
+ clearInterval(animationInterval);
+ animationPlaying = false;
+ };
}
/**
@@ -95,8 +180,9 @@ function runAnimation()
*/
exports.updateIcon = function(page, whitelisted)
{
- page.browserAction.setIcon(getIconPath(whitelisted));
whitelistedState.set(page, whitelisted);
+ if (!animationPlaying)
+ setIcon(page);
};
/**
@@ -106,10 +192,8 @@ exports.updateIcon = function(page, whitelisted)
*/
exports.startIconAnimation = function(type)
{
- notificationType = type;
-
- if (animationInterval == null)
- animationInterval = runAnimation();
+ stopAnimation && stopAnimation();
+ stopAnimation = runAnimation(type);
};
/**
@@ -117,11 +201,5 @@ exports.startIconAnimation = function(type)
*/
exports.stopIconAnimation = function()
{
- if (animationInterval != null)
- {
- clearInterval(animationInterval);
- animationInterval = null;
- }
-
- notificationType = null;
+ stopAnimation && stopAnimation();
};
« no previous file with comments | « no previous file | lib/notificationHelper.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld