New way to convey IDN and CNAME info in popup panel

gorhill · gorhill · commit 8adad98a0d61 · 2020-02-10T08:06:36.000-05:00
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.
diff --git 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,32 +259,31 @@ 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);
     }
 #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
@@ -270,32 +270,31 @@ 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);
     }
 #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
@@ -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
@@ -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
@@ -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>
diff --git a/src/popup.html b/src/popup.html
@@ -54,7 +54,7 @@ <h2 data-i18n="popupHitDomainCountPrompt">&nbsp;</h2>
 </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>
