[WebProfiler] Add copy button on runnable and formatted queries

[fancyweb]

This PR adds a "copy" button on runnable queries.

I also took the opportunity to copy paste all the specific CSS for the Doctrine panel from Symfony core inside this bundle so we can remove it from Symfony core (in 5.0). Let me know if you prefer to have the two things splitted for clarity.

Screenshot:

[stof]

I'm wondering whether we should bundle the clipboard.js library here (and maybe again in another bundle wanting to provide such button), or whether we should add a feature in the WebProfilerBundle JS to allow having such copy button easily anywhere in the WebProfilerBundle (no duplicate in each bundle) using native APIs.

Note that clipboard.js does 2 things mainly:

• adding DOM listeners to trigger the copy, which is easy to do in the Sfjs code
• implementing a cross-browser way to write text to the clipboard. But as the profiler UI only cares about modern browsers (not true for the toolbar itself), this is unnecessary. Modern code for that is navigator.clipboard.writeText() (inside the click listener, as it requires a user-gesture)

[fancyweb]

Having a copy button in Symfony's core totally makes sense indeed 👍 Replacing clipboard.js by custom code is fine as well.

However, as a new feature, this copy button would now be available in Symfony WPB 5.1 while we support 3.4 here. Can we add it like this firstly and if someone ever implements it in core (I personally don't have the skills to do it), we then remove our "own" copy button implementation from the DoctrineBundle?

[stof]

btw, even if we keep it in DoctrineBundle, we could avoid bundling the library.

[beberlei]

I want to back @stof here with navigator.clipboard.writeText. Users of the profiler have modern browsers, so we can be sure that API exists, otherwise just not show the button is also fine.

[ostrolucky]

Agreed. @fancyweb can you please remove bundling of library and replace with native API? Then we don't need this upstream.

[ostrolucky]

I've removed clipboard.js, unrelated changes and implemented copy button for formatted query too

Ready to review

[fancyweb]

Thanks for continuing this @ostrolucky!