Added postcss-nesting support.

package.json

@@ -78,6 +78,8 @@
     "@playwright/test": "^1.39.0",
     "@types/react-window": "^1.8.5",
     "jest-canvas-mock": "^2.5.2",
+    "postcss": "^8.4.31",
+    "postcss-nesting": "^12.0.1",
     "vite-plugin-pwa": "^0.16.5"
   }
 }

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    'postcss-nesting': { /* plugin options */ },
+  },
+}

src/Components/BorderedSection.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import SvgIcon from "@mui/material/SvgIcon";
+import styles from "./BorederedSection.module.css";
+
+import { ReactElement } from "react";
+import { SvgIconTypeMap } from "@mui/material/SvgIcon";
+import { OverridableComponent } from "@mui/material/OverridableComponent";
+
+type BorderedSectionProps = {
+  icon?: OverridableComponent<SvgIconTypeMap<{}, "svg">> & { props: { className?: string } };
+  title?: string;
+  children: React.ReactNode;
+};
+
+function BorderedSection({ icon, title, children }: BorderedSectionProps): JSX.Element {
+    return (
+        <div className={styles.mainContainer}>
+            <div className={styles.header}>
+                <div className={styles.headerBorderBefore}></div>
+                {(icon || title) && (
+                    <div className={styles.headerTitle}>
+                        {icon && <SvgIcon component={icon} />}
+                        {title && <span className={styles.title}>{title}</span>}
+                    </div>
+                )}
+                <div className={styles.headerBorderAfter}></div>
+            </div>
+            <div className={styles.childrenContainer}>{children}</div>
+        </div>
+    );
+}
+
+export default BorderedSection;

src/Components/BorederedSection.module.css

@@ -0,0 +1,53 @@
+:root {
+  --border-color: #b2b2b2;
+}
+
+.mainContainer {
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+
+    border-left: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
+    border-radius: 5px;
+    margin: 1em;
+
+    .childrenContainer {
+        padding: 1em;
+    }
+
+    .header {
+        display: flex;
+        flex-direction: row;
+        width: 100% !important;
+
+        .headerBorderBefore {
+            border-top: 1px solid var(--border-color);
+            width: 1em;
+            border-top-left-radius: 5px;
+        }
+
+        .headerTitle {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-items: center;
+            gap: 0.25em;
+            width: fit-content;
+            height: 2em;
+            margin: -1em 0.5em 0em 0.5em;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            font-size: 1em;
+            font-weight: 600;
+        }
+
+        .headerBorderAfter {
+            border-top: 1px solid var(--border-color);
+            width: 1em;
+            flex-grow: 2;
+            border-top-right-radius: 5px;
+        }
+    }
+}

src/FakePorts/FakePortsController.tsx

@@ -332,7 +332,7 @@ export default class FakePortsController {
     this.fakePorts.push(
       new FakePort(
         'bytes 0x00-0xFF, 5chars/s',
-        'Sends all bytes from 0x00 to 0xFF, one by one, at a rate of 5 characters per second. Good for testing unprintable characters.',
+        'Sends all bytes from 0x00 to 0xFF, one by one, at a rate of 5 characters per second. Good for testing unprintable characters. Sets the char size to 30px.',
         () => {
           app.settings.dataProcessing.visibleData.fields.ansiEscapeCodeParsingEnabled.value =
             false;
@@ -341,8 +341,7 @@ export default class FakePortsController {
           app.settings.dataProcessing.applyChanges();
           let testCharIdx = 0;
           const intervalId = setInterval(() => {
-            // this.parseRxData(Uint8Array.from([ testCharIdx ]));
-            app.parseRxData(Uint8Array.from([0x08]));
+            app.parseRxData(Uint8Array.from([ testCharIdx ]));
             testCharIdx += 1;
             if (testCharIdx === 256) {
               testCharIdx = 0;

src/Homepage/HomepageView.tsx

@@ -1,16 +1,17 @@
 import { observer } from "mobx-react-lite";
-import { ThemeProvider, createTheme } from "@mui/material/styles";
 import CssBaseline from "@mui/material/CssBaseline";
 import {
   Box,
   Button,
   IconButton,
   Typography,
+  // Grid,
 } from "@mui/material";
-import Grid from "@mui/material/Unstable_Grid2";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
 import TerminalIcon from "@mui/icons-material/Terminal";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import TwitterIcon from '@mui/icons-material/Twitter';
+import Grid from "@mui/material/Unstable_Grid2";
 
 import GitHubReadmeLogo from "./github-readme-logo.png";
 import AnsiEscapeCodeColours from "./ansi-escape-code-colours.gif";

src/Settings/DataProcessingSettingsView.tsx

@@ -18,6 +18,7 @@ import {
   DataViewConfiguration,
   dataViewConfigEnumToDisplayName,
 } from 'src/Settings/DataProcessingSettings';
+import BorderedSection from 'src/Components/BorderedSection';
 
 interface Props {
   app: App;
@@ -294,6 +295,9 @@ function DataProcessingView(props: Props) {
       >
         Apply
       </Button>
+
+      <BorderedSection title="Advanced"><div>test</div></BorderedSection>
+
     </div>
   );
 }

src/Terminal/SingleTerminal/SingleTerminalView.module.css

@@ -69,7 +69,7 @@ it */
 }
 
 @font-face {
-  font-family: testFont;
+  font-family: ConsolasControlChars;
   src: url(../../fonts/ConsolasControlChars-Regular.woff2);
 }
 
@@ -82,8 +82,8 @@ it */
   "white-space: nowrap" worked, but made spaces collapse when flex was applied, as flex turns all children into
   block elements. "whitespace: pre" prevents that. */
   white-space: pre;
-  /* font-family: testFont, Consolas, monospace; */
-  font-family: Consolas, monospace;
+  font-family: ConsolasControlChars, Consolas, monospace;
+  /* font-family: Consolas, monospace; */
 
   /* This is to center the chars in the middle of their row, prevents clipping of the cursor when on the first row */
   display: flex;