diff --git a/etc/Settings.plist b/etc/Settings.plist
index 2b531e8..64e724a 100644
--- a/etc/Settings.plist
+++ b/etc/Settings.plist
@@ -2,15 +2,35 @@
+
+ DefaultValue
+
+ Key
+ sort_keys
+ Title
+ Sort Object Keys
+ Type
+ CheckBox
+
+
+ DefaultValue
+
+ Key
+ fold_strings
+ Title
+ Auto-Fold Long Strings
+ Type
+ CheckBox
+
DefaultValue
-
+ 512
Key
- sort_keys
+ long_string_length
Title
- Sort Object Keys
+ "Long String" Threshold (bytes)
Type
- CheckBox
+ TextField
diff --git a/src/formattedJSON.js b/src/formattedJSON.js
index 5f2f349..3903a71 100644
--- a/src/formattedJSON.js
+++ b/src/formattedJSON.js
@@ -169,10 +169,12 @@
* renderArray( [] ) => Element
*/
renderArray: function( a ) {
- var list = this._html( '
' );
+ var list = this._html( '
' );
+
for( var i = 0, ii = a.length; i < ii; i++ ) {
this._append( list, this._append( this._html( "" ), this.render( a[i] ) ) );
}
+
return this._append(
this._html( '' ),
this._html(
@@ -189,7 +191,7 @@
* renderObject( {} ) => Element
*/
renderObject: function( obj ) {
- var keys = [], list = this._html( "
" );
+ var keys = [], list = this._html( '
' );
// gather keys for sorting
for( var i in obj ) {
@@ -223,15 +225,34 @@
this._append( document.getElementById( "after" ), this.render( obj ) );
},
+ /**
+ * render a javascript string as JSON
+ */
+ renderString: function( obj ) {
+ var collapsible = obj.length > parseInt( settings.long_string_length, 10 ),
+ collapsed = collapsible && settings.fold_strings,
+ class_names = ["string"];
+
+ if( collapsible ) { class_names.push( "collapsible" ); }
+ if( collapsed ) { class_names.push( "closed" ); }
+
+ return this._append(
+ this._html( '' ),
+ this._html(
+ collapsible ? '' : '',
+ '"',
+ this._append( this._html( '' ), document.createTextNode( obj ) ),
+ '"'
+ )
+ );
+ },
+
/**
* render a literal value as HTML
- * renderValue( "foo" ) => Element
+ * renderValue( true ) => Element
*/
- renderValue: function( l, quote ) {
+ renderValue: function( l ) {
var val = document.createTextNode( l );
- if( quote ) {
- val = this._html( '"', val, '"' );
- }
return this._append( this._append( this._html( '' ), val ), this._html( ',' ) );
},
@@ -244,11 +265,11 @@
switch( t ) {
case "array": return this.renderArray( obj );
case "object": return this.renderObject( obj );
+ case "string": return this.renderString( obj );
case "boolean":
case "null":
case "number":
- case "string":
- var el = this.renderValue( obj, t == "string" );
+ var el = this.renderValue( obj );
el.className += " " + t;
return el;
}
diff --git a/src/proxy.html b/src/proxy.html
index 56a59fd..67fe096 100644
--- a/src/proxy.html
+++ b/src/proxy.html
@@ -8,6 +8,8 @@
css: document.head.getElementsByTagName( "style" )[0].textContent,
toolbar: document.getElementById( "toolbar" ).outerHTML,
settings: {
+ fold_strings: safari.extension.settings.getItem( "fold_strings" ),
+ long_string_length: safari.extension.settings.getItem( "long_string_length" ),
sort_keys: safari.extension.settings.getItem( "sort_keys" )
}
} );
@@ -95,11 +97,12 @@
/* values */
span.value { color: #339; }
- span.string,
- span.string .decorator { color: #393; }
- span.string {
- display: block;
- margin-left: 1.5em;
+ div.string .value,
+ div.string .decorator {
+ color: #393;
+ }
+ div.string {
+ padding-left: 1.5em;
white-space: pre-wrap;
}
@@ -129,8 +132,7 @@
top: 0;
left: -0.95em;
}
- .collapsible.closed > ol,
- .collapsible.closed > dl { display: none; }
+ .collapsible.closed > .value { display: none; }
.collapsible.closed > .disclosure + .decorator::after { content: '...'; }
/* separation between labels and values */