From 405c3e1a848256f922e8f074a5d1a10f7513097c Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Wed, 26 Aug 2020 11:01:37 -0400
Subject: [PATCH] Add visual hint for last selected entry in element picker

Related issue:
- https://github.com/uBlockOrigin/uBlock-issues/issues/47
---
 src/epicker.html                    | 24 ++++++++++++++----------
 src/js/scriptlets/element-picker.js | 23 +++++++++++++++++------
 2 files changed, 31 insertions(+), 16 deletions(-)

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