Format routes as html on debug page

When someone gets a routing exception, the routes are rendered (starting in Rails 4.0). This PR brings parity between the html routes in the `rails/info/routes` path and when rendered from an exception. This is the continuation of #8521 which brought html formatted routes. 

In addition to bringing parity to the two views, we're keeping our views DRY by rendering off of the same partials. In this case Railties depends on partials provided by ActionDispatch. I'm open to alternative implementations. Ideally both views will use the same code so any improvements or updates to it will be reproduced on both.

<hr />

![](http://f.cl.ly/items/3O1D0K1v0j0i343O3T3T/Screen%20Shot%202012-12-17%20at%203.07.20%20PM.png)

4 files changed, 76 insertions, 2 deletions

diff --git a/actionpack/lib/action_dispatch/middleware/debug_exceptions.rb b/actionpack/lib/action_dispatch/middleware/debug_exceptions.rb
index f356c2a85c..1dc51d62e0 100644
--- a/actionpack/lib/action_dispatch/middleware/debug_exceptions.rb
+++ b/actionpack/lib/action_dispatch/middleware/debug_exceptions.rb
@@ -87,7 +87,7 @@ module ActionDispatch
       return false unless @routes_app.respond_to?(:routes)
       if exception.is_a?(ActionController::RoutingError) || exception.is_a?(ActionView::Template::Error)
         inspector = ActionDispatch::Routing::RoutesInspector.new
-        inspector.format(@routes_app.routes.routes).join("\n")
+        inspector.collect_routes(@routes_app.routes.routes)
       end
     end
   end
diff --git a/actionpack/lib/action_dispatch/middleware/templates/rescues/routing_error.erb b/actionpack/lib/action_dispatch/middleware/templates/rescues/routing_error.erb
index a357a7ba11..6c903d6a17 100644
--- a/actionpack/lib/action_dispatch/middleware/templates/rescues/routing_error.erb
+++ b/actionpack/lib/action_dispatch/middleware/templates/rescues/routing_error.erb
@@ -20,4 +20,6 @@
   Routes match in priority from top to bottom
 </p>
 
-<p><pre><%= @routes %></pre></p>
+<%= render layout: "routes/route_wrapper" do %>
+  <%= render partial: "routes/route", collection: @routes %>
+<% end %>
diff --git a/actionpack/lib/action_dispatch/middleware/templates/routes/_route.html.erb b/actionpack/lib/action_dispatch/middleware/templates/routes/_route.html.erb
new file mode 100644
index 0000000000..400ae97d22
--- /dev/null
+++ b/actionpack/lib/action_dispatch/middleware/templates/routes/_route.html.erb
@@ -0,0 +1,16 @@
+<tr class='route_row' data-helper='path'>
+  <td data-route-name='<%= route[:name] %>'>
+    <% if route[:name].present? %>
+      <%= route[:name] %><span class='helper'>_path</span>
+    <% end %>
+  </td>
+  <td data-route-verb='<%= route[:verb] %>'>
+    <%= route[:verb] %>
+  </td>
+  <td data-route-path='<%= route[:path] %>'>
+    <%= route[:path] %>
+  </td>
+  <td data-route-reqs='<%= route[:reqs] %>'>
+    <%= route[:reqs] %>
+  </td>
+</tr>
diff --git a/actionpack/lib/action_dispatch/middleware/templates/routes/_route_wrapper.html.erb b/actionpack/lib/action_dispatch/middleware/templates/routes/_route_wrapper.html.erb
new file mode 100644
index 0000000000..9bf5c96c95
--- /dev/null
+++ b/actionpack/lib/action_dispatch/middleware/templates/routes/_route_wrapper.html.erb
@@ -0,0 +1,56 @@
+<style type='text/css'>
+  #route_table td {padding: 0 30px;}
+  #route_table    {margin:  0 auto 0;}
+</style>
+
+<table id='route_table' class='route_table'>
+  <thead>
+    <tr>
+      <th>Helper<br />
+        <%= link_to "Path", "#", 'data-route-helper' => '_path',
+                    title: "Returns a relative path (without the http or domain)" %> /
+        <%= link_to "Url", "#", 'data-route-helper' => '_url',
+                    title: "Returns an absolute url (with the http and domain)" %>
+      </th>
+      <th>HTTP Verb</th>
+      <th>Path</th>
+      <th>Controller#Action</th>
+    </tr>
+  </thead>
+  <tbody>
+    <%= yield %>
+  </tbody>
+</table>
+
+<script type='text/javascript'>
+  function each(elems, func) {
+    if (!elems instanceof Array) var elems = [elems];
+    for(var i = elems.length; i--; ) {
+      func(elems[i]);
+    };
+  }
+
+  function setValOn(elems, val) {
+    each(elems, function(elem) {
+      elem.innerHTML = val;
+    })
+  }
+
+ function onClick(elems, func) {
+    each(elems, function(elem) {
+      elem.onclick = func;
+    })
+  }
+
+  // Enables functionality to toggle between `_path` and `_url` helper suffixes
+  function setupRouteToggleHelperLinks() {
+    var toggleLinks = document.querySelectorAll('#route_table [data-route-helper]');
+    onClick(toggleLinks, function(){
+      var helperTxt   = this.getAttribute("data-route-helper");
+      var helperElems = document.querySelectorAll('[data-route-name] span.helper');
+      setValOn(helperElems, helperTxt);
+    })
+  }
+
+  setupRouteToggleHelperLinks();
+</script>