Commit e9847cca authored by Manvel Saroyan's avatar Manvel Saroyan

Issue 5169 - added HTML, strings and functionality of Whitelist tab

parent 84a204cd
......@@ -12,15 +12,19 @@
"message": "Adblock <strong>Plus</strong>"
},
"options_tab_general": {
"description": "Name in sidebar for General tab",
"description": "Sidebar tab label",
"message": "General"
},
"options_tab_whitelist": {
"description": "Sidebar tab label and main heading inside corresponding tab",
"message": "Whitelisted websites"
},
"options_tab_advanced": {
"description": "Name in sidebar for Advanced tab",
"description": "Sidebar tab label",
"message": "Advanced"
},
"options_tab_help": {
"description": "Name in sidebar for Help tab",
"description": "Sidebar tab label",
"message": "Help"
},
"options_version": {
......@@ -61,7 +65,7 @@
},
"options_language_title_tooltip_notes_1": {
"description": "First bottom part of tooltip description for 'Adblocking' section in General tab",
"message": "Consider: Sometimes ads appear because your filter lists are not up to date. If this is the case, its recommended to manually update all your filter lists. You can do that by going to <strong>Advanced > Update all filter lists</strong>."
"message": "Consider: Sometimes ads appear because your filter lists are not up to date. If this is the case, it's recommended to manually update all your filter lists. You can do that by going to <strong>Advanced > Update all filter lists</strong>."
},
"options_language_title_tooltip_notes_2": {
"description": "Second bottom part of tooltip description for 'Adblocking' section in General tab",
......@@ -102,7 +106,7 @@
"message": "Note that this feature may conflict with Acceptable Ads, which allows some nonintrusive ads to be displayed, as well as the tracking that is needed to measure the performance of those ads. This is necessary because some websites only earn revenue from ads if their impact can be measured."
},
"options_more_social_tooltip_1": {
"message": "Adblock Plus can disable social media buttons on websites, ensuring that social networks cant create a profile based on the websites you visit."
"message": "Adblock Plus can disable social media buttons on websites, ensuring that social networks can't create a profile based on the websites you visit."
},
"options_more_social_tooltip_2": {
"message": "Buttons used to share content on social media platforms such as Facebook, Twitter, Google Plus and others are placed on almost every website that you visit. Even if you don't click them, these buttons send requests to the servers of the social network which use information to create a profile based on your browsing habits."
......@@ -131,38 +135,44 @@
"description": "Acceptable ads descriptive name in General tab",
"message": "Allow some non-intrusive advertising"
},
"options_whitelisted_add": {
"description": "Button label for adding whitelisted website",
"message": "add website"
"options_whitelist_description": {
"description": "Whitelist tab description",
"message": "You've turned off ad blocking on these websites. You will see ads on these websites."
},
"options_whitelisted_empty": {
"description": "Text shown when list of whitelisted websites is empty",
"message": "There are no websites in your whitelist."
"options_whitelist_add": {
"description": "Add whitelisted domain button",
"message": "Add website"
},
"options_whitelisted_title": {
"description": "Whitelisting option name in General tab",
"message": "Whitelisted websites"
"options_whitelist_placeholder_example": {
"description": "Empty Whitelist input placeholder prefix",
"message": "e.g. $domain$",
"placeholders": {
"domain": {
"content": "$1",
"example": "www.example.com"
}
}
},
"options_whitelisted_title_tooltip_1": {
"description": "First top part of tooltip description for 'Whitelisted domains' section in General tab",
"message": "You can allow a website to display ads by adding it to your whitelist."
"options_whitelist_empty_1": {
"description": "Empty Whitelist placeholder",
"message": "You aren't whitelisting any websites yet."
},
"options_whitelisted_title_tooltip_2": {
"description": "Second top part of tooltip description for 'Whitelisted domains' section in General tab",
"message": "This means that Adblock Plus is completely deactivated on the whitelisted site. Ads and other annoyances, such as tracking scripts, may be activated."
"options_whitelist_empty_2": {
"description": "Empty Whitelist placeholder",
"message": "Websites you trust and want to allow ads on will be shown here."
},
"options_whitelisted_title_tooltip_notes_1": {
"description": "Bottom part of tooltip description for 'Whitelisted domains' section in General tab",
"message": "Note that this feature is different from whitelisted Acceptable Ads."
"options_whitelist_duplicate": {
"description": "Duplicate hostname warning of whitelist text input",
"message": "Website is already whitelisted"
},
"options_whitelist_description": {
"description": "Section description in whitelisted tab",
"message": "You've turned off ad blocking on these websites. You will see ads on these websites."
},
"options_button_add": {
"description": "Add button label",
"message": "add"
},
"options_button_cancel": {
"description": "Cancel button label",
"message": "cancel"
},
"options_tweaks_title": {
"description": "Section title in Advanced tab",
"message": "Tweaks"
......
......@@ -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,33 @@
</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"
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">
<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>
</div>
<div>
<button id="whitelisting-add-button" class="button-add" data-action="add-domain-exception">
+<span class="i18n_options_button_add"></span>
</button>
<span></span>
<button class="i18n_options_button_cancel cancel-button" data-action="cancel-domain-exception"></button>
</div>
</div>
</div>
</div>
</div>
</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">
......
......@@ -37,6 +37,7 @@
["synchronize_checksum_mismatch",
"options_filterList_lastDownload_checksumMismatch"]
]);
const timestampUI = Symbol();
function Collection(details)
{
......@@ -44,18 +45,25 @@
this.items = [];
}
Collection.prototype._setEmpty = function(table, text)
Collection.prototype._setEmpty = function(table, texts)
{
let placeholder = table.querySelector(".empty-placeholder");
if (text && !placeholder)
let placeholders = table.querySelectorAll(".empty-placeholder");
if (texts && placeholders.length == 0)
{
placeholder = document.createElement("li");
placeholder.className = "empty-placeholder";
placeholder.textContent = getMessage(text);
table.appendChild(placeholder);
for (let text of texts)
{
let placeholder = document.createElement("li");
placeholder.className = "empty-placeholder";
placeholder.textContent = getMessage(text);
table.appendChild(placeholder);
}
}
else if (placeholders.length > 0)
{
for (let placeholder of placeholders)
table.removeChild(placeholder);
}
else if (placeholder)
table.removeChild(placeholder);
};
Collection.prototype._createElementQuery = function(item)
......@@ -76,12 +84,8 @@
return item.title || item.url || item.text;
};
Collection.prototype.addItem = function(item)
Collection.prototype._sortItems = function()
{
if (this.items.indexOf(item) >= 0)
return;
this.items.push(item);
this.items.sort((a, b) =>
{
// Make sure that Acceptable Ads is always last, since it cannot be
......@@ -93,11 +97,26 @@
if (b.url == acceptableAdsUrl)
return -1;
// Make sure that newly added entries always appear on top in descending
// chronological order
let aTimestamp = a[timestampUI] || 0;
let bTimestamp = b[timestampUI] || 0;
if (aTimestamp || bTimestamp)
return bTimestamp - aTimestamp;
let aTitle = this._getItemTitle(a, 0).toLowerCase();
let bTitle = this._getItemTitle(b, 0).toLowerCase();
return aTitle.localeCompare(bTitle);
});
};
Collection.prototype.addItem = function(item)
{
if (this.items.indexOf(item) >= 0)
return;
this.items.push(item);
this._sortItems();
for (let j = 0; j < this.details.length; j++)
{
let table = E(this.details[j].id);
......@@ -179,6 +198,8 @@
Collection.prototype.updateItem = function(item)
{
let oldIndex = this.items.indexOf(item);
this._sortItems();
let access = (item.url || item.text).replace(/'/g, "\\'");
for (let i = 0; i < this.details.length; i++)
{
......@@ -197,7 +218,7 @@
{
control.setAttribute("aria-checked", item.disabled == false);
if (item.url == acceptableAdsUrl && this == collections.filterLists)
control.setAttribute("disabled", true);
control.disabled = true;
}
let dateElement = element.querySelector(".date");
......@@ -241,6 +262,10 @@
let sourceElement = element.querySelector(".context-menu .source");
if (sourceElement)
sourceElement.setAttribute("href", item.url);
let newIndex = this.items.indexOf(item);
if (oldIndex != newIndex)
table.insertBefore(element, table.childNodes[newIndex]);
}
};
......@@ -285,17 +310,17 @@
collections.langs = new Collection([
{
id: "blocking-languages-table",
emptyText: "options_dialog_language_added_empty"
emptyText: ["options_dialog_language_added_empty"]
},
{
id: "blocking-languages-dialog-table",
emptyText: "options_dialog_language_added_empty"
emptyText: ["options_dialog_language_added_empty"]
}
]);
collections.allLangs = new Collection([
{
id: "all-lang-table",
emptyText: "options_dialog_language_other_empty",
emptyText: ["options_dialog_language_other_empty"],
searchable: true
}
]);
......@@ -312,13 +337,13 @@
collections.whitelist = new Collection([
{
id: "whitelisting-table",
emptyText: "options_whitelisted_empty"
emptyText: ["options_whitelist_empty_1", "options_whitelist_empty_2"]
}
]);
collections.customFilters = new Collection([
{
id: "custom-filters-table",
emptyText: "options_customFilters_empty"
emptyText: ["options_customFilters_empty"]
}
]);
collections.filterLists = new Collection([
......@@ -495,22 +520,12 @@
case "cancel-custom-filters":
E("custom-filters").classList.remove("mode-edit");
break;
case "cancel-domain-exception":
E("whitelisting-textbox").value = "";
document.querySelector("#whitelisting .controls").classList
.remove("mode-edit");
break;
case "close-dialog":
closeDialog();
break;
case "edit-custom-filters":
editCustomFilters();
break;
case "edit-domain-exception":
document.querySelector("#whitelisting .controls").classList
.add("mode-edit");
E("whitelisting-textbox").focus();
break;
case "import-subscription": {
let url = E("blockingList-textbox").value;
addEnableSubscription(url);
......@@ -750,10 +765,12 @@
let placeholderValue = getMessage("options_dialog_language_find");
E("find-language").setAttribute("placeholder", placeholderValue);
E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false);
E("whitelisting-textbox").addEventListener("keypress", (e) =>
let exampleValue = getMessage("options_whitelist_placeholder_example",
["www.example.com"]);
E("whitelisting-textbox").setAttribute("placeholder", exampleValue);
E("whitelisting-textbox").addEventListener("keyup", (e) =>
{
if (getKey(e) == "Enter")
addWhitelistedDomain();
E("whitelisting-add-button").disabled = !e.target.value;
}, false);
// Advanced tab
......@@ -962,6 +979,16 @@
function addWhitelistedDomain()
{
let domain = E("whitelisting-textbox");
for (let whitelistItem of collections.whitelist.items)
{
if (whitelistItem.title == domain.value)
{
whitelistItem[timestampUI] = Date.now();
collections.whitelist.updateItem(whitelistItem);
domain.value = "";
break;
}
}
if (domain.value)
{
sendMessageHandleErrors({
......@@ -971,8 +998,7 @@
}
domain.value = "";
document.querySelector("#whitelisting .controls")
.classList.remove("mode-edit");
E("whitelisting-add-button").disabled = true;
}
function editCustomFilters()
......@@ -1016,6 +1042,7 @@
switch (action)
{
case "added":
filter[timestampUI] = Date.now();
updateFilter(filter);
updateShareLink();
break;
......
......@@ -347,6 +347,7 @@ html[dir="rtl"] .tabs li[role="tab"][aria-selected]
body[data-tab|="general"] #content-general,
body[data-tab|="advanced"] #content-advanced,
body[data-tab|="whitelist"] #content-whitelist,
body[data-tab|="help"] #content-help
{
display: block;
......@@ -414,7 +415,7 @@ div.button
border-top: 1px solid #CDCDCD;
}
button[disabled="true"]
button[role="checkbox"][disabled]
{
border-radius: 2px;
background-color: #ccc;
......@@ -511,7 +512,6 @@ button[role="checkbox"],
background-position: -12px -62px;
}
.icon-enter,
#custom-filters-add button::after
{
height: 8px;
......@@ -610,53 +610,7 @@ button[role="checkbox"],
width: 100%;
}
#whitelisting .controls.mode-edit > button,
#whitelisting .controls:not(.mode-edit) > div
{
display: none;
}
#whitelisting .controls input[type="text"]
{
border: 0px;
border-bottom: 1px solid #A1A1A1;
-moz-padding-end: 25px;
-webkit-padding-end: 25px;
-moz-margin-start: 14px;
-webkit-margin-start: 14px;
outline: 0px;
padding-bottom: 5px;
vertical-align: text-bottom;
width: 100%;
}
#whitelisting .controls .button-add span
{
-moz-margin-start: 5px;
-webkit-margin-start: 5px;
}
#whitelisting .button-add
{
-moz-margin-start: 32px;
-webkit-margin-start: 32px;
}
#whitelisting-add-button + span
{
flex: 1;
}
.icon-enter
{
background-position: -19px -33px;
position: absolute;
bottom: 9px;
-moz-margin-start: -20px;
-webkit-margin-start: -20px;
}
.button-add, .cancel-button
.button-add
{
background-color: transparent;
border: 0px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment