Issue 3870 - Rewrite legacy options page to use async messages

options.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2016 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/>.
  */
 
+"use strict";
+
 /**
  * Creates a wrapping function used to conveniently send a type of message.
  *
  * @param {Object} baseMessage The part of the message that's always sent
  * @param {..string} paramKeys Any message keys that have dynamic values. The
  *                             returned function will take the corresponding
  *                             values as arguments.
  * @return The generated messaging function, optionally taking any values as
  *         specified by the paramKeys and finally an optional callback.
  *         (Although the value arguments are optional their index must be
@@ skipping 19 matching lines @@
     if (arguments.length > 0)
     {
       var lastArg = arguments[arguments.length - 1];
       if (typeof lastArg == "function")
         callback = lastArg;
 
       for (var i = 0; i < arguments.length - (callback ? 1 : 0); i++)
         message[paramKeys[i]] = arguments[i];
     }
 
     ext.backgroundPage.sendMessage(message, callback);

[kzar, 2016/04/03 10:55:06]

(I considered having this function return a promise instead of taking a
callback, but it didn't seem to improve anything.)

   };
 }
 
 var getDocLink = wrapper({type: "app.get", what: "doclink"}, "link");

[Sebastian Noack, 2016/04/03 15:05:14]

This is redundant with getDocLink() from common.js

[kzar, 2016/04/03 15:50:19]

I don't think adblockplusui/common.js is included by the legacy options page.

[Sebastian Noack, 2016/04/03 17:18:03]

Given that common.js is already used by the first run page, you might just want
make the options page use it as well. However, if it would only be for that
function I wouldn't insist.

[kzar, 2016/04/05 11:10:14]

I think I prefer to leave this as it is.

 var getInfo = wrapper({type: "app.get"}, "what");
 var getPref = wrapper({type: "prefs.get"}, "key");
 var togglePref = wrapper({type: "prefs.toggle"}, "key");
 var getSubscriptions = wrapper({type: "subscriptions.get"},
                                "downloadable", "special");
 var removeSubscription = wrapper({type: "subscriptions.remove"}, "url");
 var addSubscription = wrapper({type: "subscriptions.add"},
                                 "url", "title", "homepage");
 var toggleSubscription = wrapper({type: "subscriptions.toggle"},
                                  "url", "keepInstalled");
 var updateSubscription = wrapper({type: "subscriptions.update"}, "url");
-var isSubscriptionDownloading = wrapper({type: "subscriptions.isDownloading"},
-                                        "url");
-var importRawFilters = wrapper({type: "filters.importRaw"}, "text");
+var importRawFilters = wrapper({type: "filters.importRaw"},
+                               "text", "removeExisting");
 var addFilter = wrapper({type: "filters.add"}, "text");
 var getFilters = wrapper({type: "filters.get"}, "subscriptionUrl");
 var removeFilter = wrapper({type: "filters.remove"}, "text");
 
 var i18n = ext.i18n;
 var whitelistedDomainRegexp = /^@@\|\|([^\/:]+)\^\$document$/;
 var delayedSubscriptionSelection = null;
 
+var acceptableAdsUrl;
+
 // Loads options and sets UI elements accordingly
 function loadOptions()
 {
   // Set page title to i18n version of "Adblock Plus Options"
   document.title = i18n.getMessage("options");
 
   // Set links
-  getPref("subscriptions_exceptionsurl", function (url)
-  {
-    $("#acceptableAdsLink").attr("href", url);
-  });
-  getDocLink("acceptable_ads", function (url)
+  getPref("subscriptions_exceptionsurl", function(url)
+  {
+    acceptableAdsUrl = url;
+    $("#acceptableAdsLink").attr("href", acceptableAdsUrl);
+  });
+  getDocLink("acceptable_ads", function(url)
   {
     $("#acceptableAdsDocs").attr("href", url);
   });
-  getDocLink("filterdoc", function (url)
+  getDocLink("filterdoc", function(url)
   {
     setLinks("filter-must-follow-syntax", url);
   });
-  getInfo("application", function (application)
-  {
-    getInfo("platform", function (platform)
+  getInfo("application", function(application)
+  {
+    getInfo("platform", function(platform)
     {
       if (platform == "chromium" && application != "opera")
         application = "chrome";
 
-      getDocLink(application + "_support", function (url)
+      getDocLink(application + "_support", function(url)
       {
         setLinks("found-a-bug", url);
       });
     });
   });
 
   // Add event listeners
   $("#updateFilterLists").click(updateFilterLists);
   $("#startSubscriptionSelection").click(startSubscriptionSelection);
   $("#subscriptionSelector").change(updateSubscriptionSelection);
@@ skipping 17 matching lines @@
   initCheckbox("shouldShowBlockElementMenu");
   initCheckbox("show_devtools_panel");
   initCheckbox("shouldShowNotifications", {
     key: "notifications_ignoredcategories",
     get: function(ignoredcategories)
     {
       return ignoredcategories.indexOf("*") == -1;
     }
   });
 
-  getInfo("platform", function (platform)

[Sebastian Noack, 2016/04/03 15:05:14]

Please use app.get[features] like the new options page does.

[kzar, 2016/04/03 15:50:19]

Done.

-  {
-    if (platform != "chromium")
+  getInfo("features", function(features)
+  {
+    if (!features.devToolsPanel)
       document.getElementById("showDevtoolsPanelContainer").hidden = true;
   });
-  getPref("notifications_showui", function (notifications_showui)
+  getPref("notifications_showui", function(notifications_showui)
   {
     if (!notifications_showui)
       document.getElementById("shouldShowNotificationsContainer").hidden = true;
   });
 
   // Register listeners in the background message responder
   ext.backgroundPage.sendMessage({
     type: "app.listen",
-    filter: ["addSubscription"]
+    filter: ["addSubscription", "focusSection"]
   });
   ext.backgroundPage.sendMessage(
   {
     type: "filters.listen",
     filter: ["added", "loaded", "removed"]
   });
   ext.backgroundPage.sendMessage(
   {
     type: "prefs.listen",
     filter: ["notifications_ignoredcategories", "notifications_showui",
-        "safari_contentblocker", "show_devtools_panel",
-        "shouldShowBlockElementMenu"]
+             "safari_contentblocker", "show_devtools_panel",
+             "shouldShowBlockElementMenu"]
   });
   ext.backgroundPage.sendMessage(
   {
     type: "subscriptions.listen",
     filter: ["added", "disabled", "homepage", "lastDownload", "removed",
-             "title"]
+             "title", "downloadStatus", "downloading"]
   });
 
   // Load recommended subscriptions
   loadRecommendations();
 
   // Show user's filters
   reloadFilters();
 }
 $(loadOptions);
 
 // Reloads the displayed subscriptions and filters
 function reloadFilters()
 {
   // Load user filter URLs
   var container = document.getElementById("filterLists");
   while (container.lastChild)
     container.removeChild(container.lastChild);
 
-  getPref("subscriptions_exceptionsurl", function (acceptableAdsUrl)
-  {
-    getSubscriptions(true, false, function(subscriptions)
-    {
-      for (var i = 0; i < subscriptions.length; i++)
-      {
-        var subscription = subscriptions[i];
-        if (subscription.url == acceptableAdsUrl)
-          $("#acceptableAds").prop("checked", !subscription.disabled);
-        else
-          addSubscriptionEntry(subscription);
-      }
-    });
+  getSubscriptions(true, false, function(subscriptions)
+  {
+    for (var i = 0; i < subscriptions.length; i++)
+    {
+      var subscription = subscriptions[i];
+      if (subscription.url == acceptableAdsUrl)
+        $("#acceptableAds").prop("checked", !subscription.disabled);
+      else
+        addSubscriptionEntry(subscription);
+    }
   });
 
   // User-entered filters
   getSubscriptions(false, true, function(subscriptions)
   {
     clearListBox("userFiltersBox");
     clearListBox("excludedDomainsBox");
 
     for (var i = 0; i < subscriptions.length; i++)
       getFilters(subscriptions[i].url, function(filters)
       {
         for (var j = 0; j < filters.length; j++)
         {
           var filter = filters[j].text;
           if (whitelistedDomainRegexp.test(filter))
             appendToListBox("excludedDomainsBox", RegExp.$1);
           else
             appendToListBox("userFiltersBox", filter);
         }
       });
   });
 }
 
 function initCheckbox(id, descriptor)
 {
   var checkbox = document.getElementById(id);
   var key = descriptor && descriptor.key || id;
-  getPref(key, function (value)
+  getPref(key, function(value)
   {
     if (descriptor && descriptor.get)
       checkbox.checked = descriptor.get(value);
     else
       checkbox.checked = value;
   });
 
   checkbox.addEventListener("click", function()
   {
     if (descriptor && descriptor.toggle)
@@ skipping 134 matching lines @@
     addSubscription(url, title, null);
   }
 
   $("#addSubscriptionContainer").hide();
   $("#customSubscriptionContainer").hide();
   $("#addSubscriptionButton").show();
 }
 
 function toggleAcceptableAds()
 {
-  getPref("subscriptions_exceptionsurl", function (url)
-  {
-    toggleSubscription(url, true);
-  });
+  toggleSubscription(acceptableAdsUrl, true);
 }
 
 function findSubscriptionElement(subscription)
 {
   var children = document.getElementById("filterLists").childNodes;
   for (var i = 0; i < children.length; i++)
     if (children[i]._subscription.url == subscription.url)
       return children[i];
   return null;
 }
@@ skipping 12 matching lines @@
     title.href = subscription.homepage;
   else
     title.href = subscription.url;
 
   var enabled = element.getElementsByClassName("subscriptionEnabled")[0];
   enabled.checked = !subscription.disabled;
 
   var lastUpdate = element.getElementsByClassName("subscriptionUpdate")[0];
   lastUpdate.classList.remove("error");
 
-  if (subscription.downloadStatus &&
-      subscription.downloadStatus != "synchronize_ok")
+  var downloadStatus = subscription.downloadStatus;
+  if (subscription.isDownloading)
+  {
+    lastUpdate.textContent = i18n.getMessage("filters_subscription_lastDownload_inProgress");
+  }
+  else if (downloadStatus && downloadStatus != "synchronize_ok")
   {
      var map =
      {
        "synchronize_invalid_url": "filters_subscription_lastDownload_invalidURL",
        "synchronize_connection_error": "filters_subscription_lastDownload_connectionError",
        "synchronize_invalid_data": "filters_subscription_lastDownload_invalidData",
        "synchronize_checksum_mismatch": "filters_subscription_lastDownload_checksumMismatch"
      };
-     if (subscription.downloadStatus in map)
-       lastUpdate.textContent = i18n.getMessage(map[subscription.downloadStatus]);
+     if (downloadStatus in map)
+       lastUpdate.textContent = i18n.getMessage(map[downloadStatus]);
      else
-       lastUpdate.textContent = subscription.downloadStatus;
+       lastUpdate.textContent = downloadStatus;
      lastUpdate.classList.add("error");
   }
   else if (subscription.lastDownload > 0)
   {
     var timeDate = i18n_timeDateStrings(subscription.lastDownload * 1000);
     var messageID = (timeDate[1] ? "last_updated_at" : "last_updated_at_today");
     lastUpdate.textContent = i18n.getMessage(messageID, timeDate);
   }
 }
 
 function onSubscriptionMessage(action, subscription)
 {
+  var element = findSubscriptionElement(subscription);
+
   switch (action)
   {
-    case "title":
     case "disabled":
+    case "downloading":
+    case "downloadStatus":
     case "homepage":
     case "lastDownload":
-    case "downloadStatus":
-      var element = findSubscriptionElement(subscription);
+    case "title":
       if (element)
         updateSubscriptionInfo(element, subscription);
       break;
     case "added":
-      getPref("subscriptions_exceptionsurl", function (acceptableAdsUrl)
-      {
-        if (subscription.url == acceptableAdsUrl)
-          $("#acceptableAds").prop("checked", true);
-        else if (!findSubscriptionElement(subscription))
-          addSubscriptionEntry(subscription);
-      });
+      if (subscription.url == acceptableAdsUrl)
+        $("#acceptableAds").prop("checked", true);
+      else if (!element)
+        addSubscriptionEntry(subscription);
       break;
     case "removed":
-      getPref("subscriptions_exceptionsurl", function (acceptableAdsUrl)
-      {
-        if (subscription.url == acceptableAdsUrl)
-        {
-          $("#acceptableAds").prop("checked", false);
-        }
-        else
-        {
-          var element = findSubscriptionElement(subscription);
-          if (element)
-            element.parentNode.removeChild(element);
-        }
-      });
+      if (subscription.url == acceptableAdsUrl)
+        $("#acceptableAds").prop("checked", false);
+      else if (element)
+        element.parentNode.removeChild(element);
       break;
   }
 }
 
 function onPrefMessage(key, value)
 {
-  if (key == "notifications_showui")

[Sebastian Noack, 2016/04/03 15:05:14]

Nit: There will be soon a third case for safari_content_blockers. So how about
using a switch/case like here like I did for the new options page?

[kzar, 2016/04/03 15:50:19]

Done.

-  {
-    document.getElementById("shouldShowNotificationsContainer").hidden = !value;
-    return;
-  }
-  else if (key == "notifications_ignoredcategories")
-  {
-    key = "shouldShowNotifications";
-    value = value.indexOf("*") == -1;
+  switch (key)
+  {
+    case "notifications_showui":
+      document.getElementById("shouldShowNotificationsContainer").hidden = !value;
+      return;
+    case "notifications_ignoredcategories":
+      key = "shouldShowNotifications";
+      value = value.indexOf("*") == -1;
+      break;
   }
 
   var checkbox = document.getElementById(key);
   if (checkbox)
     checkbox.checked = value;
 }
 
 function onFilterMessage(action, filter)
 {
   switch (action)
@@ skipping 54 matching lines @@
   var filterText = "@@||" + domain + "^$document";
   addFilter(filterText);
 }
 
 // Adds filter text that user typed to the selection box
 function addTypedFilter(event)
 {
   event.preventDefault();
 
   var element = document.getElementById("newFilter");
-  addFilter(element.value, function (errors)
+  addFilter(element.value, function(errors)
   {
     if (errors.length > 0)
       alert(errors.join("\n"));
     else
       element.value = "";
   });
 }
 
 // Removes currently selected whitelisted domains
 function removeSelectedExcludedDomain(event)
@@ skipping 41 matching lines @@
       text += userFiltersBox.options[i].value + "\n";
     document.getElementById("rawFiltersText").value = text;
   }
 }
 
 // Imports filters in the raw text box
 function importRawFiltersText()
 {
   var text = document.getElementById("rawFiltersText").value;
 
-  importRawFilters(text, function (errors)
+  importRawFilters(text, true, function(errors)
   {
     if (errors.length > 0)
       alert(errors.join("\n"));
     else
       $("#rawFilters").hide();
   });
 }
 
 // Called when user explicitly requests filter list updates
 function updateFilterLists()
 {
   // Without the URL parameter this will update all subscriptions
   updateSubscription();
-
-  // Display a message for any subscriptions that are currently being downloaded
-  getSubscriptions(true, false, function(subscriptions)
-  {
-    var inProgressMessage = i18n.getMessage(
-      "filters_subscription_lastDownload_inProgress"
-    );
-
-    for (var i = 0; i < subscriptions.length; i += 1)
-    {
-      var element = findSubscriptionElement(subscriptions[i]);
-      if (element)
-      {
-        var label = element.getElementsByClassName("subscriptionUpdate")[0];
-        isSubscriptionDownloading(subscriptions[i].url, function (isDownloading)

[Sebastian Noack, 2016/04/03 15:11:41]

Nit: Redundant space after function statement.

[kzar, 2016/04/03 15:50:19]

Done.

-        {
-          if (isDownloading)
-            label.textContent = inProgressMessage;

[Sebastian Noack, 2016/04/03 15:27:40]

This will always be the label of the last subscription.

[kzar, 2016/04/03 16:11:33]

Oops, you're right. Done.

-        });
-      }
-    }
-  });
 }
 
 // Adds a subscription entry to the UI.
 function addSubscriptionEntry(subscription)
 {
   var template = document.getElementById("subscriptionTemplate");
   var element = template.cloneNode(true);
   element.removeAttribute("id");
   element._subscription = subscription;
 
   var removeButton = element.getElementsByClassName("subscriptionRemoveButton")[0];
   removeButton.setAttribute("title", removeButton.textContent);
   removeButton.textContent = "\xD7";
   removeButton.addEventListener("click", function()
   {
     if (!confirm(i18n.getMessage("global_remove_subscription_warning")))
       return;
 
     removeSubscription(subscription.url);
   }, false);
 
-  getPref("additional_subscriptions", function (additionalSubscriptions)
+  getPref("additional_subscriptions", function(additionalSubscriptions)
   {
     if (additionalSubscriptions.indexOf(subscription.url) != -1)
       removeButton.style.visibility = "hidden";
   });
 
   var enabled = element.getElementsByClassName("subscriptionEnabled")[0];
   enabled.addEventListener("click", function()
   {
     subscription.disabled = !subscription.disabled;
     toggleSubscription(subscription.url, true);
@@ skipping 24 matching lines @@
       links[i].addEventListener("click", arguments[i + 1], false);
     }
   }
 }
 
 ext.onMessage.addListener(function(message)
 {
   switch (message.type)
   {
     case "app.respond":
-      if (message.action == "addSubscription")
+      switch (message.action)
       {
-        var subscription = message.args[0];
-        startSubscriptionSelection(subscription.title, subscription.url);
-      }
-      break;
-    case "focus-section":

[Sebastian Noack, 2016/04/03 15:05:14]

This should be handled the same way app.respond[addSubscription]. I created a
sperate issue and wrote a patch to account for that in the message responder and
new options page: https://issues.adblockplus.org/ticket/3887

[kzar, 2016/04/03 15:50:19]

Done. (Not tested yet as leaving for airport shortly.)

-      var tabs = document.getElementsByClassName("ui-tabs-panel");
-      for (var i = 0; i < tabs.length; i++)
-      {
-        var found = tabs[i].querySelector(
-          "[data-section='" + message.section + "']"
-        );
-        if (!found)
-          continue;
-
-        var previous = document.getElementsByClassName("focused");
-        if (previous.length > 0)
-          previous[0].classList.remove("focused");
-
-        var tab = $("[href='#" + tabs[i].id + "']");
-        $("#tabs").tabs("select", tab.parent().index());
-        found.classList.add("focused");
+        case "addSubscription":
+          var subscription = message.args[0];
+          startSubscriptionSelection(subscription.title, subscription.url);
+          break;
+        case "focusSection":
+          var tabs = document.getElementsByClassName("ui-tabs-panel");
+          for (var i = 0; i < tabs.length; i++)
+          {
+            var found = tabs[i].querySelector(
+              "[data-section='" + message.args[0] + "']"
+            );
+            if (!found)
+              continue;
+
+            var previous = document.getElementsByClassName("focused");
+            if (previous.length > 0)
+              previous[0].classList.remove("focused");
+
+            var tab = $("[href='#" + tabs[i].id + "']");
+            $("#tabs").tabs("select", tab.parent().index());
+            found.classList.add("focused");
+          }
+          break;
       }
       break;
     case "filters.respond":
       onFilterMessage(message.action, message.args[0]);
       break;
     case "prefs.respond":
       onPrefMessage(message.action, message.args[0]);
       break;
     case "subscriptions.respond":
       onSubscriptionMessage(message.action, message.args[0]);
       break;
   }
 });