Add Pretty Print functionality for Request Content

SamFleming · SamFleming · commit d56ed851b4f2 · 2018-10-19T22:02:48.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,35 @@
                 <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
+                </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>
+                    <div class="sf-tabs">
+                        {% if collector.requestheaders.get('content-type')|lower is same as ('application/json') %}
+                        <div class="tab">
+                            <h3 class="tab-title">Pretty</h3>
+                            <div class="tab-content">
+                                <div class="card" style="max-height: 500px; overflow-y: auto;">
+                                    <pre class="break-long-words js-request-content">{{ collector.content }}</pre>
+                                </div>
+                            </div>
+                        </div>
+                        {% endif %}
+
+                        <div class="tab">
+                            <h3 class="tab-title">Raw</h3>
+                            <div class="tab-content">
+                                <div class="card">
+                                    <pre class="break-long-words">{{ collector.content }}</pre>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 {% else %}
                     <div class="empty">
@@ -315,6 +335,19 @@
         </div>
         {% endif %}
     </div>
+    <script>{% autoescape 'js' %}
+    (function () {
+        function formatRequestContent() {
+            var container = document.querySelector('.js-request-content');
+            if (!container) return;
+
+            var content = container.textContent;
+            container.textContent = JSON.stringify(JSON.parse(content), null, 4);
+        }
+
+        document.addEventListener('DOMContentLoaded', formatRequestContent, false);
+    })();
+    {% endautoescape %}</script>
 {% endblock %}
 
 {% macro set_handler(controller, route, method) %}
