minor #26674 Updated the Messenger profiler panel (javiereguiluz)

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

Discussion
----------

Updated the Messenger profiler panel

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

The profiler icon of the new Messenger component was still pending. After talking with @sroze, we settled on two possible ideas for the icon: 1) focus on "messages"; 2) focus on "bus" / "message bus".

These are the icons for the two proposals:

| "Messages" | "Message Bus"
| --- | ---
| ![icon-1](https://user-images.githubusercontent.com/73419/37912058-da8aabb8-3111-11e8-972c-e3535ab9e1e8.png) | ![icon-2](https://user-images.githubusercontent.com/73419/37912063-dc2df556-3111-11e8-9fe8-c52a2ea0e008.png)

This is how they look inside the profiler:

"Messages"

![icon-1-profiler](https://user-images.githubusercontent.com/73419/37912208-43c402f0-3112-11e8-9a33-4e45ceb44b8b.png)

"Message Bus"

![icon-2-profiler](https://user-images.githubusercontent.com/73419/37912106-f3912f10-3111-11e8-827b-c8cc06c71ebe.png)

-----

My opinion:

* "Messages" look like "forum messages" or "chat messages". It looks wrong to me.
* Inside the profiler, "Messages" looks similar to "Translation" and we already have another "messages" icon for the "Mailer".
* For these reasons, I'd use "Message Bus".

Now, let's hear the community opinion. Thanks!

-----

If you want to test then on your computer:

"Messages"

```svg
<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="#aaa" d="M11.32 9.06h-8a3.07 3.07 0 0 0-3.35 3v5a3.09 3.09 0 0 0 3.35 3h2.75l4 3.69c.42.35.89.21.89-.34v-3c2 0 4-1.5 4-3.35v-5c.04-1.85-1.79-3-3.64-3zM11 16.5H4a.5.5 0 1 1 0-1h7a.5.5 0 0 1 0 1zm0-2.63H4a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5zM21.29.06h-6.46A2.83 2.83 0 0 0 12 2.89v5.33c3.31 0 4 2.28 4 4.72 0 .44.46.56.8.28l3.31-3.16h1.21A2.71 2.71 0 0 0 24 7.35V2.77A2.71 2.71 0 0 0 21.29.06zm-.81 6.66h-5a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5zm0-2.63h-5a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5z"/></svg>
```

"Message Bus"

```svg
<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="#aaa" d="M16 9a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2h-3V4a1 1 0 0 0-1-1H8a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2h3v6H8a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2h3v9a1 1 0 0 0 2 0v-5h3a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2h-3V9zm2.52-2.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm0 1.63h3a.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.52zm-13-2.82h-3a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5.5.5 0 0 1-.54.48zm0-1.62h-3a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5.5.5 0 0 1-.54.48zm0 9.62h-3a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5.5.5 0 0 1-.54.48zm0-1.62h-3a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5.5.5 0 0 1-.54.48zm13 2.81h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm0 1.63h3a.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.52z"/></svg>
```

Commits
-------

92a041c074 Updated the Messenger profiler panel
This commit is contained in:
Fabien Potencier 2018-03-27 09:13:34 +02:00
commit d329a7a755
5 changed files with 62 additions and 71 deletions

View File

@ -53,7 +53,7 @@
</service>
<service id="data_collector.messenger" class="Symfony\Bundle\FrameworkBundle\DataCollector\MessengerDataCollector">
<tag name="data_collector" template="@WebProfiler/Collector/messages.html.twig" id="messages" priority="100" />
<tag name="data_collector" template="@WebProfiler/Collector/messenger.html.twig" id="messenger" priority="100" />
<tag name="message_bus_middleware" />
</service>

View File

@ -1,60 +0,0 @@
{% extends '@WebProfiler/Profiler/layout.html.twig' %}
{% import _self as helper %}
{% block menu %}
<span class="label">
<span class="icon">{{ include('@WebProfiler/Icon/messages.svg') }}</span>
<strong>Messages</strong>
{% if collector.messages|length > 0 %}
<span class="count">
<span>{{ collector.messages|length }}</span>
</span>
{% endif %}
</span>
{% endblock %}
{% block panel %}
<h2>Messages</h2>
{% if collector.messages is empty %}
<p>No messages</p>
{% else %}
<table>
<thead>
<tr>
<th>Message</th>
<th>Result</th>
</tr>
</thead>
<tbody>
{% for message in collector.messages %}
<tr>
<td>{{ message.message.type }}</td>
<td>
{% if message.result.type is defined %}
{{ message.result.type }}
{% endif %}
{% if message.exception.type is defined %}
{{ message.exception.type }}
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
{% endblock %}
{% block toolbar %}
{% set color_code = 'normal' %}
{% set message_count = 0 %}
{% set icon %}
{{ include('@WebProfiler/Icon/messages.svg') }}
<span class="sf-toolbar-value">{{ message_count }}</span>
{% endset %}
{{ include('@WebProfiler/Profiler/toolbar_item.html.twig', { link: 'messages', status: color_code }) }}
{% endblock %}

View File

@ -0,0 +1,60 @@
{% extends '@WebProfiler/Profiler/layout.html.twig' %}
{% import _self as helper %}
{% block toolbar %}
{% if collector.messages|length > 0 %}
{% set icon %}
{{ include('@WebProfiler/Icon/messenger.svg') }}
<span class="sf-toolbar-value">{{ collector.messages|length }}</span>
{% endset %}
{{ include('@WebProfiler/Profiler/toolbar_item.html.twig', { link: 'messenger' }) }}
{% endif %}
{% endblock %}
{% block menu %}
<span class="label">
<span class="icon">{{ include('@WebProfiler/Icon/messenger.svg') }}</span>
<strong>Messages</strong>
<span class="count">
<span>{{ collector.messages|length }}</span>
</span>
</span>
{% endblock %}
{% block panel %}
<h2>Messages</h2>
{% if collector.messages is empty %}
<div class="empty">
<p>No messages have been collected.</p>
</div>
{% else %}
<table>
<thead>
<tr>
<th>Message</th>
<th>Result</th>
</tr>
</thead>
<tbody>
{% for message in collector.messages %}
<tr>
<td>{{ message.message.type }}</td>
<td>
{% if message.result.type is defined %}
{{ message.result.type }}
{% endif %}
{% if message.exception.type is defined %}
{{ message.exception.type }}
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
{% endblock %}

View File

@ -1,10 +0,0 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Symfony-Icon" fill="#AAAAAA" fill-rule="nonzero">
<g id="messages" transform="translate(1.000000, 4.000000)">
<polygon id="Shape" points="7 2.56157635 15.8538682 2.56157635 15.8538682 10.9293924 17.4441261 10.9293924 18.6475645 13 19.8510029 10.9293924 22 10.9293924 22 0 7 0"></polygon>
<path d="M3.18051576,16 L4.53309456,13.7181965 L15,13.7181965 L15,3 L0,3 L0,13.7181965 L1.82793696,13.7181965 L3.18051576,16 Z M2.75071633,6.14009662 L9.11174785,6.14009662 L9.11174785,6.64251208 L2.75071633,6.64251208 L2.75071633,6.14009662 Z M2.75071633,8.27536232 L12.5071633,8.27536232 L12.5071633,8.77777778 L2.75071633,8.77777778 L2.75071633,8.27536232 Z M2.75071633,10.410628 L12.5071633,10.410628 L12.5071633,10.9130435 L2.75071633,10.9130435 L2.75071633,10.410628 Z" id="Shape"></path>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"><path fill="#aaa" d="M16 9a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2h-3V4a1 1 0 0 0-1-1H8a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2h3v6H8a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2h3v9a1 1 0 0 0 2 0v-5h3a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2h-3V9zm2.52-2.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm0 1.63h3a.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.52zm-13-2.82h-3a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5.5.5 0 0 1-.54.48zm0-1.62h-3a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5.5.5 0 0 1-.54.48zm0 9.62h-3a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5.5.5 0 0 1-.54.48zm0-1.62h-3a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5.5.5 0 0 1-.54.48zm13 2.81h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm0 1.63h3a.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.52z"/></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB