Issue 5169 - Add whitelisted tab to the new options page

new-options.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2017 eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 79 matching lines @@
     {
       // Make sure that Acceptable Ads is always last, since it cannot be
       // disabled, but only be removed. That way it's grouped together with
       // the "Own filter list" which cannot be disabled either at the bottom
       // of the filter lists in the Advanced tab.
       if (a.url == acceptableAdsUrl)
         return 1;
       if (b.url == acceptableAdsUrl)
         return -1;
 
-      // Make sure that newly added entries are always appear on top in

[Thomas Greiner, 2017/06/16 17:28:28]

Typo: Remove "are".

-      // descending chronological order
+      // Make sure that newly added entries always appear on top in descending
+      // chronological order
       let aTimestamp = a[timestampUI] || 0;
       let bTimestamp = b[timestampUI] || 0;
       if (aTimestamp || bTimestamp)
         return bTimestamp - aTimestamp;
 
       let aTitle = this._getItemTitle(a, 0).toLowerCase();
       let bTitle = this._getItemTitle(b, 0).toLowerCase();
       return aTitle.localeCompare(bTitle);
     });
   };
@@ skipping 641 matching lines @@
     });
     getDocLink("releases", (link) =>
     {
       E("link-version").setAttribute("href", link);
     });
 
     updateShareLink();
     updateTooltips();
 
     // Initialize interactive UI elements
     document.body.addEventListener("click", onClick, false);

[saroyanm, 2017/06/16 16:43:08]

I think I've learned something today:
Apparently hitting Enter on "whitelisting-textbox" element causes [implicit
submission](https://www.w3.org/TR/html5/single-page.html#implicit-submission).
I'm not sure how reliable is this(Theoretically it should be, as it's defined in
the specs), anyway this is the reason why I have removed:
`
E("whitelisting-textbox").addEventListener("keyup", (e) =>
{
  if (getKey(e) == "Enter")
  ....
}, false);
`
implementaiton.

[Thomas Greiner, 2017/06/16 17:28:28]

I was aware of an implicit submission causing the "submit" event to be
dispatched on the form element but it was news to me that it also causes a
"click" event to be dispatched on the submit button.

Anyway, since this is defined in the standard and since you verified that it
works, we can make use of it.

Personally, I usually prefer making behavior explicit rather than relying on
implicit mechanisms but it's up to you to choose which way you prefer.

     document.body.addEventListener("keyup", onKeyUp, false);
     let placeholderValue = getMessage("options_dialog_language_find");
     E("find-language").setAttribute("placeholder", placeholderValue);
     E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false);
     let exampleValue = getMessage("options_whitelist_placeholder_example", 
       ["www.example.com"]);
     E("whitelisting-textbox").setAttribute("placeholder", exampleValue);
     E("whitelisting-textbox").addEventListener("keyup", (e) =>
     {
       E("whitelisting-add-button").disabled = !e.target.value;

[saroyanm, 2017/06/16 16:43:08]

Not sure if this also needs to be moved into `onKeyUp()` function.

Not sure if Element specific behavior belongs to `onKeyUp()` function.

[Thomas Greiner, 2017/06/16 17:28:28]

I'd say either way is fine so let's keep it as is.

     }, false);
 
     // Advanced tab
     let tweaks = document.querySelectorAll("#tweaks li[data-pref]");
     tweaks = Array.prototype.map.call(tweaks, (checkbox) =>
     {
       return checkbox.getAttribute("data-pref");
     });
     for (let key of tweaks)
     {
@@ skipping 532 matching lines @@
   });
   ext.backgroundPage.sendMessage({
     type: "subscriptions.listen",
     filter: ["added", "disabled", "homepage", "lastDownload", "removed",
              "title", "downloadStatus", "downloading"]
   });
 
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
   window.addEventListener("hashchange", onHashChange, false);
 }