8000 Redesigned the Symfony Profiler by javiereguiluz · Pull Request #15523 · symfony/symfony · GitHub
[go: up one dir, main page]
Skip to content

Redesigned the Symfony Profiler #15523

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 42 commits into from
Closed

Redesigned the Symfony Profiler #15523

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
b267347
Redesigned most of the Symfony Profiler panels
javiereguiluz Aug 12, 2015
4e66c45
Added some missing SVG icons
javiereguiluz Aug 12, 2015
b7f604c
Highlight the line of code which caused the exception
javiereguiluz Aug 12, 2015
3cdf546
CSS tweaks to fix some reported issues
8000 javiereguiluz Aug 12, 2015
0a58431
A new round of tweaks and fixes
javiereguiluz Aug 13, 2015
9dc561c
Redesigned the "debug/dump" panel and other minor tweaks
javiereguiluz Aug 13, 2015
10f1fbb
Replaced the CSS-based tabs by proper JavaScript-based tabs
javiereguiluz Aug 14, 2015
a5f367c
First version of the redesigned Form panel
javiereguiluz Aug 17, 2015
6ca6b2f
Added the new icons, made the sidebar narrower, added badges in the
javiereguiluz Aug 19, 2015
22841fc
More design tweaks
javiereguiluz Aug 21, 2015
7cbced0
Refactored the "summary" section and redesigned all the profiler erro…
javiereguiluz Aug 21, 2015
50a60d5
Refactored the JavaScript code that creates the tabs
javiereguiluz Aug 21, 2015
656739e
Added a "toggle" utility
javiereguiluz Aug 21, 2015
b3aa953
Refactored the JavaScript code, used toggles in the Dump panel and
javiereguiluz Aug 23, 2015
376f1be
Finished the redesign of the Symfony Profiler
javiereguiluz Aug 24, 2015
3f6f747
Tweaks as per Stof's review and comments
javiereguiluz Aug 25, 2015
ab133e1
Minor tweaks for the Form panel
javiereguiluz Aug 25, 2015
904c618
Allow a toggle to define if its related content is displayed by default
javiereguiluz Aug 25, 2015
8a2a7cd
Replaced a randomly-generated ID by the real log index
javiereguiluz Aug 25, 2015
4e81feb
Lots of minor tweaks
javiereguiluz Aug 25, 2015
688e3f7
Minor JavaScript changes
javiereguiluz Aug 25, 2015
e47339b
Fixed the title of all panels and fixed some JavaScript issues
javiereguiluz Aug 26, 2015
3ac9100
Refactored some JavaScript code
javiereguiluz Aug 26, 2015
edb5e5e
Improved the vertical spacing of tabbed navigation
javiereguiluz Aug 26, 2015
4139c6b
Minor JavaScript change
javiereguiluz Aug 26, 2015
14b7cf5
More CSS tweaks to polish profiler panels
javiereguiluz Aug 26, 2015
a1d2e24
Redesigned the search results page
javiereguiluz Aug 27, 2015
489fbd6
Improved the timeline graphics and allowed panels to define their pag…
javiereguiluz Aug 27, 2015
437a67b
Simplified the management of the profiler panel titles
javiereguiluz Aug 28, 2015
72a64e3
Added some metrics about sub-requests in the performance panel
javiereguiluz Aug 28, 2015
f79894f
Fixed some CSS issues in Firefox
javiereguiluz Sep 1, 2015
2b55b9b
Allow to disable tabs, tweaked tables layout and other minor tweaks
javiereguiluz Sep 1, 2015
79f7297
Display the listener priority in the events panel
javiereguiluz Sep 3, 2015
50d5f59
Add a check to avoid errors for special pages (exceptions for example)
javiereguiluz Sep 3, 2015
14e725f
Fixed some test for the TraceableEventDispatcher changes
javiereguiluz Sep 3, 2015
b254b69
Sort uncalled events by priority
javiereguiluz Sep 3, 2015
67ef234
Grouped listeners by event in the events panel
javiereguiluz Sep 3, 2015
f971509
Fixed an HTML markup issue for the new events panel
javiereguiluz Sep 3, 2015
ac6f79a
Adjusted the logger panel after the grouping of related deprecations
javiereguiluz Sep 7, 2015
ac63334
Tweaked the logger panel stack trace contents
javiereguiluz Sep 7, 2015
a808fa5
Tweaked the toolbar for Silex 2
javiereguiluz Sep 7, 2015
73809a8
Removed the app.request... call to make it compatible with Silex
javiereguiluz Sep 7, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Improved the timeline graphics and allowed panels to define their pag… 
…e titles
  • Loading branch information
@javiereguiluz
javiereguiluz committed Sep 7, 2015
commit 489fbd60fd0645a4281b3e3b7c637b1991f941b9
2 changes: 2 additions & 0 deletions src/Symfony/Bundle/DebugBundle/Resources/views/Profiler/dump.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{% extends '@WebProfiler/Profiler/layout.html.twig' %}

{% block page_title 'Debug' %}

{% block toolbar %}
{% if collector.dumpsCount %}
{% set icon %}
Expand Down
4 changes: 3 additions & 1 deletion src/Symfony/Bundle/SecurityBundle/Resources/views/Collector/security.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 %}
Expand Down Expand Up @@ -46,7 +48,7 @@
{% endblock %}

{% block menu %}
<span class="label {{ not collector.enabled ? 'disabled' }}">
<span class="label {{ not collector.enabled or not collector.tokenClass ? 'disabled' }}">
<span class="icon">{{ include('@Security/Collector/icon.svg') }}</span>
<strong>Security</strong>
</span>
Expand Down
4 changes: 3 additions & 1 deletion src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/config.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{% extends '@WebProfiler/Profiler/layout.html.twig' %}

{% block page_title 'Configuration' %}

{% block toolbar %}
{% if 'unknown' == collector.symfonyState %}
{% set block_status = '' %}
Expand Down Expand Up @@ -106,7 +108,7 @@
{% block menu %}
<span class="label label-status-{{ collector.symfonyState == 'eol' ? 'red' : collector.symfonyState in ['eom', 'dev'] ? 'yellow' : '' }}">
<span class="icon">{{ include('@WebProfiler/Icon/config.svg') }}</span>
<strong>Config</strong>
<strong>Configuration</strong>
</span>
{% endblock %}

Expand Down
2 changes: 2 additions & 0 deletions src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/events.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{% extends '@WebProfiler/Profiler/layout.html.twig' %}

{% block page_title 'Events' %}

{% import _self as helper %}

{% block menu %}
Expand Down
2 changes: 2 additions & 0 deletions src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/exception.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{% extends '@WebProfiler/Profiler/layout.html.twig' %}

{% block page_title 'Exceptions' %}

{% block head %}
{% if collector.hasexception %}
<style>
Expand Down
2 changes: 2 additions & 0 deletions src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{% extends '@WebProfiler/Profiler/layout.html.twig' %}

{% block page_title 'Forms' %}

{% from _self import form_tree_entry, form_tree_details %}

{% block toolbar %}
Expand Down
2 changes: 2 additions & 0 deletions src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/logger.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{% extends '@WebProfiler/Profiler/layout.html.twig' %}

{% block page_title 'Logs' %}

{% import _self as helper %}

{% block toolbar %}
Expand Down
2 changes: 2 additions & 0 deletions src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/request.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{% extends '@WebProfiler/Profiler/layout.html.twig' %}

{% block page_title 'Request/Response' %}

{% block toolbar %}
{% set request_handler %}
{% if collector.controller.class is defined %}
Expand Down
5 changes: 3 additions & 2 deletions src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/router.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
{% extends '@WebProfiler/Profiler/layout.html.twig' %}

{% block toolbar %}
{% endblock %}
{% block page_title 'Routing' %}

{% block toolbar %}{% endblock %}

{% block menu %}
<span class="label">
Expand Down
22 changes: 13 additions & 9 deletions src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/time.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{% extends '@WebProfiler/Profiler/layout.html.twig' %}

{% block page_title 'Performance' %}

{% import _self as helper %}

{% if colors is not defined %}
Expand All @@ -11,7 +13,6 @@
'template': '#66CC00',
'doctrine': '#FF6633',
'propel': '#FF6633',
'sub_requests': '#F0F0F0',
} %}
{% endif %}

Expand Down Expand Up @@ -93,22 +94,20 @@
Sub-Request {{ profile.getcollector('request').requestattributes.get('_controller') }}
<small>
{{ collector.events.__section__.duration }} ms
<br/>
<a href="{{ path('_profiler', { token: profile.parent.token, panel: 'time' }) }}">Return to parent request</a>
<a class="newline" href="{{ path('_profiler', { token: profile.parent.token, panel: 'time' }) }}">Return to parent request</a>
</small>
</h3>
{% elseif profile.children|length > 0 %}
<h3>
Main Request
<small>
{{ collector.events.__section__.duration }} ms
</small>
Main Request <small>{{ collector.events.__section__.duration }} ms</small>
</h3>
{% endif %}

{{ helper.display_timeline('timeline_' ~ token, collector.events, colors) }}

{% if profile.children|length %}
<p class="help">Note: sections with a striped background correspond to sub-requests.</p>

{% for child in profile.children %}
{% set events = child.getcollector('time').events %}
<h3>
Expand Down Expand Up @@ -255,7 +254,12 @@
var timelineHeadPosition = x + period.start * ratio;

if (isChildEvent(event)) {
ctx.fillStyle = colors.sub_requests;
/* create a striped background dynamically */
var img = new Image();
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKBAMAAAB/HNKOAAAAIVBMVEX////w8PDd7h7d7h7d7h7d7h7w8PDw8PDw8PDw8PDw8PAOi84XAAAAKUlEQVQImWNI71zAwMBQMYuBgY0BxExnADErGEDMTgYQE8hnAKtCZwIAlcMNSR9a1OEAAAAASUVORK5CYII=';
var pattern = ctx.createPattern(img, 'repeat');

ctx.fillStyle = pattern;
ctx.fillRect(timelineHeadPosition, 0, (period.end - period.start) * ratio, canvasHeight);
} else if (isSectionEvent(event)) {
var timelineTailPosition = x + period.end * ratio;
Expand Down Expand Up @@ -300,7 +304,7 @@
var timelineHeadPosition = x + period.start * ratio;

if (!isSectionEvent(event)) {
ctx.fillRect(timelineHeadPosition, h + 3, 2, 6);
ctx.fillRect(timelineHeadPosition, h + 3, 2, 8);
ctx.fillRect(timelineHeadPosition, h, (period.end - period.start) * ratio || 2, 6);
} else {
var timelineTailPosition = x + period.end * ratio;
Expand Down
2 changes: 2 additions & 0 deletions src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/translation.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{% extends '@WebProfiler/Profiler/layout.html.twig' %}

{% block page_title 'Translation' %}

{% import _self as helper %}

{% block toolbar %}
Expand Down
2 changes: 2 additions & 0 deletions src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/twig.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{% extends '@WebProfiler/Profiler/layout.html.twig' %}

{% block page_title 'Twig' %}

{% block toolbar %}
{% set time = collector.templatecount ? '%0.0f'|format(collector.time) : 'n/a' %}
{% set icon %}
Expand Down
5 changes: 1 addition & 4 deletions src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,7 @@
<meta name="robots" content="noindex,nofollow" />
<title>
{% block title %}
{{ app.request.query.has('panel') ? app.request.query.get('panel')|title|replace({
'Request': 'Request/Response', 'Time': 'Performance', 'Logger': 'Logs', 'Router': 'Routing',
'Form': 'Forms', 'Swiftmailer': 'E-mails', 'Db': 'Doctrine', 'Dump': 'Debug'
}) ~ ' | ' }} Symfony Profiler
{{ block('page_title')|default(app.request.query.get('panel', '')|title) }} (Symfony Profiler)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this will cause double escaping of the page_title (once inside the block, and once here escaping the output of the block)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've made several tests and it seems to work as expected:

{% block page_title 'Request & Response' %}

title_1

{% block page_title 'Request & "Response"' %}

title_2

{% block page_title 'Request <em>and</em> Response' %}

title_3

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the simpler implementation would simply to make app.request.query.get('panel', '')|title the default content of the block

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh, and the block does not seem to be defined in this template

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm, this is because your block is a constant string, not a variable, and so it is safe for auto-escaping. So it works currently only because of the double auto-escaping, but would break when using variables in the page_title.

93C6 Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What would you think if we keep Symfony Profiler as the title of any profiler page? It would simplify things a lot and a customized title doesn't provide much value. In fact, a customized title could make the profiler pages harder to find when you have lots of tabs opened.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

totally fine with me

{% endblock %}
</title>
<link rel="icon" type="image/x-icon" sizes="16x16" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAFEUlEQVR4AZVXA4wm2RMf27bXDM/+3/+sYBGfrbVtezc6BWtzfPbYXtvDL9906t6v0vWl05me7q1JzXuvvu4yXnvZgJ9hH6bwZYXLFR739vauUGuDwhq1L1N4Uv/tRYUhFjwcg49hn6aYr1V4TiGp86CoP9Oh1tV414KnM6t9fHymKUZ3DAI0hW4b1AyK3lE8phh5OxWeoJgUGhi5mLm95YzBwcHuhIQEV1JSEoWGhoKWHxYWFmenhJ/B5W0GwZpDt5Ovry9lZWWRyWOu5ORk7JsUpogsq5gnmISTU+HKQoLFQv/qq6/os88+I+EVFRUlSsRZ5oRiVmwlXMWShQkahUdERJCfnx/vd+3aRTU1NXTixAmqrq6mK1eu0PTp05mnrmD+QK6XhLO0XP2O2FJAQICRjjMU4P1PP/1EfX19NGfOHM8Z0N7ezueQkBBXYGAgSWIaQ5Em2T5QzFNSUig9PV3OHOe4uDjZ87p//34C7Nm7x/NcRUUFAX799Vec8Y7m7+8Pz92SfBDXr7VwPYRbxn/MmDG8Tps2jQBd3V30/PPPe35/6qmnaPXq1TR69Gg+h4eHiwwosdLT4dBkQDSXWmJiIq/vv/8+/fvvv3ThwgWqr6+n/Px8oyCmAerq6jy03Nxc2Yv7ySSjQzrmi4i92fVpaWlYOZ79/f2MW7dtpSlTptDp06epo6ODPvroI850ASiGdyZOnEjXrl2jyspKT4XA9cgjkaPL/D8UWG62HokieyQQoKSkRGiMs2bNotraWmprayOBNWvWyO+scGdnp5zF/WYvLEb8TwpRykp1MV7feust6uzqJMD169fpueeeY/rDDz/MKzzgdrsJoGkaffvtt/TFF19wQsIDmzZtssojt+6Fo1CgzKiAvAB3DRs2jAULtLS0eErPGB5Ad3c3lZaWUnFxMfeAd955h5+JjY3FaqXAPwhBnRCNySK4b98+Aoilv/z6i/zGggSk1g0opWupAMvGP91yt96zadWqVdTc3Ezz58/31LOAy+US6zgHBP766y+mDR8+HBUgFWSnQI2EAFnqlpcaGxsJIFkMN8L9AnPnzmX6jRs3SACeAi0vL888JwYPgTEJpauhnADo6/LSgQMHCHD37l2Cp15//XXq7eslgKb+Fi1exM9lZmbaCDclIcpQQhATE4OVsrOzuamg+cyePZuzG64Hrlu3jp9ZuWolCdy+fZueeOIJpkdHR1sLHqgM0Yh0bTRz1m7fvp2KiopYkYKCApo8ebLZIwzlFeXSOXEnsLPe2Ij+p5DbYYdOdOtDQ0rNjFya5sTcsGGDcTDZoXTcNoVBMoxWyzDS2yXmOyeUtGSskmDjx4/nRgPAfBDmMpZtUIbRcsi2GsfSD2QYyd2OcdmyZSSwdu1apuXk5GB16v4bak0yX0imyIUEgwNovFTglhMZGcm0srIy43zAVUxuTLbW4xn17Fci23wly9dngUummrTaixcvMpOtW7fiiBwQpqKYU9efHuxDJE5hC9wvL9TW1RLg+PHjPGTQ8wsLC4WpDC5Y5UR4k5qKMSLT6lqeAiX0nuAaMmSI9sMPP9CZM2foyJEj9O677wpTVIuTjidNp0HibvttoH9E5OMqbWKkSaNSlojldoLF7TEP+nUEmKI62y1kOBINbVaNarcI0PuGGUlHyfYvLHg7/jhFSFYqZh0P8KHSptd5ksOPU3tvqAEUot/hFmOIYJLp87wGe9Dwm95eg5xa/R8G6d8U5EcFhwAAAABJRU5ErkJggg==">
Expand Down
2 changes: 2 additions & 0 deletions src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/info.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@
}
} %}

{% block page_title %}{{ messages[about].status|title }}{% endblock %}

{% block summary %}
<div class="status status-{{ messages[about].status }}">
<div class="container">
Expand Down
5 changes: 4 additions & 1 deletion src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,7 @@ table tbody div {
background: rgba(240, 181, 24, 0.3);
}
.status-error {
background: rgba(176, 65, 62, 0.1);
background: rgba(176, 65, 62, 0.2);
}
.status-success td,
.status-warning td,
Expand Down Expand Up @@ -677,6 +677,9 @@ body#search h3 {
background: #FFF;
margin: .5em 0;
}
.sf-profiler-timeline + p.help {
margin-top: 0;
}

{# Tabbed navigation
========================================================================= #}
Expand Down
2 changes: 2 additions & 0 deletions src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/results.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{% extends '@WebProfiler/Profiler/layout.html.twig' %}

{% block page_title 'Search results' %}

{% block summary %}
<div class="status">
<div class="container">
Expand Down
16 changes: 9 additions & 7 deletions src/Symfony/Bundle/WebProfilerBundle/Resources/views/Router/panel.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,16 @@
{% endif %}
</div>

<h3>Route Parameters</h3>
{% if request.route %}
<h3>Route Parameters</h3>

{% if request.routeParams is empty %}
<div class="empty">
<p>No parameters.</p>
</div>
{% else %}
{{ include('@WebProfiler/Profiler/table.html.twig', { data: request.routeParams, labels: ['Name', 'Value'] }, with_context = false) }}
{% if request.routeParams is empty %}
<div class="empty">
<p>No parameters.</p>
</div>
{% else %}
{{ include('@WebProfiler/Profiler/table.html.twig', { data: request.routeParams, labels: ['Name', 'Value'] }, with_context = false) }}
{% endif %}
{% endif %}

{% if router.redirect %}
Expand Down
0