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/utils/icons.ts

@@ -0,0 +1,173 @@
+/**
+ * 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
+ */
+
+// We should get rid of sync use entirely but until then the
+// methods are marked as such.
+/* eslint-disable node/no-sync */
+
+import fs from 'fs';
+import path from 'path';
+import {getRenderHostInstance} from '../RenderHost';
+import {getStaticPath} from './pathUtils';
+
+const AVAILABLE_SIZES = [8, 10, 12, 16, 18, 20, 24, 32];
+const DENSITIES = [1, 1.5, 2, 3, 4];
+
+function getIconsPath() {
+  return getStaticPath('icons.json');
+}
+
+export type Icons = {
+  [key: string]: number[];
+};
+
+let _icons: Icons | undefined;
+
+export function getIconsSync(): Icons {
+  return (
+    _icons! ??
+    (_icons = JSON.parse(fs.readFileSync(getIconsPath(), {encoding: 'utf8'})))
+  );
+}
+
+// Takes a string like 'star', or 'star-outline', and converts it to
+// {trimmedName: 'star', variant: 'filled'} or {trimmedName: 'star', variant: 'outline'}
+function getIconPartsFromName(icon: string): {
+  trimmedName: string;
+  variant: 'outline' | 'filled';
+} {
+  const isOutlineVersion = icon.endsWith('-outline');
+  const trimmedName = isOutlineVersion ? icon.replace('-outline', '') : icon;
+  const variant = isOutlineVersion ? 'outline' : 'filled';
+  return {trimmedName: trimmedName, variant: variant};
+}
+
+function getIconFileName(
+  icon: {trimmedName: string; variant: 'outline' | 'filled'},
+  size: number,
+  density: number,
+) {
+  return `${icon.trimmedName}-${icon.variant}-${size}@${density}x.png`;
+}
+
+export function buildLocalIconPath(
+  name: string,
+  size: number,
+  density: number,
+) {
+  const icon = getIconPartsFromName(name);
+  return path.join('icons', getIconFileName(icon, size, density));
+}
+
+export function buildLocalIconURL(name: string, size: number, density: number) {
+  const icon = getIconPartsFromName(name);
+  return `icons/${getIconFileName(icon, size, density)}`;
+}
+
+export function buildIconURLSync(name: string, size: number, density: number) {
+  const icon = getIconPartsFromName(name);
+  // eslint-disable-next-line prettier/prettier
+  const url = `https://facebook.com/assets/?name=${
+    icon.trimmedName
+    }&variant=${
+    icon.variant
+    }&size=${size}&set=facebook_icons&density=${density}x`;
+  if (
+    typeof window !== 'undefined' &&
+    (!getIconsSync()[name] || !getIconsSync()[name].includes(size))
+  ) {
+    // From utils/isProduction
+    const isProduction = !/node_modules[\\/]electron[\\/]/.test(
+      getRenderHostInstance().paths.execPath,
+    );
+
+    if (!isProduction) {
+      const existing = getIconsSync()[name] || (getIconsSync()[name] = []);
+      if (!existing.includes(size)) {
+        // Check if that icon actually exists!
+        fetch(url)
+          .then((res) => {
+            if (res.status === 200 && !existing.includes(size)) {
+              // the icon exists
+              existing.push(size);
+              existing.sort();
+              fs.writeFileSync(
+                getIconsPath(),
+                JSON.stringify(getIconsSync(), null, 2),
+                'utf8',
+              );
+              console.warn(
+                `Added uncached icon "${name}: [${size}]" to /static/icons.json. Restart Flipper to apply the change.`,
+              );
+            } else {
+              throw new Error(
+                // eslint-disable-next-line prettier/prettier
+                `Trying to use icon '${name}' with size ${size} and density ${density}, however the icon doesn't seem to exists at ${url}: ${
+                res.status
+                }`,
+              );
+            }
+          })
+          .catch((e) => console.error(e));
+      }
+    } else {
+      console.warn(
+        `Using uncached icon: "${name}: [${size}]". Add it to /static/icons.json to preload it.`,
+      );
+    }
+  }
+  return url;
+}
+
+export function getIconURLSync(
+  name: string,
+  size: number,
+  density: number,
+  basePath: string = getRenderHostInstance().paths.appPath,
+) {
+  if (name.indexOf('/') > -1) {
+    return name;
+  }
+
+  let requestedSize = size;
+  if (!AVAILABLE_SIZES.includes(size)) {
+    // find the next largest size
+    const possibleSize = AVAILABLE_SIZES.find((size) => {
+      return size > requestedSize;
+    });
+
+    // set to largest size if the real size is larger than what we have
+    if (possibleSize == null) {
+      requestedSize = Math.max(...AVAILABLE_SIZES);
+    } else {
+      requestedSize = possibleSize;
+    }
+  }
+
+  if (!DENSITIES.includes(density)) {
+    // find the next largest size
+    const possibleDensity = DENSITIES.find((scale) => {
+      return scale > density;
+    });
+
+    // set to largest size if the real size is larger than what we have
+    if (possibleDensity == null) {
+      density = Math.max(...DENSITIES);
+    } else {
+      density = possibleDensity;
+    }
+  }
+
+  // resolve icon locally if possible
+  const iconPath = path.join(basePath, buildLocalIconPath(name, size, density));
+  if (fs.existsSync(iconPath)) {
+    return buildLocalIconURL(name, size, density);
+  }
+  return buildIconURLSync(name, requestedSize, density);
+}