HTML formatting to Rails::InfoController#routes

This PR adds formatting and meta-data to the display of the internal routes. Users can now toggle between showing helpers with the `_path` or _`url` suffix. 

There are multiple ways to achieve this, this method uses partials for formatting and meta-data. The partials can be re-used when rendering `routing_error.erb`, though that will need to be in a separate PR.

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


ATP Railties

2 files changed, 75 insertions, 3 deletions

diff --git a/railties/lib/rails/info_controller.rb b/railties/lib/rails/info_controller.rb
index e296637f39..ec7d5ed610 100644
--- a/railties/lib/rails/info_controller.rb
+++ b/railties/lib/rails/info_controller.rb
@@ -15,8 +15,7 @@ class Rails::InfoController < ActionController::Base # :nodoc:
   end
 
   def routes
-    inspector = ActionDispatch::Routing::RoutesInspector.new
-    @info     = inspector.format(_routes.routes).join("\n")
+    @routes = ActionDispatch::Routing::RoutesInspector.new.collect_routes(_routes.routes)
   end
 
   protected
diff --git a/railties/lib/rails/templates/rails/info/routes.html.erb b/railties/lib/rails/templates/rails/info/routes.html.erb
index 890f6f5b03..e34c1c4135 100644
--- a/railties/lib/rails/templates/rails/info/routes.html.erb
+++ b/railties/lib/rails/templates/rails/info/routes.html.erb
@@ -6,4 +6,77 @@
   Routes match in priority from top to bottom
 </p>
 
-<p><pre><%= @info %></pre></p>
\ No newline at end of file
+<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>
+  <% @routes.each do |route| %>
+    <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>
+  <% end %>
+  </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>