feature #5115 Flesh out twig-template for custom data-collector (Darien Hager)

This PR was submitted for the 2.6 branch but it was merged into the 2.3 branch instead (closes #5115).

Discussion
----------

Flesh out twig-template for custom data-collector

I think this template will make it easier for people to get started, since it demonstrates a greater range of visual features.

Users less-experienced in twig may have problems with the old skeleton, since it removes the default CSS styles when visiting the main panel. Adding `{{parent()}}` to the `head` block makes it friendlier.

Commits
-------

ffaff9b Remove indentations for all-whitespace lines.
b0e2b83 Fix incorrect instructions regarding linking to the "full panel", improve roll-over data example.
cc5ae6a Flesh out twig-template for custom data-collector

Author: weaverryan

cookbook/profiler/data_collector.rst

@@ -106,27 +106,56 @@ Adding Web Profiler Templates
 -----------------------------
 
 When you want to display the data collected by your data collector in the web
-debug toolbar or the web profiler, create a Twig template following this
-skeleton:
+debug toolbar or the web profiler, you will need to create a Twig template. The
+following example can help you get started:
 
 .. code-block:: jinja
 
     {% extends 'WebProfilerBundle:Profiler:layout.html.twig' %}
 
     {% block toolbar %}
-        {# the web debug toolbar content #}
+        {# This toolbar item may appear along the top or bottom of the screen.#}
+        {% set icon %}
+        <span class="icon"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAcCAQAAADVGmdYAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQffAxkBCDStonIVAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAAHpJREFUOMtj3PWfgXRAuqZd/5nIsIdhVBPFmgqIjCuYOrJsYtz1fxuUOYER2TQID8afwIiQ8YIkI4TzCv5D2AgaWSuExJKMIDbA7EEVhQEWXJ6FKUY4D48m7HYU/EcWZ8JlE6qfMELPDcUJuEMPxvYazYTDWRMjOcUyAEswO+VjeQQaAAAAAElFTkSuQmCC" alt=""/></span>
+        <span class="sf-toolbar-status">Example</span>
+        {% endset %}
+
+        {% set text %}
+        <div class="sf-toolbar-info-piece">
+            <b>Quick piece of data</b>
+            <span>100 units</div>
+        </div>
+        <div class="sf-toolbar-info-piece">
+            <b>Another quick thing</b>
+            <span>300 units</div>
+        </div>
+        {% endset %}
+
+        {# Set the "link" value to false if you do not have a big "panel" 
+           section that you want to direct the user to. #}
+        {% include '@WebProfiler/Profiler/toolbar_item.html.twig' with { 'link': true } %}
+
     {% endblock %}
 
     {% block head %}
-        {# if the web profiler panel needs some specific JS or CSS files #}
+        {# Optional, if you need your own JS or CSS files. #} 
+        {{ parent() }} {# Use parent() to keep the default styles #}        
     {% endblock %}
 
     {% block menu %}
-        {# the menu content #}
+        {# This left-hand menu appears when using the full-screen profiler. #}
+        <span class="label">
+            <span class="icon"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAcCAQAAADVGmdYAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQffAxkBCDStonIVAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAAHpJREFUOMtj3PWfgXRAuqZd/5nIsIdhVBPFmgqIjCuYOrJsYtz1fxuUOYER2TQID8afwIiQ8YIkI4TzCv5D2AgaWSuExJKMIDbA7EEVhQEWXJ6FKUY4D48m7HYU/EcWZ8JlE6qfMELPDcUJuEMPxvYazYTDWRMjOcUyAEswO+VjeQQaAAAAAElFTkSuQmCC" alt=""/></span>
+            <strong>Example Collector</strong>
+        </span>
     {% endblock %}
 
     {% block panel %}
-        {# the panel content #}
+        {# Optional, for showing the most details. #} 
+        <h2>Example</h2>
+        <p>
+            <em>Major information goes here</em>
+        </p>
     {% endblock %}
 
 Each block is optional. The ``toolbar`` block is used for the web debug