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 25 matching lines @@
     ["synchronize_checksum_mismatch",
      "options_filterList_lastDownload_checksumMismatch"]
   ]);
 
   function Collection(details)
   {
     this.details = details;
     this.items = [];
   }
 
-  Collection.prototype._setEmpty = function(table, text)
+  Collection.prototype._setEmpty = function(table, texts)
   {
-    let placeholder = table.querySelector(".empty-placeholder");
-    if (text && !placeholder)
+    let placeholders = table.querySelectorAll(".empty-placeholder");
+
+    if (texts && placeholders.length == 0)
     {
-      placeholder = document.createElement("li");
-      placeholder.className = "empty-placeholder";
-      placeholder.textContent = getMessage(text);
-      table.appendChild(placeholder);
+      for (let text of texts)
+      {
+        let placeholder = document.createElement("li");
+        placeholder.className = "empty-placeholder";
+        placeholder.textContent = getMessage(text);
+        table.appendChild(placeholder);
+      }
     }
-    else if (placeholder)
-      table.removeChild(placeholder);
+    else if (placeholders.length > 0)
+    {
+      for (let placeholder of placeholders)
+        table.removeChild(placeholder);
+    }
   };
 
   Collection.prototype._createElementQuery = function(item)
   {
     let access = (item.url || item.text).replace(/'/g, "\\'");
     return function(container)
     {
       return container.querySelector("[data-access='" + access + "']");
     };
   };
@@ skipping 121 matching lines @@
       let title = this._getItemTitle(item, i);
       element.querySelector(".display").textContent = title;
       element.setAttribute("aria-label", title);
       if (this.details[i].searchable)
         element.setAttribute("data-search", title.toLowerCase());
       let control = element.querySelector(".control[role='checkbox']");
       if (control)
       {
         control.setAttribute("aria-checked", item.disabled == false);
         if (item.url == acceptableAdsUrl && this == collections.filterLists)
           control.setAttribute("disabled", true);

[saroyanm, 2017/05/18 16:21:52]

Use disabled property for assigning disabled in current review.

[saroyanm, 2017/05/22 09:38:24]

Done.

       }
 
       let dateElement = element.querySelector(".date");
       let timeElement = element.querySelector(".time");
       if (dateElement && timeElement)
       {
         let message = element.querySelector(".message");
         if (item.isDownloading)
         {
           let text = getMessage("options_filterList_lastDownload_inProgress");
@@ skipping 67 matching lines @@
   }
 
   collections.popular = new Collection([
     {
       id: "recommend-list-table"
     }
   ]);
   collections.langs = new Collection([
     {
       id: "blocking-languages-table",
-      emptyText: "options_dialog_language_added_empty"
+      emptyText: ["options_dialog_language_added_empty"]
     },
     {
       id: "blocking-languages-dialog-table",
-      emptyText: "options_dialog_language_added_empty"
+      emptyText: ["options_dialog_language_added_empty"]
     }
   ]);
   collections.allLangs = new Collection([
     {
       id: "all-lang-table",
-      emptyText: "options_dialog_language_other_empty",
+      emptyText: ["options_dialog_language_other_empty"],
       searchable: true
     }
   ]);
   collections.acceptableAds = new Collection([
     {
       id: "acceptableads-table"
     }
   ]);
   collections.custom = new Collection([
     {
       id: "custom-list-table"
     }
   ]);
   collections.whitelist = new Collection([
     {
       id: "whitelisting-table",
-      emptyText: "options_whitelisted_empty"
+      emptyText: ["options_whitelist_empty_1", "options_whitelist_empty_2"]
     }
   ]);
   collections.customFilters = new Collection([
     {
       id: "custom-filters-table",
-      emptyText: "options_customFilters_empty"
+      emptyText: ["options_customFilters_empty"]
     }
   ]);
   collections.filterLists = new Collection([
     {
       id: "all-filter-lists-table",
       useOriginalTitle: true
     }
   ]);
 
   function toggleShowLanguage(subscription)
@@ skipping 164 matching lines @@
           let dialog = E("dialog-content-predefined");
           let title = dialog.querySelector("h3").textContent;
           let url = dialog.querySelector(".url").textContent;
           addEnableSubscription(url, title);
           closeDialog();
           break;
         }
         case "cancel-custom-filters":
           E("custom-filters").classList.remove("mode-edit");
           break;
-        case "cancel-domain-exception":
-          E("whitelisting-textbox").value = "";
-          document.querySelector("#whitelisting .controls").classList
-            .remove("mode-edit");
-          break;
         case "close-dialog":
           closeDialog();
           break;
         case "edit-custom-filters":
           E("custom-filters").classList.add("mode-edit");
           editCustomFilters();
           break;
-        case "edit-domain-exception":
-          document.querySelector("#whitelisting .controls").classList
-            .add("mode-edit");
-          E("whitelisting-textbox").focus();
-          break;
         case "import-subscription": {
           let url = E("blockingList-textbox").value;
           addEnableSubscription(url);
           closeDialog();
           break;
         }
         case "open-dialog": {
           let dialog = findParentData(element, "dialog", false);
           openDialog(dialog);
           break;
@@ skipping 228 matching lines @@
 
     updateShareLink();
     updateTooltips();
 
     // Initialize interactive UI elements
     document.body.addEventListener("click", onClick, false);
     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);
-    E("whitelisting-textbox").addEventListener("keypress", (e) =>
+    let exampleValue = getMessage("options_whitelist_placeholder_example");
+    E("whitelisting-textbox").setAttribute("placeholder", exampleValue);
+    E("whitelisting-textbox").addEventListener("keyup", (e) =>
     {
+      let addWhitelistButton = E("whitelisting-add-button");
+      addWhitelistButton.disabled = false;
       if (getKey(e) == "Enter")
-        addWhitelistedDomain();
+      {
+        if (!addWhitelistButton.disabled)
+          addWhitelistedDomain();
+      }
+      else
+      {
+        for (let whitelistItem of collections.whitelist.items)
+        {
+          if (!e.target.value)
+          {
+            addWhitelistButton.disabled = true;
+          }
+          if (whitelistItem.title == e.target.value)
+          {
+            addWhitelistButton.disabled = true;
+            E("whitelisting-validation").textContent = 

[saroyanm, 2017/05/16 20:20:07]

I keep this solution here for now, adding the items on top of the list is not
trivial, until we decide not to sort whitelist list, or implement another list,
for example for recent added domains, which is still available in specification
images (I assume outdated), but not defined in the specification. 

[saroyanm, 2017/05/18 16:21:52]

Every new item needs to be added on top of the "collection table", for that
reason we might need to introduce a new parameter(check for naming conflicts),
but the behavior should be only for current session, fallback to alphabetical
sorting after page refresh.

(Something along the lines "timestamp, counter" might have UI prefix.)

Suggestion: Use symbol to generate the mentioned property.

[saroyanm, 2017/05/22 09:38:24]

Done.

+              getMessage("options_whitelist_duplicate");
+          }
+        }
+      }
     }, 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 195 matching lines @@
     let domain = E("whitelisting-textbox");
     if (domain.value)
     {
       sendMessageHandleErrors({
         type: "filters.add",
         text: "@@||" + domain.value.toLowerCase() + "^$document"
       });
     }
 
     domain.value = "";
-    document.querySelector("#whitelisting .controls")
-      .classList.remove("mode-edit");
+    E("whitelisting-add-button").disabled = true;
   }
 
   function editCustomFilters()
   {
     let filterTexts = [];
     for (let customFilterItem of collections.customFilters.items)
       filterTexts.push(customFilterItem.text);
     E("custom-filters-raw").value = filterTexts.join("\n");
   }
 
@@ skipping 296 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);
 }