feat(perf): Add # of specific watchers & avg watcher time to perf pane

The list of watchers in the performance pane now shows:
 - Total time a particular watcher took in the last digest cycle
 - The text of the watcher
 - How many watchers of that type there are
 - Avg time (total / how many)

closes #49

Author: SomeKittens

panel/app.css

@@ -345,6 +345,16 @@ li .status:empty {
   text-overflow: ellipsis;
 }
 
+.perf .watcher-table {
+  width: 100%;
+  text-align: center;
+}
+
+.perf .watcher-table thead {
+  text-decoration: underline;;
+  font-size: 1.2em;
+}
+
 /* for the canvas */
 .graph {
   background: black;

panel/perf/perf.html

@@ -20,12 +20,26 @@ <h3 ng-hide="::lastDigestTime">Waiting for first digest cycle...</h3>
     </div>
   </div>
   <hr>
-  <h3>Digest timings</h3>
-  <div ng-repeat="watcher in watchTimings">
-    <pre class="left">{{ watcher.text }}</pre>
-    <pre class="right">{{ watcher.time | number }} ms</pre>
-  </div>
+  <h2>Digest timings</h2>
+  <table class="watcher-table">
+    <thead>
+      <tr>
+        <td>Watcher text</td>
+        <td>Watcher total time</td>
+        <td>Number of Watchers</td>
+        <td>Average watcher time</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr ng-repeat="watcher in watchTimings">
+        <td><pre>{{ watcher.text }}</pre></td>
+        <td><pre>{{ watcher.time | number }} ms</pre></td>
+        <td><pre>{{ watcher.count }}</pre></td>
+        <td><pre>{{ watcher.time / watcher.count | number }} ms</pre></td>
+      </tr>
+    </tbody>
+  </table>
   <hr>
-  <h3>Raw data</h3>
+  <h2>Raw data</h2>
   <pre>{{ perf | json }}</pre>
 </div>

panel/perf/perf.js

@@ -1,16 +1,16 @@
 'use strict';
 
-/* globals angular,document,console */
+/* globals angular,document */
 
 // Awesome canvas graph built with help from Kent Dodds
 // https://github.com/kentcdodds/ng-stats
 // Stats generated by eep.js
 // https://github.com/darach/eep-js
 
 angular.module('batarang.app.perf', [])
-  .controller('PerfController', ['$scope', 'inspectedApp', '$timeout', '$window', PerfController]);
+  .controller('PerfController', ['$scope', '$timeout', '$window', PerfController]);
 
-function PerfController($scope, inspectedApp, $timeout, $window) {
+function PerfController($scope, $timeout, $window) {
 
   $scope.watchTimings = [];
   $scope.numWatchers = 0;
@@ -57,19 +57,24 @@ function PerfController($scope, inspectedApp, $timeout, $window) {
 
     var reducedWatches = digestData.events.reduce(function (prev, next) {
       if (!prev[next.watch]) {
-        prev[next.watch] = next.time;
+        prev[next.watch] = {
+          time: next.time,
+          count: 1
+        };
       } else {
-        prev[next.watch] += next.time;
+        prev[next.watch].time += next.time;
+        prev[next.watch].count++;
       }
       return prev;
     }, {});
 
     $scope.watchTimings = Object.keys(reducedWatches)
-    .filter(function (key) { return reducedWatches[key]; })
+    .filter(function (key) { return reducedWatches[key].time; })
     .map(function (key) {
       return {
         text: key.trim().replace(/\s{2,}/g, ' '),
-        time: reducedWatches[key]
+        time: reducedWatches[key].time,
+        count: reducedWatches[key].count
       };
     })
     .sort(function (a, b) {