mirror of
https://github.com/gorhill/uBlock.git
synced 2024-11-10 01:02:08 +01:00
Remember presentation state of "My rules" pane
Related feedback: https://old.reddit.com/r/uBlockOrigin/comments/198ohgi/
This commit is contained in:
Raymond Hill
parent
588468821c
commit
3d1b100646
1 changed files with 83 additions and 52 deletions
|
|
@ -69,7 +69,6 @@ const thePanes = {
|
|||
|
||||
let cleanEditToken = 0;
|
||||
let cleanEditText = '';
|
||||
let isCollapsed = false;
|
||||
|
||||
/******************************************************************************/
|
||||
|
||||
|
|
@ -104,7 +103,6 @@ let isCollapsed = false;
|
|||
qs$('.CodeMirror-merge-copybuttons-left'),
|
||||
{ attributes: true, attributeFilter: [ 'title' ], subtree: true }
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
/******************************************************************************/
|
||||
|
|
@ -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:
|
||||
|
|
@ -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(
|
||||
|
|
@ -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 = /^([^ ]+) ([^ ]+) ([^ ]+ [^ ]+)/;
|
||||
|
|
@ -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}` };
|
||||
|
|
@ -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')
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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 => {
|
||||
|
|
@ -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', ( ) => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue