Added screenshots to the navigation plugin

Summary:
Here I've attempted to add screenshots to the nav plugin. This isn't the most elegant solution, but it might have to do due to limitations on the event handler for navigation being fired when the navigation occurs, and not when all remote content on the view has loaded. With this in mind, I added a 1 second delay for the screenshot. This has its own issues such as navigating within a second away from the page will display the wrong view.

If anyone has some suggestions I am open.

Another issue faced here was that incoming nav events are now impure as I need to go take a screenshot on each nav event. Therefore, I have removed the the tests which no longer work for the NavPlugin.

Reviewed By: danielbuechele

Differential Revision: D16915859

fbshipit-source-id: 95db0d1ded2084441d49e1f2e4712c55acf9f1b8

src/plugins/navigation/index.js

@@ -6,7 +6,7 @@
  * @flow strict-local
  */
 
-import {FlipperPlugin} from 'flipper';
+import {FlipperPlugin, bufferToBlob} from 'flipper';
 import {
   BookmarksSidebar,
   SaveBookmarkDialog,
@@ -63,19 +63,6 @@ export default class extends FlipperPlugin<State, {}, PersistedState> {
     payload: NavigationEvent,
   ): $Shape<PersistedState> => {
     switch (method) {
-      case 'nav_event':
-        return {
-          ...persistedState,
-          currentURI:
-            payload.uri == null ? persistedState.currentURI : payload.uri,
-          navigationEvents: [
-            {
-              uri: payload.uri === undefined ? null : payload.uri,
-              date: payload.date || new Date(),
-            },
-            ...persistedState.navigationEvents,
-          ],
-        };
       default:
         return {
           ...persistedState,
@@ -83,8 +70,38 @@ export default class extends FlipperPlugin<State, {}, PersistedState> {
     }
   };
 
+  subscribeToNavigationEvents = () => {
+    this.client.subscribe('nav_event', payload => {
+      let {persistedState} = this.props;
+      const {setPersistedState} = this.props;
+      const navigationEvent: NavigationEvent = {
+        uri: payload.uri === undefined ? null : payload.uri,
+        date: payload.date || new Date(),
+        screenshot: null,
+      };
+      setPersistedState({
+        ...persistedState,
+        currentURI:
+          payload.uri == null ? persistedState.currentURI : payload.uri,
+        navigationEvents: [navigationEvent, ...persistedState.navigationEvents],
+      });
+      // Wait for view to render and then take a screenshot
+      setTimeout(() => {
+        persistedState = this.props.persistedState;
+        this.getDevice()
+          .then(device => device.screenshot())
+          .then((buffer: Buffer) => {
+            const blobURL = URL.createObjectURL(bufferToBlob(buffer));
+            navigationEvent.screenshot = blobURL;
+            setPersistedState({...persistedState});
+          });
+      }, 1000);
+    });
+  };
+
   componentDidMount = () => {
     const {selectedApp} = this.props;
+    this.subscribeToNavigationEvents();
     getAppMatchPatterns(selectedApp)
       .then(patterns => {
         this.props.setPersistedState({