Add style to AV::Template::Error exception page

actionpack/lib/action_dispatch/middleware/exception_wrapper.rb

@@ -57,7 +57,7 @@ module ActionDispatch
     end
 
     def source_extract
-      if trace = application_trace.first
+      if application_trace && trace = application_trace.first
         file, line, _ = trace.split(":")
         @file = file
         @line_number = line.to_i
@@ -92,6 +92,7 @@ module ActionDispatch
     end
 
     def source_fragment(path, line)
+      return unless Rails.respond_to?(:root) && Rails.root
       full_path = Rails.root.join(path)
       if File.exists?(full_path)
         File.open(full_path, "r") do |file|

actionpack/lib/action_dispatch/middleware/templates/rescues/template_error.erb

@@ -1,17 +1,44 @@
-<h1>
-  <%=h @exception.original_exception.class.to_s %> in
-  <%=h @request.parameters["controller"].capitalize if @request.parameters["controller"]%>#<%=h @request.parameters["action"] %>
-</h1>
+<% @source_extract = @exception.source_extract(0, :html) %>
+<header>
+  <h1>
+    <%=h @exception.original_exception.class.to_s %> in
+    <%=h @request.parameters["controller"].capitalize if @request.parameters["controller"]%>#<%=h @request.parameters["action"] %>
+  </h1>
+</header>
 
-<p>
-  Showing <i><%=h @exception.file_name %></i> where line <b>#<%=h @exception.line_number %></b> raised:
-  <pre><code><%=h @exception.message %></code></pre>
-</p>
+<div id="container">
+  <p>
+    Showing <i><%=h @exception.file_name %></i> where line <b>#<%=h @exception.line_number %></b> raised:
+    <pre><code><%=h @exception.message %></code></pre>
+    </p>
 
-<p>Extracted source (around line <b>#<%=h @exception.line_number %></b>):
-<pre><code><%=h @exception.source_extract %></code></pre></p>
+  <div class="source">
+    <div class="info">
+      <p>Extracted source (around line <strong>#<%=h @exception.line_number %></strong>):
+    </div>
+    <div class="data">
+    <table cellpadding="0" cellspacing="0" class="lines">
+      <tr>
+        <td>
+          <pre class="line_numbers">
+            <% @source_extract.keys.each do |line_number| %>
+<span><%= line_number -%></span>
+            <% end %>
+          </pre>
+        </td>
+<td width="100%">
+<pre>
+<% @source_extract.each do |line, source| -%><div class="line<%= " active" if line == @exception.line_number -%>"><%= source -%></div><% end -%>
+</pre>
+</td>
+    </tr>
+  </table>
+</div>
+</div>
 
-<p><%=h @exception.sub_template_message %></p>
+  <p><%=h @exception.sub_template_message %></p>
 
-<%= render template: "rescues/_trace" %>
-<%= render template: "rescues/_request_and_response" %>
+  <%= render template: "rescues/_trace" %>
+  <%= render template: "rescues/_request_and_response" %>
+  </div>
+</div>

actionpack/lib/action_view/template/error.rb

@@ -78,7 +78,7 @@ module ActionView
         end
       end
 
-      def source_extract(indentation = 0)
+      def source_extract(indentation = 0, output = :console)
         return unless num = line_number
         num = num.to_i
 
@@ -88,12 +88,20 @@ module ActionView
         end_on_line   = [ num + SOURCE_CODE_RADIUS - 1, source_code.length].min
 
         indent = end_on_line.to_s.size + indentation
-        line_counter = start_on_line
         return unless source_code = source_code[start_on_line..end_on_line]
 
-        source_code.sum do |line|
+        formatted_code_for(source_code, start_on_line, indent, output)
+      end
+
+      def formatted_code_for(source_code, line_counter, indent, output)
+        start_value = (output == :html) ? {} : ""
+        source_code.inject(start_value) do |result, line|
           line_counter += 1
-          "%#{indent}s: %s\n" % [line_counter, line]
+          if output == :html
+            result.update(line_counter.to_s => "%#{indent}s %s\n" % ["", line])
+          else
+            result << "%#{indent}s: %s\n" % [line_counter, line]
+          end
         end
       end