Issue 3892 - Disable button if input is invalid when adding subscriptions or filters

skin/options.css

Index: skin/options.css
===================================================================
--- a/skin/options.css
+++ b/skin/options.css
@@ -91,7 +91,7 @@
   display: none;
 }
 
-input[type="text"], input[type="search"]
+input[type="text"], input[type="search"], input[type="url"]
 {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -392,12 +392,29 @@
   border-top: 1px solid #CDCDCD;
 }
 
-button[disabled="true"]
+button[role="checkbox"]:disabled
 {
   border-radius: 2px;
   background-color: #ccc;
 }
 
+#dialog-body button:disabled,
+#custom-filters-add button:disabled
+{
+  color: #A4A4A4;
+  cursor: default;
+}
+
+#dialog-body button:disabled::before
+{
+  background-position: -49px -51px;
+}
+
+#custom-filters-add button:disabled::after
+{
+  background-position: -18px -32px;
+}
+
 .table button.delete
 {
   background-color: transparent;
@@ -481,7 +498,6 @@
 {
   background-position: 0px -42px;
   content: "";
-  cursor: pointer;

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

This was redundant, as we already set "cursor" to "pointer" on the element
itself. But if we'd keep it redundant here, we would also have to override it
redundantly when the button is disabled. Same below.

   height: 11px;
   vertical-align: middle;
   width: 7px;
@@ -879,8 +895,7 @@
 #custom-filters-add button::after
 {
   content: "";
-  background-position: -28px -32px;

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

This position was wrong. The icon is actually just 8px wide, however the pixel
left of it as well as two pixels right of it are empty. So with the previous
position the icon was one pixel too far left. But who cares? However, now where
we switch between the gray (disabled) and blue (active) variant of the icon, the
icon would jump by one pixel if we don't fix this.

-  cursor: pointer;
+  background-position: -27px -32px;
   height: 10px;
   -webkit-margin-start: 6px;
   -moz-margin-start: 6px;
@@ -1224,7 +1239,8 @@
 }
 
 #dialog input[type="text"],
-#dialog input[type="search"]
+#dialog input[type="search"],
+#dialog input[type="url"]
 {
   font-size: 16px;
   margin-top: 10px;