From b6829698ccafd92c76f81b9d28eec9a901c6163e Mon Sep 17 00:00:00 2001 From: Raymond Hill Date: Thu, 7 Aug 2025 08:56:17 -0400 Subject: [PATCH] [mv3] Add spinner as visual feedback rulesets are being registered Additionally, fixed a race condition where changes to rulesets would not be ultimately registered when the changes were made during an ongoing registration operation. This race condition would be especially likely to occur on platforms where rulesets registration take long. --- platform/mv3/extension/css/dashboard.css | 13 ++++++++---- platform/mv3/extension/css/settings.css | 23 +++++++++------------ platform/mv3/extension/dashboard.html | 25 +++++++++++++---------- platform/mv3/extension/js/filter-lists.js | 22 +++++++++++++------- 4 files changed, 48 insertions(+), 35 deletions(-) diff --git a/platform/mv3/extension/css/dashboard.css b/platform/mv3/extension/css/dashboard.css index a33c13f42..91d5a4d23 100644 --- a/platform/mv3/extension/css/dashboard.css +++ b/platform/mv3/extension/css/dashboard.css @@ -1,5 +1,10 @@ -nav { +header { background-color: var(--surface-1); + position: sticky; + top: 0; + z-index: 100; + } +nav { border: 0; border-bottom: 1px solid var(--border-1); display: flex; @@ -7,9 +12,6 @@ nav { flex-wrap: wrap; overflow-x: hidden; padding: 0; - position: sticky; - top: 0; - z-index: 100; } nav > .tabButton { background-color: transparent; @@ -44,6 +46,9 @@ body[data-pane="about"] #dashboard-nav .tabButton[data-pane="about"] { body:not([data-develop="true"]) #dashboard-nav .tabButton[data-pane="develop"] { display: none; } +body:not([data-pane="rulesets"]) header [data-pane-related="rulesets"] { + display: none; + } body > section { display: none; diff --git a/platform/mv3/extension/css/settings.css b/platform/mv3/extension/css/settings.css index 4e6618da6..fc9e1b41c 100644 --- a/platform/mv3/extension/css/settings.css +++ b/platform/mv3/extension/css/settings.css @@ -1,3 +1,8 @@ +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } + :root { --filtering-mode-button-size: 32px; } @@ -80,20 +85,12 @@ label:has(input[type="checkbox"][disabled]) + legend { h3[data-i18n="filteringMode0Name"]::first-letter { text-transform: capitalize; } -#trustedSites { - background-color: var(--surface-0); - border: 1px solid var(--surface-3); - font-size: var(--monospace-size); - min-height: 8rem; - } -section[data-pane="rulesets"] > div:first-of-type { - background-color: var(--surface-1); - flex-shrink: 0; - padding: 1em 0; - position: sticky; - top: 0; - z-index: 10; +body:not(.committing) #commit-spinner { + display: none; + } +body.committing #commit-spinner { + animation: spin 1s steps(8) infinite; } section[data-pane="rulesets"] > div:first-of-type > p:first-of-type { margin-top: 0; diff --git a/platform/mv3/extension/dashboard.html b/platform/mv3/extension/dashboard.html index d45605c65..32e3e0ad8 100644 --- a/platform/mv3/extension/dashboard.html +++ b/platform/mv3/extension/dashboard.html @@ -20,13 +20,20 @@ - +
+ + +
+

spinner

+

+
+
@@ -92,10 +99,6 @@
-
-

-

-
diff --git a/platform/mv3/extension/js/filter-lists.js b/platform/mv3/extension/js/filter-lists.js index f0135d19d..e2f431e2b 100644 --- a/platform/mv3/extension/js/filter-lists.js +++ b/platform/mv3/extension/js/filter-lists.js @@ -397,6 +397,8 @@ dom.on('#findInLists', 'input', searchFilterLists); const applyEnabledRulesets = (( ) => { const apply = async ( ) => { + dom.cl.add(dom.body, 'committing'); + const enabledRulesets = []; for ( const liEntry of qsa$('#lists .listEntry[data-role="leaf"][data-rulesetid]') ) { const checked = qs$(liEntry, 'input[type="checkbox"]:checked') !== null; @@ -408,14 +410,16 @@ const applyEnabledRulesets = (( ) => { dom.cl.remove('#lists .listEntry.toggled', 'toggled'); - const unmodified = hashFromIterable(enabledRulesets) === + const modified = hashFromIterable(enabledRulesets) !== hashFromIterable(cachedRulesetData.enabledRulesets); - if ( unmodified ) { return; } + if ( modified ) { + await sendMessage({ + what: 'applyRulesets', + enabledRulesets, + }); + } - await sendMessage({ - what: 'applyRulesets', - enabledRulesets, - }); + dom.cl.remove(dom.body, 'committing'); }; let timer; @@ -433,7 +437,11 @@ const applyEnabledRulesets = (( ) => { } timer = self.setTimeout(( ) => { timer = undefined; - apply(); + if ( dom.cl.has(dom.body, 'committing') ) { + applyEnabledRulesets(); + } else { + apply(); + } }, 997); } })();