зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1573605 - Show undetected protections category items in a "Not Found" section, update UI to spec. r=johannh
Differential Revision: https://phabricator.services.mozilla.com/D42113 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Nihanth Subramanya
Родитель
a05cee34df
Коммит
14aa4dc1ba
|
|
@ -1494,35 +1494,55 @@ var gProtectionsHandler = {
|
|||
});
|
||||
},
|
||||
|
||||
async showTrackersSubview() {
|
||||
async showTrackersSubview(event) {
|
||||
if (event.target.classList.contains("notFound")) {
|
||||
return;
|
||||
}
|
||||
|
||||
await TrackingProtection.updateSubView();
|
||||
this._protectionsPopupMultiView.showSubView(
|
||||
"protections-popup-trackersView"
|
||||
);
|
||||
},
|
||||
|
||||
async showSocialblockerSubview() {
|
||||
async showSocialblockerSubview(event) {
|
||||
if (event.target.classList.contains("notFound")) {
|
||||
return;
|
||||
}
|
||||
|
||||
await SocialTracking.updateSubView();
|
||||
this._protectionsPopupMultiView.showSubView(
|
||||
"protections-popup-socialblockView"
|
||||
);
|
||||
},
|
||||
|
||||
async showCookiesSubview() {
|
||||
async showCookiesSubview(event) {
|
||||
if (event.target.classList.contains("notFound")) {
|
||||
return;
|
||||
}
|
||||
|
||||
await ThirdPartyCookies.updateSubView();
|
||||
this._protectionsPopupMultiView.showSubView(
|
||||
"protections-popup-cookiesView"
|
||||
);
|
||||
},
|
||||
|
||||
async showFingerprintersSubview() {
|
||||
async showFingerprintersSubview(event) {
|
||||
if (event.target.classList.contains("notFound")) {
|
||||
return;
|
||||
}
|
||||
|
||||
await Fingerprinting.updateSubView();
|
||||
this._protectionsPopupMultiView.showSubView(
|
||||
"protections-popup-fingerprintersView"
|
||||
);
|
||||
},
|
||||
|
||||
async showCryptominersSubview() {
|
||||
async showCryptominersSubview(event) {
|
||||
if (event.target.classList.contains("notFound")) {
|
||||
return;
|
||||
}
|
||||
|
||||
await Cryptomining.updateSubView();
|
||||
this._protectionsPopupMultiView.showSubView(
|
||||
"protections-popup-cryptominersView"
|
||||
|
|
@ -1693,7 +1713,7 @@ var gProtectionsHandler = {
|
|||
// runs on tab switch, so we can avoid associating the data with the document directly.
|
||||
blocker.activated = blocker.isBlocking(event);
|
||||
let detected = blocker.isDetected(event);
|
||||
blocker.categoryItem.hidden = !detected;
|
||||
blocker.categoryItem.classList.toggle("notFound", !detected);
|
||||
anyDetected = anyDetected || detected;
|
||||
anyBlocking = anyBlocking || blocker.activated;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,21 +63,21 @@
|
|||
<vbox id="protections-popup-content" flex="1">
|
||||
<vbox id="protections-popup-category-list">
|
||||
<toolbarbutton id="protections-popup-category-tracking-protection"
|
||||
onclick="gProtectionsHandler.showTrackersSubview();"
|
||||
onclick="gProtectionsHandler.showTrackersSubview(event);"
|
||||
class="protections-popup-category" align="center"
|
||||
wrap="true">
|
||||
<image class="protections-popup-category-icon tracking-protection-icon"/>
|
||||
<label flex="1" class="protections-popup-category-label">&contentBlocking.trackingProtection4.label;</label>
|
||||
</toolbarbutton>
|
||||
<toolbarbutton id="protections-popup-category-socialblock"
|
||||
onclick="gProtectionsHandler.showSocialblockerSubview();"
|
||||
onclick="gProtectionsHandler.showSocialblockerSubview(event);"
|
||||
class="protections-popup-category" align="center">
|
||||
<image class="protections-popup-category-icon socialblock-icon"/>
|
||||
<label flex="1"
|
||||
class="protections-popup-category-label">&contentBlocking.socialblock.label;</label>
|
||||
</toolbarbutton>
|
||||
<toolbarbutton id="protections-popup-category-cookies"
|
||||
onclick="gProtectionsHandler.showCookiesSubview();"
|
||||
onclick="gProtectionsHandler.showCookiesSubview(event);"
|
||||
class="protections-popup-category" align="center"
|
||||
wrap="true">
|
||||
<image class="protections-popup-category-icon thirdpartycookies-icon"/>
|
||||
|
|
@ -88,30 +88,32 @@
|
|||
hidden="true"></label>
|
||||
</toolbarbutton>
|
||||
<toolbarbutton id="protections-popup-category-cryptominers"
|
||||
onclick="gProtectionsHandler.showCryptominersSubview();"
|
||||
onclick="gProtectionsHandler.showCryptominersSubview(event);"
|
||||
class="protections-popup-category" align="center"
|
||||
wrap="true">
|
||||
<image class="protections-popup-category-icon cryptominers-icon"/>
|
||||
<label flex="1" class="protections-popup-category-label">&contentBlocking.cryptominers.label;</label>
|
||||
</toolbarbutton>
|
||||
<toolbarbutton id="protections-popup-category-fingerprinters"
|
||||
onclick="gProtectionsHandler.showFingerprintersSubview();"
|
||||
onclick="gProtectionsHandler.showFingerprintersSubview(event);"
|
||||
class="protections-popup-category" align="center"
|
||||
wrap="true">
|
||||
<image class="protections-popup-category-icon fingerprinters-icon"/>
|
||||
<label flex="1" class="protections-popup-category-label">&contentBlocking.fingerprinters.label;</label>
|
||||
</toolbarbutton>
|
||||
<description id="protections-popup-blocking-section-header"
|
||||
hidden="true"
|
||||
role="heading"
|
||||
aria-level="2">&protections.blocking.label;</description>
|
||||
<hbox id="protections-popup-not-blocking-section-header" hidden="true">
|
||||
<description id="protections-popup-not-blocking-section-description">&protections.notBlocking.label;</description>
|
||||
aria-level="2">&protections.blocking2.label;</description>
|
||||
<hbox id="protections-popup-not-blocking-section-header">
|
||||
<description id="protections-popup-not-blocking-section-description">&protections.notBlocking2.label;</description>
|
||||
<label id="protections-popup-not-blocking-section-why"
|
||||
class="text-link"
|
||||
onmouseover="document.getElementById(event.target.tooltip).openPopup(event.target);"
|
||||
onmouseout="document.getElementById(event.target.tooltip).hidePopup()">&protections.notBlocking.why.label;</label>
|
||||
</hbox>
|
||||
<description id="protections-popup-not-found-section-header"
|
||||
role="heading"
|
||||
aria-level="2">&protections.notFound.label;</description>
|
||||
</vbox>
|
||||
</vbox>
|
||||
</vbox>
|
||||
|
|
|
|||
|
|
@ -749,11 +749,12 @@ you can use these alternative items. Otherwise, their values should be empty. -
|
|||
<!ENTITY protections.siteNotWorkingView.siteStillBroken.label "Site still broken after turning off protections?">
|
||||
<!ENTITY protections.siteNotWorkingView.sendReport.label "Send a report">
|
||||
|
||||
<!ENTITY protections.blocking.label "Blocking">
|
||||
<!ENTITY protections.notBlocking.label "Not Blocking">
|
||||
<!ENTITY protections.blocking2.label "Blocked">
|
||||
<!ENTITY protections.notBlocking2.label "Allowed">
|
||||
<!ENTITY protections.notBlocking.why.label "Why?">
|
||||
<!ENTITY protections.notBlocking.why.etpOn.tooltip "Blocking these could break elements of some websites. Without trackers, some buttons, forms, and login fields might not work.">
|
||||
<!ENTITY protections.notBlocking.why.etpOff.tooltip "Turning off protections will allow all trackers on this site. It may also improve some website functionality.">
|
||||
<!ENTITY protections.notFound.label "None Detected">
|
||||
<!ENTITY protections.socialMediaTrackers.label "Social Media Trackers">
|
||||
<!ENTITY protections.crossSiteTrackingCookies.label "Cross-Site Tracking Cookies">
|
||||
<!ENTITY protections.trackingContent.label "Tracking Content">
|
||||
|
|
|
|||
|
|
@ -637,7 +637,8 @@ description#identity-popup-content-verifier,
|
|||
}
|
||||
|
||||
#protections-popup-blocking-section-header,
|
||||
#protections-popup-not-blocking-section-header {
|
||||
#protections-popup-not-blocking-section-header,
|
||||
#protections-popup-not-found-section-header {
|
||||
margin: 0;
|
||||
padding: var(--vertical-section-padding) var(--horizontal-padding);
|
||||
color: #737373;
|
||||
|
|
@ -668,32 +669,43 @@ description#identity-popup-content-verifier,
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
#protections-popup-no-trackers-found-description:not([hidden]) ~ #protections-popup-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#protections-popup-blocking-section-header,
|
||||
#protections-popup-not-blocking-section-header,
|
||||
#protections-popup-not-found-section-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#protections-popup-blocking-section-header {
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
#protections-popup:not([hasException]) .protections-popup-category.blocked:not([hidden]) ~ #protections-popup-blocking-section-header,
|
||||
.protections-popup-category:not(.blocked):not([hidden]) ~ #protections-popup-not-blocking-section-header {
|
||||
.protections-popup-category.notFound ~ #protections-popup-not-found-section-header,
|
||||
.protections-popup-category:not(.blocked):not(.notFound) ~ #protections-popup-not-blocking-section-header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#protections-popup:not([hasException]) #protections-popup-category-tracking-protection.blocked {
|
||||
#protections-popup:not([hasException]) #protections-popup-category-socialblock.blocked {
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
#protections-popup:not([hasException]) #protections-popup-category-socialblock.blocked {
|
||||
#protections-popup:not([hasException]) #protections-popup-category-cookies.blocked {
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
#protections-popup:not([hasException]) #protections-popup-category-cookies.blocked {
|
||||
#protections-popup:not([hasException]) #protections-popup-category-tracking-protection.blocked {
|
||||
grid-row: 4;
|
||||
}
|
||||
|
||||
#protections-popup:not([hasException]) #protections-popup-category-cryptominers.blocked {
|
||||
#protections-popup:not([hasException]) #protections-popup-category-fingerprinters.blocked {
|
||||
grid-row: 5;
|
||||
}
|
||||
|
||||
#protections-popup:not([hasException]) #protections-popup-category-fingerprinters.blocked {
|
||||
#protections-popup:not([hasException]) #protections-popup-category-cryptominers.blocked {
|
||||
grid-row: 6;
|
||||
}
|
||||
|
||||
|
|
@ -716,31 +728,64 @@ description#identity-popup-content-verifier,
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
#protections-popup:not([hasException]) #protections-popup-blocking-section-header:not([hidden]) + #protections-popup-not-blocking-section-header {
|
||||
border-top: 1px solid var(--panel-separator-color);
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#protections-popup-category-tracking-protection {
|
||||
#protections-popup-category-socialblock {
|
||||
grid-row: 8;
|
||||
}
|
||||
|
||||
#protections-popup-category-socialblock {
|
||||
#protections-popup-category-cookies {
|
||||
grid-row: 9;
|
||||
}
|
||||
|
||||
#protections-popup-category-cookies {
|
||||
#protections-popup-category-tracking-protection {
|
||||
grid-row: 10;
|
||||
}
|
||||
|
||||
#protections-popup-category-cryptominers {
|
||||
#protections-popup-category-fingerprinters {
|
||||
grid-row: 11;
|
||||
}
|
||||
|
||||
#protections-popup-category-fingerprinters {
|
||||
#protections-popup-category-cryptominers {
|
||||
grid-row: 12;
|
||||
}
|
||||
|
||||
#protections-popup-not-found-section-header {
|
||||
grid-row: 13;
|
||||
}
|
||||
|
||||
.protections-popup-category.notFound {
|
||||
color: var(--panel-disabled-color);
|
||||
fill: var(--panel-disabled-color);
|
||||
}
|
||||
|
||||
.protections-popup-category.notFound:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* Hide the arrow for not found items */
|
||||
.protections-popup-category.notFound::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#protections-popup-category-socialblock.notFound {
|
||||
grid-row: 14 !important;
|
||||
}
|
||||
|
||||
#protections-popup-category-cookies.notFound {
|
||||
grid-row: 15 !important;
|
||||
}
|
||||
|
||||
#protections-popup-category-tracking-protection.notFound {
|
||||
grid-row: 16 !important;
|
||||
}
|
||||
|
||||
#protections-popup-category-fingerprinters.notFound {
|
||||
grid-row: 17 !important;
|
||||
}
|
||||
|
||||
#protections-popup-category-cryptominers.notFound {
|
||||
grid-row: 18 !important;
|
||||
}
|
||||
|
||||
.tracking-protection-icon {
|
||||
list-style-image: url(chrome://browser/skin/controlcenter/tracker-image.svg);
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче