From 75deadd31ebe6f42ede1b789013d2ac966c9f861 Mon Sep 17 00:00:00 2001 From: Raymond Hill Date: Tue, 20 Jul 2021 08:37:05 -0400 Subject: [PATCH] Provide visual cue in popup panel when base domain has subdomains Related issue: - https://github.com/gorhill/uBlock/issues/284 --- src/css/popup-fenix.css | 18 +++++++++++++----- src/css/themes/default.css | 4 +++- src/js/popup-fenix.js | 33 ++++++++++++++++++++++----------- src/popup-fenix.html | 2 +- 4 files changed, 39 insertions(+), 18 deletions(-) diff --git a/src/css/popup-fenix.css b/src/css/popup-fenix.css index b6294666f..8c6324e85 100644 --- a/src/css/popup-fenix.css +++ b/src/css/popup-fenix.css @@ -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), diff --git a/src/css/themes/default.css b/src/css/themes/default.css index 93c7b521b..bb67e51ed 100644 --- a/src/css/themes/default.css +++ b/src/css/themes/default.css @@ -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); diff --git a/src/js/popup-fenix.js b/src/js/popup-fenix.js index f5e7be640..49834dc90 100644 --- a/src/js/popup-fenix.js +++ b/src/js/popup-fenix.js @@ -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 diff --git a/src/popup-fenix.html b/src/popup-fenix.html index 1490ea673..937a504e2 100644 --- a/src/popup-fenix.html +++ b/src/popup-fenix.html @@ -88,7 +88,7 @@