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

Side by Side Diff: pages/uninstalled.tmpl

Issue 29348067: Issue 4049 - reinstall button and adbockers list added to uninstallation page (Closed)

Patch Set: Addressed Julian's comments Created Aug. 24, 2016, 11:48 a.m.

Left:
Right:

Use n/p to move between diff chunks; N/P to move between comments.

Jump to:

View unified diff | Download patch

OLD	NEW
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."),	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 function init()	18 function init()

19 {	19 {

20 var form = document.getElementById("reasons-form");	20 var form = document.getElementById("reasons-form");

21	21

22 // Create hidden input for GET parameters	22 // Create hidden input for GET parameters

23 window.location.search.substr(1).split("&").forEach(function(param)	23 window.location.search.substr(1).split("&").forEach(function(param)

24 {	24 {

25 if (!/.=./.test(param))	25 if (!/.=./.test(param))

26 return;	26 return;

27	27

28 var paramSplit = param.split("=");	28 var paramSplit = param.split("=");

29 var input = document.createElement("input");	29 var input = document.createElement("input");

30 input.setAttribute("type", "hidden");	30 input.setAttribute("type", "hidden");

31 input.setAttribute("name", decodeURIComponent(paramSplit[0]));	31 input.setAttribute("name", decodeURIComponent(paramSplit[0]));

32 input.setAttribute("value", decodeURIComponent(paramSplit[1]));	32 input.setAttribute("value", decodeURIComponent(paramSplit[1]));

33 form.appendChild(input);	33 form.appendChild(input);

34 });	34 });

35	35

36 // Randomly add reasons	36 // Randomly add reasons

37 var reasonsContainer = document.getElementById("reasons");	37 var reasonsContainer = document.getElementById("reasons");

38 var reasons = reasonsContainer.getElementsByTagName("li");	38 var reasons = document.querySelectorAll("#reasons > li");

39 reasons = Array.prototype.slice.call(reasons);	39 reasons = Array.prototype.slice.call(reasons);

40 reasonsContainer.innerHTML = "";	40 reasonsContainer.innerHTML = "";

41 while (reasons.length)	41 while (reasons.length)

42 {	42 {

43 var randomIndex = Math.floor(Math.random() * (reasons.length -1));	43 var randomIndex = Math.floor(Math.random() * (reasons.length -1));

44 var reasonElement = reasons.splice(randomIndex, 1)[0];	44 var reasonElement = reasons.splice(randomIndex, 1)[0];

45 reasonsContainer.appendChild(reasonElement);	45 reasonsContainer.appendChild(reasonElement);

46 }	46 }

47	47

48 var reasonOtherCheckbox = document.getElementById("reason-other");	48 reasonsContainer.addEventListener("click", function(event)
	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 var reasonOther = document.getElementById("reason-other-container");

50 reasonOtherCheckbox.addEventListener("change", function()

51 {	49 {

52 reasonOther.classList.toggle("hidden");	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()

	57 {

	58 var selectedOption = adblockersList[adblockersList.selectedIndex];

	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 }

53 }, false);	67 }, false);

54	68

55 var reasonOtherInput = document.getElementById("reason-other-input");	69 var reasonOtherInput = document.getElementById("reason-other-input");

56 var maxLength = reasonOtherInput.getAttribute("maxlength");	70 var maxLength = reasonOtherInput.getAttribute("maxlength");

57 var charCounter = document.getElementById("characters-countdown");	71 var charCounter = document.getElementById("characters-countdown");

58 charCounter.textContent = maxLength;	72 charCounter.textContent = maxLength;

59 reasonOtherInput.addEventListener("keyup", function()	73 reasonOtherInput.addEventListener("keyup", function()

60 {	74 {

61 charCounter.textContent = maxLength - reasonOtherInput.value.length;	75 charCounter.textContent = maxLength - reasonOtherInput.value.length;

62 }, false);	76 }, false);

(...skipping 10 matching lines...) Expand all Loading...
73 {	87 {

74 form.submit();	88 form.submit();

75 }	89 }

76 }, false);	90 }, false);

77 }	91 }

78 document.addEventListener("DOMContentLoaded", init, false);	92 document.addEventListener("DOMContentLoaded", init, false);

79 })();	93 })();

80 </script>	94 </script>

81 </head>	95 </head>

82	96

	97 <div class="notification">

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

	100 </div>

83 <section class="highlighted">	101 <section class="highlighted">

84 <h1>{{"Please select the reason(s) why you uninstalled Adblock Plus:"\|translat e("reasons-header", "Form heading")}}</h1>	102 <h1>{{"Please select the reason(s) why you uninstalled Adblock Plus:"\|translat e("reasons-header", "Form heading")}}</h1>

85 <form id="reasons-form" action="uninstalled-submit" method="get">	103 <form id="reasons-form" action="uninstalled-submit" method="get">

86 <ul id="reasons">	104 <fieldset>

87 {%- for reasonId, stringId, value in reasons %}	105 <ul id="reasons">

88 <li>	106 {%- for reasonId, stringId, value, adblockers in reasons %}

89 <label>	107 <li>

90 <input type="checkbox" name="reason" value="{{reasonId}}" />	108 <input type="checkbox" name="reason" {% if adblockers %} data-toggle-v iew="adblockers" {% endif %} value="{{reasonId}}" />

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

92 </label>	110 {%- if adblockers %}

93 </li>	111 <fieldset class="hidden" id="adblockers">

94 {%- endfor %}	112 <select>

95 <li>	113 {%- for name in adblockers %}

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

97 <input id="reason-other" type="checkbox" name="reason" value="0v0" />	115 {%- endfor %}

98 {{"Other, namely..."\|translate("reason-other", "Last uninstallation re ason")}}	116 <option name="otherAdblockerPredefined" data-show-element="other-a dblocker" value="Other">{{"Other"\|translate("other", "Option in list of Adblocke rs")}}</option>

99 </label>	117 </select>

100 <div id="reason-other-container" class="hidden">	118 <input id="other-adblocker" class="hidden" type="text" name="otherAd blocker" />

101 <textarea id="reason-other-input" name="reasonOther" maxlength="300" p laceholder="{{"Please explain why you are uninstalling Adblock Plus"\|translate(" reason-other-placeholder", "Textarea placeholder text, appears after selecting ' Other, namely...' option")}}"></textarea>	119 </fieldset>

102 <div>	120 {%- endif %}

103 {{"Characters remaining:"\|translate("countdown-text", "Text of char acter limit counter appears after selecting 'Other, namely...' option")}}	121 </li>

104 <span id="characters-countdown"></span>	122 {%- endfor %}

105 </div>	123 <li>

106 </div>	124 <label>

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

108 </ul>	126 {{"Other, namely..."\|translate("reason-other", "Last uninstallation reason")}}

	127 </label>

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

	131 {{"Characters remaining:"\|translate("countdown-text", "Text of ch aracter limit counter appears after selecting 'Other, namely...' option")}}

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

	133 </div>

	134 </fieldset>

	135 </li>

	136 </ul>

	137 </fieldset>

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

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

111 </form>	140 </form>

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

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

114 </p>	143 </p>

115 </section>	144 </section>

OLD	NEW

« no previous file with comments | « no previous file | static/css/simple.css » ('j') | static/css/simple.css » ('J')