Provide visual cue in popup panel when base domain has subdomains

Related issue:
- https://github.com/gorhill/uBlock/issues/284
This commit is contained in:
Raymond Hill 2021-07-20 08:37:05 -04:00
parent dcc72ba51c
commit 75deadd31e
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
4 changed files with 39 additions and 18 deletions

View File

@ -280,8 +280,8 @@ body[data-more=""] #lessButton {
#firewall > div:first-child ~ div[data-des="*"] {
display: none;
}
#firewall:not(.expanded) > div.isSubDomain:not(.expandException):not(.isRootContext),
#firewall.expanded > div.isSubDomain.expandException:not(.isRootContext) {
#firewall:not(.expanded) > div.isSubdomain:not(.expandException):not(.isRootContext),
#firewall.expanded > div.isSubdomain.expandException:not(.isRootContext) {
display: none;
}
#firewall > div > span,
@ -369,8 +369,16 @@ body[data-more=""] #lessButton {
font-family: monospace;
text-align: center;
}
#firewall > div.isDomain > span:first-of-type {
#firewall > div.isDomain > span:first-of-type > span {
pointer-events: none;
}
#firewall > div.isDomain > span:first-of-type > span > span {
font-weight: 600;
pointer-events: auto;
}
#firewall > div.isDomain.hasSubdomains > span:first-of-type > span::before {
color: var(--default-ink-a40);
content: '\2026\A0';
}
#firewall > div:first-of-type > span:first-of-type::before {
color: var(--fg-0-50);
@ -381,8 +389,8 @@ body[data-more=""] #lessButton {
content: '\2012';
}
#firewall > div[data-des="*"] > span:nth-of-type(3),
#firewall > div.isSubDomain > span:nth-of-type(3),
#firewall > div.isSubDomain.isRootContext > span:nth-of-type(3),
#firewall > div.isSubdomain > span:nth-of-type(3),
#firewall > div.isSubdomain.isRootContext > span:nth-of-type(3),
#firewall.expanded > div:not(.expandException) > span:nth-of-type(3),
#firewall:not(.expanded) > div.expandException > span:nth-of-type(3),
#firewall:not(.expanded) > div.isDomain:not(.expandException) > span:nth-of-type(4),

View File

@ -26,7 +26,8 @@
--ink-50: #291d4f;
--ink-80: #20123a;
--ink-80-a4: #20123a0a;
--ink-80-a50: #20123a88;
--ink-80-a40: #20123a66;
--ink-80-a50: #20123a80;
--ink-90: #1d1133;
--light-gray-10: #f9f9fb;
--light-gray-10-a4: #f9f9fb0a;
@ -79,6 +80,7 @@
--default-ink: var(--ink-80);
--default-ink-a4: var(--ink-80-a4);
--default-ink-a40: var(--ink-80-a40);
--default-ink-a50: var(--ink-80-a50);
--default-surface: var(--light-gray-10);
--default-surface-border: var(--light-gray-70);

View File

@ -60,7 +60,7 @@ const domainsHitStr = vAPI.i18n('popupHitDomainCount');
let popupData = {};
let dfPaneBuilt = false;
let dfHotspots = null;
let allHostnameRows = [];
const allHostnameRows = [];
let cachedPopupHash = '';
// https://github.com/gorhill/uBlock/issues/2550
@ -378,7 +378,9 @@ const buildAllFirewallRows = function() {
const hnDetails = hostnameDict[des] || {};
const isDomain = des === hnDetails.domain;
const prettyDomainName = punycode.toUnicode(des);
const prettyDomainName = des.startsWith('xn--')
? punycode.toUnicode(des)
: des;
const isPunycoded = prettyDomainName !== des;
if ( isDomain && row.childElementCount < 4 ) {
@ -388,7 +390,7 @@ const buildAllFirewallRows = function() {
}
const span = row.querySelector('span:first-of-type');
span.querySelector('span').textContent = prettyDomainName;
span.querySelector(':scope > span > span').textContent = prettyDomainName;
const classList = row.classList;
@ -407,7 +409,8 @@ const buildAllFirewallRows = function() {
classList.toggle('isRootContext', des === pageHostname);
classList.toggle('is3p', hnDetails.domain !== pageDomain);
classList.toggle('isDomain', isDomain);
classList.toggle('isSubDomain', !isDomain);
classList.toggle('hasSubdomains', isDomain && hnDetails.hasSubdomains);
classList.toggle('isSubdomain', !isDomain);
const { counts } = hnDetails;
classList.toggle('allowed', gtz(counts.allowed.any));
classList.toggle('blocked', gtz(counts.blocked.any));
@ -470,17 +473,17 @@ const renderPrivacyExposure = function() {
let allDomainCount = 0;
let touchedDomainCount = 0;
allHostnameRows = [];
allHostnameRows.length = 0;
// Sort hostnames. First-party hostnames must always appear at the top
// of the list.
const desHostnameDone = {};
const keys = Object.keys(popupData.hostnameDict)
.sort(hostnameCompare);
const { hostnameDict } = popupData;
const desHostnameDone = new Set();
const keys = Object.keys(hostnameDict).sort(hostnameCompare);
for ( const des of keys ) {
// Specific-type rules -- these are built-in
if ( des === '*' || desHostnameDone.hasOwnProperty(des) ) { continue; }
const hnDetails = popupData.hostnameDict[des];
if ( des === '*' || desHostnameDone.has(des) ) { continue; }
const hnDetails = hostnameDict[des];
const { domain, counts } = hnDetails;
if ( allDomains.hasOwnProperty(domain) === false ) {
allDomains[domain] = false;
@ -492,8 +495,16 @@ const renderPrivacyExposure = function() {
touchedDomainCount += 1;
}
}
const dnDetails = hostnameDict[domain];
if ( dnDetails !== undefined ) {
if ( des !== domain ) {
dnDetails.hasSubdomains = true;
} else if ( dnDetails.hasSubdomains === undefined ) {
dnDetails.hasSubdomains = false;
}
}
allHostnameRows.push(des);
desHostnameDone[des] = true;
desHostnameDone.add(des);
}
const summary = domainsHitStr

View File

@ -88,7 +88,7 @@
</div>
<div id="templates" style="display: none">
<div data-des="" data-type="*"><span><span></span><sub></sub></span><span data-src="/"></span><span data-src="."></span></div>
<div data-des="" data-type="*"><span><span><span></span></span><sub></sub></span><span data-src="/"></span><span data-src="."></span></div>
<div id="actionSelector"><span id="dynaAllow"></span><span id="dynaNoop"></span><span id="dynaBlock"></span><span id="dynaCounts"></span></div>
<div id="hotspotTip"></div>
<div id="tooltip"></div>