Issue 5549 - Implement missing error handlings for custom filter lists

desktop-options.html

Index: desktop-options.html
===================================================================
--- a/desktop-options.html
+++ b/desktop-options.html
@@ -289,6 +289,9 @@
           <header>
             <h2 class="i18n_options_customFilters_title"></h2>
             <p class="i18n_options_customFilters_description"></p>
+            <p>
+              <a class="i18n_options_customFilters_learn" id="link-filters-1" target="_blank"></a>
+            </p>
           </header>
           <div id="custom-filters">
             <h3 class="i18n_options_customFilters_widget_title"></h3>
@@ -297,18 +300,22 @@
               <button class="i18n_options_customFilters_start primary" data-action="edit-custom-filters">
               </button>
               <p>
-                <a class="i18n_options_customFilters_learn" id="link-filters" target="_blank"></a>
+                <a class="i18n_options_customFilters_learn" id="link-filters-2" target="_blank"></a>
               </p>
             </div>
             <textarea id="custom-filters-raw" rows="15"></textarea>
-            <div class="side-controls">
-              <button id="custom-filters-edit" class="i18n_options_customFilter_edit secondary" data-action="edit-custom-filters">
-              </button>
-              <div class="side-controls" id="custom-filters-raw-controls">
-                <button class="i18n_options_customFilter_cancel secondary" data-action="cancel-custom-filters"></button>
-                <button class="i18n_options_customFilter_save primary" data-action="save-custom-filters"></button>
+            <div id="custom-filters-edit-area">
+              <div id="custom-filters-edit-error" class="i18n_options_customFilters_edit_error"></div>

[saroyanm, 2018/02/02 12:30:58]

Suggestion:
In order to keep simplicity, enhance semantics and have better accessibility I
think we should have here something along the lines:
<div class="side-controls">
...
</div>
<div role="alert" aria-hidden="true">
  <heading></heading>
  <ul></ul>
</div>

I do understand that the way this is defined in the specs the implementation is
becoming tricky and keeping it simple as well.

So if you agree with me I'll suggest this options:
Align with Jeen and move the error message below buttons in the specs, so we can
keep the implementation simple.
This will help us to simplify the CSS implementation as well.

(Sorry that I didn't notice this earlier)

+              <div class="side-controls">
+                <button id="custom-filters-edit" class="i18n_options_customFilter_edit secondary" data-action="edit-custom-filters">
+                </button>
+                <div id="custom-filters-raw-controls" class="side-controls">
+                  <button class="i18n_options_customFilter_cancel secondary" data-action="cancel-custom-filters"></button>
+                  <button class="i18n_options_customFilter_save primary" data-action="save-custom-filters"></button>
+                </div>
               </div>
             </div>
+            <ul id="custom-filters-error"></ul>
           </div>
         </section>
       </div>