Styling for exception page

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

@@ -20,12 +20,15 @@
 <h2 style="margin-top: 30px">Request</h2>
 <p><b>Parameters</b>: <pre><%=h request_dump %></pre></p>
 
-<p><a href="#" onclick="document.getElementById('session_dump').style.display='block'; return false;">Show session dump</a></p>
-<div id="session_dump" style="display:none"><pre><%= debug_hash @request.session %></pre></div>
-
-<p><a href="#" onclick="document.getElementById('env_dump').style.display='block'; return false;">Show env dump</a></p>
-<div id="env_dump" style="display:none"><pre><%= debug_hash @request.env.slice(*@request.class::ENV_METHODS) %></pre></div>
-
+<details>
+<summary>Show session dump</summary>
+<p><pre><%= debug_hash @request.session %></pre></p>
+</details>
+
+<details>
+<summary>Show env dump</summary>
+<p><pre><%= debug_hash @request.env.slice(*@request.class::ENV_METHODS) %></pre></p>
+</details>
 
 <h2 style="margin-top: 30px">Response</h2>
 <p><b>Headers</b>: <pre><%=h defined?(@response) ? @response.headers.inspect.gsub(',', ",\n") : 'None' %></pre></p>

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

@@ -1,8 +1,25 @@
 <% if @source_extract %>
-Extracted source (around line <strong>#<%= @line_number %></strong>):
+<div class="source">
+<div class="info">
+  Extracted source (around line <strong>#<%= @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| %>
-<%= "#{(@line_number == line) ? "> " : "  "}#{line}: #{source}" -%>
-<% end %>
+<% @source_extract.each do |line, source| -%><div class="line<%= " active" if line == @line_number -%>"><%= source -%></div><% end -%>
 </pre>
+</td>
+    </tr>
+  </table>
+</div>
+</div>
 <% end %>

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

@@ -1,11 +1,16 @@
-<h1>
-  <%=h @exception.class.to_s %>
-  <% if @request.parameters['controller'] %>
-    in <%=h @request.parameters['controller'].camelize %>Controller<% if @request.parameters['action'] %>#<%=h @request.parameters['action'] %><% end %>
-  <% end %>
-</h1>
-<pre><%=h @exception.message %></pre>
+<header>
+  <h1>
+    <%=h @exception.class.to_s %>
+    <% if @request.parameters['controller'] %>
+      in <%=h @request.parameters['controller'].camelize %>Controller<% if @request.parameters['action'] %>#<%=h @request.parameters['action'] %><% end %>
+    <% end %>
+  </h1>
+</header>
 
-<%= render template: "rescues/_source" %>
-<%= render template: "rescues/_trace" %>
-<%= render template: "rescues/_request_and_response" %>
+<div id="container">
+  <h2><%=h @exception.message %></h2>
+
+  <%= render template: "rescues/_source" %>
+  <%= render template: "rescues/_trace" %>
+  <%= render template: "rescues/_request_and_response" %>
+</div>

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

@@ -4,7 +4,7 @@
   <meta charset="utf-8" />
   <title>Action Controller: Exception caught</title>
   <style>
-    body { background-color: #fff; color: #333; }
+    body { background-color: #fff; color: #333; margin: 0px}
 
     body, p, ol, ul, td {
       font-family: helvetica, verdana, arial, sans-serif;
@@ -13,15 +13,102 @@
     }
 
     pre {
-      background-color: #eee;
-      padding: 10px;
       font-size: 11px;
       white-space: pre-wrap;
     }
 
-    a { color: #000; }
+    pre.box {
+      border: #eee solid 1px;
+      padding: 10px;
+      margin: 0px;
+      width: 958px;
+    }
+
+    header {
+      background: whiteSmoke;
+      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#980905',endColorstr='#c52f24');
+      background: -webkit-gradient(linear,0% 0,0% 100%,from(#980905),to(#C52F24));
+      background: -moz-linear-gradient(270deg,#980905,#C52F24);
+      color: #fff;
+      padding: 0.5em;
+    }
+
+    h2 {
+      color: #C52F24;
+      padding: 2px;
+    }
+
+    details {
+      border: 1px solid #E5E5E5;
+      -webkit-border-radius: 4px;
+      -moz-border-radius: 4px;
+      border-radius: 4px;
+      margin: 1em 0px;
+      display: block;
+      width: 978px;
+    }
+
+    summary {
+      padding: 8px 15px;
+      border-bottom: 1px solid #E5E5E5;
+      display: block;
+    }
+
+    details pre {
+      margin: 0px;
+      border: none;
+    }
+
+    #container {
+      margin: auto;
+      width: 98%;
+    }
+
+    .source * {
+      margin: 0px;
+      padding: 0px;
+    }
+
+    .source {
+      border: 1px solid #D9D9D9;
+      background: #ECECEC;
+      width: 978px;
+    }
+
+    .source pre {
+      padding: 10px 0px;
+      border: none;
+    }
+
+    .source .data {
+      font-size: 80%;
+      overflow: auto;
+      background-color: #fff;
+    }
+
+    .info {
+      padding: 0.5em;
+    }
+
+    .source .data .line_numbers {
+      background-color: #ECECEC;
+      color: #AAA;
+      padding: 1em .5em;
+      border-right: 1px solid #DDD;
+      text-align: right;
+    }
+
+    .line:hover {
+      background-color: #f6f6f6;
+    }
+
+    .line.active {
+      background-color: #FFCCCC;
+    }
+
+    a { color: #980905; }
     a:visited { color: #666; }
-    a:hover { color: #fff; background-color:#000; }
+    a:hover { color: #C52F24;}
   </style>
 </head>
 <body>

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

@@ -1,2 +1,7 @@
-<h1>Template is missing</h1>
-<p><%=h @exception.message %></p>
+<header>
+  <h1>Template is missing</h1>
+</header>
+
+<div id="container">
+  <h2><%=h @exception.message %></h2>
+</div>

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

@@ -1,2 +1,6 @@
-<h1>Unknown action</h1>
-<p><%=h @exception.message %></p>
+<header>
+  <h1>Unknown action</h1>
+</header>
+<div id="container">
+  <h2><%=h @exception.message %></h2>
+ </div>