Folding long strings

Strings longer than X bytes can be folded (X is configurable; default: 512) Long strings are auto-folded (also configurable)
rfletcher · Feb 26, 2012 · 6aa170a · 6aa170a
1 parent 5dab9d0
commit 6aa170a
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 20 deletions.
diff --git a/etc/Settings.plist b/etc/Settings.plist
@@ -2,15 +2,35 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <array>
+  <dict>
+    <key>DefaultValue</key>
+    <true/>
+    <key>Key</key>
+    <string>sort_keys</string>
+    <key>Title</key>
+    <string>Sort Object Keys</string>
+    <key>Type</key>
+    <string>CheckBox</string>
+  </dict>
+  <dict>
+    <key>DefaultValue</key>
+    <true/>
+    <key>Key</key>
+    <string>fold_strings</string>
+    <key>Title</key>
+    <string>Auto-Fold Long Strings</string>
+    <key>Type</key>
+    <string>CheckBox</string>
+  </dict>
 	<dict>
 		<key>DefaultValue</key>
-		<true/>
+		<real>512</real>
 		<key>Key</key>
-		<string>sort_keys</string>
+		<string>long_string_length</string>
 		<key>Title</key>
-		<string>Sort Object Keys</string>
+		<string>"Long String" Threshold (bytes)</string>
 		<key>Type</key>
-		<string>CheckBox</string>
+		<string>TextField</string>
 	</dict>
 </array>
 </plist>
diff --git a/src/formattedJSON.js b/src/formattedJSON.js
@@ -169,10 +169,12 @@
      *  renderArray( [] ) => Element
      */
     renderArray: function( a ) {
-      var list = this._html( '<ol start="0"/>' );
+      var list = this._html( '<ol start="0" class="value"/>' );
+
       for( var i = 0, ii = a.length; i < ii; i++ ) {
         this._append( list, this._append( this._html( "<li/>" ), this.render( a[i] ) ) );
       }
+
       return this._append(
         this._html( '<div class="array collapsible"/>' ),
           this._html(
@@ -189,7 +191,7 @@
      *  renderObject( {} ) => Element
      */
     renderObject: function( obj ) {
-      var keys = [], list = this._html( "<dl/>" );
+      var keys = [], list = this._html( '<dl class="value"/>' );
 
       // 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( '<div class="' + class_names.join( " " ) + '"/>' ),
+          this._html(
+            collapsible ? '<span class="disclosure"></span>' : '',
+            '<span class="decorator">"</span>',
+            this._append( this._html( '<span class="value"/>' ), document.createTextNode( obj ) ),
+            '<span class="decorator">"</span>'
+          )
+        );
+    },
+
     /**
      * 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( '<span class="decorator">"</span>', val, '<span class="decorator">"</span>' );
-      }
       return this._append( this._append( this._html( '<span class="value"/>' ), val ), this._html( '<span class="separator">,</span>' ) );
     },
 
@@ -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
@@ -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 */