From f01bda11595d1ea8b79373e9b4ccf10b1eb8c3db Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Sat, 12 Sep 2020 07:28:46 -0400
Subject: [PATCH] Rework visuals of element picker sliders

Related issue:
- https://github.com/uBlockOrigin/uBlock-issues/issues/851
---
 src/css/epicker-ui.css                       | 50 +++++++++++++-------
 src/js/epicker-ui.js                         | 21 ++++----
 src/web_accessible_resources/epicker-ui.html | 18 +------
 3 files changed, 47 insertions(+), 42 deletions(-)

diff --git a/src/css/epicker-ui.css b/src/css/epicker-ui.css
index 1010e97d8..1f38c93cc 100644
--- a/src/css/epicker-ui.css
+++ b/src/css/epicker-ui.css
@@ -68,7 +68,8 @@ html#ublock0-epicker,
     background-color: var(--button-important-surface-hover);
 }
 #ublock0-epicker.preview #preview {
-    background-color: var(--button-active-surface);
+    background-color: var(--button-preferred-surface);
+    color: var(--button-preferred-ink);
 }
 #ublock0-epicker section {
     border: 0;
@@ -94,7 +95,7 @@ html#ublock0-epicker,
     margin: 0;
     overflow: hidden;
     overflow-y: auto;
-    padding: 2px 2px 1em 2px;
+    padding: 2px 2px 1.2em 2px;
     resize: none;
     width: 100%;
     word-break: break-all;
@@ -118,30 +119,41 @@ html#ublock0-epicker,
     display: none;
     }
 .resultsetModifier {
-    border: 1px solid white;
-    border-bottom: 0;
-    display: inline-flex;
-    height: 100%;
+    border: 0;
     pointer-events: auto;
     position: relative;
     width: 32%;
     }
-.resultsetModifier span {
-    background-color: var(--button-surface);
-    border: 0;
-    border-left: 1px solid white;
-    display: inline-block;
+.resultsetModifier > span {
+    align-items: center;
+    display: inline-flex;
     height: 100%;
-    width: 12.5%;
+    pointer-events: none;
+    width: 100%;
     }
-.resultsetModifier span:first-of-type {
-    border-left: 0;
+.resultsetModifier  > span > span:nth-of-type(1) {
+    background-color: var(--checkbox-checked-ink);
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+    display: inline-block;
+    height: 6px;
     }
-.resultsetModifier span.active {
-    background-color: var(--button-active-surface);
+.resultsetModifier  > span > span:nth-of-type(2) {
+    background-color: var(--checkbox-checked-ink);
+    border-radius: 7px;
+    display: inline-block;
+    height: 16px;
+    width: 16px;
+    }
+.resultsetModifier  > span > span:nth-of-type(3) {
+    background-color: var(--checkbox-ink);
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+    display: inline-block;
+    height: 4px;
     }
 .resultsetModifier input {
-    box-sizing: border-box;
+    border: 0;
     height: 100%;
     left: 0;
     margin: 0;
@@ -152,10 +164,12 @@ html#ublock0-epicker,
     width: 100%;
     }
 #resultsetCount {
+    align-items: center;
     background-color: #aaa;
     color: white;
+    display: inline-flex;
+    justify-content: center;
     min-width: 2.2em;
-    text-align: center;
     }
 #ublock0-epicker section.invalidFilter #resultsetCount {
     background-color: red;
diff --git a/src/js/epicker-ui.js b/src/js/epicker-ui.js
index dfac8ec83..4e519a280 100644
--- a/src/js/epicker-ui.js
+++ b/src/js/epicker-ui.js
@@ -79,7 +79,6 @@ const filterFromTextarea = function() {
 /******************************************************************************/
 
 const renderRange = function(id, value, invert = false) {
-    const cells = $storAll(`#${id} span`);
     const input = $stor(`#${id} input`);
     const max = parseInt(input.max, 10);
     if ( typeof value !== 'number'  ) {
@@ -89,11 +88,15 @@ const renderRange = function(id, value, invert = false) {
         value = max - value;
     }
     input.value = value;
-    for ( let i = 0, n = cells.length; i < n; i++ ) {
-        cells[i].classList.toggle(
-            'active', Math.round(i * max / (n - 1)) <= value
-        );
-    }
+    const slider = $stor(`#${id} > span`);
+    const lside = slider.children[0];
+    const thumb = slider.children[1];
+    const rside = slider.children[2];
+    const thumbWidth = thumb.offsetWidth;
+    const sliderWidth = slider.offsetWidth - thumbWidth;
+    const x = value * sliderWidth / max;
+    lside.style.width = `${x}px`;
+    rside.style.width = `${sliderWidth - x}px`;
 };
 
 /******************************************************************************/
@@ -152,8 +155,6 @@ const candidateFromFilterChoice = function(filterChoice) {
 
     $stor(`#cosmeticFilters li:nth-of-type(${slot+1})`)
         .classList.add('active');
-    renderRange('resultsetDepth', slot, true);
-    renderRange('resultsetSpecificity');
 
     const specificity = [
         0b0000,  // remove hierarchy; remove id, nth-of-type, attribute values
@@ -233,6 +234,10 @@ const candidateFromFilterChoice = function(filterChoice) {
 
     computedCandidate = `##${paths.join('')}`;
 
+    $id('resultsetModifiers').classList.remove('hide');
+    renderRange('resultsetDepth', slot, true);
+    renderRange('resultsetSpecificity');
+
     return computedCandidate;
 };
 
diff --git a/src/web_accessible_resources/epicker-ui.html b/src/web_accessible_resources/epicker-ui.html
index 10b1c4ffe..7f72300a9 100644
--- a/src/web_accessible_resources/epicker-ui.html
+++ b/src/web_accessible_resources/epicker-ui.html
@@ -16,25 +16,11 @@
         <div>
             <span id="resultsetModifiers">
                 <span id="resultsetDepth" class="resultsetModifier">
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
+                    <span><span></span><span></span><span></span></span>
                     <input type="range" min="0" max="7" value="7">
                 </span>
                 <span id="resultsetSpecificity" class="resultsetModifier">
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
+                    <span><span></span><span></span><span></span></span>
                     <input type="range" min="0" max="7" value="6">
                 </span>
             </span>