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

skin/options.css

 /*
  * 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 73 matching lines @@
 [aria-hidden="true"]
 {
   display: none !important;
 }
 
 input[type="search"]::-webkit-search-cancel-button
 {
   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;
   box-sizing: border-box;
 }
 
 button[role="checkbox"]
 {
   vertical-align: top;
   width: 18px;
@@ skipping 280 matching lines @@
 {
   vertical-align: top;
 }
 
 .table.cols
 {
   border-bottom: 1px solid #CDCDCD;
   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;
   background-position: -9px -32px;
   border: 0px;
   height: 10px;
   margin-top: 5px;
   -moz-margin-end: 20px;
   -webkit-margin-end: 20px;
   padding: 0px;
@@ skipping 63 matching lines @@
   cursor: pointer;
   height: 18px;
   width: 18px;
 }
 
 #content-help a::before,
 #dialog-body button::before
 {
   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;
   -moz-margin-end: 12px;
   -webkit-margin-end: 12px;
 }
 
 .controls
 {
   border-top: 1px solid #CDCDCD;
@@ skipping 377 matching lines @@
   height: 15px;
   -webkit-margin-end: 10px;
   -moz-margin-end: 10px;
   margin-bottom: -2px;
   width: 1px;
 }
 
 #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;
   width: 10px;
 }
 
 /*
   Tooltips
 */
 
@@ skipping 323 matching lines @@
 
 #dialog h3,
 #dialog label
 {
   font-size: 14px;
   font-weight: 600;
   margin: 0px;
 }
 
 #dialog input[type="text"],
-#dialog input[type="search"]
+#dialog input[type="search"],
+#dialog input[type="url"]
 {
   font-size: 16px;
   margin-top: 10px;
   padding: 5px;
   width: 100%;
 }
 
 #dialog .table
 {
   width: 100%;
@@ skipping 84 matching lines @@
 #other-language .button-add::before
 {
   display: none;
 }
 
 #other-language .display
 {
   -webkit-margin-start: 10px;
   -moz-margin-start: 10px;
 }