Skip to content

Redesigned the web debug toolbar #15160

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.

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

Merged
merged 44 commits into from
Jul 31, 2015
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
44 commits
Select commit Hold shift + click to select a range
c2fcadc
Redesigned the web debug toolbar
javiereguiluz Jul 1, 2015
b6f413f
First batch of fixes
javiereguiluz Jul 2, 2015
4eee931
Restored all the code removed by mistake
javiereguiluz Jul 2, 2015
64b8f38
A new batch of updates
javiereguiluz Jul 8, 2015
2735346
Fixed a minor markup error that broke the toolbar
javiereguiluz Jul 8, 2015
51a79c9
Reorder toolbar panels
javiereguiluz Jul 8, 2015
ef53850
More fixes and tweaks
javiereguiluz Jul 8, 2015
fac5391
Lots of minor improvements
javiereguiluz Jul 8, 2015
acee052
Finished the Ajax panel redesign
javiereguiluz Jul 8, 2015
af3dcb2
Minor Ajax tweaks
javiereguiluz Jul 8, 2015
041d424
Improved the Security toolbar panel
javiereguiluz Jul 9, 2015
77d522a
Tweaked the translation panel
javiereguiluz Jul 9, 2015
c0bee9b
Tweaked the Twig panel
javiereguiluz Jul 9, 2015
2bccdd4
Minor CSS fixes
javiereguiluz Jul 9, 2015
b25b6dd
Finished "dump" panel and other minor tweaks
javiereguiluz Jul 9, 2015
9d89841
Finished the toolbar redesign
javiereguiluz Jul 9, 2015
e14fb6d
Fixed a minor syntax issue
javiereguiluz Jul 9, 2015
7c35d25
Fixed another insignificant syntax issue
javiereguiluz Jul 9, 2015
23dc884
Fixed a potential issue in the request panel
javiereguiluz Jul 9, 2015
e28f895
A very high z-index value is required to avoid issues in the profiler…
javiereguiluz Jul 9, 2015
cd53210
Fixed another z-index issue
javiereguiluz Jul 10, 2015
0dfcb60
Fixed an issue with the Config panel in the Profiler view
javiereguiluz Jul 10, 2015
9e38a8a
Minor CSS tweaks and made font sizes bigger
javiereguiluz Jul 10, 2015
f087ac0
More vertical aligning fixes
javiereguiluz Jul 10, 2015
3ab2e20
fixed all vertical aligning issues and tweaked icons
javiereguiluz Jul 14, 2015
9b585b9
Made the close icon a bit smaller
javiereguiluz Jul 14, 2015
e94a6a0
Smaller font sizes for smartphones, fixed request status padding issue
javiereguiluz Jul 20, 2015
002dda5
Fixed toolbar issues when displaying it inside the profiler
javiereguiluz Jul 20, 2015
a0e03f6
Minor tweaks
javiereguiluz Jul 20, 2015
1847285
Pass the toolbar version number from the controller, to ease transiti…
javiereguiluz Jul 20, 2015
ebb44e4
Added some styles to make old panels look better in the new design
javiereguiluz Jul 20, 2015
972a92e
Misc. tweaks and improvements
javiereguiluz Jul 22, 2015
084cca6
Minor JavaScript optimizations
javiereguiluz Jul 22, 2015
7ec1cd4
Reverted the feature to display different toolbar versions
javiereguiluz Jul 27, 2015
2fb3319
Removed an unused import
javiereguiluz Jul 30, 2015
5070861
Added a new profiler_markup_version to improve BC of the new toolbar
javiereguiluz Jul 30, 2015
22f6bc5
Removed an useless CSS class and added styles for <hr>
javiereguiluz Jul 30, 2015
9df0f8b
Added some upgrade notes about the new toolbar design
javiereguiluz Jul 31, 2015
597637e
Tweaks and bug fixes
javiereguiluz Jul 31, 2015
7d92cb8
Restored the old behavior for toolbars with lots of elements
javiereguiluz Jul 31, 2015
b438ee5
Redesigned "abbr" elements
javiereguiluz Jul 31, 2015
b3ad83d
Removed an unused media query
javiereguiluz Jul 31, 2015
f237ff1
Increased the z-index of .sf-toolbar-info
javiereguiluz Jul 31, 2015
5a571b6
Reordered the toolbar elements via service priorities
javiereguiluz Jul 31, 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
Tweaked the translation panel
  • Loading branch information
javiereguiluz committed Jul 30, 2015
commit 77d522a8cb56219bcd6309af7958b95d0c821f98
Original file line number Diff line number Diff line change
Expand Up @@ -90,9 +90,11 @@
{% if collector.symfonyversion is defined %}
<div class="sf-toolbar-info-piece">
<b>Resources</b>
<a href="https://symfony.com/doc/{{ collector.symfonyversion }}/index.html" rel="help">
Read Symfony {{ collector.symfonyversion }} Docs
</a>
<span>
<a href="https://symfony.com/doc/{{ collector.symfonyversion }}/index.html" rel="help">
Read Symfony {{ collector.symfonyversion }} Docs
</a>
</span>
</div>
{% endif %}
{% endset %}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,32 +5,33 @@
{% block toolbar %}
{% if collector.messages|length %}
{% set icon %}
<svg width="28" height="28" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 417 300" enable-background="new 0 0 417 300" xml:space="preserve"><g id="Layer_1_1_"><g id="outline_1_"><path fill="#B5B5B6" d="M275.9,145c0,18.2-14.799,33-33,33H120.701l-36.3,42l-0.3-42H40c-18.2,0-33-14.8-33-33V44c0-18.2,14.8-33,33-33h202.9c18.199,0,33,14.8,33,33V145L275.9,145z"></path></g><g enable-background="new"><path fill="#FFFFFF" d="M194.501,146.962h-23.898l-9.5-24.715h-43.492l-8.98,24.715H85.326l42.379-108.805h23.23L194.501,146.962zM154.052,103.915L139.06,63.54l-14.695,40.375H154.052z"></path></g></g><g id="Layer_2_1_"><g id="japanese"><g id="outline"><path fill="#414141" d="M141.451,214c0,18.2,14.8,33,33,33h122.2l36.301,42l0.301-42h44.1c18.201,0,33-14.8,33-33V113c0-18.2-14.799-33-33-33H174.453c-18.201,0-33,14.8-33,33L141.451,214L141.451,214z"></path></g><g enable-background="new"><path fill="#FFFFFF" d="M312.158,143.327c-0.455,1.672-0.912,3.344-1.215,5.016c22.039,6.08,31.766,21.431,31.766,38.455c0,24.318-18.238,40.733-57.301,45.598c-1.217-3.952-5.016-11.248-7.904-15.352c27.359-3.04,45.295-12.159,45.295-29.791c0-5.016-1.672-16.871-18.088-22.19c-6.688,15.199-16.871,29.335-28.727,39.519c0.607,1.976,1.367,3.647,2.127,5.167l-15.654,10.032c-0.76-1.521-1.52-3.192-2.129-5.017c-7.6,4.256-15.959,6.992-24.471,6.992c-13.375,0-22.189-8.512-22.189-22.647c0-20.975,16.111-37.542,37.693-46.357c-0.305-6.536-0.305-13.223-0.305-20.215c-11.398,0.304-23.711,0.608-29.789,0.456l-0.912-17.783c6.99,0.152,19.758,0.152,31.006,0.152c0.305-6.536,0.457-14.135,0.76-20.519l23.863,1.824c-0.305,1.52-1.52,2.736-4.104,3.04c-0.457,4.408-0.76,10.184-1.217,15.047c16.568-0.76,37.391-2.736,54.262-6.384l1.672,18.391c-16.719,3.04-38.605,4.56-56.846,5.168c-0.15,5.319-0.303,10.487-0.303,15.503c6.383-1.52,15.654-2.432,22.799-1.976c0.607-2.28,1.063-4.56,1.215-6.84L312.158,143.327z M255.77,198.044c-1.672-8.056-2.736-17.479-3.496-27.814c-12.008,5.927-20.215,15.199-20.215,25.382c0,8.664,6.535,8.36,8.512,8.209C245.281,203.668,250.449,201.539,255.77,198.044zM286.473,162.021c-2.129-0.304-10.033,0.305-16.871,2.128c0.455,7.6,0.91,14.591,1.975,20.671C277.504,178.589,282.672,170.686,286.473,162.021z"></path></g></g></g></svg>

{{ include('@WebProfiler/Icon/translation.svg.twig') }}
{% set status_color = collector.countMissings ? 'red' : collector.countFallbacks ? 'yellow' : '' %}
{% set error_count = collector.countMissings + collector.countFallbacks %}
<span class="sf-toolbar-value">{{ error_count ?: collector.countdefines }}</span>
{% endset %}

{% set text %}
{% if collector.countMissings %}
<div class="sf-toolbar-info-piece">
<b>Missing messages</b>
<span class="sf-toolbar-status sf-toolbar-status-red">{{ collector.countMissings }}</span>
</div>
{% endif %}
{% if collector.countFallbacks %}
<div class="sf-toolbar-info-piece">
<b>Fallback messages</b>
<span class="sf-toolbar-status sf-toolbar-status-yellow">{{ collector.countFallbacks }}</span>
</div>
{% endif %}
{% if collector.countdefines %}
<div class="sf-toolbar-info-piece">
<b>Defined messages</b>
<span class="sf-toolbar-status sf-toolbar-status-green">{{ collector.countdefines }}</span>
</div>
{% endif %}
<div class="sf-toolbar-info-piece">
<b>Missing messages</b>
<span class="sf-toolbar-status sf-toolbar-status-{{ collector.countMissings ? 'red' }}">
{{ collector.countMissings|default(0) }}
Copy link
Member

Choose a reason for hiding this comment

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

useless default filter. It is always defined and always return an integer

</span>
</div>

<div class="sf-toolbar-info-piece">
<b>Fallback messages</b>
<span class="sf-toolbar-status sf-toolbar-status-{{ collector.countFallbacks ? 'yellow' }}">
{{ collector.countFallbacks|default(0) }}
Copy link
Member

Choose a reason for hiding this comment

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

useless default filter. It is always defined and always return an integer

</span>
</div>

<div class="sf-toolbar-info-piece">
<b>Defined messages</b>
Copy link
Member

Choose a reason for hiding this comment

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

the text can be confusing here. These are the defined messages among the translations being used. you can have much more defined messages in your translation file

Copy link
Member Author

Choose a reason for hiding this comment

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

The title can be improved, but it's the same title that Symfony has used since the beginning and the profiler uses too. I guess it's better not to change it in this PR.

Copy link
Member Author

Choose a reason for hiding this comment

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

By the way, I'm getting this error when I click on the "i18n" icon to open the "i18n" profiler:

i18n_profiler

This error occurs in some code which hasn't been modified by this PR. What should we do? Maybe @aitboudad can help us spotting the problem.

Copy link
Member

Choose a reason for hiding this comment

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

@javiereguiluz I see 2 possible causes here:

  • you are using some data profiled on Symfony 2.7 (or with 2.8 before the merge of [Translation] Add parameters to DataCollectorTranslator #15139) and viewing it on Symfony 2.8. This is not supported. We don't preserve BC on profile data to ensure that templates can display old data where we could have less things (we preserve BC on available data so that code reading data will still work). The template requires the 2.8+ data
  • you are using the Translator component at version 2.7, and so collected data look like the 2.7 ones

Copy link
Member Author

Choose a reason for hiding this comment

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

@stof thanks. It was one of the problems that you explained. Everything is right now :)

Copy link
Member

Choose a reason for hiding this comment

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

The title can be improved, but it's the same title that Symfony has used since the beginning

this actually means "that Symfony is using in 2.7" as this panel is new in 2.7

<span class="sf-toolbar-status">{{ collector.countdefines|default(0) }}</span>
Copy link
Member

Choose a reason for hiding this comment

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

useless default filter. It is always defined and always return an integer

</div>
{% endset %}

{{ include('@WebProfiler/Profiler/toolbar_item.html.twig', { link: profiler_url, status: status_color }) }}
{% endif %}
{% endblock %}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<svg width="24" height="28" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 24 28" enable-background="new 0 0 24 28" xml:space="preserve"><polygon fill="#AAA" points="18.4,3.8 12.8,9.4 16.3,9.4 16.3,21.1 14.1,21.1 9.9,25.3 16.3,25.3 20.5,25.3 20.5,21.1 20.5,9.4 23.9,9.4"/><polygon fill="#AAA" points="5.6,25.3 11.2,19.7 7.7,19.7 7.7,8 9.9,8 14.1,3.8 7.7,3.8 3.5,3.8 3.5,8 3.5,19.7 0.1,19.7"/></svg>
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="#AAA" d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z" /></svg>
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<svg width="26" height="28" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 26 28" enable-background="new 0 0 26 28" xml:space="preserve"><path fill="#FFFFFF" d="M13 0C5.8 0 0 5.8 0 13c0 7.2 5.8 13 13 13c7.2 0 13-5.8 13-13C26 5.8 20.2 0 13 0z M20 7.5 c-0.6 0-1-0.3-1-0.9c0-0.2 0-0.4 0.2-0.6c0.1-0.3 0.2-0.3 0.2-0.4c0-0.3-0.5-0.4-0.7-0.4c-2 0.1-2.5 2.7-2.9 4.8l-0.2 1.1 c1.1 0.2 1.9 0 2.4-0.3c0.6-0.4-0.2-0.8-0.1-1.3C18 9.2 18.4 9 18.7 8.9c0.5 0 0.8 0.5 0.8 1c0 0.8-1.1 2-3.3 1.9 c-0.3 0-0.5 0-0.7-0.1L15 14.1c-0.4 1.7-0.9 4.1-2.6 6.2c-1.5 1.8-3.1 2.1-3.8 2.1c-1.3 0-2.1-0.6-2.2-1.6c0-0.9 0.8-1.4 1.3-1.4 c0.7 0 1.2 0.5 1.2 1.1c0 0.5-0.2 0.6-0.4 0.7c-0.1 0.1-0.3 0.2-0.3 0.4c0 0.1 0.1 0.3 0.4 0.3c0.5 0 0.9-0.3 1.2-0.5 c1.3-1 1.7-2.9 2.4-6.2l0.1-0.8c0.2-1.1 0.5-2.3 0.8-3.5c-0.9-0.7-1.4-1.5-2.6-1.8c-0.8-0.2-1.3 0-1.7 0.4C8.4 10 8.6 10.7 9 11.1 l0.7 0.7c0.8 0.9 1.3 1.7 1.1 2.7c-0.3 1.6-2.1 2.8-4.3 2.1c-1.9-0.6-2.2-1.9-2-2.7c0.2-0.6 0.7-0.8 1.2-0.6 c0.5 0.2 0.7 0.8 0.6 1.3c0 0.1 0 0.1-0.1 0.3C6 15 5.9 15.2 5.9 15.3c-0.1 0.4 0.4 0.7 0.8 0.8c0.8 0.3 1.7-0.2 1.9-0.9 c0.2-0.6-0.2-1.1-0.4-1.2l-0.8-0.9c-0.4-0.4-1.2-1.5-0.8-2.8c0.2-0.5 0.5-1 0.9-1.4c1-0.7 2-0.8 3-0.6c1.3 0.4 1.9 1.2 2.8 1.9 c0.5-1.3 1.1-2.6 2-3.8c0.9-1 2-1.7 3.3-1.8C20 4.8 21 5.4 21 6.3C21 6.7 20.8 7.5 20 7.5z"/></svg>
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<svg width="28" height="28" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 417 300" enable-background="new 0 0 417 300" xml:space="preserve"><g id="Layer_1_1_"><g id="outline_1_"><path fill="#B5B5B6" d="M275.9,145c0,18.2-14.799,33-33,33H120.701l-36.3,42l-0.3-42H40c-18.2,0-33-14.8-33-33V44c0-18.2,14.8-33,33-33h202.9c18.199,0,33,14.8,33,33V145L275.9,145z"></path></g><g enable-background="new"><path fill="#FFFFFF" d="M194.501,146.962h-23.898l-9.5-24.715h-43.492l-8.98,24.715H85.326l42.379-108.805h23.23L194.501,146.962zM154.052,103.915L139.06,63.54l-14.695,40.375H154.052z"></path></g></g><g id="Layer_2_1_"><g id="japanese"><g id="outline"><path fill="#414141" d="M141.451,214c0,18.2,14.8,33,33,33h122.2l36.301,42l0.301-42h44.1c18.201,0,33-14.8,33-33V113c0-18.2-14.799-33-33-33H174.453c-18.201,0-33,14.8-33,33L141.451,214L141.451,214z"></path></g><g enable-background="new"><path fill="#FFFFFF" d="M312.158,143.327c-0.455,1.672-0.912,3.344-1.215,5.016c22.039,6.08,31.766,21.431,31.766,38.455c0,24.318-18.238,40.733-57.301,45.598c-1.217-3.952-5.016-11.248-7.904-15.352c27.359-3.04,45.295-12.159,45.295-29.791c0-5.016-1.672-16.871-18.088-22.19c-6.688,15.199-16.871,29.335-28.727,39.519c0.607,1.976,1.367,3.647,2.127,5.167l-15.654,10.032c-0.76-1.521-1.52-3.192-2.129-5.017c-7.6,4.256-15.959,6.992-24.471,6.992c-13.375,0-22.189-8.512-22.189-22.647c0-20.975,16.111-37.542,37.693-46.357c-0.305-6.536-0.305-13.223-0.305-20.215c-11.398,0.304-23.711,0.608-29.789,0.456l-0.912-17.783c6.99,0.152,19.758,0.152,31.006,0.152c0.305-6.536,0.457-14.135,0.76-20.519l23.863,1.824c-0.305,1.52-1.52,2.736-4.104,3.04c-0.457,4.408-0.76,10.184-1.217,15.047c16.568-0.76,37.391-2.736,54.262-6.384l1.672,18.391c-16.719,3.04-38.605,4.56-56.846,5.168c-0.15,5.319-0.303,10.487-0.303,15.503c6.383-1.52,15.654-2.432,22.799-1.976c0.607-2.28,1.063-4.56,1.215-6.84L312.158,143.327z M255.77,198.044c-1.672-8.056-2.736-17.479-3.496-27.814c-12.008,5.927-20.215,15.199-20.215,25.382c0,8.664,6.535,8.36,8.512,8.209C245.281,203.668,250.449,201.539,255.77,198.044zM286.473,162.021c-2.129-0.304-10.033,0.305-16.871,2.128c0.455,7.6,0.91,14.591,1.975,20.671C277.504,178.589,282.672,170.686,286.473,162.021z"></path></g></g></g></svg>
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<img height="28" alt="Twig" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAcCAYAAACOGPReAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAbElEQVRIx2NgGAXUBowMDAwMaWlp/6ll4KxZsxhZYJy0tDRqGMjAwMDAwEQL77OgCxSXlJBsSG9PDwqfJi6lj/fRvTJ4XYocUTBXE4q8oRtRRBnKwsw8RFw6fA0lKkd1dnYOIpfCCthRMIIAAI0IFu9Hxh7ZAAAAAElFTkSuQmCC" />
Original file line number Diff line number Diff line change
Expand Up @@ -193,18 +193,17 @@
}

.sf-toolbar-block .sf-toolbar-status-green {
background-color: #759e1a;
background-color: rgba(117, 158, 43, 0.8);
}
.sf-toolbar-block .sf-toolbar-status-red {
background-color: rgba(200, 0, 0, 0.8);
background-color: rgba(200, 43, 43, 0.8);
}
.sf-toolbar-block .sf-toolbar-status-yellow {
background-color: #ffcc00;
color: #000;
background-color: rgba(255, 158, 43, 0.8);
}

.sf-toolbar-block.sf-toolbar-status-green {
background-color: #759e1a;
background-color: rgba(117, 158, 43, 0.8);
color: #FFF;
}
.sf-toolbar-block.sf-toolbar-status-red {
Expand All @@ -215,7 +214,7 @@
fill: #FFF;
}
.sf-toolbar-block.sf-toolbar-status-yellow {
background-color: rgba(255,158,43, 0.8);
background-color: rgba(255, 158, 43, 0.8);
color: #FFF;
}

Expand Down
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy