UI preview of selected element

Summary:
This is a prototype for view preview within Flipper for iOS (Android next).

If enabled, a preview of the selected element is rendered in the attribute inspector.

Changelog: Add view preview/snapshot for the Layout plugin on iOS.

Reviewed By: antonk52

Differential Revision: D34990372

fbshipit-source-id: 1984514fbf59041ad236008a8db10569c5fc5f94

iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.mm

@@ -155,6 +155,16 @@ NSObject* flattenLayoutEditorMessage(NSObject* field);
                   },
                   responder);
             }];
+
+  [connection receive:@"getSnapshot"
+            withBlock:^(NSDictionary* params, id<FlipperResponder> responder) {
+              FlipperPerformBlockOnMainThread(
+                  ^{
+                    [weakSelf onCallGetSnapshot:params[@"id"]
+                                  withResponder:responder];
+                  },
+                  responder);
+            }];
 }
 
 - (void)didDisconnect {
@@ -320,6 +330,46 @@ NSObject* flattenLayoutEditorMessage(NSObject* field) {
   return;
 }
 
+- (void)onCallGetSnapshot:(NSString*)objectId
+            withResponder:(id<FlipperResponder>)responder {
+  if (objectId == nil || [objectId isKindOfClass:[NSNull class]]) {
+    [responder error:@{@"error" : @"unable to get snapshot for object"}];
+    return;
+  }
+
+  id object = [_trackedObjects objectForKey:objectId];
+  if (object == nil) {
+    [responder error:@{@"error" : @"unable to get snapshot for object"}];
+    return;
+  }
+
+  id lastHighlightedObject = nil;
+  id lastHighlightedDescriptor = nil;
+  if (_lastHighlightedNode != nil) {
+    lastHighlightedObject = [_trackedObjects objectForKey:_lastHighlightedNode];
+    if (lastHighlightedObject != nil) {
+      lastHighlightedDescriptor = [self->_descriptorMapper
+          descriptorForClass:[lastHighlightedObject class]];
+      [lastHighlightedDescriptor setHighlighted:NO
+                                        forNode:lastHighlightedObject];
+    }
+  }
+
+  SKNodeDescriptor* descriptor =
+      [self->_descriptorMapper descriptorForClass:[object class]];
+  UIImage* snapshot = [descriptor getSnapshot:YES forNode:object];
+  NSData* snapshotData = UIImagePNGRepresentation(snapshot);
+  NSString* snapshotBase64 = [snapshotData
+      base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength];
+
+  if (lastHighlightedDescriptor != nil) {
+    [lastHighlightedDescriptor setHighlighted:YES
+                                      forNode:lastHighlightedObject];
+  }
+
+  [responder success:@{@"snapshot" : snapshotBase64, @"id" : objectId}];
+}
+
 - (void)onCallSetHighlighted:(NSString*)objectId
                withResponder:(id<FlipperResponder>)responder {
   if (_lastHighlightedNode != nil) {

iOS/Plugins/FlipperKitPluginUtils/FlipperKitLayoutHelpers/FlipperKitLayoutHelpers/SKNodeDescriptor.h

@@ -105,6 +105,12 @@ typedef void (^SKNodeUpdateData)(id value);
  */
 - (void)setHighlighted:(BOOL)highlighted forNode:(T)node;
 
+/**
+ Used to grab a snapshot of the specified node which is currently selected in
+ the Flipper application.
+ */
+- (UIImage*)getSnapshot:(BOOL)includeChildren forNode:(T)node;
+
 /**
  Perform hit testing on the given node. Either continue the search in
  one of the children of the node, or finish the hit testing on this

iOS/Plugins/FlipperKitPluginUtils/FlipperKitLayoutHelpers/FlipperKitLayoutHelpers/SKNodeDescriptor.mm

@@ -68,6 +68,10 @@
   return @[];
 }
 
+- (UIImage*)getSnapshot:(BOOL)includeChildren forNode:(id)node {
+  return nil;
+}
+
 - (void)setHighlighted:(BOOL)highlighted forNode:(id)node {
 }
 

iOS/Plugins/FlipperKitPluginUtils/FlipperKitLayoutIOSDescriptors/FlipperKitLayoutIOSDescriptors/SKApplicationDescriptor.m

@@ -32,6 +32,11 @@
   [windowDescriptor setHighlighted:highlighted forNode:[node keyWindow]];
 }
 
+- (UIImage*)getSnapshot:(BOOL)includeChildren forNode:(UIApplication*)node {
+  SKNodeDescriptor* descriptor = [self descriptorForClass:[UIView class]];
+  return [descriptor getSnapshot:includeChildren forNode:[node keyWindow]];
+}
+
 - (void)hitTest:(SKTouch*)touch forNode:(UIApplication*)node {
   bool finish = true;
   for (NSInteger index = [self childCountForNode:node] - 1; index >= 0;

iOS/Plugins/FlipperKitPluginUtils/FlipperKitLayoutIOSDescriptors/FlipperKitLayoutIOSDescriptors/SKButtonDescriptor.mm

@@ -87,6 +87,11 @@ return mutations;
   [viewDescriptor setHighlighted:highlighted forNode:node];
 }
 
+- (UIImage*)getSnapshot:(BOOL)includeChildren forNode:(UIButton*)node {
+  SKNodeDescriptor* descriptor = [self descriptorForClass:[UIView class]];
+  return [descriptor getSnapshot:includeChildren forNode:node];
+}
+
 - (void)hitTest:(SKTouch*)touch forNode:(UIButton*)node {
   [touch finish];
 }

iOS/Plugins/FlipperKitPluginUtils/FlipperKitLayoutIOSDescriptors/FlipperKitLayoutIOSDescriptors/SKScrollViewDescriptor.m

@@ -83,6 +83,11 @@
   }
 }
 
+- (UIImage*)getSnapshot:(BOOL)includeChildren forNode:(UIScrollView*)node {
+  SKNodeDescriptor* descriptor = [self descriptorForClass:[UIView class]];
+  return [descriptor getSnapshot:includeChildren forNode:node];
+}
+
 @end
 
 #endif

iOS/Plugins/FlipperKitPluginUtils/FlipperKitLayoutIOSDescriptors/FlipperKitLayoutIOSDescriptors/SKViewControllerDescriptor.m

@@ -36,6 +36,11 @@
   [descriptor setHighlighted:highlighted forNode:node.view];
 }
 
+- (UIImage*)getSnapshot:(BOOL)includeChildren forNode:(UIViewController*)node {
+  SKNodeDescriptor* descriptor = [self descriptorForClass:[UIView class]];
+  return [descriptor getSnapshot:includeChildren forNode:node.view];
+}
+
 - (void)hitTest:(SKTouch*)touch forNode:(UIViewController*)node {
   [touch continueWithChildIndex:0 withOffset:(CGPoint){0, 0}];
 }

iOS/Plugins/FlipperKitPluginUtils/FlipperKitLayoutIOSDescriptors/FlipperKitLayoutIOSDescriptors/SKViewDescriptor.mm

@@ -497,6 +497,21 @@ return dataMutations;
   }
 }
 
+- (UIImage*)getSnapshot:(BOOL)includeChildren forNode:(UIView*)node {
+  if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)]) {
+    UIGraphicsBeginImageContextWithOptions(
+        node.bounds.size, node.isOpaque, 0.0);
+  } else {
+    UIGraphicsBeginImageContext(node.bounds.size);
+  }
+
+  [node.layer renderInContext:UIGraphicsGetCurrentContext()];
+
+  UIImage* img = UIGraphicsGetImageFromCurrentImageContext();
+  UIGraphicsEndImageContext();
+  return img;
+}
+
 - (void)hitTest:(SKTouch*)touch forNode:(UIView*)node {
   bool finish = true;
   for (NSInteger index = [self childCountForNode:node] - 1; index >= 0;