multiple tabs for debug info window

css/ui.css

@@ -91,6 +91,18 @@ div.mem_info {
   -moz-box-shadow: 3px 3px 5px rgba(0,0,0,.5);
   box-shadow: 3px 3px 5px rgba(0,0,0,.5);
 }
+div.mem_info a {
+  color: #99ff99;
+  font-weight: bold;
+  text-decoration: underline;
+}
+div.mem_info a:hover {
+  background-color: #333399;
+  cursor: pointer;
+}
+div.mem_info a.selected {
+ color: #ffffff;
+}
 .btn_group {
   border-radius:6px;
   padding:6px;
@@ -141,7 +153,7 @@ div.twitbtn {
   right: 0%;
   padding: 10px;
 }
-a {
+a.twitbtn {
   color:#333399;
   font-weight: bold;
 }
@@ -229,7 +241,7 @@ canvas.pixelated {
   height:2em;
   border-style:none;
 }
-.selected {
+.palbtn .selected {
   border-width:2px;
   border-color:white;
   border-style:dotted;

index.html

@@ -73,7 +73,7 @@ if (window.location.host.endsWith('8bitworkshop.com')) {
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="?platform=vcs" id="item_platform_vcs">Atari VCS</a></li>
            <li><a class="dropdown-item" href="?platform=vcs-mame" id="item_platform_vcs">Atari VCS (MAME)</a></li>
-           <li><a class="dropdown-item" href="?platform=apple2" id="item_platform_apple2">Apple ][</a></li>
+           <!--<li><a class="dropdown-item" href="?platform=apple2" id="item_platform_apple2">Apple ][</a></li>-->
            <li><a class="dropdown-item" href="?platform=vicdual" id="item_platform_vicdual">VIC Dual</a></li>
            <li><a class="dropdown-item" href="?platform=mw8080bw" id="item_platform_mw8080bw">Midway 8080</a></li>
            <li><a class="dropdown-item" href="?platform=galaxian-scramble" id="item_platform_galaxian_scramble">Galaxian/Scramble Hardware</a></li>

src/baseplatform.ts

@@ -30,9 +30,6 @@ export interface Platform {
   readAddress?(addr:number) : number;
   setFrameRate?(fps:number) : void;
   getFrameRate?() : number;
-  cpuStateToLongString?(state) : string;
-  ramStateToLongString?(state) : string;
-  getRasterPosition() : {x:number, y:number};
   setupDebug?(debugfn : (state)=>void) : void;
   clearDebug?() : void;
   step?() : void;
@@ -47,6 +44,9 @@ export interface Platform {
   saveState?() : EmuState;
   getDebugCallback?() : any; // TODO
   getSP?() : number;
+
+  getDebugCategories() : string[];
+  getDebugInfo(category:string, state:EmuState) : string;
 }
 
 export interface Preset {
@@ -228,11 +228,14 @@ export abstract class Base6502Platform extends BaseFrameBasedPlatform {
   disassemble(pc:number, read:(addr:number)=>number) : DisasmLine {
     return disassemble6502(pc, read(pc), read(pc+1), read(pc+2));
   }
-  cpuStateToLongString(c:CpuState) : string {
-    return cpuStateToLongString_6502(c);
-  }
   getToolForFilename = getToolForFilename_6502;
   getDefaultExtension() { return ".a"; };
+  
+  // TODO: Memory category
+  getDebugCategories() { return ["CPU"]; }
+  getDebugInfo(category:string, state:EmuState) {
+    return cpuStateToLongString_6502(state.c);
+  }
 }
 
 function cpuStateToLongString_6502(c) : string {
@@ -409,13 +412,15 @@ export abstract class BaseZ80Platform extends BaseDebugPlatform {
       return false;
     });
   }
-  cpuStateToLongString(c) {
-    return cpuStateToLongString_Z80(c);
-  }
   getToolForFilename = getToolForFilename_z80;
   getDefaultExtension() { return ".c"; };
   // TODO
   //this.getOpcodeMetadata = function() { }
+
+  getDebugCategories() { return ["CPU"]; }
+  getDebugInfo(category:string, state:EmuState) {
+    return cpuStateToLongString_Z80(state.c);
+  }
 }
 
 function getToolForFilename_z80(fn) {

src/platform/vcs.js

@@ -125,6 +125,40 @@ var VCSPlatform = function() {
     return "dasm";
   }
   this.getDefaultExtension = function() { return ".a"; };
+
+  this.getDebugCategories = function() {
+    return ['CPU','Memory','PIA','TIA'];
+  }
+  this.getDebugInfo = function(category, state) {
+    switch (category) {
+      case 'CPU':    return this.cpuStateToLongString(state.c);
+      case 'Memory': return this.ramStateToLongString(state);
+      case 'PIA':    return this.piaStateToLongString(state.p);
+      case 'TIA':    return this.tiaStateToLongString(state.t);
+    }
+  }
+  this.piaStateToLongString = function(p) {
+    return "Timer  " + p.t + "/" + p.c + "\n";
+  }
+  this.tiaStateToLongString = function(t) {
+    var pos = this.getRasterPosition();
+    var s = '';
+    s += "H " + pos.x + "  V " + pos.y + "\n";
+    s += (t.vs?"VSYNC ":"- ") + (t.vb?"VBLANK ":"- ") + "\n";
+    s += "Playfield " + t.f + "\n";
+    // TODO? s += "    Color {color:0x" + hex(t.fc)  + "} {color:0x" + hex(t.fb) + "}\n";
+    for (var j=0; j<2; j++) {
+      var i = "p"+j;
+      s += "Player"+j+ "   " + t[i+'co'] + " " + t[i+'sc'] + " " + t[i+'ss'] + " " + (t[i+'v']?"DELAY":"") + " " + (t[i+'cc']?"CLOSECOPY":"") + " " + (t[i+'mc']?"MEDCOPY":"") + " " + (t[i+'wc']?"WIDECOPY":"") + " " + (t[i+'r']?"REFLECT":"") + "\n";
+      s += "          " + tobin(t[i]) + " " + tobin(t[i+'d']) + "\n";
+    }
+    for (var j=0; j<2; j++) {
+      var i = "m"+j;
+      s += "Missile"+j+ "  " + t[i+'co'] + " " + t[i+'sc'] + " " + t[i+'ss'] + "\n";
+    }
+    s += "Ball      " + t['bco'] + " " + t['bsc'] + " " + t['bss'] + "\n";
+    return s;
+  }
 };
 
 /// VCS TIMING ANALYSIS

src/ui.ts

@@ -60,6 +60,7 @@ var store;			// persistent store
 
 var lastDebugInfo;		// last debug info (CPU text)
 var lastDebugState;		// last debug state (object)
+var debugCategory;		// current debug category
 
 function inspectVariable(ed, name) { // TODO: ed?
   var val;
@@ -413,19 +414,33 @@ function setCompileOutput(data: WorkerResult) {
   }
 }
 
-function showMemory(state?) {
+function showDebugInfo(state?) {
   var meminfo = $("#mem_info");
-  var s = state && platform.cpuStateToLongString && platform.cpuStateToLongString(state.c);
+  var allcats = platform.getDebugCategories && platform.getDebugCategories();
+  if (allcats && !debugCategory)
+    debugCategory = allcats[0];
+  var s = state && platform.getDebugInfo && platform.getDebugInfo(debugCategory, state);
   if (s) {
-    if (platform.getRasterPosition) {
-      var pos = platform.getRasterPosition();
-      s += "H:" + pos.x + "  V:" + pos.y + "\n"; // TODO: padding
-    }
-    if (platform.ramStateToLongString) {
-      s += platform.ramStateToLongString(state);
-    }
     var hs = lastDebugInfo ? highlightDifferences(lastDebugInfo, s) : s;
     meminfo.show().html(hs);
+    var catspan = $('<span>');
+    var addCategoryLink = (cat:string) => {
+      var catlink = $('<a>'+cat+'</a>');
+      if (cat == debugCategory)
+        catlink.addClass('selected');
+      catlink.click((e) => {
+        debugCategory = cat;
+        lastDebugInfo = null;
+        showDebugInfo(lastDebugState);
+      });
+      catspan.append(catlink);
+      catspan.append('<span> </span>');
+    }
+    for (var cat of allcats) {
+      addCategoryLink(cat);
+    }
+    meminfo.append('<br>');
+    meminfo.append(catspan);
     lastDebugInfo = s;
   } else {
     meminfo.hide();
@@ -441,7 +456,7 @@ function setDebugButtonState(btnid:string, btnstate:string) {
 function setupBreakpoint(btnid? : string) {
   platform.setupDebug(function(state) {
     lastDebugState = state;
-    showMemory(state);
+    showDebugInfo(state);
     projectWindows.refresh();
     if (btnid) setDebugButtonState(btnid, "stopped");
   });
@@ -522,7 +537,7 @@ function runStepBackwards() {
 function clearBreakpoint() {
   lastDebugState = null;
   if (platform.clearDebug) platform.clearDebug();
-  showMemory();
+  showDebugInfo();
 }
 
 function resetAndDebug() {

src/util.ts

@@ -18,9 +18,18 @@ function getFilenamePrefix(s:string):string {
 }
 
 function hex(v:number, nd?:number) {
+  if (!nd) nd = 2;
+  return toradix(v,nd,16);
+}
+
+function tobin(v:number, nd?:number) {
+  if (!nd) nd = 8;
+  return toradix(v,nd,2);
+}
+
+function toradix(v:number, nd:number, radix:number) {
   try {
-    if (!nd) nd = 2;
-    var s = v.toString(16).toUpperCase();
+    var s = v.toString(radix).toUpperCase();
     while (s.length < nd)
       s = "0" + s;
     return s;