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

desktop/plugins/public/layout/index.tsx

@@ -40,6 +40,7 @@ import {getFlipperLib} from 'flipper-plugin';
 type State = {
   init: boolean;
   inTargetMode: boolean;
+  inSnapshotMode: boolean;
   inAXMode: boolean;
   inAlignmentMode: boolean;
   selectedElement: ElementID | null | undefined;
@@ -201,6 +202,7 @@ export default class LayoutPlugin extends FlipperPlugin<
   state: State = {
     init: false,
     inTargetMode: false,
+    inSnapshotMode: false,
     inAXMode: false,
     inAlignmentMode: false,
     selectedElement: null,
@@ -317,6 +319,10 @@ export default class LayoutPlugin extends FlipperPlugin<
     }
   };
 
+  onToggleSnapshotMode = () => {
+    this.setState((prevState) => ({inSnapshotMode: !prevState.inSnapshotMode}));
+  };
+
   onToggleAXMode = () => {
     this.setState({inAXMode: !this.state.inAXMode});
   };
@@ -476,14 +482,26 @@ export default class LayoutPlugin extends FlipperPlugin<
           <Toolbar>
             {!this.props.isArchivedDevice && (
               <ToolbarIcon
+                key="targetMode"
                 onClick={this.onToggleTargetMode}
                 title="Toggle target mode"
                 icon="target"
                 active={this.state.inTargetMode}
               />
             )}
+            {!this.props.isArchivedDevice &&
+              this.realClient.query.os === 'iOS' && (
+                <ToolbarIcon
+                  key="snapshotMode"
+                  onClick={this.onToggleSnapshotMode}
+                  title="Toggle to see view snapshots on the attribute inspector"
+                  icon="eye"
+                  active={this.state.inSnapshotMode}
+                />
+              )}
             {this.realClient.query.os === 'Android' && (
               <ToolbarIcon
+                key="axMode"
                 onClick={this.onToggleAXMode}
                 title="Toggle to see the accessibility hierarchy"
                 icon="accessibility"
@@ -492,6 +510,7 @@ export default class LayoutPlugin extends FlipperPlugin<
             )}
             {!this.props.isArchivedDevice && (
               <ToolbarIcon
+                key="alignmentMode"
                 onClick={this.onToggleAlignmentMode}
                 title="Toggle AlignmentMode to show alignment lines"
                 icon="borders"
@@ -500,6 +519,7 @@ export default class LayoutPlugin extends FlipperPlugin<
             )}
             {this.props.isArchivedDevice && this.state.visualizerScreenshot && (
               <ToolbarIcon
+                key="visualizer"
                 onClick={this.onToggleVisualizer}
                 title="Toggle visual recreation of layout"
                 icon="mobile"
@@ -534,6 +554,7 @@ export default class LayoutPlugin extends FlipperPlugin<
             client={this.getClient()}
             realClient={this.realClient}
             element={element}
+            inSnapshotMode={this.state.inSnapshotMode}
             onValueChanged={this.onDataValueChanged}
             logger={this.props.logger}
           />