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 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;
-  }
-
-  Collection.prototype = Object.create(Array.prototype);
-  Collection.prototype.addItems = function(item) 
-  {
-    var length = Array.prototype.push.apply(this, arguments);
+    this.items = [];
+  }
+
+  Collection.prototype.addItems = function() 
+  {
+    var length = Array.prototype.push.apply(this.items, arguments);
     if (length == 0)
       return;
 
-    this.sort(function(a, b)
+    this.items.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;
+      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 object = arguments[i];

[Thomas Greiner, 2015/03/12 11:41:56]

What you're calling "object" here is the same thing you've called "obj" in
"removeItems" which you renamed to "item" now so it should also be renamed here.

[saroyanm, 2015/03/12 14:03:22]

Done.

-        var text = object.title || object.url || object.text;
+        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 = object.url || object.text;
+        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 = object.disabled == false;
+          control.checked = item.disabled == false;
         }
 
-        if (table.hasChildNodes)
-          table.insertBefore(listItem, table.childNodes[this.indexOf(object)]);
+        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.indexOf(item);
+    var index = this.items.indexOf(item);
     if (index == -1)
       return;
 
-    this.splice(index, 1);
+    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.length = 0;
+    this.items.length = 0;
   };
 
-  function toggleSubscription(e)
+  function onToggleSubscriptionClick(e)
   {
     e.preventDefault();
     var subscriptionUrl = e.target.parentNode.dataset.access;
     if (!e.target.checked)
       removeSubscription(subscriptionUrl);
     else
       addEnableSubscription(subscriptionUrl);
   }
 
-  function addLanguageSubscription(e)
+  function onAddLanguageSubscriptionClick(e)
   {
     e.preventDefault();
     var url = this.parentNode.dataset.access;
     addEnableSubscription(url);
   }
 
-  function triggerRemoveFilter()
+  function onRemoveFilterClick()
   {
     var filter = this.parentNode.dataset.access;
     removeFilter(filter);
   }
 
   collections.popular = new Collection(
   [
     {
       id: "recommend-list-table",
-      onClick: toggleSubscription
+      onClick: onToggleSubscriptionClick
     }
   ]);
   collections.langs = new Collection(
   [
     {
       id: "blocking-languages-table",
-      onClick: toggleSubscription
+      onClick: onToggleSubscriptionClick
     },
     {
-      id: "blocking-languages-modal-table"
+      id: "blocking-languages-dialog-table"
     }
   ]);
   collections.allLangs = new Collection(
   [
     {
       id: "all-lang-table", 
-      onClick: addLanguageSubscription
+      onClick: onAddLanguageSubscriptionClick
     }
   ]);
   collections.acceptableAds = new Collection(
   [
     {
       id: "acceptableads-table", 
-      onClick: toggleSubscription
+      onClick: onToggleSubscriptionClick
     }
   ]);
   collections.custom = new Collection(
   [
     {
       id: "custom-list-table", 
-      onClick: toggleSubscription
+      onClick: onToggleSubscriptionClick
     }
   ]);
   collections.whitelist = new Collection(
   [
     {
       id: "whitelisting-table", 
-      onClick: triggerRemoveFilter
+      onClick: onRemoveFilterClick
     }
   ]);
 
   function updateSubscription(subscription)
   {
     var subscriptionUrl = subscription.url;
     var knownSubscription = subscriptionsMap[subscriptionUrl];
     if (knownSubscription)
       knownSubscription.disabled = subscription.disabled;
     else
@@ skipping 25 matching lines @@
                   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, function(changes)
-          {
-            onObjectChanged();
-          });
+          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;
@@ skipping 23 matching lines @@
     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");
@@ skipping 13 matching lines @@
         }
         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()
   {
     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");

[Thomas Greiner, 2015/03/12 11:41:56]

I suppose the "+" should be on the other side of the text for RTL languages. To
achieve that you could put the "+" in a separate HTML element.

[saroyanm, 2015/03/12 14:03:22]

Should work now.

+    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);
     }
 
-    function searchLanguage()
+    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_modal_language_find");
+    var placeholderValue  = ext.i18n.getMessage("options_dialog_language_find");
     E("find-language").setAttribute("placeholder", placeholderValue);
     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-button").addEventListener("click", editCustomFilters, false);
-    E("find-language").addEventListener("keyup", searchLanguage, false);
-    E("find-language").addEventListener("search", searchLanguage, 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 use e.key instead
-      if (e.key && e.key == "Enter")
-        addWhitelistedDomain();
-      else if (!e.key && e.keyCode == 13) //keyCode "13" corresponds to "Enter"
+      // 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.modal;
+      delete document.body.dataset.dialog;
     }, false);
   }
 
-  function openModal(name)
-  {
-    document.body.dataset.modal = name;
+  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)
@@ skipping 54 matching lines @@
         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"
     },
     function(value)
@@ skipping 63 matching lines @@
         updateShareLink();
         break;
     }
   }
 
   function onSubscriptionMessage(action, subscription)
   {
     switch (action)
     {
       case "added":
-        updateSubscription(subscription);
-        updateShareLink();
-        break;
       case "disabled":
         updateSubscription(subscription);
         updateShareLink();
         break;
       case "homepage":
         // TODO: NYI
         break;
       case "removed":
         getAcceptableAdsURL(function(acceptableAdsUrl)
         {
@@ skipping 18 matching lines @@
         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",
@@ skipping 38 matching lines @@
     filter: ["added", "loaded", "removed"]
   });
   ext.backgroundPage.sendMessage(
   {
     type: "subscriptions.listen",
     filter: ["added", "disabled", "homepage", "removed", "title"]
   });
 
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
 })();