fix diagnostic file

dist/engineStyle.bundle.js

@@ -1,2 +1,2 @@
-!function(n){function t(t){for(var e,i,f=t[0],c=t[1],l=t[2],a=0,s=[];a<f.length;a++)i=f[a],Object.prototype.hasOwnProperty.call(r,i)&&r[i]&&s.push(r[i][0]),r[i]=0;for(e in c)Object.prototype.hasOwnProperty.call(c,e)&&(n[e]=c[e]);for(p&&p(t);s.length;)s.shift()();return u.push.apply(u,l||[]),o()}function o(){for(var n,t=0;t<u.length;t++){for(var o=u[t],e=!0,f=1;f<o.length;f++){var c=o[f];0!==r[c]&&(e=!1)}e&&(u.splice(t--,1),n=i(i.s=o[0]))}return n}var e={},r={2:0},u=[];function i(t){if(e[t])return e[t].exports;var o=e[t]={i:t,l:!1,exports:{}};return n[t].call(o.exports,o,o.exports,i),o.l=!0,o.exports}i.m=n,i.c=e,i.d=function(n,t,o){i.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:o})},i.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},i.t=function(n,t){if(1&t&&(n=i(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var o=Object.create(null);if(i.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var e in n)i.d(o,e,function(t){return n[t]}.bind(null,e));return o},i.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return i.d(t,"a",t),t},i.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},i.p="";var f=window.webpackJsonp=window.webpackJsonp||[],c=f.push.bind(f);f.push=t,f=f.slice();for(var l=0;l<f.length;l++)t(f[l]);var p=c;u.push([1043,0]),o()}({1043:function(n,t,o){"use strict";o.r(t);o(1044),o(1046),o(1048),o(1050),o(1052),o(1054),o(1056),o(1058),o(1060),o(1062),o(1064),o(1066),o(1068),o(1070),o(1072),o(1074),o(1076),o(1078),o(1080),o(1082),o(1084),o(1086),o(1088),o(1090),o(1092),o(1094),o(1096),o(1098),o(1100),o(1102),o(1104)},1046:function(n,t,o){},1048:function(n,t,o){},1050:function(n,t,o){},1052:function(n,t,o){},1054:function(n,t,o){},1056:function(n,t,o){},1058:function(n,t,o){},1060:function(n,t,o){},1062:function(n,t,o){},1064:function(n,t,o){},1066:function(n,t,o){},1068:function(n,t,o){},1070:function(n,t,o){},1072:function(n,t,o){},1074:function(n,t,o){},1076:function(n,t,o){},1078:function(n,t,o){},1080:function(n,t,o){},1082:function(n,t,o){},1084:function(n,t,o){},1086:function(n,t,o){},1088:function(n,t,o){},1090:function(n,t,o){},1092:function(n,t,o){},1094:function(n,t,o){},1096:function(n,t,o){},1098:function(n,t,o){},1100:function(n,t,o){},1102:function(n,t,o){},1104:function(n,t,o){}});
+!function(n){function t(t){for(var e,i,f=t[0],c=t[1],l=t[2],a=0,s=[];a<f.length;a++)i=f[a],Object.prototype.hasOwnProperty.call(r,i)&&r[i]&&s.push(r[i][0]),r[i]=0;for(e in c)Object.prototype.hasOwnProperty.call(c,e)&&(n[e]=c[e]);for(p&&p(t);s.length;)s.shift()();return u.push.apply(u,l||[]),o()}function o(){for(var n,t=0;t<u.length;t++){for(var o=u[t],e=!0,f=1;f<o.length;f++){var c=o[f];0!==r[c]&&(e=!1)}e&&(u.splice(t--,1),n=i(i.s=o[0]))}return n}var e={},r={2:0},u=[];function i(t){if(e[t])return e[t].exports;var o=e[t]={i:t,l:!1,exports:{}};return n[t].call(o.exports,o,o.exports,i),o.l=!0,o.exports}i.m=n,i.c=e,i.d=function(n,t,o){i.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:o})},i.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},i.t=function(n,t){if(1&t&&(n=i(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var o=Object.create(null);if(i.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var e in n)i.d(o,e,function(t){return n[t]}.bind(null,e));return o},i.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return i.d(t,"a",t),t},i.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},i.p="";var f=window.webpackJsonp=window.webpackJsonp||[],c=f.push.bind(f);f.push=t,f=f.slice();for(var l=0;l<f.length;l++)t(f[l]);var p=c;u.push([1047,0]),o()}({1047:function(n,t,o){"use strict";o.r(t);o(1048),o(1050),o(1052),o(1054),o(1056),o(1058),o(1060),o(1062),o(1064),o(1066),o(1068),o(1070),o(1072),o(1074),o(1076),o(1078),o(1080),o(1082),o(1084),o(1086),o(1088),o(1090),o(1092),o(1094),o(1096),o(1098),o(1100),o(1102),o(1104),o(1106),o(1108)},1050:function(n,t,o){},1052:function(n,t,o){},1054:function(n,t,o){},1056:function(n,t,o){},1058:function(n,t,o){},1060:function(n,t,o){},1062:function(n,t,o){},1064:function(n,t,o){},1066:function(n,t,o){},1068:function(n,t,o){},1070:function(n,t,o){},1072:function(n,t,o){},1074:function(n,t,o){},1076:function(n,t,o){},1078:function(n,t,o){},1080:function(n,t,o){},1082:function(n,t,o){},1084:function(n,t,o){},1086:function(n,t,o){},1088:function(n,t,o){},1090:function(n,t,o){},1092:function(n,t,o){},1094:function(n,t,o){},1096:function(n,t,o){},1098:function(n,t,o){},1100:function(n,t,o){},1102:function(n,t,o){},1104:function(n,t,o){},1106:function(n,t,o){},1108:function(n,t,o){}});
 //# sourceMappingURL=engineStyle.bundle.js.map

src/Diagnostic/FileDiagnosticModal.tsx

@@ -0,0 +1,119 @@
+import React from "react";
+import { AllServers } from "../Server/AllServers";
+import { Modal } from "../ui/React/Modal";
+import { numeralWrapper } from "../ui/numeralFormat";
+
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import Typography from "@material-ui/core/Typography";
+import Paper from "@material-ui/core/Paper";
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import AccordionDetails from "@material-ui/core/AccordionDetails";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+
+interface IServerProps {
+  ip: string;
+}
+
+export function ServerAccordion(props: IServerProps): React.ReactElement {
+  const server = AllServers[props.ip];
+  let totalSize = 0;
+  for (const f of server.scripts) {
+    totalSize += f.code.length;
+  }
+
+  for (const f of server.textFiles) {
+    totalSize += f.text.length;
+  }
+
+  if (totalSize === 0) {
+    return <></>;
+  }
+
+  interface File {
+    name: string;
+    size: number;
+  }
+
+  const files: File[] = [];
+
+  for (const f of server.scripts) {
+    files.push({ name: f.filename, size: f.code.length });
+  }
+
+  for (const f of server.textFiles) {
+    files.push({ name: f.fn, size: f.text.length });
+  }
+
+  files.sort((a: File, b: File): number => b.size - a.size);
+
+  return (
+    <Accordion TransitionProps={{ unmountOnExit: true }}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography>
+          {server.hostname} ({numeralWrapper.formatBigNumber(totalSize)}b)
+        </Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <TableContainer component={Paper}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell>
+                  <Typography>Filename</Typography>
+                </TableCell>
+                <TableCell align="right">
+                  <Typography>Size</Typography>
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {files.map((file: File) => (
+                <TableRow key={file.name}>
+                  <TableCell component="th" scope="row">
+                    <Typography>{file.name}</Typography>
+                  </TableCell>
+                  <TableCell align="right">
+                    <Typography>{numeralWrapper.formatBigNumber(file.size)}b</Typography>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+        <ul></ul>
+      </AccordionDetails>
+    </Accordion>
+  );
+}
+
+interface IProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function FileDiagnosticModal(props: IProps): React.ReactElement {
+  const ips: string[] = [];
+  for (const ip of Object.keys(AllServers)) {
+    ips.push(ip);
+  }
+
+  return (
+    <Modal open={props.open} onClose={props.onClose}>
+      <>
+        <Typography>
+          Welcome to the file diagnostic! If your save file is really big it's likely because you have too many
+          text/scripts. This tool can help you narrow down where they are.
+        </Typography>
+        {ips.map((ip: string) => (
+          <ServerAccordion key={ip} ip={ip} />
+        ))}
+      </>
+    </Modal>
+  );
+}

src/Diagnostic/FileDiagnosticPopup.tsx

@@ -1,79 +0,0 @@
-import React from "react";
-import { AllServers } from "../Server/AllServers";
-import { BBAccordion } from "../ui/React/BBAccordion";
-import { numeralWrapper } from "../ui/numeralFormat";
-
-interface IServerProps {
-  ip: string;
-}
-
-export function ServerAccordion(props: IServerProps): React.ReactElement {
-  const server = AllServers[props.ip];
-  let totalSize = 0;
-  for (const f of server.scripts) {
-    totalSize += f.code.length;
-  }
-
-  for (const f of server.textFiles) {
-    totalSize += f.text.length;
-  }
-
-  if (totalSize === 0) {
-    return <></>;
-  }
-
-  interface File {
-    name: string;
-    size: number;
-  }
-
-  const files: File[] = [];
-
-  for (const f of server.scripts) {
-    files.push({ name: f.filename, size: f.code.length });
-  }
-
-  for (const f of server.textFiles) {
-    files.push({ name: f.fn, size: f.text.length });
-  }
-
-  files.sort((a: File, b: File): number => b.size - a.size);
-
-  return (
-    <BBAccordion
-      headerContent={
-        <>
-          {server.hostname} ({numeralWrapper.formatBigNumber(totalSize)}b)
-        </>
-      }
-      panelContent={
-        <ul>
-          {files.map((file: File) => (
-            <li key={file.name}>
-              {file.name}: {numeralWrapper.formatBigNumber(file.size)}b
-            </li>
-          ))}
-        </ul>
-      }
-    />
-  );
-}
-
-export function FileDiagnosticPopup(): React.ReactElement {
-  const ips: string[] = [];
-  for (const ip of Object.keys(AllServers)) {
-    ips.push(ip);
-  }
-
-  return (
-    <>
-      <p>
-        Welcome to the file diagnostic! If your save file is really big it's likely because you have too many
-        text/scripts. This tool can help you narrow down where they are.
-      </p>
-      {ips.map((ip: string) => (
-        <ServerAccordion key={ip} ip={ip} />
-      ))}
-    </>
-  );
-}

src/engine.jsx

@@ -69,7 +69,6 @@ import { Reputation } from "./ui/React/Reputation";
 import { ActiveScriptsRoot } from "./ui/ActiveScripts/Root";
 import { MainMenuLinks } from "./ui/MainMenu/Links";
 
-import { FileDiagnosticPopup } from "./Diagnostic/FileDiagnosticPopup";
 import { createPopup } from "./ui/React/createPopup";
 
 import { dialogBoxCreate } from "../utils/DialogBox";

src/ui/React/GameOptionsRoot.tsx

@@ -16,8 +16,7 @@ import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
 import Link from "@material-ui/core/Link";
 import Tooltip from "@material-ui/core/Tooltip";
-import { Modal } from "../../ui/React/Modal";
+import { FileDiagnosticModal } from "../../Diagnostic/FileDiagnosticModal";
-import { FileDiagnosticPopup } from "../../Diagnostic/FileDiagnosticPopup";
 
 import { Settings } from "../../Settings/Settings";
 
@@ -513,9 +512,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
           </Box>
         </Grid>
       </Grid>
-      <Modal open={diagnosticOpen} close={() => setDiagnosticOpen(false)}>
+      <FileDiagnosticModal open={diagnosticOpen} onClose={() => setDiagnosticOpen(false)} />
-        <FileDiagnosticPopup />
-      </Modal>
     </div>
   );
 }

src/ui/React/Modal.tsx

@@ -16,14 +16,22 @@ const useStyles = makeStyles((theme: Theme) =>
       border: "2px solid " + theme.palette.primary.main,
       boxShadow: theme.shadows[5],
       padding: theme.spacing(2, 4, 3),
+      maxWidth: "80%",
+      maxHeight: "80%",
+      overflow: "auto",
+      "&::-webkit-scrollbar": {
+        // webkit
+        display: "none",
+      },
+      scrollbarWidth: "none", // firefox
     },
   }),
 );
 
 interface IProps {
   open: boolean;
-  close: () => void;
+  onClose: () => void;
-  children: JSX.Element[] | JSX.Element;
+  children: JSX.Element[] | JSX.Element | React.ReactElement[] | React.ReactElement;
 }
 
 export const Modal = (props: IProps): React.ReactElement => {
@@ -31,12 +39,12 @@ export const Modal = (props: IProps): React.ReactElement => {
   return (
     <M
       open={props.open}
-      onClose={props.close}
+      onClose={props.onClose}
       closeAfterTransition
       className={classes.modal}
       BackdropComponent={Backdrop}
       BackdropProps={{
-        timeout: 500,
+        timeout: 100,
       }}
     >
       <Fade in={props.open}>