issue 2377 - Finish design of Advanced tab of new options page

options.html

Index: options.html
===================================================================
--- a/options.html
+++ b/options.html
@@ -213,11 +213,8 @@
         <!-- Advanced tab content -->
         <div id="content-advanced" class="tab-content">
           <div>
-            <h1>
-              <span class="i18n_options_tweaks_title"></span>
-              <a class="i18n_options_readMore tooltip"></a>
-            </h1>
-            <ul class="table">
+            <h1 class="i18n_options_tweaks_title"></h1>
+            <ul id="tweaks" class="table">
               <li>
                 <button role="checkbox" id="easylist"></button>
                 <span id="block-element-explanation" class="i18n_options_tweaks_blockElement"></span>
@@ -225,9 +222,18 @@
             </ul>
           </div>
           <div>
-            <h1>
+            <h1 class="with-description">
               <span class="i18n_options_filterList_title"></span>
-              <a class="i18n_options_readMore tooltip"></a>
+              <div class="tooltip">
+                <span class="i18n_options_readMore"></span>
+                <div role="tooltip">
+                  <p class="i18n_options_filterList_title_tooltip"></p>
+                  <div class="notes">
+                    <p class="i18n_options_filterList_title_tooltip_notes_1"></p>
+                    <p class="i18n_options_filterList_title_tooltip_notes_2"></p>
+                  </div>
+                </div>
+              </div>
             </h1>
             <ul class="tabs horizontal">
               <li class="i18n_options_tab_overview active" data-action="switch-tab" data-tab="advanced-allFilterLists"></li>
@@ -236,8 +242,8 @@
             <div id="filter-lists">
               <div id="all-filter-lists">
                 <div class="table-header">
-                  <h3 class="i18n_options_column_name"></h3>
-                  <h3 class="i18n_options_column_date"></h3>
+                  <h2 class="i18n_options_column_name"></h2>
+                  <h2 class="i18n_options_column_date"></h2>
                 </div>
                 <ul class="table cols" id="all-filter-lists-table">
                   <template>
@@ -262,7 +268,7 @@
                   <li class="static">
                     <button role="checkbox" class="control" aria-checked="true" disabled="true"></button>
                     <div>
-                      <span class="i18n_options_filterList_own_list"></span>
+                      <strong class="i18n_options_filterList_own_list"></strong>
                     </div>
                     <span data-action="switch-tab,edit-custom-filters" data-tab="advanced-customFilters">
                       <a class="i18n_options_filterList_edit_own_list"></a>
@@ -281,7 +287,15 @@
                 </div>
               </div>
               <div id="custom-filters">
-                <h3 id="custom-filters-header" class="i18n_options_customFilters_title"></h3>
+                <h2 id="custom-filters-header" class="with-description">
+                  <span class="i18n_options_customFilters_title"></span>
+                  <div class="tooltip">
+                    <span class="i18n_options_readMore"></span>
+                    <div role="tooltip">
+                      <p class="i18n_options_customFilters_title_tooltip"></p>
+                    </div>
+                  </div>
+                </h2>
                 <div id="custom-filters-wrapper">
                   <div id="custom-filters-list-wrapper">
                     <ul id="custom-filters-table" class="table list">
@@ -302,13 +316,13 @@
                     <span class="i18n_options_customFilter_edit"></span>
                   </button>
                   <div id="custom-filters-raw-controls">
+                    <button id="custom-filters-raw-save" data-action="save-custom-filters">
+                      <span class="icon icon-save"></span>
+                      <span class="i18n_options_customFilter_save"></span>
+                    </button>
                     <button data-action="cancel-custom-filters">
-                      <span class="icon icon-edit"></span>
-                      <span class="i18n_options_customFilter_list"></span>
-                    </button>
-                    <button id="custom-filters-raw-save" data-action="save-custom-filters">
-                      <span class="icon icon-edit"></span>
-                      <span class="i18n_options_customFilter_save"></span>
+                    <span class="icon icon-cancel"></span>
+                      <span class="i18n_options_customFilter_cancel"></span>
                     </button>
                   </div>
                 </div>