Issue 2374 - Implemented Tweaks section in options page

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 499 matching lines @@
     while (element)
     {
       if (element.hasAttribute("data-" + dataName))
         return returnElement ? element : element.getAttribute("data-" + dataName);
 
       element = element.parentElement;
     }
     return null;
   }
 
+  function sendMessageHandleErrors(message, onSuccess)
+  {
+    ext.backgroundPage.sendMessage(message, function(errors)
+    {
+      if (errors.length > 0)
+        alert(errors.join("\n"));
+      else if (onSuccess)
+        onSuccess();
+    });
+  }
+
   function onClick(e)
   {
     var context = document.querySelector(".show-context-menu");
     if (context)
       context.classList.remove("show-context-menu");
 
     var element = e.target;
     while (true)
     {
       if (!element)
@@ skipping 40 matching lines @@
           break;
         case "import-subscription":
           var url = E("blockingList-textbox").value;
           addEnableSubscription(url);
           closeDialog();
           break;
         case "open-dialog":
           openDialog(element.getAttribute("data-dialog"));
           break;
         case "save-custom-filters":
-          ext.backgroundPage.sendMessage(
+          sendMessageHandleErrors(
           {
             type: "filters.importRaw",
             text: E("custom-filters-raw").value
+          },
+          function()
+          {
+            E("custom-filters").classList.remove("mode-edit");
           });
-          E("custom-filters").classList.remove("mode-edit");
           break;
         case "switch-tab":
           document.body.setAttribute("data-tab",
             element.getAttribute("data-tab"));
           break;
         case "toggle-pref":
           ext.backgroundPage.sendMessage(
           {
             type: "prefs.toggle",
-            key: element.getAttribute("data-pref")
+            key: findParentData(element, "pref", false)
           });
           break;
         case "update-all-subscriptions":
           ext.backgroundPage.sendMessage(
           {
             type: "subscriptions.update"
           });
           break;
         case "open-context-menu":
           var listItem = findParentData(element, "access", true);
@@ skipping 70 matching lines @@
     var placeholderValue  = getMessage("options_dialog_language_find");
     E("find-language").setAttribute("placeholder", placeholderValue);
     E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false);
     E("whitelisting-textbox").addEventListener("keypress", function(e)
     {
       if (getKey(e) == "Enter")
         addWhitelistedDomain();
     }, false);
 
     // Advanced tab
-    var tweaks = document.querySelectorAll("#tweaks button[role='checkbox'][data-pref]");
+    var tweaks = document.querySelectorAll("#tweaks li[data-pref]");
     tweaks = Array.prototype.map.call(tweaks, function(checkbox)
     {
       return checkbox.getAttribute("data-pref");
     });
-    tweaks.forEach(function(name)
-    {
-      getPref(name, function(value)
-      {
-        onPrefMessage(name, value);
+    tweaks.forEach(function(key)
+    {
+      getPref(key, function(value)
+      {
+        onPrefMessage(key, value);
       });
+    });
+    ext.backgroundPage.sendMessage(
+    {
+      type: "app.get",
+      what: "features"
+    },
+    function(features)
+    {
+      hidePref("show_devtools_panel", !features.devToolsPanel);
+      hidePref("safari_contentblocker", !features.safariContentBlocker);
     });
 
     var filterTextbox = document.querySelector("#custom-filters-add input");
     placeholderValue = getMessage("options_customFilters_textbox_placeholder");
     filterTextbox.setAttribute("placeholder", placeholderValue);
     function addCustomFilters()
     {
       var filterText = filterTextbox.value;
-      ext.backgroundPage.sendMessage(
+      sendMessageHandleErrors(
       {
         type: "filters.add",
         text: filterText
+      },
+      function()
+      {
+        filterTextbox.value = "";
       });
-      filterTextbox.value = "";
     }
     E("custom-filters-add").addEventListener("submit", function(e)
     {
       e.preventDefault();
       addCustomFilters();
     }, false);
     var customFilterEditButtons = document.querySelectorAll("#custom-filters-edit-wrapper button");
 
     E("dialog").addEventListener("keydown", function(e)
     {
@@ skipping 99 matching lines @@
           onSubscriptionMessage("added", subscriptions[i]);
       });
     });
   }
 
   function addWhitelistedDomain()
   {
     var domain = E("whitelisting-textbox");
     if (domain.value)
     {
-      ext.backgroundPage.sendMessage(
+      sendMessageHandleErrors(
       {
         type: "filters.add",
         text: "@@||" + domain.value.toLowerCase() + "^$document"
       });
     }
 
     domain.value = "";
     document.querySelector("#whitelisting .controls").classList.remove("mode-edit");
   }
 
@@ skipping 109 matching lines @@
         break;
       case "title":
         // TODO: NYI
         break;
     }
   }
 
   function hidePref(key, value)
   {
     var element = document.querySelector("[data-pref='" + key + "']");
-    if (!element)
-      return;
-
-    var parent = findParentData(element, "optional", true);
-    parent.setAttribute("aria-hidden", value);
+    if (element)
+      element.setAttribute("aria-hidden", value);
   }
 
   function getPref(key, callback)
   {
     var checkPref = getPref.checks[key] || getPref.checkNone;
     checkPref(function(isActive)
     {
       if (!isActive)
       {
         hidePref(key, !isActive);
         return;
       }
 
       ext.backgroundPage.sendMessage(
       {
         type: "prefs.get",
         key: key
       }, callback);
     });
   }
+
   getPref.checkNone = function(callback)

[saroyanm, 2016/03/11 14:55:58]

Detail: I assume you grouped the functions for readability, but apparently it's
only place we do so in the code, don't have strong point about this grouping,
will leave decision up to you.

[Thomas Greiner, 2016/03/15 15:39:26]

Done.

   {
     callback(true);
   };
+
   getPref.checks =
   {
     notifications_ignoredcategories: function(callback)
     {
       getPref("notifications_showui", callback);
-    },
-    safari_contentblocker: function(callback)
-    {
-      ext.backgroundPage.sendMessage(
-      {
-        type: "app.get",
-        what: "features"
-      },
-      function(features)
-      {
-        callback(features.safariContentBlocker);
-      });
     }
   };
 
   function onPrefMessage(key, value)
   {
-    var checkbox = document.querySelector("[data-pref='" + key + "']");
+    var checkbox = document.querySelector("[data-pref='" + key + "'] button[role='checkbox']");
     if (checkbox)
     {
       if (key == "notifications_ignoredcategories")
         value = (value.indexOf("*") == -1);
       checkbox.setAttribute("aria-checked", value);
     }
     else if (key == "notifications_showui")
       hidePref("notifications_ignoredcategories", !value);
   }
 
@@ skipping 44 matching lines @@
     {
       case "app.listen":
         if (message.action == "addSubscription")
         {
           var subscription = message.args[0];
           var dialog = E("dialog-content-predefined");
           dialog.querySelector("h3").textContent = subscription.title || "";
           dialog.querySelector(".url").textContent = subscription.url;
           openDialog("predefined");
         }
-        else if (message.action == "error")
-        {
-          alert(message.args.join("\n"));
-        }
         break;
       case "filters.listen":
         onFilterMessage(message.action, message.args[0]);
         break;
       case "prefs.listen":
         onPrefMessage(message.action, message.args[0]);
         break;
       case "subscriptions.listen":
         onSubscriptionMessage(message.action, message.args[0]);
         break;
     }
   });
 
   ext.backgroundPage.sendMessage(
   {
     type: "app.listen",
     filter: ["addSubscription", "error"]
   });
   ext.backgroundPage.sendMessage(
   {
     type: "filters.listen",
     filter: ["added", "loaded", "removed"]
   });
   ext.backgroundPage.sendMessage(
   {
     type: "prefs.listen",
     filter: ["notifications_ignoredcategories", "notifications_showui",
-        "safari_contentblocker", "shouldShowBlockElementMenu"]
+        "safari_contentblocker", "show_devtools_panel",
+        "shouldShowBlockElementMenu"]
   });
   ext.backgroundPage.sendMessage(
   {
     type: "subscriptions.listen",
-    filter: ["added", "disabled", "homepage", "lastDownload", "removed", "title"]
+    filter: ["added", "disabled", "homepage", "lastDownload", "removed",
+        "title"]
   });
 
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
 })();