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

Side by Side 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.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | lib/notificationHelper.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /* 1 /*
2 * This file is part of Adblock Plus <https://adblockplus.org/>, 2 * This file is part of Adblock Plus <https://adblockplus.org/>,
3 * Copyright (C) 2006-2016 Eyeo GmbH 3 * Copyright (C) 2006-2016 Eyeo GmbH
4 * 4 *
5 * Adblock Plus is free software: you can redistribute it and/or modify 5 * Adblock Plus is free software: you can redistribute it and/or modify
6 * it under the terms of the GNU General Public License version 3 as 6 * it under the terms of the GNU General Public License version 3 as
7 * published by the Free Software Foundation. 7 * published by the Free Software Foundation.
8 * 8 *
9 * Adblock Plus is distributed in the hope that it will be useful, 9 * Adblock Plus is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of 10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 * GNU General Public License for more details. 12 * GNU General Public License for more details.
13 * 13 *
14 * You should have received a copy of the GNU General Public License 14 * You should have received a copy of the GNU General Public License
15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>. 15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.
16 */ 16 */
17 17
18 /** @module icon */ 18 /** @module icon */
19 19
20 const numberOfFrames = 10; 20 "use strict";
21 21
22 const frameOpacities = [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9,
23 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0,
24 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.0];
25 const numberOfFrames = frameOpacities.length;
26
27 let stopAnimation = null;
28 let animationPlaying = false;
22 let whitelistedState = new ext.PageMap(); 29 let whitelistedState = new ext.PageMap();
23 let notificationType = null;
24 let animationInterval = null;
25 let animationStep = 0;
26 30
27 function getIconPath(whitelisted) 31 let loadImageAsCanvas =
32 /**
33 * Loads an image and draws it onto a canvas.
34 *
35 * @param {string} url URL string of the image to load
36 * @return {Promise}
37 */
38 exports.loadImageAsCanvas = function(url)
28 { 39 {
40 return new Promise((resolve, reject) => {
41 let image = new Image();
42 image.src = url;
43 image.addEventListener("load", () =>
44 {
45 let canvas = document.createElement("canvas");
46 let context = canvas.getContext("2d");
47 canvas.height = image.height;
48 canvas.width = image.width;
49 context.drawImage(image, 0, 0);
50 resolve(canvas);
51 });
52 image.addEventListener("error", () => {
53 reject("Failed to load image " + url);
54 });
55 });
56 };
57
58 function getImageData(baseIcon, overlayIcon, opacity, animationStep, frameCache)
59 {
60 let cacheIndex = baseIcon + overlayIcon + opacity;
61
62 if (frameCache && frameCache[cacheIndex])
63 return frameCache[cacheIndex];
64
65 let imageData = Promise.all(
66 [loadImageAsCanvas(baseIcon),
67 overlayIcon && loadImageAsCanvas(overlayIcon) || Promise.resolve(null)]
68 ).then(icons =>
69 {
70 let baseIconCanvas = icons[0];
71 let overlayIconCanvas = icons[1];
72 let context = baseIconCanvas.getContext("2d");
73
74 if (overlayIconCanvas && opacity)
75 {
76 context.globalAlpha = opacity;
77 context.drawImage(overlayIconCanvas, 0, 0);
78 }
79
80 return context.getImageData(0, 0, baseIconCanvas.width,
81 baseIconCanvas.height);
82 });
83 if (frameCache)
84 frameCache[cacheIndex] = imageData;
85 return imageData;
86 }
87
88 function setIcon(page, animationType, animationStep, frameCache)
89 {
90 let safari = require("info").platform == "safari";
91 let opacity = animationType ? frameOpacities[animationStep] : 0;
92 let greyed = whitelistedState.get(page) && !safari;
93 let blending = (animationType && opacity > 0 && opacity < 1);
94
29 let filename = "icons/abp-$size"; 95 let filename = "icons/abp-$size";
96 let baseIcon = filename + (greyed ? "-whitelisted" : "") + ".png";
97 let overlayIcon = animationType && (filename + "-notification-" +
98 animationType + ".png");
30 99
31 // If the current page is whitelisted, pick an icon that indicates that
32 // Adblock Plus is disabled, however not when the notification icon has
33 // full opacity, or on Safari where icons are genrally grayscale-only.
34 if (whitelisted && animationStep < numberOfFrames && require("info").platform != "safari")
35 filename += "-whitelisted";
36 100
37 // If the icon is currently animating to indicate a pending notification, 101 // If the icon doesn't need any modifications, or the platform doesn't support
38 // pick the icon for the corresponing notification type and animation frame. 102 // data URLs, we can just use the image's filename with the $size placeholder.
39 if (notificationType && animationStep > 0) 103 if (!blending || safari)
104 if (overlayIcon && opacity > 0.5)
105 return page.browserAction.setIcon(overlayIcon);
106 else
107 return page.browserAction.setIcon(baseIcon);
108
109 // Otherwise we must process the images using a canvas and return a data URL
110 // of the result for each size that's required. (19px and 38px are required by
111 // Chrome/Opera.)
112 let imageData = [19, 38].map(size =>
40 { 113 {
41 filename += "-notification-" + notificationType; 114 return getImageData(baseIcon.replace("$size", size.toString()),
115 overlayIcon.replace("$size", size.toString()),
116 opacity, animationStep, frameCache);
117 });
118 Promise.all(imageData).then(imageData =>
119 {
120 chrome.browserAction.setIcon({tabId: page._id,
121 imageData: {19: imageData[0],
122 38: imageData[1]}});
123 });
124 }
42 125
43 if (animationStep < numberOfFrames) 126 function runAnimation(animationType)
44 filename += "-" + animationStep; 127 {
128 let frameCache = {};
129 let frameInterval;
130
131 function playAnimation()
132 {
133 animationPlaying = true;
134 let animationStep = 0;
135 ext.pages.query({active: true}, pages =>
136 {
137 function refreshActivePages()
138 {
139 ext.pages.query({active: true}, newPages => {
140 pages.forEach(page => { setIcon(page); });
141 pages = newPages;
142 });
143 }
144 chrome.tabs.onActivated.addListener(refreshActivePages);
145 chrome.tabs.onRemoved.addListener(refreshActivePages);
146
147 frameInterval = setInterval(() =>
148 {
149 pages.forEach(page => {
150 setIcon(page, animationType, animationStep++, frameCache);
151 });
152 if (animationStep >= numberOfFrames)
153 {
154 animationStep = 0;
155 clearInterval(frameInterval);
156 animationPlaying = false;
157 chrome.tabs.onActivated.removeListener(refreshActivePages);
158 chrome.tabs.onRemoved.removeListener(refreshActivePages);
159 }
160 }, 100);
161 });
45 } 162 }
46 163
47 return filename + ".png"; 164 playAnimation();
48 } 165 let animationInterval = setInterval(playAnimation, 10000);
49 166 return () =>
50 function setIcon(page)
51 {
52 page.browserAction.setIcon(getIconPath(whitelistedState.get(page)));
53 }
54
55 function runAnimation()
56 {
57 return setInterval(function()
58 { 167 {
59 ext.pages.query({active: true}, function(pages) 168 clearInterval(frameInterval);
60 { 169 clearInterval(animationInterval);
61 let fadeInInterval = setInterval(function() 170 animationPlaying = false;
62 { 171 };
63 animationStep++;
64 pages.forEach(setIcon);
65
66 if (animationStep < numberOfFrames)
67 return;
68
69 setTimeout(function()
70 {
71 let fadeOutInterval = setInterval(function()
72 {
73 animationStep--;
74 pages.forEach(setIcon);
75
76 if (animationStep > 0)
77 return;
78
79 clearInterval(fadeOutInterval);
80 }, 100);
81 },1000);
82
83 clearInterval(fadeInInterval);
84 }, 100);
85 });
86 }, 10000);
87 } 172 }
88 173
89 /** 174 /**
90 * Set the browser action icon for the given page, indicating whether 175 * Set the browser action icon for the given page, indicating whether
91 * adblocking is active there, and considering the icon animation. 176 * adblocking is active there, and considering the icon animation.
92 * 177 *
93 * @param {Page} page The page to set the browser action icon for 178 * @param {Page} page The page to set the browser action icon for
94 * @param {Boolean} whitelisted Whether the page has been whitelisted 179 * @param {Boolean} whitelisted Whether the page has been whitelisted
95 */ 180 */
96 exports.updateIcon = function(page, whitelisted) 181 exports.updateIcon = function(page, whitelisted)
97 { 182 {
98 page.browserAction.setIcon(getIconPath(whitelisted));
99 whitelistedState.set(page, whitelisted); 183 whitelistedState.set(page, whitelisted);
184 if (!animationPlaying)
185 setIcon(page);
100 }; 186 };
101 187
102 /** 188 /**
103 * Starts to animate the browser action icon to indicate a pending notifcation. 189 * Starts to animate the browser action icon to indicate a pending notifcation.
104 * 190 *
105 * @param {string} type The notification type (i.e: "information" or "critical" ) 191 * @param {string} type The notification type (i.e: "information" or "critical" )
106 */ 192 */
107 exports.startIconAnimation = function(type) 193 exports.startIconAnimation = function(type)
108 { 194 {
109 notificationType = type; 195 stopAnimation && stopAnimation();
110 196 stopAnimation = runAnimation(type);
111 if (animationInterval == null)
112 animationInterval = runAnimation();
113 }; 197 };
114 198
115 /** 199 /**
116 * Stops to animate the browser action icon. 200 * Stops to animate the browser action icon.
117 */ 201 */
118 exports.stopIconAnimation = function() 202 exports.stopIconAnimation = function()
119 { 203 {
120 if (animationInterval != null) 204 stopAnimation && stopAnimation();
121 {
122 clearInterval(animationInterval);
123 animationInterval = null;
124 }
125
126 notificationType = null;
127 }; 205 };
OLDNEW
« 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