Dont allow focusing nodes with zero area

Summary: If you focused a node with zero area (e.g a fragment) it would make the visualiser disappear. Simple solution is to prevent this in this case

Reviewed By: mweststrate

Differential Revision: D43363219

fbshipit-source-id: 8035db47486a2872fd86a5336e9fcaabeb0016a6

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

@@ -435,8 +435,8 @@ const ContextMenu: React.FC<{
 }) => {
   const copyItems: ReactNode[] = [];
   const hoveredNode = nodes.get(hoveredNodeId ?? Number.MAX_SAFE_INTEGER);
+
   if (hoveredNode) {
-    copyItems.push(<Menu.Divider />);
     copyItems.push(
       <UIDebuggerMenuItem
         key={'Copy Element name'}
@@ -459,6 +459,28 @@ const ContextMenu: React.FC<{
       )),
     );
   }
+  const focus = hoveredNode != null &&
+    focusedNodeId !== hoveredNodeId &&
+    hoveredNode.bounds.height !== 0 &&
+    hoveredNode.bounds.width !== 0 && (
+      <UIDebuggerMenuItem
+        key="focus"
+        text={`Focus ${hoveredNode.name}`}
+        onClick={() => {
+          onFocusNode(hoveredNodeId);
+        }}
+      />
+    );
+
+  const removeFocus = focusedNodeId && (
+    <UIDebuggerMenuItem
+      key="remove-focus"
+      text="Remove focus"
+      onClick={() => {
+        onFocusNode(undefined);
+      }}
+    />
+  );
   return (
     <Dropdown
       onVisibleChange={(visible) => {
@@ -466,25 +488,9 @@ const ContextMenu: React.FC<{
       }}
       overlay={() => (
         <Menu>
-          {hoveredNode != null && focusedNodeId !== hoveredNodeId && (
+          {focus}
-            <UIDebuggerMenuItem
+          {removeFocus}
-              key="focus"
+          {(focus || removeFocus) && <Menu.Divider />}
-              text={`Focus ${hoveredNode.name}`}
-              onClick={() => {
-                onFocusNode(hoveredNodeId);
-              }}
-            />
-          )}
-
-          {focusedNodeId && (
-            <UIDebuggerMenuItem
-              key="remove-focus"
-              text="Remove focus"
-              onClick={() => {
-                onFocusNode(undefined);
-              }}
-            />
-          )}
           {copyItems}
         </Menu>
       )}