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); } })();