Issue 5326 - General 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,
            setLinks, E */
 
 "use strict";
 
 {
   let subscriptionsMap = Object.create(null);
   let filtersMap = Object.create(null);
   let collections = Object.create(null);
   let acceptableAdsUrl = null;
+  let acceptableAdsPrivacyUrl = 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"],
@@ skipping 38 matching lines @@
   {
     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._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)
+      if (isAcceptableAds(a.url))
         return 1;
-      if (b.url == acceptableAdsUrl)
+      if (isAcceptableAds(b.url))
         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();
@@ skipping 13 matching lines @@
     {
       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 tooltip = listItem.querySelector("[data-tooltip]");
+      if (tooltip)
       {
-        let tooltipId = label.getAttribute("data-tooltip");
+        let tooltipId = tooltip.getAttribute("data-tooltip");
         tooltipId = tooltipId.replace("%value%", item.recommended);
-        label.setAttribute("data-tooltip", tooltipId);
+        if (getMessage(tooltipId))
+        {
+          tooltip.setAttribute("data-tooltip", tooltipId);
+        }
+        else
+        {
+          tooltip.parentNode.removeChild(tooltip);
+        }
       }
 
       for (let control of listItem.querySelectorAll(".control"))
       {
         if (control.hasAttribute("title"))
         {
           let titleValue = getMessage(control.getAttribute("title"));
           control.setAttribute("title", titleValue);
         }
       }
@@ skipping 54 matching lines @@
     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;
+      let displays = element.querySelectorAll(".display");
+      for (let j = 0; j < displays.length; j++)
+        displays[j].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)
+        if (isAcceptableAds(item.url) && this == collections.filterLists)
           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");
@@ skipping 87 matching lines @@
     index += (index == focusables.length - 1) ? -1 : 1;
 
     let nextElement = focusables[index];
     if (!nextElement)
       return false;
 
     nextElement.focus();
     return true;
   }
 
-  collections.popular = new Collection([
+  collections.protection = new Collection([
     {
-      id: "recommend-list-table"
+      id: "recommend-protection-list-table"
     }
   ]);
   collections.langs = new Collection([
     {
       id: "blocking-languages-table",
-      emptyText: ["options_dialog_language_added_empty"]
-    },
-    {
-      id: "blocking-languages-dialog-table",
-      emptyText: ["options_dialog_language_added_empty"]
+      emptyText: ["options_language_empty"]
     }
   ]);
   collections.allLangs = new Collection([
     {
-      id: "all-lang-table",
-      emptyText: ["options_dialog_language_other_empty"],
-      searchable: true
-    }
-  ]);
-  collections.acceptableAds = new Collection([
-    {
-      id: "acceptableads-table"
+      id: "all-lang-table-add",
+      emptyText: ["options_dialog_language_other_empty"]
     }
   ]);
   collections.custom = new Collection([
     {
       id: "custom-list-table"
     }
   ]);
   collections.whitelist = new Collection([
     {
       id: "whitelisting-table",
       emptyText: ["options_whitelist_empty_1", "options_whitelist_empty_2"]
     }
   ]);
   collections.filterLists = new Collection([
     {
       id: "all-filter-lists-table",
       useOriginalTitle: true
     }
   ]);
 
-  function toggleShowLanguage(subscription)
+  function addSubscription(subscription)
   {
-    if (subscription.recommended == "ads")
+    let collection = null;
+    if (subscription.recommended)
     {
-      if (subscription.disabled)
+      if (subscription.recommended == "ads")
       {
+        if (subscription.disabled == false)
+          collection = collections.langs;
+
         collections.allLangs.addItem(subscription);
-        collections.langs.removeItem(subscription);
       }
       else
       {
-        collections.allLangs.removeItem(subscription);
-        collections.langs.addItem(subscription);
+        collection = collections.protection;
       }
     }
-  }
+    else if (!isAcceptableAds(subscription.url))
+    {
+      collection = collections.custom;
+    }
 
-  function addSubscription(subscription)
-  {
-    let collection;
-    if (subscription.recommended)
-    {
-      if (subscription.recommended != "ads")
-        collection = collections.popular;
-      else if (subscription.disabled == false)
-        collection = collections.langs;
-      else
-        collection = collections.allLangs;
-    }
-    else if (subscription.url == acceptableAdsUrl)
-      collection = collections.acceptableAds;
-    else
-      collection = collections.custom;
+    if (collection)
+      collection.addItem(subscription);
 
-    collection.addItem(subscription);
     subscriptionsMap[subscription.url] = subscription;
-    toggleShowLanguage(subscription);
     updateTooltips();
   }
 
   function updateSubscription(subscription)
   {
     for (let name in collections)
       collections[name].updateItem(subscription);
 
-    toggleShowLanguage(subscription);
+    if (subscription.recommended == "ads")
+    {
+      if (subscription.disabled)
+        collections.langs.removeItem(subscription);
+      else
+        collections.langs.addItem(subscription);
+    }
+    else if (!subscription.recommended && !isAcceptableAds(subscription.url))
+    {
+      if (subscription.disabled == false)
+      {
+        collections.custom.addItem(subscription);
+        updateTooltips();
+      }
+      else
+      {
+        collections.custom.removeItem(subscription);
+      }
+    }
   }
 
   function updateFilter(filter)
   {
     let match = filter.text.match(whitelistedDomainRegexp);
     if (match && !filtersMap[filter.text])
     {
       filter.title = match[1];
       collections.whitelist.addItem(filter);
     }
@@ skipping 120 matching lines @@
         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":
         setCustomFiltersView("read");
         break;
+      case "change-language-subscription":
+        for (let key in subscriptionsMap)
+        {
+          let subscription = subscriptionsMap[key];
+          let subscriptionType = subscription.recommended;
+          if (subscriptionType == "ads" && subscription.disabled == false)
+          {
+            ext.backgroundPage.sendMessage({
+              type: "subscriptions.remove",
+              url: subscription.url
+            });
+            ext.backgroundPage.sendMessage({
+              type: "subscriptions.add",
+              url: findParentData(element, "access", false)
+            });
+            break;
+          }
+        }
+        break;
       case "close-dialog":
         closeDialog();
         break;
       case "edit-custom-filters":
         setCustomFiltersView("write");
         break;
       case "import-subscription": {
         let url = E("blockingList-textbox").value;
         addEnableSubscription(url);
         closeDialog();
@@ skipping 31 matching lines @@
         sendMessageHandleErrors({
           type: "filters.importRaw",
           text: E("custom-filters-raw").value,
           removeExisting: true
         },
         () =>
         {
           setCustomFiltersView("read");
         });
         break;
+      case "switch-acceptable-ads":
+        let {value} = element;
+        ext.backgroundPage.sendMessage({
+          type: value == "privacy" ? "subscriptions.add" :
+            "subscriptions.remove",
+          url: acceptableAdsPrivacyUrl
+        });
+        ext.backgroundPage.sendMessage({
+          type: value == "ads" ? "subscriptions.add" : "subscriptions.remove",
+          url: acceptableAdsUrl
+        });
+        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,
           url: findParentData(element, "access", false)
         });
@@ skipping 156 matching lines @@
       let tabId = tabIds.slice(0, i + 1).join("-");
       tabContent = selectTabItem(tabId, tabContent, true);
       if (!tabContent)
         break;
     }
   }
 
   function onDOMLoaded()
   {
     populateLists();
-    function onFindLanguageKeyUp()
-    {
-      let searchStyle = E("search-style");
-      if (!this.value)
-        searchStyle.innerHTML = "";
-      else
-      {
-        searchStyle.innerHTML = "#all-lang-table li:not([data-search*=\"" +
-          this.value.toLowerCase() + "\"]) { display: none; }";
-      }
-    }
 
     // Initialize navigation sidebar
     ext.backgroundPage.sendMessage({
       type: "app.get",
       what: "addonVersion"
     },
     (addonVersion) =>
     {
       E("abp-version").textContent = addonVersion;
     });
     getDocLink("releases", (link) =>
     {
       E("link-version").setAttribute("href", link);
     });
 
     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);
     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);
 
+    getDocLink("acceptable_ads_criteria", (link) =>
+    {
+      setLinks("enable-aa-description", link);
+    });
+
     // 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)
     {
       getPref(key, (value) =>
       {
@@ skipping 118 matching lines @@
 
   function closeDialog()
   {
     let dialog = E("dialog");
     dialog.setAttribute("aria-hidden", true);
     dialog.removeAttribute("aria-labelledby");
     document.body.removeAttribute("data-dialog");
     focusedBeforeDialog.focus();
   }
 
+  function setAcceptableAds()
+  {
+    let option = "none";
+    document.forms["acceptable-ads"].classList.remove("show-dnt-notification");
+    if (acceptableAdsUrl in subscriptionsMap)
+    {
+      option = "ads";
+    }
+    else if (acceptableAdsPrivacyUrl in subscriptionsMap)
+    {
+      option = "privacy";
+
+      if (!navigator.doNotTrack)
+        document.forms["acceptable-ads"].classList.add("show-dnt-notification");
+    }
+    document.forms["acceptable-ads"]["acceptable-ads"].value = option;
+  }
+
+  function isAcceptableAds(url)
+  {
+    return url == acceptableAdsUrl || url == acceptableAdsPrivacyUrl;
+  }
+
   function populateLists()
   {
     subscriptionsMap = Object.create(null);
     filtersMap = Object.create(null);
 
     // Empty collections and lists
     for (let property in collections)
       collections[property].clearAll();
 
     ext.backgroundPage.sendMessage({
@@ skipping 25 matching lines @@
       key: "subscriptions_exceptionsurl"
     },
     (url) =>
     {
       acceptableAdsUrl = url;
       addSubscription({
         url: acceptableAdsUrl,
         disabled: true
       });
 
-      // Load user subscriptions
       ext.backgroundPage.sendMessage({
-        type: "subscriptions.get",
-        downloadable: true
+        type: "prefs.get",
+        key: "subscriptions_exceptionsurl_privacy"
       },
-      (subscriptions) =>
+      (urlPrivacy) =>
       {
-        for (let subscription of subscriptions)
-          onSubscriptionMessage("added", subscription);
+        acceptableAdsPrivacyUrl = urlPrivacy;
+
+        // Load user subscriptions
+        ext.backgroundPage.sendMessage({
+          type: "subscriptions.get",
+          downloadable: true
+        },
+        (subscriptions) =>
+        {
+          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)
@@ skipping 87 matching lines @@
       case "lastDownload":
       case "title":
         updateSubscription(subscription);
         break;
       case "added":
         if (subscription.url in subscriptionsMap)
           updateSubscription(subscription);
         else
           addSubscription(subscription);
 
+        if (isAcceptableAds(subscription.url))
+          setAcceptableAds();
+
         collections.filterLists.addItem(subscription);
         break;
       case "removed":
-        if (subscription.url == acceptableAdsUrl || subscription.recommended)
+        if (subscription.recommended)
         {
           subscription.disabled = true;
           onSubscriptionMessage("disabled", subscription);
         }
         else
         {
-          collections.custom.removeItem(subscription);
           delete subscriptionsMap[subscription.url];
+          if (isAcceptableAds(subscription.url))
+          {
+            setAcceptableAds();
+          }
+          else
+          {
+            collections.custom.removeItem(subscription);
+          }
         }
         collections.filterLists.removeItem(subscription);
         break;
     }
 
     updateShareLink();
   }
 
   function hidePref(key, value)
   {
@@ skipping 70 matching lines @@
       {
         // Hide the share tab if a script on the share page would be blocked
         E("tab-share").hidden = isAnyBlocked;
       }
     }
 
     for (let sharedResource of shareResources)
       checkShareResource(sharedResource, onResult);
   }
 
-  function getMessages(id)
-  {
-    let messages = [];
-    for (let i = 1; true; i++)
-    {
-      let message = ext.i18n.getMessage(id + "_" + i);
-      if (!message)
-        break;
-
-      messages.push(message);
-    }
-    return messages;
-  }
-
   function updateTooltips()
   {
     let anchors = document.querySelectorAll(":not(.tooltip) > [data-tooltip]");
     for (let anchor of anchors)
     {
       let id = anchor.getAttribute("data-tooltip");
 
       let wrapper = document.createElement("div");
       wrapper.className = "tooltip";
       anchor.parentNode.replaceChild(wrapper, anchor);
       wrapper.appendChild(anchor);
 
-      let topTexts = getMessages(id);
-      let bottomTexts = getMessages(id + "_notes");
-
-      // We have to use native tooltips to avoid issues when attaching a tooltip
-      // to an element in a scrollable list or otherwise it might get cut off
-      if (anchor.hasAttribute("data-tooltip-native"))
-      {
-        let title = topTexts.concat(bottomTexts).join("\n\n");
-        anchor.setAttribute("title", title);
-        continue;
-      }
-
       let tooltip = document.createElement("div");
       tooltip.setAttribute("role", "tooltip");
 
-      let flip = anchor.getAttribute("data-tooltip-flip");
-      if (flip)
-        tooltip.className = "flip-" + flip;
-
-      let imageSource = anchor.getAttribute("data-tooltip-image");
-      if (imageSource)
-      {
-        let image = document.createElement("img");
-        image.src = imageSource;
-        image.alt = "";
-        tooltip.appendChild(image);
-      }
-
-      for (let topText of topTexts)
-      {
-        let paragraph = document.createElement("p");
-        paragraph.innerHTML = topText;
-        tooltip.appendChild(paragraph);
-      }
-      if (bottomTexts.length > 0)
-      {
-        let notes = document.createElement("div");
-        notes.className = "notes";
-        for (let bottomText of bottomTexts)
-        {
-          let paragraph = document.createElement("p");
-          paragraph.innerHTML = bottomText;
-          notes.appendChild(paragraph);
-        }
-        tooltip.appendChild(notes);
-      }
+      let paragraph = document.createElement("p");
+      paragraph.textContent = getMessage(id);
+      tooltip.appendChild(paragraph);
 
       wrapper.appendChild(tooltip);
     }
   }
 
   ext.onMessage.addListener((message) =>
   {
     switch (message.type)
     {
       case "app.respond":
@@ skipping 38 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);
 }