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

Side by Side Diff: chrome/content/ui/firstRun.js

Issue 11039060: first run page redesign (Closed)
Patch Set: codereview updates fixed and added hover effects and new arrows Created Aug. 14, 2013, 4:09 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
OLDNEW
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 (function() 20 (function()
21 { 21 {
22 var shade;
23 var scrollTimer;
24
25 // Load subscriptions for features 22 // Load subscriptions for features
26 var featureSubscriptions = [ 23 var featureSubscriptions = [
27 { 24 {
28 feature: "malware", 25 feature: "malware",
29 homepage: "http://malwaredomains.com/", 26 homepage: "http://malwaredomains.com/",
30 title: "Malware Domains", 27 title: "Malware Domains",
31 url: "https://easylist-downloads.adblockplus.org/malwaredomains_full.txt" 28 url: "https://easylist-downloads.adblockplus.org/malwaredomains_full.txt"
32 }, 29 },
33 { 30 {
34 feature: "social", 31 feature: "social",
35 homepage: "https://www.fanboy.co.nz/", 32 homepage: "https://www.fanboy.co.nz/",
36 title: "Fanboy's Social Blocking List", 33 title: "Fanboy's Social Blocking List",
37 url: "https://easylist-downloads.adblockplus.org/fanboy-social.txt" 34 url: "https://easylist-downloads.adblockplus.org/fanboy-social.txt"
38 }, 35 },
39 { 36 {
40 feature: "tracking", 37 feature: "tracking",
41 homepage: "https://easylist.adblockplus.org/", 38 homepage: "https://easylist.adblockplus.org/",
42 title: "EasyPrivacy", 39 title: "EasyPrivacy",
43 url: "https://easylist-downloads.adblockplus.org/easyprivacy.txt" 40 url: "https://easylist-downloads.adblockplus.org/easyprivacy.txt"
44 } 41 }
45 ]; 42 ];
46 43
47 function onDOMLoaded() 44 function onDOMLoaded()
48 { 45 {
46 var donateLink = E("donate");
47 donateLink.href = Utils.getDocLink("donate");
48
49 // Set up URL
50 setLinks("acceptableAdsExplanation", Utils.getDocLink("acceptable_ads_criter ia"), openFilters);
51 setLinks("share-headline", Utils.getDocLink("contribute"));
52
49 // Show warning if data corruption was detected 53 // Show warning if data corruption was detected
50 if (typeof backgroundPage != "undefined" && backgroundPage.seenDataCorruptio n) 54 if (typeof backgroundPage != "undefined" && backgroundPage.seenDataCorruptio n)
51 { 55 {
52 E("dataCorruptionWarning").removeAttribute("hidden"); 56 E("dataCorruptionWarning").removeAttribute("hidden");
53 setLinks("dataCorruptionWarning", Utils.getDocLink("knownIssuesChrome_filt erstorage")); 57 setLinks("dataCorruptionWarning", Utils.getDocLink("knownIssuesChrome_filt erstorage"));
54 } 58 }
55 59
56 // Set up URL
57 setLinks("acceptableAdsExplanation", Utils.getDocLink("acceptable_ads_criter ia"), openFilters);
58
59 shade = E("shade");
60 shade.addEventListener("mouseover", scrollPage, false);
61 shade.addEventListener("mouseout", stopScroll, false);
62
63 // Set up feature buttons linked to subscriptions 60 // Set up feature buttons linked to subscriptions
64 featureSubscriptions.forEach(setToggleSubscriptionButton); 61 featureSubscriptions.forEach(setToggleSubscriptionButton);
65 var filterListener = function(action) 62 var filterListener = function(action)
66 { 63 {
67 if (/^subscription\.(added|removed|disabled)$/.test(action)) 64 if (/^subscription\.(added|removed|disabled)$/.test(action))
68 { 65 {
69 for (var i = 0; i < featureSubscriptions.length; i++) 66 for (var i = 0; i < featureSubscriptions.length; i++)
70 { 67 {
71 var featureSubscription = featureSubscriptions[i]; 68 var featureSubscription = featureSubscriptions[i];
72 updateToggleButton(featureSubscription.feature, isSubscriptionEnabled( featureSubscription)); 69 updateToggleButton(featureSubscription.feature, isSubscriptionEnabled( featureSubscription));
73 } 70 }
74 } 71 }
75 } 72 }
76 FilterNotifier.addListener(filterListener); 73 FilterNotifier.addListener(filterListener);
77 window.addEventListener("unload", function(event) 74 window.addEventListener("unload", function(event)
78 { 75 {
79 FilterNotifier.removeListener(filterListener); 76 FilterNotifier.removeListener(filterListener);
80 }, false); 77 }, false);
81 78
82 window.addEventListener("resize", onWindowResize, false); 79 // You can click activate-feature or one of the icons to toggle the features area
83 document.addEventListener("scroll", onScroll, false); 80 E("activate-features").addEventListener("click", showFeature, false);
84 81 E("can-do-more-overview").addEventListener("click", showFeature, false);
85 onWindowResize();
86 82
87 initSocialLinks(); 83 initSocialLinks();
88 } 84 }
89 85
90 function onScroll() 86 function showFeature()
91 { 87 {
92 var currentHeight = document.documentElement.scrollTop + document.body.scrol lTop + document.documentElement.clientHeight; 88 var activateFeatures = E("activate-features");
93 shade.style.opacity = (document.documentElement.scrollHeight == currentHeigh t) ? "0.0" : "0.5"; 89 var canDoMoreOverview = E("can-do-more-overview");
94 } 90 var canDoMoreExpanded = E("can-do-more-expanded");
95 91 var activateFeaturesLabel = E("activate-features-label");
96 function onWindowResize() 92
97 { 93 if (activateFeatures.getAttribute("class") == "overview")
Thomas Greiner 2013/08/22 10:42:12 You can use classList.contains instead.
98 onScroll(); 94 {
99 } 95 canDoMoreOverview.classList.remove("fade-in");
100 96 canDoMoreOverview.classList.add("fade-out");
101 function toggleTypoCorrectionEnabled() 97 activateFeatures.classList.remove("overview");
102 { 98 activateFeatures.classList.add("expanded");
Thomas Greiner 2013/08/22 10:42:12 Why don't you simply add the class "expanded" to #
103 Prefs.correctTypos = !Prefs.correctTypos; 99
100
101 /* Cross Browser Text change */
102 if ((activateFeaturesLabel.textContent) && (typeof (activateFeaturesLabel. textContent) != "undefined"))
Thomas Greiner 2013/08/22 10:42:12 No need for checking it twice. Checking if ("textC
103 {
104 activateFeaturesLabel.textContent = "show overview again";
Thomas Greiner 2013/08/22 10:42:12 Should be translatable.
105 } else
106 {
107 activateFeaturesLabel.innerText = "show overview again";
Thomas Greiner 2013/08/22 10:42:12 Should be translatable.
108 }
109 activateFeatures.setAttribute("data-status","expanded");
110
111 setTimeout(function()
112 {
113 canDoMoreOverview.classList.add("hide");
114 canDoMoreExpanded.classList.add("show");
115 canDoMoreExpanded.classList.add("can-do-more-expanded-higher");
116 },500);
117
118 /* Next timeout has to be done because of an js bug.
119 * If you set "display: block" and "opacity: 1"
120 * at the same time the content would be shown
121 * directly without any transition.
122 * With the following timeout the opacity
123 * transition works correctly
124 */
125 setTimeout(function()
126 {
127 canDoMoreExpanded.classList.add("fade-in");
128 },520);
129 }
130 else if (activateFeatures.getAttribute("class") == "expanded")
131 {
132 canDoMoreExpanded.classList.remove("fade-in");
133 activateFeatures.classList.remove("expanded");
134 activateFeatures.classList.add("overview");
135
136 /* Cross Browser Text change */
137 if ((activateFeaturesLabel.textContent) && (typeof (activateFeaturesLabel. textContent) != "undefined"))
Thomas Greiner 2013/08/22 10:42:12 No need for checking it twice. Checking if ("textC
138 {
139 activateFeaturesLabel.textContent = "activate features";
Thomas Greiner 2013/08/22 10:42:12 Should be translatable.
140 } else
141 {
142 activateFeaturesLabel.innerText = "activate features";
Thomas Greiner 2013/08/22 10:42:12 Should be translatable.
143 }
144 activateFeatures.setAttribute("data-status","overview");
145
146 setTimeout(function()
147 {
148 canDoMoreExpanded.classList.remove("show");
149 canDoMoreOverview.classList.remove("hide");
150 },500);
151
152 setTimeout(function()
153 {
154 canDoMoreOverview.classList.add("fade-in");
155 canDoMoreOverview.classList.remove("fade-out");
156 },520);
157 }
104 } 158 }
105 159
106 function isSubscriptionEnabled(featureSubscription) 160 function isSubscriptionEnabled(featureSubscription)
107 { 161 {
108 return featureSubscription.url in FilterStorage.knownSubscriptions 162 return featureSubscription.url in FilterStorage.knownSubscriptions
109 && !Subscription.fromURL(featureSubscription.url).disabled; 163 && !Subscription.fromURL(featureSubscription.url).disabled;
110 } 164 }
111 165
112 function setToggleSubscriptionButton(featureSubscription) 166 function setToggleSubscriptionButton(featureSubscription)
113 { 167 {
(...skipping 104 matching lines...) Expand 10 before | Expand all | Expand 10 after
218 { 272 {
219 event.preventDefault(); 273 event.preventDefault();
220 openSharePopup(Utils.getDocLink(event.target.id)); 274 openSharePopup(Utils.getDocLink(event.target.id));
221 } 275 }
222 } 276 }
223 277
224 function setLinks(id) 278 function setLinks(id)
225 { 279 {
226 var element = E(id); 280 var element = E(id);
227 if (!element) 281 if (!element)
282 {
228 return; 283 return;
229 284 }
285
230 var links = element.getElementsByTagName("a"); 286 var links = element.getElementsByTagName("a");
287
231 for (var i = 0; i < links.length; i++) 288 for (var i = 0; i < links.length; i++)
232 { 289 {
233 if (typeof arguments[i + 1] == "string") 290 if (typeof arguments[i + 1] == "string")
234 { 291 {
235 links[i].href = arguments[i + 1]; 292 links[i].href = arguments[i + 1];
236 links[i].setAttribute("target", "_blank"); 293 links[i].setAttribute("target", "_blank");
237 } 294 }
238 else if (typeof arguments[i + 1] == "function") 295 else if (typeof arguments[i + 1] == "function")
239 { 296 {
240 links[i].href = "javascript:void(0);"; 297 links[i].href = "javascript:void(0);";
(...skipping 16 matching lines...) Expand all
257 { 314 {
258 var button = E("toggle-" + feature); 315 var button = E("toggle-" + feature);
259 if (isEnabled) 316 if (isEnabled)
260 button.classList.remove("off"); 317 button.classList.remove("off");
261 else 318 else
262 button.classList.add("off"); 319 button.classList.add("off");
263 } 320 }
264 321
265 document.addEventListener("DOMContentLoaded", onDOMLoaded, false); 322 document.addEventListener("DOMContentLoaded", onDOMLoaded, false);
266 })(); 323 })();
OLDNEW

Powered by Google App Engine
This is Rietveld