From 96e8307bd3bca69a48b820c8dd652f166a966d73 Mon Sep 17 00:00:00 2001
From: reaper47 <macpoule@gmail.com>
Date: Mon, 19 Jun 2023 21:32:21 +0200
Subject: [PATCH] Clean keybinds extension

---
 web/extensions/core/colorPalette.js |  2 +-
 web/extensions/core/keybinds.js     | 48 +++++++++++++----------------
 web/scripts/ui.js                   |  5 ++-
 3 files changed, 26 insertions(+), 29 deletions(-)

diff --git a/web/extensions/core/colorPalette.js b/web/extensions/core/colorPalette.js
index 9836143d..f8208a47 100644
--- a/web/extensions/core/colorPalette.js
+++ b/web/extensions/core/colorPalette.js
@@ -435,7 +435,7 @@ app.registerExtension({
 					$el("td", [
 						$el("label", {
 							for: id.replaceAll(".", "-"),
-							textContent: "Color palette:",
+							textContent: "Color palette",
 						}),
 					]),
 					$el("td", [
diff --git a/web/extensions/core/keybinds.js b/web/extensions/core/keybinds.js
index 42c22801..bf26d241 100644
--- a/web/extensions/core/keybinds.js
+++ b/web/extensions/core/keybinds.js
@@ -1,38 +1,31 @@
-import { app } from "/scripts/app.js";
+import {app} from "/scripts/app.js";
 
-const id = "Comfy.Keybinds";
 app.registerExtension({
-	name: id,
+	name: "Comfy.Keybinds",
 	init() {
-		const keybindListener = function(event) {
+		const keybindListener = function (event) {
 			const modifierPressed = event.ctrlKey || event.metaKey;
 
 			// Queue prompt using ctrl or command + enter
-			if (modifierPressed && (event.key === "Enter" || event.keyCode === 13 || event.keyCode === 10)) {
-				app.queuePrompt(event.shiftKey ? -1 : 0);
+			if (modifierPressed && event.key === "Enter") {
+				app.queuePrompt(event.shiftKey ? -1 : 0).then();
 				return;
 			}
 
 			const target = event.composedPath()[0];
-
-			if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
+			if (["INPUT", "TEXTAREA"].includes(target.tagName)) {
 				return;
 			}
 
 			const modifierKeyIdMap = {
-				"s": "#comfy-save-button",
-				83: "#comfy-save-button",
-				"o": "#comfy-file-input",
-				79: "#comfy-file-input",
-				"Backspace": "#comfy-clear-button",
-				8: "#comfy-clear-button",
-				"Delete": "#comfy-clear-button",
-				46: "#comfy-clear-button",
-				"d": "#comfy-load-default-button",
-				68: "#comfy-load-default-button",
+				s: "#comfy-save-button",
+				o: "#comfy-file-input",
+				Backspace: "#comfy-clear-button",
+				Delete: "#comfy-clear-button",
+				d: "#comfy-load-default-button",
 			};
 
-			const modifierKeybindId = modifierKeyIdMap[event.key] || modifierKeyIdMap[event.keyCode];
+			const modifierKeybindId = modifierKeyIdMap[event.key];
 			if (modifierPressed && modifierKeybindId) {
 				event.preventDefault();
 
@@ -47,24 +40,25 @@ app.registerExtension({
 			}
 
 			// Close out of modals using escape
-			if (event.key === "Escape" || event.keyCode === 27) {
+			if (event.key === "Escape") {
 				const modals = document.querySelectorAll(".comfy-modal");
 				const modal = Array.from(modals).find(modal => window.getComputedStyle(modal).getPropertyValue("display") !== "none");
 				if (modal) {
 					modal.style.display = "none";
 				}
+
+				[...document.querySelectorAll("dialog")].forEach(d => {
+					d.close();
+				});
 			}
 
 			const keyIdMap = {
-				"q": "#comfy-view-queue-button",
-				81: "#comfy-view-queue-button",
-				"h": "#comfy-view-history-button",
-				72: "#comfy-view-history-button",
-				"r": "#comfy-refresh-button",
-				82: "#comfy-refresh-button",
+				q: "#comfy-view-queue-button",
+				h: "#comfy-view-history-button",
+				r: "#comfy-refresh-button",
 			};
 
-			const buttonId = keyIdMap[event.key] || keyIdMap[event.keyCode];
+			const buttonId = keyIdMap[event.key];
 			if (buttonId) {
 				const button = document.querySelector(buttonId);
 				button.click();
diff --git a/web/scripts/ui.js b/web/scripts/ui.js
index fe81984d..99e9123a 100644
--- a/web/scripts/ui.js
+++ b/web/scripts/ui.js
@@ -211,6 +211,9 @@ class ComfySettingsDialog extends ComfyDialog {
 				$el("button", {
 					type: "button",
 					textContent: "Close",
+					style: {
+						cursor: "pointer",
+					},
 					onclick: () => {
 						this.element.close();
 					},
@@ -267,7 +270,7 @@ class ComfySettingsDialog extends ComfyDialog {
 					$el("label", {
 						for: htmlID,
 						classList: [tooltip !== "" ? "comfy-tooltip-indicator" : ""],
-						textContent: name.endsWith(":") ? name : `${name}:`,
+						textContent: name,
 					})
 				]);