Add copy as curl button in profiler

CHANGELOG.md

@@ -7,6 +7,7 @@
 - The real request method and target url are now displayed in the profiler.
 - Support the cache plugin configuration for `respect_response_cache_directives`.
 - Extended WebProfilerToolbar item to list request with details.
+- You can now copy any request as cURL command in the profiler.
 
 ### Changed
 

Collector/Formatter.php

@@ -6,11 +6,13 @@
 use Http\Client\Exception\HttpException;
 use Http\Client\Exception\TransferException;
 use Http\Message\Formatter as MessageFormatter;
+use Http\Message\Formatter\CurlCommandFormatter;
 use Psr\Http\Message\RequestInterface;
 use Psr\Http\Message\ResponseInterface;
 
 /**
- * This class is a decorator for any Http\Message\Formatter with the the ability to format exceptions.
+ * This class is a decorator for any Http\Message\Formatter with the the ability to format exceptions and requests as
+ * cURL commands.
  *
  * @author Fabien Bourigault <bourigaultfabien@gmail.com>
  *
@@ -24,11 +26,18 @@ class Formatter implements MessageFormatter
     private $formatter;
 
     /**
-     * @param MessageFormatter $formatter
+     * @var CurlCommandFormatter
      */
-    public function __construct(MessageFormatter $formatter)
+    private $curlFormatter;
+
+    /**
+     * @param MessageFormatter     $formatter
+     * @param CurlCommandFormatter $curlFormatter
+     */
+    public function __construct(MessageFormatter $formatter, CurlCommandFormatter $curlFormatter)
     {
         $this->formatter = $formatter;
+        $this->curlFormatter = $curlFormatter;
     }
 
     /**
@@ -66,4 +75,16 @@ public function formatResponse(ResponseInterface $response)
     {
         return $this->formatter->formatResponse($response);
     }
+
+    /**
+     * Format a RequestInterface as a cURL command.
+     *
+     * @param RequestInterface $request
+     *
+     * @return string
+     */
+    public function formatAsCurlCommand(RequestInterface $request)
+    {
+        return $this->curlFormatter->formatRequest($request);
+    }
 }

Collector/ProfileClient.php

@@ -133,6 +133,7 @@ private function collectRequestInformations(RequestInterface $request, Stack $st
         $stack->setRequestScheme($request->getUri()->getScheme());
         $stack->setRequestHost($request->getUri()->getHost());
         $stack->setClientRequest($this->formatter->formatRequest($request));
+        $stack->setCurlCommand($this->formatter->formatAsCurlCommand($request));
     }
 
     /**

Collector/Stack.php

@@ -81,6 +81,11 @@ final class Stack
      */
     private $duration = 0;
 
+    /**
+     * @var string
+     */
+    private $curlCommand;
+
     /**
      * @param string $client
      * @param string $request
@@ -298,4 +303,20 @@ public function setDuration($duration)
     {
         $this->duration = $duration;
     }
+
+    /**
+     * @return string
+     */
+    public function getCurlCommand()
+    {
+        return $this->curlCommand;
+    }
+
+    /**
+     * @param string $curlCommand
+     */
+    public function setCurlCommand($curlCommand)
+    {
+        $this->curlCommand = $curlCommand;
+    }
 }

Resources/config/data-collector.xml

@@ -10,6 +10,9 @@
 
         <service id="httplug.collector.formatter" class="Http\HttplugBundle\Collector\Formatter" public="false">
             <argument type="service" id="httplug.formatter.full_http_message"/>
+            <argument type="service">
+                <service class="Http\Message\Formatter\CurlCommandFormatter" />
+            </argument>
         </service>
 
         <service id="httplug.collector.collector" class="Http\HttplugBundle\Collector\Collector" public="false">

Resources/public/script/httplug.js

@@ -10,3 +10,18 @@ document.addEventListener("DOMContentLoaded", function() {
         });
     });
 });
+
+/**
+ * Copy as cURL.
+ */
+document.addEventListener("DOMContentLoaded", function () {
+    Array.prototype.forEach.call(document.getElementsByClassName('httplug-toolbar'), function (toolbar) {
+        var button = toolbar.querySelector('.httplug-copy-as-curl>button');
+        button.addEventListener('click', function() {
+            var input = toolbar.querySelector('.httplug-copy-as-curl>input');
+            input.select();
+            document.execCommand('copy');
+            input.setSelectionRange(0, 0);
+       });
+    });
+})

Resources/public/style/httplug.css

@@ -20,6 +20,46 @@
     text-align: center;
 }
 
+/**
+ * Toolbar
+ */
+.httplug-toolbar {
+    display: flex;
+    justify-content: space-between;
+}
+
+.httplug-toolbar>*:not(:last-child) {
+    margin-right:5px;
+}
+
+.httplug-toolbar .httplug-copy-as-curl {
+    flex: 1;
+}
+
+.httplug-copy-as-curl {
+    font-size: 0; /*hide line return spacings*/
+    display: flex;
+}
+
+.httplug-copy-as-curl>input {
+    padding: .5em .75em;
+    border-radius: 2px 0px 0px 2px;
+    border: 0;
+    line-height: inherit;
+    background-color: #eee;
+    opacity: 1;
+    font-size: 14px;
+    flex: 1;
+}
+
+.httplug-copy-as-curl>button {
+    font-size: 14px;
+    border-radius: 0px 2px 2px 0px;
+}
+
+/**
+ * Message
+ */
 .httplug-message {
     box-sizing: border-box;
     padding: 5px;
@@ -30,6 +70,14 @@
     white-space: nowrap;
 }
 
+.httplug-messages {
+    clear: both;
+    display: flex;
+}
+
+/**
+ * Stack header
+ */
 .httplug-stack-header {
     display: flex;
     justify-content: space-between;
@@ -59,11 +107,6 @@
     font-size: 0; /*hide line return spacings*/
 }
 
-.httplug-messages {
-    clear: both;
-    display: flex;
-}
-
 .httplug-scheme-http {
     display: none;
 }

Resources/views/webprofiler.html.twig

@@ -104,7 +104,14 @@
                         </div>
                     </div>
                     <div id="httplug-{{ client }}-{{ loop.index }}-details" class="httplug-hidden">
-                        <button data-toggle="#httplug-{{ client }}-{{ loop.index }}-details .httplug-http-body" class="httplug-toggle btn httplug-push-right">Toggle body</button>
+                        <div class="httplug-toolbar">
+                            <div class="httplug-copy-as-curl">
+                                <input readonly="readonly" type="text" value="{{ stack.curlCommand }}" />
+                                <button class="btn tooltip-toggle" aria-label="Copy to clipboard">Copy to clipboard</button>
+                            </div>
+                            <button data-toggle="#httplug-{{ client }}-{{ loop.index }}-stack" class="httplug-toggle btn" >Toggle plugin stack</button>
+                            <button data-toggle="#httplug-{{ client }}-{{ loop.index }}-details .httplug-http-body" class="httplug-toggle btn">Toggle body</button>
+                        </div>
                         <div class="httplug-messages">
                             <div class="httplug-message card">
                                 <h4>Request</h4>
@@ -116,9 +123,6 @@
                             </div>
                         </div>
                         {% if stack.profiles %}
-                            <div class="httplug-center">
-                                <button class="btn httplug-toggle" data-toggle="#httplug-{{ client }}-{{ loop.index }}-stack">Toggle plugin stack</button>
-                            </div>
                             <div id="httplug-{{ client }}-{{ loop.index }}-stack" class="httplug-hidden card">
                                 {% for profile in stack.profiles %}
                                     <h3 class="httplug-plugin-name">{{ profile.plugin }}</h3>

Tests/Unit/Collector/FormatterTest.php

@@ -6,6 +6,7 @@
 use Http\Client\Exception\TransferException;
 use Http\HttplugBundle\Collector\Formatter;
 use Http\Message\Formatter as MessageFormatter;
+use Http\Message\Formatter\CurlCommandFormatter;
 use Psr\Http\Message\RequestInterface;
 use Psr\Http\Message\ResponseInterface;
 
@@ -16,6 +17,11 @@ class FormatterTest extends \PHPUnit_Framework_TestCase
      */
     private $formatter;
 
+    /**
+     * @var MessageFormatter
+     */
+    private $curlFormatter;
+
     /**
      * @var Formatter
      */
@@ -24,8 +30,9 @@ class FormatterTest extends \PHPUnit_Framework_TestCase
     public function setUp()
     {
         $this->formatter = $this->getMockBuilder(MessageFormatter::class)->getMock();
+        $this->curlFormatter = $this->getMockBuilder(CurlCommandFormatter::class)->getMock();
 
-        $this->subject = new Formatter($this->formatter);
+        $this->subject = new Formatter($this->formatter, $this->curlFormatter);
     }
 
     public function testFormatRequest()
@@ -88,4 +95,18 @@ public function testFormatException()
         $exception = new \RuntimeException('Unexpected error');
         $this->assertEquals('Unexpected exception of type "RuntimeException": Unexpected error', $this->subject->formatException($exception));
     }
+
+    public function testFormatAsCurlCommand()
+    {
+        $request = $this->getMockBuilder(RequestInterface::class)->getMock();
+
+        $this->curlFormatter
+            ->expects($this->once())
+            ->method('formatRequest')
+            ->with($this->identicalTo($request))
+            ->willReturn('curl -L http://example.com')
+        ;
+
+        $this->assertEquals('curl -L http://example.com', $this->subject->formatAsCurlCommand($request));
+    }
 }

composer.json

@@ -26,7 +26,7 @@
         "symfony/options-resolver": "^2.8 || ^3.0",
         "symfony/event-dispatcher": "^2.8 || ^3.0",
         "symfony/framework-bundle": "^2.8 || ^3.0",
-        "php-http/message": "^1.3",
+        "php-http/message": "^1.4",
         "php-http/discovery": "^1.0",
         "twig/twig": "^1.18 || ^2.0"
     },