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 61 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)
@@ skipping 131 matching lines @@
           var elements = document.querySelectorAll("[data-access='" + access + "']");
           for (var i = 0; i < elements.length; i++)
           {
             var element = elements[i];
             var control = element.querySelector(".control");
             if (control.localName == "input")
               control.checked = subscription.disabled == false;
             if (subscriptionUrl in recommendationsMap)
             {
               var recommendation = recommendationsMap[subscriptionUrl];
-              if (recommendation.isAdsType)
+              if (recommendation.type == "ads")
               {
                 if (subscription.disabled == false)
                 {
                   collections.allLangs.removeItem(subscription);
                   collections.langs.addItems(subscription);
                 }
                 else
                 {
                   collections.allLangs.addItems(subscription);
                   collections.langs.removeItem(subscription);
@@ skipping 26 matching lines @@
         }
         else
         {
           Object.observe(subscription, onObjectChanged);
         }
 
         var collection = null;
         if (subscriptionUrl in recommendationsMap)
         {
           var recommendation = recommendationsMap[subscriptionUrl];
-          if (recommendation.isPopular)
+          if (recommendation.type != "ads")
             collection = collections.popular;
-          else if (recommendation.isAdsType && subscription.disabled == false)
+          else if (subscription.disabled == false)
             collection = collections.langs;
           else
             collection = collections.allLangs;
         }
         else if (subscriptionUrl == acceptableAdsUrl)
           collection = collections.acceptableAds;
         else
           collection = collections.custom;
 
         collection.addItems(subscription);
@@ skipping 29 matching lines @@
       {
         var element = elements[i];
         var subscription = Object.create(null);
         subscription.title = element.getAttribute("title");
         subscription.url = element.getAttribute("url");
         subscription.disabled = null;
         subscription.downloadStatus = null;
         subscription.homepage = null;
         subscription.lastSuccess = null;
         var recommendation = Object.create(null);
-        recommendation.isAdsType = false;
-        recommendation.isPopular = false;
+        recommendation.type = element.getAttribute("type");
         var prefix = element.getAttribute("prefixes");
         if (prefix)
         {
-          var prefix = element.getAttribute("prefixes").replace(/,/g, "_");
+          prefix = prefix.replace(/\W/g, "_");
           subscription.title = ext.i18n.getMessage("options_language_" + prefix);
-          recommendation.isAdsType = true;
         }
         else
         {
-          subscription.title = element.getAttribute("specialization");
-          recommendation.isPopular = true;
+          var type = recommendation.type.replace(/\W/g, "_");
+          subscription.title = ext.i18n.getMessage("common_feature_" + type + "_title");
         }
 
         recommendationsMap[subscription.url] = recommendation;
         updateSubscription(subscription);
       }
     }, false);
     request.send(null);
   }
 
   function onClick(e)
@@ skipping 463 matching lines @@
     filter: ["added", "loaded", "removed"]
   });
   ext.backgroundPage.sendMessage(
   {
     type: "subscriptions.listen",
     filter: ["added", "disabled", "homepage", "removed", "title"]
   });
 
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
 })();