Issue 5482 - Sidebar and about ABP dialog

new-options.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
- * Copyright (C) 2006-2017 eyeo GmbH
+ * Copyright (C) 2006-present 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 subscriptionToChange = 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;
-  const privacySubscriptions = ["privacy", "social"];
-  const moreSubscriptions = ["malware", "anti-adblock"];
 
   function Collection(details)
   {
     this.details = details;
     this.items = [];
   }
 
   Collection.prototype._setEmpty = function(table, texts)
   {
     let placeholders = table.querySelectorAll(".empty-placeholder");
@@ skipping 19 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_aa_tracking_label");
-    if (item.url === acceptableAdsPrivacyUrl)
-      return getMessage("options_aa_no_tracking_label");
     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 || a.url == acceptableAdsPrivacyUrl)
+      if (isAcceptableAds(a.url))
         return 1;
-      if (b.url == acceptableAdsUrl || b.url == acceptableAdsPrivacyUrl)
+      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 14 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 tooltip = listItem.querySelector("[data-tooltip]");
-      if (tooltip && tooltip.hasAttribute("data-tooltip"))
-      {
-        if (item.recommended)
-        {
-          let tooltipId = tooltip.getAttribute("data-tooltip");
-          tooltipId = tooltipId.replace("%value%", item.recommended);
+      if (tooltip)
+      {
+        let tooltipId = tooltip.getAttribute("data-tooltip");
+        tooltipId = tooltipId.replace("%value%", item.recommended);
+        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 55 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 ||
-          item.url == acceptableAdsPrivacyUrl) &&
-          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.security = new Collection([
-    {
-      id: "recommend-security-list-table"
+  collections.protection = new Collection([
+    {
+      id: "recommend-protection-list-table"
     }
   ]);
   collections.langs = new Collection([
     {
       id: "blocking-languages-table",
-      emptyText: ["options_language_empty"],
-      switchSingleEntryControl: true
+      emptyText: ["options_language_empty"]
     }
   ]);
   collections.allLangs = new Collection([
     {
       id: "all-lang-table-add",
       emptyText: ["options_dialog_language_other_empty"]
-    },
-    {
-      id: "all-lang-table-change",
-      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 toggleShowRecommendation(subscription)
-  {
+  function addSubscription(subscription)
+  {
+    let collection = null;
+    if (subscription.recommended)
+    {
+      if (subscription.recommended == "ads")
+      {
+        if (subscription.disabled == false)
+          collection = collections.langs;
+
+        collections.allLangs.addItem(subscription);
+      }
+      else
+      {
+        collection = collections.protection;
+      }
+    }
+    else if (!isAcceptableAds(subscription.url))
+    {
+      collection = collections.custom;
+    }
+
+    if (collection)
+      collection.addItem(subscription);
+
+    subscriptionsMap[subscription.url] = subscription;
+    updateTooltips();
+  }
+
+  function updateSubscription(subscription)
+  {
+    for (let name in collections)
+      collections[name].updateItem(subscription);
+
     if (subscription.recommended == "ads")
     {
       if (subscription.disabled)
         collections.langs.removeItem(subscription);
       else
         collections.langs.addItem(subscription);
     }
-
-    if (moreSubscriptions.indexOf(subscription.recommended) >= 0 &&
-      subscription.disabled == false)
-    {
-      collections.custom.addItem(subscription);
-      updateTooltips();
-    }
-  }
-
-  function addSubscription(subscription)
-  {
-    let collection;
-    if (subscription.recommended)
-    {
-      if (privacySubscriptions.indexOf(subscription.recommended) >= 0)
-        collection = collections.security;
-      else if (subscription.recommended == "ads")
-      {
-        if (subscription.disabled == false)
-          collection = collections.langs;
-        else
-          collection = collections.allLangs;
-      }
-      else if (subscription.disabled == false)
-      {
-        collection = collections.custom;
+    else if (!subscription.recommended && !isAcceptableAds(subscription.url))
+    {
+      if (subscription.disabled == false)
+      {
+        collections.custom.addItem(subscription);
+        updateTooltips();
       }
       else
       {
-        subscriptionsMap[subscription.url] = subscription;
-        return;
-      }
-    }
-    else if (subscription.url == acceptableAdsUrl ||
-      subscription.url == acceptableAdsPrivacyUrl)
-    {
-      return;
-    }
-    else
-      collection = collections.custom;
-
-    collection.addItem(subscription);
-    subscriptionsMap[subscription.url] = subscription;
-    toggleShowRecommendation(subscription);
-    updateTooltips();
-  }
-
-  function updateSubscription(subscription)
-  {
-    for (let name in collections)
-      collections[name].updateItem(subscription);
-
-    toggleShowRecommendation(subscription);
+        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);
+      if (isCustomFiltersLoaded)
+      {
+        let text = getMessage("options_whitelist_notification", [filter.title]);
+        showNotification(text);
+      }
     }
     else
     {
       customFilters.push(filter.text);
       if (isCustomFiltersLoaded)
         updateCustomFiltersUi();
     }
 
     filtersMap[filter.text] = filter;
   }
@@ skipping 97 matching lines @@
         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 "block-all":
-        ext.backgroundPage.sendMessage({
-          type: "subscriptions.remove",
-          url: acceptableAdsPrivacyUrl
-        });
-        ext.backgroundPage.sendMessage({
-          type: "subscriptions.remove",
-          url: acceptableAdsUrl
-        });
-        setDntNotification(false);
-        break;
       case "cancel-custom-filters":
         setCustomFiltersView("read");
         break;
       case "change-language-subscription":
-        ext.backgroundPage.sendMessage({
-          type: "subscriptions.remove",
-          url: subscriptionToChange
-        });
-        ext.backgroundPage.sendMessage({
-          type: "subscriptions.add",
-          url: findParentData(element, "access", false)
-        });
+        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 "enable-aa":
-        ext.backgroundPage.sendMessage({
-          type: "subscriptions.remove",
-          url: acceptableAdsPrivacyUrl
-        });
-        ext.backgroundPage.sendMessage({
-          type: "subscriptions.add",
-          url: acceptableAdsUrl
-        });
-        setDntNotification(false);
-        break;
-      case "enable-privacy-aa":
-        ext.backgroundPage.sendMessage({
-          type: "subscriptions.remove",
-          url: acceptableAdsUrl
-        });
-        ext.backgroundPage.sendMessage({
-          type: "subscriptions.add",
-          url: acceptableAdsPrivacyUrl
-        });
+      case "hide-notification":
+        hideNotification();
         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"))
           listItem.classList.add("show-context-menu");
         break;
       }
       case "open-dialog": {
         let dialog = findParentData(element, "dialog", false);
         openDialog(dialog);
         break;
       }
       case "remove-filter":
         ext.backgroundPage.sendMessage({
           type: "filters.remove",
           text: findParentData(element, "access", false)
         });
         break;
       case "remove-subscription":
         ext.backgroundPage.sendMessage({
           type: "subscriptions.remove",
           url: findParentData(element, "access", false)
         });
-        break;
-      case "save-change-subscription":
-        subscriptionToChange = findParentData(element, "access", false);
         break;
       case "save-custom-filters":
         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);
+        switchTab(element.getAttribute("href").substr(1));
         break;
       case "toggle-disable-subscription":
         ext.backgroundPage.sendMessage({
           type: "subscriptions.toggle",
           keepInstalled: true,
           url: findParentData(element, "access", false)
         });
         break;
       case "toggle-pref":
         ext.backgroundPage.sendMessage({
@@ skipping 92 matching lines @@
     let container = findParentData(element, "action", true);
     if (!container || !container.hasAttribute("data-keys"))
       return;
 
     let keys = container.getAttribute("data-keys").split(" ");
     if (keys.indexOf(key) < 0)
       return;
 
     if (element.getAttribute("role") == "tab")
     {
+      let parent = element.parentElement;
       if (key == "ArrowLeft" || key == "ArrowUp")
-        element = element.previousElementSibling || container.lastElementChild;
+        parent = parent.previousElementSibling || container.lastElementChild;
       else if (key == "ArrowRight" || key == "ArrowDown")
-        element = element.nextElementSibling || container.firstElementChild;
+        parent = parent.nextElementSibling || container.firstElementChild;
+      element = parent.firstElementChild;
     }
 
     let actions = container.getAttribute("data-action").split(",");
     for (let action of actions)
     {
       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']");
     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 + "']");
+    let tab = tabList.querySelector("a[href='#" + tabId + "']");
     tab.setAttribute("aria-selected", true);
     tab.setAttribute("tabindex", 0);
 
     let tabContentId = tab.getAttribute("aria-controls");
     let tabContent = document.getElementById(tabContentId);
 
     if (tab && focus)
       tab.focus();
 
     return tabContent;
@@ skipping 84 matching lines @@
 
     getDocLink("subscriptions", (link) =>
     {
       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("adblock_plus_report_issue", (link) =>
+    {
+      setLinks("report-issue", link);
+    });
+    getDocLink("adblock_plus_report_ad", (link) =>
+    {
+      setLinks("report-ad", link);
+    });
+    getDocLink("adblock_plus_report_bug", (link) =>
+    {
+      setLinks("report-bug", link);
+    });
+    getDocLink("reporter_other_link", (link) =>
+    {
+      setLinks("report-forum", link);
     });
     getDocLink("social_twitter", (link) =>
     {
-      E("link-twitter").setAttribute("href", link);
+      E("twitter").setAttribute("href", link);
     });
     getDocLink("social_facebook", (link) =>
     {
-      E("link-facebook").setAttribute("href", link);
+      E("facebook").setAttribute("href", link);
     });
     getDocLink("social_gplus", (link) =>
     {
-      E("link-gplus").setAttribute("href", link);
-    });
-    getDocLink("social_renren", (link) =>
-    {
-      E("link-renren").setAttribute("href", link);
+      E("google-plus").setAttribute("href", link);
     });
     getDocLink("social_weibo", (link) =>
     {
-      E("link-weibo").setAttribute("href", link);
-    });
-
-    // Set forum link
-    ext.backgroundPage.sendMessage({
-      type: "app.get",
-      what: "platform"
-    },
-    (platform) =>
-    {
-      ext.backgroundPage.sendMessage({
-        type: "app.get",
-        what: "application"
-      },
-      (application) =>
-      {
-        if (platform == "chromium" && application != "opera")
-          application = "chrome";
-
-        getDocLink(application + "_support", (link) =>
-        {
-          E("link-forum").setAttribute("href", link);
-        });
-      });
+      E("weibo").setAttribute("href", link);
     });
 
     E("dialog").addEventListener("keydown", function(e)
     {
       switch (getKey(e))
       {
         case "Escape":
           closeDialog();
           break;
         case "Tab":
@@ skipping 36 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)
-  {
-    if (state)
-      E("acceptable-ads").classList.add("show-dnt-notification");
-    else
-      E("acceptable-ads").classList.remove("show-dnt-notification");
+  function showNotification(text)
+  {
+    E("notification").setAttribute("aria-hidden", false);
+    E("notification-text").textContent = text;
+    setTimeout(hideNotification, 3000);
+  }
+
+  function hideNotification()
+  {
+    E("notification").setAttribute("aria-hidden", true);
+    E("notification-text").textContent = "";
+  }
+
+  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();
@@ skipping 34 matching lines @@
         disabled: true
       });
 
       ext.backgroundPage.sendMessage({
         type: "prefs.get",
         key: "subscriptions_exceptionsurl_privacy"
       },
       (urlPrivacy) =>
       {
         acceptableAdsPrivacyUrl = urlPrivacy;
-        addSubscription({
-          url: acceptableAdsPrivacyUrl,
-          disabled: true
-        });
 
         // Load user subscriptions
         ext.backgroundPage.sendMessage({
           type: "subscriptions.get",
           downloadable: true
         },
         (subscriptions) =>
         {
           for (let subscription of subscriptions)
             onSubscriptionMessage("added", subscription);
@@ skipping 96 matching lines @@
       case "lastDownload":
       case "title":
         updateSubscription(subscription);
         break;
       case "added":
         if (subscription.url in subscriptionsMap)
           updateSubscription(subscription);
         else
           addSubscription(subscription);
 
-        if (subscription.url == acceptableAdsUrl)
-          document.querySelector(
-            "[name='acceptable-ads'][value='tracking']").checked = true;
-        if (subscription.url == acceptableAdsPrivacyUrl)
-        {
-          document.querySelector(
-            "[name='acceptable-ads'][value='no-tracking']").checked = true;
-          if (!navigator.doNotTrack)
-            setDntNotification(true);
-        }
+        if (isAcceptableAds(subscription.url))
+          setAcceptableAds();
 
         collections.filterLists.addItem(subscription);
         break;
       case "removed":
-        if (subscription.url == acceptableAdsUrl ||
-            subscription.url == acceptableAdsPrivacyUrl ||
-            subscription.recommended &&
-            moreSubscriptions.indexOf(subscription.recommended) == -1)
+        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;
     }
 
   }
 
   function hidePref(key, value)
   {
     let element = document.querySelector("[data-pref='" + key + "']");
@@ skipping 45 matching lines @@
         break;
     }
 
     let checkbox = document.querySelector(
       "[data-pref='" + key + "'] button[role='checkbox']"
     );
     if (checkbox)
       checkbox.setAttribute("aria-checked", value);
   }
 
-  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 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);
 }