Changed modification indicator to button element

The setting value now resets to previous when clicking on the indicator.
Furthermore, when hovering over the indicator it also shows what the last value was.

javascript/ui.js

@@ -258,11 +258,15 @@ onOptionsChanged(function(){
 })
 
 function markIfModified(setting_name, value) {
-    elem = gradioApp().getElementById("setting_"+setting_name)
+    elem = gradioApp().getElementById("modification_indicator_"+setting_name)
     if(elem == null) return;
     // Use JSON.stringify to compare nested objects (e.g. arrays for checkbox-groups)
-    let is_new_value = JSON.stringify(value) != JSON.stringify(opts[setting_name])
-    elem.classList.toggle("modified", is_new_value)
+    let previous_value_json = JSON.stringify(opts[setting_name])
+    let is_new_value = JSON.stringify(value) != previous_value_json
+    elem.disabled = !is_new_value
+    if (is_new_value) {
+        elem.title = `Changed from previous value: ${previous_value_json}`
+    }
 }
 
 let txt2img_textarea, img2img_textarea = undefined;

modules/ui.py

@@ -1212,6 +1212,16 @@ def create_ui():
         else:
             raise ValueError(f'bad options item type: {str(t)} for key {key}')
         elem_id = "setting_"+key
+
+        if not is_quicksettings:
+            dirtyable_setting = gr.Group(elem_classes="dirtyable")
+            dirtyable_setting.__enter__()
+            dirty_indicator = gr.Button(
+                "",
+                elem_classes="modification-indicator",
+                elem_id="modification_indicator_" + key
+            )
+
         if info.refresh is not None:
             if is_quicksettings:
                 res = comp(label=info.label, value=fun(), elem_id=elem_id, **(args or {}))
@@ -1224,7 +1234,9 @@ def create_ui():
             res = comp(label=info.label, value=fun(), elem_id=elem_id, **(args or {}))
 
         if not is_quicksettings:
-            res.change(fn=None, inputs=res, outputs=[], _js=f'(val) => markIfModified("{key}", val)')
+            res.change(fn=None, inputs=res, _js=f'(val) => markIfModified("{key}", val)')
+            dirty_indicator.click(fn=None, outputs=res, _js=f'() => opts["{key}"]')
+            dirtyable_setting.__exit__()
 
         return res
 

style.css

@@ -244,19 +244,22 @@ div#extras_scale_to_tab div.form{
     margin-top: 0;
 }
 
-#settings [id^="setting_"] {
-    margin-left: 1.2em;
+#settings .dirtyable {
+    display: grid;
+    grid-template-columns: .3em auto;
+    gap: .5em;
 }
 
-#settings [id^="setting_"].modified::before {
-    content: "";
-    width: .25em;
-    position: absolute;
+#settings .modification-indicator {
+    width: 100%;
     height: 100%;
-    left: -.75em;
-    background-color: var(--color-accent);
-    background-clip: content-box;
-    border-radius: 1em;
+    background: var(--color-accent);
+    border-radius: 1em !important;
+    padding: 0;
+}
+
+#settings .modification-indicator:disabled {
+    visibility: hidden;
 }
 
 #settings_result{