| Index: new-options.html | 
| =================================================================== | 
| --- a/new-options.html | 
| +++ b/new-options.html | 
| @@ -30,303 +30,293 @@ | 
| </head> | 
| <body data-tab="general"> | 
| <!-- Navigation sidebar --> | 
| - <div id="nav-sidebar"> | 
| - <div id="fixed-sidebar" class="fixed"> | 
| - <header id="page-title"> | 
| - <p class="i18n_options_page_header_1"></p> | 
| - <h1 class="i18n_options_page_header_2"></h1> | 
| + <div id="sidebar"> | 
| + <div class="fixed"> | 
| + <header> | 
| + <img id="sidebar-logo" src="skin/abp-logo.svg"> | 
| 
 
juliandoucette
2017/08/23 18:11:10
NIT/Suggest: Missing alt text e.g. "Adblock Plus l
 
saroyanm
2017/08/23 20:57:52
There is no easy way to translate that.
I'll hardc
 
saroyanm
2017/08/24 17:39:43
Done.
 
 | 
| + <h1> | 
| + Adblock <strong>Plus</strong> | 
| + </h1> | 
| + <p class="i18n_options_page_title"></p> | 
| </header> | 
| <nav> | 
| 
 
juliandoucette
2017/08/23 18:11:10
For reference below:
ARIA tabs spec: https://www.
 
 | 
| - <ul id="nav-tablist" class="tabs vertical" | 
| + <ul class="tabs" | 
| role="tablist" data-action="switch-tab" | 
| 
 
juliandoucette
2017/08/23 18:11:09
NIT: Missing aria-label
 
saroyanm
2017/08/23 20:57:53
I think providing role="tablist" information shoul
 
juliandoucette
2017/08/23 22:00:46
Nothing comes to mind. I only mentioned it because
 
 | 
| data-keys="ArrowLeft ArrowUp ArrowRight ArrowDown"> | 
| - <li id="tab-general" role="tab" data-tab="general" | 
| - aria-selected="true" aria-controls="content-general" | 
| - tabindex="0"> | 
| - <span class="i18n_options_tab_general"></span> | 
| + <li> | 
| 
 
juliandoucette
2017/08/23 18:11:09
NIT: These <li> should have the "presentation" rol
 
saroyanm
2017/08/23 20:57:53
I'll add that, didn't know about this use case.
 
saroyanm
2017/08/24 17:39:43
Done.
 
 | 
| + <a href="#general" class="i18n_options_tab_general" role="tab" aria-selected="true" aria-controls="content-general"></a> | 
| 
 
juliandoucette
2017/08/23 18:11:10
NIT: Apparently I was wrong about the tab key func
 
juliandoucette
2017/08/23 18:11:10
Note: 
Regarding the use of anchors vs buttons fo
 
saroyanm
2017/08/23 20:57:52
Agree.
 
saroyanm
2017/08/23 20:57:53
I can't follow your thoughts here, but:
In this ca
 
juliandoucette
2017/08/23 22:00:46
I agree.
 
saroyanm
2017/08/24 17:39:44
Done.
 
 | 
| </li> | 
| - <li id="tab-whitelist" role="tab" data-tab="whitelist" | 
| - aria-controls="content-whitelist" | 
| - tabindex="-1"> | 
| - <span class="i18n_options_tab_whitelist"></span> | 
| + <li> | 
| + <a href="#whitelist" class="i18n_options_tab_whitelist" role="tab" aria-controls="content-whitelist"></a> | 
| </li> | 
| - <li id="tab-advanced" role="tab" data-tab="advanced" | 
| - aria-controls="content-advanced" tabindex="-1"> | 
| - <span class="i18n_options_tab_advanced"></span> | 
| + <li> | 
| + <a href="#advanced" class="i18n_options_tab_advanced" role="tab" aria-controls="content-advanced"></a> | 
| </li> | 
| - <li id="tab-help" role="tab" data-tab="help" | 
| - aria-controls="content-help" tabindex="-1"> | 
| - <span class="i18n_options_tab_help"></span> | 
| + <li> | 
| + <a href="#help" class="i18n_options_tab_help" role="tab" aria-controls="content-help"></a> | 
| </li> | 
| </ul> | 
| </nav> | 
| - | 
| - <a id="link-version"> | 
| - <span class="i18n_options_version"></span> | 
| - <span id="abp-version"></span> | 
| - </a> | 
| - | 
| <footer> | 
| 
 
juliandoucette
2017/08/23 18:11:11
Note: The same logic as explained above regarding
 
saroyanm
2017/08/23 20:57:53
I don't think it applies, below in one case we act
 
juliandoucette
2017/08/23 22:00:46
I agree.
 
 | 
| - <ul class="tabs vertical bottom" data-action="open-doclink" | 
| - data-keys="Enter"> | 
| - <li id="tab-share" data-doclink="share-general" tabindex="0"> | 
| - <span class="i18n_options_tab_share"></span> | 
| - </li> | 
| - <li id="tab-contribute" data-doclink="contribute" tabindex="0"> | 
| - <span class="i18n_options_tab_contribute"></span> | 
| - </li> | 
| - </ul> | 
| - </footer> | 
| + <p> | 
| + <a id="contribute" | 
| 
 
juliandoucette
2017/08/23 22:00:46
Why does this link to https://adblockplus.org/redi
 
saroyanm
2017/08/24 17:39:43
All links are redirect links, so whenever a links
 
 | 
| + class="i18n_options_footer_contribute button secondary" | 
| + target="_blank"></a> | 
| + </p> | 
| + <p> | 
| + <button class="i18n_options_footer_about link" | 
| + data-action="open-dialog" data-dialog="about"></button> | 
| + </p> | 
| + </footer> | 
| </div> | 
| </div> | 
| - <div id="content"> | 
| - <div id="content-wrapper"> | 
| - <div id="dialog-background"></div> | 
| + <main> | 
| + <div id="dialog-background"></div> | 
| - <!-- General tab content --> | 
| - <div id="content-general" role="tabpanel" aria-labelledby="tab-general"> | 
| - <h1 class="i18n_options_tab_general"></h1> | 
| - <p class="i18n_options_general_description"></p> | 
| - <section> | 
| - <h2 class="i18n_options_privacy_header"></h2> | 
| - <ul id="recommend-protection-list-table" class="table list"> | 
| + <!-- General tab content --> | 
| + <div id="content-general" role="tabpanel" aria-labelledby="tab-general"> | 
| + <h1 class="i18n_options_tab_general"></h1> | 
| + <p class="i18n_options_general_description"></p> | 
| + <section> | 
| + <h2 class="i18n_options_privacy_header"></h2> | 
| + <ul id="recommend-protection-list-table" class="table list"> | 
| + <template> | 
| + <button data-action="toggle-remove-subscription" role="checkbox" class="control"></button> | 
| + <label class="display"></label> | 
| + <span class="i18n_options_readMore" data-tooltip="options_protection_%value%_tooltip"></span> | 
| + </template> | 
| + </ul> | 
| + </section> | 
| + <section> | 
| + <h2 class="i18n_options_acceptableAds_header"></h2> | 
| + <p class="i18n_options_acceptableAds_description"></p> | 
| + <form id="acceptable-ads"> | 
| + <div> | 
| + <input data-action="switch-acceptable-ads" type="radio" name="acceptable-ads" value="ads"> | 
| + <label class="i18n_options_acceptableAds_ads_label"></label> | 
| + <p id="enable-aa-description" class="i18n_options_acceptableAds_ads_description_1"></p> | 
| + <p class="i18n_options_acceptableAds_ads_description_2"></p> | 
| + </div> | 
| + <div> | 
| + <input data-action="switch-acceptable-ads" type="radio" name="acceptable-ads" value="privacy"> | 
| + <label class="i18n_options_acceptableAds_privacy_label"></label> | 
| + <p class="i18n_options_acceptableAds_privacy_description"></p> | 
| + <p id="dnt" class="i18n_options_acceptableAds_dnt_notification"></p> | 
| + </div> | 
| + <div> | 
| + <input data-action="switch-acceptable-ads" type="radio" name="acceptable-ads" value="none"> | 
| + <label class="i18n_options_acceptableAds_none_label"></label> | 
| + </div> | 
| + </form> | 
| + </section> | 
| + <section> | 
| + <h2 class="i18n_options_language_header"></h2> | 
| + <p class="i18n_options_language_description"></p> | 
| + <div id="blocking-languages"> | 
| + <ul id="blocking-languages-table" class="table list"> | 
| <template> | 
| - <button data-action="toggle-remove-subscription" role="checkbox" class="control"></button> | 
| <label class="display"></label> | 
| - <span class="i18n_options_readMore" data-tooltip="options_protection_%value%_tooltip"></span> | 
| + <button data-single="hidden" data-action="remove-subscription" class="delete control" title="options_control_remove_title"></button> | 
| + <button data-single="visible" data-action="open-dialog" data-dialog="language-change" class="i18n_options_language_change"></button> | 
| </template> | 
| </ul> | 
| - </section> | 
| + <div class="controls"> | 
| + <button data-action="open-dialog" data-dialog="language-add"> | 
| + <span class="i18n_options_language_add"></span> | 
| + </button> | 
| + </div> | 
| + </div> | 
| + <p class="i18n_options_language_tip"></p> | 
| + </section> | 
| + <section> | 
| + <h2 class="i18n_options_more_filters_header"></h2> | 
| + <p class="i18n_options_more_filters_description"></p> | 
| + <ul id="custom-list-table" class="table list"> | 
| + <template> | 
| + <label class="display"></label> | 
| + <button data-action="remove-subscription" class="delete control" title="options_control_remove_title"></button> | 
| + </template> | 
| + </ul> | 
| + <p class="i18n_options_more_filters_note"></p> | 
| + </section> | 
| + </div> | 
| + | 
| + <!-- Whitelist tab content --> | 
| + <div id="content-whitelist" role="tabpanel" aria-labelledby="tab-whitelist"> | 
| + <h1 class="i18n_options_tab_whitelist"></h1> | 
| + <p class="i18n_options_whitelist_description"></p> | 
| + <form> | 
| + <input id="whitelisting-textbox" type="text"> | 
| + <button id="whitelisting-add-button" | 
| + type="submit" | 
| + data-action="add-domain-exception" | 
| + class="i18n_options_whitelist_add" disabled> | 
| + </button> | 
| + <div id="whitelisting-validation"></div> | 
| + </form> | 
| + <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"> | 
| + <div> | 
| + <h1 class="i18n_options_tab_advanced"></h1> | 
| + <p class="i18n_options_advanced_description"></p> | 
| <section> | 
| - <h2 class="i18n_options_acceptableAds_header"></h2> | 
| - <p class="i18n_options_acceptableAds_description"></p> | 
| - <form id="acceptable-ads"> | 
| - <div> | 
| - <input data-action="switch-acceptable-ads" type="radio" name="acceptable-ads" value="ads"> | 
| - <label class="i18n_options_acceptableAds_ads_label"></label> | 
| - <p id="enable-aa-description" class="i18n_options_acceptableAds_ads_description_1"></p> | 
| - <p class="i18n_options_acceptableAds_ads_description_2"></p> | 
| - </div> | 
| - <div> | 
| - <input data-action="switch-acceptable-ads" type="radio" name="acceptable-ads" value="privacy"> | 
| - <label class="i18n_options_acceptableAds_privacy_label"></label> | 
| - <p class="i18n_options_acceptableAds_privacy_description"></p> | 
| - <p id="dnt" class="i18n_options_acceptableAds_dnt_notification"></p> | 
| - </div> | 
| - <div> | 
| - <input data-action="switch-acceptable-ads" type="radio" name="acceptable-ads" value="none"> | 
| - <label class="i18n_options_acceptableAds_none_label"></label> | 
| - </div> | 
| - </form> | 
| - </section> | 
| - <section> | 
| - <h2 class="i18n_options_language_header"></h2> | 
| - <p class="i18n_options_language_description"></p> | 
| - <div id="blocking-languages"> | 
| - <ul id="blocking-languages-table" class="table list"> | 
| - <template> | 
| - <label class="display"></label> | 
| - <button data-single="hidden" data-action="remove-subscription" class="delete control" title="options_control_remove_title"></button> | 
| - <button data-single="visible" data-action="open-dialog" data-dialog="language-change" class="i18n_options_language_change"></button> | 
| - </template> | 
| - </ul> | 
| - <div class="controls"> | 
| - <button data-action="open-dialog" data-dialog="language-add"> | 
| - <span class="i18n_options_language_add"></span> | 
| - </button> | 
| - </div> | 
| - </div> | 
| - <p class="i18n_options_language_tip"></p> | 
| - </section> | 
| - <section> | 
| - <h2 class="i18n_options_more_filters_header"></h2> | 
| - <p class="i18n_options_more_filters_description"></p> | 
| - <ul id="custom-list-table" class="table list"> | 
| - <template> | 
| - <label class="display"></label> | 
| - <button data-action="remove-subscription" class="delete control" title="options_control_remove_title"></button> | 
| - </template> | 
| + <h2 class="i18n_options_customize_header"></h2> | 
| + <ul id="customize" class="table"> | 
| + <li data-pref="shouldShowBlockElementMenu"> | 
| + <label> | 
| + <button role="checkbox" data-action="toggle-pref"></button> | 
| + <span class="i18n_options_customize_blockElement"></span> | 
| + <span class="i18n_options_readMore" | 
| + data-tooltip="options_customize_blockElement_tooltip"></span> | 
| + </label> | 
| + </li> | 
| + <li data-pref="show_devtools_panel"> | 
| + <label> | 
| + <button role="checkbox" data-action="toggle-pref"></button> | 
| + <span class="i18n_options_customize_showDevToolsPanel"></span> | 
| + <span class="i18n_options_readMore" | 
| + data-tooltip="options_customize_showDevToolsPanel_tooltip"></span> | 
| + </label> | 
| + </li> | 
| + <li data-pref="notifications_ignoredcategories"> | 
| + <label> | 
| + <button role="checkbox" data-action="toggle-pref"></button> | 
| + <span class="i18n_options_customize_showNotifications"></span> | 
| + <span class="i18n_options_readMore" | 
| + data-tooltip="options_customize_showNotifications_tooltip"></span> | 
| + </label> | 
| + </li> | 
| </ul> | 
| - <p class="i18n_options_more_filters_note"></p> | 
| </section> | 
| </div> | 
| - <!-- Whitelist tab content --> | 
| - <div id="content-whitelist" role="tabpanel" aria-labelledby="tab-whitelist"> | 
| - <h1 class="i18n_options_tab_whitelist"></h1> | 
| - <p class="i18n_options_whitelist_description"></p> | 
| - <form> | 
| - <input id="whitelisting-textbox" type="text"> | 
| - <button id="whitelisting-add-button" | 
| - type="submit" | 
| - data-action="add-domain-exception" | 
| - class="i18n_options_whitelist_add" disabled> | 
| - </button> | 
| - <div id="whitelisting-validation"></div> | 
| - </form> | 
| - <ul id="whitelisting-table" class="table list"> | 
| + <section> | 
| + <h1 class="i18n_options_filterList_title"></h1> | 
| + <p id="filter-lists-description" class="i18n_options_filterList_description"></p> | 
| + | 
| + <div id="all-filter-lists-table-header"> | 
| + <h2 class="i18n_options_filterList_column_status"></h2> | 
| + <h2 class="i18n_options_filterList_column_name"></h2> | 
| + <h2 class="i18n_options_filterList_column_update"></h2> | 
| + </div> | 
| + <ul class="table cols" id="all-filter-lists-table"> | 
| <template> | 
| - <label class="display"></label> | 
| - <button data-action="remove-filter" class="delete control" | 
| - title="options_control_remove_title"> | 
| + <button data-action="remove-subscription" class="control delete"></button> | 
| + <button data-action="toggle-disable-subscription" role="checkbox" class="control"> | 
| </button> | 
| + <div class="state"> | 
| + <span class="i18n_options_filterList_state_active" id="state-active"></span> | 
| + <span class="i18n_options_filterList_state_disabled" id="state-disabled"></span> | 
| + </div> | 
| + <div> | 
| + <label class="display"></label> | 
| + </div> | 
| + <span class="last-update"></span> | 
| + <span class="message"></span> | 
| + <a data-action="open-context-menu" class="arrow"></a> | 
| + <div role="menubar" class="context-menu-wrapper"> | 
| + <div class="context-menu"> | 
| + <ul class="content" role="menu"> | 
| + <li role="menuitem"> | 
| + <a class="i18n_options_filterList_updateNow update-subscription" data-action="update-subscription"></a> | 
| + </li> | 
| + <li role="menuitem"> | 
| + <a class="i18n_options_filterList_website website" target="_blank"></a> | 
| + </li> | 
| + <li role="menuitem"> | 
| + <a class="i18n_options_filterList_source source" target="_blank"></a> | 
| + </li> | 
| + <li role="menuitem"> | 
| + <a class="i18n_options_filterList_delete delete" data-action="remove-subscription"></a> | 
| + </li> | 
| + </ul> | 
| + </div> | 
| + </div> | 
| </template> | 
| </ul> | 
| - </div> | 
| + <div class="controls"> | 
| + <button data-action="open-dialog" data-dialog="custom"> | 
| + <span class="icon icon-add"></span> | 
| + <span class="i18n_options_filterList_add"></span> | 
| + </button> | 
| + <button data-action="update-all-subscriptions"> | 
| + <span class="icon icon-update"></span> | 
| + <span class="i18n_options_filterList_update"></span> | 
| + </button> | 
| + </div> | 
| + </section> | 
| - <!-- Advanced tab content --> | 
| - <div id="content-advanced" role="tabpanel" | 
| - aria-labelledby="tab-advanced"> | 
| - <div> | 
| - <h1 class="i18n_options_tab_advanced"></h1> | 
| - <p class="i18n_options_advanced_description"></p> | 
| - <section> | 
| - <h2 class="i18n_options_customize_header"></h2> | 
| - <ul id="customize" class="table"> | 
| - <li data-pref="shouldShowBlockElementMenu"> | 
| - <label> | 
| - <button role="checkbox" data-action="toggle-pref"></button> | 
| - <span class="i18n_options_customize_blockElement"></span> | 
| - <span class="i18n_options_readMore" | 
| - data-tooltip="options_customize_blockElement_tooltip"></span> | 
| - </label> | 
| - </li> | 
| - <li data-pref="show_devtools_panel"> | 
| - <label> | 
| - <button role="checkbox" data-action="toggle-pref"></button> | 
| - <span class="i18n_options_customize_showDevToolsPanel"></span> | 
| - <span class="i18n_options_readMore" | 
| - data-tooltip="options_customize_showDevToolsPanel_tooltip"></span> | 
| - </label> | 
| - </li> | 
| - <li data-pref="notifications_ignoredcategories"> | 
| - <label> | 
| - <button role="checkbox" data-action="toggle-pref"></button> | 
| - <span class="i18n_options_customize_showNotifications"></span> | 
| - <span class="i18n_options_readMore" | 
| - data-tooltip="options_customize_showNotifications_tooltip"></span> | 
| - </label> | 
| - </li> | 
| - </ul> | 
| - </section> | 
| - </div> | 
| - | 
| - <section> | 
| - <h1 class="i18n_options_filterList_title"></h1> | 
| - <p id="filter-lists-description" class="i18n_options_filterList_description"></p> | 
| - | 
| - <div id="all-filter-lists-table-header"> | 
| - <h2 class="i18n_options_filterList_column_status"></h2> | 
| - <h2 class="i18n_options_filterList_column_name"></h2> | 
| - <h2 class="i18n_options_filterList_column_update"></h2> | 
| + <section> | 
| + <h1 class="i18n_options_customFilters_title"></h1> | 
| + <p class="i18n_options_customFilters_description"></p> | 
| + <h2 class="i18n_options_customFilters_widget_title"></h2> | 
| + <div id="custom-filters"> | 
| + <div id="empty-custom-filters"> | 
| + <p class="i18n_options_customFilters_tip"></p> | 
| + <button class="i18n_options_customFilters_start" data-action="edit-custom-filters"> | 
| + </button> | 
| + <p> | 
| + <a class="i18n_options_customFilters_learn" id="link-filters" target="_blank"></a> | 
| + </p> | 
| </div> | 
| - <ul class="table cols" id="all-filter-lists-table"> | 
| - <template> | 
| - <button data-action="remove-subscription" class="control delete"></button> | 
| - <button data-action="toggle-disable-subscription" role="checkbox" class="control"> | 
| - </button> | 
| - <div class="state"> | 
| - <span class="i18n_options_filterList_state_active" id="state-active"></span> | 
| - <span class="i18n_options_filterList_state_disabled" id="state-disabled"></span> | 
| - </div> | 
| - <div> | 
| - <label class="display"></label> | 
| - </div> | 
| - <span class="last-update"></span> | 
| - <span class="message"></span> | 
| - <a data-action="open-context-menu" class="arrow"></a> | 
| - <div role="menubar" class="context-menu-wrapper"> | 
| - <div class="context-menu"> | 
| - <ul class="content" role="menu"> | 
| - <li role="menuitem"> | 
| - <a class="i18n_options_filterList_updateNow update-subscription" data-action="update-subscription"></a> | 
| - </li> | 
| - <li role="menuitem"> | 
| - <a class="i18n_options_filterList_website website" target="_blank"></a> | 
| - </li> | 
| - <li role="menuitem"> | 
| - <a class="i18n_options_filterList_source source" target="_blank"></a> | 
| - </li> | 
| - <li role="menuitem"> | 
| - <a class="i18n_options_filterList_delete delete" data-action="remove-subscription"></a> | 
| - </li> | 
| - </ul> | 
| - </div> | 
| - </div> | 
| - </template> | 
| - </ul> | 
| - <div class="controls"> | 
| - <button data-action="open-dialog" data-dialog="custom"> | 
| - <span class="icon icon-add"></span> | 
| - <span class="i18n_options_filterList_add"></span> | 
| + <textarea id="custom-filters-raw" rows="15"></textarea> | 
| + <button id="custom-filters-edit" class="i18n_options_customFilter_edit" data-action="edit-custom-filters"> | 
| + </button> | 
| + <div id="custom-filters-raw-controls"> | 
| + <button class="i18n_options_customFilter_save" data-action="save-custom-filters"> | 
| </button> | 
| - <button data-action="update-all-subscriptions"> | 
| - <span class="icon icon-update"></span> | 
| - <span class="i18n_options_filterList_update"></span> | 
| + <button class="i18n_options_customFilter_cancel" data-action="cancel-custom-filters"> | 
| </button> | 
| </div> | 
| - </section> | 
| + </div> | 
| + </section> | 
| + </div> | 
| - <section> | 
| - <h1 class="i18n_options_customFilters_title"></h1> | 
| - <p class="i18n_options_customFilters_description"></p> | 
| - <h2 class="i18n_options_customFilters_widget_title"></h2> | 
| - <div id="custom-filters"> | 
| - <div id="empty-custom-filters"> | 
| - <p class="i18n_options_customFilters_tip"></p> | 
| - <button class="i18n_options_customFilters_start" data-action="edit-custom-filters"> | 
| - </button> | 
| - <p> | 
| - <a class="i18n_options_customFilters_learn" id="link-filters" target="_blank"></a> | 
| - </p> | 
| - </div> | 
| - <textarea id="custom-filters-raw" rows="15"></textarea> | 
| - <button id="custom-filters-edit" class="i18n_options_customFilter_edit" data-action="edit-custom-filters"> | 
| - </button> | 
| - <div id="custom-filters-raw-controls"> | 
| - <button class="i18n_options_customFilter_save" data-action="save-custom-filters"> | 
| - </button> | 
| - <button class="i18n_options_customFilter_cancel" data-action="cancel-custom-filters"> | 
| - </button> | 
| - </div> | 
| - </div> | 
| - </section> | 
| - </div> | 
| - | 
| - <!-- Help tab content --> | 
| - <div id="content-help" role="tabpanel" aria-labelledby="tab-help"> | 
| - <h1 class="i18n_options_faq_title"></h1> | 
| - <p class="i18n_options_faq_description"></p> | 
| - <p> | 
| - <a id="link-faq" class="i18n_options_faq_title" target="_blank"></a> | 
| - </p> | 
| - <h1 class="i18n_options_forum_title"></h1> | 
| - <p class="i18n_options_forum_description"></p> | 
| - <p> | 
| - <a id="link-forum" class="i18n_options_forum_link" target="_blank"></a> | 
| - </p> | 
| - <h1 class="i18n_options_media_title"></h1> | 
| - <p class="i18n_options_media_description"></p> | 
| - <p> | 
| - <span id="share-general"> | 
| - <a id="link-twitter" target="_blank">Twitter</a> | 
| - <a id="link-facebook" target="_blank">Facebook</a> | 
| - <a id="link-gplus" target="_blank">Google+</a> | 
| - </span> | 
| - <span id="share-chinese"> | 
| - <a id="link-renren" target="_blank">renren</a> | 
| - <a id="link-weibo" target="_blank">weibo</a> | 
| - </span> | 
| - </p> | 
| - </div> | 
| + <!-- Help tab content --> | 
| + <div id="content-help" role="tabpanel" aria-labelledby="tab-help"> | 
| + <h1 class="i18n_options_faq_title"></h1> | 
| + <p class="i18n_options_faq_description"></p> | 
| + <p> | 
| + <a id="link-faq" class="i18n_options_faq_title" target="_blank"></a> | 
| + </p> | 
| + <h1 class="i18n_options_forum_title"></h1> | 
| + <p class="i18n_options_forum_description"></p> | 
| + <p> | 
| + <a id="link-forum" class="i18n_options_forum_link" target="_blank"></a> | 
| + </p> | 
| + <h1 class="i18n_options_media_title"></h1> | 
| + <p class="i18n_options_media_description"></p> | 
| + <p> | 
| + <span id="share-general"> | 
| + <a id="link-twitter" target="_blank">Twitter</a> | 
| + <a id="link-facebook" target="_blank">Facebook</a> | 
| + <a id="link-gplus" target="_blank">Google+</a> | 
| + </span> | 
| + <span id="share-chinese"> | 
| + <a id="link-renren" target="_blank">renren</a> | 
| + <a id="link-weibo" target="_blank">weibo</a> | 
| + </span> | 
| + </p> | 
| </div> | 
| - </div> | 
| + </main> | 
| <!-- Dialog --> | 
| <div id="dialog" role="dialog" aria-hidden="true"> | 
| <header> | 
| <span id="dialog-title"> | 
| + <span id="dialog-title-about" class="i18n_options_dialog_about_title"></span> | 
| <span id="dialog-title-custom" class="i18n_options_dialog_custom_title"></span> | 
| <span id="dialog-title-language-add" class="i18n_options_dialog_language_title"></span> | 
| <span id="dialog-title-language-change" class="i18n_options_dialog_language_title"></span> | 
| @@ -335,6 +325,14 @@ | 
| <button id="dialog-close" class="i18n_options_close focus-first" data-action="close-dialog"></button> | 
| </header> | 
| <div id="dialog-body" class="content"> | 
| + <!-- About Adblock Plus --> | 
| + <div id="dialog-content-about" class="dialog-content"> | 
| + <p id="abp-version"></p> | 
| + <p class="i18n_options_dialog_about_copyright"></p> | 
| + <p> | 
| + <button class="i18n_options_close primary" data-action="close-dialog"></button> | 
| + </p> | 
| + </div> | 
| <!-- Add language subscription --> | 
| <div id="dialog-content-language-add" class="dialog-content"> | 
| <ul id="all-lang-table-add" class="table list"> |