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

Side by Side Diff: lib/icon.js

Issue 29995555: Issue 7253 - Pre-render icons for badge on Chromium (Closed) Base URL: https://hg.adblockplus.org/adblockpluschrome/
Patch Set: Remove 19x19 and 38x38 icons entirely Created Feb. 3, 2019, 8:28 a.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « icons/abp-38-whitelisted.png ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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-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
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 {filterNotifier} = require("../adblockpluscore/lib/filterNotifier"); 22 const {filterNotifier} = require("../adblockpluscore/lib/filterNotifier");
23 const info = require("info");
23 24
24 const frameOpacities = [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 25 const frameOpacities = [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9,
25 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 26 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0,
26 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.0]; 27 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.0];
27 const numberOfFrames = frameOpacities.length; 28 const numberOfFrames = frameOpacities.length;
28 29
29 let stopRequested = false; 30 let stopRequested = false;
30 let canUpdateIcon = true; 31 let canUpdateIcon = true;
31 let notRunning = Promise.resolve(); 32 let notRunning = Promise.resolve();
32 let whitelistedState = new ext.PageMap(); 33 let whitelistedState = new ext.PageMap();
33 34
35 let icons = [null, null];
36
34 function loadImage(url) 37 function loadImage(url)
35 { 38 {
36 return new Promise((resolve, reject) => 39 return new Promise((resolve, reject) =>
37 { 40 {
38 let image = new Image(); 41 let image = new Image();
39 image.src = url; 42 image.src = url;
40 image.addEventListener("load", () => 43 image.addEventListener("load", () =>
41 { 44 {
42 resolve(image); 45 resolve(image);
43 }); 46 });
44 image.addEventListener("error", () => 47 image.addEventListener("error", () =>
45 { 48 {
46 reject("Failed to load image " + url); 49 reject("Failed to load image " + url);
47 }); 50 });
48 }); 51 });
49 } 52 }
50 53
54 function renderIcons()
55 {
56 Promise.all([
57 loadImage("icons/abp-16.png"),
58 loadImage("icons/abp-16-whitelisted.png"),
59 loadImage("icons/abp-32.png"),
60 loadImage("icons/abp-32-whitelisted.png")
61 ])
62 .then(images =>
63 {
64 let imageMap = {
65 16: [images[0], images[1]],
66 32: [images[2], images[3]]
67 };
68
69 let canvas = document.createElement("canvas");
70 let context = canvas.getContext("2d");
71
72 for (let whitelisted = 0; whitelisted <= 1; whitelisted++)
73 {
74 let imageData = {};
75 let sizes = [16, 32];
76
77 for (let size of sizes)
78 {
79 canvas.width = size;
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 }
90
51 function setIcon(page, notificationType, opacity, frames) 91 function setIcon(page, notificationType, opacity, frames)
52 { 92 {
53 opacity = opacity || 0; 93 opacity = opacity || 0;
54 let whitelisted = !!whitelistedState.get(page); 94 let whitelisted = !!whitelistedState.get(page);
55 95
56 if (!notificationType || !frames) 96 if (!notificationType || !frames)
57 { 97 {
58 if (opacity > 0.5) 98 if (opacity > 0.5)
59 { 99 {
60 page.browserAction.setIcon("/icons/abp-$size-notification-" + 100 page.browserAction.setIcon("/icons/abp-$size-notification-" +
61 notificationType + ".png"); 101 notificationType + ".png");
62 } 102 }
63 else 103 else
64 { 104 {
65 page.browserAction.setIcon("/icons/abp-$size" + 105 page.browserAction.setIcon("/icons/abp-$size" +
66 (whitelisted ? "-whitelisted" : "") + ".png"); 106 (whitelisted ? "-whitelisted" : "") + ".png",
107 icons[whitelisted | 0]);
67 } 108 }
68 } 109 }
69 else 110 else
70 { 111 {
71 browser.browserAction.setIcon({ 112 browser.browserAction.setIcon({
72 tabId: page.id, 113 tabId: page.id,
73 imageData: frames["" + opacity + whitelisted] 114 imageData: frames["" + opacity + whitelisted]
74 }); 115 });
75 } 116 }
76 } 117 }
77 118
78 filterNotifier.on("page.WhitelistingStateRevalidate", (page, filter) => 119 filterNotifier.on("page.WhitelistingStateRevalidate", (page, filter) =>
79 { 120 {
80 whitelistedState.set(page, !!filter); 121 whitelistedState.set(page, !!filter);
81 if (canUpdateIcon) 122 if (canUpdateIcon)
82 setIcon(page); 123 setIcon(page);
83 }); 124 });
84 125
85 function renderFrames(notificationType) 126 function renderFrames(notificationType)
86 { 127 {
87 return Promise.all([ 128 return Promise.all([
88 loadImage("icons/abp-16.png"), 129 loadImage("icons/abp-16.png"),
89 loadImage("icons/abp-16-whitelisted.png"), 130 loadImage("icons/abp-16-whitelisted.png"),
90 loadImage("icons/abp-16-notification-" + notificationType + ".png"), 131 loadImage("icons/abp-16-notification-" + notificationType + ".png"),
91 loadImage("icons/abp-19.png"),
92 loadImage("icons/abp-19-whitelisted.png"),
93 loadImage("icons/abp-19-notification-" + notificationType + ".png"),
94 loadImage("icons/abp-20.png"), 132 loadImage("icons/abp-20.png"),
95 loadImage("icons/abp-20-whitelisted.png"), 133 loadImage("icons/abp-20-whitelisted.png"),
96 loadImage("icons/abp-20-notification-" + notificationType + ".png"), 134 loadImage("icons/abp-20-notification-" + notificationType + ".png"),
97 loadImage("icons/abp-32.png"), 135 loadImage("icons/abp-32.png"),
98 loadImage("icons/abp-32-whitelisted.png"), 136 loadImage("icons/abp-32-whitelisted.png"),
99 loadImage("icons/abp-32-notification-" + notificationType + ".png"), 137 loadImage("icons/abp-32-notification-" + notificationType + ".png"),
100 loadImage("icons/abp-38.png"),
101 loadImage("icons/abp-38-whitelisted.png"),
102 loadImage("icons/abp-38-notification-" + notificationType + ".png"),
103 loadImage("icons/abp-40.png"), 138 loadImage("icons/abp-40.png"),
104 loadImage("icons/abp-40-whitelisted.png"), 139 loadImage("icons/abp-40-whitelisted.png"),
105 loadImage("icons/abp-40-notification-" + notificationType + ".png") 140 loadImage("icons/abp-40-notification-" + notificationType + ".png")
106 ]).then(images => 141 ]).then(images =>
107 { 142 {
108 let imageMap = { 143 let imageMap = {
109 16: {base: [images[0], images[1]], overlay: images[2]}, 144 16: {base: [images[0], images[1]], overlay: images[2]},
110 19: {base: [images[3], images[4]], overlay: images[5]}, 145 20: {base: [images[3], images[4]], overlay: images[5]},
111 20: {base: [images[6], images[7]], overlay: images[8]}, 146 32: {base: [images[6], images[7]], overlay: images[8]},
112 32: {base: [images[9], images[10]], overlay: images[11]}, 147 40: {base: [images[9], images[10]], overlay: images[11]}
113 38: {base: [images[12], images[13]], overlay: images[14]},
114 40: {base: [images[15], images[16]], overlay: images[17]}
115 }; 148 };
116 149
117 let frames = {}; 150 let frames = {};
118 let canvas = document.createElement("canvas"); 151 let canvas = document.createElement("canvas");
119 let context = canvas.getContext("2d"); 152 let context = canvas.getContext("2d");
120 153
121 for (let whitelisted of [false, true]) 154 for (let whitelisted of [false, true])
122 { 155 {
123 for (let i = 0, opacity = 0; i <= 10; opacity = ++i / 10) 156 for (let i = 0, opacity = 0; i <= 10; opacity = ++i / 10)
124 { 157 {
125 let imageData = {}; 158 let imageData = {};
126 let sizes = [16, 19, 20, 32, 38, 40]; 159 let sizes = [16, 20, 32, 40];
127 for (let size of sizes) 160 for (let size of sizes)
128 { 161 {
129 canvas.width = size; 162 canvas.width = size;
130 canvas.height = size; 163 canvas.height = size;
131 context.globalAlpha = 1; 164 context.globalAlpha = 1;
132 context.drawImage(imageMap[size]["base"][whitelisted | 0], 0, 0); 165 context.drawImage(imageMap[size]["base"][whitelisted | 0], 0, 0);
133 context.globalAlpha = opacity; 166 context.globalAlpha = opacity;
134 context.drawImage(imageMap[size]["overlay"], 0, 0); 167 context.drawImage(imageMap[size]["overlay"], 0, 0);
135 imageData[size] = context.getImageData(0, 0, size, size); 168 imageData[size] = context.getImageData(0, 0, size, size);
136 } 169 }
(...skipping 93 matching lines...) Expand 10 before | Expand all | Expand 10 after
230 clearInterval(interval); 263 clearInterval(interval);
231 resolve(); 264 resolve();
232 return; 265 return;
233 } 266 }
234 267
235 animateIcon(type, frames); 268 animateIcon(type, frames);
236 }, 10000); 269 }, 10000);
237 }); 270 });
238 }); 271 });
239 }; 272 };
273
274 // Pre-render icons on Chromium (#7253).
275 if (info.platform == "chromium")
276 renderIcons();
OLDNEW
« no previous file with comments | « icons/abp-38-whitelisted.png ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld