516: use iframe indexeddb for all storage, only use byondstorage as a fallback if github pages is down

.github/workflows/generate_documentation.yml → .github/workflows/generate_web_assets.yml

@@ -1,13 +1,13 @@
-name: Generate documentation
+name: Generate web assets
 on:
   push:
     branches:
     - master
 jobs:
-  generate_documentation:
+  generate_static_assets:
     if: ( !contains(github.event.head_commit.message, '[ci skip]') )
     runs-on: ubuntu-latest
-    concurrency: gen-docs
+    concurrency: gen-assets
     steps:
       - uses: actions/checkout@v3
       - name: Setup cache
@@ -17,11 +17,12 @@ jobs:
           key: ${{ runner.os }}-spacemandmm-${{ secrets.CACHE_PURGE_KEY }}
       - name: Install SpacemanDMM
         run: bash tools/ci/install_spaceman_dmm.sh dmdoc
-      - name: Generate documentation
+      - name: Generate documentation and static assets
         run: |
           ~/dmdoc
           touch dmdoc/.nojekyll
           echo docs.cm-ss13.com > dmdoc/CNAME
+          mv tgui/public/ dmdoc/assets
       - name: Deploy
         uses: JamesIves/[email protected]
         with:

code/controllers/configuration/entries/resources.dm

@@ -28,3 +28,7 @@
 	if (str_var && str_var[length(str_var)] != "/")
 		str_var += "/"
 	return ..(str_var)
+
+/datum/config_entry/string/storage_cdn_iframe
+	config_entry_value = "https://cmss13-devs.github.io/cmss13/assets/iframe.html"
+	protection = CONFIG_ENTRY_LOCKED

code/controllers/subsystem/statpanel.dm

@@ -412,15 +412,3 @@ SUBSYSTEM_DEF(statpanels)
 	else
 		client.stat_panel.send_message("remove_listedturf")
 		client.obj_window.stop_turf_tracking()
-
-/client/verb/open_statbrowser_options(current_fontsize as num|null)
-	set name = "Open Statbrowser Options"
-	set hidden = TRUE
-
-	if (!current_fontsize)
-		current_fontsize = 14
-
-	var/datum/statbrowser_options/options_panel = statbrowser_options
-	if(!options_panel)
-		options_panel = statbrowser_options = new(src, current_fontsize)
-	options_panel.tgui_interact()

code/controllers/subsystem/tgui.dm

@@ -42,11 +42,23 @@ SUBSYSTEM_DEF(tgui)
 	basehtml = replacetext(basehtml, "tgui:stylesheet", MAP_STYLESHEET)
 
 /datum/controller/subsystem/tgui/OnConfigLoad()
+	var/storage_iframe = CONFIG_GET(string/storage_cdn_iframe)
+
+	if(storage_iframe && storage_iframe != /datum/config_entry/string/storage_cdn_iframe::config_entry_value)
+		basehtml = replacetext(basehtml, "tgui:storagecdn", storage_iframe)
+		return
+
 	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))
+		return
+
+	if(!storage_iframe)
+		return
+
+	basehtml = replacetext(basehtml, "tgui:storagecdn", storage_iframe)
 
 /datum/controller/subsystem/tgui/Shutdown()
 	close_all_uis()

code/modules/admin/verbs/debug.dm

@@ -358,7 +358,9 @@
 		return
 
 	to_chat(src, SPAN_INFO("You can now right click to use inspect on browsers."))
-	winset(src, "", "browser-options=byondstorage,find,devtools,refresh")
+	winset(src, null, list("browser-options" = "+devtools"))
+	winset(src, null, list("browser-options" = "+find"))
+	winset(src, null, list("browser-options" = "+refresh"))
 
 #ifdef TESTING
 GLOBAL_LIST_EMPTY(dirty_vars)

code/modules/client/client_procs.dm

@@ -286,9 +286,6 @@ GLOBAL_LIST_INIT(whitelisted_client_procs, list(
 	GLOB.clients += src
 	GLOB.directory[ckey] = src
 
-	if(byond_version >= 516) // Enable 516 compat browser storage mechanisms
-		winset(src, "", "browser-options=byondstorage")
-
 	// Instantiate stat panel
 	stat_panel = new(src, "statbrowser")
 	stat_panel.subscribe(src, PROC_REF(on_stat_panel_message))

colonialmarines.dme

@@ -1650,7 +1650,6 @@
 #include "code\modules\client\preferences_gear.dm"
 #include "code\modules\client\preferences_savefile.dm"
 #include "code\modules\client\preferences_toggles.dm"
-#include "code\modules\client\statbrowser_options.dm"
 #include "code\modules\client\tgui_macro.dm"
 #include "code\modules\client\traits_picker.dm"
 #include "code\modules\clothing\clothing.dm"

html/statbrowser.js

@@ -23,45 +23,12 @@ function testHubStorage() {
 	}
 }
 
-function loadFontSize() {
-	current_fontsize = parseInt(window.hubStorage.getItem("fontsize"));
-	if (isNaN(current_fontsize) || current_fontsize <= 0) {
-		current_fontsize = 14;
-	}
-	statcontentdiv.style.fontSize = current_fontsize + "px";
-	tab_change(current_tab, true); // Redraw the current tab
-}
-
-function onByondStorageLoad(event) {
-	document.removeEventListener('byondstorageupdated', onByondStorageLoad);
-	setTimeout(loadFontSize, 0); // Unfortunately its STILL not ready yet
-}
 
 // Status panel implementation ------------------------------------------------
 var status_tab_parts = ["Loading..."];
 var current_tab = null;
 var current_fontsize = 14; // in px, also determines line height and category header sizes for the verb menus
-// Per `storage.js` for tgui:
-// Localstorage can sometimes throw an error, even if DOM storage is not
-// disabled in IE11 settings.
-// See: https://superuser.com/questions/1080011
-try {
-	if (!Byond.TRIDENT) {
-		// Unfortunately byond storage isn't available immediately
-		if (!testHubStorage()) {
-			document.addEventListener('byondstorageupdated', onByondStorageLoad);
-		} else {
-			current_fontsize = parseInt(window.hubStorage.getItem("fontsize"));
-		}
-	} else { // TODO: Remove with 516
-		current_fontsize = parseInt(window.localStorage.getItem("fontsize"));
-	}
-} catch (error) {
-	current_fontsize = 14;
-}
-if (isNaN(current_fontsize) || current_fontsize <= 0) {
-	current_fontsize = 14;
-}
+
 var mc_tab_parts = [["Loading...", ""]];
 var href_token = null;
 var spells = [];
@@ -208,9 +175,6 @@ let clientButtons = {
 		{name: "Effects", command: "Adjust-Volume-SFX"},
 		{name: "Ambience", command: "Adjust-Volume-Ambience"},
 		{name: "Admin Music", command: "Adjust-Volume-Admin-Music"}
-	],
-	"Statbrowser": [
-		{name: "Change Fontsize", function: openOptionsMenu}
 	]
 }
 
@@ -1158,6 +1122,12 @@ window.onload = function () {
 	Byond.sendMessage("Update-Verbs");
 };
 
+function set_font_size(size) {
+	current_fontsize = parseInt(size);
+	statcontentdiv.style.fontSize = current_fontsize + "px";
+	tab_change(current_tab, true);
+}
+
 Byond.subscribeTo("update_spells", function (payload) {
 	spell_tabs = payload.spell_tabs;
 	var do_update = false;
@@ -1373,18 +1343,3 @@ Byond.subscribeTo("changelog_read", function(read) {
 function createOptionsButton() {
 	addPermanentTab("Options", true);
 }
-
-function openOptionsMenu() {
-	Byond.command("Open-Statbrowser-Options " + current_fontsize);
-}
-
-Byond.subscribeTo("change_fontsize", function (new_fontsize) {
-	current_fontsize = parseInt(new_fontsize);
-	if (!Byond.TRIDENT) {
-		window.hubStorage.setItem("fontsize", current_fontsize.toString());
-	} else { // TODO: Remove with 516
-		window.localStorage.setItem("fontsize", current_fontsize.toString());
-	}
-	statcontentdiv.style.fontSize = current_fontsize + "px";
-	tab_change(current_tab, true); // Redraw the current tab
-});

tgui/packages/common/storage.js

@@ -99,7 +99,8 @@ class IFrameIndexedDbBackend {
       iframe.onload = () => resolve(this);
     });
 
-    this.iframeWindow = document.body.appendChild(iframe).contentWindow;
+    this.documentElement = document.body.appendChild(iframe);
+    this.iframeWindow = this.documentElement.contentWindow;
 
     return completePromise;
   }
@@ -129,6 +130,21 @@ class IFrameIndexedDbBackend {
     this.iframeWindow.postMessage({ type: 'clear' }, '*');
   }
 
+  async ping() {
+    const promise = new Promise((resolve) => {
+      window.addEventListener('message', (message) => {
+        if (message.data === true) {
+          resolve(true);
+        }
+      });
+
+      setTimeout(() => resolve(false), 100);
+    });
+
+    this.iframeWindow.postMessage({ type: 'ping' }, '*');
+    return promise;
+  }
+
   async processChatMessages(messages) {
     this.iframeWindow.postMessage(
       { type: 'processChatMessages', messages: messages },
@@ -148,6 +164,12 @@ class IFrameIndexedDbBackend {
     this.iframeWindow.postMessage({ type: 'getChatMessages' }, '*');
     return promise;
   }
+
+  async destroy() {
+    document.body.removeChild(this.documentElement);
+    this.documentElement = null;
+    this.iframeWindow = null;
+  }
 }
 
 class IndexedDbBackend {
@@ -212,16 +234,42 @@ class IndexedDbBackend {
  * depending on the environment.
  */
 export class StorageProxy {
-  constructor(chat) {
+  constructor() {
     this.backendPromise = (async () => {
       if (!Byond.TRIDENT) {
-        if (chat) {
+        if (Byond.storageCdn && !window.hubStorage) {
           const iframe = new IFrameIndexedDbBackend();
           await iframe.ready();
-          return iframe;
+
+          if ((await iframe.ping()) === true) {
+            // Remove with 516... eventually
+            if (await iframe.get('byondstorage-migrated')) return iframe;
+
+            Byond.winset(null, 'browser-options', '+byondstorage');
+
+            await new Promise((resolve) => {
+              document.addEventListener('byondstorageupdated', async () => {
+                setTimeout(() => {
+                  const hub = new HubStorageBackend();
+                  hub
+                    .get('panel-settings')
+                    .then((settings) => iframe.set('panel-settings', settings));
+                  iframe.set('byondstorage-migrated', true);
+
+                  resolve();
+                }, 1);
+              });
+            });
+
+            return iframe;
+          }
+
+          iframe.destroy();
         }
 
         if (!testHubStorage()) {
+          Byond.winset(null, 'browser-options', '+byondstorage');
+
           return new Promise((resolve) => {
             const listener = () => {
               document.removeEventListener('byondstorageupdated', listener);

tgui/packages/common/types.ts

@@ -4,3 +4,20 @@
 // prettier-ignore
 export type ArgumentsOf<F extends Function>
   = F extends (...args: infer A) => unknown ? A : never;
+
+type ByondStorage = {
+  clear: () => void;
+  fill: (data: object) => void;
+  getItem: (item: string) => object;
+  hasitem: (item: string) => boolean;
+  removeItem: (item: string) => void;
+  setItem: (item: string, value: any) => void;
+  sync: () => void;
+};
+
+export type ByondWindow = Window &
+  typeof globalThis & {
+    hubStorage?: ByondStorage;
+    serverStorage?: ByondStorage;
+    domainStorage?: ByondStorage;
+  };

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

@@ -4,7 +4,8 @@
  * @license MIT
  */
 
-import { storage as realStorage, StorageProxy } from 'common/storage';
+import { storage } from 'common/storage';
+import type { ByondWindow } from 'common/types';
 import DOMPurify from 'dompurify';
 
 import {
@@ -38,14 +39,10 @@ import { selectChat, selectCurrentChatPage } from './selectors';
 // List of blacklisted tags
 const FORBID_TAGS = ['a', 'iframe', 'link', 'video'];
 
-const usingCdnStorage =
-  !Byond.TRIDENT && Byond.storageCdn !== 'tgui:storagecdn';
-const storage = usingCdnStorage ? new StorageProxy(true) : realStorage;
-
 const saveChatToStorage = async (store) => {
   const state = selectChat(store.getState());
 
-  if (usingCdnStorage) {
+  if (!(window as ByondWindow).hubStorage) {
     const indexedDbBackend = await storage.backendPromise;
     indexedDbBackend.processChatMessages(chatRenderer.storeQueue);
   } else {
@@ -69,7 +66,7 @@ const loadChatFromStorage = async (store) => {
   const state = await storage.get('chat-state-cm');
 
   let messages;
-  if (usingCdnStorage) {
+  if (!(window as ByondWindow).hubStorage) {
     messages = await (await storage.backendPromise).getChatMessages();
   } else {
     messages = await storage.get('chat-messages-cm');

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

@@ -516,7 +516,7 @@ class ChatRenderer {
           }
         }
       }
-      this.storeQueue.push({ ...message });
+      this.storeQueue.push({ ...message, stored: true });
       // Store the node in the message
       message.node = node;
       // Query all possible selectors to find out the message type

tgui/packages/tgui-panel/chat/types.ts

@@ -6,6 +6,7 @@ export type message = {
   times?: number;
   createdAt: number;
   avoidHighlighting?: boolean;
+  stored?: boolean;
 };
 
 export type Page = {