Re-order sections in the new popup panel

The blocking-stuff button icons have been brought
closer to the power button.

The go-somewhere button icons have been moved at
the bottom.

The hostname of the current site is now shown below
the power button. The base domain is bolded.

This re-ordering is for a few reasons:

- The blocking-stuff button icons are now closer
  to the revert/persist/reload transient buttons
  which show up when modifying the blocking
  behavior of uBO.

- The makes it easier to potentially bring in a
  very basic view where only the power button and
  the statistics are shown and all the button
  icons are hidden from view.

src/css/popup-fenix.css

@@ -10,6 +10,7 @@
 /* Internal CSS values */
 :root body,
 :root.mobile body {
+    --popup-default-gap: 1em;
     font-size: 14px;
     line-height: 20px;
     transition-duration: 0.2s;
@@ -51,16 +52,16 @@ hr {
     top: 0;
     z-index: 100;
     }
-#sticky > div {
+#basicTools {
     align-items: stretch;
     display: flex;
     justify-content: space-between;
+    margin: var(--popup-default-gap) 0.5em;
     }
 #switch {
     display: flex;
     flex-grow: 2;
     justify-content: center;
-    margin: 0.5em 0;
     }
 #switch .fa-icon {
     color: var(--popup-power-ink);
@@ -86,7 +87,6 @@ body.off #switch .fa-icon {
     flex-direction: column;
     flex-grow: 1;
     justify-content: space-evenly;
-    padding: 0.5em;
     }
 .rulesetTools [id] {
     background-color: var(--bg-transient-notice);
@@ -107,22 +107,25 @@ body.needSave #saveRules,
 body.needSave #revertRules {
     visibility: visible;
     }
+#hostname {
+    margin: var(--popup-default-gap) 0.2em;
+    text-align: center;
+    }
+#hostname > span + span {
+    font-weight: 600;
+    }
 
 .itemRibbon {
     display: grid;
-    gap: 0.8em 1em;
+    gap: var(--popup-default-gap);
     grid-template: auto / auto auto;
-    padding: 1em 1em;
+    margin: var(--popup-default-gap);
     }
 .itemRibbon > [data-i18n] + span {
     justify-self: end;
     text-align: end;
     white-space: nowrap;
     }
-.itemRibbon > .h-gutter {
-    display: inline-block;
-    height: 1em;
-    }
 
 .toolRibbon {
     align-items: start;
@@ -131,7 +134,7 @@ body.needSave #revertRules {
     grid-auto-flow: column;
     grid-template: auto / repeat(4, 1fr);
     justify-items: center;
-    margin: 1em 0;
+    margin: var(--popup-default-gap) 0;
     white-space: normal;
     }
 .toolRibbon .tool {
@@ -161,13 +164,14 @@ body.mobile.no-tooltips .toolRibbon .tool {
     position: relative;
     }
 #extraTools .fa-icon > .nope {
+    height: 1.1em;
     left: 50%;
     position: absolute;
-    stroke: var(--fg-popup-icon-x);
+    stroke: var(--popup-icon-x-ink);
     stroke-width: 2;
     transform: translateX(-50%);
     visibility: hidden;
-    width: 1em;
+    width: 1.1em;
     }
 #extraTools > span.on .fa-icon >.nope {
     visibility: visible;
@@ -490,6 +494,7 @@ body.advancedUser #firewall > div > span.noopRule.ownRule,
     overflow: hidden;
     }
 :root.desktop body {
+    --popup-default-gap: 0.8em;
     max-width: max(100vw, 800px);
     }
 :root.desktop #panes {

src/css/popup.css

@@ -165,7 +165,7 @@ body.responsive #extraTools {
 #extraTools > span > .nope {
     left: 50%;
     position: absolute;
-    stroke: var(--fg-popup-icon-x);
+    stroke: var(--popup-icon-x-ink);
     stroke-width: 2;
     transform: translateX(-50%);
     visibility: hidden;

src/css/themes/default.css

@@ -23,6 +23,7 @@
     --light-gray-30: #e0e0e6;
     --light-gray-40: #cfcfd8;
     --light-gray-90: #80808f;
+    --red-70-a80: #c50042cc;
     --violet-70: #592acb;
     --violet-80: #45278d;
     --yellow-30: #ffd567;
@@ -133,7 +134,7 @@
     --bg-popup-cell-block: hsla(0, 50%, 80%, 1);
     --bg-popup-cell-block-own: hsla(0, 100%, 40%, 1);
     --bg-popup-cell-label-mixed: hsla(45, 100%, 38%, 1);
-    --fg-popup-icon-x: hsla(0, 100%, 50%, 1);
+    --popup-icon-x-ink: var(--red-70-a80);
 }
 
 /**

src/js/popup-fenix.js

@@ -162,6 +162,17 @@ const formatNumber = function(count) {
 
 /******************************************************************************/
 
+const safePunycodeToUnicode = function(hn) {
+    const pretty = punycode.toUnicode(hn);
+    return pretty === hn ||
+           reCyrillicAmbiguous.test(pretty) === false ||
+           reCyrillicNonAmbiguous.test(pretty)
+        ? pretty
+        : hn;
+};
+
+/******************************************************************************/
+
 const rulekeyCompare = function(a, b) {
     let ha = a.slice(2, a.indexOf(' ', 2));
     if ( !reIP.test(ha) ) {
@@ -413,18 +424,27 @@ const renderPopup = function() {
         document.title = popupData.appName + ' - ' + popupData.tabTitle;
     }
 
-    let elem = document.body;
+    const isFiltering = popupData.netFilteringSwitch;
-    elem.classList.toggle(
-        'advancedUser',
-        popupData.advancedUserEnabled === true
-    );
-    elem.classList.toggle(
-        'off',
-        popupData.pageURL === '' || popupData.netFilteringSwitch !== true
-    );
 
-    const canElementPicker = popupData.canElementPicker === true &&
+    const body = document.body;
-                           popupData.netFilteringSwitch === true;
+    body.classList.toggle('advancedUser', popupData.advancedUserEnabled === true);
+    body.classList.toggle('off', popupData.pageURL === '' || isFiltering !== true);
+
+    // The hostname information below the power switch
+    {
+        const [ elemHn, elemDn ] = uDom.nodeFromId('hostname').children;
+        const { pageDomain, pageHostname } = popupData;
+        if ( pageDomain !== '' ) {
+            elemDn.textContent = safePunycodeToUnicode(pageDomain);
+            elemHn.textContent = pageHostname !== pageDomain
+                ? safePunycodeToUnicode(pageHostname.slice(0, -pageDomain.length - 1)) + '.'
+                : '';
+        } else {
+            elemHn.textContent = elemDn.textContent = '';
+        }
+    }
+
+    const canElementPicker = popupData.canElementPicker === true && isFiltering;
     uDom.nodeFromId('gotoPick').classList.toggle('enabled', canElementPicker);
     uDom.nodeFromId('gotoZap').classList.toggle('enabled', canElementPicker);
 
@@ -478,10 +498,7 @@ const renderPopup = function() {
         vAPI.localStorage.setItem('popupFirewallPane', dfPaneVisibleStored);
     }
 
-    document.body.classList.toggle(
+    body.classList.toggle('dfEnabled', dfPaneVisible === true);
-        'dfEnabled',
-        dfPaneVisible === true
-    );
 
     document.documentElement.classList.toggle(
         'colorBlind',

src/popup-fenix.html

@@ -14,7 +14,7 @@
 <body class="loading">
 <div id="panes">
     <div id="sticky">
-        <div>
+        <div id="basicTools">
             <div class="rulesetTools">
                 <span id="saveRules" class="fa-icon" data-i18n-title="popupTipSaveRules">lock</span>
                 <span id="revertRules" class="fa-icon" data-i18n-title="popupTipRevertRules">eraser</span>
@@ -26,16 +26,10 @@
                 <span id="refresh" class="fa-icon">refresh</span>
             </div>
         </div>
+        <div id="hostname"><span>ephemeralnewyork.</span>&shy;<span>wordpress.com</span></div>
         <hr>
     </div>
     <div id="main">
-        <div id="basicTools" class="toolRibbon">
-            <span id="gotoZap" class="fa-icon tool" data-i18n-title="popupTipZapper">bolt<span class="caption" data-i18n="popupTipZapper"></span></span>
-            <span id="gotoPick" class="fa-icon tool" data-i18n-title="popupTipPicker">eye-dropper<span class="caption" data-i18n="popupTipPicker"></span></span>
-            <a href="logger-ui.html#_" class="fa-icon tool enabled" target="uBOLogger" tabindex="0" data-i18n-title="popupTipLog">list-alt<span class="caption" data-i18n="popupTipLog"></span></a>
-            <a href="dashboard.html" class="fa-icon tool enabled" target="uBODashboard" tabindex="0" data-i18n-title="popupTipDashboard">sliders<span class="caption" data-i18n="popupTipDashboard"></span></a>
-        </div>
-        <hr>
         <div id="basicStats" class="itemRibbon">
             <span data-i18n="popupBlockedOnThisPage_v2"></span><span></span>
             <span data-i18n="popupBlockedSinceInstall_v2"></span><span></span>
@@ -50,6 +44,13 @@
             <span id="no-scripting" class="hnSwitch tool enabled" role="button" aria-label tabindex="0" title><span class="fa-icon fa-icon-badged">code<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span class="caption" data-i18n="popupNoScripting_v2"></span></span>
         </div>
         <hr>
+        <div class="toolRibbon">
+            <span id="gotoZap" class="fa-icon tool" data-i18n-title="popupTipZapper">bolt<span class="caption" data-i18n="popupTipZapper"></span></span>
+            <span id="gotoPick" class="fa-icon tool" data-i18n-title="popupTipPicker">eye-dropper<span class="caption" data-i18n="popupTipPicker"></span></span>
+            <a href="logger-ui.html#_" class="fa-icon tool enabled" target="uBOLogger" tabindex="0" data-i18n-title="popupTipLog">list-alt<span class="caption" data-i18n="popupTipLog"></span></a>
+            <a href="dashboard.html" class="fa-icon tool enabled" target="uBODashboard" tabindex="0" data-i18n-title="popupTipDashboard">sliders<span class="caption" data-i18n="popupTipDashboard"></span></a>
+        </div>
+        <hr>
         <div id="moreButton" class="itemRibbon">
             <span data-i18n="popupMoreButton_v2"></span><span class="fa-icon">angle-up</span>
         </div>