Highlight focused button or submit button in dialog windows

- Show the button that will be activated if you hit Enter with a special
  style. This is the focused button, if there is one, or else the submit
  button (usually the "OK" button.)
- Mark buttons with type="submit" or type="button". This may or may not
  prevent bad implicit Enter handling in some dialog(s).
- TODO: handle Enter in Edit Colors dialog; test everything

src/$ToolWindow.js

@@ -83,7 +83,7 @@
 		$w.$main = $(E("div")).appendTo($w.$form);
 		$w.$buttons = $(E("div")).appendTo($w.$form).addClass("button-group");
 
-		$w.$Button = (label, action) => {
+		$w.$Button = (label, action, options = { type: "button" }) => {
 			const $b = $(E("button")).appendTo($w.$buttons).text(label);
 			$b.on("click", (e) => {
 				// prevent the form from submitting
@@ -97,9 +97,28 @@
 				$b.focus();
 			});
 
+			$b.attr({ type: options.type });
+
 			return $b;
 		};
 
+		// Highlight button that will be activated if you press Enter, if any.
+		$w.on("focusin", (event) => {
+			$w.find("button, input").removeClass("default");
+			// TODO: handle textarea / any other controls that steal Enter?
+			let $defaultButton = $(event.target).closest("button");
+			if ($defaultButton.length === 0) {
+				$defaultButton = $w.$form.find('[type="submit"]').first();
+			}
+			if ($defaultButton.length === 0) {
+				$defaultButton = $w.$form.find('button').first();
+			}
+			$defaultButton.addClass("default");
+		});
+		$w.on("focusout", (event) => {
+			$w.find("button, input").removeClass("default");
+		});
+
 		return $w;
 	}
 

src/edit-colors.js

@@ -272,7 +272,7 @@
 			// custom_colors_swatches_list_order[list_index].textContent = list_index; // visualization
 		}
 
-		const $define_custom_colors_button = $(`<button class="define-custom-colors-button">`)
+		const $define_custom_colors_button = $(`<button class="define-custom-colors-button" type="button">`)
 			.html(display_hotkey("&Define Custom Colors >>"))
 			.appendTo($left)
 			.on("click", (e) => {
@@ -582,7 +582,7 @@
 
 		$right.append(rainbow_canvas, luminosity_canvas, result_canvas, $color_solid_label, lum_arrow_canvas);
 
-		const $add_to_custom_colors_button = $(`<button class="add-to-custom-colors-button">`)
+		const $add_to_custom_colors_button = $(`<button class="add-to-custom-colors-button" type="button">`)
 			.html(display_hotkey("&Add To Custom Colors"))
 			.appendTo($right)
 			.on("click", (event) => {
@@ -602,7 +602,7 @@
 		$w.$Button(localize("OK"), () => {
 			callback(get_current_color());
 			$w.close();
-		})[0].focus();
+		}, { type: "submit" })[0].focus();
 		$w.$Button(localize("Cancel"), () => {
 			$w.close();
 		});

src/functions.js

@@ -438,7 +438,7 @@ function show_custom_zoom_window() {
 		set_magnification(mag);
 
 		$w.close();
-	})[0].focus();
+	}, { type: "submit" })[0].focus();
 	$w.$Button(localize("Cancel"), () => {
 		$w.close();
 	});
@@ -965,7 +965,7 @@ function file_load_from_url() {
 		} else {
 			show_error_message("Invalid URL. It must include a protocol (https:// or http://)");
 		}
-	});
+	}, { type: "submit" });
 	$w.$Button(localize("Cancel"), () => {
 		$w.close();
 	});
@@ -2915,7 +2915,7 @@ function image_attributes() {
 		}
 
 		image_attributes.$window.close();
-	});
+	}, { type: "submit" });
 
 	$w.$Button(localize("Cancel"), () => {
 		image_attributes.$window.close();
@@ -2960,7 +2960,7 @@ function show_convert_to_black_and_white() {
 
 	$w.$Button(localize("OK"), () => {
 		$w.close();
-	}).focus();
+	}, { type: "submit" }).focus();
 	$w.$Button(localize("Cancel"), () => {
 		if (current_history_node.name === "Make Monochrome") {
 			undo();
@@ -3114,7 +3114,7 @@ function image_flip_and_rotate() {
 		$canvas_area.trigger("resize");
 
 		$w.close();
-	})[0].focus();
+	}, { type: "submit" })[0].focus();
 	$w.$Button(localize("Cancel"), () => {
 		$w.close();
 	});
@@ -3189,7 +3189,7 @@ function image_stretch_and_skew() {
 		}
 		$canvas_area.trigger("resize");
 		$w.close();
-	})[0].focus();
+	}, { type: "submit" })[0].focus();
 
 	$w.$Button(localize("Cancel"), () => {
 		$w.close();
@@ -3334,7 +3334,7 @@ function save_as_prompt({
 				newFileName: promptForName ? $file_name.val() : defaultFileName,
 				newFileFormatID: $file_type.val(),
 			});
-		});
+		}, { type: "submit" });
 		$w.$Button(localize("Cancel"), () => {
 			$w.close();
 		});
@@ -3701,7 +3701,7 @@ function show_multi_user_setup_dialog(from_current_document) {
 			}
 			$w.close();
 		}
-	});
+	}, { type: "submit" });
 	$w.$Button(localize("Cancel"), () => {
 		$w.close();
 	});

src/imgur.js

@@ -182,7 +182,7 @@
 			req.send(form_data);
 
 			$imgur_status.text("Uploading...");
-		}).focus();
+		}, { type: "submit" }).focus();
 		const $cancel_button = $imgur_window.$Button(localize("Cancel"), () => {
 			$imgur_window.close();
 		});

src/manage-storage.js

@@ -53,7 +53,7 @@
 			const $tr = $(E("tr")).appendTo($table);
 
 			const $img = $(E("img")).attr({ src: imgSrc }).addClass("thumbnail-img");
-			const $remove = $(E("button")).text("Remove").addClass("remove-button");
+			const $remove = $(E("button")).text("Remove").addClass("remove-button").attr("type", "button");
 			const href = `#${k.replace("image#", "local:")}`;
 			const $open_link = $(E("a")).attr({ href, target: "_blank" }).text(localize("Open"));
 			const $thumbnail_open_link = $(E("a")).attr({ href, target: "_blank" }).addClass("thumbnail-container");