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

@@ -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 {
+#firewallContainer > div > span:first-of-type > sub {
-    color: #666;
-    display: none;
-    font-size: 80%;
-    font-weight: normal;
-    line-height: 1;
-    }
-#firewallContainer > div.isDomain > span.isIDN:first-of-type > sup {
     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 {
+#firewallContainer > div > span:first-of-type > sub:empty {
-    content: '\0416\2002';
+    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 {

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 {
+#firewallContainer > div > span:first-of-type > sub {
-    color: #666;
-    display: none;
-    font-size: 80%;
-    font-weight: normal;
-    line-height: 1;
-    }
-#firewallContainer > div.isDomain > span.isIDN:first-of-type > sup {
     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 {
+#firewallContainer > div > span:first-of-type > sub:empty {
-    content: '\0416\2002';
+    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 {

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);

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;
     }
 

src/popup-fenix.html

@@ -64,7 +64,7 @@
 </div>
 
 <div id="templates" style="display: none">
-    <div data-des="" data-type="*"><span><sup></sup><span></span></span><span data-src="/"></span><span data-src="."></span><span data-src="."></span></div>
+    <div data-des="" data-type="*"><span><span></span><sub></sub></span><span data-src="/"></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></div>
     <div id="hotspotTip"></div>
     <div id="tooltip"></div>

src/popup.html

@@ -54,7 +54,7 @@
 </div>
 
 <div id="templates" style="display: none">
-    <div data-des="" data-type="*"><span><sup></sup><span></span></span><span data-src="/"></span><span data-src="."></span><span data-src="."></span></div>
+    <div data-des="" data-type="*"><span><span></span><sub></sub></span><span data-src="/"></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></div>
     <div id="hotspotTip"></div>
     <div id="tooltip"></div>