Issue 5549 - Implement missing error handlings for custom filter lists

skin/desktop-options.css

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present 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 527 matching lines @@
 
 #sidebar,
 #sidebar .fixed,
 [role="tablist"]
 {
   width: 14.3rem;
 }
 
 #sidebar
 {
-  flex-shrink: 0; 
+  flex-shrink: 0;
 }
 
 #sidebar .fixed
 {
   top: 1.2rem;
   bottom: 0rem;
   height: auto;
 }
 
 #sidebar header
@@ skipping 569 matching lines @@
 /*
   Advanced tab content
 */
 
 #all-filter-lists-table li.show-message .last-update,
 #all-filter-lists-table li:not(.show-message) .message,
 #custom-filters:not([data-mode="empty"]) #empty-custom-filters,
 #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-edit-filters,
-#link-filters-on-edit-error,
+#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,
-#all-filter-lists-table button[role="checkbox"][aria-checked="false"] + .state #state-disabled,
-#link-filters-on-edit-error.visible
+#all-filter-lists-table button[role="checkbox"][aria-checked="false"] + .state #state-disabled
 {
   display: inline;
 }
 
 #all-filter-lists-table
 {
   margin-bottom: 0.8rem;
 }
 
-#custom-filters-edit {
+#custom-filters-edit
+{
   white-space: nowrap;
 }
 
-#custom-filters-edit-area {
+#custom-filters-control
+{
   display: flex;
   width: 100%;
 }
 
 /*
   avoid doubled margin glitchy behavior
   as shown in visual specifications
 */
-#custom-filters-edit-area .side-controls .side-controls {
+#custom-filters-control .side-controls .side-controls
+{
   margin: 0;
 }
 
 /*
   visibility: hidden;
   preserves the flex-box meaning,
   keeping buttons on the right.
 */
-#custom-filters-edit-error {
+#custom-filters-edit-error
+{
   visibility: hidden;
   display: flex;
   align-self: center;
   justify-content: flex-start;
   font-weight: bold;
 }
 
-#custom-filters-edit-error.warning,
-#custom-filters-edit-filters
+#custom-filters.warning #custom-filters-edit-error,
+#custom-filters-error
 {
   color: #C11D26;
   padding: 0.2rem 0.8rem;
 }
 
-#custom-filters-edit-error.warning {
+#custom-filters.warning #custom-filters-edit-error
+{
   visibility: visible;
 }
 
-#custom-filters-edit-filters {
+#custom-filters-error
+{
   display: block;
+  list-style: none;
   white-space: pre;
   overflow: auto;
 }
 
-#custom-filters-edit-filters.many {
+#custom-filters-error.many
+{
   border: 1px solid silver;
   max-height: 6.2rem;
 }
 
 #custom-filters-raw
 {
   width: 100%;
   height: 23.6rem;
   padding: 0.8rem;
 }
 
 #custom-filters-raw:focus
 {
   outline: none;
   border: 2px solid #077CA6;
 }
 
-#custom-filters-raw.warning
+#custom-filters.warning #custom-filters-raw
 {
   outline: none;
   border: 2px solid #C11D26;
 }
 
 #empty-custom-filters
 {
   padding: 1.5rem;
   border: 1px solid #CDCDCD;
 }
@@ skipping 335 matching lines @@
   font-size: 1rem;
   color: #077CA6;
   background-color: #E1F2FA;
 }
 
 #notification strong
 {
   flex: 1;
   text-align: center;
 }