Commit a0a92d62 authored by Manvel Saroyan's avatar Manvel Saroyan

Issue 5632 - Use checkboxes for toggling acceptable ads

parent 63e4758d
......@@ -97,22 +97,24 @@
<p class="i18n_options_acceptableAds_description"></p>
</header>
<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>
<ul>
<li>
<button id="acceptable-ads-allow" data-action="switch-acceptable-ads" type="button" role="checkbox" name="acceptable-ads" value="ads"></button>
<label for="acceptable-ads-allow" class="i18n_options_acceptableAds_ads_label"></label>
<p id="enable-acceptable-ads-description" class="i18n_options_acceptableAds_ads_description_1"></p>
<p class="i18n_options_acceptableAds_ads_description_2"></p>
</li>
<ul>
<li>
<button id="acceptable-ads-privacy-allow" data-action="switch-acceptable-ads" type="button" role="checkbox" name="acceptable-ads" value="privacy"></button>
<label for="acceptable-ads-privacy-allow" class="i18n_options_acceptableAds_privacy_label"></label>
<p>
<a id="enable-acceptable-ads-privacy-description" class="i18n_options_acceptableAds_privacy_description"></a>
</p>
<p id="dnt" class="i18n_options_acceptableAds_dnt_notification"></p>
</li>
</ul>
</ul>
</form>
</section>
<section class="cols">
......
......@@ -559,6 +559,9 @@
function execAction(action, element)
{
if (element.getAttribute("aria-disabled") == "true")
return;
switch (action)
{
case "add-domain-exception":
......@@ -654,14 +657,31 @@
break;
case "switch-acceptable-ads":
let value = element.value || element.dataset.value;
// User check the checkbox
let shouldCheck = element.getAttribute("aria-checked") != "true";
let installAcceptableAds = false;
let installAcceptableAdsPrivacy = false;
// Acceptable Ads checkbox clicked
if (value == "ads")
{
installAcceptableAds = shouldCheck;
}
// Privacy Friendly Acceptable Ads checkbox clicked
else
{
installAcceptableAdsPrivacy = shouldCheck;
installAcceptableAds = !shouldCheck;
}
browser.runtime.sendMessage({
type: value == "privacy" ? "subscriptions.add" :
type: installAcceptableAds ? "subscriptions.add" :
"subscriptions.remove",
url: acceptableAdsPrivacyUrl
url: acceptableAdsUrl
});
browser.runtime.sendMessage({
type: value == "ads" ? "subscriptions.add" : "subscriptions.remove",
url: acceptableAdsUrl
type: installAcceptableAdsPrivacy ? "subscriptions.add" :
"subscriptions.remove",
url: acceptableAdsPrivacyUrl
});
break;
case "switch-tab":
......@@ -889,7 +909,11 @@
});
getDocLink("acceptable_ads_criteria", (link) =>
{
setLinks("enable-aa-description", link);
setLinks("enable-acceptable-ads-description", link);
});
getDocLink("privacy_friendly_ads", (link) =>
{
E("enable-acceptable-ads-privacy-description").href = link;
});
getDocLink("adblock_plus_{browser}_dnt", url =>
{
......@@ -1034,20 +1058,33 @@
function setAcceptableAds()
{
let option = "none";
document.forms["acceptable-ads"].classList.remove("show-dnt-notification");
let acceptableAdsForm = E("acceptable-ads");
let acceptableAds = E("acceptable-ads-allow");
let acceptableAdsPrivacy = E("acceptable-ads-privacy-allow");
acceptableAdsForm.classList.remove("show-dnt-notification");
acceptableAds.setAttribute("aria-checked", false);
acceptableAdsPrivacy.setAttribute("aria-checked", false);
acceptableAdsPrivacy.setAttribute("tabindex", 0);
if (acceptableAdsUrl in subscriptionsMap)
{
option = "ads";
acceptableAds.setAttribute("aria-checked", true);
acceptableAdsPrivacy.setAttribute("aria-disabled", false);
}
else if (acceptableAdsPrivacyUrl in subscriptionsMap)
{
option = "privacy";
acceptableAds.setAttribute("aria-checked", true);
acceptableAdsPrivacy.setAttribute("aria-checked", true);
acceptableAdsPrivacy.setAttribute("aria-disabled", false);
if (!navigator.doNotTrack)
document.forms["acceptable-ads"].classList.add("show-dnt-notification");
if (navigator.doNotTrack != 1)
acceptableAdsForm.classList.add("show-dnt-notification");
}
else
{
// Using aria-disabled in order to keep the focus
acceptableAdsPrivacy.setAttribute("aria-disabled", true);
acceptableAdsPrivacy.setAttribute("tabindex", -1);
}
document.forms["acceptable-ads"]["acceptable-ads"].value = option;
}
function isAcceptableAds(url)
......
......@@ -174,7 +174,8 @@ button[role="checkbox"][aria-checked="true"]:not(.toggle)
background-position: 0px 18px;
}
button[role="checkbox"][disabled]
button[role="checkbox"][disabled],
button[role="checkbox"][aria-disabled="true"]
{
border-radius: 2px;
background-color: #ccc;
......@@ -622,41 +623,33 @@ section.cols > *:last-child
Acceptable ads
*/
#acceptable-ads
{
background-color: #F3F3F3;
}
#acceptable-ads > div
#acceptable-ads ul
{
position: relative;
padding: 1.5rem;
padding-left: 3.3rem;
padding-right: 0.9rem;
border: 1px solid #CDCDCD;
border-width: 0px 1px 1px 1px;
padding-left: 2rem;
list-style: none;
}
#acceptable-ads > div:first-of-type
html[dir="rtl"] #acceptable-ads ul
{
border-top: 1px solid #CDCDCD;
padding-left: 0rem;
padding-right: 2rem;
}
#acceptable-ads > div > p:last-of-type
#acceptable-ads button
{
margin-bottom: 0rem;
position: absolute;
margin-top: 0.3rem;
left: 0rem;
}
#acceptable-ads > div input
html[dir="rtl"] button
{
position: absolute;
left: 0rem;
margin: 0.25rem 0.9rem;
width: 1.3rem;
height: 1.3rem;
left: auto;
right: 0rem;
}
#acceptable-ads > div label
#acceptable-ads label
{
font-weight: 700;
font-size: 1.375rem;
......
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