on we march ...

Philip Guo · Philip Guo · commit f4dc20d6c81d · 2011-09-22T14:02:45.000-07:00
diff --git a/edu-python.css b/edu-python.css
@@ -437,7 +437,7 @@ div.globalFrame {
   margin-bottom: 15px;
   padding: 2px;
   padding-left: 8px;
-  font-size: 12pt;
+  font-size: 11pt;
 }
 
 /* apply to the currently selected stack frame (e.g., on mouse hover) */
@@ -465,7 +465,7 @@ div.inactiveStackFrameHeader {
 
 td.stackFrameVar {
   text-align: right;
-  padding-right: 10px;
+  padding-right: 8px;
   min-width: 120px; /* to prevent excess jittering as new variables are added*/
 }
 
diff --git a/edu-python.js b/edu-python.js
@@ -239,7 +239,6 @@ function updateOutput() {
 // Renders the current trace entry (curEntry) into the div named by vizDiv
 function renderDataStructures(curEntry, vizDiv) {
   renderDataStructuresVersion1(curEntry, vizDiv);
-
   //renderDataStructuresVersion2(curEntry, vizDiv);
 }
 
@@ -392,12 +391,12 @@ function renderDataStructuresVersion2(curEntry, vizDiv) {
       var funcName = htmlspecialchars(frame[0]); // might contain '<' or '>' for weird names like <genexpr>
       var localVars = frame[1];
 
-      // the stackFrame div's id is simply its index ("stack_<index>")
+      // the stackFrame div's id is simply its index ("stack<index>")
       var divClass = (i==0) ? "stackFrame topStackFrame" : "stackFrame";
-      var divID = "stack_" + i;
+      var divID = "stack" + i;
       $(vizDiv + " #stack").append('<div class="' + divClass + '" id="' + divID + '"></div>');
 
-      var headerDivID = "stack_header_" + i;
+      var headerDivID = "stack_header" + i;
       $(vizDiv + " #stack #" + divID).append('<div id="' + headerDivID + '" class="stackFrameHeader inactiveStackFrameHeader">' + funcName + '</div>');
 
       // render locals in alphabetical order for tidiness:
@@ -411,18 +410,6 @@ function renderDataStructuresVersion2(curEntry, vizDiv) {
       }
       orderedVarnames.sort();
 
-
-/*
-    <table class="stackFrameVarTable" id="TowerOfHanoi1_table">
-      <tr>
-        <td class="stackFrameVar">a</td>
-        <!-- IE needs the div to be NON-EMPTY in order to properly
-        render the plumb endpoints!!! -->
-        <td class="stackFrameValue"><div id="TowerOfHanoi1_a">&nbsp;</div></td>
-      </tr>
-    </table>
-*/
-
       if (orderedVarnames.length > 0) {
         var tableID = divID + '_table';
         $(vizDiv + " #stack #" + divID).append('<table class="stackFrameVarTable" id="' + tableID + '"></table>');
@@ -438,15 +425,29 @@ function renderDataStructuresVersion2(curEntry, vizDiv) {
           else {
             curTr.find("td.stackFrameVar").html(varname);
           }
-          renderData(val, curTr.find("td.stackFrameValue"));
+
+          // render primitives inline and compound types on the heap
+          if (isPrimitiveType(val)) {
+            renderData(val, curTr.find("td.stackFrameValue"));
+          }
+          else {
+            // add a stub so that we can connect it with a connector later.
+            // IE needs this div to be NON-EMPTY in order to properly
+            // render jsPlumb endpoints, so that's why we add an "&nbsp;"!
+
+            // TODO: make sure varname doesn't contain any weird
+            // characters that are illegal for CSS ID's ...
+            var varDivID = divID + '__' + varname;
+            curTr.find("td.stackFrameValue").append('<div id="' + varDivID + '">&nbsp;</div>');
+          }
         });
       }
     });
   }
 
 
   // render globals LAST:
-  $(vizDiv + " #stack").append('<div class="globalFrame" id="globals"><div class="stackFrameHeader inactiveStackFrameHeader">Global variables</div></div>');
+  $(vizDiv + " #stack").append('<div class="globalFrame" id="globals"><div id="globals_header" class="stackFrameHeader inactiveStackFrameHeader">Global variables</div></div>');
 
   var nonEmptyGlobals = false;
   var curGlobalFields = {};
@@ -508,7 +509,21 @@ function renderDataStructuresVersion2(curEntry, vizDiv) {
         tbl.append('<tr><td class="stackFrameVar"></td><td class="stackFrameValue"></td></tr>');
         var curTr = tbl.find('tr:last');
         curTr.find("td.stackFrameVar").html(varname);
-        renderData(val, curTr.find("td.stackFrameValue"));
+
+        // render primitives inline
+        if (isPrimitiveType(val)) {
+          renderData(val, curTr.find("td.stackFrameValue"));
+        }
+        else {
+          // add a stub so that we can connect it with a connector later.
+          // IE needs this div to be NON-EMPTY in order to properly
+          // render jsPlumb endpoints, so that's why we add an "&nbsp;"!
+
+          // TODO: make sure varname doesn't contain any weird
+          // characters that are illegal for CSS ID's ...
+          var varDivID = 'global__' + varname;
+          curTr.find("td.stackFrameValue").append('<div id="' + varDivID + '">&nbsp;</div>');
+        }
       }
     });
   }
@@ -520,6 +535,12 @@ function renderDataStructuresVersion2(curEntry, vizDiv) {
 
 }
 
+function isPrimitiveType(obj) {
+  var typ = typeof obj;
+  return ((obj == null) || (typ == "number") || (typ == "boolean") || (typ == "string"));
+}
+
+
 // render the JS data object obj inside of jDomElt,
 // which is a jQuery wrapped DOM object
 // (obj is in a format encoded by cgi-bin/pg_encoder.py)

Original file line number	Diff line number	Diff line change
`@@ -437,7 +437,7 @@ div.globalFrame {`
`437`	`437`	`margin-bottom: 15px;`
`438`	`438`	`padding: 2px;`
`439`	`439`	`padding-left: 8px;`
`440`		`- font-size: 12pt;`
	`440`	`+ font-size: 11pt;`
`441`	`441`	`}`
`442`	`442`
`443`	`443`	`/* apply to the currently selected stack frame (e.g., on mouse hover) */`
`@@ -465,7 +465,7 @@ div.inactiveStackFrameHeader {`
`465`	`465`
`466`	`466`	`td.stackFrameVar {`
`467`	`467`	`text-align: right;`
`468`		`- padding-right: 10px;`
	`468`	`+ padding-right: 8px;`
`469`	`469`	`min-width: 120px; /* to prevent excess jittering as new variables are added*/`
`470`	`470`	`}`
`471`	`471`