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.

actionpack/lib/action_dispatch/routing/inspector.rb

@@ -67,15 +67,19 @@ def initialize
         @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 @@ def collect_engine_routes(route)
         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

railties/lib/rails/info_controller.rb

@@ -16,7 +16,7 @@ def properties
 
   def routes
     inspector = ActionDispatch::Routing::RoutesInspector.new
-    @info     = inspector.format(_routes.routes).join("\n")
+    @info     = inspector.format(_routes.routes, nil, :html)
   end
 
   protected

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>
+<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>