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

Powered by Google App Engine
This is Rietveld