8000 bug #22439 [DX] [TwigBundle] Enhance the new exception page design (s… · symfony/symfony@626e987 · GitHub
[go: up one dir, main page]
Skip to content

Commit 626e987

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 (#20951 (comment)) I got motivated by recent PR #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 ------- 43212b9 [DX] [TwigBundle] Enhance the new exception page design
2 parents 7e93cca + 43212b9 commit 626e987

File tree

3 files changed

+53
-52
lines changed

3 files changed

+53
-52
lines changed

‎src/Symfony/Bundle/TwigBundle/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',

‎src/Symfony/Bundle/TwigBundle/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>

‎src/Symfony/Bundle/TwigBundle/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)
0