Move offline icon storage to app/

Summary:
This diff splits Facebook management into a ui-core and electron part:

* Cleaned up code and introduces a uniform Icon type to describe a requested icon
* Computing icon urls is done in the ui-core
* Introduced a RenderHost hook that can transform the request icon into a different url, in this case, a url to load icons from disk in production builds

For the browser UI, the urls are currently no rewritten since we have only dev builds (which always used only FB urls already). We could do the same rewrite in the future and download the static assets during build time. But for now this means that in the browser implementation we depend on normal browser caching, with the biggest downside that icons might not appear if the user has no internet connections.

With this change we lost our last usage of staticPath computations in ui-core

Reviewed By: aigoncharov

Differential Revision: D32767426

fbshipit-source-id: d573b6a373e649c7dacd380cf63a50c2dbbd9e70

desktop/flipper-ui-core/src/utils/icons.tsx

@@ -0,0 +1,74 @@
+/**
+ * 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 {getRenderHostInstance} from '../RenderHost';
+import {IconSize} from '../ui/components/Glyph';
+
+const AVAILABLE_SIZES: IconSize[] = [8, 10, 12, 16, 18, 20, 24, 32];
+const DENSITIES = [1, 1.5, 2, 3, 4];
+
+export type Icon = {
+  name: string;
+  variant: 'outline' | 'filled';
+  size: IconSize;
+  density: number;
+};
+
+function normalizeIcon(icon: Icon): Icon {
+  let {size, density} = icon;
+  let requestedSize = size as number;
+  if (!AVAILABLE_SIZES.includes(size as any)) {
+    // 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;
+    }
+  }
+
+  return {
+    ...icon,
+    size: requestedSize as IconSize,
+    density,
+  };
+}
+
+export function getPublicIconUrl({name, variant, size, density}: Icon) {
+  return `https://facebook.com/assets/?name=${name}&variant=${variant}&size=${size}&set=facebook_icons&density=${density}x`;
+}
+
+export function getIconURL(icon: Icon) {
+  if (icon.name.indexOf('/') > -1) {
+    return icon.name;
+  }
+
+  icon = normalizeIcon(icon);
+  const baseUrl = getPublicIconUrl(icon);
+
+  return getRenderHostInstance().getLocalIconUrl?.(icon, baseUrl) ?? baseUrl;
+}