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

Delta Between Two Patch Sets: lib/icon.js

Issue 29334223: Issue 3532 - Generate animation images at runtime (Closed)
Left Patch Set: Pre render frames, listen for onactivated Created Jan. 24, 2016, 3:34 p.m.
Right Patch Set: Addressed final nits Created Jan. 26, 2016, 10:57 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
« no previous file with change/comment | « chrome/ext/background.js ('k') | lib/notificationHelper.js » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
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 "use strict"; 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, 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, 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]; 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; 25 const numberOfFrames = frameOpacities.length;
26 const safariPlatform = require("info").platform == "safari"; 26 const safariPlatform = require("info").platform == "safari";
27 27
28 let stopAnimation = null; 28 let frameInterval = null;
29 let animationPlaying = false; 29 let animationInterval = null;
30 let whitelistedState = new ext.PageMap(); 30 let whitelistedState = new ext.PageMap();
31 31
32 let loadImageAsCanvas = 32 function loadImage(url)
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)
40 { 33 {
41 return new Promise((resolve, reject) => { 34 return new Promise((resolve, reject) =>
35 {
42 let image = new Image(); 36 let image = new Image();
43 image.src = url; 37 image.src = url;
44 image.addEventListener("load", () => 38 image.addEventListener("load", () =>
45 { 39 {
46 let canvas = document.createElement("canvas"); 40 resolve(image);
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 }); 41 });
53 image.addEventListener("error", () => { 42 image.addEventListener("error", () =>
43 {
54 reject("Failed to load image " + url); 44 reject("Failed to load image " + url);
55 }); 45 });
56 }); 46 });
57 }; 47 };
58 48
59 function setIcon(page, animationType, opacity, frames) 49 function setIcon(page, notificationType, opacity, frames)
60 { 50 {
61 opacity = opacity || 0; 51 opacity = opacity || 0;
62 let greyed = whitelistedState.get(page) && !safariPlatform && true || false; 52 let whitelisted = !!whitelistedState.get(page) && !safariPlatform;
63 53
64 if (!animationType || !frames) 54 if (!notificationType || !frames)
65 { 55 {
66 if (animationType && opacity > 0.5) 56 if (opacity > 0.5)
67 page.browserAction.setIcon("icons/abp-$size-notification-" 57 page.browserAction.setIcon("icons/abp-$size-notification-"
68 + animationType + ".png"); 58 + notificationType + ".png");
69 else 59 else
70 page.browserAction.setIcon("icons/abp-$size" + 60 page.browserAction.setIcon("icons/abp-$size" +
71 (greyed ? "-whitelisted" : "") + ".png"); 61 (whitelisted ? "-whitelisted" : "") + ".png");
72 } 62 }
73 else 63 else
74 { 64 {
75 frames.then(frames => 65 chrome.browserAction.setIcon({
76 { 66 tabId: page._id,
77 chrome.browserAction.setIcon({ 67 imageData: frames["" + opacity + whitelisted]
78 tabId: page._id,
79 imageData: {19: frames["" + opacity + greyed + 19],
80 38: frames["" + opacity + greyed + 38]}
81 });
82 }); 68 });
83 } 69 }
84 } 70 }
85 71
86 function renderFrames(animationType) 72 function renderFrames(notificationType)
87 { 73 {
74 if (safariPlatform)
75 return Promise.resolve(null);
76
88 return Promise.all([ 77 return Promise.all([
89 loadImageAsCanvas("icons/abp-19.png"), 78 loadImage("icons/abp-19.png"),
90 loadImageAsCanvas("icons/abp-19-whitelisted.png"), 79 loadImage("icons/abp-19-whitelisted.png"),
91 loadImageAsCanvas("icons/abp-19-notification-" + animationType + ".png"), 80 loadImage("icons/abp-19-notification-" + notificationType + ".png"),
92 loadImageAsCanvas("icons/abp-38.png"), 81 loadImage("icons/abp-38.png"),
93 loadImageAsCanvas("icons/abp-38-whitelisted.png"), 82 loadImage("icons/abp-38-whitelisted.png"),
94 loadImageAsCanvas("icons/abp-38-notification-" + animationType + ".png"), 83 loadImage("icons/abp-38-notification-" + notificationType + ".png"),
95 ]).then(images => 84 ]).then(images =>
96 { 85 {
97 let images = { 86 let images = {
98 19: { base: [images[0], images[1]], overlay: images[2] }, 87 19: { base: [images[0], images[1]], overlay: images[2] },
99 38: { base: [images[3], images[4]], overlay: images[5] } 88 38: { base: [images[3], images[4]], overlay: images[5] }
100 }; 89 };
101 90
102 let frames = {}; 91 let frames = {};
103 let canvas = document.createElement("canvas"); 92 let canvas = document.createElement("canvas");
104 let context = canvas.getContext("2d"); 93 let context = canvas.getContext("2d");
105 94
106 for (let size of [19, 38]) 95 for (let whitelisted of [false, true])
107 { 96 {
108 canvas.width = size; 97 for (let i = 0, opacity = 0; i <= 10; opacity = ++i / 10)
109 canvas.height = size;
110 for (let whitelisted of [false, true])
111 { 98 {
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]) 99 let imageData = {};
100 for (let size of [19, 38])
113 { 101 {
102 canvas.width = size;
103 canvas.height = size;
114 context.globalAlpha = 1; 104 context.globalAlpha = 1;
115 context.drawImage(images[size]["base"][whitelisted | 0], 0, 0); 105 context.drawImage(images[size]["base"][whitelisted | 0], 0, 0);
116 context.globalAlpha = opacity; 106 context.globalAlpha = opacity;
117 context.drawImage(images[size]["overlay"], 0, 0); 107 context.drawImage(images[size]["overlay"], 0, 0);
118 frames["" + opacity + 108 imageData[size] = context.getImageData(0, 0, size, size);
119 whitelisted + size] = context.getImageData(0, 0, size, size);
120 } 109 }
110 frames["" + opacity + whitelisted] = imageData;
121 } 111 }
122 } 112 }
123 113
124 return frames; 114 return frames;
125 }); 115 });
126 } 116 }
127 117
128 function runAnimation(animationType) 118 function runAnimation(notificationType)
129 { 119 {
130 let frames = !safariPlatform && renderFrames(animationType); 120 function playAnimation(frames)
131 let frameInterval;
132
133 function playAnimation()
134 { 121 {
135 animationPlaying = true;
136 let animationStep = 0; 122 let animationStep = 0;
137 ext.pages.query({active: true}, pages => 123 ext.pages.query({active: true}, pages =>
138 { 124 {
139 function appendActivePage(page) 125 function appendActivePage(page)
140 { 126 {
141 pages.push(page); 127 pages.push(page);
142 } 128 }
143 ext.pages.onActivated.addListener(appendActivePage); 129 ext.pages.onActivated.addListener(appendActivePage);
144 130
145 frameInterval = setInterval(() => 131 frameInterval = setInterval(() =>
146 { 132 {
147 pages.forEach(page => { 133 let opacity = frameOpacities[animationStep++];
148 setIcon(page, animationType, frameOpacities[animationStep++], frames); 134 for (let page of pages)
149 }); 135 {
136 if (whitelistedState.has(page))
137 setIcon(page, notificationType, opacity, frames);
138 };
139
150 if (animationStep > numberOfFrames) 140 if (animationStep > numberOfFrames)
151 { 141 {
152 animationStep = 0; 142 animationStep = 0;
153 clearInterval(frameInterval); 143 clearInterval(frameInterval);
154 animationPlaying = false; 144 frameInterval = null;
155 ext.pages.onActivated.removeListener(appendActivePage); 145 ext.pages.onActivated.removeListener(appendActivePage);
156 } 146 }
157 }, 100); 147 }, 100);
158 }); 148 });
159 } 149 }
160 150
161 playAnimation(); 151 renderFrames(notificationType).then(frames =>
162 let animationInterval = setInterval(playAnimation, 10000);
163 return () =>
164 { 152 {
165 clearInterval(frameInterval); 153 playAnimation(frames);
166 clearInterval(animationInterval); 154 animationInterval = setInterval(() => { playAnimation(frames); }, 10000);
167 animationPlaying = false; 155 });
168 };
169 } 156 }
170 157
171 /** 158 /**
172 * Set the browser action icon for the given page, indicating whether 159 * Set the browser action icon for the given page, indicating whether
173 * adblocking is active there, and considering the icon animation. 160 * adblocking is active there, and considering the icon animation.
174 * 161 *
175 * @param {Page} page The page to set the browser action icon for 162 * @param {Page} page The page to set the browser action icon for
176 * @param {Boolean} whitelisted Whether the page has been whitelisted 163 * @param {Boolean} whitelisted Whether the page has been whitelisted
177 */ 164 */
178 exports.updateIcon = function(page, whitelisted) 165 exports.updateIcon = function(page, whitelisted)
179 { 166 {
180 whitelistedState.set(page, whitelisted); 167 whitelistedState.set(page, whitelisted);
181 if (!animationPlaying) 168 if (frameInterval == null)
182 setIcon(page); 169 setIcon(page);
170 };
171
172 let stopIconAnimation =
173 /**
174 * Stops to animate the browser action icon.
175 */
176 exports.stopIconAnimation = function()
177 {
178 if (frameInterval != null)
179 clearInterval(frameInterval);
180 if (animationInterval != null)
181 clearInterval(animationInterval);
182 frameInterval = animationInterval = null;
183 }; 183 };
184 184
185 /** 185 /**
186 * 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.
187 * 187 *
188 * @param {string} type The notification type (i.e: "information" or "critical" ) 188 * @param {string} type The notification type (i.e: "information" or "critical" )
189 */ 189 */
190 exports.startIconAnimation = function(type) 190 exports.startIconAnimation = function(type)
191 { 191 {
192 stopAnimation && stopAnimation(); 192 stopIconAnimation();
193 stopAnimation = runAnimation(type); 193 runAnimation(type);
194 }; 194 };
195
196 /**
197 * Stops to animate the browser action icon.
198 */
199 exports.stopIconAnimation = function()
200 {
201 stopAnimation && stopAnimation();
202 };
LEFTRIGHT

Powered by Google App Engine
This is Rietveld