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

Side by Side Diff: new-options.js

Issue 29338983: issue 3741 - Add "remove" option to list items in new options page (Closed)
Patch Set: Removed aria-labelledby Created June 22, 2016, 1:32 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
« no previous file with comments | « new-options.html ('k') | skin/new-options.css » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /* 1 /*
2 * This file is part of Adblock Plus <https://adblockplus.org/>, 2 * This file is part of Adblock Plus <https://adblockplus.org/>,
3 * Copyright (C) 2006-2016 Eyeo GmbH 3 * Copyright (C) 2006-2016 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 subscriptionsMap = Object.create(null); 22 var subscriptionsMap = Object.create(null);
23 var filtersMap = Object.create(null); 23 var filtersMap = Object.create(null);
24 var collections = Object.create(null); 24 var collections = Object.create(null);
25 var acceptableAdsUrl = null; 25 var acceptableAdsUrl = null;
26 var maxLabelId = 0; 26 var maxItemId = 0;
27 var getMessage = ext.i18n.getMessage; 27 var getMessage = ext.i18n.getMessage;
28 var filterErrors = 28 var filterErrors =
29 { 29 {
30 "synchronize_invalid_url": "options_filterList_lastDownload_invalidURL", 30 "synchronize_invalid_url": "options_filterList_lastDownload_invalidURL",
31 "synchronize_connection_error": "options_filterList_lastDownload_connectionE rror", 31 "synchronize_connection_error": "options_filterList_lastDownload_connectionE rror",
32 "synchronize_invalid_data": "options_filterList_lastDownload_invalidData", 32 "synchronize_invalid_data": "options_filterList_lastDownload_invalidData",
33 "synchronize_checksum_mismatch": "options_filterList_lastDownload_checksumMi smatch" 33 "synchronize_checksum_mismatch": "options_filterList_lastDownload_checksumMi smatch"
34 }; 34 };
35 35
36 function Collection(details) 36 function Collection(details)
(...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after
94 }.bind(this)); 94 }.bind(this));
95 95
96 for (var j = 0; j < this.details.length; j++) 96 for (var j = 0; j < this.details.length; j++)
97 { 97 {
98 var table = E(this.details[j].id); 98 var table = E(this.details[j].id);
99 var template = table.querySelector("template"); 99 var template = table.querySelector("template");
100 for (var i = 0; i < arguments.length; i++) 100 for (var i = 0; i < arguments.length; i++)
101 { 101 {
102 var item = arguments[i]; 102 var item = arguments[i];
103 var listItem = document.createElement("li"); 103 var listItem = document.createElement("li");
104 var itemId = "item-" + (++maxItemId);
104 listItem.appendChild(document.importNode(template.content, true)); 105 listItem.appendChild(document.importNode(template.content, true));
105 listItem.setAttribute("data-access", item.url || item.text); 106 listItem.setAttribute("data-access", item.url || item.text);
107 listItem.setAttribute("id", itemId);
108 listItem.setAttribute("role", "section");
106 109
107 var labelId = "label-" + (++maxLabelId);
108 var label = listItem.querySelector(".display"); 110 var label = listItem.querySelector(".display");
109 label.setAttribute("id", labelId); 111 label.setAttribute("for", itemId);
110 if (item.recommended && label.hasAttribute("data-tooltip")) 112 if (item.recommended && label.hasAttribute("data-tooltip"))
111 { 113 {
112 var tooltipId = label.getAttribute("data-tooltip"); 114 var tooltipId = label.getAttribute("data-tooltip");
113 tooltipId = tooltipId.replace("%value%", item.recommended); 115 tooltipId = tooltipId.replace("%value%", item.recommended);
114 label.setAttribute("data-tooltip", tooltipId); 116 label.setAttribute("data-tooltip", tooltipId);
115 } 117 }
116 118
117 var control = listItem.querySelector(".control"); 119 var controls = listItem.querySelectorAll(".control");
118 if (control) 120 for (var k = 0; k < controls.length; k++)
119 { 121 {
120 control.setAttribute("aria-labelledby", labelId); 122 var titleValue = getMessage(controls[k].getAttribute("title"));
Thomas Greiner 2016/06/22 15:49:46 Detail: Please keep this in the if-statement as it
saroyanm 2016/06/23 15:04:23 Done.
121 control.addEventListener("click", this.details[j].onClick, false); 123 if (controls[k].hasAttribute("title"))
122 124 controls[k].setAttribute("title", titleValue)
123 var role = control.getAttribute("role");
124 if (role == "checkbox" && !label.hasAttribute("data-action"))
125 {
126 var controlId = "control-" + maxLabelId;
127 control.setAttribute("id", controlId);
128 label.setAttribute("for", controlId);
129 }
130 } 125 }
131 126
132 this._setEmpty(table, null); 127 this._setEmpty(table, null);
133 if (table.hasChildNodes()) 128 if (table.hasChildNodes())
134 { 129 {
135 table.insertBefore(listItem, 130 table.insertBefore(listItem,
136 table.childNodes[this.items.indexOf(item)]); 131 table.childNodes[this.items.indexOf(item)]);
137 } 132 }
138 else 133 else
139 table.appendChild(listItem); 134 table.appendChild(listItem);
(...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after
187 var access = (item.url || item.text).replace(/'/g, "\\'"); 182 var access = (item.url || item.text).replace(/'/g, "\\'");
188 for (var i = 0; i < this.details.length; i++) 183 for (var i = 0; i < this.details.length; i++)
189 { 184 {
190 var table = E(this.details[i].id); 185 var table = E(this.details[i].id);
191 var element = table.querySelector("[data-access='" + access + "']"); 186 var element = table.querySelector("[data-access='" + access + "']");
192 if (!element) 187 if (!element)
193 continue; 188 continue;
194 189
195 var title = this._getItemTitle(item, i); 190 var title = this._getItemTitle(item, i);
196 element.querySelector(".display").textContent = title; 191 element.querySelector(".display").textContent = title;
197 if (title) 192 element.setAttribute("aria-label", title);
Thomas Greiner 2016/06/22 15:49:46 Detail: Was this change intentional? If so, why is
saroyanm 2016/06/23 15:04:23 Yes this is how we are marking the label of the se
Thomas Greiner 2016/06/24 15:22:10 But why is it necessary since you already use `<la
saroyanm 2016/06/24 15:54:51 When I only use <label for="..."> and focusing the
193 if (this.details[i].searchable)
198 element.setAttribute("data-search", title.toLowerCase()); 194 element.setAttribute("data-search", title.toLowerCase());
199 var control = element.querySelector(".control[role='checkbox']"); 195 var control = element.querySelector(".control[role='checkbox']");
200 if (control) 196 if (control)
201 { 197 {
202 control.setAttribute("aria-checked", item.disabled == false); 198 control.setAttribute("aria-checked", item.disabled == false);
203 if (item.url == acceptableAdsUrl && this.details[i].onClick == 199 if (item.url == acceptableAdsUrl && this == collections.filterLists)
204 toggleDisableSubscription)
205 control.setAttribute("disabled", true); 200 control.setAttribute("disabled", true);
206 } 201 }
207 202
208 var dateElement = element.querySelector(".date"); 203 var dateElement = element.querySelector(".date");
209 var timeElement = element.querySelector(".time"); 204 var timeElement = element.querySelector(".time");
210 if (dateElement && timeElement) 205 if (dateElement && timeElement)
211 { 206 {
212 var message = element.querySelector(".message"); 207 var message = element.querySelector(".message");
213 if (item.isDownloading) 208 if (item.isDownloading)
214 { 209 {
(...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after
275 index += (index == focusables.length - 1) ? -1 : 1; 270 index += (index == focusables.length - 1) ? -1 : 1;
276 271
277 var nextElement = focusables[index]; 272 var nextElement = focusables[index];
278 if (!nextElement) 273 if (!nextElement)
279 return false; 274 return false;
280 275
281 nextElement.focus(); 276 nextElement.focus();
282 return true; 277 return true;
283 } 278 }
284 279
285 function toggleRemoveSubscription(e)
286 {
287 e.preventDefault();
288 var subscriptionUrl = findParentData(e.target, "access", false);
289 if (e.target.getAttribute("aria-checked") == "true")
290 {
291 ext.backgroundPage.sendMessage({
292 type: "subscriptions.remove",
293 url: subscriptionUrl
294 });
295 }
296 else
297 addEnableSubscription(subscriptionUrl);
298 }
299
300 function toggleDisableSubscription(e)
301 {
302 e.preventDefault();
303 var subscriptionUrl = findParentData(e.target, "access", false);
304 ext.backgroundPage.sendMessage(
305 {
306 type: "subscriptions.toggle",
307 keepInstalled: true,
308 url: subscriptionUrl
309 });
310 }
311
312 function onAddLanguageSubscriptionClick(e)
313 {
314 e.preventDefault();
315 var url = findParentData(this, "access", false);
316 addEnableSubscription(url);
317 }
318
319 function onRemoveFilterClick()
320 {
321 var filter = findParentData(this, "access", false);
322 ext.backgroundPage.sendMessage(
323 {
324 type: "filters.remove",
325 text: filter
326 });
327 }
328
329 collections.popular = new Collection( 280 collections.popular = new Collection(
330 [ 281 [
331 { 282 {
332 id: "recommend-list-table", 283 id: "recommend-list-table"
333 onClick: toggleRemoveSubscription
334 } 284 }
335 ]); 285 ]);
336 collections.langs = new Collection( 286 collections.langs = new Collection(
337 [ 287 [
338 { 288 {
339 id: "blocking-languages-table", 289 id: "blocking-languages-table",
340 emptyText: "options_dialog_language_added_empty", 290 emptyText: "options_dialog_language_added_empty"
341 onClick: toggleRemoveSubscription
342 }, 291 },
343 { 292 {
344 id: "blocking-languages-dialog-table", 293 id: "blocking-languages-dialog-table",
345 emptyText: "options_dialog_language_added_empty" 294 emptyText: "options_dialog_language_added_empty"
346 } 295 }
347 ]); 296 ]);
348 collections.allLangs = new Collection( 297 collections.allLangs = new Collection(
349 [ 298 [
350 { 299 {
351 id: "all-lang-table", 300 id: "all-lang-table",
352 emptyText: "options_dialog_language_other_empty", 301 emptyText: "options_dialog_language_other_empty",
353 onClick: onAddLanguageSubscriptionClick 302 searchable: true
354 } 303 }
355 ]); 304 ]);
356 collections.acceptableAds = new Collection( 305 collections.acceptableAds = new Collection(
357 [ 306 [
358 { 307 {
359 id: "acceptableads-table", 308 id: "acceptableads-table"
360 onClick: toggleRemoveSubscription
361 } 309 }
362 ]); 310 ]);
363 collections.custom = new Collection( 311 collections.custom = new Collection(
364 [ 312 [
365 { 313 {
366 id: "custom-list-table", 314 id: "custom-list-table"
367 onClick: toggleRemoveSubscription
368 } 315 }
369 ]); 316 ]);
370 collections.whitelist = new Collection( 317 collections.whitelist = new Collection(
371 [ 318 [
372 { 319 {
373 id: "whitelisting-table", 320 id: "whitelisting-table",
374 emptyText: "options_whitelisted_empty", 321 emptyText: "options_whitelisted_empty"
375 onClick: onRemoveFilterClick
376 } 322 }
377 ]); 323 ]);
378 collections.customFilters = new Collection( 324 collections.customFilters = new Collection(
379 [ 325 [
380 { 326 {
381 id: "custom-filters-table", 327 id: "custom-filters-table",
382 emptyText: "options_customFilters_empty" 328 emptyText: "options_customFilters_empty"
383 } 329 }
384 ]); 330 ]);
385 collections.filterLists = new Collection( 331 collections.filterLists = new Collection(
386 [ 332 [
387 { 333 {
388 id: "all-filter-lists-table", 334 id: "all-filter-lists-table",
389 onClick: toggleDisableSubscription,
390 useOriginalTitle: true 335 useOriginalTitle: true
391 } 336 }
392 ]); 337 ]);
393 338
394 function updateLanguageCollections(subscription) 339 function updateLanguageCollections(subscription)
395 { 340 {
396 if (subscription.recommended == "ads") 341 if (subscription.recommended == "ads")
397 { 342 {
398 if (subscription.disabled) 343 if (subscription.disabled)
399 { 344 {
(...skipping 226 matching lines...) Expand 10 before | Expand all | Expand 10 after
626 url: findParentData(element, "access", false) 571 url: findParentData(element, "access", false)
627 }); 572 });
628 break; 573 break;
629 case "remove-subscription": 574 case "remove-subscription":
630 ext.backgroundPage.sendMessage( 575 ext.backgroundPage.sendMessage(
631 { 576 {
632 type: "subscriptions.remove", 577 type: "subscriptions.remove",
633 url: findParentData(element, "access", false) 578 url: findParentData(element, "access", false)
634 }); 579 });
635 break; 580 break;
581 case "toggle-remove-subscription":
582 var subscriptionUrl = findParentData(element, "access", false);
583 if (element.getAttribute("aria-checked") == "true")
584 {
585 ext.backgroundPage.sendMessage({
586 type: "subscriptions.remove",
587 url: subscriptionUrl
588 });
589 }
590 else
591 addEnableSubscription(subscriptionUrl);
592 break;
593 case "toggle-disable-subscription":
594 ext.backgroundPage.sendMessage(
595 {
596 type: "subscriptions.toggle",
597 keepInstalled: true,
598 url: findParentData(element, "access", false)
599 });
600 break;
601 case "add-language-subscription":
602 addEnableSubscription(findParentData(element, "access", false));
603 break;
604 case "remove-filter":
605 ext.backgroundPage.sendMessage(
606 {
607 type: "filters.remove",
608 text: findParentData(element, "access", false)
609 });
610 break;
636 } 611 }
637 } 612 }
638 } 613 }
639 614
640 function onDOMLoaded() 615 function onDOMLoaded()
641 { 616 {
642 populateLists(); 617 populateLists();
643 function onFindLanguageKeyUp() 618 function onFindLanguageKeyUp()
644 { 619 {
645 var searchStyle = E("search-style"); 620 var searchStyle = E("search-style");
(...skipping 300 matching lines...) Expand 10 before | Expand all | Expand 10 after
946 if (subscription.url in subscriptionsMap) 921 if (subscription.url in subscriptionsMap)
947 subscription = updateSubscription(subscription); 922 subscription = updateSubscription(subscription);
948 else 923 else
949 addSubscription(subscription); 924 addSubscription(subscription);
950 925
951 collections.filterLists.addItems(subscription); 926 collections.filterLists.addItems(subscription);
952 updateLanguageCollections(subscription); 927 updateLanguageCollections(subscription);
953 break; 928 break;
954 case "removed": 929 case "removed":
955 var knownSubscription = subscriptionsMap[subscription.url]; 930 var knownSubscription = subscriptionsMap[subscription.url];
956
957 if (subscription.url == acceptableAdsUrl || subscription.recommended) 931 if (subscription.url == acceptableAdsUrl || subscription.recommended)
958 { 932 {
959 subscription.disabled = true; 933 subscription.disabled = true;
960 onSubscriptionMessage("disabled", subscription); 934 onSubscriptionMessage("disabled", subscription);
961 } 935 }
962 else 936 else
963 { 937 {
964 collections.custom.removeItem(knownSubscription); 938 collections.custom.removeItem(knownSubscription);
965 delete subscriptionsMap[subscription.url]; 939 delete subscriptionsMap[subscription.url];
966 } 940 }
(...skipping 231 matching lines...) Expand 10 before | Expand all | Expand 10 after
1198 }); 1172 });
1199 ext.backgroundPage.sendMessage( 1173 ext.backgroundPage.sendMessage(
1200 { 1174 {
1201 type: "subscriptions.listen", 1175 type: "subscriptions.listen",
1202 filter: ["added", "disabled", "homepage", "lastDownload", "removed", 1176 filter: ["added", "disabled", "homepage", "lastDownload", "removed",
1203 "title", "downloadStatus", "downloading"] 1177 "title", "downloadStatus", "downloading"]
1204 }); 1178 });
1205 1179
1206 window.addEventListener("DOMContentLoaded", onDOMLoaded, false); 1180 window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
1207 })(); 1181 })();
OLDNEW
« no previous file with comments | « new-options.html ('k') | skin/new-options.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld