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

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
  * 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 acceptableAdsUrl = null;
-  
-  var optionObj = 
-  {
-    collections: 
-    {
-      push: function()
-      {
-        var length = Array.prototype.push.apply(this, arguments);
-        this.sort(function(a, b)
-        {
-          var aValue = (a.title || a.url || a.text).toLowerCase();
-          var bValue = (b.title || b.url || a.text).toLowerCase();
-          if (aValue < bValue)
-            return -1;
-          if (aValue > bValue)
-            return 1;
-          return 0;
-        });
-        for (var i = 0; i < arguments.length; i++)
-        {
-          for (var j = 0; j < this.table.length; j++)
+  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 object = arguments[i];
-            var text = object.title || object.text;
-            var access = object.url || object.text;
-            var index = this.indexOf(object);
-            var table = E(this.table[j].id);
-            var template = this.table[j].template;
-            var listener = this.table[j].listener;
-            
-            var listItem = document.createElement("li");
-            listItem.innerHTML = template;
-            listItem.dataset.access = access;
-            listItem.querySelector(".display").textContent = text;
-            if (object.isAdsType)
-              listItem.dataset.search = text.toLowerCase();
-
-            var control = listItem.querySelector(".control");
-            if (control)
+            var element = elements[i];
+            var control = element.querySelector(".control");
+            if (control.localName == "input")
+              control.checked = subscription.disabled == false;
+            if (subscriptionUrl in recommendationsMap)
             {
-              control.addEventListener("click", listener, false);
-              control.checked = !object.disabled;
-            }
-            if (table.hasChildNodes)
-              table.insertBefore(listItem, table.childNodes[index]);
-            else
-              table.appendChild(listItem);
-          }
-        }
-        return length;
-      },
-      remove: function(obj)
-      {
-        var index = this.indexOf(obj);
-        this.splice(index, 1);
-        var access = obj.url || obj.text;
-        for (var i=0; i < this.table.length; i++)
-        {
-          var table = E(this.table[i].id);
-          var element = table.querySelector("[data-access='"+access+"']");
-          element.parentElement.removeChild(element);
-        }
-      }
-    },
-    subscriptions:
-    {
-      update: function(subscription)
-      {
-        var optionSubscription = this[subscription.url];
-        if (optionSubscription)
-          optionSubscription.disabled = subscription.disabled;
-        else
-        {
-          optionObj.observe(subscription, ["disabled"]);
-          var collArray = null;
-          if (subscription.isPopular)
-            collArray = collections.popular;
-          else if (subscription.isAdsType && subscription.disabled)
-            collArray = collections.allLangs;
-          else if (subscription.isAdsType && !subscription.disabled)
-            collArray = collections.langs;
-          else if (subscription.url == acceptableAdsUrl)
-            collArray = collections.acceptableAds;
-          else
-            collArray = collections.custom;
-
-          collArray.push = collections.push;
-          collArray.push(subscription);
-          this[subscription.url] = subscription;
-        }
-      },
-      remove: function(subscription)
-      {
-        var optionSubscription = this[subscription.url];
-          
-        if (optionSubscription.isAdsType)
-        {
-          collections.langs.remove(optionSubscription);
-          collections.allLangs.push(optionSubscription);
-        }
-        else if(optionSubscription.isPopular)
-        {
-          optionSubscription.disabled = true;
-        }
-        else
-        {
-          collections.custom.remove(optionSubscription);
-        }
-      },
-      chboxListener: function(e)
-      {
-        e.preventDefault();
-        var isChecked = e.target.checked;
-        var url = e.target.parentNode.dataset.access;
-        if (!isChecked)
-          sendMessage.removeSubscription(url);
-        else
-          sendMessage.addSubscription(url);
-      },
-      toggleAcceptableAds: function(e)
-      {
-        e.preventDefault();
-        var target = e.target;
-        var isChecked = target.checked;
-        var url = e.target.parentNode.dataset.access;
-        
-        if (isChecked)
-          sendMessage.addSubscription(url);
-        else
-          sendMessage.removeSubscription(url);
-      },
-      addBtnListener: function(e)
-      {
-        e.preventDefault();
-        var url = this.parentNode.dataset.access;
-        sendMessage.addSubscription(url);
-      }
-    },
-    filters:
-    {
-      update: function(filter)
-      {
-        var optionFilter = this[filter.text];
-        var match = filter.text.match(/^@@\|\|([^\/:]+)\^\$document$/);
-        if (match && !optionFilter)
-        {
-          filter.title = match[1];
-          collections.whitelist.push(filter);
-          this[filter.text] = filter;
-        }
-        else
-        {
-          // TODO: add `filters[i].text` to list of custom filters
-        }
-      },
-      remove: function(filter)
-      {
-        collections.whitelist.remove(filter);
-      },
-      deleteBtnClick: function()
-      {
-        var filter = this.parentNode.dataset.access;
-        sendMessage.removeFilter(filter);
-      }
-    },
-    observe: function(obj, props)
-    {
-      props.forEach(function(property)
-      {
-        obj["$"+property] = obj[property];
-        Object.defineProperty(obj, property,
-        {
-          get: function()
-          {
-            return this["$"+property];
-          },
-          set: function(value)
-          {
-            this["$"+property] = value;
-            var access = obj.url || obj.text;
-            var elements = document.querySelectorAll("[data-access='" + access + "']");
-            for (var i=0; i < elements.length; i++)
-            {
-              var element = elements[i];
-              var control = element.getElementsByClassName("control")[0];
-              if (control.localName == "input")
-                control.checked = !obj.disabled;
-              if (obj.isAdsType)
+              var recommendation = recommendationsMap[subscriptionUrl];
+              if (recommendation.isAdsType)
               {
-                collections.allLangs.remove(obj);
-                collections.langs.push(obj);
+                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 createCollArray(tables)
-  {
-    var array = [];
-    array.push = optionObj.collections.push;
-    array.remove = optionObj.collections.remove;
-    array.table = tables;
-    return array;
-  }
-  
-  var collections = optionObj.collections;
-  collections.popular = createCollArray([
-    {
-      id: "recommend-list-table", 
-      template: "<input type='checkbox' class='control' /><span class='display'></span><span class='popular'>popular</span>",
-      listener: optionObj.subscriptions.chboxListener
-    }
-  ]);
-  collections.langs = createCollArray([
-    {
-      id: "blocking-languages-table", 
-      template: "<input type='checkbox' class='control' /><span class='display'></span>",
-      listener: optionObj.subscriptions.chboxListener
-    },
-    {
-      id: "blocking-languages-modal-table", 
-      template: "<span class='display'></span>"
-    }
-  ]);
-  collections.allLangs = createCollArray([
-    {
-      id: "all-lang-table", 
-      template: "<button class='button-add control'><span>+add</span></button><span class='display'></span>",
-      listener: optionObj.subscriptions.addBtnListener
-    }
-  ]);
-  collections.acceptableAds = createCollArray([
-    {
-      id: "acceptableads-table", 
-      template: "<input type='checkbox' class='control' /><span class='display'></span>",
-      listener: optionObj.subscriptions.toggleAcceptableAds
-    }
-  ]);
-  collections.custom = createCollArray([
-    {
-      id: "custom-list-table", 
-      template: "<input type='checkbox' class='control' /><span class='display'></span>",
-      listener: optionObj.subscriptions.chboxListener
-    }
-  ]);
-  collections.whitelist = createCollArray([
-    {
-      id: "whitelisting-table", 
-      template: "<button class='delete control'></button><span class='display'></span>",
-      listener: optionObj.filters.deleteBtnClick
-    }
-  ]);
-  
+  }
+
+  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.onload = function()
+    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 = true;
+        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)
         {
-          subscription.isAdsType = true;
           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"))
-          subscription.isPopular = true;
-        optionObj.subscriptions.update(subscription);
+          recommendation.isPopular = true;
+
+        recommendationsMap[subscription.url] = recommendation;
+        updateSubscription(subscription);
       }
-    };
+    }, false);
     request.send(null);
   }
-  
+
   function onDOMLoaded()
   {
+    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();
-    
+
     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);
     }
-    
-    var searchLanguage = function()
-    {
-      var searchStyle = E('search_style');

[Thomas Greiner, 2015/02/20 14:02:07]

Review comments should not only be addressed for one specific part of the code
but if you know that an issue occurs in other places as well, please also fix
them there. Otherwise we'd end up with many duplicate comments about the same
issue.

In this case you have addressed the comment about replacing `"` instead of `'`
from
http://codereview.adblockplus.org/6088024630755328/diff2/5742506566221824:621...
as expected but didn't address the same issue elsewhere in the code, like in
this line.

[saroyanm, 2015/02/26 12:18:33]

Done.

+
+    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(

[Thomas Greiner, 2015/02/20 14:02:07]

It's still inconsistent. As I noted in a previous comment of mine, the "{" is in
its own line whereas the "}" is not. Since we don't have one style we always go
with, feel free to choose one of the following:

fn({foo: "bar"}, function(foo)
{
  return null;
});

or

fn({
 foo: "bar"
}, function(foo)
{
  return null;
});

or (less common in our code base)

fn(
  {
    foo: "bar"
  },
  function(foo)
  {
    return null;
  }
);

[saroyanm, 2015/02/26 12:18:33]

Used the one from your suggestion:
https://hg.adblockplus.org/adblockpluschrome/file/72785e0948d0/block.js#l42 

     {
       method: "app.get",
       what: "addonVersion"
-    }, function(addonVersion)
+    },
+    function(addonVersion)
     {
       E("abp-version").textContent = addonVersion;
     });
     
-    var whitelistDomainBtnClick = function()
-    {
-      var domain = E("whitelisting-textbox");
-      if (domain.value)
-        SendMessage.addWhitelistedDomain(domain.value);
-      domain.value = "";
-    };
-    
-    var placeholderValue  = ext.i18n.getMessage("options_modal_language_find");
+    var placeholderValue  = ext.i18n.getMessage("options_dialog_language_find");
     E("find-language").setAttribute("placeholder", placeholderValue);
-    setLinks("block-element-explanation", "#");
-    
     E("add-blocking-list").addEventListener("click", function()
     {
-      openModal("customlist");
+      openDialog("customlist");
     }, false);
     E("add-website-language").addEventListener("click", function()
     {
-      openModal("language");
+      openDialog("language");
     }, false);
-    E("modal-close").addEventListener("click", function()
-    {
-      delete document.body.dataset.modal;
+    E("dialog-close").addEventListener("click", function()
+    {
+      delete document.body.dataset.dialog;
     }, false);
-    E("edit-ownBlockingList-btn").addEventListener("click", editOwnRulsBtnClick, false);
-    E("find-language").addEventListener("keyup", searchLanguage, 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("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)
     {
-      if (e.keyCode == 13)
-        whitelistDomainBtnClick();
+      // 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("whitelisting-cancel-btn").addEventListener("click", function()
-    {
-      E("whitelisting-textbox").value = "";
+    E("import-blockingList-button").addEventListener("click", function()
+    {
+      var url = E("blockingList-textbox").value;
+      addEnableSubscription(url);
+      delete document.body.dataset.dialog;
     }, false);
-    E("import-blockingList-btn").addEventListener("click", function()
-    {
-      var url = E("blockingList-textbox").value;
-      SendMessage.addSubscription(url);
-      delete document.body.dataset.modal;
-    }, false);
-  }
-  
-  function openModal(name)
-  {
-    document.body.dataset.modal = name;
-    var title = "options_modal_" + name + "_title";
-    E("modal-title").textContent = ext.i18n.getMessage(title);
-  }
-  
+  }
+
+  function openDialog(name)
+  {
+    document.body.dataset.dialog = name;
+  }
+
   function populateLists()
   {
+    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(
         {
           type: "filters.get",
           subscriptionUrl: subscriptions[i].url
-        }, function(filters)
+        }, 
+        function(filters)
         {
           for (var i = 0; i < filters.length; i++)
-            optionObj.filters.update(filters[i]);
+            updateFilter(filters[i]);
         });
       }
     });
     loadRecommendations();
-    sendMessage.getAcceptableAdsURL(function(url)
-    {
-      acceptableAdsUrl = url;
+    getAcceptableAdsURL(function(acceptableAdsUrl)
+    {
       var subscription = Object.create(null);
       subscription.url = acceptableAdsUrl;
       subscription.disabled = true;
       subscription.title = ext.i18n.getMessage("options_acceptableAds_description");
-      optionObj.subscriptions.update(subscription);
-      
+      updateSubscription(subscription);
+
       // Load user subscriptions
       ext.backgroundPage.sendMessage(
       {
         type: "subscriptions.get",
         downloadable: true
-      }, function(subscriptions)
+      }, 
+      function(subscriptions)
       {
         for (var i = 0; i < subscriptions.length; i++)
-          messageListeners.onSubscriptionMessage("added", subscriptions[i]);
+          onSubscriptionMessage("added", subscriptions[i]);
       });
     });
   }
-  
-  function editOwnRulsBtnClick()
-  {
-    
-  }
-  
-  var sendMessage =
-  {
-    getAcceptableAdsURL: function(callback)
+
+  function addWhitelistedDomain()
+  {
+    var domain = E("whitelisting-textbox");
+    if (domain.value)
     {
       ext.backgroundPage.sendMessage(
       {
-        type: "prefs.get",
-        key: "subscriptions_exceptionsurl"
-      }, function(value)
-      {
-        sendMessage.getAcceptableAdsURL = function(callback)
-        {
-          callback(value);
-        }
-        sendMessage.getAcceptableAdsURL(callback);
+        type: "filters.add",
+        text: "@@||" + domain.value.toLowerCase() + "^$document"
       });
+    }
+
+    domain.value = "";
+  }
+
+  function editCustomFilters()
+  {
+    //TODO: NYI
+  }
+
+  function getAcceptableAdsURL(callback)
+  {
+    ext.backgroundPage.sendMessage(
+    {
+      type: "prefs.get",
+      key: "subscriptions_exceptionsurl"
     },
-    addSubscription: function(url, title, homepage)
-    {
-      var message = {
-        type: "subscriptions.add",
-        url: url
-      };
-      if (title)
-        message.title = title;
-      if (homepage)
-        message.homepage = homepage;
-  
-      ext.backgroundPage.sendMessage(message);
-    },
-    removeSubscription: function(url)
-    {
-      ext.backgroundPage.sendMessage(
-      {
-        type: "subscriptions.remove",
-        url: url
-      });
-    },
-    addWhitelistedDomain: function(domain)
-    {
-      ext.backgroundPage.sendMessage(
-      {
-        type: "filters.add",
-        text: "@@||" + domain.toLowerCase() + "^$document"
-      });
-    },
-    removeFilter: function(filter)
-    {
-      ext.backgroundPage.sendMessage(
-      {
-        type: "filters.remove",
-        text: filter
-      });
-    }
-  };
-
-  var messageListeners =
-  {
-    onFilterMessage: function(action, filter)
-    {
-      switch (action)
-      {
-        case "added":
-          optionObj.filters.update(filter);
-          break;
-        case "loaded":
-          populateLists();
-          break;
-        case "removed":
-          optionObj.filters.remove(filter);
-          break;
+    function(value)
+    {
+      getAcceptableAdsURL = function(callback)
+      {
+        callback(value);
       }
-    },
-    onSubscriptionMessage: function(action, subscription)
-    {
-      switch (action)
-      {
-        case "added":
-          optionObj.subscriptions.update(subscription);
-          break;
-        case "disabled":
-          break;
-        case "homepage":
-          // TODO: NYI
-          break;
-        case "removed":
+      getAcceptableAdsURL(callback);
+    });
+  }
+
+  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: messageType,
+      url: url
+    };
+    if (title)
+      message.title = title;
+    if (homepage)
+      message.homepage = homepage;
+
+    ext.backgroundPage.sendMessage(message);
+  }
+
+  function removeSubscription(url)
+  {
+    ext.backgroundPage.sendMessage(
+    {
+      type: "subscriptions.remove",
+      url: url
+    });
+  }
+
+  function removeFilter(filter)
+  {
+    ext.backgroundPage.sendMessage(
+    {
+      type: "filters.remove",
+      text: filter
+    });
+  }
+
+  function onFilterMessage(action, filter)
+  {
+    switch (action)
+    {
+      case "added":
+        updateFilter(filter);
+        updateShareLink();
+        break;
+      case "loaded":
+        populateLists();
+        break;
+      case "removed":
+        var knownFilter = filtersMap[filter.text];
+        collections.whitelist.removeItem(knownFilter);
+        delete filtersMap[filter.text];
+        updateShareLink();
+        break;
+    }
+  }
+
+  function onSubscriptionMessage(action, subscription)
+  {
+    switch (action)
+    {
+      case "added":
+      case "disabled":
+        updateSubscription(subscription);
+        updateShareLink();
+        break;
+      case "homepage":
+        // TODO: NYI
+        break;
+      case "removed":
+        getAcceptableAdsURL(function(acceptableAdsUrl)
+        {
           if (subscription.url == acceptableAdsUrl)
           {
             subscription.disabled = true;
-            optionObj.subscriptions.update(subscription);
+            updateSubscription(subscription);
           }
           else
-            optionObj.subscriptions.remove(subscription);
-          break;
-        case "title":
-          // TODO: NYI
-          break;
-      }
-    }
-  };
+          {
+            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;
-    openModal("customlist");
-  }
-  
+    openDialog("customlist");
+  }
+
   function updateShareLink()
   {
     ext.backgroundPage.sendMessage(
     {
       type: "filters.blocked",
       url: "https://platform.twitter.com/widgets/",
       requestType: "SCRIPT",
       docDomain: "adblockplus.org",
       thirdParty: true
     },
     function(blocked)
     {
       // TODO: modify "share" link accordingly
     });
   }
-  
-  function getDocLink(link, callback)
-  {
-    ext.backgroundPage.sendMessage(
-    {
-      type: "app.get",
-      what: "doclink",
-      link: link
-    }, callback);
-  }
-  
-  function setLinks(id)
-  {
-    var element = E(id);
-    if (!element)
-    {
-      return;
-    }
-
-    var links = element.getElementsByTagName("a");
-
-    for (var i = 0; i < links.length; i++)
-    {
-      if (typeof arguments[i + 1] == "string")
-      {
-        links[i].href = arguments[i + 1];
-        links[i].setAttribute("target", "_blank");
-      }
-      else if (typeof arguments[i + 1] == "function")
-      {
-        links[i].href = "javascript:void(0);";
-        links[i].addEventListener("click", arguments[i + 1], false);
-      }
-    }
-  }
-  
+
   function E(id)
   {
     return document.getElementById(id);
   }
-  
+
   ext.onMessage.addListener(function(message)
   {
     switch (message.type)
     {
       case "app.listen":
         if (message.action == "addSubscription")
-          messageListeners.showAddSubscriptionDialog(message.args[0]);
+          showAddSubscriptionDialog(message.args[0]);
         break;
       case "filters.listen":
-        messageListeners.onFilterMessage(message.action, message.args[0]);
+        onFilterMessage(message.action, message.args[0]);
         break;
       case "subscriptions.listen":
-        messageListeners.onSubscriptionMessage(message.action, message.args[0]);
+        onSubscriptionMessage(message.action, message.args[0]);
         break;
     }
   });
-  
+
   ext.backgroundPage.sendMessage(
   {
     type: "app.listen",
     filter: ["addSubscription"]
   });
   ext.backgroundPage.sendMessage(
   {
     type: "filters.listen",
     filter: ["added", "loaded", "removed"]
   });
   ext.backgroundPage.sendMessage(
   {
     type: "subscriptions.listen",
     filter: ["added", "disabled", "homepage", "removed", "title"]
   });
-  
+
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
 })();