Issue 2376 - Implement custom filters in new options page

options.html

Index: options.html
===================================================================
--- a/options.html
+++ b/options.html
@@ -175,7 +175,7 @@
           <div>
             <h1><span class="i18n_options_blockingList_title"></span><a class="i18n_options_readMore tooltip" href="#" target="_blank"></a></h1>
             <ul id="blocking-list-tabs" class="tabs horizontal">
-              <li class="i18n_options_tab_overview active" data-show="blocking-list-overview"></li><li class="i18n_options_tab_ownList" data-show="blocking-list-own"></li>
+              <li class="i18n_options_tab_overview active" data-show="blocking-list-overview"></li><li class="i18n_options_tab_ownList" data-show="custom-filters"></li>
             </ul>
             <div id="blocking-list">
               <div id="blocking-list-overview">
@@ -196,33 +196,35 @@
                   </button>
                 </div>
               </div>
-              <div id="blocking-list-own">
-                <p class="i18n_options_blockingRules"></p>
-                <ul class="table list">
-                  <li><span>zap2it.com##.zc-station-position</span></li>
-                  <li><span>downturk.net##.zippo</span></li>
-                  <li><span>yahoo.com##.y708-promo-middle</span></li>
-                  <li><span>reflector.com##.yahooboss</span></li>
-                  <li><span>yardbarker.com##.yard_leader</span></li>
-                  <li><span>espn.co.uk##.will_hill</span></li>
-                  <li><span>listverse.com##.wiki</span></li>
-                  <li><span>planet5d.com##.wp-image-1573</span></li>
-                  <li><span>buzzinn.net##.wpn_finner</span></li>
-                  <li><span>talkers.com##.wpss_slideshow</span></li>
-                </ul>
-                <div class="controls" style="margin: 0px;">
-                  <input type="text" placeholder="add your blocking rule here"/>
-                  <div class="input-control">
-                    <span class="input-separator"></span>
-                    <span class="i18n_options_button_add input-button-text"></span>
-                    <span class="icon icon-enter-blue"></span>
+              <div id="custom-filters" data-view="list">
+                <h4 id="custom-filters-header" class="i18n_options_customFilters_title"></h4>

[Thomas Greiner, 2015/06/30 09:23:27]

Where did <h2> and <h3> go?

[saroyanm, 2015/07/08 18:25:40]

You are right we don't have h4 in mock up, h2 should go here.

+                <div id="custom-filters-list-wrapper">
+                  <ul id="custom-filters-table" class="table list">
+                    <template>
+                      <span class="display"></span>
+                    </template>
+                  </ul>
+                  <div id="custom-filter-add-wrapper" class="controls">

[Thomas Greiner, 2015/06/30 09:23:27]

Tip: You could avoid that "Enter" key check by using <form> and simply listening
to its "submit" event.

[Thomas Greiner, 2015/06/30 09:23:27]

I noticed that almost every single element has an ID. For instance, for this one
I couldn't even find anywhere in the JavaScript or CSS code where you reference
it via its ID.

Therefore please make sure for all elements that there's no other way to
uniquely identify them other than an ID (e.g. #custom-filters-add-btn could be
referenced via `#custom-filters-add button` in which case you can shorten the ID
of #custom-filters-add-wrapper to #custom-filters-add).

[saroyanm, 2015/07/08 18:25:40]

Good point, make sense to also handle in consistency related ticket the
whitelisting part. Added to the document.

[saroyanm, 2015/07/08 18:25:40]

Referencing here ->
https://codereview.adblockplus.org/29321198/diff/29321199/skin/options.css#ne...
Fare enough done.

+                    <input id="custom-filters-add-textbox" type="text"/>
+                    <button id="custom-filters-add-btn" class="i18n_options_button_add"></button>
                   </div>
                 </div>
-                <div class="controls">
-                  <button>
+                <textarea id="custom-filters-textarea"></textarea>

[Thomas Greiner, 2015/06/30 09:23:27]

As mentioned in the previous review, IDs or class names should not refer to a
specific UI element because that can change at some point. Therefore it's more
flexible if you use something more generic like "custom-filters-raw" or
"custom-filters-modify".

[saroyanm, 2015/07/08 18:25:40]

Done.

+                <div id="custom-filters-edit-wrapper" class="controls">
+                  <button id="custom-filters-edit-btn" data-show="edit">
                     <span class="icon icon-edit"></span>
-                    <span class="i18n_options_blockingRules_edit"></span>
+                    <span class="i18n_options_customFilter_edit_btn"></span>
                   </button>
+                  <div id="custom-filters-textarea-controls">
+                    <button id="custom-filters-list-btn" data-show="list">
+                      <span class="icon icon-edit"></span>
+                      <span class="i18n_options_customFilter_list_btn"></span>
+                    </button>
+                    <button id="custom-filters-save-btn" data-show="list">
+                      <span class="icon icon-edit"></span>
+                      <span class="i18n_options_customFilter_save_btn"></span>
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>