Add ability to diff ignores for two drivers. Closes #1.

app.rb

@@ -53,11 +53,11 @@
   }.to_json
 end
 
-get "/ignores/:driver.json" do |driver|
+get "/ignores/:drivers.json" do |drivers|
   content_type :json
 
-  drivers = driver.split(",").map { |d| d.upcase }
-  ignores = current_ignores.select { |ig| (ig.driver_names & drivers).any? }
+  drivers = drivers.split(",").map { |d| d.upcase }
+  ignores = ignores_for(drivers)
 
   {
     :ignores => ignores,
@@ -66,11 +66,45 @@
   }.to_json
 end
 
+get "/drivers.json" do
+  content_type :json
+
+  names = current_ignores.map { |e| e.driver_names }.flatten.uniq
+  names.map! { |n| { :name => n } }
+
+  {:drivers => names}.to_json
+end
+
+get "/diff/:drivers.json" do |drivers|
+  content_type :json
+
+  drivers = drivers.split(",").map { |d| d.upcase }
+  ignores = ignores_for(drivers)
+
+  ignores.map { |ig|
+    names = ig.driver_names
+    a, b = *drivers
+
+    if names.include? a and names.include? b
+      # ignored for both drivers - do nothing
+    elsif names.include? drivers[0]
+      ig.as_json.merge(:side => "left")
+    else
+      ig.as_json.merge(:side => "right")
+    end
+  }.compact.to_json
+end
+
 helpers do
   def current_ignores
     data = settings.db.find.sort([:_id, :descending]).limit(1).first.fetch('ignores')
     data.map { |e| IgnoreView.new(e) }.sort_by { |ig| ig.name }
   end
+
+  def ignores_for(drivers)
+
+    current_ignores.select { |ig| (ig.driver_names & drivers).any? }
+  end
 end
 
 class IgnoreView

public/css/app.css

@@ -108,3 +108,15 @@ table tbody td {
   font-size: 8pt;
 }
 
+.left td {
+  background: #9F9;
+  border: 1px solid #3A3;
+  border-width: 0 1px 0 1px;
+}
+
+.right td {
+  background: #F88;
+  border: 1px solid #A33;
+  border-width: 0 1px 0 1px;
+}
+

public/diff.mustache

@@ -0,0 +1,15 @@
+<select id="diff-left">
+  {{#drivers}}
+    <option value="{{name}}">{{name}}</option>
+  {{/drivers}}
+</select>
+
+vs
+
+<select id="diff-right">
+  {{#drivers}}
+    <option value="{{name}}">{{name}}</option>
+  {{/drivers}}
+</select>
+
+<div id="diff"></div>

public/ignores.mustache

@@ -14,7 +14,7 @@
 
   <tbody>
     {{#ignores}}
-      <tr>
+      <tr class="{{side}}">
 
         <td>
           <a href="{{url}}">{{short_class_name}} {{test_name}}</a>

public/js/src/app.js

@@ -1,41 +1,67 @@
+/* globals Sammy */
+
 var app = Sammy('#main', function() {
   this.use('Mustache');
 
   this.get('#/ignores', function() {
+    Menu.selectTab("list");
+
     this.render("spinner.mustache")
         .swap()
         .load('ignores.json')
         .render('ignores.mustache')
-        .then(function() { Menu.selectLink("list-link"); })
-        .swap();
+        .swap()
+    ;
   });
 
   this.get("#/ignores/:driver", function() {
+    Menu.selectTab("list");
+
     this.render("spinner.mustache")
         .swap()
         .load('ignores/' + this.params.driver + ".json")
         .render('ignores.mustache')
-        .then(function() { Menu.selectLink("list-link"); })
-        .swap();
+        .swap()
+    ;
   })
 
   this.get("#/stats", function(context) {
+    Menu.selectTab("stats");
+
     this.render("spinner.mustache")
         .swap()
-        .load("stats.json").then(function(data) {
+        .load("stats.json")
+        .then(function(data) {
           context.render("stats.mustache", data)
                  .swap()
-                 .then(function() { Menu.selectLink("stats-link"); })
                  .then(function() {
                    var stats = new Stats(data);
                    var line = document.getElementById('line-graph');
-                   var column = document.getElementById("column-graph")
+                   var column = document.getElementById("column-graph");
 
                    stats.renderLineGraphTo(line);
                    stats.renderColumnGraphTo(column);
                  });
-        });
-    })
+        })
+    ;
+  })
+
+  this.get("#/diff", function(context) {
+    Menu.selectTab("diff");
+
+    this.render("spinner.mustache")
+        .swap()
+        .load("drivers.json")
+        .then(function(drivers) {
+          console.log(drivers)
+          context.render("diff.mustache", drivers)
+                 .swap()
+                 .then(function() { Diff.init(context); })
+          ;
+        })
+    ;
+  });
+
 });
 
 app.run('#/ignores');

public/js/src/diff.js

@@ -0,0 +1,27 @@
+var Diff = (function() {
+  var context = null;
+
+  var loadDiff = function() {
+    var drivers = $("select").map(function(idx) {
+      return this.value;
+    });
+
+    var path = "diff/" + drivers.toArray().join(',') + ".json";
+
+    context.load(path)
+           .then(function(data) {
+             context.render("ignores.mustache",
+              {ignores: data, count: data.length}
+             ).replace('#diff');
+           })
+  };
+
+  return {
+    init: function(ctx) {
+      context = ctx;
+      $("select").change(loadDiff)
+    }
+  }
+
+
+})();

public/js/src/menu.js

@@ -1,6 +1,8 @@
 var Menu = (function() {
   return {
-    selectLink: function(id) {
+    selectTab: function(name) {
+      var id = "" + name + "-link";
+
       $(".menu a").each(function(index) {
         if (this.id == id) {
           $(this).addClass("selected");

views/app.erb

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <title>Selenium Ignore Dashboard</title>
   <link rel="stylesheet" href="css/app.css" type="text/css" media="screen" charset="utf-8">
-  
+
   <script type="text/javascript">
 
     var _gaq = _gaq || [];
@@ -27,9 +27,9 @@
   <ul class="menu">
     <li><a id="list-link" href="#/ignores" class="selected">List</a></li>
     <li><a id="stats-link" href="#/stats">Graphs</a></li>
+    <li><a id="diff-link" href="#/diff">Diff</a></li>
   </ul>
 
-
   <div id="main"></div>
 
   <script src="js/lib/jquery.js" type="text/javascript" charset="utf-8"></script>
@@ -39,6 +39,7 @@
   <script src="highcharts/js/highcharts.js" type="text/javascript" charset="utf-8"></script>
   <script src="js/src/menu.js" type="text/javascript" charset="utf-8"></script>
   <script src="js/src/stats.js" type="text/javascript" charset="utf-8"></script>
+  <script src="js/src/diff.js" type="text/javascript" charset="utf-8"></script>
   <script src="js/src/app.js" type="text/javascript" charset="utf-8"></script>
 </body>
 </html>