Issue 5169 - Add whitelisted tab to the new options page

new-options.html

Index: new-options.html
===================================================================
--- a/new-options.html
+++ b/new-options.html
@@ -47,6 +47,11 @@
                 tabindex="0">
               <span class="i18n_options_tab_general"></span>
             </li>
+            <li id="tab-whitelist" role="tab" data-tab="whitelist"
+                aria-controls="content-whitelist"
+                tabindex="-1">
+              <span class="i18n_options_tab_whitelist"></span>
+            </li>
             <li id="tab-advanced" role="tab" data-tab="advanced"
                 data-subtab="advanced-allFilterLists"
                 aria-controls="content-advanced" tabindex="-1">
@@ -160,43 +165,34 @@
                   </template>
                 </ul>
               </div>
-              <div id="whitelisting">
-                <div class="option-name">
-                  <strong class="i18n_options_whitelisted_title"></strong>
-                  <span class="i18n_options_readMore"
-                      data-tooltip="options_whitelisted_title_tooltip"
-                      data-tooltip-image="skin/tooltips/whitelisted.png"

[Thomas Greiner, 2017/05/09 13:42:56]

This image doesn't appear to be used anymore.

Generally speaking, it is important to make sure that whenever you remove
references to resources (e.g. files, texts, CSS rules) that you also remove the
resource itself if it's the last reference. Otherwise we'll be left with a lot
of unused stuff that nobody dares to touch anymore.

I commented on each occurence of this issue that I noticed but please
double-check whether there's something else in case I missed it.

[saroyanm, 2017/05/16 20:20:06]

Thanks,
done.

-                      data-tooltip-flip="horizontal"></span>
-                </div>
-                <ul id="whitelisting-table" class="table list">
-                  <template>
-                    <label class="display"></label>
-                    <button data-action="remove-filter" class="delete control" title="options_control_remove_title"></button>
-                  </template>
-                </ul>
-                <div class="controls">
-                  <button data-action="edit-domain-exception">

[Thomas Greiner, 2017/05/09 13:42:56]

Detail: This action doesn't appear to be used anymore.

[saroyanm, 2017/05/16 20:20:06]

Done.

-                    <span class="icon icon-add"></span>
-                    <span class="i18n_options_whitelisted_add"></span>
-                  </button>
-                  <div>
-                    <span class="icon icon-add" data-action="add-domain-exception"></span>
-                    <input type="text" id="whitelisting-textbox" placeholder="www.example.com" />
-                    <span class="icon icon-enter" data-action="add-domain-exception"></span>

[Thomas Greiner, 2017/05/09 13:42:56]

Detail: This action doesn't appear to be used anymore.

[saroyanm, 2017/05/16 20:20:06]

Done.

-                  </div>
-                  <div>
-                    <button id="whitelisting-add-button" class="button-add" data-action="add-domain-exception">

[Thomas Greiner, 2017/05/09 13:42:56]

Detail: This CSS class doesn't appear to be used anymore.

[saroyanm, 2017/05/16 20:20:06]

Seems like it's yet being used in "#all-lang-table".

-                      +<span class="i18n_options_button_add"></span>
-                    </button>
-                    <span></span>
-                    <button class="i18n_options_button_cancel cancel-button" data-action="cancel-domain-exception"></button>

[Thomas Greiner, 2017/05/09 13:42:56]

Detail: This CSS class, action and text don't appear to be used anymore.

[saroyanm, 2017/05/16 20:20:06]

Done.

-                  </div>
-                </div>
-              </div>
             </div>
           </div>
         </div>
 
+        <!-- Whitelist tab content -->
+        <div id="content-whitelist" role="tabpanel" aria-labelledby="tab-help">

[Thomas Greiner, 2017/05/09 13:42:56]

The content of "aria-labelledby" is referring to the wrong element.

[saroyanm, 2017/05/16 20:20:06]

Done.

+          <h1 class="i18n_options_whitelist_title"></h1>
+          <p class="i18n_options_whitelist_description"></p>
+          <hr>

[Thomas Greiner, 2017/05/09 13:42:55]

This is merely a cosmetic element so let's use CSS instead to keep the
separation of styles and structure.

Same applies to other occurences of `<hr>`.

[saroyanm, 2017/05/16 20:20:06]

Looking through the designs and checking the documentation (
https://dev.w3.org/html5/html-author/#the-hr-element ) I think having separation
of the content using <hr> tag is reasonable here and semantically fits IMO.

+          <div>

[saroyanm, 2017/04/21 12:03:17]

I think this should be a <form> element and button type="submit".
Same applies any other form control elements that "submit" data.

[Thomas Greiner, 2017/05/09 13:42:56]

Yep, we can tackle this separately in the future.

[saroyanm, 2017/05/16 20:20:06]

I've created an issue for that -> https://issues.adblockplus.org/ticket/5251

+            <input id="whitelisting-textbox" type="text">
+            <button id="whitelisting-add-button" 
+                    data-action="add-domain-exception" 

[saroyanm, 2017/04/21 12:03:17]

I think this control element should be changed as part of global redesign of
Removable tables.

[Thomas Greiner, 2017/05/09 13:42:56]

Makes sense.

+                    class="i18n_options_whitelist_add" disabled>
+            </button>
+          </div>
+          <div id="whitelisting-validation"></div>
+          <hr>
+          <ul id="whitelisting-table" class="table list">
+            <template>
+              <label class="display"></label>
+              <button data-action="remove-filter" class="delete control" 
+                      title="options_control_remove_title">
+              </button>
+            </template>
+          </ul>
+        </div>
+
         <!-- Advanced tab content -->
         <div id="content-advanced" role="tabpanel"
             aria-labelledby="tab-advanced">