From c7f3e4e5880108a6a77baf22dd6efa46aa1a3b2c Mon Sep 17 00:00:00 2001
From: Pritesh Nandgaonkar <prit91@fb.com>
Date: Mon, 20 May 2019 02:41:26 -0700
Subject: [PATCH] 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 | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/plugins/fresco/index.js b/src/plugins/fresco/index.js
index a55bfd68b..c26500e59 100644
--- a/src/plugins/fresco/index.js
+++ b/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;