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

Delta Between Two Patch Sets: pages/uninstalled.tmpl

Issue 29348067: Issue 4049 - reinstall button and adbockers list added to uninstallation page (Closed)
Left Patch Set: Fixed some syntax issues Created July 20, 2016, 3:55 p.m.
Right Patch Set: And again addressed comments Created Sept. 27, 2016, 12:02 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
« no previous file with change/comment | « no previous file | static/css/simple.css » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
1 title=Adblock Plus has been uninstalled 1 title=Adblock Plus has been uninstalled
2 template=simple 2 template=simple
3 3
4 {% set reasons = [ 4 {% set reasons = [
5 ("1v0", "reason-not-installed", "I didn't install Adblock Plus.", ""), 5 ("1v0", "reason-not-installed", "I didn't install Adblock Plus.", ""),
6 ("2v0", "reason-slowing-down", "Adblock Plus slowed down my browser.", ""), 6 ("2v0", "reason-slowing-down", "Adblock Plus slowed down my browser.", ""),
7 ("3v0", "reason-acceptable-ads", "I don't like the Acceptable Ads program.", " "), 7 ("3v0", "reason-acceptable-ads", "I don't like the Acceptable Ads program.", " "),
8 ("4v0", "reason-see-ads", "Adblock Plus didn't block all ads.", ""), 8 ("4v0", "reason-see-ads", "Adblock Plus didn't block all ads.", ""),
9 ("5v0", "reason-better-adblocker", "I found better ad blocking software.", ["A dBlock", "uBlock", "uBlock Origin", "Ghostery"]), 9 ("5v0", "reason-better-adblocker", "I found better ad blocking software.", ["A dBlock", "uBlock", "uBlock Origin", "Ghostery"]),
10 ("6v0", "reason-break-websites", "Adblock Plus breaks websites that I visit.", "") 10 ("6v0", "reason-break-websites", "Adblock Plus breaks websites that I visit.", "")
11 ] %} 11 ] %}
12 12
13 <head> 13 <head>
14 <meta name="robots" content="noindex" /> 14 <meta name="robots" content="noindex" />
15 <script type="text/javascript"> 15 <script type="text/javascript">
16 (function() 16 (function()
17 { 17 {
18 var adblockersList = null;
19 function toggleView(element)
20 {
21 var targetId = element.getAttribute("data-toggle-view");
22 if (targetId)
23 document.getElementById(targetId).classList.toggle("hidden");
24 }
25
26 function checkSelectedAdblocker()
27 {
28 var selectedOption = adblockersList[adblockersList.selectedIndex];
29 var element = selectedOption.getAttribute("data-show-element");
30 if (element)
31 document.getElementById(element).classList.remove("hidden");
32 else
33 {
34 element = selectedOption.getAttribute("data-hide-element");
35 document.getElementById(element).classList.add("hidden");
36 }
37 }
38
18 function init() 39 function init()
19 { 40 {
20 var form = document.getElementById("reasons-form"); 41 var form = document.getElementById("reasons-form");
21 42
22 // Create hidden input for GET parameters 43 // Create hidden input for GET parameters
23 window.location.search.substr(1).split("&").forEach(function(param) 44 window.location.search.substr(1).split("&").forEach(function(param)
24 { 45 {
25 if (!/.=./.test(param)) 46 if (!/.=./.test(param))
26 return; 47 return;
27 48
28 var paramSplit = param.split("="); 49 var paramSplit = param.split("=");
29 var input = document.createElement("input"); 50 var input = document.createElement("input");
30 input.setAttribute("type", "hidden"); 51 input.setAttribute("type", "hidden");
31 input.setAttribute("name", decodeURIComponent(paramSplit[0])); 52 input.setAttribute("name", decodeURIComponent(paramSplit[0]));
32 input.setAttribute("value", decodeURIComponent(paramSplit[1])); 53 input.setAttribute("value", decodeURIComponent(paramSplit[1]));
33 form.appendChild(input); 54 form.appendChild(input);
34 }); 55 });
35 56
36 // Randomly add reasons 57 // Randomly add reasons
37 var reasonsContainer = document.getElementById("reasons"); 58 var reasonsContainer = document.getElementById("reasons");
38 var reasons = document.querySelectorAll("#reasons > li"); 59 var reasons = document.querySelectorAll("#reasons > li");
39 reasons = Array.prototype.slice.call(reasons); 60 reasons = Array.prototype.slice.call(reasons);
40 reasonsContainer.innerHTML = ""; 61 reasonsContainer.innerHTML = "";
41 while (reasons.length) 62 while (reasons.length)
42 { 63 {
43 var randomIndex = Math.floor(Math.random() * (reasons.length -1)); 64 var randomIndex = Math.floor(Math.random() * (reasons.length -1));
44 var reasonElement = reasons.splice(randomIndex, 1)[0]; 65 var reasonElement = reasons.splice(randomIndex, 1)[0];
45 reasonsContainer.appendChild(reasonElement); 66 reasonsContainer.appendChild(reasonElement);
67 var checkbox = reasonElement.querySelector("input[type=checkbox]");
68 if (checkbox.checked)
69 toggleView(checkbox);
70
71 checkbox.addEventListener("change", function(event)
72 {
73 toggleView(event.target);
74 }, false);
46 } 75 }
47 76
48 reasonsContainer.addEventListener("click", function(event) 77 adblockersList = document.querySelector("#adblockers select");
49 {
50 var toggleView = event.target.getAttribute("toggle-view");
51 if (toggleView)
52 document.getElementById(toggleView).classList.toggle("hidden");
53 }, false);
54
55 var adblockersList = document.querySelector("#adblockers select");
56 adblockersList.addEventListener("change", function() 78 adblockersList.addEventListener("change", function()
57 { 79 {
58 var selectedOption = adblockersList[adblockersList.selectedIndex]; 80 checkSelectedAdblocker();
59 var element = selectedOption.getAttribute("show-element");
60 if (element)
61 document.getElementById(element).classList.remove("hidden");
juliandoucette 2016/07/28 23:05:41 classList is not supported < IE11
saroyanm 2016/08/24 11:48:41 Uninstallation page is only being shown to the Chr
juliandoucette 2016/09/24 16:49:33 Acknowledged.
62 else
63 {
64 element = selectedOption.getAttribute("hide-element");
65 document.getElementById(element).classList.add("hidden");
66 }
67 }, false); 81 }, false);
82 checkSelectedAdblocker();
68 83
69 var reasonOtherInput = document.getElementById("reason-other-input"); 84 var reasonOtherInput = document.getElementById("reason-other-input");
70 var maxLength = reasonOtherInput.getAttribute("maxlength"); 85 var maxLength = reasonOtherInput.getAttribute("maxlength");
71 var charCounter = document.getElementById("characters-countdown"); 86 var charCounter = document.getElementById("characters-countdown");
72 charCounter.textContent = maxLength; 87 charCounter.textContent = maxLength;
73 reasonOtherInput.addEventListener("keyup", function() 88 reasonOtherInput.addEventListener("keyup", function()
74 { 89 {
75 charCounter.textContent = maxLength - reasonOtherInput.value.length; 90 charCounter.textContent = maxLength - reasonOtherInput.value.length;
76 }, false); 91 }, false);
77 92
78 var submitButton = document.getElementById("submit-form"); 93 var submitButton = document.getElementById("submit-form");
79 submitButton.addEventListener("click", function(event) 94 submitButton.addEventListener("click", function(event)
80 { 95 {
81 if (!document.querySelector("ul input:checked")) 96 if (!document.querySelector("ul input:checked"))
82 { 97 {
83 event.preventDefault(); 98 event.preventDefault();
84 form.setAttribute("class", "error"); 99 form.setAttribute("class", "error");
85 } 100 }
86 else 101 else
87 { 102 {
88 form.submit(); 103 form.submit();
89 } 104 }
90 }, false); 105 }, false);
91 } 106 }
92 document.addEventListener("DOMContentLoaded", init, false); 107 document.addEventListener("DOMContentLoaded", init, false);
93 })(); 108 })();
94 </script> 109 </script>
95 </head> 110 </head>
96 111
97 <section class="clear"> 112 <div class="notification">
juliandoucette 2016/07/28 23:05:42 I suggest changing this <strong> to a heading or t
saroyanm 2016/08/24 11:48:42 Fare enough, done.
juliandoucette 2016/09/24 16:49:33 I should have suggested changing this section to a
98 <strong>{{"Did you uninstall Adblock Plus by accident?"|translate("reinstall-h eadline", "Text next to the Reinstallation button")}}</strong> 113 <strong>{{"Did you uninstall Adblock Plus by accident?"|translate("reinstall-h eadline", "Text next to the Reinstallation button")}}</strong>
99 {{"index"|linkify}}{{"Reinstall Now"|translate("reinstall", "Reinstall button text")}}</a> 114 {{"index"|linkify}}{{"Reinstall Now"|translate("reinstall", "Reinstall button text")}}</a>
100 </section> 115 </div>
101 <section class="highlighted"> 116 <section class="highlighted">
102 <h1>{{"Please select the reason(s) why you uninstalled Adblock Plus:"|translat e("reasons-header", "Form heading")}}</h1> 117 <h1>{{"Please select the reason(s) why you uninstalled Adblock Plus:"|translat e("reasons-header", "Form heading")}}</h1>
103 <form id="reasons-form" action="uninstalled-submit" method="get"> 118 <form id="reasons-form" action="uninstalled-submit" method="get">
104 <ul id="reasons"> 119 <fieldset>
105 {%- for reasonId, stringId, value, adblockers in reasons %} 120 <ul id="reasons">
106 <li> 121 {%- for reasonId, stringId, value, adblockers in reasons %}
107 <label> 122 <li>
108 <input type="checkbox" name="reason" {% if adblockers %} toggle-view=" adblockers" {% endif %} value="{{reasonId}}" /> 123 <label>
109 {{value|translate(stringId, "Uninstallation reason")}} 124 <input type="checkbox" name="reason" {% if adblockers %} data-toggle -view="adblockers" {% endif %} value="{{reasonId}}" />
110 </label> 125 {{value|translate(stringId, "Uninstallation reason")}}
111 {%- if adblockers %} 126 </label>
112 <ul class="hidden" id="adblockers"> 127 {%- if adblockers %}
juliandoucette 2016/07/28 23:05:41 Why use a <ul> here? Perhaps a fieldset would be
saroyanm 2016/08/24 11:48:41 Done.
113 <li> 128 <fieldset class="hidden" id="adblockers">
114 <label> 129 <select>
juliandoucette 2016/07/28 23:05:41 Why use a label if there is no label text?
saroyanm 2016/08/24 11:48:42 Done.
115 <select> 130 {%- for name in adblockers %}
116 {%- for name in adblockers %} 131 <option name="otherAdblockerPredefined" data-hide-element="other-a dblocker" value="{{name}}">{{name}}</option>
117 <option name="otherAdblockerPredefined" hide-element="other-adbl ocker" value="{{name}}">{{name}}</option> 132 {%- endfor %}
juliandoucette 2016/07/28 23:05:41 Invalid attribute "hide-element". See https://deve
saroyanm 2016/08/24 11:48:42 Done.
118 {%- endfor %} 133 <option name="otherAdblockerPredefined" data-show-element="other-a dblocker" value="Other">{{"Other"|translate("other", "Option in list of Adblocke rs")}}</option>
119 <option name="otherAdblockerPredefined" show-element="other-adbl ocker" value="Other">{{"Other"|translate("other", "Option in list of Adblockers" )}}</option> 134 </select>
juliandoucette 2016/07/28 23:05:41 Invalid attribute "show-element". See https://deve
saroyanm 2016/08/24 11:48:41 Done.
120 </select> 135 <input id="other-adblocker" class="hidden" type="text" name="otherAd blocker" />
121 <input id="other-adblocker" class="hidden" type="text" name="other Adblocker" /> 136 </fieldset>
122 </label> 137 {%- endif %}
123 </li> 138 </li>
124 </ul> 139 {%- endfor %}
125 {%- endif %} 140 <li>
126 </li> 141 <label>
127 {%- endfor %} 142 <input id="reason-other" data-toggle-view="reason-other-container" t ype="checkbox" name="reason" value="0v0" />
128 <li> 143 {{"Other, namely..."|translate("reason-other", "Last uninstallation reason")}}
129 <label> 144 </label>
130 <input id="reason-other" toggle-view="reason-other-container" type="ch eckbox" name="reason" value="0v0" /> 145 <fieldset id="reason-other-container" class="hidden">
juliandoucette 2016/07/28 23:05:42 Invalid attribute "toggle-view". See https://devel
saroyanm 2016/08/24 11:48:41 Done.
131 {{"Other, namely..."|translate("reason-other", "Last uninstallation re ason")}}
132 </label>
133 <ul id="reason-other-container" class="hidden">
juliandoucette 2016/07/28 23:05:41 Why use a ul here? Perhaps a fieldset would be mo
juliandoucette 2016/07/28 23:27:54 See https://www.w3.org/TR/html5/forms.html#the-fie
saroyanm 2016/08/24 11:48:41 I kinda was thinking that fieldset should require
134 <li>
135 <textarea id="reason-other-input" name="reasonOther" maxlength="300" placeholder="{{"Please explain why you are uninstalling Adblock Plus"|translate ("reason-other-placeholder", "Textarea placeholder text, appears after selecting 'Other, namely...' option")}}"></textarea> 146 <textarea id="reason-other-input" name="reasonOther" maxlength="300" placeholder="{{"Please explain why you are uninstalling Adblock Plus"|translate ("reason-other-placeholder", "Textarea placeholder text, appears after selecting 'Other, namely...' option")}}"></textarea>
136 <div> 147 <div>
137 {{"Characters remaining:"|translate("countdown-text", "Text of ch aracter limit counter appears after selecting 'Other, namely...' option")}} 148 {{"Characters remaining:"|translate("countdown-text", "Text of ch aracter limit counter appears after selecting 'Other, namely...' option")}}
138 <span id="characters-countdown"></span> 149 <span id="characters-countdown"></span>
139 </div> 150 </div>
140 </li> 151 </fieldset>
141 </ul> 152 </li>
142 </li> 153 </ul>
143 </ul> 154 </fieldset>
144 <button id="submit-form">{{"Submit"|translate("submit", "Submit button text" )}}</button> 155 <button id="submit-form">{{"Submit"|translate("submit", "Submit button text" )}}</button>
145 <span class="error-label">{{"Please select at least one of the options above "|translate("error-msg", "Error message, is being shown after submission if no i tem selected")}}</span> 156 <span class="error-label">{{"Please select at least one of the options above "|translate("error-msg", "Error message, is being shown after submission if no i tem selected")}}</span>
146 </form> 157 </form>
147 <p class="disclaimer"> 158 <p class="disclaimer">
148 {{"By clicking Submit, you are sending your response to Adblock Plus. Please see our <a href='/privacy'>privacy policy</a>."|translate("disclaimer", "Discla imer below form")}} 159 {{"By clicking Submit, you are sending your response to Adblock Plus. Please see our <a href='/privacy'>privacy policy</a>."|translate("disclaimer", "Discla imer below form")}}
149 </p> 160 </p>
150 </section> 161 </section>
LEFTRIGHT
« no previous file | static/css/simple.css » ('j') | Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Toggle Comments ('s')

Powered by Google App Engine
This is Rietveld