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 customFiltersArray = [];
   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, texts)
   {
     let placeholders = table.querySelectorAll(".empty-placeholder");
@@ skipping 61 matching lines @@
 
   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 table = E(this.details[j].id);
+      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");
 
       let label = listItem.querySelector(".display");
       if (item.recommended && label.hasAttribute("data-tooltip"))
       {
         let tooltipId = label.getAttribute("data-tooltip");
         tooltipId = tooltipId.replace("%value%", item.recommended);
         label.setAttribute("data-tooltip", tooltipId);
       }
 
       for (let control of listItem.querySelectorAll(".control"))
       {
         if (control.hasAttribute("title"))
         {
           let titleValue = getMessage(control.getAttribute("title"));
           control.setAttribute("title", titleValue);
         }
       }
 
       this._setEmpty(table, null);
-      if (table.hasChildNodes())
-      {
-        table.insertBefore(listItem,
-            table.childNodes[this.items.indexOf(item)]);
-      }
+      if (table.children.length > 0)
+        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 49 matching lines @@
       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.disabled = true;
       }
 
-      let dateElement = element.querySelector(".date");
-      let timeElement = element.querySelector(".time");
-      if (dateElement && timeElement)
+      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 dateTime = i18nFormatDateTime(item.lastDownload * 1000);
-          dateElement.textContent = dateTime[0];
-          timeElement.textContent = dateTime[1];
+          let lastUpdate = item.lastDownload * 1000;
+          let lastUpdateLive = function()
+          {
+            let sinceUpdate = Date.now() - lastUpdate;
+            if (sinceUpdate > fullDayInMs)
+            {
+              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();
+            }
+            else if (sinceUpdate > hourInMs)
+            {
+              let placeholder = [Math.round(sinceUpdate / hourInMs)];
+              lastUpdateElement.textContent =
+                getMessage("options_filterList_hours", placeholder);
+            }
+            else if (sinceUpdate > minuteInMs)
+            {
+              let placeholder = [Math.round(sinceUpdate / minuteInMs)];
+              lastUpdateElement.textContent =
+                getMessage("options_filterList_minutes", placeholder);
+            }
+            else
+            {
+              lastUpdateElement.textContent =
+                getMessage("options_filterList_now");
+            }
+          };
+          lastUpdateLive();
           element.classList.remove("show-message");
         }
       }
 
       let websiteElement = element.querySelector(".context-menu .website");
       if (websiteElement)
       {
         if (item.homepage)
           websiteElement.setAttribute("href", item.homepage);
         else
@@ skipping 74 matching lines @@
     {
       id: "custom-list-table"
     }
   ]);
   collections.whitelist = new Collection([
     {
       id: "whitelisting-table",
       emptyText: ["options_whitelist_empty_1", "options_whitelist_empty_2"]
     }
   ]);
-  collections.customFilters = new Collection([
-    {
-      id: "custom-filters-table",
-      emptyText: ["options_customFilters_empty"]
-    }
-  ]);
   collections.filterLists = new Collection([
     {
       id: "all-filter-lists-table",
       useOriginalTitle: true
     }
   ]);
 
   function toggleShowLanguage(subscription)
   {
     if (subscription.recommended == "ads")
@@ skipping 37 matching lines @@
   function updateSubscription(subscription)
   {
     for (let name in collections)
       collections[name].updateItem(subscription);
 
     toggleShowLanguage(subscription);
   }
 
   function updateFilter(filter)
   {
-    let match = filter.text.match(/^@@\|\|([^/:]+)\^\$document$/);
+    let match = filter.text.match(whitelistedDomainRegexp);
     if (match && !filtersMap[filter.text])
     {
       filter.title = match[1];
       collections.whitelist.addItem(filter);
     }
     else
-      collections.customFilters.addItem(filter);
+    {
+      customFiltersArray.push(filter.text);
+      if (isCustomFiltersLoaded)
+        updateCustomFiltersUi();
+    }
 
     filtersMap[filter.text] = filter;
   }
 
+  function removeCustomFilter(text)
+  {
+    let index = customFiltersArray.indexOf(text);
+    if (index >= 0)
+      customFiltersArray.splice(index, 1);
+
+    updateCustomFiltersUi();
+  }
+
+  function updateCustomFiltersUi()
+  {
+    let customFiltersListElement = E("custom-filters-raw");
+    customFiltersListElement.value = "";
+    customFiltersListElement.value = customFiltersArray.join("\n");
+  }
+
   function loadRecommendations()
   {
     fetch("subscriptions.xml")
       .then((response) =>
       {
         return response.text();
       })
       .then((text) =>
       {
         let doc = new DOMParser().parseFromString(text, "application/xml");
@@ skipping 64 matching lines @@
       else
         location.href = link;
     });
   }
 
   function switchTab(id)
   {
     location.hash = id;
   }
 
-  function execAction(action, element)
+  function execAction(action, element, event)
   {
     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":
-        E("custom-filters").classList.remove("mode-edit");
+        updateCustomFiltersUi();
+        setCustomFiltersView("read");
         break;
       case "close-dialog":
         closeDialog();
         break;
       case "edit-custom-filters":
-        editCustomFilters();
+        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
         },
         () =>
         {
-          E("custom-filters").classList.remove("mode-edit");
+          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 setCustomFiltersView(mode)
+  {
+    let customFilters = E("custom-filters");
+    let customFiltersListElement = E("custom-filters-raw");
+    if (mode == "read")
+    {
+      customFiltersListElement.disabled = true;
+      if (!customFiltersListElement.value)
+      {
+        setCustomFiltersView("empty");
+        return;
+      }
+    }
+    else if (mode == "write")
+    {
+      updateCustomFiltersUi();
+      customFiltersListElement.disabled = false;
+    }
+
+    customFilters.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);
+      execAction(action, e.target, e);
     }
   }
 
   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);
+      execAction(action, element, e);
     }
   }
 
   function selectTabItem(tabId, container, focus)
   {
     // Show tab content
     document.body.setAttribute("data-tab", tabId);
 
     // Select tab
     let tabList = container.querySelector("[role='tablist']");
     if (!tabList)
       return null;
 
     let previousTab = tabList.querySelector("[aria-selected]");
     previousTab.removeAttribute("aria-selected");
     previousTab.setAttribute("tabindex", -1);
 
     let tab = tabList.querySelector("li[data-tab='" + tabId + "']");
     tab.setAttribute("aria-selected", true);
     tab.setAttribute("tabindex", 0);
 
     let tabContentId = tab.getAttribute("aria-controls");
     let tabContent = document.getElementById(tabContentId);
 
-    // Select sub tabs
-    if (tab.hasAttribute("data-subtab"))
-      selectTabItem(tab.getAttribute("data-subtab"), tabContent, false);
-
     if (tab && focus)
       tab.focus();
 
     return tabContent;
   }
 
   function onHashChange()
   {
     let hash = location.hash.substr(1);
     if (!hash)
@@ skipping 51 matching lines @@
     E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false);
     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 tweaks = document.querySelectorAll("#tweaks li[data-pref]");
-    tweaks = Array.prototype.map.call(tweaks, (checkbox) =>
+    let customize = document.querySelectorAll("#customize li[data-pref]");
+    customize = Array.prototype.map.call(customize, (checkbox) =>
     {
       return checkbox.getAttribute("data-pref");
     });
-    for (let key of tweaks)
+    for (let key of customize)
     {
       getPref(key, (value) =>
       {
         onPrefMessage(key, value, true);
       });
     }
     ext.backgroundPage.sendMessage({
       type: "app.get",
       what: "features"
     },
     (features) =>
     {
       hidePref("show_devtools_panel", !features.devToolsPanel);
     });
 
-    let filterTextbox = document.querySelector("#custom-filters-add input");
-    placeholderValue = getMessage("options_customFilters_textbox_placeholder");
-    filterTextbox.setAttribute("placeholder", placeholderValue);
-    function addCustomFilters()
+    getDocLink("filterdoc", (link) =>
     {
-      let filterText = filterTextbox.value;
-      sendMessageHandleErrors({
-        type: "filters.add",
-        text: filterText
-      },
-      () =>
-      {
-        filterTextbox.value = "";
-      });
-    }
-    E("custom-filters-add").addEventListener("submit", (e) =>
+      E("link-filters").setAttribute("href", link);
+    });
+
+    getDocLink("subscriptions", (link) =>
     {
-      e.preventDefault();
-      addCustomFilters();
-    }, false);
+      setLinks("filter-lists-description", link);
+    });
+
+    E("custom-filters-raw").setAttribute("placeholder",
+      getMessage("options_customFilters_edit_placeholder", ["/ads/track/*"]));
 
     // Help tab
     getDocLink("faq", (link) =>
     {
       E("link-faq").setAttribute("href", link);
     });
     getDocLink("social_twitter", (link) =>
     {
       E("link-twitter").setAttribute("href", link);
     });
@@ skipping 112 matching lines @@
         ext.backgroundPage.sendMessage({
           type: "filters.get",
           subscriptionUrl: subscription.url
         },
         (filters) =>
         {
           for (let filter of filters)
             updateFilter(filter);
 
           isCustomFiltersLoaded = true;
+          updateCustomFiltersUi();
+          setCustomFiltersView("read");
         });
       }
     });
     loadRecommendations();
     ext.backgroundPage.sendMessage({
       type: "prefs.get",
       key: "subscriptions_exceptionsurl"
     },
     (url) =>
     {
@@ skipping 84 matching lines @@
       case "added":
         filter[timestampUI] = Date.now();
         updateFilter(filter);
         updateShareLink();
         break;
       case "loaded":
         populateLists();
         break;
       case "removed":
         let knownFilter = filtersMap[filter.text];
-        collections.whitelist.removeItem(knownFilter);
-        collections.customFilters.removeItem(knownFilter);
+        if (whitelistedDomainRegexp.test(knownFilter.text))
+          collections.whitelist.removeItem(knownFilter);
+        else
+          removeCustomFilter(filter.text);
+
         delete filtersMap[filter.text];
         updateShareLink();
         break;
     }
   }
 
   function onSubscriptionMessage(action, subscription)
   {
     if (subscription.url in subscriptionsMap)
     {
@@ skipping 250 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);
 }