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 @@