Subtree Update => Framescan

Summary: This is purely a cosmetic change but more accurately reflects the nature of how we send data from device to desktop. Ie its always an entire frame rather than subtrees. This helps with correctness great Both ios and android are like this and have been for a while.

Reviewed By: lblasa

Differential Revision: D45080088

fbshipit-source-id: 8f68047056c4825b0b1dd89f26c7fa462e2ecb1b

desktop/plugins/public/ui-debugger/components/Visualization2D.tsx

@@ -136,7 +136,7 @@ export const Visualization2D: React.FC<
           }}>
           {snapshotNode && (
             <img
-              src={'data:image/png;base64,' + snapshot.base64Image}
+              src={'data:image/png;base64,' + snapshot.data}
               style={{
                 marginLeft: toPx(-focusState.focusedRootGlobalOffset.x),
                 marginTop: toPx(-focusState.focusedRootGlobalOffset.y),

desktop/plugins/public/ui-debugger/index.tsx

@@ -16,16 +16,16 @@ import {
 } from 'flipper-plugin';
 import {
   Events,
+  FrameScanEvent,
   FrameworkEvent,
   FrameworkEventType,
   Id,
   Metadata,
   MetadataId,
   PerformanceStatsEvent,
-  Snapshot,
+  SnapshotInfo,
   StreamInterceptorError,
   StreamState,
-  SubtreeUpdateEvent,
   UINode,
 } from './types';
 import {Draft} from 'immer';
@@ -33,7 +33,6 @@ import {QueryClient, setLogger} from 'react-query';
 import {tracker} from './tracker';
 import {getStreamInterceptor} from './fb-stubs/StreamInterceptor';
 
-type SnapshotInfo = {nodeId: Id; base64Image: Snapshot};
 type LiveClientState = {
   snapshotInfo: SnapshotInfo | null;
   nodes: Map<Id, UINode>;
@@ -41,7 +40,7 @@ type LiveClientState = {
 
 type PendingData = {
   metadata: Record<MetadataId, Metadata>;
-  frame: SubtreeUpdateEvent | null;
+  frame: FrameScanEvent | null;
 };
 
 type UIState = {
@@ -114,7 +113,7 @@ export function plugin(client: PluginClient<Events>) {
           return;
         }
         if (pendingData.frame != null) {
-          if (!(await processSubtreeUpdate(pendingData.frame))) {
+          if (!(await processFrame(pendingData.frame))) {
             //back into error state, dont proceed
             return;
           }
@@ -237,29 +236,27 @@ export function plugin(client: PluginClient<Events>) {
   };
 
   const seenNodes = new Set<Id>();
-  const processSubtreeUpdate = async (subtreeUpdate: SubtreeUpdateEvent) => {
+  const processFrame = async (frameScan: FrameScanEvent) => {
     try {
       const processedNodes = await streamInterceptor.transformNodes(
-        new Map(subtreeUpdate.nodes.map((node) => [node.id, {...node}])),
+        new Map(frameScan.nodes.map((node) => [node.id, {...node}])),
       );
-      applyFrameData(processedNodes, {
-        nodeId: subtreeUpdate.rootId,
-        base64Image: subtreeUpdate.snapshot,
-      });
 
-      applyFrameworkEvents(subtreeUpdate);
+      applyFrameData(processedNodes, frameScan.snapshot);
+
+      applyFrameworkEvents(frameScan);
       return true;
     } catch (error) {
-      pendingData.frame = subtreeUpdate;
+      pendingData.frame = frameScan;
       handleStreamError('Frame', error);
       return false;
     }
   };
 
-  function applyFrameworkEvents(subtreeUpdate: SubtreeUpdateEvent) {
+  function applyFrameworkEvents(frameScan: FrameScanEvent) {
     frameworkEvents.update((draft) => {
-      if (subtreeUpdate.frameworkEvents) {
-        subtreeUpdate.frameworkEvents.forEach((frameworkEvent) => {
+      if (frameScan?.frameworkEvents) {
+        frameScan.frameworkEvents.forEach((frameworkEvent) => {
           if (
             uiState.frameworkEventMonitoring.get().get(frameworkEvent.type) ===
               true &&
@@ -279,7 +276,7 @@ export function plugin(client: PluginClient<Events>) {
         });
         setTimeout(() => {
           highlightedNodes.update((laterDraft) => {
-            for (const event of subtreeUpdate.frameworkEvents!!.values()) {
+            for (const event of frameScan.frameworkEvents!!.values()) {
               laterDraft.delete(event.nodeId);
             }
           });
@@ -291,7 +288,7 @@ export function plugin(client: PluginClient<Events>) {
   //todo deal with racecondition, where bloks screen is fetching, takes time then you go back get more recent frame then bloks screen comes and overrites it
   function applyFrameData(
     nodes: Map<Id, UINode>,
-    snapshotInfo: SnapshotInfo | null,
+    snapshotInfo: SnapshotInfo | undefined,
   ) {
     liveClientData = produce(liveClientData, (draft) => {
       if (snapshotInfo) {
@@ -323,7 +320,15 @@ export function plugin(client: PluginClient<Events>) {
       checkFocusedNodeStillActive(uiState, nodesAtom.get());
     }
   }
-  client.onMessage('subtreeUpdate', processSubtreeUpdate);
+  client.onMessage('subtreeUpdate', (subtreeUpdate) => {
+    processFrame({
+      frameTime: subtreeUpdate.txId,
+      nodes: subtreeUpdate.nodes,
+      snapshot: {data: subtreeUpdate.snapshot, nodeId: subtreeUpdate.rootId},
+      frameworkEvents: subtreeUpdate.frameworkEvents,
+    });
+  });
+  client.onMessage('frameScan', processFrame);
 
   const queryClient = new QueryClient({});
 

desktop/plugins/public/ui-debugger/types.tsx

@@ -22,6 +22,7 @@ export type StreamState =
 export type Events = {
   init: InitEvent;
   subtreeUpdate: SubtreeUpdateEvent;
+  frameScan: FrameScanEvent;
   perfStats: PerfStatsEvent;
   performanceStats: PerformanceStatsEvent;
   metadataUpdate: UpdateMetadataEvent;
@@ -29,6 +30,17 @@ export type Events = {
 
 export type StreamFlowState = {paused: boolean};
 
+export type FrameScanEvent = {
+  frameTime: number;
+  nodes: UINode[];
+  snapshot?: SnapshotInfo;
+  frameworkEvents?: FrameworkEvent[];
+};
+
+/**
+ * @deprecated This  event should not be used and soon will
+ * be removed. FrameScan should be used instead.
+ */
 export type SubtreeUpdateEvent = {
   txId: number;
   rootId: Id;
@@ -175,6 +187,7 @@ export type Color = {
 };
 
 export type Snapshot = string;
+export type SnapshotInfo = {nodeId: Id; data: Snapshot};
 export type Id = number | string;
 
 export type MetadataId = number;