pages/uninstalled.tmpl - Issue 29348067: Issue 4049 - reinstall button and adbockers list added to uninstallation page

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: Addressed Julian's comments Created Aug. 24, 2016, 11:48 a.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

LEFT	RIGHT
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");
juliandoucette 2016/09/24 16:49:33 NIT: I would suggest listening to the "change" ev NIT: I would suggest listening to the "change" event instead of the "click" event on checkboxes / radiobuttons. 1. I think it's more correct 2. The handler won't be fired on the label when the label is clicked saroyanm 2016/09/27 12:10:14 I agree that in this case we can go with the chang Show quoted text On 2016/09/24 16:49:33, juliandoucette wrote: > NIT: > > I would suggest listening to the "change" event instead of the "click" event on > checkboxes / radiobuttons. I agree that in this case we can go with the change event. Done. Show quoted text > 1. I think it's more correct I think it's more a design question, whether your intention are to assign event listener on each element, or only to one, or even to body, but in case of small amount of elements we should be fine, considering memory efficient solution. Show quoted text > 2. The handler won't be fired on the label when the label is clicked It depends, if you will have label containing the input element it will be fired twice, one for the label another for the input: http://stackoverflow.com/questions/17185265/jquery-click-event-triggers-twice... juliandoucette 2016/09/28 13:35:26 Acknowledged. Show quoted text On 2016/09/27 12:10:14, saroyanm wrote: > On 2016/09/24 16:49:33, juliandoucette wrote: > > NIT: > > > > I would suggest listening to the "change" event instead of the "click" event > on > > checkboxes / radiobuttons. > I agree that in this case we can go with the change event. Done. > > 1. I think it's more correct > I think it's more a design question, whether your intention are to assign event > listener on each element, or only to one, or even to body, but in case of small > amount of elements we should be fine, considering memory efficient solution. > > 2. The handler won't be fired on the label when the label is clicked > It depends, if you will have label containing the input element it will be fired > twice, one for the label another for the input: > http://stackoverflow.com/questions/17185265/jquery-click-event-triggers-twice... Acknowledged.
49 {

50 var toggleView = event.target.getAttribute("data-toggle-view");

51 if (toggleView)

52 document.getElementById(toggleView).classList.toggle("hidden");
juliandoucette 2016/09/24 16:49:33 Minor bug: If you check the "Other, namely..." c Minor bug: If you check the "Other, namely..." checkbox and then refresh the page than: 1. The textarea disappears 2. The checkbox (show/hide)s backwards To correct this, you could: 1. Validate that the checkbox is checked (`event.target.checked`) 2. Run this code on load and when the checkbox is checked saroyanm 2016/09/27 12:10:14 Good catch, Chrome wasn't refreshing the selected Show quoted text On 2016/09/24 16:49:33, juliandoucette wrote: > Minor bug: > > If you check the "Other, namely..." checkbox and then refresh the page than: > > 1. The textarea disappears > 2. The checkbox (show/hide)s backwards > > To correct this, you could: > > 1. Validate that the checkbox is checked (`event.target.checked`) > 2. Run this code on load and when the checkbox is checked Good catch, Chrome wasn't refreshing the selected items, totally forgot about that.
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("data-show-element");

60 if (element)

61 document.getElementById(element).classList.remove("hidden");

62 else

63 {

64 element = selectedOption.getAttribute("data-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

(...skipping 20 matching lines...) Expand all Loading...
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 </div>	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 <fieldset>	119 <fieldset>

105 <ul id="reasons">	120 <ul id="reasons">

106 {%- for reasonId, stringId, value, adblockers in reasons %}	121 {%- for reasonId, stringId, value, adblockers in reasons %}

107 <li>	122 <li>

108 <input type="checkbox" name="reason" {% if adblockers %} data-toggle-v iew="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}}" />

	125 {{value\|translate(stringId, "Uninstallation reason")}}

	126 </label>

110 {%- if adblockers %}	127 {%- if adblockers %}

111 <fieldset class="hidden" id="adblockers">	128 <fieldset class="hidden" id="adblockers">

112 <select>	129 <select>

113 {%- for name in adblockers %}	130 {%- for name in adblockers %}

114 <option name="otherAdblockerPredefined" data-hide-element="other-a dblocker" value="{{name}}">{{name}}</option>	131 <option name="otherAdblockerPredefined" data-hide-element="other-a dblocker" value="{{name}}">{{name}}</option>

115 {%- endfor %}	132 {%- endfor %}

116 <option name="otherAdblockerPredefined" data-show-element="other-a dblocker" value="Other">{{"Other"\|translate("other", "Option in list of Adblocke rs")}}</option>	133 <option name="otherAdblockerPredefined" data-show-element="other-a dblocker" value="Other">{{"Other"\|translate("other", "Option in list of Adblocke rs")}}</option>

117 </select>	134 </select>

118 <input id="other-adblocker" class="hidden" type="text" name="otherAd blocker" />	135 <input id="other-adblocker" class="hidden" type="text" name="otherAd blocker" />

119 </fieldset>	136 </fieldset>

120 {%- endif %}	137 {%- endif %}

121 </li>	138 </li>

122 {%- endfor %}	139 {%- endfor %}

123 <li>	140 <li>

124 <label>	141 <label>

125 <input id="reason-other" data-toggle-view="reason-other-container" t ype="checkbox" name="reason" value="0v0" />	142 <input id="reason-other" data-toggle-view="reason-other-container" t ype="checkbox" name="reason" value="0v0" />

126 {{"Other, namely..."\|translate("reason-other", "Last uninstallation reason")}}	143 {{"Other, namely..."\|translate("reason-other", "Last uninstallation reason")}}

127 </label>	144 </label>

128 <fieldset id="reason-other-container" class="hidden">	145 <fieldset id="reason-other-container" class="hidden">

129 <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>
juliandoucette 2016/09/24 16:49:34 This textarea is pretty small (it fits about 100 c This textarea is pretty small (it fits about 100 char). Have we considered setting rows or height? saroyanm 2016/09/27 12:10:14 It has height and width specified, AFAIK it was re Show quoted text On 2016/09/24 16:49:34, juliandoucette wrote: > This textarea is pretty small (it fits about 100 char). Have we considered > setting rows or height? It has height and width specified, AFAIK it was requested with that sizes, at least it was aligned with Designers as far as I remember, but I'm open to change it size as well, I'll suggest to that kind of stylistic change separately. juliandoucette 2016/09/28 13:35:26 Acknowledged. Show quoted text On 2016/09/27 12:10:14, saroyanm wrote: > On 2016/09/24 16:49:34, juliandoucette wrote: > > This textarea is pretty small (it fits about 100 char). Have we considered > > setting rows or height? > > It has height and width specified, AFAIK it was requested with that sizes, at > least it was aligned with Designers as far as I remember, but I'm open to change > it size as well, I'll suggest to that kind of stylistic change separately. Acknowledged.
130 <div>	147 <div>

131 {{"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")}}

132 <span id="characters-countdown"></span>	149 <span id="characters-countdown"></span>

133 </div>	150 </div>

134 </fieldset>	151 </fieldset>

135 </li>	152 </li>

136 </ul>	153 </ul>

137 </fieldset>	154 </fieldset>

138 <button id="submit-form">{{"Submit"\|translate("submit", "Submit button text" )}}</button>	155 <button id="submit-form">{{"Submit"\|translate("submit", "Submit button text" )}}</button>

139 <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>

140 </form>	157 </form>

141 <p class="disclaimer">	158 <p class="disclaimer">

142 {{"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")}}

143 </p>	160 </p>

144 </section>	161 </section>

LEFT	RIGHT