Summary and Details HTML elements aren't supported in all modern browsers

2 files changed, 12 insertions, 12 deletions

diff --git a/actionpack/lib/action_dispatch/middleware/templates/rescues/_request_and_response.erb b/actionpack/lib/action_dispatch/middleware/templates/rescues/_request_and_response.erb
index 9688bf6a57..55079848bd 100644
--- a/actionpack/lib/action_dispatch/middleware/templates/rescues/_request_and_response.erb
+++ b/actionpack/lib/action_dispatch/middleware/templates/rescues/_request_and_response.erb
@@ -20,15 +20,15 @@
 <h2 style="margin-top: 30px">Request</h2>
 <p><b>Parameters</b>: <pre><%=h request_dump %></pre></p>
 
-<details>
-<summary>Show session dump</summary>
-<p><pre><%= debug_hash @request.session %></pre></p>
-</details>
+<div class="details">
+  <div class="summary"><a href="#" onclick="document.getElementById('session_dump').style.display='block'; return false;">Show session dump</a></div>
+  <div id="session_dump" style="display:none"><p><pre><%= debug_hash @request.session %></pre></p></div>
+</div>
 
-<details>
-<summary>Show env dump</summary>
-<p><pre><%= debug_hash @request.env.slice(*@request.class::ENV_METHODS) %></pre></p>
-</details>
+<div class="details">
+  <div class="summary"><a href="#" onclick="document.getElementById('env_dump').style.display='block'; return false;">Show env dump</a></div>
+  <div id="env_dump" style="display:none"><p><pre><%= debug_hash @request.env.slice(*@request.class::ENV_METHODS) %></pre></p></div>
+</div>
 
 <h2 style="margin-top: 30px">Response</h2>
 <p><b>Headers</b>: <pre><%=h defined?(@response) ? @response.headers.inspect.gsub(',', ",\n") : 'None' %></pre></p>
diff --git a/actionpack/lib/action_dispatch/middleware/templates/rescues/layout.erb b/actionpack/lib/action_dispatch/middleware/templates/rescues/layout.erb
index 12c4d98e19..bcab5959a0 100644
--- a/actionpack/lib/action_dispatch/middleware/templates/rescues/layout.erb
+++ b/actionpack/lib/action_dispatch/middleware/templates/rescues/layout.erb
@@ -39,7 +39,7 @@
       line-height: 25px;
     }
 
-    details {
+    .details {
       border: 1px solid #E5E5E5;
       -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
@@ -49,14 +49,14 @@
       width: 978px;
     }
 
-    summary {
+    .summary {
       padding: 8px 15px;
       border-bottom: 1px solid #E5E5E5;
       display: block;
     }
 
-    details pre {
-      margin: 0px;
+    .details pre {
+      margin: 5px;
       border: none;
     }