Issue 5384 - Introduced dedicated mobile options page

mobile-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 getDocLink */
 
 "use strict";
 
 {
   const {getMessage} = ext.i18n;
 
+  const dialogSubscribe = "subscribe";
+  const idAcceptableAds = "acceptableAds";
+  const idRecommended = "subscriptions-recommended";
   let whitelistFilter = null;
   let promisedAcceptableAdsUrl = getAcceptableAdsUrl();
 
   /* Utility functions */
 
   function get(selector, origin)
   {
     return (origin || document).querySelector(selector);
   }
 
@@ skipping 49 matching lines @@
   {
     return new Promise((resolve, reject) =>
     {
       ext.backgroundPage.sendMessage(
         {type: "prefs.get", key: "subscriptions_exceptionsurl"},
         resolve
       );
     });
   }
 
-  function getRecommended()
+  function getRecommendedAds()
   {
     return fetch("subscriptions.xml")
-      .then((resp) => resp.text())
+      .then((response) => response.text())
       .then((text) =>
       {
         let doc = new DOMParser().parseFromString(text, "application/xml");
         let elements = Array.from(doc.getElementsByTagName("subscription"));
 
         return elements
           .filter((element) => element.getAttribute("type") == "ads")
           .map((element) =>
           {
             return {
@@ skipping 18 matching lines @@
 
   function setSubscription({disabled, title, url}, shouldAdd)
   {
     if (disabled)
       return;
 
     promisedAcceptableAdsUrl.then((acceptableAdsUrl) =>
     {
       if (url == acceptableAdsUrl)
       {
-        get("#acceptableAds").checked = true;
+        get(`#${idAcceptableAds}`).checked = true;
         return;
       }
 
       let listInstalled = get("#subscriptions-installed");
       let installed = get(`[data-url="${url}"]`, listInstalled);
 
       if (installed)
       {
         let titleElement = get("span", installed);
         titleElement.textContent = title || url;
       }
       else if (shouldAdd)
       {
         let element = create(listInstalled, "li", null, {"data-url": url});
         create(element, "span", title || url);
         create(element, "button", null, {class: "remove"},
           () => uninstallSubscription(url)
         );
 
-        let recommended = get(`#subscriptions-recommended [data-url="${url}"]`);
+        let recommended = get(`#${idRecommended} [data-url="${url}"]`);
         if (recommended)
         {
           recommended.classList.add("installed");
         }
       }
     });
   }
 
   function removeSubscription(url)
   {
     promisedAcceptableAdsUrl.then((acceptableAdsUrl) =>
     {
       if (url == acceptableAdsUrl)
       {
-        get("#acceptable-ads").checked = false;
+        get(`#${idAcceptableAds}`).checked = false;
         return;
       }
 
       let installed = get(`#subscriptions-installed [data-url="${url}"]`);
       if (installed)
       {
         installed.parentNode.removeChild(installed);
       }
 
-      let recommended = get(`#subscriptions-recommended [data-url="${url}"]`);
+      let recommended = get(`#${idRecommended} [data-url="${url}"]`);
       if (recommended)
       {
         recommended.classList.remove("installed");
       }
     });
   }
 
   function setDialog(id, options)
   {
     if (!id)
     {
       delete document.body.dataset.dialog;
       return;
     }
 
     let fields = getAll(`#dialog-${id} input`);
     for (let field of fields)
     {
-      field.value = (options && field.name in options) ? options[field.name] : "";
+      let {name} = field;
+      field.value = (options && name in options) ? options[name] : "";
     }
     setError(id, null);
 
     document.body.dataset.dialog = id;
   }
 
-  function setError(dialogId, message)
+  function setError(dialogId, fieldName)
   {
     let dialog = get(`#dialog-${dialogId}`);
-    if (message)
-    {
-      dialog.dataset.error = message;
+    if (fieldName)
+    {
+      dialog.dataset.error = fieldName;
     }
     else
     {
       delete dialog.dataset.error;
     }
   }
 
   function populateLists()
   {
-    Promise.all([getInstalled(), getRecommended()])
+    Promise.all([getInstalled(), getRecommendedAds()])
       .then(([installed, recommended]) =>
       {
-        let listRecommended = get("#subscriptions-recommended");
+        let listRecommended = get(`#${idRecommended}`);
         for (let {title, url} of recommended)
         {
           create(listRecommended, "li", title, {"data-url": url},
             (ev) =>
             {
               if (ev.target.classList.contains("installed"))
                 return;
 
-              setDialog("subscribe", {title, url});
+              setDialog(dialogSubscribe, {title, url});
             }
           );
         }
 
         for (let subscription of installed)
         {
           if (subscription.disabled)
             continue;
 
           setSubscription(subscription, true);
         }
       })
       .catch((err) => console.error(err));
   }
 
   /* Listeners */
 
   function onChange(ev)
   {
-    if (ev.target.id != "acceptable-ads")
+    if (ev.target.id != idAcceptableAds)
       return;
 
     promisedAcceptableAdsUrl.then((acceptableAdsUrl) =>
     {
       if (ev.target.checked)
       {
         installSubscription(acceptableAdsUrl, null);
       }
       else
       {
         uninstallSubscription(acceptableAdsUrl);
       }
     });
   }
   document.addEventListener("change", onChange);
+
+  function toggleWhitelistFilter(toggle)
+  {
+    if (whitelistFilter)
+    {
+      ext.backgroundPage.sendMessage(
+        {
+          type: (toggle.checked) ? "filters.remove" : "filters.add",
+          text: whitelistFilter
+        },
+        (errors) =>
+        {
+          if (errors.length < 1)
+            return;
+
+          console.error(errors);
+          toggle.checked = !toggle.checked;
+        }
+      );
+    }
+    else
+    {
+      console.error("Whitelist filter hasn't been initialized yet");
+    }
+  }
 
   function onClick(ev)
   {
     switch (ev.target.dataset.action)
     {
       case "close-dialog":
         setDialog(null);
         break;
       case "open-dialog":
         setDialog(ev.target.dataset.dialog);
+        break;
+      case "toggle-enabled":
+        toggleWhitelistFilter(ev.target);
+        ev.preventDefault();
         break;
     }
   }
   document.addEventListener("click", onClick);
 
   function onSubmit(ev)
   {
     let fields = ev.target.elements;
     let title = fields.title.value;
     let url = fields.url.value;
 
     if (!title)
     {
-      setError("subscribe", "title");
+      setError(dialogSubscribe, "title");
     }
     else if (!url)
     {
-      setError("subscribe", "url");
+      setError(dialogSubscribe, "url");
     }
     else
     {
       installSubscription(url, title);
       setDialog(null);
     }
 
     ev.preventDefault();
   }
   document.addEventListener("submit", onSubmit);
 
-  function onToggleWhitelistFilter(ev)
-  {
-    let checkbox = ev.target;
-    ext.backgroundPage.sendMessage(
-      {
-        type: (checkbox.checked) ? "filters.remove" : "filters.add",
-        text: whitelistFilter
-      }, (errors) =>
-      {
-        if (errors.length < 1)
-          return;
-
-        console.error(errors);
-        checkbox.checked = !checkbox.checked;
-      }
-    );
-    ev.preventDefault();
-  }
-
   function onMessage(msg)
   {
     switch (msg.type)
     {
       case "app.respond": {
         switch (msg.action)
         {
           case "addSubscription":
             let [subscription] = msg.args;
-            setDialog("subscribe", {
+            setDialog(dialogSubscribe, {
               title: subscription.title,
               url: subscription.url
             });
             break;
           case "showPageOptions":
             let [{host, whitelisted}] = msg.args;
             whitelistFilter = `@@||${host}^$document`;
 
             ext.i18n.setElementText(
               get("#enabled-label"),
               "mops_enabled_label",
               [host]
             );
 
-            let checkbox = get("#enabled");
-            checkbox.checked = !whitelisted;
-            checkbox.addEventListener("click", onToggleWhitelistFilter);
+            let toggle = get("#enabled");
+            toggle.checked = !whitelisted;
 
             get("#enabled-container").hidden = false;
             break;
         }
         break;
       }
       case "filters.respond": {
         let [filter] = msg.args;
         if (!whitelistFilter || filter.text != whitelistFilter)
           break;
@@ skipping 15 matching lines @@
             }
             else
             {
               setSubscription(subscription, true);
             }
             break;
           case "removed":
             removeSubscription(subscription.url);
             break;
           case "title":
-            // We're also receiving these messages for subscriptions that are not
-            // installed so we shouldn't add those by accident
+            // We're also receiving these messages for subscriptions that are
+            // not installed so we shouldn't add those by accident
             setSubscription(subscription, false);
             break;
         }
         break;
       }
     }
   }
   ext.onMessage.addListener(onMessage);
 
   ext.backgroundPage.sendMessage({
@@ skipping 23 matching lines @@
   get("#dialog-subscribe [name='title']").setAttribute(
     "placeholder",
     getMessage("mops_subscribe_title")
   );
 
   get("#dialog-subscribe [name='url']").setAttribute(
     "placeholder",
     getMessage("mops_subscribe_url")
   );
 }