Add legend, fix tooltips on Firefox.

website/awfy.js

@@ -5,6 +5,7 @@ var AWFY = { };
 AWFY.refreshTime = 1000 * 60 * 5;
 AWFY.machineId = 0;
 AWFY.refresh = true;
+AWFY.hasLegend = false;
 AWFY.panes = [];
 AWFY.queryParams = { };
 AWFY.drawLegend = function () {
@@ -70,6 +71,12 @@ AWFY.compute = function (xhr) {
         display.draw();
     }
 
+    // Draw the legend if needed.
+    if (!this.hasLegend) {
+        Display.drawLegend();
+        this.hasLegend = true;
+    }
+
     if (this.refresh)
         window.setTimeout(this.query.bind(this), this.refreshTime);
 }

website/frontpage.js

@@ -366,3 +366,16 @@ Display.prototype.onHover = function (event, pos, item) {
     this.hovering.drawBasic();
 }
 
+Display.drawLegend = function ()
+{
+    var legend = $("#legend");
+
+    for (var modename in AWFYMaster.modes) {
+        var mode = AWFYMaster.modes[modename];
+        var vendor = AWFYMaster.vendors[mode.vendor_id];
+        var item = $('<li style="border-color:' + mode.color + '"></li>');
+        item.text(vendor.browser + ' (' + mode.name + ')');
+        item.appendTo(legend);
+    }
+}
+

website/style.css

@@ -31,6 +31,7 @@ h1 {
 .tooltip {
  -moz-border-radius:.35em;
  -webkit-border-radius:.35em;
+ border-radius: .35em;
  background-color:#000;
  color:#FFF;
  display:none;
@@ -63,3 +64,20 @@ h1 {
  display: inline-block;
 }
 
+#legend {
+ text-align: left;
+ padding-top: 360px;
+ margin-left: -20px;
+ display: inline;
+ position: absolute;
+ left: 0;
+ list-style-type: none;
+}
+
+#legend li {
+ border-left: 1.2em solid #FFF;
+ margin-right: 2em;
+ padding-left: .3em;
+ margin-bottom: .2em;
+ font-size: 1.2em;
+}

website/tooltip.js

@@ -86,7 +86,8 @@ ToolTip.prototype.attachLine = function (color) {
     // Now overlay a line from the point to the tooltip, ya.
     var ns = "http://www.w3.org/2000/svg";
 
-    var svg = $(document.createElementNS(ns, 'svg'));
+    var svgElt = document.createElementNS(ns, 'svg');
+    var svg = $(svgElt);
     svg.css({ position: 'absolute',
               left: 0,
               top: 0,
@@ -102,7 +103,8 @@ ToolTip.prototype.attachLine = function (color) {
     line.setAttribute('stroke-width', 2);
     $(line).appendTo(svg);
 
-    svg.height($('window').height());
+    svgElt.setAttribute('width', '100%');
+    svgElt.setAttribute('height', '100%');
     svg.appendTo('body');
     this.svg = svg;
     this.line = line;