From 9aefd8368970e2a3ffa9fe9504778d9238373f87 Mon Sep 17 00:00:00 2001
From: harry <me@harryob.live>
Date: Sun, 6 Apr 2025 20:54:57 +0100
Subject: [PATCH] makes various uis more compatible with high dpi monitors,
 adds a preference for smaller windows (#90418)

## About The Pull Request
various uis (tgui-say, vv, player panel, anything using
`/datum/browser`) would not correct for dpi. they now do

we also have a preference to allow you to have smaller windows that are
zoomed out, instead of larger windows that are not zoomed

#### of note, this does require a small change to the usage of css
viewport units, like `vh` and `vw`. they need to be fed through the
`vp(100vw)` function first. there was only one such unit in the codebase

on 4k monitor with 200% scaling:

fixed (pref on default)

![BiygmRan0QqxOMqL@2x](https://github.com/user-attachments/assets/1bdbc93c-1cd4-4a17-bf18-6cca7a5df032)

pref disabled

![DUWSVJNXt3xuQJEy@2x](https://github.com/user-attachments/assets/1b87ed9e-0498-44c4-ab1b-2c0321e70ce0)


## Why It's Good For The Game
516 fucked with uis again and this unfucks them a bit

## Changelog
:cl:
qol: there's a new UI preference called UI scale which allows people
that use windows scaling to have their UIs original size with the
contents zoomed out, instead of the default, which is the UIs being
larger with the contents "normal" size
fix: various UIs did not respect windows scaling, they now do
/:cl:

---------

Co-authored-by: harryob <55142896+harryob@users.noreply.github.com>
---
 code/datums/browser.dm                        | 16 +++++++--
 code/modules/admin/player_panel.dm            | 10 +++++-
 .../admin/view_variables/view_variables.dm    |  9 ++++-
 code/modules/client/client_defines.dm         |  3 ++
 code/modules/client/client_procs.dm           |  8 +++++
 code/modules/client/preferences/tgui.dm       | 13 +++++++
 code/modules/tgui/tgui.dm                     |  1 +
 code/modules/tgui_input/say_modal/modal.dm    |  7 ++--
 tgui/packages/tgui-say/TguiSay.tsx            | 16 ++++++---
 tgui/packages/tgui-say/helpers.ts             | 34 +++++++++++--------
 tgui/packages/tgui/backend.ts                 |  1 +
 tgui/packages/tgui/drag.ts                    | 29 +++++++++++-----
 .../features/game_preferences/tgui.tsx        |  7 ++++
 tgui/packages/tgui/layouts/Window.tsx         |  4 ++-
 tgui/packages/tgui/styles/functions.scss      |  6 ++++
 .../tgui/styles/layouts/TitleBar.scss         |  3 +-
 tgui/packages/tgui/styles/main.scss           |  5 +++
 17 files changed, 136 insertions(+), 36 deletions(-)

diff --git a/code/datums/browser.dm b/code/datums/browser.dm
index 360420ab00b..5bfaa5ea3c8 100644
--- a/code/datums/browser.dm
+++ b/code/datums/browser.dm
@@ -68,6 +68,14 @@
 	for (file in stylesheets)
 		head_content += "<link rel='stylesheet' type='text/css' href='[SSassets.transport.get_asset_url(file)]'>"
 
+	if(user.client?.window_scaling && user.client?.window_scaling != 1 && !user.client?.prefs.read_preference(/datum/preference/toggle/ui_scale) && width && height)
+		head_content += {"
+			<style>
+				body {
+					zoom: [100 / user.client?.window_scaling]%;
+				}
+			</style>
+			"}
 
 	for (file in scripts)
 		head_content += "<script type='text/javascript' src='[SSassets.transport.get_asset_url(file)]'></script>"
@@ -105,8 +113,12 @@
 		to_chat(user, span_userdanger("The [title] browser you tried to open failed a sanity check! Please report this on GitHub!"))
 		return
 	var/window_size = ""
-	if (width && height)
-		window_size = "size=[width]x[height];"
+	if(width && height)
+		if(user.client?.prefs?.read_preference(/datum/preference/toggle/ui_scale))
+			var/scaling = user.client.window_scaling
+			window_size = "size=[width * scaling]x[height * scaling];"
+		else
+			window_size = "size=[width]x[height];"
 	var/datum/asset/simple/namespaced/common/common_asset = get_asset_datum(/datum/asset/simple/namespaced/common)
 	common_asset.send(user)
 	if (stylesheets.len)
diff --git a/code/modules/admin/player_panel.dm b/code/modules/admin/player_panel.dm
index 36b6a5b2c4a..c6cd2387cc6 100644
--- a/code/modules/admin/player_panel.dm
+++ b/code/modules/admin/player_panel.dm
@@ -4,10 +4,14 @@
 	log_admin("[key_name(usr)] checked the player panel.")
 	var/dat = "<html><head><meta http-equiv='X-UA-Compatible' content='IE=edge' charset='UTF-8'/><title>Player Panel</title></head>"
 
+	var/ui_scale = owner.prefs.read_preference(/datum/preference/toggle/ui_scale)
+
 	//javascript, the part that does most of the work~
 	dat += {"
 
 		<head>
+			[!ui_scale && owner.window_scaling ? "<style>body {zoom: [100 / owner.window_scaling]%;}</style>" : ""]
+
 			<script type='text/javascript'>
 
 				var locked_tabs = new Array();
@@ -328,4 +332,8 @@
 	</body></html>
 	"}
 
-	usr << browse(dat, "window=players;size=600x480")
+	var/window_size = "size=600x480"
+	if(owner.window_scaling && ui_scale)
+		window_size = "size=[600 * owner.window_scaling]x[400 * owner.window_scaling]"
+
+	usr << browse(dat, "window=players;[window_size]")
diff --git a/code/modules/admin/view_variables/view_variables.dm b/code/modules/admin/view_variables/view_variables.dm
index 58c98bb114a..42e006a620a 100644
--- a/code/modules/admin/view_variables/view_variables.dm
+++ b/code/modules/admin/view_variables/view_variables.dm
@@ -114,6 +114,8 @@ ADMIN_VERB_AND_CONTEXT_MENU(debug_variables, R_NONE, "View Variables", "View the
 
 	sleep(1 TICKS)
 
+	var/ui_scale = prefs?.read_preference(/datum/preference/toggle/ui_scale)
+
 	var/list/variable_html = list()
 	if(islist)
 		var/list/list_value = thing
@@ -135,6 +137,7 @@ ADMIN_VERB_AND_CONTEXT_MENU(debug_variables, R_NONE, "View Variables", "View the
 		<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
 		<title>[title]</title>
 		<link rel="stylesheet" type="text/css" href="[SSassets.transport.get_asset_url("view_variables.css")]">
+		[!ui_scale && window_scaling ? "<style>body {zoom: [100 / window_scaling]%;}</style>" : ""]
 	</head>
 	<body onload='selectTextField()' onkeydown='return handle_keydown()' onkeyup='handle_keyup()'>
 		<script type="text/javascript">
@@ -303,7 +306,11 @@ datumrefresh=[refid];[HrefToken()]'>Refresh</a>
 	</body>
 </html>
 "}
-	src << browse(html, "window=variables[refid];size=475x650")
+	var/size_string = "size=475x650";
+	if(ui_scale && window_scaling)
+		size_string = "size=[475 * window_scaling]x[650 * window_scaling]"
+
+	src << browse(html, "window=variables[refid];[size_string]")
 
 /client/proc/vv_update_display(datum/thing, span, content)
 	src << output("[span]:[content]", "variables[REF(thing)].browser:replace_span")
diff --git a/code/modules/client/client_defines.dm b/code/modules/client/client_defines.dm
index 99b22e27fa5..85b25978a52 100644
--- a/code/modules/client/client_defines.dm
+++ b/code/modules/client/client_defines.dm
@@ -269,3 +269,6 @@
 
 	///Which ambient sound this client is currently being provided.
 	var/current_ambient_sound
+
+	/// The DPI scale of the client. 1 is equivalent to 100% window scaling, 2 will be 200% window scaling
+	var/window_scaling
diff --git a/code/modules/client/client_procs.dm b/code/modules/client/client_procs.dm
index df0059fe383..4d7dcae6e5e 100644
--- a/code/modules/client/client_procs.dm
+++ b/code/modules/client/client_procs.dm
@@ -412,6 +412,8 @@ GLOBAL_LIST_INIT(blacklisted_builds, list(
 	)
 	addtimer(CALLBACK(src, PROC_REF(check_panel_loaded)), 30 SECONDS)
 
+	INVOKE_ASYNC(src, PROC_REF(acquire_dpi))
+
 	// Initialize tgui panel
 	tgui_panel.initialize()
 
@@ -1287,6 +1289,12 @@ GLOBAL_LIST_INIT(blacklisted_builds, list(
 
 	send2adminchat("Server", jointext(message_to_send, " "))
 
+/// This grabs the DPI of the user per their skin
+/client/proc/acquire_dpi()
+	window_scaling = text2num(winget(src, null, "dpi"))
+
+	debug_admins("scalies: [window_scaling]")
+
 #undef ADMINSWARNED_AT
 #undef CURRENT_MINUTE
 #undef CURRENT_SECOND
diff --git a/code/modules/client/preferences/tgui.dm b/code/modules/client/preferences/tgui.dm
index 94cb68067f8..4cf57be94da 100644
--- a/code/modules/client/preferences/tgui.dm
+++ b/code/modules/client/preferences/tgui.dm
@@ -82,3 +82,16 @@
 
 /datum/preference/toggle/tgui_say_light_mode/apply_to_client(client/client)
 	client.tgui_say?.load()
+
+/datum/preference/toggle/ui_scale
+	category = PREFERENCE_CATEGORY_GAME_PREFERENCES
+	savefile_key = "ui_scale"
+	savefile_identifier = PREFERENCE_PLAYER
+	default_value = TRUE
+
+/datum/preference/toggle/ui_scale/apply_to_client(client/client, value)
+	if(!istype(client))
+		return
+
+	INVOKE_ASYNC(client, TYPE_VERB_REF(/client, refresh_tgui))
+	client.tgui_say?.load()
diff --git a/code/modules/tgui/tgui.dm b/code/modules/tgui/tgui.dm
index a7136863222..b3204039987 100644
--- a/code/modules/tgui/tgui.dm
+++ b/code/modules/tgui/tgui.dm
@@ -240,6 +240,7 @@
 			"size" = window_size,
 			"fancy" = user.client.prefs.read_preference(/datum/preference/toggle/tgui_fancy),
 			"locked" = user.client.prefs.read_preference(/datum/preference/toggle/tgui_lock),
+			"scale" = user.client.prefs.read_preference(/datum/preference/toggle/ui_scale),
 		),
 		"client" = list(
 			"ckey" = user.client.ckey,
diff --git a/code/modules/tgui_input/say_modal/modal.dm b/code/modules/tgui_input/say_modal/modal.dm
index 1185aaa12af..0da810bd620 100644
--- a/code/modules/tgui_input/say_modal/modal.dm
+++ b/code/modules/tgui_input/say_modal/modal.dm
@@ -64,11 +64,12 @@
 /datum/tgui_say/proc/load()
 	window_open = FALSE
 
-	winset(client, "tgui_say", "pos=848,500;size=231,30;is-visible=0;")
+	winset(client, "tgui_say", "pos=848,500;is-visible=0;")
 
 	window.send_message("props", list(
-		lightMode = client.prefs?.read_preference(/datum/preference/toggle/tgui_say_light_mode),
-		maxLength = max_length,
+		"lightMode" = client.prefs?.read_preference(/datum/preference/toggle/tgui_say_light_mode),
+		"scale" = client.prefs?.read_preference(/datum/preference/toggle/ui_scale),
+		"maxLength" = max_length,
 	))
 
 	stop_thinking()
diff --git a/tgui/packages/tgui-say/TguiSay.tsx b/tgui/packages/tgui-say/TguiSay.tsx
index e995cb69c13..24eea6e4be5 100644
--- a/tgui/packages/tgui-say/TguiSay.tsx
+++ b/tgui/packages/tgui-say/TguiSay.tsx
@@ -25,6 +25,7 @@ type ByondOpen = {
 type ByondProps = {
   maxLength: number;
   lightMode: BooleanLike;
+  scale: BooleanLike;
 };
 
 const ROWS: Record<keyof typeof WindowSize, number> = {
@@ -39,6 +40,7 @@ export function TguiSay() {
   const channelIterator = useRef(new ChannelIterator());
   const chatHistory = useRef(new ChatHistory());
   const messages = useRef(byondMessages);
+  const scale = useRef(true);
 
   // I initially wanted to make these an object or a reducer, but it's not really worth it.
   // You lose the granulatity and add a lot of boilerplate.
@@ -124,7 +126,7 @@ export function TguiSay() {
 
   function handleClose(): void {
     innerRef.current?.blur();
-    windowClose();
+    windowClose(scale.current);
 
     setTimeout(() => {
       chatHistory.current.reset();
@@ -236,7 +238,7 @@ export function TguiSay() {
     }
 
     setButtonContent(iterator.current());
-    windowOpen(iterator.current());
+    windowOpen(iterator.current(), scale.current);
 
     const input = innerRef.current;
     setTimeout(() => {
@@ -247,6 +249,7 @@ export function TguiSay() {
   function handleProps(data: ByondProps): void {
     setMaxLength(data.maxLength);
     setLightMode(!!data.lightMode);
+    scale.current = !!data.scale;
   }
 
   function unloadChat(): void {
@@ -277,7 +280,7 @@ export function TguiSay() {
 
     if (size !== newSize) {
       setSize(newSize);
-      windowSet(newSize);
+      windowSet(newSize, scale.current);
     }
   }, [value]);
 
@@ -294,7 +297,12 @@ export function TguiSay() {
       >
         {!lightMode && <div className={`shine shine-${theme}`} />}
       </div>
-      <div className={classes(['content', lightMode && 'content-lightMode'])}>
+      <div
+        className={classes(['content', lightMode && 'content-lightMode'])}
+        style={{
+          zoom: scale.current ? '' : `${100 / window.devicePixelRatio}%`,
+        }}
+      >
         <button
           className={`button button-${theme}`}
           onMouseDown={handleButtonClick}
diff --git a/tgui/packages/tgui-say/helpers.ts b/tgui/packages/tgui-say/helpers.ts
index 2c9b0ea6057..956dff919d9 100644
--- a/tgui/packages/tgui-say/helpers.ts
+++ b/tgui/packages/tgui-say/helpers.ts
@@ -5,8 +5,8 @@ import { RADIO_PREFIXES, WindowSize } from './constants';
  * Once byond signals this via keystroke, it
  * ensures window size, visibility, and focus.
  */
-export function windowOpen(channel: Channel): void {
-  setWindowVisibility(true);
+export function windowOpen(channel: Channel, scale: boolean): void {
+  setWindowVisibility(true, scale);
   Byond.winset('tgui_say.browser', {
     focus: true,
   });
@@ -17,8 +17,8 @@ export function windowOpen(channel: Channel): void {
  * Resets the state of the window and hides it from user view.
  * Sending "close" logs it server side.
  */
-export function windowClose(): void {
-  setWindowVisibility(false);
+export function windowClose(scale: boolean): void {
+  setWindowVisibility(false, scale);
   Byond.winset('map', {
     focus: true,
   });
@@ -28,23 +28,27 @@ export function windowClose(): void {
 /**
  * Modifies the window size.
  */
-export function windowSet(size = WindowSize.Small): void {
-  let sizeStr = `${WindowSize.Width}x${size}`;
+export function windowSet(size = WindowSize.Small, scale: boolean): void {
+  const pixelRatio = scale ? window.devicePixelRatio : 1;
 
-  Byond.winset('tgui_say.browser', {
-    size: sizeStr,
-  });
+  const sizeStr = `${WindowSize.Width * pixelRatio}x${size * pixelRatio}`;
 
-  Byond.winset('tgui_say', {
-    size: sizeStr,
+  Byond.winset(null, {
+    'tgui_say.size': sizeStr,
+    'tgui_say.browser.size': sizeStr,
   });
 }
 
 /** Helper function to set window size and visibility */
-function setWindowVisibility(visible: boolean): void {
-  Byond.winset('tgui_say', {
-    'is-visible': visible,
-    size: `${WindowSize.Width}x${WindowSize.Small}`,
+function setWindowVisibility(visible: boolean, scale: boolean): void {
+  const pixelRatio = scale ? window.devicePixelRatio : 1;
+
+  const sizeStr = `${WindowSize.Width * pixelRatio}x${WindowSize.Small * pixelRatio}`;
+
+  Byond.winset(null, {
+    'tgui_say.is-visible': visible,
+    'tgui_say.size': sizeStr,
+    'tgui_say.browser.size': sizeStr,
   });
 }
 
diff --git a/tgui/packages/tgui/backend.ts b/tgui/packages/tgui/backend.ts
index b8b0b2e043f..2d18390ed79 100644
--- a/tgui/packages/tgui/backend.ts
+++ b/tgui/packages/tgui/backend.ts
@@ -399,6 +399,7 @@ type BackendState<TData> = {
       size: [number, number];
       fancy: BooleanLike;
       locked: BooleanLike;
+      scale: BooleanLike;
     };
     client: {
       ckey: string;
diff --git a/tgui/packages/tgui/drag.ts b/tgui/packages/tgui/drag.ts
index 5d6609fba33..131b5d3e4e6 100644
--- a/tgui/packages/tgui/drag.ts
+++ b/tgui/packages/tgui/drag.ts
@@ -121,6 +121,7 @@ export const recallWindowGeometry = async (
     pos?: [number, number];
     size?: [number, number];
     locked?: BooleanLike;
+    scale?: BooleanLike;
   } = {},
 ) => {
   const geometry = options.fancy && (await storage.get(windowKey));
@@ -131,9 +132,21 @@ export const recallWindowGeometry = async (
   let pos = geometry?.pos || options.pos;
   let size = options.size;
   // Convert size from css-pixels to display-pixels
-  if (size) {
+  if (options.scale && size) {
     size = [size[0] * pixelRatio, size[1] * pixelRatio];
   }
+
+  if (!options.scale) {
+    document.body.style.zoom = `${100 / window.devicePixelRatio}%`;
+    document.documentElement.style.setProperty(
+      '--scaling-amount',
+      window.devicePixelRatio.toString(),
+    );
+  } else {
+    document.body.style.zoom = '';
+    document.documentElement.style.setProperty('--scaling-amount', null);
+  }
+
   // Wait until screen offset gets resolved
   await screenOffsetPromise;
   const areaAvailable = getScreenSize();
@@ -208,7 +221,7 @@ export const dragStartHandler = (event) => {
   logger.log('drag start');
   dragging = true;
   dragPointOffset = vecSubtract(
-    [event.screenX, event.screenY],
+    [event.screenX * pixelRatio, event.screenY * pixelRatio],
     getWindowPosition(),
   ) as [number, number];
   // Focus click target
@@ -235,10 +248,10 @@ const dragMoveHandler = (event: MouseEvent) => {
   }
   event.preventDefault();
   setWindowPosition(
-    vecSubtract([event.screenX, event.screenY], dragPointOffset) as [
-      number,
-      number,
-    ],
+    vecSubtract(
+      [event.screenX * pixelRatio, event.screenY * pixelRatio],
+      dragPointOffset,
+    ) as [number, number],
   );
 };
 
@@ -249,7 +262,7 @@ export const resizeStartHandler =
     logger.log('resize start', resizeMatrix);
     resizing = true;
     dragPointOffset = vecSubtract(
-      [event.screenX, event.screenY],
+      [event.screenX * pixelRatio, event.screenY * pixelRatio],
       getWindowPosition(),
     ) as [number, number];
     initialSize = getWindowSize();
@@ -277,7 +290,7 @@ const resizeMoveHandler = (event: MouseEvent) => {
   }
   event.preventDefault();
   const currentOffset = vecSubtract(
-    [event.screenX, event.screenY],
+    [event.screenX * pixelRatio, event.screenY * pixelRatio],
     getWindowPosition(),
   );
   const delta = vecSubtract(currentOffset, dragPointOffset);
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/tgui.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/tgui.tsx
index 8b358cd1ed4..c89ca9c4714 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/tgui.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/tgui.tsx
@@ -35,6 +35,13 @@ export const tgui_lock: FeatureToggle = {
   component: CheckboxInput,
 };
 
+export const ui_scale: FeatureToggle = {
+  name: 'Toggle UI scaling',
+  category: 'UI',
+  description: 'If UIs should scale up to match your monitor scaling.',
+  component: CheckboxInput,
+};
+
 export const tgui_say_light_mode: FeatureToggle = {
   name: 'Say: Light mode',
   category: 'UI',
diff --git a/tgui/packages/tgui/layouts/Window.tsx b/tgui/packages/tgui/layouts/Window.tsx
index fc5b5fe2410..30c644dd07d 100644
--- a/tgui/packages/tgui/layouts/Window.tsx
+++ b/tgui/packages/tgui/layouts/Window.tsx
@@ -66,6 +66,8 @@ export const Window = (props: Props) => {
     setIsReadyToRender(true);
   }, []);
 
+  const { scale } = config.window;
+
   useEffect(() => {
     if (!suspended && isReadyToRender) {
       const updateGeometry = () => {
@@ -97,7 +99,7 @@ export const Window = (props: Props) => {
         logger.log('unmounting');
       };
     }
-  }, [isReadyToRender, width, height]);
+  }, [isReadyToRender, width, height, scale]);
 
   const dispatch = globalStore.dispatch;
   const fancy = config.window?.fancy;
diff --git a/tgui/packages/tgui/styles/functions.scss b/tgui/packages/tgui/styles/functions.scss
index 5f6bc9bb5f5..6212af44021 100644
--- a/tgui/packages/tgui/styles/functions.scss
+++ b/tgui/packages/tgui/styles/functions.scss
@@ -65,3 +65,9 @@
     color.alpha($color-rgba) * 100%
   );
 }
+
+// Multiplies our viewport units by the DPI scaling amount
+// to ensure that they display correctly when using differently-scaled windows
+@function vp($viewportUnit) {
+  @return calc(var(--scaling-amount) * $viewportUnit);
+}
diff --git a/tgui/packages/tgui/styles/layouts/TitleBar.scss b/tgui/packages/tgui/styles/layouts/TitleBar.scss
index da5517c0dd9..d8d6b9f3dac 100644
--- a/tgui/packages/tgui/styles/layouts/TitleBar.scss
+++ b/tgui/packages/tgui/styles/layouts/TitleBar.scss
@@ -6,6 +6,7 @@
 @use 'sass:color';
 @use '../base';
 @use '../colors';
+@use '../functions.scss' as *;
 
 $text-color: hsla(0, 0%, 100%, 0.75) !default;
 $background-color: hsl(0, 0%, 21%) !default;
@@ -16,7 +17,7 @@ $shadow-color-core: hsl(0, 0%, 0%, 0.4) !default;
   position: fixed;
   display: flex;
   align-items: center;
-  width: 100vw;
+  width: vp(100vw);
   height: base.rem(32px);
   background-color: $background-color;
   border-bottom: 1px solid $shadow-color-core;
diff --git a/tgui/packages/tgui/styles/main.scss b/tgui/packages/tgui/styles/main.scss
index f6fa6696f48..f9d0eceaac6 100644
--- a/tgui/packages/tgui/styles/main.scss
+++ b/tgui/packages/tgui/styles/main.scss
@@ -75,3 +75,8 @@
   background-position: center;
   background-repeat: no-repeat;
 }
+
+// A default, in case someone uses the vp() function outside of a <Window>
+:root {
+  --scaling-amount: 1;
+}