Issue 2376 - Implement custom filters in new options page

options.js

Index: options.js
===================================================================
--- a/options.js
+++ b/options.js
@@ -38,8 +38,8 @@
 
     this.items.sort(function(a, b)

[Thomas Greiner, 2015/06/30 09:23:29]

You need to first filter out all empty lines before sorting them or otherwise
it'll throw an exception if you try to convert a filter to lower case.

[saroyanm, 2015/07/08 18:25:42]

I do wander why we even need to submit the empty string ? 
Maybe make sense to handle that during submission ?

[Thomas Greiner, 2015/07/09 11:07:54]

Yep, the earlier we can filter those out the better.

[saroyanm, 2015/07/09 16:31:39]

Done.

     {
-      var aValue = (a.title || a.url || a.text).toLowerCase();
-      var bValue = (b.title || b.url || a.text).toLowerCase();
+      var aValue = (a.title || a.text || a.url).toLowerCase();
+      var bValue = (b.title || b.text || a.url).toLowerCase();

[Thomas Greiner, 2015/06/30 09:23:27]

Be careful: It's `b.url`, not `a.url`

[saroyanm, 2015/07/08 18:25:41]

Done.

       return aValue.localeCompare(bValue);
     });
 
@@ -170,6 +170,12 @@
       onClick: onRemoveFilterClick
     }
   ]);
+  collections.customFilters = new Collection(
+  [
+    {
+      id: "custom-filters-table"
+    }
+  ]);
 
   function updateSubscription(subscription)
   {
@@ -266,11 +272,13 @@
     {
       filter.title = match[1];
       collections.whitelist.addItems(filter);
-      filtersMap[filter.text] = filter
+      filtersMap[filter.text] = filter;
     }
     else
     {
       // TODO: add `filters[i].text` to list of custom filters

[Thomas Greiner, 2015/06/30 09:23:28]

Remove this comment

[saroyanm, 2015/07/08 18:25:42]

Done.

+      collections.customFilters.addItems(filter);
+      filtersMap[filter.text] = filter;

[Thomas Greiner, 2015/06/30 09:23:28]

This line is shared across both branches of the if-statement so I'd suggest
moving it to the end of the function to avoid duplication.

[saroyanm, 2015/07/08 18:25:41]

Done.

     }
   }
 
@@ -346,6 +354,15 @@
         searchStyle.innerHTML = "#all-lang-table li:not([data-search*=\"" + this.value.toLowerCase() + "\"]) { display: none; }";
     }
 
+    function isEnterPressed(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))
+        return true;
+      return false;

[Thomas Greiner, 2015/06/30 09:23:28]

Detail: You could reduce that to one line:

return (e.key && e.key == "Enter") || (!e.key && e.keyCode == 13);

[saroyanm, 2015/07/08 18:25:41]

Done. Please note that this function most probably will be removed with the
followup consistency ticket.

+    }
+
     // Update version number in navigation sidebar
     ext.backgroundPage.sendMessage(
     {
@@ -384,9 +401,7 @@
     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))
+      if (isEnterPressed(e))
         addWhitelistedDomain();
     }, false);
     E("import-blockingList-button").addEventListener("click", function()
@@ -395,6 +410,55 @@
       addEnableSubscription(url);
       delete document.body.dataset.dialog;
     }, false);
+
+    // Advanced tab
+    E("custom-filters-add-textbox").setAttribute("placeholder", ext.i18n.getMessage("options_customFilters_textbox_placeholder"));

[Thomas Greiner, 2015/06/30 09:23:28]

Split this up into two lines to avoid exceeding the 80 character limit.
Preferably consistent with how you do it a few lines above.

[saroyanm, 2015/07/08 18:25:41]

Done.

+    function addCustomFilter()

[Thomas Greiner, 2015/06/30 09:23:28]

"addCustomFilters" please

[saroyanm, 2015/07/08 18:25:41]

Done.

+    {
+      var filterTextbox = E("custom-filters-add-textbox");
+      ext.backgroundPage.sendMessage(
+      {
+        type: "parse.filter",
+        text: filterTextbox.value
+      },
+      function(result)
+      {
+        if (result.error)
+        {
+          alert(result.error);
+          return;
+        }
+        if (result.filter)
+          addFilter(result.filter.text);
+
+        filterTextbox.value = "";
+      });
+    }
+    E("custom-filters-add-btn").addEventListener("click", addCustomFilter, false);
+    E("custom-filters-add-textbox").addEventListener("keypress", function(e)
+    {
+      if (isEnterPressed(e))
+        addCustomFilter();
+    }, false);
+    var customFilterEditButtons = document.querySelectorAll("#custom-filters-edit-wrapper button");

[Thomas Greiner, 2015/06/30 09:23:28]

Please avoid setting event listeners individually on each button if you have to
distinguish them within the listener anyway. Instead only listen on the
`#custom-filters-edit-wrapper` element.

[saroyanm, 2015/07/08 18:25:40]

Done.

+    for (var i = 0; i < customFilterEditButtons.length; i++)
+    {
+      customFilterEditButtons[i].addEventListener("click", function(e)
+      {
+        E("custom-filters").dataset.view = e.currentTarget.dataset.show;

[Thomas Greiner, 2015/06/30 09:23:28]

This can be achieved more performantly by toggling a CSS class on that element
(i.e. `E("custom-filters").classList.toggle("mode-edit");`).

[saroyanm, 2015/07/08 18:25:41]

Done.

+        var id = e.currentTarget.id;
+        if (id == "custom-filters-edit-btn")
+          editCustomFilters();
+        else if (id == "custom-filters-save-btn")
+        {
+          ext.backgroundPage.sendMessage(
+          {
+            type: "filters.importRaw",
+            text: E("custom-filters-textarea").value
+          });
+        }
+      }, false);
+    }
   }
 
   function openDialog(name)
@@ -474,7 +538,11 @@
 
   function editCustomFilters()
   {
-    //TODO: NYI
+    var customFilterItems = collections.customFilters.items;
+    var text = "";
+    for (var i = 0; i < customFilterItems.length; i++)
+      text += customFilterItems[i].text + "\n";
+    E("custom-filters-textarea").value = text;

[Thomas Greiner, 2015/06/30 09:23:28]

This loop is potentially creating a lot of strings. Therefore I'd replace the
function body with:

var customFilterItems = collections.customFilters.items;
var filterTexts = [];
for (var i = 0; i < customFilterItems.length; i++)
  filterTexts.push(customFilterItems[i].text);
E("custom-filters-textarea").value = filterTexts.join("\n");

[saroyanm, 2015/07/08 18:25:41]

Done.

   }
 
   function getAcceptableAdsURL(callback)
@@ -533,6 +601,15 @@
     });
   }
 
+  function addFilter(filter)

[Thomas Greiner, 2015/06/30 09:23:29]

There's no need to create a function for that because you're only using it once.

[saroyanm, 2015/07/08 18:25:41]

Done.
Please note that we still have similar methods, that were created initially, I
think they are leftover from previous review:
removeSubscription
removeFilter
onFilterMessage
showAddSubscriptionDialog

Not sure if handling theme here is okey, or make sense to do it separately.

[Thomas Greiner, 2015/07/09 11:07:54]

Good point, feel free to include that in this review. I think for
"onFilterMessage", however, it might be good to have it separate to avoid
nesting switch-statements.

[saroyanm, 2015/07/09 16:31:39]

Done.

+  {
+    ext.backgroundPage.sendMessage(
+    {
+      type: "filters.add",
+      text: filter
+    });
+  }
+
   function onFilterMessage(action, filter)
   {
     switch (action)
@@ -547,6 +624,7 @@
       case "removed":
         var knownFilter = filtersMap[filter.text];
         collections.whitelist.removeItem(knownFilter);
+        collections.customFilters.removeItem(knownFilter);

[Thomas Greiner, 2015/06/30 09:23:28]

Note that when I click on "edit view" and right afterwards on "save" without
making any changes, then the filters for some of the whitelisted domains are
being removed while some of the filters I wanted to remove remain in the list.

This must not happen so please test everything carefully.

[saroyanm, 2015/07/08 18:25:41]

The problem is that in "filters.importRaw" we were excluding 
"Whitelist" filters before removing custom filters that are not in the raw-text,
but while we are only returning an instance of Filter with the fromText in mock,
we can't differentiate, Updated the mock. 
Thanks for noticing, I was testing in product env. beforehand.

         delete filtersMap[filter.text];
         updateShareLink();
         break;