Skip to content

Commit 00249b6

Browse files
fabpotfabpot
committed
bug #22439 [DX] [TwigBundle] Enhance the new exception page design (sustmi)
This PR was squashed before being merged into the 3.3 branch (closes #22439). Discussion ---------- [DX] [TwigBundle] Enhance the new exception page design | Q | A | ------------- | --- | Branch? | 3.3 | Bug fix? | no | New feature? | no | BC breaks? | no | Deprecations? | no | Tests pass? | yes | Fixed tickets | - | License | MIT | Doc PR | - - [x] Fix the problem with wrapping wide lines (symfony/symfony#20951 (comment)) I got motivated by recent PR symfony/symfony#20951 and redesigned the exception page even more. Compare before: ![before](https://cloud.githubusercontent.com/assets/885946/25052220/0756b74e-2151-11e7-98b6-c99fd9eaabec.png) with after: ![after](https://cloud.githubusercontent.com/assets/885946/25052225/0c76581a-2151-11e7-96ff-eb502ee8e97b.png) (Ignore the the "sf" toolbar icon in the middle of the page. This is how Firefox does full-page screenshots.) The most noticeable changes: - removed double line spacing (it just does not feel natural) - file context increased from 3 to 10 lines (it helps me to better orientate in the code) - added horizontal scrollbar for the cases when the code is wider - the highlighted line color is more saturated in order to be noticed easily Commits ------- 43212b9a90 [DX] [TwigBundle] Enhance the new exception page design
2 parents a363f62 + b323314 commit 00249b6

File tree

3 files changed

+53
-52
lines changed

3 files changed

+53
-52
lines changed

‎Resources/views/Exception/trace.html.twig

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,29 @@
1-
{% if trace.file|default(false) %}
2-
<span class="icon icon-close">{{ include('@Twig/images/icon-minus-square.svg') }}</span>
3-
<span class="icon icon-open">{{ include('@Twig/images/icon-plus-square.svg') }}</span>
4-
{% endif %}
5-
6-
{% if trace.function %}
7-
<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>
8-
{% endif %}
1+
<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' }}">
2+
{% if trace.file|default(false) %}
3+
<span class="icon icon-close">{{ include('@Twig/images/icon-minus-square.svg') }}</span>
4+
<span class="icon icon-open">{{ include('@Twig/images/icon-plus-square.svg') }}</span>
5+
{% endif %}
96

10-
{% if trace.file|default(false) %}
11-
{% set line_number = trace.line|default(1) %}
12-
{% set file_link = trace.file|file_link(line_number) %}
13-
{% set file_path = trace.file|format_file(line_number)|striptags|replace({ (' at line ' ~ line_number): '' }) %}
14-
{% set file_path_parts = file_path|split(constant('DIRECTORY_SEPARATOR')) %}
7+
{% if trace.function %}
8+
<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>
9+
{% endif %}
1510

16-
<span class="block trace-file-path">
17-
in
18-
<a href="{{ file_link }}">{{ file_path_parts[:-1]|join(constant('DIRECTORY_SEPARATOR')) }}{{ constant('DIRECTORY_SEPARATOR') }}<strong>{{ file_path_parts|last }}</strong></a>
19-
(line {{ line_number }})
20-
</span>
21-
{% endif %}
11+
{% if trace.file|default(false) %}
12+
{% set line_number = trace.line|default(1) %}
13+
{% set file_link = trace.file|file_link(line_number) %}
14+
{% set file_path = trace.file|format_file(line_number)|striptags|replace({ (' at line ' ~ line_number): '' }) %}
15+
{% set file_path_parts = file_path|split(constant('DIRECTORY_SEPARATOR')) %}
2216

17+
<span class="block trace-file-path">
18+
in
19+
<a href="{{ file_link }}">{{ file_path_parts[:-1]|join(constant('DIRECTORY_SEPARATOR')) }}{{ constant('DIRECTORY_SEPARATOR') }}<strong>{{ file_path_parts|last }}</strong></a>
20+
(line {{ line_number }})
21+
</span>
22+
{% endif %}
23+
</div>
2324
{% if trace.file|default(false) %}
2425
<div id="trace-html-{{ prefix ~ '-' ~ i }}" class="trace-code sf-toggle-content">
25-
{{ trace.file|file_excerpt(trace.line)|replace({
26+
{{ trace.file|file_excerpt(trace.line, 5)|replace({
2627
'#DD0000': '#183691',
2728
'#007700': '#a71d5d',
2829
'#0000BB': '#222222',

‎Resources/views/Exception/traces.html.twig

Lines changed: 23 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,33 @@
11
<div class="trace trace-as-html">
2-
<table class="trace-details">
3-
<thead class="trace-head">
4-
<tr>
5-
<th class="sf-toggle" data-toggle-selector="#trace-html-{{ index }}" data-toggle-initial="{{ expand ? 'display' }}">
6-
<h3 class="trace-class">
7-
<span class="trace-namespace">
8-
{{ exception.class|split('\\')|slice(0, -1)|join('\\') }}
9-
{{- exception.class|split('\\')|length > 1 ? '\\' }}
10-
</span>
11-
{{ exception.class|split('\\')|last }}
2+
<div class="trace-details">
3+
<div class="trace-head">
4+
<span class="sf-toggle" data-toggle-selector="#trace-html-{{ index }}" data-toggle-initial="{{ expand ? 'display' }}">
5+
<h3 class="trace-class">
6+
<span class="trace-namespace">
7+
{{ exception.class|split('\\')|slice(0, -1)|join('\\') }}
8+
{{- exception.class|split('\\')|length > 1 ? '\\' }}
9+
</span>
10+
{{ exception.class|split('\\')|last }}
1211

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

17-
{% if exception.message is not empty and index > 1 %}
18-
<p class="break-long-words trace-message">{{ exception.message }}</p>
19-
{% endif %}
20-
</th>
21-
</tr>
22-
</thead>
16+
{% if exception.message is not empty and index > 1 %}
17+
<p class="break-long-words trace-message">{{ exception.message }}</p>
18+
{% endif %}
19+
</span>
20+
</div>
2321

24-
<tbody id="trace-html-{{ index }}" class="sf-toggle-content">
22+
<div id="trace-html-{{ index }}" class="sf-toggle-content">
2523
{% set _is_first_user_code = true %}
2624
{% for i, trace in exception.trace %}
2725
{% 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) %}
2826
{% if _display_code_snippet %}{% set _is_first_user_code = false %}{% endif %}
29-
<tr>
30-
<td class="trace-line {{ trace.file|default(false) ? 'sf-toggle' }}" data-toggle-selector="#trace-html-{{ index }}-{{ i }}" data-toggle-initial="{{ _display_code_snippet ? 'display' }}">
31-
{{ include('@Twig/Exception/trace.html.twig', { prefix: index, i: i, trace: trace }, with_context = false) }}
32-
</td>
33-
</tr>
27+
<div class="trace-line">
28+
{{ include('@Twig/Exception/trace.html.twig', { prefix: index, i: i, trace: trace, _display_code_snippet: _display_code_snippet }, with_context = false) }}
29+
</div>
3430
{% endfor %}
35-
</tbody>
36-
</table>
31+
</div>
32+
</div>
3733
</div>

‎Resources/views/exception.css.twig

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -89,30 +89,34 @@ header .container { display: flex; justify-content: space-between; }
8989
.exception-illustration { flex-basis: 111px; flex-shrink: 0; height: 66px; margin-left: 15px; opacity: .7; }
9090

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

98+
.trace-details { background: #FFF; border: 1px solid #E0E0E0; box-shadow: 0px 0px 1px rgba(128, 128, 128, .2); margin: 1em 0; }
99+
97100
.trace-message { font-size: 14px; font-weight: normal; margin: .5em 0 0; }
98101
.trace-details { table-layout: fixed; }
99-
.trace-line { position: relative; padding-left: 36px; }
100-
.trace-line.sf-toggle:hover { background: #F5F5F5; }
102+
.trace-line { position: relative; padding-top: 8px; padding-bottom: 8px; }
103+
.trace-line:hover { background: #F5F5F5; }
101104
.trace-line a { color: #222; }
102105
.trace-line .icon { opacity: .4; position: absolute; left: 10px; top: 11px; }
103106
.trace-line .icon svg { height: 16px; width: 16px; }
107+
.trace-line-header { padding-left: 36px; }
104108

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

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

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

0 commit comments

Comments
 (0)
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