tgui update (#13712)

* sign

* browser inspect verb

* BLINK engine tgui

* we don't need IE anymore

* some tgui updates

* updated dependencies, 516 compatibility

* process => subscribe

* tgui chat fix

* legacy output

* byondstorage

* prettier

* prettify

* sass-loader

* prettify scss

* another prettify

* dev server fix

* badly working byonstorage again

* vscode extensions support

* scrollbar

* some tg changes

* scroll fix (i want to believe)

* focus alermodal fix

* dev server fix and prettier

* readme

* prettier readme

* refresh and find to browser options

* some fixes for 516

.github/workflows/ci_suite.yml

@@ -42,7 +42,7 @@ jobs:
       - name: Code and Map Linting
         env:
           TEST: LINTING
-          NODE_VERSION: 12
+          NODE_VERSION: 20
         run: |
           bash test/run-test.sh
           bash scripts/build_tgui.sh

.gitignore

@@ -10,6 +10,5 @@ Thumbs.db
 data/
 cache/
 cfg/
-.vscode
 **/MapFXDrawer/*.png
 test_merge.txt

.vscode/settings.json

@@ -0,0 +1,54 @@
+{
+	// ESLint settings:
+	"eslint.workingDirectories": ["tgui/"],
+	"eslint.nodePath": "tgui/.yarn/sdks",
+	"prettier.configPath": "tgui/.prettierrc.yml",
+	"prettier.prettierPath": "tgui/.yarn/sdks/prettier/index.cjs",
+	"typescript.tsdk": "tgui/.yarn/sdks/typescript/lib",
+	"typescript.enablePromptUseWorkspaceTsdk": true,
+	"search.exclude": {
+		"**/.yarn": true,
+		"**/.pnp.*": true,
+		"tgui/public/**/*": true
+	},
+	"eslint.format.enable": true,
+	"eslint.rules.customizations": [
+		// We really want to fail the CI builds on styling errors,
+		// but it's better to show them as yellow squigglies in IDE
+		// and thus differentiate from the red typescript ones which
+		// are actually hard errors.
+		{ "rule": "*", "severity": "warn" }
+	],
+
+	"[javascript]": {
+		"editor.rulers": [80],
+		"editor.defaultFormatter": "esbenp.prettier-vscode",
+		"editor.formatOnSave": true
+	},
+	"[javascriptreact]": {
+		"editor.rulers": [80],
+		"editor.defaultFormatter": "esbenp.prettier-vscode",
+		"editor.formatOnSave": true
+	},
+	"[typescript]": {
+		"editor.rulers": [80],
+		"editor.defaultFormatter": "esbenp.prettier-vscode",
+		"editor.formatOnSave": true
+	},
+	"[typescriptreact]": {
+		"editor.rulers": [80],
+		"editor.defaultFormatter": "esbenp.prettier-vscode",
+		"editor.formatOnSave": true
+	},
+	"[scss]": {
+		"editor.rulers": [80],
+		"editor.defaultFormatter": "esbenp.prettier-vscode",
+		"editor.formatOnSave": true
+	},
+
+	"editor.formatOnSave": true,
+	"gitlens.advanced.blame.customArguments": [
+		"--ignore-revs-file",
+		"${workspaceRoot}/.git-blame-ignore-revs"
+	],
+}

.vscode/tasks.json

@@ -0,0 +1,41 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "dreammaker",
+			"dme": "taucetistation.dme",
+			"problemMatcher": [
+				"$dreammaker"
+			],
+			"group": "build",
+			"label": "dm: build - taucetistation.dme"
+		},
+		{
+			"type": "shell",
+			"command": "tgui/bin/tgui-build",
+			"windows": {
+				"command": ".\\tgui\\bin\\tgui.bat"
+			},
+			"problemMatcher": [
+				"$tsc",
+				"$eslint-stylish"
+			],
+			"group": "build",
+			"label": "tgui: build"
+		},
+		{
+			"type": "shell",
+			"command": "tgui/bin/tgui-dev-server",
+			"windows": {
+				"command": ".\\tgui\\bin\\tgui-dev-server.bat"
+			},
+			"problemMatcher": [
+				"$tsc",
+				"$eslint-stylish"
+			],
+			"group": "build",
+			"label": "tgui: run dev server"
+		}
+		,
+	]
+}

code/modules/admin/admin_verbs.dm

@@ -196,6 +196,7 @@ var/global/list/admin_verbs_debug = list(
 	/datum/admins/proc/run_unit_test,
 	/client/proc/event_manager_panel,
 	/client/proc/generate_fulltile_window_placeholders,
+	/client/proc/allow_browser_inspect,
 #ifdef REFERENCE_TRACKING
 /client/proc/find_refs,
 /client/proc/qdel_then_find_references,

code/modules/admin/verbs/debug.dm

@@ -721,3 +721,18 @@ But you can call procs that are of type /mob/living/carbon/human/proc for that p
 	T.burnt = 0
 	T.broken = 0
 	T.update_icon()
+
+/client/proc/allow_browser_inspect()
+	set category = "Debug"
+	set name = "Allow Browser Inspect"
+	set desc = "Allow browser debugging via inspect"
+
+	if(!check_rights(R_DEBUG))
+		return
+
+	if(byond_version < 516)
+		to_chat(src, "<span class='warning'>You can only use this on 516!</span>")
+		return
+
+	to_chat(src, "<span class='info'>You can now right click to use inspect on browsers.</span>")
+	winset(src, "", "browser-options=byondstorage,find,devtools,refresh")

code/modules/client/client_procs.dm

@@ -202,6 +202,10 @@ var/global/list/blacklisted_builds = list(
 	//CONNECT//
 	///////////
 /client/New(TopicData)
+	// TODO: Remove with 516
+	if(byond_version >= 516) // Enable 516 compat browser storage mechanisms
+		winset(src, "", "browser-options=byondstorage,refresh,find")
+
 	var/tdata = TopicData //save this for later use
 	TopicData = null							//Prevent calls to client.Topic from connect
 

code/modules/tgui/tgui_window.dm

@@ -49,6 +49,7 @@
  * optional fancy bool If TRUE, will hide the window titlebar.
  */
 /datum/tgui_window/proc/initialize(
+		strict_mode = FALSE,
 		inline_assets = list(),
 		inline_html = "",
 		fancy = FALSE)
@@ -70,6 +71,7 @@
 		options += "titlebar=1;can_resize=1;"
 	// Generate page html
 	var/html = SStgui.basehtml
+	html = replacetextEx(html, "\[tgui:strictMode]", strict_mode)
 	html = replacetextEx(html, "\[tgui:windowId]", id)
 	// Inject inline assets
 	var/inline_assets_str = ""

code/modules/tgui_panel/external.dm

@@ -19,19 +19,16 @@
 	// Failed to fix, using tgalert as fallback
 	action = tgui_alert(src, "Did that work?",, list("Yes", "No, switch to old ui"))
 	if (action == "No, switch to old ui")
-		winset(src, "output", "on-show=&is-disabled=0&is-visible=1")
-		winset(src, "browseroutput", "is-disabled=1;is-visible=0")
+		winset(src, "legacy_output_selector", "left=output_legacy")
 		log_tgui(src, "Failed to fix.", context = "verb/fix_tgui_panel")
 
 /client/proc/nuke_chat()
 	// Catch all solution (kick the whole thing in the pants)
-	winset(src, "output", "on-show=&is-disabled=0&is-visible=1")
-	winset(src, "browseroutput", "is-disabled=1;is-visible=0")
+	winset(src, "legacy_output_selector", "left=output_legacy")
 	if(!tgui_panel || !istype(tgui_panel))
 		log_tgui(src, "tgui_panel datum is missing",
 			context = "verb/fix_tgui_panel")
 		tgui_panel = new(src)
 	tgui_panel.initialize(force = TRUE)
 	// Force show the panel to see if there are any errors
-	winset(src, "output", "is-disabled=1&is-visible=0")
-	winset(src, "browseroutput", "is-disabled=0;is-visible=1")
+	winset(src, "legacy_output_selector", "left=output_browser")

interface/skin.dmf

@@ -227,7 +227,7 @@ window "popupwindow"
 window "outputwindow"
 	elem "outputwindow"
 		type = MAIN
-		pos = 281,0
+		pos = 0,0
 		size = 640x480
 		anchor1 = -1,-1
 		anchor2 = -1,-1
@@ -238,24 +238,16 @@ window "outputwindow"
 		can-minimize = false
 		can-resize = false
 		is-pane = true
-	elem "browseroutput"
-		type = BROWSER
+	elem "legacy_output_selector"
+		type = CHILD
 		pos = 0,0
-		size = 640x460
+		size = 640x456
 		anchor1 = 0,0
 		anchor2 = 100,100
 		background-color = #ffffff
-		is-visible = false
-		is-disabled = true
-		saved-params = ""
-	elem "output"
-		type = OUTPUT
-		pos = 0,0
-		size = 640x460
-		anchor1 = 0,0
-		anchor2 = 100,100
-		is-default = true
-		saved-params = ""
+		saved-params = "splitter"
+		left = "output_legacy"
+		is-vert = false
 	elem "input"
 		type = INPUT
 		pos = 2,460
@@ -287,6 +279,44 @@ window "outputwindow"
 		command = ".winset \"mebutton.is-checked=true?input.command=\"!me \\\"\" macrobutton.is-checked=false:input.command=\"\"mebutton.is-checked=true?saybutton.is-checked=false\""
 		button-type = pushbox
 
+window "output_legacy"
+	elem "output_legacy"
+		type = MAIN
+		pos = 0,0
+		size = 640x456
+		anchor1 = -1,-1
+		anchor2 = -1,-1
+		background-color = none
+		saved-params = "pos;size;is-minimized;is-maximized"
+		is-pane = true
+	elem "output"
+		type = OUTPUT
+		pos = 0,0
+		size = 640x456
+		anchor1 = 0,0
+		anchor2 = 100,100
+		is-default = true
+		saved-params = ""
+
+window "output_browser"
+	elem "output_browser"
+		type = MAIN
+		pos = 0,0
+		size = 640x456
+		anchor1 = -1,-1
+		anchor2 = -1,-1
+		background-color = none
+		saved-params = "pos;size;is-minimized;is-maximized"
+		is-pane = true
+	elem "browseroutput"
+		type = BROWSER
+		pos = 0,0
+		size = 640x456
+		anchor1 = 0,0
+		anchor2 = 100,100
+		background-color = none
+		saved-params = ""
+
 window "preferences_window"
 	elem "preferences_window"
 		type = MAIN