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

Delta Between Two Patch Sets: options.js

Issue 29321417: Issue 2357 - Added "predefined list" dialog to options page (Closed)
Left Patch Set: Replaced dataset with has/get/set/removeAttribute Created July 10, 2015, 2:18 p.m.
Right Patch Set: Post-review: Merged Created July 16, 2015, 11:36 a.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 | « options.html ('k') | skin/options.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 /* 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-2015 Eyeo GmbH 3 * Copyright (C) 2006-2015 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
(...skipping 20 matching lines...) Expand all
31 } 31 }
32 32
33 Collection.prototype.addItems = function() 33 Collection.prototype.addItems = function()
34 { 34 {
35 var length = Array.prototype.push.apply(this.items, arguments); 35 var length = Array.prototype.push.apply(this.items, arguments);
36 if (length == 0) 36 if (length == 0)
37 return; 37 return;
38 38
39 this.items.sort(function(a, b) 39 this.items.sort(function(a, b)
40 { 40 {
41 var aValue = (a.title || a.url || a.text).toLowerCase(); 41 var aValue = (a.title || a.text || a.url).toLowerCase();
42 var bValue = (b.title || b.url || a.text).toLowerCase(); 42 var bValue = (b.title || b.text || b.url).toLowerCase();
43 return aValue.localeCompare(bValue); 43 return aValue.localeCompare(bValue);
44 }); 44 });
45 45
46 for (var j = 0; j < this.details.length; j++) 46 for (var j = 0; j < this.details.length; j++)
47 { 47 {
48 var table = E(this.details[j].id); 48 var table = E(this.details[j].id);
49 var template = table.querySelector("template"); 49 var template = table.querySelector("template");
50 for (var i = 0; i < arguments.length; i++) 50 for (var i = 0; i < arguments.length; i++)
51 { 51 {
52 var item = arguments[i]; 52 var item = arguments[i];
(...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after
100 table.appendChild(template); 100 table.appendChild(template);
101 } 101 }
102 this.items.length = 0; 102 this.items.length = 0;
103 }; 103 };
104 104
105 function onToggleSubscriptionClick(e) 105 function onToggleSubscriptionClick(e)
106 { 106 {
107 e.preventDefault(); 107 e.preventDefault();
108 var subscriptionUrl = e.target.parentNode.getAttribute("data-access"); 108 var subscriptionUrl = e.target.parentNode.getAttribute("data-access");
109 if (!e.target.checked) 109 if (!e.target.checked)
110 removeSubscription(subscriptionUrl); 110 {
111 ext.backgroundPage.sendMessage(
112 {
113 type: "subscriptions.remove",
114 url: subscriptionUrl
115 });
116 }
111 else 117 else
112 addEnableSubscription(subscriptionUrl); 118 addEnableSubscription(subscriptionUrl);
113 } 119 }
114 120
115 function onAddLanguageSubscriptionClick(e) 121 function onAddLanguageSubscriptionClick(e)
116 { 122 {
117 e.preventDefault(); 123 e.preventDefault();
118 var url = this.parentNode.getAttribute("data-access"); 124 var url = this.parentNode.getAttribute("data-access");
119 addEnableSubscription(url); 125 addEnableSubscription(url);
120 } 126 }
121 127
122 function onRemoveFilterClick() 128 function onRemoveFilterClick()
123 { 129 {
124 var filter = this.parentNode.getAttribute("data-access"); 130 var filter = this.parentNode.getAttribute("data-access");
125 removeFilter(filter); 131 ext.backgroundPage.sendMessage(
132 {
133 type: "filters.remove",
134 text: filter
135 });
126 } 136 }
127 137
128 collections.popular = new Collection( 138 collections.popular = new Collection(
129 [ 139 [
130 { 140 {
131 id: "recommend-list-table", 141 id: "recommend-list-table",
132 onClick: onToggleSubscriptionClick 142 onClick: onToggleSubscriptionClick
133 } 143 }
134 ]); 144 ]);
135 collections.langs = new Collection( 145 collections.langs = new Collection(
(...skipping 25 matching lines...) Expand all
161 { 171 {
162 id: "custom-list-table", 172 id: "custom-list-table",
163 onClick: onToggleSubscriptionClick 173 onClick: onToggleSubscriptionClick
164 } 174 }
165 ]); 175 ]);
166 collections.whitelist = new Collection( 176 collections.whitelist = new Collection(
167 [ 177 [
168 { 178 {
169 id: "whitelisting-table", 179 id: "whitelisting-table",
170 onClick: onRemoveFilterClick 180 onClick: onRemoveFilterClick
181 }
182 ]);
183 collections.customFilters = new Collection(
184 [
185 {
186 id: "custom-filters-table"
171 } 187 }
172 ]); 188 ]);
173 189
174 function updateSubscription(subscription) 190 function updateSubscription(subscription)
175 { 191 {
176 var subscriptionUrl = subscription.url; 192 var subscriptionUrl = subscription.url;
177 var knownSubscription = subscriptionsMap[subscriptionUrl]; 193 var knownSubscription = subscriptionsMap[subscriptionUrl];
178 if (knownSubscription) 194 if (knownSubscription)
179 knownSubscription.disabled = subscription.disabled; 195 knownSubscription.disabled = subscription.disabled;
180 else 196 else
(...skipping 78 matching lines...) Expand 10 before | Expand all | Expand 10 after
259 } 275 }
260 } 276 }
261 277
262 function updateFilter(filter) 278 function updateFilter(filter)
263 { 279 {
264 var match = filter.text.match(/^@@\|\|([^\/:]+)\^\$document$/); 280 var match = filter.text.match(/^@@\|\|([^\/:]+)\^\$document$/);
265 if (match && !filtersMap[filter.text]) 281 if (match && !filtersMap[filter.text])
266 { 282 {
267 filter.title = match[1]; 283 filter.title = match[1];
268 collections.whitelist.addItems(filter); 284 collections.whitelist.addItems(filter);
269 filtersMap[filter.text] = filter
270 } 285 }
271 else 286 else
272 { 287 collections.customFilters.addItems(filter);
273 // TODO: add `filters[i].text` to list of custom filters 288
274 } 289 filtersMap[filter.text] = filter;
275 } 290 }
276 291
277 function loadRecommendations() 292 function loadRecommendations()
278 { 293 {
279 var request = new XMLHttpRequest(); 294 var request = new XMLHttpRequest();
280 request.open("GET", "subscriptions.xml", false); 295 request.open("GET", "subscriptions.xml", false);
281 request.addEventListener("load", function() 296 request.addEventListener("load", function()
282 { 297 {
283 var list = document.getElementById("subscriptionSelector"); 298 var list = document.getElementById("subscriptionSelector");
284 var docElem = request.responseXML.documentElement; 299 var docElem = request.responseXML.documentElement;
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after
323 { 338 {
324 if (!element) 339 if (!element)
325 return; 340 return;
326 341
327 if (element.hasAttribute("data-action")) 342 if (element.hasAttribute("data-action"))
328 break; 343 break;
329 344
330 element = element.parentElement; 345 element = element.parentElement;
331 } 346 }
332 347
333 switch (element.getAttribute("data-action")) 348 var actions = element.getAttribute("data-action").split(",");
334 { 349 for (var i = 0; i < actions.length; i++)
335 case "add-domain-exception": 350 {
336 addWhitelistedDomain(); 351 switch (actions[i])
337 break; 352 {
338 case "add-subscription": 353 case "add-domain-exception":
339 var dialog = E("dialog-content-addSubscription"); 354 addWhitelistedDomain();
340 var title = dialog.querySelector("h3").textContent; 355 break;
341 var url = dialog.querySelector(".url").textContent; 356 case "add-predefined-subscription":
342 addEnableSubscription(url, title); 357 var dialog = E("dialog-content-predefined");
343 document.body.removeAttribute("data-dialog"); 358 var title = dialog.querySelector("h3").textContent;
344 break; 359 var url = dialog.querySelector(".url").textContent;
345 case "cancel-domain-exception": 360 addEnableSubscription(url, title);
346 E("whitelisting-textbox").value = ""; 361 document.body.removeAttribute("data-dialog");
347 break; 362 break;
348 case "close-dialog": 363 case "cancel-custom-filters":
349 document.body.removeAttribute("data-dialog"); 364 E("custom-filters").classList.remove("mode-edit");
saroyanm 2015/07/16 12:32:27 Strange, classList according to MDN is supported s
Sebastian Noack 2015/07/16 12:36:50 As I already told you in a different comment, it's
saroyanm 2015/07/16 12:41:01 Ahh right your reference to caniuse went out of my
350 break; 365 break;
351 case "edit-custom-filters": 366 case "cancel-domain-exception":
352 editCustomFilters(); 367 E("whitelisting-textbox").value = "";
353 break; 368 break;
354 case "import-subscription": 369 case "close-dialog":
355 var url = E("blockingList-textbox").value; 370 document.body.removeAttribute("data-dialog");
356 addEnableSubscription(url); 371 break;
357 document.body.removeAttribute("data-dialog"); 372 case "edit-custom-filters":
358 break; 373 E("custom-filters").classList.add("mode-edit");
359 case "open-language-dialog": 374 editCustomFilters();
360 openDialog("language"); 375 break;
361 break; 376 case "import-subscription":
362 case "open-subscription-dialog": 377 var url = E("blockingList-textbox").value;
363 openDialog("customlist"); 378 addEnableSubscription(url);
364 break; 379 document.body.removeAttribute("data-dialog");
380 break;
381 case "open-dialog":
382 openDialog(element.getAttribute("data-dialog"));
383 break;
384 case "save-custom-filters":
385 ext.backgroundPage.sendMessage(
386 {
387 type: "filters.importRaw",
388 text: E("custom-filters-raw").value
389 });
390 E("custom-filters").classList.remove("mode-edit");
391 break;
392 case "switch-tab":
393 document.body.setAttribute("data-tab",
394 element.getAttribute("data-tab"));
395 break;
396 }
365 } 397 }
366 } 398 }
367 399
368 function onDOMLoaded() 400 function onDOMLoaded()
369 { 401 {
370 var recommendationTemplate = document.querySelector("#recommend-list-table t emplate"); 402 var recommendationTemplate = document.querySelector("#recommend-list-table t emplate");
371 var popularText = ext.i18n.getMessage("options_popular"); 403 var popularText = ext.i18n.getMessage("options_popular");
372 recommendationTemplate.content.querySelector(".popular").textContent = popul arText; 404 recommendationTemplate.content.querySelector(".popular").textContent = popul arText;
373 var languagesTemplate = document.querySelector("#all-lang-table template"); 405 var languagesTemplate = document.querySelector("#all-lang-table template");
374 var buttonText = ext.i18n.getMessage("options_button_add"); 406 var buttonText = ext.i18n.getMessage("options_button_add");
375 languagesTemplate.content.querySelector(".button-add span").textContent = bu ttonText; 407 languagesTemplate.content.querySelector(".button-add span").textContent = bu ttonText;
376 408
377 populateLists(); 409 populateLists();
378 410
379 var tabList = document.querySelectorAll("#main-navigation-tabs li");
380 for (var i = 0; i < tabList.length; i++)
381 {
382 tabList[i].addEventListener("click", function(e)
383 {
384 document.body.setAttribute("data-tab",
385 e.currentTarget.getAttribute("data-show"));
386 }, false);
387 }
388
389 function onFindLanguageKeyUp() 411 function onFindLanguageKeyUp()
390 { 412 {
391 var searchStyle = E("search-style"); 413 var searchStyle = E("search-style");
392 if (!this.value) 414 if (!this.value)
393 searchStyle.innerHTML = ""; 415 searchStyle.innerHTML = "";
394 else 416 else
395 searchStyle.innerHTML = "#all-lang-table li:not([data-search*=\"" + this .value.toLowerCase() + "\"]) { display: none; }"; 417 searchStyle.innerHTML = "#all-lang-table li:not([data-search*=\"" + this .value.toLowerCase() + "\"]) { display: none; }";
418 }
419
420 function isEnterPressed(e)
421 {
422 // e.keyCode has been deprecated so we attempt to use e.key
423 if ("key" in e)
424 return e.key == "Enter";
425 return e.keyCode == 13; // keyCode "13" corresponds to "Enter"
396 } 426 }
397 427
398 // Initialize navigation sidebar 428 // Initialize navigation sidebar
399 ext.backgroundPage.sendMessage( 429 ext.backgroundPage.sendMessage(
400 { 430 {
401 type: "app.get", 431 type: "app.get",
402 what: "addonVersion" 432 what: "addonVersion"
403 }, 433 },
404 function(addonVersion) 434 function(addonVersion)
405 { 435 {
406 E("abp-version").textContent = addonVersion; 436 E("abp-version").textContent = addonVersion;
407 }); 437 });
408 getDocLink("releases", function(link) 438 getDocLink("releases", function(link)
409 { 439 {
410 E("link-version").setAttribute("href", link); 440 E("link-version").setAttribute("href", link);
411 }); 441 });
412 442
413 getDocLink("contribute", function(link) 443 getDocLink("contribute", function(link)
414 { 444 {
415 document.querySelector("#tab-contribute a").setAttribute("href", link); 445 document.querySelector("#tab-contribute a").setAttribute("href", link);
416 }); 446 });
417 447
418 updateShareLink(); 448 updateShareLink();
419 449
420 // Initialize interactive UI elements 450 // Initialize interactive UI elements
421 document.body.addEventListener("click", onClick, false); 451 document.body.addEventListener("click", onClick, false);
saroyanm 2015/07/13 16:20:07 While we have click event on body element, maybe m
Thomas Greiner 2015/07/13 18:37:14 Done.
422 var placeholderValue = ext.i18n.getMessage("options_dialog_language_find"); 452 var placeholderValue = ext.i18n.getMessage("options_dialog_language_find");
423 E("find-language").setAttribute("placeholder", placeholderValue); 453 E("find-language").setAttribute("placeholder", placeholderValue);
424 E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false); 454 E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false);
425 E("whitelisting-textbox").addEventListener("keypress", function(e) 455 E("whitelisting-textbox").addEventListener("keypress", function(e)
426 { 456 {
427 // e.keyCode has been deprecated so we attempt to use e.key 457 if (isEnterPressed(e))
428 // keyCode "13" corresponds to "Enter"
429 if ((e.key && e.key == "Enter") || (!e.key && e.keyCode == 13))
430 addWhitelistedDomain(); 458 addWhitelistedDomain();
431 }, false); 459 }, false);
460
461 // Advanced tab
462 var filterTextbox = document.querySelector("#custom-filters-add input");
463 placeholderValue = ext.i18n.getMessage("options_customFilters_textbox_placeh older");
464 filterTextbox.setAttribute("placeholder", placeholderValue);
465 function addCustomFilters()
466 {
467 var filterText = filterTextbox.value;
468 ext.backgroundPage.sendMessage(
469 {
470 type: "filters.add",
471 text: filterText
472 });
473 filterTextbox.value = "";
474 }
475 E("custom-filters-add").addEventListener("submit", function(e)
476 {
477 e.preventDefault();
478 addCustomFilters();
479 }, false);
480 var customFilterEditButtons = document.querySelectorAll("#custom-filters-edi t-wrapper button");
432 } 481 }
433 482
434 function openDialog(name) 483 function openDialog(name)
435 { 484 {
436 document.body.setAttribute("data-dialog", name); 485 document.body.setAttribute("data-dialog", name);
437 } 486 }
438 487
439 function populateLists() 488 function populateLists()
440 { 489 {
441 subscriptionsMap = Object.create(null); 490 subscriptionsMap = Object.create(null);
(...skipping 59 matching lines...) Expand 10 before | Expand all | Expand 10 after
501 type: "filters.add", 550 type: "filters.add",
502 text: "@@||" + domain.value.toLowerCase() + "^$document" 551 text: "@@||" + domain.value.toLowerCase() + "^$document"
503 }); 552 });
504 } 553 }
505 554
506 domain.value = ""; 555 domain.value = "";
507 } 556 }
508 557
509 function editCustomFilters() 558 function editCustomFilters()
510 { 559 {
511 //TODO: NYI 560 var customFilterItems = collections.customFilters.items;
561 var filterTexts = [];
562 for (var i = 0; i < customFilterItems.length; i++)
563 filterTexts.push(customFilterItems[i].text);
564 E("custom-filters-raw").value = filterTexts.join("\n");
512 } 565 }
513 566
514 function getAcceptableAdsURL(callback) 567 function getAcceptableAdsURL(callback)
515 { 568 {
516 ext.backgroundPage.sendMessage( 569 ext.backgroundPage.sendMessage(
517 { 570 {
518 type: "prefs.get", 571 type: "prefs.get",
519 key: "subscriptions_exceptionsurl" 572 key: "subscriptions_exceptionsurl"
520 }, 573 },
521 function(value) 574 function(value)
(...skipping 20 matching lines...) Expand all
542 url: url 595 url: url
543 }; 596 };
544 if (title) 597 if (title)
545 message.title = title; 598 message.title = title;
546 if (homepage) 599 if (homepage)
547 message.homepage = homepage; 600 message.homepage = homepage;
548 601
549 ext.backgroundPage.sendMessage(message); 602 ext.backgroundPage.sendMessage(message);
550 } 603 }
551 604
552 function removeSubscription(url)
553 {
554 ext.backgroundPage.sendMessage(
555 {
556 type: "subscriptions.remove",
557 url: url
558 });
559 }
560
561 function removeFilter(filter)
562 {
563 ext.backgroundPage.sendMessage(
564 {
565 type: "filters.remove",
566 text: filter
567 });
568 }
569
570 function onFilterMessage(action, filter) 605 function onFilterMessage(action, filter)
571 { 606 {
572 switch (action) 607 switch (action)
573 { 608 {
574 case "added": 609 case "added":
575 updateFilter(filter); 610 updateFilter(filter);
576 updateShareLink(); 611 updateShareLink();
577 break; 612 break;
578 case "loaded": 613 case "loaded":
579 populateLists(); 614 populateLists();
580 break; 615 break;
581 case "removed": 616 case "removed":
582 var knownFilter = filtersMap[filter.text]; 617 var knownFilter = filtersMap[filter.text];
583 collections.whitelist.removeItem(knownFilter); 618 collections.whitelist.removeItem(knownFilter);
619 collections.customFilters.removeItem(knownFilter);
584 delete filtersMap[filter.text]; 620 delete filtersMap[filter.text];
585 updateShareLink(); 621 updateShareLink();
586 break; 622 break;
587 } 623 }
588 } 624 }
589 625
590 function onSubscriptionMessage(action, subscription) 626 function onSubscriptionMessage(action, subscription)
591 { 627 {
592 switch (action) 628 switch (action)
593 { 629 {
(...skipping 26 matching lines...) Expand all
620 } 656 }
621 updateShareLink(); 657 updateShareLink();
622 }); 658 });
623 break; 659 break;
624 case "title": 660 case "title":
625 // TODO: NYI 661 // TODO: NYI
626 break; 662 break;
627 } 663 }
628 } 664 }
629 665
630 function showAddSubscriptionDialog(subscription)
631 {
632 var dialog = E("dialog-content-addSubscription");
633 dialog.querySelector("h3").textContent = subscription.title || "";
634 dialog.querySelector(".url").textContent = subscription.url;
635 openDialog("addSubscription");
636 }
637
638 function updateShareLink() 666 function updateShareLink()
639 { 667 {
640 ext.backgroundPage.sendMessage( 668 ext.backgroundPage.sendMessage(
641 { 669 {
642 type: "filters.blocked", 670 type: "filters.blocked",
643 url: "https://platform.twitter.com/widgets/", 671 url: "https://platform.twitter.com/widgets/",
644 requestType: "SCRIPT", 672 requestType: "SCRIPT",
645 docDomain: "adblockplus.org", 673 docDomain: "adblockplus.org",
646 thirdParty: true 674 thirdParty: true
647 }, 675 },
(...skipping 17 matching lines...) Expand all
665 link: link 693 link: link
666 }, callback); 694 }, callback);
667 } 695 }
668 696
669 ext.onMessage.addListener(function(message) 697 ext.onMessage.addListener(function(message)
670 { 698 {
671 switch (message.type) 699 switch (message.type)
672 { 700 {
673 case "app.listen": 701 case "app.listen":
674 if (message.action == "addSubscription") 702 if (message.action == "addSubscription")
675 showAddSubscriptionDialog(message.args[0]); 703 {
704 var subscription = message.args[0];
705 var dialog = E("dialog-content-predefined");
706 dialog.querySelector("h3").textContent = subscription.title || "";
707 dialog.querySelector(".url").textContent = subscription.url;
708 openDialog("predefined");
709 }
710 else if (message.action == "error")
711 {
712 alert(message.args.join("\n"));
713 }
676 break; 714 break;
677 case "filters.listen": 715 case "filters.listen":
678 onFilterMessage(message.action, message.args[0]); 716 onFilterMessage(message.action, message.args[0]);
679 break; 717 break;
680 case "subscriptions.listen": 718 case "subscriptions.listen":
681 onSubscriptionMessage(message.action, message.args[0]); 719 onSubscriptionMessage(message.action, message.args[0]);
682 break; 720 break;
683 } 721 }
684 }); 722 });
685 723
686 ext.backgroundPage.sendMessage( 724 ext.backgroundPage.sendMessage(
687 { 725 {
688 type: "app.listen", 726 type: "app.listen",
689 filter: ["addSubscription"] 727 filter: ["addSubscription", "error"]
690 }); 728 });
691 ext.backgroundPage.sendMessage( 729 ext.backgroundPage.sendMessage(
692 { 730 {
693 type: "filters.listen", 731 type: "filters.listen",
694 filter: ["added", "loaded", "removed"] 732 filter: ["added", "loaded", "removed"]
695 }); 733 });
696 ext.backgroundPage.sendMessage( 734 ext.backgroundPage.sendMessage(
697 { 735 {
698 type: "subscriptions.listen", 736 type: "subscriptions.listen",
699 filter: ["added", "disabled", "homepage", "removed", "title"] 737 filter: ["added", "disabled", "homepage", "removed", "title"]
700 }); 738 });
701 739
702 window.addEventListener("DOMContentLoaded", onDOMLoaded, false); 740 window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
703 })(); 741 })();
LEFTRIGHT

Powered by Google App Engine
This is Rietveld