From db8ba801f93bd6716947676a13cee8d2223b2201 Mon Sep 17 00:00:00 2001 From: Miroslav Sustek Date: Fri, 14 Apr 2017 20:04:38 +0200 Subject: [PATCH 1/8] enable horizontal scrollbar in file excerpt It was necessary to remove table layout and replace it with DIVs and SPANs because it was messing with width calculations. --- .../views/Exception/traces.html.twig | 50 +++++++++---------- .../Resources/views/exception.css.twig | 9 ++-- 2 files changed, 29 insertions(+), 30 deletions(-) diff --git a/src/Symfony/Bundle/TwigBundle/Resources/views/Exception/traces.html.twig b/src/Symfony/Bundle/TwigBundle/Resources/views/Exception/traces.html.twig index 948ee86fa6cc5..b658508c5313a 100644 --- a/src/Symfony/Bundle/TwigBundle/Resources/views/Exception/traces.html.twig +++ b/src/Symfony/Bundle/TwigBundle/Resources/views/Exception/traces.html.twig @@ -1,37 +1,33 @@
- - - - - - + {% if exception.message is not empty and index > 1 %} +

{{ exception.message }}

+ {% endif %} + + - +
{% 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 %} -
- - +
+ {{ include('@Twig/Exception/trace.html.twig', { prefix: index, i: i, trace: trace }, with_context = false) }} +
{% endfor %} - -
-

- - {{ exception.class|split('\\')|slice(0, -1)|join('\\') }} - {{- exception.class|split('\\')|length > 1 ? '\\' }} - - {{ exception.class|split('\\')|last }} +
+
+ +

+ + {{ exception.class|split('\\')|slice(0, -1)|join('\\') }} + {{- exception.class|split('\\')|length > 1 ? '\\' }} + + {{ exception.class|split('\\')|last }} - {{ include('@Twig/images/icon-minus-square-o.svg') }} - {{ include('@Twig/images/icon-plus-square-o.svg') }} -

+ {{ include('@Twig/images/icon-minus-square-o.svg') }} + {{ include('@Twig/images/icon-plus-square-o.svg') }} +

- {% if exception.message is not empty and index > 1 %} -

{{ exception.message }}

- {% endif %} -
- {{ include('@Twig/Exception/trace.html.twig', { prefix: index, i: i, trace: trace }, with_context = false) }} -
+
+ diff --git a/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig b/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig index cb455274eecf9..85c22d8307220 100644 --- a/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig +++ b/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig @@ -89,20 +89,23 @@ 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; padding-left: 36px; } +.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-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; } From 8c9c35cf6d151401c62c66db400565a5e8dd8b3a Mon Sep 17 00:00:00 2001 From: Miroslav Sustek Date: Fri, 14 Apr 2017 18:01:50 +0200 Subject: [PATCH 2/8] increase context in file excerpt from 3 to 10 lines --- .../Bundle/TwigBundle/Resources/views/Exception/trace.html.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Symfony/Bundle/TwigBundle/Resources/views/Exception/trace.html.twig b/src/Symfony/Bundle/TwigBundle/Resources/views/Exception/trace.html.twig index a6af5d0532242..db02a4b5d12fd 100644 --- a/src/Symfony/Bundle/TwigBundle/Resources/views/Exception/trace.html.twig +++ b/src/Symfony/Bundle/TwigBundle/Resources/views/Exception/trace.html.twig @@ -22,7 +22,7 @@ {% if trace.file|default(false) %}
- {{ trace.file|file_excerpt(trace.line)|replace({ + {{ trace.file|file_excerpt(trace.line, 10)|replace({ '#DD0000': '#183691', '#007700': '#a71d5d', '#0000BB': '#222222', From ff2c5ce725e738bcb39513392dc84ba0a87ffd1c Mon Sep 17 00:00:00 2001 From: Miroslav Sustek Date: Fri, 14 Apr 2017 19:21:29 +0200 Subject: [PATCH 3/8] remove padding of selected lines in order to make height of all lines equal --- .../Bundle/TwigBundle/Resources/views/exception.css.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig b/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig index 85c22d8307220..cb21b47d6ce43 100644 --- a/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig +++ b/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig @@ -115,7 +115,7 @@ header .container { display: flex; justify-content: space-between; } .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: #F8EEC7; 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; } From e7b1b6dc9c141103ebb40385e6a5f37863dc4b63 Mon Sep 17 00:00:00 2001 From: Miroslav Sustek Date: Fri, 14 Apr 2017 19:33:34 +0200 Subject: [PATCH 4/8] move code excerpt out of toggling div in order to not close when clicking into code --- .../Resources/views/Exception/trace.html.twig | 39 ++++++++++--------- .../views/Exception/traces.html.twig | 4 +- .../Resources/views/exception.css.twig | 3 +- 3 files changed, 24 insertions(+), 22 deletions(-) diff --git a/src/Symfony/Bundle/TwigBundle/Resources/views/Exception/trace.html.twig b/src/Symfony/Bundle/TwigBundle/Resources/views/Exception/trace.html.twig index db02a4b5d12fd..1bba1da2cdd1a 100644 --- a/src/Symfony/Bundle/TwigBundle/Resources/views/Exception/trace.html.twig +++ b/src/Symfony/Bundle/TwigBundle/Resources/views/Exception/trace.html.twig @@ -1,25 +1,26 @@ -{% if trace.file|default(false) %} - {{ include('@Twig/images/icon-minus-square.svg') }} - {{ include('@Twig/images/icon-plus-square.svg') }} -{% endif %} - -{% if trace.function %} - {{ trace.class|abbr_class }}{% if trace.type is not empty %}{{ trace.type }}{% endif %}{{ trace.function }}({{ trace.args|format_args }}) -{% endif %} +
+ {% if trace.file|default(false) %} + {{ include('@Twig/images/icon-minus-square.svg') }} + {{ include('@Twig/images/icon-plus-square.svg') }} + {% 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 %} + {{ trace.class|abbr_class }}{% if trace.type is not empty %}{{ trace.type }}{% endif %}{{ trace.function }}({{ trace.args|format_args }}) + {% endif %} - - in - {{ file_path_parts[:-1]|join(constant('DIRECTORY_SEPARATOR')) }}{{ constant('DIRECTORY_SEPARATOR') }}{{ file_path_parts|last }} - (line {{ line_number }}) - -{% 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')) %} + + in + {{ file_path_parts[:-1]|join(constant('DIRECTORY_SEPARATOR')) }}{{ constant('DIRECTORY_SEPARATOR') }}{{ file_path_parts|last }} + (line {{ line_number }}) + + {% endif %} +
{% if trace.file|default(false) %}
{{ trace.file|file_excerpt(trace.line, 10)|replace({ diff --git a/src/Symfony/Bundle/TwigBundle/Resources/views/Exception/traces.html.twig b/src/Symfony/Bundle/TwigBundle/Resources/views/Exception/traces.html.twig index b658508c5313a..2bf3e7613aad4 100644 --- a/src/Symfony/Bundle/TwigBundle/Resources/views/Exception/traces.html.twig +++ b/src/Symfony/Bundle/TwigBundle/Resources/views/Exception/traces.html.twig @@ -24,8 +24,8 @@ {% 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 %} -
- {{ include('@Twig/Exception/trace.html.twig', { prefix: index, i: i, trace: trace }, with_context = false) }} +
+ {{ include('@Twig/Exception/trace.html.twig', { prefix: index, i: i, trace: trace, _display_code_snippet: _display_code_snippet }, with_context = false) }}
{% endfor %}
diff --git a/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig b/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig index cb21b47d6ce43..d3a09905ce73f 100644 --- a/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig +++ b/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig @@ -99,11 +99,12 @@ header .container { display: flex; justify-content: space-between; } .trace-message { font-size: 14px; font-weight: normal; margin: .5em 0 0; } .trace-details { table-layout: fixed; } -.trace-line { position: relative; padding-top: 8px; padding-bottom: 8px; padding-left: 36px; } +.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 { color: #999; color: #795da3; color: #B0413E; color: #222; font-size: 13px; } .trace-class { color: #B0413E; } From 999946da003eaf44686c8ff547eccacaf0913a8f Mon Sep 17 00:00:00 2001 From: Miroslav Sustek Date: Fri, 14 Apr 2017 19:45:44 +0200 Subject: [PATCH 5/8] set borders for code excerpt to 10px on both sides --- .../Bundle/TwigBundle/Resources/views/exception.css.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig b/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig index d3a09905ce73f..853084dc7880f 100644 --- a/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig +++ b/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig @@ -112,7 +112,7 @@ header .container { display: flex; justify-content: space-between; } .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; } .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; } From 44267d57bcc2616fa2227d45150fc947e22163fc Mon Sep 17 00:00:00 2001 From: Miroslav Sustek Date: Fri, 14 Apr 2017 19:58:12 +0200 Subject: [PATCH 6/8] increase selected line color saturation --- .../Bundle/TwigBundle/Resources/views/exception.css.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig b/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig index 853084dc7880f..eadfadb077eb8 100644 --- a/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig +++ b/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig @@ -116,7 +116,7 @@ header .container { display: flex; justify-content: space-between; } .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; 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; } From 2c947f2a12e5b3a55ac51ac6333962d9e2afa74a Mon Sep 17 00:00:00 2001 From: Miroslav Sustek Date: Fri, 14 Apr 2017 21:11:41 +0200 Subject: [PATCH 7/8] do not wrap long lines --- .../Bundle/TwigBundle/Resources/views/exception.css.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig b/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig index eadfadb077eb8..ba3dd9412e266 100644 --- a/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig +++ b/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig @@ -112,7 +112,7 @@ header .container { display: flex; justify-content: space-between; } .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 10px 2px 10px; 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; } From 0173d228653270cea86bdb2cc70703a5460c7705 Mon Sep 17 00:00:00 2001 From: Miroslav Sustek Date: Sat, 15 Apr 2017 16:10:01 +0200 Subject: [PATCH 8/8] lower context in file excerpt to 5 lines --- .../Bundle/TwigBundle/Resources/views/Exception/trace.html.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Symfony/Bundle/TwigBundle/Resources/views/Exception/trace.html.twig b/src/Symfony/Bundle/TwigBundle/Resources/views/Exception/trace.html.twig index 1bba1da2cdd1a..1d8125a38f84b 100644 --- a/src/Symfony/Bundle/TwigBundle/Resources/views/Exception/trace.html.twig +++ b/src/Symfony/Bundle/TwigBundle/Resources/views/Exception/trace.html.twig @@ -23,7 +23,7 @@
{% if trace.file|default(false) %}
- {{ trace.file|file_excerpt(trace.line, 10)|replace({ + {{ trace.file|file_excerpt(trace.line, 5)|replace({ '#DD0000': '#183691', '#007700': '#a71d5d', '#0000BB': '#222222',