Ports https://github.com/tgstation/tgstation/pull/54895/

tgui/packages/tgui-panel/styles/main.scss

@@ -30,7 +30,6 @@
 @include meta.load-css('~tgui/styles/components/Dimmer.scss');
 @include meta.load-css('~tgui/styles/components/Divider.scss');
 @include meta.load-css('~tgui/styles/components/Dropdown.scss');
-@include meta.load-css('~tgui/styles/components/FatalError.scss');
 @include meta.load-css('~tgui/styles/components/Flex.scss');
 @include meta.load-css('~tgui/styles/components/Input.scss');
 @include meta.load-css('~tgui/styles/components/Knob.scss');

tgui/packages/tgui/assets.js

@@ -4,68 +4,9 @@
  * @license MIT
  */
 
-import { loadCSS as fgLoadCss } from 'fg-loadcss';
-import { createLogger } from './logging';
-
-const logger = createLogger('assets');
-
 const EXCLUDED_PATTERNS = [/v4shim/i];
-const RETRY_ATTEMPTS = 5;
-const RETRY_INTERVAL = 3000;
-
-const loadedStyleSheetByUrl = {};
 const loadedMappings = {};
 
-export const loadStyleSheet = (url, attempt = 1) => {
-  if (loadedStyleSheetByUrl[url]) {
-    return;
-  }
-  loadedStyleSheetByUrl[url] = true;
-  logger.log(`loading stylesheet '${url}'`);
-  /** @type {HTMLLinkElement} */
-  let node = fgLoadCss(url);
-  node.addEventListener('load', () => {
-    if (!isStyleSheetReallyLoaded(node, url)) {
-      node.parentNode.removeChild(node);
-      node = null;
-      loadedStyleSheetByUrl[url] = null;
-      if (attempt >= RETRY_ATTEMPTS) {
-        logger.error(`Error: Failed to load the stylesheet `
-          + `'${url}' after ${RETRY_ATTEMPTS} attempts.\nIt was either `
-          + `not found, or you're trying to load an empty stylesheet `
-          + `that has no CSS rules in it.`);
-        return;
-      }
-      setTimeout(() => loadStyleSheet(url, attempt + 1), RETRY_INTERVAL);
-      return;
-    }
-  });
-};
-
-/**
- * Checks whether the stylesheet was registered in the DOM
- * and is not empty.
- */
-const isStyleSheetReallyLoaded = (node, url) => {
-  // Method #1 (works on IE10+)
-  const styleSheet = node.sheet;
-  if (styleSheet) {
-    return styleSheet.rules.length > 0;
-  }
-  // Method #2
-  const styleSheets = document.styleSheets;
-  const len = styleSheets.length;
-  for (let i = 0; i < len; i++) {
-    const styleSheet = styleSheets[i];
-    if (styleSheet.href.includes(url)) {
-      return styleSheet.rules.length > 0;
-    }
-  }
-  // All methods failed
-  logger.warn(`Warning: stylesheet '${url}' was not found in the DOM`);
-  return false;
-};
-
 export const resolveAsset = name => (
   loadedMappings[name] || name
 );
@@ -73,7 +14,7 @@ export const resolveAsset = name => (
 export const assetMiddleware = store => next => action => {
   const { type, payload } = action;
   if (type === 'asset/stylesheet') {
-    loadStyleSheet(payload);
+    Byond.loadCss(payload);
     return;
   }
   if (type === 'asset/mappings') {
@@ -86,7 +27,10 @@ export const assetMiddleware = store => next => action => {
       const ext = name.split('.').pop();
       loadedMappings[name] = url;
       if (ext === 'css') {
-        loadStyleSheet(url);
+        Byond.loadCss(url);
+      }
+      if (ext === 'js') {
+        Byond.loadJs(url);
       }
     }
     return;

tgui/packages/tgui/backend.js

@@ -189,6 +189,9 @@ export const backendMiddleware = store => {
 
     // Resume on incoming update
     if (type === 'backend/update' && suspended) {
+      // Show the payload
+      logger.log('backend/update', payload);
+      // Signal renderer that we have resumed
       resumeRenderer();
       // Setup drag
       setupDrag();

tgui/packages/tgui/debug/middleware.js

@@ -24,7 +24,7 @@ export const debugMiddleware = store => {
     if (key.code === KEY_F12) {
       store.dispatch(toggleKitchenSink());
     }
-    if (key.ctrl && key.shift && key.code === KEY_BACKSPACE) {
+    if (key.ctrl && key.alt && key.code === KEY_BACKSPACE) {
       // NOTE: We need to call this in a timeout, because we need a clean
       // stack in order for this to be a fatal error.
       setTimeout(() => {

tgui/packages/tgui/package.json

@@ -4,8 +4,7 @@
   "version": "4.2.0",
   "dependencies": {
     "common": "workspace:*",
-    "dompurify": "^2.0.11",
-    "fg-loadcss": "^2.1.0",
+    "dompurify": "^2.0.12",
     "inferno": "^7.4.2",
     "inferno-vnode-flags": "^7.4.2",
     "marked": "^1.1.0",

tgui/packages/tgui/styles/components/FatalError.scss

@@ -1,97 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-.FatalError {
-  display: block !important;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 12px;
-  font-size: 12px;
-  font-family: Consolas, monospace;
-  color: #ffffff;
-  background-color: #0000dd;
-  z-index: 1000;
-  overflow: hidden;
-  text-align: center;
-}
-
-.FatalError__logo {
-  display: inline-block;
-  text-align: left;
-  font-size: 10px;
-  line-height: 8px;
-  position: relative;
-  margin-top: 12px;
-  top: 0;
-  left: 0;
-  animation:
-    FatalError__rainbow 2s linear infinite alternate,
-    FatalError__shadow 4s linear infinite alternate,
-    FatalError__tfmX 3s infinite alternate,
-    FatalError__tfmY 4s infinite alternate;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-.FatalError__header {
-  margin-top: 12px;
-}
-
-.FatalError__stack {
-  text-align: left;
-  white-space: pre-wrap;
-  word-break: break-all;
-  margin-top: 24px;
-  margin-bottom: 24px;
-}
-
-.FatalError__footer {
-  margin-bottom: 24px;
-}
-
-@keyframes FatalError__rainbow {
-  0% {
-    color: #ff0;
-  }
-  50% {
-    color: #0ff;
-  }
-  100% {
-    color: #f0f;
-  }
-}
-
-@keyframes FatalError__shadow {
-  0% {
-    left: -2px;
-    text-shadow: 4px 0 #f0f;
-  }
-  50% {
-    left: 0px;
-    text-shadow: 0px 0 #0ff;
-  }
-  100% {
-    left: 2px;
-    text-shadow: -4px 0 #ff0;
-  }
-}
-
-@keyframes FatalError__tfmX {
-  0% {
-    left: 15px;
-  }
-  100% {
-    left: -15px;
-  }
-}
-
-@keyframes FatalError__tfmY {
-  100% {
-    top: -15px;
-  }
-}

tgui/packages/tgui/styles/main.scss

@@ -23,7 +23,6 @@
 @include meta.load-css('./components/Dimmer.scss');
 @include meta.load-css('./components/Divider.scss');
 @include meta.load-css('./components/Dropdown.scss');
-@include meta.load-css('./components/FatalError.scss');
 @include meta.load-css('./components/Flex.scss');
 @include meta.load-css('./components/Input.scss');
 @include meta.load-css('./components/Knob.scss');