Fractal Analysis Output

* Added analysis.xsl to transform the fractal validation xml into html which is injected into the analysis iframe. This allowed for easier styling of the returned xml data.
* Added xslt query plugin to fetch and transform the xml
* Styled the output in a similar manner to the Fractal website

mailcatcher.gemspec

@@ -21,6 +21,7 @@ Gem::Specification.new do |s|
     "public/images/**/*",
     "public/javascripts/**/*.js",
     "public/stylesheets/**/*.css",
+    "public/stylesheets/**/*.xsl",
     "views/**/*"
   ]
   s.require_paths = ["lib"]

public/javascripts/application.coffee

@@ -150,7 +150,6 @@ class MailCatcher
           <h1>Analyse your email with Fractal</h1>
           <p><a href="http://getfractal.com/" target="_blank">Fractal</a> is a really neat service that applies common email design and development knowledge from <a href="http://www.email-standards.org/" target="_blank">Email Standards Project</a> to your HTML email and tells you what you've done wrong or what you should do instead.</p>
           <p>Please note that this <strong>sends your email to the Fractal service</strong> for analysis. Read their <a href="http://getfractal.com/terms" target="_blank">terms of service</a> if you're paranoid.</p>
-          <p>(This output is still just raw XML. Someone keen to transform this into something prettier would be greatly appreciated!)</p>
           <form>
           <input type="submit" value="Analyse" /><span class="loading" style="color: #999; display: none">Analysing&hellip;</span>
           </form>
@@ -163,13 +162,8 @@ class MailCatcher
           $(this)
             .find('input[type="submit"]').attr('disabled', 'disabled').end()
             .find('.loading').show()
-          $.ajax
-            url: "/messages/#{id}/analysis.xml",
-            dataType: "text"
-            success: (data) ->
-              $form.replaceWith('<h2>Results</h2><pre id="result"></pre>')
-              $iframe.find("#result").text data
-
+          $form.xslt("/messages/#{id}/analysis.xml", "/stylesheets/analysis.xsl")
+
   refresh: ->
     $.getJSON '/messages', (messages) =>
       $.each messages, (i, message) =>

public/stylesheets/analysis.xsl

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="ISO-8859-1"?>
+<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+  <xsl:template match="/xml">
+
+  <section class="fractal-analysis">
+  <xsl:for-each select="result/errors/error">
+    <xsl:variable name="errorCount" select="position()"/>
+    <p class="report-intro">
+      <strong><xsl:value-of select="$errorCount" />.</strong> The <span class="code"><xsl:value-of select="rule/rule_name" /></span> near <span class="code"><xsl:value-of select="snippet" /></span> on line <span class="code"><xsl:value-of select="error_line" /></span> of your code.
+    </p>
+    <dl class="unsupported-clients">
+      <dt>This is unsupported in:</dt>
+      <dd>
+        <ul>
+          <xsl:for-each select="rule/email_client//item">
+          <li>
+            <xsl:value-of select="." />
+          </li>
+          </xsl:for-each>
+        </ul>    
+      </dd>
+    </dl>
+  </xsl:for-each>
+  </section>
+  </xsl:template>
+</xsl:stylesheet>

public/stylesheets/application.css

@@ -335,6 +335,23 @@ body > header {
       #message > header .views .action {
         *display: inline; }
 
+.fractal-analysis .report-intro {
+  background: #eef4f5;
+  margin-top: 1.5em;
+  padding: 1em; }
+  .fractal-analysis .report-intro strong {
+    font-weight: bold; }
+  .fractal-analysis .report-intro .code {
+    background-color: white;
+    font-family: comic Sans MS;
+    padding: 1px 5px; }
+.fractal-analysis .unsupported-clients {
+  margin: 1em; }
+  .fractal-analysis .unsupported-clients dt {
+    padding-left: 1em; }
+  .fractal-analysis .unsupported-clients dd {
+    padding-left: 2em; }
+
 iframe {
   display: -moz-box;
   display: -webkit-box;

public/stylesheets/application.sass

@@ -200,6 +200,24 @@ body > header
         float: right
         margin: 0 .25em
 
+.fractal-analysis
+  .report-intro
+    background: #EEF4F5
+    margin-top: 1.5em
+    padding: 1em
+    strong
+      font-weight: bold
+    .code
+      background-color: white
+      font-family: comic Sans MS
+      padding: 1px 5px
+  .unsupported-clients
+    margin: 1em
+    dt
+      padding-left: 1em
+    dd
+      padding-left: 2em
+
 iframe
   +display-box
   +box-flex(1)