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

Delta Between Two Patch Sets: chrome/content/ui/firstRun.js

Issue 11039060: first run page redesign (Closed)
Left Patch Set: modified installation label Created July 24, 2013, 11:27 a.m.
Right Patch Set: improve after wladimirs code review Created Oct. 4, 2013, 4:50 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
LEFTRIGHT
1 /* 1 /*
2 * This file is part of Adblock Plus <http://adblockplus.org/>, 2 * This file is part of Adblock Plus <http://adblockplus.org/>,
3 * Copyright (C) 2006-2013 Eyeo GmbH 3 * Copyright (C) 2006-2013 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 "use strict"; 18 "use strict";
19 19
20
Thomas Greiner 2013/07/26 14:22:55 :)
21 (function() 20 (function()
22 { 21 {
23 // Load subscriptions for features 22 // Load subscriptions for features
24 var featureSubscriptions = [ 23 var featureSubscriptions = [
25 { 24 {
26 feature: "malware", 25 feature: "malware",
27 homepage: "http://malwaredomains.com/", 26 homepage: "http://malwaredomains.com/",
28 title: "Malware Domains", 27 title: "Malware Domains",
29 url: "https://easylist-downloads.adblockplus.org/malwaredomains_full.txt" 28 url: "https://easylist-downloads.adblockplus.org/malwaredomains_full.txt"
30 }, 29 },
31 { 30 {
32 feature: "social", 31 feature: "social",
33 homepage: "https://www.fanboy.co.nz/", 32 homepage: "https://www.fanboy.co.nz/",
34 title: "Fanboy's Social Blocking List", 33 title: "Fanboy's Social Blocking List",
35 url: "https://easylist-downloads.adblockplus.org/fanboy-social.txt" 34 url: "https://easylist-downloads.adblockplus.org/fanboy-social.txt"
36 }, 35 },
37 { 36 {
38 feature: "tracking", 37 feature: "tracking",
39 homepage: "https://easylist.adblockplus.org/", 38 homepage: "https://easylist.adblockplus.org/",
40 title: "EasyPrivacy", 39 title: "EasyPrivacy",
41 url: "https://easylist-downloads.adblockplus.org/easyprivacy.txt" 40 url: "https://easylist-downloads.adblockplus.org/easyprivacy.txt"
42 } 41 }
43 ]; 42 ];
44 43
45
46 function showFeature()
47 {
48 var toggleButton = E("activate-features");
49 var overView = E("can-do-more-overview");
50 var expandedView = E("can-do-more-expanded");
51
52 if(toggleButton.getAttribute("data-status") == "overview")
Thomas Greiner 2013/07/26 14:22:55 Code Style: if (...)
53 {
54 fade("out", overView, 750, true);
Thomas Greiner 2013/07/26 14:22:55 750ms is a bit long. I'd prefer max 500ms.
55 setTimeout(function()
56 {
57 fade("in", expandedView, 750, true)
58 },750);
59
60 toggleButton.innerHTML = "show overview again";
61 toggleButton.setAttribute("data-status","expanded");
62
63 }
64 else if (toggleButton.getAttribute("data-status") == "expanded")
65 {
66 fade("out", expandedView, 750, true);
67 setTimeout(function()
68 {
69 fade("in", overView, 750, true)
70 },750);
71
72 toggleButton.innerHTML = "activate features";
73 toggleButton.setAttribute("data-status", "overview");
74 }
75
76 // jQuery-style fading
Thomas Greiner 2013/07/26 14:22:55 As discussed, CSS transitions should be used whene
77 function fade(type, el, duration, IEsupport)
78 {
79 var isIn = (type == "in"),
80 IE = (IEsupport) ? IEsupport : false,
81 opacity = isIn ? 0 : 1,
82 interval = 50,
83 gap = interval / duration;
84
85 if(isIn)
86 {
87 el.style.display = "block";
88 el.style.opacity = opacity;
89 if(IE)
90 {
91 el.style.filter = "alpha(opacity=" + opacity + ")";
92 el.style.filter = "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + opacity + ")";
93 }
94 }
95
96 function func()
97 {
98 opacity = isIn ? opacity + gap : opacity - gap;
99 el.style.opacity = opacity;
100 if(IE)
101 {
102 el.style.filter = "alpha(opacity=" + opacity * 100 + ")";
103 el.style.filter = "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + opacity * 100 + ")";
104 }
105 if(opacity <= 0 || opacity >= 1)
106 {
107 window.clearInterval(fading);
108 }
109 if(opacity <= 0)
110 {
111 el.style.display = "none";
112 }
113 }
114 var fading = window.setInterval(func, interval);
115 }
116 }
117
118 function onDOMLoaded() 44 function onDOMLoaded()
119 { 45 {
46 var locale = require("utils").Utils.appLocale;
47 document.documentElement.setAttribute("lang", locale);
48
49 // Set up URLs
120 var donateLink = E("donate"); 50 var donateLink = E("donate");
121 donateLink.href = Utils.getDocLink("donate"); 51 donateLink.href = Utils.getDocLink("donate");
122 52
53 var contributors = E("contributors");
54 contributors.href = Utils.getDocLink("contributors");
55
56 setLinks("acceptableAdsExplanation", Utils.getDocLink("acceptable_ads_criter ia"), openFilters);
57 setLinks("share-headline", Utils.getDocLink("contribute"));
58
123 // Show warning if data corruption was detected 59 // Show warning if data corruption was detected
124 if (typeof backgroundPage != "undefined" && backgroundPage.seenDataCorruptio n) 60 if (typeof backgroundPage != "undefined" && backgroundPage.seenDataCorruptio n)
125 { 61 {
126 E("dataCorruptionWarning").removeAttribute("hidden"); 62 E("dataCorruptionWarning").removeAttribute("hidden");
127 setLinks("dataCorruptionWarning", Utils.getDocLink("knownIssuesChrome_filt erstorage")); 63 setLinks("dataCorruptionWarning", Utils.getDocLink("knownIssuesChrome_filt erstorage"));
128 } 64 }
129
130 // Set up URL
131 setLinks("acceptableAdsExplanation", Utils.getDocLink("acceptable_ads_criter ia"), openFilters);
132 65
133 // Set up feature buttons linked to subscriptions 66 // Set up feature buttons linked to subscriptions
134 featureSubscriptions.forEach(setToggleSubscriptionButton); 67 featureSubscriptions.forEach(setToggleSubscriptionButton);
135 var filterListener = function(action) 68 var filterListener = function(action)
136 { 69 {
137 if (/^subscription\.(added|removed|disabled)$/.test(action)) 70 if (/^subscription\.(added|removed|disabled)$/.test(action))
138 { 71 {
139 for (var i = 0; i < featureSubscriptions.length; i++) 72 for (var i = 0; i < featureSubscriptions.length; i++)
140 { 73 {
141 var featureSubscription = featureSubscriptions[i]; 74 var featureSubscription = featureSubscriptions[i];
142 updateToggleButton(featureSubscription.feature, isSubscriptionEnabled( featureSubscription)); 75 updateToggleButton(featureSubscription.feature, isSubscriptionEnabled( featureSubscription));
143 } 76 }
144 } 77 }
145 } 78 }
146 FilterNotifier.addListener(filterListener); 79 FilterNotifier.addListener(filterListener);
147 window.addEventListener("unload", function(event) 80 window.addEventListener("unload", function(event)
148 { 81 {
149 FilterNotifier.removeListener(filterListener); 82 FilterNotifier.removeListener(filterListener);
150 }, false); 83 }, false);
151 84
152 // you can click activate-feature or one of the icons to toggle the features area 85 // You can click activate-feature or one of the icons to toggle the features area
153 E("activate-features").addEventListener("click", showFeature, false); 86 E("activate-features").addEventListener("click", toggleFeature, false);
154 E("can-do-more-overview").addEventListener("click", showFeature, false); 87 E("can-do-more-overview").addEventListener("click", toggleFeature, false);
155 88
156 initSocialLinks(); 89 initSocialLinks();
90 }
91
92 function toggleFeature()
93 {
94 var canDoMore = E("can-do-more");
95 if (!canDoMore.classList.contains("expanded"))
96 {
97 canDoMore.classList.add("expanded");
98 }
99 else if (canDoMore.classList.contains("expanded"))
100 {
101 canDoMore.classList.remove("expanded");
102 }
Wladimir Palant 2013/10/05 09:15:59 Nit: One line of code is enough for the entire fun
157 } 103 }
158 104
159 function isSubscriptionEnabled(featureSubscription) 105 function isSubscriptionEnabled(featureSubscription)
160 { 106 {
161 return featureSubscription.url in FilterStorage.knownSubscriptions 107 return featureSubscription.url in FilterStorage.knownSubscriptions
162 && !Subscription.fromURL(featureSubscription.url).disabled; 108 && !Subscription.fromURL(featureSubscription.url).disabled;
163 } 109 }
164 110
165 function setToggleSubscriptionButton(featureSubscription) 111 function setToggleSubscriptionButton(featureSubscription)
166 { 112 {
167 var feature = featureSubscription.feature; 113 var feature = featureSubscription.feature;
168 114
169 var element = E("toggle-" + feature); 115 var element = E("toggle-" + feature);
170 updateToggleButton(feature, isSubscriptionEnabled(featureSubscription)); 116 updateToggleButton(feature, isSubscriptionEnabled(featureSubscription));
171 element.addEventListener("click", function(event) 117 element.addEventListener("click", function(event)
172 { 118 {
173 var subscription = Subscription.fromURL(featureSubscription.url); 119 var subscription = Subscription.fromURL(featureSubscription.url);
174 if (isSubscriptionEnabled(featureSubscription)) 120 if (isSubscriptionEnabled(featureSubscription))
175 FilterStorage.removeSubscription(subscription); 121 FilterStorage.removeSubscription(subscription);
176 else 122 else
177 { 123 {
178 subscription.disabled = false; 124 subscription.disabled = false;
179 subscription.title = featureSubscription.title; 125 subscription.title = featureSubscription.title;
180 subscription.homepage = featureSubscription.homepage; 126 subscription.homepage = featureSubscription.homepage;
181 FilterStorage.addSubscription(subscription); 127 FilterStorage.addSubscription(subscription);
182 if (!subscription.lastDownload) 128 if (!subscription.lastDownload)
183 Synchronizer.execute(subscription); 129 Synchronizer.execute(subscription);
184 } 130 }
185 }, false); 131 }, false);
186 }
187
188 function scrollPage()
189 {
190 if (scrollTimer)
191 stopScroll();
192
193 scrollTimer = setInterval(function()
194 {
195 window.scrollBy(0, 5);
196 }, 20);
197 }
198
199 function stopScroll()
200 {
201 clearTimeout(scrollTimer);
202 scrollTimer = null;
203 } 132 }
204 133
205 function openSharePopup(url) 134 function openSharePopup(url)
206 { 135 {
207 var iframe = E("share-popup"); 136 var iframe = E("share-popup");
208 var glassPane = E("glass-pane"); 137 var glassPane = E("glass-pane");
209 var popupMessageReceived = false; 138 var popupMessageReceived = false;
210 139
211 var popupMessageListener = function(event) 140 var popupMessageListener = function(event)
212 { 141 {
(...skipping 58 matching lines...) Expand 10 before | Expand all | Expand 10 after
271 { 200 {
272 event.preventDefault(); 201 event.preventDefault();
273 openSharePopup(Utils.getDocLink(event.target.id)); 202 openSharePopup(Utils.getDocLink(event.target.id));
274 } 203 }
275 } 204 }
276 205
277 function setLinks(id) 206 function setLinks(id)
278 { 207 {
279 var element = E(id); 208 var element = E(id);
280 if (!element) 209 if (!element)
210 {
281 return; 211 return;
282 212 }
213
283 var links = element.getElementsByTagName("a"); 214 var links = element.getElementsByTagName("a");
215
284 for (var i = 0; i < links.length; i++) 216 for (var i = 0; i < links.length; i++)
285 { 217 {
286 if (typeof arguments[i + 1] == "string") 218 if (typeof arguments[i + 1] == "string")
287 { 219 {
288 links[i].href = arguments[i + 1]; 220 links[i].href = arguments[i + 1];
289 links[i].setAttribute("target", "_blank"); 221 links[i].setAttribute("target", "_blank");
290 } 222 }
291 else if (typeof arguments[i + 1] == "function") 223 else if (typeof arguments[i + 1] == "function")
292 { 224 {
293 links[i].href = "javascript:void(0);"; 225 links[i].href = "javascript:void(0);";
(...skipping 16 matching lines...) Expand all
310 { 242 {
311 var button = E("toggle-" + feature); 243 var button = E("toggle-" + feature);
312 if (isEnabled) 244 if (isEnabled)
313 button.classList.remove("off"); 245 button.classList.remove("off");
314 else 246 else
315 button.classList.add("off"); 247 button.classList.add("off");
316 } 248 }
317 249
318 document.addEventListener("DOMContentLoaded", onDOMLoaded, false); 250 document.addEventListener("DOMContentLoaded", onDOMLoaded, false);
319 })(); 251 })();
LEFTRIGHT

Powered by Google App Engine
This is Rietveld