1
0
mirror of https://github.com/gorhill/uBlock.git synced 2024-11-01 16:33:06 +01:00

Add visual hint for last selected entry in element picker

Related issue:
- https://github.com/uBlockOrigin/uBlock-issues/issues/47
This commit is contained in:
Raymond Hill 2020-08-26 11:01:37 -04:00
parent 817b87e9fc
commit 405c3e1a84
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
2 changed files with 31 additions and 16 deletions

View File

@ -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,
</div>
</div>
</section>
<ul>
<ul id="candidateFilters">
<li id="netFilters">
<span>{{netFilters}}</span><ul lang="en" class="changeFilter"></ul>
</li>

View File

@ -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();
}