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: Created July 15, 2013, 12:39 p.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
21 (function() 20 (function()
22 { 21 {
23 //var shade;
24 var scrollTimer;
25
26 // Load subscriptions for features 22 // Load subscriptions for features
27 var featureSubscriptions = [ 23 var featureSubscriptions = [
28 { 24 {
29 feature: "malware", 25 feature: "malware",
30 homepage: "http://malwaredomains.com/", 26 homepage: "http://malwaredomains.com/",
31 title: "Malware Domains", 27 title: "Malware Domains",
32 url: "https://easylist-downloads.adblockplus.org/malwaredomains_full.txt" 28 url: "https://easylist-downloads.adblockplus.org/malwaredomains_full.txt"
33 }, 29 },
34 { 30 {
35 feature: "social", 31 feature: "social",
36 homepage: "https://www.fanboy.co.nz/", 32 homepage: "https://www.fanboy.co.nz/",
37 title: "Fanboy's Social Blocking List", 33 title: "Fanboy's Social Blocking List",
38 url: "https://easylist-downloads.adblockplus.org/fanboy-social.txt" 34 url: "https://easylist-downloads.adblockplus.org/fanboy-social.txt"
39 }, 35 },
40 { 36 {
41 feature: "tracking", 37 feature: "tracking",
42 homepage: "https://easylist.adblockplus.org/", 38 homepage: "https://easylist.adblockplus.org/",
43 title: "EasyPrivacy", 39 title: "EasyPrivacy",
44 url: "https://easylist-downloads.adblockplus.org/easyprivacy.txt" 40 url: "https://easylist-downloads.adblockplus.org/easyprivacy.txt"
45 } 41 }
46 ]; 42 ];
47 43
48
49 function showFeature()
50 {
51 var toggleButton = document.getElementById('activate-features');
52 var overView = document.getElementById('can-do-more-overview');
53 var expandedView = document.getElementById('can-do-more-expanded');
54
55 if(toggleButton.getAttribute("status")=="overview")
56 {
57 fade('out', overView, 750, true);
58 setTimeout(function(){fade('in', expandedView, 750, true)},750);
59 toggleButton.innerHTML ="show overview again";
60 toggleButton.setAttribute("status","expanded");
61
62 } else if(toggleButton.getAttribute("status")=="expanded")
63 {
64 fade('out', expandedView, 750, true);
65 setTimeout(function(){fade('in', overView, 750, true)},750);
66 toggleButton.innerHTML ='activate features';
67 toggleButton.setAttribute("status","overview");
68 }
69
70 // jQuery-style fading
71 function fade(type, el, duration, IEsupport) {
72 var isIn = (type == 'in'),
73 IE = (IEsupport) ? IEsupport : false,
74 opacity = isIn ? 0 : 1,
75 interval = 50,
76 gap = interval / duration;
77
78 if(isIn) {
79 el.style.display = 'block';
80 el.style.opacity = opacity;
81 if(IE) {
82 el.style.filter = 'alpha(opacity=' + opacity + ')';
83 el.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity + ')';
84 }
85 }
86
87 function func() {
88 opacity = isIn ? opacity + gap : opacity - gap;
89 el.style.opacity = opacity;
90 if(IE) {
91 el.style.filter = 'alpha(opacity=' + opacity * 100 + ')';
92 el.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity * 100 + ')';
93 }
94 if(opacity <= 0 || opacity >= 1) { window.clearInterval(fading); }
95 if(opacity <= 0) { el.style.display = "none"; }
96 }
97 var fading = window.setInterval(func, interval);
98 }
99 }
100
101 function onDOMLoaded() 44 function onDOMLoaded()
102 { 45 {
103 var donateLink = document.getElementById("donate"); 46 var locale = require("utils").Utils.appLocale;
104 donateLink.href = Utils.getDocLink("donate"); 47 document.documentElement.setAttribute("lang", locale);
48
49 // Set up URLs
50 var donateLink = E("donate");
51 donateLink.href = Utils.getDocLink("donate");
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
105 // Show warning if data corruption was detected 59 // Show warning if data corruption was detected
106 if (typeof backgroundPage != "undefined" && backgroundPage.seenDataCorruptio n) 60 if (typeof backgroundPage != "undefined" && backgroundPage.seenDataCorruptio n)
107 { 61 {
108 E("dataCorruptionWarning").removeAttribute("hidden"); 62 E("dataCorruptionWarning").removeAttribute("hidden");
109 setLinks("dataCorruptionWarning", Utils.getDocLink("knownIssuesChrome_filt erstorage")); 63 setLinks("dataCorruptionWarning", Utils.getDocLink("knownIssuesChrome_filt erstorage"));
110 } 64 }
111
112 // Set up URL
113 setLinks("acceptableAdsExplanation", Utils.getDocLink("acceptable_ads_criter ia"), openFilters);
114
115 //shade = E("shade");
116 //shade.addEventListener("mouseover", scrollPage, false);
117 //shade.addEventListener("mouseout", stopScroll, false);
118 65
119 // Set up feature buttons linked to subscriptions 66 // Set up feature buttons linked to subscriptions
120 featureSubscriptions.forEach(setToggleSubscriptionButton); 67 featureSubscriptions.forEach(setToggleSubscriptionButton);
121 var filterListener = function(action) 68 var filterListener = function(action)
122 { 69 {
123 if (/^subscription\.(added|removed|disabled)$/.test(action)) 70 if (/^subscription\.(added|removed|disabled)$/.test(action))
124 { 71 {
125 for (var i = 0; i < featureSubscriptions.length; i++) 72 for (var i = 0; i < featureSubscriptions.length; i++)
126 { 73 {
127 var featureSubscription = featureSubscriptions[i]; 74 var featureSubscription = featureSubscriptions[i];
128 updateToggleButton(featureSubscription.feature, isSubscriptionEnabled( featureSubscription)); 75 updateToggleButton(featureSubscription.feature, isSubscriptionEnabled( featureSubscription));
129 } 76 }
130 } 77 }
131 } 78 }
132 FilterNotifier.addListener(filterListener); 79 FilterNotifier.addListener(filterListener);
133 window.addEventListener("unload", function(event) 80 window.addEventListener("unload", function(event)
134 { 81 {
135 FilterNotifier.removeListener(filterListener); 82 FilterNotifier.removeListener(filterListener);
136 }, false); 83 }, false);
137 84
138 window.addEventListener("resize", onWindowResize, false); 85 // You can click activate-feature or one of the icons to toggle the features area
139 document.addEventListener("scroll", onScroll, false); 86 E("activate-features").addEventListener("click", toggleFeature, false);
140 87 E("can-do-more-overview").addEventListener("click", toggleFeature, false);
141 var activateFeaturesButton = document.getElementById('activate-features');
142 activateFeaturesButton.addEventListener("click", showFeature, false);
143
144 onWindowResize();
145 88
146 initSocialLinks(); 89 initSocialLinks();
147 } 90 }
148 91
149 function onScroll() 92 function toggleFeature()
150 { 93 {
151 var currentHeight = document.documentElement.scrollTop + document.body.scrol lTop + document.documentElement.clientHeight; 94 var canDoMore = E("can-do-more");
152 //shade.style.opacity = (document.documentElement.scrollHeight == currentHei ght) ? "0.0" : "0.5"; 95 if (!canDoMore.classList.contains("expanded"))
153 } 96 {
154 97 canDoMore.classList.add("expanded");
155 function onWindowResize() 98 }
156 { 99 else if (canDoMore.classList.contains("expanded"))
157 onScroll(); 100 {
158 } 101 canDoMore.classList.remove("expanded");
159 102 }
Wladimir Palant 2013/10/05 09:15:59 Nit: One line of code is enough for the entire fun
160 function toggleTypoCorrectionEnabled()
161 {
162 Prefs.correctTypos = !Prefs.correctTypos;
163 } 103 }
164 104
165 function isSubscriptionEnabled(featureSubscription) 105 function isSubscriptionEnabled(featureSubscription)
166 { 106 {
167 return featureSubscription.url in FilterStorage.knownSubscriptions 107 return featureSubscription.url in FilterStorage.knownSubscriptions
168 && !Subscription.fromURL(featureSubscription.url).disabled; 108 && !Subscription.fromURL(featureSubscription.url).disabled;
169 } 109 }
170 110
171 function setToggleSubscriptionButton(featureSubscription) 111 function setToggleSubscriptionButton(featureSubscription)
172 { 112 {
173 var feature = featureSubscription.feature; 113 var feature = featureSubscription.feature;
174 114
175 var element = E("toggle-" + feature); 115 var element = E("toggle-" + feature);
176 updateToggleButton(feature, isSubscriptionEnabled(featureSubscription)); 116 updateToggleButton(feature, isSubscriptionEnabled(featureSubscription));
177 element.addEventListener("click", function(event) 117 element.addEventListener("click", function(event)
178 { 118 {
179 var subscription = Subscription.fromURL(featureSubscription.url); 119 var subscription = Subscription.fromURL(featureSubscription.url);
180 if (isSubscriptionEnabled(featureSubscription)) 120 if (isSubscriptionEnabled(featureSubscription))
181 FilterStorage.removeSubscription(subscription); 121 FilterStorage.removeSubscription(subscription);
182 else 122 else
183 { 123 {
184 subscription.disabled = false; 124 subscription.disabled = false;
185 subscription.title = featureSubscription.title; 125 subscription.title = featureSubscription.title;
186 subscription.homepage = featureSubscription.homepage; 126 subscription.homepage = featureSubscription.homepage;
187 FilterStorage.addSubscription(subscription); 127 FilterStorage.addSubscription(subscription);
188 if (!subscription.lastDownload) 128 if (!subscription.lastDownload)
189 Synchronizer.execute(subscription); 129 Synchronizer.execute(subscription);
190 } 130 }
191 }, false); 131 }, false);
192 }
193
194 function scrollPage()
195 {
196 if (scrollTimer)
197 stopScroll();
198
199 scrollTimer = setInterval(function()
200 {
201 window.scrollBy(0, 5);
202 }, 20);
203 }
204
205 function stopScroll()
206 {
207 clearTimeout(scrollTimer);
208 scrollTimer = null;
209 } 132 }
210 133
211 function openSharePopup(url) 134 function openSharePopup(url)
212 { 135 {
213 var iframe = E("share-popup"); 136 var iframe = E("share-popup");
214 var glassPane = E("glass-pane"); 137 var glassPane = E("glass-pane");
215 var popupMessageReceived = false; 138 var popupMessageReceived = false;
216 139
217 var popupMessageListener = function(event) 140 var popupMessageListener = function(event)
218 { 141 {
(...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after
264 var networks = ["twitter", "facebook", "gplus"]; 187 var networks = ["twitter", "facebook", "gplus"];
265 networks.forEach(function(network) 188 networks.forEach(function(network)
266 { 189 {
267 var link = E("share-" + network); 190 var link = E("share-" + network);
268 link.addEventListener("click", onSocialLinkClick, false); 191 link.addEventListener("click", onSocialLinkClick, false);
269 }); 192 });
270 } 193 }
271 194
272 function onSocialLinkClick(event) 195 function onSocialLinkClick(event)
273 { 196 {
274 var filter = defaultMatcher.matchesAny("https://platform.twitter.com/widgets .js", "SCRIPT", "adblockplus.org", true); 197 // Don't open the share page if the sharing script would be blocked
198 var filter = defaultMatcher.matchesAny(event.target.getAttribute("data-scrip t"), "SCRIPT", "adblockplus.org", true);
275 if (!(filter instanceof BlockingFilter)) 199 if (!(filter instanceof BlockingFilter))
276 { 200 {
277 event.preventDefault(); 201 event.preventDefault();
278 openSharePopup(Utils.getDocLink(event.target.parentNode.id)); 202 openSharePopup(Utils.getDocLink(event.target.id));
279 } 203 }
280 } 204 }
281 205
282 function setLinks(id) 206 function setLinks(id)
283 { 207 {
284 var element = E(id); 208 var element = E(id);
285 if (!element) 209 if (!element)
210 {
286 return; 211 return;
287 212 }
213
288 var links = element.getElementsByTagName("a"); 214 var links = element.getElementsByTagName("a");
215
289 for (var i = 0; i < links.length; i++) 216 for (var i = 0; i < links.length; i++)
290 { 217 {
291 if (typeof arguments[i + 1] == "string") 218 if (typeof arguments[i + 1] == "string")
292 { 219 {
293 links[i].href = arguments[i + 1]; 220 links[i].href = arguments[i + 1];
294 links[i].setAttribute("target", "_blank"); 221 links[i].setAttribute("target", "_blank");
295 } 222 }
296 else if (typeof arguments[i + 1] == "function") 223 else if (typeof arguments[i + 1] == "function")
297 { 224 {
298 links[i].href = "javascript:void(0);"; 225 links[i].href = "javascript:void(0);";
(...skipping 16 matching lines...) Expand all
315 { 242 {
316 var button = E("toggle-" + feature); 243 var button = E("toggle-" + feature);
317 if (isEnabled) 244 if (isEnabled)
318 button.classList.remove("off"); 245 button.classList.remove("off");
319 else 246 else
320 button.classList.add("off"); 247 button.classList.add("off");
321 } 248 }
322 249
323 document.addEventListener("DOMContentLoaded", onDOMLoaded, false); 250 document.addEventListener("DOMContentLoaded", onDOMLoaded, false);
324 })(); 251 })();
LEFTRIGHT

Powered by Google App Engine
This is Rietveld