Skip to content

Commit b682969

Browse files
gorhillgorhill
committed
[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.
1 parent 31795fb commit b682969

File tree

4 files changed

+48
-35
lines changed

4 files changed

+48
-35
lines changed

‎platform/mv3/extension/css/dashboard.css‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
nav {
1+
header {
22
background-color: var(--surface-1);
3+
position: sticky;
4+
top: 0;
5+
z-index: 100;
6+
}
7+
nav {
38
border: 0;
49
border-bottom: 1px solid var(--border-1);
510
display: flex;
611
flex-shrink: 0;
712
flex-wrap: wrap;
813
overflow-x: hidden;
914
padding: 0;
10-
position: sticky;
11-
top: 0;
12-
z-index: 100;
1315
}
1416
nav > .tabButton {
1517
background-color: transparent;
@@ -44,6 +46,9 @@ body[data-pane="about"] #dashboard-nav .tabButton[data-pane="about"] {
4446
body:not([data-develop="true"]) #dashboard-nav .tabButton[data-pane="develop"] {
4547
display: none;
4648
}
49+
body:not([data-pane="rulesets"]) header [data-pane-related="rulesets"] {
50+
display: none;
51+
}
4752

4853
body > section {
4954
display: none;

‎platform/mv3/extension/css/settings.css‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
@keyframes spin {
2+
0% { transform: rotate(0deg); }
3+
100% { transform: rotate(360deg); }
4+
}
5+
16
:root {
27
--filtering-mode-button-size: 32px;
38
}
@@ -80,20 +85,12 @@ label:has(input[type="checkbox"][disabled]) + legend {
8085
h3[data-i18n="filteringMode0Name"]::first-letter {
8186
text-transform: capitalize;
8287
}
83-
#trustedSites {
84-
background-color: var(--surface-0);
85-
border: 1px solid var(--surface-3);
86-
font-size: var(--monospace-size);
87-
min-height: 8rem;
88-
}
8988

90-
section[data-pane="rulesets"] > div:first-of-type {
91-
background-color: var(--surface-1);
92-
flex-shrink: 0;
93-
padding: 1em 0;
94-
position: sticky;
95-
top: 0;
96-
z-index: 10;
89+
body:not(.committing) #commit-spinner {
90+
display: none;
91+
}
92+
body.committing #commit-spinner {
93+
animation: spin 1s steps(8) infinite;
9794
}
9895
section[data-pane="rulesets"] > div:first-of-type > p:first-of-type {
9996
margin-top: 0;

‎platform/mv3/extension/dashboard.html‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,20 @@
2020

2121
<body data-pane="settings" class="loading">
2222
<!-- -------- -->
23-
<nav id="dashboard-nav">
24-
<span class="logo"><img data-i18n-title="extName" src="img/ublock.svg" alt="uBO Lite"></span><!--
25-
--><button class="tabButton" type="button" data-pane="settings" data-i18n="settingsPageName" tabindex="0"></button><!--
26-
--><button class="tabButton" type="button" data-pane="rulesets" data-i18n="aboutFilterLists" tabindex="0"></button><!--
27-
--><button class="tabButton" type="button" data-pane="develop" data-i18n="developPageName"tabindex="0"></button><!--
28-
--><button class="tabButton" type="button" data-pane="about" data-i18n="aboutPageName" tabindex="0"></button>
29-
</nav>
23+
<header>
24+
<nav id="dashboard-nav">
25+
<span class="logo"><img data-i18n-title="extName" src="img/ublock.svg" alt="uBO Lite"></span><!--
26+
--><button class="tabButton" type="button" data-pane="settings" data-i18n="settingsPageName" tabindex="0"></button><!--
27+
--><button class="tabButton" type="button" data-pane="rulesets" data-i18n="aboutFilterLists" tabindex="0"></button><!--
28+
--><button class="tabButton" type="button" data-pane="develop" data-i18n="developPageName"tabindex="0"></button><!--
29+
--><button class="tabButton" type="button" data-pane="about" data-i18n="aboutPageName" tabindex="0"></button>
30+
</nav>
31+
<!-- -------- -->
32+
<div data-pane-related="rulesets">
33+
<p><span id="listsOfBlockedHostsPrompt"></span> <span id="commit-spinner" class="fa-icon">spinner</span></p>
34+
<p><input id="findInLists" type="search" spellcheck="false" placeholder="findListsPlaceholder" /></p>
35+
</div>
36+
</header>
3037
<!-- -------- -->
3138
<section data-pane="settings">
3239
<div>
@@ -92,10 +99,6 @@ <h3 data-i18n="defaultFilteringModeSectionLabel"></h3>
9299
</section>
93100
<!-- -------- -->
94101
<section data-pane="rulesets">
95-
<div>
96-
<p id="listsOfBlockedHostsPrompt"></p>
97-
<p><input id="findInLists" type="search" spellcheck="false" placeholder="findListsPlaceholder" /></p>
98-
</div>
99102
<div id="lists"></div>
100103
</section>
101104
<!-- -------- -->

‎platform/mv3/extension/js/filter-lists.js‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -397,6 +397,8 @@ dom.on('#findInLists', 'input', searchFilterLists);
397397

398398
const applyEnabledRulesets = (( ) => {
399399
const apply = async ( ) => {
400+
dom.cl.add(dom.body, 'committing');
401+
400402
const enabledRulesets = [];
401403
for ( const liEntry of qsa$('#lists .listEntry[data-role="leaf"][data-rulesetid]') ) {
402404
const checked = qs$(liEntry, 'input[type="checkbox"]:checked') !== null;
@@ -408,14 +410,16 @@ const applyEnabledRulesets = (( ) => {
408410

409411
dom.cl.remove('#lists .listEntry.toggled', 'toggled');
410412

411-
const unmodified = hashFromIterable(enabledRulesets) ===
413+
const modified = hashFromIterable(enabledRulesets) !==
412414
hashFromIterable(cachedRulesetData.enabledRulesets);
413-
if ( unmodified ) { return; }
415+
if ( modified ) {
416+
await sendMessage({
417+
what: 'applyRulesets',
418+
enabledRulesets,
419+
});
420+
}
414421

415-
await sendMessage({
416-
what: 'applyRulesets',
417-
enabledRulesets,
418-
});
422+
dom.cl.remove(dom.body, 'committing');
419423
};
420424

421425
let timer;
@@ -433,7 +437,11 @@ const applyEnabledRulesets = (( ) => {
433437
}
434438
timer = self.setTimeout(( ) => {
435439
timer = undefined;
436-
apply();
440+
if ( dom.cl.has(dom.body, 'committing') ) {
441+
applyEnabledRulesets();
442+
} else {
443+
apply();
444+
}
437445
}, 997);
438446
}
439447
})();

0 commit comments

Comments
 (0)