Skip to content

Commit

Permalink
Remember presentation state of "My rules" pane
Browse files Browse the repository at this point in the history 
Related feedback:
https://old.reddit.com/r/uBlockOrigin/comments/198ohgi/
  • Loading branch information
@gorhill
gorhill committed Jan 17, 2024
1 parent 5884688 commit 3d1b100
Showing 1 changed file with 83 additions and 52 deletions.
135 changes: 83 additions & 52 deletions src/js/dyna-rules.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@ const thePanes = {

let cleanEditToken = 0;
let cleanEditText = '';
let isCollapsed = false;

/******************************************************************************/

Expand Down Expand Up @@ -104,7 +103,6 @@ let isCollapsed = false;
qs$('.CodeMirror-merge-copybuttons-left'),
{ attributes: true, attributeFilter: [ 'title' ], subtree: true }
);

}

/******************************************************************************/
Expand Down Expand Up @@ -142,14 +140,34 @@ const updateOverlay = (( ) => {
stream.skipToEnd();
}
};
return function(filter) {
reFilter = typeof filter === 'string' && filter !== '' ?
new RegExp(filter.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi') :
undefined;
return function() {
const f = presentationState.filter;
reFilter = typeof f === 'string' && f !== ''
? new RegExp(f.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi')
: undefined;
return mode;
};
})();

const toggleOverlay = (( ) => {
let overlay = null;

return function() {
if ( overlay !== null ) {
mergeView.leftOriginal().removeOverlay(overlay);
mergeView.editor().removeOverlay(overlay);
overlay = null;
}
if ( presentationState.filter !== '' ) {
overlay = updateOverlay();
mergeView.leftOriginal().addOverlay(overlay);
mergeView.editor().addOverlay(overlay);
}
rulesToDoc(true);
savePresentationState();
};
})();

/******************************************************************************/

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

/******************************************************************************/

const onFilterChanged = (( ) => {
{
let timer;
let overlay = null;
let last = '';

const process = function() {
timer = undefined;
if ( mergeView.editor().isClean(cleanEditToken) === false ) { return; }
const filter = qs$('#ruleFilter input').value;
if ( filter === last ) { return; }
last = filter;
if ( overlay !== null ) {
mergeView.leftOriginal().removeOverlay(overlay);
mergeView.editor().removeOverlay(overlay);
overlay = null;
}
if ( filter !== '' ) {
overlay = updateOverlay(filter);
mergeView.leftOriginal().addOverlay(overlay);
mergeView.editor().addOverlay(overlay);
}
rulesToDoc(true);
};

return function() {
dom.on('#ruleFilter input', 'input', ( ) => {
if ( timer !== undefined ) { self.cancelIdleCallback(timer); }
timer = self.requestIdleCallback(process, { timeout: 773 });
};
})();
timer = self.requestIdleCallback(( ) => {
timer = undefined;
if ( mergeView.editor().isClean(cleanEditToken) === false ) { return; }
const filter = qs$('#ruleFilter input').value;
if ( filter === presentationState.filter ) { return; }
presentationState.filter = filter;
toggleOverlay();
}, { timeout: 773 });
});
}

/******************************************************************************/

const onPresentationChanged = (( ) => {
let sortType = 1;

const reSwRule = /^([^/]+): ([^/ ]+) ([^ ]+)/;
const reRule = /^([^ ]+) ([^/ ]+) ([^ ]+ [^ ]+)/;
const reUrlRule = /^([^ ]+) ([^ ]+) ([^ ]+ [^ ]+)/;
Expand Down Expand Up @@ -431,10 +433,10 @@ const onPresentationChanged = (( ) => {
desHn = sortNormalizeHn(hostnameFromURI(match[2]));
extra = match[3];
}
if ( sortType === 0 ) {
if ( presentationState.sortType === 0 ) {
return { rule, token: `${type} ${srcHn} ${desHn} ${extra}` };
}
if ( sortType === 1 ) {
if ( presentationState.sortType === 1 ) {
return { rule, token: `${srcHn} ${type} ${desHn} ${extra}` };
}
return { rule, token: `${desHn} ${type} ${srcHn} ${extra}` };
Expand All @@ -452,7 +454,7 @@ const onPresentationChanged = (( ) => {
};

const collapse = ( ) => {
if ( isCollapsed !== true ) { return; }
if ( presentationState.isCollapsed !== true ) { return; }
const diffs = getDiffer().diff_main(
thePanes.orig.modified.join('\n'),
thePanes.edit.modified.join('\n')
Expand Down Expand Up @@ -491,23 +493,31 @@ const onPresentationChanged = (( ) => {
thePanes.edit.modified = rr;
};

return function(clearHistory) {
dom.on('#ruleFilter select', 'input', ev => {
presentationState.sortType = parseInt(ev.target.value, 10) || 0;
savePresentationState();
onPresentationChanged(true);
});
dom.on('#ruleFilter #diffCollapse', 'click', ev => {
presentationState.isCollapsed = dom.cl.toggle(ev.target, 'active');
savePresentationState();
onPresentationChanged(true);
});

return function onPresentationChanged(clearHistory) {
const origPane = thePanes.orig;
const editPane = thePanes.edit;
origPane.modified = origPane.original.slice();
editPane.modified = editPane.original.slice();
const select = qs$('#ruleFilter select');
sortType = parseInt(select.value, 10);
if ( isNaN(sortType) ) { sortType = 1; }
{
const mode = origPane.doc.getMode();
mode.sortType = sortType;
mode.sortType = presentationState.sortType;
mode.setHostnameToDomainMap(hostnameToDomainMap);
mode.setPSL(publicSuffixList);
}
{
const mode = editPane.doc.getMode();
mode.sortType = sortType;
mode.sortType = presentationState.sortType;
mode.setHostnameToDomainMap(hostnameToDomainMap);
mode.setPSL(publicSuffixList);
}
Expand Down Expand Up @@ -644,6 +654,35 @@ self.hasUnsavedData = function() {

/******************************************************************************/

const presentationState = {
sortType: 0,
isCollapsed: false,
filter: '',
};

const savePresentationState = ( ) => {
vAPI.localStorage.setItem('dynaRulesPresentationState', presentationState);
};

vAPI.localStorage.getItemAsync('dynaRulesPresentationState').then(details => {
if ( details instanceof Object === false ) { return; }
if ( typeof details.sortType === 'number' ) {
presentationState.sortType = details.sortType;
qs$('#ruleFilter select').value = `${details.sortType}`;
}
if ( typeof details.isCollapsed === 'boolean' ) {
presentationState.isCollapsed = details.isCollapsed;
dom.cl.toggle('#ruleFilter #diffCollapse', 'active', details.isCollapsed);
}
if ( typeof details.filter === 'string' ) {
presentationState.filter = details.filter;
qs$('#ruleFilter input').value = details.filter;
toggleOverlay();
}
});

/******************************************************************************/

vAPI.messaging.send('dashboard', {
what: 'getRules',
}).then(details => {
Expand All @@ -660,14 +699,6 @@ dom.on('#exportButton', 'click', exportUserRulesToFile);
dom.on('#revertButton', 'click', revertAllHandler);
dom.on('#commitButton', 'click', commitAllHandler);
dom.on('#editSaveButton', 'click', editSaveHandler);
dom.on('#ruleFilter input', 'input', onFilterChanged);
dom.on('#ruleFilter select', 'input', ( ) => {
onPresentationChanged(true);
});
dom.on('#ruleFilter #diffCollapse', 'click', ev => {
isCollapsed = dom.cl.toggle(ev.target, 'active');
onPresentationChanged(true);
});

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

0 comments on commit 3d1b100

Please sign in to comment.