Sync showMessageBox API with jspaint so jspaint's dialogs work right

filesystem-index.json

@@ -282,7 +282,6 @@
       "info-16x16-8bpp.png": null,
       "info-32x32-1bpp.png": null,
       "info-32x32-8bpp.png": null,
-      "info-32x32.png": null,
       "internet-explorer-16x16.png": null,
       "internet-explorer-32x32.png": null,
       "internet-explorer-48x48.png": null,
@@ -359,6 +358,8 @@
       "programs-folder-16x16.png": null,
       "programs-folder-32x32.png": null,
       "programs-folder-48x48.png": null,
+      "question-32x32-1bpp.png": null,
+      "question-32x32-8bpp.png": null,
       "recycle-bin-16x16.png": null,
       "recycle-bin-32x32.png": null,
       "recycle-bin-48x48.png": null,
@@ -420,6 +421,12 @@
       "webdesktop-16x16.png": null,
       "winamp2-16x16.png": null,
       "winamp2-32x32.png": null,
+      "windows-10x10-8bpp.png": null,
+      "windows-12x12-8bpp.png": null,
+      "windows-14x14-1bpp.png": null,
+      "windows-16x16-1bpp.png": null,
+      "windows-22x22-8bpp.png": null,
+      "windows-32x32-8bpp.png": null,
       "windows-93-16x16.png": null,
       "windows-93-32x32.png": null,
       "windows-93-48x48.png": null,

src/msgbox.js

@@ -1,6 +1,7 @@
 
 // Prefer a function injected from outside an iframe,
 // which will make dialogs that can go outside the iframe.
+// Note that this API must be kept in sync with the version in jspaint.
 
 // Note `defaultMessageBoxTitle` handling in make_iframe_window
 // Any other default parameters need to be handled there (as it works now)
@@ -10,32 +11,45 @@ var chord_audio = new Audio("/audio/CHORD.WAV");
 window.showMessageBox = window.showMessageBox || (({
 	title = window.defaultMessageBoxTitle ?? "Alert",
 	message,
-	buttons = [{label: "OK", value: "ok", default: true}],
-	iconID = "warning" // "error", "warning", or "info"
+	messageHTML,
+	buttons = [{ label: "OK", value: "ok", default: true }],
+	iconID = "warning", // "error", "warning", "info", or "nuke" for deleting files/folders
+	windowOptions = {}, // for controlling width, etc.
 }) => {
-	let $window;
+	let $window, $message;
 	const promise = new Promise((resolve, reject) => {
-		$window = new $Window({
+		$window = new $Window(Object.assign({
 			title,
 			resizable: false,
 			innerWidth: 400,
 			maximizeButton: false,
 			minimizeButton: false,
-		});
-
-		$("<div>").append(
-			$("<img width='32' height='32'>").attr("src", `../../images/icons/${iconID}-32x32-8bpp.png`).css({
-				margin: "16px",
-				display: "block",
-			}),
-			$("<p>").text(message).css({
-				whiteSpace: "pre-wrap",
+		}, windowOptions));
+		// $window.addClass("dialog-window horizontal-buttons");
+		$message =
+			$("<div>").css({
 				textAlign: "left",
 				fontFamily: "MS Sans Serif, Arial, sans-serif",
 				fontSize: "14px",
 				marginTop: "22px",
 				flex: 1,
-			})
+				minWidth: 0, // Fixes hidden overflow, see https://css-tricks.com/flexbox-truncated-text/
+				whiteSpace: "normal", // overriding .window:not(.squish)
+			});
+		if (messageHTML) {
+			$message.html(messageHTML);
+		} else if (message) { // both are optional because you may populate later with dynamic content
+			$message.text(message).css({
+				whiteSpace: "pre-wrap",
+				wordWrap: "break-word",
+			});
+		}
+		$("<div>").append(
+			$("<img width='32' height='32'>").attr("src", `../../images/icons/${iconID}-32x32-8bpp.png`).css({
+				margin: "16px",
+				display: "block",
+			}),
+			$message
 		).css({
 			display: "flex",
 			flexDirection: "row",
@@ -67,9 +81,13 @@ window.showMessageBox = window.showMessageBox || (({
 		$window.on("focusout", "button", (event) => {
 			$(event.currentTarget).removeClass("default");
 		});
+		$window.on("closed", () => {
+			resolve("closed"); // or "cancel"? do you need to distinguish?
+		});
 		$window.center();
 	});
 	promise.$window = $window;
+	promise.$message = $message;
 	promise.promise = promise; // for easy destructuring
 	try {
 		chord_audio.play();