From d9c748d92f8f396f5f1464309ebaf7788854d90b Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Thu, 6 Sep 2018 00:20:19 -0500
Subject: [PATCH] Change range settings to [default, min, max, step]

---
 js/usercss.js            |  6 +++---
 manage/config-dialog.css | 23 +++++++++++++++++++++--
 manage/config-dialog.js  | 21 +++++++++++++++------
 3 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/js/usercss.js b/js/usercss.js
index 3ad4f514..efc0933b 100644
--- a/js/usercss.js
+++ b/js/usercss.js
@@ -221,10 +221,10 @@ var usercss = (() => {
         state.errorPrefix = 'Invalid JSON: ';
         parseJSONValue(state);
         state.errorPrefix = '';
-        // [ start, end, step, default ]
-        if (Array.isArray(state.value) && state.value.length === 4) {
+        // [default, start, end, step] (start, end & step are optional)
+        if (Array.isArray(state.value) && state.value.length) {
+          result.default = state.value.shift();
           result.range = state.value;
-          result.default = state.value[3];
         } else {
           // not a range, fallback to text
           result.type = 'text';
diff --git a/manage/config-dialog.css b/manage/config-dialog.css
index 30fb6660..8bf15177 100644
--- a/manage/config-dialog.css
+++ b/manage/config-dialog.css
@@ -94,11 +94,30 @@
   flex-shrink: 0;
 }
 
-.config-value:not(.onoffswitch):not(.select-resizer) > :not(:last-child),
-.current-value {
+.config-value:not(.onoffswitch):not(.select-resizer) > :not(:last-child) {
   margin-right: 4px;
 }
 
+.current-value {
+  outline: 1px solid rgba(128, 128, 128, 0.5);
+  padding: 2px 4px;
+  margin-right: 4px;
+}
+
+.config-range span {
+  line-height: 22px;
+}
+
+.current-range:before {
+  content: attr(data-min);
+  padding-right: .25em;
+}
+
+.current-range:after {
+  content: attr(data-max);
+  padding-left: .25em;
+}
+
 .config-body label:not(.nondefault) .config-reset-icon {
   visibility: hidden;
 }
diff --git a/manage/config-dialog.js b/manage/config-dialog.js
index 5c5ae723..a2d96007 100644
--- a/manage/config-dialog.js
+++ b/manage/config-dialog.js
@@ -266,14 +266,23 @@ function configDialog(style) {
             oninput: updateVarOnInput,
             onfocus: selectAllOnFocus,
           };
+          const dataset = {};
           if (va.type === 'range') {
-            options.min = va.range[0];
-            options.max = va.range[1];
-            options.step = va.range[2];
             options.value = va.default;
+            if (typeof va.range[0] !== 'undefined') {
+              options.min = dataset.min = va.range[0];
+            }
+            if (typeof va.range[1] !== 'undefined') {
+              options.max = dataset.max = va.range[1];
+            }
+            if (va.range[2]) {
+              options.step = va.range[2];
+            }
             children = [
               $create('span.current-value', {textContent: va.value}),
-              va.input = $create('input.config-value', options),
+              $create('span.current-range', {dataset}, [
+                va.input = $create('input.config-value', options),
+              ])
             ];
           } else {
             children = [
@@ -302,7 +311,7 @@ function configDialog(style) {
   function updateVarOnChange() {
     this.va.value = this.type !== 'checkbox' ? this.value : this.checked ? '1' : '0';
     if (this.type === 'range') {
-      $('.current-value', this.parentNode).textContent = this.va.value;
+      $('.current-value', this.closest('.config-range')).textContent = this.va.value;
     }
   }
 
@@ -329,7 +338,7 @@ function configDialog(style) {
       } else if (va.type === 'checkbox') {
         va.input.checked = Number(value);
       } else if (va.type === 'range') {
-        const span = $('.current-value', va.input.parentNode);
+        const span = $('.current-value', va.input.closest('.config-range'));
         va.input.value = value;
         if (span) {
           span.textContent = value;