Output routes in :html format

By formatting routes for different media (txt/html) we can apply optimizations based on the format. We can include meta-data in the HTML to allow a rich experience while rendering and viewing the routes. This PR shows route helpers as they are used with the `_path` extension, it also has a javascript toggle on the top to switch to `_url`. This way the developer can see the exact named route helper they can use instead of having to modify a base. 

This is one example of an optimization that could be applied. Eventually we can link out to guides for the different columns to better explain what helper, HTTP Verb, Path, and Controller#action indicate. We could even add a route search box that could allow developers to input a given route and see all of the routes that match it. These are stand alone features and should be delivered separately.

2 files changed, 27 insertions, 2 deletions

diff --git a/railties/lib/rails/info_controller.rb b/railties/lib/rails/info_controller.rb
index fe1e25d88c..8ffb56a522 100644
--- a/railties/lib/rails/info_controller.rb
+++ b/railties/lib/rails/info_controller.rb
@@ -16,7 +16,7 @@ class Rails::InfoController < ActionController::Base
 
   def routes
     inspector = ActionDispatch::Routing::RoutesInspector.new
-    @info     = inspector.format(_routes.routes).join("\n")
+    @info     = inspector.format(_routes.routes, nil, :html)
   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..8a7e4d37a0 100644
--- a/railties/lib/rails/templates/rails/info/routes.html.erb
+++ b/railties/lib/rails/templates/rails/info/routes.html.erb
@@ -1,3 +1,7 @@
+<style>
+.route-row td {padding: 0 30px;}
+.routeTable   {margin:  0 auto 0;}
+</style>
 <h2>
   Routes
 </h2>
@@ -6,4 +10,25 @@
   Routes match in priority from top to bottom
 </p>
 
-<p><pre><%= @info %></pre></p>
\ No newline at end of file
+<table id='routeTable' class='routeTable'>
+  <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>
+  <%= @info.html_safe %>
+</table>
+
+<script type='text/javascript'>
+  $(document).ready(function (){
+    $("#routeTable [data-route-helper]").on('click', function(){
+      routeHelper = $(this).data("route-helper");
+      $('.route-name span.helper').html("_" + routeHelper);
+      return false;
+    })
+  })
+</script>
\ No newline at end of file