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-security-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.value;
+        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 setDntNotification(state)

[Thomas Greiner, 2017/08/22 16:08:57]

Let's move this into `setAcceptableAds()` as well to keep everything related to
changing the state of Acceptable Ads in one place.

[saroyanm, 2017/08/22 17:00:07]

Done.

+  {
+    if (state)
+      E("acceptable-ads").classList.add("show-dnt-notification");
+    else
+      E("acceptable-ads").classList.remove("show-dnt-notification");
+  }
+
+  function setAcceptableAds()
+  {
+    let optionsContainer = E("acceptable-ads");
+    optionsContainer.querySelector("[value='none']").checked = true;
+    for (let url in subscriptionsMap)
+    {
+      if (url == acceptableAdsPrivacyUrl)
+      {
+        optionsContainer.querySelector("[value='privacy']").checked = true;
+      }
+      if (url == acceptableAdsUrl)
+      {
+        optionsContainer.querySelector("[value='ads']").checked = true;
+        break;
+      }
+    }

[Thomas Greiner, 2017/08/22 16:08:58]

No need to loop through `subscriptionsMap` or tick `[value="none"]` by default.
Instead you could write it like this:

let option = "none";
if (acceptableAdsUrl in subscriptionsMap)
{
  option = "ads";
}
else if (acceptableAdsPrivacyUrl in subscriptionsMap)
{
  option = "privacy";
}
document.forms["acceptable-ads"]["acceptable-ads"].value = option;

[saroyanm, 2017/08/22 17:00:09]

Done.

+  }
+
+  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();
+
+        if (subscription.url == acceptableAdsPrivacyUrl)
+        {
+          if (!navigator.doNotTrack)
+            setDntNotification(true);
+        }
+
         collections.filterLists.addItem(subscription);
         break;
       case "removed":
-        if (subscription.url == acceptableAdsUrl || subscription.recommended)
+        if (subscription.recommended)
         {
           subscription.disabled = true;
           onSubscriptionMessage("disabled", subscription);
         }
+        else if (isAcceptableAds(subscription.url))
+        {
+          if (subscription.url == acceptableAdsPrivacyUrl)
+          {
+            setDntNotification(false);
+          }
+
+          delete subscriptionsMap[subscription.url];

[Thomas Greiner, 2017/08/22 16:08:58]

Detail: This happens whenever a non-recommended subscription gets removed so
rather than writing

if (...)
else if (...)
  delete
else
  delete

you could avoid this duplication by changing the structure to

if (...)
else
  if (...)
  else
  delete

[saroyanm, 2017/08/22 17:00:09]

Done.

+          setAcceptableAds();
+        }
         else
         {
           collections.custom.removeItem(subscription);
           delete subscriptionsMap[subscription.url];
         }
         collections.filterLists.removeItem(subscription);
         break;
     }
 
     updateShareLink();
@@ skipping 74 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);
 }