Issue 5255 - Advanced tab (HTML, strings and functionality)

new-options.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2017 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/>.
  */
 
 /* globals checkShareResource, getDocLink, i18nFormatDateTime, openSharePopup,
            E */
 
 "use strict";
 
 {
   let subscriptionsMap = Object.create(null);
   let filtersMap = Object.create(null);
   let collections = Object.create(null);
   let acceptableAdsUrl = null;
   let isCustomFiltersLoaded = false;
   let {getMessage} = ext.i18n;
+  let customFilters = [];
   let filterErrors = new Map([
     ["synchronize_invalid_url",
      "options_filterList_lastDownload_invalidURL"],
     ["synchronize_connection_error",
      "options_filterList_lastDownload_connectionError"],
     ["synchronize_invalid_data",
      "options_filterList_lastDownload_invalidData"],
     ["synchronize_checksum_mismatch",
      "options_filterList_lastDownload_checksumMismatch"]
   ]);
-
+  const timestampUI = Symbol();
   const whitelistedDomainRegexp = /^@@\|\|([^/:]+)\^\$document$/;
+  // Period of time in milliseconds
+  const minuteInMs = 60000;
+  const hourInMs = 3600000;
+  const fullDayInMs = 86400000;
 
   function Collection(details)
   {
     this.details = details;
     this.items = [];
   }
 
-  Collection.prototype._setEmpty = function(table, text)
-  {
-    let placeholder = table.querySelector(".empty-placeholder");
-    if (text && !placeholder)
-    {
-      placeholder = document.createElement("li");
-      placeholder.className = "empty-placeholder";
-      placeholder.textContent = getMessage(text);
-      table.appendChild(placeholder);
-    }
-    else if (placeholder)
-      table.removeChild(placeholder);
+  Collection.prototype._setEmpty = function(table, texts)
+  {
+    let placeholders = table.querySelectorAll(".empty-placeholder");
+
+    if (texts && placeholders.length == 0)
+    {
+      for (let text of texts)
+      {
+        let placeholder = document.createElement("li");
+        placeholder.className = "empty-placeholder";
+        placeholder.textContent = getMessage(text);
+        table.appendChild(placeholder);
+      }
+    }
+    else if (placeholders.length > 0)
+    {
+      for (let placeholder of placeholders)
+        table.removeChild(placeholder);
+    }
   };
 
   Collection.prototype._createElementQuery = function(item)
   {
     let access = (item.url || item.text).replace(/'/g, "\\'");
     return function(container)
     {
       return container.querySelector("[data-access='" + access + "']");
     };
   };
 
   Collection.prototype._getItemTitle = function(item, i)
   {
     if (item.url == acceptableAdsUrl)
       return getMessage("options_acceptableAds_description");
     if (this.details[i].useOriginalTitle && item.originalTitle)
       return item.originalTitle;
     return item.title || item.url || item.text;
   };
 
-  Collection.prototype.addItem = function(item)
-  {
-    if (this.items.indexOf(item) >= 0)
-      return;
-
-    this.items.push(item);
+  Collection.prototype._sortItems = function()
+  {
     this.items.sort((a, b) =>
     {
       // Make sure that Acceptable Ads is always last, since it cannot be
       // disabled, but only be removed. That way it's grouped together with
       // the "Own filter list" which cannot be disabled either at the bottom
       // of the filter lists in the Advanced tab.
       if (a.url == acceptableAdsUrl)
         return 1;
       if (b.url == acceptableAdsUrl)
         return -1;
 
+      // Make sure that newly added entries always appear on top in descending
+      // chronological order
+      let aTimestamp = a[timestampUI] || 0;
+      let bTimestamp = b[timestampUI] || 0;
+      if (aTimestamp || bTimestamp)
+        return bTimestamp - aTimestamp;
+
       let aTitle = this._getItemTitle(a, 0).toLowerCase();
       let bTitle = this._getItemTitle(b, 0).toLowerCase();
       return aTitle.localeCompare(bTitle);
     });
-
+  };
+
+  Collection.prototype.addItem = function(item)
+  {
+    if (this.items.indexOf(item) >= 0)
+      return;
+
+    this.items.push(item);
+    this._sortItems();
     for (let j = 0; j < this.details.length; j++)
     {
       let detail = this.details[j];
       let table = E(detail.id);
       let template = table.querySelector("template");
       let listItem = document.createElement("li");
       listItem.appendChild(document.importNode(template.content, true));
       listItem.setAttribute("aria-label", this._getItemTitle(item, j));
       listItem.setAttribute("data-access", item.url || item.text);
       listItem.setAttribute("role", "section");
@@ skipping 10 matching lines @@
       {
         if (control.hasAttribute("title"))
         {
           let titleValue = getMessage(control.getAttribute("title"));
           control.setAttribute("title", titleValue);
         }
       }
 
       this._setEmpty(table, null);
       if (table.children.length > 0)
-      {
-        let beforeIndex = this.items.indexOf(item) + (detail.useHeader == true);
-        table.insertBefore(listItem, table.children[beforeIndex]);
-      }

[Thomas Greiner, 2017/07/07 13:01:09]

What's the reason for those changes? I didn't notice any header being added.

[saroyanm, 2017/07/10 11:38:00]

Header is column name. I used naming header from "<TH>" element.
beforeIndex is increased by one in case table have header column.

While this is specified in the HTML rather than generated dynamically it's easy
to use this solution. Anyway let's discuss this implementation.

[saroyanm, 2017/07/10 13:27:43]

I'll move the column names row out of the list for current review.

[saroyanm, 2017/07/12 15:29:02]

Done.

+        table.insertBefore(listItem, table.children[this.items.indexOf(item)]);
       else
-      {
         table.appendChild(listItem);
-      }
+
       this.updateItem(item);
     }
     return length;
   };
 
   Collection.prototype.removeItem = function(item)
   {
     let index = this.items.indexOf(item);
     if (index == -1)
       return;
@@ skipping 26 matching lines @@
       }
 
       element.parentElement.removeChild(element);
       if (this.items.length == 0)
         this._setEmpty(table, detail.emptyText);
     }
   };
 
   Collection.prototype.updateItem = function(item)
   {
+    let oldIndex = this.items.indexOf(item);
+    this._sortItems();
     let access = (item.url || item.text).replace(/'/g, "\\'");
     for (let i = 0; i < this.details.length; i++)
     {
       let table = E(this.details[i].id);
       let element = table.querySelector("[data-access='" + access + "']");
       if (!element)
         continue;
 
       let title = this._getItemTitle(item, i);
       element.querySelector(".display").textContent = title;
       element.setAttribute("aria-label", title);
       if (this.details[i].searchable)
         element.setAttribute("data-search", title.toLowerCase());
       let control = element.querySelector(".control[role='checkbox']");
       if (control)
       {
         control.setAttribute("aria-checked", item.disabled == false);
         if (item.url == acceptableAdsUrl && this == collections.filterLists)
-          control.setAttribute("disabled", true);
-      }
-
-      let lastUpdateElem = element.querySelector(".last-update");
-      if (lastUpdateElem)
+          control.disabled = true;
+      }
+
+      let lastUpdateElement = element.querySelector(".last-update");
+      if (lastUpdateElement)
       {
         let message = element.querySelector(".message");
         if (item.isDownloading)
         {
           let text = getMessage("options_filterList_lastDownload_inProgress");
           message.textContent = text;
           element.classList.add("show-message");
         }
         else if (item.downloadStatus != "synchronize_ok")
         {
           let error = filterErrors.get(item.downloadStatus);
           if (error)
             message.textContent = getMessage(error);
           else
             message.textContent = item.downloadStatus;
           element.classList.add("show-message");
         }
         else if (item.lastDownload > 0)
         {
-          let timer = setInterval(lastUpdateLive, 60000);

[Thomas Greiner, 2017/07/07 13:01:09]

As far as I see, the spec doesn't say that this time is supposed to be kept
up-to-date while the page is open.

Furthermore, here are some optional improvements in case it turns out that this
feature is required:
- No need to update it every minute if `lastUpdate > 1 hour`
- The next minute might be reached even before the 60 seconds have passed since
it's unlikely that we set the interval at exactly zero seconds.
- The interval seems to continue even after the item gets removed.

[saroyanm, 2017/07/10 11:38:02]

I do remember that this was discussed during our meetings and the outcome was to
update this live. Anyway this should end up in the specs as well, if it's not
yet. I'll take care of it.
agree
agree
Good point, I'll remove it.

[saroyanm, 2017/07/12 15:29:01]

Removed live update

           let lastUpdate = item.lastDownload * 1000;
-          function lastUpdateLive()
+          let sinceUpdate = Date.now() - lastUpdate;
+          if (sinceUpdate > fullDayInMs)
           {
-            let sinceUpdate = Date.now() - lastUpdate;
-            if(sinceUpdate > 86400000)

[Thomas Greiner, 2017/07/07 13:01:10]

Detail: Usually, we create constants to make it more obvious what all those
different numbers are supposed to represent.

See
- https://hg.adblockplus.org/adblockpluscore/file/tip/lib/synchronizer.js#l33
- https://hg.adblockplus.org/adblockpluscore/file/tip/lib/downloader.js#l25

[saroyanm, 2017/07/10 11:38:01]

Agree

[saroyanm, 2017/07/12 15:29:02]

Done.

-            {
-              let lastUpdateDate = new Date(item.lastDownload * 1000);
-              let monthName = lastUpdateDate.toLocaleString(
-                document.documentElement.lang, { month: "short" });

[Thomas Greiner, 2017/07/07 13:01:10]

Actually, while reviewing #5278 I noticed that we could simply pass `undefined`
for the locale value to use the current value. If you remember we did try
passing `null` and omitting the first parameter to achieve that but neither one
worked.

On another note, we could even go as far as to use

new Intl.DateTimeFormat(undefined, {year: "numeric", month: "short", day:
"2-digit"}).format(new Date())

instead to format the date but it doesn't seem like we could get the format "DD
MMM YYYY" out of it so it doesn't seem too useful for what we need here.

[Thomas Greiner, 2017/07/07 13:01:10]

Coding style: This violates the rule "object-curly-spacing" from
eslint-config-eyeo.

See
-
https://hg.adblockplus.org/codingtools/file/tip/eslint-config-eyeo/index.js#l84
- http://eslint.org/docs/rules/object-curly-spacing

[saroyanm, 2017/07/10 11:38:00]

Good point, I'll run eslint before uploading next patch.

[saroyanm, 2017/07/10 11:38:01]

Acknowledged, checked specifications as well I think we good to go with
undefined. Undefined suppose to the value if "locale" parameter is missing.

[saroyanm, 2017/07/12 15:29:01]

Done.

[saroyanm, 2017/07/12 15:29:01]

Done.

-              let day = lastUpdateDate.getDate();
-              day = day < 10 ? "0" + day : day;
-              lastUpdateElem.textContent = day + " " + monthName + " " + 
-                lastUpdateDate.getFullYear();
-              clearInterval(timer);
-              return;
-            }
-            else if (sinceUpdate > 3600000)
-            {
-              lastUpdateElem.textContent = Math.round(sinceUpdate / 3600000) + 
-                " " + getMessage("options_filterList_hours");
-            }
-            else if (sinceUpdate > 60000)
-            {
-              lastUpdateElem.textContent = Math.round(sinceUpdate / 60000) + 
-                " " + getMessage("options_filterList_minutes");
-            }
-            else
-            {
-              lastUpdateElem.textContent = 
-                getMessage("options_filterList_just");
-            }
+            let lastUpdateDate = new Date(item.lastDownload * 1000);
+            let monthName = lastUpdateDate.toLocaleString(undefined,
+              {month: "short"});
+            let day = lastUpdateDate.getDate();
+            day = day < 10 ? "0" + day : day;
+            lastUpdateElement.textContent = day + " " + monthName + " " +
+              lastUpdateDate.getFullYear();
           }
-          lastUpdateLive();
+          else if (sinceUpdate > hourInMs)
+          {
+            lastUpdateElement.textContent =
+              getMessage("options_filterList_hours");
+          }
+          else if (sinceUpdate > minuteInMs)
+          {
+            lastUpdateElement.textContent =
+              getMessage("options_filterList_minutes");
+          }
+          else
+          {
+            lastUpdateElement.textContent =
+              getMessage("options_filterList_now");
+          }
           element.classList.remove("show-message");
         }
       }
 
       let websiteElement = element.querySelector(".context-menu .website");
       if (websiteElement)
       {
         if (item.homepage)
           websiteElement.setAttribute("href", item.homepage);
         else
           websiteElement.setAttribute("aria-hidden", true);
       }
 
       let sourceElement = element.querySelector(".context-menu .source");
       if (sourceElement)
         sourceElement.setAttribute("href", item.url);
+
+      let newIndex = this.items.indexOf(item);
+      if (oldIndex != newIndex)
+        table.insertBefore(element, table.childNodes[newIndex]);
     }
   };
 
   Collection.prototype.clearAll = function()
   {
     this.items = [];
     for (let detail of this.details)
     {
       let table = E(detail.id);
       let element = table.firstChild;
@@ skipping 24 matching lines @@
   }
 
   collections.popular = new Collection([
     {
       id: "recommend-list-table"
     }
   ]);
   collections.langs = new Collection([
     {
       id: "blocking-languages-table",
-      emptyText: "options_dialog_language_added_empty"
+      emptyText: ["options_dialog_language_added_empty"]
     },
     {
       id: "blocking-languages-dialog-table",
-      emptyText: "options_dialog_language_added_empty"
+      emptyText: ["options_dialog_language_added_empty"]
     }
   ]);
   collections.allLangs = new Collection([
     {
       id: "all-lang-table",
-      emptyText: "options_dialog_language_other_empty",
+      emptyText: ["options_dialog_language_other_empty"],
       searchable: true
     }
   ]);
   collections.acceptableAds = new Collection([
     {
       id: "acceptableads-table"
     }
   ]);
   collections.custom = new Collection([
     {
       id: "custom-list-table"
     }
   ]);
   collections.whitelist = new Collection([
     {
       id: "whitelisting-table",
-      emptyText: "options_whitelisted_empty"
+      emptyText: ["options_whitelist_empty_1", "options_whitelist_empty_2"]
     }
   ]);
   collections.filterLists = new Collection([
     {
       id: "all-filter-lists-table",
-      useOriginalTitle: true,
-      useHeader: true
+      useOriginalTitle: true
     }
   ]);
 
   function toggleShowLanguage(subscription)
   {
     if (subscription.recommended == "ads")
     {
       if (subscription.disabled)
       {
         collections.allLangs.addItem(subscription);
@@ skipping 40 matching lines @@
 
   function updateFilter(filter)
   {
     let match = filter.text.match(whitelistedDomainRegexp);
     if (match && !filtersMap[filter.text])
     {
       filter.title = match[1];
       collections.whitelist.addItem(filter);
     }
     else
-      addCustomFilter(filter);
+    {
+      customFilters.push(filter.text);
+      if (isCustomFiltersLoaded)
+        updateCustomFiltersUi();
+    }
 
     filtersMap[filter.text] = filter;
   }
 
-  function addCustomFilter(filter)
-  {
-    customFiltersView("read");

[Thomas Greiner, 2017/07/07 13:01:10]

Detail: The name is ambiguous because it doesn't say what happens with the
custom filters view. Names such as "setCustomFiltersView" or
"switchCustomFiltersView" would clarify that.

[saroyanm, 2017/07/10 11:38:01]

Agree.

[saroyanm, 2017/07/12 15:29:01]

Done.

-
-    E("custom-filters-box").appendChild(new Option(filter.text, filter.text));
-  }
-
   function removeCustomFilter(text)
   {
-    let list = E("custom-filters-box");
-    let selector = "option[value=" + CSS.escape(text) + "]";
-    for (let option of list.querySelectorAll(selector))
-      list.removeChild(option);
-
-    if (E("custom-filters-box").options.length == 0)
-      customFiltersView("empty")
-  }
-
-  function convertToRawFormat(event)
-  {
-    let filters = [];
-
-    for (let option of E("custom-filters-box").options)
-      filters.push(option.value);
-
-    document.getElementById("custom-filters-raw").value = filters.join("\n");
+    let index = customFilters.indexOf(text);
+    if (index >= 0)
+      customFilters.splice(index, 1);
+
+    updateCustomFiltersUi();
+  }
+
+  function updateCustomFiltersUi()
+  {
+    let customFiltersListElement = E("custom-filters-raw");
+    customFiltersListElement.value = customFilters.join("\n");
   }
 
   function loadRecommendations()
   {
     fetch("subscriptions.xml")
       .then((response) =>
       {
         return response.text();
       })
       .then((text) =>
@@ skipping 66 matching lines @@
       else
         location.href = link;
     });
   }
 
   function switchTab(id)
   {
     location.hash = id;
   }
 
-  function execAction(action, element, event)
-  {
-    if (element.getAttribute("href") == "#")

[Thomas Greiner, 2017/07/07 13:01:10]

Detail: Why do you even set the "href" attribute in the first place?

[saroyanm, 2017/07/10 11:38:00]

Good question, I think we don't need href attribute, at all, I thought it's some
kind of common practice to specify href attribute, but I think we can remove it.

[saroyanm, 2017/07/12 15:29:02]

Done.

-      event.preventDefault();
-
+  function execAction(action, element)
+  {
     switch (action)
     {
       case "add-domain-exception":
         addWhitelistedDomain();
         break;
       case "add-language-subscription":
         addEnableSubscription(findParentData(element, "access", false));
         break;
       case "add-predefined-subscription": {
         let dialog = E("dialog-content-predefined");
         let title = dialog.querySelector("h3").textContent;
         let url = dialog.querySelector(".url").textContent;
         addEnableSubscription(url, title);
         closeDialog();
         break;
       }
       case "cancel-custom-filters":
-        customFiltersView("read");
-        break;
-      case "cancel-domain-exception":
-        E("whitelisting-textbox").value = "";
-        document.querySelector("#whitelisting .controls").classList
-          .remove("mode-edit");
+        setCustomFiltersView("read");
         break;
       case "close-dialog":
         closeDialog();
         break;
       case "edit-custom-filters":
-        customFiltersView("write");
-        break;
-      case "edit-domain-exception":
-        document.querySelector("#whitelisting .controls").classList
-          .add("mode-edit");
-        E("whitelisting-textbox").focus();
+        setCustomFiltersView("write");
         break;
       case "import-subscription": {
         let url = E("blockingList-textbox").value;
         addEnableSubscription(url);
         closeDialog();
         break;
       }
       case "open-context-menu": {
         let listItem = findParentData(element, "access", true);
         if (listItem && !listItem.classList.contains("show-context-menu"))
@@ skipping 23 matching lines @@
         });
         break;
       case "save-custom-filters":
         sendMessageHandleErrors({
           type: "filters.importRaw",
           text: E("custom-filters-raw").value,
           removeExisting: true
         },
         () =>
         {
-          customFiltersView("read");
+          setCustomFiltersView("read");
         });
         break;
       case "switch-tab":
         let tabId = findParentData(element, "tab", false);
         switchTab(tabId);
         break;
       case "toggle-disable-subscription":
         ext.backgroundPage.sendMessage({
           type: "subscriptions.toggle",
           keepInstalled: true,
@@ skipping 25 matching lines @@
         break;
       case "update-subscription":
         ext.backgroundPage.sendMessage({
           type: "subscriptions.update",
           url: findParentData(element, "access", false)
         });
         break;
     }
   }
 
-  function customFiltersView(mode)

[Thomas Greiner, 2017/07/07 13:01:09]

Detail: I noticed that you've call `E("custom-filters")` quite often and
unconditionally so let's introduce a variable for that.

[Thomas Greiner, 2017/07/07 13:01:09]

You're trying to switch between three modes but each class can only represent
two values. The simplest solutions for this scenario would be to either not use
classes (e.g. `data-mode="view"`) or to use two classes (e.g. `.empty.view`).

[saroyanm, 2017/07/10 11:38:00]

".mode-edit" Will be consistent with other implementation we already introduced,
previously. But I agree that data-mode="view" is more clear implementation. I
think that we are safe to switch to using data attributes, that will be
consistent with how we are switching between tabs. And inconsistency between
using class attribute will be removed after #5391 is resolved.

[saroyanm, 2017/07/10 11:38:00]

Agree.

[saroyanm, 2017/07/12 15:29:02]

Done.

[saroyanm, 2017/07/12 15:29:02]

Done.

-  {
-    switch (mode)
-    {
-      case "read":
-        if (E("custom-filters-box").options.length == 0)
-        {
-          customFiltersView("empty");
-        }
-        else
-        {
-          E("custom-filters").classList.add("mode-view");

[Thomas Greiner, 2017/07/07 13:01:10]

Detail: Why the different naming? I do like that you chose to go with "read" and
"write" instead of "view" and "edit" but why not use them consistently
throughout?

[saroyanm, 2017/07/10 11:38:00]

Acknowledged, will make them consistent

[saroyanm, 2017/07/12 15:29:02]

Done.

-          E("custom-filters").classList.remove("mode-edit");
-          E("custom-filters").classList.remove("mode-empty");

[Thomas Greiner, 2017/07/07 13:01:09]

Detail: Note that you can pass multiple arguments to
`HTMLElement.classList.add()` and `HTMLElement.classList.remove()` so no need to
call them multiple times.

[saroyanm, 2017/07/10 11:38:01]

Acknowledged.

-        }
-        break;
-      case "write":
-        convertToRawFormat();
-        E("custom-filters").classList.remove("mode-view");
-        E("custom-filters").classList.add("mode-edit");
-        E("custom-filters").classList.remove("mode-empty");
-        break;
-      case "empty":
-        E("custom-filters").classList.remove("mode-view");
-        E("custom-filters").classList.remove("mode-edit");
-        E("custom-filters").classList.add("mode-empty");
-        break;
-    }
+  function setCustomFiltersView(mode)
+  {
+    let customFiltersElement = E("custom-filters-raw");
+    updateCustomFiltersUi();
+    if (mode == "read")
+    {
+      customFiltersElement.disabled = true;
+      if (!customFiltersElement.value)
+      {
+        setCustomFiltersView("empty");
+        return;
+      }
+    }
+    else if (mode == "write")
+    {
+      customFiltersElement.disabled = false;
+    }
+
+    E("custom-filters").dataset.mode = mode;
   }
 
   function onClick(e)
   {
     let context = document.querySelector(".show-context-menu");
     if (context)
       context.classList.remove("show-context-menu");
 
     let actions = findParentData(e.target, "action", false);
     if (!actions)
       return;
 
     actions = actions.split(",");
     for (let action of actions)
     {
-      execAction(action, e.target, e);
+      execAction(action, e.target);
     }
   }
 
   function getKey(e)
   {
     // e.keyCode has been deprecated so we attempt to use e.key
     if ("key" in e)
       return e.key;
     return getKey.keys[e.keyCode];
   }
@@ skipping 26 matching lines @@
     {
       if (key == "ArrowLeft" || key == "ArrowUp")
         element = element.previousElementSibling || container.lastElementChild;
       else if (key == "ArrowRight" || key == "ArrowDown")
         element = element.nextElementSibling || container.firstElementChild;
     }
 
     let actions = container.getAttribute("data-action").split(",");
     for (let action of actions)
     {
-      execAction(action, element, e);
+      execAction(action, element);
     }
   }
 
   function selectTabItem(tabId, container, focus)
   {
     // Show tab content
     document.body.setAttribute("data-tab", tabId);
 
     // Select tab
     let tabList = container.querySelector("[role='tablist']");
@@ skipping 66 matching lines @@
 
     updateShareLink();
     updateTooltips();
 
     // Initialize interactive UI elements
     document.body.addEventListener("click", onClick, false);
     document.body.addEventListener("keyup", onKeyUp, false);
     let placeholderValue = getMessage("options_dialog_language_find");
     E("find-language").setAttribute("placeholder", placeholderValue);
     E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false);
-    E("whitelisting-textbox").addEventListener("keypress", (e) =>
-    {
-      if (getKey(e) == "Enter")
-        addWhitelistedDomain();
+    let exampleValue = getMessage("options_whitelist_placeholder_example",
+      ["www.example.com"]);
+    E("whitelisting-textbox").setAttribute("placeholder", exampleValue);
+    E("whitelisting-textbox").addEventListener("keyup", (e) =>
+    {
+      E("whitelisting-add-button").disabled = !e.target.value;
     }, false);
 
     // Advanced tab
     let customize = document.querySelectorAll("#customize li[data-pref]");
     customize = Array.prototype.map.call(customize, (checkbox) =>
     {
       return checkbox.getAttribute("data-pref");
     });
     for (let key of customize)
     {
@@ skipping 148 matching lines @@
         ext.backgroundPage.sendMessage({
           type: "filters.get",
           subscriptionUrl: subscription.url
         },
         (filters) =>
         {
           for (let filter of filters)
             updateFilter(filter);
 
           isCustomFiltersLoaded = true;
+          setCustomFiltersView("read");
         });
       }
     });
     loadRecommendations();
     ext.backgroundPage.sendMessage({
       type: "prefs.get",
       key: "subscriptions_exceptionsurl"
     },
     (url) =>
     {
@@ skipping 12 matching lines @@
       {
         for (let subscription of subscriptions)
           onSubscriptionMessage("added", subscription);
       });
     });
   }
 
   function addWhitelistedDomain()
   {
     let domain = E("whitelisting-textbox");
+    for (let whitelistItem of collections.whitelist.items)
+    {
+      if (whitelistItem.title == domain.value)
+      {
+        whitelistItem[timestampUI] = Date.now();
+        collections.whitelist.updateItem(whitelistItem);
+        domain.value = "";
+        break;
+      }
+    }
     if (domain.value)
     {
       sendMessageHandleErrors({
         type: "filters.add",
         text: "@@||" + domain.value.toLowerCase() + "^$document"
       });
     }
 
     domain.value = "";
-    document.querySelector("#whitelisting .controls")
-      .classList.remove("mode-edit");
-  }
-
-  function editCustomFilters()
-  {
-    if (!isCustomFiltersLoaded)
-    {
-      console.error("Custom filters are not loaded");
-      return;
-    }
-
-    E("custom-filters").classList.add("mode-edit");
-    let filterTexts = [];
-    for (let customFilterItem of collections.customFilters.items)
-      filterTexts.push(customFilterItem.text);
-    E("custom-filters-raw").value = filterTexts.join("\n");
+    E("whitelisting-add-button").disabled = true;
   }
 
   function addEnableSubscription(url, title, homepage)
   {
     let messageType = null;
     let knownSubscription = subscriptionsMap[url];
     if (knownSubscription && knownSubscription.disabled == true)
       messageType = "subscriptions.toggle";
     else
       messageType = "subscriptions.add";
 
     let message = {
       type: messageType,
       url
     };
     if (title)
       message.title = title;
     if (homepage)
       message.homepage = homepage;
 
     ext.backgroundPage.sendMessage(message);
   }
 
   function onFilterMessage(action, filter)
   {
     switch (action)
     {
       case "added":
+        filter[timestampUI] = Date.now();
         updateFilter(filter);
         updateShareLink();
         break;
       case "loaded":
         populateLists();
         break;
       case "removed":
         let knownFilter = filtersMap[filter.text];
         if (whitelistedDomainRegexp.test(knownFilter.text))
           collections.whitelist.removeItem(knownFilter);
@@ skipping 263 matching lines @@
   });
   ext.backgroundPage.sendMessage({
     type: "subscriptions.listen",
     filter: ["added", "disabled", "homepage", "lastDownload", "removed",
              "title", "downloadStatus", "downloading"]
   });
 
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
   window.addEventListener("hashchange", onHashChange, false);
 }