feature #24151 Display the log context in the debug pages (javieregui…

…luz)

This PR was squashed before being merged into the 4.2-dev branch (closes #24151).

Discussion
----------

Display the log context in the debug pages

| Q             | A
| ------------- | ---
| Branch?       | 3.4
| Bug fix?      | no
| New feature?  | yes
| BC breaks?    | no
| Deprecations? | no
| Tests pass?   | yes
| Fixed tickets | #23589
| License       | MIT
| Doc PR        | -

### Before

![before](https://user-images.githubusercontent.com/73419/30269760-564ff2e8-96ea-11e7-98fa-0610d6a0322f.png)

### After

![after](https://user-images.githubusercontent.com/73419/30269764-5830482e-96ea-11e7-946a-a6805c28741a.png)

I'd like to exclude the `event` channel context because it only adds noise:

![event-noise](https://user-images.githubusercontent.com/73419/30269774-67036f52-96ea-11e7-87c0-5ef8328f315a.png)

-----

This change would require to add a hard dependency to the VarDumper component. Do we want to do that? Thanks!

Commits
-------

c59fbde Display the log context in the debug pages

src/Symfony/Bundle/TwigBundle/Resources/views/Exception/logs.html.twig

@@ -29,7 +29,12 @@
                     {{ log.channel }}
                 </td>
             {% endif %}
-            <td>{{ log.message|format_log_message(log.context) }}</td>
+            <td>
+                {{ log.message|format_log_message(log.context) }}
+                {% if log.context ?? false %}
+                    <pre class="text-muted prewrap m-t-5">{{ log.context|json_encode(constant('JSON_PRETTY_PRINT') b-or constant('JSON_UNESCAPED_UNICODE') b-or constant('JSON_UNESCAPED_SLASHES')) }}</pre>
+                {% endif %}
+            </td>
         </tr>
     {% endfor %}
     </tbody>

src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig

@@ -17,9 +17,11 @@ table { background: #FFF; border: 1px solid #E0E0E0; box-shadow: 0px 0px 1px rgb
 table th, table td { border: solid #E0E0E0; border-width: 1px 0; padding: 8px 10px; }
 table th { background-color: #E0E0E0; font-weight: bold; text-align: left; }
 
+.m-t-5 { margin-top: 5px; }
 .hidden-xs-down { display: none; }
 .block { display: block; }
 .hidden { display: none; }
+.prewrap { white-space: pre-wrap; }
 .nowrap { white-space: nowrap; }
 .newline { display: block; }
 .break-long-words { word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; min-width: 0; }