From 5206c32d4ebd75f720e9620a59da9a0f651553ab Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Sun, 9 Dec 2012 22:09:21 +0800 Subject: [PATCH 01/20] Responsive redesign of the error page. (charliesome/better_errors#6) --- lib/better_errors/templates/main.erb | 785 +++++++++++++----- lib/better_errors/templates/variable_info.erb | 8 + 2 files changed, 564 insertions(+), 229 deletions(-) diff --git a/lib/better_errors/templates/main.erb b/lib/better_errors/templates/main.erb index c73910ac..0a987cf8 100644 --- a/lib/better_errors/templates/main.erb +++ b/lib/better_errors/templates/main.erb @@ -3,229 +3,539 @@ <%= exception.class %> at <%= request_path %> -
-

<%= exception.class %> at <%= request_path %>

- - - - - - <% if backtrace_frames.any? %> - - - - - - - - - <% end %> -
Message<%= exception_message %>
File<%= backtrace_frames.first.filename %>
Line<%= backtrace_frames.first.line %>
+
+
+

<%= exception.class %> at <%= request_path %>

+

<%= exception_message %>

- + +
+
+ + <% backtrace_frames.each_with_index do |frame, index| %> <% end %> @@ -448,7 +771,11 @@ })(i); } - allFrames[0].click(); + // Click the first application frame + ( + document.querySelector(".frames li.application") || + document.querySelector(".frames li") + ).click(); var applicationFramesButton = document.getElementById("application_frames"); var allFramesButton = document.getElementById("all_frames"); @@ -475,7 +802,7 @@ return false; }; - applicationFramesButton.click(); + allFramesButton.click(); })(); diff --git a/lib/better_errors/templates/variable_info.erb b/lib/better_errors/templates/variable_info.erb index f0982049..0bee7584 100644 --- a/lib/better_errors/templates/variable_info.erb +++ b/lib/better_errors/templates/variable_info.erb @@ -1,13 +1,21 @@ +

Local Variables

+
<% @frame.local_variables.each do |name, value| %> <% end %>
<%= name %>
<%= value.inspect %>
+
+
+

Instance Variables

+
<% @frame.instance_variables.each do |name, value| %> <% end %>
<%= name %>
<%= value.inspect %>
+
+
From ecb0e7e695995bd1c7ce23378d62794ff15a61df Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Tue, 11 Dec 2012 00:42:41 +0800 Subject: [PATCH 02/20] make the exception message more prominent --- lib/better_errors/templates/main.erb | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/lib/better_errors/templates/main.erb b/lib/better_errors/templates/main.erb index 0a987cf8..8a66f4c5 100644 --- a/lib/better_errors/templates/main.erb +++ b/lib/better_errors/templates/main.erb @@ -113,10 +113,7 @@ * --------------------------------------------------------------------- */ header.exception { - color: #999; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); - - padding: 10px 20px 14px 20px; + padding: 18px 20px; background-color: #222; background: -webkit-linear-gradient(top, #484848, #282828); @@ -129,7 +126,7 @@ /* Heading */ header.exception h2 { font-weight: 200; - font-size: 22pt; + font-size: 11pt; } @@ -149,7 +146,9 @@ } header.exception p { - font-size: 12pt; + font-weight: 200; + font-size: 20pt; + color: white; } /* --------------------------------------------------------------------- From 67909882abfc311a3efdce53699a8dc895ea2f9b Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Tue, 11 Dec 2012 00:48:24 +0800 Subject: [PATCH 03/20] firefox compatibility, and simplify the design a bit --- lib/better_errors/templates/main.erb | 37 +++++++++++++++++++--------- 1 file changed, 25 insertions(+), 12 deletions(-) diff --git a/lib/better_errors/templates/main.erb b/lib/better_errors/templates/main.erb index 8a66f4c5..6115ca9e 100644 --- a/lib/better_errors/templates/main.erb +++ b/lib/better_errors/templates/main.erb @@ -93,7 +93,7 @@ .frame_info { right: 0; - width: 60%; + left: 40%; padding: 20px; padding-left: 40px; @@ -116,11 +116,12 @@ padding: 18px 20px; background-color: #222; - background: -webkit-linear-gradient(top, #484848, #282828); color: #aaa; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); font-weight: 200; - box-shadow: inset 0 -5px 3px -3px rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.3); + box-shadow: inset 0 -5px 3px -3px rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05); + + -webkit-text-smoothing: antialiased; } /* Heading */ @@ -157,10 +158,9 @@ nav.tabs { border-top: solid 1px #333; - border-bottom: solid 1px #111; + border-bottom: solid 1px #1a1a1a; background-color: #444; - background: -webkit-linear-gradient(top, #444, #222); text-align: center; padding: 6px; @@ -220,6 +220,8 @@ ul.frames li { background-color: #f8f8f8; background: -webkit-linear-gradient(top, #f8f8f8, #f0f0f0); + background: -moz-linear-gradient(top, #f8f8f8, #f0f0f0); + background: linear-gradient(top, #f8f8f8, #f0f0f0); border-bottom: solid 1px #e2e2e2; padding: 7px 20px; @@ -253,9 +255,8 @@ /* Selected frame */ ul.frames li.selected { - background-color: #39a; - background: -webkit-linear-gradient(top, #39a, #179); - box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.2); + background: #39a; + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 2px 0 rgba(255, 255, 255, 0.01), inset 0 -1px 0 rgba(0, 0, 0, 0.1); } ul.frames li.selected .name, @@ -448,16 +449,28 @@ * --------------------------------------------------------------------- */ .sub { - border-top: solid 2px #ccc; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); padding: 10px 0; margin: 10px 0; } + .sub:before { + content: ''; + display: block; + width: 100%; + height: 4px; + + border-radius: 2px; + background: rgba(0, 150, 200, 0.05); + box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.04), inset 2px 2px 2px rgba(0, 0, 0, 0.07); + } + .sub h3 { color: #39a; font-size: 1.1em; - margin-bottom: 10px; + margin: 10px 0; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); + + -webkit-font-smoothing: antialiased; } .sub .inset { @@ -465,7 +478,7 @@ } .sub table td { - border-top: solid 1px #ddd; + border-top: dotted 1px #ddd; padding: 7px 1px; width: 90%; } From 715634f3b84fe0c5f1f6f8948c5c8eb9ecb63139 Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Tue, 11 Dec 2012 01:10:51 +0800 Subject: [PATCH 04/20] update colors --- lib/better_errors/templates/main.erb | 58 ++++++++++++++-------------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/lib/better_errors/templates/main.erb b/lib/better_errors/templates/main.erb index 6115ca9e..c0db4730 100644 --- a/lib/better_errors/templates/main.erb +++ b/lib/better_errors/templates/main.erb @@ -102,10 +102,10 @@ nav.sidebar { background: #d3d3da; - border-top: solid 5px #444; - border-bottom: solid 5px #444; + border-top: solid 3px #a33; + border-bottom: solid 3px #a33; border-radius: 4px; - box-shadow: 0 0 6px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.1); + box-shadow: 0 0 6px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1); } /* --------------------------------------------------------------------- @@ -115,7 +115,10 @@ header.exception { padding: 18px 20px; - background-color: #222; + height: 57px; + overflow: hidden; + + background-color: #20202a; color: #aaa; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); font-weight: 200; @@ -142,8 +145,7 @@ header.exception h2 strong { font-weight: 700; - color: #333; - color: white; + color: #d55; } header.exception p { @@ -152,15 +154,29 @@ color: white; } + <%# + /* Light theme */ + header.exception { + text-shadow: 0 1px 0 rgba(250, 250, 250, 0.6); + background: rgba(200,100,50,0.10); + color: #977; + } + header.exception h2 strong { + color: #533; + } + header.exception p { + color: #744; + } + %> + /* --------------------------------------------------------------------- * Navigation * --------------------------------------------------------------------- */ nav.tabs { - border-top: solid 1px #333; - border-bottom: solid 1px #1a1a1a; + border-bottom: solid 1px #ddd; - background-color: #444; + background-color: #eee; text-align: center; padding: 6px; @@ -179,8 +195,8 @@ font-size: 8pt; font-weight: bold; - color: #888; - text-shadow: 0 0 4px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(0, 0, 0, 0.4); + color: #999; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); } nav.tabs a.selected { @@ -188,23 +204,7 @@ background: rgba(0, 0, 0, 0.5); border-radius: 16px; box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1); - } - - /* Lighter tabs for smaller screens, because black looks too heavy. */ - @media screen and (max-width: 1100px) { - nav.tabs { - background: #eee; - border-bottom: solid 1px #ddd; - } - - nav.tabs a { - color: #999; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); - } - - nav.tabs a.selected { - text-shadow: 0 0 4px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(0, 0, 0, 0.4); - } + text-shadow: 0 0 4px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(0, 0, 0, 0.4); } /* --------------------------------------------------------------------- @@ -255,7 +255,7 @@ /* Selected frame */ ul.frames li.selected { - background: #39a; + background: #38a; box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 2px 0 rgba(255, 255, 255, 0.01), inset 0 -1px 0 rgba(0, 0, 0, 0.1); } From 574ccc2a6c87933c8e0bd2468b73d9e106755b63 Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Tue, 11 Dec 2012 01:23:09 +0800 Subject: [PATCH 05/20] fix repl line being too narrow --- lib/better_errors/templates/main.erb | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/lib/better_errors/templates/main.erb b/lib/better_errors/templates/main.erb index c0db4730..15f49793 100644 --- a/lib/better_errors/templates/main.erb +++ b/lib/better_errors/templates/main.erb @@ -327,7 +327,7 @@ * Monospace * --------------------------------------------------------------------- */ - pre, code, .repl input { + pre, code, .repl input, .repl .prompt span { font-family: menlo, lucida console, monospace; font-size: 8pt; } @@ -421,6 +421,27 @@ border-bottom: 0; } + /* .prompt > span + input */ + .console .prompt { + display: table; + width: 100%; + } + + .console .prompt span, + .console .prompt input { + display: table-cell; + } + + .console .prompt span { + width: 1%; + padding-right: 5px; + } + + .console .prompt input { + width: 99%; + } + + /* Input box */ .console input, .console input:focus { outline: 0; From 21608144e15af0501d37a72d388ad25f767461fe Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Tue, 11 Dec 2012 01:31:43 +0800 Subject: [PATCH 06/20] highlight the stack trace method names differently --- lib/better_errors/stack_frame.rb | 8 ++++++++ lib/better_errors/templates/main.erb | 14 +++++++++----- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/lib/better_errors/stack_frame.rb b/lib/better_errors/stack_frame.rb index d0e124b4..03f6ca78 100644 --- a/lib/better_errors/stack_frame.rb +++ b/lib/better_errors/stack_frame.rb @@ -53,6 +53,14 @@ def gem_path end end end + + def class_name + (m = name.match(/^(.*?)([\.\#].*)$/)) && m[1] + end + + def method_name + (m = name.match(/^(.*?)([\.\#].*)$/)) && m[2] + end def context if application? diff --git a/lib/better_errors/templates/main.erb b/lib/better_errors/templates/main.erb index 15f49793..cb0828d7 100644 --- a/lib/better_errors/templates/main.erb +++ b/lib/better_errors/templates/main.erb @@ -133,7 +133,6 @@ font-size: 11pt; } - header.exception h2, header.exception p { line-height: 1.4em; @@ -234,13 +233,13 @@ overflow: hidden; height: 1.5em; - white-space: pre; + white-space: normal; word-wrap: none; text-overflow: ellipsis; } - ul.frames .name { - font-weight: bold; + ul.frames .method { + color: #966; } ul.frames .location { @@ -260,11 +259,16 @@ } ul.frames li.selected .name, + ul.frames li.selected .method, ul.frames li.selected .location { color: white; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); } + ul.frames li.selected .location { + opacity: 0.6; + } + /* Iconography */ ul.frames li .icon { display: block; @@ -579,7 +583,7 @@
-
<%= frame.name %>
+
<%= frame.class_name || frame.name %><%= frame.method_name %>
<%= frame.pretty_path %>, line <%= frame.line %>
From 0213587f4ba166a585184ccd47194a20bab53fca Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Tue, 11 Dec 2012 01:44:51 +0800 Subject: [PATCH 07/20] update image in readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 24564f6d..475b36e4 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ Better Errors replaces the standard Rails error page with a much better and more useful error page. It is also usable outside of Rails in any Rack app as Rack middleware. -![image](http://i.imgur.com/urVDW.png) +![image](http://i.imgur.com/Me5of.png) ## Features From 81c41d4025fccc7f1871195d3775623fb98e299f Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Tue, 11 Dec 2012 02:13:41 +0800 Subject: [PATCH 08/20] remove superfluous extra line on repl --- lib/better_errors/templates/main.erb | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/lib/better_errors/templates/main.erb b/lib/better_errors/templates/main.erb index cb0828d7..bdd11a7a 100644 --- a/lib/better_errors/templates/main.erb +++ b/lib/better_errors/templates/main.erb @@ -413,16 +413,8 @@ .console pre { max-height: 200px; overflow: auto; + margin-bottom: -3px; word-wrap: break-word; - border-bottom: solid 1px #cdf; - padding-bottom: 10px; - margin-bottom: 10px; - } - - .console pre:empty { - padding-bottom: 0; - margin-bottom: 0; - border-bottom: 0; } /* .prompt > span + input */ From ad450c675d6a6f3c2b9e5acff5c560f272f6e1e9 Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Tue, 11 Dec 2012 02:46:38 +0800 Subject: [PATCH 09/20] prevent horizontal scrollbars in firefox in the repl shell --- lib/better_errors/templates/main.erb | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/lib/better_errors/templates/main.erb b/lib/better_errors/templates/main.erb index bdd11a7a..69c6c58b 100644 --- a/lib/better_errors/templates/main.erb +++ b/lib/better_errors/templates/main.erb @@ -405,16 +405,19 @@ /* REPL shell */ .console { - padding: 10px; + padding: 0 1px 10px 1px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } .console pre { + padding: 10px 10px 0 10px; max-height: 200px; - overflow: auto; + overflow-x: none; + overflow-y: auto; margin-bottom: -3px; word-wrap: break-word; + white-space: pre-wrap; } /* .prompt > span + input */ @@ -431,6 +434,7 @@ .console .prompt span { width: 1%; padding-right: 5px; + padding-left: 10px; } .console .prompt input { From 7daf8ff43945c2beca9c4bc4c1c1df4085237425 Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Tue, 11 Dec 2012 03:12:18 +0800 Subject: [PATCH 10/20] fix floatdropping on stack trace names in single-column mode --- lib/better_errors/templates/main.erb | 27 +++++++++++++++++++-------- 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/lib/better_errors/templates/main.erb b/lib/better_errors/templates/main.erb index 69c6c58b..3ce1214d 100644 --- a/lib/better_errors/templates/main.erb +++ b/lib/better_errors/templates/main.erb @@ -270,6 +270,11 @@ } /* Iconography */ + ul.frames li { + padding-left: 60px; + position: relative; + } + ul.frames li .icon { display: block; width: 20px; @@ -282,14 +287,13 @@ background: white; border: solid 2px #ccc; - float: left; - - margin-right: 20px; - margin-top: 5px; - font-size: 9pt; font-weight: 200; font-style: normal; + + position: absolute; + top: 14px; + left: 20px; } ul.frames .icon.application { @@ -306,20 +310,27 @@ /* Responsiveness -- flow to single-line mode */ @media screen and (max-width: 1100px) { ul.frames li { - padding-top: 4px; - padding-bottom: 4px; + padding-top: 6px; + padding-bottom: 6px; + padding-left: 36px; + line-height: 1.3; } ul.frames li .icon { - margin-top: 2px; width: 11px; height: 11px; line-height: 11px; + + top: 7px; + left: 10px; + font-size: 5pt; } ul.frames .name, ul.frames .location { display: inline-block; + line-height: 1.3; + height: 1.3em; } ul.frames .name { From d441a47a6518f79b40b8969db957b171ee51ccd4 Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Tue, 11 Dec 2012 03:30:15 +0800 Subject: [PATCH 11/20] make layout more responsive by not clipping the header text in skinny mode --- lib/better_errors/templates/main.erb | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/lib/better_errors/templates/main.erb b/lib/better_errors/templates/main.erb index 3ce1214d..fbbd7de7 100644 --- a/lib/better_errors/templates/main.erb +++ b/lib/better_errors/templates/main.erb @@ -153,6 +153,20 @@ color: white; } + @media screen and (max-width: 1100px) { + header.exception { + height: auto; + } + + header.exception h2, + header.exception p { + overflow: visible; + white-space: normal; + word-wrap: break-word; + height: auto; + } + } + <%# /* Light theme */ header.exception { From 61a91d09728a0e57892f1279813db6f12ee8be06 Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Tue, 11 Dec 2012 03:42:51 +0800 Subject: [PATCH 12/20] show only application frames by default --- lib/better_errors/templates/main.erb | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/better_errors/templates/main.erb b/lib/better_errors/templates/main.erb index fbbd7de7..784e494e 100644 --- a/lib/better_errors/templates/main.erb +++ b/lib/better_errors/templates/main.erb @@ -594,6 +594,7 @@ <% backtrace_frames.each_with_index do |frame, index| %>