Create feature copy query to clipboard (php-debugbar#352)

* Bugfix getSqlWithParams ReplacementParamsQuery

* backward compatibility

* Copy query to clipboard feature

* remove space

Author: webmailcontatos

src/DebugBar/Resources/widgets/sqlqueries/widget.css

@@ -15,6 +15,7 @@ div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-database,
 div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-duration,
 div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-memory,
 div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-row-count,
+div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-copy-clipboard,
 div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-stmt-id {
   float: right;
   margin-left: 8px;
@@ -24,13 +25,15 @@ div.phpdebugbar-widgets-sqlqueries div.phpdebugbar-widgets-status span.phpdebugb
 div.phpdebugbar-widgets-sqlqueries div.phpdebugbar-widgets-status span.phpdebugbar-widgets-duration,
 div.phpdebugbar-widgets-sqlqueries div.phpdebugbar-widgets-status span.phpdebugbar-widgets-memory,
 div.phpdebugbar-widgets-sqlqueries div.phpdebugbar-widgets-status span.phpdebugbar-widgets-row-count,
+div.phpdebugbar-widgets-sqlqueries div.phpdebugbar-widgets-status span.phpdebugbar-widgets-copy-clipboard,
 div.phpdebugbar-widgets-sqlqueries div.phpdebugbar-widgets-status span.phpdebugbar-widgets-stmt-id {
   color: #555;
 }
 div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-database:before,
 div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-duration:before,
 div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-memory:before,
 div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-row-count:before,
+div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-copy-clipboard:before,
 div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-stmt-id:before {
   font-family: PhpDebugbarFontAwesome;
   margin-right: 4px;
@@ -51,6 +54,9 @@ div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-row-count:before {
 div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-stmt-id:before {
   content: "\f08d";
 }
+div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-copy-clipboard:before {
+  content: "\f0c5";
+}
 div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params {
   display: none;
   width: 70%;

src/DebugBar/Resources/widgets/sqlqueries/widget.js

@@ -24,7 +24,32 @@
 
             this.set('exclude', excludedLabels);
         },
-
+        onCopyToClipboard: function (el) {
+            var code = $(el).parent('li').find('code').get(0);
+            var copy = function () {
+                try {
+                    document.execCommand('copy');
+                    alert('Query copied to the clipboard');
+                } catch (err) {
+                    console.log('Oops, unable to copy');
+                }
+            };
+            var select = function (node) {
+                if (document.selection) {
+                    var range = document.body.createTextRange();
+                    range.moveToElementText(node);
+                    range.select();
+                } else if (window.getSelection) {
+                    var range = document.createRange();
+                    range.selectNodeContents(node);
+                    window.getSelection().removeAllRanges();
+                    window.getSelection().addRange(range);
+                }
+                copy();
+                window.getSelection().removeAllRanges();
+            };
+            select(code);
+        },
         render: function() {
             this.$status = $('<div />').addClass(csscls('status')).appendTo(this.$el);
 
@@ -67,6 +92,14 @@
                     li.addClass(csscls('error'));
                     li.append($('<span />').addClass(csscls('error')).text("[" + stmt.error_code + "] " + stmt.error_message));
                 }
+                $('<span title="Copy to clipboard" />')
+                    .addClass(csscls('copy-clipboard'))
+                    .css('cursor', 'pointer')
+                    .on('click', function (event) {
+                        self.onCopyToClipboard(this);
+                        event.stopPropagation();
+                    })
+                    .appendTo(li);
                 if (stmt.params && !$.isEmptyObject(stmt.params)) {
                     var table = $('<table><tr><th colspan="2">Params</th></tr></table>').addClass(csscls('params')).appendTo(li);
                     for (var key in stmt.params) {