Add increment/decrement arrows to element picker sliders

platform/mv3/extension/css/picker-ui.css

@@ -65,6 +65,27 @@
     text-align: right;
     width: 8ch;
 }
+#ubol-picker .slider-container {
+    align-items: center;
+    display: flex;
+    gap: 0.5em;
+    width: 100%;
+}
+#ubol-picker .slider-container input {
+    flex-grow: 1;
+}
+#ubol-picker .slider-container .arrow {
+    color: var(--ink-2);
+    cursor: pointer;
+    font-size: 1.5em;
+    font-weight: bold;
+    user-select: none;
+        -webkit-user-select: none;
+    padding: 0 4px;
+}
+#ubol-picker .slider-container .arrow:hover {
+    color: var(--ink-1);
+}
 
 #ubol-picker #toolbar {
     display: flex;

platform/mv3/extension/js/picker-ui.js

@@ -176,6 +176,26 @@ function onSliderChanged(ev) {
     updateSlider(Math.round(ev.target.valueAsNumber));
 }
 
+function onArrowClicked(ev) {
+    const arrow = ev.target.closest('.arrow');
+    if ( arrow === null ) { return; }
+    const slider = qs$('#slider');
+    if ( slider.disabled ) { return; }
+
+    const isIncrement = arrow.dataset.action === 'increment';
+    let val = Math.round(slider.valueAsNumber);
+    if ( isIncrement ) {
+        val += 1;
+    } else {
+        val -= 1;
+    }
+    const max = parseInt(slider.max, 10);
+    if ( val < 0 ) { val = 0; }
+    if ( val > max ) { val = max; }
+    slider.value = val;
+    updateSlider(val);
+}
+
 function updateSlider(i) {
     if ( i === sliderPartsPos ) { return; }
     sliderPartsPos = i;
@@ -379,6 +399,7 @@ function startPicker() {
     dom.on('textarea', 'input', onFilterTextChanged);
     dom.on('#quit', 'click', quitPicker);
     dom.on('#slider', 'input', onSliderChanged);
+    dom.on('.slider-container .arrow', 'click', onArrowClicked);
     dom.on('#pick', 'click', resetPicker);
     dom.on('#preview', 'click', onPreviewClicked);
     dom.on('#moreOrLess > span:first-of-type', 'click', ( ) => { onViewToggled(1); });

platform/mv3/extension/picker-ui.html

@@ -27,7 +27,11 @@
         <label for="slider" data-i18n="pickerSliderLabel">_</label>
         <span id="resultsetCount"></span>
     </span>
-    <input id="slider" type="range" min="0" max="10" step="any">
+    <div class="slider-container">
+        <span class="arrow left" data-action="decrement">‹</span>
+        <input id="slider" type="range" min="0" max="10" step="any">
+        <span class="arrow right" data-action="increment">›</span>
+    </div>
 </section>
 <section id="toolbar" data-view="0">
     <div>

src/css/epicker-ui.css

@@ -111,6 +111,20 @@ html#ublock0-epicker,
     flex-grow: 1;
     justify-content: space-evenly;
     }
+#resultsetModifiers .arrow {
+    align-items: center;
+    color: var(--ink-2);
+    cursor: pointer;
+    display: inline-flex;
+    font-size: 1.5em;
+    font-weight: bold;
+    justify-content: center;
+    padding: 0 6px;
+    user-select: none;
+    }
+#resultsetModifiers .arrow:hover {
+    color: var(--ink-1);
+    }
 #resultsetModifiers.hide > * {
     visibility: hidden;
     }

src/js/epicker-ui.js

@@ -543,6 +543,33 @@ const onSpecificityChanged = function() {
 
 /******************************************************************************/
 
+const onModifiersClicked = function(ev) {
+    const arrow = ev.target.closest('.arrow');
+    if ( arrow === null ) { return; }
+
+    const isIncrement = arrow.dataset.action === 'increment';
+    let input;
+    let callback;
+
+    if ( arrow.classList.contains('depth-left') || arrow.classList.contains('depth-right') ) {
+        input = $stor('#resultsetDepth input');
+        callback = onDepthChanged;
+    } else {
+        input = $stor('#resultsetSpecificity input');
+        callback = onSpecificityChanged;
+    }
+
+    if ( isIncrement ) {
+        input.stepUp();
+    } else {
+        input.stepDown();
+    }
+
+    callback();
+};
+
+/******************************************************************************/
+
 const onCandidateClicked = function(ev) {
     let li = ev.target.closest('li');
     if ( li === null ) { return; }
@@ -844,6 +871,7 @@ const startPicker = function() {
     $id('candidateFilters').addEventListener('click', onCandidateClicked);
     $stor('#resultsetDepth input').addEventListener('input', onDepthChanged);
     $stor('#resultsetSpecificity input').addEventListener('input', onSpecificityChanged);
+    $stor('#resultsetModifiers').addEventListener('click', onModifiersClicked);
     staticFilteringParser = new sfp.AstFilterParser({
         interactive: true,
         nativeCssHas: vAPI.webextFlavor.env.includes('native_css_has'),

src/web_accessible_resources/epicker-ui.html

@@ -22,14 +22,18 @@
         <div class="codeMirrorContainer codeMirrorBreakAll cm-theme-override"></div>
         <div class="resultsetWidgets">
             <span id="resultsetModifiers">
+                <span class="arrow depth-left" data-action="decrement">‹</span>
                 <span id="resultsetDepth" class="resultsetModifier">
                     <span><span></span><span></span><span></span></span>
                     <input type="range" min="0" max="7" value="7">
                 </span>
+                <span class="arrow depth-right" data-action="increment">›</span>
+                <span class="arrow spec-left" data-action="decrement">‹</span>
                 <span id="resultsetSpecificity" class="resultsetModifier">
                     <span><span></span><span></span><span></span></span>
                     <input type="range" min="0" max="7" value="6">
                 </span>
+                <span class="arrow spec-right" data-action="increment">›</span>
             </span>
             <span id="resultsetCount"></span>
         </div>