Redesigned the Symfony Profiler

symfony · Sep 14, 2015 · 05773c2 · 05773c2
1 parent 0edcc2e
commit 05773c2
Show file tree

Hide file tree

Showing 42 changed files with 2,547 additions and 1,767 deletions.
diff --git a/src/Symfony/Bridge/Twig/DataCollector/TwigDataCollector.php b/src/Symfony/Bridge/Twig/DataCollector/TwigDataCollector.php
@@ -74,8 +74,20 @@ public function getMacroCount()
     public function getHtmlCallGraph()
     {
         $dumper = new \Twig_Profiler_Dumper_Html();
-
-        return new \Twig_Markup($dumper->dump($this->getProfile()), 'UTF-8');
+        $dump = $dumper->dump($this->getProfile());
+
+        // needed to remove the hardcoded CSS styles
+        $dump = str_replace(array(
+            '<span style="background-color: #ffd">',
+            '<span style="color: #d44">',
+            '<span style="background-color: #dfd">',
+        ), array(
+            '<span class="status-warning">',
+            '<span class="status-error">',
+            '<span class="status-success">',
+        ), $dump);
+
+        return new \Twig_Markup($dump, 'UTF-8');
     }
 
     public function getProfile()

diff --git a/src/Symfony/Bundle/DebugBundle/Resources/views/Profiler/dump.html.twig b/src/Symfony/Bundle/DebugBundle/Resources/views/Profiler/dump.html.twig
@@ -1,15 +1,10 @@
 {% extends '@WebProfiler/Profiler/layout.html.twig' %}
 
 {% block toolbar %}
-    {% set dumps_count = collector.dumpsCount %}
-
-    {% if dumps_count %}
+    {% if collector.dumpsCount %}
         {% 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="M12,22.6c-5.8,0-10.5-4.7-10.5-10.5C1.5,6.3,6.2,1.5,12,1.5s10.5,4.7,10.5,10.5C22.5,17.9,17.8,22.6,12,22.6z M12,4.5c-4.2,0-7.5,3.4-7.5,7.5c0,4.2,3.4,7.5,7.5,7.5s7.5-3.4,7.5-7.5C19.5,7.9,16.2,4.5,12,4.5z"/>
-                <path fill="#AAAAAA" d="M12,9.1c-0.8,0-1.5-0.7-1.5-1.5v-6c0-0.8,0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5v6C13.5,8.4,12.8,9.1,12,9.1zM13.5,22.4v-6c0-0.8-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5v6c0,0.8,0.7,1.5,1.5,1.5S13.5,23.2,13.5,22.4z M23.9,12c0-0.8-0.7-1.5-1.5-1.5h-6c-0.8,0-1.5,0.7-1.5,1.5s0.7,1.5,1.5,1.5h6C23.2,13.5,23.9,12.8,23.9,12z M9.1,12c0-0.8-0.7-1.5-1.5-1.5h-6c-0.8,0-1.5,0.7-1.5,1.5s0.7,1.5,1.5,1.5h6C8.4,13.5,9.1,12.8,9.1,12z"/>
-            </svg>
-            <span class="sf-toolbar-value">{{ dumps_count }}</span>
+            {{ include('@Debug/Profiler/icon.svg') }}
+            <span class="sf-toolbar-value">{{ collector.dumpsCount }}</span>
         {% endset %}
 
         {% set text %}
@@ -28,6 +23,7 @@
                     {% endif %}
                     </span>
                     <span class="sf-toolbar-file-line">line {{ dump.line }}</span>
+
                     {{ dump.data|raw }}
                 </div>
             {% endfor %}
@@ -39,42 +35,18 @@
 {% endblock %}
 
 {% block menu %}
-    <span class="label">
-        <span class="icon">
-        {{- "" -}}
-        <svg width="28" height="28" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve"><path fill="#3F3F3F" d="M28 13h-1.1C26.5 6.6 21.4 1.5 15 1.1V0h-2v1.1C6.6 1.5 1.5 6.6 1.1 13H0v2h1.1C1.5 21.4 6.6 26.5 13 26.9 V28h2v-1.1c6.4-0.5 11.5-5.6 11.9-11.9H28V13z M15 24.9V19h-2v5.9c-5.3-0.5-9.5-4.7-9.9-9.9H9v-2H3.1C3.5 7.7 7.7 3.5 13 3.1V9h2 V3.1c5.3 0.5 9.5 4.7 9.9 9.9H19v2h5.9C24.5 20.3 20.3 24.5 15 24.9z"/></svg>
-        {{- "" -}}
-        </span>
-        <strong>dump()</strong>
-        <span class="count">
-            <span>{{ collector.dumpsCount }}</span>
-        </span>
+    <span class="label {{ collector.dumpsCount == 0 ? 'disabled' }}">
+        <span class="icon">{{ include('@Debug/Profiler/icon.svg') }}</span>
+        <strong>Debug</strong>
     </span>
 {% endblock %}
 
 {% block panel %}
-    <h2>dump()</h2>
+    <h2>Dumped Contents</h2>
 
-    <style>
-        li.sf-dump {
-            list-style-type: disc;
-        }
-        .sf-dump ol>li {
-            padding: 0;
-        }
-        .sf-dump a {
-            cursor: pointer;
-        }
-        .sf-dump-compact {
-            display: none;
-        }
-    </style>
-
-    {% if collector.dumpsCount %}
-        <ul class="alt">
-            {% for dump in collector.getDumps('html') %}
-            <li class="sf-dump sf-reset">
-                in
+    {% for dump in collector.getDumps('html') %}
+        <div class="sf-dump sf-reset">
+            <h3>In
                 {% if dump.line %}
                     {% set link = dump.file|file_link(dump.line) %}
                     {% if link %}
@@ -85,19 +57,22 @@
                 {% else %}
                     {{ dump.name }}
                 {% endif %}
-                line {{ dump.line }}:
-                <a onclick="var s = this.nextElementSibling; if ('sf-dump-compact' == s.className) {this.innerHTML = '&#9660;'; s.className = 'sf-dump-expanded';} else {this.innerHTML = '&#9654;'; s.className = 'sf-dump-compact';}">&#9654;</a>
-                <span class="sf-dump-compact">
-                {% if dump.fileExcerpt %}{{ dump.fileExcerpt|raw }}{% else %}{{ dump.file|file_excerpt(dump.line) }}{% endif %}
-                </span>
+                <small>line {{ dump.line }}</small>
 
-                {{ dump.data|raw }}
-            </li>
-            {% endfor %}
-        </ul>
+                <a class="text-small sf-toggle" data-toggle-selector="#sf-trace-{{ loop.index0 }}" data-toggle-alt-content="Hide code">Show code</a>
+            </h3>
+
+            <div class="sf-dump-compact hidden" id="sf-trace-{{ loop.index0 }}">
+                <div class="trace">
+                    {{ dump.fileExcerpt ? dump.fileExcerpt|raw : dump.file|file_excerpt(dump.line) }}
+                </div>
+            </div>
+
+            {{ dump.data|raw }}
+        </div>
     {% else %}
-        <p>
-            <em>No dumped variable</em>
-        </p>
-    {% endif %}
+        <div class="empty">
+            <p>No content was dumped.</p>
+        </div>
+    {% endfor %}
 {% endblock %}
diff --git a/src/Symfony/Bundle/DebugBundle/Resources/views/Profiler/icon.svg b/src/Symfony/Bundle/DebugBundle/Resources/views/Profiler/icon.svg
diff --git a/src/Symfony/Bundle/SecurityBundle/Resources/views/Collector/icon.svg b/src/Symfony/Bundle/SecurityBundle/Resources/views/Collector/icon.svg
diff --git a/src/Symfony/Bundle/SecurityBundle/Resources/views/Collector/security.html.twig b/src/Symfony/Bundle/SecurityBundle/Resources/views/Collector/security.html.twig
@@ -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 %}
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Controller/ProfilerController.php b/src/Symfony/Bundle/WebProfilerBundle/Controller/ProfilerController.php
@@ -112,6 +112,7 @@ public function panelAction(Request $request, $token)
             'request' => $request,
             'templates' => $this->getTemplateManager()->getTemplates($profile),
             'is_ajax' => $request->isXmlHttpRequest(),
+            'profiler_markup_version' => 2, // 1 = original profiler, 2 = Symfony 2.8+ profiler
         )), 200, array('Content-Type' => 'text/html'));
     }