Bug 1170305 - Improve display of bar graphs in perfherder

* Allocate a smaller, fixed space for the bar graph (gives more
  space for the test labels, which are often quite long)
* Make bar graph on a scale from 0-20% (with 20%+ regressions /
  improvements consuming the full width)
* Add a tooltip documenting that we are only showing the relative
  magnitude of the regression/improvement
* Show differences even if unsure (just show a greyed out bar chart
  for those)

ui/css/perf.css

@@ -299,17 +299,23 @@ span.compare-regression {
   background-image: linear-gradient(to bottom, #FF9500, #FFCB00);
 }
 
+.bar {
+  height: 1em;
+  margin-top: 0.25em;
+  margin-bottom: 5px;
+  background-color: #bbb;
+}
+
+.bar-scale {
+  background-color: #eee;
+}
+
 .bar-improvement {
   background-color: green;
-  margin-left: 50%;
-  height: 1em;
-  margin-bottom: 5px;
 }
+
 .bar-regression {
   background-color: red;
-  margin-right: 50%;
-  height: 1em;
-  margin-bottom: 5px;
 }
 
 .detail-hint {

ui/js/perf.js

@@ -243,8 +243,9 @@ perf.factory('PhCompare', [ '$q', '$http', 'thServiceDomain', 'PhSeries',
                                     // - .[original|new]StddevPct  // stddev as percentage of the average
                                     // - .[original|new]Runs       // Display data: number of runs and their values
                                     // If both originalData/newData exist, comparison data:
-                                    // - .isImprovement
-                                    // - .isRegression
+                                    // - .newIsBetter              // is new result better or worse (even if unsure)
+                                    // - .isImprovement            // is new result better + we're confident about it
+                                    // - .isRegression             // is new result worse + we're confident about it
                                     // - .delta
                                     // - .deltaPercentage
                                     // - .confidence               // t-test value
@@ -252,7 +253,7 @@ perf.factory('PhCompare', [ '$q', '$http', 'thServiceDomain', 'PhSeries',
                                     // - .isMeaningful             // for highlighting - bool over t-test threshold
                                     // And some data to help formatting of the comparison:
                                     // - .className
-                                    // - .barGraphMargin
+                                    // - .magnitude
                                     // - .marginDirection
                                     getCounterMap: function getDisplayLineData(testName, originalData, newData) {
 
@@ -335,8 +336,10 @@ perf.factory('PhCompare', [ '$q', '$http', 'thServiceDomain', 'PhSeries',
 
                                         cmap.deltaPercentage = math.percentOf(cmap.delta, cmap.originalGeoMean);
 
-                                        cmap.barGraphMargin = 50 - Math.min(50, Math.abs(Math.round(cmap.deltaPercentage) / 2));
-                                        cmap.marginDirection = newIsBetter ? 'right' : 'left';
+                                        // arbitrary scale from 0-20% multiplied by 5, capped
+                                        // at 100 (so 20% regression == 100% bad)
+                                        cmap.magnitude = Math.min(Math.abs(cmap.deltaPercentage)*5, 100);
+                                        cmap.newIsBetter = newIsBetter;
 
                                         var abs_t_value = Math.abs(math.t_test(originalData.values, newData.values, STDDEV_DEFAULT_FACTOR));
                                         cmap.className = getClassName(newIsBetter, cmap.originalGeoMean, cmap.newGeoMean, abs_t_value);

ui/partials/perf/comparetable.html

@@ -7,7 +7,7 @@
       <td style="width: 30px;"><!-- less than / greater than --></td>
       <td style="width: 140px;">New</td>
       <td style="width: 80px;">Delta</td>
-      <td><!-- Graphical difference --></td>
+      <td style="width: 120px"><!-- Graphical difference --></td>
       <td style="width: 100px;">Confidence</td>
       <td class="num-runs" style="width: 80px"># Runs</td>
       <td class="test-warning" style="width: 30px"><!-- warning if not enough --></td>
@@ -43,7 +43,28 @@
           {{compareResult.deltaPercentage|displayPrecision}}%
         </span>
       </td>
-      <td><div ng-class="getCompareClasses(compareResult, 'bar')" style="margin-{{compareResult.marginDirection}}: {{compareResult.barGraphMargin}}%;"></div></td>
+      <td ng-if="compareResult.delta">
+        <div ng-if="!compareResult.newIsBetter" style="margin: auto; width: 80%;"
+             tooltip="Relative magnitude of change (scale from 0 - 20%+)">
+          <div class="bar bar-scale"
+               style="width: {{100 - compareResult.magnitude}}%; height: 1em; float: left;">
+          </div>
+          <div class="bar"
+               ng-class="{'bar-regression': compareResult.isRegression}"
+               style="width: {{compareResult.magnitude}}%; float: left;">
+          </div>
+        </div>
+        <div ng-if="compareResult.newIsBetter" style="margin: auto; width: 80%;"
+             tooltip="Relative magnitude of change (scale from 0 - 20%+)">
+          <div class="bar"
+               ng-class="{'bar-improvement': compareResult.isImprovement}"
+               style="width: {{compareResult.magnitude}}%; float: left;">
+          </div>
+          <div class="bar bar-scale"
+               style="width: {{100 - compareResult.magnitude}}%; float: left; ">
+          </div>
+        </div>
+      </td>
       <td ng-if="!compareResult.delta"></td>
       <td>
         <span ng-if="compareResult.confidenceText && compareResult.confidence">