Bug 1153105 - add orange factor to modal view

extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl

@@ -987,6 +987,7 @@
       END;
     %]
 
+    [% Hook.process('details_lhs') %]
   [% END %]
   [% WRAPPER fields_rhs %]
 
@@ -1007,6 +1008,7 @@
         hide_on_view = bug.see_also.size == 0
     %]
 
+    [% Hook.process('details_rhs') %]
   [% END %]
 
   [%# custom fields (textarea) %]

extensions/OrangeFactor/Extension.pm

@@ -23,7 +23,9 @@ sub template_before_process {
     my $user = Bugzilla->user;
 
     return unless ($file eq 'bug/show-header.html.tmpl'
-                   || $file eq 'bug/edit.html.tmpl');
+                   || $file eq 'bug/edit.html.tmpl'
+                   || $file eq 'bug_modal/header.html.tmpl'
+                   || $file eq 'bug_modal/edit.html.tmpl');
     return unless ($user->id
                    && $user->settings->{'orange_factor'}->{'value'} eq 'on');
 

extensions/OrangeFactor/template/en/default/hook/bug_modal/edit-details_rhs.html.tmpl

@@ -0,0 +1,26 @@
+[%# This Source Code Form is subject to the terms of the Mozilla Public
+  # License, v. 2.0. If a copy of the MPL was not distributed with this
+  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+  #
+  # This Source Code Form is "Incompatible With Secondary Licenses", as
+  # defined by the Mozilla Public License, v. 2.0.
+  #%]
+
+[% USE Bugzilla %]
+[% cgi = Bugzilla.cgi %]
+
+[% IF orange_factor %]
+  [% WRAPPER bug_modal/field.html.tmpl
+     label    = "Orange Factor"
+     editable = 0
+  %]
+    [% IF cgi.user_agent.match('(?i)gecko') %]
+      <canvas id="orange-graph" style="display:none;"></canvas>
+      <span id="orange-count" style="display:none;"></span>
+    [% END %]
+    <span id="orange-link">
+      (<a href="https://brasstacks.mozilla.com/orangefactor/?display=Bug&bugid=[% bug.bug_id FILTER uri %]"
+          title="Click to load Orange Factor page for this [% terms.bug %]">link</a>)
+    </span>
+  [% END %]
+[% END %]

extensions/OrangeFactor/template/en/default/hook/bug_modal/header-end.html.tmpl

@@ -0,0 +1,17 @@
+[%# This Source Code Form is subject to the terms of the Mozilla Public
+  # License, v. 2.0. If a copy of the MPL was not distributed with this
+  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+  #
+  # This Source Code Form is "Incompatible With Secondary Licenses", as
+  # defined by the Mozilla Public License, v. 2.0.
+  #%]
+
+[% USE Bugzilla %]
+[% cgi = Bugzilla.cgi %]
+
+[% IF orange_factor && cgi.user_agent.match('(?i)gecko') %]
+  [% style_urls.push('extensions/OrangeFactor/web/style/orangefactor.css') %]
+  [% javascript_urls.push('extensions/OrangeFactor/web/js/sparklines.min.js') %]
+  [% javascript_urls.push('extensions/OrangeFactor/web/js/orange_factor.js') %]
+[% END %]
+

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();
+});

extensions/OrangeFactor/web/style/orangefactor.css

@@ -11,3 +11,7 @@
     height: 38px;
     margin: 0 .5em .5em 0;
 }
+
+#orange-count, #orange-link {
+    color: #666;
+}