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,14 +459,10 @@ const ContextMenu: React.FC<{
       )),
     );
   }
-  return (
+  const focus = hoveredNode != null &&
-    <Dropdown
+    focusedNodeId !== hoveredNodeId &&
-      onVisibleChange={(visible) => {
+    hoveredNode.bounds.height !== 0 &&
-        onContextMenuOpen(visible);
+    hoveredNode.bounds.width !== 0 && (
-      }}
-      overlay={() => (
-        <Menu>
-          {hoveredNode != null && focusedNodeId !== hoveredNodeId && (
       <UIDebuggerMenuItem
         key="focus"
         text={`Focus ${hoveredNode.name}`}
@@ -474,9 +470,9 @@ const ContextMenu: React.FC<{
           onFocusNode(hoveredNodeId);
         }}
       />
-          )}
+    );
 
-          {focusedNodeId && (
+  const removeFocus = focusedNodeId && (
     <UIDebuggerMenuItem
       key="remove-focus"
       text="Remove focus"
@@ -484,7 +480,17 @@ const ContextMenu: React.FC<{
         onFocusNode(undefined);
       }}
     />
-          )}
+  );
+  return (
+    <Dropdown
+      onVisibleChange={(visible) => {
+        onContextMenuOpen(visible);
+      }}
+      overlay={() => (
+        <Menu>
+          {focus}
+          {removeFocus}
+          {(focus || removeFocus) && <Menu.Divider />}
           {copyItems}
         </Menu>
       )}