From c771360e00158668b9cfbad11fce6eec43c9a1d1 Mon Sep 17 00:00:00 2001
From: Jeremiah <42397676+jlsnow301@users.noreply.github.com>
Date: Tue, 9 Dec 2025 12:54:13 -0800
Subject: [PATCH] Removes tgui fancy mode as a preference, we're only fancy now
 (#94389)

## About The Pull Request
This defaults every tgui to fancy mode and removes the preference
entirely.
## Why It's Good For The Game
If you look through the code you'll find comments like these
> //some browsers (IE8) have trouble with unsupported css3 elements that
break the panel's functionality, so we won't load those if a user is in
no frills tgui mode since that's for similar compatability support

We're far and away from IE8, therefore our need for compatibility
support, so I think it's valid to remove this so called 'no frills tgui
mode'. It's tied into the event message system with every backend
update, so there's a tad less overhead.
## Changelog
:cl:
del: TGUI now defaults to fancy mode, there is only fancy mode. Welcome
to the future.
/:cl:
---
 code/modules/admin/poll_management.dm         |  6 ++--
 code/modules/admin/sql_ban_system.dm          | 15 +++++-----
 code/modules/client/preferences/tgui.dm       | 10 -------
 code/modules/tgui/tgui.dm                     |  6 ++--
 code/modules/tgui/tgui_window.dm              | 12 +-------
 code/modules/tgui_input/say_modal/modal.dm    |  1 -
 code/modules/tgui_panel/tgui_panel.dm         |  1 -
 tgui/docs/tgui-for-custom-html-popups.md      | 16 +---------
 tgui/packages/tgui/backend.ts                 | 24 ++-------------
 tgui/packages/tgui/drag.ts                    |  3 +-
 .../features/game_preferences/tgui.tsx        |  7 -----
 tgui/packages/tgui/layouts/TitleBar.tsx       | 17 +++--------
 tgui/packages/tgui/layouts/Window.tsx         | 30 ++++++++-----------
 13 files changed, 32 insertions(+), 116 deletions(-)

diff --git a/code/modules/admin/poll_management.dm b/code/modules/admin/poll_management.dm
index 88a38c90166..80ba5ec56a0 100644
--- a/code/modules/admin/poll_management.dm
+++ b/code/modules/admin/poll_management.dm
@@ -229,8 +229,7 @@
 					output += "<hr style='background:#000000; border:0; height:3px'>"
 	var/datum/browser/panel = new(usr, "pmpanel", "Poll Management Panel", 780, 640)
 	panel.add_stylesheet("admin_panelscss", 'html/admin/admin_panels.css')
-	if(usr.client.prefs.read_preference(/datum/preference/toggle/tgui_fancy)) //some browsers (IE8) have trouble with unsupported css3 elements that break the panel's functionality, so we won't load those if a user is in no frills tgui mode since that's for similar compatability support
-		panel.add_stylesheet("admin_panelscss3", 'html/admin/admin_panels_css3.css')
+	panel.add_stylesheet("admin_panelscss3", 'html/admin/admin_panels_css3.css')
 	panel.set_content(jointext(output, ""))
 	panel.open()
 
@@ -527,8 +526,7 @@
 		panel_height = 320
 	var/datum/browser/panel = new(usr, "popanel", "Poll Option Panel", 370, panel_height)
 	panel.add_stylesheet("admin_panelscss", 'html/admin/admin_panels.css')
-	if(usr.client.prefs.read_preference(/datum/preference/toggle/tgui_fancy)) //some browsers (IE8) have trouble with unsupported css3 elements that break the panel's functionality, so we won't load those if a user is in no frills tgui mode since that's for similar compatability support
-		panel.add_stylesheet("admin_panelscss3", 'html/admin/admin_panels_css3.css')
+	panel.add_stylesheet("admin_panelscss3", 'html/admin/admin_panels_css3.css')
 	panel.set_content(jointext(output, ""))
 	panel.open()
 
diff --git a/code/modules/admin/sql_ban_system.dm b/code/modules/admin/sql_ban_system.dm
index 71b2c866f0d..ec8d931c0b2 100644
--- a/code/modules/admin/sql_ban_system.dm
+++ b/code/modules/admin/sql_ban_system.dm
@@ -194,10 +194,8 @@
 	var/datum/browser/panel = new(usr, "banpanel", "Banning Panel", 910, panel_height)
 	panel.add_stylesheet("admin_panelscss", 'html/admin/admin_panels.css')
 	panel.add_stylesheet("banpanelcss", 'html/admin/banpanel.css')
-	var/tgui_fancy = usr.client.prefs.read_preference(/datum/preference/toggle/tgui_fancy)
-	if(tgui_fancy) //some browsers (IE8) have trouble with unsupported css3 elements and DOM methods that break the panel's functionality, so we won't load those if a user is in no frills tgui mode since that's for similar compatability support
-		panel.add_stylesheet("admin_panelscss3", 'html/admin/admin_panels_css3.css')
-		panel.add_script("banpaneljs", 'html/admin/banpanel.js')
+	panel.add_stylesheet("admin_panelscss3", 'html/admin/admin_panels_css3.css')
+	panel.add_script("banpaneljs", 'html/admin/banpanel.js')
 	var/list/output = list("<form method='get' action='?src=[REF(src)]'>[HrefTokenFormField()]")
 	output += {"<input type='hidden' name='src' value='[REF(src)]'>
 	<label class='inputlabel checkbox'>Key:
@@ -324,7 +322,7 @@
 		for(var/datum/job_department/department as anything in SSjob.joinable_departments)
 			var/label_class = department.label_class
 			var/department_name = department.department_name
-			output += "<div class='column'><label class='rolegroup [label_class]'>[tgui_fancy ? "<input type='checkbox' name='[label_class]' class='hidden' onClick='header_click_all_checkboxes(this)'>" : ""] \
+			output += "<div class='column'><label class='rolegroup [label_class]'><input type='checkbox' name='[label_class]' class='hidden' onClick='header_click_all_checkboxes(this)'> \
 			[department_name]</label><div class='content'>"
 			for(var/datum/job/job_datum as anything in department.get_jobban_jobs())
 				if(break_counter > 0 && (break_counter % 3 == 0))
@@ -337,7 +335,8 @@
 					if(!department_index)
 						stack_trace("Failed to find a department index for [department.type] in the departments_list of [job_datum.type]")
 					output += {"<label class='inputlabel checkbox'>[job_name]
-						<input type='checkbox' id='[job_name]_[department_index]' name='[job_name]' class='[label_class]' value='1'[tgui_fancy ? " onClick='toggle_other_checkboxes(this, \"[length(job_datum.departments_list)]\", \"[department_index]\")'" : ""]>
+						<input type='checkbox' id='[job_name]_[department_index]' name='[job_name]' class='[label_class]' value='1'
+						onClick='toggle_other_checkboxes(this, \"[length(job_datum.departments_list)]\", \"[department_index]\")'">
 						<div class='inputbox[(job_name in banned_from) ? " banned" : ""]'></div></label>
 						"}
 				else
@@ -352,7 +351,7 @@
 			"Abstract" = list("Appearance", "Emote", "Deadchat", "OOC", "Urgent Adminhelp"),
 			)
 		for(var/department in other_job_lists)
-			output += "<div class='column'><label class='rolegroup [ckey(department)]'>[tgui_fancy ? "<input type='checkbox' name='[department]' class='hidden' onClick='header_click_all_checkboxes(this)'>" : ""][department]</label><div class='content'>"
+			output += "<div class='column'><label class='rolegroup [ckey(department)]'><input type='checkbox' name='[department]' class='hidden' onClick='header_click_all_checkboxes(this)'>[department]</label><div class='content'>"
 			break_counter = 0
 			for(var/job in other_job_lists[department])
 				if(break_counter > 0 && (break_counter % 3 == 0))
@@ -401,7 +400,7 @@
 			),
 		)
 		for(var/department in long_job_lists)
-			output += "<div class='column'><label class='rolegroup long [ckey(department)]'>[tgui_fancy ? "<input type='checkbox' name='[department]' class='hidden' onClick='header_click_all_checkboxes(this)'>" : ""][department]</label><div class='content'>"
+			output += "<div class='column'><label class='rolegroup long [ckey(department)]'><input type='checkbox' name='[department]' class='hidden' onClick='header_click_all_checkboxes(this)'>[department]</label><div class='content'>"
 			break_counter = 0
 			for(var/job in long_job_lists[department])
 				if(break_counter > 0 && (break_counter % 10 == 0))
diff --git a/code/modules/client/preferences/tgui.dm b/code/modules/client/preferences/tgui.dm
index 4cf57be94da..a42e047be49 100644
--- a/code/modules/client/preferences/tgui.dm
+++ b/code/modules/client/preferences/tgui.dm
@@ -1,13 +1,3 @@
-/datum/preference/toggle/tgui_fancy
-	category = PREFERENCE_CATEGORY_GAME_PREFERENCES
-	savefile_key = "tgui_fancy"
-	savefile_identifier = PREFERENCE_PLAYER
-
-/datum/preference/toggle/tgui_fancy/apply_to_client(client/client, value)
-	for (var/datum/tgui/tgui as anything in client.mob?.tgui_open_uis)
-		// Force it to reload either way
-		tgui.update_static_data(client.mob)
-
 // Determines if input boxes are in tgui or old fashioned
 /datum/preference/toggle/tgui_input
 	category = PREFERENCE_CATEGORY_GAME_PREFERENCES
diff --git a/code/modules/tgui/tgui.dm b/code/modules/tgui/tgui.dm
index f9b94949f18..dc86ea363f8 100644
--- a/code/modules/tgui/tgui.dm
+++ b/code/modules/tgui/tgui.dm
@@ -57,7 +57,7 @@
  */
 /datum/tgui/New(mob/user, datum/src_object, interface, title, ui_x, ui_y)
 	log_tgui(user,
-		"new [interface] fancy [user?.client?.prefs.read_preference(/datum/preference/toggle/tgui_fancy)]",
+		"new [interface]",
 		src_object = src_object)
 	src.user = user
 	src.src_object = src_object
@@ -98,7 +98,6 @@
 	if(!window.is_ready())
 		window.initialize(
 			strict_mode = TRUE,
-			fancy = user.client.prefs.read_preference(/datum/preference/toggle/tgui_fancy),
 			assets = list(
 				get_asset_datum(/datum/asset/simple/tgui),
 			))
@@ -156,7 +155,7 @@
  * public
  *
  * Closes all ByondUI elements, left dangling by a forceful TGUI exit,
- * such as via Alt+F4, closing in non-fancy mode, or terminating the process
+ * such as via Alt+F4, closing or terminating the process
  *
  */
 /datum/tgui/proc/terminate_byondui_elements()
@@ -258,7 +257,6 @@
 		"window" = list(
 			"key" = window_key,
 			"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),
 		),
diff --git a/code/modules/tgui/tgui_window.dm b/code/modules/tgui/tgui_window.dm
index 38c49548b64..c99ab314344 100644
--- a/code/modules/tgui/tgui_window.dm
+++ b/code/modules/tgui/tgui_window.dm
@@ -20,7 +20,6 @@
 	var/sent_assets = list()
 	// Vars passed to initialize proc (and saved for later)
 	var/initial_strict_mode
-	var/initial_fancy
 	var/initial_assets
 	var/initial_inline_html
 	var/initial_inline_js
@@ -52,7 +51,6 @@
  * will be put into the queue until the window finishes loading.
  *
  * optional strict_mode bool - Enables strict error handling and BSOD.
- * optional fancy bool - If TRUE and if this is NOT a panel, will hide the window titlebar.
  * optional assets list - List of assets to load during initialization.
  * optional inline_html string - Custom HTML to inject.
  * optional inline_js string - Custom JS to inject.
@@ -60,7 +58,6 @@
  */
 /datum/tgui_window/proc/initialize(
 		strict_mode = FALSE,
-		fancy = FALSE,
 		assets = list(),
 		inline_html = "",
 		inline_js = "",
@@ -70,7 +67,6 @@
 		window = src)
 	if(!client)
 		return
-	src.initial_fancy = fancy
 	src.initial_assets = assets
 	src.initial_inline_html = inline_html
 	src.initial_inline_js = inline_js
@@ -78,12 +74,7 @@
 	status = TGUI_WINDOW_LOADING
 	fatally_errored = FALSE
 	// Build window options
-	var/options = "file=[id].html;can_minimize=0;auto_format=0;"
-	// Remove titlebar and resize handles for a fancy window
-	if(fancy)
-		options += "titlebar=0;can_resize=0;"
-	else
-		options += "titlebar=1;can_resize=1;"
+	var/options = "file=[id].html;can_minimize=0;auto_format=0;titlebar=0;can_resize=0;"
 	// Generate page html
 	var/html = SStgui.basehtml
 	html = replacetextEx(html, "\[tgui:windowId]", id)
@@ -130,7 +121,6 @@
 /datum/tgui_window/proc/reinitialize()
 	initialize(
 		strict_mode = initial_strict_mode,
-		fancy = initial_fancy,
 		assets = initial_assets,
 		inline_html = initial_inline_html,
 		inline_js = initial_inline_js,
diff --git a/code/modules/tgui_input/say_modal/modal.dm b/code/modules/tgui_input/say_modal/modal.dm
index 551b8fc12e1..8407d8da38d 100644
--- a/code/modules/tgui_input/say_modal/modal.dm
+++ b/code/modules/tgui_input/say_modal/modal.dm
@@ -52,7 +52,6 @@
 	sleep(3 SECONDS)
 	window.initialize(
 			strict_mode = TRUE,
-			fancy = TRUE,
 			inline_css = file("tgui/public/tgui-say.bundle.css"),
 			inline_js = file("tgui/public/tgui-say.bundle.js"),
 	);
diff --git a/code/modules/tgui_panel/tgui_panel.dm b/code/modules/tgui_panel/tgui_panel.dm
index 24b1e865ffc..ecb3ad626a8 100644
--- a/code/modules/tgui_panel/tgui_panel.dm
+++ b/code/modules/tgui_panel/tgui_panel.dm
@@ -82,7 +82,6 @@
 					"computer_id" = client.computer_id,
 				),
 				"window" = list(
-					"fancy" = FALSE,
 					"locked" = FALSE,
 				),
 			),
diff --git a/tgui/docs/tgui-for-custom-html-popups.md b/tgui/docs/tgui-for-custom-html-popups.md
index b666f3a1f54..c98c40c7fa8 100644
--- a/tgui/docs/tgui-for-custom-html-popups.md
+++ b/tgui/docs/tgui-for-custom-html-popups.md
@@ -39,17 +39,13 @@ TGUI in /tg/station codebase has `/datum/asset`, that packs scripts and styleshe
 
 ```dm
 window.initialize(
-  fancy = user.client.prefs.read_preference(
-    /datum/preference/toggle/tgui_fancy
-  ),
   assets = list(
     get_asset_datum(/datum/asset/simple/tgui),
   ))
 ```
 
-You can see two new arguments:
+You can see new arguments:
 
-- `fancy` - See [Fancy mode](#fancy-mode)
 - `assets` - This is a list of asset datums, and all JS and CSS in the assets will be loaded in the page.
 
 Using asset datums has a big benefit over including `<script>` and `<link>` in normal html popups; If your asset is not available for any reason at the moment (e.g. network is down or packet loss), tgui window will retry loading those assets multiple times.
@@ -93,16 +89,6 @@ window.initialize(
 
 If you need to inline multiple JS or CSS files, you can concatenate them for now, and separate contents of each file with an `\n` symbol. _This can be a point of improvement (add support for file lists)_.
 
-## Fancy mode
-
-You may have noticed the fancy mode in previous snippets:
-
-```dm
-window.initialize(fancy = TRUE)
-```
-
-This removes the native window titlebar and border, which effectively turns window into a floating panel. TGUI heavily uses this option to draw completely custom, fancy windows. You can use it too, but not having the default titlebar limits usability of the browser window, since you can't even close it or drag around without implementing that functionality yourself. This mode might be useful for creating popups and tooltips.
-
 ## Communication
 
 It is very often necessary to exchange data between DM and JS, and in vanilla BYOND programming it is a huge pain in the butt, because the `browse()` API is very convoluted, out of box it can send only strings, and sending data back to DM requires using hrefs.
diff --git a/tgui/packages/tgui/backend.ts b/tgui/packages/tgui/backend.ts
index 83afa926022..7a40ee4b801 100644
--- a/tgui/packages/tgui/backend.ts
+++ b/tgui/packages/tgui/backend.ts
@@ -172,7 +172,6 @@ export const backendReducer = (state = initialState, action) => {
 };
 
 export const backendMiddleware = (store) => {
-  let fancyState;
   let suspendInterval;
 
   return (next) => (action) => {
@@ -218,23 +217,6 @@ export const backendMiddleware = (store) => {
       setTimeout(() => focusMap());
     }
 
-    if (type === 'backend/update') {
-      const fancy = payload.config?.window?.fancy;
-      // Initialize fancy state
-      if (fancyState === undefined) {
-        fancyState = fancy;
-      }
-      // React to changes in fancy
-      else if (fancyState !== fancy) {
-        logger.log('changing fancy mode to', fancy);
-        fancyState = fancy;
-        Byond.winset(Byond.windowId, {
-          titlebar: !fancy,
-          'can-resize': !fancy,
-        });
-      }
-    }
-
     // Resume on incoming update
     if (type === 'backend/update' && suspended) {
       // Show the payload
@@ -353,9 +335,8 @@ const chunkSplitter = {
 export const sendAct = (action: string, payload: object = {}) => {
   // Validate that payload is an object
   // prettier-ignore
-  const isObject = typeof payload === 'object'
-    && payload !== null
-    && !Array.isArray(payload);
+  const isObject =
+    typeof payload === 'object' && payload !== null && !Array.isArray(payload);
   if (!isObject) {
     logger.error(`Payload for act() must be an object, got this:`, payload);
     return;
@@ -400,7 +381,6 @@ type BackendState<TData> = {
     window: {
       key: string;
       size: [number, number];
-      fancy: BooleanLike;
       locked: BooleanLike;
       scale: BooleanLike;
     };
diff --git a/tgui/packages/tgui/drag.ts b/tgui/packages/tgui/drag.ts
index f56cb438268..7ba1bdd53f9 100644
--- a/tgui/packages/tgui/drag.ts
+++ b/tgui/packages/tgui/drag.ts
@@ -117,14 +117,13 @@ const storeWindowGeometry = async () => {
 // Recall window geometry from local storage and apply it
 export const recallWindowGeometry = async (
   options: {
-    fancy?: BooleanLike;
     pos?: [number, number];
     size?: [number, number];
     locked?: BooleanLike;
     scale?: BooleanLike;
   } = {},
 ) => {
-  const geometry = options.fancy && (await storage.get(windowKey));
+  const geometry = await storage.get(windowKey);
   if (geometry) {
     logger.log('recalled geometry:', geometry);
   }
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 f5354cc9f37..3fe5ac5e3ae 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
@@ -1,12 +1,5 @@
 import { CheckboxInput, type FeatureToggle } from '../base';
 
-export const tgui_fancy: FeatureToggle = {
-  name: 'Enable fancy TGUI',
-  category: 'UI',
-  description: 'Makes TGUI windows look better, at the cost of compatibility.',
-  component: CheckboxInput,
-};
-
 export const tgui_input: FeatureToggle = {
   name: 'Input: Enable TGUI',
   category: 'UI',
diff --git a/tgui/packages/tgui/layouts/TitleBar.tsx b/tgui/packages/tgui/layouts/TitleBar.tsx
index 25dc90e6f3b..d1c8d007cc3 100644
--- a/tgui/packages/tgui/layouts/TitleBar.tsx
+++ b/tgui/packages/tgui/layouts/TitleBar.tsx
@@ -11,7 +11,6 @@ type TitleBarProps = Partial<{
   className: string;
   title: string;
   status: number;
-  fancy: BooleanLike;
   canClose: BooleanLike;
   onClose: (e) => void;
   onDragStart: (e) => void;
@@ -30,16 +29,8 @@ function statusToColor(status: number): string {
 }
 
 export function TitleBar(props: TitleBarProps) {
-  const {
-    className,
-    title,
-    status,
-    canClose,
-    fancy,
-    onDragStart,
-    onClose,
-    children,
-  } = props;
+  const { className, title, status, canClose, onDragStart, onClose, children } =
+    props;
   const dispatch = globalStore.dispatch;
 
   const finalTitle =
@@ -52,7 +43,7 @@ export function TitleBar(props: TitleBarProps) {
     <div className={classes(['TitleBar', className])}>
       <div
         className="TitleBar__dragZone"
-        onMouseDown={(e) => fancy && onDragStart && onDragStart(e)}
+        onMouseDown={(e) => onDragStart?.(e)}
       />
       {status === undefined ? (
         <Icon className="TitleBar__statusIcon" name="tools" opacity={0.5} />
@@ -72,7 +63,7 @@ export function TitleBar(props: TitleBarProps) {
           onClick={() => dispatch(toggleKitchenSink())}
         />
       )}
-      {Boolean(fancy && canClose) && (
+      {!!canClose && (
         <div className="TitleBar__close" onClick={onClose}>
           <Icon className="TitleBar__close--icon" name="times" />
         </div>
diff --git a/tgui/packages/tgui/layouts/Window.tsx b/tgui/packages/tgui/layouts/Window.tsx
index 0b8f92f56ba..0ad25ee2e5d 100644
--- a/tgui/packages/tgui/layouts/Window.tsx
+++ b/tgui/packages/tgui/layouts/Window.tsx
@@ -102,7 +102,6 @@ export const Window = (props: Props) => {
   }, [isReadyToRender, width, height, scale]);
 
   const dispatch = globalStore.dispatch;
-  const fancy = config.window?.fancy;
 
   // Determine when to show dimmer
   const showDimmer =
@@ -116,7 +115,6 @@ export const Window = (props: Props) => {
       <TitleBar
         title={title || decodeHtmlEntities(config.title)}
         status={config.status}
-        fancy={fancy}
         onDragStart={dragStartHandler}
         onClose={() => {
           logger.log('pressed close');
@@ -130,22 +128,18 @@ export const Window = (props: Props) => {
         {!suspended && children}
         {showDimmer && <div className="Window__dimmer" />}
       </div>
-      {fancy && (
-        <>
-          <div
-            className="Window__resizeHandle__e"
-            onMouseDown={resizeStartHandler(1, 0) as any}
-          />
-          <div
-            className="Window__resizeHandle__s"
-            onMouseDown={resizeStartHandler(0, 1) as any}
-          />
-          <div
-            className="Window__resizeHandle__se"
-            onMouseDown={resizeStartHandler(1, 1) as any}
-          />
-        </>
-      )}
+      <div
+        className="Window__resizeHandle__e"
+        onMouseDown={resizeStartHandler(1, 0) as any}
+      />
+      <div
+        className="Window__resizeHandle__s"
+        onMouseDown={resizeStartHandler(0, 1) as any}
+      />
+      <div
+        className="Window__resizeHandle__se"
+        onMouseDown={resizeStartHandler(1, 1) as any}
+      />
     </Layout>
   );
 };