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: Avoid warnings when closing tabs during animation Created Jan. 21, 2016, 10:28 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 | « background.js ('k') | 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..64d5f182f34a197b4d7dec7417f9c3e9fec76c2f 100644
--- a/lib/icon.js
+++ b/lib/icon.js
@@ -16,74 +16,127 @@
*/
/** @module icon */
+"use strict";
-const numberOfFrames = 10;
+let {Utils} = require("utils");
+const frameOpacities = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9,
+ 1, 1, 1, 1, 1,
+ 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 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)
+function getImageData(size, baseIcon, overlayIcon, opacity,
+ animationStep, frameCache)
{
- let filename = "icons/abp-$size";
+ let cacheIndex = baseIcon + size + opacity;
+
+ if (frameCache && frameCache[cacheIndex])
+ return frameCache[cacheIndex];
- // 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";
+ let canvas = document.createElement("canvas");
+ let context = canvas.getContext("2d");
- // 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)
+ let imageData = Promise.all(
+ [Utils.loadImage(baseIcon, size), Utils.loadImage(overlayIcon, size)]
+ ).then(function(icons)
{
- filename += "-notification-" + notificationType;
+ baseIcon = icons[0];
+ overlayIcon = icons[1];
- if (animationStep < numberOfFrames)
- filename += "-" + animationStep;
- }
+ canvas.width = baseIcon.width;
+ canvas.height = baseIcon.height;
+
+ context.globalAlpha = 1;
+ context.drawImage(baseIcon, 0, 0);
- return filename + ".png";
+ if (overlayIcon && opacity)
+ {
+ context.globalAlpha = opacity;
+ context.drawImage(overlayIcon, 0, 0);
+ }
+
+ return context.getImageData(0, 0, canvas.width, canvas.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(function(size)
+ {
+ return getImageData(size, baseIcon, overlayIcon, opacity,
+ animationStep, frameCache);
+ });
+ Promise.all(imageData).then(function(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;
+ frameInterval = setInterval(function()
{
- let fadeInInterval = setInterval(function()
+ ext.pages.query({active: true}, function(pages)
{
- animationStep++;
- pages.forEach(setIcon);
-
- if (animationStep < numberOfFrames)
- return;
-
- setTimeout(function()
+ pages.forEach(function (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);
- }, 100);
- });
- }, 10000);
+ animationStep = 0;
+ clearInterval(frameInterval);
+ animationPlaying = false;
+ }
+ });
+ }, 100);
+ }
+
+ playAnimation();
+ let animationInterval = setInterval(playAnimation, 10000);
+ return function()
+ {
+ clearInterval(frameInterval);
+ clearInterval(animationInterval);
+ animationPlaying = false;
+ };
}
/**
@@ -95,8 +148,9 @@ function runAnimation()
*/
exports.updateIcon = function(page, whitelisted)
{
- page.browserAction.setIcon(getIconPath(whitelisted));
whitelistedState.set(page, whitelisted);
+ if (!animationPlaying)
+ setIcon(page);
};
/**
@@ -106,10 +160,8 @@ exports.updateIcon = function(page, whitelisted)
*/
exports.startIconAnimation = function(type)
{
- notificationType = type;
-
- if (animationInterval == null)
- animationInterval = runAnimation();
+ stopAnimation && stopAnimation();
+ stopAnimation = runAnimation(type);
};
/**
@@ -117,11 +169,5 @@ exports.startIconAnimation = function(type)
*/
exports.stopIconAnimation = function()
{
- if (animationInterval != null)
- {
- clearInterval(animationInterval);
- animationInterval = null;
- }
-
- notificationType = null;
+ stopAnimation && stopAnimation();
};
« no previous file with comments | « background.js ('k') | lib/notificationHelper.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld