Add Pretty Print functionality for Request Content

SamFleming · SamFleming · commit d98584128887 · 2018-10-18T20:57:37.000+01:00
When it's been possible to detect the request contained JSON, provide an option to "Pretty Print" the request content.
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/request.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/request.html.twig
@@ -171,15 +171,22 @@
                 <h3>Request Headers</h3>
                 {{ include('@WebProfiler/Profiler/bag.html.twig', { bag: collector.requestheaders, labels: ['Header', 'Value'], maxDepth: 1 }, with_context = false) }}
 
-                <h3>Request Content</h3>
+                <h3>
+                    Request Content
+                    {% if collector.requestheaders.get('content-type')|lower is same as ('application/json') %}
+                    <small>
+                        <a href="#" class="js-pretty-request-content">(Pretty Print)</a>
+                    </small>
+                    {% endif %}
+                </h3>
 
                 {% if collector.content == false %}
                     <div class="empty">
                         <p>Request content not available (it was retrieved as a resource).</p>
                     </div>
                 {% elseif collector.content %}
                     <div class="card">
-                        <pre class="break-long-words">{{ collector.content }}</pre>
+                        <pre class="break-long-words js-request-content">{{ collector.content }}</pre>
                     </div>
                 {% else %}
                     <div class="empty">
@@ -315,6 +322,19 @@
         </div>
         {% endif %}
     </div>
+    <script>{% autoescape 'js' %}
+    (function () {
+        document.addEventListener('DOMContentLoaded', function() {
+            document.querySelector('.js-pretty-request-content').addEventListener('click', function(e) {
+                e.preventDefault();
+
+                var container = document.querySelector('.js-request-content');
+                var content = container.textContent; 
+                container.textContent = JSON.stringify(JSON.parse(content), null, 4);
+            });
+        }, false);
+    })();
+    {% endautoescape %}</script>
 {% endblock %}
 
 {% macro set_handler(controller, route, method) %}
