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: Iterate over size in inner loop Created Jan. 26, 2016, 5:09 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
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 const safariPlatform = require("info").platform == "safari";
27
28 let stopAnimation = null;
29 let animationPlaying = false;
22 let whitelistedState = new ext.PageMap(); 30 let whitelistedState = new ext.PageMap();
23 let notificationType = null;
24 let animationInterval = null;
25 let animationStep = 0;
26 31
27 function getIconPath(whitelisted) 32 function loadImage(url)
28 { 33 {
29 let filename = "icons/abp-$size"; 34 return new Promise((resolve, reject) => {
35 let image = new Image();
36 image.src = url;
37 image.addEventListener("load", () =>
38 {
39 resolve(image);
40 });
41 image.addEventListener("error", () => {
42 reject("Failed to load image " + url);
43 });
44 });
45 };
30 46
31 // If the current page is whitelisted, pick an icon that indicates that 47 function setIcon(page, notificationType, opacity, frames)
32 // Adblock Plus is disabled, however not when the notification icon has 48 {
33 // full opacity, or on Safari where icons are genrally grayscale-only. 49 opacity = opacity || 0;
34 if (whitelisted && animationStep < numberOfFrames && require("info").platform != "safari") 50 let greyed = whitelistedState.get(page) && !safariPlatform && true || false;
35 filename += "-whitelisted";
36 51
37 // If the icon is currently animating to indicate a pending notification, 52 if (!notificationType || !frames)
38 // pick the icon for the corresponing notification type and animation frame.
39 if (notificationType && animationStep > 0)
40 { 53 {
41 filename += "-notification-" + notificationType; 54 if (notificationType && opacity > 0.5)
55 page.browserAction.setIcon("icons/abp-$size-notification-"
56 + notificationType + ".png");
57 else
58 page.browserAction.setIcon("icons/abp-$size" +
59 (greyed ? "-whitelisted" : "") + ".png");
60 }
61 else
62 {
63 chrome.browserAction.setIcon({
64 tabId: page._id,
65 imageData: frames["" + opacity + greyed]
66 });
67 }
68 }
42 69
43 if (animationStep < numberOfFrames) 70 function renderFrames(notificationType)
44 filename += "-" + animationStep; 71 {
72 if (safariPlatform)
73 return Promise.resolve(null);
74
75 return Promise.all([
76 loadImage("icons/abp-19.png"),
77 loadImage("icons/abp-19-whitelisted.png"),
78 loadImage("icons/abp-19-notification-" + notificationType + ".png"),
79 loadImage("icons/abp-38.png"),
80 loadImage("icons/abp-38-whitelisted.png"),
81 loadImage("icons/abp-38-notification-" + notificationType + ".png"),
82 ]).then(images =>
83 {
84 let images = {
85 19: { base: [images[0], images[1]], overlay: images[2] },
86 38: { base: [images[3], images[4]], overlay: images[5] }
87 };
88
89 let frames = {};
90 let canvas = document.createElement("canvas");
91 let context = canvas.getContext("2d");
92
93 for (let whitelisted of [false, true])
94 {
95 for (let opacity of [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1])
96 {
97 let imageData = {};
98 for (let size of [19, 38])
99 {
100 canvas.width = size;
101 canvas.height = size;
102 context.globalAlpha = 1;
103 context.drawImage(images[size]["base"][whitelisted | 0], 0, 0);
104 context.globalAlpha = opacity;
105 context.drawImage(images[size]["overlay"], 0, 0);
106 imageData[size] = context.getImageData(0, 0, size, size);
107 }
108 frames["" + opacity + whitelisted] = imageData;
109 }
110 }
111
112 return frames;
113 });
114 }
115
116 function runAnimation(notificationType)
117 {
118 function playAnimation(frames)
119 {
120 animationPlaying = true;
121 let animationStep = 0;
122 ext.pages.query({active: true}, pages =>
123 {
124 function appendActivePage(page)
125 {
126 pages.push(page);
127 }
128 ext.pages.onActivated.addListener(appendActivePage);
129
130 frameInterval = setInterval(() =>
131 {
132 let opacity = frameOpacities[animationStep++];
133 pages.forEach(page => {
134 if (whitelistedState.has(page))
135 setIcon(page, notificationType, opacity, frames);
136 });
137
138 if (animationStep > numberOfFrames)
139 {
140 animationStep = 0;
141 clearInterval(frameInterval);
142 animationPlaying = false;
143 ext.pages.onActivated.removeListener(appendActivePage);
144 }
145 }, 100);
146 });
45 } 147 }
46 148
47 return filename + ".png"; 149 renderFrames(notificationType).then(frames =>
48 }
49
50 function setIcon(page)
51 {
52 page.browserAction.setIcon(getIconPath(whitelistedState.get(page)));
53 }
54
55 function runAnimation()
56 {
57 return setInterval(function()
58 { 150 {
59 ext.pages.query({active: true}, function(pages) 151 playAnimation(frames);
152 let animationInterval = setInterval(() => { playAnimation(frames); },
153 10000);
154 return () =>
60 { 155 {
61 let fadeInInterval = setInterval(function() 156 clearInterval(frameInterval);
62 { 157 clearInterval(animationInterval);
63 animationStep++; 158 animationPlaying = false;
64 pages.forEach(setIcon); 159 };
65 160 });
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 } 161 }
88 162
89 /** 163 /**
90 * Set the browser action icon for the given page, indicating whether 164 * Set the browser action icon for the given page, indicating whether
91 * adblocking is active there, and considering the icon animation. 165 * adblocking is active there, and considering the icon animation.
92 * 166 *
93 * @param {Page} page The page to set the browser action icon for 167 * @param {Page} page The page to set the browser action icon for
94 * @param {Boolean} whitelisted Whether the page has been whitelisted 168 * @param {Boolean} whitelisted Whether the page has been whitelisted
95 */ 169 */
96 exports.updateIcon = function(page, whitelisted) 170 exports.updateIcon = function(page, whitelisted)
97 { 171 {
98 page.browserAction.setIcon(getIconPath(whitelisted));
99 whitelistedState.set(page, whitelisted); 172 whitelistedState.set(page, whitelisted);
173 if (!animationPlaying)
174 setIcon(page);
100 }; 175 };
101 176
102 /** 177 /**
103 * Starts to animate the browser action icon to indicate a pending notifcation. 178 * Starts to animate the browser action icon to indicate a pending notifcation.
104 * 179 *
105 * @param {string} type The notification type (i.e: "information" or "critical" ) 180 * @param {string} type The notification type (i.e: "information" or "critical" )
106 */ 181 */
107 exports.startIconAnimation = function(type) 182 exports.startIconAnimation = function(type)
108 { 183 {
109 notificationType = type; 184 stopAnimation && stopAnimation();
110 185 stopAnimation = runAnimation(type);
111 if (animationInterval == null)
112 animationInterval = runAnimation();
113 }; 186 };
114 187
115 /** 188 /**
116 * Stops to animate the browser action icon. 189 * Stops to animate the browser action icon.
117 */ 190 */
118 exports.stopIconAnimation = function() 191 exports.stopIconAnimation = function()
119 { 192 {
120 if (animationInterval != null) 193 stopAnimation && stopAnimation();
121 {
122 clearInterval(animationInterval);
123 animationInterval = null;
124 }
125
126 notificationType = null;
127 }; 194 };
OLDNEW
« no previous file with comments | « chrome/ext/background.js ('k') | lib/notificationHelper.js » ('j') | lib/notificationHelper.js » ('J')

Powered by Google App Engine
This is Rietveld