Permalink
Browse files

Initial cut of master/detail UI for Symbiote. Needs CSS love.

  • Loading branch information...
1 parent 549fe93 commit a535fe93a9b45f14c03f50ef2d3ce4b54766d84d @moredip committed Apr 10, 2011
@@ -7,6 +7,7 @@
<script src="jquery-ui.min.js"></script>
<script src="jquery.treeview.js"></script>
<script src="json2.js"></script>
+ <script src="underscore.js"></script>
<script src="json_tools.js"></script>
<script src="symbiote.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
@@ -248,4 +248,4 @@
// provide backwards compability
$.fn.Treeview = $.fn.treeview;
-})(jQuery);
+})(jQuery);
@@ -36,16 +36,23 @@ div#dom_dump {
font-size:0.8em;
float:left;
width:50%;
- height:400px;
overflow:auto;
}
+div#dom_dump .treeview .selected {
+ font-weight: bold;
+ color: black; /*set color to black to overwrite the red color on hover, just for the selected item*/
+}
div#dom_detail {
float:right;
width:50%;
overflow:auto;
}
+div#dom_detail tr.interesting td {
+ font-weight: bold;
+}
+
h1 {
margin:0px;
padding: 0px;
@@ -26,9 +26,11 @@ var Symbiote = {
if( rawView['accessibilityLabel'] )
title = title + ": '"+rawView['accessibilityLabel']+"'";
- var viewListItem = $("<li><span>"+title+"</span></li>"),
+ var viewListItem = $("<li><a>"+title+"</a></li>"),
subviewList = $("<ul/>");
+ $('a',viewListItem).data( 'rawView', rawView );
+
$.each( rawView.subviews, function(i,subview) {
subviewList.append( transformDumpedViewToListItem( subview ) );
});
@@ -48,7 +50,7 @@ function classClicked(link){
method_name: 'flash',
arguments: []
}
- };
+ };
Symbiote.display_chatting_popup();
$.ajax({
@@ -71,6 +73,62 @@ function classClicked(link){
}
$(document).ready(function() {
+
+ var $domDetails = $('#dom_detail'),
+ $domList = $('div#dom_dump > ul'),
+ INTERESTING_PROPERTIES = ['class', 'accessibilityLabel', 'tag', 'alpha', 'isHidden'];
+
+
+ function displayDetailsFor( view ) {
+ console.debug( 'displaying details for:', view );
+
+ $table = $('<table/>');
+
+ function tableRow( propertyName, propertyValue, cssClass ){
+ if( propertyValue === null ){
+ propertyValue = 'null';
+ }else if( typeof propertyValue === 'object' ){
+ propertyValue = JSON.stringify(propertyValue);
+ }
+
+ return $('<tr/>').addClass(cssClass)
+ .append(
+ $('<td/>').text(propertyName),
+ $('<td/>').text(propertyValue) )
+ .appendTo( $table );
+ }
+
+
+ _.each( INTERESTING_PROPERTIES, function(propertyName) {
+ if( !view.hasOwnProperty(propertyName) ){ return; }
+
+ var propertyValue = view[propertyName];
+ $table.append( tableRow( propertyName, propertyValue, 'interesting' ) );
+ });
+
+
+ _.each( _.keys(view).sort(), function(propertyName) {
+ if( propertyName == 'subviews' ){ return }
+ if( _.contains( INTERESTING_PROPERTIES, propertyName ) ){ return } // don't want to include the interesting properties twice
+
+ var propertyValue = view[propertyName];
+ $table.append( tableRow( propertyName, propertyValue ) );
+ });
+
+ $domDetails.children().remove();
+ $table.appendTo( $domDetails );
+ }
+
+ function treeElementSelected(){
+ var $this = $(this),
+ selectedView = $this.data('rawView');
+ displayDetailsFor( selectedView );
+
+ $('a',$domList).removeClass('selected');
+ $this.addClass('selected');
+ }
+
+
$("#tabs").tabs();
$('#loading').hide();
$('#dump_button').click( function(){
@@ -82,10 +140,11 @@ $(document).ready(function() {
data: '["DUMMY"]', // a bug in cocoahttpserver means it can't handle POSTs without a body
url: G.base_url + "/dump",
success: function(data) {
- var $domList = $('div#dom_dump > ul');
+ console.debug( 'dump returned', data );
+
$domList.children().remove();
$domList.append( Symbiote.transformDumpedViewToListItem( data ) );
- //$('div#dom_dump').append( JsonTools.convert_json_to_dom( data ) );
+ $('a', $domList ).bind( 'click', treeElementSelected );
$domList.treeview({
collapsed: false
});
@@ -153,5 +212,7 @@ $(document).ready(function() {
});
});
+ // do initial DOM dump straight after page has finished loading
+ $('#dump_button').click();
});
Oops, something went wrong.

0 comments on commit a535fe9

Please sign in to comment.