introduce FPS graph to visualize slow UIs

Summary:
This diff creates a small FPS graph to be able to see where we slow down the app. This visualizes two things

1. The amount of FPS we render at (from tracking.fps).
2. If we were not able to render at all (due to the main thread being blocked fully), we interpolate the graph and draw it in red.

Reviewed By: nikoant

Differential Revision: D19579115

fbshipit-source-id: 2421d724c6d514986759bc9d68b92a5e4f51e401

src/dispatcher/tracking.tsx

@@ -9,6 +9,7 @@
 
 import {ipcRenderer} from 'electron';
 import {performance} from 'perf_hooks';
+import EventEmitter from 'events';
 
 import {Store} from '../reducers/index';
 import {Logger} from '../fb-interfaces/Logger';
@@ -37,6 +38,8 @@ export type UsageSummary = {
   [pluginName: string]: {focusedTime: number; unfocusedTime: number};
 };
 
+export const fpsEmitter = new EventEmitter();
+
 export default (store: Store, logger: Logger) => {
   let droppedFrames: number = 0;
   let largeFrameDrops: number = 0;
@@ -46,7 +49,9 @@ export default (store: Store, logger: Logger) => {
   ) {
     const now = performance.now();
     requestAnimationFrame(() => droppedFrameDetection(now, isWindowFocused));
-    const dropped = Math.round((now - past) / (1000 / 60) - 1);
+    const delta = now - past;
+    const dropped = Math.round(delta / (1000 / 60) - 1);
+    fpsEmitter.emit('fps', delta > 1000 ? 0 : Math.round(1000 / (now - past)));
     if (!isWindowFocused() || dropped < 1) {
       return;
     }