_
diff --git a/platform/mv3/extension/_locales/en/messages.json b/platform/mv3/extension/_locales/en/messages.json index 5a31b7e66..ef4058bbf 100644 --- a/platform/mv3/extension/_locales/en/messages.json +++ b/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", diff --git a/platform/mv3/extension/about.html b/platform/mv3/extension/about.html index a0bb164ea..65f5bbe54 100644 --- a/platform/mv3/extension/about.html +++ b/platform/mv3/extension/about.html @@ -31,6 +31,7 @@
+ diff --git a/platform/mv3/extension/css/popup.css b/platform/mv3/extension/css/popup.css index 5a5209cda..815717496 100644 --- a/platform/mv3/extension/css/popup.css +++ b/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; } -#filteringModeText { - background-color: var(--surface-2); - color: var(--ink-3); +#hostname { + align-items: center; + background-color: var(--popup-toolbar-surface); display: flex; - padding: var(--default-gap-xsmall); + 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 { + color: var(--ink-3); + 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; diff --git a/platform/mv3/extension/js/popup.js b/platform/mv3/extension/js/popup.js index 17a615f39..ffc82c98e 100644 --- a/platform/mv3/extension/js/popup.js +++ b/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 || [] ) { diff --git a/platform/mv3/extension/popup.html b/platform/mv3/extension/popup.html index 7cb2022f4..7492469bd 100644 --- a/platform/mv3/extension/popup.html +++ b/platform/mv3/extension/popup.html @@ -7,14 +7,14 @@ - +