516: fix chat window z-fighting and tgui-say escape key

Port of ParadiseSS13/Paradise#27676, which in turn is a port of VOREStation/VOREStation#16713 and VOREStation/VOREStation#16734

code/modules/tgui_panel/external.dm

@@ -19,22 +19,19 @@
 	// Failed to fix, using tgalert as fallback
 	action = tgalert(src, "Did that work?", "", "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")
 	if(byond_version >= 516)
 		var/list/options = list("byondstorage", "find")
 		if(check_rights_for(src, R_DEBUG))

interface/skin.dmf

@@ -226,7 +226,7 @@ window "infowindow"
 window "outputwindow"
 	elem "outputwindow"
 		type = MAIN
-		pos = 281,0
+		pos = 0,0
 		size = 640x480
 		anchor1 = -1,-1
 		anchor2 = -1,-1
@@ -285,22 +285,52 @@ window "outputwindow"
 		anchor2 = -1,-1
 		is-visible = false
 		saved-params = ""
-	elem "browseroutput"
-		type = BROWSER
+	elem "legacy_output_selector"
+		type = CHILD
 		pos = 0,0
 		size = 640x456
 		anchor1 = 0,0
 		anchor2 = 100,100
-		is-visible = false
-		is-disabled = true
-		saved-params = ""
+		saved-params = "splitter"
+		left = "output_legacy"
+		is-vert = false
+
+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 = "max-lines"
+
+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 "popupwindow"

tgui/global.d.ts

@@ -162,6 +162,11 @@ type ByondType = {
    */
   parseJson(text: string): any;
 
+  /**
+   * Downloads a blob, platform-agnostic
+   */
+  saveBlob(blob: Blob, filename: string, ext: string): void;
+
   /**
    * Sends a message to `/datum/tgui_window` which hosts this window instance.
    */

tgui/packages/common/keys.ts

@@ -25,7 +25,8 @@ export enum KEY {
   Down = 'Down',
   End = 'End',
   Enter = 'Enter',
-  Escape = 'Esc',
+  Esc = 'Esc',
+  Escape = 'Escape',
   Home = 'Home',
   Insert = 'Insert',
   Left = 'Left',
@@ -37,3 +38,18 @@ export enum KEY {
   Tab = 'Tab',
   Up = 'Up',
 }
+
+/**
+ * ### isEscape
+ *
+ * Checks if the user has hit the 'ESC' key on their keyboard.
+ * There's a weirdness in BYOND where this could be either the string
+ * 'Escape' or 'Esc' depending on the browser. This function handles
+ * both cases.
+ *
+ * @param key - the key to check, typically from event.key
+ * @returns true if key is Escape or Esc, false otherwise
+ */
+export const isEscape = (key: string): boolean => {
+  return key === KEY.Esc || key === KEY.Escape;
+};

tgui/packages/tgui-panel/chat/renderer.jsx

@@ -612,13 +612,13 @@ class ChatRenderer {
       + '</body>\n'
       + '</html>\n';
     // Create and send a nice blob
-    const blob = new Blob([pageHtml]);
+    const blob = new Blob([pageHtml], { type: 'text/plain' });
     const timestamp = new Date()
       .toISOString()
       .substring(0, 19)
       .replace(/[-:]/g, '')
       .replace('T', '-');
-    window.navigator.msSaveBlob(blob, `ss13-chatlog-${timestamp}.html`);
+    Byond.saveBlob(blob, `ss13-chatlog-${timestamp}.html`, '.html');
   }
 }
 

tgui/packages/tgui-panel/index.jsx

@@ -78,14 +78,8 @@ const setupApp = () => {
   Byond.subscribe((type, payload) => store.dispatch({ type, payload }));
 
   // Unhide the panel
-  Byond.winset('output', {
-    'is-visible': false,
-  });
-  Byond.winset('browseroutput', {
-    'is-visible': true,
-    'is-disabled': false,
-    pos: '0x0',
-    size: '0x0',
+  Byond.winset('legacy_output_selector', {
+    left: 'output_browser',
   });
 
   // Resize the panel to match the non-browser output

tgui/packages/tgui-say/TguiSay.tsx

@@ -6,7 +6,7 @@ import { byondMessages } from './timers';
 import { dragStartHandler } from 'tgui/drag';
 import { windowOpen, windowClose, windowSet } from './helpers';
 import { BooleanLike } from 'common/react';
-import { KEY } from 'common/keys';
+import { isEscape, KEY } from 'common/keys';
 
 type ByondOpen = {
   channel: Channel;
@@ -252,9 +252,10 @@ export class TguiSay extends Component<{}, State> {
         this.handleIncrementChannel();
         break;
 
-      case KEY.Escape:
-        this.handleClose();
-        break;
+      default:
+        if (isEscape(event.key)) {
+          this.handleClose();
+        }
     }
   }
 

tgui/packages/tgui/interfaces/KeyComboModal.tsx

@@ -1,4 +1,4 @@
-import { KEY } from 'common/keys';
+import { KEY, isEscape } from 'common/keys';
 import { useBackend, useLocalState } from '../backend';
 import { Autofocus, Box, Button, Section, Stack } from '../components';
 import { Window } from '../layouts';
@@ -18,7 +18,7 @@ const isStandardKey = (event: KeyboardEvent): boolean => {
     event.key !== KEY.Alt &&
     event.key !== KEY.Control &&
     event.key !== KEY.Shift &&
-    event.key !== KEY.Escape
+    !isEscape(event.key)
   );
 };
 
@@ -93,7 +93,7 @@ export const KeyComboModal = (props) => {
             if (event.key === KEY.Enter) {
               act('submit', { entry: input });
             }
-            if (event.key === KEY.Escape) {
+            if (isEscape(event.key)) {
               act('cancel');
             }
             return;
@@ -105,7 +105,7 @@ export const KeyComboModal = (props) => {
             setValue(formatKeyboardEvent(event));
             setBinding(false);
             return;
-          } else if (event.key === KEY.Escape) {
+          } else if (isEscape(event.key)) {
             setValue(init_value);
             setBinding(false);
             return;