Enlarge windows for Eye Gaze Mode

- Enlarge some dialog windows in Eye Gaze Mode to as big as they can be.
- Treat upscaled Edit Colors dialog as two screens like for small viewports.
- Standardize on setting the width of window content rather than the frame,
  because this method doesn't work with a window with `width` set on the frame.
  This may affect window sizes slightly.

src/$ToolWindow.js

@@ -183,8 +183,54 @@ function $ToolWindow($component){
 	};
 	$w.closed = false;
 	
+	const scale_for_eye_gaze_mode_and_center = ()=> {
+		if (!$w.is(".edit-colors-window, .storage-manager, .attributes-window, .flip-and-rotate, .stretch-and-skew")) {
+			return;
+		}
+		const c = $w.$content[0];
+		const t = $w.$titlebar[0];
+		let scale = 1;
+		$w.$content.css({
+			transform: `scale(${scale})`,
+			transformOrigin: "0 0",
+			marginRight: "",
+			marginBottom: "",
+		});
+		if (document.body.classList.contains("eye-gaze-mode")) {
+			scale = Math.min(
+				(innerWidth) / c.offsetWidth,
+				(innerHeight - t.offsetHeight) / c.offsetHeight
+			);
+			$w.$content.css({
+				transform: `scale(${scale})`,
+				transformOrigin: "0 0",
+				marginRight: c.scrollWidth * (scale - 1),
+			});
+			// This is separate to prevent content going off the bottom of the window
+			// in case the layout changes due to text wrapping.
+			$w.$content.css({
+				marginBottom: c.scrollHeight * (scale - 1),
+			});
+			$w.center();
+		}
+		// for testing (WARNING: can cause rapid flashing, which can cause seizures):
+		// requestAnimationFrame(scale_for_eye_gaze_mode_and_center);
+	};
+
 	if(!$component){
 		$w.center();
+
+		const scale_for_eye_gaze_mode_and_center_next_frame = ()=> {
+			requestAnimationFrame(scale_for_eye_gaze_mode_and_center);
+		};
+		const on_close = ()=> {
+			$w.off("close", on_close);
+			$G.off("eye-gaze-mode-toggled resize", scale_for_eye_gaze_mode_and_center_next_frame);
+		};
+		$w.on("close", on_close);
+		$G.on("eye-gaze-mode-toggled resize", scale_for_eye_gaze_mode_and_center_next_frame);
+
+		scale_for_eye_gaze_mode_and_center_next_frame();
 	}
 	
 	return $w;

src/app.js

@@ -1074,8 +1074,9 @@ function init_eye_gaze_mode() {
 			pageY: y,
 			clientX: x,
 			clientY: y,
-			offsetX: x - rect.left,
-			offsetY: y - rect.top,
+			// handling CSS transform scaling but not rotation
+			offsetX: (x - rect.left) * target.offsetWidth / rect.width,
+			offsetY: (y - rect.top) * target.offsetHeight / rect.height,
 			pointerId: 1234567890,
 			pointerType: "mouse",
 			isPrimary: true,

src/edit-colors.js

@@ -4,8 +4,6 @@
 // - maybe use https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role
 // - Question mark button in titlebar that lets you click on parts of UI to ask about them; also context menu "What's this?"
 // - For mobile layout, maybe add a way to get back (<<) without adding (potentially overwriting) a custom color
-// - Eye gaze support
-//   - Enlarge UI (maybe just scale the entire dialog to fit maximally on screen)
 // - Speech recognition
 //   - Lum as Luminosity, Luminance, Lightness, maybe even Brightness
 //   - Sat as Saturation
@@ -224,7 +222,7 @@ function choose_color(initial_color, callback) {
 	// for mobile layout, re-enable button because it's a navigation button in that case, rather than a one-off expando
 	const maybe_reenable_button_for_mobile_navigation = ()=> {
 		// if ($right.is(":hidden")) {
-		if ($w.width() < 300) {
+		if ($w.width() < 300 || document.body.classList.contains("eye-gaze-mode")) {
 			$define_custom_colors_button.removeAttr("disabled");
 		}
 	};

src/imgur.js

@@ -33,7 +33,7 @@ function show_imgur_uploader(blob){
 		$upload_button.remove();
 		$cancel_button.remove(); // @TODO: allow canceling upload request
 
-		$imgur_window.width(300);
+		$imgur_window.$content.width(300);
 		$imgur_window.center();
 
 		const $progress = $(E("progress")).appendTo($imgur_window.$main);
@@ -172,6 +172,6 @@ function show_imgur_uploader(blob){
 	const $cancel_button = $imgur_window.$Button(localize("Cancel"), () => {
 		$imgur_window.close();
 	});
-	$imgur_window.width(300);
+	$imgur_window.$content.width(300);
 	$imgur_window.center();
 }

src/manage-storage.js

@@ -29,7 +29,7 @@ function storage_quota_exceeded(){
 		$w.close();
 		ignoring_quota_exceeded = true;
 	});
-	$w.width(500);
+	$w.$content.width(500);
 	$w.center();
 	$quota_exceeded_window = $w;
 }
@@ -101,6 +101,6 @@ function manage_storage(){
 		$message.html("<p>All clear!</p>");
 	}
 
-	$storage_manager.width(450);
+	$storage_manager.$content.width(450);
 	$storage_manager.center();
 }

styles/layout.css

@@ -514,6 +514,8 @@ html, body, .jspaint {
 .edit-colors-window .result-color-canvas {
 	margin-top: 4px;
 }
+/* WET layout code for small viewports and eye gaze mode */
+/* could do it cleaner with JavaScript or CSS preprocessor */
 @media (max-width: 450px) {
 	.edit-colors-window {
 		overflow: hidden;
@@ -528,6 +530,19 @@ html, body, .jspaint {
 		display: none !important;
 	}
 }
+/* WET layout code for small viewports and eye gaze mode */
+.eye-gaze-mode .edit-colors-window {
+	overflow: hidden;
+}
+.eye-gaze-mode .edit-colors-window.defining-custom-colors .left-side {
+	/* display: none !important; */
+	/* this element is determining the height */
+	width: 0;
+	visibility: hidden;
+}
+.eye-gaze-mode .edit-colors-window:not(.defining-custom-colors) .right-side {
+	display: none !important;
+}
 
 .canvas-area {
 	flex: 1;