Skip to content

Commit 3d1b100

Browse files
gorhillgorhill
committed
Remember presentation state of "My rules" pane
Related feedback: https://old.reddit.com/r/uBlockOrigin/comments/198ohgi/
1 parent 5884688 commit 3d1b100

1 file changed

Lines changed: 83 additions & 52 deletions

File tree

‎src/js/dyna-rules.js‎

Lines changed: 83 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,6 @@ const thePanes = {
6969

7070
let cleanEditToken = 0;
7171
let cleanEditText = '';
72-
let isCollapsed = false;
7372

7473
/******************************************************************************/
7574

@@ -104,7 +103,6 @@ let isCollapsed = false;
104103
qs$('.CodeMirror-merge-copybuttons-left'),
105104
{ attributes: true, attributeFilter: [ 'title' ], subtree: true }
106105
);
107-
108106
}
109107

110108
/******************************************************************************/
@@ -142,14 +140,34 @@ const updateOverlay = (( ) => {
142140
stream.skipToEnd();
143141
}
144142
};
145-
return function(filter) {
146-
reFilter = typeof filter === 'string' && filter !== '' ?
147-
new RegExp(filter.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi') :
148-
undefined;
143+
return function() {
144+
const f = presentationState.filter;
145+
reFilter = typeof f === 'string' && f !== ''
146+
? new RegExp(f.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi')
147+
: undefined;
149148
return mode;
150149
};
151150
})();
152151

152+
const toggleOverlay = (( ) => {
153+
let overlay = null;
154+
155+
return function() {
156+
if ( overlay !== null ) {
157+
mergeView.leftOriginal().removeOverlay(overlay);
158+
mergeView.editor().removeOverlay(overlay);
159+
overlay = null;
160+
}
161+
if ( presentationState.filter !== '' ) {
162+
overlay = updateOverlay();
163+
mergeView.leftOriginal().addOverlay(overlay);
164+
mergeView.editor().addOverlay(overlay);
165+
}
166+
rulesToDoc(true);
167+
savePresentationState();
168+
};
169+
})();
170+
153171
/******************************************************************************/
154172

155173
// Incrementally update text in a CodeMirror editor for best user experience:
@@ -210,7 +228,7 @@ const rulesToDoc = function(clearHistory) {
210228
if ( mark.uboEllipsis !== true ) { continue; }
211229
mark.clear();
212230
}
213-
if ( isCollapsed ) {
231+
if ( presentationState.isCollapsed ) {
214232
for ( let iline = 0, n = edit.lineCount(); iline < n; iline++ ) {
215233
if ( edit.getLine(iline) !== '...' ) { continue; }
216234
const mark = edit.markText(
@@ -353,41 +371,25 @@ function exportUserRulesToFile() {
353371

354372
/******************************************************************************/
355373

356-
const onFilterChanged = (( ) => {
374+
{
357375
let timer;
358-
let overlay = null;
359-
let last = '';
360376

361-
const process = function() {
362-
timer = undefined;
363-
if ( mergeView.editor().isClean(cleanEditToken) === false ) { return; }
364-
const filter = qs$('#ruleFilter input').value;
365-
if ( filter === last ) { return; }
366-
last = filter;
367-
if ( overlay !== null ) {
368-
mergeView.leftOriginal().removeOverlay(overlay);
369-
mergeView.editor().removeOverlay(overlay);
370-
overlay = null;
371-
}
372-
if ( filter !== '' ) {
373-
overlay = updateOverlay(filter);
374-
mergeView.leftOriginal().addOverlay(overlay);
375-
mergeView.editor().addOverlay(overlay);
376-
}
377-
rulesToDoc(true);
378-
};
379-
380-
return function() {
377+
dom.on('#ruleFilter input', 'input', ( ) => {
381378
if ( timer !== undefined ) { self.cancelIdleCallback(timer); }
382-
timer = self.requestIdleCallback(process, { timeout: 773 });
383-
};
384-
})();
379+
timer = self.requestIdleCallback(( ) => {
380+
timer = undefined;
381+
if ( mergeView.editor().isClean(cleanEditToken) === false ) { return; }
382+
const filter = qs$('#ruleFilter input').value;
383+
if ( filter === presentationState.filter ) { return; }
384+
presentationState.filter = filter;
385+
toggleOverlay();
386+
}, { timeout: 773 });
387+
});
388+
}
385389

386390
/******************************************************************************/
387391

388392
const onPresentationChanged = (( ) => {
389-
let sortType = 1;
390-
391393
const reSwRule = /^([^/]+): ([^/ ]+) ([^ ]+)/;
392394
const reRule = /^([^ ]+) ([^/ ]+) ([^ ]+ [^ ]+)/;
393395
const reUrlRule = /^([^ ]+) ([^ ]+) ([^ ]+ [^ ]+)/;
@@ -431,10 +433,10 @@ const onPresentationChanged = (( ) => {
431433
desHn = sortNormalizeHn(hostnameFromURI(match[2]));
432434
extra = match[3];
433435
}
434-
if ( sortType === 0 ) {
436+
if ( presentationState.sortType === 0 ) {
435437
return { rule, token: `${type} ${srcHn} ${desHn} ${extra}` };
436438
}
437-
if ( sortType === 1 ) {
439+
if ( presentationState.sortType === 1 ) {
438440
return { rule, token: `${srcHn} ${type} ${desHn} ${extra}` };
439441
}
440442
return { rule, token: `${desHn} ${type} ${srcHn} ${extra}` };
@@ -452,7 +454,7 @@ const onPresentationChanged = (( ) => {
452454
};
453455

454456
const collapse = ( ) => {
455-
if ( isCollapsed !== true ) { return; }
457+
if ( presentationState.isCollapsed !== true ) { return; }
456458
const diffs = getDiffer().diff_main(
457459
thePanes.orig.modified.join('\n'),
458460
thePanes.edit.modified.join('\n')
@@ -491,23 +493,31 @@ const onPresentationChanged = (( ) => {
491493
thePanes.edit.modified = rr;
492494
};
493495

494-
return function(clearHistory) {
496+
dom.on('#ruleFilter select', 'input', ev => {
497+
presentationState.sortType = parseInt(ev.target.value, 10) || 0;
498+
savePresentationState();
499+
onPresentationChanged(true);
500+
});
501+
dom.on('#ruleFilter #diffCollapse', 'click', ev => {
502+
presentationState.isCollapsed = dom.cl.toggle(ev.target, 'active');
503+
savePresentationState();
504+
onPresentationChanged(true);
505+
});
506+
507+
return function onPresentationChanged(clearHistory) {
495508
const origPane = thePanes.orig;
496509
const editPane = thePanes.edit;
497510
origPane.modified = origPane.original.slice();
498511
editPane.modified = editPane.original.slice();
499-
const select = qs$('#ruleFilter select');
500-
sortType = parseInt(select.value, 10);
501-
if ( isNaN(sortType) ) { sortType = 1; }
502512
{
503513
const mode = origPane.doc.getMode();
504-
mode.sortType = sortType;
514+
mode.sortType = presentationState.sortType;
505515
mode.setHostnameToDomainMap(hostnameToDomainMap);
506516
mode.setPSL(publicSuffixList);
507517
}
508518
{
509519
const mode = editPane.doc.getMode();
510-
mode.sortType = sortType;
520+
mode.sortType = presentationState.sortType;
511521
mode.setHostnameToDomainMap(hostnameToDomainMap);
512522
mode.setPSL(publicSuffixList);
513523
}
@@ -644,6 +654,35 @@ self.hasUnsavedData = function() {
644654

645655
/******************************************************************************/
646656

657+
const presentationState = {
658+
sortType: 0,
659+
isCollapsed: false,
660+
filter: '',
661+
};
662+
663+
const savePresentationState = ( ) => {
664+
vAPI.localStorage.setItem('dynaRulesPresentationState', presentationState);
665+
};
666+
667+
vAPI.localStorage.getItemAsync('dynaRulesPresentationState').then(details => {
668+
if ( details instanceof Object === false ) { return; }
669+
if ( typeof details.sortType === 'number' ) {
670+
presentationState.sortType = details.sortType;
671+
qs$('#ruleFilter select').value = `${details.sortType}`;
672+
}
673+
if ( typeof details.isCollapsed === 'boolean' ) {
674+
presentationState.isCollapsed = details.isCollapsed;
675+
dom.cl.toggle('#ruleFilter #diffCollapse', 'active', details.isCollapsed);
676+
}
677+
if ( typeof details.filter === 'string' ) {
678+
presentationState.filter = details.filter;
679+
qs$('#ruleFilter input').value = details.filter;
680+
toggleOverlay();
681+
}
682+
});
683+
684+
/******************************************************************************/
685+
647686
vAPI.messaging.send('dashboard', {
648687
what: 'getRules',
649688
}).then(details => {
@@ -660,14 +699,6 @@ dom.on('#exportButton', 'click', exportUserRulesToFile);
660699
dom.on('#revertButton', 'click', revertAllHandler);
661700
dom.on('#commitButton', 'click', commitAllHandler);
662701
dom.on('#editSaveButton', 'click', editSaveHandler);
663-
dom.on('#ruleFilter input', 'input', onFilterChanged);
664-
dom.on('#ruleFilter select', 'input', ( ) => {
665-
onPresentationChanged(true);
666-
});
667-
dom.on('#ruleFilter #diffCollapse', 'click', ev => {
668-
isCollapsed = dom.cl.toggle(ev.target, 'active');
669-
onPresentationChanged(true);
670-
});
671702

672703
// https://groups.google.com/forum/#!topic/codemirror/UQkTrt078Vs
673704
mergeView.editor().on('updateDiff', ( ) => {

0 commit comments

Comments
 (0)