From cd67ce59f7dd70cbf459f0d4698071af6ee0abc8 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Thu, 11 May 2023 08:15:19 -0700
Subject: [PATCH] Improve selection / hovered state of visualiser

Summary:
Previously we used an overlay to indicated selected but this was kind of hard to see due to <1 opacity. I think this approach where we enchance the border is clearer.

Also we used border colour earlier to indicate type of node which i think was never obvious to the user. Given that nodes heavily overlap we should remove this design language

changelog: UIDebugger, improve selected and hover state of the visualiser

Reviewed By: antonk52

Differential Revision: D45737758

fbshipit-source-id: 5299043656787d6479cff6ec2b38cebe8417fd53
---
 .../components/Visualization2D.tsx            | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
index 9d95a741b..e8e6bb056 100644
--- a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
+++ b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
@@ -227,12 +227,8 @@ function Visualization2DNode({
           top: toPx(node.bounds.y),
           width: toPx(node.bounds.width),
           height: toPx(node.bounds.height),
-          opacity: isSelected || isHighlighted ? 0.3 : 1,
-          backgroundColor: isHighlighted
-            ? 'red'
-            : isSelected
-            ? theme.selectionBackgroundColor
-            : 'transparent',
+          opacity: isHighlighted ? 0.3 : 1,
+          backgroundColor: isHighlighted ? 'red' : 'transparent',
         }}
         onClick={(e) => {
           e.stopPropagation();
@@ -244,7 +240,10 @@ function Visualization2DNode({
             onSelectNode(hoveredNodes[0]);
           }
         }}>
-        <NodeBorder hovered={isHovered} tags={node.tags}></NodeBorder>
+        <NodeBorder
+          hovered={isHovered}
+          selected={isSelected}
+          tags={node.tags}></NodeBorder>
         {children}
       </div>
     </Tooltip>
@@ -336,21 +335,25 @@ const ContextMenu: React.FC<{nodes: Map<Id, UINode>}> = ({children}) => {
  * node itself so that it has the same size but the border doesnt affect the sizing of its children
  * as border is part of the box model
  */
-const NodeBorder = styled.div<{tags: Tag[]; hovered: boolean}>((props) => ({
+const NodeBorder = styled.div<{
+  tags: Tag[];
+  hovered: boolean;
+  selected: boolean;
+}>((props) => ({
   position: 'absolute',
   top: 0,
   left: 0,
   bottom: 0,
   right: 0,
   boxSizing: 'border-box',
-  borderWidth: props.hovered ? '2px' : '1px',
+  borderWidth: props.selected || props.hovered ? '2px' : '1px',
   borderStyle: 'solid',
   color: 'transparent',
-  borderColor: props.tags.includes('Declarative')
-    ? 'green'
-    : props.tags.includes('Native')
-    ? 'blue'
-    : 'black',
+  borderColor: props.selected
+    ? theme.primaryColor
+    : props.hovered
+    ? theme.selectionBackgroundColor
+    : theme.disabledColor,
 }));
 
 const longHoverDelay = 200;