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/InspectorSidebar.tsx

@@ -18,7 +18,7 @@ import {
   Logger,
 } from 'flipper';
 import {Panel} from 'flipper-plugin';
-import {PureComponent} from 'react';
+import {PureComponent, useState} from 'react';
 import React from 'react';
 import {useMemo, useEffect} from 'react';
 import {kebabCase} from 'lodash';
@@ -85,11 +85,19 @@ type Props = {
   client: PluginClient;
   realClient: Client;
   logger: Logger;
+  inSnapshotMode: boolean;
+};
+
+type ElementSnapshot = {
+  element: Element | null;
+  snapshot: String | null;
 };
 
 const Sidebar: React.FC<Props> = (props: Props) => {
   const {element} = props;
 
+  const [elementSnapshot, setElementSnapshot] = useState<ElementSnapshot>();
+
   const [sectionDefs, sectionKeys] = useMemo(() => {
     const sectionKeys = [];
     const sectionDefs = [];
@@ -135,7 +143,36 @@ const Sidebar: React.FC<Props> = (props: Props) => {
     return [sectionDefs, sectionKeys];
   }, [element]);
 
-  const sections: Array<React.ReactNode> = (
+  useEffect(() => {
+    if (
+      props.inSnapshotMode &&
+      (!elementSnapshot || elementSnapshot.element != element)
+    ) {
+      props.client
+        .call('getSnapshot', {
+          id: props.element?.id,
+          name: props.element?.name,
+        })
+        .then((response) => {
+          setElementSnapshot({element: element, snapshot: response.snapshot});
+        })
+        .catch((e) => {
+          console.log(
+            'ElementsInspector unable to obtain screenshot for the selected item',
+            e,
+          );
+        });
+    }
+  }, [
+    element,
+    elementSnapshot,
+    props.client,
+    props.element?.id,
+    props.element?.name,
+    props.inSnapshotMode,
+  ]);
+
+  const sidebarExtensions =
     (SidebarExtensions &&
       element?.data &&
       Object.entries(SidebarExtensions).map(([ext, Comp]) => (
@@ -147,18 +184,32 @@ const Sidebar: React.FC<Props> = (props: Props) => {
           selectedNode={element}
         />
       ))) ||
-    []
-  ).concat(
-    sectionDefs.map((def) => (
-      <InspectorSidebarSection
-        tooltips={props.tooltips}
-        key={def.key}
-        id={def.id}
-        data={def.data}
-        onValueChanged={props.onValueChanged}
-      />
-    )),
-  );
+    [];
+
+  const sidebarInspector = sectionDefs.map((def) => (
+    <InspectorSidebarSection
+      tooltips={props.tooltips}
+      key={def.key}
+      id={def.id}
+      data={def.data}
+      onValueChanged={props.onValueChanged}
+    />
+  ));
+
+  const sidebarPreview =
+    props.inSnapshotMode && elementSnapshot?.snapshot ? (
+      <Panel key="preview" title="Preview" pad>
+        <img
+          style={{
+            display: 'block',
+            marginLeft: 'auto',
+            marginRight: 'auto',
+            width: '100%',
+          }}
+          src={'data:image/png;base64,' + elementSnapshot?.snapshot}
+        />
+      </Panel>
+    ) : null;
 
   useEffect(() => {
     sectionKeys.map((key) =>
@@ -169,7 +220,13 @@ const Sidebar: React.FC<Props> = (props: Props) => {
   if (!element || !element.data) {
     return <NoData grow>No data</NoData>;
   }
-  return <>{sections}</>;
+  return (
+    <>
+      {sidebarExtensions}
+      {sidebarInspector}
+      {sidebarPreview}
+    </>
+  );
 };
 
 export default Sidebar;

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}
           />