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

Delta Between Two Patch Sets: lib/icon.js

Issue 29995555: Issue 7253 - Pre-render icons for badge on Chromium (Closed) Base URL: https://hg.adblockplus.org/adblockpluschrome/
Left Patch Set: Use iconPath and iconImageData separately Created Feb. 3, 2019, 8:10 a.m.
Right Patch Set: Rewrite renderIcons Created Feb. 3, 2019, 9:45 a.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 | « ext/background.js ('k') | no next file » | 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-present eyeo GmbH 3 * Copyright (C) 2006-present 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
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after
46 }); 46 });
47 image.addEventListener("error", () => 47 image.addEventListener("error", () =>
48 { 48 {
49 reject("Failed to load image " + url); 49 reject("Failed to load image " + url);
50 }); 50 });
51 }); 51 });
52 } 52 }
53 53
54 function renderIcons() 54 function renderIcons()
55 { 55 {
56 Promise.all([ 56 let paths = [
57 loadImage("icons/abp-16.png"), 57 "icons/abp-16.png", "icons/abp-16-whitelisted.png",
58 loadImage("icons/abp-16-whitelisted.png"), 58 "icons/abp-32.png", "icons/abp-32-whitelisted.png"
59 loadImage("icons/abp-32.png"), 59 ];
60 loadImage("icons/abp-32-whitelisted.png") 60
61 ]) 61 for (let path of paths)
62 .then(images => 62 {
63 { 63 loadImage(path).then(image =>
64 let imageMap = { 64 {
65 16: [images[0], images[1]], 65 let [, size, whitelisted] = /\/abp-(16|32)(-whitelisted)?\./.exec(path);
Manish Jethani 2019/02/03 09:47:55 Note: size is a string, not a number, but that's f
66 32: [images[2], images[3]] 66
67 }; 67 let canvas = document.createElement("canvas");
68 68 let context = canvas.getContext("2d");
69 let canvas = document.createElement("canvas"); 69 let imageData = icons[!!whitelisted | 0] || {};
Sebastian Noack 2019/02/03 10:07:54 Nit: Isn't coercing to boolean (through !!) redund
Manish Jethani 2019/02/03 10:37:55 `"-whitelisted" | 0` is 0. Because "-whitelisted"
70 let context = canvas.getContext("2d"); 70
71 71 canvas.width = size;
72 for (let whitelisted = 0; whitelisted <= 1; whitelisted++) 72 canvas.height = size;
73 { 73 context.globalAlpha = 1;
74 let imageData = {}; 74 context.drawImage(image, 0, 0);
75 let sizes = [16, 32]; 75 imageData[size] = context.getImageData(0, 0, size, size);
76 76
77 for (let size of sizes) 77 icons[!!whitelisted | 0] = imageData;
78 { 78 });
79 canvas.width = size; 79 }
80 canvas.height = size;
81 context.globalAlpha = 1;
82 context.drawImage(imageMap[size][whitelisted], 0, 0);
83 imageData[size] = context.getImageData(0, 0, size, size);
84 }
85
86 icons[whitelisted] = imageData;
87 }
88 });
89 } 80 }
90 81
91 function setIcon(page, notificationType, opacity, frames) 82 function setIcon(page, notificationType, opacity, frames)
92 { 83 {
93 opacity = opacity || 0; 84 opacity = opacity || 0;
94 let whitelisted = !!whitelistedState.get(page); 85 let whitelisted = !!whitelistedState.get(page);
95 86
96 if (!notificationType || !frames) 87 if (!notificationType || !frames)
97 { 88 {
98 if (opacity > 0.5) 89 if (opacity > 0.5)
99 { 90 {
100 page.browserAction.setIcon("/icons/abp-$size-notification-" + 91 page.browserAction.setIconPath("/icons/abp-$size-notification-" +
101 notificationType + ".png"); 92 notificationType + ".png");
93 }
94 else if (icons[whitelisted | 0])
95 {
96 page.browserAction.setIconImageData(icons[whitelisted | 0]);
102 } 97 }
103 else 98 else
104 { 99 {
105 page.browserAction.setIcon("/icons/abp-$size" + 100 page.browserAction.setIconPath("/icons/abp-$size" +
106 (whitelisted ? "-whitelisted" : "") + ".png", 101 (whitelisted ? "-whitelisted" : "") + ".png ");
107 icons[whitelisted | 0]);
108 } 102 }
109 } 103 }
110 else 104 else
111 { 105 {
112 browser.browserAction.setIcon({ 106 browser.browserAction.setIconPath({
113 tabId: page.id, 107 tabId: page.id,
114 imageData: frames["" + opacity + whitelisted] 108 imageData: frames["" + opacity + whitelisted]
115 }); 109 });
116 } 110 }
117 } 111 }
118 112
119 filterNotifier.on("page.WhitelistingStateRevalidate", (page, filter) => 113 filterNotifier.on("page.WhitelistingStateRevalidate", (page, filter) =>
120 { 114 {
121 whitelistedState.set(page, !!filter); 115 whitelistedState.set(page, !!filter);
122 if (canUpdateIcon) 116 if (canUpdateIcon)
123 setIcon(page); 117 setIcon(page);
124 }); 118 });
125 119
126 function renderFrames(notificationType) 120 function renderFrames(notificationType)
127 { 121 {
128 return Promise.all([ 122 return Promise.all([
129 loadImage("icons/abp-16.png"), 123 loadImage("icons/abp-16.png"),
130 loadImage("icons/abp-16-whitelisted.png"), 124 loadImage("icons/abp-16-whitelisted.png"),
131 loadImage("icons/abp-16-notification-" + notificationType + ".png"), 125 loadImage("icons/abp-16-notification-" + notificationType + ".png"),
132 loadImage("icons/abp-19.png"),
133 loadImage("icons/abp-19-whitelisted.png"),
134 loadImage("icons/abp-19-notification-" + notificationType + ".png"),
135 loadImage("icons/abp-20.png"), 126 loadImage("icons/abp-20.png"),
136 loadImage("icons/abp-20-whitelisted.png"), 127 loadImage("icons/abp-20-whitelisted.png"),
137 loadImage("icons/abp-20-notification-" + notificationType + ".png"), 128 loadImage("icons/abp-20-notification-" + notificationType + ".png"),
138 loadImage("icons/abp-32.png"), 129 loadImage("icons/abp-32.png"),
139 loadImage("icons/abp-32-whitelisted.png"), 130 loadImage("icons/abp-32-whitelisted.png"),
140 loadImage("icons/abp-32-notification-" + notificationType + ".png"), 131 loadImage("icons/abp-32-notification-" + notificationType + ".png"),
141 loadImage("icons/abp-38.png"),
142 loadImage("icons/abp-38-whitelisted.png"),
143 loadImage("icons/abp-38-notification-" + notificationType + ".png"),
144 loadImage("icons/abp-40.png"), 132 loadImage("icons/abp-40.png"),
145 loadImage("icons/abp-40-whitelisted.png"), 133 loadImage("icons/abp-40-whitelisted.png"),
146 loadImage("icons/abp-40-notification-" + notificationType + ".png") 134 loadImage("icons/abp-40-notification-" + notificationType + ".png")
147 ]).then(images => 135 ]).then(images =>
148 { 136 {
149 let imageMap = { 137 let imageMap = {
150 16: {base: [images[0], images[1]], overlay: images[2]}, 138 16: {base: [images[0], images[1]], overlay: images[2]},
151 19: {base: [images[3], images[4]], overlay: images[5]}, 139 20: {base: [images[3], images[4]], overlay: images[5]},
152 20: {base: [images[6], images[7]], overlay: images[8]}, 140 32: {base: [images[6], images[7]], overlay: images[8]},
153 32: {base: [images[9], images[10]], overlay: images[11]}, 141 40: {base: [images[9], images[10]], overlay: images[11]}
154 38: {base: [images[12], images[13]], overlay: images[14]},
155 40: {base: [images[15], images[16]], overlay: images[17]}
156 }; 142 };
157 143
158 let frames = {}; 144 let frames = {};
159 let canvas = document.createElement("canvas"); 145 let canvas = document.createElement("canvas");
160 let context = canvas.getContext("2d"); 146 let context = canvas.getContext("2d");
161 147
162 for (let whitelisted of [false, true]) 148 for (let whitelisted of [false, true])
163 { 149 {
164 for (let i = 0, opacity = 0; i <= 10; opacity = ++i / 10) 150 for (let i = 0, opacity = 0; i <= 10; opacity = ++i / 10)
165 { 151 {
166 let imageData = {}; 152 let imageData = {};
167 let sizes = [16, 19, 20, 32, 38, 40]; 153 let sizes = [16, 20, 32, 40];
168 for (let size of sizes) 154 for (let size of sizes)
169 { 155 {
170 canvas.width = size; 156 canvas.width = size;
171 canvas.height = size; 157 canvas.height = size;
172 context.globalAlpha = 1; 158 context.globalAlpha = 1;
173 context.drawImage(imageMap[size]["base"][whitelisted | 0], 0, 0); 159 context.drawImage(imageMap[size]["base"][whitelisted | 0], 0, 0);
174 context.globalAlpha = opacity; 160 context.globalAlpha = opacity;
175 context.drawImage(imageMap[size]["overlay"], 0, 0); 161 context.drawImage(imageMap[size]["overlay"], 0, 0);
176 imageData[size] = context.getImageData(0, 0, size, size); 162 imageData[size] = context.getImageData(0, 0, size, size);
177 } 163 }
(...skipping 97 matching lines...) Expand 10 before | Expand all | Expand 10 after
275 261
276 animateIcon(type, frames); 262 animateIcon(type, frames);
277 }, 10000); 263 }, 10000);
278 }); 264 });
279 }); 265 });
280 }; 266 };
281 267
282 // Pre-render icons on Chromium (#7253). 268 // Pre-render icons on Chromium (#7253).
283 if (info.platform == "chromium") 269 if (info.platform == "chromium")
284 renderIcons(); 270 renderIcons();
LEFTRIGHT

Powered by Google App Engine
This is Rietveld