collapse/expand members of types

Author: Dorothy Chen

app/app.py

@@ -415,6 +415,5 @@ def get_types():
     executable = executables[filename]
     return jsonify(executable.get_type_info(addr))
 
-# debug=True auto reloads whenever server code changes
 if __name__ == '__main__':
     app.run(debug=True, port=8000)

app/die_information.py

@@ -148,7 +148,6 @@ def __init__(self, die):
             subtype = "(cannot find the type)"
 
         members = getMembers(die)
-
         vtable = getVtable(die)
 
         dict.__init__(self, 
@@ -240,7 +239,6 @@ def getVtable(typeDie):
             elem_location = child.attributes.get('DW_AT_vtable_elem_location')
             if elem_location.form == 'DW_FORM_exprloc':
                 loc_pieces = describe_DWARF_expr(elem_location.value, child.cu.structs)
-                print loc_pieces, child.attributes["DW_AT_name"].value
                 index = loc_pieces[0]
                 if child.attributes.get('DW_AT_linkage_name'):
                     name = child.attributes.get('DW_AT_linkage_name').value
@@ -253,4 +251,4 @@ def getVtable(typeDie):
                 print 'Cannot currently handle form DW_FORM_loclistptr'
             else:
                 print 'Unexpected form {} for vtable_elem_location'.format(elem_location.form)
-    return vtable
+    return vtable

app/executable.py

@@ -578,7 +578,7 @@ def get_type_info(self, addr):
                 if dieInfo:
                     type_dies[dieInfo['name']] = dieInfo
         self.type_dies[CU.cu_offset] = type_dies
-        return type_dies 
+        return type_dies
 
 def printChildren(die):
     for child in die.iter_children():

app/static/js/disassemble.js

@@ -57,6 +57,8 @@ var type_ctrl = {
   selectedTypeClicked: selectedTypeClicked,
   showTypeSearchResults: true,
   queryString: "",
+  expandMember: expandMember,
+  collapseMember: collapseMember,
 };
 
 rivets.formatters.displayData = function(data) {
@@ -463,16 +465,33 @@ function get_function_assembly() {
       addr: parseInt(assembly.contents[0]['address'], 16)
     })
     .done(function(data) {
-      console.log("Done loading type data.");
       typeData = data;
     })
     .fail(function() {
       console.log("Unable to load type data.");
       typeData = [];
     })
     .always(function() {
+      // add member expandable, mark top-level as default expanded
+      Object.keys(typeData).forEach(function(typeName) {
+        var members = typeData[typeName]["members"];
+        members = members.map(function(member, i) {
+          if (member.depth == 0) {
+            member["expanded"] = true;
+          }
+          if (i == members.length - 1) {
+            member["expandable"] = false;
+          }
+          else {
+            var memberHasChildren = members[i+1]["depth"] > member["depth"];
+            member["expandable"] = memberHasChildren;
+          }
+          return member;
+        });
+      });
+
       type_ctrl.typeData = typeData;
-      
+
       // For some FASCINATING, unknown reason, despite defaulting to true, the related data will
       // appear as though showTypeSearchResults were false. This can be fixed by setting it to false
       // then back to true.
@@ -521,9 +540,6 @@ function wrapNumbersInElem(elem) {
   else if (charOne >= '0' && charTwo <= '9') {
     elem.setAttribute('value', 'twosCompDec64');
   }
-  else {
-    console.log("Unknown data type:");
-    console.log(elem)  }
 }
 
 // wrap registers for register tracking

app/static/js/disassembly_analysis.js

@@ -311,12 +311,12 @@ rivets.formatters.formatIndentation = function(depth) {
 
 function _selectedTypeClicked(typeName) {
   var typeData = type_ctrl.typeData[typeName];
-    if (typeData) {
-      type_ctrl.selected_type = typeData;
-      type_ctrl.showTypeSearchResults = false;
-    }
-    else
-      return;  
+  if (typeData) {
+    type_ctrl.selected_type = typeData;
+    type_ctrl.showTypeSearchResults = false;
+  }
+  else
+    return;  
 }
 
 function memberTypeClicked(e, model) {
@@ -361,15 +361,8 @@ $('#type-name-input').on('keyup', function() {
       newRes.appendChild(innerSpan);
       $(newRes).click(function(event) {
         var typeName = event.delegateTarget.getAttribute('data-name');
-        var typeData = type_ctrl.typeData[typeName];
-        if (typeData) {
-          type_ctrl.selected_type = typeData;
-          type_ctrl.showTypeSearchResults = false; 
-        }
-        else
-          return;
+        _selectedTypeClicked(typeName);
       });
-
       dataTypesEl.appendChild(newRes);
     }
   }
@@ -387,9 +380,65 @@ rivets.formatters.getQueryResults = function(query) {
     }
   }
   return queryResults;
-  
 };
 
-rivets.binders.querystring = function(el, queryString) {
-    console.log(queryString);
-}
+
+rivets.formatters.endOfLine = function(member) {
+  return !member.expandable && !member.collapsable;
+}
+
+function expandMember(event, model) {
+  var members = type_ctrl.selected_type.members;
+  var thisDepth = model.member.depth;
+  var i = model.index + 1;
+  while (members[i].depth > thisDepth) {
+    if (members[i].depth == thisDepth + 1) {
+      members[i].expanded = true;
+    }
+    i += 1;
+  members[model.index].expandable = false;
+  members[model.index].collapsable = true;
+  }
+}
+
+function collapseMember(event, model) {
+  var members = type_ctrl.selected_type.members;
+  var thisDepth = model.member.depth;
+  var i = model.index + 1;
+  while (members[i].depth > thisDepth) {
+    members[i].expanded = false;
+    if (members[i].collapsable) {
+      members[i].expandable = true;
+      members[i].collapsable = false;
+    }
+    i += 1;
+    members[model.index].expandable = true;
+    members[model.index].collapsable = false;
+  }  
+}
+
+// handlers for collapsing/expanding all
+$(".collapse-all").on("click", function() {
+  type_ctrl.selected_type.members.forEach(function(member) {
+    if (member.collapsable) {
+      member.collapsable = false;
+      member.expandable = true;
+    }
+    member.expanded = member.depth == 0;
+  });
+});
+
+$(".expand-all").on("click", function() {
+  type_ctrl.selected_type.members.forEach(function(member) {
+    if (member.expandable) {
+      member.collapsable = true;
+      member.expandable = false;
+    }    
+    member.expanded = true;
+  });
+});
+
+
+
+
+

app/static/scss/disassemble.scss

@@ -561,18 +561,14 @@ $jump-color1: rgb(255,245,157);
 	margin-bottom: 15px;
 }
 
+.type-search {
+	height: 100%;
+}
+
 input#type-name-input {
 	font-size: 1.2em !important;
 }
 
-// input#type-name-input, 
-// input#type-name-input:focus + .bottom-border {
-// 	width: 80% !important;
-// }
-// .bottom-border {
-// 	width: 0% !important;
-// }
-
 .type {
 	text-decoration: none;
 	color: black;
@@ -610,30 +606,47 @@ $type-bg: rgb(178,223,219);
 }
 
 #selected-type {
+	height: calc(100% - 38px);
 	overflow-y: scroll;
-}
-
-.type-attr, .members {
-	font-weight: bold;
-}
+	
+	.type-attr, .members {
+		font-weight: bold;
+		font-family: "Open Sans";
+		span {
+			font-weight: normal;
+			font-family: "Space Mono", monospace;
+		}
+	}
 
-.type-attr {
-	display: block;
-	span {
-		font-weight: normal;
-		font-family: "Space Mono", monospace;
+	.type-attr {
+		display: block;
 	}
-}
 
-li.type-attr {
-	margin-bottom: 3px;
-}
+	.members {
+		.collapse-all, .expand-all {
+			font-family: "Open Sans";
+			background-color: rgb(248,187,208);
+			padding-left: 8px;
+			padding-right: 8px;
+			margin-right: 10px;
+
+			cursor: pointer;
+		}
+		.collapse-all:hover, .expand-all:hover {
+			background-color: rgb(244,143,177);
+		}
 
-.type-member-attribute {
-	display: block;
+		.expand i, .collapse i {
+			cursor: pointer;
+		}		
+
+		li.member {
+			list-style-type: none;
+			margin-bottom: 3px;
+			.name {
+				color: #6699ff;
+			}
+		}
+	}
 }
 
-.name {
-	font-family: "Space Mono", monospace;
-	color: #6699ff;
-}

app/templates/disassemble.jinja.html

@@ -11,7 +11,7 @@
   <link rel="stylesheet" href="static/css/colorbox.css">
   {% assets "disassemble_css" %} <link rel="stylesheet" href="{{ ASSET_URL }}"> {% endassets %}
   <link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">
-  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
   <script src="https://use.fontawesome.com/d826d0fa82.js"></script>
   <title>Disasm | {{ func_name }}</title>
 </head>

app/templates/type_search.partial.html

@@ -16,15 +16,31 @@
   </div>
   <div class="type-attr">Tag: <span rv-text="type_ctrl.selected_type.tag"></span></div>
   <div class="members">Members:
+    <span class='change-all collapse-all'>collapse all</span>
+    <span class='change-all expand-all'>expand all</span>
     <ul>
-      <li class="type-attr"
-        rv-each-member="type_ctrl.selected_type.members">
+      <li class="member"
+        rv-each-member="type_ctrl.selected_type.members"
+        rv-show="member.expanded">
         <span class="indent" rv-text="member.depth | formatIndentation"></span>
+        
+        <span class='expand' rv-show="member.expandable">
+          <i class="fa fa-plus-square-o" aria-hidden="true"
+            rv-on-click="type_ctrl.expandMember"></i>
+        </span>
+        <span class='collapse' rv-show="member.collapsable">
+          <i class="fa fa-minus-square-o" aria-hidden="true"
+            rv-on-click="type_ctrl.collapseMember"></i>
+        </span>
+        <span rv-show="member | endOfLine" style="opacity:0;">
+          <i class="fa fa-square-o" aria-hidden="true"></i>
+        </span>
+
         <!-- Offset -->
         <span class="offset"
-        rv-show="member.offset | displayData">&lt;+{member.offset}&gt;</span>
+        rv-show="member.offset | displayData">&lt;{member.offset}&gt;</span>
         <span class="offset-unknown"
-        rv-hide="member.offset | displayData">(offset unknown)</span>
+        rv-hide="member.offset | displayData">&lt;?&gt;</span>
         <!-- Member name -->
         <span class="name"
         rv-show="member.name | displayData"