TGS Test Merge (#8359)

Author: cm13-github

code/__DEFINES/subsystems.dm

@@ -125,6 +125,7 @@
 #define SS_INIT_HUMANS  21
 #define SS_INIT_WHO 20
 #define SS_INIT_POWER   19
+#define SS_INIT_PREDSHIPS 18
 #define SS_INIT_INFLUXMCSTATS 12
 #define SS_INIT_INFLUXSTATS 11
 #define SS_INIT_LIGHTING 10
@@ -139,10 +140,9 @@
 #define SS_INIT_INTERIOR 2.7
 #define SS_INIT_TECHTREE    2.5
 #define SS_INIT_RADIO 2
+#define SS_INIT_ASSETS 1
 #define SS_INIT_TIMER   100
 #define SS_INIT_UNSPECIFIED 0
-#define SS_INIT_PREDSHIPS  -19
-#define SS_INIT_ASSETS -20
 #define SS_INIT_TICKER -21
 #define SS_INIT_VOTE   -23
 #define SS_INIT_DATABASE   -27

code/controllers/subsystem/tgui.dm

@@ -34,6 +34,13 @@ SUBSYSTEM_DEF(tgui)
 	basehtml = replacetextEx(basehtml, "<!-- tgui:inline-polyfill -->", polyfill)
 	basehtml = replacetext(basehtml, "tgui:stylesheet", MAP_STYLESHEET)
 
+/datum/controller/subsystem/tgui/OnConfigLoad()
+	if(CONFIG_GET(string/asset_transport) == "webroot")
+		var/datum/asset_transport/webroot/webroot = SSassets.transport
+
+		var/datum/asset_cache_item/item = webroot.register_asset("iframe.html", file("tgui/public/iframe.html"))
+		basehtml = replacetext(basehtml, "tgui:storagecdn", webroot.get_asset_url("iframe.html", item))
+
 /datum/controller/subsystem/tgui/Shutdown()
 	close_all_uis()
 

tgui/global.d.ts

@@ -163,6 +163,11 @@ type ByondType = {
    * The ByondCSS stylesheet to load into ByondUI components
    */
   styleSheet: string;
+
+  /**
+   * The external URL for the IndexedDB IFrame to use as the origin
+   */
+  storageCdn: string;
 };
 
 /**

tgui/packages/common/storage.js

@@ -9,6 +9,7 @@
 export const IMPL_MEMORY = 0;
 export const IMPL_HUB_STORAGE = 1;
 export const IMPL_INDEXED_DB = 2;
+export const IMPL_IFRAME_INDEXED_DB = 3;
 
 const INDEXED_DB_VERSION = 1;
 const INDEXED_DB_NAME = 'cm-tgui';
@@ -84,6 +85,51 @@ class HubStorageBackend {
   }
 }
 
+class IFrameIndexedDbBackend {
+  constructor() {
+    this.impl = IMPL_IFRAME_INDEXED_DB;
+  }
+
+  async ready() {
+    const iframe = document.createElement('iframe');
+    iframe.style.display = 'none';
+    iframe.src = Byond.storageCdn;
+
+    const completePromise = new Promise((resolve) => {
+      iframe.onload = () => resolve(this);
+    });
+
+    this.iframeWindow = document.body.appendChild(iframe).contentWindow;
+
+    return completePromise;
+  }
+
+  async get(key) {
+    const promise = new Promise((resolve) => {
+      window.addEventListener('message', (message) => {
+        if (message.data.key === key) {
+          resolve(message.data.value);
+        }
+      });
+    });
+
+    this.iframeWindow.postMessage({ type: 'get', key: key }, '*');
+    return promise;
+  }
+
+  async set(key, value) {
+    this.iframeWindow.postMessage({ type: 'set', key: key, value: value }, '*');
+  }
+
+  async remove(key) {
+    this.iframeWindow.postMessage({ type: 'remove', key: key }, '*');
+  }
+
+  async clear() {
+    this.iframeWindow.postMessage({ type: 'clear' }, '*');
+  }
+}
+
 class IndexedDbBackend {
   // TODO: Remove with 516
   constructor() {
@@ -145,10 +191,16 @@ class IndexedDbBackend {
  * Web Storage Proxy object, which selects the best backend available
  * depending on the environment.
  */
-class StorageProxy {
-  constructor() {
+export class StorageProxy {
+  constructor(chat) {
     this.backendPromise = (async () => {
       if (!Byond.TRIDENT) {
+        if (chat) {
+          const iframe = new IFrameIndexedDbBackend();
+          await iframe.ready();
+          return iframe;
+        }
+
         if (!testHubStorage()) {
           return new Promise((resolve) => {
             const listener = () => {

tgui/packages/tgui-panel/chat/middleware.js

@@ -4,7 +4,7 @@
  * @license MIT
  */
 
-import { storage } from 'common/storage';
+import { storage as realStorage, StorageProxy } from 'common/storage';
 import DOMPurify from 'dompurify';
 
 import {
@@ -35,6 +35,9 @@ import { selectChat, selectCurrentChatPage } from './selectors';
 // List of blacklisted tags
 const FORBID_TAGS = ['a', 'iframe', 'link', 'video'];
 
+const storage =
+  Byond.storageCdn === 'tgui:storagecdn' ? realStorage : new StorageProxy(true);
+
 const saveChatToStorage = async (store) => {
   const state = selectChat(store.getState());
   const fromIndex = Math.max(

tgui/public/iframe.html

@@ -0,0 +1,85 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta http-equiv='X-UA-Compatible' content='IE=edge' />
+  <meta charset='utf-8' />
+
+  <script type='text/javascript'>
+    const INDEXED_DB_VERSION = 1;
+    const INDEXED_DB_NAME = 'tgui';
+    const INDEXED_DB_STORE_NAME = 'storage';
+
+    const READ_ONLY = 'readonly';
+    const READ_WRITE = 'readwrite';
+
+    const dbPromise = new Promise((resolve, reject) => {
+      const indexedDB = window.indexedDB || window.msIndexedDB;
+      const req = indexedDB.open(INDEXED_DB_NAME, INDEXED_DB_VERSION);
+      req.onupgradeneeded = () => {
+        try {
+          req.result.createObjectStore(INDEXED_DB_STORE_NAME);
+        } catch (err) {
+          reject(new Error('Failed to upgrade IDB: ' + req.error));
+        }
+      };
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => {
+        reject(new Error('Failed to open IDB: ' + req.error));
+      };
+    });
+
+    window.addEventListener('message', (messageEvent) => {
+      switch (messageEvent.data.type) {
+        case 'get':
+          get(event.data.key).then((value) => {
+            messageEvent.source.postMessage({key: messageEvent.data.key, value: value}, "*")
+          });
+          break;
+        case 'set':
+          set(messageEvent.data.key, messageEvent.data.value);
+          break;
+        case 'remove':
+          remove(messageEvent.data.key);
+          break;
+        case 'clear':
+          clear();
+          break;
+        default:
+          break;
+      }
+    });
+
+    const getStore = async (mode) => {
+      return dbPromise.then((db) => db
+      .transaction(INDEXED_DB_STORE_NAME, mode)
+      .objectStore(INDEXED_DB_STORE_NAME));
+    };
+
+    const get = async (key) => {
+      const store = await getStore(READ_ONLY);
+      return new Promise((resolve, reject) => {
+        const req = store.get(key);
+        req.onsuccess = () => resolve(req.result);
+        req.onerror = () => reject(req.error);
+      });
+    };
+
+    const set = async (key, value) => {
+      const store = await getStore(READ_WRITE);
+      store.put(value, key);
+    };
+
+    const remove = async (key) => {
+      const store = await getStore(READ_WRITE);
+      store.delete(key);
+    };
+
+    const clear = async () => {
+      const store = await getStore(READ_WRITE);
+      store.clear();
+    };
+  </script>
+</head>
+
+</html>

tgui/public/tgui.html

@@ -42,6 +42,8 @@
 
   Byond.styleSheet = "tgui:stylesheet"
 
+  Byond.storageCdn = "tgui:storagecdn"
+
   // Backwards compatibility
   window.__windowId__ = Byond.windowId;