Improve box visualser by indicating in tree which components have box…

… model data

Summary: it was unclear which elements had padding / margin before so this should help with that

Reviewed By: antonk52

Differential Revision: D59061383

fbshipit-source-id: 6c92dcd7e086ddc537ab8d9a40a0fecc15dc92b8

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

@@ -34,6 +34,7 @@ export type Color = string;
 export type UIState = {
   viewMode: Atom<ViewMode>;
   wireFrameMode: Atom<WireFrameMode>;
+  boxVisualiserEnabled: Atom<boolean>;
   isConnected: Atom<boolean>;
   isPaused: Atom<boolean>;
   streamState: Atom<StreamState>;
@@ -120,6 +121,7 @@ export type UIActions = {
   setVisualiserWidth: (width: number) => void;
   onSetFilterMainThreadMonitoring: (toggled: boolean) => void;
   onSetViewMode: (viewMode: ViewMode) => void;
+  onSetBoxVisualiserEnabled: (enabled: boolean) => void;
   onSetFrameworkEventMonitored: (
     eventType: FrameworkEventType,
     monitored: boolean,

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

@@ -7,7 +7,14 @@
  * @format
  */
 
-import {Id, ClientNode, NodeMap, MetadataId, Metadata} from '../../ClientTypes';
+import {
+  Id,
+  ClientNode,
+  NodeMap,
+  MetadataId,
+  Metadata,
+  BoxData,
+} from '../../ClientTypes';
 import {Color, OnSelectNode} from '../../DesktopTypes';
 import React, {
   CSSProperties,
@@ -39,7 +46,11 @@ import {
   useKeyboardControlsCallback,
 } from './useKeyboardControls';
 import {toTreeList} from './toTreeList';
-import {CaretDownOutlined, WarningOutlined} from '@ant-design/icons';
+import {
+  BorderOutlined,
+  CaretDownOutlined,
+  WarningOutlined,
+} from '@ant-design/icons';
 
 const {Text} = Typography;
 
@@ -74,6 +85,9 @@ export function Tree2({
   const nodeSelection = useValue(instance.uiState.nodeSelection);
   const isContextMenuOpen = useValue(instance.uiState.isContextMenuOpen);
   const hoveredNode = head(useValue(instance.uiState.hoveredNodes));
+  const isBoxVisualiserEnabled = useValue(
+    instance.uiState.boxVisualiserEnabled,
+  );
 
   const filterMainThreadMonitoring = useValue(
     instance.uiState.filterMainThreadMonitoring,
@@ -290,6 +304,7 @@ export function Tree2({
                   innerRef={refs[virtualRow.index]}
                   key={virtualRow.index}
                   treeNode={treeNodes[virtualRow.index]}
+                  boxVisualiserEnabled={isBoxVisualiserEnabled}
                   highlightedNodes={highlightedNodes}
                   selectedNode={nodeSelection?.node.id}
                   hoveredNode={hoveredNode}
@@ -399,12 +414,14 @@ export function TreeNodeRow({
   onExpandNode,
   onCollapseNode,
   onHoverNode,
+  boxVisualiserEnabled,
 }: {
   transform: string;
   innerRef: Ref<any>;
   treeNode: TreeNode;
   highlightedNodes: Map<Id, Color>;
   selectedNode?: Id;
+  boxVisualiserEnabled: boolean;
   hoveredNode?: Id;
   isUsingKBToScroll: RefObject<MillisSinceEpoch>;
   isContextMenuOpen: boolean;
@@ -470,6 +487,11 @@ export function TreeNodeRow({
 
         {nodeIcon(treeNode)}
         <TreeNodeTextContent treeNode={treeNode} />
+        {boxVisualiserEnabled && boxDataHasData(treeNode.boxData) && (
+          <Tooltip title="This element has padding, margin or border">
+            <BorderOutlined style={{padding: theme.space.medium}} />
+          </Tooltip>
+        )}
         {treeNode.frameworkEvents && (
           <Tooltip
             title={`${treeNode.frameworkEvents} monitored framework events`}>
@@ -486,6 +508,21 @@ export function TreeNodeRow({
     </div>
   );
 }
+function boxDataHasData(boxData?: BoxData) {
+  if (boxData == null) {
+    return false;
+  }
+  for (let i = 0; i < boxData.border.length - 1; i++) {
+    if (
+      boxData.border[i] > 0 ||
+      boxData.padding[i] > 0 ||
+      boxData.margin[i] > 0
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
 
 function TreeNodeTextContent({treeNode}: {treeNode: TreeNode}) {
   const isZero = treeNode.bounds.width === 0 && treeNode.bounds.height === 0;

desktop/plugins/public/ui-debugger/components/tree/TreeControls.tsx

@@ -267,6 +267,7 @@ function FrameworkEventsMonitoringModal({
 
             <div style={{position: 'relative', height: 26, marginTop: 16}}>
               <TreeNodeRow
+                boxVisualiserEnabled={false}
                 transform=""
                 onCollapseNode={() => {}}
                 onExpandNode={() => {}}

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

@@ -53,9 +53,8 @@ export const Visualization2D: React.FC<
   const focusedNodeId = useValue(instance.uiState.focusedNode);
   const nodeSelection = useValue(instance.uiState.nodeSelection);
   const wireFrameMode = useValue(instance.uiState.wireFrameMode);
-
+  const boxVisualiserEnabled = useValue(instance.uiState.boxVisualiserEnabled);
   const [alignmentModeEnabled, setAlignmentModeEnabled] = useState(false);
-  const [boxVisualiserEnabled, setBoxVisualiserEnabled] = useState(false);
 
   const [targetMode, setTargetMode] = useState<TargetModeState>({
     state: 'disabled',
@@ -83,7 +82,7 @@ export const Visualization2D: React.FC<
           alignmentModeEnabled={alignmentModeEnabled}
           setAlignmentModeEnabled={setAlignmentModeEnabled}
           boxVisualiserEnabled={boxVisualiserEnabled}
-          setBoxVisualiserEnabled={setBoxVisualiserEnabled}
+          setBoxVisualiserEnabled={instance.uiActions.onSetBoxVisualiserEnabled}
         />
       )}
       <Visualization2DContent

desktop/plugins/public/ui-debugger/components/visualizer/VisualizerControls.tsx

@@ -130,9 +130,6 @@ export function VisualiserControls({
               disabled={boxModeDisabled}
               shape="circle"
               onClick={() => {
-                tracker.track('box-visualiser-switched', {
-                  on: !boxVisualiserEnabled,
-                });
                 setBoxVisualiserEnabled(!boxVisualiserEnabled);
               }}
               icon={

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

@@ -343,7 +343,7 @@ export * from './ClientTypes';
 function createUIState(): UIState {
   return {
     isConnected: createState(false),
-
+    boxVisualiserEnabled: createState(false),
     viewMode: createState({mode: 'default'}),
 
     //used to disabled hover effects which cause rerenders and mess up the existing context menu

desktop/plugins/public/ui-debugger/plugin/uiActions.tsx

@@ -311,9 +311,17 @@ export function uiActions(
     });
   };
 
+  const onSetBoxVisualiserEnabled = (enabled: boolean) => {
+    uiState.boxVisualiserEnabled.set(enabled);
+    tracker.track('box-visualiser-switched', {
+      on: enabled,
+    });
+  };
+
   return {
     onExpandNode,
     onCollapseNode,
+    onSetBoxVisualiserEnabled,
     onHoverNode,
     onSelectNode,
     onContextMenuOpen,