8000 [DX] [TwigBundle] Enhance the new exception page design by sustmi · Pull Request #22439 · symfony/symfony · GitHub
[go: up one dir, main page]
Skip to content

[DX] [TwigBundle] Enhance the new exception page design #22439

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 8 commits into from
Closed

[DX] [TwigBundle] Enhance the new exception page design #22439

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
db8ba80
enable horizontal scrollbar in file excerpt
sustmi Apr 14, 2017
8c9c35c
increase context in file excerpt from 3 to 10 lines
sustmi Apr 14, 2017
ff2c5ce
remove padding of selected lines in order to make height of all lines…
sustmi Apr 14, 2017
e7b1b6d
move code excerpt out of toggling div in order to not close when clic…
sustmi Apr 14, 2017
999946d
set borders for code excerpt to 10px on both sides
sustmi Apr 14, 2017
44267d5
increase selected line color saturation
sustmi Apr 14, 2017
2c947f2
do not wrap long lines
sustmi Apr 14, 2017
0173d22
lower context in file excerpt to 5 lines
sustmi Apr 15, 2017
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
41 changes: 21 additions & 20 deletions src/Symfony/Bundle/TwigBundle/Resources/views/Exception/trace.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,29 @@
{% if trace.file|default(false) %}
<span class="icon icon-close">{{ include('@Twig/images/icon-minus-square.svg') }}</span>
<span class="icon icon-open">{{ include('@Twig/images/icon-plus-square.svg') }}</span>
{% endif %}

{% if trace.function %}
<span class="trace-class">{{ trace.class|abbr_class }}</span>{% if trace.type is not empty %}<span class="trace-type">{{ trace.type }}</span>{% endif %}<span class="trace-method">{{ trace.function }}</span><span class="trace-arguments">({{ trace.args|format_args }})</span>
{% endif %}
<div class="trace-line-header {{ trace.file|default(false) ? 'sf-toggle' }}" data-toggle-selector="#trace-html-{{ prefix }}-{{ i }}" data-toggle-initial="{{ _display_code_snippet ? 'display' }}">
{% if trace.file|default(false) %}
<span class="icon icon-close">{{ include('@Twig/images/icon-minus-square.svg') }}</span>
<span class="icon icon-open">{{ include('@Twig/images/icon-plus-square.svg') }}</span>
{% endif %}

{% if trace.file|default(false) %}
{% set line_number = trace.line|default(1) %}
{% set file_link = trace.file|file_link(line_number) %}
{% set file_path = trace.file|format_file(line_number)|striptags|replace({ (' at line ' ~ line_number): '' }) %}
{% set file_path_parts = file_path|split(constant('DIRECTORY_SEPARATOR')) %}
{% if trace.function %}
<span class="trace-class">{{ trace.class|abbr_class }}</span>{% if trace.type is not empty %}<span class="trace-type">{{ trace.type }}</span>{% endif %}<span class="trace-method">{{ trace.function }}</span><span class="trace-arguments">({{ trace.args|format_args }})</span>
{% endif %}

<span class="block trace-file-path">
in
<a href="{{ file_link }}">{{ file_path_parts[:-1]|join(constant('DIRECTORY_SEPARATOR')) }}{{ constant('DIRECTORY_SEPARATOR') }}<strong>{{ file_path_parts|last }}</strong></a>
(line {{ line_number }})
</span>
{% endif %}
{% if trace.file|default(false) %}
{% set line_number = trace.line|default(1) %}
{% set file_link = trace.file|file_link(line_number) %}
{% set file_path = trace.file|format_file(line_number)|striptags|replace({ (' at line ' ~ line_number): '' }) %}
{% set file_path_parts = file_path|split(constant('DIRECTORY_SEPARATOR')) %}

<span class="block trace-file-path">
in
<a href="{{ file_link }}">{{ file_path_parts[:-1]|join(constant('DIRECTORY_SEPARATOR')) }}{{ constant('DIRECTORY_SEPARATOR') }}<strong>{{ file_path_parts|last }}</strong></a>
(line {{ line_number }})
</span>
{% endif %}
</div>
{% if trace.file|default(false) %}
<div id="trace-html-{{ prefix ~ '-' ~ i }}" class="trace-code sf-toggle-content">
{{ trace.file|file_excerpt(trace.line)|replace({
{{ trace.file|file_excerpt(trace.line, 5)|replace({
'#DD0000': '#183691',
'#007700': '#a71d5d',
'#0000BB': '#222222',
Expand Down
50 changes: 23 additions & 27 deletions src/Symfony/Bundle/TwigBundle/Resources/views/Exception/traces.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,33 @@
<div class="trace trace-as-html">
<table class="trace-details">
<thead class="trace-head">
<tr>
<th class="sf-toggle" data-toggle-selector="#trace-html-{{ index }}" data-toggle-initial="{{ expand ? 'display' }}">
<h3 class="trace-class">
<span class="trace-namespace">
{{ exception.class|split('\\')|slice(0, -1)|join('\\') }}
{{- exception.class|split('\\')|length > 1 ? '\\' }}
</span>
{{ exception.class|split('\\')|last }}
<div class="trace-details">
<div class="trace-head">
<span class="sf-toggle" data-toggle-selector="#trace-html-{{ index }}" data-toggle-initial="{{ expand ? 'display' }}">
<h3 class="trace-class">
<span class="trace-namespace">
{{ exception.class|split('\\')|slice(0, -1)|join('\\') }}
{{- exception.class|split('\\')|length > 1 ? '\\' }}
</span>
{{ exception.class|split('\\')|last }}

<span class="icon icon-close">{{ include('@Twig/images/icon-minus-square-o.svg') }}</span>
<span class="icon icon-open">{{ include('@Twig/images/icon-plus-square-o.svg') }}</span>
</h3>
<span class="icon icon-close">{{ include('@Twig/images/icon-minus-square-o.svg') }}</span>
<span class="icon icon-open">{{ include('@Twig/images/icon-plus-square-o.svg') }}</span>
</h3>

{% if exception.message is not empty and index > 1 %}
<p class="break-long-words trace-message">{{ exception.message }}</p>
{% endif %}
</th>
</tr>
</thead>
{% if exception.message is not empty and index > 1 %}
<p class="break-long-words trace-message">{{ exception.message }}</p>
{% endif %}
</span>
</div>

<tbody id="trace-html-{{ index }}" class="sf-toggle-content">
<div id="trace-html-{{ index }}" class="sf-toggle-content">
{% set _is_first_user_code = true %}
{% for i, trace in exception.trace %}
{% set _display_code_snippet = _is_first_user_code and ('/vendor/' not in trace.file) and ('/var/cache/' not in trace.file) and (trace.file is not empty) %}
{% if _display_code_snippet %}{% set _is_first_user_code = false %}{% endif %}
<tr>
<td class="trace-line {{ trace.file|default(false) ? 'sf-toggle' }}" data-toggle-selector="#trace-html-{{ index }}-{{ i }}" data-toggle-initial="{{ _display_code_snippet ? 'display' }}">
{{ include('@Twig/Exception/trace.html.twig', { prefix: index, i: i, trace: trace }, with_context = false) }}
</td>
</tr>
<div class="trace-line">
{{ include('@Twig/Exception/trace.html.twig', { prefix: index, i: i, trace: trace, _display_code_snippet: _display_code_snippet }, with_context = false) }}
</div>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
14 changes: 9 additions & 5 deletions src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,30 +89,34 @@ header .container { display: flex; justify-content: space-between; }
.exception-illustration { flex-basis: 111px; flex-shrink: 0; height: 66px; margin-left: 15px; opacity: .7; }

.trace + .trace { margin-top: 30px; }
.trace-head { background-color: #e0e0e0; padding: 10px; }
.trace-head .trace-class { color: #222; font-size: 18px; font-weight: bold; line-height: 1.3; margin: 0; position: relative; }
.trace-head .trace-namespace { color: #999; display: block; font-size: 13px; }
.trace-head .icon { position: absolute; right: 0; top: 0; }
.trace-head .icon svg { height: 24px; width: 24px; }

.trace-details { background: #FFF; border: 1px solid #E0E0E0; box-shadow: 0px 0px 1px rgba(128, 128, 128, .2); margin: 1em 0; }

.trace-message { font-size: 14px; font-weight: normal; margin: .5em 0 0; }
.trace-details { table-layout: fixed; }
.trace-line { position: relative; padding-left: 36px; }
.trace-line.sf-toggle:hover { background: #F5F5F5; }
.trace-line { position: relative; padding-top: 8px; padding-bottom: 8px; }
.trace-line:hover { background: #F5F5F5; }
.trace-line a { color: #222; }
.trace-line .icon { opacity: .4; position: absolute; left: 10px; top: 11px; }
.trace-line .icon svg { height: 16px; width: 16px; }
.trace-line-header { padding-left: 36px; }

.trace-file-path, .trace-file-path a { margin-top: 3px; color: #999; color: #795da3; color: #B0413E; color: #222; font-size: 13px; }
.trace-file-path, .trace-file-path a { color: #999; color: #795da3; color: #B0413E; color: #222; font-size: 13px; }
.trace-class { color: #B0413E; }
.trace-type { padding: 0 2px; }
.trace-method { color: #B0413E; color: #222; font-weight: bold; color: #B0413E; }
.trace-arguments { color: #222; color: #999; font-weight: normal; color: #795da3; color: #777; padding-left: 2px; }

.trace-code { background: #FFF; font-size: 12px; margin: 10px 0 2px; padding: 10px; overflow-x: auto; }
.trace-code { background: #FFF; font-size: 12px; margin: 10px 10px 2px 10px; padding: 10px; overflow-x: auto; white-space: nowrap; }
.trace-code ol { margin: 0; float: left; }
.trace-code li { color: #969896; margin: 0; padding-left: 10px; float: left; width: 100%; }
.trace-code li + li { margin-top: 5px; }
.trace-code li.selected { background: #F8EEC7; padding: 3px 0 3px 10px; margin-top: 2px; }
.trace-code li.selected { background: #F7E5A1; margin-top: 2px; }
.trace-code li code { color: #222; white-space: nowrap; }

.trace-as-text .stacktrace { line-height: 1.8; margin: 0 0 15px; white-space: pre-wrap; }
Expand Down
0