diff --git a/src/epicker.html b/src/epicker.html
index b9e1adc10..795526e37 100644
--- a/src/epicker.html
+++ b/src/epicker.html
@@ -111,33 +111,37 @@ html#ublock0-epicker,
text-align: left !important;
overflow: hidden !important;
}
-#ublock0-epicker aside > ul {
+#ublock0-epicker #candidateFilters {
max-height: 16em !important;
overflow-y: auto !important;
}
-#ublock0-epicker aside > ul > li:first-of-type {
+#ublock0-epicker #candidateFilters > li:first-of-type {
margin-bottom: 0.5em !important;
}
-#ublock0-epicker ul > li > span:nth-of-type(1) {
+#ublock0-epicker .changeFilter > li > span:nth-of-type(1) {
font-weight: bold !important;
}
-#ublock0-epicker ul > li > span:nth-of-type(2) {
+#ublock0-epicker .changeFilter > li > span:nth-of-type(2) {
font-size: smaller !important;
color: gray !important;
}
-#ublock0-epicker ul > li > ul {
+#ublock0-epicker #candidateFilters .changeFilter {
list-style-type: none !important;
margin: 0 0 0 1em !important;
overflow: hidden !important;
text-align: left !important;
}
-#ublock0-epicker ul > li > ul > li {
- font: 11px monospace !important;
- white-space: nowrap !important;
+#ublock0-epicker #candidateFilters .changeFilter li {
+ border: 1px solid transparent;
cursor: pointer !important;
direction: ltr !important;
+ font: 11px monospace !important;
+ white-space: nowrap !important;
}
-#ublock0-epicker ul > li > ul > li:hover {
+#ublock0-epicker #candidateFilters .changeFilter li.active {
+ border: 1px dotted gray;
+ }
+#ublock0-epicker #candidateFilters .changeFilter li:hover {
background-color: white !important;
}
#ublock0-epicker svg {
@@ -233,7 +237,7 @@ html#ublock0-epicker,
-
+
-
{{netFilters}}
diff --git a/src/js/scriptlets/element-picker.js b/src/js/scriptlets/element-picker.js
index 362f07c10..182a215a9 100644
--- a/src/js/scriptlets/element-picker.js
+++ b/src/js/scriptlets/element-picker.js
@@ -1009,17 +1009,28 @@ const onCandidateChanged = (function() {
/******************************************************************************/
const candidateFromFilterChoice = function(filterChoice) {
- let slot = filterChoice.slot;
- let filters = filterChoice.filters;
+ let { slot, filters } = filterChoice;
let filter = filters[slot];
+ // https://github.com/uBlockOrigin/uBlock-issues/issues/47
+ for ( const elem of dialog.querySelectorAll('#candidateFilters li') ) {
+ elem.classList.remove('active');
+ }
+
if ( filter === undefined ) { return ''; }
// For net filters there no such thing as a path
- if ( filter.startsWith('##') === false ) { return filter; }
+ if ( filter.startsWith('##') === false ) {
+ dialog.querySelector(`#netFilters li:nth-of-type(${slot+1})`)
+ .classList.add('active');
+ return filter;
+ }
// At this point, we have a cosmetic filter
+ dialog.querySelector(`#cosmeticFilters li:nth-of-type(${slot+1})`)
+ .classList.add('active');
+
// Modifier means "target broadly". Hence:
// - Do not compute exact path.
// - Discard narrowing directives.
@@ -1079,8 +1090,8 @@ const filterChoiceFromEvent = function(ev) {
slot: 0,
modifier: ev.ctrlKey || ev.metaKey
};
- while ( li.previousSibling !== null ) {
- li = li.previousSibling;
+ while ( li.previousElementSibling !== null ) {
+ li = li.previousElementSibling;
r.slot += 1;
}
return r;
@@ -1138,7 +1149,7 @@ const onDialogClicked = function(ev) {
highlightElements(targetElements, true);
}
- else if ( ev.target.parentNode.classList.contains('changeFilter') ) {
+ else if ( ev.target.closest('.changeFilter') !== null ) {
taCandidate.value = candidateFromFilterChoice(filterChoiceFromEvent(ev));
onCandidateChanged();
}