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 96 matching lines @@
 textarea,
 main
 {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
 /*
   Normalization
-*/
+ */
 
 input,
 button
 {
   font-family: inherit;
 }
 
 button
 {
   border-radius: 0rem;
 }
 
 /*
   Buttons and links
-*/
+ */
 
 button,
 .button
 {
   display: block;
   padding: 0.6rem 0.8rem;
   background-color: transparent;
   font-size: 1rem;
   font-weight: 700;
   text-decoration: none;
@@ skipping 89 matching lines @@
 
 .side-controls.wrap button
 {
   margin: 0.6rem 0rem;
   -moz-margin-start: auto;
   -webkit-margin-start: auto;
 }
 
 /*
   icons
-*/
+ */
 
 .icon
 {
   border: 0px;
   padding: 0px;
   background-color: transparent;
 }
 
 .icon:hover
 {
@@ skipping 192 matching lines @@
   background-image: url("social/facebook.svg");
 }
 
 .icon#google-plus::before
 {
   background-image: url("social/googleplus.svg");
 }
 
 /*
   Forms
-*/
+ */
 
 .floating-input
 {
   position: relative;
   padding-top: 0.7rem;
   margin: 1.8rem 0rem 0.5rem 0rem;
 }
 
 .floating-input input
 {
@@ skipping 61 matching lines @@
   visibility: hidden;
 }
 
 [data-validation] .floating-input input:focus:invalid ~ .error-msg
 {
   visibility: visible;
 }
 
 /*
   Sidebar
-*/
+ */
 
 #sidebar,
 #sidebar .fixed,
 [role="tablist"]
 {
   width: 14.3rem;
 }
 
 #sidebar
 {
@@ skipping 64 matching lines @@
 }
 
 [role="tablist"] li a
 {
   display: flex;
   margin-top: -1px;
   padding: 1rem 0.8rem;
   -moz-margin-end: -1px;
   -webkit-margin-end: -1px;
   -moz-margin-start: -1px;
-  -webkit-margin-start: -1px;   
+  -webkit-margin-start: -1px;
   border-color: #CDCDCD transparent;
   border-style: solid;
   border-width: 1px;
   text-decoration: none;
   color: inherit;
   cursor: pointer;
 }
 
 li a[role="tab"][aria-selected]
 {
@@ skipping 21 matching lines @@
   #sidebar .fixed
   {
     position: fixed;
   }
 
   #sidebar footer
   {
     bottom: 0px;
     position: absolute;
   }
-
 }
 
 /*
   Main content
-*/
+ */
 
 body[data-tab|="general"] #content-general,
 body[data-tab|="advanced"] #content-advanced,
 body[data-tab|="whitelist"] #content-whitelist,
 body[data-tab|="help"] #content-help
 {
   display: block;
 }
 
 main
 {
   background-color: #FFFFFF;
   border: 1px solid #CDCDCD;
   width: 46.3rem;
   padding: 0px 0rem 1.4rem 0rem;
 }
 
 main > div
 {
   display: none;
 }
 
 main p
 {
   margin: 0.8rem 0rem;
 }
 
 /*
   Sections
-*/
+ */
 
 [role="tabpanel"] > section,
 [role="tabpanel"] > .section
 {
   padding: 1.4rem 2rem;
   border-top: 1px solid #CDCDCD;
 }
 
 [role="tabpanel"] > header h1,
 [role="tabpanel"] > header p
@@ skipping 31 matching lines @@
   -webkit-margin-end: 2rem;
 }
 
 section.cols > *:last-child
 {
   flex: 3;
 }
 
 /*
   Acceptable ads
-*/
+ */
 
 #tracking-warning
 {
   position: relative;
   padding: 1.5rem;
   margin-bottom: 1rem;
   border: 2px solid #ffd7a3;
   background-color: #fefbe3;
 }
 
@@ skipping 68 matching lines @@
   border-radius: 0.2rem;
   background-color: #077CA6;
   color: #FFF;
   line-height: 100%;
   font-size: 0.8rem;
   text-transform: uppercase;
 }
 
 /*
   Tables
-*/
+ */
 
 ul.table,
 ul.list
 {
   list-style: none;
   margin: 0rem;
   padding: 0rem;
 }
 
 .table li,
@@ skipping 238 matching lines @@
 .button-add, .cancel-button
 {
   background-color: transparent;
   border: 0px;
   color: #3A7BA6;
   cursor: pointer;
 }
 
 /*
   Whitelist tab
-*/
+ */
 
 #content-whitelist form
 {
   display: flex;
 }
 
 #content-whitelist form input
 {
   flex: 1;
   height: 100%;
@@ skipping 19 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,
+#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
 {
   display: inline;
 }
 
 #all-filter-lists-table
 {
   margin-bottom: 0.8rem;
 }
 
 #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
 {
   visibility: hidden;
   display: flex;
   align-self: center;
   justify-content: flex-start;
   font-weight: bold;
 }
 
 #custom-filters.warning #custom-filters-edit-error,
-#custom-filters-edit-filters
+#custom-filters-error
 {
   color: #C11D26;
   padding: 0.2rem 0.8rem;
 }
 
 #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;
@@ skipping 12 matching lines @@
 }
 
 #empty-custom-filters
 {
   padding: 1.5rem;
   border: 1px solid #CDCDCD;
 }
 
 /*
   Context menu
-*/
+ */
 
 li [role="menubar"]
 {
   position: relative;
 }
 
 [role="tooltip"]
 {
   right: -0.8rem;
   margin-top: 0.8rem;
@@ skipping 149 matching lines @@
 
 #social ul
 {
   list-style: none;
   padding: 0px;
 }
 
 #social ul li
 {
   display: inline-block;
-  margin-right: 1rem;
   -moz-margin-end: 1rem;
   -webkit-margin-end: 1rem;
 }
 
 #social ul li a
 {
   display: block;
   text-align: center;
   text-decoration: none;
 }
@@ skipping 152 matching lines @@
   font-size: 1rem;
   color: #077CA6;
   background-color: #E1F2FA;
 }
 
 #notification strong
 {
   flex: 1;
   text-align: center;
 }