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.

3 files changed, 51 insertions, 9 deletions

diff --git a/actionpack/lib/action_dispatch/routing/inspector.rb b/actionpack/lib/action_dispatch/routing/inspector.rb
index 8d7461ecc3..63d394be75 100644
--- a/actionpack/lib/action_dispatch/routing/inspector.rb
+++ b/actionpack/lib/action_dispatch/routing/inspector.rb
@@ -67,15 +67,19 @@ module ActionDispatch
         @engines = Hash.new
       end
 
-      def format(all_routes, filter = nil)
+      def format(all_routes, filter = nil, format = :txt)
         if filter
           all_routes = all_routes.select{ |route| route.defaults[:controller] == filter }
         end
 
         routes = collect_routes(all_routes)
 
-        formatted_routes(routes) +
-          formatted_routes_for_engines
+        routes = formatted_routes(routes, format) + formatted_routes_for_engines(format)
+        if format == :html
+          routes.join('')
+        else
+          routes
+        end
       end
 
       def collect_routes(routes)
@@ -101,19 +105,32 @@ module ActionDispatch
         end
       end
 
-      def formatted_routes_for_engines
+      def formatted_routes_for_engines(format)
         @engines.map do |name, routes|
-          ["\nRoutes for #{name}:"] + formatted_routes(routes)
+          ["\nRoutes for #{name}:"] + formatted_routes(routes, format)
         end.flatten
       end
 
-      def formatted_routes(routes)
+      def formatted_routes(routes, format)
         name_width = routes.map{ |r| r[:name].length }.max
         verb_width = routes.map{ |r| r[:verb].length }.max
         path_width = routes.map{ |r| r[:path].length }.max
 
         routes.map do |r|
-          "#{r[:name].rjust(name_width)} #{r[:verb].ljust(verb_width)} #{r[:path].ljust(path_width)} #{r[:reqs]}"
+          if format == :txt
+            "#{r[:name].rjust(name_width)} " +
+            "#{r[:verb].ljust(verb_width)} " +
+            "#{r[:path].ljust(path_width)} " +
+            "#{r[:reqs]}"
+          elsif format == :html
+            route = r
+            "<tr class='route-row' data-helper='path' #{[:name, :verb, :path, :reqs].each {|key| "data-#{key}='#{route[key]}'"} } >" +
+              "<td class='route-name'>#{route[:name] + "<span class='helper'>_path</span>" if route[:name].present?}</td>" +
+              "<td class='route-verb'>#{route[:verb]}</td>" +
+              "<td class='route-path'>#{route[:path]}</td>" +
+              "<td class='route-reqs'>#{route[:reqs]}</td>" +
+            "</tr>"
+          end
         end
       end
     end
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