Styling tweaks, adding Inconsolata and Roboto fonts

app/_boot.js

@@ -284,6 +284,19 @@ for (let file of manifest) {
 
 // Program startup
 let run = async function() {
+
+    // Fonts
+    for (let file of Object.values(Bundle.files)) {
+        if (!file.name.endsWith(".woff2"))
+            continue;
+        let family = "/" + file.name;
+        family = family.substring(family.lastIndexOf("/") + 1, family.length - 6);
+        let font = new FontFace(family, file.data);
+        await font.load();
+        document.fonts.add(font);
+    }
+
+    // Scripts
     await Bundle.run("app/App.js");
     await Bundle.run("app/Debugger.js");
     await Bundle.run("app/toolkit/Toolkit.js");

app/theme/dark.css

@@ -6,9 +6,12 @@
     --desktop                  : #111111;
     --window-blur              : #555555;
     --window-blur-text         : #cccccc;
-    --window-close     : #ee9999;
+    --window-close-blur        : #998080;
-    --window-close-blur: #998080;
+    --window-close-blur-border : #999999;
-    --window-close-text: #ffffff;
+    --window-close-blur-text   : #ffffff;
+    --window-close-focus       : #ee9999;
+    --window-close-focus-border: #999999;
+    --window-close-focus-text  : #ffffff;
     --window-focus             : #007ACC;
-    --window-focus-text: #ffffff;
+    --window-focus-text        : #ffffff;
 }

app/theme/kiosk.css

@@ -1,15 +1,15 @@
 /* Common styles for all themes */
 
 :root {
-    --font-dialog: Arial, sans-serif;
+    --font-dialog: "Roboto-Regular", sans-serif;
-    --font-hex   : Consolas, monospace;
+    --font-hex   : "Inconsolata_SemiExpanded-Regular", monospace;
-    --font-size  : 12;
+    --font-size  : 12px;
 }
 
 :root {
     color      : var(--control-text);
     font-family: var(--font-dialog);
-    font-size  : calc(1px * var(--font-size));
+    font-size  : var(--font-size);
 }
 
 body {
@@ -160,8 +160,9 @@ body {
 
 [role="dialog"] [name="title-close"] {
     align-items    : center;
-    background     : var(--window-close);
+    background     : var(--window-close-focus);
-    box-shadow     : 0 0 0 1px var(--control-shadow);
+    box-shadow     : 0 0 0 1px var(--window-close-focus-border);
+    color          : var(--window-close-focus-text);
     display        : flex;
     height         : 13px;
     justify-content: center;
@@ -172,30 +173,23 @@ body {
 
 [role="dialog"][focus="false"] [name="title-close"] {
     background: var(--window-close-blur);
-}
+    box-shadow: 0 0 0 1px var(--window-close-blur-border);
-
+    color     : var(--window-close-blur-text);
-[role="dialog"] [name="title-close"]:focus {
-    background: var(--control-focus);
 }
 
 [role="dialog"] [name="title-close"][active] {
-    box-shadow: 0 0 0 1px var(--control-shadow);
+    box-shadow: 0 0 0 1px var(--window-close-focus-border);
     margin    : 0;
 }
 
 [role="dialog"] [name="title-close"]:after {
-    color      : var(--window-close-text);
     content    : '\00d7';
     font-size  : 13px;
     line-height: 13px;
 }
 
 [role="dialog"] [name="title-close"][active]:after {
-    color      : var(--window-close-text);
+    margin: 1px -1px -1px 1px;
-    content    : '\00d7';
-    font-size  : 13px;
-    line-height: 13px;
-    margin     : 1px -1px -1px 1px;
 }
 
 [role="dialog"] [name="client"] {
@@ -207,8 +201,17 @@ body {
 /******************************* Memory Window *******************************/
 
 [window="memory"] [name="client"] {
-    align-items: center;
+    align-items: start;
-    column-gap : calc(1px * var(--font-size) / 2);
+    column-gap : calc(var(--font-size) / 2);
+}
+
+[window="memory"] [name="client"] > *:not(:nth-child(1n+1)) {
+    text-align: center;
+}
+
+[window="memory"] [name="client"] > *:nth-child(17n+2),
+[window="memory"] [name="client"] > *:nth-child(17n+10) {
+    margin-left: calc(var(--font-size) / 2);
 }
 
 [window="memory"] [name="address"],

app/theme/light.css

@@ -6,9 +6,12 @@
     --desktop                  : #cccccc;
     --window-blur              : #cccccc;
     --window-blur-text         : #444444;
-    --window-close     : #ee9999;
+    --window-close-blur        : #d4c4c4;
-    --window-close-blur: #d4c4c4;
+    --window-close-blur-border : #999999;
-    --window-close-text: #ffffff;
+    --window-close-blur-text   : #ffffff;
+    --window-close-focus       : #ee9999;
+    --window-close-focus-border: #999999;
+    --window-close-focus-text  : #ffffff;
     --window-focus             : #80ccff;
-    --window-focus-text: #000000;
+    --window-focus-text        : #000000;
 }

app/theme/virtual.css

@@ -6,11 +6,14 @@
     --desktop                  : #000000;
     --window-blur              : #000000;
     --window-blur-text         : #aa0000;
-    --window-close     : #aa0000;
+    --window-close-blur        : #550000;
-    --window-close-blur: #550000;
+    --window-close-blur-border : #aa0000;
-    --window-close-text: #ff0000;
+    --window-close-blur-text   : #aa0000;
+    --window-close-focus       : #aa0000;
+    --window-close-focus-border: #ff0000;
+    --window-close-focus-text  : #ff0000;
     --window-focus             : #550000;
-    --window-focus-text: #ff0000;
+    --window-focus-text        : #ff0000;
 }
 
 [filter="true"] {

app/windows/MemoryWindow.js

@@ -14,14 +14,13 @@ globalThis.MemoryWindow = class MemoryWindow extends Toolkit.Window {
         
         // Configure element
         this.element.setAttribute("window", "memory");
+        this.element.addEventListener("wheel", e=>this.onwheel(e));
         
         // Configure client
-        this.client.setLayout("grid", { columns: "repeat(19, max-content)" });
+        this.client.setLayout("grid", { columns: "repeat(17, max-content)" });
         this.client.element.style.gridAutoRows = "max-content";
         this.client.setOverflow("auto", "hidden");
         this.client.addResizeListener(b=>this.refresh(b.height));
-        this.client.element.addEventListener("keydown", e=>this.onkeydown(e));
-        this.client.element.addEventListener("wheel", e=>this.onwheel(e));
         
         // Configure properties
         this.setProperty("sim", "");
@@ -151,7 +150,7 @@ globalThis.MemoryWindow = class MemoryWindow extends Toolkit.Window {
                 this.refresh();
                 break;
     
-            default: console.log(e.key); return;
+            default: return super.onkeydown(e);
         }
     
         // Configure event
@@ -186,7 +185,6 @@ MemoryWindow.Row = class Row {
         // Configure instance fields
         this.bytes   = new Array(16);
         this.client  = client;
-        this.spacers = new Array(2);
 
         // Address label
         this.address = client.add(client.newLabel({ text: "\u00a0" }));
@@ -194,11 +192,6 @@ MemoryWindow.Row = class Row {
 
         // Byte labels
         for (let x = 0; x < 16; x++) {
-            if ((x & 7) == 0) {
-                let lbl = this.spacers[x / 8] =
-                    client.add(client.newLabel({ text: "" }));
-                lbl.element.setAttribute("name", "byte");
-            }
             let lbl = this.bytes[x] =
                 client.add(client.newLabel({ text: "\u00a0" }));
             lbl.element.setAttribute("name", "byte");
@@ -215,8 +208,6 @@ MemoryWindow.Row = class Row {
         this.client.remove(this.address);
         for (let bytel of this.bytes)
             this.client.remove(bytel);
-        for (let spacer of this.spacers)
-            this.client.remove(spacer);
     }
 
     // Update the output labels with emulation state content