diff --git a/src/css/popup-fenix.css b/src/css/popup-fenix.css index d99c8eb8d..f35032f0b 100644 --- a/src/css/popup-fenix.css +++ b/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 { diff --git a/src/css/popup.css b/src/css/popup.css index 39848977e..a8edd0068 100644 --- a/src/css/popup.css +++ b/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; diff --git a/src/css/themes/default.css b/src/css/themes/default.css index a81afe82e..67542c030 100644 --- a/src/css/themes/default.css +++ b/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); } /** diff --git a/src/js/popup-fenix.js b/src/js/popup-fenix.js index 2841c333e..018c62d89 100644 --- a/src/js/popup-fenix.js +++ b/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; - elem.classList.toggle( - 'advancedUser', - popupData.advancedUserEnabled === true - ); - elem.classList.toggle( - 'off', - popupData.pageURL === '' || popupData.netFilteringSwitch !== true - ); + const isFiltering = popupData.netFilteringSwitch; - const canElementPicker = popupData.canElementPicker === true && - popupData.netFilteringSwitch === true; + const body = document.body; + 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( - 'dfEnabled', - dfPaneVisible === true - ); + body.classList.toggle('dfEnabled', dfPaneVisible === true); document.documentElement.classList.toggle( 'colorBlind', diff --git a/src/popup-fenix.html b/src/popup-fenix.html index 094c4d674..2c6634025 100644 --- a/src/popup-fenix.html +++ b/src/popup-fenix.html @@ -14,7 +14,7 @@
-
+
lock eraser @@ -26,16 +26,10 @@ refresh
+
ephemeralnewyork.­wordpress.com
-
- bolt - eye-dropper - list-alt - sliders -
-
@@ -50,6 +44,13 @@ code
+
+ bolt + eye-dropper + list-alt + sliders +
+
angle-up