filter dialog: add inline regexp checker

classes/pref/filters.php

@@ -978,12 +978,12 @@ class Pref_Filters extends Handler_Protected {
 		print "<input dojoType=\"dijit.form.ValidationTextBox\"
 			 required=\"true\" id=\"filterDlg_regExp\" 
 			 onchange='Filters.filterDlgCheckRegExp(this)'
-			 style=\"font-size : 16px; width : 20em;\"
+			 onblur='Filters.filterDlgCheckRegExp(this)'
+			 onfocus='Filters.filterDlgCheckRegExp(this)'
+			 style=\"font-size : 16px; width : 500px\"
 			 name=\"reg_exp\" value=\"$reg_exp\"/>";
 
-		print "<div dojoType=\"dijit.Tooltip\" connectId=\"filterDlg_regExp\" position=\"below\">
-			".__("Regular expression, without outer delimiters (i.e. slashes)")."
-		</div>";
+		print "<div dojoType='dijit.Tooltip' id='filterDlg_regExp_tip' connectId='filterDlg_regExp' position='below'></div>";
 
 		print "<fieldset>";
 		print "<label class='checkbox'><input id=\"filterDlg_inverse\" dojoType=\"dijit.form.CheckBox\"

css/default.css

@@ -1547,6 +1547,14 @@ body.ttrss_prefs .phpinfo td.v {
   font-family: monospace;
   word-break: break-all;
 }
+body.ttrss_prefs #filterNewRuleDlg .invalid,
+body.ttrss_main #filterNewRuleDlg .invalid {
+  background: #ffc0c0;
+}
+body.ttrss_prefs #filterNewRuleDlg .valid,
+body.ttrss_main #filterNewRuleDlg .valid {
+  background: #c0ffc0;
+}
 body.ttrss_prefs fieldset,
 body.ttrss_utility fieldset {
   border-width: 0px;

css/prefs.less

@@ -152,6 +152,18 @@ body.ttrss_prefs {
 	}
 }
 
+body.ttrss_prefs,
+body.ttrss_main {
+	#filterNewRuleDlg {
+		.invalid {
+			background : #ffc0c0;
+		}
+		.valid {
+			background : #c0ffc0;
+		}
+	}
+}
+
 body.ttrss_prefs,
 body.ttrss_utility {
 	fieldset {

js/CommonFilters.js

@@ -3,10 +3,21 @@
 define(["dojo/_base/declare"], function (declare) {
 	Filters = {
 		filterDlgCheckRegExp: function(sender) {
+			const tooltip = dijit.byId("filterDlg_regExp_tip").domNode;
+
 			try {
+				sender.domNode.removeClassName("invalid");
+				sender.domNode.removeClassName("valid");
+
 				new RegExp("/" + sender.value + "/");
+
+				sender.domNode.addClassName("valid");
+				tooltip.innerText = __("Regular expression, without outer delimiters (i.e. slashes)");
+
 			} catch (e) {
-				console.error(e);
+				sender.domNode.addClassName("invalid");
+
+				tooltip.innerText = e.message;
 			}
 		},
 		filterDlgCheckAction: function(sender) {

themes/night.css

@@ -1548,6 +1548,14 @@ body.ttrss_prefs .phpinfo td.v {
   font-family: monospace;
   word-break: break-all;
 }
+body.ttrss_prefs #filterNewRuleDlg .invalid,
+body.ttrss_main #filterNewRuleDlg .invalid {
+  background: #ffc0c0;
+}
+body.ttrss_prefs #filterNewRuleDlg .valid,
+body.ttrss_main #filterNewRuleDlg .valid {
+  background: #c0ffc0;
+}
 body.ttrss_prefs fieldset,
 body.ttrss_utility fieldset {
   border-width: 0px;
@@ -1827,6 +1835,12 @@ body.flat.ttrss_main.ttrss_prefs td.filename,
 body.flat.ttrss_main.ttrss_prefs div.prefHelp {
   color: #999999;
 }
+body.flat.ttrss_main.ttrss_prefs #filterNewRuleDlg .invalid {
+  background: #503030;
+}
+body.flat.ttrss_main.ttrss_prefs #filterNewRuleDlg .valid {
+  background: #305030;
+}
 body.flat.ttrss_main {
   /*
 	.post .content img,

themes/night_base.less

@@ -28,6 +28,15 @@ body.flat.ttrss_main.ttrss_prefs {
 	div.prefHelp {
 		color : @fg-text-muted;
 	}
+
+	#filterNewRuleDlg {
+		.invalid {
+			background : #503030;
+		}
+		.valid {
+			background : #305030;
+		}
+	}
 }
 
 body.flat.ttrss_main {

themes/night_blue.css

@@ -1548,6 +1548,14 @@ body.ttrss_prefs .phpinfo td.v {
   font-family: monospace;
   word-break: break-all;
 }
+body.ttrss_prefs #filterNewRuleDlg .invalid,
+body.ttrss_main #filterNewRuleDlg .invalid {
+  background: #ffc0c0;
+}
+body.ttrss_prefs #filterNewRuleDlg .valid,
+body.ttrss_main #filterNewRuleDlg .valid {
+  background: #c0ffc0;
+}
 body.ttrss_prefs fieldset,
 body.ttrss_utility fieldset {
   border-width: 0px;
@@ -1827,6 +1835,12 @@ body.flat.ttrss_main.ttrss_prefs td.filename,
 body.flat.ttrss_main.ttrss_prefs div.prefHelp {
   color: #999999;
 }
+body.flat.ttrss_main.ttrss_prefs #filterNewRuleDlg .invalid {
+  background: #503030;
+}
+body.flat.ttrss_main.ttrss_prefs #filterNewRuleDlg .valid {
+  background: #305030;
+}
 body.flat.ttrss_main {
   /*
 	.post .content img,