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
@@ skipping 54 matching lines @@
 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)

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

Not: Redundant space after function statement, not only in this line.

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

Done.

+  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 22 matching lines @@
     {
       return ignoredcategories.indexOf("*") == -1;
     }
   });
 
   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", "switchToOptionsSection"]
+    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)
 {
   switch (key)
   {
     case "notifications_showui":
       document.getElementById("shouldShowNotificationsContainer").hidden = !value;
@@ skipping 69 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)

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

You have to specify removeExisting when using the filter.importRaw message here.

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

Done.

+  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(label, isDownloading)
-          {
-            if (isDownloading)
-              label.textContent = inProgressMessage;
-          }.bind(undefined, label)
-        );
-      }
-    }
-  });
 }
 
 // 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 30 matching lines @@
 {
   switch (message.type)
   {
     case "app.respond":
       switch (message.action)
       {
         case "addSubscription":
           var subscription = message.args[0];
           startSubscriptionSelection(subscription.title, subscription.url);
           break;
-        case "switchToOptionsSection":
+        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.section + "']"

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

It will be message.args[0], not message.section. 

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

Done.

+              "[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;
   }
 });