Exports Wasted bytes metric for Images Plugins

Summary: Exports the `WASTED_BYTES` metric for the Images plugin. Currently its not possible to export the trace for Images Plugin, as all its listeners are setup in the init function of the component. Also it follows "pull" strategy, i.e Flipper asks for the data at component initialization. I will work on asking for the Fresco data when we terminate the headless, just like Layout Plugin.

Reviewed By: oprisnik

Differential Revision: D15393752

fbshipit-source-id: 4f0717ac5fb70a82aab5c803a4f92708d1faa9df

src/plugins/fresco/index.js

@@ -15,7 +15,7 @@ import type {
   CacheInfo,
 } from './api.js';
 import type {ImagesMap} from './ImagePool.js';
-
+import type {MetricType} from 'flipper';
 import React from 'react';
 import ImagesCacheOverview from './ImagesCacheOverview.js';
 import {
@@ -73,6 +73,33 @@ export default class extends FlipperPlugin<PluginState, *, PersistedState> {
     surfaceList: new Set(),
   };
 
+  static metricsReducer = (
+    persistedState: PersistedState,
+  ): Promise<MetricType> => {
+    const {events, imagesMap} = persistedState;
+    let wastedBytes = 0;
+    events.forEach(event => {
+      const {viewport, imageIds} = event;
+      if (!viewport) {
+        return;
+      }
+      imageIds.forEach(imageID => {
+        const imageData: ImageData = imagesMap[imageID];
+        if (!imageData) {
+          return;
+        }
+        const imageWidth: number = imageData.width;
+        const imageHeight: number = imageData.height;
+        const viewPortWidth: number = viewport.width;
+        const viewPortHeight: number = viewport.height;
+        const viewPortArea = viewPortWidth * viewPortHeight;
+        const imageArea = imageWidth * imageHeight;
+        wastedBytes += Math.max(0, imageArea - viewPortArea);
+      });
+    });
+    return Promise.resolve({WASTED_BYTES: wastedBytes});
+  };
+
   state: PluginState;
   imagePool: ImagePool;
   nextEventId: number = 1;