feature #15523 Redesigned the Symfony Profiler (javiereguiluz)

This PR was squashed before being merged into the 2.8 branch (closes #15523).

Discussion
----------

Redesigned the Symfony Profiler

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

### Context

Recently, we redesigned the web debug toolbar ([read announcement](http://symfony.com/blog/new-in-symfony-2-8-redesigned-web-debug-toolbar)). We maintained "the spirit" of the original toolbar, but its visual appearance was completely changed.

Now it's the turn of the Symfony Profiler. We want to update it to match the new toolbar design and to give it a more modern look and feel.

### The redesign

Most of the redesign is focused on updating just the visual appearance, but we've seized this opportunity to make some minor functional changes as well. Testing this pull request in your own applications may be difficult, so we'll provide below a complete walkthrough of the redesign. (Click on the images to see them in full resolution)

### Overview

This is the new general structure of the profiler pages:

![profiler-structure](https://cloud.githubusercontent.com/assets/73419/9226162/c1bf71f0-410d-11e5-8a7b-5c690b7c8c8a.png)

### Request panel

* Renamed `Request` panel to `Request / Response`
* Divided contents into tabs: Request, Response, Session, etc. (this prevents ultra long pages)

![profiler-request](https://cloud.githubusercontent.com/assets/73419/9226172/cb7f7938-410d-11e5-8ffd-cea8264446dd.png)

### Timeline panel

* Renamed `Timeline` panel to `Performance`
* Highlighted the most important metrics
* Added "Peak Memory Usage" to those metrics
* The timeline graph is now easier to read (font size is slightly larger, updated the color palette, made the canvas wider, etc.)
* If there is only one request, the page doesn't distract you with the "Master Request" heading. If there are several sub-requests, headings are now bigger and graphs are more separated.

![profiler-performance](https://cloud.githubusercontent.com/assets/73419/9226178/d1335782-410d-11e5-9f9a-5ace45b0dfa0.png)

### Twig panel

* Just a minor update to highlight the important metrics. The rest of the contents remain the same.

![profiler-twig](https://cloud.githubusercontent.com/assets/73419/9226180/d5bd6ff4-410d-11e5-86c8-beba426516c1.png)

### Exception panel

* Just minor design tweaks.

![profiler-exception](https://cloud.githubusercontent.com/assets/73419/9226182/da0dfd9e-410d-11e5-965c-e980f7144541.png)

### Events panel

When the `framework.ide` config option is set:

* The listeners are now displayed as more evident clickable links.
* Bellow the listener we show its full class namespace (if you don't need this information, it doesn't distract you much; if you need it, you don't have to wait for the `<abbr>` tooltip to show it)

![profiler-events-links-enabled](https://cloud.githubusercontent.com/assets/73419/9226188/e403ae48-410d-11e5-8c86-5d28fed940e7.png)

When the `framework.ide` config option is NOT set:

* In this case the developer cannot click on the listener name to go to that file and line. Therefore, we think it's important to display that information (full class namespace + full file path + line number). At first it may seem that it contains too much information ... but this panel should be more "useful" than "beautiful".

![profiler-events-links-disabled](https://cloud.githubusercontent.com/assets/73419/9226198/eb9f3bae-410d-11e5-8bbe-95c148809387.png)

### Logs panel

* Logs are now grouped in: "Info. & Errors" (this is the panel that you need most of the times); "Deprecations" (separated from the normal logs because they are specific to the process of updating your Symfony version); and "Debug" (which are all those messages that you almost never need)
* We now show the channel for the log messages (for built-in Symfony channels it may be redundant, but your application can define custom channels)

![profiler-logger](https://cloud.githubusercontent.com/assets/73419/9226203/f345163a-410d-11e5-85e6-cf9fceb885fc.png)

### Routing panel

* Just a minor redesign and highlighted some information.

![profiler-routing](https://cloud.githubusercontent.com/assets/73419/9226213/00e99130-410e-11e5-90c0-dda9394dabd7.png)

### Forms panel

* Not redesigned yet.

### Translation panel

* Highlighted the important metrics.
* Replaced the old selector by the new tabbed navigation.

![profiler-translation](https://cloud.githubusercontent.com/assets/73419/9226215/06036c40-410e-11e5-90c9-fe3b43dd6156.png)

### Security panel

* Just a minor redesign and highlighted some information.

![profiler-security](https://cloud.githubusercontent.com/assets/73419/9226217/0a92fbcc-410e-11e5-9438-e9e230a7865b.png)

### E-mails panel

* Not redesigned yet.

### Doctrine panel

* Queries are no longer displayed "shrinked". We display the full query without parameters by default.
* The three old actions ("expand", "runnable" and "explain") have been reduced to two actions ("runnable" and "explain")

![profiler-doctrine](https://cloud.githubusercontent.com/assets/73419/9226225/13e0b5d4-410e-11e5-96ce-1eb67f99df49.png)

Here you can see what happens when you click on the "Show runnable query" and "Explain query" links:

![profiler-doctrine-detail](https://cloud.githubusercontent.com/assets/73419/9226247/33b47918-410e-11e5-9657-e1351787657a.png)

### Debug panel

* Not redesigned yet.

### Config panel

* This was probably the "ugliest" panel in the old profiler, because of the two first tables.
* We now display the information of those tables highlighted in a different way.

![profiler-config](https://cloud.githubusercontent.com/assets/73419/9226257/3d728850-410e-11e5-86d8-da807f6a1217.png)

### Search results

Results with response status different from 2xx now are highlighted:

![profiler-search-results](https://cloud.githubusercontent.com/assets/73419/9226279/44bacd8e-410e-11e5-8daf-e77d2be7e3c6.png)

### Other design elements

The page title now changes for each section:

**Before**

![page-title-before](https://cloud.githubusercontent.com/assets/73419/9226312/6301b9c4-410e-11e5-8ef7-001be222ac53.png)

**After**

![page-title-after](https://cloud.githubusercontent.com/assets/73419/9226316/693bce42-410e-11e5-897a-c5e4413bc638.png)

Empty elements now display a dashed border. This allows to make design more consistent between different section. Besides, once you are used to the new design, your brain will immediately associate that design to an empty element, so you'll no longer need to read the inner text content.

![profiler-empty-element](https://cloud.githubusercontent.com/assets/73419/9226400/c9ffe06a-410e-11e5-9859-f095e444d9af.png)

Besides, when the entire panel doesn't have any content, its menu label looks disabled:

![sidebar-menu](https://cloud.githubusercontent.com/assets/73419/9226405/cf4ee5e8-410e-11e5-9501-523cd6b3413e.png)

Long pages have been break down using a tabs-based navigation:

![tabbed-navigation](https://cloud.githubusercontent.com/assets/73419/9226409/d918dba6-410e-11e5-9cd4-516a082950de.gif)

Below the page header we display a "summary section" which displays the profiled URL and some useful profiling information. The big URL is the natural way to "go back to application" from the profiler:

![summary-back-to-application](https://cloud.githubusercontent.com/assets/73419/9226414/df1abb00-410e-11e5-88ff-59dbd35b584f.gif)

Besides, the summary background color changes according to the response HTTP status code:

![profiler-summary](https://cloud.githubusercontent.com/assets/73419/9226423/e5b03850-410e-11e5-9163-2f2153c5d1de.png)

Above the main menu we now display two shortcuts to common operations: "display the 10 most recent profiles" and "search profiles":

![sidebar-shortcuts](https://cloud.githubusercontent.com/assets/73419/9226427/eaea4586-410e-11e5-8ff4-f6141723996a.png)

The search form in the sidebar has been collapsed and it's revealed when clicking on the "Search" shortcut button:

![search-form-reveal](https://cloud.githubusercontent.com/assets/73419/9226435/ef907fec-410e-11e5-9627-37cb2a241f86.gif)

-----

And that's all! Please tell us what you think about this redesign. **Don't hesitate to criticize anything you don't like or think it's wrong or it's worse than in the previous profiler.** Let's work together to make the new profiler a reality! Thanks!

Commits
-------

05773c2 Redesigned the Symfony Profiler

Author: fabpot

Resources/views/Collector/icon.svg

@@ -1,5 +1,7 @@
 {% extends '@WebProfiler/Profiler/layout.html.twig' %}
 
+{% block page_title 'Security' %}
+
 {% block toolbar %}
     {% if collector.tokenClass %}
         {% set is_authenticated = collector.enabled and collector.authenticated  %}
@@ -9,9 +11,7 @@
     {% endif %}
 
     {% set icon %}
-        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" height="24" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-            <path fill="#AAAAAA" d="M21,20.4V22H3v-1.6c0-3.7,2.4-6.9,5.8-8c-1.7-1.1-2.9-3-2.9-5.2c0-3.4,2.7-6.1,6.1-6.1s6.1,2.7,6.1,6.1c0,2.2-1.2,4.1-2.9,5.2C18.6,13.5,21,16.7,21,20.4z"/>
-        </svg>
+        {{ include('@Security/Collector/icon.svg') }}
         <span class="sf-toolbar-value">{{ collector.user|default('n/a') }}</span>
     {% endset %}
 
@@ -21,10 +21,12 @@
                 <b>Logged in as</b>
                 <span>{{ collector.user }}</span>
             </div>
+
             <div class="sf-toolbar-info-piece">
                 <b>Authenticated</b>
                 <span class="sf-toolbar-status sf-toolbar-status-{{ is_authenticated ? 'green' : 'red' }}">{{ is_authenticated ? 'Yes' : 'No' }}</span>
             </div>
+
             {% if collector.tokenClass != null %}
             <div class="sf-toolbar-info-piece">
                 <b>Token class</b>
@@ -46,54 +48,69 @@
 {% endblock %}
 
 {% block menu %}
-<span class="label">
-    <span class="icon"><svg width="42" height="30" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 42 30" enable-background="new 0 0 42 30" xml:space="preserve"><g><path fill="#3F3F3F" d="M16.1 15.3c0-0.5 0-0.8 0-1.2c0.2-0.1 0.6-0.8 0.7-1.4c0.2 0 0.4-0.2 0.5-0.8c0-0.4-0.1-0.5-0.2-0.6 c0.3-0.8 0.8-3.4-1.1-3.7C15.7 7.2 15.2 7 14.6 7c-2.6 0-2.9 2-2.4 4.2c-0.1 0.1-0.3 0.3-0.2 0.6c0.1 0.7 0.3 0.8 0.5 0.8 c0.1 0.6 0.5 1.3 0.7 1.4c0 0.4 0 0.8 0 1.2c-0.5 1.4-4 1-4.2 3.7h11.2C20.1 16.3 16.6 16.7 16.1 15.3z"/><path fill="#3F3F3F" d="M28.3 10.2c-0.2 0-0.5 0.1-0.7 0.2c-0.2 0.1-0.4 0.3-0.6 0.6c-0.2 0.3-0.4 0.6-0.5 1s-0.2 0.7-0.2 1.1 c0 0.5 0.1 0.9 0.4 1.2s0.5 0.4 0.8 0.4c0.2 0 0.4-0.1 0.7-0.2c0.2-0.1 0.5-0.3 0.7-0.6s0.4-0.6 0.5-1c0.1-0.4 0.2-0.8 0.2-1.2 c0-0.5-0.1-0.9-0.4-1.2C29 10.3 28.7 10.2 28.3 10.2z"/><path fill="#3F3F3F" d="M34 4H7C6.4 4 6 4.4 6 5v19c0 0.6 0.4 1 1 1h5v-1c-0.6 0-1-0.4-1-1c0-0.6 0.4-1 1-1h2c0.6 0 1 0.4 1 1 c0 0.6-0.4 1-1 1v1h13v-1c-0.6 0-1-0.4-1-1c0-0.6 0.4-1 1-1h2c0.6 0 1 0.4 1 1c0 0.6-0.4 1-1 1v1h5c0.6 0 1-0.4 1-1V5 C35 4.4 34.6 4 34 4z M21 19c0 0.6-0.4 1-1 1H9c-0.6 0-1-0.4-1-1V7c0-0.6 0.4-1 1-1h11c0.6 0 1 0.4 1 1V19z M32.9 16.6 c-0.5 0.4-1 0.7-1.7 1c-0.6 0.2-1.4 0.4-2.3 0.4c-0.8 0-1.6-0.1-2.3-0.3c-0.7-0.2-1.3-0.5-1.8-1c-0.5-0.4-0.9-0.9-1.1-1.5 c-0.3-0.7-0.5-1.5-0.5-2.3c0-0.9 0.2-1.8 0.6-2.6c0.5-1 1.1-1.8 2-2.4C26.5 7.3 27.6 7 28.8 7c0.9 0 1.8 0.2 2.5 0.6 c0.7 0.4 1.3 1 1.8 1.7c0.4 0.7 0.6 1.4 0.6 2.1c0 1.1-0.4 2.1-1.2 2.9c-0.7 0.8-1.4 1.2-2.3 1.2c-0.3 0-0.5 0-0.6-0.1 c-0.2-0.1-0.3-0.2-0.4-0.3c0-0.1-0.1-0.3-0.1-0.5c-0.2 0.3-0.5 0.5-0.8 0.7c-0.3 0.2-0.6 0.3-0.9 0.3c-0.3 0-0.7-0.1-1-0.3 c-0.3-0.2-0.6-0.5-0.8-0.9c-0.2-0.4-0.3-0.9-0.3-1.3c0-0.6 0.2-1.2 0.5-1.8c0.3-0.6 0.7-1.1 1.2-1.4c0.5-0.3 0.9-0.5 1.3-0.5 c0.3 0 0.6 0.1 0.9 0.3c0.3 0.2 0.6 0.4 0.8 0.8l0.2-0.9h1l-0.8 3.8c-0.1 0.5-0.2 0.8-0.2 0.9c0 0.1 0 0.2 0.1 0.3 c0.1 0.1 0.2 0.1 0.3 0.1c0.2 0 0.5-0.1 0.8-0.3c0.4-0.3 0.8-0.7 1-1.2c0.3-0.5 0.4-1 0.4-1.6c0-0.6-0.2-1.2-0.5-1.8 c-0.3-0.6-0.8-1-1.5-1.3s-1.4-0.5-2.1-0.5c-0.9 0-1.7 0.2-2.4 0.6c-0.7 0.4-1.3 1-1.7 1.8C24.2 11 24 11.9 24 12.7 c0 0.9 0.2 1.7 0.6 2.4c0.4 0.7 1 1.2 1.8 1.5c0.8 0.3 1.6 0.5 2.5 0.5c1 0 1.8-0.2 2.5-0.5c0.7-0.3 1.2-0.7 1.5-1.2h1 C33.7 15.8 33.4 16.2 32.9 16.6z"/></g></svg></span>
-    <strong>Security</strong>
-</span>
+    <span class="label {{ not collector.enabled or not collector.tokenClass ? 'disabled' }}">
+        <span class="icon">{{ include('@Security/Collector/icon.svg') }}</span>
+        <strong>Security</strong>
+    </span>
 {% endblock %}
 
 {% block panel %}
-    <h2>Security</h2>
+    <h2>Security Token</h2>
+
     {% if collector.tokenClass %}
+        <div class="metrics">
+            <div class="metric">
+                <span class="value">{{ collector.user == 'anon.' ? 'Anonymous' : collector.user }}</span>
+                <span class="label">Username</span>
+            </div>
+
+            <div class="metric">
+                <span class="value">{{ include('@WebProfiler/Icon/' ~ (collector.authenticated ? 'yes' : 'no') ~ '.svg') }}</span>
+                <span class="label">Authenticated</span>
+            </div>
+        </div>
+
         <table>
-            <tr>
-                <th>Username</th>
-                <td>{{ collector.user }}</td>
-            </tr>
-            <tr>
-                <th>Authenticated?</th>
-                <td>
-                    {% if collector.authenticated %}
-                        yes
-                    {% else %}
-                        no {% if not collector.roles|length %}<em>(probably because the user has no roles)</em>{% endif %}
-                    {% endif %}
-                </td>
-            </tr>
-            <tr>
-                <th>Roles</th>
-                <td>{{ collector.roles|yaml_encode }}</td>
-            </tr>
-            {% if collector.supportsRoleHierarchy %}
-            <tr>
-                <th>Inherited Roles</th>
-                <td>{{ collector.inheritedRoles|yaml_encode }}</td>
-            </tr>
-            {% endif %}
-            {% if collector.tokenClass != null %}
-            <tr>
-                <th>Token class</th>
-                <td>{{ collector.tokenClass }}</td>
-            </tr>
-            {% endif %}
+            <thead>
+                <tr>
+                    <th scope="col" class="key">Property</th>
+                    <th scope="col">Value</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th>Roles</th>
+                    <td>
+                        {{ collector.roles is empty ? 'none' : collector.roles|yaml_encode }}
+
+                        {% if not collector.authenticated and collector.roles is empty %}
+                            <p class="help">User is not authenticated probably because they have no roles.</p>
+                        {% endif %}
+                    </td>
+                </tr>
+
+                {% if collector.supportsRoleHierarchy %}
+                <tr>
+                    <th>Inherited Roles</th>
+                    <td>{{ collector.inheritedRoles is empty ? 'none' : collector.inheritedRoles|yaml_encode }}</td>
+                </tr>
+                {% endif %}
+
+                {% if collector.tokenClass %}
+                <tr>
+                    <th>Token class</th>
+                    <td>{{ collector.tokenClass }}</td>
+                </tr>
+                {% endif %}
+            </tbody>
         </table>
     {% elseif collector.enabled %}
-        <p>
-            <em>No token</em>
-        </p>
+        <div class="empty">
+            <p>There is no security token.</p>
+        </div>
     {% else %}
-        <p>
-            <em>The security component is disabled</em>
-        </p>
+        <div class="empty">
+            <p>The security component is disabled.</p>
+        </div>
     {% endif %}
 {% endblock %}