Commit bf08e516 authored by Manvel Saroyan's avatar Manvel Saroyan

issue 3741 - Add 'remove' option to list items in new options page

parent a327d434
......@@ -35,6 +35,14 @@
"description": "Button in navigation sidebar to support Adblock Plus",
"message": "Support us"
},
"options_control_toggle_title": {
"description": "Title of toggle controls",
"message": "toggle"
},
"options_control_remove_title": {
"description": "Title of remove controls",
"message": "remove"
},
"options_readMore": {
"description": "Read more element that shows tooltip with description",
"message": "read more"
......@@ -71,10 +79,6 @@
"description": "Tooltip description for 'More blocking options' section in General tab",
"message": "By default, Adblock Plus blocks all annoying ads, including video ads, animated ads, noisy ads, flashy banners, pop-ups, pop-unders and much more. In addition to ads, Adblock Plus can also block tracking, malware, social media buttons and more to increase your safety and privacy online."
},
"options_popular": {
"description": "Popular label in further blocking options table",
"message": "popular"
},
"options_more_add": {
"description": "Button name for adding other filter list in General tab",
"message": "add other filter list"
......
......@@ -89,8 +89,9 @@
</div>
<ul id="blocking-languages-table" class="table list">
<template>
<button role="checkbox" class="control"></button>
<button data-action="toggle-disable-subscription" role="checkbox" class="control" title="options_control_toggle_title"></button>
<label class="display"></label>
<button data-action="remove-subscription" class="delete control" title="options_control_remove_title"></button>
</template>
</ul>
<div class="controls">
......@@ -111,19 +112,19 @@
<div id="custom-wrapper">
<ul id="recommend-list-table" class="table list">
<template>
<button role="checkbox" class="control"></button>
<button data-action="toggle-remove-subscription" role="checkbox" class="control"></button>
<div class="fill">
<label class="display"
data-tooltip="options_more_%value%_tooltip"
data-tooltip-native></label>
</div>
<span class="i18n_options_popular popular"></span>
</template>
</ul>
<ul id="custom-list-table" class="table list">
<template>
<button role="checkbox" class="control"></button>
<button data-action="toggle-disable-subscription" role="checkbox" class="control" title="options_control_toggle_title"></button>
<label class="display"></label>
<button data-action="remove-subscription" class="delete control" title="options_control_remove_title"></button>
</template>
</ul>
</div>
......@@ -148,7 +149,7 @@
</div>
<ul id="acceptableads-table" class="table list">
<template>
<button role="checkbox" class="control"></button>
<button data-action="toggle-remove-subscription" role="checkbox" class="control"></button>
<label class="display"></label>
</template>
</ul>
......@@ -163,8 +164,8 @@
</div>
<ul id="whitelisting-table" class="table list">
<template>
<button class="delete control"></button>
<label class="display"></label>
<button data-action="remove-filter" class="delete control" title="options_control_remove_title"></button>
</template>
</ul>
<div class="controls">
......@@ -241,7 +242,7 @@
</div>
<ul class="table cols" id="all-filter-lists-table">
<template>
<button role="checkbox" class="control"></button>
<button data-action="toggle-disable-subscription" role="checkbox" class="control"></button>
<div>
<label data-action="open-context-menu" class="display"></label>
<div data-action="open-context-menu" class="arrow">
......@@ -372,7 +373,7 @@
</div>
<ul id="all-lang-table" class="table list">
<template>
<button class="button-add control">
<button data-action="add-language-subscription" class="button-add control">
+<span class="i18n_options_button_add"></span>
</button>
<label class="display"></label>
......
......@@ -23,7 +23,6 @@
var filtersMap = Object.create(null);
var collections = Object.create(null);
var acceptableAdsUrl = null;
var maxLabelId = 0;
var getMessage = ext.i18n.getMessage;
var filterErrors =
{
......@@ -102,11 +101,11 @@
var item = arguments[i];
var listItem = document.createElement("li");
listItem.appendChild(document.importNode(template.content, true));
listItem.setAttribute("aria-label", this._getItemTitle(item, j));
listItem.setAttribute("data-access", item.url || item.text);
listItem.setAttribute("role", "section");
var labelId = "label-" + (++maxLabelId);
var label = listItem.querySelector(".display");
label.setAttribute("id", labelId);
if (item.recommended && label.hasAttribute("data-tooltip"))
{
var tooltipId = label.getAttribute("data-tooltip");
......@@ -114,18 +113,13 @@
label.setAttribute("data-tooltip", tooltipId);
}
var control = listItem.querySelector(".control");
if (control)
var controls = listItem.querySelectorAll(".control");
for (var k = 0; k < controls.length; k++)
{
control.setAttribute("aria-labelledby", labelId);
control.addEventListener("click", this.details[j].onClick, false);
var role = control.getAttribute("role");
if (role == "checkbox" && !label.hasAttribute("data-action"))
if (controls[k].hasAttribute("title"))
{
var controlId = "control-" + maxLabelId;
control.setAttribute("id", controlId);
label.setAttribute("for", controlId);
var titleValue = getMessage(controls[k].getAttribute("title"));
controls[k].setAttribute("title", titleValue)
}
}
......@@ -194,14 +188,14 @@
var title = this._getItemTitle(item, i);
element.querySelector(".display").textContent = title;
if (title)
element.setAttribute("aria-label", title);
if (this.details[i].searchable)
element.setAttribute("data-search", title.toLowerCase());
var control = element.querySelector(".control[role='checkbox']");
if (control)
{
control.setAttribute("aria-checked", item.disabled == false);
if (item.url == acceptableAdsUrl && this.details[i].onClick ==
toggleDisableSubscription)
if (item.url == acceptableAdsUrl && this == collections.filterLists)
control.setAttribute("disabled", true);
}
......@@ -282,63 +276,17 @@
return true;
}
function toggleRemoveSubscription(e)
{
e.preventDefault();
var subscriptionUrl = findParentData(e.target, "access", false);
if (e.target.getAttribute("aria-checked") == "true")
{
ext.backgroundPage.sendMessage({
type: "subscriptions.remove",
url: subscriptionUrl
});
}
else
addEnableSubscription(subscriptionUrl);
}
function toggleDisableSubscription(e)
{
e.preventDefault();
var subscriptionUrl = findParentData(e.target, "access", false);
ext.backgroundPage.sendMessage(
{
type: "subscriptions.toggle",
keepInstalled: true,
url: subscriptionUrl
});
}
function onAddLanguageSubscriptionClick(e)
{
e.preventDefault();
var url = findParentData(this, "access", false);
addEnableSubscription(url);
}
function onRemoveFilterClick()
{
var filter = findParentData(this, "access", false);
ext.backgroundPage.sendMessage(
{
type: "filters.remove",
text: filter
});
}
collections.popular = new Collection(
[
{
id: "recommend-list-table",
onClick: toggleRemoveSubscription
id: "recommend-list-table"
}
]);
collections.langs = new Collection(
[
{
id: "blocking-languages-table",
emptyText: "options_dialog_language_added_empty",
onClick: toggleRemoveSubscription
emptyText: "options_dialog_language_added_empty"
},
{
id: "blocking-languages-dialog-table",
......@@ -350,29 +298,26 @@
{
id: "all-lang-table",
emptyText: "options_dialog_language_other_empty",
onClick: onAddLanguageSubscriptionClick
searchable: true
}
]);
collections.acceptableAds = new Collection(
[
{
id: "acceptableads-table",
onClick: toggleRemoveSubscription
id: "acceptableads-table"
}
]);
collections.custom = new Collection(
[
{
id: "custom-list-table",
onClick: toggleRemoveSubscription
id: "custom-list-table"
}
]);
collections.whitelist = new Collection(
[
{
id: "whitelisting-table",
emptyText: "options_whitelisted_empty",
onClick: onRemoveFilterClick
emptyText: "options_whitelisted_empty"
}
]);
collections.customFilters = new Collection(
......@@ -386,7 +331,6 @@
[
{
id: "all-filter-lists-table",
onClick: toggleDisableSubscription,
useOriginalTitle: true
}
]);
......@@ -633,6 +577,36 @@
url: findParentData(element, "access", false)
});
break;
case "toggle-remove-subscription":
var subscriptionUrl = findParentData(element, "access", false);
if (element.getAttribute("aria-checked") == "true")
{
ext.backgroundPage.sendMessage({
type: "subscriptions.remove",
url: subscriptionUrl
});
}
else
addEnableSubscription(subscriptionUrl);
break;
case "toggle-disable-subscription":
ext.backgroundPage.sendMessage(
{
type: "subscriptions.toggle",
keepInstalled: true,
url: findParentData(element, "access", false)
});
break;
case "add-language-subscription":
addEnableSubscription(findParentData(element, "access", false));
break;
case "remove-filter":
ext.backgroundPage.sendMessage(
{
type: "filters.remove",
text: findParentData(element, "access", false)
});
break;
}
}
}
......@@ -953,7 +927,6 @@
break;
case "removed":
var knownSubscription = subscriptionsMap[subscription.url];
if (subscription.url == acceptableAdsUrl || subscription.recommended)
{
subscription.disabled = true;
......
......@@ -102,7 +102,6 @@ textarea
button[role="checkbox"]
{
vertical-align: top;
width: 18px;
height: 18px;
margin-top: 0px;
......@@ -359,9 +358,8 @@ div.button
.table li
{
display: flex;
padding: 12px 0px;
-webkit-padding-start: 16px;
-moz-padding-start: 16px;
align-items: center;
padding: 12px 16px;
border-radius: 3px;
}
......@@ -414,20 +412,17 @@ button[disabled="true"]
.table button.delete
{
background-color: transparent;
background-position: -10px -33px;
background-position: -50px -51px;
border: 0px;
margin-top: 5px;
-moz-margin-end: 20px;
-webkit-margin-end: 20px;
height: 10px;
padding: 0px;
cursor: pointer;
width: 10px;
}
.table .popular
.table button.delete:hover
{
color: #1E8728;
font-size: 12px;
-moz-padding-end: 12px;
-webkit-padding-end: 12px;
background-position: -61px -51px;
}
.tabs.horizontal
......@@ -506,8 +501,7 @@ button[role="checkbox"],
}
.icon-enter,
#custom-filters-add button::after,
.table button.delete
#custom-filters-add button::after
{
height: 8px;
width: 8px;
......@@ -703,10 +697,9 @@ body[data-tab="advanced-customFilters"] #content-advanced [data-tab="advanced-cu
font-weight: 600;
}
#all-filter-lists .table li
#all-filter-lists .table
{
padding-left: 16px;
padding-right: 16px;
display: inline-block;
}
#all-filter-lists .table li > div
......
skin/options-sprite.png

3.61 KB | W: | H:

skin/options-sprite.png

4.12 KB | W: | H:

skin/options-sprite.png
skin/options-sprite.png
skin/options-sprite.png
skin/options-sprite.png
  • 2-up
  • Swipe
  • Onion skin
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