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
@@ skipping 20 matching lines @@
     ["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 whitelistedDomainRegexp = /^@@\|\|([^/:]+)\^\$document$/;
+
   function Collection(details)
   {
     this.details = details;
     this.items = [];
   }
 
   Collection.prototype._setEmpty = function(table, text)
   {
     let placeholder = table.querySelector(".empty-placeholder");
     if (text && !placeholder)
@@ skipping 42 matching lines @@
       if (b.url == acceptableAdsUrl)
         return -1;
 
       let aTitle = this._getItemTitle(a, 0).toLowerCase();
       let bTitle = this._getItemTitle(b, 0).toLowerCase();
       return aTitle.localeCompare(bTitle);
     });
 
     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)]);
+        let beforeIndex = this.items.indexOf(item) + (detail.useHeader == true);
+        table.insertBefore(listItem, table.children[beforeIndex]);
       }
       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 47 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.setAttribute("disabled", true);
       }
 
-      let dateElement = element.querySelector(".date");
-      let timeElement = element.querySelector(".time");
-      if (dateElement && timeElement)
+      let lastUpdateElem = element.querySelector(".last-update");
+      if (lastUpdateElem)
       {
         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 timer = setInterval(lastUpdateLive, 60000);
+          let lastUpdate = item.lastDownload * 1000;
+          function lastUpdateLive()
+          {
+            let sinceUpdate = Date.now() - lastUpdate;
+            if(sinceUpdate > 86400000)
+            {
+              let lastUpdateDate = new Date(item.lastDownload * 1000);
+              let monthName = lastUpdateDate.toLocaleString("en-US", 

[saroyanm, 2017/06/11 15:40:12]

For reference: Make sense to find a way to pass the Language code references to
here and also to HTML Doc.

[saroyanm, 2017/06/12 16:44:42]

Create a function in i18n, that returns month: "short" according to the passed
parameters:
ex.: in i18n.js: function toLocaleString(date, options) {return
date.toLocaleString(locale, options);}

[saroyanm, 2017/06/14 10:59:00]

I used different approach while we do have the value set for the HTML doc, so we
can refer to DOM API to retrieve it.

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

This looks like a race condition because the "lang" attribute might not have
been set at this point yet.

+                { month: "short" });
+              let day = lastUpdateDate.getDate();
+              day = day < 10 ? "0" + day : day;
+              lastUpdateElem.textContent = day + " " + monthName + " " + 

[saroyanm, 2017/06/12 16:44:42]

Note: Make sense to discuss if we need to localize "DD MMM YYYY" format.

+                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");
+            }
+          }
+          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 70 matching lines @@
     {
       id: "custom-list-table"
     }
   ]);
   collections.whitelist = new Collection([
     {
       id: "whitelisting-table",
       emptyText: "options_whitelisted_empty"
     }
   ]);
-  collections.customFilters = new Collection([
-    {
-      id: "custom-filters-table",
-      emptyText: "options_customFilters_empty"
-    }
-  ]);
   collections.filterLists = new Collection([
     {
       id: "all-filter-lists-table",
-      useOriginalTitle: true
+      useOriginalTitle: true,
+      useHeader: true
     }
   ]);
 
   function toggleShowLanguage(subscription)
   {
     if (subscription.recommended == "ads")
     {
       if (subscription.disabled)
       {
         collections.allLangs.addItem(subscription);
@@ skipping 33 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);
+      addCustomFilter(filter);
 
     filtersMap[filter.text] = filter;
   }
 
+  function addCustomFilter(filter)
+  {
+    customFiltersView("read");
+
+    // Note: document.createElement("option") is unreliable in Opera

[saroyanm, 2017/06/11 15:40:12]

I'm not sure if this still true, I took this from current(old) options page
implementation.

[saroyanm, 2017/06/12 16:44:42]

Check if it's still an issue in the supported Opera versions.

[saroyanm, 2017/06/14 10:59:00]

Done.

This was added back in 2012 ->
https://hg.adblockplus.org/adblockpluschrome/rev/0fca6c3f3462#l1.62 

Anyway I don't see benefit of using document.createElement as we can pass text
and value into the constructor of Option() API and I think the comment itself is
redundant.

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

Acknowledged.

+    let elt = new Option();
+    elt.text = filter.text;
+    elt.value = filter.text;
+    E("custom-filters-box").appendChild(elt);
+  }
+
+  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");
+  }
+
   function loadRecommendations()
   {
     fetch("subscriptions.xml")
       .then((response) =>
       {
         return response.text();
       })
       .then((text) =>
       {
         let doc = new DOMParser().parseFromString(text, "application/xml");
@@ skipping 83 matching lines @@
         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");
+        customFiltersView("read");
         break;
       case "cancel-domain-exception":
         E("whitelisting-textbox").value = "";
         document.querySelector("#whitelisting .controls").classList
           .remove("mode-edit");
         break;
       case "close-dialog":
         closeDialog();
         break;
       case "edit-custom-filters":
-        editCustomFilters();
+        customFiltersView("write");
         break;
       case "edit-domain-exception":
         document.querySelector("#whitelisting .controls").classList
           .add("mode-edit");
         E("whitelisting-textbox").focus();
         break;
       case "import-subscription": {
         let url = E("blockingList-textbox").value;
         addEnableSubscription(url);
         closeDialog();
@@ skipping 21 matching lines @@
           text: findParentData(element, "access", false)
         });
         break;
       case "remove-subscription":
         ext.backgroundPage.sendMessage({
           type: "subscriptions.remove",
           url: findParentData(element, "access", false)
         });
         break;
       case "save-custom-filters":
         sendMessageHandleErrors({

[saroyanm, 2017/06/11 15:40:12]

I still need to figure out how to get exact filters that cause errors, while
this is not implemented for the test server I'll check the actual implementation
and update accordingly.
(We can also make that a separate review not to block current one)

[saroyanm, 2017/06/12 16:44:42]

Separate this into another review.

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

Acknowledged.

           type: "filters.importRaw",
           text: E("custom-filters-raw").value,
           removeExisting: true
         },
         () =>
         {
-          E("custom-filters").classList.remove("mode-edit");
+          customFiltersView("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)
+  {
+    switch (mode)
+    {
+      case "read":
+        if (E("custom-filters-box").options.length == 0)
+        {
+          customFiltersView("empty");
+        }
+        else
+        {
+          E("custom-filters").classList.add("mode-view");
+          E("custom-filters").classList.remove("mode-edit");
+          E("custom-filters").classList.remove("mode-empty");
+        }
+        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 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;
 
@@ skipping 65 matching lines @@
     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 49 matching lines @@
     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();
     }, 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.preventDefault();
-      addCustomFilters();
-    }, false);
+      E("link-filters").setAttribute("href", link);
+    });
 
     // Help tab
     getDocLink("faq", (link) =>
     {
       E("link-faq").setAttribute("href", link);
     });
     getDocLink("social_twitter", (link) =>
     {
       E("link-twitter").setAttribute("href", link);
     });
@@ skipping 206 matching lines @@
     {
       case "added":
         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);
 }