Improve suggested candidate filters in element picker

Additionally, fix eslint warnings.

.eslintrc.yml

@@ -16,6 +16,7 @@ rules:
         - Program > ExpressionStatement > CallExpression > ArrowFunctionExpression > BlockStatement
         - CallExpression > MemberExpression
         - ArrayExpression > *
+        - ObjectExpression > *
     no-control-regex: off
     no-empty: off
     sort-imports: warn

src/js/epicker-ui.js

@@ -21,14 +21,13 @@
 
 /* global CodeMirror */
 
-'use strict';
-
 import './codemirror/ubo-static-filtering.js';
 
+import * as sfp from './static-filtering-parser.js';
+
+import { dom } from './dom.js';
 import { hostnameFromURI } from './uri-utils.js';
 import punycode from '../lib/punycode.js';
-import * as sfp from './static-filtering-parser.js';
-import { dom } from './dom.js';
 
 /******************************************************************************/
 /******************************************************************************/
@@ -63,13 +62,10 @@ const reCosmeticAnchor = /^#(\$|\?|\$\?)?#/;
 
 const docURL = new URL(vAPI.getURL(''));
 
-let resultsetOpt;
-
-let netFilterCandidates = [];
-let cosmeticFilterCandidates = [];
-let computedCandidateSlot = 0;
-let computedCandidate = '';
 const computedSpecificityCandidates = new Map();
+let resultsetOpt;
+let cosmeticFilterCandidates = [];
+let computedCandidate = '';
 let needBody = false;
 
 /******************************************************************************/
@@ -183,7 +179,6 @@ const candidateFromFilterChoice = function(filterChoice) {
         elem.classList.remove('active');
     }
 
-    computedCandidateSlot = slot;
     computedCandidate = '';
 
     if ( filter === undefined ) { return ''; }
@@ -726,7 +721,6 @@ const svgListening = (( ) => {
 // current mode is narrow or broad.
 
 const populateCandidates = function(candidates, selector) {
-    
     const root = dialog.querySelector(selector);
     const ul = root.querySelector('ul');
     while ( ul.firstChild !== null ) {
@@ -751,8 +745,6 @@ const showDialog = function(details) {
 
     const { netFilters, cosmeticFilters, filter } = details;
 
-    netFilterCandidates = netFilters;
-
     needBody  =
         cosmeticFilters.length !== 0 &&
         cosmeticFilters[cosmeticFilters.length - 1] === '##body';

src/js/scriptlets/epicker.js

@@ -19,19 +19,12 @@
     Home: https://github.com/gorhill/uBlock
 */
 
-/* global CSS */
-
-'use strict';
-
-/******************************************************************************/
-/******************************************************************************/
-
 (async ( ) => {
 
 /******************************************************************************/
 
 if ( typeof vAPI !== 'object' ) { return; }
-if ( typeof vAPI === null ) { return; }
+if ( vAPI === null ) { return; }
 
 if ( vAPI.pickerFrame ) { return; }
 vAPI.pickerFrame = true;
@@ -902,6 +895,20 @@ const onOptimizeCandidates = function(details) {
         if ( r !== 0 ) { return r; }
         return a.selector.length - b.selector.length;
     });
+
+    // If two candidates have the same count of matching elements, replace
+    // the less specific cosmetic filters with the more specific one if the
+    // less specific one has an id and is simpler
+    for ( let i = 0, n = results.length-1; i < n; i++ ) {
+        const a = results[i+0];
+        const b = results[i+1];
+        if ( b.count !== a.count ) { continue; }
+        if ( b.selector.length <= a.selector.length ) { continue; }
+        if ( a.selector.startsWith('#') === false ) { continue; }
+        if ( b.selector.length < a.selector.length ) { continue; }
+        b.selector = a.selector;
+    }
+
     pickerFramePort.postMessage({
         what: 'candidatesOptimized',
         candidates: results.map(a => a.selector),