starting to fix horrendous UI regressions

web/client/idump.js

@@ -40,5 +40,5 @@ Deps.autorun(function() { DA("emit getinstructions");
   var forknum = Session.get("forknum");
   var clnum = Session.get("clnum");
   //TODO: This should not be a hardcoded value.
-  stream.emit('getinstructions', forknum, clnum, clnum-8, clnum+16);
+  stream.emit('getinstructions', forknum, clnum, clnum-8, clnum+24);
 });

web/client/ui.js

@@ -10,7 +10,9 @@ $(document).ready(function() {
   var memoryDef = $.Deferred();
   var straceDef = $.Deferred();
   var flatDef = $.Deferred();
+  var controlDef = $.Deferred();
   var dynamicDef = $.Deferred();
+  var idumpDef = $.Deferred();
   var timelineDef = $.Deferred();
 
   myDocker.registerPanelType('Timeline', {
@@ -21,6 +23,13 @@ $(document).ready(function() {
     },
   });
 
+  myDocker.registerPanelType('Control', {
+    onCreate: function(myPanel, options) {
+      myPanel.layout().addItem($($("#control-template").remove().text()));
+      controlDef.resolve();
+    },
+  });
+
   myDocker.registerPanelType('Dynamic', {
     onCreate: function(myPanel, options) {
       myPanel.layout().addItem($($("#dynamic-template").remove().text()));
@@ -28,6 +37,13 @@ $(document).ready(function() {
     },
   });
 
+  myDocker.registerPanelType('idump', {
+    onCreate: function(myPanel, options) {
+      myPanel.layout().addItem($($("#idump-template").remove().text()));
+      idumpDef.resolve();
+    },
+  });
+
   myDocker.registerPanelType('strace', {
     onCreate: function(myPanel, options) {
       myPanel.layout().addItem($($("#strace-template").remove().text()));
@@ -61,7 +77,12 @@ $(document).ready(function() {
   // Limit the width of the vtimeline. Scrollbar exists if it overflows.
   timelinePanel.maxSize(100, 0);
 
-  var dynamicPanel = myDocker.addPanel("Dynamic", wcDocker.DOCK.RIGHT, timelinePanel);
+  var controlPanel = myDocker.addPanel("Control", wcDocker.DOCK.RIGHT, timelinePanel);
+  controlPanel.maxSize(0, 70);
+  var idumpPanel = myDocker.addPanel("idump", wcDocker.DOCK.BOTTOM, controlPanel);
+  var dynamicPanel = myDocker.addPanel("Dynamic", wcDocker.DOCK.BOTTOM, idumpPanel);
+  dynamicPanel.maxSize(0, 82);
+
   /*var cfgPanel = myDocker.addPanel("Control Flow", wcDocker.DOCK.RIGHT, dynamicPanel);
   var flatPanel = myDocker.addPanel("Flat", wcDocker.DOCK.BOTTOM, cfgPanel, {h: 300});*/
   var memoryPanel = myDocker.addPanel("Memory", wcDocker.DOCK.BOTTOM, dynamicPanel, {h: 400});
@@ -78,7 +99,7 @@ $(document).ready(function() {
 
 
   //$.when(timelineDef, dynamicDef, cfgDef, flatDef, memoryDef, straceDef)
-  $.when(timelineDef, dynamicDef, memoryDef, straceDef)
+  $.when(timelineDef, idumpDef, memoryDef, straceDef, controlDef, dynamicDef)
     .done(function() {
       //UI elements now exist in the DOM.
       head.load(scripts);

web/index.html

@@ -30,9 +30,9 @@
   <script type="text/javascript" src="/client/compatibility/wcDocker.window-patch.js"></script>
   <script type="text/javascript" src="/client/ui.js"></script>
 
-  <script type="text/template" id="dynamic-template">
+  <script type="text/template" id="control-template">
     <div class="container fill">
-      <div class="stay-top dynamic-info">
+      <div class="dynamic-info">
         <div id="haddrline"></div>
         <div id="controls" class="fill">
           <input spellcheck="false" id="control_clnum" class="control" />
@@ -41,11 +41,17 @@
           <input spellcheck="false" id="control_daddr" class="control" />
         </div>
       </div>
+    </div>
+  </script>
+
+  <script type="text/template" id="idump-template">
       <div class="panelthing fill" id="idump"></div>
-      <div class="stay-bottom">
-        <div class="panelthing" id="regviewer"></div>
-        <div class="panelthing" id="datachanges"></div>
-      </div>
+  </script>
+
+  <script type="text/template" id="dynamic-template">
+    <div>
+      <div class="panelthing" id="regviewer"></div>
+      <div class="panelthing" id="datachanges"></div>
     </div>
   </script>
 

web/qira_layout.css

@@ -17,33 +17,21 @@ td {
 }
 
 .dynamic-info {
-    width: 100%;
-    background-color: #AAAAAA;
-}
-
-.stay-bottom {
-    position: absolute;
-    z-index: 1;
-    bottom: 0;
-}
-.stay-top {
-    position: absolute;
-    z-index: 1;
-    top: 0;
+  width: 100%;
+  background-color: #AAAAAA;
 }
 
 .splitter {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    overflow: hidden;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  overflow: hidden;
 }
 
 .fill {
-    height: 100%;
-    overflow-y: auto;
+  overflow-y: hidden;
 }
 
 /* controls */