Make disk cache inspection toggleable

Summary: Adds a toggle switch to show/hide disk cache images defaulting to inactive. The image data is only sent on the adb connection when the toggle is activated.

Reviewed By: defHLT

Differential Revision: D20002059

fbshipit-source-id: 05c9e515ffe09441e5cfb6f66eb14559ac4a322c

android/plugins/fresco/src/main/java/com/facebook/flipper/plugins/fresco/FrescoFlipperPlugin.java

@@ -169,6 +169,7 @@ public class FrescoFlipperPlugin extends BufferingFlipperPlugin
             }
 
             mPerfLogger.startMarker("Sonar.Fresco.listImages");
+            final boolean showDiskImages = params.getBoolean("showDiskImages");
             final ImagePipelineFactory imagePipelineFactory = Fresco.getImagePipelineFactory();
 
             final CountingMemoryCacheInspector.DumpInfo bitmapMemoryCache =
@@ -182,10 +183,7 @@ public class FrescoFlipperPlugin extends BufferingFlipperPlugin
 
             try {
               responder.success(
-                  getImageList(
+                  getImageList(bitmapMemoryCache, encodedMemoryCache, showDiskImages));
-                      bitmapMemoryCache,
-                      encodedMemoryCache,
-                      imagePipelineFactory.getMainFileCache().getDumpInfo().entries));
               mPerfLogger.endMarker("Sonar.Fresco.listImages");
             } finally {
               bitmapMemoryCache.release();
@@ -406,21 +404,24 @@ public class FrescoFlipperPlugin extends BufferingFlipperPlugin
   private FlipperObject getImageList(
       final CountingMemoryCacheInspector.DumpInfo bitmapMemoryCache,
       final CountingMemoryCacheInspector.DumpInfo encodedMemoryCache,
-      final List<DiskStorage.DiskDumpInfoEntry> diskEntries) {
+      final boolean showDiskImages)
-    return new FlipperObject.Builder()
+      throws IOException {
-        .put(
+    FlipperArray.Builder levelsBuilder =
-            "levels",
+        new FlipperArray.Builder()
-            new FlipperArray.Builder()
+            // bitmap
-                // bitmap
+            .put(getUsedStats("On screen bitmaps", bitmapMemoryCache))
-                .put(getUsedStats("On screen bitmaps", bitmapMemoryCache))
+            .put(getCachedStats("Bitmap memory cache", bitmapMemoryCache))
-                .put(getCachedStats("Bitmap memory cache", bitmapMemoryCache))
+            // encoded
-                // encoded
+            .put(getUsedStats("Used encoded images", encodedMemoryCache))
-                .put(getUsedStats("Used encoded images", encodedMemoryCache))
+            .put(getCachedStats("Cached encoded images", encodedMemoryCache));
-                .put(getCachedStats("Cached encoded images", encodedMemoryCache))
+    if (showDiskImages) {
-                // disk
+      levelsBuilder.put(
-                .put(getDiskStats("Disk images", diskEntries))
+          getDiskStats(
-                .build())
+              "Disk images",
-        .build();
+              Fresco.getImagePipelineFactory().getMainFileCache().getDumpInfo().entries));
+    }
+
+    return new FlipperObject.Builder().put("levels", levelsBuilder.build()).build();
   }
 
   private FlipperObject getUsedStats(

desktop/package.json

@@ -109,8 +109,8 @@
   "devDependencies": {
     "@babel/code-frame": "^7.10.4",
     "@jest-runner/electron": "^3.0.0",
-    "@testing-library/react": "^10.4.3",
     "@testing-library/dom": "^7.20.2",
+    "@testing-library/react": "^10.4.3",
     "@types/algoliasearch": "^3.30.19",
     "@types/babel__code-frame": "^7.0.0",
     "@types/babel__core": "^7.1.6",

desktop/plugins/fresco/ImagesCacheOverview.tsx

@@ -87,6 +87,8 @@ type ImagesCacheOverviewProps = {
   events: Array<ImageEventWithId>;
   onTrackLeaks: (enabled: boolean) => void;
   isLeakTrackingEnabled: boolean;
+  onShowDiskImages: (enabled: boolean) => void;
+  showDiskImages: boolean;
 };
 
 type ImagesCacheOverviewState = {
@@ -231,6 +233,11 @@ export default class ImagesCacheOverview extends PureComponent<
             onClick={this.props.onTrackLeaks}
             label="Track Leaks"
           />
+          <Toggle
+            toggled={this.props.showDiskImages}
+            onClick={this.props.onShowDiskImages}
+            label="Show Disk Images"
+          />
           <Spacer />
           <input
             type="range"

desktop/plugins/fresco/__tests__/index.node.tsx

@@ -59,6 +59,7 @@ function mockPersistedState(
     closeableReferenceLeaks: [],
     isLeakTrackingEnabled: false,
     nextEventId: 0,
+    showDiskImages: false,
   };
 }
 
@@ -247,6 +248,7 @@ test('the metric reducer with the multiple events', () => {
     imagesMap,
     closeableReferenceLeaks: [],
     isLeakTrackingEnabled: true,
+    showDiskImages: false,
   };
   const metricsReducer = FrescoPlugin.metricsReducer;
   expect(metricsReducer).toBeDefined();

desktop/plugins/fresco/index.tsx

@@ -45,6 +45,7 @@ export type PersistedState = {
   imagesMap: ImagesMap;
   closeableReferenceLeaks: Array<AndroidCloseableReferenceLeakEvent>;
   isLeakTrackingEnabled: boolean;
+  showDiskImages: boolean;
   nextEventId: number;
 };
 
@@ -96,6 +97,7 @@ export default class FlipperImagesPlugin extends FlipperPlugin<
     surfaceList: new Set(),
     closeableReferenceLeaks: [],
     isLeakTrackingEnabled: false,
+    showDiskImages: false,
     nextEventId: 0,
   };
 
@@ -112,7 +114,7 @@ export default class FlipperImagesPlugin extends FlipperPlugin<
       return defaultPromise;
     }
     return Promise.all([
-      callClient('listImages'),
+      callClient('listImages', {showDiskImages: persistedState.showDiskImages}),
       callClient('getAllImageEventsInfo'),
     ]).then(async ([responseImages, responseEvents]) => {
       const levels: ImagesList = responseImages.levels;
@@ -360,17 +362,23 @@ export default class FlipperImagesPlugin extends FlipperPlugin<
   };
   updateCaches = (reason: string) => {
     debugLog('Requesting images list (reason=' + reason + ')');
-    this.client.call('listImages').then((response: ImagesListResponse) => {
+    this.client
-      response.levels.forEach((data) =>
+      .call('listImages', {
-        this.imagePool ? this.imagePool.fetchImages(data.imageIds) : undefined,
+        showDiskImages: this.props.persistedState.showDiskImages,
-      );
+      })
-      this.props.setPersistedState({images: response.levels});
+      .then((response: ImagesListResponse) => {
-      this.updateImagesOnUI(
+        response.levels.forEach((data) =>
-        this.props.persistedState.images,
+          this.imagePool
-        this.state.selectedSurfaces,
+            ? this.imagePool.fetchImages(data.imageIds)
-        this.state.coldStartFilter,
+            : undefined,
-      );
+        );
-    });
+        this.props.setPersistedState({images: response.levels});
+        this.updateImagesOnUI(
+          this.props.persistedState.images,
+          this.state.selectedSurfaces,
+          this.state.coldStartFilter,
+        );
+      });
   };
 
   onClear = (type: string) => {
@@ -455,6 +463,16 @@ export default class FlipperImagesPlugin extends FlipperPlugin<
     });
   };
 
+  onShowDiskImages = (checked: boolean) => {
+    this.props.logger.track('usage', 'fresco:onShowDiskImages', {
+      enabled: checked,
+    });
+    this.props.setPersistedState({
+      showDiskImages: checked,
+    });
+    this.updateCaches('refresh');
+  };
+
   render() {
     const options = [...this.props.persistedState.surfaceList].reduce(
       (acc, item) => {
@@ -492,6 +510,8 @@ export default class FlipperImagesPlugin extends FlipperPlugin<
             this.props.persistedState.isLeakTrackingEnabled
           }
           onTrackLeaks={this.onTrackLeaks}
+          showDiskImages={this.props.persistedState.showDiskImages}
+          onShowDiskImages={this.onShowDiskImages}
         />
         <DetailSidebar>{this.renderSidebar()}</DetailSidebar>
       </React.Fragment>