Moved response headers above response body with a click to expand/shrink

Resources/public/css/screen.css

@@ -1153,6 +1153,16 @@ body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operatio
   overflow: auto;
 }
 
+.result pre.to-shrink,
+.result pre.to-expand {
+  cursor:pointer;
+}
+
+.result pre.to-expand {
+  height: 1em;
+  overflow:hidden;
+}
+
 .tabs li {
   display: inline;
   float: left;

Resources/views/layout.html.twig

@@ -198,6 +198,23 @@
                 e.preventDefault();
             });
 
+            $('.pane.sandbox').delegate('.to-expand, .to-shrink', 'click', function(e) {
+                var $headers = $(this).parents('.result').find('.headers');
+                var $label = $(this).parents('.result').find('a.to-expand');
+
+                if ($headers.hasClass('to-expand')) {
+                  $headers.removeClass('to-expand');
+                  $headers.addClass('to-shrink');
+                  $label.text('Shrink');
+                } else {
+                  $headers.removeClass('to-shrink');
+                  $headers.addClass('to-expand');
+                  $label.text('Expand');
+                }
+
+                e.preventDefault();
+            });
+
             $('.pane.sandbox').on('click', '.add', function() {
                 var html = $(this).parents('.pane').find('.tuple_template').html();
 

Resources/views/method.html.twig

@@ -145,11 +145,11 @@
                 <h4>Request URL</h4>
                 <pre class="url"></pre>
 
+                <h4>Response Headers&nbsp;<small>[<a href="" class="to-expand">Expand</a>]</small></h4>
+                <pre class="headers to-expand"></pre>
+
                 <h4>Response Body&nbsp;<small>[<a href="" class="to-raw">Raw</a>]</small></h4>
                 <pre class="response prettyprint"></pre>
-
-                <h4>Response Headers</h4>
-                <pre class="headers"></pre>
             </div>
         </div>
       </div>