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: Fixed some syntax issues Created July 20, 2016, 3:55 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

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)

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("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()

	57 {

	58 var selectedOption = adblockersList[adblockersList.selectedIndex];

	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 classList is not supported < IE11 saroyanm 2016/08/24 11:48:41 Uninstallation page is only being shown to the Chr Show quoted text On 2016/07/28 23:05:41, juliandoucette wrote: > classList is not supported < IE11 Uninstallation page is only being shown to the Chrome users. juliandoucette 2016/09/24 16:49:33 Acknowledged. Show quoted text On 2016/08/24 11:48:41, saroyanm wrote: > On 2016/07/28 23:05:41, juliandoucette wrote: > > classList is not supported < IE11 > > Uninstallation page is only being shown to the Chrome users. Acknowledged.
	62 else

	63 {

	64 element = selectedOption.getAttribute("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 <section class="clear">
	juliandoucette 2016/07/28 23:05:42 I suggest changing this <strong> to a heading or t I suggest changing this <strong> to a heading or this <section> to a <div>. "The HTML <section> element represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading. Each <section> should be identified, typically by including a heading (<h1>-<h6> element) as a child of the <section> element." - https://developer.mozilla.org/en/docs/Web/HTML/Element/section saroyanm 2016/08/24 11:48:42 Fare enough, done. Show quoted text On 2016/07/28 23:05:42, juliandoucette wrote: > I suggest changing this <strong> to a heading or this <section> to a <div>. > > "The HTML <section> element represents a generic section of a document, i.e., a > thematic grouping of content, typically with a heading. Each <section> should be > identified, typically by including a heading (<h1>-<h6> element) as a child of > the <section> element." > - https://developer.mozilla.org/en/docs/Web/HTML/Element/section Fare enough, done. juliandoucette 2016/09/24 16:49:33 I should have suggested changing this section to a Show quoted text On 2016/08/24 11:48:42, saroyanm wrote: > On 2016/07/28 23:05:42, juliandoucette wrote: > > I suggest changing this <strong> to a heading or this <section> to a <div>. > > > > "The HTML <section> element represents a generic section of a document, i.e., > a > > thematic grouping of content, typically with a heading. Each <section> should > be > > identified, typically by including a heading (<h1>-<h6> element) as a child of > > the <section> element." > > - https://developer.mozilla.org/en/docs/Web/HTML/Element/section > > Fare enough, done. I should have suggested changing this section to an aside and this strong to a heading. My mistake. (I don't think this matters very much because this page is not intended for the website and search engines.)
	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 </section>

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 <ul id="reasons">

87 {%- for reasonId, stringId, value in reasons %}	105 {%- for reasonId, stringId, value, adblockers in reasons %}

88 <li>	106 <li>

89 <label>	107 <label>

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

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

92 </label>	110 </label>

	111 {%- if adblockers %}

	112 <ul class="hidden" id="adblockers">
	juliandoucette 2016/07/28 23:05:41 Why use a <ul> here? Perhaps a fieldset would be Why use a <ul> here? Perhaps a fieldset would be more appropriate? https://developer.mozilla.org/en/docs/Web/HTML/Element/fieldset saroyanm 2016/08/24 11:48:41 Done. Show quoted text On 2016/07/28 23:05:41, juliandoucette wrote: > Why use a <ul> here? > > Perhaps a fieldset would be more appropriate? > https://developer.mozilla.org/en/docs/Web/HTML/Element/fieldset Done.
	113 <li>

	114 <label>
	juliandoucette 2016/07/28 23:05:41 Why use a label if there is no label text? Why use a label if there is no label text? saroyanm 2016/08/24 11:48:42 Done. Show quoted text On 2016/07/28 23:05:41, juliandoucette wrote: > Why use a label if there is no label text? Done.
	115 <select>

	116 {%- for name in adblockers %}

	117 <option name="otherAdblockerPredefined" hide-element="other-adbl ocker" value="{{name}}">{{name}}</option>
	juliandoucette 2016/07/28 23:05:41 Invalid attribute "hide-element". See https://deve Invalid attribute "hide-element". See https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes. saroyanm 2016/08/24 11:48:42 Done. Show quoted text On 2016/07/28 23:05:41, juliandoucette wrote: > Invalid attribute "hide-element". See > https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes. Done.
	118 {%- endfor %}

	119 <option name="otherAdblockerPredefined" show-element="other-adbl ocker" value="Other">{{"Other"\|translate("other", "Option in list of Adblockers" )}}</option>
	juliandoucette 2016/07/28 23:05:41 Invalid attribute "show-element". See https://deve Invalid attribute "show-element". See https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes. saroyanm 2016/08/24 11:48:41 Done. Show quoted text On 2016/07/28 23:05:41, juliandoucette wrote: > Invalid attribute "show-element". See > https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes. Done.
	120 </select>

	121 <input id="other-adblocker" class="hidden" type="text" name="other Adblocker" />

	122 </label>

	123 </li>

	124 </ul>

	125 {%- endif %}

93 </li>	126 </li>

94 {%- endfor %}	127 {%- endfor %}

95 <li>	128 <li>

96 <label>	129 <label>

97 <input id="reason-other" type="checkbox" name="reason" value="0v0" />	130 <input id="reason-other" toggle-view="reason-other-container" type="ch eckbox" name="reason" value="0v0" />
	juliandoucette 2016/07/28 23:05:42 Invalid attribute "toggle-view". See https://devel Invalid attribute "toggle-view". See https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes. saroyanm 2016/08/24 11:48:41 Done. Show quoted text On 2016/07/28 23:05:42, juliandoucette wrote: > Invalid attribute "toggle-view". See > https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes. Done.
98 {{"Other, namely..."\|translate("reason-other", "Last uninstallation re ason")}}	131 {{"Other, namely..."\|translate("reason-other", "Last uninstallation re ason")}}

99 </label>	132 </label>

100 <div id="reason-other-container" class="hidden">	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 Why use a ul here? Perhaps a fieldset would be more appropriate? https://developer.mozilla.org/en/docs/Web/HTML/Element/fieldset juliandoucette 2016/07/28 23:27:54 See https://www.w3.org/TR/html5/forms.html#the-fie See https://www.w3.org/TR/html5/forms.html#the-fieldset-element for better examples. saroyanm 2016/08/24 11:48:41 I kinda was thinking that fieldset should require Show quoted text On 2016/07/28 23:05:41, juliandoucette wrote: > Why use a ul here? > > Perhaps a fieldset would be more appropriate? > https://developer.mozilla.org/en/docs/Web/HTML/Element/fieldset I kinda was thinking that fieldset should require legend tag inside, but apparently it not, can't say anything against using it, Done.
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>	134 <li>

102 <div>	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>

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

104 <span id="characters-countdown"></span>	137 {{"Characters remaining:"\|translate("countdown-text", "Text of ch aracter limit counter appears after selecting 'Other, namely...' option")}}

105 </div>	138 <span id="characters-countdown"></span>

106 </div>	139 </div>

	140 </li>

	141 </ul>

107 </li>	142 </li>

108 </ul>	143 </ul>

109 <button id="submit-form">{{"Submit"\|translate("submit", "Submit button text" )}}</button>	144 <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>	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>

111 </form>	146 </form>

112 <p class="disclaimer">	147 <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")}}	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")}}

114 </p>	149 </p>

115 </section>	150 </section>

OLD	NEW

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