Issue 2747 - Added empty state for tables in options page

options.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2015 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 12 matching lines @@
   var recommendationsMap = Object.create(null);
   var filtersMap = Object.create(null);
   var collections = Object.create(null);
 
   function Collection(details)
   {
     this.details = details;
     this.items = [];
   }
 
+  Collection.prototype._setEmpty = function(table, text)
+  {
+    var placeholder = table.querySelector(".empty-placeholder");
+    if (text && !placeholder)
+    {
+      placeholder = document.createElement("li");
+      placeholder.className = "empty-placeholder";
+      placeholder.textContent = ext.i18n.getMessage(text);
+      table.appendChild(placeholder);
+    }
+    else if (placeholder)
+      table.removeChild(placeholder);
+  }
+
   Collection.prototype.addItems = function() 
   {
     var length = Array.prototype.push.apply(this.items, arguments);
     if (length == 0)
       return;
 
     this.items.sort(function(a, b)
     {
       var aValue = (a.title || a.text || a.url).toLowerCase();
       var bValue = (b.title || b.text || b.url).toLowerCase();
@@ skipping 15 matching lines @@
         if (text)
           listItem.setAttribute("data-search", text.toLowerCase());
 
         var control = listItem.querySelector(".control");
         if (control)
         {
           control.addEventListener("click", this.details[j].onClick, false);
           control.checked = item.disabled == false;
         }
 
+        this._setEmpty(table, null);

[saroyanm, 2015/11/30 11:24:21]

Doesn't it make more sense to call the _setEmpty method during object
observation ?

[Thomas Greiner, 2015/12/11 16:49:35]

I see your line of reasoning but I'd argue that it's the Collection's job to
keep the table's state consistent whenever items are added or removed while it
is the observer's job to try to keep other parts of the UI in sync.

Basically, we should do as much as possible within the Collection. Anything
that's table-specific (e.g. whether to use an "x" or a checkbox to add/remove
items from the collection or labelling certain items as "popular") should be
handled outside.

         if (table.hasChildNodes())
           table.insertBefore(listItem, table.childNodes[this.items.indexOf(item)]);
         else
           table.appendChild(listItem);
       }
     }
     return length;
   };
 
   Collection.prototype.removeItem = function(item)
   {
     var index = this.items.indexOf(item);
     if (index == -1)
       return;
 
     this.items.splice(index, 1);
-    var access = (item.url || item.text).replace(/'/g, "\\'");
     for (var i = 0; i < this.details.length; i++)
     {
       var table = E(this.details[i].id);
-      var element = table.querySelector("[data-access='" + access + "']");
+      var element = table.childNodes[index];
       element.parentElement.removeChild(element);
+      if (this.items.length == 0)
+        this._setEmpty(table, this.details[i].emptyText);
     }
   };
 
   Collection.prototype.clearAll = function()
   {
+    this.items = [];
     for (var i = 0; i < this.details.length; i++)
     {
       var table = E(this.details[i].id);
       var template = table.querySelector("template");
       table.innerHTML = "";
       table.appendChild(template);
+      this._setEmpty(table, this.details[i].emptyText);
     }
-    this.items.length = 0;
   };
 
   function onToggleSubscriptionClick(e)
   {
     e.preventDefault();
     var subscriptionUrl = e.target.parentNode.getAttribute("data-access");
     if (!e.target.checked)
     {
-       ext.backgroundPage.sendMessage(
-        {
-          type: "subscriptions.remove",
-          url: subscriptionUrl
-        });
+      ext.backgroundPage.sendMessage({
+        type: "subscriptions.remove",
+        url: subscriptionUrl
+      });
     }
     else
       addEnableSubscription(subscriptionUrl);
   }
 
   function onAddLanguageSubscriptionClick(e)
   {
     e.preventDefault();
     var url = this.parentNode.getAttribute("data-access");
     addEnableSubscription(url);
@@ skipping 13 matching lines @@
   [
     {
       id: "recommend-list-table",
       onClick: onToggleSubscriptionClick
     }
   ]);
   collections.langs = new Collection(
   [
     {
       id: "blocking-languages-table",
+      emptyText: "options_dialog_language_added_empty",
       onClick: onToggleSubscriptionClick
     },
     {
-      id: "blocking-languages-dialog-table"
+      id: "blocking-languages-dialog-table",
+      emptyText: "options_dialog_language_added_empty"
     }
   ]);
   collections.allLangs = new Collection(
   [
     {
-      id: "all-lang-table", 
+      id: "all-lang-table",
+      emptyText: "options_dialog_language_other_empty",
       onClick: onAddLanguageSubscriptionClick
     }
   ]);
   collections.acceptableAds = new Collection(
   [
     {
-      id: "acceptableads-table", 
+      id: "acceptableads-table",
       onClick: onToggleSubscriptionClick
     }
   ]);
   collections.custom = new Collection(
   [
     {
-      id: "custom-list-table", 
+      id: "custom-list-table",
       onClick: onToggleSubscriptionClick
     }
   ]);
   collections.whitelist = new Collection(
   [
     {
-      id: "whitelisting-table", 
+      id: "whitelisting-table",
+      emptyText: "options_whitelisted_empty",
       onClick: onRemoveFilterClick
     }
   ]);
   collections.customFilters = new Collection(
   [
     {
-      id: "custom-filters-table"
+      id: "custom-filters-table",
+      emptyText: "options_customFilters_empty"
     }
   ]);
 
   function updateSubscription(subscription)
   {
     var subscriptionUrl = subscription.url;
     var knownSubscription = subscriptionsMap[subscriptionUrl];
     if (knownSubscription)
       knownSubscription.disabled = subscription.disabled;
     else
@@ skipping 161 matching lines @@
           var title = dialog.querySelector("h3").textContent;
           var 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":
           var url = E("blockingList-textbox").value;
           addEnableSubscription(url);
           closeDialog();
           break;
         case "open-dialog":
           openDialog(element.getAttribute("data-dialog"));
           break;
         case "save-custom-filters":
           ext.backgroundPage.sendMessage(
@@ skipping 210 matching lines @@
     if (domain.value)
     {
       ext.backgroundPage.sendMessage(
       {
         type: "filters.add",
         text: "@@||" + domain.value.toLowerCase() + "^$document"
       });
     }
 
     domain.value = "";
+    document.querySelector("#whitelisting .controls").classList.remove("mode-edit");
   }
 
   function editCustomFilters()
   {
     var customFilterItems = collections.customFilters.items;
     var filterTexts = [];
     for (var i = 0; i < customFilterItems.length; i++)
       filterTexts.push(customFilterItems[i].text);
     E("custom-filters-raw").value = filterTexts.join("\n");
   }
@@ skipping 176 matching lines @@
     filter: ["added", "loaded", "removed"]
   });
   ext.backgroundPage.sendMessage(
   {
     type: "subscriptions.listen",
     filter: ["added", "disabled", "homepage", "removed", "title"]
   });
 
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
 })();