Issue 5315 - Add support for Microsoft Edge

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
@@ skipping 51 matching lines @@
                                  "downloadable", "special");
 const removeSubscription = wrapper({type: "subscriptions.remove"}, "url");
 const addSubscription = wrapper({type: "subscriptions.add"},
                                 "url", "title", "homepage");
 const toggleSubscription = wrapper({type: "subscriptions.toggle"},
                                    "url", "keepInstalled");
 const updateSubscription = wrapper({type: "subscriptions.update"}, "url");
 const importRawFilters = wrapper({type: "filters.importRaw"},
                                  "text", "removeExisting");
 const addFilter = wrapper({type: "filters.add"}, "text");
-const getFilters = wrapper({type: "filters.get"}, "subscriptionUrl");
 const removeFilter = wrapper({type: "filters.remove"}, "text");
+const quoteCSS = wrapper({type: "composer.quoteCSS"}, "CSS");
 
 const whitelistedDomainRegexp = /^@@\|\|([^/:]+)\^\$document$/;
 const statusMessages = new 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",
@@ skipping 96 matching lines @@
   // Load recommended subscriptions
   loadRecommendations();
 
   // Show user's filters
   reloadFilters();
 }
 $(loadOptions);
 
 function convertSpecialSubscription(subscription)
 {
-  getFilters(subscription.url, filters =>
-  {
-    for (let filter of filters)
-    {
-      if (whitelistedDomainRegexp.test(filter.text))
-        appendToListBox("excludedDomainsBox", RegExp.$1);
-      else
-        appendToListBox("userFiltersBox", filter.text);
-    }
-  });
+  for (let filter of subscription.filters)
+  {
+    if (whitelistedDomainRegexp.test(filter.text))
+      appendToListBox("excludedDomainsBox", RegExp.$1);
+    else
+      appendToListBox("userFiltersBox", filter.text);
+  }
 }
 
 // Reloads the displayed subscriptions and filters
 function reloadFilters()
 {
   // Load user filter URLs
   let container = document.getElementById("filterLists");
   while (container.lastChild)
     container.removeChild(container.lastChild);
 
@@ skipping 318 matching lines @@
   elt.value = text;
   document.getElementById(boxId).appendChild(elt);
 }
 
 // Remove a filter string from a list box.
 function removeFromListBox(boxId, text)
 {
   let list = document.getElementById(boxId);
   // Edge does not support CSS.escape yet:
   // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/101410/
-  if (typeof CSS.escape == "undefined")
-  {
-    for (let i = 0; i < list.length; i++)

[kzar, 2017/07/17 14:08:19]

This will be kinda slow when there are lots of filters, but I don't have a
better idea other than attempting to reimplement CSS.escape.

Any reason you didn't use for ... of? I imagined it something like this
(untested):

for (let option of list.options)
{
  if (option.value == text)
    list.removeChild(option);
}

[Sebastian Noack, 2017/07/17 14:17:21]

Couldn't we just do this instead of CSS.escape():

  var selector = "option[value='" + text.replace(/'/g, "\\'") + "']";

Of course using CSS.escape() would be better, but in this case I think it would
be more preferable to have the same code path on all platforms.

[kzar, 2017/07/17 14:27:02]

I'm not sure that would always work, for example what if the string contains
"\'", wouldn't it become "\\'"? But I do agree if we can find a reasonably
simple way to always use the same code path here it would be nice, and using
querySelectorAll here will be much faster for large numbers of filters.

[Sebastian Noack, 2017/07/17 14:31:25]

It seems that we have already implemented the same logic in a feature complete
and reliable way that doesn't rely on CSS.escape() here:
https://hg.adblockplus.org/adblockpluschrome/file/efc63b673869/lib/filterComp...

Perhaps we can just reuse that code here (ideally without duplication).

[kzar, 2017/07/17 14:41:37]

Sounds good to me.

Though to avoid duplicating the logic the only (non-hack) way I can think of
doing it would be to have filterComposer.js combined with options.js at build
time so that require("filterComposer").quoteCSS would work here. But that seems
like kind of overkill, what do you think?

[Sebastian Noack, 2017/07/17 15:49:56]

How about using messaging?

[Oleksandr, 2017/07/17 23:52:09]

Done.

-      if (list.options[i].value == text)
-        list.remove(i--);
-  }
-  else
-  {
-    let selector = "option[value=" + CSS.escape(text) + "]";
+  quoteCSS(text, escapedCSS =>
+  {
+    let selector = "option[value=" + escapedCSS + "]";
     for (let option of list.querySelectorAll(selector))
       list.removeChild(option);
-  }
+  });
 }
 
 function addWhitelistDomain(event)
 {
   event.preventDefault();
 
   let domain = document.getElementById(
     "newWhitelistDomain"
   ).value.replace(/\s/g, "");
   document.getElementById("newWhitelistDomain").value = "";
@@ skipping 184 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;
   }
 });