Issue 4752 - Improve options page performance for lots of custom filters

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 205 matching lines @@
       if (subscription.url == acceptableAdsUrl)
         $("#acceptableAds").prop("checked", !subscription.disabled);
       else
         addSubscriptionEntry(subscription);
     }
   });
 
   // User-entered filters
   getSubscriptions(false, true, function(subscriptions)
   {
-    clearListBox("userFiltersBox");
-    clearListBox("excludedDomainsBox");
+    document.getElementById("userFiltersBox").innerHTML = "";
+    document.getElementById("excludedDomainsBox").innerHTML = "";
 
     for (var i = 0; i < subscriptions.length; i++)
       convertSpecialSubscription(subscriptions[i]);
   });
 }
 
 function initCheckbox(id, key)
 {
   key = key || id;
   var checkbox = document.getElementById(id);
@@ skipping 273 matching lines @@
       break;
     case "removed":
       if (whitelistedDomainRegexp.test(filter.text))
         removeFromListBox("excludedDomainsBox", RegExp.$1);
       else
         removeFromListBox("userFiltersBox", filter.text);
       break;
   }
 }
 
-function clearListBox(id)
-{
-  var list = document.getElementById(id);
-  while (list.lastChild)
-    list.removeChild(list.lastChild);
-}
-
 // Add a filter string to the list box.
 function appendToListBox(boxId, text)
 {
   // Note: document.createElement("option") is unreliable in Opera
   var elt = new Option();
   elt.text = text;
   elt.value = text;
   document.getElementById(boxId).appendChild(elt);
 }
 
 // Remove a filter string from a list box.
 function removeFromListBox(boxId, text)
 {
-  var list = document.getElementById(boxId);
-  for (var i = 0; i < list.length; i++)
-    if (list.options[i].value == text)
-      list.remove(i--);
+  let list = document.getElementById(boxId);
+  let selector = "option[value=" + CSS.escape(text) + "]";
+  for (let option of list.querySelectorAll(selector))
+    list.removeChild(option);
 }
 
 function addWhitelistDomain(event)
 {
   event.preventDefault();
 
   var domain = document.getElementById("newWhitelistDomain").value.replace(/\s/g, "");
   document.getElementById("newWhitelistDomain").value = "";
   if (!domain)
     return;
@@ skipping 30 matching lines @@
     return;
 
   for (var i = 0; i < remove.length; i++)
     removeFilter("@@||" + remove[i] + "^$document");
 }
 
 // Removes all currently selected filters
 function removeSelectedFilters(event)
 {
   event.preventDefault();
-  var userFiltersBox = document.getElementById("userFiltersBox");
-  var remove = [];
-  for (var i = 0; i < userFiltersBox.length; i++)
-    if (userFiltersBox.options[i].selected)
-      remove.push(userFiltersBox.options[i].value);
-  if (!remove.length)
-    return;
-
-  for (var i = 0; i < remove.length; i++)
-    removeFilter(remove[i]);
+  for (let option of document.querySelectorAll("#userFiltersBox > option:checked"))
+    removeFilter(option.value);
 }
 
 // Shows raw filters box and fills it with the current user filters
 function toggleFiltersInRawFormat(event)
 {
   event.preventDefault();
 
-  $("#rawFilters").toggle();
-  if ($("#rawFilters").is(":visible"))
+  let rawFilters = document.getElementById("rawFilters");
+  let filters = [];
+
+  if (rawFilters.style.display == "none")
   {
-    var userFiltersBox = document.getElementById("userFiltersBox");
-    var text = "";
-    for (var i = 0; i < userFiltersBox.length; i++)
-      text += userFiltersBox.options[i].value + "\n";
-    document.getElementById("rawFiltersText").value = text;
+    rawFilters.style.display = "table-row";

[kzar, 2016/12/21 10:44:01]

I checked what jQuery was doing when the toggle method was called, it gave the
display of "table-row" which is why I've done that here.

+    for (let option of document.getElementById("userFiltersBox").options)
+      filters.push(option.value);
   }
+  else
+  {
+    rawFilters.style.display = "none";
+  }
+
+  document.getElementById("rawFiltersText").value = filters.join("\n");
 }
 
 // Imports filters in the raw text box
 function importRawFiltersText()
 {
   var text = document.getElementById("rawFiltersText").value;
 
   importRawFilters(text, true, function(errors)
   {
     if (errors.length > 0)
@@ skipping 105 matching lines @@
       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;
   }
 });