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

Powered by Google App Engine
This is Rietveld