Issue 5169 - Add whitelisted tab to the new options page

new-options.js

Index: new-options.js
===================================================================
--- a/new-options.js
+++ b/new-options.js
@@ -43,18 +43,25 @@
     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)
@@ -284,17 +291,17 @@
   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
     }
   ]);
@@ -311,13 +318,13 @@
   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([
@@ -502,11 +509,6 @@
         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;
@@ -514,11 +516,6 @@
           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);
@@ -767,10 +764,33 @@
     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
@@ -986,8 +1006,7 @@
     }
 
     domain.value = "";
-    document.querySelector("#whitelisting .controls")
-      .classList.remove("mode-edit");
+    E("whitelisting-add-button").disabled = true;
   }
 
   function editCustomFilters()