Monkestation · Absolucy · Nov 16, 2024 · Nov 16, 2024 · Nov 16, 2024
diff --git a/code/modules/client/client_procs.dm b/code/modules/client/client_procs.dm
@@ -224,6 +224,9 @@ GLOBAL_LIST_INIT(blacklisted_builds, list(
 	///////////
 
 /client/New(TopicData)
+	if(byond_version >= 516) // Enable 516 compat browser storage mechanisms
+		winset(src, "", "browser-options=byondstorage,find")
+
 	var/tdata = TopicData //save this for later use
 	TopicData = null //Prevent calls to client.Topic from connect
 

diff --git a/code/modules/photography/photos/photo.dm b/code/modules/photography/photos/photo.dm
@@ -92,7 +92,7 @@
 	user << browse_rsc(picture.picture_image, "tmp_photo.png")
 	user << browse("<html><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'><title>[name]</title></head>" \
 		+ "<body style='overflow:hidden;margin:0;text-align:center'>" \
-		+ "<img src='tmp_photo.png' width='480' style='-ms-interpolation-mode:nearest-neighbor' />" \
+		+ "<img src='tmp_photo.png' width='480' style='-ms-interpolation-mode:nearest-neighbor; image-rendering:pixelated' />" \
 		+ "[scribble ? "<br>Written on the back:<br><i>[scribble]</i>" : ""]"\
 		+ "</body></html>", "window=photo_showing;size=480x608")
 	onclose(user, "[name]")

diff --git a/code/modules/tgui_panel/external.dm b/code/modules/tgui_panel/external.dm
@@ -35,6 +35,8 @@
 	// 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")
+	if(byond_version >= 516)
+		winset(src, null, "browser-options=byondstorage,find")
 
 /client/verb/refresh_tgui()
 	set name = "Refresh TGUI"

diff --git a/html/browser/common.css b/html/browser/common.css
@@ -11,7 +11,8 @@ body
 hr
 {
 	background-color: #40628a;
-	height: 1px;
+	height: 2px;
+	border: 0;
 }
 
 a, button, a:link, a:visited, a:active, .linkOn, .linkOff

diff --git a/html/statbrowser.css b/html/statbrowser.css
@@ -1,3 +1,8 @@
+.light:root {
+	--scrollbar-base: #f2f2f2;
+	--scrollbar-thumb: #a7a7a7;
+}
+
 body {
 	font-family: Verdana, Geneva, Tahoma, sans-serif;
 	font-size: 12px !important;
@@ -7,6 +12,11 @@ body {
 	overflow-y: scroll;
 }
 
+.dark:root {
+	--scrollbar-base: #181818;
+	--scrollbar-thumb: #363636;
+}
+
 body.dark {
 	background-color: #131313;
 	color: #b2c4dd;

diff --git a/tgui/packages/common/storage.js b/tgui/packages/common/storage.js
@@ -7,7 +7,7 @@
  */
 
 export const IMPL_MEMORY = 0;
-export const IMPL_LOCAL_STORAGE = 1;
+export const IMPL_HUB_STORAGE = 1;
 export const IMPL_INDEXED_DB = 2;
 
 const INDEXED_DB_VERSION = 1;
@@ -25,14 +25,11 @@ const testGeneric = (testFn) => () => {
   }
 };
 
-// Localstorage can sometimes throw an error, even if DOM storage is not
-// disabled in IE11 settings.
-// See: https://superuser.com/questions/1080011
-// prettier-ignore
-const testLocalStorage = testGeneric(() => (
-  window.localStorage && window.localStorage.getItem
-));
+const testHubStorage = testGeneric(
+  () => window.hubStorage && window.hubStorage.getItem,
+);
 
+// TODO: Remove with 516
 // prettier-ignore
 const testIndexedDb = testGeneric(() => (
   (window.indexedDB || window.msIndexedDB)
@@ -45,49 +42,50 @@ class MemoryBackend {
     this.store = {};
   }
 
-  get(key) {
+  async get(key) {
     return this.store[key];
   }
 
-  set(key, value) {
+  async set(key, value) {
     this.store[key] = value;
   }
 
-  remove(key) {
+  async remove(key) {
     this.store[key] = undefined;
   }
 
-  clear() {
+  async clear() {
     this.store = {};
   }
 }
 
-class LocalStorageBackend {
+class HubStorageBackend {
   constructor() {
-    this.impl = IMPL_LOCAL_STORAGE;
+    this.impl = IMPL_HUB_STORAGE;
   }
 
-  get(key) {
-    const value = localStorage.getItem(key);
+  async get(key) {
+    const value = await window.hubStorage.getItem(key);
     if (typeof value === 'string') {
       return JSON.parse(value);
     }
   }
 
   set(key, value) {
-    localStorage.setItem(key, JSON.stringify(value));
+    window.hubStorage.setItem(key, JSON.stringify(value));
   }
 
   remove(key) {
-    localStorage.removeItem(key);
+    window.hubStorage.removeItem(key);
   }
 
   clear() {
-    localStorage.clear();
+    window.hubStorage.clear();
   }
 }
 
 class IndexedDbBackend {
+  // TODO: Remove with 516
   constructor() {
     this.impl = IMPL_INDEXED_DB;
     /** @type {Promise<IDBDatabase>} */
@@ -108,7 +106,7 @@ class IndexedDbBackend {
     });
   }
 
-  getStore(mode) {
+  async getStore(mode) {
     // prettier-ignore
     return this.dbPromise.then((db) => db
       .transaction(INDEXED_DB_STORE_NAME, mode)
@@ -125,13 +123,6 @@ class IndexedDbBackend {
   }
 
   async set(key, value) {
-    // The reason we don't _save_ null is because IE 10 does
-    // not support saving the `null` type in IndexedDB. How
-    // ironic, given the bug below!
-    // See: https://github.com/mozilla/localForage/issues/161
-    if (value === null) {
-      value = undefined;
-    }
     // NOTE: We deliberately make this operation transactionless
     const store = await this.getStore(READ_WRITE);
     store.put(value, key);
@@ -157,16 +148,20 @@ class IndexedDbBackend {
 class StorageProxy {
   constructor() {
     this.backendPromise = (async () => {
+      if (!Byond.TRIDENT && testHubStorage()) {
+        return new HubStorageBackend();
+      }
+      // TODO: Remove with 516
       if (testIndexedDb()) {
         try {
           const backend = new IndexedDbBackend();
           await backend.dbPromise;
           return backend;
         } catch {}
       }
-      if (testLocalStorage()) {
-        return new LocalStorageBackend();
-      }
+      console.warn(
+        'No supported storage backend found. Using in-memory storage.',
+      );
       return new MemoryBackend();
     })();
   }

diff --git a/tgui/packages/tgui-panel/chat/renderer.jsx b/tgui/packages/tgui-panel/chat/renderer.jsx
@@ -163,7 +163,7 @@ class ChatRenderer {
     // Find scrollable parent
     this.scrollNode = findNearestScrollableParent(this.rootNode);
     this.scrollNode.addEventListener('scroll', this.handleScroll);
-    setImmediate(() => {
+    setTimeout(() => {
       this.scrollToBottom();
     });
     // Flush the queue
@@ -473,7 +473,7 @@ class ChatRenderer {
         this.rootNode.appendChild(fragment);
       }
       if (this.scrollTracking) {
-        setImmediate(() => this.scrollToBottom());
+        setTimeout(() => this.scrollToBottom());
       }
     }
     // Notify listeners that we have processed the batch

diff --git a/tgui/packages/tgui-panel/panelFocus.js b/tgui/packages/tgui-panel/panelFocus.js
@@ -15,7 +15,7 @@ import { focusMap } from 'tgui/focus';
 // text you can select with the mouse.
 const MIN_SELECTION_DISTANCE = 10;
 
-const deferredFocusMap = () => setImmediate(() => focusMap());
+const deferredFocusMap = () => setTimeout(() => focusMap());
 
 export const setupPanelFocusHacks = () => {
   let focusStolen = false;

diff --git a/tgui/packages/tgui-say/TguiSay.tsx b/tgui/packages/tgui-say/TguiSay.tsx
@@ -24,6 +24,13 @@ type State = {
 
 const CHANNEL_REGEX = /^[:.]\w\s/;
 
+const ROWS: Record<keyof typeof WINDOW_SIZES, number> = {
+  small: 1,
+  medium: 2,
+  large: 3,
+  width: 1, // not used
+} as const;
+
 export class TguiSay extends Component<{}, State> {
   private channelIterator: ChannelIterator;
   private chatHistory: ChatHistory;
@@ -327,11 +334,14 @@ export class TguiSay extends Component<{}, State> {
               {this.state.buttonContent}
             </button>
             <textarea
+              autoCorrect="off"
               className={`textarea textarea-${theme}`}
               maxLength={this.maxLength}
               onInput={this.handleInput}
               onKeyDown={this.handleKeyDown}
               ref={this.innerRef}
+              spellCheck={false}
+              rows={ROWS[this.state.size] || 1}
             />
           </div>
           <Dragzone position="right" theme={theme} />

diff --git a/tgui/packages/tgui-say/index.tsx b/tgui/packages/tgui-say/index.tsx
@@ -1,19 +1,11 @@
 import './styles/main.scss';
-import { createRenderer } from 'tgui/renderer';
-import { TguiSay } from './TguiSay';
+import { render } from 'inferno';
 
-const renderApp = createRenderer(() => {
-  return <TguiSay />;
-});
+import { TguiSay } from './TguiSay';
 
-const setupApp = () => {
-  // Delay setup
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', setupApp);
-    return;
-  }
+document.onreadystatechange = function () {
+  if (document.readyState !== 'complete') return;
 
-  renderApp();
+  const root = document.getElementById('react-root');
+  render(<TguiSay />, root);
 };
-
-setupApp();
diff --git a/tgui/packages/tgui-say/styles/button.scss b/tgui/packages/tgui-say/styles/button.scss
@@ -19,6 +19,13 @@
   }
 }
 
+// Remove conditionals with 516
+@supports (not (-webkit-hyphens: none)) and (not (-moz-appearance: none)) {
+  .button {
+    outline: none;
+  }
+}
+
 .button-lightMode {
   background-color: colors.$lightBorder;
   border: none;

diff --git a/tgui/packages/tgui-say/styles/colors.scss b/tgui/packages/tgui-say/styles/colors.scss
@@ -5,6 +5,7 @@ $button: #1f1f1f;
 $lightMode: #ffffff;
 $lightBorder: #bbbbbb;
 $lightHover: #eaeaea;
+$scrollbar-color-multiplier: 1 !default;
 
 $_channel_map: (
   'Admin': #ffbbff,

diff --git a/tgui/packages/tgui/backend.ts b/tgui/packages/tgui/backend.ts
@@ -176,7 +176,7 @@ export const backendMiddleware = (store) => {
       Byond.winset(Byond.windowId, {
         'is-visible': false,
       });
-      setImmediate(() => focusMap());
+      setTimeout(() => focusMap());
     }
 
     if (type === 'backend/update') {
@@ -206,7 +206,7 @@ export const backendMiddleware = (store) => {
       setupDrag();
       // We schedule this for the next tick here because resizing and unhiding
       // during the same tick will flash with a white background.
-      setImmediate(() => {
+      setTimeout(() => {
         perf.mark('resume/start');
         // Doublecheck if we are not re-suspended.
         const { suspended } = selectBackend(store.getState());

diff --git a/tgui/packages/tgui/components/BodyZoneSelector.tsx b/tgui/packages/tgui/components/BodyZoneSelector.tsx
@@ -113,6 +113,7 @@ export class BodyZoneSelector extends Component<
           }}
           style={{
             '-ms-interpolation-mode': 'nearest-neighbor',
+            'image-rendering': 'pixelated',
             position: 'absolute',
             width: `${32 * scale}px`,
             height: `${32 * scale}px`,
@@ -125,6 +126,7 @@ export class BodyZoneSelector extends Component<
             src={resolveAsset(`body_zones.${selectedZone}.png`)}
             style={{
               '-ms-interpolation-mode': 'nearest-neighbor',
+              'image-rendering': 'pixelated',
               'pointer-events': 'none',
               position: 'absolute',
               width: `${32 * scale}px`,
@@ -139,6 +141,7 @@ export class BodyZoneSelector extends Component<
             src={resolveAsset(`body_zones.${hoverZone}.png`)}
             style={{
               '-ms-interpolation-mode': 'nearest-neighbor',
+              'image-rendering': 'pixelated',
               opacity: 0.5,
               'pointer-events': 'none',
               position: 'absolute',

diff --git a/tgui/packages/tgui/interfaces/AntagInfoBloodsucker.tsx b/tgui/packages/tgui/interfaces/AntagInfoBloodsucker.tsx
@@ -197,6 +197,7 @@ const BloodsuckerClan = (props: any) => {
                     src={resolveAsset(`bloodsucker.${ClanInfo.clan_icon}.png`)}
                     style={{
                       '-ms-interpolation-mode': 'nearest-neighbor',
+                      'image-rendering': 'pixelated',
                       position: 'absolute',
                     }}
                   />

diff --git a/tgui/packages/tgui/interfaces/ArmamentStation.jsx b/tgui/packages/tgui/interfaces/ArmamentStation.jsx
@@ -120,6 +120,7 @@ export const ArmamentStation = (props) => {
                                     'horizontal-align': 'middle',
                                     '-ms-interpolation-mode':
                                       'nearest-neighbor',
+                                    'image-rendering': 'pixelated',
                                   }}
                                 />
                               </Box>

diff --git a/tgui/packages/tgui/interfaces/CargoImportConsole.jsx b/tgui/packages/tgui/interfaces/CargoImportConsole.jsx
@@ -115,6 +115,7 @@ export const CargoImportConsole = (props) => {
                                     'horizontal-align': 'middle',
                                     '-ms-interpolation-mode':
                                       'nearest-neighbor',
+                                    'image-rendering': 'pixelated',
                                   }}
                                 />
                               </Box>

diff --git a/tgui/packages/tgui/interfaces/FishingRod.tsx b/tgui/packages/tgui/interfaces/FishingRod.tsx
@@ -35,6 +35,7 @@ const FishingRodSlot = (props: FishingSlotProps) => {
       src={`data:image/jpeg;base64,${icon}`}
       style={{
         '-ms-interpolation-mode': 'nearest-neighbor',
+        'image-rendering': 'pixelated',
         'vertical-align': 'middle',
         'object-fit': 'cover',
       }}