Issue 3892 - Disable button if input is invalid when adding subscriptions or 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 653 matching lines @@
           ext.backgroundPage.sendMessage(
           {
             type: "subscriptions.remove",
             url: findParentData(element, "access", false)
           });
           break;
       }
     }
   }
 
+  function disableButtonWhenInvalid(button, input)
+  {
+    function checkValidity()
+    {
+      button.disabled = !input.checkValidity();
+    }
+    checkValidity();
+    input.addEventListener("input", checkValidity, false);
+  }
+
   function onDOMLoaded()
   {
     populateLists();
     function onFindLanguageKeyUp()
     {
       var searchStyle = E("search-style");
       if (!this.value)
         searchStyle.innerHTML = "";
       else
         searchStyle.innerHTML = "#all-lang-table li:not([data-search*=\"" + this.value.toLowerCase() + "\"]) { display: none; }";
@@ skipping 29 matching lines @@
 
     getDocLink("contribute", function(link)
     {
       document.querySelector("#tab-contribute a").setAttribute("href", link);
     });
 
     updateShareLink();
 
     // Initialize interactive UI elements
     document.body.addEventListener("click", onClick, false);
+    var findLanuage = E("find-language");
     var placeholderValue  = getMessage("options_dialog_language_find");
-    E("find-language").setAttribute("placeholder", placeholderValue);
-    E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false);
+    findLanuage.setAttribute("placeholder", placeholderValue);
+    findLanuage.addEventListener("keyup", onFindLanguageKeyUp, false);
+    disableButtonWhenInvalid(
+      document.querySelector("[data-action=import-subscription]"),
+      E("blockingList-textbox")
+    );
     E("whitelisting-textbox").addEventListener("keypress", function(e)
     {
       if (getKey(e) == "Enter")
         addWhitelistedDomain();
     }, false);
 
     // Advanced tab
     var tweaks = document.querySelectorAll("#tweaks li[data-pref]");
     tweaks = Array.prototype.map.call(tweaks, function(checkbox)
     {
@@ skipping 17 matching lines @@
 
       // Only show option to switch between Safari Content Blockers
       // and event based blocking if both are available.
       hidePref("safari_contentblocker", !(
         features.safariContentBlocker &&
         "canLoad" in safari.self.tab &&
         "onbeforeload" in Element.prototype
       ));
     });
 
-    var filterTextbox = document.querySelector("#custom-filters-add input");
+    var filterControl = E("custom-filters-add");
+    var filterTextbox = filterControl.querySelector("input");
     placeholderValue = getMessage("options_customFilters_textbox_placeholder");
     filterTextbox.setAttribute("placeholder", placeholderValue);
-    function addCustomFilters()
+    disableButtonWhenInvalid(filterControl.querySelector("button"), filterTextbox);
+    filterControl.addEventListener("submit", function(e)
     {
+      e.preventDefault();
       var filterText = filterTextbox.value;
       sendMessageHandleErrors(
       {
         type: "filters.add",
         text: filterText
       },
       function()
       {
         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)
     {
       switch (getKey(e))
       {
         case "Escape":
           closeDialog();
           break;
@@ skipping 31 matching lines @@
     focusedBeforeDialog = document.activeElement;
     defaultFocus.focus();
   }
 
   function closeDialog()
   {
     var dialog = E("dialog");
     dialog.setAttribute("aria-hidden", true);
     dialog.removeAttribute("aria-labelledby");
     document.body.removeAttribute("data-dialog");
+    E("blockingList-textbox").value = "";

[Sebastian Noack, 2016/04/06 22:46:01]

This is kinda unrelated, but it seems to have been another bug that when you add
a subscription (or cancelled the dialog), and reopen the dialog to add another
subscription, that the previous URL is still showing. 

     focusedBeforeDialog.focus();
   }
 
   function populateLists()
   {
     subscriptionsMap = Object.create(null);
     filtersMap = Object.create(null);
     recommendationsMap = Object.create(null);
 
     // Empty collections and lists
@@ skipping 323 matching lines @@
   });
   ext.backgroundPage.sendMessage(
   {
     type: "subscriptions.listen",
     filter: ["added", "disabled", "homepage", "lastDownload", "removed",
         "title", "downloadStatus", "downloading"]
   });
 
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
 })();