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)

1 files changed, 56 insertions, 0 deletions

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>