Bug 1153105 - add orange factor to modal view

2 files changed, 78 insertions, 74 deletions

diff --git a/extensions/OrangeFactor/web/js/orange_factor.js b/extensions/OrangeFactor/web/js/orange_factor.js
index da993580d..26edb9aa1 100644
--- a/extensions/OrangeFactor/web/js/orange_factor.js
+++ b/extensions/OrangeFactor/web/js/orange_factor.js
@@ -6,86 +6,86 @@
  * defined by the Mozilla Public License, v. 2.0. 
  */
 
-YAHOO.namespace('OrangeFactor');
+$(function() {
+    'use strict';
+    var dayMs = 24 * 60 * 60 * 1000;
+    var limit = 7;
 
-var OrangeFactor = YAHOO.OrangeFactor;
-
-OrangeFactor.dayMs = 24 * 60 * 60 * 1000,
-OrangeFactor.limit = 7;
-
-OrangeFactor.getOrangeCount = function (data) {
-    data = data.oranges;
-    var total = 0,
-        days = [],
-        date = OrangeFactor.getCurrentDateMs() - OrangeFactor.limit * OrangeFactor.dayMs;
-    for(var i = 0; i < OrangeFactor.limit; i++) {
-        var iso = OrangeFactor.dateString(new Date(date));
-        var count = data[iso] ? data[iso].orangecount : 0;
-        days.push(count);
-        total += count;
-        date += OrangeFactor.dayMs;
+    function getOrangeCount(data) {
+        data = data.oranges;
+        var total = 0,
+            days = [],
+            date = getCurrentDateMs() - limit * dayMs;
+        for(var i = 0; i < limit; i++) {
+            var iso = dateString(new Date(date));
+            var count = data[iso] ? data[iso].orangecount : 0;
+            days.push(count);
+            total += count;
+            date += dayMs;
+        }
+        displayGraph(days);
+        displayCount(total);
     }
-    OrangeFactor.displayGraph(days);
-    OrangeFactor.displayCount(total);
-}
 
-OrangeFactor.displayGraph = function (dayCounts) {
-    var max = dayCounts.reduce(function(max, count) {
-        return count > max ? count : max;
-    });
-    var graphContainer = YAHOO.util.Dom.get('orange-graph');
-    Dom.removeClass(graphContainer, 'bz_default_hidden');
-    YAHOO.util.Dom.setAttribute(graphContainer, 'title',
-                                'failures over the past week, max in a day: ' + max);
-    var  opts = {
-        "percentage_lines":[0.25, 0.5, 0.75],
-        "fill_between_percentage_lines": false,
-        "left_padding": 0,
-        "right_padding": 0,
-        "top_padding": 0,
-        "bottom_padding": 0,
-        "background": "#D0D0D0",
-        "stroke": "#000000",
-        "percentage_fill_color": "#CCCCFF",
-        "scale_from_zero": true,
-    };
-    new Sparkline('orange-graph', dayCounts, opts).draw();
-}
+    function displayGraph(dayCounts) {
+        var max = dayCounts.reduce(function(max, count) {
+            return count > max ? count : max;
+        });
+        $('#orange-graph')
+            .attr('title', 'failures over the past week, max in a day: ' + max)
+            .show();
+        var  opts = {
+            "percentage_lines":[0.25, 0.5, 0.75],
+            "fill_between_percentage_lines": false,
+            "left_padding": 0,
+            "right_padding": 0,
+            "top_padding": 0,
+            "bottom_padding": 0,
+            "background": "#D0D0D0",
+            "stroke": "#000000",
+            "percentage_fill_color": "#CCCCFF",
+            "scale_from_zero": true,
+        };
+        new Sparkline('orange-graph', dayCounts, opts).draw();
+    }
 
-OrangeFactor.displayCount = function (count) {
-    var countContainer = YAHOO.util.Dom.get('orange-count');
-    countContainer.innerHTML = encodeURIComponent(count) + 
-                               ' failures on trunk in the past week';
-}
+    function displayCount(count) {
+        $('#orange-count').text(count + ' failures on trunk in the past week');
+    }
 
-OrangeFactor.dateString = function (date) {
-    function norm(part) {
-        return JSON.stringify(part).length == 2 ? part : '0' + part;
+    function dateString(date) {
+        function norm(part) {
+            return JSON.stringify(part).length == 2 ? part : '0' + part;
+        }
+        return date.getFullYear()
+            + "-" + norm(date.getMonth() + 1)
+            + "-" + norm(date.getDate());
     }
-    return date.getFullYear()
-           + "-" + norm(date.getMonth() + 1)
-           + "-" + norm(date.getDate());
-}
 
-OrangeFactor.getCurrentDateMs = function () {
-    var d = new Date;
-    return d.getTime();
-}
+    function getCurrentDateMs() {
+        var d = new Date;
+        return d.getTime();
+    };
 
-OrangeFactor.orangify = function () {
-    var bugId = document.forms['changeform'].id.value;
-    var url = "https://brasstacks.mozilla.com/orangefactor/api/count?" +
-              "bugid=" + encodeURIComponent(bugId) + 
-              "&tree=trunk" +
-              "&callback=OrangeFactor.getOrangeCount";
-    var script = document.createElement('script');
-    Dom.setAttribute(script, 'src', url);
-    Dom.setAttribute(script, 'type', 'text/javascript');
-    var head = document.getElementsByTagName('head')[0];
-    head.appendChild(script);
-    var countContainer = YAHOO.util.Dom.get('orange-count');
-    Dom.removeClass(countContainer, 'bz_default_hidden');
-    countContainer.innerHTML = 'Loading...';a
-}
+    function orangify() {
+        $('#orange-count')
+            .text('Loading...')
+            .show();
+        var bugId = document.forms['changeform'].id.value;
+        var request = {
+            dataType: "json",
+            url: "https://brasstacks.mozilla.com/orangefactor/api/count?" +
+                 "bugid=" + encodeURIComponent(bugId) + "&tree=trunk"
+        };
+        $.ajax(request)
+            .done(function(data) {
+                getOrangeCount(data);
+            })
+            .error(function() {
+                $('#graph-count').hide();
+                $('#orange-graph').hide()
+            });
+    }
 
-YAHOO.util.Event.onDOMReady(OrangeFactor.orangify);
+    orangify();
+});
diff --git a/extensions/OrangeFactor/web/style/orangefactor.css b/extensions/OrangeFactor/web/style/orangefactor.css
index 211ad575e..19839d143 100644
--- a/extensions/OrangeFactor/web/style/orangefactor.css
+++ b/extensions/OrangeFactor/web/style/orangefactor.css
@@ -11,3 +11,7 @@
     height: 38px;
     margin: 0 .5em .5em 0;
 }
+
+#orange-count, #orange-link {
+    color: #666;
+}