From 8adad98a0d613acaf941b8c4f947340f8cbfd04e Mon Sep 17 00:00:00 2001 From: Raymond Hill Date: Mon, 10 Feb 2020 08:06:36 -0500 Subject: [PATCH] New way to convey IDN and CNAME info in popup panel Hostnames which have unpunycoded IDN or canonical name information will have this information reported as an extra line under the hostname name in the popup panel, rather than as a tooltip. For the fenix UI flavor, the save/revert tools are now shown regardless of whether the overview area is visible or not. --- src/css/popup-fenix.css | 24 ++++++++++++------------ src/css/popup.css | 22 +++++++++++----------- src/js/popup-fenix.js | 26 ++++++++++++++------------ src/js/popup.js | 24 +++++++++++++----------- src/popup-fenix.html | 2 +- src/popup.html | 2 +- 6 files changed, 52 insertions(+), 48 deletions(-) diff --git a/src/css/popup-fenix.css b/src/css/popup-fenix.css index 893bfb077..b930b099c 100644 --- a/src/css/popup-fenix.css +++ b/src/css/popup-fenix.css @@ -94,7 +94,7 @@ body.off #switch .fa-icon { visibility: hidden; } .rulesetTools [id]:not(:first-of-type) { - margin-top: 0.25em; + margin-top: 0.2em; } .rulesetTools [id]:hover { fill: black; @@ -259,13 +259,16 @@ body[dir="rtl"] #tooltip { color: #000; display: inline-flex; flex-shrink: 0; - line-height: 2; + padding: 0.33em 0; position: relative; } #firewallContainer > div:first-of-type > span:first-of-type { cursor: pointer; + flex-direction: unset; } #firewallContainer > div > span:first-of-type { + align-items: flex-end; + flex-direction: column; justify-content: flex-end; padding-right: 2px; width: calc(100% - 4em); @@ -273,18 +276,14 @@ body[dir="rtl"] #tooltip { #firewallContainer > div.isCname > span:first-of-type { color: mediumblue; } -#firewallContainer > div > span:first-of-type > sup { - color: #666; - display: none; - font-size: 80%; - font-weight: normal; - line-height: 1; - } -#firewallContainer > div.isDomain > span.isIDN:first-of-type > sup { +#firewallContainer > div > span:first-of-type > sub { display: inline-block; + font-size: 85%; + font-weight: normal; + padding: 0.25em 0 0 0; } -#firewallContainer > div.isDomain > span.isIDN:first-of-type > sup::before { - content: '\0416\2002'; +#firewallContainer > div > span:first-of-type > sub:empty { + display: none; } #firewallContainer > div > span:first-of-type ~ span { margin-left: 1px; @@ -380,6 +379,7 @@ body.advancedUser #firewallContainer > div > span:first-of-type ~ span { left: 0; opacity: 0.4; position: absolute; + top: 0; width: 7px; } #firewallContainer > div.isRootContext > span:first-of-type::before { diff --git a/src/css/popup.css b/src/css/popup.css index 4dd6ebe99..e42bf06bd 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -270,13 +270,16 @@ body[dir="rtl"] #tooltip { color: #000; display: inline-flex; flex-shrink: 0; - line-height: 2; + padding: 0.33em 0; position: relative; } #firewallContainer > div:first-of-type > span:first-of-type { cursor: pointer; + flex-direction: unset; } #firewallContainer > div > span:first-of-type { + align-items: flex-end; + flex-direction: column; justify-content: flex-end; padding-right: 2px; width: calc(100% - 4em); @@ -284,18 +287,14 @@ body[dir="rtl"] #tooltip { #firewallContainer > div.isCname > span:first-of-type { color: mediumblue; } -#firewallContainer > div > span:first-of-type > sup { - color: #666; - display: none; - font-size: 80%; - font-weight: normal; - line-height: 1; - } -#firewallContainer > div.isDomain > span.isIDN:first-of-type > sup { +#firewallContainer > div > span:first-of-type > sub { display: inline-block; + font-size: 85%; + font-weight: normal; + padding: 0.25em 0 0 0; } -#firewallContainer > div.isDomain > span.isIDN:first-of-type > sup::before { - content: '\0416\2002'; +#firewallContainer > div > span:first-of-type > sub:empty { + display: none; } #firewallContainer > div > span:first-of-type ~ span { margin-left: 1px; @@ -391,6 +390,7 @@ body.advancedUser #firewallContainer > div > span:first-of-type ~ span { left: 0; opacity: 0.4; position: absolute; + top: 0; width: 7px; } #firewallContainer > div.isRootContext > span:first-of-type::before { diff --git a/src/js/popup-fenix.js b/src/js/popup-fenix.js index 6097f1f9a..6d503bf91 100644 --- a/src/js/popup-fenix.js +++ b/src/js/popup-fenix.js @@ -287,16 +287,22 @@ const buildAllFirewallRows = function() { const isPunycoded = prettyDomainName !== des; const span = row.querySelector('span:first-of-type'); - span.classList.toggle( - 'isIDN', - isPunycoded && - reCyrillicAmbiguous.test(prettyDomainName) === true && - reCyrillicNonAmbiguous.test(prettyDomainName) === false - ); span.querySelector('span').textContent = prettyDomainName; - span.title = isDomain && isPunycoded ? des : ''; const classList = row.classList; + + let desExtra = ''; + if ( classList.toggle('isCname', popupData.cnameMap.has(des)) ) { + desExtra = punycode.toUnicode(popupData.cnameMap.get(des)); + } else if ( + isDomain && isPunycoded && + reCyrillicAmbiguous.test(prettyDomainName) && + reCyrillicNonAmbiguous.test(prettyDomainName) === false + ) { + desExtra = des; + } + span.querySelector('sub').textContent = desExtra; + classList.toggle('isRootContext', des === popupData.pageHostname); classList.toggle('isDomain', isDomain); classList.toggle('isSubDomain', !isDomain); @@ -306,10 +312,6 @@ const buildAllFirewallRows = function() { classList.toggle('totalBlocked', hnDetails.totalBlockCount !== 0); classList.toggle('expandException', expandExceptions.has(hnDetails.domain)); - if ( classList.toggle('isCname', popupData.cnameMap.has(des)) ) { - span.title = punycode.toUnicode(popupData.cnameMap.get(des)); - } - row = row.nextElementSibling; } @@ -975,7 +977,7 @@ const toggleHostnameSwitch = async function(ev) { hostname: popupData.pageHostname, state: target.classList.contains('on'), tabId: popupData.tabId, - persist: popupData.dfEnabled === false || ev.ctrlKey || ev.metaKey, + persist: ev.ctrlKey || ev.metaKey, }); cachePopupData(response); diff --git a/src/js/popup.js b/src/js/popup.js index 4c8039549..34690a557 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -322,16 +322,22 @@ const buildAllFirewallRows = function() { const isPunycoded = prettyDomainName !== des; const span = row.querySelector('span:first-of-type'); - span.classList.toggle( - 'isIDN', - isPunycoded && - reCyrillicAmbiguous.test(prettyDomainName) === true && - reCyrillicNonAmbiguous.test(prettyDomainName) === false - ); span.querySelector('span').textContent = prettyDomainName; - span.title = isDomain && isPunycoded ? des : ''; const classList = row.classList; + + let desExtra = ''; + if ( classList.toggle('isCname', popupData.cnameMap.has(des)) ) { + desExtra = punycode.toUnicode(popupData.cnameMap.get(des)); + } else if ( + isDomain && isPunycoded && + reCyrillicAmbiguous.test(prettyDomainName) === true && + reCyrillicNonAmbiguous.test(prettyDomainName) === false + ) { + desExtra = des; + } + span.querySelector('sub').textContent = desExtra; + classList.toggle('isRootContext', des === popupData.pageHostname); classList.toggle('isDomain', isDomain); classList.toggle('isSubDomain', !isDomain); @@ -341,10 +347,6 @@ const buildAllFirewallRows = function() { classList.toggle('totalBlocked', hnDetails.totalBlockCount !== 0); classList.toggle('expandException', expandExceptions.has(hnDetails.domain)); - if ( classList.toggle('isCname', popupData.cnameMap.has(des)) ) { - span.title = punycode.toUnicode(popupData.cnameMap.get(des)); - } - row = row.nextElementSibling; } diff --git a/src/popup-fenix.html b/src/popup-fenix.html index 22d7de262..57b6f8900 100644 --- a/src/popup-fenix.html +++ b/src/popup-fenix.html @@ -64,7 +64,7 @@