3 files changed, 72 insertions, 32 deletions

diff --git a/javascript/settings.js b/javascript/settings.js
new file mode 100644
index 00000000..7889cf1c
--- /dev/null
+++ b/javascript/settings.js
@@ -0,0 +1,46 @@
+let settingsExcludeTabsFromShowAll = {
+    settings_tab_defaults: 1,
+    settings_tab_sysinfo: 1,
+    settings_tab_actions: 1,
+    settings_tab_licenses: 1,
+};
+
+function settingsShowAllTabs() {
+    gradioApp().querySelectorAll('#settings > div').forEach(function(elem) {
+        if (settingsExcludeTabsFromShowAll[elem.id]) return;
+
+        elem.style.display = "block";
+    });
+}
+
+function settingsShowOneTab() {
+    gradioApp().querySelector('#settings_show_one_page').click();
+}
+
+onUiLoaded(function() {
+    var edit = gradioApp().querySelector('#settings_search');
+    var editTextarea = gradioApp().querySelector('#settings_search > label > input');
+    var buttonShowAllPages = gradioApp().getElementById('settings_show_all_pages');
+    var settings_tabs = gradioApp().querySelector('#settings div');
+
+    onEdit('settingsSearch', editTextarea, 250, function() {
+        var searchText = (editTextarea.value || "").trim();
+
+        gradioApp().querySelectorAll('#settings > div[id^=settings_] div[id^=column_settings_] > *').forEach(function(elem) {
+            var visible = elem.textContent.trim().indexOf(searchText) != -1;
+            elem.style.display = visible ? "" : "none";
+        });
+
+        if (searchText != "") {
+            settingsShowAllTabs();
+        } else {
+            settingsShowOneTab();
+        }
+    });
+
+    settings_tabs.insertBefore(edit, settings_tabs.firstChild);
+    settings_tabs.appendChild(buttonShowAllPages);
+
+
+    buttonShowAllPages.addEventListener("click", settingsShowAllTabs);
+});
diff --git a/javascript/token-counters.js b/javascript/token-counters.js
index 9d81a723..2ecc7d91 100644
--- a/javascript/token-counters.js
+++ b/javascript/token-counters.js
@@ -1,10 +1,9 @@
-let promptTokenCountDebounceTime = 800;
-let promptTokenCountTimeouts = {};
-var promptTokenCountUpdateFunctions = {};
+let promptTokenCountUpdateFunctions = {};
 
 function update_txt2img_tokens(...args) {
     // Called from Gradio
     update_token_counter("txt2img_token_button");
+    update_token_counter("txt2img_negative_token_button");
     if (args.length == 2) {
         return args[0];
     }
@@ -14,6 +13,7 @@ function update_txt2img_tokens(...args) {
 function update_img2img_tokens(...args) {
     // Called from Gradio
     update_token_counter("img2img_token_button");
+    update_token_counter("img2img_negative_token_button");
     if (args.length == 2) {
         return args[0];
     }
@@ -21,16 +21,7 @@ function update_img2img_tokens(...args) {
 }
 
 function update_token_counter(button_id) {
-    if (opts.disable_token_counters) {
-        return;
-    }
-    if (promptTokenCountTimeouts[button_id]) {
-        clearTimeout(promptTokenCountTimeouts[button_id]);
-    }
-    promptTokenCountTimeouts[button_id] = setTimeout(
-        () => gradioApp().getElementById(button_id)?.click(),
-        promptTokenCountDebounceTime,
-    );
+    promptTokenCountUpdateFunctions[button_id]?.();
 }
 
 
@@ -69,10 +60,11 @@ function setupTokenCounting(id, id_counter, id_button) {
     prompt.parentElement.insertBefore(counter, prompt);
     prompt.parentElement.style.position = "relative";
 
-    promptTokenCountUpdateFunctions[id] = function() {
-        update_token_counter(id_button);
-    };
-    textarea.addEventListener("input", promptTokenCountUpdateFunctions[id]);
+    var func = onEdit(id, textarea, 800, function() {
+        gradioApp().getElementById(id_button)?.click();
+    });
+    promptTokenCountUpdateFunctions[id] = func;
+    promptTokenCountUpdateFunctions[id_button] = func;
 }
 
 function setupTokenCounters() {
diff --git a/javascript/ui.js b/javascript/ui.js
index bedcbf3e..2e262602 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -263,21 +263,6 @@ onAfterUiUpdate(function() {
     json_elem.parentElement.style.display = "none";
 
     setupTokenCounters();
-
-    var show_all_pages = gradioApp().getElementById('settings_show_all_pages');
-    var settings_tabs = gradioApp().querySelector('#settings div');
-    if (show_all_pages && settings_tabs) {
-        settings_tabs.appendChild(show_all_pages);
-        show_all_pages.onclick = function() {
-            gradioApp().querySelectorAll('#settings > div').forEach(function(elem) {
-                if (elem.id == "settings_tab_licenses") {
-                    return;
-                }
-
-                elem.style.display = "block";
-            });
-        };
-    }
 });
 
 onOptionsChanged(function() {
@@ -366,3 +351,20 @@ function switchWidthHeight(tabname) {
     updateInput(height);
     return [];
 }
+
+
+var onEditTimers = {};
+
+// calls func after afterMs milliseconds has passed since the input elem has beed enited by user
+function onEdit(editId, elem, afterMs, func) {
+    var edited = function() {
+        var existingTimer = onEditTimers[editId];
+        if (existingTimer) clearTimeout(existingTimer);
+
+        onEditTimers[editId] = setTimeout(func, afterMs);
+    };
+
+    elem.addEventListener("input", edited);
+
+    return edited;
+}