issue 1526 - Implement new options page design for Chrome/Opera/Safari

options.js

 /*
- * This file is part of Adblock Plus <http://adblockplus.org/>,
+ * 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
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 "use strict";
 
 (function()
 {
-  var optionSubscriptions = {};
-  
+  var subscriptionsMap = Object.create(null);
+  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.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.url || a.text).toLowerCase();
+      var bValue = (b.title || b.url || a.text).toLowerCase();
+      return aValue.localeCompare(bValue);
+    });
+
+    for (var j = 0; j < this.details.length; j++) 
+    {
+      var table = E(this.details[j].id);
+      var template = table.querySelector("template");
+      for (var i = 0; i < arguments.length; i++) 
+      {
+        var item = arguments[i];
+        var text = item.title || item.url || item.text;
+        var listItem = document.createElement("li");
+        listItem.appendChild(document.importNode(template.content, true));
+        listItem.dataset.access = item.url || item.text;
+        listItem.querySelector(".display").textContent = text;
+        if (text)
+          listItem.dataset.search = text.toLowerCase();
+
+        var control = listItem.querySelector(".control");
+        if (control)
+        {
+          control.addEventListener("click", this.details[j].onClick, false);
+          control.checked = item.disabled == false;
+        }
+
+        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 + "']");
+      element.parentElement.removeChild(element);
+    }
+  };
+
+  Collection.prototype.clearAll = function()
+  {
+    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.items.length = 0;
+  };
+
+  function onToggleSubscriptionClick(e)
+  {
+    e.preventDefault();
+    var subscriptionUrl = e.target.parentNode.dataset.access;
+    if (!e.target.checked)
+      removeSubscription(subscriptionUrl);
+    else
+      addEnableSubscription(subscriptionUrl);
+  }
+
+  function onAddLanguageSubscriptionClick(e)
+  {
+    e.preventDefault();
+    var url = this.parentNode.dataset.access;
+    addEnableSubscription(url);
+  }
+
+  function onRemoveFilterClick()
+  {
+    var filter = this.parentNode.dataset.access;
+    removeFilter(filter);
+  }
+
+  collections.popular = new Collection(
+  [
+    {
+      id: "recommend-list-table",
+      onClick: onToggleSubscriptionClick
+    }
+  ]);
+  collections.langs = new Collection(
+  [
+    {
+      id: "blocking-languages-table",
+      onClick: onToggleSubscriptionClick
+    },
+    {
+      id: "blocking-languages-dialog-table"
+    }
+  ]);
+  collections.allLangs = new Collection(
+  [
+    {
+      id: "all-lang-table", 
+      onClick: onAddLanguageSubscriptionClick
+    }
+  ]);
+  collections.acceptableAds = new Collection(
+  [
+    {
+      id: "acceptableads-table", 
+      onClick: onToggleSubscriptionClick
+    }
+  ]);
+  collections.custom = new Collection(
+  [
+    {
+      id: "custom-list-table", 
+      onClick: onToggleSubscriptionClick
+    }
+  ]);
+  collections.whitelist = new Collection(
+  [
+    {
+      id: "whitelisting-table", 
+      onClick: onRemoveFilterClick
+    }
+  ]);
+
+  function updateSubscription(subscription)
+  {
+    var subscriptionUrl = subscription.url;
+    var knownSubscription = subscriptionsMap[subscriptionUrl];
+    if (knownSubscription)
+      knownSubscription.disabled = subscription.disabled;
+    else
+    {
+      getAcceptableAdsURL(function(acceptableAdsUrl)
+      {
+        function onObjectChanged()
+        {
+          var access = (subscriptionUrl || subscription.text).replace(/'/g, "\\'");
+          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 (subscription.disabled == false)
+                {
+                  collections.allLangs.removeItem(subscription);
+                  collections.langs.addItems(subscription);
+                }
+                else
+                {
+                  collections.allLangs.addItems(subscription);
+                  collections.langs.removeItem(subscription);
+                }
+              }
+            }
+          }
+        }
+
+        if (!Object.observe)
+        {
+          // Currently only "disabled" property of subscription used for observation
+          // but with Advanced tab implementation we should also add more properties.
+          ["disabled"].forEach(function(property)
+          {
+            subscription["$" + property] = subscription[property];
+            Object.defineProperty(subscription, property,
+            {
+              get: function()
+              {
+                return this["$" + property];
+              },
+              set: function(value)
+              {
+                this["$" + property] = value;
+                onObjectChanged();
+              }
+            });
+          });
+        }
+        else
+        {
+          Object.observe(subscription, onObjectChanged);
+        }
+
+        var collection = null;
+        if (subscriptionUrl in recommendationsMap)
+        {
+          var recommendation = recommendationsMap[subscriptionUrl];
+          if (recommendation.isPopular)
+            collection = collections.popular;
+          else if (recommendation.isAdsType && subscription.disabled == false)
+            collection = collections.langs;
+          else
+            collection = collections.allLangs;
+        }
+        else if (subscriptionUrl == acceptableAdsUrl)
+          collection = collections.acceptableAds;
+        else
+          collection = collections.custom;
+
+        collection.addItems(subscription);
+        subscriptionsMap[subscriptionUrl] = subscription;
+      });
+    }
+  }
+
+  function updateFilter(filter)
+  {
+    var match = filter.text.match(/^@@\|\|([^\/:]+)\^\$document$/);
+    if (match && !filtersMap[filter.text])
+    {
+      filter.title = match[1];
+      collections.whitelist.addItems(filter);
+      filtersMap[filter.text] = filter
+    }
+    else
+    {
+      // TODO: add `filters[i].text` to list of custom filters
+    }
+  }
+
+  function loadRecommendations()
+  {
+    var request = new XMLHttpRequest();
+    request.open("GET", "subscriptions.xml", false);
+    request.addEventListener("load", function()
+    {
+      var list = document.getElementById("subscriptionSelector");
+      var docElem = request.responseXML.documentElement;
+      var elements = docElem.getElementsByTagName("subscription");
+      for (var i = 0; i < elements.length; i++)
+      {
+        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;
+        var prefix = element.getAttribute("prefixes");
+        if (prefix)
+        {
+          var prefix = element.getAttribute("prefixes").replace(/,/g, "_");
+          subscription.title = ext.i18n.getMessage("options_language_" + prefix);
+          recommendation.isAdsType = true;
+        }
+        else
+          subscription.title = element.getAttribute("specialization");
+        
+        if (element.getAttribute("popular"))
+          recommendation.isPopular = true;
+
+        recommendationsMap[subscription.url] = recommendation;
+        updateSubscription(subscription);
+      }
+    }, false);
+    request.send(null);
+  }
+
   function onDOMLoaded()
   {
-    initTabs();
+    var recommendationTemplate = document.querySelector("#recommend-list-table template");
+    var popularText = ext.i18n.getMessage("options_popular");
+    recommendationTemplate.content.querySelector(".popular").textContent = popularText;
+    var languagesTemplate = document.querySelector("#all-lang-table template");
+    var buttonText = ext.i18n.getMessage("options_button_add");
+    languagesTemplate.content.querySelector(".button-add span").textContent = buttonText;
+
     updateShareLink();
     populateLists();
 
-    E("add-blocking-list").addEventListener("click", Modal.open, false);
-    E("add-website-language").addEventListener("click", Modal.open, false);
-    E("modal-close").addEventListener("click", Modal.close, false);
-    E("whitelisting-add-icon").addEventListener("click", whitelistDomainBtnClick, false);
-    E("whitelisting-add-btn").addEventListener("click", whitelistDomainBtnClick, false);
-    E("whitelisting-enter-icon").addEventListener("click", whitelistDomainBtnClick, false);
-    E("whitelisting-textbox").addEventListener("keypress", function(e) {
-      if (e.keyCode == 13)
-        whitelistDomainBtnClick();
+    var tabList = document.querySelectorAll("#main-navigation-tabs li");
+    for (var i = 0; i < tabList.length; i++)
+    {
+      tabList[i].addEventListener("click", function(e)
+      {
+        document.body.dataset.tab = e.currentTarget.dataset.show;
+      }, false);
+    }
+
+    function onFindLanguageKeyUp()
+    {
+      var searchStyle = E("search-style");
+      if (!this.value)
+        searchStyle.innerHTML = "";
+      else
+        searchStyle.innerHTML = "#all-lang-table li:not([data-search*=\"" + this.value.toLowerCase() + "\"]) { display: none; }";
+    }
+
+    // Update version number in navigation sidebar
+    ext.backgroundPage.sendMessage(
+    {
+      method: "app.get",
+      what: "addonVersion"
+    },
+    function(addonVersion)
+    {
+      E("abp-version").textContent = addonVersion;
+    });
+    
+    var placeholderValue  = ext.i18n.getMessage("options_dialog_language_find");
+    E("find-language").setAttribute("placeholder", placeholderValue);
+    E("add-blocking-list").addEventListener("click", function()
+    {
+      openDialog("customlist");
     }, false);
-    E("whitelisting-cancel-btn").addEventListener("click", function(){
-      E("whitelisting-textbox").value = "";
+    E("add-website-language").addEventListener("click", function()
+    {
+      openDialog("language");
     }, false);
-    E("allow-whitelist-cb").addEventListener("click", toggleAcceptableAds, false);
-    E("import-blockingList-btn").addEventListener("click", importListBtnCLick, false);
-    E("edit-ownBlockingList-btn").addEventListener("click", editOwnRulsBtnClick, false);
-    E("find-language").addEventListener("keyup", searchLanguage, false);
-  }
-  
-  function initTabs()
-  {
-    var showContent = function(tab)
-    {
-      var tab = tab.querySelector(".tabs li.active");
-      if (tab.dataset.show)
-        E(tab.dataset.show).style.display = "block";
-    };
-    var optionList = document.querySelectorAll('.tabs li[data-show]');
-    for (var i = 0; i < optionList.length; ++i)
-    {
-      optionList[i].addEventListener("click", function(ev)
-      {
-        var tab = this.parentNode.querySelector(".active");
-        tab.classList.remove("active");
-        this.classList.add("active");
-        E(tab.dataset.show).style.display = "none";;
-        showContent(this.parentNode);
-      }, false);
-    }
-    showContent(E("main-navigation-tabs"));
-    showContent(E("blocking-list-tabs"));
-  }
-  
-  var Modal =
-  {
-    open: function (content)
-    {
-      var modal = E("modal");
-      var content = E(this && this.dataset ? this.dataset.show : content);
-      content.style.display = "block";
-      modal.style.visibility = "visible";
-      E("modal-background").style.display = "block";
-      if (content.dataset.title)
-        E("modal-title").innerHTML = ext.i18n.getMessage(content.dataset.title);
-      modal.style.marginTop = -(modal.clientHeight/2)+"px";
-    },
-    close: function ()
-    {
-      var contents = E("modal-content").childNodes;
-      for (var i = 0; i < contents.length; ++i)
-      {
-        if (contents[i].style)
-          contents[i].style.display = "none";
-      }
-      E("modal-background").style.display = "none";
-      E("modal").style.visibility = "hidden";
-    }
-  }
-  
+    E("dialog-close").addEventListener("click", function()
+    {
+      delete document.body.dataset.dialog;
+    }, false);
+    E("edit-ownBlockingList-button").addEventListener("click", editCustomFilters, false);
+    E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false);
+    E("whitelisting").addEventListener("click", function(e)
+    {
+      var id = e.target.id;
+      if (id == "whitelisting-add-icon" || id == "whitelisting-enter-icon")
+        addWhitelistedDomain();
+      else if (id == "whitelisting-cancel-button")
+        E("whitelisting-textbox").value = "";
+    }, false);
+    E("whitelisting-add-button").addEventListener("click", addWhitelistedDomain, false);
+    E("whitelisting-textbox").addEventListener("keypress", function(e)
+    {
+      // e.keyCode has been deprecated so we attempt to use e.key
+      // keyCode "13" corresponds to "Enter"
+      if ((e.key && e.key == "Enter") || (!e.key && e.keyCode == 13))
+        addWhitelistedDomain();
+    }, false);
+    E("import-blockingList-button").addEventListener("click", function()
+    {
+      var url = E("blockingList-textbox").value;
+      addEnableSubscription(url);
+      delete document.body.dataset.dialog;
+    }, false);
+  }
+
+  function openDialog(name)
+  {
+    document.body.dataset.dialog = name;
+  }
+
   function populateLists()
   {
-    ext.backgroundPage.sendMessage({
+    subscriptionsMap = Object.create(null);
+    filtersMap = Object.create(null);
+    recommendationsMap = Object.create(null);
+
+    // Empty collections and lists
+    for (var property in collections)
+      collections[property].clearAll();
+
+    ext.backgroundPage.sendMessage(
+    {
       type: "subscriptions.get",
       special: true
-    }, function(subscriptions)
-    {
+    },
+    function(subscriptions)
+    {
+      // Load filters
       for (var i = 0; i < subscriptions.length; i++)
       {
-        ext.backgroundPage.sendMessage({
+        ext.backgroundPage.sendMessage(
+        {
           type: "filters.get",
           subscriptionUrl: subscriptions[i].url
-        }, function(filters)
-        {
-          var whitelistArray = [];
+        }, 
+        function(filters)
+        {
           for (var i = 0; i < filters.length; i++)
-          {
-            var match = filters[i].text.match(/^@@\|\|([^\/:]+)\^\$document$/);
-            if (match[1])
-            {
-              whitelistArray.push(match[1]);
-            }
-            else
-            {
-              // TODO: add `filters[i].text` to list of custom filters
-            }
-          }
-          
-          if (whitelistArray.length > 0)
-          {
-            whitelistArray.sort();
-            for (var i = 0; i < whitelistArray.length; i++)
-            {
-              var domain = whitelistArray[i];
-              E("whitelisting-table").appendChild(createWhitelistElem(domain));
-            }
-          }
+            updateFilter(filters[i]);
         });
       }
     });
-    
-    loadRecommendations(function(recommends)
-    {
-      ext.backgroundPage.sendMessage({
+    loadRecommendations();
+    getAcceptableAdsURL(function(acceptableAdsUrl)
+    {
+      var subscription = Object.create(null);
+      subscription.url = acceptableAdsUrl;
+      subscription.disabled = true;
+      subscription.title = ext.i18n.getMessage("options_acceptableAds_description");
+      updateSubscription(subscription);
+
+      // Load user subscriptions
+      ext.backgroundPage.sendMessage(
+      {
         type: "subscriptions.get",
         downloadable: true
-      }, function(subscriptions)
-      {
-        getAcceptableAdsURL(function(exceptionUrl)
-        {
-          for (var i = 0; i < subscriptions.length; i++)
-          {
-            if (subscriptions[i].url == exceptionUrl)
-            {
-              E("allow-whitelist-cb").previousSibling.checked = !subscriptions[i].disabled;
-              continue;
-            }
- 
-            var subscription = recommends[subscriptions[i].url];
-            if (!subscription)
-              recommends[subscriptions[i].url] = subscriptions[i];
-            else
-            {
-              subscription.disabled = subscriptions[i].disabled;
-              if (subscription.type == "ads")
-                subscription.isAdded = true;
-            }
-          }
-          for (var key in recommends)
-            addOptionItem(recommends[key]);
-        });
+      }, 
+      function(subscriptions)
+      {
+        for (var i = 0; i < subscriptions.length; i++)
+          onSubscriptionMessage("added", subscriptions[i]);
       });
     });
   }
-  
-  function loadRecommendations(callback)
-  {
-    var recommendations = {};
-    var request = new XMLHttpRequest();
-    request.open("GET", "subscriptions.xml");
-    request.onload = function()
-    {
-      var list = document.getElementById("subscriptionSelector");
-      var elements = request.responseXML.documentElement.getElementsByTagName("subscription");
-      for (var i = 0; i < elements.length; i++)
-      {
-        var element = elements[i];
-        var subscription = {};
-        subscription.title = element.getAttribute("title");
-        subscription.url = element.getAttribute("url");
-        subscription.disabled = true;
-        var prefix = element.getAttribute("prefixes");
-        if (prefix)
-        {
-          subscription.prefixes = element.getAttribute("prefixes");
-          subscription.type = "ads";
-          subscription.display = ext.i18n.getMessage("options_language_"+subscription.prefixes.replace(/,/g, '_'));
-        }
-        else
-          subscription.display = element.getAttribute("specialization");
-        
-        var popular = element.getAttribute("popular");
-        if (popular)
-          subscription.popular = element.getAttribute("popular");
-        
-        recommendations[subscription.url] = subscription;
-      }
-      optionSubscriptions = recommendations;
-      callback(recommendations);
-    }
-    request.send();
-  }
-  
-  function searchLanguage()
-  {
-    var searchVal = this.value;
-    var items = E("all-lang-table").childNodes;
-    for (i = 0; i < items.length; ++i)
-    {
-      var item = items[i];
-      var language = item.getElementsByTagName("span")[1].innerHTML;
-      if (language.toLowerCase().indexOf(searchVal.toLowerCase()) > -1)
-        item.style.display = "block";
-      else
-        item.style.display = "none";
-    }
-  }
-  
-  function addOptionItem(subscription)
-  {
-    var display = subscription.display ? subscription.display : subscription.title;
-    var getPossition = function(elements, subscription)
-    {
-      var localArray = [];
-      for (var i = 0; i < elements.length; i++)
-      {
-        var elem = elements[i];
-        localArray.push(elem);
-      }
-      
-      localArray.push(subscription);
-      return localArray.sort(function(a, b) {
-        var aPopular = a.getElementsByClassName("popular").length > 0;
-        var bPopular = b.getElementsByClassName("popular").length > 0;
-        if(aPopular == bPopular)
-        {
-          var aValue = a.getElementsByClassName("display")[0].innerHTML.toLowerCase();
-          var bValue = b.getElementsByClassName("display")[0].innerHTML.toLowerCase();
-          if (aValue < bValue)
-            return -1;
-          if (aValue > bValue)
-            return 1;
-          return 0;
-        }
-        if (aPopular == "true")
-          return 1;
-        else
-          return -1;
-      }).indexOf(subscription);
-    };
-    
-    var checkBoxClick = function()
-    {
-      toggleSubscription(subscription);
-    };
-    
-    var appendToTable = function(table, elem)
-    {
-      var elements = table.getElementsByTagName("li");
-      if (elements.length == 0)
-        table.appendChild(elem);
-      else
-      {
-        var possition = getPossition(elements, elem);
-        table.insertBefore(elem, table.childNodes[possition]);
-      }
-    };
-    
-    if (subscription.type && subscription.type == "ads")
-    {
-      if (!subscription.isAdded)
-      {
-        var listElem = generateListElement(subscription, subscription.display, "add");
-        listElem.dataset.url = subscription.url;
-        listElem._subscription = subscription;
-        listElem.getElementsByTagName("button")[0].addEventListener("click", function()
-        {
-          addSubscription(this.dataset.url);
-        }.bind(listElem), false);
-        appendToTable(E("all-lang-table"), listElem);
-      }
-      else
-      {
-        var listElem = generateListElement(subscription, display, "checkbox");
-        listElem.dataset.url = subscription.url;
-        listElem._subscription = subscription;
-        listElem.getElementsByTagName("label")[0].addEventListener("click", checkBoxClick, false);
-        appendToTable(E("blocking-languages-table"), listElem);
-        var listElem = generateListElement(subscription, display);
-        listElem.dataset.url = subscription.url;
-        listElem._subscription = subscription;
-        appendToTable(E("blocking-languages-modal-table"), listElem);
-      }
-    }
-    else
-    {
-      var listElem = generateListElement(subscription, display, "checkbox");
-      listElem.dataset.url = subscription.url;
-      listElem._subscription = subscription;
-      listElem.getElementsByTagName("label")[0].addEventListener("click", checkBoxClick, false);
-      appendToTable(E("further-list-table"), listElem);
-    }
-  }
-  
-  function addLanguageSubscription(subscription)
-  {
-    var optionSubscription = getOptionSubscription(subscription.url);
-    var elems = getElementsByUrl(subscription.url);
-    for (var i = 0; i < elems.length; i++)
-      elems[i].parentNode.removeChild(elems[i]);
-    optionSubscription.isAdded = true;
-    optionSubscription.disabled = false;
-    addOptionItem(optionSubscription);
-  }
-  
-  function createWhitelistElem(domain)
-  {
-    var listElem = generateListElement(null, domain, "delete");
-    listElem.dataset.domain = domain;
-    listElem.getElementsByTagName("button")[0].addEventListener("click", removeWhitelistBtnClick.bind(listElem), false);
-    return listElem;
-  }
-  
-  function addFurtherList(subscription)
-  {
-    var optionSubscription = getOptionSubscription(subscription.url);
-    if (optionSubscription)
-    {
-      optionSubscription.disabled = false;
-      addOptionItem(optionSubscription);
-    }
-    else
-    {
-      optionSubscriptions[subscription.url] = subscription;
-      addOptionItem(subscription);
-    }
-  }
-  
-  function updateSubscriptionState(subscription, state)
-  {
-    var elem = getElementsByUrl(subscription.url);
-    if (elem.length > 0)
-    {
-      for (var i = 0; i < elem.length; i++)
-      {
-        var checkbox = elem[i].getElementsByTagName("input")[0];
-        if (checkbox)
-          checkbox.checked = state;
-      }
-    }
-    else
-    {
-      getAcceptableAdsURL(function(exceptionUrl)
-      {
-        if (subscription.url == exceptionUrl)
-          E("allow-whitelist-cb").previousSibling.checked = !state;
-        else
-          addFurtherList(subscription);
+
+  function addWhitelistedDomain()
+  {
+    var domain = E("whitelisting-textbox");
+    if (domain.value)
+    {
+      ext.backgroundPage.sendMessage(
+      {
+        type: "filters.add",
+        text: "@@||" + domain.value.toLowerCase() + "^$document"
       });
     }
-  }
-  
-  function getElementsByUrl(url)
-  {
-    return document.querySelectorAll("[data-url='"+url+"']");
-  }
-  
-  function generateListElement(subscription, text, type)
-  {
-    var list = document.createElement("li");
-    if (type == "checkbox")
-    {
-      var input = document.createElement("input");
-      input.setAttribute("type", "checkbox");
-      if (subscription.disabled == false)
-        input.checked = true;
-      list.appendChild(input);
-      var label = document.createElement("label");
-      list.appendChild(label);
-    }
-    else if (type == "delete")
-    {
-      var button = document.createElement("button");
-      button.setAttribute("class", "delete");
-      list.appendChild(button);
-    }
-    else if (type == "add")
-    {
-      var button = document.createElement("button");
-      button.setAttribute("class", "addbtn");
-      var span = document.createElement("span");
-      span.innerHTML = "+" + ext.i18n.getMessage("options_btn_add");
-      button.appendChild(span);
-      list.appendChild(button);
-    }
-    var span = document.createElement("span");
-    span.setAttribute("class", "display");
-    span.innerHTML = text;
-    list.appendChild(span);
-    
-    if (subscription && subscription.popular == "true")
-    {
-      var popular = document.createElement("span");
-      popular.setAttribute("class", "popular");
-      popular.innerHTML = "popular";
-      list.appendChild(popular);
-    }
-    
-    return list;
-  }
-  
-  function getOptionSubscription(url)
-  {
-    return optionSubscriptions[url];
-  }
-
-  function importListBtnCLick()
-  {
-    var url = E("blockingList-textbox").value;
-    addSubscription(url);
-    Modal.close();
-  }
-  
-  function whitelistDomainBtnClick()
-  {
-    var domain = E("whitelisting-textbox").value;
-    if (domain)
-      addWhitelistedDomain(domain);
-  }
-  
-  function removeWhitelistBtnClick()
-  {
-    removeWhitelistedDomain(this.dataset.domain);
-  }
-  
-  function editOwnRulsBtnClick()
-  {
-    
-  }
-  
-  function showAddSubscriptionDialog(action, subscription)
-  {
-    E("blockingList-textbox").value = subscription.url;
-    Modal.open("further-blocking-modal");
-  }
-  
+
+    domain.value = "";
+  }
+
+  function editCustomFilters()
+  {
+    //TODO: NYI
+  }
+
   function getAcceptableAdsURL(callback)
   {
-    ext.backgroundPage.sendMessage({
+    ext.backgroundPage.sendMessage(
+    {
       type: "prefs.get",
       key: "subscriptions_exceptionsurl"
-    }, function(value)
+    },
+    function(value)
     {
       getAcceptableAdsURL = function(callback)
       {
         callback(value);
       }
       getAcceptableAdsURL(callback);
     });
   }
 
-  function toggleSubscription(subscription)
-  {
-    ext.backgroundPage.sendMessage({
-      type: "subscriptions.toggle",
-      url: subscription.url,
-      title: subscription.title,
-      homepage: subscription.homepage
-    });
-  }
-
-  function toggleAcceptableAds()
-  {
-    var acceptableCheckbox = this.previousSibling;
-    getAcceptableAdsURL(function(url)
-    {
-      var isChecked = acceptableCheckbox.checked;
-      var title = "Allow non-intrusive advertising";
-      if (isChecked)
-        addSubscription(url, title);
-      else
-        removeSubscription(url);
-      acceptableCheckbox.checked = !isChecked;
-    });
-  }
-
-  function addSubscription(url, title, homepage)
-  {
+  function addEnableSubscription(url, title, homepage)
+  {
+    var messageType = null;
+    var knownSubscription = subscriptionsMap[url];
+    if (knownSubscription && knownSubscription.disabled == true)
+      messageType = "subscriptions.toggle"
+    else
+      messageType = "subscriptions.add"
+
     var message = {
-      type: "subscriptions.add",
+      type: messageType,
       url: url
     };
     if (title)
       message.title = title;
     if (homepage)
       message.homepage = homepage;
 
     ext.backgroundPage.sendMessage(message);
   }
 
   function removeSubscription(url)
   {
-    ext.backgroundPage.sendMessage({
+    ext.backgroundPage.sendMessage(
+    {
       type: "subscriptions.remove",
       url: url
     });
   }
 
-  function addWhitelistedDomain(domain)
-  {
-    ext.backgroundPage.sendMessage({
-      type: "filters.add",
-      text: "@@||" + domain.toLowerCase() + "^$document"
-    });
-  }
-
-  function removeWhitelistedDomain(domain)
-  {
-    ext.backgroundPage.sendMessage({
+  function removeFilter(filter)
+  {
+    ext.backgroundPage.sendMessage(
+    {
       type: "filters.remove",
-      text: "@@||" + domain.toLowerCase() + "^$document"
+      text: filter
     });
   }
 
   function onFilterMessage(action, filter)
   {
     switch (action)
     {
       case "added":
-        var match = filter.text.match(/^@@\|\|([^\/:]+)\^\$document$/);
-        if (match[1])
-        {
-          var whitelistTbl =  E("whitelisting-table");
-          var items = whitelistTbl.getElementsByClassName("display");
-          var domains = [];
-          for (var i = 0; i < items.length; i++)
-          {
-            domains.push(items[i].innerHTML);
-          }
-          var domain = match[1];
-          domains.push(domain);
-          domains.sort();
-          
-          whitelistTbl.insertBefore(createWhitelistElem(domain), whitelistTbl.childNodes[domains.indexOf(domain)]);
-          E("whitelisting-textbox").value = "";
-        }
-        else
-        {
-          // TODO: add `filters[i].text` to list of custom filters
-        }
+        updateFilter(filter);
+        updateShareLink();
         break;
       case "loaded":
         populateLists();
         break;
       case "removed":
-        var match = filter.text.match(/^@@\|\|([^\/:]+)\^\$document$/);
-        if (match[1])
-        {
-          var elem = document.querySelector("[data-domain='"+match[1]+"']");
-          elem.parentNode.removeChild(elem);
-        }
-        break;
-    }
-  }
-  
+        var knownFilter = filtersMap[filter.text];
+        collections.whitelist.removeItem(knownFilter);
+        delete filtersMap[filter.text];
+        updateShareLink();
+        break;
+    }
+  }
+
   function onSubscriptionMessage(action, subscription)
   {
     switch (action)
     {
       case "added":
-        var optionSubscription = getOptionSubscription(subscription.url);
-        if (optionSubscription)
-        {
-          var isAdsType = optionSubscription.type && optionSubscription.type == "ads";
-          if (isAdsType && !optionSubscription.isAdded)
-            addLanguageSubscription(subscription);
-          else
-            updateSubscriptionState(subscription, true);
-        }
-        else
-          addFurtherList(subscription);
-        break;
       case "disabled":
-        updateSubscriptionState(subscription, false);
+        updateSubscription(subscription);
+        updateShareLink();
         break;
       case "homepage":
         // TODO: NYI
         break;
       case "removed":
-        updateSubscriptionState(subscription, false);
+        getAcceptableAdsURL(function(acceptableAdsUrl)
+        {
+          if (subscription.url == acceptableAdsUrl)
+          {
+            subscription.disabled = true;
+            updateSubscription(subscription);
+          }
+          else
+          {
+            var knownSubscription = subscriptionsMap[subscription.url];
+            if (subscription.url in recommendationsMap)
+              knownSubscription.disabled = true;
+            else
+            {
+              collections.custom.removeItem(knownSubscription);
+              delete subscriptionsMap[subscription.url];
+            }
+          }
+          updateShareLink();
+        });
         break;
       case "title":
         // TODO: NYI
         break;
     }
   }
-  
+
+  function showAddSubscriptionDialog(subscription)
+  {
+    E("blockingList-textbox").value = subscription.url;
+    openDialog("customlist");
+  }
+
   function updateShareLink()
   {
-    ext.backgroundPage.sendMessage({
+    ext.backgroundPage.sendMessage(
+    {
       type: "filters.blocked",
       url: "https://platform.twitter.com/widgets/",
       requestType: "SCRIPT",
       docDomain: "adblockplus.org",
       thirdParty: true
-    }, function(blocked)
+    },
+    function(blocked)
     {
       // TODO: modify "share" link accordingly
     });
   }
-  
-  function getDocLink(link, callback)
-  {
-    ext.backgroundPage.sendMessage({
-      type: "app.get",
-      what: "doclink",
-      link: link
-    }, callback);
-  }
-  
+
   function E(id)
   {
     return document.getElementById(id);
   }
 
   ext.onMessage.addListener(function(message)
   {
     switch (message.type)
     {
       case "app.listen":
         if (message.action == "addSubscription")
-        {
-          message.args.unshift(message.action);
-          showAddSubscriptionDialog.apply(null, message.args);
-        }
+          showAddSubscriptionDialog(message.args[0]);
         break;
       case "filters.listen":
-        message.args.unshift(message.action);
-        onFilterMessage.apply(null, message.args);
+        onFilterMessage(message.action, message.args[0]);
         break;
       case "subscriptions.listen":
-        message.args.unshift(message.action);
-        onSubscriptionMessage.apply(null, message.args);
+        onSubscriptionMessage(message.action, message.args[0]);
         break;
     }
   });
-  
-  ext.backgroundPage.sendMessage({
+
+  ext.backgroundPage.sendMessage(
+  {
     type: "app.listen",
     filter: ["addSubscription"]
   });
-  ext.backgroundPage.sendMessage({
+  ext.backgroundPage.sendMessage(
+  {
     type: "filters.listen",
     filter: ["added", "loaded", "removed"]
   });
-  ext.backgroundPage.sendMessage({
+  ext.backgroundPage.sendMessage(
+  {
     type: "subscriptions.listen",
     filter: ["added", "disabled", "homepage", "removed", "title"]
   });
-  
+
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
 })();