Issue 2374 - Implemented Tweaks section in options page

options.html

Index: options.html
===================================================================
--- a/options.html
+++ b/options.html
@@ -212,18 +212,27 @@
 
         <!-- Advanced tab content -->
         <div id="content-advanced" class="tab-content">
-          <div>
+          <div id="tweaks">
             <h1>
               <span class="i18n_options_tweaks_title"></span>
               <a class="i18n_options_readMore tooltip"></a>
             </h1>
             <ul class="table">
               <li>
-                <button role="checkbox" id="easylist"></button>
-                <span id="block-element-explanation" class="i18n_options_tweaks_blockElement"></span>
+                <button role="checkbox" name="shouldShowBlockElementMenu" data-action="toggle-pref"></button>

[saroyanm, 2016/02/29 14:34:39]

Why we are using name attribute here ? I think we can do this consistent with
other similar elements, use access attribute on parent element.

[Thomas Greiner, 2016/02/29 17:32:43]

Done. I thought going with existing attributes where possible might be the
better choice but don't have a strong preference so I changed it to `data-pref`.

[saroyanm, 2016/03/11 14:55:58]

Not exactly what I meant, I meant something like:
<li data-access="shouldShowBlockElementMenu">
  <button role="checkbox" data-action="toggle-pref"></button>
  <span class="i18n_options_tweaks_blockElement"></span>
</li>

and use:
ext.backgroundPage.sendMessage(
{
  type: "prefs.toggle",
  key: findParentData(element, "access", false)
});

Also you can have an ID on UL elements in tweaks section ex.: tweaks-prefs. And
that will make the tables consistent IMO and access to them as well:
var tweaks = document.querySelectorAll("#tweaks-prefs li");

Anyway this requires to always access parent element, which in one hand
additional action, but on other hand provide ability to reference all related
elements, regardless it's related string or checkbox.

[Thomas Greiner, 2016/03/15 15:39:25]

Done.

[saroyanm, 2016/03/16 10:59:18]

Mostly looks good, just small Detail from the comment: What about having ID
specified on the "table" and access the prefs through the table as mentioned
above ?
Something like:

<ul id="tweaks" class="table">

var tweaks = document.querySelectorAll("#tweak li");

[Thomas Greiner, 2016/03/16 11:14:36]

Done.

+                <span class="i18n_options_tweaks_blockElement"></span>
+              </li>
+              <li data-optional>
+                <button role="checkbox" name="notifications_ignoredcategories" data-action="toggle-pref"></button>
+                <span class="i18n_options_tweaks_showNotifications"></span>
+              </li>
+              <li data-optional>
+                <button role="checkbox" name="safari_contentblocker" data-action="toggle-pref"></button>
+                <span class="i18n_options_tweaks_safariContentBlocker"></span>
               </li>
             </ul>
           </div>
+

[saroyanm, 2016/02/29 14:34:39]

Detail: no new row needed here.

[Thomas Greiner, 2016/02/29 17:32:43]

Why not? It visually separates the Tweaks and the Filter Lists sections a bit
more than before.

[saroyanm, 2016/03/11 14:55:58]

Looks like we currently only separate the main tab content and dialog, but fine
with me, we should keep in mind for future to separate all sections in that case
I assume. But yes not a major thing to argue.

           <div>
             <h1>
               <span class="i18n_options_filterList_title"></span>