From f282b43550b7b8abea73eec2f941c1a0c4d178a3 Mon Sep 17 00:00:00 2001 From: Raymond Hill Date: Tue, 6 Jun 2023 09:04:21 -0400 Subject: [PATCH] [mv3] Move hostname label to top of popup panel Related commit in uBO: - https://github.com/gorhill/uBlock/commit/b8cfa382e84902e21cea7fa5e57ccf22e36d2388 Additionally, render internationalized domain names in pretty Unicode instead of ugly punycode. --- .../mv3/extension/_locales/en/messages.json | 6 +-- platform/mv3/extension/about.html | 1 + platform/mv3/extension/css/popup.css | 49 ++++++++++++------- platform/mv3/extension/js/popup.js | 3 +- platform/mv3/extension/popup.html | 6 +-- tools/make-mv3.sh | 1 + 6 files changed, 40 insertions(+), 26 deletions(-) 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 @@
Metropolis font family by Chris Simpson
Inter font family by Rasmus Andersson
FontAwesome font family by Dave Gandy
+
Punycode.js by Mathias Bynens
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 @@ - +
-
_
+
­
@@ -23,8 +23,8 @@
-
­
+

_
diff --git a/tools/make-mv3.sh b/tools/make-mv3.sh index c316ebfa6..72431e3b5 100755 --- a/tools/make-mv3.sh +++ b/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/