Issue 5549 - Implement missing error handlings for custom filter lists

skin/desktop-options.css

Index: skin/desktop-options.css
===================================================================
--- a/skin/desktop-options.css
+++ b/skin/desktop-options.css
@@ -114,7 +114,7 @@
 
 /*
   Normalization
- */
+*/
 
 input,
 button
@@ -129,7 +129,7 @@
 
 /*
   Buttons and links
- */
+*/
 
 button,
 .button
@@ -219,6 +219,7 @@
 {
   margin: 0.8rem 0rem;
   display: flex;
+  align-self: center;
   justify-content: flex-end;
 }
 
@@ -238,7 +239,7 @@
 
 /*
   icons
- */
+*/
 
 .icon
 {
@@ -451,7 +452,7 @@
 
 /*
   Forms
- */
+*/
 
 .floating-input
 {
@@ -533,7 +534,7 @@
 
 /*
   Sidebar
- */
+*/
 
 #sidebar,
 #sidebar .fixed,
@@ -544,7 +545,7 @@
 
 #sidebar
 {
-  flex-shrink: 0; 
+  flex-shrink: 0;
 }
 
 #sidebar .fixed
@@ -660,11 +661,12 @@
     bottom: 0px;
     position: absolute;
   }
+
 }
 
 /*
   Main content
- */
+*/
 
 body[data-tab|="general"] #content-general,
 body[data-tab|="advanced"] #content-advanced,
@@ -694,7 +696,7 @@
 
 /*
   Sections
- */
+*/
 
 [role="tabpanel"] > section,
 [role="tabpanel"] > .section
@@ -746,7 +748,7 @@
 
 /*
   Acceptable ads
- */
+*/
 
 #tracking-warning
 {
@@ -835,7 +837,7 @@
 
 /*
   Tables
- */
+*/
 
 ul.table,
 ul.list
@@ -1094,7 +1096,7 @@
 
 /*
   Whitelist tab
- */
+*/
 
 #content-whitelist form
 {
@@ -1134,17 +1136,14 @@
 #custom-filters[data-mode="empty"] #custom-filters-raw,
 #custom-filters:not([data-mode="write"]) #custom-filters-raw-controls,
 #custom-filters:not([data-mode="read"]) #custom-filters-edit,
+#custom-filters-error,
 .state span,
 #acceptable-ads:not(.show-dnt-notification) #dnt
 {
   display: none;
 }
 
-#all-filter-lists-table button[role="checkbox"][aria-checked="true"] + .state #state-active
-{
-  display: inline;
-}
-
+#all-filter-lists-table button[role="checkbox"][aria-checked="true"] + .state #state-active,
 #all-filter-lists-table button[role="checkbox"][aria-checked="false"] + .state #state-disabled
 {
   display: inline;
@@ -1155,11 +1154,71 @@
   margin-bottom: 0.8rem;
 }
 
+#custom-filters-edit
+{
+  white-space: nowrap;
+}
+
+#custom-filters-edit-area
+{
+  display: flex;
+  width: 100%;
+}
+
+/*
+  avoid doubled margin glitchy behavior
+  as shown in visual specifications
+*/
+#custom-filters-edit-area .side-controls .side-controls
+{
+  margin: 0;
+}
+
+/*
+  visibility: hidden;
+  preserves the flex-box meaning,
+  keeping buttons on the right.
+*/
+#custom-filters-edit-error
+{
+  visibility: hidden;
+  display: flex;
+  align-self: center;
+  justify-content: flex-start;
+  font-weight: bold;
+}
+
+#custom-filters.warning #custom-filters-edit-error,
+#custom-filters-error
+{
+  color: #C11D26;
+  padding: 0.2rem 0.8rem;
+}
+
+#custom-filters.warning #custom-filters-edit-error
+{
+  visibility: visible;
+}
+
+#custom-filters-error
+{
+  display: block;
+  list-style: none;
+  white-space: pre;
+  overflow: auto;
+}
+
+#custom-filters-error.many
+{
+  border: 1px solid silver;
+  max-height: 6.2rem;
+}
+
 #custom-filters-raw
 {
   width: 100%;
   height: 23.6rem;
-  padding: 0.8rem; 
+  padding: 0.8rem;
 }
 
 #custom-filters-raw:focus
@@ -1168,6 +1227,12 @@
   border: 2px solid #077CA6;
 }
 
+#custom-filters.warning #custom-filters-raw
+{
+  outline: none;
+  border: 2px solid #C11D26;
+}
+
 #empty-custom-filters
 {
   padding: 1.5rem;
@@ -1176,7 +1241,7 @@
 
 /*
   Context menu
- */
+*/
 
 li [role="menubar"]
 {
@@ -1346,6 +1411,7 @@
 #social ul li
 {
   display: inline-block;
+  margin-right: 1rem;
   -moz-margin-end: 1rem;
   -webkit-margin-end: 1rem;
 }