Move app/src (mostly) to flipper-ui-core/src

Summary:
This diff moves all UI code from app/src to app/flipper-ui-core. That is now slightly too much (e.g. node deps are not removed yet), but from here it should be easier to move things out again, as I don't want this diff to be open for too long to avoid too much merge conflicts.

* But at least flipper-ui-core is Electron free :)
* Killed all cross module imports as well, as they where now even more in the way
* Some unit test needed some changes, most not too big (but emotion hashes got renumbered in the snapshots, feel free to ignore that)
* Found some files that were actually meaningless (tsconfig in plugins, WatchTools files, that start generating compile errors, removed those

Follow up work:
* make flipper-ui-core configurable, and wire up flipper-server-core in Electron instead of here
* remove node deps (aigoncharov)
* figure out correct place to load GKs, plugins, make intern requests etc., and move to the correct module
* clean up deps

Reviewed By: aigoncharov

Differential Revision: D32427722

fbshipit-source-id: 14fe92e1ceb15b9dcf7bece367c8ab92df927a70

desktop/flipper-ui-core/src/chrome/FpsGraph.tsx

@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React, {useEffect, useRef} from 'react';
+import {fpsEmitter} from '../dispatcher/tracking';
+
+const width = 36;
+const height = 36;
+const graphHeight = 20;
+
+export default function FpsGraph({sampleRate = 200}: {sampleRate?: number}) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const fps: number[] = new Array<number>(width).fill(0, 0, width);
+    let lastFps = 0;
+    let lastDraw = Date.now();
+
+    const handler = (xfps: number) => {
+      // at any interval, take the lowest to better show slow downs
+      lastFps = Math.min(lastFps, xfps);
+    };
+
+    const interval = setInterval(() => {
+      const ctx = canvasRef.current!.getContext('2d')!;
+      ctx.clearRect(0, 0, width, height);
+      ctx.strokeStyle = '#ddd';
+
+      const now = Date.now();
+      let missedFrames = 0;
+      // check if we missed some measurements, in that case the CPU was fully choked!
+      for (let i = 0; i < Math.floor((now - lastDraw) / sampleRate) - 1; i++) {
+        fps.push(0);
+        fps.shift();
+        missedFrames++;
+      }
+      lastDraw = now;
+
+      // latest measurement
+      fps.push(lastFps);
+      fps.shift();
+
+      ctx.font = 'lighter 10px arial';
+      ctx.strokeText(
+        '' +
+          (missedFrames
+            ? // if we were chocked, show FPS based on frames missed
+              Math.floor((1000 / sampleRate) * missedFrames)
+            : lastFps) +
+          ' fps',
+        0,
+        height - 4,
+      );
+
+      ctx.moveTo(0, height);
+      ctx.beginPath();
+      ctx.lineWidth = 1;
+      fps.forEach((num, idx) => {
+        ctx.lineTo(idx, graphHeight - (Math.min(60, num) / 60) * graphHeight);
+      });
+
+      ctx.strokeStyle = missedFrames ? '#ff0000' : '#ddd';
+
+      ctx.stroke();
+      lastFps = 60;
+    }, sampleRate);
+
+    fpsEmitter.on('fps', handler);
+
+    return () => {
+      clearInterval(interval);
+      fpsEmitter.off('fps', handler);
+    };
+  }, []);
+
+  return (
+    <div style={{width, height}}>
+      <canvas
+        ref={canvasRef}
+        width={width}
+        height={height}
+        title="Current framerate in FPS"
+      />
+    </div>
+  );
+}