Sort headers, fix overflowing, copy curl (#112)

Co-authored-by: Sergei Predvoditelev <[email protected]>

Author: xepozz

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## 3.2.2 under development
 
-- no changes in this release.
+- Enh #112: Add copy cURL button, sort request headers, fix UI (@xepozz)
 
 ## 3.2.1 March 07, 2024
 

src/Renderer/HtmlRenderer.php

@@ -40,7 +40,6 @@
 use function ob_implicit_flush;
 use function ob_start;
 use function realpath;
-use function rtrim;
 use function str_replace;
 use function stripos;
 use function strlen;
@@ -347,19 +346,22 @@ public function renderRequest(ServerRequestInterface $request): string
     {
         $output = $request->getMethod() . ' ' . $request->getUri() . "\n";
 
-        foreach ($request->getHeaders() as $name => $values) {
-            if ($name === 'Host') {
-                continue;
-            }
+        $headers = $request->getHeaders();
+        unset($headers['Host']);
+        ksort($headers);
 
+        foreach ($headers as $name => $values) {
             foreach ($values as $value) {
                 $output .= "$name: $value\n";
             }
         }
 
-        $output .= "\n" . $request->getBody() . "\n\n";
+        $body = (string)$request->getBody();
+        if (!empty($body)) {
+            $output .= "\n" . $body . "\n\n";
+        }
 
-        return '<pre class="codeBlock language-text">' . $this->htmlEncode(rtrim($output, "\n")) . '</pre>';
+        return $output;
     }
 
     /**
@@ -374,10 +376,10 @@ public function renderCurl(ServerRequestInterface $request): string
                 ->setRequest($request)
                 ->build();
         } catch (Throwable $e) {
-            return $this->htmlEncode('Error generating curl command: ' . $e->getMessage());
+            return 'Error generating curl command: ' . $e->getMessage();
         }
 
-        return '<div class="codeBlock language-sh">' . $this->htmlEncode($output) . '</div>';
+        return $output;
     }
 
     /**

templates/_call-stack-item.php

@@ -21,7 +21,7 @@
 <li class="<?= (!empty($lines) && ($index === 1 || !$isVendorFile)) ? 'application ' : '' ?>call-stack-item"
     data-line="<?= (int) ($line - $begin) ?>">
     <div class="element-wrap">
-        <div class="flex-1">
+        <div class="flex-1 mw-100">
             <?php if ($file !== null): ?>
                 <span class="file-name">
                     <?= "{$index}. in {$this->htmlEncode($file)}" ?>

templates/development.css

@@ -3,12 +3,6 @@ html,
 body,
 div,
 span,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
 p,
 pre,
 a,
@@ -344,13 +338,13 @@ header .previous h3 {
     height: 150px;
 }
 
-#copy-stacktrace {
+.copy-clipboard {
     position: absolute;
     right: 40px;
     top: 44px;
 }
 
-#copy-stacktrace:hover svg path {
+.copy-clipboard:hover svg path {
     fill: var(--icon-hover-color);
 }
 
@@ -387,6 +381,10 @@ main {
     flex: 1;
 }
 
+.mw-100 {
+    max-width: 100%;
+}
+
 /* call stack */
 .call-stack ul li,
 .request {
@@ -460,6 +458,9 @@ main {
 
 .call-stack ul li .element-wrap .function-info {
     display: inline-block;
+    line-break: normal;
+    overflow-wrap: break-word;
+    word-break: break-word;
 }
 
 .call-stack ul li.application .element-wrap {
@@ -557,12 +558,15 @@ main {
 
 /* request */
 .request {
-    padding: 20px 30px;
+    position: relative;
     font-size: 14px;
     line-height: 18px;
     overflow-x: auto;
     font-family: JetBrains Mono, Consolas, monospace;
 }
+.request .body {
+    overflow: auto;
+}
 /* end request */
 
 /* footer */

templates/development.php

@@ -88,7 +88,11 @@
         <textarea id="clipboard"><?= $this->htmlEncode($throwable) ?></textarea>
         <span id="copied">Copied!</span>
 
-        <a href="#" id="copy-stacktrace" title="Copy the stacktrace for use in a bug report or pastebin">
+        <a href="#"
+           class="copy-clipboard"
+           data-clipboard="<?= $this->htmlEncode($throwable) ?>"
+           title="Copy the stacktrace for use in a bug report or pastebin"
+        >
             <svg width="26" height="30" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M17.9998.333344H3.33317C1.8665.333344.666504 1.53334.666504 3.00001V20.3333c0 .7334.599996 1.3334 1.333336 1.3334.73333 0 1.33333-.6 1.33333-1.3334V4.33334c0-.73333.6-1.33333 1.33333-1.33333h13.3333c.7334 0 1.3334-.6 1.3334-1.33333 0-.733337-.6-1.333336-1.3334-1.333336zm5.3334 5.333336H8.6665c-1.46666 0-2.66666 1.2-2.66666 2.66666V27c0 1.4667 1.2 2.6667 2.66666 2.6667h14.6667c1.4666 0 2.6666-1.2 2.6666-2.6667V8.33334c0-1.46666-1.2-2.66666-2.6666-2.66666zM21.9998 27H9.99984c-.73333 0-1.33334-.6-1.33334-1.3333V9.66668c0-.73334.60001-1.33334 1.33334-1.33334H21.9998c.7334 0 1.3334.6 1.3334 1.33334V25.6667c0 .7333-.6 1.3333-1.3334 1.3333z" fill="#787878"/>
             </svg>
@@ -107,12 +111,30 @@
     </div>
     <?php if ($request && ($requestInfo = $this->renderRequest($request)) !== ''): ?>
         <div class="request">
-            <?= $requestInfo ?>
+            <h2>Request info</h2>
+            <div class="body">
+                <pre class="codeBlock language-text"><?= $this->htmlEncode(rtrim($requestInfo, "\n")) ?></pre>
+            </div>
         </div>
     <?php endif ?>
     <?php if ($request && ($curlInfo = $this->renderCurl($request)) !== 'curl'): ?>
         <div class="request">
-            <?= $curlInfo ?>
+            <textarea id="clipboard"><?= $curlInfo ?></textarea>
+            <span id="copied" style="top: 10px">Copied!</span>
+            <h2>cURL</h2>
+            <a href="#"
+               class="copy-clipboard"
+               data-clipboard="<?= $curlInfo ?>"
+               title="Copy the cURL"
+               style="right: 10px; top: 5px"
+            >
+                <svg width="26" height="30" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M17.9998.333344H3.33317C1.8665.333344.666504 1.53334.666504 3.00001V20.3333c0 .7334.599996 1.3334 1.333336 1.3334.73333 0 1.33333-.6 1.33333-1.3334V4.33334c0-.73333.6-1.33333 1.33333-1.33333h13.3333c.7334 0 1.3334-.6 1.3334-1.33333 0-.733337-.6-1.333336-1.3334-1.333336zm5.3334 5.333336H8.6665c-1.46666 0-2.66666 1.2-2.66666 2.66666V27c0 1.4667 1.2 2.6667 2.66666 2.6667h14.6667c1.4666 0 2.6666-1.2 2.6666-2.6667V8.33334c0-1.46666-1.2-2.66666-2.6666-2.66666zM21.9998 27H9.99984c-.73333 0-1.33334-.6-1.33334-1.3333V9.66668c0-.73334.60001-1.33334 1.33334-1.33334H21.9998c.7334 0 1.3334.6 1.3334 1.33334V25.6667c0 .7333-.6 1.3333-1.3334 1.3333z" fill="#787878"/>
+                </svg>
+            </a>
+            <div class="body">
+                <div class="codeBlock language-sh"><?= $this->htmlEncode($curlInfo) ?></div>
+            </div>
         </div>
     <?php endif ?>
     <div class="footer">
@@ -254,29 +276,36 @@
         }
 
         // handle copy stacktrace action on clipboard button
-        document.getElementById('copy-stacktrace').onclick = function(e) {
+        const copyIntoClipboard = function(e) {
             e.preventDefault();
-            var textarea = document.getElementById('clipboard');
+            const parentContainer = e.currentTarget.parentElement;
+            const textarea = parentContainer.querySelector('#clipboard');
             textarea.focus();
             textarea.select();
 
-            var succeeded;
+            let succeeded;
             try {
                 succeeded = document.execCommand('copy');
             } catch (err) {
                 succeeded = false;
             }
             if (succeeded) {
-                var hint = document.getElementById('copied');
+                const hint = parentContainer.querySelector('#copied');
+                if (!hint) {
+                    return
+                }
                 hint.style.display = 'block';
-                setTimeout(function () {
-                    hint.style.display = 'none';
-                }, 2000);
+                setTimeout(() => hint.style.display = 'none', 2000);
             } else {
                 // fallback: show textarea if browser does not support copying directly
                 textarea.style.top = 0;
             }
         }
+        const elements = document.querySelectorAll('.copy-clipboard')
+        for (let element of elements) {
+            element.onclick = copyIntoClipboard;
+        }
+
 
         // handle theme change
         document.getElementById('dark-mode').onclick = function(e) {

tests/Renderer/HtmlRendererTest.php

@@ -149,7 +149,7 @@ public function testRenderRequest(): void
         $output = $renderer->renderRequest($this->createServerRequestMock());
 
         $this->assertSame(
-            "<pre class=\"codeBlock language-text\">GET https:/example.com\nAccept: text/html</pre>",
+            "GET https:/example.com\nAccept: text/html\n",
             $output
         );
     }