[mv3] Move hostname label to top of popup panel

Related commit in uBO:
- b8cfa38

Additionally, render internationalized domain names in pretty Unicode
instead of ugly punycode.

Author: gorhill

platform/mv3/extension/_locales/en/messages.json

@@ -51,9 +51,9 @@
     "message": "Privacy policy",
     "description": "Link to privacy policy on GitHub (English)"
   },
-  "popupPowerSwitchInfo": {
-    "message": "Disable/enable uBO Lite for this site",
-    "description": "Tooltip for the main power button in the popup panel"
+  "popupFilteringModeLabel": {
+    "message": "filtering mode",
+    "description": "Label in the popup panel for the current filtering mode"
   },
   "popupTipDashboard": {
     "message": "Open the dashboard",

platform/mv3/extension/about.html

@@ -31,6 +31,7 @@
         <div class="li"><span><a href="https://github.com/chrismsimpson/Metropolis" target="_blank">Metropolis font family</a> by <a href="https://github.com/chrismsimpson">Chris Simpson</a></span></div>
         <div class="li"><span><a href="https://github.com/rsms/inter" target="_blank">Inter font family</a> by <a href="https://github.com/rsms">Rasmus Andersson</a></span></div>
         <div class="li"><span><a href="https://fontawesome.com/" target="_blank">FontAwesome font family</a> by <a href="https://github.com/davegandy">Dave Gandy</a></span></div>
+        <div class="li"><span><a href="https://github.com/mathiasbynens/punycode.js" target="_blank">Punycode.js</a> by <a href="https://github.com/mathiasbynens">Mathias Bynens</a></span></div>
     </div>
 </div>
 

platform/mv3/extension/css/popup.css

@@ -34,6 +34,8 @@ a {
 
 #main {
     align-self: flex-start;
+    display: flex;
+    flex-direction: column;
     max-width: 340px;
     min-width: var(--popup-main-min-width);
     }
@@ -47,13 +49,33 @@ hr {
     padding: 0;
     }
 
+#hostname {
+    align-items: center;
+    background-color: var(--popup-toolbar-surface);
+    display: flex;
+    justify-content: center;
+    min-height: calc(var(--font-size) * 3);
+    padding: 0 var(--popup-gap-extra-thin);
+    text-align: center;
+    word-break: break-all;
+    }
+#hostname > span {
+    word-break: break-all;
+    }
+#hostname > span + span {
+    font-weight: 600;
+    }
+
 #filteringModeText {
-    background-color: var(--surface-2);
     color: var(--ink-3);
-    display: flex;
-    padding: var(--default-gap-xsmall);
+    margin: var(--default-gap-small);
+    margin-top: 0;
+    text-align: center;
     text-transform: lowercase;
     }
+#filteringModeText > span {
+    color: var(--accent-surface-1);
+    }
 #filteringModeText > span:nth-of-type(2) {
     display: none;
     }
@@ -68,9 +90,9 @@ hr {
     }
 
 .filteringModeSlider {
-    height: 32px;
-    margin: 8px;
-    width: 128px;
+    align-self: center;
+    margin: var(--popup-gap);
+    width: calc(var(--popup-main-min-width) - 1em);
     }
 
 .rulesetTools {
@@ -101,17 +123,6 @@ hr {
 body.needReload #refresh {
     visibility: visible;
     }
-#hostname {
-    font-size: var(--font-size-larger);
-    margin: var(--popup-gap) var(--popup-gap-thin);
-    text-align: center;
-    }
-#hostname > span {
-    word-break: break-all;
-    }
-#hostname > span + span {
-    font-weight: 600;
-    }
 
 #rulesetStats {
     padding: 0 var(--popup-gap-thin);
@@ -141,7 +152,7 @@ body.needReload #refresh {
     }
 
 .toolRibbon {
-    align-items: start;
+    align-items: center;
     background-color: var(--popup-toolbar-surface);
     display: grid;
     grid-auto-columns: 1fr;

platform/mv3/extension/js/popup.js

@@ -34,6 +34,7 @@ import {
 
 import { dom, qs$ } from './dom.js';
 import { i18n$ } from './i18n.js';
+import punycode from './punycode.js';
 
 /******************************************************************************/
 
@@ -300,7 +301,7 @@ async function init() {
 
     setFilteringMode(popupPanelData.level);
 
-    dom.text('#hostname', tabHostname);
+    dom.text('#hostname', punycode.toUnicode(tabHostname));
 
     const parent = qs$('#rulesetStats');
     for ( const details of popupPanelData.rulesetDetails || [] ) {

platform/mv3/extension/popup.html

@@ -7,14 +7,14 @@
 <link rel="stylesheet" href="css/default.css">
 <link rel="stylesheet" href="css/common.css">
 <link rel="stylesheet" href="css/fa-icons.css">
-<link rel="stylesheet" href="css/popup.css">
 <link rel="stylesheet" href="css/filtering-mode.css">
+<link rel="stylesheet" href="css/popup.css">
 <title data-i18n="extName"></title>
 </head>
 
 <body class="loading" data-section="">
 <div id="main">
-    <div id="filteringModeText"><span>_</span><span></span></div>
+    <div id="hostname"><span></span>&shy;<span></span></div>
     <!-- -------- -->
     <div class="filteringModeSlider">
         <div class="filteringModeButton"><div></div></div>
@@ -23,8 +23,8 @@
         <span data-level="2"></span>
         <span data-level="3"></span>
     </div>
-    <div id="hostname"><span></span>&shy;<span></span></div>
     <!-- -------- -->
+    <div id="filteringModeText"><label data-i18n="popupFilteringModeLabel">_</label><br><span>_</span><span></span></div>
     <div class="toolRibbon pageTools">
         <span></span>
         <span></span>

tools/make-mv3.sh

@@ -55,6 +55,7 @@ cp src/css/fa-icons.css $DES/css/
 cp src/js/dom.js $DES/js/
 cp src/js/fa-icons.js $DES/js/
 cp src/js/i18n.js $DES/js/
+cp src/lib/punycode.js $DES/js/
 
 cp LICENSE.txt $DES/